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

.senior1{
	display:block;
}
.senior2{
	display:none;
}

.loginbox{
	position: absolute;
	z-index:999;
    top: 60%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-40%);
    -webkit-transform: translateX(-50%) translateY(-40%);
    transform: translateX(-50%) translateY(-40%);
	width:350px;
	height:250px;
	background-color: #929292;
	color:#FFF;
	padding:20px;
}
.roundedform1{   
	display:block;
	color:#FFF;
	position: absolute;
	z-index:999;
    top: 60%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-40%);
    -webkit-transform: translateX(-50%) translateY(-40%);
    transform: translateX(-50%) translateY(-40%);
	width:425px;
	height:250px;
	border-radius: 15px;
    margin: auto;
    padding: 10px 20px 20px 20px;
    background-color:#929292;
}

.roundedform2{    
	display:none;
	color:#FFF;
	position: absolute;
	z-index:999;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-40%);
    -webkit-transform: translateX(-50%) translateY(-40%);
    transform: translateX(-50%) translateY(-40%);
	width:250px;
	height:250px;
	border-radius: 15px;
    margin: auto;
    padding: 10px 20px 20px 20px;
    
	background-color:#929292;
   

@media screen and (max-width: 766px){ 
   .senior1{
     display: none;
   }

   .senior2{
     display: block;
   }

   .roundedform1{
     display: none;
   }

   .roundedform2{
     display: block;
   }

	.loginbox{
	position: absolute;
	z-index:999;
    top: 45%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-40%);
    -webkit-transform: translateX(-50%) translateY(-40%);
    transform: translateX(-50%) translateY(-40%);
	width:250px;
	height:150px;
	background-image: url("loginbg.png");
	color:#FFF;
	padding:10px;
}

}

@media (min-width:1600px) {
	.roundedform1{
		top:65%
	}	
}
@media (max-width:1096px) and (min-width:1040px) {
	.roundedform1{
		top:55%
	}	
}

@media (max-width:1039px) and (min-width:920px) {
	.roundedform1{
		top:49%
	}	
}

@media (max-width:919px) and (min-width:825px) {
	.roundedform1{
		top:45%
	}	
}

@media (max-width:824px) and (min-width:769px) {
	.roundedform1{
		top:40%
	}	
}


@media only screen and (orientation: landscape)  {
	.roundedform2{
			top:450px;
	}

}