/* Nav Styles */

/* ///////////////////// */

/* -------------- */
/* DESKTOP */
/* TABLET */
/* MOBILE */
/* MINI-MOBILE */
/* -------------- */

/* DESKTOP //////////////////////////////////////////////////////////////// */
/*
01. Navigation
*/

/*
-----------------------------------------------------------------------------

01. Navigation

-----------------------------------------------------------------------------
*/

/***** Display */

.nav__desktop {
  display: block;
}

.nav__mobile {
  display: none;
}

/***** Nav-Wrap */

.nav__desktop .nav-wrap {
  width: 100%;
  height: var(--nav_height);
  position: fixed;
  top: 0;
  z-index: 100;
  overflow: visible;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 9px -1px rgba(0, 0, 0, 0);
  transition: all 0.4s ease-out 0s;
}

.home .nav__desktop .nav-wrap {
  background: rgba(255, 255, 255, 0);
}

.home .nav__desktop .nav-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav_height);
  background: rgba(255, 255, 255, 1);
  transform: translateY(-100%);
  transition: all 0.4s cubic-bezier(0.77, 0, 0.18, 1);
}

.nav__desktop .nav-wrap__inner {
  max-width: var(--max_nav_width);
  margin: auto;
  height: 100%;
  width: 100%;
  padding-left: 4em;
  padding-right: 4em;
}

.nav__desktop .nav-wrap__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--color_white);
}

/***** Nav-Styling */

.nav__desktop ul {
  padding-left: 0;
  margin: 0;
  list-style-type: none;
}

.nav__desktop ul.nav-list {
  display: flex;
  padding: 0;
  margin: 1.2em 0;
  overflow: hidden;
}

.nav__desktop ul.nav-list li {
  font-size: var(--fsize_nav);
  font-weight: 700;
  display: inline-block;
  text-transform: uppercase;
}

.nav__desktop ul.nav-list.left li {
  margin-right: 1.5em;
}

.nav__desktop ul.nav-list.left li:first-of-type {
  margin-left: -0.5em;
  /* optical padding correction */
}

.nav__desktop ul.nav-list.right li {
  display: flex;
  align-items: center;
  margin-left: 1.5em;
}

.nav__desktop a.nav-link {
  display: inline-block;
  padding: 0.5em;
  color: var(--color_blue);
  text-decoration: none;
}

/* nav hover state underline */
.nav__desktop .left-box,
.nav__desktop .right-box {
  position: relative;
}

.underline {
  position: absolute;
  bottom: 1.5em;
  height: 0;
  width: 0;
  /* handled with JS */
  transform: translateX(0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  opacity: 1;
}

.underline.ready {
  transition: transform 0.2s cubic-bezier(0.77, 0, 0.18, 1),
    width 0.2s cubic-bezier(0.77, 0, 0.18, 1);
}

.underline::after {
  content: "";
  position: absolute;
  border-bottom: var(--brandBorder);
  height: 0;
  width: 0%;
  transform: translateX(-50%);
  transition: width 0.2s cubic-bezier(0.77, 0, 0.18, 1);
}

.underline.ready::after {
  width: max(50%, 2.9rem);
}

.underline.stretch::after {
  content: "";
  position: absolute;
  border-bottom: var(--brandBorder);
  height: 0;
  width: max(70%, 2.9rem);
  transform: translateX(-50%);
}

/* contact link */
.nav__desktop a.nav-link.contact-link {
  position: relative;
  padding: 0.5em 0.8125em;
  border: var(--brandBorder);
  z-index: 1;
  transition: all 0.2s ease;
  overflow: hidden;
}

.nav__desktop a.nav-link.contact-link::after {
  content: "";
  position: absolute;
  width: 101%;
  height: 101%;
  /* 101 for optical correction */
  top: 0;
  left: 0;
  background: var(--color_blue);
  transform: translateY(100%);
  z-index: -1;
  transition: all 0.2s cubic-bezier(0.77, 0, 0.18, 1);
}

.nav__desktop a.nav-link.contact-link:hover::after {
  transform: translateY(0%);
}

.nav__desktop a.nav-link.contact-link:hover {
  color: var(--color_white);
}

/* Brand */

.nav__desktop .flex-wrap {
  position: relative;
}

.nav__desktop .brand-wrap .svg-wrap {
  height: 100%;
  padding-top: 1.4rem;
  padding-bottom: 0.3rem;
}

.nav__desktop .nav-wrap .brand-wrap .svg-wrap svg.canonica-lotti-logo .company-group {
  transform: translateY(0em);
  transition: transform 0.3s cubic-bezier(0.77, 0, 0.18, 1);
}

.nav__desktop .brand-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
}

