@font-face {
  font-family: 'MontSerrat-Black';
  src: url('/fonts/Montserrat-Black.otf') format('truetype');
}

@font-face {
  font-family: 'MontSerrat-Hairline';
  src: url('/fonts/Montserrat-Hairline.otf') format('truetype');
}
@font-face {
  font-family: 'MontSerrat-Light';
  src: url('/fonts/Montserrat-Light.otf') format('truetype');
}
/*colors reference

CERTIFICATION RESOURCES GREY: rgb(246,246,246)
RESOURE CARD GREY: rgb(234,234,234);
ORANGE: #e57e56;

application-links: rgb(250,150,50);
certification title: rgb(106,106,106);
;


*/



h1, h2, p {
	margin: 0;
	margin: auto;
	padding: 0;
}

p, a {
	font-family: 'MontSerrat-Light';
}

h1,h2 {
	font-family: 'MontSerrat-Black';
	letter-spacing: 0.2em;
}

h2 {
	font-family: 'MontSerrat-Black';
	letter-spacing: 0.2em;
	text-align: center;
	font-size: 1em;
	padding-top: 1em;
	letter-spacing: 0.3em
}


/* BANNER */

#content-banner {

	width: 100%;
	min-height: 345px;
	background-image: url('/certification/images/header-image-certification.jpg');
	background-size: cover;
	border-top-right-radius: 90px;
	border-top-left-radius: 90px;
	
}

#content-banner.bus-driver {
	background-image: url('/certification/images/header-image-certification-bus-driver.jpg');
	min-height: 28em;
}

#content-banner.training-instructor {
	background-image: url('/certification/images/header-image-certification-training-instructor.jpg');
	background-position-x: center;
}

#content-banner-content {
	background-color: rgba(0,0,0,0.4);
	padding-bottom: 1em;
}

#content-banner h1 {
	
	

	text-align: center;
	font-size: 1em;
	color: white;

	margin: auto;
	padding: 0.2em;
	padding-top: 7em;

	font-family: 'MontSerrat-HairLine';

	text-transform: uppercase;

}

#content-banner.training-instructor h1{
	padding-top: 2em;
	    background-color: rgba(0,0,0,0.4);
}

#content-banner h1 strong {
	font-family: 'MontSerrat-Black';
}

.content-banner-image {
	text-align: center;
}	

#content-banner.training-instructor .content-banner-image {
	visibility: hidden;
}

.content-banner-image img {
	width: 10em;
    padding: 1em;
}



#content-banner #main-text {
	width: 60%;
	display: inline-block; zoom: 1; margin-right: -4px;
	*display: inline;
	color: white;
}

#content-banner #main-text .inner {
	padding-left: 1em;
	padding-top: 2em;
	padding-right: 1em;

}

#content-banner #main-text {

	font-family: 'MontSerrat-Light';
		text-align: justify;
		font-size: 0.9em;

}

#content-banner #application-links {
	width: 39%;
	display: inline-block; zoom: 1; margin-right: -4px;
	*display: inline;
	margin-bottom: 0.5em;

}


#content-banner #application-links a {
	
	font-size:0.7em;
	text-align: center;
	text-decoration: none;
	color: rgb(250,150,50);
	border: rgb(250,150,50) solid 3px;
	
	display: block;
	margin-bottom: 1em;
	margin-right: 1em;
	padding: 0.7em;

	font-family: "MontSerrat-Black";
}

#content-banner #application-links a:hover {
	color: rgb(82,161,217);
	border: rgb(82,161,217) solid 3px;
}

/* EARN THE DESIGNATION */

