head > link[rel='shortcut icon'] {
    width: 29px;
    height: 11px;
  }
  
*{
    font-family: "Oswald", sans-serif;
}
i{
    color: white;
}
body{
    margin: auto;
    max-width: 1450px;
    box-shadow: 1px 5px 11px 1px lightgray;
    background-color: #523432;
}
html{
    background-color: white;
}
.all-content{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header a{
    font-family: 'Josefin Sans', sans-serif;
    text-decoration: none;
    color: white
}
.mid-content{
    flex: 1
}
.content-top{
    background-color: #523432;
}
.content-top a{
    background-color: #523432;
}
.back-content {
    display: flex;
    align-items: flex-end;
}

footer {
    width: 100%;
    background-color: #523432;
    color: white;
    text-align: center;
}
footer a{
    color: white;
}
.bars i:hover{
    cursor: pointer;
}
@media screen and (min-width: 1450px){
    .bars{
        display: none;
    }
    .content-top{
        display: flex;
    }
    .content-top img{
        width: 440px;
        height: 130px;
    }
    .encabezado{
        margin: auto;
    }
    header a{
        margin-left: 50px;
        font-size: 20px;
    }
    footer{
        padding: 30px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1449.99px){
    .bars{
        display: none;
    }
    .content-top{
        display: flex;
    }
    .content-top img{
        width: 30.34vw;
        height: 8.96vw;
    }
    .encabezado{
        margin: auto;
    }
    header a{
        margin-left: 3.44vw;
        font-size: 1.3vw;
    }
    footer{
        padding: 30px;
    }
}
@media screen and (max-width: 830px) {
    .content-top{
        position: fixed;
        z-index: 10000;
        width: 100%;
        height: 70px;
    }


    .logo{
        width: 100%;
        padding: 5px;
    }
    .logo img{
        width: 150px;
        height: 60px  ;
    }
    .encabezado header {
        display: flex;
        flex-direction: column;  
        align-items: flex-start;
    }
    header a{
       width: 100%;
       font-size: 20px;
       padding: 5px;
       margin-top: 10px;
       border-bottom: 1px solid lightgray;
    }

    .encabezado{
        background-color: #523432;
        overflow: hidden;
        height: 0;
        transition: height 0.5s ease-in-out;
    }
    .bars{
        width: 100%;
        padding-right: 4vw;
        text-align: right;
        position: absolute;
        top: 25px;
    }
    .show{
        height: 100vh;
        width: 100%;
        transition: height 0.5s ease-out;
    }
    footer{
        position: relative;
        bottom: 0px;
        padding: 15px;
        font-size: 12px;
    }
    footer{
        padding: 30px;
    }
}