/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 18/06/2020, 07:47:36 PM
    Author     : Cecilia Aguilar Espinoza
*/
@font-face{
    font-family: Nunito;
    src: url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
}
@font-face{
    font-family: social_font;
    src: url(../webFonts/social_font/social_font.ttf) format("truetype");
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    color: #404041;
    line-height: 2;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}

header {
    background: #0066CC;
    width: 100%;
    z-index: 100;
}

nav {
    height: 100px;
    width: 97%;
    display: grid;
    grid-gap: .5em;
    grid-template-columns: 1fr 1fr ;
    grid-template-areas:"navImg navTexto";
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}
.navImg{
    grid-area:navImg;
}
.navImg img{
    width: 150px;
}
.navTexto{
    grid-area:navTexto;
    line-height: 1.3;
    font-size: 24px;
    color: #fff;
    justify-self: flex-end;
    border-left: 0.125rem solid #fff;
    padding-left:0.448rem;
}
.container{
    max-width: 100%;
    padding-top: 1.25rem;
    padding-bottom: 1.875rem;

}

.wrapper {
    width: 95%;
    padding-left: 1.25rem;
    margin: auto;
    overflow:hidden;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.8125rem;
}

.titulo{
    font-size: 1.5em;
    display: block;
    font-weight: 600;
}

.titulo2{
    font-size: 2.5em;
    display: block;
    font-weight: 700;
    text-align: center;
}
.contact{
    background: #f9feff;
}

.contact form{
    display: grid;
    grid-gap: .5em;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:"nom nom nom pa pa pa sa sa sa"
        "calleC calleC calleC no edo edo mun mun mun"
        "loc loc col col col telH telH telC telC"
        "sex sex edoCivil edoCivil lugarNacimiento lugarNacimiento lugarNacimiento lugarNacimiento lugarNacimiento"
        "diaNacimiento diaNacimiento mesNacimiento mesNacimiento mesNacimiento anioNacimiento anioNacimiento sangre sangre"
        "mail mail mail escuela escuela escuela escuela escuela escuela"
        "oferta oferta oferta oferta oferta oferta oferta oferta oferta"
        "field field field field field field field field field"
        "submit-btn submit-btn submit-btn submit-btn submit-btn submit-btn submit-btn submit-btn submit-btn";
}
.contact form label{
    display: block;
    font-weight: 700;
}

.contact form .nom{
    grid-area:nom;
}

.contact form .pa{
    grid-area:pa;
}
.contact form .sa{
    grid-area:sa;
}
.contact form .calleC{
    grid-area:calleC;
}
.contact form .no{
    grid-area:no;
}
.contact form .edo{
    grid-area:edo;
}
.contact form .mun{
    grid-area:mun;
}
.contact form .loc{
    grid-area:loc;
}
.contact form .col{
    grid-area:col;
}
.contact form .telH{
    grid-area:telH;
}
.contact form .telC{
    grid-area:telC;
}
.contact form .mail{
    grid-area:mail;
}
.contact form .sex{
    grid-area:sex;
}
.contact form .edoCivil{
    grid-area:edoCivil;
}
.contact form .lugarNacimiento{
    grid-area:lugarNacimiento;
}
.contact form .diaNacimiento{
    grid-area:diaNacimiento;
}
.contact form .mesNacimiento{
    grid-area:mesNacimiento;
}
.contact form .anioNacimiento{
    grid-area:anioNacimiento;
}
.contact form .escuela{
    grid-area:escuela;
}
.contact form .sangre{
    grid-area:sangre;
}   
.contact form .oferta{
    padding-top: 1.25rem;
    grid-area:oferta;
}
.contact form .labelRadio{
    font-weight: 500;
    display: inline;
}
.contact form .dn{
    grid-area:dn;
}
.contact form .derecho{
    grid-area:derecho;
}
.contact form .cdi{
    grid-area:cdi;
}
.contact form .cri{
    grid-area:cri;
}
.contact form .cfd{
    grid-area:cfd;
}
.contact form .lee{
    grid-area:lee;
}
.contact form .ft{
    grid-area:ft;
}
.contact form .gero{
    grid-area:gero;
}
.contact form .submit-btn{
    grid-area:submit-btn;
    justify-self: center;
}
.contact form .field{
    grid-area:field;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    justify-self: center;
    width: 100%;
    padding: 0.625rem;

    display: grid;
    grid-gap: .5em;
    grid-template-columns: 1fr .5fr 1fr 1fr 1fr;
    grid-template-areas:"cdi cdi cri cfd cfd "
        "derecho derecho lee ft ft"
        "gero gero gero gero gero";

}
.error{
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    width: 100%;
    padding: .5em;
    height: 2.44rem;   
    padding: 0.375rem 0.75rem;
    background-color: #fff;
    border: 1px solid red;
    border-radius: 0.25rem;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    visibility: visible;
}
.form-control{
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    width: 100%;
    padding: .5em;
    height: 2.44rem;   
    padding: 0.375rem 0.75rem;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    visibility: visible;
}
.contact form input[type=button]{
    background: #0066CC;
    border: 0;
    text-transform: uppercase;
    font-size: 1em;
    padding: 1em 2em 1em;
    color: #fff;
    cursor: pointer;
}

