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

Primary style

-------------------------------- */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body.overflow-hidden {
  /* when primary navigation is visible, the content in the background won't scroll */
  overflow: hidden;
}

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

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
}
.cd-container:after {
  content: "";
  display: table;
  clear: both;
}

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

Main components

-------------------------------- */
.cd-header {
  position:fixed;
  top: 0;
  left: 0;
  background: transparent;
  height: 50px;
  width: 100%;
  z-index: 10000;
  box-shadow: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.navbar-brand-bg {border-top: 130px solid white /*rgba(255,255,255, .7)*/;border-right: 150px solid transparent;width:140px;padding:0;margin:0;position:fixed;top:0;left:0;}

@media only screen and (min-width: 768px) {
  .cd-header {
    height: 30px;
    background: transparent;
    box-shadow: none;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-header.menu-is-open {
    /* add a background color to the header when the navigation is open */
    background-color: none;
  }
}

.cd-logo {
  display: block;
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: .875em;
}
.cd-logo img {
  display: block;
}
@media only screen and (min-width: 768px) {
  .cd-logo {
    left: 2.6em;
  }
}

.cd-secondary-nav {
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10em;
  /* hidden on small devices */
  display: none;
}
.cd-secondary-nav li {
  display: inline-block;
  margin-left: 2.2em;
}
.cd-secondary-nav a {
  display: inline-block;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .cd-secondary-nav {
    display: block;
  }
}

.cd-primary-nav-trigger {
  position: absolute;
  right: 0;
  top:0;
  height: 100%;
  width: 50px;
  background-color:none;
  margin-top:48px;
}
.cd-primary-nav-trigger .cd-menu-text {
  color: #004b8d;
  text-transform: uppercase;
  font-size:10px;
  margin-left:-5px;
  position:relative;
  top:16px;
  font-weight: 700;
  /* hide the text on small devices */
  display: none;
}
.cd-primary-nav-trigger .cd-menu-icon {
  /* this span is the central line of the menu icon */
  display: inline-block;
  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%);
  width: 21px;
  height: 3px;
  background-color: white;
  border-radius:35px;
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  transition: background-color 0.3s;box-shadow:0 0 3px #666;
  /* these are the upper and lower lines in the menu icon */
}
.cd-primary-nav-trigger .cd-menu-icon::before, .cd-primary-nav-trigger .cd-menu-icon:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: white;
  right: 0;
  border-radius:35px;
  -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
  -moz-transition: -moz-transform .3s, top .3s, background-color 0s;
  -ms-transition: -moz-transform .3s, top .3s, background-color 0s;
  transition: transform .3s, top .3s, background-color 0s;
  box-shadow:0 0 3px #666;
}
.cd-primary-nav-trigger .cd-menu-icon::before {
  top: -7px;
}
.cd-primary-nav-trigger .cd-menu-icon::after {
  top: 7px;
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked {
  background-color: rgba(255, 255, 255, 0);box-shadow:0 0 0px #666;
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::before, .cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
  background-color: white;outline:none;border:0;
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::before {
  top: 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
  top: 0;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}
@media only screen and (min-width: 768px) {
  .cd-primary-nav-trigger {
    width: 50px;
    padding-left: 1em;
    background-color: transparent;
    height: 30px;
    line-height: 30px;
    right: 30px;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .cd-primary-nav-trigger .cd-menu-text {
    display: inline-block;
  }
  .cd-primary-nav-trigger .cd-menu-icon {
    left: auto;
    right: 30%;
    -webkit-transform: translateX(0) translateY(-50%);
    -moz-transform: translateX(0) translateY(-50%);
    -ms-transform: translateX(0) translateY(-50%);
    -o-transform: translateX(0) translateY(-50%);
    transform: translateX(0) translateY(-50%);
  }
}
@media only screen and (max-width: 768px) {
  .cd-primary-nav-trigger {
  right: 10px;margin-top:5px;
  }
}

.nav-block {
  /* by default it's hidden - on top of the viewport */
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0, 0.8);
  z-index: 5990;
  text-align: center;
  padding: 50px 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: auto;
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
  display:table;
}
.nav-block .navi-group-middle {
  display:table-cell;vertical-align:middle;width:100%;
}
.nav-block .cd-primary-nav {
  display:block;padding:0;margin:0;
}
.nav-block li {
  list-style:none;text-align:left;display:inline-block;font-family:"Roboto", Arial,Helvetica,Sans Serif;font-weight:100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: .2em 10px;
  text-transform: capitalize;
  display:inline-block;
  max-width:220px;
  vertical-align:top;
}
.nav-block li a {
  padding:8px 5px;width:100%;display:block;letter-spacing: .7px;font-size:20px;color:#ccc;border-bottom:5px solid transparent;
  -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;
}
.no-touch .nav-block a:hover {
  color:#00aeef;background:#none;border-bottom:5px solid transparent;text-decoration:none;
}
.nav-block li.active a, .nav-block li.active a:hover {font-weight:400;border-bottom:3px solid #00aeef;}
.nav-block li .navi-icon {display:block;text-align:center;width:100px;height:100px;border-radius:100%;border:7px solid #ccc;margin:0 20px;}
.nav-block li .navi-icon:hover {border-color:#00aeec;}
.nav-block li .navi-icon i {font-size:38px;color:#fff;padding:25px 0 0 8px;}

.nav-block li > ul {list-style:none;padding:0;margin:5px 0 5px 0;}
.nav-block li > ul > li {display:block;padding:0;margin:1px 5px 0 5px;text-align:left;}
.nav-block li > ul > li a {padding:2px 0px !important;width:100%;display:block;letter-spacing:0.3px !important;font-size:12px !important;font-weight:700;color:#999;border-bottom:0px solid transparent !important;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.nav-block li > ul > li a:active, .nav-block li > ul > li a:focus {color:#00aeef;}


.nav-block .cd-label {
  color: #06446e;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  font-size: 0.875rem;
  margin: 2.4em 0 .8em;
}
.nav-block.is-visible {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.nav-block .sub-navi {width:100%;max-width:100%;display:block;visibility:hidden;opacity:0;position:relative;z-index:2000;top:160px;left:0;right:0;margin:0 auto;text-align:center;-webkit-transform:perspective(600px) rotateX(10deg);-moz-transform:perspective(600px) rotateX(10deg);-ms-transform:perspective(600px) rotateX(10deg);-o-transform:perspective(600px) rotateX(10deg);transform:perspective(600px) rotateX(10deg);-webkit-transition:all 1.5s cubic-bezier(0.7, 0, 0.36, 0.63);-moz-transition:all 1.5s cubic-bezier(0.7, 0, 0.36, 0.63);-o-transition:all 1.5s cubic-bezier(0.7, 0, 0.36, 0.63);transition:all 1.5s cubic-bezier(0.7, 0, 0.36, 0.63)}
.nav-block .sub-navi .sub-button {display:inline-block;}
.nav-block.is-visible .sub-navi{top:45px;visibility:visible;opacity:1;-webkit-transform:perspective(600px) rotateX(0deg);-moz-transform:perspective(600px) rotateX(0deg);-ms-transform:perspective(600px) rotateX(0deg);-o-transform:perspective(600px) rotateX(0deg);transform:perspective(600px) rotateX(0deg);}
.nav-block .sub-navi .navi-seperator {border-top:2px solid #666;max-width:800px;margin:0 auto;}
.nav-block .sub-navi h3 {color:#ccc;}

@media only screen and (min-width: 768px) {
  .nav-block {
    padding: 80px 0;
  }
}
@media only screen and (max-width: 767px) {

}
@media only screen and (max-width: 991px) {
  .nav-block {display:block;padding:0;margin:0;}
  .nav-block .navi-group-middle {vertical-align:top;display:block;margin:120px 0 90px 0px;}
  .nav-block li {max-width:auto;display:block;text-align:center;margin:0 auto;}
  .nav-block li > ul > li {text-align:center;}
  .nav-block .sub-navi {padding:0 30px 80px;margin:0;}

  .nav-block li .navi-icon {width:60px;height:60px;border:5px solid #ccc;margin:25px auto;}
  .nav-block li .navi-icon i {font-size:28px;color:#fff;padding:10px 0 0 8px;}
}