/* menu  ----------------------------------------- */
.logo-svg 
{
  width: 148px;
  cursor: pointer;
}

.custom-svg path 
{
  fill: #222;
  transition: fill 1s ease;
}

#header-s
{
    margin: 0;
    padding: 32px 0px 32px 60px;
    position: fixed;
    width: 28%;
    max-width: 460px;
    text-align: left;
    z-index: 1000;
    background: #fff;
}

#menu
{
    margin: 0;
    padding: 32px 0px 32px 60px;
    position: fixed;
    width: 260px;
    text-align: left;
	  z-index: 1000;
}

#header-s img, #menu img
{
    cursor: pointer;
}

@media only screen and 
(min-width: 1px) and (max-width: 1279px) {
    #navigation {
        display: none;
    }
}

.menu-container-home, .menu-container
{
    margin: 0 auto;
    position: relative;
    top: 21px;
    z-index: 10000;
    line-height: 158%;
    font-family: Inter;
    font-weight: 300;
    font-size: 1.000em;
    letter-spacing: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.menu-container-home a
{
    display: inline-block;    
    color: #222;
    transition: color 1s ease;
}

.menu-container a
{
    display: inline-block;    
    color: #999;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.menu-container a:hover
{
    color: #222;
}

#footer
{
    margin: 0;
    padding: 60px;
    float: left;
    width: calc(100% - 120px);
    height: 48px;
    text-align: left;
    background: #fff;
}

@media only screen and 
(min-width: 872px) and (max-width: 1279px) 
{
   #header-s
   {
      display: none;
   }
   
    #footer
    {
        padding: 120px 0 40px 24px;
        float: left;
        width: calc(100% - 24px);
        height: 54px;
    }
}

@media screen and
(min-width: 1px) and (max-width: 871px)
{
   #header-s
   {
      display: none;
   }
   
   #footer
    {
        padding: 120px 0 40px 13px;
        float: left;
        width: calc(100% - 13px);
        height: 54px;
    }
}

.social
{
    width: auto;
}

.social img
{
    margin: 0px 8px 4px 0px;
    opacity: 0.46;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

@media only screen and 
(min-width: 0px) and (max-width: 1279px) {
    .social img
    {
        margin: 0px 10px 10px 0px;
        opacity: 0.46;
    }
}

.social img:hover
{
    opacity: 1;
    cursor: pointer;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.copyright
{
    padding: 0;
    font-weight: 400;
    font-size: 10px;
    color: #999;
    letter-spacing: 0.025rem;
}

#navigation-mobile
{
   margin: 0 auto;
   padding: 6px 15px 6px 17px;
   position: fixed;
   width: calc(100% - 32px);
   height: 36px;
   background: #fff;
   border-bottom: 1px solid;
   border-color: #E8E8E8;
   z-index: 1000;
}

#navigation-mobile-home
{
   margin: 0 auto;
   padding: 6px 15px 6px 17px;
   position: fixed;
   width: calc(100% - 32px);
   height: 36px;
   z-index: 1000;
}

@media only screen and 
(min-width: 1280px) and (max-width: 6000px) {
    #navigation-mobile, #navigation-mobile-home
    {
        display: none;
    }
}

@media screen and
(min-width: 1px) and (max-width: 871px)
{
   #navigation-mobile, #navigation-mobile-home
   {
      padding: 6px 3px 6px 5px;
      width: calc(100% - 8px);
   }
}

.logo-pic
{
    float: left;
}

.menu-pic
{
    float: right;
}

#navigation-mobile-on
{
   margin: 0;
   padding: 0;
   top: 0;
   position: fixed;
   width: 100%;
   height: 100vh;
   background: #93533F;
   z-index: 100000;
}

.menu-header
{
   margin: 0;
   padding: 6px 15px 6px 17px;
   position: relative;
   width: calc(100% - 32px);
   height: 36px;
   border-bottom: 1px solid;
   border-color: #A97565;
}

.menu-container-mobile
{
    margin: 0;
    position: relative;
    top: 18px;
    left: 24px;
    line-height: 194%;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 0;
}

.menu-container-mobile a
{
    width: 100%;
    display: inline-block;
    color: #fff;
}

.menu-container-mobile a:active
{
  color: #222;
}

.connect
{
    margin: 0 auto;
    position: fixed;
    bottom: 24px;
    left: 24px;
    line-height: 230%;
    font-size: 11px;
    letter-spacing: 0.025rem;
    color: #fff;
}

.connect a
{
    line-height: 200%;
    font-size: 13px;
    letter-spacing: 0.03rem;
    color: #DFCBC5;
}

@media screen and
(min-width: 1280px) and (max-width: 6000px)
{
   #navigation-mobile-on
   {
      display: none;
   }
}

@media screen and
(min-width: 1px) and (max-width: 871px)
{
   .menu-header
   {
      padding: 6px 3px 6px 5px;
      width: calc(100% - 8px);
   }
   
   .menu-container-mobile, .connect
   {
       left: 13px;
   }
   
}