/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 25 2020 | 21:02:49 */
/* MEGMENU */
.megmenu .elementor-widget-icon-box:hover {
    background: rgba(58, 193, 182, 0.1)!important;
    padding: 24px;
    border-radius: 0px;
  transition:300ms ease all;
}
.megmenu .elementor-widget-icon-box {
    padding: 24px;
  transition:300ms ease all;
}
.megmenu .elementor-widget-icon-box:hover a {
   color:#3ac1b6!important;
  transition:300ms ease all;
}

#meg-user .elementor-widget-icon-box {
 padding: 0px!important;
}
#meg-user .elementor-widget-icon-box:hover {
    background: white!important;
}
@media (max-width:1024px) {
.megmenu .elementor-widget-icon-box {
    padding: 0px;
}
  .megmenu .elementor-widget-icon-box:hover {
    padding: 0px;
    background-color:#fff!important;
}
  .elementskit-submenu-indicator {
    width: 100vw!important;
    position: absolute;
    right: 0;
    height: 40px!important;
    vertical-align: middle;
    text-align: right;
}
}

@media (min-width:1024px) {
  
  .mainlogo  {
    height: 30px;
    width: 80px;
    background: url(https://yodle.nz/wp-content/uploads/yodle-logo-animated-LIGHT.svg);
    background-position: 0;
    float: left;
    position: absolute;
    left: 0;
    background-repeat:no-repeat;
    cursor: pointer;
}

.mainheader-alt .mainlogo {
   background: url(https://yodle.nz/wp-content/uploads/yodle-logo-animated-DARK.svg);
  cursor: pointer;
}

.mainheader {
  height: 100px;
  background-color: rgba(0,0,0,0);
  position: fixed;
  width: 100%;
  padding-top:50px!important;
  transition: all ease 0.5s!important;
}

.mainheader  i.elementskit-submenu-indicator:before {
 color:#fff!important;
}
  .mainheader-alt  i.elementskit-submenu-indicator:before {
 color:#000!important;
}
  
.mainheader .elementskit-navbar-nav > li > a {
color:#fff!important;
}

.mainheader .letstalk a span {
    border-bottom-color: #fff!important;
}

.mainheader-alt .megmenu .elementor-icon-box-wrapper i, .mainheader-alt .elementor-icon-box-title, .mainheader-alt .elementor-icon-box-content, .mainheader-alt .elementor-icon-box-description, .mainheader-alt h3, .mainheader-alt  .elementskit-megamenu-panel * {
color:#ffffff!important;
}

  .mainheader-alt .elementor-heading-title p {
    color:#9fa2aa!important;
  }
  
  .mainheader-alt a.elementor-button-link.elementor-button.elementor-size-xl {
    border-color:#fff!important;
  }
  
  .mainheader-alt a.elementor-button-link.elementor-button.elementor-size-xl:hover {
    background: #fff;
}
    .mainheader-alt a.elementor-button-link.elementor-button.elementor-size-xl:hover .elementor-button-text{
    color: #000!important;
}
  
  .megmenu {
    box-shadow: 0 1000px 0px 1000px rgba(0,0,0,.6);
  }
  
  .mainheader .megmenu h6,  .mainheader .megmenu h6 a {
  color:#030217!important;
  }

  
.mainheader-alt {
  height: 70px;
  padding-top:auto;
  background-color: rgba(255,255,255, 1)!important;
  position: fixed;
  width: 100%;
  transition: all ease 0.5s!important;
  box-shadow: 0px 10px 30px 2px rgba(0,0,0,0.1);
}

.mainheader-alt section#meg-marketing, .mainheader-alt section#meg-web, .mainheader-alt section#meg-design, .mainheader-alt section#meg-user {
background:#030217!important;
}


 .mainheader-alt .elementskit-navbar-nav > li.elementskit-megamenu-has:hover > a:after {
    content: '';
    border-bottom: 12px solid #030217;
    animation-direction: alternate;
}
  
}

.megmenu p, .megmenu p a {
    font-size:14px!important;
  font-weight:normal!important;
  line-height:1.8!important;
}


.megmenu .elementor-icon-box-wrapper:hover i {
    transition:200ms ease all;
}
.megmenu .elementor-icon-box-wrapper i {
    transition:400ms ease all;
}
.megmenu h6, .megmenu h6 a {
    font-size: 1rem!important;
    letter-spacing: 0px!important;
  font-weight:bold!important;
      margin: 0;
  text-transform: capitalize!important;
}


#meg-marketing .elementor-icon-box-wrapper:hover i {
    color:#3ac1b6!important;
}

