html, body{
  height:100%;
  margin: 0;
  overflow: hidden;
  
}

.contenedor{
    background-color: #e2e2e2;
    height: 100%;
    min-height: 100vh;
}

#image{
	max-width: 100%;
}

*{
  box-sizing: border-box;
}

.rectangulo {
	  justify-content: right;
	  align-items: right;
     width: 100%; 
     height: 120px; 
     /*border: 3px solid #004d8f;
     background: #004d8f;*/
	background: #7fa644;
	box-shadow: 0 0 25px 0 rgb(84 84 84 / 62%);
}

.rectangulo:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

#titulo{
  color: white;
  font-size: 40px;
  text-align: center;
   padding: 15px;
  z-index: 2;
}

.wrapperSquare{
  width: 100%;
 /* margin: 0 auto;*/
  position: relative; 
} 
/*.square{
	position: absolute;
    padding: 10em;
	float:left;
	width: 75%;
	background: #f8971d;
	 -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
	   margin-top:0%;
	   margin-left: 40%;
	   z-index: 1;

}*/
/*.square:last-child{
  margin-right:0;
}
.square:before{
	content:"";
	display:block;
	padding-top:100%;
    float: left;  
}*/


/*.squareDos{
	position: absolute;
    padding: 10em;
	float:left;
	width: 75%;
	background: transparent;
	border: 3px solid #004d8f;
	 -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
	   margin-top: 5%;
	   margin-right: 200%;
	   z-index: 2;

}*/
.squareDos:last-child{
  margin-right:0;
}
.squareDos:before{
	content:"";
	display:block;
	padding-top:100%;
    float: left;  
}

@media (max-height:630px){
	.wrapper{
		padding: 0;
		height: 400px;
	}
};

@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : landscape)  {   

				.rectangulo {
						 justify-content: right;
						 align-items: right;
						 width: 100%; 
						 height: 5px; 
						 border: 3px solid #7fa644;
						 background: #7fa644;
						}


				#titulo{
				  color: white;
				  font-size: 20px;
				  text-align: center;
				  padding: 10px;
				  
				}
				
			.wrapper {
			  display: flex;
			  align-items: center;
			  flex-direction: column;  
			  justify-content: center;
			  width: 100%;
			  min-height: 100%;
			  padding: 10px;
			}
			
			#formContent {
			  -webkit-border-radius: 10px;
			  border-radius: 10px;
			  background: #fff;
			  padding: 30px;
			  width: 100%;
			  max-width: 303px;
			  min-width: 303px;
			  min-height: 402px;
			  position: relative;
			  
			  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
			  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
			  text-align: center;
			}
			


}

@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait)  {   

				.rectangulo {
						 justify-content: right;
						 align-items: right;
						 width: 100%; 
						 height: 65px; 
						 border: 3px solid #7fa644;
						 background: #7fa644;
						}


				#titulo{
				  color: white;
				  font-size: 20px;
				  text-align: center;
				  padding: 10px;
				  
				}
				
			.wrapper {
			  display: flex;
			  align-items: center;
			  flex-direction: column;  
			  justify-content: center;
			  width: 100%;
			  min-height: 100%;
			  padding: 50px;
			}
			
			#formContent {
			  -webkit-border-radius: 10px;
			  border-radius: 10px;
			  background: #fff;
			  padding: 0px;
			  width: 100%;
			  max-width: 303px;
			  min-width: 303px;
			  min-height: 402px;
			  position: relative;
			  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
			  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
			  text-align: center;
			}

}


@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : landscape)  {   

				.rectangulo {
						 justify-content: right;
						 align-items: right;
						 width: 100%; 
						 height: 5px; 
						 border: 3px solid #7fa644;
						 background: #7fa644;
						}


				#titulo{
				  color: white;
				  font-size: 25px;
				  text-align: center;
				  padding: 10px;
				  
				}
				
			.wrapper {
			  display: flex;
			  align-items: center;
			  flex-direction: column;  
			  justify-content: center;
			  width: 100%;
			  min-height: 100%;
			  padding: 10px;
			}
			
			#formContent {
			  -webkit-border-radius: 10px;
			  border-radius: 10px;
			  background: #fff;
			  padding: 30px;
			  width: 100%;
			  max-width: 303px;
			  min-width: 303px;
			  min-height: 402px;
			  position: relative;
			  
			  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
			  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
			  text-align: center;

			}
			


}

