@charset "UTF-8";

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);

html {
  scroll-behavior: smooth;
}

*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; list-style:none; font-weight:normal;}

html, body {height:100%;}
html>body #intro { height:auto;}

/*algemeen*/ 
img {width: auto\9; height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; width:100%;}
body {font-family: 'Roboto', sans-serif, arial; font-size:15px; line-height:22px; padding:0; background-color:#f3f2ef; font-weight:200;}
.clear {clear:both;}

::selection {background-color:#999999;}
::-moz-selection {background-color:#999999;}

/*koppen, stijlen etc.*/
h1,h2,h3,h4,nav, #cboxTitle, footer {font-family: 'ITCAvantGardeGothicProBold',arial,serif; font-weight:normal;}
* {text-decoration: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease;}
a:focus {outline:none;}
h2 { margin-bottom: 10px; font-size: 30px; line-height: 30px; text-transform:uppercase;}
.case blockquote {font-weight:100;}

/*header*/
header .inner-content {width: 960px; margin:auto; padding:0;}
header {background-color:#1d1b1c; width: 100%; height: 100px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 99999; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s;}
header.smaller {height: 65px; background-color:rgba(29,27,28,0.95); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
header #logo {display: block; margin:15px auto 10px auto; width:40%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
header.smaller #logo {margin:10px auto 5px auto; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; width:25%;}
header .menu {background-color:#000; width:100%;}

#wrapper {height:100%;}

/*cases algemene container (article)*/
article {margin: 0 auto; z-index: 99998;}

/*think design build love*/
.slide {top:0; bottom:0; height:100%; margin:auto; width:100%; background-repeat:no-repeat; background-position:right bottom; min-height: 700px;}
.slide .content {position: relative; top: 40%; left: 0%; transform: translateY(-25%); width:100%; text-align:left;}
.slide .content2 {position: relative; bottom: -45%; left: 0%; transform: translateY(-25%); width:100%; text-align:left; height: 100%;}
.cycle-slideshow {position:absolute; top:0; bottom:0; width:100%;}
.slide#think {background-image:url(../images/think.svg);}
.slide#design {background-image:url(../images/design.svg);}
.slide#built {background-image:url(../images/built.svg);}
.slide#love {background-image:url(../images/love.svg);}
.circles {background-image:url(../images/think-design-built-love.svg);position: relative; left: 0%; height: 60%; width:100%; background-repeat:no-repeat; background-position:right bottom; padding-bottom: 20px;}
.slide h1 {background-color:; text-transform:uppercase; color:#f8e03a; width:auto; display:inline-block; line-height:80px; max-width: 1000px; margin-left:135px;}
.go {background-color:#1d1b1c; text-align:center; color:#fff; position:relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d;}
.go p {font-weight:200; text-transform:uppercase; position: relative; transform: translateY(-50%); font-size: 20px;}
.arrow-down {border-right: 5px solid #fff; border-bottom: 5px solid #fff; width: 30px; height: 30px; transform: rotate(45deg); margin: auto;}

/*cases*/
.cases article .info-text p {padding:0 0 20px 0;}
.cases h4 a {color: #fff; width:100%; display:block; padding:8px; text-align:center;}
.cases h4 a:hover{background-color:#F8E03A; color:#454545; }
.cases h3 {background-color:#000; color:#fff; display:inline-block; padding:3px 6px; margin: 0 0 10px 0; text-transform:uppercase;}
.cases .box {background-color:rgba(0,0,0,0.1);}
.cases .jobs-done ul {padding:10px; text-align:center;}
.cases .box {position:relative;}
.cases .caption {background-color:rgba(0,0,0,0.4); position:absolute; width:100%; top:0; bottom:0; background-image:url(../images/open.svg); background-repeat:no-repeat; background-position:center center; background-size:10%;}
.cases .caption:hover {background-color:rgba(0,0,0,0); background-size:15%;}
.case.even {background-color:#deddd8;}
 
.jobs-done li {padding: 5px 0 10px 40px; background-repeat:no-repeat; background-size: 30px 30px; display:inline;}
li.think {background-image:url(../images/think.svg);}
li.design {background-image:url(../images/design.svg);}
li.built {background-image:url(../images/built.svg);}
li.love {background-image:url(../images/love.svg);}

/*overig folio*/
#other-cases .case-block{ float:left; width:20%;}
#other-cases article{ width:auto;}
.grid figcaption a {font-family: 'ITCAvantGardeGothicProBold',arial,serif; font-weight:normal; text-align: center; padding: 5px 10px; color: #fff; text-transform:uppercase; display:inline-block;}
.grid figcaption h3 {color: #fff;}
.grid figcaption {color: #f8e03a;}

/*studio*/
#studio-anchorpoint {background-color:#fff;}
#studio img {width:25%; float:right; border-radius: 400px;}
#studio {background-color:#fff;}
#studio article {background-color: #fff; padding: 5%; max-width:980px;}
#studio p {margin:0 0 10px 0;}

/*contact*/
.icons-footer{margin: 0px auto; padding-top:130px; width:215px; z-index: 999999;}
.hart-icon{float:left; width:100px; height:100px; border-radius: 50px; z-index: 999999; margin-right:10px;}
.meet-icon{float:left; width:100px; height:100px; border-radius: 50px; z-index: 999999;}
#contact a {font-weight:bold;}

/*footer*/
footer { background-color: #f8e03a; height: auto;}
footer article{margin: 0px auto; color:#3d4042; text-align:center; padding-bottom: 80px;}
footer article a{color:#3d4042;}
footer article a:hover{color:#999;}
footer article h2{margin: 30px 0 30px 0; font-size: 72px;}
footer article ul li{text-decoration: none; list-style: none;}
footer article ul li strong {text-transform:uppercase;}
footer article ul {margin:10px 0 30px 0;}
.social-media{margin: 0px auto; text-align:center;}
footer .social-media a {width:50px; height:50px; border-radius:25px; -moz-border-radius:25px; -ms-border-radius:25px; -o-border-radius:25px; -webkit-border-radius:25px; background-color:#fff; display:inline-block; margin:5px;}
footer .social-media a:hover {background-color:#999;}

a.twitter, a.facebook, a.linkedin, .google-plus, a.flickr, a.instagram, a.spotify {background-repeat:no-repeat;background-position:center;}
a.twitter {background-image:url('../images/twitter.svg');}
a.facebook {background-image:url('../images/facebook.svg');}
a.linkedin {background-image:url('../images/linkedin.svg');}
a.google-plus {background-image:url('../images/google.png');}
a.flickr {background-image:url('../images/flickr.svg');}
a.instagram {background-image:url('../images/insta.svg');}
a.spotify {background-image:url('../images/spotify.svg');}



@media (min-width: 980px) {
	.cases article {height:100%; max-width:1440px;}
	.cases .info-text {width:60%;}
	.cases .examples {width:40%; padding:5%; height:100%; min-height:100%;}
	
	.case.odd .info-text {float:left; padding:5% 0 5% 5%;}
	.case.odd .examples {float:right;}
	.case.even .info-text {float:right; padding:5% 5% 5% 0;}
	.case.even .examples {float:left;}
	
	.cases article .info-text blockquote p { font-size:24px; line-height:28px; font-weight:100; padding:20px 100px 40px 100px; text-align:center;}
	
	.slide {background-size: 30%; }
	.slide h1 {font-size:80px; padding:20px;}
	



}

@media (min-width: 481px) {
	.grid figure {margin: 0; position: relative;}
	.grid figure img { max-width: 100%; display: block; position: relative;}
	.grid figcaption {position: absolute; top: 0; left: 0; bottom: 0; background: #414243; color: #f8e03a; font-size:13px; text-align:center;}
	
	
	figure img {z-index: 10; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s;}
	.no-touch figure:hover img,figure.cs-hover img {transform: translateY(-100px) scale(0.0); -webkit-transform: translateY(-100px) scale(0.0) /*translateZ(0px)*/; -moz-transform: translateY(-100px) scale(0.0); -ms-transform: translateY(-100px) scale(0.0);}
	figcaption {height: 100%; width: 100%; padding: 2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	figcaption h3 {margin:25% 0 3% 0; font-size:26px; text-transform:uppercase;}
	figcaption a {margin: 25px 0 0 0; padding: 0 20px; border-radius: 100px;}
	figcaption a:hover {background-color:#f8e03a; color:#000;}
	
	#intro {height: 100vh; min-height:600px; background-color:#1d1b1c; position:relative;}
	.go {height:10%; min-height:10%; position:absolute; bottom:0; width:100%; z-index: 999;}

}


figcaption {text-align: center;}


@media (min-width: 1800px) {
	#other-cases .case-block {float:left; width:14.285%;}
}

@media (max-width: 1360px) {
	figcaption p {font-size: 10px; line-height: 14px;}
}

@media (min-width:700px) and (max-width:1200px){
	#other-cases .case-block {float:left; width:33.33%;}
}
@media (min-width:481px) and (max-width:699px){
	#other-cases .case-block {float:left; width:50%;}
}

@media (max-width:979px) {
	header.smaller {height:40px;}	
		
	article h2 {margin:10px 0 20px 0;}
	.cases h4 {margin: 25px 0  0 0;}
	

	header {overflow:visible; height:100px;}
	header .inner-content {width:100%; margin:auto; padding:0;}
		

}

@media (min-width:481px) and (max-width:979px) {
	header {height: 100px;}
	header.smaller {height: 60px;}
	header nav li a {font-size:14px;}
	
	.slide h1 {font-size:60px; margin-left: 0px; line-height: 55px; text-align: center;}
	.slide {background-size:50%; }
	
	.case h3 {font-size:28px; padding:10px;}
	
	.cases article .info-text blockquote p { font-size:20px; line-height:26px; font-weight:100; padding:20px 40px 40px 40px; text-align:center;}
	.slide .content2 {position: relative; top: 40%;left: 0%;transform: translateY(-25%);width: 100%;text-align: left;height: 100%;}
	.circles{background-position: bottom center;}
	
}

@media (min-width:700px) and (max-width:979px) {
	
	
	.case.odd .info-text {float:left; padding:20px;}
	.case.odd .examples {float:right;}
	.case.even .info-text {float:right; padding:20px;}
	.case.even .examples {float:left;}
	
	.case blockquote { font-size:18px; line-height:25px; padding:20px 50px;}	
}

@media (min-width:481px) and (max-width:699px) {
	.cases .info-text, .cases .examples {padding:25px 25px 25px 25px;}
}

@media (max-width:480px){	

	header {height: 60px;}
	header.smaller {height: 50px;}
	header nav li a {font-size:14px;}
	.logo{max-width:100%;}
	.go {height:50px;}
	
	#intro {height: 70%; min-height:70%;background-color:#1d1b1c; position:relative;}
	.slide .content {position: relative; top: 50%; transform: translateY(-30%); width:100%; text-align:center;}
	.slide .content2 {position: relative; top: 50%; transform: translateY(-30%); width:100%; text-align:center; height: 100%;}
	.cycle-slideshow {position:absolute; top:0; bottom:20%; width:100%;}
	.slide {background-size:70%;}
	.slide h1 {font-size:40px; margin-left: 0px; line-height: 45px; text-align: center;}
	.circles{background-position: bottom center;}
	
	.cases .info-text, .cases .examples {padding:15px;}
	.case h3 {font-size:21px; padding:6px;}
	
	#other-cases .case-block{float:none; width:100%; clear:both;}


	.fig-clearer {clear:both;}
	.case-block img {width:40%; float:left;}
	.case-block figcaption {width:60%; float:left; padding:2%;}
	li.case-block:nth-child(1n) {background-color:#000;}
	li.case-block:nth-child(2n) {background-color:#5a5954;}
	figcaption h3 {font-size:18px;  text-transform:uppercase; margin:10px 0 0 0;}
	figcaption, figcaption span {line-height:17px;}
	.grid figcaption a {font-weight:normal; text-align: center; padding: 5px 10px;  display: inline-block;  color: #fff; margin: 4% 0 0 0; text-transform:uppercase;}
	.grid figcaption a:hover {color:#F8E03A;}

	.social-media p {font-size:10px;}
	footer article h2{font-size: 55px; margin: 30px 0 25px;}

	h2 {font-size:22px; line-height:22px;}
	footer .social-media a {margin:2px;}
	
	.cases article .info-text blockquote p { font-size:19px; line-height:24px; font-weight:100; padding:20px 20px 40px 20px; text-align:center;}

}

/* @FONTFACE */

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

}