/*
Theme Name: Capstone
Theme URI: 
Description: 
Author: 
Version: 1.0
Tags: 
*/
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
a, em, hr, figure, img, small, b, u, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, tr, th, td {
	background:transparent;
	border:0;
	margin:0;
	padding:0;
	vertical-align:baseline;
}

* {
	box-sizing: border-box;
	scroll-behavior:smooth;
}

body {
	font:300 1rem/1.5 "Roboto",sans-serif;
	color:#888;
	overflow-x:hidden;
}

	body[data-theme="night"],
	[data-theme="night"] footer p,
	[data-theme="night"] footer a {
		background:#202332;
		color:#fff9;
	}

[data-theme="night"] h1,
[data-theme="night"] h2,
[data-theme="night"] h3,
[data-theme="night"] h4 {
	color:ghostwhite;
}

[data-theme="night"] #filters > a,
[data-theme="night"] header li,
[data-theme="night"] .more-container a {
	color:ghostwhite;
}

[data-theme="night"] #controls svg,
[data-theme="night"] .more-container img,
[data-theme="night"] #filters img {
	filter:invert(.6);
}

[data-theme="night"] .wrap div,
[data-theme="night"] .logo-small span {
	/*border-color:rgba(0,0,0,.8);*/
	border-color:#202332f9;
}

[data-theme="night"] .wrap .fro {
	background:rgba(252,197,80,.8);
}

[data-theme="night"] #to-top,
[data-theme="night"] #to-top:hover,
[data-theme="night"] .small-button, 
[data-theme="night"] #projects > div:first-child h3,
[data-theme="night"] #handle {
	background:#202332;
}

[data-theme="night"] #project a:hover, 
[data-theme="night"] .big-button:hover {
	background:#0003;
}

[data-theme="night"] header li a {
	color:#fff6;
}

[data-theme="night"] .big-button,
[data-theme="night"] #project a,
[data-theme="night"] .small-button:hover, 
[data-theme="night"] .single > div p a:hover {
	background:#414554;
}

		[data-theme="night"] h1 + p b {
			color:#fff;
		}

[data-theme="night"] #projects > div:first-child a {
	filter:grayscale(0);
}

#site {
	transform-origin:top left;
	width:1500px;
	position:absolute;
}

	#site.loaded {
		transition:1s all ease;
	}

h1, h2, h3, h4, h5 {
	font-family:"Montserrat",sans-serif;
	color: #312f2f;
	line-height:1.1;
}


	h1 {
		font:700 60px/1.1 "Montserrat",sans-serif;
		color:#312f2f;
		margin-bottom:15px;
		letter-spacing:-0.5px;
	}

		h1 + p {
			font:300 19px/29px "Roboto",sans-serif;
			margin-left:3px;
			width:760px;
		}

		h1 + p b {
			font-weight: 400;
			/*color: #70c8d4;*/
		}

			[data-theme="night"] h1 + p b {
				color:#fff;
			}

	h2 {
		font-size: 30px;
		line-height: 1.25;
	}

		.border:after {
			content:"";
			background-color: #70c8d4;
			width: 69px;
			height: 3px;
			display: block;
			margin-top:1em;
		}

		.single h2 {
			font-size: 48px;
			margin:0 0 31px -3px;
			font-weight: 600;
		}

			.single h2 + p {
				text-transform: uppercase;
				letter-spacing: 2px;
				color: #312f2f;
				font:400 15px 'Montserrat', sans-serif;
				margin-bottom:30px;
			}

		.small h2 {
			font-size:36px;
			font-weight:600;
			margin:115px 0 8px -3px;
		}

			.small h2 + div {
				margin-bottom:10px;
			}

	h4 {
		font-size:20px;
		margin:25px 0 15px;
	}

	.text-center h3 {
		font-size:36px;
		margin:30px 0 17px;
	}

.center {
	width:1280px;
    margin:0 auto;
	padding-left:20px;
	padding-right:20px;
}

	#projects.center {
		padding-left:0;
		padding-right:0;
	}

.single > div > p:first-child {
	margin-bottom:30px;
	width:70%;
}

.text-center {
	text-align:center;
}

.text-right {
	text-align:right;
}

[class*="span"] {
    padding:0 15px;
    float:left;
}

	[class*="span"]:first-child {
		padding-left:0;
	}

	[class*="span"]:last-child {
		padding-right:0;
	}

