@charset "UTF-8";
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video{margin:0; padding:0;	border:0; font-size:100%;font: inherit;vertical-align:baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}body{line-height:1;}ol, ul{list-style: none;}blockquote, q {quotes:none;}blockquote:before, blockquote:after,q:before, q:after{	content:'';	content: none;}table{border-collapse:collapse;border-spacing:0;}sup{font-size:140%; color:#800080;padding-right:5px; padding-left:10px}

html{padding-top:73px;}
body{font-family:'Roboto', sans-serif; color:#000; margin:0; padding:0;font-size:100%;}
.fl{float:left;} .fr{float:right;} .clr{clear:both;}
img{width:100%; max-width:100%; height:100%; border:none;}
b,strong{font-weight:700;}
input, textarea{width:100%; max-width:100%; color:#333; resize:none;}
input:focus, textarea:focus{border:1px solid #97d6eb;}
a, a:link, a:active{text-decoration:none;}
*{box-sizing:border-box;}
.clearfix:before, .clearfix:after{content:"";display:table;}
.clearfix:after, .clr{clear:both;}
.clearfix{*zoom:1;}

header{width:100%;background-color:#4c06a2;position:fixed; top:0; z-index:2; box-shadow:0 2px 2px rgba(0,0,0,0.3)}

.header{padding:0 0 10px; text-align:left;}
.logo{width:280px; height:61px;}
.toggler{color:#5FC0DC;cursor:pointer;position:absolute;top:30px;right:10px}

nav{width:100%;display:none;background-color:#4c06a2; padding:10px 20px; position:absolute;top:70px; left:0}
nav li{font-size:100%;line-height:200%; margin-bottom:5px}
nav li a{text-decoration:none;color:#F2F2F2;transition:.3s ease-out}
nav li a:hover{color:#5FC0DC}
.active{color:#5FC0DC}

.bannerLeft i, .footercol i{margin-right:15px}
.callUs, .mailUs{font-family:'Roboto', sans-serif; font-size:120%; font-weight:500}
.bannerLeft a{color:#4c06a2}

#bannerSection{background:#f0f2f9; padding:20px; line-height:200%;font-family:'Raleway', sans-serif;font-weight:500}
.bannerLeft{padding-bottom:30px}
.bannerLeft h2{font-size:150%;line-height:170%;margin-bottom:20px}
.bannerLeft p{margin-bottom:30px}
.bannerButton{display:block; text-align:center;}
.bannerButton a{display:inline-block; padding:5px 20px; color:#fff; font-size:120%;background:#4c06a2;border-radius:5px}

#courseSection{padding:20px; line-height:200%;}
h1{font-family:'Raleway', sans-serif;font-size:200%;line-height:170%;margin-bottom:20px;color:#4c06a2;}
ul.gridList{display:grid;}
ul.gridList li{margin-bottom:30px; border:1px solid #e5e5e5; padding:5px;}
ul.gridList img{width:150px; height:120px; display:block;margin:0 auto 10px}
ul.gridList figcaption{text-align:center; font-size:110%;margin-bottom:10px;}
ul.gridList span{display:block; padding:0 0 0 30px; position:relative; margin-left:20px; font-size:95%; font-weight:300;color:#555}
ul.gridList em{font-size:110%; color:#4c06a2; position:absolute; top:7px; left:0}
.moreButt{margin:20px auto;text-align:center}
.moreButt a{font-family:'Raleway', sans-serif;display:inline-block;background:#4c06a2; color:#fff; font-size:90%;font-weight:500;line-height:170%; padding:1px 20px;text-decoration:none;border-radius:5px}

#partnerSection{padding:20px; line-height:200%; text-align:center}
h2{font-family:'Raleway', sans-serif;font-size:180%;line-height:170%;margin-bottom:20px;color:#4c06a2;}
#partnerSection ul{font-size:120%; display:flex; flex-direction:column; gap:30px; align-items:center; font-weight:500}
#partnerSection figure img{width:80%; border-radius:10px; box-shadow:5px 5px 5px rgba(40,40,40,0.5)}

footer{padding:40px; line-height:200%; background:#4c06a2; color:#d7c8ea}
footer a{color:#d7c8ea}
.footerList{display:grid;}
.footerList .footercol{margin-bottom:40px; border-bottom:1px solid #5b07c2; padding:20px 0}
.footercol h4{text-align:center;font-size:150%;color:#fff;margin-bottom:20px}
.footercol img{width:150px; height:auto; }



@media all and (min-width:360px){
	.footercol img{width:250px; height:50px;}	
}

@media all and (min-width:480px){
}

@media all and (min-width:600px){

	ul.gridList{display:grid; grid-template-columns:auto auto; grid-gap:20px 50px;}
	ul.gridList span{margin-left:40px;}

	#partnerSection figure img{width:300px;}
}

@media all and (min-width:768px){
	.bannerRight{text-align:center}
	.bannerRight img{width:400px; height:350px}	

	#partnerSection ul{flex-direction:row; gap:30px; align-items:flex-start;}
	#partnerSection ul li{width:33.33%}
	#partnerSection figure img{width:100%;}

	.footerList{display:grid; grid-template-columns:auto auto; grid-gap:20px 50px;}
	.footercol h4{text-align:left;}
	.footercol img{display:block; margin:0 auto;}

}

@media all and (min-width:1024px){
	.header{display:flex; align-items:center; justify-content:space-between;padding:10px}		
	.toggler{display:none;}
	nav{display:block;position:relative;width:auto; padding:15px 0 0;top:0;left:0}
	nav ul{display:flex; align-items:center; justify-content:flex-start; gap:25px;}
	

	.bannerLeft{width:50%; float:left}
	.bannerRight{width:40%; float:right}

	.bannerLeft{padding-bottom:0}
	.bannerLeft h2{font-size:230%;line-height:170%;font-weight:300}
	.bannerLeft p{padding-right:60px;}

	ul.gridList{grid-template-columns:auto auto auto;}

	#partnerSection figure img{width:300px;}

	.footerList{grid-template-columns:1.5fr 1fr auto;}
	.footerList .footercol{margin-bottom:0; border-bottom:none; padding:0}
	.footercol h4{position:relative;}
	.footercol h4 img{position:absolute; top:-20px;left:5%}
	.footercol p{width:80%;padding:33px 0 0 30px}
}

@media all and (min-width:1280px){
	.pageContainer{width:1200px; max-width:1200px; margin:0 auto;}

	.header{padding:10px 0}

	#bannerSection{padding:70px 0;}
	.bannerLeft{width:60%; line-height:250%}
	.bannerLeft h2{font-weight:500}
	.bannerLeft h2 small{display:block}
	.bannerLeft p{font-size:120%;margin-bottom:30px;color:#7a7a7a;font-weight:300}
	.callUs, .mailUs{font-size:150%}
	.bannerButton{text-align:left}
	.bannerButton a{font-size:130%; padding:5px 50px;font-weight:300}
	.bannerRight{text-align:left}

	h1{font-size:300%;margin-bottom:40px;}
	ul.gridList figcaption{font-size:150%; margin-bottom:20px}
	.moreButt a{font-size:100%;font-weight:500;line-height:170%; padding:5px 20px;}

	#partnerSection h2{text-align:left;font-size:250%;margin-bottom:40px;}
}

@media all and (min-width:1360px){
	#courseSection, #partnerSection{padding:20px; line-height:200%;}
	#partnerSection{padding-bottom:70px;}
}