/***** Home hero Scene overrides */

.home .nav__desktop .nav-wrap:not(.scrolled) ul.nav-list.right a.nav-link {
  color: var(--color_white);
}

.home .nav__desktop .nav-wrap:not(.scrolled) ul.nav-list.right .underline::after {
  border-color: var(--color_white);
}

.home .nav__desktop .nav-wrap:not(.scrolled) ul.nav-list.right a.nav-link.contact-link {
  border-color: var(--color_white);
}

/***** Scrolled-Nav */

.breadcrumb .current-page {
  color: var(--color_red);
}

.nav__desktop .nav-wrap.scrolled {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 9px -1px rgba(0, 0, 0, 0.1);
}

.home .nav__desktop .nav-wrap.scrolled {
  background: rgba(255, 255, 255, 0);
  transition: all 0.4s ease-out 0.35s;
}

.home .nav__desktop .nav-wrap.scrolled::before {
  transform: translateY(0%);
}

/**/

.nav__desktop .nav-wrap.scrolled .brand-wrap .svg-wrap svg.canonica-lotti-logo .company-group {
  transform: translateY(-6rem);
}

/***** Breadcrumb */

.breadcrumb .current-page {
  color: var(--color_red);
}

/* MINI-DESKTOP //////////////////////////////////////////////////////////////// */
/*
01. Navigation
*/