.span1 { width:8.33%; }
.span2 { width:16.66%; }
.span3 { width:25%; }
.span4 { width:33.33%; }
.span5 { width:41.66%; }
.span6 { width:50% }
.span7 { width:58.33% }
.span8 { width:66.66%; }
.span9 { width:75%; }
.span10 { width:83.33%; }
.span11 { width:91.66%; }
.span12 { width:100%; padding:0; }

a {
	text-decoration:none;
	cursor:pointer;
	outline:0;
	color:#999;
	display:inline-block;
	position:relative;
}

a.line:before {
	content:"";
	width: 0;
	height: 2px;
	display: block;
	position: absolute;
	top:105%;
	background-color: #70c8d4;
	transition: width 0.5s ease;
}

	a.line:hover:before {
		width:100%;
	}

	a img {
		border: none;
	}

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

p {
	margin-bottom:1em;
}

.clear {
	clear:both;
}

.cf:after {
	content:"";
	display:table;
	clear:both;
}

.hidden {
	display:none !important;
}

.left,
.alignleft {
	float:left;
}

.right,
.alignright {
	float:right;
}

	img.alignright {
		float:right;
		margin:0 0 15px 15px;
	}

	img.alignleft {
		float:left;
		margin:0 15px 15px 0;
	}
	
	img.alignnone {
		float:none;
	}

.flex-center {
	display:flex;
	align-items:center;
	justify-content:center;
}

.text-left {
	justify-content:flex-start;
}

.text-right {
	justify-content:flex-end;
}

hr {
	border-top:1px solid rgba(119, 119, 119, 0.5);
	clear:both;
	display:block;
	height:1px;
	margin-bottom:40px;
}

	.support h3 + hr {
		border-top:1px solid #ddd;
		margin:10px 0 10px;
	}

header {
	padding:42px 0;
	position:relative;
}

	header ul {
		list-style:none;
		margin-top:5px;
		display:flex;
		align-items:center;
	}

		header:before {
			content: "";
			background-color: #70c8d4;
			width: 250px;
			height: 3px;
			position: absolute;
			top:0;
			left:0;
		}

	header li {
		display:inline-block;
		margin-left:24px;
		font:600 12px/1 "Montserrat",sans-serif;
		color:#312f2f;
		text-transform:uppercase;
		letter-spacing:0.2px;
	}

		header li a {
			color:#999;
			font-weight:500;
		}

			header li:first-child a {
				font-size:11px;
				letter-spacing:0.4px;
			}

			header li:last-child a {
				font-size:13px;
			}

#theme {
	display:inline-block;
	width:16px;
	height:16px;
	background:url(images/icon-light.svg) no-repeat;
	background-size:100%;
	vertical-align:middle;
	opacity:.7;
}

	[data-theme="night"] #theme {
		background-image:url(images/icon-night.svg);
	}

@keyframes spin1 {
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
}

@keyframes spin2 {
	from { transform: rotateX(0); }
	to { transform: rotateX(360deg); }
}

@keyframes spin3 {
	from { transform: rotateY(0) rotateX(0); }
	to { transform: rotateY(360deg) rotateX(360deg); }
}

.wrap {
	perspective:450px;
	perspective-origin: 50% 50px;
	height:93px;
	width:87px;
	font-size:0;
	transform:scale(0.75);
	transition:all 2s ease-in-out;
}

	.wrap div {
		width:100%;
		height:100%;
		position:absolute;
		transform-style: preserve-3d;
		border:5px solid rgba(0,0,0,.9);
		top:0.04em;
		z-index:-1;
		background:rgba(255,255,255,.8);
		opacity:0;
		outline: 1px solid transparent;
		transition:all 2s ease-in-out;
	}

		.wrap.active div {
			opacity:1;
			border-left-width:3.5px;
			border-right-width:3.5px;
			border-top-width:4px;
			border-bottom-width:4px;
			border-color:rgba(0,0,0,.6);
			background:rgba(252,197,80,.8);;
			box-shadow:inset 0 0 20px rgba(125,125,125,0.4);
		}

