body{

	background: #ccc;

	font-family: 'Open Sans', sans-serif;



}

body a,form li,.submit input[type="submit"]{

	transition: 0.1s all;

	-webkit-transition: 0.1s all;

	-moz-transition: 0.1s all;

	-o-transition: 0.1s all;

}



img{max-width:100%;}

ul{list-style:none;margin:0px;padding:0px;}

a{text-decoration:none;}

.main{

	position:relative;

}



/*---login-form1--------*/

.login {

  margin:0% auto 4%;

  width:25%;

  background: #EEEEEE;

  border-radius: 0.5em;

  -webkit-border-radius: 0.5em;

  -o-border-radius: 0.5em;

  -moz- border-radius: 0.5em;

}



form p {

	text-align: center;

	width: 90%;

}

form p a {

	color: #888;

	font-family: 'Open Sans', sans-serif;	

}

form ul{padding: 4%; padding-top: 12%; padding-bottom: 2%;}

form li {

  list-style: none;

  width: 100%;

  font-weight: 500;

  border: 1px solid #ccc;

  background: #fff;

  margin: 1em 0;

  outline: none;

}



input[id="msgArea"], input[id="pass"] {

  width: 85% !important;

  padding:1em 0em 1em 1.9em !important;

  color:  #676767 !important;

  font-size: 15px !important;

  outline:  #676767 !important;

  background: none !important;

  font-weight: 500 !important;

  border: none !important;



}



input[id="msgArea"]:focus, input[type="password"]:focus {

    border: none !important;

    box-shadow: none !important;

    margin: none !important;

    padding: none !important;

} 



.icon {

 height: 20px;

  width: 20px;

  display: block;

  float: left;

  margin: 12px -18px 0 0;

  padding: 5px 10px 0 0;

  border-right: 1px solid #999;

}

.user {

  background: url(../images/user.png) no-repeat 8px 2px ;

}

.lock {

  background: url(../images/Lock.png) no-repeat 8px 2px ;

}



.submit{

	border-bottom-right-radius: 14em;

	-webkit-border-bottom-right-radius: 14em;

	-moz-border-bottom-right-radius: 14em;

	-o-border-bottom-right-radius: 14em;



}

.submit input[type="submit"]{

	font-size:20px;

	font-weight: 400;

	color: #fff;

	cursor: pointer;

	outline: none;

	padding: 22px 20px 44px 20px; 

	width: 100%;

	border: none;

	transition: 0.1s all;

	-webkit-transition: 0.1s all;

	-moz-transition: 0.1s all;

	-o-transition: 0.1s all;

	background: #00bffe; 

	border-bottom-right-radius: 0.44em;

  -webkit-border-bottom-right-radius: 0.4em;

  -o-border-bottom-right-radius: 0.4em;

  -moz-border-bottom-right-radius: 0.4em;

   border-bottom-left-radius: 0.4em;

  -webkit-border-bottom-left-radius: 0.4em;

  -o-border-bottom-left-radius: 0.4em;

  -moz-border-bottom-left-radius: 0.4em;

}

input[type="submit"]:hover{

	background:#ffa300;

}

/* ribbon style */

.h2 h2 {

  color: #EEEEEE;

  font-size: 1.2em;

  padding: 7px 9px 5px 27px;

  font-weight: 400;

}

 .h2.ribbon-wrapper {

	position: relative;

}

 .h2 .ribbon-front {

	background-color: #00BFFF;

	height: 43px;

	width: 145px;

	position: relative;

	left:-10px;

	z-index: 2;

	top: 35px;

}



 .h2 .ribbon-edge-topleft,

 .h2 .ribbon-edge-topright,

 .h2 .ribbon-edge-bottomleft,

 .h2 .ribbon-edge-bottomright {

	position: absolute;

	z-index: 1;

	border-style:solid;

	height:0px;

	width:0px;

}



 .h2 .ribbon-edge-topleft,

 .h2 .ribbon-edge-topright {

}



 .h2 .ribbon-edge-bottomleft,

 .h2 .ribbon-edge-bottomright {

	top:77px;

}



 .h2 .ribbon-edge-topleft,

 .h2 .ribbon-edge-bottomleft {

	left: -10px;

	border-color: transparent #00BFFF transparent transparent;

}



 .h2 .ribbon-edge-topleft {

	top: -0px;

	border-width: 0px 10px 0 0;

}

 .h2 .ribbon-edge-bottomleft {

	  border-width: 0 10px 15px 0;

}



 .h2 .ribbon-edge-topright,

 .h2 .ribbon-edge-bottomright {

	left: 180px;

	border-color: transparent transparent transparent #e17e02;

}



 .h2 .ribbon-edge-topright {

	top: -0px;

	border-width: 0px 0 0 0px;

}

 .h2 .ribbon-edge-bottomright {

	border-width: 0 0 0px 0px;

}

.ribbon-edge-topleft2 {

  position: absolute;

  z-index: 1;

  border-style: solid;

  height: 0px;

  width: 0px;

}

.ribbon-edge-topleft2 {

   left: 135px;

  border-color: transparent #00BFFF transparent transparent;

}

.ribbon-edge-topleft2 {

  top: 35px;

  border-width: 22px 20px 21px 37px;

  transform: rotate(-180deg);

  border-radius: 1px;

}

/****************/

.login .copy-right {

	position: absolute;

	bottom:-15%;

	left: 26%;

}

.copy-right p {

	color:#747474;

	font-size: 0.8em;

	font-family: 'Open Sans', sans-serif;	

	font-weight: 400;

}

.copy-right p a {

	font-family: 'Open Sans', sans-serif;	

	font-size: 0.9em;

	color:#747474;

	-webkit-transition: all 0.3s ease-out;

	-moz-transition: all 0.3s ease-out;

	-ms-transition: all 0.3s ease-out;

	-o-transition: all 0.3s ease-out;

	transition: all 0.3s ease-out;

}

.copy-right p a:hover{

	color:#800000;

}





/*-----start-responsive-design------*/

@media (max-width:1440px){

}

@media (max-width:1366px){

	.login-01 {

	  margin: 0 auto;

  		width: 35%;

  

	}

	/*form {

	  padding: 12% 4% 6% 4%;

	} */

	body  h1{

	font-size: 2.5em;

	}

}

@media (max-width:1280px){

	.login {

	   margin: 4% auto 6%;

	  width: 35%;



	}



}

@media (max-width:1024px){

	.login {

	  margin: 4% auto 6%;

	  width:40%;

	}

	body  h1{

	font-size: 2.3em;

	}



}

@media (max-width:768px){

	.login {

	    margin: 4% auto 8%;

	  width:55%;

	}

	body  h1{

	font-size: 2.1em;

	}

}

@media (max-width:640px){

	.login {

  margin:4% auto 8%;

  width: 66%;

}

.copy-right p {

  font-size: 0.9em;

  line-height: 1.6em;

}

body  h1{

	font-size: 2em;

	}

	

}

@media (max-width:480px){

	.login {

    margin: 4% auto 18%;

  width:87%;

}

body  h1{

	font-size: 1.8em;

	}



	

}

@media (max-width:320px){

	.login {

    margin: 4% auto 8%;

  width: 89%;

	}

	.submit input[type="submit"]{

	font-size:18px;

	padding:18px 18px;

	}

	.copy-right p {

  font-size: 0.85em;

  line-height: 1.6em;

	}

	input[type="text"], input[type="password"] {

	  font-size: 13px;

	}

	.icon {

  margin: 8px -29px 0px 0px;

  padding: 5px 14px 0 0;

}

	form li {

  width: 99%;

	}

	

}