/* SPECIAL BREAKPOINT */
@media only screen and (max-width: 107em) {

  :root {
    /* Layout */
    --nav_height: 6rem;
  }

  /*
  -----------------------------------------------------------------------------

  01. Navigation

  -----------------------------------------------------------------------------
  */

  /***** Display */

  .nav__desktop {
    display: none;
  }

  .nav__mobile {
    display: block;
  }

  .nav__mobile .nav-wrap__inner {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
  }

  body.mobile-nav-open .nav__mobile .nav-wrap__inner {
    /* nav open */
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
    pointer-events: auto;
  }

  /***** Nav-Wrap */

  .nav__mobile .nav-wrap {
    z-index: 100;
    position: fixed;
    top: 0;
    border-bottom: 0;
    width: 100%;
    height: var(--nav_height);

    background: transparent;
    transition: all 0.4s ease-out 0s;
  }

  .nav__mobile ul.nav-list {
    position: relative;
    display: block;
    margin-top: 23vh;
    margin-bottom: 5rem;
    padding-left: calc(var(--x_padding) - 1rem);
    padding-right: calc(var(--x_padding) - 1rem);
    list-style-type: none;
    z-index: 110;
  }

  .nav__mobile .curtain {
    position: fixed;
    overflow: visible;
    width: 100%;
    left: 0;
    top: 0;
    height: 100vh;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 9px -1px rgba(0, 0, 0, 0);
    transform: translateY(calc(-100vh + var(--nav_height)));
    transition: all 0.4s cubic-bezier(0.77, 0, 0.18, 1);
  }

  body.mobile-nav-open .nav__mobile .curtain {
    /* Nav Open */
    transform: translateY(0vh);
    box-shadow: 0px 1px 9px -1px rgba(0, 0, 0, 0.1);
  }

  .nav__mobile ul.nav-list li {
    margin: 0.2em 0;
    display: block;
    text-align: center;
    width: 100%;
    color: var(--color_blue);
    font-size: var(--fsize_h3);
    line-height: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0;
    transition: all 0.2s ease-out 0.1s;
    /* on close */
    transform: translateY(-2rem);
  }

  body.mobile-nav-open .nav__mobile ul.nav-list li {
    /* Nav Open */
    opacity: 1;
    transform: translateY(0rem);
    transition: all 0.4s ease-out;
    /* on open */
  }

  body.mobile-nav-open .nav__mobile ul.nav-list li:nth-of-type(1) {
    transition-delay: 0.15s;
  }

  body.mobile-nav-open .nav__mobile ul.nav-list li:nth-of-type(2) {
    transition-delay: 0.2s;
  }

  body.mobile-nav-open .nav__mobile ul.nav-list li:nth-of-type(3) {
    transition-delay: 0.25s;
  }

  body.mobile-nav-open .nav__mobile ul.nav-list li:nth-of-type(4) {
    transition-delay: 0.3s;
  }

  body.mobile-nav-open .nav__mobile ul.nav-list li:nth-of-type(5) {
    transition-delay: 0.35s;
  }

  body.mobile-nav-open .nav__mobile ul.nav-list li:nth-of-type(6) {
    transition-delay: 0.4s;
  }

  body.mobile-nav-open .nav__mobile ul.nav-list li:nth-of-type(7) {
    transition-delay: 0.45s;
  }

  .nav__mobile ul.nav-list li a.nav-link {
    position: relative;
    display: inline-block;
    padding: 1rem;
  }

  /* Current link */

  .nav__mobile ul.nav-list a.nav-link.actual-site::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0.2em;
    border-bottom: 3px solid var(--color_blue);
    height: 0px;
    width: 2em;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Brand */

  .nav__mobile .brand-wrap {
    position: absolute;
    top: 0;
    left: var(--x_padding);
    height: 100%;
    z-index: 100;
  }

  .nav__mobile .brand-wrap .svg-wrap {
    height: 100%;
    padding-top: 1.2rem;
    padding-bottom: 0.3rem;
  }

  .nav__mobile .nav-wrap .brand-wrap .svg-wrap svg.canonica-lotti-logo .company-group {
    transform: translateY(0em);
    transition: transform 0.3s cubic-bezier(0.77, 0, 0.18, 1);
  }

  /***** Nav-Wrap Trigger */

  .nav__mobile .nav-trigger {
    display: block;
    right: 0;
    top: 0;
    position: fixed;
    height: var(--nav_height);
    width: 10rem;
    cursor: pointer;
    z-index: 99;
  }

  .nav__mobile .nav-trigger span {
    position: absolute;
    right: var(--x_padding);
    top: calc(var(--nav_height) / 2 - 0.075rem);
    height: 2px;
    width: 3rem;
    background-color: var(--color_blue);
    -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.18, 1);
    animation-timing-function: cubic-bezier(0.77, 0, 0.18, 1);
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .nav__mobile .nav-trigger span:nth-of-type(1) {
    -webkit-animation-name: closeTrigger1;
    animation-name: closeTrigger1;
    transform: translateY(calc(-1 * var(--nav_trigger_offset))) rotate(0);
  }

  body.mobile-nav-open .nav__mobile .nav-trigger span:nth-of-type(1) {
    -webkit-animation-name: openTrigger1;
    animation-name: openTrigger1;
  }

  .nav__mobile .nav-trigger span:nth-of-type(2) {
    -webkit-animation-name: closeTrigger2;
    animation-name: closeTrigger2;
    transform: translateY(var(--nav_trigger_offset)) rotate(0);
  }

  body.mobile-nav-open .nav__mobile .nav-trigger span:nth-of-type(2) {
    -webkit-animation-name: openTrigger2;
    animation-name: openTrigger2;
  }

  body.mobile-nav-frozen .nav__mobile .nav-trigger span:nth-of-type(1),
  body.mobile-nav-frozen .nav__mobile .nav-trigger span:nth-of-type(2) {
    /* prevent nav trigger on load */
    -webkit-animation-name: none;
    animation-name: none;
  }

  @-webkit-keyframes openTrigger1 {
    0% {
      transform: translateY(calc(-1 * var(--nav_trigger_offset))) rotate(0);
    }

    45% {
      transform: translateY(0) rotate(0);
    }

    100% {
      transform: translateY(0) rotate(-45deg);
    }
  }

  @keyframes openTrigger1 {
    0% {
      transform: translateY(calc(-1 * var(--nav_trigger_offset))) rotate(0);
    }

    45% {
      transform: translateY(0) rotate(0);
    }

    100% {
      transform: translateY(0) rotate(-45deg);
    }
  }

  @-webkit-keyframes openTrigger2 {
    0% {
      transform: translateY(var(--nav_trigger_offset)) rotate(0);
    }

    45% {
      transform: translateY(0) rotate(0);
    }

    100% {
      transform: translateY(0) rotate(45deg);
    }
  }

  @keyframes openTrigger2 {
    0% {
      transform: translateY(var(--nav_trigger_offset)) rotate(0);
    }

    45% {
      transform: translateY(0) rotate(0);
    }

    100% {
      transform: translateY(0) rotate(45deg);
    }
  }

  @-webkit-keyframes closeTrigger1 {
    0% {
      transform: translateY(0) rotate(-45deg);
    }

    45% {
      transform: translateY(0) rotate(0);
    }

    100% {
      transform: translateY(calc(-1 * var(--nav_trigger_offset))) rotate(0);
    }
  }

  @keyframes closeTrigger1 {
    0% {
      transform: translateY(0) rotate(-45deg);
    }

    45% {
      transform: translateY(0) rotate(0);
    }

    100% {
      transform: translateY(calc(-1 * var(--nav_trigger_offset))) rotate(0);
    }
  }

  @-webkit-keyframes closeTrigger2 {
    0% {
      transform: translateY(0) rotate(45deg);
    }

    45% {
      transform: translateY(0) rotate(0);
    }

    100% {
      transform: translateY(var(--nav_trigger_offset)) rotate(0);
    }
  }

  @keyframes closeTrigger2 {
    0% {
      transform: translateY(0) rotate(45deg);
    }

    45% {
      transform: translateY(0) rotate(0);
    }

    100% {
      transform: translateY(var(--nav_trigger_offset)) rotate(0);
    }
  }

  /***** Home hero Scene overrides */
  .home .nav__mobile .nav-trigger span {
    transition: all 0.2s ease-out 0s;
    background-color: var(--color_white);
  }

  .home .nav__mobile .curtain {
    transform: translateY(-100vh);
  }

  /* Scrolled nav */
  .nav__mobile .nav-wrap.scrolled .curtain {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 9px -1px rgba(0, 0, 0, 0.1);
  }

  body.mobile-nav-open.home .nav__mobile .nav-wrap .nav-trigger span,
  .home .nav__mobile .nav-wrap.scrolled .nav-trigger span {
    background-color: var(--color_blue);
  }

  .home:not(.mobile-nav-open) .nav__mobile .nav-wrap.scrolled .curtain {
    transform: translateY(calc(-100vh + var(--nav_height)));
  }

  /**/

  .nav__mobile .nav-wrap.scrolled .brand-wrap .svg-wrap svg.canonica-lotti-logo .company-group {
    transform: translateY(-5rem);
  }
}