@media only screen and  (max-width : 600px) and (min-width : 481px) and (orientation : portrait)  {   

				.rectangulo {
						 justify-content: right;
						 align-items: right;
						 width: 100%; 
						 height: 65px; 
						 border: 3px solid #7fa644;
						 background: #7fa644;
						}


				#titulo{ 
				  color: white;
				  font-size: 25px;
				  text-align: center;
				  padding: 10px;
				  
				}
				
			.wrapper {
			  display: flex;
			  align-items: center;
			  flex-direction: column;  
			  justify-content: center;
			  width: 100%;
			  min-height: 100%;
			  padding: 50px;
			}
			
			#formContent {
			  -webkit-border-radius: 10px;
			  border-radius: 10px;
			  background: #fff;
			  padding: 0px;
			  width: 100%;
			  max-width: 303px;
			  min-width: 303px;
			  min-height: 402px;
			  position: relative;
			  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
			  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
			  text-align: center;
			}

}

@media only screen  and (max-width : 800px) and (min-width: 601px) and (orientation : landscape){  

		html, body{
  height:500%;
  margin: 0;
  
}

		.rectangulo {
		 justify-content: right;
		 align-items: right;
		 width: 100%; 
		 height: 65px; 
		 border: 3px solid #7fa644;
		 background: #7fa644;
		}
		
		
		
			#titulo{
			  color: white;
			  font-size: 30px;
			  text-align: center;
			   padding: 0px;
			  
			}
			
			.wrapper {
			  display: flex;
			  align-items: center;
			  flex-direction: column; 
			  justify-content: center;
			  width: 100%;
			  min-height: 100%;
			  padding: 0px;
			}

			#formContent {
			  -webkit-border-radius: 10px;
			  border-radius: 10px;
			  background: #fff;
			  padding: 0px;
			  width: 90%;
			  max-width: 303px;
			  min-width: 303px;
			  min-height: 402px;
			  position: relative;
			  padding: 0px;
			  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
			  box-shadow: 0 0 25px 0 rgba(84, 84, 84, 0.62);
			  text-align: center;
			   margin-bottom: 15px;
			   margin-top: 0px;
			   font-size: 15px;
			}

				.contenedor{
					background-color: #e2e2e2;
					height: 300%;
					min-height: 300vh;
				}




	
}




@media only screen  and (max-width : 800px) and (min-width: 601px) and (orientation : portrait){  

		.rectangulo {
		 justify-content: right;
		 align-items: right;
		 width: 100%; 
		 height: 75px; 
		 border: 3px solid #7fa644;
		 background: #7fa644;
		}
		
		
		
			#titulo{
			  color: white;
			  font-size: 30px;
			  text-align: center;
			   padding: 0px;
			  
			}
			
			.wrapper {
			  display: flex;
			  align-items: center;
			  flex-direction: column; 
			  justify-content: center;
			  width: 100%;
			  min-height: 100%;
			  padding: 1px;
			}

			#formContent {
			  -webkit-border-radius: 10px;
			  border-radius: 10px;
			  background: #fff;
			  padding: 30px;
			  width: 90%;
			  max-width: 303px;
			  min-width: 303px;
			  min-height: 402px;
			  position: relative;
			  padding: 0px;
			  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
			  box-shadow: 0 0 25px 0 rgba(84, 84, 84, 0.62);
			  text-align: center;
			   margin-bottom: 15px;
			   margin-top: 50px;
			   font-size: 15px;
			}


	
}

@media only screen  and (max-width : 970px) and (min-width : 801px){  

		
		.rectangulo {
		 justify-content: right;
		 align-items: right;
		 width: 100%; 
		 height: 90px; 
		 border: 3px solid #7fa644;
		 background: #7fa644;
		}
		
		#titulo{
			  color: white;
			  font-size: 35px;
			  text-align: center;
			   padding: 0px;
			  
			}
			.wrapper {
				  display: flex;
				  align-items: center;
				  flex-direction: column; 
				  justify-content: center;
				  width: 100%;
				  min-height: 100%;
				  padding: 2px;
				}
	
				#formContent {
			  -webkit-border-radius: 10px;
			  border-radius: 10px;
			  background: #fff;
			  padding: 30px;
			  width: 90%;
			  max-width: 303px;
			  min-width: 303px;
			  min-height: 402px;
			  position: relative;
			  padding: 0px;
			  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
			  box-shadow: 0 0 25px 0 rgba(84, 84, 84, 0.62);
			  text-align: center;
			   margin-bottom: 15px;
			   margin-top: 50px;
			   font-size: 15px;
			}
}