input::placeholder {
    font-size: 9px;
}
.contact form input[type=button]:hover, .contact form input[type=button]:focus{
    background: #1487C1;
    color: #fff;
    outline: 0;
    transition: background-color 2s ease-out;
}
.face a:hover, .tube a:hover, .web a:hover, .aviso a:hover{
    color: #0066CC;
    cursor: pointer;
}
.fin{
    background: #3A3A3A;
    width: 97%;
    margin: auto;
    overflow:hidden;
    height: 100px;
    font-size: 14px;
    color: #fff;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1r 1fr 2.3fr 1.3fr 1fr 1fr;
    grid-template-areas:"imgfooter web dir tel aviso redes";
    align-items: center;
}

footer .aviso{
    grid-area: aviso;
    text-align: center;
}

footer .logofooter{
    width: 120px;
}

footer .imgfooter{
    grid-area: imgfooter;
}
footer .web{
    grid-area: web;
    text-align: center;
}
footer .dir{
    grid-area: dir;
    text-align: center;
    line-height: 1.5;
}
footer .tel{
    grid-area: tel;
    text-align: center;
    line-height: 1.5;
}
footer .redes{
    font-family: "social_font";
    font-size: 2.5rem;
    justify-content: flex-start;
    grid-area: redes;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:"face tube";
    margin-left: auto;
}
.face{
    grid-area: face;
}
.tube{
    grid-area: tube;
}
a{
    color: #fff;
    text-decoration:none;
}
.foot{
    background: #3A3A3A;
    width: 100%;
}
.errorOferta{
    color: red;
}
@media(max-width:1200px){
    body{
        font-size: 14px;
    }
    input::placeholder {
        font-size: 8px;
    }
    nav{
        height: 88px;
    }
    .navImg img{
        width: 131px;
    }
    .navTexto{
        font-size: 21px;
    } 
    .fin{
        height: 88px;
        font-size: 12px;
    }
    footer .logofooter{
        width: 105px;
    }
    .contact form .field{
        grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr;
    }
    .form-control{
        font-size: 14px;
    }
}
@media(max-width:926px){
    body{
        font-size: 12px;
    }
    input::placeholder {
        font-size: 7px;
    }
    nav{
        height: 75px;
    }
    .navImg img{
        width: 112px;
    }
    .navTexto{
        font-size: 18px;
    } 
    .contact form .field{
        grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr;
    }
    .aviso{
        line-height: 1;
    }
    .fin{
        height: 100px;
        font-size: 13px;

        display: grid;
        grid-gap: .5em;
        grid-template-columns: 1fr 2fr 1fr 0.5fr 0.6fr;
        grid-template-areas:"imgfooter dir web aviso redes"
            "imgfooter dir tel aviso redes";
        align-items: center;
    }
    footer .logofooter{
        width: 120px;
    }
    .form-control{
        font-size: 12px;
    }
}
@media(max-width:768px){
    body{
        font-size: 12px;
    }
    input::placeholder {
        font-size: 9px;
    }
    nav{
        height: 75px;
    }
    .navImg img{
        width: 112px;
    }
    .navTexto{
        font-size: 18px;
    } 
    .fin{
        height: 320px;
        font-size: 14px;

        display: grid;
        grid-gap: .5em;
        grid-template-columns: 1fr;
        grid-template-areas:"imgfooter"
            "web"
            "dir"
            "tel"
            "aviso"
            "redes";
        align-items: center;
    }
    footer .logofooter{
        width: 150px;

    }
    footer .imgfooter{
        padding-top: 15px;
        margin: auto;
    }
    .form-control{
        font-size: 12px;
    }
    footer .redes{
        text-align: center;
        margin: auto;
    }
    .titulo2{
        font-size: 1.5rem;
    }
    .contact form .field{
        grid-area:field;
        border: 1px solid #ccc;
        justify-self: center;
        width: 100%;
        padding: 0.625rem;

        display: grid;
        grid-gap: .5em;
        grid-template-columns: 1.3fr 1fr;
        grid-template-areas:"cdi cri"
            "cfd derecho"
            "lee ft"
            "gero gero";
    }
    .contact form{
        display: grid;
        grid-gap: .5em;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:"nom pa"
            "sa calleC"
            "no edo"
            "mun loc"
            "col col"
            "telH telC"
            "sex edoCivil"
            "lugarNacimiento lugarNacimiento"
            "diaNacimiento mesNacimiento"
            "anioNacimiento sangre"
            "mail mail"
            "escuela escuela"
            "oferta oferta"
            "field field"
            "submit-btn submit-btn";
    }
}
@media(max-width:576px){
    body{
        font-size: 12px;
    }
    input::placeholder {
        font-size: 9px;
    }
    nav{
        height: 160px;
        display: grid;
        margin: auto;
        grid-template-columns: 1f if;
        grid-template-areas:"navImg navImg"
            "navTexto navTexto";
        align-items: center;
    }
    .navImg{
        justify-self: center;
        align-self: flex-end;
    }
    .navImg img{
        width: 150px;
    }
    .navTexto{
        font-size: 16px;
        justify-self: center;
        align-self: flex-start;

    } 
    .fin{
        height: 320px;
        font-size: 12px;

        display: grid;
        grid-gap: .5em;
        grid-template-columns: 1fr;
        grid-template-areas:"imgfooter"
            "web"
            "dir"
            "tel"
            "aviso"
            "redes";
        align-items: center;
    }

    footer .logofooter{
        width: 150px;
        justify-self: center;
    }
    footer .imgfooter{
        padding-top: 15px;
        margin: auto;
    }
    .form-control{
        font-size: 12px;
    }
    footer .redes{
        text-align: center;
        justify-items: center;
        margin: auto;
    }
    .titulo2{
        font-size: 1rem;
    }
    .contact form .field{
        grid-area:field;
        border: 1px solid #ccc;
        justify-self: center;
        width: 100%;
        padding: 0.625rem;

        display: grid;
        grid-gap: .5em;
        grid-template-columns: 1fr;
        grid-template-areas:"cdi"
            "cri"
            "cfd"
            "derecho"
            "lee"
            "ft"
            "gero";
    }
    .contact form{
        display: grid;
        grid-gap: .5em;
        grid-template-columns: 1fr;
        grid-template-areas:"nom"
            "pa"
            "sa"
            "calleC"
            "no"
            "edo"
            "mun"
            "loc"
            "col"
            "telH"
            "telC"
            "sex"
            "edoCivil"
            "lugarNacimiento"
            "diaNacimiento"
            "mesNacimiento"
            "anioNacimiento"
            "sangre"
            "mail"
            "escuela"
            "oferta"
            "field"
            "submit-btn";
    }
}