:root {
    /*Stuff about general terms here*/
    --alprema-cus:#17488d;
    --alprema-cmx:#bf2128;
    --font-light: #ffffff;
    --font-dark: #181818;


}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }


header{
    display: block;
    padding-bottom: 80px;
    min-width: 250px;
    overflow-x: hidden;
}

#mainNav{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;    
    display: grid;
    grid-template-columns: 1fr 4fr 1.5fr; 
    column-gap: 10px;
}

#navBox{
    background-color: #000000;
    height: 90px;
    display: flex;
    position: fixed;
    top: 0;
    z-index: 2;
    width: 100%;
}

.checkbox input{
    display: none;
    z-index: -3;
}

#mobNav{
    display: none;
}

#mobNavO{
    display: none;
}

#logoTop{
    padding-left: 30px;
    padding-right: 20px;
}

#contactTop{
    background-color: var(--alprema-cus);
    height: 100%;
    padding-left: 10px;
    display: flex;
    justify-content: center;
    font-family: Quantico;
    color: white;
    font-size: 20px;
    flex-direction: column;
}
#contactTop p{
    padding-bottom: 3px;
}
#contactTop a{
    text-decoration: none;
    color: white;
}

#emailfont{
    font-size: 20px;
}

#headerLinks{
    height: 50px;
    display: grid;
    grid-template-columns: repeat(5, 190px);
    column-gap: 10px;
    text-align: center;
}

#headerLinksb{
    display:none;
}

.link{
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(32, 32, 32);
    border-radius: 5%;
    transition: color 300ms ease-in-out
}
.link a{
    text-decoration: none;
    color: white;
    font-family: Quantico;
    font-size: 18pt;
    font-weight: 500;
}

.link:hover{
    background-color:#17488d;
    transition: color 300ms ease-in-out;
}

/*====ALTERNATE VIEWS====*/

@media only screen and (max-width: 1550px) {
    .link a{
        font-size: 100%;
    }
    #contactTop p a{
        font-size: 16px;
    }
    #contactTop p{
        font-size: 16px;
    }

    #fterAbout p a{
        font-size: 12px;
        margin-bottom: 5px;
    }
    #headerLinks{
        grid-template-columns: repeat(4, 170px);
    }
}

@media only screen and (max-width: 1340px) {
    .link a{
        font-size: 90%;
    }
    #contactTop p a{
        font-size: 15px;
    }
    #contactTop p{
        font-size: 15px;
    }
    #fterAbout p a{
        font-size: 11px;
        margin-bottom: 5px;
    }
    #headerLinks{
        grid-template-columns: repeat(4, 120px);
    }
}

@media only screen and (min-width: 2500px) {
    #fterAbout p a{
        font-size: 19px;
        margin-bottom: 5px;
    }
}

/* ========================= MOBILE HEADER ========================= */

#mobNavO span {
    display: block;
    position: relative;
    width: 50px;
    height: 8px;
    margin-bottom: 6px;
    background: #ffffff;
    border-radius: 3px;
}

#hamburger{
    width: 50px;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    outline: none;
}

.checkbox{
    display: none;
    width: 100px;
    height: 80px;
    position: fixed;
    top: -7px;
    left: -5px;
    cursor: pointer;
    z-index: 5;
    opacity: 0;

    -webkit-touch-callout: none;
}

.linkb a{
    text-decoration: none;
    color: white;
    font-family: Quantico;
    font-size: 18pt;
    font-weight: 500;
    margin-left: 15px;
}


.linkb{
    padding: 15px 0;
    font-size: 24px;
}



  /* =========================================================== FOOTER START =========================================================== */
footer{
    width: 100vw;
    background-color: #000000ed;
    overflow-x: hidden;
}
.footersi{
    background-color: #000000ed;
    height: 150px;
    align-items: center;    
    display: grid;
    grid-template-columns: 3fr 2fr 2fr; 
    column-gap: 5px;
    color: white;
    font-family: Quantico;
    padding-left: 40px;
    padding-right: 40px;
}

#fterExtras {
    font-size: 13px;
}

#fterAbout p{
    font-size: 15px;
    padding-bottom: 5px;
}

#fterAbout a{
    text-decoration: none;
    color: white;
}

#fterSocial{
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-content: center;
}

#fterSocial div{
    padding-left: 10px;
    padding-right: 10px;
}

#fterSocial a{
    text-decoration: none;
    color: white;
}

#fterSocial div img{
    height: 38px;
}


/* ========================= MOBILE HEADER ========================= */

#mobNavO span {
    display: block;
    position: relative;
    width: 50px;
    height: 8px;
    margin-bottom: 6px;
    background: #ffffff;
    border-radius: 3px;
}

#hamburger{
    width: 50px;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    outline: none;
}

.checkbox{
    display: none;
    width: 100px;
    height: 80px;
    position: fixed;
    top: -7px;
    left: -5px;
    cursor: pointer;
    z-index: 5;
    opacity: 0;

    -webkit-touch-callout: none;
}

.linkb a{
    text-decoration: none;
    color: white;
    font-family: Quantico;
    font-size: 18pt;
    font-weight: 500;
    margin-left: 15px;
}


.linkb{
    padding: 15px 0;
    font-size: 24px;
}


@media only screen and (max-width: 900px) {
    #mainNav{
        display: none;
    }
    
    #fterSocial div img{
        height: 30px;
    }
    #fterSocial{
        font-size: 28px;
    }
    .linkb a{
        font-size: 20px;
    }

    #mobNavO{
        display: flex;
        align-items: center;
        display: grid;
        width: 100%;
        grid-template-columns: 90px 4fr 2.5fr; 
        top: 0;
    }
    
    #navBox{
        height: 70px;
    }

    #logoTop{
        padding-left: 20px;
        padding-right: 20px;
    }

    #contactTop p a{
        font-size: 13px;
    }
    #contactTop p{
        font-size: 13px;
    }
    
    .checkbox{
        display: block;
    }

    #headerLinksb{
        display: block;
        position: fixed;
        width: 70%;
        min-width: 230px;
        height: 90%;
        margin-top: 70px;
        background-color: rgb(16, 16, 16);
        -webkit-font-smoothing: antialiased;
        z-index: 3;
        /* Slider de menu*/
        transform-origin: 0% 0%;
        transform: translate(-100%, 0);
        transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    }

    input[type=checkbox]:checked + #headerLinksb {
        transform: none;
    }

    /*footer stuff only*/
    .hideMov{
        display: none;
    }

    #fterAbout p a{
        font-size: 10px;
        margin-bottom: 5px;
    }

    #fterExtras p {
        font-size: 11px;
        text-align: left;
    }
    #fterExtras a img{
        height: 35px;
    }
    .footersi{
        width: 100%;
        min-width: 250px;
        grid-template-columns: 3fr 0fr 2fr; 
        padding-left: 10px;
        padding-right: 10px;
    }
}