@media only screen  and (min-width : 1024px){  
	.square{ 
			   margin-top:-11%;  
			   margin-left: 55%;
			    position: absolute;
						 padding: 13em;
						 float:left;
					 	 width: 75%;
						 background: #737373;
						 -webkit-transform: rotate(45deg);
						 -moz-transform: rotate(45deg);
						 -ms-transform: rotate(45deg);
						 -o-transform: rotate(45deg);
						transform: rotate(45deg);
						#margin-top:0%;
						#margin-left: 40%;
						z-index: 1;
		}
		.squareDos{
			  margin-top:13%;
			  margin-right: 1%;
			  position: absolute;
						padding: 10em;
						float:left;
						width: 75%;
						background: transparent;
						border: 3px solid #7fa644;
						 -webkit-transform: rotate(45deg);
						 -moz-transform: rotate(45deg);
						 -ms-transform: rotate(45deg);
						 -o-transform: rotate(45deg);
						 transform: rotate(45deg);
						  #margin-top: 5%;
						   #margin-right: 200%;
						   z-index: 2;
		}
		.wrapper {
			  display: flex;
			  align-items: center;
			  flex-direction: column; 
			  justify-content: center;
			  width: 100%;
			  min-height: 100%;
			  padding: 0px;
			}
			
			#formContent {
				  -webkit-border-radius: 10px;
				  border-radius: 10px;
				  background: #fff;
				  padding: 30px;
				  width: 90%;
				  max-width: 303px;
				  min-width: 303px;
				  min-height: 402px;
				  position: relative;
				  padding: 0px;
				  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
				  box-shadow: 0 0 25px 0 rgba(84, 84, 84, 0.62);
				  text-align: center;
				   margin-bottom: 15px;
				   margin-top: 50px;
				   font-size: 15px;
				}
}


@media only screen  and (min-width : 801px)  and (max-width : 1024px)  and (orientation : portrait) {  
	

	.square{ 
		margin-top:-11%;  
		margin-left: 55%;
		 position: absolute;
				  padding: 13em;
				  float:left;
				   width: 75%;
				  background: #737373;
				  -webkit-transform: rotate(45deg);
				  -moz-transform: rotate(45deg);
				  -ms-transform: rotate(45deg);
				  -o-transform: rotate(45deg);
				 transform: rotate(45deg);
				 #margin-top:0%;
				 #margin-left: 40%;
				 z-index: 1;
 }
 .squareDos{
	   margin-top:13%;
	   margin-right: 1%;
	   position: absolute;
				 padding: 10em;
				 float:left;
				 width: 75%;
				 background: transparent;
				 border: 3px solid #7fa644;
				  -webkit-transform: rotate(45deg);
				  -moz-transform: rotate(45deg);
				  -ms-transform: rotate(45deg);
				  -o-transform: rotate(45deg);
				  transform: rotate(45deg);
				   #margin-top: 5%;
					#margin-right: 200%;
					z-index: 2;
 }
		.wrapper {
			  display: flex;
			  align-items: center;
			  flex-direction: column; 
			  justify-content: center;
			  width: 100%;
			  min-height: 100%;
			  padding: 0px;
			}
			
			#formContent {
				  -webkit-border-radius: 10px;
				  border-radius: 10px;
				  background: #fff;
				  padding: 30px;
				  width: 90%;
				  max-width: 303px;
				  min-width: 303px;
				  min-height: 402px;
				  position: relative;
				  padding: 0px;
				  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
				  box-shadow: 0 0 25px 0 rgba(84, 84, 84, 0.62);
				  text-align: center;
				   margin-bottom: 15px;
				   margin-top: 50px;
				   font-size: 15px;
				}
}


