#footer {
    background: #333333;
    color: white; margin-top: auto;
    position: relative;
}



#footer p.logo { overflow: hidden; position: relative; display: flex; flex-direction: column; }

#footer p.logo span{
    position: fixed; top: -100px;
    opacity: 0; pointer-events: none;
    display: flex; flex-direction: column; justify-content: center;
}

#footer p.logo a {

    display: block; /*width: 100%; height: 100%; padding-bottom:33.6%;*/
    /*position: absolute; top: 0; left: 0;*/



    display: flex; flex-direction: column; justify-content: center;
    flex:1;
}
/* #footer p.logo a::after { width: 100%; height: 0; padding-bottom: 33.6%; display: block; content:"";}*/
#footer p.logo a svg {
    display: block;max-width: 220px;
    width: 100%;
    height:auto;
    object-fit: contain; object-position: right center;
    transition: all 0.2s ease;
    /*    transform:translateY(-50%);
  /*   top: 50%;
      position: absolute;
      right: 0;*/
    /*transform: translateY(-50%);*/
}

#footer p.logo a svg .st0{fill:#AE9D6A; transition: all 0.2s ease;}
#footer p.logo a svg .st1{fill:#FFFFFF; transition: all 0.2s ease;}




#footer .wrapper,
#footerbottom .wrapper {
    display: flex;align-items: flex-start;  flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
}


#footer .wrapper>div {
    display: flex;
    width: calc(50% - 20px);
    justify-content: space-between;

    padding-top: 20px;
    padding-bottom: 20px;
}



#footer .wrapper>div div p {
    max-width: 16em;
}

#footer .wrapper>div>p, #footer .wrapper>div>div {
    width: calc((((100% - (5 * 40px)) / 6) * 4) + (40px * 3));

}

#footer .wrapper>div:first-child>div:last-child {
    position: relative;  }
#footer .wrapper>div:first-child>div:last-child::before {

    width: 1px; height:calc(100% + 2px); background:white;
    display: block; content:"";
    position: absolute; right:calc(100% + 20px); top:-1px;

}



#footer .wrapper>div>p:first-child {
    width: calc((((100% - (5 * 40px)) / 6) * 2) + (40px * 1));

}

#footer  .wrapper>div>ul, #footer .wrapper>div:last-child>div{
    width: calc((((100% - (5 * 40px)) / 6) * 3) + (40px * 2));

}

#footer .wrapper>div:last-child>div { margin-left: auto;}

#footer .wrapper>div p,
#footer .wrapper>div ul>li {
    font-size: 1.6rem;
}


#footer .wrapper>div>ul li a {
    color: #FFF8E4;

}


#footer .wrapper>div ul.social {width: 100%; display: flex; justify-content: space-between;}
#footer .wrapper>div ul.social>li {
    flex: 1;
    font-size: 3.6rem; margin-right: 0; /*margin:0.25em 0.5em;*/

}
/*#footer .wrapper>div ul.social li:first-child { margin-left: 0.5em;}
#footer .wrapper>div ul.social li:last-child { margin-right: 0.5em;}*/


#footer .wrapper>div ul.social>li::after {
    width: 0; right:0; border-right: 0.5px dashed #FFFFFF;
    display: block; height: 100%; content:"";
    position: absolute; top: 0;
}

#footer .wrapper>div ul.social>li:first-child::before {
    width: 0; left:0; border-left: 0.5px dashed #FFFFFF;
    display: block; height: 100%; content:"";
    position: absolute; top: 0;
}
@media all and (max-width: 1199px) {
    #footer .wrapper>div>div,
    #footer .wrapper>div>p:first-child {
        width: calc(50% - 20px);
    }

    #footer .wrapper>div p, #footer .wrapper>div ul>li {
        font-size: 1.4rem;

    }

}
@media all and (max-width: 899px) {
    #footer .wrapper>div {
        width: 100%;
    }
    #footer .wrapper>div>div,
    #footer .wrapper>div>p:first-child {
        width: calc(50% - 10px);
    }

    #footer p.logo a { flex-direction: row; }
    #footer p.logo a svg { margin-left: auto; }

    #footer .wrapper>div:last-child {
        max-width: 600px; margin: 0 auto;
        flex-direction: column;
    }

    #footer .wrapper>div:last-child>ul,
    #footer .wrapper>div:last-child>div {
        width: 100%;
    }
    #footer .wrapper>div:last-child>ul { order: 50;}

    #footer .wrapper>div:last-child>ul { justify-content: space-between; display: flex; flex-wrap: wrap;}

    #footer .wrapper>div:first-child>div:last-child::before {
  right:calc(100% + 10px);

    }

}

@media all and (max-width: 599px) {
    #footer .wrapper>div p, #footer .wrapper>div ul>li {
        font-size: 1.2rem;

    }
    #footer .wrapper>div ul.social>li {
        font-size: 3.2rem;
    }
    #footer .wrapper>div:last-child>ul li { width:calc(50% - 0.5em); font-size: 1.2rem; margin-right:0;margin:0.5em 0; }
    #footer .wrapper>div:last-child>ul li a { padding:0.33em 0;   }

}