@font-face {
    font-family:'Gotham';
    src: url("../fonts/Gotham-Book.otf");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family:'Gotham';
    src: url("../fonts/Gotham-BookItalic.otf");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family:'Gotham';
    src: url("../fonts/Gotham-Light.otf");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family:'Gotham';
    src: url("../fonts/GOTHAM-THIN.TTF");
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family:'Gotham';
    src: url("../fonts/Gotham-ThinItalic.otf");
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family:'Gotham';
    src: url("../fonts/GOTHAM-THINITALIC.TTF");
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family:'Gotham';
    src: url("../fonts/GOTHAM-MEDIUM.ttf");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family:'Gotham';
    src: url("../fonts/GOTHAM-BOLD.ttf");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family:'Gotham';
    src: url("../fonts/GothamBoldItalic.ttf");
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family:'Appeal';
    src: url("../fonts/ThisAppeal-FreeDemo.ttf");
    font-weight: 400;
    font-style: normal;
}

html{
    font-family: "Gotham", sans-serif;
    color:#503423;
    font-weight:200;
    background-color: #f3ede3;
}

.bar-1{
    color: rgba(80, 52, 35, .7);
}
.bar-2{
    color: rgba(80, 52, 35, .4);
}
.bar-3{
    color: rgba(80, 52, 35, .2);
}
.bar-wh-1{
    color: rgba(255, 250, 250, .7);
}
.bar-wh-2{
    color: rgba(255, 250, 250, .4);
}
.bar-wh-3{
    color: rgba(255, 250, 250, .2);
}

.menu-nav{
    display:flex;
    gap:30px;
    align-items: center;
}

.menu-nav li a{
    color:#fff;
    padding:0.4rem 1rem;
    border-radius:9px;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 200;
    transition: .2s ease-in-out;
}

.brown-bg .menu-nav li a{
    background-color: #503423;
    border: 1px solid #503423;
    transition: .2s ease-in-out;
}
.slim-bg .menu-nav li a{
    background-color: #9E9263;
    border: 1px solid #9E9263;
    transition: .2s ease-in-out;
}
.lighter-bg .menu-nav li a{
    background-color: #875F38;
    border: 1px solid #875F38;
    transition: .2s ease-in-out;
}

.brown-bg .menu-nav li a:hover{
    background-color: transparent;
    color:#503423;
}
.slim-bg .menu-nav li a:hover{
    background-color: transparent;
    color:#9E9263;
}
.lighter-bg .menu-nav li a:hover{
    background-color: transparent;
    color:#875F38;
}

.mobile-nav li a{
    border: 1px solid #ffffff;
    border-radius: 8px;
    padding:0.4rem 1rem;
}

.link-img, .img-about{
    transition: opacity .3s ease-in-out;
}
.space:hover .link-img{
    opacity:1;
}
.space:hover .img-about{
    opacity:.3;
}

.footer-nav li{
    margin:1.5rem 0;
    display:block;
    width:100%;
}

.footer-nav-brown li{
    margin:1.5rem 0;
    display:block;
    width:100%;
}

.footer-nav li a{
    color:#fff;
    background-color:transparent;
    padding:0.4rem 1rem;
    border:1px solid rgba(255, 255, 255, 0.53);
    border-radius:9px;
    display:block;
    text-transform: uppercase;
    font-style: normal;
    width:100%;
    font-weight: 200;
    transition: .2s ease-in-out;
}
.footer-nav-brown li a{
    color:#503423;
    background-color:transparent;
    padding:0.4rem 1rem;
    border:1px solid #503423;
    border-radius:9px;
    display:block;
    text-transform: uppercase;
    font-style: normal;
    width:100%;
    font-weight: 200;
    transition: .2s ease-in-out;
}
.footer-nav-brown li a:hover{
    background-color:#503423;
    color:white;
}
.nav-brown li a:hover{
    background-color:white;
    color:#503423;
}
.nav-contact li a:hover{
    background-color:white;
    color:#9E9263;
}
.nav-lightbrown li a:hover{
    background-color:white;
    color:#875F38;
}

.page-menu{
    left:-100%;
    transition:left .2s ease-in-out;
}

@media(max-width: 600px){
    .footer-nav-brown li a{
        background-color:#503423;
        color:white;
    }
}

.page-menu li{
    margin:2rem 0;
}

.page-text p{
    line-height: 3rem;
    margin-bottom:1.5rem;
}

.page-text .text-about p{
    line-height: 2.3rem;
    margin-bottom:1.5rem;
}

.page-text p strong{
    font-weight:700;
}

@media(max-width:600px){
    .page-text p{
        line-height: 1.6rem;
        margin-bottom:0.9rem;
    }

    .page-text .text-about p{
        line-height: 1.6rem;
        margin-bottom:0.9rem;
    }
}