#designation {
	clear: both;
	width: 100%;
	min-height: 9em;
	position: relative;

	background-color: #e57e56; // If gradients are not supported by browser

	background:         linear-gradient(  #edba78, #e57e56 );
	background-image:      -o-linear-gradient( 45deg, #edba78, #e57e56 );
	background-image:    -moz-linear-gradient( 45deg, #edba78, #e57e56 );
	background-image: -webkit-linear-gradient( 45deg, #edba78, #e57e56 );
	background-image:     -ms-linear-gradient( 45deg, #edba78, #e57e56 );
	background-image:        -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(237,186,120)), color-stop(1, rgb(229,126,86);) );

}

#designation h2 {
	color: white;
}

.designation-menu {
	margin-top: 1em;
	text-align: center;
	min-height: 3em;
}

.designation-link {

	color: white;
	font-size: 0.7em;
	border-radius: 1em;

	width: 19%;

	display: inline-block; zoom: 1; margin-right: -4px;
	*display: inline;
	position: relative;
	
	padding: 0;

	 min-height: 47px;
   display: -moz-inline-stack;
   display: inline-block;
   vertical-align: top;
   zoom: 1;
   *display: inline;
   _height: 47px;
}

.designation-link:hover {
	background: rgb(82,161,217);
}

.designation-link img {

	width: 3em;
	height: 3em;
	margin: 0.5em;
	float: left;
	vertical-align: bottom;
}

.designation-link p {
	padding: 0.5em;
	padding-top: 0.8em;
}

.designation-link a {

	position: absolute;
	left:0 ;
	top:0;
	right:0;
	bottom:0;
}

/* NOW CERTIFIED */

#now-certified {

	background: rgb(246,246,246);
	float: left;

	margin: 0;

	position:absolute;
	bottom: 0;

	border-top-right-radius: 20px;

	
}
#now-certified a:hover {
	background: rgb(94,94,94);
    color: rgb(234,234,234);

}
#now-certified a{
	padding: 1em;	
	padding-left: 2em;

	display: block;
	text-decoration: none;
	color: black;
	font-size: 0.8em;
	font-family: 'MontSerrat-Light';

	border-radius: 20px;
}

/* TRAINING HISTORY */

#training-history {
	float: right;

	border: white solid 1px;
	border-radius: 5px;
	
	margin-right: 1em;
	margin-bottom: 1em;
}


.clearfix {
	clear: both;
}

/* CERTIFICATION RESOURCES */

#certification-resources {
	clear: both;
	width: 100%;
	background: rgb(246,246,246);
	
	margin: 0;
}

#certification-resources h2 {
	color: rgb(96,96,96);
}



.certification-resources-inner {
	padding: 2em;

}

.certification-resources-inner {
	width: 66%;
	margin: auto;

}

#certification-resources h3 {
	font-size: 1em;
	letter-spacing: 0em;
	font-family: 'MontSerrat-Black';
}

#certification-resources .resource-link {
	width: 50%;
	position: relative;
	display: inline-block; margin-right: -4px; zoom: 1;
    *display: inline;
	vertical-align: top;
}

.training-instructor#certification-resources .resource-link,
.selection#certification-resources .resource-link  {
	width: 50%;
}

#certification-resources .resource-link-inner {
	
	color: black;
	text-transform: uppercase;
	font-size: 0.7em;

	margin: 1em;
	padding: 1em;
	padding-right: 10%;
	min-height: 4em;

	border-radius: 15px;
	border-top-right-radius: 50px;

	background: rgb(234,234,234);

}

#certification-resources .resource-link-inner::before {
    /*this creates a straight corner */
    content: '.';
    position: absolute;
    border-top: 50px rgb(246,246,246) solid;
    border-left: 60px transparent solid;
    right: 0;
    top: 0;
    font-size: 0px;
}

#certification-resources .resource-link-inner:hover {
	background:rgb(94,94,94);
	color: rgb(234,234,234);
}

#certification-resources .resource-link a {
	position: absolute;
	left:0 ;
	top:0;
	right:0;
	bottom:0;
}

/*         FOOTER LINKS          */

#footer-links {

	clear: both;
	width: 100%;
	min-height: 1em;
	background: rgb(234,234,234);
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;
	
	text-align: center;

	    font-size: 0.6em;
    letter-spacing: 0.2em;

}

#footer-links a {

	font-family: 'MontSerrat-Light';
	text-decoration: none;
	text-transform: uppercase;
	color: rgb(94,94,94);;
}

#footer-links a:hover {

	text-decoration: underline;
}

#footer-links p {
		padding: 1em;
}