@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: colgateFontBold;
  src: url("../customfonts/ColgateReady-Bold.otf");
}
@font-face {
  font-family: colgateFontLight;
  src: url("../customfonts/ColgateReady-Light.otf");
}

#homeArea01 h1 {margin:0 0 1% 0; font-family: colgateFontBold; letter-spacing: 1px; color:#626262;}
#homeArea01 p {margin:0; font-family: colgateFontLight; letter-spacing: 1px; text-align: center; color:#626262;}
	
#homeArea02N {
	/*width:105%;*/
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:center;
	/*margin: 4% -2.5%;*/
	}

/*BANNER COURSES*/
	
.hbannerItems {
	-webkit-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.05);
	-moz-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.05);
	box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.05);
	width:calc(85.5%/3);
	margin: 0 1.5% 3% 1.5%;		
	}

.hbannerItems:hover {
	-webkit-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.30);
	-moz-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.30);
	box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.30);
}

.hbannerItems:active {
	-webkit-box-shadow: 0px 0px 6px 3px rgba(222,33,25,0.30);
	-moz-box-shadow: 0px 0px 6px 3px rgba(222,33,25,0.30);
	box-shadow: 0px 0px 6px 3px rgba(222,33,25,0.30);
}

.hbannerItemsImg {
	-webkit-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.05);
	-moz-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.05);
	box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.05);
/*	width:calc(85.5%/3);
	margin: 0 1.5% 3% 1.5%;	*/	
	}
	
.hbannerItems img {
	vertical-align: middle;
	width:100%;
	}
	
.hbannerItems  a {
	text-decoration: none;
	}
	
.hbannerItems  h2 {
	text-transform: uppercase;
	font-family: colgateFontBold;
/*	font-size: 160%;
	line-height: 120%;
	padding: 0.25% 3%;*/
	}
	
.hbannerItems p {
	font-family: colgateFontLight;
	color:SlateGray;
/*	padding: 1% 3% 2% 3%;
	font-size: 80.5%;
	text-align: left;
	letter-spacing: 0.5px;
	line-height: 140%;*/
	
	}
	
	.bannericonBottom  {
		float:left;
		/*margin: 0.8% 2.2% 3% 3%;*/
	}
	
	img.bannericonBottom {
		/*width:36px;*/
		float:left;
		vertical-align: middle;
		border:1px solid #626262;
	}
	
div.bannerTextBottom {
		float:left;
		font-family: colgateFontLight;
		color:SlateGray;
		text-align: left;
/*		letter-spacing: 1px;
		font-size: 60%;
		width:81.8%;
		line-height: 125%;*/
	}

	.bannerTextBottom p {
		padding:0;
		text-align: justify;
	}




/* PHONE PORTRAIT *******************************************/

@media only screen and (max-device-width : 767px) and (orientation : portrait) {
	
#homeArea01 h1 {font-size: 110%; }
#homeArea01 p {margin:1%; font-size: 85%; line-height:125%; }
	
#homeArea02N {
	width:105%;
	margin: 6% -2.5%;
}
	
.hbannerItems {
	width:85.5%;
	margin: 0 1.5% 6% 1.5%;		
	}
	
.hbannerItemsImg {
	width:85.5%;
	margin: 0 1.5% 6% 1.5%;		
	}
	
.hbannerItems  h2 {
	font-size: 136%;
	line-height: 120%;
	padding: 0.25% 3%;
	}
	
.hbannerItems p {
	padding: 1% 3% 2% 3%;
	font-size: 67%;
	text-align: left;
	letter-spacing: 0.5px;
	line-height: 140%;
	
	}
	
	.bannericonBottom  {
		margin: 3% 1% 3% 3%;
	}
	
	img.bannericonBottom {
		width:36px;

	}
	
div.bannerTextBottom {
		letter-spacing: 1px;
		font-size: 62%;
		width:82.8%;
		line-height: 125%;
	}

	
}

/* PHONE LANDSCAPE *******************************************/

@media only screen and (max-device-width : 767px) and (orientation : landscape) {
	
#homeArea01 h1 {font-size: 145%; }
#homeArea01 p {font-size: 102%; line-height:125%; }	
	
#homeArea02N {
	width:105%;
	margin: 3% -2.5%;
}
	
.hbannerItems {
	width:calc(85.5%/2);
	margin: 0 1.5% 3% 1.5%;		
	}
	
.hbannerItemsImg {
	width:calc(85.5%/2);
	margin: 0 1.5% 6% 1.5%;		
	}

.hbannerItems  h2 {
	font-size: 142%;
	line-height: 120%;
	padding: 0.25% 3%;
	}
	
.hbannerItems p {
	padding: 1% 3% 2% 3%;
	font-size: 70%;
	text-align: left;
	letter-spacing: 0.5px;
	line-height: 140%;
	
	}
	
	.bannericonBottom  {
		margin: 3% 1% 3% 3%;
	}
	
	img.bannericonBottom {
		width:36px;
	}
	