#meg-web .elementor-icon-box-wrapper:hover i {
    color:#3ac1b6!important;
}

#meg-design .elementor-icon-box-wrapper:hover i {
    color:#3ac1b6!important;
}

#meg-user .elementor-icon-box-wrapper:hover i {
    color:#3ac1b6!important;
}


 .elementskit-navbar-nav > li.elementskit-megamenu-has:hover > a:after {
    content: '';
    border-bottom: 12px solid #fff;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    z-index: 999;
    margin-top: 58px;
    width: 10px;
    position: absolute;
    top: 0;
    left: 50%;
    animation-delay: 200ms;
    animation: fadein ease 300ms;
    animation-direction: alternate;
}

 .elementskit-navbar-nav > li.elementskit-megamenu-has > a:after {
    animation-delay: 200ms;
    animation: fadein ease 300ms;
    animation-direction: alternate;
}

.tele-login p.elementor-icon-box-description {
    font-family: "Noe Display", Arial!important;
    font-size: 25px!important;
    font-weight: bold!important;
    line-height: 1.4em!important;
}

.currentpromo h6:after {
    background: transparent;
    color: #3ac1b6;
    content: "Sale";
    display: block;
    padding: 0px 6px;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    max-width: 40px;
    border-top: 2px solid #3ac1b6;
    margin-left: auto;
    margin-left: 50%;
    transform: translate(-50%);
    margin-top: 13px;
}

 
 @keyframes fadein {
    0%   {opacity:0; transform:translate(0px,-5px); }
    100% { opacity:1; transform:translate(0px,0px); }
}


#main-menu li.menu-item:first-child {
    margin-left: auto;
}
.floatright {
    margin-left:auto!important;
}
.elementskit-navbar-nav-default .elementskit-navbar-nav.elementskit-menu-po-center {
    padding-left: 100px;
}

.loginmenu a.elementor-button:before {
display:none!important;
}

.loginmenu a:before {
content: "\e922";
    font-family: 'Yodle-Bold';
    font-size: 125%;
    margin-right: 10px;
}
.letstalk a span {
    border-bottom: 2px solid #000;
    padding-bottom: 4px;
    margin-bottom: -4px;
}


