@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,800;0,900;1,600&display=swap');

* {box-sizing: border-box;}

body {margin:0 auto; padding: 0; font-family: 'Nunito', sans-serif;}
#contenido{width:100%; height: auto; margin:0 auto; padding: 0;}

#seccion-uno{width:100%; margin:0 auto; padding: 0 20px; box-sizing: border-box; text-align: center; background: rgb(32,97,140);
background: -moz-linear-gradient(180deg, rgba(32,97,140,1) 12%, rgba(0,35,57,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(32,97,140,1) 12%, rgba(0,35,57,1) 100%);
background: linear-gradient(180deg, rgba(32,97,140,1) 12%, rgba(0,35,57,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#20618c",endColorstr="#002339",GradientType=1); min-height: 400px;}
#seccion-uno section{width:85%; height: auto; margin:0 auto; padding: 0; text-align: right;}
#seccion-uno article{display:inline-block; width:49%; padding: 0 20px; box-sizing: border-box; vertical-align: middle;}

.txt-su{color:#fff;}
.txt-su h2{font-size: 2.5em;}
.txt-su a{color:#000; background-color: #fbdc0f; border-radius: 20px; font-size: 1.5em; padding: 10px 15px; outline: 0; border: 0; cursor: pointer; text-decoration: none;}
.txt-su a:hover{background-color: #002339; transition: all .5s; color: #fff;}

.img-su{text-align: center;}

#seccion-dos{width:100%; height: auto; padding: 0; margin:0 auto; text-align: center;}
#seccion-dos section{width:90%; margin:0 auto; padding:0;}
#seccion-dos article{display:inline-block; vertical-align: top; width:30%; max-width: 300px; margin: 10px 30px; padding:30px; box-sizing: content-box; height: 220px;}
#seccion-dos h2, #seccion-tres h2{color:#297db1; font-size: 3em; text-transform: uppercase;}
.materiales{color:#174867; line-height: 30px;}
.azul, .gris{-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); box-shadow: 0 0 5px rgba(0,0,0,0.5); margin:0 auto; padding: 0;}
.azul{background-color: #04507e; color:#fff;}
.gris{background-color: #f3f3f3; color: #04507e;}
#seccion-dos h3{font-size: 2em; margin:5px auto; padding: 0;}
#seccion-dos p{line-height: 25px; font-size: 1.5em;}

#seccion-dos span{margin:30px auto; line-height: 100px;}
.certificado{width:90%; height: auto; padding: 0; margin:0 auto; font-size: 2em; color: #04507e;}
.certificado img{width:25px; height: auto;}

#seccion-tres{width:100%; height: auto; padding: 0; margin:100px auto; text-align: center;}
#seccion-tres section{width:90%; height: auto; margin: 0 auto; padding: 0;}
#seccion-tres section article{width:25%; height: auto; padding: 0; margin:10px; display: inline-block; vertical-align: middle;}
#seccion-tres img{max-width: 140px;}


#contacto{width:100%; height: 100%; padding: 0; margin:0 auto; text-align: center; background-image: url(../images/bg-contacto.jpg); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
#contacto section{width:90%; height: auto; margin:0 auto; padding: 20px 0; box-sizing: border-box;}
#contacto section article{display:inline-block; vertical-align: top; width:45%;}
#contacto section article:nth-child(2){padding-top: 20px; color: #fff; font-size: 1.1em; line-height: 30px; text-align: left;}
#contacto section article:nth-child(2) img{vertical-align: bottom; margin: 0 5px;}
#contacto h2{color:#c7e3f5; font-size: 3em; text-transform: uppercase; padding: 0; margin: 0 0 20px 0;}
form{font-family: 'Alata', sans-serif;}
#contacto input, #contacto textarea{width:100%; max-width: 450px; height: auto; padding: 10px; box-sizing: border-box; margin:10px 0; border: 0; outline: 0; border-radius: 20px;font-family: 'Alata', sans-serif;}
#contacto textarea{height: 200px; overflow-y: hidden;}

#contacto button{color:#fff; background-color: #002945; border-radius: 20px; padding: 10px 15px; outline: 0; border: 0; cursor: pointer; font-size: 1.2em; width: 150px;font-family: 'Alata', sans-serif;}

footer{width:100%; height: auto;  max-height: 400px; margin: 0 auto; padding: 20px 0; box-sizing: border-box; text-align: center; color:#1c5980;}
#submenu, #copy{width:100%; height: auto; margin:0 auto; padding: 0;}

#submenu article{width:30%; height: auto; display:inline-block; vertical-align: top;}
#submenu h3{font-weight: bold; font-size: 1.2em; line-height: 10px; margin:0 0 10px 0;}
.slogan{font-size: 1.2em;}
#submenu article:nth-child(1){text-align: left;}
#submenu article:nth-child(3){text-align: right;}
#submenu article:nth-child(2) img{max-width:200px; height: auto; margin-bottom: 50px;}
#submenu article:nth-child(3) img{vertical-align: bottom;}

#copy article{width:100%; height: auto;}
#copy h5{margin:20px 0 0 0; padding: 0;}

.telefonos a, .mail_txt a{color:#fff; text-decoration: none;}
.telefonos a:hover, .mail_txt a:hover{color:#fbdc0f; text-decoration: underline; transition: all .5s;} 

.telefonos_dos a, .mail_txt_dos a{color:#1c5980; text-decoration: none;}
.telefonos_dos a:hover, .mail_txt_dos a:hover{color:#fbdc0f; text-decoration: underline; transition: all .5s;} 

@media (min-width:770px) and (max-width:1024px){
    #seccion-uno article{width: 100%;}
    .txt-su{text-align: center;}
}


@media (min-width:200px) and (max-width:769px){
    #contenido{width:100%; height: auto; margin:0 auto;}
    #seccion-uno, #seccion-dos, #seccion-tres, #contacto, footer{width:100%; height: auto; padding: 0; margin:0 auto;}
    #seccion-uno section{width:100%; text-align: center;}
#seccion-uno article{display:block; width:100%; padding: 50px 10px; box-sizing: border-box; vertical-align: middle;}
    .img-su{visibility: hidden !important; overflow: hidden !important; display: none !important;}
    .txt-su h2{margin:0 auto; padding: 0;}
    .txt-su a{line-height: 100px; font-size: 1em;}
    #seccion-dos span{line-height: normal;}

    #seccion-dos h2, #seccion-tres h2{color:#297db1; font-size: 2em; text-transform: uppercase;}
    
   #seccion-dos article{display:block; width:100%; max-width: 350px; margin: 0 auto; margin-top: 30px; padding:30px; box-sizing: border-box; height: auto;}
    
    #seccion-tres article{display:block !important; width:100% !important;}
    #seccion-tres section article{margin:15px 0;}
    #contacto section article{display: block; width:100%;}
    
    footer{margin: 20px 0 0 0; padding: 0 15px; box-sizing: border-box;}
    footer section article{display:block !important; width:100% !important;}
    #submenu article:nth-child(2) img{margin:30px auto;}
}


#enviado {background-color: rgba(255,255,255,0.95); color: #232323; padding: 0; margin:0 auto; position: fixed; bottom: 0px; width: 100%; height: auto; z-index: 100000; text-align: center; justify-content: center; align-content: center;}
#enviado p{width:95%; padding:20px 0; margin:0 auto; font-weight: normal; font-size: 1rem;}
#enviado button {color: #626262; padding: 10px 20px; border-radius: 10px; background-color: rgba(255,255,255,0.2); border: solid 2px #939393; box-sizing: border-box; text-transform: uppercase; margin-bottom: 10px;}

#enviado button:hover{color:#D10B0B; border: solid 2px #D10B0B; background-color: rgba(255,255,255,0.8); transition: ease .5s all;}