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







Primary style







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



*, *::after, *::before {



  -webkit-box-sizing: border-box;



  -moz-box-sizing: border-box;



  box-sizing: border-box;



}































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







Main Components 







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



header {



  position: fixed;



  z-index: 3;



  height: 50px;



  width: 100%;



  top: 0;



  left: 0;



  /*background-color: #33414a;*/



  -webkit-font-smoothing: antialiased;



  -moz-osx-font-smoothing: grayscale;



  /* Force Hardware Acceleration */



  -webkit-transform: translateZ(0);



  -moz-transform: translateZ(0);



  -ms-transform: translateZ(0);



  -o-transform: translateZ(0);



  transform: translateZ(0);



  -webkit-backface-visibility: hidden;



  backface-visibility: hidden;



  -webkit-transition: -webkit-transform 0.3s;



  -moz-transition: -moz-transform 0.3s;



  transition: transform 0.3s;

  display: none;



}



header.nav-is-visible {



  -webkit-transform: translateX(-260px);



  -moz-transform: translateX(-260px);



  -ms-transform: translateX(-260px);



  -o-transform: translateX(-260px);



  transform: translateX(-260px);



}



header::before {



  /* never visible - this is used in jQuery to check the current MQ */



  display: none;



  content: 'mobile';



}



@media only screen and (min-width: 1024px) {



  header {



    height: 80px;



  }



  header.nav-is-visible {



    -webkit-transform: translateX(0);



    -moz-transform: translateX(0);



    -ms-transform: translateX(0);



    -o-transform: translateX(0);



    transform: translateX(0);



  }



  header::before {



    content: 'desktop';



  }



}







.cd-logo {



  display: inline-block;



  height: 100%;



  margin-left: 15px;



  /* remove jump on iOS devices - when we fire the navigation */



  -webkit-transform: translateZ(0);



  -moz-transform: translateZ(0);



  -ms-transform: translateZ(0);



  -o-transform: translateZ(0);



  transform: translateZ(0);



  -webkit-backface-visibility: hidden;



  backface-visibility: hidden;



}



.cd-logo img {



  display: block;



  max-width: 100%;



  margin-top: 14px;



}



@media only screen and (min-width: 1024px) {



  .cd-logo {



    position: absolute;



    z-index: 2;



    margin-left: 5%;



  }



  .cd-logo img {



    margin-top: 29px;



  }



}







.cd-nav-trigger {



  display: block;



  position: absolute;



  right: 0;



  top: 0;



  height: 100%;



  width: 50px;



  /* hide text */



  overflow: hidden;



  white-space: nowrap;



  color: transparent;



}



.cd-nav-trigger span {



  /* hamburger icon created in CSS */



  position: absolute;



  height: 2px;



  width: 20px;



  top: 50%;



  margin-top: -1px;



  left: 50%;



  margin-left: -10px;



  -webkit-transition: background-color 0.3s 0.3s;



  -moz-transition: background-color 0.3s 0.3s;



  transition: background-color 0.3s 0.3s;



  background-color: #ffffff;



}



.cd-nav-trigger span::before, .cd-nav-trigger span::after {



  /* upper and lower lines of the menu icon */



  content: '';



  position: absolute;



  width: 100%;



  height: 100%;



  background-color: #ffffff;



  /* Force Hardware Acceleration */



  -webkit-transform: translateZ(0);



  -moz-transform: translateZ(0);



  -ms-transform: translateZ(0);



  -o-transform: translateZ(0);



  transform: translateZ(0);



  -webkit-backface-visibility: hidden;



  backface-visibility: hidden;



  -webkit-transition: -webkit-transform 0.3s 0.3s;



  -moz-transition: -moz-transform 0.3s 0.3s;



  transition: transform 0.3s 0.3s;



}



.cd-nav-trigger span::before {



  -webkit-transform: translateY(-6px);



  -moz-transform: translateY(-6px);



  -ms-transform: translateY(-6px);



  -o-transform: translateY(-6px);



  transform: translateY(-6px);



}



.cd-nav-trigger span::after {



  -webkit-transform: translateY(6px);



  -moz-transform: translateY(6px);



  -ms-transform: translateY(6px);



  -o-transform: translateY(6px);



  transform: translateY(6px);



}



.nav-is-visible .cd-nav-trigger span {



  background-color: rgba(255, 255, 255, 0);



}



