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

*{margin: 0; padding: 0;}
html, body{ background: #fff;}
ul, ol{ list-style: none;}
a, img{ text-decoration: none; }
header{ height: auto; width: 100%; padding: 16px 0;}
header > ul{ height: auto; width: 100%; max-width: 1200px; display: flex; flex-flow: row nowrap; align-items: center; margin: 0 auto;}
header > ul > li{ height: auto; width: 50%; padding: 0 16px; box-sizing: border-box; display: inline-flex;}
header > ul > li:last-child{ justify-content: flex-end; }
header > ul > li > a{ height: auto; width: auto; display: inline-block;}
header > ul > li > a > img{ display: block; width: auto; height: 72px;}
header > ul > li > dl{ height: auto; width: auto; display:inline-grid; grid-gap:16px; grid-template-columns:32px auto; align-items: center;}
header > ul > li > dl > dt{height: auto; width: 100%;}
header > ul > li > dl > dt > img{ display: block; width: 100%;}
header > ul > li > dl > dt > b{ text-align: left; font: 400 14px/14px 'sf_ui_textmedium', sans-serif; color: #000;}
header > ul > li > dl > dt > p{ text-align: left; font: 400 15px/15px 'sf_ui_textmedium', sans-serif; color: #000; margin-top: 2px;}

nav{ height: auto; width: 100%; background: #f2f2f2;}
nav > ul{ height: auto; width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns:auto 136px; box-sizing: border-box; 
	padding:  0 16px; align-items: center;}
nav > ul > li.onmobile{ display: none;}  
nav > ul > li{ height: auto; width: 100%;}
nav > ul > li > a{ height: auto; width: 100%; font: 400 14px/32px 'sf_ui_textmedium', sans-serif;color: #fff; background: #ff1212; display: block; 
	text-align: center; border-radius: 6px;}
nav > ul > li > a:hover{ box-shadow: 0 4px 8px rgba(0,0,0,.15); background: #db2121;}
nav > ul > li > dl{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center;}
nav > ul > li > dl > dt{ height: auto; width: auto; position: relative;}
nav > ul > li > dl > dt > a{ display: inline-block; text-align: center; font: 400 14px/48px 'sf_ui_textmedium', sans-serif; color: #575757;
	padding: 0 24px;}
nav > ul > li > dl > dt:hover > a{ color: #000; background-color: rgba(0,0,0,.1);}
nav > ul > li > dl > dt > a.active{ color: #fff; background-color: #238953;}
nav > ul > li > dl > dt .dropdown{ height: auto; width: 232px; border-radius: 4px; background: #fff; overflow: hidden; position: absolute; top: 48px; left: 0; display: none; border: 1px solid #ddd; box-shadow: 0 4px 16px rgba(0,0,0,.15);}
nav > ul > li > dl > dt:hover .dropdown{ display: block;}
nav > ul > li > dl > dt .dropdown > a:first-child{ border-top: none;}
nav > ul > li > dl > dt .dropdown > a{ height: auto; width: 100%; display: block; text-align: left; padding: 16px 24px; font: 400 14px 'sf_ui_textregular', sans-serif; color: #575757; box-sizing: border-box; border-top: 1px solid #ddd;}
nav > ul > li > dl > dt .dropdown > a:hover{ background: #eee; color: #000;}

.wrapper{ height: auto; width: 100%; max-width: 1200px; margin: 0 auto; padding: 48px 16px; box-sizing: border-box;}
.wrapper > .invalid{text-align:center; font: 400 32px 'sf_ui_textregular', sans-serif; color: red; letter-spacing: -.5px; padding:88px 0;}
.wrapper > h1{text-align: left; font: 400 24px 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.5px;}
.wrapper > ul{ height: auto; width: 100%; display: grid; grid-gap:24px; grid-template-columns:272px 300px 116px; margin-top: 32px;
	align-items: flex-end;}
.wrapper > ul > li{ height: auto; width: 100%;}
.wrapper > ul > li > label{ text-align: left; font: 400 14px 'sf_ui_textregular', sans-serif; color: #575757; margin-bottom: 8px; display: block;}
.wrapper > ul > li > input[type=text]{display: block; height: 40px; width: 100%; border: 1px solid #d0d0d0; text-align: left; padding: 8px;  box-sizing: border-box; font: 400 15px 'sf_ui_textregular', sans-serif; color: #000; letter-spacing: -.5px; border-radius: 4px;}
.wrapper > ul > li > span{ display: block; width: 100%; font: 400 13px/20px 'sf_ui_textregular', sans-serif; color:red; margin-top: 8px; text-align: left; padding-left: 24px; background: url(../icons/error.svg) no-repeat left center; background-size: 20px; box-sizing: border-box;}
.wrapper > ul > li > .date{ height: auto; width: 100%; display: grid; grid-template-columns:70px 120px auto; grid-gap:2px;}
.wrapper > ul > li > .date > select{ display: block; height: 40px; width: 100%; border: 1px solid #d0d0d0; text-align: left; padding:8px 24px 8px 8px;  box-sizing: border-box; font: 400 15px 'sf_ui_textregular', sans-serif; color: #000; letter-spacing: -.5px; border-radius: 4px; appearance:none; 
	-moz-appearance:none; -webkit-appearance:none; -o-appearance:none; -ms-appearance:none;
	background: url(../icons/drop_down.svg) no-repeat 96% center;}
.wrapper > ul > li > .date > input[type=text]{display: block; height: 40px; width: 100%; border: 1px solid #d0d0d0; text-align: center; padding: 8px;  box-sizing: border-box; font: 400 15px 'sf_ui_textregular', sans-serif; color: #000; letter-spacing: -.5px; border-radius: 4px;}
.wrapper > ul > li > input[type=submit]{ text-align: center; border-radius: 4px; height: 40px; width: 100%; border: none; 
	font: 400 14px/40px 'sf_ui_textmedium', sans-serif; color: #fff; cursor: pointer; background: #2c82ec;}
    .wrapper > ul > li > input[type=submit]:hover {
        box-shadow: 0 8px 16px rgba(0,0,0,.15);
        background: #2674d4;
    }
.wrapper > .student_detail{ height: auto; width: 100%; margin-top: 40px; display: grid; grid-gap:48px; grid-template-columns:auto 360px;}
.wrapper > .student_detail > .detail{ height: auto; width: 100%;}
.wrapper > .student_detail > .detail > h1{text-align: left; font: 400 18px 'sf_ui_textmedium', sans-serif; color: #000; letter-spacing: -.5px;}
.wrapper > .student_detail > .detail > dl{ height: auto; width: 100%; margin-top: 20px;}
.wrapper > .student_detail > .detail > dl > dt{ display: grid; grid-gap:16px; grid-template-columns:130px auto; align-items: center; 
	padding-bottom:12px;}
.wrapper > .student_detail > .detail > dl > dt > small{ display: block; text-align: left; font: 400 16px 'sf_ui_textregular', sans-serif; color: #575757; width: 100%;}
.wrapper > .student_detail > .detail > dl > dt > b{ display: block; text-align: left; font: 400 16px 'sf_ui_textmedium', sans-serif; color: #000;
width: 100%;}
.wrapper > .student_detail > .download_certificate{ height: auto; width: 100%; display: flex; align-items: center; justify-content: center;}
.wrapper > .student_detail > .download_certificate > input[type=submit]{ height: 64px; width: 100%; cursor: pointer; font: 400 16px 'sf_ui_textmedium', sans-serif; color: #fff; text-align: center; border-radius: 4px; background: #2c82ec; box-shadow: 0 8px 16px rgba(0,0,0,.1); appearance:none; -moz-appearance:none; -o-appearance:none; -ms-appearance:none; -webkit-appearance:none; border: none;}
    .wrapper > .student_detail > .download_certificate > input[type=submit]:hover {
        background: #2674d4;
        box-shadow: 0 16px 32px rgba(0,0,0,.2);
    }

.edusecure_features{ height: auto; width: 100%; padding: 40px 0; background: #f2fff8;}
.edusecure_features > h1{ text-align: center; font: 400 16px 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.01px;}
.edusecure_features > ul{ height: auto; width: 100%; max-width: 1200px; margin: 0 auto; margin-top: 32px; box-sizing: border-box; padding: 0 16px; display: grid; grid-gap:16px; grid-template-columns:repeat(5, 1fr);}
.edusecure_features > ul > li{ height: auto; width: 100%; padding:40px 8px; background: #fff; box-sizing: border-box; border-radius: 4px;}
.edusecure_features > ul > li > span{ height: auto; width: 100%; display: flex; align-items: center; justify-content: center;}
.edusecure_features > ul > li > span > img{ display: block; width: 100%; max-width: 56px;}
.edusecure_features > ul > li > h2{ text-align: center; font: 400 14px 'sf_ui_textmedium', sans-serif; color: #000; margin-top: 32px;}



footer{ height: auto; width: 100%; background: #238953;}
footer > ul{ height: auto; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 0 0 16px; box-sizing: border-box; display: flex; flex-flow: row nowrap; align-items: center;} 
footer > ul > li{ height: auto; width: 20%; font: 400 13px/56px 'sf_ui_textmedium', sans-serif; color: #fff;}
footer > ul > li:last-child{ height: auto; width: 80%;}
footer > ul > li > .footer_links{ height: auto; width: 100%; display: flex; flex-flow: row wrap; align-items: center; justify-content:flex-end; color: rgba(255,255,255,.57);}
footer > ul > li > .footer_links > a{ display: inline-block; padding: 8px 16px; box-sizing: border-box; font: 400 13px 'sf_ui_textregular', sans-serif; color: rgba(255,255,255,.57);}
footer > ul > li > .footer_links > a:hover{ color: white;}

@media (max-width:1024px){	
	nav > ul > li.onmobile{ display: grid; grid-template-columns:auto 48px; background: #4CAF50;}
	nav > ul > li.onmobile > b{ text-align: left; display: block; width: 100%; font: 400 14px/48px 'sf_ui_textmedium', sans-serif; color: #fff; padding: 0 16px; box-sizing: border-box;}
	nav > ul > li.onmobile > small{ height: 48px; width: 100%; display: block;}
	nav > ul > li.onmobile > small > input[type=button]{ height: 48px; width: 100%; display: block; background:url(../icons/menu.svg) no-repeat center #333;  border: none; cursor: pointer;}
	nav > ul{ grid-template-columns:repeat(1, 1fr); padding: 0; font-size: 0px;}
	nav > ul > li > a{ border-radius: 8px; line-height: 48px; margin: 8px 16px 0 16px; width: calc(100% - 32px);}
	nav > ul > li > dl{ flex-flow: column;}
	nav > ul > li > dl > dt{ width: 100%; border-top: 1px solid #d0d0d0;}
	nav > ul > li > dl > dt > a{ padding: 0 24px; width: 100%; box-sizing: border-box; text-align: left;}
	nav > ul > li > dl > dt .dropdown{ position: relative; top: 0; border-radius: 0; width: 100%; box-shadow: none; border: none;}
	nav > ul > li#myLinks{ display: none;}
	
	.edusecure_features > ul{grid-template-columns:repeat(4, 1fr);}
	
	footer > ul{ flex-flow: column; padding:0 16px;}
	footer > ul > li{ width: 100%; line-height: 18px; padding: 16px 0;}
	footer > ul > li:last-child{ width: 100%;}
	footer > ul > li > .footer_links{ justify-content: flex-start;}
	footer > ul > li > .footer_links > a{ padding: 4px 16px;}
}

@media (max-width:768px){	
	nav > ul > li.onmobile{ display: grid; grid-template-columns:auto 48px; background: #4CAF50;}
	nav > ul > li.onmobile > b{ text-align: left; display: block; width: 100%; font: 400 14px/48px 'sf_ui_textmedium', sans-serif; color: #fff; padding: 0 16px; box-sizing: border-box;}
	nav > ul > li.onmobile > small{ height: 48px; width: 100%; display: block;}
	nav > ul > li.onmobile > small > input[type=button]{ height: 48px; width: 100%; display: block; background:url(../icons/menu.svg) no-repeat center #333;  border: none; cursor: pointer;}
	nav > ul{ grid-template-columns:repeat(1, 1fr); padding: 0; font-size: 0px;}
	nav > ul > li > a{ border-radius: 8px; line-height: 48px; margin: 8px 16px 0 16px; width: calc(100% - 32px);}
	nav > ul > li > dl{ flex-flow: column;}
	nav > ul > li > dl > dt{ width: 100%; border-top: 1px solid #d0d0d0;}
	nav > ul > li > dl > dt > a{ padding: 0 24px; width: 100%; box-sizing: border-box; text-align: left;}
	nav > ul > li > dl > dt .dropdown{ position: relative; top: 0; border-radius: 0; width: 100%; box-shadow: none; border: none;}
	nav > ul > li#myLinks{ display: none;}
	
	.wrapper > ul{ grid-template-columns:repeat(2, 1fr);}
	
	.wrapper > .student_detail{ grid-template-columns:repeat(1, 1fr);}
	
	.edusecure_features > ul{grid-template-columns:repeat(3, 1fr);}
	
	footer > ul{ flex-flow: column; padding:0 16px;}
	footer > ul > li{ width: 100%; line-height: 18px; padding: 16px 0;}
	footer > ul > li:last-child{ width: 100%;}
	footer > ul > li > .footer_links{ justify-content: flex-start;}
	footer > ul > li > .footer_links > a{ padding: 4px 16px;}
}


@media (max-width:560px){
	header > ul{ flex-flow: column;}
	header > ul > li, header > ul > li:last-child{ justify-content: center; width: 100%;}
	header > ul > li:last-child{ padding-top: 10px;}
	header > ul > li > a{ display: block; width: 100%;}
	header > ul > li > a > img{ display: block; width: 100%; max-height: 72px;}
	
	nav > ul > li.onmobile{ display: grid; grid-template-columns:auto 48px; background: #4CAF50;}
	nav > ul > li.onmobile > b{ text-align: left; display: block; width: 100%; font: 400 14px/48px 'sf_ui_textmedium', sans-serif; color: #fff; padding: 0 16px; box-sizing: border-box;}
	nav > ul > li.onmobile > small{ height: 48px; width: 100%; display: block;}
	nav > ul > li.onmobile > small > input[type=button]{ height: 48px; width: 100%; display: block; background:url(../icons/menu.svg) no-repeat center #333;  border: none; cursor: pointer;}
	nav > ul{ grid-template-columns:repeat(1, 1fr); padding: 0; font-size: 0px;}
	nav > ul > li > a{ border-radius: 8px; line-height: 48px; margin: 8px 16px 0 16px; width: calc(100% - 32px);}
	nav > ul > li > dl{ flex-flow: column;}
	nav > ul > li > dl > dt{ width: 100%; border-top: 1px solid #d0d0d0;}
	nav > ul > li > dl > dt > a{ padding: 0 24px; width: 100%; box-sizing: border-box; text-align: left;}
	nav > ul > li > dl > dt .dropdown{ position: relative; top: 0; border-radius: 0; width: 100%; box-shadow: none; border: none;}
	nav > ul > li#myLinks{ display: none;}
	
	.wrapper > ul{ grid-template-columns:repeat(1, 1fr);}
	
	.wrapper > .student_detail{ grid-template-columns:repeat(1, 1fr);}
	
	.edusecure_features > ul{grid-template-columns:repeat(2, 1fr);}
	
	footer > ul{ flex-flow: column; padding:0 16px;}
	footer > ul > li{ width: 100%; line-height: 18px; padding: 16px 0;}
	footer > ul > li:last-child{ width: 100%;}
	footer > ul > li > .footer_links{ justify-content: flex-start;}
	footer > ul > li > .footer_links > a{ padding: 4px 16px;}
}

@media (max-width:360px){
	header > ul{ flex-flow: column;}
	header > ul > li, header > ul > li:last-child{ justify-content: center; width: 100%;}
	header > ul > li:last-child{ padding-top: 10px;}
	header > ul > li > a{ display: block; width: 100%;}
	header > ul > li > a > img{ display: block; width: 100%; max-height: 72px;}
	
	nav > ul > li.onmobile{ display: grid; grid-template-columns:auto 48px; background: #4CAF50;}
	nav > ul > li.onmobile > b{ text-align: left; display: block; width: 100%; font: 400 14px/48px 'sf_ui_textmedium', sans-serif; color: #fff; padding: 0 16px; box-sizing: border-box;}
	nav > ul > li.onmobile > small{ height: 48px; width: 100%; display: block;}
	nav > ul > li.onmobile > small > input[type=button]{ height: 48px; width: 100%; display: block; background:url(../icons/menu.svg) no-repeat center #333;  border: none; cursor: pointer;}
	nav > ul{ grid-template-columns:repeat(1, 1fr); padding: 0; font-size: 0px;}
	nav > ul > li > a{ border-radius: 8px; line-height: 48px; margin: 8px 16px 0 16px; width: calc(100% - 32px);}
	nav > ul > li > dl{ flex-flow: column;}
	nav > ul > li > dl > dt{ width: 100%; border-top: 1px solid #d0d0d0;}
	nav > ul > li > dl > dt > a{ padding: 0 24px; width: 100%; box-sizing: border-box; text-align: left;}
	nav > ul > li > dl > dt .dropdown{ position: relative; top: 0; border-radius: 0; width: 100%; box-shadow: none; border: none;}
	nav > ul > li#myLinks{ display: none;}
	
	.wrapper > ul{ grid-template-columns:repeat(1, 1fr);}
	
	.wrapper > .student_detail{ grid-template-columns:repeat(1, 1fr);}
	
	.edusecure_features > ul{grid-template-columns:repeat(1, 1fr);}
	
	footer > ul{ flex-flow: column; padding:0 16px;}
	footer > ul > li{ width: 100%; line-height: 18px; padding: 16px 0;}
	footer > ul > li:last-child{ width: 100%;}
	footer > ul > li > .footer_links{ justify-content: flex-start;}
	footer > ul > li > .footer_links > a{ padding: 4px 16px;}
}