/*
==============================================
General Styles
============================================== */

* { box-sizing: border-box; }

.dim {
  color: rgba(0,0,0,0.5);
}

img.full {
  width: 100%;
  display: block;
  margin: 0;
}

img.limit {
  width: 100%;
  display: block;
  max-width: 15rem;
  margin-bottom: 1.5rem;
}

img.profilepic {
  display: block;
  border-radius: 100%;
  width: 100%;
  max-width: 200px;
  margin: 0 0 2rem 0;
}

main[role='main'] {
  padding: 1rem 1.5rem;
  max-width: 45em;
  margin-left: auto;
  margin-right: auto;
}

main[role='main2'] {
  padding: 10rem 1.5rem 0rem 1.5rem;
  max-width: 85em;
  margin-left: 3rem;
  margin-right: 3rem;
}
main[role='main3'] {
  max-width: 85em;
  padding-left:0rem;
  padding-right: 0rem;
  padding-top: 0rem;
  padding-bottom: 0rem;
  margin-left: 3rem;
  margin-right: 3rem;
  
}

@media (min-width:600px) {
  main[role='main'] { padding-left: 2rem; padding-right: 2rem; }
  
  main[role='main2'] { padding-left: 2rem; padding-right: 2rem; }
  
  main[role='main3'] { padding-left: 2rem; padding-right: 2rem; }
  
  img.profilepic { width: 33.333%; float: right; margin-left: 2rem; }
}

hr {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.1);
  height: 0;
  margin: 1rem auto;
}

body>footer {
  margin-top: 1.5rem;
  padding: 0.75rem 2rem 0.9rem;
  border-top: 1px solid rgba(0,0,0,0.1);
  font-family:  'Larish Neue Semibold';
  font-weight:  normal;
  font-style:   normal;
  font-stretch: normal;
  font-size: 0.8rem;
  color: rgba(0,0,0,0.5);
  background:#ffffff;
  clear:both;
  }

@media (min-width:500px) {
  body>footer { display: flex; justify-content: space-between; }
}


body>footer a {
  color: rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(0,0,0,0.25);
}

body>footer a.icon { border: none; opacity: 0.5; transition: 0.2s all ease; }
body>footer a.icon:hover { opacity: 1; }
body>footer a.icon:not(:last-child) { margin-right: 0.75rem; }

/*
==============================================
Sections
============================================== */



section {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 2rem 0;
  margin-bottom: 2rem;
}

section+section { padding-top: 0.5rem; }

section:last-child {
  border: none;
  padding-bottom: 0; 
}

section>h2 {
  margin-top: 10px;
}

section.landscape {
  border: none;
  padding: 0;
  margin: 0;
}

section.twoup>div img {
  width: 150px;
  margin: 1rem 2rem 1rem 0;
}

@media (min-width: 500px) {
  section.twoup>div img { margin-top: 0; }
  section.twoup>div:not(:first-child) { padding-top: 1rem; }
  section.twoup>div { display: flex; }
  section.twoup.bottom>div { align-items: flex-end; }
  section.twoup>div:not(:last-child) { margin-bottom: 1rem;   }
}

/*
==============================================
Navigation
============================================== */

/* Small viewports (stacked name & nav links) */

header[role='banner'] a.title {
  display: block;
  background-color: #4a4a4a;
  border: none;
  text-align: center;
  transition: none;
}

header[role='banner'] a.title:hover {
  background-color: #333;
}

header[role='banner'] a.title h1 {
  display: block;
  margin: 0;
  font-family: 'Gentium Basic', serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  line-height: 1.7;
  white-space: nowrap;
}

header[role='banner'] a.title, nav[role='navigation'] {
  padding-top: 4px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left:0px;
}

header[role='banner'] a.title, nav[role='navigation2'] {
  padding-top: 4px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left:0px;
}

header[role='banner'] a.title {
  border-radius: 15px;
}

nav[role='navigation'] ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 30em;
  display: flex;
  justify-content: space-between;
}

nav[role='navigation'] ul li { line-height: 1.3; }

nav[role='navigation'] a {
  font-family:  'Larish Neue Semibold';
  font-weight:  normal;
  font-style:   normal;
  font-stretch: normal;
  font-size: 1rem;
  border: none;
  color:#4a4a4a;
}