div.bannerTextBottom {
		letter-spacing: 1px;
		font-size: 61%;
		width:82.8%;
		line-height: 105%;
	}
}

/* TABLET PORTRAIT *******************************************/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	
#homeArea01 h1 {font-size: 145%; }
#homeArea01 p {font-size: 102%; line-height:125%; }	
	
#homeArea02N {
	width:105%;
	margin: 3% -2.5%;
}

	.hbannerItems {
	width:calc(85.5%/2);
	margin: 0 1.5% 3% 1.5%;		
	}
	
.hbannerItemsImg {
	width:calc(85.5%/2);
	margin: 0 1.5% 3% 1.5%;		
	}
	
.hbannerItems  h2 {
	font-size: 147%;
	line-height: 120%;
	padding: 0.25% 3%;
	}
	
.hbannerItems p {
	padding: 1% 3% 2% 3%;
	font-size: 73%;
	text-align: left;
	letter-spacing: 0.5px;
	line-height: 140%;
	
	}
	
	.bannericonBottom  {
		margin: 1.5% 1% 3% 3%;
	}
	
	img.bannericonBottom {
		width:36px;
	}
	
div.bannerTextBottom {
		letter-spacing: 1px;
		font-size: 62%;
		width:82.8%;
		line-height: 125%;
	}
	
}

/* TABLET LANDSCAPE *******************************************/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	
#homeArea01 h1 {font-size: 150%; }
#homeArea01 p {font-size: 110%; line-height:125%; }
	
#homeArea02N {
	width:105%;
	margin: 4% -2.5%;
}
	
.hbannerItems {
	width:calc(85.5%/3);
	margin: 0 1.5% 3% 1.5%;		
	}
	
.hbannerItemsImg {
	width:calc(85.5%/3);
	margin: 0 1.5% 3% 1.5%;		
	}
	
.hbannerItems  h2 {
	font-size: 130%;
	line-height: 120%;
	padding: 0.25% 3%;
	}
	
.hbannerItems p {
	padding: 1% 3% 2% 3%;
	font-size: 64%;
	text-align: left;
	letter-spacing: 0.5px;
	line-height: 140%;
	
	}
	
	.bannericonBottom  {
		margin: 1.5% 1% 3% 3%;
	}
	
	img.bannericonBottom {
		width:36px;
	}
	
div.bannerTextBottom {
		letter-spacing: 1px;
		font-size: 61.5%;
		width:82.8%;
		line-height: 125%;
	}
	
}

/* PORTABLE COMPUTER *******************************************/

@media only screen and (min-device-width: 1025px) and (max-device-width: 1366px) and (orientation : landscape) {
	
#homeArea01 h1 {font-size: 145%; }
#homeArea01 p {font-size: 102%; line-height:125%; }	
	
#homeArea02N {
	width:105%;
	margin: 4% -2.5%;
}
	
.hbannerItems {
	width:calc(85.5%/3);
	margin: 0 1.5% 3% 1.5%;		
	}
	
.hbannerItemsImg {
	width:calc(85.5%/3);
	margin: 0 1.5% 6% 1.5%;		
	}
	
.hbannerItems  h2 {
	font-size: 130%;
	line-height: 120%;
	padding: 0.25% 3%;
	}
	
.hbannerItems p {
	padding: 1% 3% 2% 3%;
	font-size: 64%;
	text-align: left;
	letter-spacing: 0.5px;
	line-height: 140%;
	
	}
	
	.bannericonBottom  {
		margin: 1.5% 1% 3% 3%;
	}
	
	img.bannericonBottom {
		width:31px;
	}
	
div.bannerTextBottom {
		letter-spacing: 1px;
		font-size: 61.5%;
		width:82.8%;
		line-height: 130%;
	}
	
}

/* MONITOR DESKTOP COMPUTER *******************************************/

@media only screen and (min-device-width: 1367px) and (orientation : landscape) {
	
#homeArea01 h1 {font-size: 175%; }
#homeArea01 p {font-size: 125%; line-height:130%; }	
	
#homeArea02N {
	width:105%;
	margin: 4% -2.5%;
}
	
.hbannerItems {
	width:calc(85.5%/3);
	margin: 0 1.5% 3% 1.5%;		
	}
	
.hbannerItemsImg {
	width:calc(85.5%/3);
	margin: 0 1.5% 3% 1.5%;		
	}
	
.hbannerItems  h2 {
	font-size: 160%;
	line-height: 120%;
	padding: 0.25% 3%;
	}
	
.hbannerItems p {
	padding: 1% 3% 2% 3%;
	font-size: 80.5%;
	text-align: left;
	letter-spacing: 0.5px;
	line-height: 140%;
	
	}
	
	.bannericonBottom  {
		margin: 1.8% 1% 3% 3%;
	}
	
	img.bannericonBottom {
		width:36px;
	}
	
div.bannerTextBottom {
		letter-spacing: 1px;
		font-size: 64%;
		width:84.8%;
		line-height: 120%;
	}
	
}