main { position: relative; z-index: 2; /* fix bug on iOS */
height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 200px 5%; background-color: #9cb3a8; /* 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; -webkit-transition: -webkit-transform 0.7s; -moz-transition: -moz-transform 0.7s; transition: transform 0.7s; -webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); -moz-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); }
main h1, main p { text-align: center; }
main h1 { font-size: 2.6rem; margin-bottom: 1em; }
main p { font-family: 'Neutra-Text-TF-Book-Alt'; color: #d6dfdb; max-width: 450px; margin: 0 auto; line-height: 1.6; }
.navigation-is-open main { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); }
.cd-nav-icon { width:100%; float:left;}
.cd-nav-icon .icon-bar1 { width:100%; float:left; margin-top:9px;}
.cd-nav-icon .icon-bar1 a { display:inline-block; margin-right:15px;}
.cd-nav-icon .icon-bar1 a:last-child { margin-right:0;}

@media only screen and (min-width: 768px) {
main { padding: 250px 10%; }
main h1 { font-size: 3.6rem; }
main p { font-size: 2rem; }
}
.cd-nav-trigger { display:inline-block; position: relative; z-index: 99999; left:7.4%; top: 0; height:24px; width:28px; /* image replacement */
overflow: hidden; text-indent: 100%; white-space: nowrap; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; }
.cd-nav-trigger .cd-nav-icon { /* icon created in CSS */
position: absolute; /*left:52%;*/ left: 45%; 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:100%; height:4px; background-color:#000; }
.cd-nav-trigger .cd-nav-icon::before { top:0;}
.cd-nav-trigger .cd-nav-icon:after { top:0;}
.cd-nav-trigger .cd-nav-icon::before, .cd-nav-trigger .cd-nav-icon:after { /* upper and lower lines of the menu icon */
content: ''; position: absolute; right:0; width:100%; height: 100%; background-color: #000; /* 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; -webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s; -moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s; transition: transform 0.5s, width 0.5s, top 0.3s; }
.cd-nav-trigger .cd-nav-icon::before { -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px); }
.cd-nav-trigger .cd-nav-icon::after { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px); }

.navigation-is-open .cd-nav-trigger .cd-nav-icon,
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before, .navigation-is-open .cd-nav-trigger .cd-nav-icon:after
 { background:#fff}



.no-touch .cd-nav-trigger:hover .cd-nav-icon::after { top: 2px; }
.no-touch .cd-nav-trigger:hover .cd-nav-icon::before { top: -2px; }
.cd-nav-trigger svg { position: absolute; top: 0; left: 0; }
.cd-nav-trigger circle { /* circle border animation */
-webkit-transition: stroke-dashoffset 0.4s 0s; -moz-transition: stroke-dashoffset 0.4s 0s; transition: stroke-dashoffset 0.4s 0s; }
.navigation-is-open .cd-nav-trigger { /* rotate trigger when navigation becomes visible */
-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after, .navigation-is-open .cd-nav-trigger .cd-nav-icon::before { /* animate arrow --> from hamburger to arrow */
width: 50%; -webkit-transition: -webkit-transform 0.5s, width 0.5s; -moz-transition: -moz-transform 0.5s, width 0.5s; transition: transform 0.5s, width 0.5s; }
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::after, .no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::before { top: 0; }
.navigation-is-open .cd-nav-trigger circle { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.4s 0.3s; -moz-transition: stroke-dashoffset 0.4s 0.3s; transition: stroke-dashoffset 0.4s 0.3s; }
@media only screen and (min-width: 1170px) {
.cd-nav-trigger { top:0; left:-1px;}
}
.cd-nav { position: fixed; z-index: 999; top: 0; left: 0; height: 100%; width: 100%; background-color:#58585b; visibility: hidden; -webkit-transition: visibility 0s 0.7s; -moz-transition: visibility 0s 0.7s; transition: visibility 0s 0.7s; }
.cd-nav .cd-navigation-wrapper { /* all navigation content */
height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 60px 5% 60px calc(5% + 80px); /* 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; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: -webkit-transform 0.7s; -moz-transition: -moz-transform 0.7s; transition: transform 0.7s; -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); -moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); }
.navigation-is-open .cd-nav { visibility: visible; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s; }
.navigation-is-open .cd-nav .cd-navigation-wrapper { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; -webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); -moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); }
.cd-nav h2 { position: relative; margin-bottom: 1.7em; font-size: 1.3rem; font-weight: 800; color: #fff; text-transform: uppercase; }
.cd-nav h2::after { /* bottom separation line */
content: ''; position: absolute; left: 0; bottom: -20px; height: 1px; width: 60px; background-color: currentColor; /*left:0; right:0; margin:auto*/}
.cd-nav .cd-primary-nav { margin-top: 60px; }
.cd-nav .cd-primary-nav li { margin: 1.6em 0; }
.cd-nav .cd-primary-nav a { font-size:36px; color:#000; display: inline-block;}
.cd-nav .cd-primary-nav a.selected { color: #58585b;}
.no-touch .cd-nav .cd-primary-nav a:hover { color: #fff;}
.cd-nav .cd-contact-info { margin-top: 80px; }
.cd-nav .cd-contact-info li { margin-bottom: 25px; line-height: 1.2; color: rgba(255, 255, 255, 0.3); }
.cd-nav .cd-contact-info a { color: rgba(255, 255, 255, 0.3); }
.cd-nav .cd-contact-info span { display: block; }
.cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span { font-size: 1.6rem; }
@media only screen and (min-width: 1170px) {
.cd-nav .cd-navigation-wrapper { padding:60px 5%;}
.cd-nav .cd-navigation-wrapper::after { clear: both; content: ""; display: table; }
.cd-nav .cd-half-block { width: 100%; float: left; text-align:center;}
.cd-nav .cd-primary-nav { margin-top: 0; }
.cd-nav h2 { font-size: 20px; margin-bottom: 60px; }
.cd-nav .cd-primary-nav li { margin:0 0 0.625em;}
.cd-nav .cd-contact-info { margin-top: 100px; text-align: right; }
.cd-nav .cd-contact-info li { margin-bottom: 15px; }
.cd-nav .cd-contact-info a  { font-size:14px;}
}

.no-js main { height: auto; overflow: visible; }
.no-js .cd-nav { position: static; visibility: visible; }
.no-js .cd-nav .cd-navigation-wrapper { height: auto; overflow: visible; padding: 100px 5%; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }

@media screen and (max-width: 600px) { .cd-nav-trigger { width:28px; height:40px; left:0;}}

.cd-half-block .social { float:left;}
.cd-half-block .last { margin-right:0 !important}
.cd-nav .cd-primary-nav a { font-size:36px;}

/*Smartphone css*/
@media screen and (max-width: 480px) {
.cd-nav .cd-navigation-wrapper { text-align:center; padding:65px 10%;}
.cd-nav .cd-primary-nav a { font-size:1.875em;}
.cd-nav .cd-primary-nav li { margin:10px 0;}
.cd-nav-icon .icon-bar1 { margin-top:20px;}
.cd-nav-icon .icon-bar1 a { float:none; display:inline-block;}
}

@media screen and (min-width:481px) and (max-width:600px) {
.cd-nav .cd-navigation-wrapper { text-align:center; padding:65px 10%;}
.cd-nav .cd-primary-nav a { font-size:1.875em;}
.cd-nav .cd-primary-nav li { margin:10px 0;}
.cd-nav-icon .icon-bar1 { margin-top:20px;}
.cd-nav-icon .icon-bar1 a { float:none; display:inline-block;}
}

@media screen and (min-width:601px) and (max-width:767px) {
.cd-nav .cd-navigation-wrapper { text-align:center; padding:65px 10%;}
.cd-nav .cd-primary-nav a { font-size:1.875em;}
.cd-nav .cd-primary-nav li { margin:10px 0;}
.cd-nav-icon .icon-bar1 { margin-top:20px;}
.cd-nav-icon .icon-bar1 a { float:none; display:inline-block;}
.cd-nav-trigger { height:40px; left:0;}
}

@media screen and (min-width:768px) and (max-width:900px) {
.cd-nav .cd-navigation-wrapper { padding-left:3%; padding-right:3%;}
.cd-nav .cd-primary-nav a { font-size:2.188em;}
.cd-nav .cd-primary-nav li { margin:10px 0;}
.cd-half-block { width:100%; float:left; text-align:center;}
.cd-nav .cd-primary-nav { margin-top:0;}
.icon-bar1 { margin-top:16px;}
}

@media screen and (min-width:901px) and (max-width:1024px) {
.cd-nav .cd-navigation-wrapper { padding-left:3%; padding-right:3%;}
.cd-nav .cd-primary-nav a { font-size:2.188em;}
.cd-nav .cd-primary-nav li { margin:10px 0;}
.cd-half-block { width:100%; float:left; text-align:center;}
.cd-nav .cd-primary-nav { margin-top:0;}
.icon-bar1 { margin-top:16px;}
}

@media screen and (min-width:1025px) and (max-width:1240px) {
.cd-nav .cd-navigation-wrapper { padding-left:3%; padding-right:3%;}
.cd-half-block { width:100%; float:left; text-align:center;}
.cd-nav .cd-primary-nav { margin-top:0;}
.icon-bar1 { margin-top:35px;}
}