/* Reset CSS */
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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
    }

@font-face {font-family: marvel;src: url(font/marvel.otf);}
@font-face {font-family: jesaya;src: url(font/jesaya.ttf);}
@font-face {font-family: roboto-bold;src: url(font/Roboto-Bold.ttf);}
@font-face {font-family: roboto-medium;src: url(font/Roboto-Medium.ttf);}
@font-face {font-family: roboto-italic;src: url(font/Roboto-Italic.ttf);}
@font-face {font-family: roboto-light;src: url(font/Roboto-Light.ttf);}
@font-face {font-family: roboto-regular;src: url(font/Roboto-Regular.ttf);}
@font-face {font-family: roboto-thin;src: url(font/Roboto-Thin.ttf);}
@font-face {font-family: roboto-condensed;src: url(font/roboto-condensed-regular.ttf);}
@font-face {font-family: roboto-light-italic;src: url(font/Roboto-Light-Italic.ttf);}

body {

	color: #000;
	font: 14px Arial;
	margin: 0 auto;
	padding: 0;
	position: relative;
    overflow-y:auto;
    width:auto; 
    height:100%;
    overflow-x:hidden;
    background:#eee;
    }

h1{ font-size:28px;}
h2{ font-size:26px;}
h3{ font-size:18px;}
h4{ font-size:16px;}
h5{ font-size:14px;}
h6{ font-size:12px;}

h1,h2,h3,h4,h5,h6{ color:#850022;}
small{ font-size:10px;}
b, strong{ font-weight:bold;}
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
.left { float:left; }
.right { float:right; }
.alignleft { float: left; margin-right: 15px; }
.alignright { float: right; margin-left: 15px; }
.clearfix:after,
pwform:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
    }





.container { 
    margin:0px; 
    position: relative;
    width: 100%;
    height:100%;
    }

.sub_container{
    width:1280px;
    margin:0px;
    overflow: hidden;
    margin: auto;
    display: block;
    height:600px;
    padding: 0px;
    }
.sub_container img{
	width:100%;
	height: auto;
}



#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }



.submit button {
	color:white;
	cursor: pointer;
/* 	float: left; */
	font-family: roboto-medium;
    font-size:12px;
	height: 32px;
    margin-top:5px;
    background:#6fbf28;
	position: relative;
	text-shadow:1px 1px #888;
	width: auto;
    text-transform:uppercase;
    border: none;
    width: 188px;   
    padding: 5px;
    border-radius: 3px;
    letter-spacing: 0.5;
    border-bottom: 1px solid  #159016;
    }

.submit button:hover {
    background:#5aa31a;
	-moz-box-shadow: inset 0 0 10px #4a8913; 
    -webkit-box-shadow: inset 0 0 10px #4a8913; 
    box-shadow: inset 0 0 10px #4a8913;
}

#forgetpassword{
    width:100%;
    padding:2px;
    padding-top: 5px;
    margin-top:5px;
    margin-left:4px;
    font-family: roboto-condensed;
    font-size:11px;
    }

.submit {
	position: relative;
	left: 0px;
    float:right;
    width:auto;
    font-family: helvetica;
    font-size:10px;
}

#content div a {
	color: #004a80;
	font-size: 12px;
	margin: 30px 15px 0 0;
	text-decoration: underline;
}

#forget {
    width:auto;
    display:block;
    margin-top: 5px;
}

.e8hidden {
	visibility: hidden;
}

#forget_email {
	width: 300px;
	height: auto;
	margin: auto auto;
	padding: 20px 0px 20px 0px;
/* 	top: 200px; */
	background: white;
	border: 1px solid #ddd;
    margin-top:-100px;
    margin-left:-310px;
    
}
#forget_email_email_input{
	font-family: roboto-condensed;
	padding: 5px;
	border-radius: 2px;
	
}
#forget_email_message{
    width:auto;
    margin-left:5px;
    font-size:12px;
    padding: 5px;
    font-family: roboto-condensed;
    }

#forget_email_email {
	padding-left: 5px;
    }

.pwform{
    width:auto;
    padding:5px;
    font-family: marvel;
    font-size:22px;
    text-transform:capitalize;
    width:auto;
    display:inline-block;
    }

