#main-navigation .sub-menu{transition:.3s ease-out;}
#main-navigation ul.sub-menu li {
    width:calc(100% - 30px)
  }
#main-navigation>ul {
  display:-ms-flexbox;
  display:flex;
  list-style-type:none;
  padding:0;
  margin:0 -10px;
  -ms-flex-pack:space-evenly;
  justify-content:space-evenly
}
#main-navigation>ul>li {
  padding:0
}
#main-navigation>ul>li .caret {
  display:none
}
#main-navigation>ul>li.menu-item-has-children>a {
  position:relative
}
#main-navigation>ul>li.menu-item-has-children>a:after {
  content:"";
  display:inline-block;
  position:relative;
  margin-left:10px;
  height:0;
  width:0;
  border-width:7px 7px 0;
  border-color:#ff9900 transparent transparent;
  border-style:solid;
  -ms-transform:translateY(-3px);
  transform:translateY(-3px);
  transition:.3s ease-out
}
#main-navigation>ul>li.menu-item-has-children.hover>a,
#main-navigation>ul>li.menu-item-has-children:active>a,
#main-navigation>ul>li.menu-item-has-children:focus>a,
#main-navigation>ul>li.menu-item-has-children:hover>a {
  color:#ff9900
}
#main-navigation>ul>li.menu-item-has-children.hover>a:after,
#main-navigation>ul>li.menu-item-has-children:active>a:after,
#main-navigation>ul>li.menu-item-has-children:focus>a:after,
#main-navigation>ul>li.menu-item-has-children:hover>a:after {
  -ms-transform:translateY(1px);
  transform:translateY(1px)
}
#main-navigation>ul>li>a {
  text-align:center;
  font-weight:400;
  letter-spacing:1.5px;
  color:#fff;
  display:block;
  padding:5px 10px
}
#main-navigation>ul>li>a:active,
#main-navigation>ul>li>a:focus,
#main-navigation>ul>li>a:hover {
  color:#ff9900
}
#main-navigation .sub-menu-wrap {
  background-color:#fff;
  background-position:calc(50% + 603px) 100%;
  background-repeat:no-repeat;
  color:#202020;
  border-bottom:5px solid #ff9900;
  display:none
}
#main-navigation .sub-menu-wrap .flex-container {
  -ms-flex-direction:row-reverse;
  flex-direction:row-reverse;
  width:1240px;
  max-width:100%;
  padding:0 20px;
  margin:0 auto;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -ms-flex-align:stretch;
  align-items:stretch
}
#main-navigation .sub-menu-wrap .flex-container:before {
  content:"";
  width:1px;
  height:256px;
  display:block;
  margin:0 -1px 0 0
}
#main-navigation .sub-menu-wrap ul.sub-menu {
  width:calc(100% - 480px);
  margin:0 auto 0 0;
  padding:22px 0;
  list-style-type:none;
  -ms-flex-item-align:start;
  align-self:flex-start
}
#main-navigation .sub-menu-wrap ul.sub-menu li {
  padding:12px 0 11px
}
#main-navigation .sub-menu-wrap ul.sub-menu li a {
  font-size:16px;
  line-height:22px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-weight: 600;
}
#main-navigation .sub-menu-wrap ul.sub-menu li a:active,
#main-navigation .sub-menu-wrap ul.sub-menu li a:focus,
#main-navigation .sub-menu-wrap ul.sub-menu li a:hover {
  color:#ff9900
}
#main-navigation .sub-menu-wrap ul.sub-menu.col-2 {
  column-count:2
}
#main-navigation .sub-menu-wrap .side-content {
  width:440px;
  max-width:100%;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:column;
  flex-direction:column;
  -ms-flex-pack:center;
  justify-content:center;
  -ms-flex-align:start;
  align-items:flex-start;
  padding:0 0 0 44px;
  position:relative;
  border-left:2px solid #ff9900;
  margin:40px 0 40px auto
}
#main-navigation .sub-menu-wrap .side-content .btn-link {
  margin-top:18px
}
#main-navigation .sub-menu-wrap .sc-heading {
  font-size:24px;
  line-height:30px;
  margin:-3px 0 18px;
  letter-spacing:.24px;
  text-transform:uppercase;
  font-weight:600
}
#main-navigation .sub-menu-wrap .sc-content {
  font-size:20px;
  line-height:30px;
  letter-spacing:-.1px
}
#main-navigation .sub-menu-wrap .sc-content p {
  margin:0
}
.header-main .menu-toggle .icon-bar,.single.details .header-main .menu-toggle .icon-bar,.single.single-listing .header-main .menu-toggle .icon-bar{background:#ffffff;}
.header-main:hover .menu-toggle .icon-bar, .header-main.short .menu-toggle .icon-bar, .blog .header-main.short .menu-toggle .icon-bar, .blog .header-main .menu-toggle .icon-bar, .archive .header-main.short .menu-toggle .icon-bar, .archive .header-main .menu-toggle .icon-bar, .single .header-main.short .menu-toggle .icon-bar, .single .header-main .menu-toggle .icon-bar,.single.details .header-main:hover .menu-toggle .icon-bar,.single.single-listing .header-main:hover .menu-toggle .icon-bar{background:#000;}

.menu-toggle {
  background-color: transparent !important;
  color:#ffffff;
  position:absolute;
  /*top:calc(50% - 16px);*/
  right:40px;
  padding:0;
  margin:0;
  width:32px;
  height:32px;
  border:0;
  z-index:1000;
  top:-50px;
 
}

.menu-toggle.open{top: 40px;
  left: 5%;right: auto;}
.sr-only {
  position: absolute;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 15px 0px 0px -20px !important;
  overflow: hidden !important;
  clip-path: none;
  clip: auto !important;
  border: 0 !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .1825em;
}
.menu-toggle.open .sr-only{display: none;}
.menu-toggle .icon-bar {
  display:block;
  margin:0 0 6px;
  height:1px;
  width:24px;
  background:#ffffff;
  border-radius:0px;
  -ms-transform-origin:center left;
  transform-origin:center left;
  transition:.4s ease-in-out;
}
.menu-toggle.open .icon-bar{background:#000;display: block;}
#masthead.affix .menu-toggle.open .icon-bar{background:#000;}
.menu-toggle .icon-bar:last-child {
  margin-bottom:0
}
.menu-toggle.open .icon-bar-1 {
  -ms-transform:translate(4px,-1px) rotate(45deg);
  transform:translate(4px,-1px) rotate(45deg)
}
.menu-toggle.open .icon-bar-2 {
  opacity:0
}
.menu-toggle.open .icon-bar-3 {
  -ms-transform:translate(4px,2px) rotate(-45deg);
  transform:translate(4px,2px) rotate(-45deg)
}

 #masthead.open {
    background:#000;
  }

header .signature {
  mix-blend-mode:normal;
  opacity:0;
  overflow:hidden;
  padding-top:28px;
  transform:translateX(100%);
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity 1s cubic-bezier(.16,1,.3,1) 1s
}
header .signature img {
   display: block;
  margin: auto;
   width: 100%;
  }
#main-navigation, #header-navigation::before  {
  content: "";
  display: block;
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1);
  right: 0;
  top: 0;
  width: 100%;
}
 #header-navigation::before  {
  max-width: 600px;
  background-color: #ffffff;
	 content: "";
  position: fixed;
