*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.pageContainer{
    display: grid;
    grid-template-areas:
    "header"
    "main"
    "footer";
}

header{
    grid-area:header;
    background-color: #0483E5;
    padding: 1vh;
    display: flex;
    height: 8vh;
    margin-bottom: 2vh;
    box-shadow: 0 .4vh 1vh #888;
}

.ttContainer{
    margin: auto 2vh;
    margin-left: 5vw;
    background-color: #0483E5;
    height: 100%;
    display: flex;
    z-index: 15;
}

.ttContainer h1{
    color: #fff;
    font-family: 'Montserrat',sans-serif;
    font-size: 3vh;
    font-weight: 600;
    margin: auto;
}

.eContainer{
    margin: auto 0;
    display: flex;
}

.eContainer h2{
    font-family: 'Montserrat',sans-serif;
    font-style: 2vh;
    font-weight: 300;
    color: #fff;
}

.eContainer img{
    height: 4vh;
    position: relative;
    animation-name: apaLogo;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: .3s;
}

@keyframes apaLogo {
    0%{left: -40vh;}
    100%{left: 0vh;}
}

main{
    grid-area: main;
    padding: 1vh;
    margin-top: 8vh;
}


.mainContent{
    position: relative;
    width: 30vw;
    margin: auto;
    padding: 1vh;
    border-radius: 2vh;
    background-color: #fff;
    box-shadow: 0 .4vh 1vh #ccc;
}


.mensRe{
    position: absolute;
    bottom: -6vh;
    left: 32%;
    font-family: 'Montserrat',sans-serif;
    font-size: 2vh;
    font-weight: 500;
    display: none;
}

.mensRe i{
    margin-left: .5vh;
    color: #0483E5;
}

.mainEspForm{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.mainContent h3{
    margin-top: 2vh;
    text-align: center;
    margin-bottom: 2vh;
    font-size: 4vh;
    font-family: 'Montserrat',sans-serif;
    font-weight: 600;
    color: #232323;
}

form{
    width: 100%;
    margin:auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.inputContainer{
    display: flex;
    flex-direction: column;
    width: 70%;
    margin: 2vh auto;
}

.inputContainer label{
    font-family: 'Montserrat',sans-serif;
    margin-bottom: 1vh;
    font-size: 2vh;
    margin-left: 2vh;
}

.inputContainer input{
    height: 3.5vh;
    border-radius: 4vh;
    border: hidden;
    outline: solid 1px #ccc;
    padding-left: 3vh;
    font-family: 'Montserrat',sans-serif;
    font-size: 2vh;
    color: #706D6D;
    box-shadow:inset 0 .4vh .3vh #ddd;
}

.buttonContainer{
    margin: 2vh auto;
    width: 100%;
    display: flex;
}

.buttonContainer button{
    width: 60%;
    height: 4vh;
    border-radius: 2vh;
    border: hidden;
    background-color: #0483E5;
    font-family: 'Montserrat',sans-serif;
    font-size: 1.8vh;
    color: #fff;
    margin: auto;
    font-weight: 500;
    cursor: pointer;
    transition: .5s;
}

.buttonContainer button:hover{
    background-color: #000;
}

.optionsContainer{
    margin: 1 auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 3vh;
}

.optionsContainer a{
    margin: 1vh auto;
    font-family: 'montserrat',sans-serif;
    text-decoration: none;
    font-size: 2vh;
    font-weight: 400;
    color:#7D7777;
}

.optionsContainer a:hover{
    color: #0483E5;
}

footer{
    margin-top: 10vh;
    grid-area: footer;
    display: flex;
}

.termsContainer{
    margin: auto;
}

.termsContainer a{
    font-family: 'Montserrat',sans-serif;
    font-size: 1.5vh;
    text-decoration: none;
    color: #7D7777;
}

@media screen and (max-width:600px) {

    .ttContainer{
        margin-left: 1vh;
        margin: auto 4vh;
        margin-right: 1vh;
        display: none;
    }

    .eContainer{
        margin: auto;
    }

    .ttContainer h1{
        font-size: 2.5vh !important;
    }

    .eContainer h2{
        font-weight: 500;
    }

    .mainContent{width: 90%;}
    

    .ttContainer h1{font-size: 1.8vh;}

    .eContainer{margin: auto ;}

    .eContainer h2{font-size: 2vh;}
    
    .buttonContainer button{
        width: 80%;
    }

.inputContainer{width: 85%;}

    footer{
        margin-top: 5vh;
    }

    nav ul{width: 100%;margin-left:0;}
    nav li{margin: auto;font-size: 1.7vh;}
}

.blcTL{
    color: #232323 !important;
}