/* TABLET //////////////////////////////////////////////////////////////// */
/*
01. Navigation
*/

@media only screen and (max-width: 55em) {}

/* MOBILE //////////////////////////////////////////////////////////////// */
/*
01. Navigation
*/

@media only screen and (max-width: 36em) {

  :root {
    /* Layout */
    --nav_height: 4.2rem;
    --nav_trigger_offset: 0.3rem;
  }

  /*
  -----------------------------------------------------------------------------

  01. Navigation

  -----------------------------------------------------------------------------
  */

  /* Brand */
  .nav__mobile .brand-wrap .svg-wrap {
    padding-top: 0.85rem;
    padding-bottom: 0.2rem;
  }

  /***** Nav-Wrap Trigger */

  .nav__mobile .nav-trigger {
    width: 6rem;
  }

  .nav__mobile .nav-trigger span {
    width: 2rem;
  }
}

/* MINI-MOBILE //////////////////////////////////////////////////////////////// */
/*
01. Navigation
*/

@media only screen and (max-width: 27em) {
  /*
  -----------------------------------------------------------------------------

  01. Navigation

  -----------------------------------------------------------------------------
  */
}


/* SPECIAL BREAKPOINT //////////////////////////////////////////////////////////////// */
@media only screen and (min-width: 55em) and (max-height: 40em) {

  /* limit font size for lmiited height windows to make sure nav fits on screen */
  .nav__mobile ul.nav-list li {
    font-size: var(--fsize_p);
  }

}