:root{
   --color-primario:#004797;
   --color-secundario: #cdae50;
   --color-texto:#5d6266;
}
body{
   margin:0;
   padding:0;
   background:#ffffff;
   color:var(--color-texto);
   font-family: 'Comfortaa', cursive;
   line-height: 1.6;
   font-size:17px;
}
nav, section, article, footer, header{
   display:block;
   width:100%;
   float:left;
}
.contenedor-90-left{
   width: 90%;
}
.contenedor-90-right{
   width: 90%;
   margin: 0 0 0 10%;
}
.contenedor{
   display:block;
   margin:0 auto;
   width:95%;
}
.contenedor-80{
   display:block;
   margin:0 auto;
   width:80%;
   max-width: 1600px;
}
.contenedor-70{
   display:block;
   margin:0 auto;
   width:70%;
}
.centrar{
   text-align: center;
}
.derecha{
   text-align: right;
}
.row{
   display:block;
   width:100%;
   float:left;
}
.relative{
   position: relative;
}
.full-width{
   width:100%;
   display:block;
}
.width-80{
   width:80%;
   display:block;
   margin:0 auto;
}
.vertical-center{
   align-items: center;
   justify-content: center;
}
strong{
    color:var(--color-primario);
}
.flex-container{
   display:flex;
   width:100%;
   flex-flow: row wrap;
}
.flex-10{
   flex:0 0 10%;
}
.flex-15{
   flex:0 0 15%;
}
.flex-16{
   flex:0 0 16.6666%;
}
.flex-20{
   flex:0 0 20%;
}
.flex-25{
   flex:0 0 25%;
}
.flex-30{
   flex:0 0 30%;
}
.flex-33{
   flex:0 0 33.33%;
}
.flex-35{
   flex:0 0 35%;
}
.flex-40{
   flex:0 0 40%;
}
.flex-50{
   flex:0 0 50%;
}
.flex-60{
   flex:0 0 60%;
}
.flex-70{
   flex:0 0 70%;
}
.flex-80{
   flex:0 0 80%;
}
.flex-85{
   flex:0 0 85%;
}
.display-flex{
   display:flex;
   flex:0 0 100%;
}
.p-12{
   font-size:12px;
   line-height: 18px;
}
.p-13{
   font-size:13px;
   line-height: 19px;
}
.p-14{
   font-size:14px;
   line-height:20px;
}
.p-b-20{
   padding-bottom:20px;
}
.p-b-30{
   padding-bottom:30px;
}
.p-b-40{
   padding-bottom:40px;
}
.p-b-50{
   padding-bottom:50px;
}
.p-b-80{
   padding-bottom:80px;
}
.p-t-10{
   padding-top:10px;
}
.p-t-20{
   padding-top:20px;
}
.p-t-30{
   padding-top:30px;
}
.p-t-40{
   padding-top:40px;
}
.p-t-50{
   padding-top:50px;
}
.col-10{
   display:inline-block;
   width:10%;
   float:left;
}
.col-20{
   display:inline-block;
   width: 20%;
   float:left;
}
.col-25{
   display:inline-block;
   width: 25%;
   float:left;
}
.col-30{
   display:inline-block;
   width: 30%;
   float:left;
}
.col-33{
   display:inline-block;
   width: 33.3333%;
   float:left;
}
.col-40{
   display:inline-block;
   width: 40%;
   float:left;
}
.col-45{
   display:inline-block;
   width: 45%;
   float:left;
}
.col-50{
   display:inline-block;
   width:50%;
}
.col-60{
   display:inline-block;
   width:60%;
   float:left;
}
.col-70{
   display:inline-block;
   width:70%;
   float:left;
}
.col-80{
   display:inline-block;
   width:80%;
   float:left;
}
.col-90{
   display:inline-block;
   width:90%;
   float:left;
}
.caja-600{
   display: block;
   margin:0 auto;
   width:600px;
   max-width: 90%;
}
h1, h2, h3{
   line-height: 1.2;
   font-weight: bold;
}
.menu-desc{
   display:inline-block;
   float:right;
   width:60%;
}
.menu-desc a{
   color:#333333;
   transition: 0.3s;
   text-decoration: none;
}
.menu-desc a:hover{
   color:#368f2f;
}
.video-responsive {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
	position: relative;
	}
