@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lato');
*{
padding:0;
margin:0;
}

html,body{
	font-family: 'Lato', sans-serif;
	width: 100%;
	height: 100%;
	margin: 0px;
	font-size: 14px;
	color:#333;
	background-color:white;
/*display: flex;
flex-direction: column;*/
}
/*body { min-height: 100vh; }*/


a:link,a:visited,a:hover,a:active{
	text-decoration: none;
	color: #FFF;
}

.container{
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
/*	height: 100%;*/
/*	min-height: 100%;*/

	
		width:100vw;
	height:100vh; 
}
.form{
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
	
	/*width: 75%;*/
	
	/*height: 100%;*/
	height:100vh;
}

.banner{
	
		display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	background-color: #34495E;
	width: 25%;
	height: 100%;
	color: white;
	
/*   display: flex;
   align-items: stretch;*/
}
.banner01{
	
		display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	background-color: #34495E;
	width: 25%;
/*	height: 650px;
*/	color: white;
	
	height:100vh; 
	
/*   display: flex;
   align-items: stretch;*/
}

.banner2{
	
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	background-color: #34495E;
	width: 25%;
/*	height: 700px;*/
	height: 850px;
	color: white;
	
/*   display: flex;
   align-items: stretch;*/
}
.banner3{
	
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	background-color: #34495E;
	width: 25%;
/*	height: 700px;*/
	height: 650px;
	color: white;
	
/*   display: flex;
   align-items: stretch;*/
}


.autco{
	margin: 0 auto;
	width: 350px;
	height:100vh;

}
.autco3{
	margin: 0 auto;
	width: 700px;
	height:100vh;

}

.txta_notes{
	background:#FFF;
	width:100%;
	height:250px;
	border-color: #B0B0B0;
	font-size:11px;
	padding:5px;
	resize:none;
	text-indent: 5px;
	outline: none;

	}

.autco02{
	margin: 0 auto;
	padding: 20px;
	width: 350px;
	height: 100%;
/*	margin-bottom: 30px;*/
}





.tit{
	font-size: 24px;
	color: #666;
	font-weight: 400;
	letter-spacing:2px;	
	margin-bottom: 22px;
	user-select: none;
	text-align: center;
	}

#term01{
	cursor: pointer;
}

#term01:hover{
	text-decoration: underline;
}



.line_btn{
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	
/*	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:flex-end;*/
	/*width:40%;
*//*	margin-left:auto;
	margin-right:20px;*/
	}

.titulo_input{
	display:inline-block;
	font-size:12px;
	color: #999;
	letter-spacing:2px; 
	margin-top: 14px;
	text-align: center;
	width: 100%;
	user-select: none;
}


.btn_eye{
	width: 3%;
	margin-left: 90%;
	margin-top: -32px;
	position: absolute;
	text-align: right;
	z-index: 20;
	cursor: pointer;
	color: #34495E;
	font-size: 30px;
	
}
.btn_eye:hover{
	transition: all 0.4s linear;
	color: darkslategray;
	
}
.btn_eye02{
	width: 3%;
/*	margin-left: 90%;*/
/*	margin-left: 10%;*/
	margin-top: -35px;
	margin-left: 310px;
	position: absolute;
/*	text-align: right;*/
	z-index: 20;
	cursor: pointer;
	color: #34495E;
	font-size: 30px;
	
}
.btn_eye02:hover{
	transition: all 0.4s linear;
	color: darkslategray;
	
}
.txfor{
	color: slategray;
	font-size: 12px;
	letter-spacing: 1px;
/*	cursor: pointer;*/
	margin-top: -10px;
	user-select: none;
	text-align: center;
}

/*.txfor:hover{
	transition: all 0.4s linear;
	color: crimson;
	font-size: 12px;
}*/
.txfor02{
	color: darkslategray;
	font-size: 10px;
	letter-spacing: 1px;
	margin-top: -10px;
	user-select: none;
	text-align: center;
}
.notas1{
	margin: 0 auto;
	color: #999;
	font-size: 13px;
	letter-spacing: 2px;
	text-align: center;
	user-select: none;
}