.nav-is-visible .cd-nav-trigger span::before {



  -webkit-transform: translateY(0) rotate(-45deg);



  -moz-transform: translateY(0) rotate(-45deg);



  -ms-transform: translateY(0) rotate(-45deg);



  -o-transform: translateY(0) rotate(-45deg);



  transform: translateY(0) rotate(-45deg);



}



.nav-is-visible .cd-nav-trigger span::after {



  -webkit-transform: translateY(0) rotate(45deg);



  -moz-transform: translateY(0) rotate(45deg);



  -ms-transform: translateY(0) rotate(45deg);



  -o-transform: translateY(0) rotate(45deg);



  transform: translateY(0) rotate(45deg);



}



@media only screen and (min-width: 1024px) {



  .cd-nav-trigger {



    display: none;



  }



}







.cd-main-nav {



  position: fixed;



  z-index: 1;



  top: 0;



  right: 0;



  width: 260px;



  height: 100vh;



  overflow: auto;



  -webkit-overflow-scrolling: touch;



  visibility: hidden;



  background: #1e262c;



  -webkit-transition: visibility 0s 0.3s;



  -moz-transition: visibility 0s 0.3s;



  transition: visibility 0s 0.3s;



}



.cd-main-nav a {



  display: block;



  font-size: 1.8rem;



  padding: .9em 2em .9em 1em;



  border-bottom: 1px solid #33414a;



  color: #ffffff;



  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;



  -moz-transition: -moz-transform 0.3s, opacity 0.3s;



  transition: transform 0.3s, opacity 0.3s;



}



.cd-main-nav li ul {



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  -webkit-transition: -webkit-transform 0.3s;



  -moz-transition: -moz-transform 0.3s;



  transition: transform 0.3s;



  -webkit-transform: translateX(260px);



  -moz-transform: translateX(260px);



  -ms-transform: translateX(260px);



  -o-transform: translateX(260px);



  transform: translateX(260px);



}



.cd-main-nav.nav-is-visible {



  visibility: visible;



  -webkit-transition: visibility 0s 0s;



  -moz-transition: visibility 0s 0s;



  transition: visibility 0s 0s;



}



.cd-main-nav.moves-out > li > a {



  /* push the navigation items to the left - and lower down opacity - when secondary nav slides in */



  -webkit-transform: translateX(-100%);



  -moz-transform: translateX(-100%);



  -ms-transform: translateX(-100%);



  -o-transform: translateX(-100%);



  transform: translateX(-100%);



  opacity: 0;



}



.cd-main-nav.moves-out > li > ul {



  -webkit-transform: translateX(0);



  -moz-transform: translateX(0);



  -ms-transform: translateX(0);



  -o-transform: translateX(0);



  transform: translateX(0);



}



.cd-main-nav .cd-subnav-trigger, .cd-main-nav .go-back a {



  position: relative;



}



.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after, .cd-main-nav .go-back a::before, .cd-main-nav .go-back a::after {



  /* arrow icon in CSS */



  content: '';



  position: absolute;



  top: 50%;



  margin-top: -1px;



  display: inline-block;



  height: 2px;



  width: 10px;



  background: #485c68;



  -webkit-backface-visibility: hidden;



  backface-visibility: hidden;



}



.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .go-back a::before {



  -webkit-transform: rotate(45deg);



  -moz-transform: rotate(45deg);



  -ms-transform: rotate(45deg);



  -o-transform: rotate(45deg);



  transform: rotate(45deg);



}



.cd-main-nav .cd-subnav-trigger::after, .cd-main-nav .go-back a::after {



  -webkit-transform: rotate(-45deg);



  -moz-transform: rotate(-45deg);



  -ms-transform: rotate(-45deg);



  -o-transform: rotate(-45deg);



  transform: rotate(-45deg);



}



.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after {



  /* arrow goes on the right side - children navigation */



  right: 20px;



  -webkit-transform-origin: 9px 50%;



  -moz-transform-origin: 9px 50%;



  -ms-transform-origin: 9px 50%;



  -o-transform-origin: 9px 50%;



  transform-origin: 9px 50%;



}



.cd-main-nav .go-back a {



  padding-left: 2em;



}



.cd-main-nav .go-back a::before, .cd-main-nav .go-back a::after {



  /* arrow goes on the left side - go back button */



  left: 20px;



  -webkit-transform-origin: 1px 50%;



  -moz-transform-origin: 1px 50%;



  -ms-transform-origin: 1px 50%;



  -o-transform-origin: 1px 50%;



  transform-origin: 1px 50%;



}