@media only screen  and (min-width : 801px)  and (max-width : 1024px)  and (orientation : landscape) { 

   
	.square{ 
			   margin-top:-11%;  
			   margin-left: 55%;
			    position: absolute;
						 padding: 13em;
						 float:left;
					 	 width: 75%;
						 background: #737373;
						 -webkit-transform: rotate(45deg);
						 -moz-transform: rotate(45deg);
						 -ms-transform: rotate(45deg);
						 -o-transform: rotate(45deg);
						transform: rotate(45deg);
						#margin-top:0%;
						#margin-left: 40%;
						z-index: 1;
		}
		.squareDos{
			  margin-top:13%;
			  margin-right: 1%;
			  position: absolute;
						padding: 10em;
						float:left;
						width: 75%;
						background: transparent;
						border: 3px solid #7fa644;
						 -webkit-transform: rotate(45deg);
						 -moz-transform: rotate(45deg);
						 -ms-transform: rotate(45deg);
						 -o-transform: rotate(45deg);
						 transform: rotate(45deg);
						  #margin-top: 5%;
						   #margin-right: 200%;
						   z-index: 2;
		}
		.wrapper {
			  display: flex;
			  align-items: center;
			  flex-direction: column; 
			  justify-content: center;
			  width: 100%;
			  min-height: 100%;
			  padding: 0px;
			}
			
			#formContent {
				  -webkit-border-radius: 10px;
				  border-radius: 10px;
				  background: #fff;
				  padding: 30px;
				  width: 90%;
				  max-width: 303px;
				  min-width: 303px;
				  min-height: 402px;
				  position: relative;
				  padding: 0px;
				  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
				  box-shadow: 0 0 25px 0 rgba(84, 84, 84, 0.62);
				  text-align: center;
				   margin-bottom: 15px;
				   margin-top: 50px;
				   font-size: 15px;
				}
}




@media only screen  and (max-width : 1280px) and (min-width : 1025px){  
		.square{ 
			   margin-top:-4.5%;
			    position: absolute;
						 padding: 15em;
						 float:left;
					 	 width: 75%;
						 background: #737373;
						 -webkit-transform: rotate(45deg);
						 -moz-transform: rotate(45deg);
						 -ms-transform: rotate(45deg);
						 -o-transform: rotate(45deg);
						transform: rotate(45deg);
						  #margin-top:0%;
						margin-left: 40%;
						z-index: 1;

		}
		.squareDos{
			  margin-top:13%;
			  position: absolute;
						padding: 10em;
						float:left;
						width: 75%;
						background: transparent;
						border: 3px solid #7fa644;
						 -webkit-transform: rotate(45deg);
						 -moz-transform: rotate(45deg);
						 -ms-transform: rotate(45deg);
						 -o-transform: rotate(45deg);
						 transform: rotate(45deg);
						  #margin-top: 5%;
						   margin-right: 200%;
						   z-index: 2;
		}
		.wrapper {
			  display: flex;
			  align-items: center;
			  flex-direction: column; 
			  justify-content: center;
			  width: 100%;
			  min-height: 100%;
			  padding: 40px;
			}
			
			#formContent {
				  -webkit-border-radius: 10px;
				  border-radius: 10px;
				  background: #fff;
				  padding: 30px;
				  width: 90%;
				  max-width: 303px;
				  min-width: 303px;
				  min-height: 402px;
				  position: relative;
				  padding: 0px;
				  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
				  box-shadow: 0 0 25px 0 rgba(84, 84, 84, 0.62);
				  text-align: center;
				   margin-bottom: 15px;
				   margin-top: 50px;
				   font-size: 15px;
				}
	
}


@media only screen  and (max-width : 1366px) and (min-width : 1281px){  
		.square{ 
			   margin-top:-3%;
			   z-index: 0;
			    position: absolute;
						 padding: 17em;
						 float:left;
					 	 width: 75%;
						 background: #737373;
						 -webkit-transform: rotate(45deg);
						 -moz-transform: rotate(45deg);
						 -ms-transform: rotate(45deg);
						 -o-transform: rotate(45deg);
						transform: rotate(45deg);
						  #margin-top:0%;
						margin-left: 40%;
						
					

		}
		.squareDos{
			  margin-top:13.5%;
			  z-index: 1;
			  position: absolute;
						padding: 10em;
						float:left;
						width: 75%;
						background: transparent;
						border: 3px solid #7fa644;
						 -webkit-transform: rotate(45deg);
						 -moz-transform: rotate(45deg);
						 -ms-transform: rotate(45deg);
						 -o-transform: rotate(45deg);
						 transform: rotate(45deg);
						  #margin-top: 5%;
						   margin-right: 200%;
						
		}
		.wrapper {
			  display: flex;
			  align-items: center;
			  flex-direction: column; 
			  justify-content: center;
			  width: 100%;
			  min-height: 100%;
			  padding: 40px;
			}
			
			#formContent {
				  -webkit-border-radius: 10px;
				  border-radius: 10px;
				  background: #fff;
				  padding: 30px;
				  width: 90%;
				  max-width: 303px;
				  min-width: 303px;
				  min-height: 402px;
				  position: relative;
				  padding: 0px;
				  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
				  box-shadow: 0 0 25px 0 rgba(84, 84, 84, 0.62);
				  text-align: center;
				   margin-bottom: 15px;
				   margin-top: 50px;
				   font-size: 15px;
				}
	
}