::placeholder { /* Firefox, Chrome, Opera */ color: #CCC; letter-spacing: 1px; } 
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #CCC; letter-spacing: 1px; } 
::-ms-input-placeholder { /* Microsoft Edge */ color: #CCC; letter-spacing: 1px; } 
:focus::-webkit-input-placeholder{color:transparent; letter-spacing: 1px;}

.line{
	margin-top: 10px;
	margin-bottom:15px;
	background-color: lavender;
	border-style:none none solid;
	border-bottom-color: #34495E;
	border-bottom-width:1px;   
}

.lineR{
	margin-top: 10px;
	margin-bottom:65px;
	height: 20px;
/*	background-color: lavender;
	border-style:none none solid;
	border-bottom-color: #34495E;
	border-bottom-width:1px;   
*/}

.lineBC{
	width: 80%;
		display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: baseline;
	align-content: center;
	margin: 0 auto;
}
.line02{
	margin-top: 10px;
	margin-bottom:15px;
	border-style:none none solid;
	border-bottom-color: #34495E;
	border-bottom-width:1px; 
	user-select: none;
	
}
.line_p{
	position: relative;
	z-index: 10;
	margin-top: 10px;
	margin-bottom:20px;

	background-color: lavender;
	border-style:none none solid;
	border-bottom-color: #34495E;
	border-bottom-width:1px;   
}



input[type="text"],[type="password"]{
	font-size:12px;
	width: 100%;
	background-color: transparent;
	text-indent: 20px;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
/*	border-style:none none solid;
	border-bottom-color: #bf2b2a;
	border-bottom-width:1px; */  
	border: none;
	
	height: 35px;
	color: #333;
	letter-spacing:2px;
	border-radius:4px;
	user-select: none;
}

.input03{
	font-size:12px;
	width: 100%;
	background-color: transparent;
	text-indent: 20px;
	margin: 0PX auto;
	border: 1px solid #D5D8DC;
	border-radius:3px;
	height: 40px;
	color: #333;
	letter-spacing:2px;
	outline: none;	
}

input[type=text]:focus, input[type=password]:focus, input[type=telefono]:focus, .input03:focus, select:focus {
outline:none;
box-shadow: 0 0 5px  rgba(78,84,200,1);
border: 1px solid #4e54c8;
}


/*input[type=text]:focus, input[type=password]:focus {
outline:none;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
}

*/
.error{
	font-size: 10px;
	width: 70%;
	margin-top:0px;
	margin-right: auto;
	margin-left: auto;
	padding:4px 20px;
	background-color: orangered;
/*	background:#03C;*/
	color: #FFF;
	text-align:center;
	letter-spacing:2px;
	border-radius:3px;
	margin-bottom: 15px;
	user-select: none;
}
.ti03{

	font-size: 40px;
	letter-spacing: 2px;
	font-weight: 400;
	user-select: none;
}
.ti04{
	font-size: 25px;
	letter-spacing: 2px;
	font-weight: 100;
	text-indent: 100px;
	user-select: none;
}
.ti05{
	margin: 18px 0;
	font-size: 16px;
	letter-spacing: 1px;
	font-weight: 100;
/*	text-indent: 100px;*/
	user-select: none;
	text-align: center;
}
.ti06{
	margin: 18px 0;
	font-size: 11px;
	letter-spacing: 1px;
	font-weight: 100;
/*	text-indent: 100px;*/
	user-select: none;
	text-align: justify;
}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../img/loader.gif) 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}

/*.notas1{
	
}*/






.btn01 {
	font-size: 12px;
	cursor: pointer;
	padding: 10px;
	border-radius:2px;
	color:#FFF;
	border: 1px solid #CCC;
	background:#34495E;
	text-align:center;
	float: right;
	margin-top: 10px;
	width:120px;
	letter-spacing: 1px;
	user-select: none;
	}
.btn01:hover {
	color: yellow;
	background-color: #333;
	transition: all 0.4s linear;
}
.btn04 {
	font-size: 12px;
	cursor: pointer;
	padding: 10px;
	border-radius:2px;
	color:#FFF;
	border: 1px solid #CCC;
	background:#34495E;
	text-align:center;
	float: right;
	margin-top: 10px;
	width:200px;
	letter-spacing: 1px;
	user-select: none;
	}
