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

Primary style

-------------------------------- */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  background-color: #485274; }

a {
  text-decoration: none; }

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

Main Components 

-------------------------------- */
.cd-header {
  height: 80px;
  width: 90%;
  margin: 0 auto;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  /* Force Hardware Acceleration in WebKit */
  -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-header:after {
    content: "";
    display: table;
    clear: both; }
  .cd-header.nav-is-visible {
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -ms-transform: translateY(80px);
    -o-transform: translateY(80px);
    transform: translateY(80px); }
  @media only screen and (min-width: 768px) {
    .cd-header.nav-is-visible {
      -webkit-transform: translateY(170px);
      -moz-transform: translateY(170px);
      -ms-transform: translateY(170px);
      -o-transform: translateY(170px);
      transform: translateY(170px); } }

.cd-logo {
  float: left;
  margin-top: 28px; }

.cd-3d-nav-trigger {
  position: relative;
  float: right;
  height: 45px;
  width: 45px;
  margin-top: 18px;
  /* replace text with background image */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent; }
  .cd-3d-nav-trigger span,
  .cd-3d-nav-trigger span::before,
  .cd-3d-nav-trigger span::after {
    /* hamburger icon in CSS */
    position: absolute;
    width: 28px;
    height: 3px;
    background-color: #FFF;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }
  .cd-3d-nav-trigger span {
    /* this is the central line */
    top: 21px;
    left: 8px;
    -webkit-transition: background 0.2s 0.5s;
    -moz-transition: background 0.2s 0.5s;
    transition: background 0.2s 0.5s; }
    .cd-3d-nav-trigger span::before, .cd-3d-nav-trigger span:after {
      /* these are the upper and lower lines */
      content: '';
      left: 0;
      -webkit-transition: -webkit-transform 0.2s 0.5s;
      -moz-transition: -moz-transform 0.2s 0.5s;
      transition: transform 0.2s 0.5s; }
    .cd-3d-nav-trigger span::before {
      bottom: 8px; }
    .cd-3d-nav-trigger span::after {
      top: 8px; }
  .nav-is-visible .cd-3d-nav-trigger span {
    /* hide line in the center */
    background-color: rgba(255, 255, 255, 0); }
    .nav-is-visible .cd-3d-nav-trigger span::before, .nav-is-visible .cd-3d-nav-trigger span::after {
      /* keep visible other 2 lines */
      background-color: white; }
    .nav-is-visible .cd-3d-nav-trigger span::before {
      -webkit-transform: translateY(8px) rotate(-45deg);
      -moz-transform: translateY(8px) rotate(-45deg);
      -ms-transform: translateY(8px) rotate(-45deg);
      -o-transform: translateY(8px) rotate(-45deg);
      transform: translateY(8px) rotate(-45deg); }
    .nav-is-visible .cd-3d-nav-trigger span::after {
      -webkit-transform: translateY(-8px) rotate(45deg);
      -moz-transform: translateY(-8px) rotate(45deg);
      -ms-transform: translateY(-8px) rotate(45deg);
      -o-transform: translateY(-8px) rotate(45deg);
      transform: translateY(-8px) rotate(45deg); }

.cd-3d-nav-container {
  /* this is the 3D navigation container */
  position: fixed;
  top: 0;
  left: 0;
  height: 80px;
  width: 100%;
  background-color: #000000;
  visibility: hidden;
  /* enable a 3D-space for children elements */
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s;
  -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s;
  transition: transform 0.5s 0s, visibility 0s 0.5s; }
  .cd-3d-nav-container.nav-is-visible {
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.5s 0s, visibility 0.5s 0s;
    -moz-transition: -moz-transform 0.5s 0s, visibility 0.5s 0s;
    transition: transform 0.5s 0s, visibility 0.5s 0s; }
  @media only screen and (min-width: 768px) {
    .cd-3d-nav-container {
      height: 170px; } }

.cd-3d-nav {
  /* this is the 3D rotating navigation */
  position: relative;
  height: 100%;
  background-color: #343c55;
  /* 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-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s; }
  .cd-3d-nav::after {
    /* menu dark cover layer - to enhance perspective effect */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000000;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s 0s, visibility 0.5s 0s;
    -moz-transition: opacity 0.5s 0s, visibility 0.5s 0s;
    transition: opacity 0.5s 0s, visibility 0.5s 0s; }
  .cd-3d-nav li {
    height: 100%;
    width: 20%;
    float: left; }
    .cd-3d-nav li:first-of-type a::before {
      background-image: url(../img/icon-1.svg); }
    .cd-3d-nav li:nth-of-type(2) a::before {
      background-image: url(../img/icon-2.svg); }
    .cd-3d-nav li:nth-of-type(3) a::before {
      background-image: url(../img/icon-3.svg); }
    .cd-3d-nav li:nth-of-type(4) a::before {
      background-image: url(../img/icon-4.svg); }
    .cd-3d-nav li:nth-of-type(5) a::before {
      background-image: url(../img/icon-5.svg); }
  .cd-3d-nav a {
    position: relative;
    display: block;
    height: 100%;
    color: transparent;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    transition: background-color 0.2s; }
    .cd-3d-nav a::before {
      /* navigation icons */
      content: '';
      height: 32px;
      width: 32px;
      position: absolute;
      left: 50%;
      top: 50%;
      bottom: auto;
      right: auto;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      background-size: 32px 64px;
      background-repeat: no-repeat;
      background-position: 0 0; }
    .no-touch .cd-3d-nav a:hover {
      background-color: #2b3145; }
  .cd-3d-nav .cd-selected a {
    background-color: #212635; }
    .no-touch .cd-3d-nav .cd-selected a:hover {
      background-color: #212635; }
    .cd-3d-nav .cd-selected a::before {
      background-position: 0 -32px; }
  .nav-is-visible .cd-3d-nav {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); }
    .nav-is-visible .cd-3d-nav::after {
      /* menu cover layer - hide it when navigation is visible */
      opacity: 0;
      visibility: hidden;
      -webkit-transition: opacity 0.5s 0s, visibility 0s 0.5s;
      -moz-transition: opacity 0.5s 0s, visibility 0s 0.5s;
      transition: opacity 0.5s 0s, visibility 0s 0.5s; }
  @media only screen and (min-width: 768px) {
    .cd-3d-nav a {
      padding: 7.6em 1em 0;
      color: #ffffff;
      font-size: 1.3rem;
      font-weight: 600;
      text-align: center;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      /* truncate text with ellipsis if too long */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .cd-3d-nav a::before {
        top: 4.4em;
        left: 50%;
        right: auto;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); } }

.cd-marker {
  /* line at the bottom of nav selected item */
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 20%;
  background-color: currentColor;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: translateZ(0) rotateX(90deg);
  -moz-transform: translateZ(0) rotateX(90deg);
  -ms-transform: translateZ(0) rotateX(90deg);
  -o-transform: translateZ(0) rotateX(90deg);
  transform: translateZ(0) rotateX(90deg);
  -webkit-transition: -webkit-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s;
  -moz-transition: -moz-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s;
  transition: transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; }
  .cd-marker::before {
    /* triangle at the bottom of nav selected item */
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 0;
    width: 0;
    border: 10px solid transparent;
    border-bottom-color: inherit; }
  .nav-is-visible .cd-marker {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); }

/* these are the colors of the markers - line + arrow */
.color-1 {
  color: #9a57bd; }

.color-2 {
  color: #c96aa4; }

.color-3 {
  color: #d6915e; }

.color-4 {
  color: #5397c7; }

.color-5 {
  color: #77cd91; }

main {
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  /* Force Hardware Acceleration in WebKit */
  -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; }
  main h1 {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 300;
    color: #ffffff;
    margin: 2em auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  main.nav-is-visible {
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -ms-transform: translateY(80px);
    -o-transform: translateY(80px);
    transform: translateY(80px); }
  @media only screen and (min-width: 768px) {
    main.nav-is-visible {
      -webkit-transform: translateY(170px);
      -moz-transform: translateY(170px);
      -ms-transform: translateY(170px);
      -o-transform: translateY(170px);
      transform: translateY(170px); }
    main h1 {
      font-size: 3.6rem;
      margin: 4em auto; } }