@font-face {
    font-family: 'dekar_light';
    src: url('dekar_light-webfont.eot');
    src: url('dekar_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('dekar_light-webfont.woff2') format('woff2'),
         url('dekar_light-webfont.woff') format('woff'),
         url('dekar_light-webfont.ttf') format('truetype'),
         url('dekar_light-webfont.svg#dekar_light') format('svg');
    font-weight: normal;font-style: normal;}


/* ----Primary style---- */
*, *::after, *::before {box-sizing: border-box;}
html { font-size: 62.5%;}
body {font-size: 1.5rem;font-family: 'Works Sans',sans-serif;color: #99CC00;background-color: #000; font-weight:300;}
html, body { height: 100%;}

a { color: #315659; text-decoration: none;}
button { border: none; outline: none; cursor: pointer;}
img .logot { max-width:50px; margin-right:20px; position:absolute}
.imli { padding:0 30px 0 0}

h1, h2, h3, h4 {font-family: 'dekar_light', sans-serif;  -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; letter-spacing:4px;}
h1{ font-size:5.4rem; font-weight: 100; letter-spacing:2px; line-height:110%}
h2{ font-size:4rem; font-weight: 300; line-height:110%}
h3{ font-size:3.3rem; font-weight: 300; }

.cab{ top:0; height:150px}


/* ----- Header-------------------------------- */
.cd-logo, .cdlogo, .cd-nav-trigger { position: absolute; z-index:3;}
.cd-logo{top:0;left:4%;-webkit-transition: opacity 0.3s, visibility 0.3s;-moz-transition:opacity 0.3s,visibility 0.3s;transition:opacity 0.3s, visibility 0.3s;}
.cd-logo.project-open { opacity: 100; visibility: visible}


.cd-nav-trigger {top: 24px;right: 5%;height: 50px;width: 50px;border-radius: 50%;background-color: rgba(128, 128, 128, 0.7);
-webkit-transition: background 0.2s;-moz-transition: background 0.2s;transition: background 0.2s;/* image replacement */ overflow: hidden;text-indent: 100%;white-space: nowrap;color: transparent;}
.cd-nav-trigger .cd-icon,
.cd-nav-trigger .cd-icon::before,
.cd-nav-trigger .cd-icon::after {
  /* icon created in CSS */
  position: absolute;background-color: #FFFFFF;border-radius: 2px;
  /* 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;}
.no-touch .cd-nav-trigger:hover {background-color: rgba(190, 200, 200, 0.8);}

.cd-nav-trigger .cd-icon {
  /* middle line of the menu icon */
  display: inline-block; width: 18px; height: 2px; 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%); -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; -moz-transition: -moz-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s;}
.cd-nav-trigger .cd-icon::before, .cd-nav-trigger .cd-icon::after {
  /* upper and lower lines of the menu icon */
  content: ''; top: 0; right: 0; width: 100%; height: 100%; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s;}
.cd-nav-trigger .cd-icon::before { -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px);}
.cd-nav-trigger .cd-icon::after { -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px);
  transform: translateY(6px);}
.cd-nav-trigger.project-open .cd-icon { /* user selects a projects - transform the icon into a 'X' */ background-color: rgba(255, 255, 255, 0);}
.cd-nav-trigger.project-open .cd-icon::before, .cd-nav-trigger.project-open .cd-icon::after {background-color: white;}
.cd-nav-trigger.project-open .cd-icon::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);}
.cd-nav-trigger.project-open .cd-icon::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);
}
.cd-nav-trigger.nav-open .cd-icon {
  /* user opens the navigation - transform the icon into an arrow */
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  -o-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
.cd-nav-trigger.nav-open .cd-icon::after {
  -webkit-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);
  -moz-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);
  -ms-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);
  -o-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);
  transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5);
}
.cd-nav-trigger.nav-open .cd-icon::before {
  -webkit-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);
  -moz-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);
  -ms-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);
  -o-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);
  transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5);
}

/* ------- Navigation-------- */
.cd-primary-nav {position: absolute; z-index: 1; top: 0; left: 0;
  /* height = (100% - 9%) - 9% is the space taken by the projects when the navigation is open */
  height: 90%; width: 100%; overflow: auto; text-align: center; opacity: 0; -webkit-transition: opacity 0s 0.4s; -moz-transition: opacity 0s 0.4s;
  transition: opacity 0s 0.4s; /* vertically align its content */ display: table;}