nav[role='navigation'] a.active { border-bottom: 1px solid #23DCCD; color:#23DCCD; }
nav[role='navigation'] a.active:hover { border-bottom-color: #23DCCD; }


nav[role='navigation2'] ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 30em;
  display: flex;
  justify-content: space-between;
}

nav[role='navigation2'] ul li { line-height: 1.3; }

nav[role='navigation2'] a {
  font-family:  'Larish Neue Semibold';
  font-weight:  normal;
  font-style:   normal;
  font-stretch: normal;
  font-size: 1rem;
  border: none;
  color:#4a4a4a;
}

nav[role='navigation2'] a.active { border-bottom: 1px solid #23DCCD; color:#23DCCD; }
nav[role='navigation2'] a.active:hover { border-bottom-color: #23DCCD; }


/* Marquee */

div.marquee {
  padding: 0.75rem 0 0.9rem;
  font-family: 'Gentium Basic', serif;
  font-weight:400;
  font-size: 1.5rem;
  line-height:1.8;
  background-color: #ededed;
  overflow: hidden;
  height:4rem;
  z-index:1;
}

/* Medium viewports (side-by-side name & nav links) */

@media (min-width: 700px) {
  header[role='banner'] {
    display: flex;
    align-content: stretch;
  }
  nav[role='navigation'] {
    width: 100%;
	background:#ffffff;
	color:#4a4a4a;
  }
  nav[role='navigation2'] {
    width: calc(100% + 3rem);
    background: #ffffff;
	color:#4a4a4a;
    margin-left: -3rem;
    z-index: 1000;
  }
  nav[role='navigation'] a {
  font-family:  'Larish Neue Semibold';
  font-weight:  normal;
  font-style:   normal;
  font-stretch: normal;
  font-size: 1rem;
  border: none;
  color:#ffffff;
}

nav[role='navigation2'] a {
  font-family:  'Larish Neue Semibold';
  font-weight:  normal;
  font-style:   normal;
  font-stretch: normal;
  font-size: 1rem;
  border: none;
  color:#ffffff;
}


}

/* Large viewport rearrange */

@media (min-width: 1000px) {
  a.title {
    position: fixed;
    left: 0;
    width: 4rem;
	height:4rem;
    z-index: 10000;
  }
  div.marquee {
    transform: rotateZ(90deg);
    transform-origin: bottom left;
    position: fixed;
    left: 0;
    top: -2rem;
    width: calc(100vh - 2rem);
    height: 4rem;
    z-index: 3;
	font-family:  'Larish Neue Semibold';
    font-weight:  normal;
    font-style:   normal;
    font-stretch: normal;
  }

  nav[role='navigation'] {
    padding: 1.3rem 2rem 1.3rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
	background:#4a4a4a;
	 color: #fff;
  }
  
  nav[role='navigation2'] {
    padding: 1.3rem 2rem 1.3rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
	background:#4a4a4a;
	color: #fff;
  }
  nav[role='navigation'] a {
  font-family:  'Larish Neue Semibold';
  font-weight:  normal;
  font-style:   normal;
  font-stretch: normal;
  font-size: 1rem;
  border: none;
  color:#fff;
}
nav[role='navigation2'] a {
  font-family:  'Larish Neue Semibold';
  font-weight:  normal;
  font-style:   normal;
  font-stretch: normal;
  font-size: 1rem;
  border: none;
  color:#fff;
}
}




/*
==============================================
Post Lists
============================================== */

ul.postlist {
  margin-top: 2.5rem;
}

ul.postlist li:not(:last-child) {
  margin-bottom: 2rem;
}

ul.postlist li p {
  margin: 0;
}

ul.postlist.condensed a {
  width: 100%;
  border-bottom: none;
}

ul.postlist.condensed a:hover span {
  border-bottom: 1px solid #07d;
}

ul.postlist.condensed li { 
  width: 100%; 
}

ul.postlist.condensed small {
  width: 8em;
  display: block;
}

ul.postlist.condensed span {
  color: #07d;
  border-bottom: 1px solid rgba(0,0,0,0);
}

@media (min-width: 500px) {
  ul.postlist.condensed a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  ul.postlist.condensed small { text-align: right; }
}

ul.postlist.reader li:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

ul.postlist.reader small {
  display: block;
  margin-bottom: 0.5rem;
}

ul.postlist.reader li:last-child small {
  margin-bottom: 0;
}

ul.postlist.reader small:last-child {
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

ul.postlist.reader img {
  float: right;
  display: block;
  margin-left: 2rem;
  height: 2.5rem;
}

/*
==============================================
Post
============================================== */

article header {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
}

article header h2 {
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.25rem;
  font-weight: normal;
}

article footer {
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 2rem;
  margin-top: 2.5rem;
  text-align: center;
}

article footer a {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: none;
  color: #07d;
}

article footer a:hover {
  border-bottom: 1px solid #07d;
}

/*
==============================================
General Layout Media Queries
============================================== */

@media (min-width: 550px) {
  /* Only float if VP is wide enough */
  .left { float: left; margin: 0 2rem 2rem 0; }
  .right { float: right; margin: 0 0 2rem 2rem; }
}

@media (min-width: 1000px) {
  body>footer { 
  /*padding-left: 3rem; 
  padding-right: 3rem;*/
  width:50%;
  position:fixed;
  bottom:0px;
    }
	
  footer.fullwidth { 
  /*padding-left: 3rem; 
  padding-right: 3rem;*/
  width:100%;
  position:fixed;
  bottom:0px;
  margin-left: -3rem;
    }
}

/*
==============================================
Hero Image
============================================== */

div.heroimg {
  background-color: #FBDEB9;
  background-blend-mode: multiply;
  /*background-size: cover;*/
  background-size: 110% auto;
  background-position: 50% 50%;
  padding-bottom:0;
  position: relative;
}

/*div.heroimg img { display: none; }*/


@media (min-width: 600px) {
  /*div.heroimg { padding-bottom: 60%; }*/
}

@media (min-width: 1000px) {
  div.heroimg {
    position: fixed;
    background-size: cover;
    top: 0;
    left: 0rem;
    bottom: 0;
    padding: 0;
    width: calc(50% - 0rem);
    z-index: 999; /* so geotag can overlay marquee */
  }
  
  div.heroimg2 {
    position: fixed;
    background-size: cover;
    top: 0;
    left: 4rem;
    bottom: 0;
    padding: 0;
    width: calc(50% - 3rem);
    z-index: 999; /* so geotag can overlay marquee */
  }

  body.home {
    width: 50%;
    margin-left: 50%;
  }
  
  body.contact {
    width: 50%;
    margin-left: 3rem;
  }


body.videos {
    margin-left: 3rem;
	width: 100%;
  }
  
 body.work { 
    margin-left: 3rem;
	width: 100%;
  }

  body.contact div.heroimg {
    position: fixed;
    background-size: cover;
    top: 0;
    left: calc(50% + 3rem);
    bottom: 0;
    padding: 0;
    width: calc(50% - 3rem);
    z-index: 999; /* so geotag can overlay marquee */
  }
  
body.videos div.heroimg {
    position: fixed;
    background-size: cover;
    top: 0;
    left:  3rem;
    bottom: 0;
    padding: 0;
    width: calc(100% - 3rem);
    z-index: -999; /* so geotag can overlay marquee */
  } 
  
 body.work div.heroimg {
    position: fixed;
    background-size: cover;
    top: 0;
    left:  3rem;
    bottom: 0;
    padding: 0;
    width: calc(100% - 3rem);
    z-index: -999; /* so geotag can overlay marquee */
  }  
  
}


/*
==============================================
Homepage
============================================== */

h1.homeheadline { color: #333; }

@media (min-width: 1000px) {
  h1.homeheadline { margin-top: 0vh; }
  main[role='main'] { padding: 1rem 3rem; }
}

section.datablock {
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 1rem 0;
  margin: 2rem 0;
  font-family: 'Gentium Basic', serif;
  font-size: 0.9rem;
}

section.datablock div { padding-bottom: 1em; }

@media (min-width: 500px) {
  section.datablock { display: flex; }
  section.datablock div { width: 33.33333%; padding-bottom: 0; padding-right: 1em; }
}

section.datablock h3, section.datablock p { margin: 0; }

body.home section:last-child { padding: 0; margin-bottom:100px; }

body.contact section:last-child { padding: 0; margin-bottom:100px; }

body.videos section:last-child { padding: 0; margin-bottom:100px; }

/*
==============================================
Spacing Fixes
============================================== */

h2 + ul.postlist { margin-top: 1.5rem; }




/*
==============================================
Added by Jordi
============================================== */
@media (min-width: 500px) {
.databox img {
	clear:both;
	display: inline-block;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}



.databox img:hover {
	-webkit-filter: none; /* Safari 6.0 - 9.0 */
	filter: none;
	transition: all 0.8s linear;
   -webkit-transition: all 0.8s linear;
   -moz-transition: all 0.8s linear;
}

.databox2 img {
	width:100%; 
	height:auto;
	display: inline-block;
	-webkit-filter: none; /* Safari 6.0 - 9.0 */
	filter: none;
}

.databox2 img:hover {
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
   filter: grayscale(100%);
   transition: all 0.8s linear;
   -webkit-transition: all 0.8s linear;
   -moz-transition: all 0.8s linear;
}

.databox3 img {
	clear:both;
	display: inline-block;
}
}


@media (min-width: 1000px) {
.databox img {
	float:right;
	margin-left:50px; 
	display: inline-block;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}

.databox img:hover {
	-webkit-filter: none; /* Safari 6.0 - 9.0 */
	filter: none;
	transition: all 0.8s linear;
   -webkit-transition: all 0.8s linear;
   -moz-transition: all 0.8s linear;
}

.databox2 img {
	width:100%; 
	height:auto;
	display: inline-block;
	-webkit-filter: none; /* Safari 6.0 - 9.0 */
	filter: none;
}

.databox2 img:hover {
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
   filter: grayscale(100%);
   transition: all 0.8s linear;
   -webkit-transition: all 0.8s linear;
   -moz-transition: all 0.8s linear;
}

.databox3 {
	
	overflow: auto;
}

.databox3 img {
	float:right;
	margin-left:50px; 
	display: inline-block;
	
}

.databox4 {
	
	overflow: auto;
}

.databox4 img {
	float:left;
	margin-right:50px; 
	display: inline-block;
	overflow: auto;
}
}

#bgvideo { 
position: relative;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
width: 100%;
height: auto;
z-index: -100;
transform:translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%); /* IE 9 */
-webkit-transform: translateX(-50%) translateY(-100%); /* Opera, Chrome, and Safari */
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
cursor: pointer;
}

.videoContainer {
    position: relative;
    width: 100%;
    height: 100%;
    background-attachment: scroll;
    overflow: hidden;
}

.videoContainer video {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    z-index: 1;
}

.videoContainer .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background-image: linear-gradient( 45deg, rgba(35,220,205,0.5) 40%, rgba(255,144,0,0.8) );
    opacity: 0.5;
}

.videoContainer .overlay:hover {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background-image: none;
    opacity: 0.5;
}

.video {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  background-size: cover;
}



.container {
    position: relative;
    width: 100%;
	max-height:400px;
	background-color:#000000;	
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;  
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-30%, -50%);
  -ms-transform: translate(-30%, -50%)
}

.container:hover .image {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
   filter: grayscale(100%);
   opacity: 0.8;
   transition: all 0.8s linear;
   -webkit-transition: all 0.8s linear;
   -moz-transition: all 0.8s linear;
}


.container:hover .middle {
  opacity: 1;
}

.text {
  color: #FFFFFF;
  font-size: 18px;
  padding: 16px 32px;
}


.columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /*fraction*/
  padding-bottom:3rem;
}

.column {
  margin-right:30px;
}

@media (max-width: 980px) { /*breakpoint*/
  .columns {
    grid-template-columns: none ;
  }
}

@media (max-width: 680px) { /*breakpoint*/
  .columns {
    grid-template-columns: none;
  }
}



.containercasestudies {
  position: relative;
  width: 100%;
}

.imagecasestudies {
  display: block;
  width: 100%;
  height: auto;
}

.overlaycasestudies {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #424242;
}

.containercasestudies:hover .overlaycasestudies {
  opacity: 1;
}

.textcasestudies {
  color: #33cccc;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1.2;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.responsiveimage {
	max-width: 100%; 
	display:block; 
	height: auto;
}


.small {
	font-size:0.8rem;
}

.static {
  position:absolute;
  background: white;
}

.static:hover {
  opacity:0;
}


.testimonialsheight {
	height:350px;
	}

@media (max-width: 680px) { /*breakpoint*/
  .testimonialsheight {
	height:600px;
	}
}