height:  100% !important;
}
#header-navigation.open::before {
  transform: translateX(0);
}
header .open .signature,header .open #main-navigation, #header-navigation.open::before {
  opacity:1;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1);
  transform: translateX(0%);
}
header .shade {
  background-color: rgba(42,42,42,.7);
  height: 100%;
  right: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: .5s;
  width: 100%;
  z-index: 1;
  visibility: hidden;
}
header.open .shade {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}
.open #main-navigation{ height: 100% !important;}
  #main-navigation {
    transition: transform 1s cubic-bezier(.16,1,.3,1),opacity 1s cubic-bezier(.16,1,.3,1) 1s;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
  }
header #navigation-wrapper {
  transition: background-color .5s linear .5s,transform .5s,padding .5s;
    /*! background-color: #d2cac4; */
}

#header-navigation{width:0;/*overflow: hidden;*/position: fixed;right: 0;}
#header-navigation.open {
  height: 100% !important;
  right: 0;
  max-width: 600px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  padding: 58px 0 10px;
  flex-direction: column;
}
header #header-navigation .scrollable{max-height: 100% !important;
  overflow: auto;}
header #header-navigation .center {
  display: flex;
  flex-direction: column;
  margin: auto 0;
  min-height: 100%;
  padding: 0 20px;
  width: 100%;
  position: relative;
}