.wrap .fro { opacity:1; transform: translateZ(87px); } 
.bac { transform: translateZ(-0px) rotateY(180deg); }
.lef { transform: rotateY(270deg) translateX(-0px); transform-origin: center left; }
.rig { transform: rotateY(-270deg) translateX(0px); transform-origin: top right; }
.wrap .top { height:87px; transform: rotateX(270deg) translateY(-87px); transform-origin: top center;}
.wrap .bot { height:87px; transform: rotateX(90deg) translateY(87px) translateZ(-6px); transform-origin: bottom center; }

.logo {
	text-transform:uppercase;
	color:#312f2f;
	cursor:pointer;
	transform-style: preserve-3d;
	transform-origin: center center 44.5px;
	height:100%;
	width:100%;
}

	.wrap.active[data-motion="1"] .logo { 
		animation: spin1 10s 20s linear; 
		animation-delay:2s;
	}

	.wrap.active[data-motion="2"] .logo { 
		animation: spin2 10s 20s linear; 
		animation-delay:2s;
	}

	.wrap.active[data-motion="3"] .logo { 
		animation: spin3 10s 20s linear; 
		animation-delay:2s;
	}

	.salamander {
		height:89px;
		position: absolute;
		margin:26px 0 0 38px;
		transition:all 2s ease-in-out;
	}

	.logo .salamander {
		opacity:.9;
	}

		.wrap.active .salamander {
			opacity:.7;
		}

.logo-small span {
	display:inline-block;
	width:44px;
	height:46px;
	border:3px solid #000;
	position: relative;
	transition:all .3s;
	background:#FCC550;
}

.logo-small .salamander {
	height:46px;
	position: absolute;
	margin:10px 0 0 18px;
}

.logo-small h3 {
	display:inline-block;
	position:relative;
	top:15px;
	left:7px;
}

#home {
	padding-top:170px;
	padding-bottom:120px;
}

.single {
	padding-top:90px;
}

#filters {
	font:500 18px "Montserrat",sans-serif;
	list-style:none;
	padding:20px 0 85px;
}

	#filters.single {
		margin:30px 0 75px -10%;
	}

	#filters img {
		display: inline-block;
		transform: rotate(90deg);
		position: relative;
		top: 14px;
		left: 9px;
	}

.more-container {
	margin-top:75px;
	text-transform:uppercase;
	font:500 14px "Montserrat",sans-serif;
}

	.more-container a {
		position:relative;
		color:#312f2f;
		display:inline-block;
		line-height:24px;
	}

#projects,
#projects > div {
	height:540px;
	transition:opacity 1s ease;
}

	#projects {
		overflow: hidden;
		position: relative;
		/*
		box-shadow: inset 0px 0px 30px rgba(0,0,0,.2);
		background:#f6f6f6;
		*/
	}

	#projects > div:first-child {
		opacity:1;
		position:absolute;
		width:100%;
	}

	#projects.show > div:first-child {
		opacity:0;
		pointer-events:none;
	}

	.more-container > div:first-child,
	#projects.show + div > span {
		display:none;
	}

		#projects.show + div > div:first-child {
			display:block;
		}

	#projects > div:first-child a {
		display:block;
		position:relative;
		float:left;
		width:25%;
		background-size:cover;
		background-position:center;
		margin-bottom:0px;
		filter:grayscale(100%);
		transition:opacity .3s;
		overflow:hidden;
		opacity:0;
		z-index:1;
	}

		#projects > div:first-child a.loaded {
			opacity:1;
			height:270px;
		}

			[data-theme="night"] #projects > div:first-child a.loaded {
				opacity:.9;
			}

		#projects > div:first-child h3 {
			position:absolute;
			opacity:0;
			padding:10px 15px;
			background:#333;
			bottom:0;
			right:0;
			color:#fff;
			font-size:.9em;
			font-weight:500;
			transition:all .2s;
		}

		#projects > div:first-child a:hover {
			filter:grayscale(0%);
		}

			#projects a:hover h3 {
				opacity:1;
			}
		
#project {
	z-index:0;
	padding:75px 20px;
	border-top:1px solid #ddd;
	opacity:0;
}

	[data-theme="night"] #project {
		border-top:1px solid rgba(119, 119, 119, 0.5);
	}

	.show #project {
		opacity:1;
	}

#preview {
	position:absolute;
	/*
	width:273px;
	height:205px;
	margin:48px 0 0 255px;
	transform:rotate3d(-13, 127, -74,-21deg);
	*/
	width: 278px ;
    height: 205px;
    margin: 45px 0 0 250px ;
	transform:rotate3d(-25, 99, -61,-23deg);
	background-size:100% 100%;
	background-repeat:no-repeat;
}

