/* Copyright © 2016 by Edwin Kettelerij. All Rights Reserved.


/* Project-pages
-------------------------------------------------------------------------------*/

/* Typography-Projectpages */



h1.p1 {
  width: 100%;
  font-family: 'Roboto Mono', monospace;
  font-style: none;
  font-weight: 300;
  font-size: 1.4em; 
  letter-spacing: -0.5px;
  margin: 0em 0 0em 0;
}

@media screen and (min-width: 736px) {
  h1.p1 {
  font-size: 1.2em; 
  }
}

@media screen and (min-width: 1000px) {
  h1.p1 {
  font-size: 1.4em; 
  }
}

h1 {
  padding: 1.5em 0em 1em 0em;
}

h2.p2 {
  width: 100%;
  font-family: 'Roboto Mono', monospace;
  font-style: none;
  font-weight: 300;
  font-size: 1.25em; 
  line-height: 1.5em; 
  letter-spacing: -0.5px;
  margin: 1em 0 1em 0;
}

@media screen and (min-width: 736px) {
  h2.p2 {
  font-size: 1em; 
  }
}

@media screen and (min-width: 1000px) {
  h2.p2 {
  font-size: 1.25em; 
  }
}

h2.p2-2 {
  width: 100%;
  font-family: 'Roboto Mono', monospace;
  font-style: none;
  font-weight: 300;
  font-size: 1.1em; 
  line-height: 1.5em; 
  letter-spacing: -0.5px;
  margin: 1em 0 1em 0;
  padding: 0em 0em 0em 0em;
}

@media screen and (min-width: 736px) {
  h2.p2-2 {
  margin: 0em 0 0em 0;
  font-size: 0.8em; 
  line-height: 1.4em; 
  }
}

@media screen and (min-width: 1000px) {
  h2.p2-2 {
  font-size: 1em;
  }
}

h4.p4 {
  font-size: 1em;
  font-weight: 300;
  line-height: 1.4em; 
  letter-spacing: 0px; 
  text-transform: none;
  margin: 2em 0 0 0em;
  padding: 0em 0em 0em 0em;
  color: #178389;
}

@media screen and (min-width: 736px) {
  h4.p4 {
  margin: 1em 0 0.5em 0em;
  font-size: 0.9em;
  font-weight: 300;
  line-height: 1.4em; 
  letter-spacing: 0px; 
  text-transform: none;
  padding: 0em 0em 0em 0em;
  color: #178389;
  text-align: left;
  }
}

@media screen and (min-width: 1000px) {
  h4.p4 {
  font-size: 1em;
  }
}

h4.p4-2 {
  text-align: center;
  font-size: 1.5em;
  font-weight: 300;
  line-height: 1.4em; 
  letter-spacing: 0px; 
}

@media screen and (min-width: 736px) {
  h4.p4-2 {
  font-size: 1em;
  font-weight: 300;
  line-height: 1.4em; 
  letter-spacing: 0px; 
  text-transform: none;
  padding: 0em 0.5em 0.5em 2em;
  color: #178389;
  text-align: left;
  }
}

@media screen and (min-width: 1000px) {
  h4.p4-2 {
  font-size: 1em;
  }
}

#txt-left {
  padding: 0em 0em 0.5em 0em;
}

@media screen and (min-width: 736px) {
  #txt-left {
  padding: 0em 2em 0.5em 0em;
  }
}

}
#txt-right {
  padding: 0em 0em 0em 0em;
}

@media screen and (min-width: 736px) {
  #txt-right {
  padding: 0em 0em 0em 1.5em;
  }
}

/* Layout-Projectpages */

article.project {
  text-align: left;
  width: 100%;
  padding: 7em 0 1em 0; 
}

@media screen and (min-width: 736px) {
  article.project {
    width: 100%; 
    padding: 7em 0 2em 0; 
  }
}

article.project section {
  padding: 0 0em 0 0;
}

@media screen and (min-width: 736px) {
  article.project section {
    padding: 0 2.5em 0 0;
  }
}

@media screen and (min-width: 1000px) {
  article.project section {
    padding: 0 4.5em 0 0;
  }
}

article.concept {
  content: "";
  clear: both;
  width: calc( ( 100% / 12 ) * 12);
  text-align: left;
  width: 100%;
  padding: 2em 0 1.5em 0; 
}

@media screen and (min-width: 736px) {
  article.concept {
    content: "";
    clear: both;
    width: calc( ( 100% / 12 ) * 9);
    padding: 0em 0 2em 0; 
  }
}

article.xp {
  position: fixed;
  top: 6em;
  padding: 0 1em 0 1em;
}

/* small */
@media screen and (min-width: 500px) {
  article.xp {
    padding: 0 16% 0 16%;
  }
}

@media screen and (min-width: 736px) {
  article.xp {
    padding: 0 15% 0 15%;
  }
}