header #header-navigation .center .sd-menu-h2 {
  font-size: 50px;
  letter-spacing: -.01em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 6px;
  text-align: left;
}

header #header-navigation .center .sd-menu-h2 span{
  display:inline-block;
  position:relative;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 1s cubic-bezier(.16,1,.3,1),opacity 1s cubic-bezier(.16,1,.3,1) 1s;
}
header #header-navigation.open .center .sd-menu-h2 span{
  opacity: 1;
  transition: transform 1s cubic-bezier(.16,1,.3,1),opacity 1s cubic-bezier(.16,1,.3,1);
  transform: translateX(0%);
}
header #header-navigation .center .sd-menu-h2 span:before{
  content:'';
  position:absolute;
  width:142px;
  height:2px;
  background:#ccc;
  top:10px;
  bottom:0;
  left:100%;
  margin:auto;
  margin-left:24px
}
header #header-navigation .center .custom-logo img {
  filter: none;
  transform: unset;
  opacity: .1;
  width: calc(100% - 40px);
}
  #main-navigation>ul {
    padding:25px 0 30px;
    margin:0;
    -ms-flex-direction:column;
    flex-direction:column;
    height:100%;
    width:100%;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:center;
    justify-content:center;
    max-height:100%;
    overflow:auto;
  }
  #main-navigation>ul>li {
    position:relative;
    padding:6px 0px;
    margin:0!important;
    width:100%;
    background:0 0;
    transition:background .3s
		
  transform:translateY(50%);
  transition:opacity .35s cubic-bezier(.16,1,.3,1),transform 0s linear .35s
  }
  #main-navigation>ul>li>a {
		-webkit-font-smoothing:antialiased;
    color: #606565 !important;
    font-size:15px;
    text-align:left;
    max-width:calc(100% - 30px);
    letter-spacing: .018em;
    line-height: 1.61;
    transition: .35s;
  }
  #main-navigation>ul>li>a:hover {
    color:#323a41 !important;
  }
  #main-navigation>ul>li .caret {
    position:absolute;
    right:26px;
    z-index:2;
    background:0 0;
    width:28px;
    height:28px;
    display:block;
    top:11px;
    cursor:pointer;
    transition:.3s;
    border:0!important
  }
  #main-navigation>ul>li .caret:before {
    content:"";
    border-style:solid;
    border-width:8px;
    border-color:#ff9900 transparent transparent;
    display:block;
    position:absolute;
    top:calc(50% - 4px);
    left:calc(50% - 8px)
  }
  #main-navigation>ul>li.open>a {
    color:#ff9900!important
  }
  #main-navigation>ul>li.open .caret {
    transform:rotateX(180deg)
  }
  #main-navigation .sub-menu {
    background:#fff!important;
    transition:none!important
  }
  #main-navigation .sub-menu {
    display:none;
    transition:.3s;
  }
  #main-navigation .menu-item-has-children:hover .sub-menu {
    display:block;
    transition:.3s;
  }
  #main-navigation ul.sub-menu {
    width:100%;
    padding:5px 0;
    column-count:1
  }
  #main-navigation ul.sub-menu li {
    padding:6px 6px 6px 20px;
    color: #606565 !important;
    font-size:13px;
	text-align: left;
  }
  #main-navigation .sub-menu-wrap .side-content,
  #main-navigation>ul>li.menu-item-has-children>a:after {
    /*! display:none!important */
  }
  .menu-toggle {
    display:block;
    transition: .5s;
  }