.video-responsive iframe, .video-responsive object, .video-responsive embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	}
.cta-menu{
   display:block;
   width:70%;
   float:right;
   text-align: center;
   color:#ffffff;
   background:#368f2f;
   text-decoration: none;
   padding:6px 0;
   border-radius: 6px;
}
nav .logo{
   display:block;
   max-width: 90%;
   width: 80%;
   margin:0 auto;
}
header{
   display:block;
   width:100%;
   background:#f0f0f0;
}
header .descripcion-h{
   font-size:18px;
   display: block;
   width:60%;
   color:#ffffff;
   margin:0 auto;
   line-height: 1.6;
   padding-bottom: 40px;
   text-align: center;
}
header h1{
   font-size:40px;
}
label{
   display: block;
   width: 100%;
   margin-bottom: 32px;
}
#form h2{
   font-size:40px;
   font-weight: bold;
   margin:0 0 20px 0;
   color:#333333;
}
#form th{
   color:#ffffff;
   padding:6px 0;
}
input.error, select.error{
	border: 1px solid #ff0000 !important;
}
label.error{
	color: #ff0000;
	font-size: 12px;
}
.valid{
	border: 1px solid #80d10a !important;
}
#form hr{
   display:block;
   width:50px;
   height:3px;
   border:0;
   float:left;
   background:#368f2f;
}
#form tr td{
   padding:10px 0;
   font-size:13px;
   color:#666666;
   border-bottom:1px solid #cccccc;
}
#form .flex-50{
   padding:80px 0;
}
#form .flex-50:first-of-type{
   background:#f0f0f0;
}
.input-field{
   display:block;
   margin:10px auto;
   width: 95%;
   outline: none;
}
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date]{
   border:0;
   border-radius: 50px;
   width:calc(100% - 22px);
   padding:10px;
   outline: none;
   background:#eaeaea;
}
select{
   border:0;
   border-radius: 50px;
   width:calc(100% - 22px);
   padding:10px;
   outline: none;
   display:block;
   background:#eaeaea;
}
.select {
  position: relative;
  border-radius: 0.25rem;
  overflow: hidden;
  width:100%;
}
.select select {
  padding: 1em;
  cursor: pointer;
}
.select::after {
  content: "▼";
  position: absolute;
  right: 1rem;
  bottom: 7px;
  transition: 0.25s all ease;
  pointer-events: none;
}
.select:hover::after {
  color: var(--color-secundario);
  -webkit-animation: bounce 0.5s infinite;
          animation: bounce 0.5s infinite;
}

@-webkit-keyframes bounce {
  25% {
    transform: translatey(2px);
  }
  75% {
    transform: translatey(-2px);
  }
}

@keyframes bounce {
  25% {
    transform: translatey(2px);
  }
  75% {
    transform: translatey(-2px);
  }
}
form .row{
   margin-bottom: 30px;
}
.checks{
   font-size: 12px;
}
th{
   color: #fff;
   padding: 30px 0;
   font-size: 20px;
}
.button{
   background: var(--color-primario);
   color:#fff;
   padding:16px 24px;
   border:0;
   font-size:32px;
   width:80%;
   max-width: 300px;
   display:block;
   margin: 0 auto;
   border-radius:45px;
}

footer{
   padding:40px 0;
   background:var(--color-primario);
   color:#eeeeee;
   display:block;
   width:100%;
   float:left;
   font-size:12px;
}
footer a{
    color:#fff;
}
footer h2{
   margin:0;
   font-size:25px;
   color:#7db9f4;
}
.formulario{
   display:block;
   width: 90%;
   max-width: 500px;
   margin:0 auto;
   color:#fff;
}
.bazul{
   background:var(--color-primario);
   color:#fff;
}
nav .flex-50 .bazul{
   border-top-left-radius:50px;
   border-bottom-left-radius:50px;
   height: 80px;
}
nav{
   padding:32px 0;
   background:#f0f0f0;
}
nav .flex-25 .bazul{
   height: 80px;
   background-position:center bottom;
   background-repeat:no-repeat;
}
.circulo-user{
   width:50px;
   height: 50px;
   border-radius: 30px;
   background: #fff;
   display: block;
   margin:0 auto;
}
.icon-row{
   margin:18px 0;
}
.icon-row .icon{
   display: inline-block;
   width: 20px;
   margin-right: 4px;
}
.icon-row .text-icon{
   width: calc(100% - 40px);
   display: inline-block;
}
.cta-primario{
   padding: 16px 32px;
   background: var(--color-primario);
   color:#fff;
   text-decoration: none;
   border-radius: 30px;
   font-size:17px;
   display:inline-block;
}
.cta-primario i{
   margin:0 0 0 8px;
}
.cta-primario-s{
   padding: 6px 10px;
   background: var(--color-primario);
   color:#fff;
   text-decoration: none;
   border-radius: 30px;
   font-size:12px;
   display:inline-block;
}
#social-media{
   position: fixed;
   top:45%;
   right: 0;
   background: var(--color-primario);
   padding: 16px 8px;
   border-top-left-radius: 24px;
   border-bottom-left-radius: 24px;
}
.caja-texto-2{
    height:80px;
}
.icon-social{
   background: #fff;
   color:var(--color-primario);
   width: 36px;
   height: 36px;
   display: block;
   text-align: center;
   line-height: 36px;
   border-radius: 100%;
   font-size:18px;
   margin: 16px 8px;
}
#formulario{
   background:#f0f0f0;
   padding: 100px 0;
}
#formulario h2{
    font-size:25px;
}
.caja-formulario{
   background:#fff;
   box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
   max-width: 850px;
   width: 90%;
   margin:0 auto;
   padding: 24px 0;
}
.pleca{
    position:absolute;
    transform: rotate(-90deg);
    background:#00c1b8;
    padding:8px 24px;
    color:#fff;
    left: -180px;
    top: -30px;
}
footer .icon-social{
   display: inline-block;
}
#info1, #info2, #info4, #info6, #info7{
   display: block;
   padding:60px 0;
}
#info1{
    padding:60px 0 0 0;
}
#info2{
    padding:0 0 60px 0;
}
#info1 .icons{
   display: block;
   width: 75%;
   margin:0 auto;
}
#info1 h2{
   font-size:40px;
   color:#004797;
}
#info1 h3{
    text-align:center;
    font-size:35px;
}
h2{
   font-size:40px;
}
#formulario .logo{
   max-width: 250px;
   margin:0 auto;
   display: block;
   margin-bottom: 24px;
}
.ocultar{
    display:block;
}
.mostrar{
    display:none;
}
#info5 h2{
    font-size:30px;
}