.btn04:hover {
	color: yellow;
	background-color: #333;
	transition: all 0.4s linear;
}
.btn03 {
	font-size: 12px;
	cursor: pointer;
	padding: 10px;
	border-radius:2px;
	color:#FFF;
	border: 1px solid #CCC;
	background:#34495E;
	text-align:center;
	float: right;
	margin-top: 10px;
	width:140px;
	letter-spacing: 1px;
	user-select: none;
	}
.btn03:hover {
	color: yellow;
	background-color: #333;
	transition: all 0.4s linear;
}

.btn02 {
	margin: 0 auto;
	font-size: 12px;
	cursor: pointer;
	padding: 10px;
	border-radius:2px;
	border: 1px solid #CCC;
	background:cadetblue;
	text-align:center;
	margin-top: 10px;
	letter-spacing:1px;
/*	width:40%;*/
	width:90px;
	color: white;
	user-select: none;
	}




.btn02:hover {
	background-color: #2367B9;
	transition: all 0.4s linear;

	font-size: 14px;
}

.ben{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: flex-start;
	margin: 0 20px 30px 30px;
	text-align: justify;
	font-size: 12px;
	color: white;
	user-select: none;
}

.derPS{
	width: 80%;
	border: 1px ridge #CCC;
	padding: 10px;
	margin-left: 20px;
}

.co850{
	position: absolute;	
	bottom: 0px;
	width: 100%;
}

.co800{
	height: 100%;
}
.co810{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
	width: 100%;
	height: auto;
	padding-top: 150px;
}

.co820{
	width: 60%;
	text-align: right;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	letter-spacing: 2px;
	font-size:28px;
	color: darkslategray;
}

.co840{
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	margin: 0 100px 0 100px;
	width: 80%;
	letter-spacing: 1px;
	text-align: center;
}

.co841{
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: bolder;
	margin-bottom: 40px;
	text-align: center;
	letter-spacing: 2px;
}
.co842{
	width: 100%;
	font-family: 'Montserrat', sans-serif;
	text-align: left;
}

.co848{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: stretch;
	width: 80%;	
	margin: 0 auto;
}
.btn800 {
	margin: 0 auto;
	font-size: 14px;
	cursor: pointer;
	padding: 8px;
	border-radius:2px;
	border: 1px solid #CCC;
	background:cadetblue;
	text-align:center;
	margin-top: 10px;
	margin-left: 20px;
	letter-spacing:2px;
	width:60%;
	color: white;
	}

.btn800:hover {
	background-color: #2367B9;
	transition: all 0.4s linear;
}

.waves {
  position:relative;
  width: 100%;
  height:55%;
/*  margin-bottom:-7px;*/ /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

/* Animation */
.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}



@media only screen and (max-width:767px){
	
 .waves {
    height:80px;
    min-height:80px;
  }	
.co810{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
	padding-top: 40px;

}	
	
.co820{
	width: 100%;
	text-align: center;
	font-size:38px;
}	
.co840{
	margin: 0 auto;
	margin-top: 30px;
	width: 90%;
}	
.co841{
	margin-bottom: 20px;
}	
.co842{
	margin: 0 auto;
	width: 80%;
	font-family: 'Montserrat', sans-serif;
	text-align: justify;
}
.co848{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: stretch;
	width: 100%;	
}	
	
.btn800 {
	width:70%;
	margin: 0 auto;
	margin-bottom: 20px;
}
	
.container{
	width:95%;
	margin:0 auto;
}

header{
	background-size:320px;
	height:150px;
}
h1{
	/*padding-top:170px;*/
	font-size: 20px;
	text-indent:2px;
	font-weight: 600;
	text-align: center; 
	}
.form{
	margin:0 auto;
	width: 85%;
	height: 100%;
}
.titulo_input{
	font-size:16px;
	text-align:center;
}
.line_btn{
	margin:0 auto;
	width:80%;
	}
.btn {
	width:140px;
	padding: 12px;
	font-size: 14px;
	}
}