@media screen and (min-width: 1024px) {
  article.xp {
    padding: 0 16% 0 16%;
  }
}

@media screen and (min-width: 1450px) {
  article.xp {
    padding: 0 24% 0 24%;
  }
}

@media screen and (min-width: 1750px) {
  article.xp {
    padding: 0 30% 0 30%;
  }
}

section.wrapper-xp {
  background-color: white;
  padding: 0em 0em 0em 0em;
  height: 3250px
}

@media screen and (min-width: 736px) {
  section.wrapper-xp {
  background-color: white;
  padding: 0em 0em 0em 0em;
  height: 3395px
}
}



article.assets {
  margin: 3em 0 6em 0;
}

article.assets2 {
  margin: 3em 0 4em 0;
}

article.outro {
  text-align: left;
  width: 100%;
  padding: 0em 0 1em 0; 
}

article.text1 {
  position: absolute;
  display: block;
  margin: 50em 10% 0 10%;
}
@media screen and (min-width: 736px) {
  article.text1 {
  width: 45%;
  margin: 36em 10% 0 10%;
}
}

article.text2 {
  position: absolute;
  display: block;
  right:0px;
  width: 100%;
  margin: 68em 0em 0 0em;
  padding: 0 10% 0 10%;
}

@media screen and (min-width: 736px) {
  article.text2 {
  width: 65%;
  margin: 60em 0% 0 0%;
}
}

article.text3 {
  position: absolute;
  display: block;
  right:0px;
  width: 100%;
  padding: 0 10% 0 10%;
  margin: 93.7em 0% 0 0%;
}

@media screen and (min-width: 736px) {
  article.text3 {
  width: 65%;
}
}

article.text4 {
  position: absolute;
  display: block;
  width: 100%;
  padding: 0 10% 0 10%;
  margin: 140em 0% 0 0%;
}

@media screen and (min-width: 736px) {
  article.text4 {
  width: 45%;
  margin: 150em 0% 0 0%;
}
}

article.text5 {
  position: absolute;
  display: block;
  width: 100%;
  padding: 0 10% 0 10%;
  margin: 30em 0% 0 0%;
}

@media screen and (min-width: 736px) {
  article.text5 {
  width: 45%;
  margin: 150em 0% 0 0%;
}
}






caption {
  border: 1px solid black;
  padding: 0.4em;
  margin-bottom: 0.6em;
  box-shadow: 1px 1px 0px black;
  background-color: #fed3c4;
}

table {
  width: 100%;
  margin-top: 3em;
  border-collapse: collapse;
  font-size: 0.75em;
  font-weight: 300;
  line-height: 1.4em; 
  color: #178389;
  text-align: left;
  font-family: 'Roboto', sans-serif;
  font-style: none;
  font-weight: normal;
  background-color: white;  
}
table.links {
  margin-top: 1.5em;
}


td, th {
  border: 1px solid black;
  padding: 0.4em 0.7em 0.4em 0.7em;
}

th#tablerow { text-align: center;}

td#tablecel {
  border-right: 1px dashed black;
  text-align: center;
  padding-left: 0.4em;
}

#tablecel:hover {
  background-color: #fed3c4;
  cursor: pointer;
}

td#tablecel2 {
  border-left: 1px dashed black;
  text-align: left;
}

td#tablecel3 {
  border-right: 1px solid black;
  text-align: left;
}

#tablecel3:hover {
  background-color: #fed3c4;
  cursor: pointer;
}

th#links {
  width: 50%;
  text-align: center;
}
#links:hover {
  background-color: #fed3c4;
  cursor: pointer;
}
.date {

}




/* Swiper-Projectpages */

section.swiper {
  width: calc( ( 100% / 12 ) * 12);
  padding: 2em 0 2em 0;
  float: right;
}

@media screen and (min-width: 736px) {
  section.swiper {
  width: calc( ( 100% / 12 ) * 10);
  padding: 2em 0 6em 0;
  float: right;
  }
}

.swiper-container {
  display: block;
  position: relative;
  width: 100%;
  padding: 1px 1px 3em 1px;
}


.swiper-slide#off {
  border: 1px solid black;
  padding: 0.3em 0.3em 0.15em 0.3em;
}

.swiper-button-prev#p,
.swiper-button-next#p {
  z-index: 100; 
  top: 97%
}

/* Pagination Styles */
.swiper-pagination#p {
  font-family: 'Roboto', sans-serif;
  font-style: none;
  font-weight: normal;
  font-size: 1em;
  
}
/* Images-Projectpages */
img.en1 {
  padding-right: 2em;
  width: 50%;
  max-width: 160px;
}

img.en2 {
}

img.lb1 {
padding-top: 1em;
}

.border {
  padding: 0.3em;
  border: 1px solid black;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}