@media only screen  and (max-width : 1440px) and (min-width : 1367px){  
		.square{ 
			   margin-top:-2.5%;
			    position: absolute;
						 padding: 17em;
						 float:left;
					 	 width: 75%;
						 background: #737373;
						 -webkit-transform: rotate(45deg);
						 -moz-transform: rotate(45deg);
						 -ms-transform: rotate(45deg);
						 -o-transform: rotate(45deg);
						transform: rotate(45deg);
						  #margin-top:0%;
						margin-left: 40%;
						z-index: 1;

		}
		.squareDos{
			  margin-top: 14%;
			  position: absolute;
						padding: 10em;
						float:left;
						width: 75%;
						background: transparent;
						border: 3px solid #7fa644;
						 -webkit-transform: rotate(45deg);
						 -moz-transform: rotate(45deg);
						 -ms-transform: rotate(45deg);
						 -o-transform: rotate(45deg);
						 transform: rotate(45deg);
						  #margin-top: 5%;
						   margin-right: 200%;
						   z-index: 2;
		}
		.wrapper {
			  display: flex;
			  align-items: center;
			  flex-direction: column; 
			  justify-content: center;
			  width: 100%;
			  min-height: 100%;
			  padding: 40px;
			}
			
			#formContent {
				  -webkit-border-radius: 10px;
				  border-radius: 10px;
				  background: #fff;
				  padding: 30px;
				  width: 90%;
				  max-width: 303px;
				  min-width: 303px;
				  min-height: 402px;
				  position: relative;
				  padding: 0px;
				  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
				  box-shadow: 0 0 25px 0 rgba(84, 84, 84, 0.62);
				  text-align: center;
				   margin-bottom: 15px;
				   margin-top: 50px;
				   font-size: 15px;
				}
	
}

@media only screen  and (max-width : 1680px) and (min-width : 1441px){  
		.square{ 
				margin-top:0%;
			    position: absolute;
				padding: 20em;
				float:left;
				width: 75%;
				background: #737373;
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
				#margin-top:0%;
				margin-left: 40%;
				z-index: 1;

		}
		.squareDos{
			  margin-top:15%;
			  position: absolute;
						padding: 10em;
						float:left;
						width: 75%;
						background: transparent;
						border: 3px solid #7fa644;
						 -webkit-transform: rotate(45deg);
						 -moz-transform: rotate(45deg);
						 -ms-transform: rotate(45deg);
						 -o-transform: rotate(45deg);
						 transform: rotate(45deg);
						  #margin-top: 5%;
						   margin-right: 200%;
						   z-index: 2;
		}
		.wrapper {
			  display: flex;
			  align-items: center;
			  flex-direction: column; 
			  justify-content: center;
			  width: 100%;
			  min-height: 100%;
			  padding: 40px;
			}
			
			#formContent {
				  -webkit-border-radius: 10px;
				  border-radius: 10px;
				  background: #fff;
				  padding: 30px;
				  width: 90%;
				  max-width: 303px;
				  min-width: 303px;
				  min-height: 402px;
				  position: relative;
				  padding: 0px;
				  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
				  box-shadow: 0 0 25px 0 rgba(84, 84, 84, 0.62);
				  text-align: center;
				   margin-bottom: 15px;
				   margin-top: 50px;
				   font-size: 15px;
				}
	
}
@media only screen  and (max-width : 2800px) and (min-width : 1681px) { 
				.square{ 
					     margin-top:3%;
					     position: absolute;
						 padding: 20em;
						 float:left;
					 	 width: 75%;
						 background: #737373;
						 -webkit-transform: rotate(45deg);
						 -moz-transform: rotate(45deg);
						 -ms-transform: rotate(45deg);
						 -o-transform: rotate(45deg);
						transform: rotate(45deg);
						  #margin-top:0%;
						margin-left: 40%;
						z-index: 1;

				}
				.squareDos{
					 margin-top:14%;
					 position: absolute;
					 padding: 10em;
					 float:left;
					 width: 75%;
					 background: transparent;
					 border: 3px solid #7fa644;
					 -webkit-transform: rotate(45deg);
					 -moz-transform: rotate(45deg);
					 -ms-transform: rotate(45deg);
					 -o-transform: rotate(45deg);
					 transform: rotate(45deg);
					  #margin-top: 5%;
					 margin-right: 200%;
					z-index: 2;

				}
				.wrapper {
				  display: flex;
				  align-items: center;
				  flex-direction: column; 
				  justify-content: center;
				  width: 100%;
				  min-height: 100%;
				  padding: 40px;
				}
				
				#formContent {
					  -webkit-border-radius: 10px;
					  border-radius: 10px;
					  background: #fff;
					  padding: 30px;
					  width: 90%;
					  max-width: 303px;
					  min-width: 303px;
					  min-height: 402px;
					  position: relative;
					  padding: 0px;
					  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
					  box-shadow: 0 0 25px 0 rgba(84, 84, 84, 0.62);
					  text-align: center;
					   margin-bottom: 15px;
					   margin-top: 50px;
					   font-size: 15px;
					}
}