.cd-primary-nav ul { /* vertically align inside nav */  display: table-cell; vertical-align: middle;
  -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px);
  transform: translateY(40px); -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s;}

.cd-primary-nav a {display: inline-block;padding: .2em 1em;-webkit-transition: background 0.2s;-moz-transition: background 0.2s;transition: background 0.2s; color: #FFFFFF;font-family: 'dekar_light', sans-serif; font-size: 2.2rem; font-weight: 100;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; letter-spacing:1px}

.no-touch .cd-primary-nav a:hover { background-color: #99CC00}
.cd-primary-nav .cd-label {position: relative;margin: 2.4em 0 2em;color: #51696b;text-transform: uppercase;font-weight: 700;font-size: 1.5rem;  letter-spacing: 1px;}
.cd-primary-nav .cd-label a{position: relative;margin: 2.4em 0 0.1em 0;color: #fff;font-weight: 700;font-size: 1.5rem;  letter-spacing: 1px;}
.cd-primary-nav .cd-label::after {
  /* line below .cd-label*/
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -16px;
  height: 1px;
  width: 40px;
  background-color: currentColor;
}
.cd-primary-nav.nav-open {opacity: 1; -webkit-transition: opacity 0s; -moz-transition: opacity 0s; transition: opacity 0s;}
.cd-primary-nav.nav-open ul {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
@media only screen and (min-width: 1170px) {
  .cd-primary-nav a {font-size: 4rem; }
}

/* ------- Projects---- */
.cd-projects-container {
  height: 100%;
  width: 100vw;
  position: relative;
  overflow: hidden;
}
.cd-projects-container .single-project {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
  /* Force hardware acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.cd-projects-container .single-project:nth-of-type(2) {
  -webkit-transform: translateY(33.3333333333%);
  -moz-transform: translateY(33.3333333333%);
  -ms-transform: translateY(33.3333333333%);
  -o-transform: translateY(33.3333333333%);
  transform: translateY(33.3333333333%);
}
.cd-projects-container .single-project:nth-of-type(3) {
  -webkit-transform: translateY(66.6666666667%);
  -moz-transform: translateY(66.6666666667%);
  -ms-transform: translateY(66.6666666667%);
  -o-transform: translateY(66.6666666667%);
  transform: translateY(66.6666666667%);
}
.cd-projects-container .single-project.selected {
  /* selected project */
  cursor: auto;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.cd-projects-container .single-project.selected ~ li {
  /* hide siblings projects */
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.cd-projects-container.nav-open .single-project {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  -webkit-transform: translateY(91%);
  -moz-transform: translateY(91%);
  -ms-transform: translateY(91%);
  -o-transform: translateY(91%);
  transform: translateY(91%);
}
.cd-projects-container.nav-open .single-project:nth-of-type(2) {
  -webkit-transform: translateY(94%);
  -moz-transform: translateY(94%);
  -ms-transform: translateY(94%);
  -o-transform: translateY(94%);
  transform: translateY(94%);
}
.cd-projects-container.nav-open .single-project:nth-of-type(3) {
  -webkit-transform: translateY(97%);
  -moz-transform: translateY(97%);
  -ms-transform: translateY(97%);
  -o-transform: translateY(97%);
  transform: translateY(97%);
}
.cd-projects-container.nav-open:hover .single-project {
  -webkit-transform: translateY(88%);
  -moz-transform: translateY(88%);
  -ms-transform: translateY(88%);
  -o-transform: translateY(88%);
  transform: translateY(88%);
}
.cd-projects-container.nav-open:hover .single-project:nth-of-type(2) {
  -webkit-transform: translateY(92%);
  -moz-transform: translateY(92%);
  -ms-transform: translateY(92%);
  -o-transform: translateY(92%);
  transform: translateY(92%);
}
.cd-projects-container.nav-open:hover .single-project:nth-of-type(3) {
  -webkit-transform: translateY(96%);
  -moz-transform: translateY(96%);
  -ms-transform: translateY(96%);
  -o-transform: translateY(96%);
  transform: translateY(96%);
}

.cd-title {
  position: relative;
  z-index: 1;
  height: 33.3333333333%;
  width: 100vw;
  text-align: center;
  /* vertical align its content */
  display: table;
}
.cd-title::before { /* background image */ content: ''; position: absolute; top: 0; left: 0; height: 300%;  width: 100%;
  background-position: center center; background-repeat: no-repeat; overflow:hidden}
.cd-title::after { /* line below title -  visible on hover */  content: ''; position: absolute; left: 50%; top: calc(50% + 30px);  -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0); -moz-transform: translateX(-50%) translateY(-50%) scaleX(0); -ms-transform: translateX(-50%) translateY(-50%) scaleX(0); -o-transform: translateX(-50%) translateY(-50%) scaleX(0); transform: translateX(-50%) translateY(-50%) scaleX(0);
  height: 1px; width: 60px; background-color: #FFFFFF; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; transition: transform 0.2s;}



video {position: absolute;top: 0; left:0;height:auto;width:100%;overflow: hidden;}
video.fillWidth {width: 100%;object-fit: cover;}

.single-project:nth-of-type(1) .cd-title { background-color: #000}
.single-project:nth-of-type(1) .cd-title::before { background-image: url(img/twist_dna.jpg);}
.single-project:nth-of-type(2) .cd-title { background-color: #000}
.single-project:nth-of-type(2) .cd-title::before {background-image: url(img/twist_luzes.jpg);}
.single-project:nth-of-type(3) .cd-title {background-color: #000}
.single-project:nth-of-type(3) .cd-title::before { background-image: url(img/twist_bulbo.jpg);}
.single-project:nth-of-type(1) .cd-title::before, .single-project:nth-of-type(2) .cd-title::before, .single-project:nth-of-type(3) .cd-title::before {background-size: cover;}


.cd-title h2 {position: relative;z-index: 10;font-size: 3.2rem;font-weight:100;color: #FFFFFF;font-family: 'dekar_light', sans-serif;
/* vertical align inside .cd-title */ display: table-cell;vertical-align: middle;-webkit-transition: -webkit-transform 0.4s;-moz-transition: -moz-transform 0.4s;transition: transform 0.4s;
 	/* Force hardware acceleration */
  -webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);letter-spacing: 6px;}
.no-touch .cd-title:hover::after {
  -webkit-transform: translateX(-50%) translateY(-50%) scaleX(1);
  -moz-transform: translateX(-50%) translateY(-50%) scaleX(1);
  -ms-transform: translateX(-50%) translateY(-50%) scaleX(1);
  -o-transform: translateX(-50%) translateY(-50%) scaleX(1);
  transform: translateX(-50%) translateY(-50%) scaleX(1);
}
.no-touch .selected .cd-title:hover::after {
  -webkit-transition: -webkit-transform 0s;
  -moz-transition: -moz-transform 0s;
  transition: transform 0s;
  -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0);
  -moz-transform: translateX(-50%) translateY(-50%) scaleX(0);
  -ms-transform: translateX(-50%) translateY(-50%) scaleX(0);
  -o-transform: translateX(-50%) translateY(-50%) scaleX(0);
  transform: translateX(-50%) translateY(-50%) scaleX(0);
}
.selected .cd-title h2 {
  /* vertically center h2 in the full-height image*/
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
@media only screen and (min-width: 1170px) {.cd-title h2 {font-size: 7.2rem; }}

.cd-project-info {position: absolute;z-index: 2;top: 0;left: 0; width: 100%;
  height: 100%;overflow: auto; opacity: 0; visibility: hidden;
  -webkit-transition: opacity 0.4s, visibility 0.4s;
  -moz-transition: opacity 0.4s, visibility 0.4s;
  transition: opacity 0.4s, visibility 0.4s;
}
.cd-project-info::before {
  /* use to push the .content-wrapper below the intro project image */
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
.cd-project-info .content-wrapper {
  position: relative;
  z-index: 2;
  padding: 2em 0 3em;
  background-color: #FFFFFF;
}
.cd-project-info .content-wrapper > * {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  color: #253031;
}
.cd-project-info .content-wrapper p {margin-bottom: 2em;line-height: 2;}
.selected .cd-project-info { -webkit-overflow-scrolling: touch; opacity: 1; visibility: visible; -webkit-transition: opacity 0s, visibility 0s;  -moz-transition: opacity 0s, visibility 0s; transition: opacity 0s, visibility 0s;}
.cd-project-info.has-boxshadow .content-wrapper { /* add a box-shadow while scrolling over the background image */ box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2);}
@media only screen and (min-width: 1170px) {
  .cd-project-info .content-wrapper {padding: 4em 0;}
  .cd-project-info .content-wrapper p {font-size: 1.8rem;}
}

.cd-scroll {  /* scroll down arrow */
  position: fixed; z-index: 1;  top: calc(100% - 100px); left: 50%; right: auto;
-webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); height: 48px; width: 48px;
  /* replace text with image */
  text-indent: 100%; overflow: hidden; white-space: nowrap; color: transparent;
  background: transparent url(img/cd-seta.png) no-repeat center center;
  opacity: 0; visibility: hidden;
  -webkit-transition: opacity 0.4s, visibility 0.4s; -moz-transition: opacity 0.4s, visibility 0.4s; transition: opacity 0.4s, visibility 0.4s;}
.project-open .cd-scroll { opacity: 1; visibility: visible;
  -webkit-animation: cd-translate 1.2s 0.4s; -moz-animation: cd-translate 1.2s 0.4s; animation: cd-translate 1.2s 0.4s;  -webkit-animation-iteration-count: 2; -moz-animation-iteration-count: 2; animation-iteration-count: 2;}
.project-open .has-boxshadow .cd-scroll { opacity: 0; visibility: hidden;}

@-webkit-keyframes cd-translate {
  0% {-webkit-transform: translateX(-50%);}
  50% {-webkit-transform: translateY(10px) translateX(-50%); }
  100% {-webkit-transform: translateX(-50%); }
}
@-moz-keyframes cd-translate {
  0% {-moz-transform: translateX(-50%); }
  50% {-moz-transform: translateY(10px) translateX(-50%); }
  100% {-moz-transform: translateX(-50%);}
}
@keyframes cd-translate {
  0% {-webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);-ms-transform: translateX(-50%);
    -o-transform: translateX(-50%); transform: translateX(-50%);}
  50% {-webkit-transform: translateY(10px) translateX(-50%);
    -moz-transform: translateY(10px) translateX(-50%);
    -ms-transform: translateY(10px) translateX(-50%);
    -o-transform: translateY(10px) translateX(-50%);
    transform: translateY(10px) translateX(-50%); }
  100% {-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);-o-transform: translateX(-50%);
    transform: translateX(-50%); }
}
/* - Support for no js ------ */
.no-js .cd-nav-trigger, .no-js .cd-scroll {display: none;}
.no-js .cd-primary-nav { position: relative; height: auto; min-height: 94px; display: block; opacity: 1;}
.no-js .cd-primary-nav::after { clear: both; content: ""; display: table;}
.no-js .cd-primary-nav ul { display: block; padding-left: calc(5% + 60px); float: right; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
.no-js .cd-primary-nav ul::after { clear: both; content: ""; display: table;}
.no-js .cd-primary-nav li { display: inline-block; float: left; margin-top: 1.4em;}
.no-js .cd-primary-nav li.cd-label {display: none;}
.no-js .cd-primary-nav a {font-size: 1.6em;}
.no-js .cd-projects-container {height: auto;}
.no-js .cd-projects-container .single-project { position: relative; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); top: 0; cursor: auto;}
.no-js .cd-projects-container .cd-title { height: 300px;}
.no-js .cd-projects-container .cd-title::before { height: 300px;}
.no-js .cd-projects-container h2 {-webkit-transform: translateY(0); -moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0); transform: translateY(0);}
.no-js .cd-projects-container h2::after {display: none;}
.no-js .cd-project-info {position: relative;height: auto;top: 0; -webkit-transform: translateY(0);-moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0);transform: translateY(0);opacity: 1;visibility: visible;}
.no-js .cd-project-info .content-wrapper {margin-top: 0;}

@media only screen and (max-width: 480px) {
.cd-logo{top:0;left:0}
.cd-logo.project-open { opacity:0; visibility: hidden}
}