/* barba css start */

  :root {
    /* --easing: cubic-bezier(0.12, 0, 0.39, 0); */
    /* --easing: cubic-bezier(.45,.05,.55,.95) */
    /* --easing: cubic-bezier(.05,.50,.42,.98); */
    --easing: cubic-bezier(.16,.84,.44,1);

  }

  /* Page load animation start */
  /* .home-once {
      opacity: 0;
  }
  .home-once-active {
      transition: all 50s linear;
  }
  .home-once-to {
      opacity: 0;
  } */
  /* Page load animation end */

  /* first main shows classees below */
  .is-home .home-leave-active .home-leave-to { }

  /* second main shows classees below */
  .is-home .home-enter-to {}

  /* animation on loaded page (first) */
  .home-leave {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
     transform: translateX(0);
     opacity: 1;
  }

  main.home-leave-active, main.barba-leave-active {
    -webkit-transition: -webkit-transform 1.2s var(--easing);
    transition: -webkit-transform 1.2s var(--easing);
    -o-transition: transform 1.2s var(--easing);
    transition: transform 1.2s var(--easing);
    transition: transform 1.2s var(--easing),
    -webkit-transform 1.2s var(--easing),
    -moz-transform 1.2s var(--easing);
    white-space: normal;


  }

  main.home-leave-to, main.barba-leave-to  {
     -webkit-animation: mainStadyToleft 1.2s var(--easing) forwards;
             animation: mainStadyToleft 1.2s var(--easing) forwards;
               opacity: 1;
           white-space: normal;
     /* -webkit-transform: translateX(-100%);
         -ms-transform: translateX(-100%);
             transform: translateX(-100%); */
  }

  @-webkit-keyframes mainStadyToleft {
    0 {
      opacity: 1;
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes mainStadyToleft {
    0 {
      opacity: 1;
       transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  .navActive main.home-leave-to,
  .navActive main.barba-leave-to,
  .navSlideToleft main.home-leave-to,
  .navSlideToleft main.barba-leave-to {
    opacity :0;
    visibility: hidden;
  }

  /* .home-leave-to, .barba-leave-to {
      -webkit-transform: translate(-100%, -100%);
      -ms-transform: translate(-100%, -100%);
      transform: translate(-100%, -100%);
      opacity: 1;
  } */

  /* ############## animation on loaded page (first) ################ */

  /* animation on next page start */
  .home-enter{
    -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
          /* opacity: 0; */
  }
  .home-enter-active {
    -webkit-transition: -webkit-transform 1.2s var(--easing);
   transition: -webkit-transform 1.2s var(--easing);
   -o-transition: transform 1.2s var(--easing);
   transition: transform 1.2s var(--easing);
   transition: transform 1.2s var(--easing),
   -webkit-transform 1.2s var(--easing);
  }

  .home-enter-to, .barba-enter-to {
    -webkit-animation: mainNextRightToleft 1.2s var(--easing);
            animation: mainNextRightToleft 1.2s var(--easing);
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            white-space: normal;
  }

  @-webkit-keyframes mainNextRightToleft {
    from {
       transform: translateX(100%);
    }

    to {
       transform: translateX(0%);
    }
  }

  @keyframes mainNextRightToleft {
    from {
       transform: translateX(100%);
     }

     to {
       transform: translateX(0%);
     }
  }

/* animation on next page End */


/* .home-enter-to, .home-leave-to {
  position: absolute;
  top: 0;
  left: 0;
  height:100%;
  width:100%;
} */


/* oncllick on navbar css start */
  .closeNavMenu { position: absolute; right: 40px; top: 20px;}
  /* main { height: 100vh !important;} */
  main {
    -webkit-transition: -webkit-transform 1.2s var(--easing);
    transition: -webkit-transform 1.2s var(--easing);
    -o-transition: transform 1.2s var(--easing);
    transition: transform 1.2s var(--easing);
    transition: transform 1.2s var(--easing),
    -webkit-transform 1.2s var(--easing);
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    display: -webkit-box; display:
    -ms-flexbox; display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #d5ccbe;
    background-image: url(https://typewriter.london/wp-content/uploads/2023/02/PaperBg.jpg);
    background-repeat: repeat;
    background-size: 100% auto;
    opacity: 1;
    height: 100%;
  }
  .navActive main {
    -webkit-animation: mainGetToRight 2.4s var(--easing) !important;
    animation: mainGetToRight 2.4s var(--easing) !important;
    opacity: 1;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  @-webkit-keyframes mainGetToRight {
    0% {
      -webkit-transform: translateX(0%);
      -ms-transform: translateX(0%);
      transform: translateX(0%);
      opacity: 1;
      visibility: visible;
      background: #000 !important
    }

    50% {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
      opacity: 1;
      visibility: visible;
      background: #000 !important
    }
    50.1% {
      opacity: 0;
      visibility: hidden;
      z-index: -9999;
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    100% {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
      opacity: 0;
      visibility: hidden;
      background: #000 !important;
      z-index: -999;
    }
  }
  @keyframes mainGetToRight {
    0% {
      -webkit-transform: translateX(0%);
      -ms-transform: translateX(0%);
      transform: translateX(0%);
      opacity: 1;
      visibility: visible;
      background: #000 !important
    }

    50% {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
      opacity: 1;
      visibility: visible;
      background: #000 !important
    }
    50.1% {
      opacity: 0;
      visibility: hidden;
      z-index: -9999;
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    100% {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
      opacity: 0;
      visibility: hidden;
      background: #000 !important;
      z-index: -9999;
    }
  }

/* oncllick on navbar css End */


/*  barba css End */

nav {
    position: fixed; top: 0; margin: auto; left: auto;  width: 100vw; height: 100vh; background-color: #000000; z-index: 9999; visibility: visible;
    display: -webkit-box;	display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center;	align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; overflow: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center;
    justify-content: center;	box-shadow: 0 0px 6px rgb(0 0 0 / 50%);	-webkit-box-shadow: 0 0px 6px rgb(0 0 0 / 50%); padding: 60px 0 20px;
    right: -101%;
    -webkit-transition: 1.2s var(--easing);
    transition: 1.2s var(--easing);
    -o-transition: 1.2s var(--easing);
    transition: 1.2s var(--easing);

    /* -webkit-transition-delay: 0.01s;
         -o-transition-delay: 0.01s;
            transition-delay: 0.01s; */
    /* -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
            transform: translateX(100%); */

}
nav.active { visibility: visible;
  -webkit-transition: 1.2s var(--easing);
  transition: 1.2s var(--easing);
  -o-transition: 1.2s var(--easing);
  transition: 1.2s var(--easing);
  top: 0;
  right:0%;
  /* -webkit-transform: translateX(0px);
     -ms-transform: translateX(0px);
         transform: translateX(0px); */
}

/* nav menu last step from right to left Start */
.navSlideToleft nav {
  -webkit-animation: navOpenFromRightTo 2.4s var(--easing) !important;
  animation: navOpenFromRightTo 2.4s var(--easing) !important;
}
@-webkit-keyframes navOpenFromRightTo {
  0% {
    right: 0;
    opacity: 1;
    visibility: visible;
    background: #000 !important
  }

  50% {
    right: 100%;
    opacity: 1;
    visibility: visible;
    background: #000 !important
  }
  50.1% {
    right: -100%;
    opacity: 0;
    visibility: hidden;
    background: #000 !important;
    z-index: -9999;
  }
  100% {
    right: -100%;
    opacity: 0;
    visibility: hidden;
    background: #000 !important;
    z-index: -99999;
  }
}

@keyframes navOpenFromRightTo {
  0% {
    right: 0;
    opacity: 1;
    visibility: visible;
    background: #000 !important;
  }

  50% {
    right: 100%;
    opacity: 1;
    visibility: visible;
    background: #000 !important;
  }
  50.1% {
    right: -100%;
    opacity: 0;
    visibility: hidden;
    background: #000 !important;
    z-index: -9999;
  }
  100% {
    right: -100%;
    opacity: 0;
    visibility: hidden;
    background: #000 !important;
    z-index: -99999;
  }
}

nav.active.navOpenFromRight {
  -webkit-transition: 1.2s var(--easing);
  transition: 1.2s var(--easing);
  -o-transition: 1.2s var(--easing);
  transition: 1.2s var(--easing);
  right: 0% !important;
  opacity: 1;
  visibility: visible;
  z-index: 99999;
}

.startContactFadeAnimation .navSlideToleft nav,
.startContactFadeAnimation nav {
    transform: translateX(0) !important;
}

/* nav menu last step from right to left End */


/* contact page nav menu fade-in-out animation Start here */
.page-template-template-contact.fadeMenuActive nav {
  -webkit-animation: ContactNavFadeIn 1.5s ease forwards;
  animation: ContactNavFadeIn 1.5s ease forwards;
  background-color: #000;
  animation-delay: 1s;
}
@-webkit-keyframes ContactNavFadeIn {
  0% {
    right: 0;
    opacity: 1;
    visibility: visible;
    background-color: #000;
  }
  100% {
    right: 0;
    opacity: 0;
    visibility: hidden;
    background-color: #000;
  }
}

@keyframes ContactNavFadeIn {
  0% {
    right: 0;
    opacity: 1;
    visibility: visible;
    background-color: #000;
  }
  100% {
    right: 0;
    opacity: 0;
    visibility: hidden;
    background-color: #000;
  }
}

.page-template-template-contact.fadeMenuActive.navActive nav {
  -webkit-animation: ContactNavFadeInActive 1s ease forwards;
  animation: ContactNavFadeInActive 1s ease forwards;
  background-color: #000;
}
@-webkit-keyframes ContactNavFadeInActive {
  0% {
    right: 0;
    opacity: 0;
    visibility: hidden;
    background-color: #000;
  }
  100% {
    right: 0;
    opacity: 1;
    visibility: visible;
    background-color: #000;
  }
}

@keyframes ContactNavFadeInActive {
  0% {
    right: 0;
    opacity: 0;
    visibility: hidden;
    background-color: #000;
  }
  100% {
    right: 0;
    opacity: 1;
    visibility: visible;
    background-color: #000;
  }
}

/* .page-template-template-contact.navActive main {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
} */

/* contact page nav menu fade-in-out animation end here */

.navSlideToleft main {
  -webkit-animation: navLinkClickSlideToleft 1.2s var(--easing);
  animation: navLinkClickSlideToleft 1.2s var(--easing);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

@-webkit-keyframes navLinkClickSlideToleft {
  from {
     transform: translateX(100%);
  }

  to {
     transform: translateX(0%);
  }
}

@keyframes navLinkClickSlideToleft {
  from {
     transform: translateX(100%);
   }

   to {
     transform: translateX(0%);
   }
}



.icon { height: 2px; width: 35px; top: 27px; background-color: #000000; position: absolute; transition-duration: 0.2s;}
.burgerMenu.is-active .icon { top: 28px;}
.icon:before {left: 0; position: absolute; top: -10px; height: 2px; width: 35px; background-color: #000000; content: ""; border-radius: 0px; transition-duration: 0.2s;}
.icon:after { left: 0; position: absolute; top: 10px; height: 2px; width: 35px; background-color: #000000; content: ""; border-radius: 0px; transition-duration: 0.2s;}
.menuCloseIcon, .burgerMenu { position: relative;  display: inline-block; cursor: pointer; margin-left: auto;
  display: block; z-index: 999999; border: 1.5px solid #000000; border-radius: 50px; width: 61px; height: 61px; padding: 3px; display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; }
.home .burgerMenu { background: #E2DED7 !important; -webkit-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;}
.home .burgerMenu:hover { opacity: 0.77; }
.burgerMenu.is-active { border: 1.5px solid #FFFFFF; background: transparent !important;}
.burgerMenu.is-active .icon::before, .burgerMenu.is-active .icon::after { background-color: #fff;}
.hamburger .icon { transition-duration: 0.2s; transition-delay: 0.2s;}
.hamburger .icon:after { transition: transform 0.2s, top 0.2s 0.2s;}
.hamburger .icon:before { transition: transform 0.2s, top 0.2s 0.2s;}
.hamburger.is-active .icon { transition-duration: 0.2s; transition-delay: 0.2s; background: transparent !important;}

/* .hamburger.is-active .icon:before { transition: top 0.2s, transform 0.2s 0.2s; top: 0px; transform: rotateZ(-45deg);}
.hamburger.is-active .icon:after { transition: top 0.2s, transform 0.2s 0.2s; top: 0px; transform: rotateZ(45deg);} */

.menuCloseIcon { border: 2px solid #E2DED7; background: transparent; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.menuCloseIcon:hover { background: #E2DED7;}
.menuCloseIcon .icon::before, .menuCloseIcon .icon::after { background-color: #fff;}
.menuCloseIcon:hover .icon::before, .menuCloseIcon:hover .icon::after { background-color: #000000;}
.menuCloseIcon .icon { transition-duration: 0.2s; transition-delay: 0.2s; background: transparent;}
.menuCloseIcon .icon:before { transition: top 0.2s, transform 0.2s 0.2s; top: 0px; transform: rotateZ(-45deg);}
.menuCloseIcon .icon:after { transition: top 0.2s, transform 0.2s 0.2s; top: 0px; transform: rotateZ(45deg);}
.menuCloseIcon.preventMenuclose { pointer-events: none; opacity: 0; }

.scrollOff { overflow: hidden;}

.navActive #myHeader {  background: transparent !important;  box-shadow: none; padding-bottom: 0;}

.HeaderMenu { width: 100%; height: 85vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;
  -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
ul#menu-menu { padding: 0;}
nav ul { padding-left: 0 ; }
.topMenu li { list-style: none; text-align: center; padding: 0;}
.topMenu li.identifier { -webkit-animation-name: identifier; animation-name: identifier; -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; opacity: 0; position: relative;}
.topMenu > li.menudelay2s { -webkit-animation-delay:.5s; animation-delay: .5s;}
.topMenu > li:nth-child(1).menudelay2s, .topMenu .sub-menu li:nth-child(1).menudelay2s {-webkit-animation-delay:0.6s; animation-delay:0.6s;}
.topMenu > li:nth-child(2).menudelay2s, .topMenu .sub-menu li:nth-child(2).menudelay2s {-webkit-animation-delay:0.8s; animation-delay:0.8s;}
.topMenu > li:nth-child(3).menudelay2s, .topMenu .sub-menu li:nth-child(3).menudelay2s {-webkit-animation-delay:1s; animation-delay:1s;}
.topMenu > li:nth-child(4).menudelay2s, .topMenu .sub-menu li:nth-child(4).menudelay2s {-webkit-animation-delay:1.2s; animation-delay:1.2s;}
.topMenu > li:nth-child(5).menudelay2s, .topMenu .sub-menu li:nth-child(5).menudelay2s {-webkit-animation-delay:1.4s; animation-delay:1.4s;}
.topMenu > li:nth-child(6).menudelay2s, .topMenu .sub-menu li:nth-child(6).menudelay2s {-webkit-animation-delay:1.6s; animation-delay:1.6s;}
.topMenu > li:nth-child(7).menudelay2s, .topMenu .sub-menu li:nth-child(7).menudelay2s {-webkit-animation-delay:1.8s; animation-delay:1.8s;}
.topMenu > li:nth-child(8).menudelay2s, .topMenu .sub-menu li:nth-child(8).menudelay2s {-webkit-animation-delay:2s; animation-delay:2s;}
.topMenu > li:nth-child(9).menudelay2s, .topMenu .sub-menu li:nth-child(9).menudelay2s {-webkit-animation-delay:2.2s; animation-delay:2.2s;}
.topMenu > li:nth-child(10).menudelay2s, .topMenu .sub-menu li:nth-child(10).menudelay2s {-webkit-animation-delay:2.6s; animation-delay:2.6s;}
.topMenu > li:nth-child(11).menudelay2s, .topMenu .sub-menu li:nth-child(11).menudelay2s {-webkit-animation-delay:2.4s; animation-delay:2.4s;}
.topMenu > li:nth-child(12).menudelay2s, .topMenu .sub-menu li:nth-child(12).menudelay2s {-webkit-animation-delay:2.8s; animation-delay:2.8s;}

.mainNavmenu-container .topMenu { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0;}
.sub-menu li { justify-content: center; align-items: center; width: 100%; padding: 3px 0;}

.topMenu > li a { color: #E2DED7; font-size:5vw; line-height:5vw; letter-spacing: 0; padding: 0; font-family: 'Akkurat Mono LL Bold';
-webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out;  transition: all .5s ease-in-out;
border-bottom:0; text-transform: uppercase; }
.topMenu > li > a { padding: 10px 0; display: inline-block; margin: 10px 0;}
.topMenu li.parent.active a { color: #E9521D;}
.topMenu li a:hover { color: #E9521D; background: transparent !important;}

.sub-menu { display: none; padding-bottom: 50px;}
.topMenu li.parent.active .sub-menu { display: block !important;}

ul.sub-menu { padding: 0px !important;}
.sub-menu li:last-child { padding-bottom: 20px; }
.topMenu > li .sub-menu li a { font-size: 2.5vw; line-height: 3.3vw; padding-bottom: 2px; font-family: 'Akkurat-Light'; color: #E2DED7; text-transform: capitalize; letter-spacing: 0;}
.sub-menu li a:hover { color: #E9521D !important;}
.sub-menu a.linkActive { border-bottom: 2px solid #fff; color: #fff !important;}

.current_page_item > a, .current-menu-item > a { color: #E9521D !important; border-bottom: 1px solid #E9521D;}
.current_page_item > .sub-menu a:hover, .current-menu-item > .sub-menu a:hover { color: #ffffff !important;}
li.current_PointerNone > a { pointer-events: none;}
/* .disableAllclicks, .disableAllclicks a { pointer-events: none;} */
a.mPS2id-highlight, .mPS2id-clicked { border-bottom: 0px solid #fff !important; color: #E9521D !important; pointer-events: none; }
footer .current_page_item > a, footer .current-menu-item > a { pointer-events: none;}

.bottomLogo { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  justify-content: flex-start; width: 100%; z-index: -1; bottom: 10px; height: 15vh; margin-bottom: 0; -webkit-box-align: end;
    -ms-flex-align: end; align-items: end; }
.bottomLogo a { position: absolute; left: 3%; border: 0; width: 30vw; bottom: 0px; -webkit-animation-name: identifier; animation-name: identifier;
  -webkit-animation-duration: 0.8s;	animation-duration: 0.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; opacity: 0;}

.plusTrigger { margin-left: 15px !important; padding-bottom: 0 !important; position: absolute; top: 45px; cursor: pointer; width: 55px; display: inline-flex; justify-content: center; align-items: center; height: 55px; }
.plusTrigger > svg { width: 100%; height: auto; max-width: 45px; min-width: 20px; }
.plusTrigger.minusTrigger svg line#Line_3 { opacity: 0; transition: 0.5s ease-in-out;}
.plusTrigger ellipse,
.plusTrigger line {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.topMenu > li a:hover + .plusTrigger ellipse, .plusTrigger:hover ellipse { fill: #e9521d; }
.topMenu > li a:hover + .plusTrigger line, .plusTrigger:hover line { stroke: #000000; }
.current_page_item > .plusTrigger ellipse, .current-menu-item .plusTrigger ellipse { fill: #e9521d; }
.current_page_item > .plusTrigger line, .current-menu-item .plusTrigger line { stroke: #000000; }


@keyframes identifier {
	0% {
			opacity: 0;
			-webkit-transform: translate3d(0,50%,0);
			transform: translate3d(0,50%,0);
		}
	100% {
			opacity: 1;
			-webkit-transform: none;
			transform: none;
	}
}