.cd-main-nav .placeholder {



  /* never visible or clickable- it is used to take up the same space as the .cd-subnav-trigger */



  display: none;



}



@media only screen and (min-width: 1024px) {



  .cd-main-nav {



    position: static;



    visibility: visible;



    width: 100%;



    height: 80px;



    line-height: 80px;



    /* padding left = logo size + logo left position*/



    padding: 0 5% 0 calc(5% + 124px);



    background: transparent;



    text-align: right;



  }



  .cd-main-nav li {



    display: inline-block;



    height: 100%;



    padding: 0 .4em;



  }



  .cd-main-nav li a {



    display: inline-block;



    padding: .8em;



    line-height: 1;



    font-size: 1.6rem;



    border-bottom: none;



    /* Prevent .cd-subnav-trigger flicker is Safari */



    -webkit-transform: translateZ(0);



    -moz-transform: translateZ(0);



    -ms-transform: translateZ(0);



    -o-transform: translateZ(0);



    transform: translateZ(0);



    -webkit-backface-visibility: hidden;



    backface-visibility: hidden;



    -webkit-transition: opacity 0.2s;



    -moz-transition: opacity 0.2s;



    transition: opacity 0.2s;



  }



  .cd-main-nav li a:not(.cd-subnav-trigger):hover {



    -webkit-backface-visibility: hidden;



    backface-visibility: hidden;



    opacity: .6;



  }



  .cd-main-nav .go-back {



    display: none;



  }



  .cd-main-nav .cd-subnav-trigger {



    z-index: 1;



    border: 1px solid rgba(255, 255, 255, 0.2);



    border-radius: 5em;



    -webkit-transition: border 0.3s;



    -moz-transition: border 0.3s;



    transition: border 0.3s;



  }



  .cd-main-nav .cd-subnav-trigger:hover {



    border-color: rgba(255, 255, 255, 0.4);



  }



  .cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after {



    top: 22px;



    right: 17px;



    background-color: #ffffff;



    /* change transform-origin to rotate the arrow */



    -webkit-transform-origin: 50% 50%;



    -moz-transform-origin: 50% 50%;



    -ms-transform-origin: 50% 50%;



    -o-transform-origin: 50% 50%;



    transform-origin: 50% 50%;



    -webkit-transition: -webkit-transform 0.3s, width 0.3s, right 0.3s;



    -moz-transition: -moz-transform 0.3s, width 0.3s, right 0.3s;



    transition: transform 0.3s, width 0.3s, right 0.3s;



  }



  .cd-main-nav .cd-subnav-trigger::before {



    right: 23px;



  }



  .cd-main-nav .cd-subnav-trigger, .cd-main-nav .placeholder {



    padding-right: 2.4em;



    padding-left: 1.1em;



  }



  .cd-main-nav li ul {



    height: 80px;



    background-color: #7e4d7e;



    /* padding left = logo size + logo left position*/



    padding: 0 5% 0 calc(5% + 124px);



    -webkit-transform: translateY(-80px);



    -moz-transform: translateY(-80px);



    -ms-transform: translateY(-80px);



    -o-transform: translateY(-80px);



    transform: translateY(-80px);



    -webkit-transition: -webkit-transform 0.3s 0.2s;



    -moz-transition: -moz-transform 0.3s 0.2s;



    transition: transform 0.3s 0.2s;



  }



  .cd-main-nav li ul li {



    opacity: 0;



    -webkit-transform: translateY(-20px);



    -moz-transform: translateY(-20px);



    -ms-transform: translateY(-20px);



    -o-transform: translateY(-20px);



    transform: translateY(-20px);



    -webkit-transition: -webkit-transform 0.3s 0s, opacity 0.3s 0s;



    -moz-transition: -moz-transform 0.3s 0s, opacity 0.3s 0s;



    transition: transform 0.3s 0s, opacity 0.3s 0s;



  }



  .cd-main-nav .placeholder {



    /* never visible or clickable- it is used to take up the same space as the .cd-subnav-trigger */



    display: block;



    visibility: hidden;



    opacity: 0;



    pointer-event: none;



  }



  .cd-main-nav.moves-out > li > a {



    -webkit-transform: translateX(0);



    -moz-transform: translateX(0);



    -ms-transform: translateX(0);



    -o-transform: translateX(0);



    transform: translateX(0);



    opacity: 1;



  }



  .cd-main-nav.moves-out > li > ul {



    -webkit-transition: -webkit-transform 0.3s;



    -moz-transition: -moz-transform 0.3s;



    transition: transform 0.3s;



    -webkit-transform: translateY(0);



    -moz-transform: translateY(0);



    -ms-transform: translateY(0);



    -o-transform: translateY(0);



    transform: translateY(0);



  }



  .cd-main-nav.moves-out > li ul li {



    opacity: 1;



    -webkit-transform: translateY(0);



    -moz-transform: translateY(0);



    -ms-transform: translateY(0);



    -o-transform: translateY(0);



    transform: translateY(0);



    -webkit-transition: -webkit-transform 0.3s 0.2s, opacity 0.3s 0.2s;



    -moz-transition: -moz-transform 0.3s 0.2s, opacity 0.3s 0.2s;



    transition: transform 0.3s 0.2s, opacity 0.3s 0.2s;



  }



  .cd-main-nav.moves-out .cd-subnav-trigger::before, .cd-main-nav.moves-out .cd-subnav-trigger::after {



    width: 14px;



    right: 17px;



  }



  .cd-main-nav.moves-out .cd-subnav-trigger::before {



    -webkit-transform: rotate(225deg);



    -moz-transform: rotate(225deg);



    -ms-transform: rotate(225deg);



    -o-transform: rotate(225deg);



    transform: rotate(225deg);



  }



  .cd-main-nav.moves-out .cd-subnav-trigger::after {



    -webkit-transform: rotate(135deg);



    -moz-transform: rotate(135deg);



    -ms-transform: rotate(135deg);



    -o-transform: rotate(135deg);



    transform: rotate(135deg);



  }



}