@media (min-width:1115px) {
html,body {scroll-padding-top: 70px; /* set to the height of your header */}

  .headroom {
    will-change: transform;
    transition: transform 200ms linear;
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
  }

  100% {
    -webkit-transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
.animated.slideDown {
  -webkit-animation-name: slideDown;
  -moz-animation-name: slideDown;
  -o-animation-name: slideDown;
  animation-name: slideDown;
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-100%);
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

.animated.slideUp {
  -webkit-animation-name: slideUp;
  -moz-animation-name: slideUp;
  -o-animation-name: slideUp;
  animation-name: slideUp;
}



*/

}


 .elementskit-menu-overlay {
    background-color: transparent!important;
}


@media (max-width:1024px) {

  div#ekit-megamenu-main, #main-menu li.menu-item, #main-menu li.menu-item ul {
overflow:hidden!important;
}
  
    .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements {
    left: -100%;
}
  .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements.active {
    left: 0!important;
}
  .elementskit-menu-overlay {
    background-color: #3ac1b6;
}
  
  
.mainheader {
    position: absolute;
    width: 100%;
}
  
.mainlogo, .mainheader-alt .mainlogo {
    height: 25px;
    width: 70px;
    background: url(https://yodle.nz/wp-content/uploads/yodle-logo-animated-LIGHT.svg);
    background-position: 0;
    float: none;
    position: absolute;
    background-repeat: no-repeat;
    transform: translateX(-50%);
    left: 50%;
}
  
  .elementskit-menu-hamburger {
  margin-left:10px;
  }
  
  .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements {
  max-width:100%!important;
  }
  
  .home-video {
  min-height:100vh;
}
.elementor .elementor-background-video-container {
    height: 60vh!important;
    width: 100%!important;
    bottom: 0!important;
    right: 0!important;
    top: auto!important;
    left: auto!important;
}

.elementskit-navbar-nav-default .elementskit-navbar-nav.elementskit-menu-po-center {
    padding-left: 30px;
  padding-top: 80px;
  padding-right: 30px;
}
  .elementskit-navbar-nav-default .elementskit-dropdown-has > a .elementskit-submenu-indicator {
    position: absolute;
    right: 10px;
}
  .elementskit-navbar-nav > li > a {
    color: #030217;
    padding: 20px 0px 20px 0px;
    border-bottom: 1px solid #f5f5f5;
  }
  
  .elementskit-navbar-nav-default .elementskit-megamenu-has.elementskit-mobile-builder-content .elementskit-megamenu-panel.elementskit-dropdown-open {
    margin-top: -2px;
}
  
  .letstalk a span {
  border-bottom:0px!important;
  }

.megmenu .elementor-icon-box-content {
    display: inline-block;
}

.megmenu .elementor-icon-box-icon {
    display: inline-block;
    margin-bottom: 24px!important;
    vertical-align: ;
}

 .megmenu .elementor-icon {
     font-size: 24px!important;
     vertical-align: middle;
         margin-right: 14px;
 }

.megmenu .elementor-icon-box-wrapper {
    text-align: left!important;
    }

.megmenu .elementor-icon-box-title a {
    color: #030217!important;
    font-size: 14px!important;
   /* font-weight: bold!important; */
    }

  .tele-login p.elementor-icon-box-description {
    font-size: 22px!important;
}
  .elementskit-navbar-nav-default .elementskit-nav-identity-panel .elementskit-site-title {
    height: 22px;
    width: 60px;
    background: url(https://yodle.nz/wp-content/uploads/yodle-logo-animated-DARK.svg);
    background-position: 0;
    float: left;
    position: absolute;
    left: 27PX;
    top: 27px;
    background-repeat: no-repeat;
    display:none;
}
  
  
  .currentpromo h6:after {
    display: inline-block;
    max-width: 80px;
    border-left: 2px solid #3ac1b6;
    margin-left: 6px;
    border-top: none;
    transform: none;
}
  .menu-login-newcustomer, .menu-login-sep {
  display:none!important;
  }

  .elementor-13 .elementor-element.elementor-element-aa788e7 {
    width: 10%!important;
}
  
  li.loginmenu {
    margin-top: 24px;
}
  
}





.elementskit-menu-hamburger .elementskit-menu-hamburger-icon, .elementskit-menu-close .elementskit-menu-hamburger-icon {
    height: 2px!important;
    margin-bottom: 5.6px!important;
}

button.elementskit-menu-hamburger.elementskit-menu-toggler .elementskit-menu-hamburger-icon:nth-child(1) {
    margin-left: 5px;
}

button.elementskit-menu-hamburger.elementskit-menu-toggler .elementskit-menu-hamburger-icon:nth-child(3) {
    margin-left: 5px;
}


button.elementskit-menu-hamburger.elementskit-menu-toggler:hover .elementskit-menu-hamburger-icon:nth-child(1) {
    margin-left: 0px;
}

button.elementskit-menu-hamburger.elementskit-menu-toggler:hover .elementskit-menu-hamburger-icon:nth-child(3) {
    margin-left: 0px;
}

.elementor-13 .elementskit-menu-close:before {
    content: "\e940";
    font-size: 16px;
    font-family: Yodle-Bold;
}
 .elementor-13  .elementskit-menu-close, .elementor-13  .elementskit-menu-close:hover {
    position: fixed;
    top: 10px;
    width: 100%!important;
    text-align: left;
    padding-left: 24px!important;
    padding-top: 24px!important;
    padding-bottom: 24px!important;
    background: #fff!important;
    color: #030217!important;
    z-index: 999;
   border-bottom: 1px solid #f5f5f5!important;
}


.elementor-13 .elementskit-menu-hamburger {
    margin-top: -2px;
}

.elementskit-navbar-nav-default.elementskit_line_arrow .elementskit-submenu-indicator {
    border-width: 0 2px 2px 0!important;
}

i {
    font-style: normal!important;
}

i.elementskit-submenu-indicator:before {
    content: "\e91a";
    font-family: Yodle-Bold;
    transform: none!important;
    font-style: normal!important;
    font-size: 70%;
}


.elementskit-navbar-nav-default.elementskit_line_arrow .elementskit-submenu-indicator {
   /* height: auto!important;
    width: 0!important;*/
    border-style: none!important;
    border-width: 0!important;
    -ms-transform: none!important;
    transform: none!important;
}