:root{
    --fontPrimary: 'PT Sans', sans-serif;
    --fontSecundary: 'Open Sans', sans-serif;

    --colorPrimary: #784D3C;
    --white: #fff;
    --black: #000;
}
html{
    box-sizing: border-box;
    font-size: 62.5%;
}
*, *::before, *::after{
    box-sizing: inherit;
}
body{
    font-family: var(--fontSecundary);
    font-size: 1.6rem;
    line-height: 2;
}


.nav-back{
    position: fixed;
    top: 5px;
    left: 5px;
    z-index: 5;
    cursor: pointer;
    
}




/* GLOBALES */
.container{
    max-width: 120rem;
    width: 90%;
    margin: 0 auto;
}
a{
    text-decoration: none;
}
h1, h2, h3, h4{
    font-family: var(--fontPrimary);
}
h1{
    font-size: 4.8rem;
}
h2{
    font-size: 4rem;
}
h3{
    font-size: 3.2rem;
}
h4{
    font-size: 2.4rem;
}
img{
    max-width: 100%;
}
@media (max-width: 320px) {
    h1{
        font-size: 3.5rem;
    }
    h2{
        font-size: 3rem;
    }
    h3{
        font-size: 2.5rem;
    }
    h4{
        font-size: 1.8rem;
    }
}

/* FUNCIONALITIES */
.no-margin{
    margin:0;
}
.no-padding{
    padding: 0;
}
.center-text{
    text-align: center;
}


/* HEADER */
.header{
    background-image: url(img/banner.jpg);
    height: 60vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.header__text{
    text-align: center;
    color: var(--white);
    margin-top: 2rem;
}
@media (min-width: 768px) {
   .header__text{
       margin-top: 15rem;
   }
}

.bar{
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (min-width: 768px) {
   .bar{
       flex-direction: unset;
       justify-content: space-between;
   }
}
.logo{
    color: var(--white);
}
.logo__name{
    font-weight: 200;
}
.logo__name--bold{
    font-weight: 700;
}

.navigation{
    width: 30%;
}
.navigation__link{
    display: block;
    font-size: 2rem;
    color: var(--white);
}
@media (min-width: 768px) {
    .navigation{
        display: flex;
        width: unset;
    }
    .navigation__link{
        margin-right: 2rem;
        text-align: center;
    }
    .navigation__link:last-of-type{
        margin-right: 0;
    }
 }


 /* MAIN */
@media (min-width: 768px) {
   .main-container{
       display: grid;
       grid-template-columns: 2fr 1fr;
       column-gap: 4rem;
   }
}

.entrada{
    border-bottom: 1px solid rgb(165, 165, 165);
    margin-bottom: 2rem;
}
.entrada:last-of-type{
    border-bottom: none;
    margin-bottom: 0;
}
.button{
    display: block;
    font-family: var(--fontPrimary);
    text-align: center;
    padding: 1rem 3rem;
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--white);
    border: none;
}
@media (min-width: 768px) {
   .button{
       display: inline-block;
   }
}
.button--primary{
    background-color: var(--black);
}


/* ASIDE */
.sidebar{
    line-height: 1.4;
}
.button--secundary{
    background-color: var(--colorPrimary);
}
.courses{
    list-style: none;
}
.widget-course{
    border-bottom: 1px solid #888;
    margin: 3rem 0;
}
.widget-course:last-of-type{
    border-bottom: none;
    margin:0;
}
.widget-course__label{
    font-family: var(--fontPrimary);
    font-weight: bold;
}
.widget-course__info{
    font-weight: normal;
}
.widget-course__info,
.widget-course__label{
    font-size: 1.5rem;
}


/* FOOTER */
.footer{
    background-color: var(--black);
    padding: 3rem;
}





/* SOBRE NOSOTROS */
@media (min-width: 768px) {
   .sobre-nosotros{
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       column-gap: 2rem;
   }
}





/* CURSOS NUESTROS */
.course{
    border-bottom: 2px solid #888;
    margin-bottom: 2rem;
}
.course:last-of-type{
    border: none;
}

@media (min-width: 768px) {
   .course{
       display: grid;
       grid-template-columns: 1fr 2fr;
       column-gap: 2rem;
   }
}

.course{
    border-bottom: 1px solid #888;
    padding-bottom: 1.5rem;
    margin: 3rem 0;
}
.course:last-of-type{
    border-bottom: none;
    margin:0;
    padding-bottom: 0;
}
.course__label{
    font-family: var(--fontPrimary);
    font-weight: bold;
}
.course__info{
    font-weight: normal;
}
.course__info,
.course__label{
    font-size: 1.5rem;
}





/* CONTACTO */
.contacto-bg{
    background-image: url(img/contacto.jpg);
    height: 40rem;
    background-size: cover;
}