.cd-main-content::before {



  /* never visible - this is used in jQuery to check the current MQ */



  display: none;



  content: 'mobile';



}



@media only screen and (min-width: 1024px) {



  .cd-main-content::before {



    content: 'desktop';



  }



}







.cd-main-content {



  position: relative;



  z-index: 2;



  min-height: 100vh;



  padding-top: 50px;



 /* background-color: #f2f2f2;*/



  -webkit-transition: -webkit-transform 0.3s;



  -moz-transition: -moz-transform 0.3s;



  transition: transform 0.3s;



}



.cd-main-content.nav-is-visible {



  -webkit-transform: translateX(-260px);



  -moz-transform: translateX(-260px);



  -ms-transform: translateX(-260px);



  -o-transform: translateX(-260px);



  transform: translateX(-260px);



}



@media only screen and (min-width: 1024px) {



  .cd-main-content {



    padding-top: 80px;

    display: none;



  }



  .cd-main-content.nav-is-visible {



    -webkit-transform: translateX(0);



    -moz-transform: translateX(0);



    -ms-transform: translateX(0);



    -o-transform: translateX(0);



    transform: translateX(0);



  }



}







.no-js .cd-nav-trigger, .no-js .cd-subnav-trigger {



  display: none;



}







.no-js header {



  position: relative;



  height: auto;



}







.no-js .cd-logo img {



  margin-bottom: 14px;



}







.no-js .cd-main-nav {



  position: static;



  width: 100%;



  height: auto;



  visibility: visible;



  overflow: visible;



}



.no-js .cd-main-nav li {



  display: inline-block;



}



.no-js .cd-main-nav li:last-child {



  display: block;



}



.no-js .cd-main-nav .go-back {



  display: none;



}



.no-js .cd-main-nav li ul {



  position: static;



  width: 100%;



  -webkit-transform: translateX(0);



  -moz-transform: translateX(0);



  -ms-transform: translateX(0);



  -o-transform: translateX(0);



  transform: translateX(0);



}



@media only screen and (min-width: 1024px) {



  .no-js .cd-main-nav {



    height: 80px;



  }



  .no-js .cd-main-nav li ul {



    position: absolute;



    top: 80px;



  }



  .no-js .cd-main-nav li ul li {



    -webkit-transform: translateY(0);



    -moz-transform: translateY(0);



    -ms-transform: translateY(0);



    -o-transform: translateY(0);



    transform: translateY(0);



    opacity: 1;



  }



  .no-js .cd-main-nav li ul li:last-child {



    display: none;



  }



}







.no-js .cd-main-content {



  padding-top: 0;



}



@media only screen and (min-width: 1024px) {



  .no-js .cd-main-content {



    padding-top: 80px;



  }



}