.background { background: #0789c3 url("../images/backdrop.jpg") no-repeat top left -230px; height: 530px}

#animate-canvas { background: transparent; position: absolute; top: 0; left: 0}

body { margin: 0; padding: 0; position: relative; background: #fff;}
.master-logo { position: absolute; top: 0px; right: 50px; color: #fff; text-align: center; }
.master-logo .main-logo { font-family: 'Raleway Bold',arial !important; letter-spacing: -1px; font-weight: bold; font-size: 7em; letter-spacing: -3px; color: #fff;  }

.main-icon {  width: calc(100% - 350px); z-index: 9998; position: absolute; top: 210px; right: 0; padding:20px 30px; justify-content: space-between; display: flex; margin-top: 40px   }
.main-icon .section-icon { width: 240px; height: 160px; cursor: pointer; text-align:center; }
.main-icon .section-icon, .section-icon a { font: 18px 'Raleway Bold',arial; color: #fff;font-weight: 800; }
.main-icon .img-icon{
    width: 140px;
	border-radius: 50%;
	border : 6px solid #fff;
    margin-bottom: 10px;
}
.main-icon .img-icon:hover, .img-icon:focus{
	border : 6px solid #87f5ff;
	box-shadow: 0px 0px 30px #00eaff;
	opacity: 0.9;
}

.my-icon { width: 100%; z-index: 9998; position: absolute; top: 210px; right: 0; padding:10px 50px }
.my-icon .row {  justify-content: right; display: flex; margin-top: 40px;  } 
.black { color: #555 !important;  } 
.my-icon .section-icon, .form-icon { width: 180px; cursor: pointer; text-align:center; font: 20px 'Raleway',arial; color: #fff; font-weight: 800; }
.form-icon { width: 300px; }
.form-icon .img-icon { width: 120px; border-radius: 50%; background-color: #217490;}
.form-icon span { color: #222; font-size: 1.2em;}
.my-icon .img-icon {
    width: 120px;
	border-radius: 50%;
	border : 6px solid #fff;
    margin-bottom: 10px;
}
.my-icon .img-icon:hover, .img-icon:focus{
	border : 6px double #87f5ff;
	box-shadow: 0px 0px 30px #00eaff;
}

.my-icon h1 { font: 2em 'Raleway',arial;  color: #fff; }
.login-block { margin:7vh auto 0; min-height:80.6vh; position: absolute; width: 100%; top: 20px; z-index: 9999; display: none;}
.login-block .auth-box { margin:20px auto 0; max-width:450px;  background-color: rgb(255, 255, 255, 0.9); border-radius: 15px; border: 1px solid #fff; }

.copyright { font-size: .8em; position: absolute; bottom: -200px; width: 100%; text-align: center }
.instansi-logo {  position: absolute; top: 20px; left: 60px; font: 1.9em 'Raleway',arial; line-height: 1.1em; color: #fff; width: 50%; padding-top: 15px}
.instansi-logo .logo { width: 90px; margin: -10px 10px 0 20px; text-align: left;}
.alert-error { padding: 15px 20px 15px 60px; position: relative; }
.alert-error .icon-error { position: absolute; top: 10px; left: 15px; }

.outbold { font-weight: bold; font-size: 1.3em;}

@media screen and (max-width: 500px) {
	.my-icon .section-icon { width: 120px; height: 130px; } 
	.my-icon {  width: 95%; right: 20px; top: 500px; padding-bottom: 100px; }
	.my-icon .img-icon { width: 80px; }
	.instansi-logo { display: none;}
	
	.my-icon { width: 100%; background: rgb(0,0,0,0.3); top: 310px; right: 0; padding:10px 20px 30px 20px; }
	.main-icon { width: 100%; top: 320px; background: rgb(0,0,0,0.4) }
	.main-icon .section-icon, .form-icon  { width: 120px !important; height:100px; }
	.main-icon .section-icon span, .main-icon .section-icon a { font-size: 12px !important; font-weight: 100 !important; line-height: -1px !important; }
	.main-icon .img-icon { width: 90px !important; }
}

@media screen and (max-width: 800px) {
	.my-icon .section-icon { width: 100px; height: 100px; } 
	.my-icon .img-icon { width: 90px; }
	.instansi-logo { display: none;}
	.my-icon { width: 100%; background: rgb(0,0,0,0.3); top: 310px; right: 0; padding:10px 20px; }
	.main-icon { width: 100%; top: 320px; background: rgb(0,0,0,0.4) }
	.main-icon .section-icon, .form-icon{ width: 180px; height:140px; font-size: 1.1em }
	.main-icon .img-icon {
    	width: 110px;
	}
}

@media screen and (max-width: 1280px) {
	.my-icon .img-icon { width: 80% !important; }
	.my-icon .section-icon, .form-icon { width: 120px; height: 130px; } 
}







.back-icon { font: 1.3em 'Raleway',arial; border-radius: 50px; border: 2px solid #fff; padding: 10px 20px;color: #fff; height: 40px; margin-top: 40px; cursor: pointer }
.back-icon:hover { border: 2px solid #47d1ff; color: #47d1ff }