.loader {
	background:#151515 !important;
}

	.loader:after {
		content:"";
		display:block;
		border-radius:100%;
		width:30px;
		height:30px;
		border-top: 6px solid #151515;
		border-right: 6px solid #555;
		border-bottom: 6px solid #666;
		border-left: 6px solid rgba(112, 200, 212, .9);
		animation: loader 1.1s infinite linear;
		top:38%;
		left:45%;
		position:relative;
	}

	@keyframes loader {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

#project-text {
	padding-right:50px;
}

	#project-text h2 {
		font-weight:500;
		margin-bottom:20px;
	}

		#project p a {
			margin-top:.5em;
		}

.border-top {
	border-top:1px solid rgba(119, 119, 119, 0.5);
	margin-top:90px;
	padding:105px 0 30px;
}

.yay {
	padding-top:40px;
}

	.yay p {
		margin-bottom:25px;
	}

input[type="text"],
input[type="number"],
input[type="password"] {
	height:51px;
	border:1px solid #ddd;
	width:300px;
	padding:0 20px;
	float:left;
	margin-right:10px;
	font-family:"Roboto";
}

	.create input[type="text"] {
		width:100%;
	}

	#daterange input[type="text"] {
		width:110px;
		display:inline-block;
		margin-left:10px;
	}

	input[type="text"]:disabled {
		background:lightgreen;
		font-weight:bold;
		padding:0 30px;
	}

#tijd {
	width: 105px;
	float: none;
	margin: 0;
	height: 32px;
	font-size: 13px;
	padding: 0 10px;
	border-radius:3px;
}

.small-button,
.big-button,
#project a,
.single > div p a {
	border:none;
	text-transform: uppercase;
	border-radius: 0;
	font-size: 13px;
	line-height: 13px;
	font-weight: 300;
	letter-spacing: 1.2px;
	padding: 19px 25px;
	background:#70c8d4;
	color:#fff;
	transition: all 0.2s ease-in-out;
	display:inline-block;
	cursor:pointer;
	vertical-align:middle;
}

	#project a {
		padding:16px 20px;
	}

	.small-button {
		font-size:11px;
		padding:9px 12px;
	}

		.side .small-button {
			margin-top:1em;
		}

	#project a:hover,
	.small-button:hover,
	.big-button:hover,
	.single > div p a:hover {
		background:#312f2f;
	}

.client {
	font:500 12px 'Montserrat', sans-serif;
	color: #312f2f;
	letter-spacing: 1.7px;
	text-transform: uppercase;
}

	[data-theme="night"] .client {
		color:#fff;
	}

.gallery div {
	height:440px;
	background-position:center;
	background-size:cover;
}

	.gallery > div + div {
		padding-left:30px;
	}

#mockup,
.mockup {
	perspective:465px;
	overflow:hidden;
}

	#mockup img,
	.mockup img {
		position:absolute;
	}

	#mockup img:first-child,
	.mockup img:first-child {
		width:319px;
		margin:56px 0 0 299px;
		transform: rotate3d(-13, 104, -59,-21deg);
		height: 237px;
	}

footer {
	padding:90px 0 115px;
	border-top:1px solid rgba(119, 119, 119, 0.5);
	margin-top:90px;
	color:#312f2f;
}

	footer h3,
	footer h4 {
		font:600 18px/1 "Montserrat", sans-serif;
		margin: 0 0 0.5rem 0;
	}

		footer h3 {
			font-size:1.6rem;
			letter-spacing:.1px;
		}

	footer p,
	footer a {
		color:#777;
		margin:0;
	}

#to-top {
	display:inline-block;
	width:14px;
	height:18px;
	position:relative;
	background:#eee;
	color:#777;
	text-align:center;
	font-size:9px;
	line-height:17px;
	transform:rotate(180deg) scale(1.5,1);
	float:right;
	transition:all .2s;
}

	#to-top:hover {
		background:#333;
		color:#fff;
	}

.show-mobile {
	display:none;
}

iframe {
	z-index:10 !important;
}