.menu-main-container.open{height:  100% !important;}

@keyframes slideRightToLeft {
  /* Start the animation from an off-screen position to the right */
  from {
    transform: translateX(100vw);
    opacity: 0; 
  }
  /* End the animation at the element's original position */
  to {
    transform: translateX(0); 
    opacity: 1;
  }
}

/* 2. Apply the animation to the desired element */
.slide-animation {
  animation-name: slideRightToLeft;
  animation-duration: .5s; /* The duration of the animation (adjust as needed) */
  animation-fill-mode: both; /* Ensures the element stays in the "to" state after the animation finishes */
  /* animation-timing-function: ease-out;
  animation-delay: .5s;*/
  
}

@media screen and (max-width:991px) {
	.menu-toggle.open{position: fixed !important;top: 40px !important;
    right: auto !important;}
	.header-main.open .menu-toggle.open .icon-bar,.header-main.open:hover .menu-toggle.open .icon-bar{background:#fff;}
.menu-toggle{display: none}
.mobile-only .menu-toggle {position: relative;display: block;right: 0px; top: 0px;}
	
.header-main:hover .menu-toggle .icon-bar, .header-main.short .menu-toggle .icon-bar, .blog .header-main.short .menu-toggle .icon-bar, .blog .header-main .menu-toggle .icon-bar, .archive .header-main.short .menu-toggle .icon-bar, .archive .header-main .menu-toggle .icon-bar, .single .header-main.short .menu-toggle .icon-bar, .single .header-main .menu-toggle .icon-bar, .single.details .header-main:hover .menu-toggle .icon-bar, .single.single-listing .header-main:hover .menu-toggle .icon-bar,
	
.header-main:hover .menu-toggle .icon-bar, .single.details .header-main:hover .menu-toggle .icon-bar, .single.single-listing .header-main:hover .menu-toggle .icon-bar {
  background: #ffffff;
}
}

@media screen and (min-width:767px) {
	header #header-navigation .center{padding: 0 63px;
		padding: 95px 5.7% 40px 90px;}
}

@media screen and (min-width:1081px) {
	#main-navigation .sub-menu {
    display:block;
    position:absolute;
    top:100%;
    width:100%;
    right:0;
    z-index:10000;
    opacity:0;
    visibility:hidden;
    pointer-events:none
  }
  #main-navigation>ul>li.hover .sub-menu,
  #main-navigation>ul>li:active .sub-menu,
  #main-navigation>ul>li:focus .sub-menu,
  #main-navigation>ul>li:hover .sub-menu {
    pointer-events:all;
    opacity:1;
    position: relative;
    visibility:visible
  }
}
@media screen and (max-width:767px) {
	.header-main.open .menu-toggle.open .icon-bar,.header-main.open:hover .menu-toggle.open .icon-bar{background:#000;}
}
@media screen and (max-width:480px) {
header #header-navigation .center{padding: 20px 20px 0;}
header #header-navigation .center .sd-menu-h2{font-size: 30px;}
}

.sd-menu-smi {
  position:absolute;
  top:0;
  bottom:0;
  right:35px;
  width:40px;
  pointer-events:none
}
.sd-menu-smi a {
  display:flex;
  font-size:20px;
  color:#Fff;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgb(0 0 0 / .5);
  align-items:center;
  justify-content:center;
  margin:10px 0;
  transition:all .3s cubic-bezier(.4, 0, .2, 1);
  pointer-events:all
}
.sd-menu-smi a:hover {
  background:#d2d2d2;
  border-color:#d2d2d2
}