@media screen and (max-width:900px){
   nav .flex-25, nav .flex-50{
      flex:0 0 50%;
   }
   .mostrar{
       display:block;
   }
   .flex-16{
      flex:0 0 33.3333%;
   }
   nav .flex-25:nth-child(n +3){
      display: none;
   }
   .flex-50{
      flex:0 0 100%;
   }
   .flex-33{
      flex: 0 0 100%;
      margin: 0 0 40px 0;
   }
   .contenedor-90-right{
      width: 100%;
      margin: 0;
   }
   footer .flex-30{
      flex:0 0 100%;
      margin-bottom: 32px;
   }
   footer .flex-20{
      flex:0 0 100%;
      margin-bottom: 32px;
   }
   .cta-primario{
      display: block;
      width: 100%;
      text-align: center;
      padding:16px 8px;
   }
   header h1{
      font-size: 35px;
   }
   .ocultar{
       display:none;
   }
   .col-40, .col-60{
       width:100%;
       display:block;
       margin-bottom:24px;
   }
}
@media screen and (max-width:750px){
   .flex-40{
      flex:0 0 100%;
   }
   .pleca{
       position:static;
       margin:0 auto;
       display:block;
       transform:none;
       text-align:center;
   }
   .flex-60{
      flex:0 0 100%;
   }
   .col-70{
      width: 100%;
   }
   .flex-30, .flex-70{
      flex: 0 0 100%;
   }
   .col-50{
      width: 100%;
      margin-bottom: 20px;
   }
   .flex-16{
      flex:0 0 50%;
   }
   #social-media{
       position:absolute;
       top:20%;
   }
   header h1{
       width:calc(100% - 70px);
       text-align:center;
       font-size:30px;
   }
   #info1 h2, #info2 h2, #info3 h2, #info3 h2, #info4 h2, #info5 h2, #info6 h2, #info7 h2{
       font-size:28px;
       text-align:center;
   }
   #info1, #info2, #info3, #info3, #info4, #info5, #info6{
       padding:20px 0;
   }
   #info1 h3{
       margin:0;
   }
   #info7 .contenedor-70{
       width:100%;
   }
   .cta-primario{
       margin:0 auto;
   }
   .contenedor-90-left{
       width:100%;
   }
   #formulario .contenedor-80{
       width:90%;
       padding:0 2.5%;
   }
}
.menu-top{
    margin:0;
    padding:0;
}
.menu-top li{
    list-style:none;
    margin:0 8px;
    display:inline-block;

}
.menu-top li a{
    color:#fff;
    text-decoration:none;
    padding:6px 16px;
    color:var(--color-primario);
    transition:0.3s;
    border-radius:20px;
    font-size:18px;
}
.menu-top li a:hover{
    background:var(--color-primario);
    color:#fff;
}
.caja-shadow{
   width:90%;
   margin:0 auto 24px auto;
   border:1px solid #f0f0f0;
   height: 300px;
   padding: 16px 0;
   font-size:14px;
   transition: 0.3s;
}
.caja-shadow:hover{
   box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
   width:92%;
}