#message {
	width:340px;
	position:fixed;
	height:400px;
	bottom:0;
	right:50px;
	transform:translateY(355px);
	transition:all .8s;
	background:#f4f4f4;
	border-radius:4px 4px 0 0;
}

	#message.active {
		transform:translateY(0px);
	}

	#message > div {
		padding:20px;
		border-left:1px solid #eee;
		border-right:1px solid #eee;
	}

	#message input,
	#message textarea {
		border: 2px solid #e5e5e5;
		font-family:"Roboto",sans-serif;
		font-size:.8rem;
		height:auto;
		padding:10px;
		margin-bottom:10px;
		width:100%;
	}

	#message p {
		font-size:.8rem;
		font-weight:400;
		color:#000;
		margin-bottom:1.5rem;
	}

	#message small {
		color:#000;
		padding-left:10px;
		font-weight:400;
	}

	#handle {
		display:block;
		background:#312f2f; 
		color:#fff;
		line-height:45px;
		padding:0 17px;
		border-radius:3px 3px 0 0;
		position:relative;
	}

		[data-theme="night"] #handle {
			background:#202332ee;
		}

		#handle:after {
			content:"";
			width:14px;
			height:45px;
			display:inline-block;
			background:url(images/arrow-down.svg) no-repeat center;
			position:absolute;
			right:1rem;
			transform:rotate(180deg);
		}

		.active #handle:after {
			transform:rotate(0deg);
		}

@media only screen and (max-width: 1024px) {
	#site {
		width:1340px;
	}
}

@media only screen and (max-width: 768px) {
	#site,
    .center {
        width:100%;
    }

		.center {
			padding-left:30px;
			padding-right:30px;
		}

	[class*="span"] {
        float: none;
        width: 100%;
		padding:0;
    }

	.show-mobile {
		display:block;
	}

	.hide-mobile {
		display:none !important;
	}

	.logo:after {
		height:80px;
		width:68px;
	}

	.salamander {
		height:80px;
		margin:34px 0 0 39px;
	}

	header ul {
		width:210px;
		margin:0;
		text-align:right;
		flex-direction:column;
		align-items:flex-end;
	}

	header li {
		margin:0 0 7px;
	}

	#home,
	.single {
		padding-top:50px;
		padding-bottom:0;
	}

	h1,
	.single h2 {
		font-size:36px;
		line-height:1.15;
	}

		h1 + p {
			width:100%;
			margin-bottom:50px;
		}

	h2 {
		font-size:24px;
		line-height:1.28;
	}

		h2.border {
			margin-bottom:30px;
		}

		.single h2 {
			margin-bottom:20px;
		}

			.single h2 + p {
				font-size:14px;
			}

	.text-center {
		padding:0 20px;
	}

		.text-center h3 {
			font-size:24px;
			margin-bottom:.5em;
			margin-top:35px;
		}

	#filters {
		margin:50px 0;
		padding-bottom:0;
	}

		#filters.single {
			margin:20px 0 40px;
		}

	#projects,
	#projects > div {
		height:270px;
		width:100%;
		overflow:hidden;
	}

		#projects > div:first-child a {
			width:100%;
			height:100% !important;
			position:absolute;
			transition:right .3s ease;
			opacity:1;
			right:0;
			filter:grayscale(0%);
		}

			#projects > div:first-child h3 {
				opacity:1;
			}

			#projects > div:first-child a.active {
				z-index:2;
			}

			#projects > div:first-child a.out {
				right:100%;
				z-index:3;
			}

	.more-container {
		margin-top:50px;
	}

	.swipe img {
		max-width:none;
		display:inline-block;
		vertical-align:middle;
	}

	.border-top {
		margin-top:50px;
		padding:50px 0 0;
	}

	.yay {
		padding-top:0;
	}

		.yay p br {
			display:none;
		}

	input {
		border-right:1px solid #ddd;
	}

	#call-me {
		width:250px;
	}

	.gallery div {
		height:210px;
		margin-bottom:30px;
		padding:0 !important;
	}

	.mockup img:first-child {
		width:100%;
		margin:0;
		transform:none;
		height:auto;
	}

		.mockup img + img {
			display:none;
		}

	.single > div > p:first-child {
		width:100%;
	}

	.single > div p a {
		margin-bottom:20px;
	}

	#message {
		width:95%;
		right:2.5%;
	}

	footer {
		margin-top:50px;
		padding-top:50px;
	}

		footer .logo-small {
			margin-bottom:10px;
		}

		footer h4 {
			margin:1em 0 2px;
		}

		footer > div:first-child {
			display:block;
		}
}