/*evitar el autorrellenod el navegador*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,  
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #A6BF6F inset !important;
	-webkit-text-fill-color: white;
	/*-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);*/
}

/* STRUCTURE */
/*
.wrapper {
  display: flex;
  align-items: center;
  flex-direction: column; 
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 80px;
}*/
/*
#formContent {
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  background: #e7e6e6;
  padding: 30px;
  width: 90%;
  max-width: 303px;
  min-width: 303px;
  min-height: 402px;
  position: relative;
  padding: 0px;
  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  box-shadow: 0 0 25px 0 rgba(84, 84, 84, 0.62);
  text-align: center;
   margin-bottom: 15px;
   margin-top: 50px;
   font-size: 15px;
   border-radius: 2px;
}
*/

/*Estilo del boton*/

input[type=button], input[type=submit], input[type=reset]  {
  background-color: #737373;
  border: 2px solid #737373;
  color: #fff;
  padding: 8px;
  min-width: 70%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  font-size: 13px;
  -webkit-box-shadow: 0 10px 30px 0 rgba(65,49,47,0.1);
  box-shadow: 0 10px 30px 0 rgba(65,49,47,0.1);
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 16px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
  background-color: #4c4c4c;
  border: 2px solid #737373;
}

input[type=button]:active, input[type=submit]:active, input[type=reset]:active  {
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -o-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}
/* login*/
input[type=text] {
  border: none;
  color: #000;
  padding: 8px;
  font-size: 16px;
  margin: 5px;
  width: 70%;
  border: 2px solid #7fa644 !important;
  border-radius: 10px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

input[type=text]:focus {
  background-color: rgba(110, 158, 63, 0.3);
}

input[type=text]::placeholder {
  color: #000;
}

/*pass*/
input[type=password] {
  border: none;
  color: #000;
  padding: 8px;
  font-size: 16px;
  margin: 5px;
  width: 70%;
  border: 2px solid #7fa644 !important;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

input[type=password]:focus {
  background-color: rgba(110, 158, 63, 0.3);
}
input[type=password]::placeholder {
	color: #000;
  }


/* Animaciones para mostrar */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
} 

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
.flash {
	padding: 16px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: white;
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
	border-radius: 4px;
	margin: 8px;
  }
.flash a{
	cursor: pointer;
}
.flash-success {
	border: 2px solid #1EDD88 !important;
}

.flash-warning {
	border: 2px solid #FFC65A !important;
}

.flash-danger {
	border: 2px solid #FD1015 !important;
}
  

/* Simple CSS3 Fade-in Animation */
/*line de cada input*/
.underlineHover:after {
  display: block;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2px;
  background-color: #56baed;
  content: "";
  transition: width 0.2s;
}

.underlineHover:hover {
  color: #0d0d0d;
}

.underlineHover:hover:after{
  width: 100%;
}

 ::placeholder {
  color: white;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: white;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: white;
}