/**
 * @file : 
 * Mini-site navigation styles.
 */
.kw-main-menu {
  height:calc(100vh - 66px);
  width:100%;
  position: fixed;
  top:120%;
  left:0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  z-index:3;
  transition: all .5s cubic-bezier(.19,1,.22,1);
  overflow: hidden;
}
.kw-home.menu-active .kw-main-wrapper {
  top:-100%;
}
.menu-active .kw-main-menu {
  top:66px;
}
.kw-main-menu__content {
  width:100%;
}
.kw-main-menu__item {
  width:100%;
  height:20%;
  position: relative;
}
.kw-main-menu__item.item-active {
  height:40%;
}
.kw-main-menu__item::before {
  content:'';
  display: block;
  width: 100%;
  height: 0;
  background-color:rgba(232,94,16,.83);
  position: absolute;
  top:0;
  left:0;
  transition: all .6s cubic-bezier(.19,1,.22,1);
}
.kw-main-menu__item.item-active::before {
  height:100%;
}
.kw-main-menu__link {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
}
.kw-main-menu__content--centered {
  left:50%;
  top:50%;
  position:absolute;
  transform: translate(-50%, -50%);
  text-align: center;
}
.kw-main-menu__subtitle {
  color:#fff;
  text-transform: uppercase;
  font-size:0.75em;
  letter-spacing:0.1em;
  width:100%;
}
.kw-main-menu__title {
  color:#fff;
  width:100%;
  text-transform: uppercase;
  font-size:2.25em;
  font-family: "FuturaMedium", Arial, Helvetica, sans-serif;
}
.kw-main-menu__cta-wrapper {
  margin-top:2.5em;
  display: none;
}
.kw-main-menu__item.item-active .kw-main-menu__cta-wrapper {
  display: block;
}
@media screen and (min-width:1000px) {
  .kw-main-menu {
    flex-direction: row;
  }
  .kw-main-menu__item, .kw-main-menu__item.item-active {
    width:25%;
    height:100%;
  }
  .kw-main-menu__item.item-active::before {
    height:0;
  }
  .kw-main-menu__item:hover::before {
    height:100%;
  }
  .kw-main-menu__subtitle {
    font-size:0.875em;
    letter-spacing: 0.2em;
  }
  .kw-main-menu__title {
    font-size:2.6em;
  }
  .kw-main-menu__cta-wrapper {
    display: block;
  }
  .kw-main-menu__stroke {
    position: absolute;
    top:50%;
    width:53px;
    height:28px;
    background-image:url('../images/home/stroke-small-home.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index:20;
  }
  .kw-main-menu__stroke-before {
    left:0;
    transform:translate(-50%,-50%);
  }
  .kw-main-menu__stroke-after {
    right:0;
    transform:translate(50%,-50%);
  }
  .kw-main-menu__stroke-reverse {
    background-image:url('../images/home/stroke-small-reverse-home.svg');
  }
}
@media screen and (max-height:450px) {
  .kw-main-menu__cta-wrapper {
    margin-top: 0.25em;
  }
}
/**
 * Menu backgrounds
 */
.kw-bg-menu {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.kw-bg-menu--sun {
  background-image: url("../images/global/mobile-menu-background-sun.jpg");
}
.kw-bg-menu--adults {
  background-image: url("../images/global/mobile-menu-background-adults.jpg");
}
.kw-bg-menu--kids {
  background-image: url("../images/global/mobile-menu-background-kids.jpg");
}
.kw-bg-menu--oceans {
  background-image: url("../images/global/mobile-menu-background-oceans.jpg");
}
@media screen and (min-width:1000px) {
  .kw-bg-menu--sun {
    background-image: url("../images/global/menu-background-sun.jpg");
  }
  .kw-bg-menu--adults {
    background-image: url("../images/global/menu-background-adults.jpg");
  }
  .kw-bg-menu--kids {
    background-image: url("../images/global/menu-background-kids.jpg");
  }
  .kw-bg-menu--oceans {
    background-image: url("../images/global/menu-background-oceans.jpg");
  }
}

/**
 * Menu toggler
 */
.kw-menu-toggle {
  position: absolute;
  z-index: 20;
  top: 1rem;
  left: 1rem;
  width: 110px !important;
  padding-left: 40px;
  font-size: .75em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  -webkit-transition: all ease .25s;
  -o-transition: all ease .25s;
  transition: all ease .25s;
}
.menu-active .kw-menu-toggle {
  left: .5rem;
}
.menu-active .kw-menu-toggle span {
  opacity: 0;
}
.kw-menu-toggle::before,
.kw-menu-toggle::after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  -webkit-transition: background-color ease .25s, transform ease .25s;
  -o-transition: background-color ease .25s, transform ease .25s;
  transition: background-color ease .25s, transform ease .25s;
}
.kw-menu-toggle::before {
  left: 0;
  top: -17px;
  height: 32px;
  width: 32px;
  margin: .5rem auto .3rem;
  border: 2px solid #fff;
}
.kw-menu-toggle::after {
  top: -2px;
  left: 8px;
  height: 21px;
  width: 21px;
  background-image: url("../images/global/action-icon--sun.svg");
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 40px; 
  border-radius: 0;
}
.kw-menu-toggle:hover::before {
  background-color: #fff;
}
.kw-menu-toggle:hover::after {
  background-position: -20px center;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.kw-popin-active .kw-menu-toggle {
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
@media all and (min-width: 750px) {
  .kw-menu-toggle {
    position: fixed;
    top: 13.5rem;
    left: 1.5rem;
    padding-left: 50px;
    text-shadow: 0 0 5px #000;
    -webkit-transition: all ease .25s;
    -o-transition: all ease .25s;
    transition: all ease .25s;
  }
  .kw-js-scrolled .kw-menu-toggle {
    top: 6rem;
  }
  .kw-menu-toggle::before {
    top: -21px;
    width: 40px;
    height: 40px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  }
  .kw-menu-toggle::after {
    top: -5px;
    width: 28px;
    height: 28px;
    background-size: 55px;
  }
  .kw-menu-toggle:hover::after,
  .kw-menu-toggle--reverse::after {
    background-position: -27px center;
  }
}