.login_form{
    width:auto;
    float:right;
    margin-top:2px;
    height: 145px;
    animation-duration:1s;
    animation-name:fadeleft;
    -webkit-animation-duration:1s;
    -webkit-animation-name:fadeleft;
    display:inline-block;
    background: whitesmoke;
    position: absolute;
    margin-left: 900px;
    padding: 50px 40px;
    
    height: 400px;
     background : -moz-linear-gradient(50% 100% 90deg,rgba(255, 255, 255, 0) 0%,rgba(246, 246, 246, 0.4) 26.6%,rgba(219, 219, 219, 0.8) 100%);
  background : -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(246, 246, 246, 0.4) 26.6%, rgba(219, 219, 219, 0.8) 100%);
  background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(255, 255, 255, 0) ),color-stop(0.266,rgba(246, 246, 246, 0.4) ),color-stop(1,rgba(219, 219, 219, 0.8) ));
  background : -o-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(246, 246, 246, 0.4) 26.6%, rgba(219, 219, 219, 0.8) 100%);
  background : -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(246, 246, 246, 0.4) 26.6%, rgba(219, 219, 219, 0.8) 100%);

/*
  	animation-duration:1s;
    animation-name:top-bottom;
    -webkit-animation-duration:1s;
    -webkit-animation-name:top-bottom;*/
    }

 #login:focus,#password:focus{
    box-shadow: 0px 0px 2px silver;
    }   

.pass_new{
    width:auto;
    margin-left:2px;
    padding:5px 0px 5px 0px;
    }

.login_new{
    width:auto;
    margin-left:2px;
    padding:5px 0px 5px 0px;
    }

#school_motto{
    width:auto;
    float:right;
    font-family: roboto-medium;
    font-size:16px;
    margin-left: 20px;
    text-transform:capitalize;
    margin-top:20px;
    text-transform:uppercase;
    color:#555;
    }

#login:hover,#password:hover{
    box-shadow:0 0px 1px #ddd;
    }
/*
#submitbutton {
	position: relative;
	display: block;

    }
*/
input{
	padding: 10px 20px;
	margin: 0px;
    font-size:14px;
    border:1px solid #ddd;
    font-family: roboto-condensed;
    border-bottom: 1px solid #ccc;
    border-radius: 3px;
    }
.box_theme{
    width:auto;
    height:500px;
    display:inline-block;
    }

.box_theme img{
    width:auto;
    height:auto;
    max-height:550px;
    margin-left:0px;
    }

.footer{
    width:1280px;
    height:auto;
    margin:auto;
    }

.box_footer{
    width:100%;
    height:auto;
    margin:auto;
    display:block;
    }

.box_educa_top{
    width:100%;
    margin:auto;
    display:block;
    color:white;
    text-align:right;
    font-size:11px;
    padding-top: 15px;
    border-top:1px solid #ddd;
    }

.box_educa{
    width:100%;
    height:40px;
    margin:auto;
    display:block;
    color:#333;
    text-align:right;
    font-size:12px;
    font-family: roboto-light;
    }

.title_login{
    font-size:28px;
    width:auto;
    text-shadow:1px 1px white;
    margin-left:20px;
    }

.top_login{
    width:100%;
    height:80px;
    box-shadow:0 0px 2px #666;
    background:#f9f9f9;
    }

.title_top_login{
    width:auto;
    max-width:1280px;
    margin:auto;
    font-family: helvetica;
    font-weight:lighter;
    text-shadow:1px solid white;
    font-size:14px;
    color:#304f0c;
    padding: 5px 0px;
    padding-bottom: 0px;
    padding-right: 20px;
    }

    b{
    margin-top:4px;
    color:#304f0c;
    }
.title-content{
    width:400px;
    display:inline-block;
    height:auto;   
    float:right;
    margin-top: -90px;
    padding-top: 0px;
    height: auto;
    margin-right: 200px;
    }
.fill-content{
    width:1280px;
    display:inline-block;
    height:auto;
    overflow: hidden;
    float:left;
    padding-top:5px;
    margin-top:1px;
    height: auto;
    max-height: 600px;
	overflow: hidden;



	 .fa-stack-1x{
	    	border-bottom:1px solid silver;
	   }
    }
    
.fill-content img{
	width: auto;
	height: 100%;
	}

.title-content img{
    width:100%;
    height:auto;
    margin-top:130px;
    width: 100%; height: auto; 
    -webkit-animation-name: cirlce; 
    -webkit-animation-duration: 8s; 
    -webkit-animation-iteration-count: infinite; 
    animation-name: circle;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    }

.extra-link{
    animation-duration: 1s;
    animation-name: fadetop;

    border-radius: 3px;
    color: #333;
    display: inline-block;
    font-family: roboto-light;
    font-size: 12px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: -5px;
    padding: 5px;
    text-align: center;
    text-transform: lowercase;
    vertical-align: top;
    width: auto;
    float: left;
    border: 1px solid #EEEEEE;
    transition: 0.2s ease-out;
    }
    
.extra-link:hover{
    color: white;
    border: 1px solid green;
    background: #5AA21A;
    cursor: pointer;
    transition: 0.2s ease-in;
    }

.extra-link:hover i{
    color: white;
}    

.box-c1{
    height:200px;
    margin-top:1px;
    width:100%;
    display:block;
    }

.box_square{
    width:200px;
    height:200px;
    display:inline-block;
    background:orange;
    }
.box_detail{
     width:100%;
    height:auto;
    display:inline-block;
    float:right;
    }

.md-c1{
    width:400px;
    animation-duration:1s;
    animation-name:pwform;
    -webkit-animation-duration:1s;
    -webkit-animation-name:pwform;
    }
    
.service-heading{
    font-family: roboto-medium;
    font-size:14px;
    font-weight:normal;
    color:#0c4c49;
    margin-top:-20px;
    }
    
.text-muted{
    font-size:14px;
    font-weight:normal;
    color:#167f7a;
    font-family: roboto-light;
    }

.pad-extra{
    padding-top:15px;
    }

.fa-lightbulb-o,.fa-file-text-o ,.fa-desktop{
    color:#0c4c49;
    }
   
  #message{
	font-family: roboto-condensed;
	font-size: 12px;
	padding-left: 5px;
}  
    
<!-- animation start from here -->
@-webkit-keyframes circle {
    0%   {transform: rotate(0);}
    10%   {transform: rotate(0);}
    25%  {transform: rotate(90deg);}
    35%  {transform: rotate(90deg);}
    50%  {transform: rotate(180deg);}
    60%  {transform: rotate(180deg);}
    75%  {transform: rotate(270deg);}
    85%  {transform: rotate(270deg);}
    100% {transform: rotate(360deg);}
}

/* Standard syntax */
@keyframes circle {
    0%   {transform: rotate(0);}
    10%   {transform: rotate(0);}
    25%  {transform: rotate(90deg);}
    35%  {transform: rotate(90deg);}
    50%  {transform: rotate(180deg);}
    60%  {transform: rotate(180deg);}
    75%  {transform: rotate(270deg);}
    85%  {transform: rotate(270deg);}
    100% {transform: rotate(360deg);}
}

@-webkit-keyframes circle {
  
}

@-webkit-keyframes top-bottom {
    from {opacity:0;margin-top:-50px;}
    to {opacity:1;margin-top:0px;}
}

/* Standard syntax */
@keyframes top-bottom {
    from {opacity:0;margin-top:-50px;}
    to {opacity:1;margin-top:0px;}
}

@-webkit-keyframes fadetop {
    from {opacity:0;margin-top:-20px;}
    to {opacity:1;margin-top:0px;}
}

/* Standard syntax */
@keyframes fadetop {
    from {opacity:0;margin-top:-20px;}
    to {opacity:1;margin-top:0px;}
}

/*--- dekstop low ---*/



/*--- tablet ---*/
@media screen 
    and (min-width: 881px)
    and (max-width: 1079px)
    {
	    .login_form{
		    margin-left: 650px;
	    }
	    .title_top_login{
		    padding-right: 20px;
	    }
	   .sub_container{
		   width: auto;
		   height: 100%;
	   } 
	 .sub_container img{
		  width: 100%;
		  display: auto;
	  }
	
   .footer{
		  width: auto;
		  display: block;
	  }
	 
    }

/*--- tablet2 ---*/
@media screen 
    and (min-width: 681px)
    and (max-width: 880px)
    {
	     .login_form{
		    margin-left: 550px;
	    }
	    .title_top_login{
		    padding-right: 20px;
	    }
	   .sub_container{
		   width: auto;
		   height: 100%;
	   } 
	 .sub_container img{
		  width: 100%;
		  display: auto;
	  }
	
   .footer{
		  width: auto;
		  display: block;
	  }
	    
    }

/*--- phone ---*/
     @media screen 
    and (min-width: 0px)
    and (max-width: 680px)
    {
	   .login_form{
		    margin-left: 50px;
	    }
	    .title_top_login{
		    padding-right: 20px;
	    }
	   .sub_container{
		   width: auto;
		   height: 100%;
		   
	   } 
	 .sub_container img{
		  width: 100%;
		  display: none;
	  }
	
   .footer{
		  width: auto;
		  display:none;
	  }

    }