/*
===========================================
Cascading style sheet for hetdepartement.nl
===========================================
*/

html {
	position: relative; 
	background: #000; 
}

body {
	position: relative; 
	box-sizing: border-box; 
	background: #fff;
	font-family: 'Roboto', sans-serif;
	font-weight: 300; 
	font-size: 18px; 
}

img {
	display: block; 
}

cite, i, em {
	font-style: italic; 
}

strong, b {
	font-weight: 700; 
}

.mobile {
	display: block; 
}
.no-mobile {
	display: none; 
}

/*
=======================
Webpage header elements 
=======================
*/

header#top {
	z-index: 5000; 
	position: fixed; 
	width: 100%; 
	height: 70px; 
	padding: 0 10px; 
	box-sizing: border-box; 
	background: #fff; 
	border-bottom: 1px solid #f6f1e9; 
}
	header#top nav {
		position: relative;
		max-width: 960px; 
		margin: 0 auto 20px; 
		padding: 15px 0; 
	}

#logo a {
	float: left; 
	display: block; 
	margin-top: 4px; 
	width: 188px;
	height: 33px; 
	background: transparent url("../images/logo-hi3.png") no-repeat top left; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


#topnav { 
	display: none; 
	float: right; 
	margin-top: 11px; 
}
	#topnav li {
		display: inline; 
		margin-left: 65px; 
	}
	#topnav li:first {
		margin-left: 0; 
	}
		#topnav li a {
			display: inline-block; 
			font-size: 18px; 
			color: #000; 
			text-decoration: none;
			padding-bottom: 4px;
			border-bottom: 2px solid transparent; 
		}
			#topnav li a:hover, 
			#topnav li.current a {
				border-bottom: 2px solid #f6f1e9;
			}
			#topnav li.current a {
				font-weight: 700; 
			}

/*
===================== 
Webpage main elements
===================== 
*/

section#main {
	clear: both; 
	float: none; 
	padding-top: 70px; 
	z-index: 100; 
}

/*
=========================
Featured webpage elements
=========================
*/

section#featured article {
	max-width: 960px; 
	margin: 0 auto; 
	padding: 40px 10px 40px; 
}
	section#posts h1,
	section#posts h1 a, 
	section#post h1, 
	section#featured article h1, 
	section#newsletter article h1, 
	section#recent-projects article h1 {
		font-family: 'Playfair Display', serif; 
		font-weight: 900;
		font-style: italic; 
		color: #000000; 
		line-height: 1.2; 
		margin-bottom: 30px; 
		font-size: 40px; 
		text-decoration: none; 
	}
	section#featured figure {
		padding-bottom: 75px; 
		background: transparent url("../images/dash-vertical.png") no-repeat center bottom; 
		margin-bottom: 20px; 
	}
		section#featured figure img {
			width: 100%;
			height: auto; 
		}


/*
=============================
Webpage main content elements
=============================
*/

section#project,
section#content {
	max-width: 960px; 
	margin: 0 auto; 
	padding: 40px 10px 30px; 
}
	section#testimonials h1, 
	section#project h1, 
	section#recent-posts h1.top, 
	section#content h1 {
		text-transform: uppercase; 
		color: #fe0000;
		font-weight: 600; 
		font-size: 21px; /* This was: 30 */
		text-align: center; 
		margin-bottom: 20px; 
	}
	section#recent-posts figure {
		width: 100%; 
		padding-bottom: 20px; 
	}
		section#recent-posts figure img {
			width: 100%; 
			height: auto; 
		}
	section#main a, 
	section#content a {
		color: #000; 
	}

/*
==================
Blog post elements
================== 
*/

section#nav {
	z-index: 5000; 
	position: fixed; 
	padding: 10px 10px; 
	width: 100%; 
	box-sizing: border-box; 
}
	section#nav .container {
		position: relative; 
	}
	section#nav .index, 
	section#nav .MarkupPagerNav {
		text-align: center; 
		width: 100%;
	}
		section#nav .MarkupPagerNav li {
			display: inline; 
		}
	section#nav .index>a {
		padding-left: 25px; 
		background: transparent url("../images/tiles.png") no-repeat center left; 
	}
	section#nav a.prev, 
	section#nav .MarkupPagerNavPrevious a {
		position: absolute; 
		top: 0;
		left: 0; 
		text-align: left; 
		padding-left: 20px; 
		background: transparent url("../images/previous.png") no-repeat center left; 
	}
	section#nav a.next, 
	section#nav .MarkupPagerNavNext a {
		position: absolute; 
		top: 0;
		right: 0; 
		text-align: right; 
		padding-right: 20px; 
		background: transparent url("../images/next.png") no-repeat center right; 
	}
	section#nav .MarkupPagerNavOn {
		font-weight: 700; 
	}
	section#nav a {
		color: #000;
		text-decoration: none; 
	}

section#overview article, 
section#posts article, 
section#recent-projects article {
	padding: 40px 10px; 
	box-sizing: border-box; 
}
	section#recent-projects article {
		padding: 20px 0px; 
		box-sizing: border-box; 
	}
		section#recent-projects article:first-child {
			padding-top: 10px !important; 
		}
	section#overview article:first-child {
		padding-top: 0 !important; 
		margin-top: 0; 
	}
	section#overview figure, 
	section#posts figure, 
	section#recent-projects figure {
		padding-bottom: 75px; 
		background: transparent url("../images/dash-vertical.png") no-repeat center bottom; 
		margin-bottom: 20px; 
	}
	section#overview figure img, 
	section#posts figure img, 
	section#recent-projects figure img {
		width: 100%; 
		height: auto; 
	}

section#post {
	padding-top: 200px; 
	background: transparent url("../images/background.jpg") no-repeat center top; 
	background-size: 100% auto; 
}
	section#post h1 {
		text-align: center; 
	}
	section#post article {
		box-sizing: border-box; 
		padding: 60px 10px; 
	}
	section#post img {
		max-width: 100%; 
		height: auto; 
	}
	section#post article p>img.align_center {
		width: 100%; 
		height: auto; 
		margin: 16px 0; 
	}
	section#post h2,
	section#post h3 {
		margin-top: 40px; 
	}
	
/* On the home page */
section#recent-posts {
	margin-bottom: 40px; 
}
	section#recent-posts h1.top {
		margin-bottom: 40px !important; 
	}
	section#recent-posts h1.highlight a {
		font-size: 20px; 
		font-weight: 700; 
		text-decoration: none;
		color: #000; 
		line-height: 2; 
	}
		section#recent-posts article {
			padding: 40px 10px; 
		}
		section#recent-posts figure {
			width: 100%;
		}

/*
===========================
What we like to do elements
===========================
*/

section#overview,
section#what-we-do {
	clear: both; 
}
	section#testimonials header,
	section#projects-main header,
	section#overview header,
	section#recent-projects>header, 
	section#what-we-do>header {
		padding: 40px 10px 30px; 
	}
		section#overview header {
			padding-bottom: 0; 
		}
		section#projects-main>header>h1,
		section#overview>header>h1, 
		section#recent-projects>header>h1, 
		section#what-we-do>header>h1 {
			text-align: center;
			font-style: italic; 
			font-weight: 400; 
		}
			section#projects-main>header>h1:after,
			section#overview>header>h1:after, 
			section#recent-projects>header>h1:after,  
			section#what-we-do>header>h1:after {
				padding-top: 30px; 
				content: " ";
				display: block;
				width: 18px;
				height: 11px; 
				background: transparent url("../images/down.png") no-repeat center center; 
				margin: 0 auto; 
			}
	section#what-we-do article {
		clear: both;
		max-width: 960px; 
		margin: 0 auto; 
		padding: 0 10px 80px; 
	}
		section#what-we-do figure {
			max-width: 150px; 
			padding-bottom: 75px; 
			background: transparent url("../images/dash-vertical.png") no-repeat center bottom; 
			margin: 0 auto 20px; 
		}
			section#what-we-do figure img {
				width: 100%;
				height: auto; 
			}
		section#what-we-do article h1, 
		section#post h2,
		section#form h2 {
			text-transform: uppercase; 
			color: #fe0000;
			font-weight: 600; 
			font-size: 22px; 
		}
		section#post h3 {
			font-weight: 600; 
			font-size: 20px; 		
		}

/*
============
Testimonials 
============
*/

section#testimonials {
	z-index: 500; 
	position: relative; 
	padding-bottom: 60px; 
}
	section#testimonials h2 {
		font-weight: 700; 
		text-align: center;
		line-height: 2; 
	}
	section#testimonials h3 {
		text-align: center; 
		line-height: 2; 
		margin-bottom: 30px; 
	}
	section#testimonials .quote {
		position: relative; 
		background: #fff;
		width: 100%;
		box-sizing: border-box; 
		padding: 100px 30px 30px; 
		z-index: 510; 
		margin-top: 70px; 
	}
		section#testimonials .quote p {
			line-height: 1.6; 
			margin-bottom: 16px; 
		}
	section#testimonials div.photo {
		position: absolute;
		top: 0; 
		left: 0; 
		width: 100%; 
		text-align: center;
		z-index: 520;
	}
		section#testimonials div.photo img {
			position: relative; 
			display: block;
			margin: 0 auto; 
			width: 140px;
			height: auto; 
			border-radius: 50%;
			border: 5px solid #fff;
			box-shadow: 0 0 0 1px #f6f1e9; 
		}
	.template-project section#testimonials .quote {
		border: 0 !important; 
	}
	.template-project section#testimonials {
		padding-top: 1px; 
	}
.carousel-cell {
	width: 100%;
	height: auto; 
}

/* Hide carousel arrows on all but large screen */
button.previous, button.next {
	display: none;
}
.flickity-page-dots { 
	display: block; 
}

/*
=====================
Contact page elements
=====================
*/

section#contact {
	padding: 40px 10px; 
	max-width: 960px; 
	margin: 0 auto; 
}
	section#contact article {
		width: 100%; 
	}
	section#contact article h1 {
		color: #000000;
		font-weight: 700; 
		text-transform: uppercase;
		font-size: 25px;
		line-height: 1.8;
	}
	section#contact article a {
		text-decoration: none;
		color: #000; 
	}
		section#contact article a:hover {
			text-decoration: underline;
		}


section#map {
	clear: both; 
	background: #f6f1e9; 
	width: 100%; 
}
	section#map img {
		width: 100%; 
		height: auto; 
	}

/*
===============================
Webpage call to action elements
===============================
*/

section#call-to-action {
	clear: both; 
	padding: 60px 10px 30px; 
}
	section#call-to-action p.text,
	section#call-to-action p.button {
		text-align: center; 
	}
	section#call-to-action p.button img {
		display: inline; 
		max-width: 100%;
		height: auto; 
	}
	section#call-to-action p.text {
		padding-bottom: 40px; 
	}

/*
===========================
Webpage newsletter elements
===========================
*/

section#newsletter {
	clear: both; 
	margin: 40px 0; 
	padding: 30px 10px 30px; 
	background: transparent url("../images/newsletter.jpg") no-repeat center center; 
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover;
	text-align: center; 
}
body.template-home section#newsletter {
	margin: 0 !important;
}
	section#newsletter article h1 {
		text-align: center; 
		font-size: 30px; 
		margin-top: 0;
		padding-top: 0;
	}
	section#newsletter article input {
		font-family: 'Roboto', sans-serif; 
		font-size: 16px; 
		font-weight: 300;
		border: 1px solid #ccc;
		padding: 5px; 
		margin: 0 10px 30px; 
		max-width: 40%;
		min-width: 200px; 
		box-sizing: border-box; 
		text-align: center; 
	}
	section#newsletter article input[type=image] {
		border: 0; 
		margin: 0; 
	}


/*
======================= 
Webpage footer elements
======================= 
*/

footer#bottom {
	margin-top: 40px; 
	background: #000; 
}

#always {
	padding: 20px 10px; 
	background: #f6f1e9;
}
	#always p {
		text-align: center; 
		text-transform: uppercase; 
	}

#appendix {
	position: relative; 
	max-width: 960px; 
	margin: 0 auto; 
	padding: 15px 10px 15px; 
}
	#appendix p, #appendix a {
		color: #fff; 
		text-decoration: none; 
		font-size: 12px; 
	}
	#appendix a {
		text-decoration: underline; 
	}
	#appendix nav {
		/* Nothing here */ 
	}
		#appendix nav li {
			display: inline; 
		}
			#appendix nav li:before {
				content: '\00B7';
				padding-right: 5px;
				color: #fff;
			}
			#appendix nav li:first-child:before {
				content: '';
				padding: 0; 
			}

/*
=========================
Rules for typed.js script
=========================
*/

.typed-cursor{
	opacity: 1;
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
}
@keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-webkit-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-moz-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}

/*
========================== 
Text elements spacing etc.
========================== 
*/

section#recent-projects>header>h1, 
section#what-we-do h1,
section#post h2,
section#post h3 {
	line-height: 2; 
}
section#overview p, 
section#project p, 
section#content p,
section#featured p, 
section#posts p, 
section#post p, 
section#contact p, 
section#contact li,
section#recent-posts p,  
section#recent-projects p, 
section#what-we-do p {
	line-height: 2; 
	margin-bottom: 20px; 
}
	section#project p {
		text-align: center; 
		margin: 0; 
	}
section#contact li {
	margin: 0; 
}
section#overview article>.container>h1 {
	line-height: 2; 
	color: #fe0000; 
	font-size: 24px; 
	text-transform: uppercase; 
	font-weight: 700; 
}

/*
==================================
Elements on projects overview page
==================================
*/

div.option {
	cursor: pointer; 
	display: inline-block; 
}

#projects {
	padding-top: 20px; 
}

#project-list {
	position: relative; 
	width: 100%; 
	padding: 0; 
	box-sizing: border-box; 
	display: flex;
	flex-wrap: wrap;
}

#project-list div { 
	float: left; 
	width: 100%;
	margin: 0 10px; 
	white-space: nowrap; 
	overflow: hidden; 
	height: auto; 
	overflow: hidden; 
}
	#project-list div img { 
		width: 100%;
		height: auto; 
		border: 1px solid #C3BFB5;
		box-sizing: border-box; 
	}
	#project-list div.first {
		/* width: calc(50% - 20px); */
	}
#project-list a {
	text-decoration: none !important;
	color: #000 !important;
}
#project-list h2 {  
	font-weight: 700; 
	line-height: 1.2; 
	margin-top: 10px; 
}
#project-list p {
	line-height: 1.6; 
	margin-bottom: 30px; 
}

/*
===========================
Elements for project filter
===========================
*/

#filter {
	text-align: justify;
	font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */
	padding: 0; 
	width: 98%;
	box-sizing: border-box; 
}
	#filter div.option {
	  width: 22%;
	  height: auto;
	  display: inline-block;
	}
		#filter div.option p {
			margin: 20px 0 40px;
			font-size: 12px;  /*16px*/
			text-align: center; 
			line-height: 1.4; /*NEW*/
		}
		#filter div.option a {
			color: #000;
			text-decoration: none;
		}
			#filter div:hover a {
				text-decoration: underline;
			}
	#filter div.icon {
		display: block; 
		width: 70px;
		height: 70px; 
		max-width: 70px; 
		max-height: 70px; 
		margin: 0 auto; 
		padding: 0 !important; 
	}
		#filter div.icon.cat1052 {
			background: transparent url("../images/strategy.png") no-repeat center center; 
			-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;	background-size: cover;
		}
			#filter div.option.active div.icon.cat1052 {
				background: transparent url("../images/strategy-on.png") no-repeat center center; 
				-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;	background-size: cover;
			}
		#filter div.icon.cat1053 {
			background: transparent url("../images/identity.png") no-repeat center center; 
			-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;	background-size: cover;
		}
			#filter div.option.active div.icon.cat1053 {
				background: transparent url("../images/identity-on.png") no-repeat center center; 
				-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;	background-size: cover;
			}
		#filter div.icon.cat1054 {
			background: transparent url("../images/print.png") no-repeat center center; 
			-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;	background-size: cover;
		}
			#filter div.option.active div.icon.cat1054 {
				background: transparent url("../images/print-on.png") no-repeat center center; 
				-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;	background-size: cover;
			}
		#filter div.icon.cat1055 {
			background: transparent url("../images/online.png") no-repeat center center; 
			-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;	background-size: cover;
		}
			#filter div.option.active div.icon.cat1055 {
				background: transparent url("../images/online-on.png") no-repeat center center; 
				-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;	background-size: cover;
			}
		
	/* Ensures there are at least 2 lines of text, so justification works */
	#filter:after {
	  content: '';
	  width: 100%; 
	  display: inline-block;
	}

/*
====================================================
Spacing for pages with fixed nav bar below main menu
====================================================
*/

body.template-shop #content, 
body.template-product #content, 
body.template-cart #content, 
body.template-register #content, 
body.template-password-restore #content, 
body.template-account #content, 
body.template-profile #content, 
body.template-orders #content, 
body.template-downloads #content, 
body.template-checkout #content, 
body.template-project #content, 
body.template-project #project,
body.template-posts #content, 
body.template-posts #posts, 
body.template-post #content {
	margin-top: 40px !important; 
}

/*
=================
The clearfix hack
================= 
*/

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix { 
	display: inline-block; 
}
* html .clearfix { 
	height: 1%; 
}
.clearfix { 
	display: block; 
}

/*
=================== 
Miscellaneous rules
===================
*/

.even, 
.beige {
	background: #f6f1e9; 
}
.query {
	margin: 0 0 30px; 
	text-align: center; 
	font-style: italic; 
}
.link, 
.note {
	margin-top: 30px; 
	text-align: center; 
}
	.link img, 
	.note img {
		display: inline; 
	}
a.more {
	color: #000;
	text-decoration: underline; 
}
	a.more:after {
		content: "\00a0\00BB";
	}
.container {
	max-width: 960px; 
	margin: 0 auto; 
}
#editpage {
	position: fixed;
	top: 0;
	left: 0; 
	padding: 10px; 
	background: #f6f1e9;
	text-decoration: none;
	font-weight: 700; 
	border-right: 2px solid #fff; 
	border-bottom: 2px solid #fff; 
	color: #000; 
	z-index: 7500; 
}
.hide {
	display: none;
}
.show {
	display: block; 
}
.active {
	font-weight: 700 !important; 
}
p.read-more {
	text-align: center;
}
	p.read-more img {
		display: inline-block;
		margin: 0 auto; 
	}

/*
===================
Sitemap UL elements
===================
*/

ul.sitemap li {
	margin-left: 2em; 
	list-style: square; 
	line-height: 1.8; 
}


/*
===================
Mobile menu overlay
===================
*/

/* The Overlay (background) */
.overlay {
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 99999; /* Sit on top */
    left: 0;
    top: 0;
	padding: 0;
	margin: 0; 
    background: #fff;
    overflow: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

.overlay-button {
	width: 100%;
	background: #f6f1e9; 
	padding: 20px 10px 20px; 
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
	padding: 30px 10px 10px;
	font-size: 32px;
}

/* The navigation links inside the overlay */
.overlay li {
	margin-bottom: 25px; 
}
.overlay a {
	text-decoration: none;
	color: #000;
}
	.overlay a:hover, 
	.overlay li.current a {
		border-bottom: 2px solid #f6f1e9;
	}
	.overlay li.current a {
		font-weight: 700; 
	}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #000;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    font-size: 18px;
	border: 0;
	background: transparent;
	padding: 0; 
	padding-top: 5px; 
}

/* Open button */
.openbtn {
    position: absolute;
    top: 18px;
    right: 0;
    font-size: 18px;
	border: 0;
	background: transparent;
	padding: 0; 
	padding-top: 5px; 
	padding-left: 18px; 
	background: transparent url("../images/menu-sm.png") no-repeat left 11px; 
	font-family: 'Roboto', sans-serif;
	font-weight: 300; 
}
.lightbox {
	display: none; 
}

/*
=================
CSS media queries
=================
*/

@media (min-width: 490px) {

	/* Project list */
	#project-list div { 
		float: left; 
		width: calc(50% - 20px);
		margin: 0 10px; 
		white-space: nowrap; 
		overflow: hidden; 
		height: auto; 
		overflow: hidden; 
	}
	
	/* Contact */
	section#contact article {
		width: 50%; 
		float: left; 
	}
}

@media (min-width: 500px) {
	/* Login pane */
	table.login {
		width: 480px; 
	}	
}

@media (min-width: 980px) {
	#topnav {
		display: block; 
	}
	.mobile, .openbtn { display: none; }
	.no-mobile { display: block; }

	/* Logo */
	#logo a {
		float: left; 
		display: block; 
		margin-top: 0 !important; 
		width: 227px;
		height: 40px; 
		background: transparent url("../images/logo-hi3.png") no-repeat top left; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	/* Top of the webpage */
	section#featured figure {
		float: left; 
		margin: 0; 
		padding: 0; 
		padding-right: 95px; 
		background: transparent url("../images/dash.png") no-repeat 555px 30px; 
	}
	
	/* Other elements */
	section#overview figure, 
	section#posts figure, 
	section#recent-projects figure {
		float: left; 
		background: yellow; 
		padding-right: 95px; 
		background: transparent url("../images/dash.png") no-repeat 555px 30px; 
	}
	section#overview .even figure, 
	section#posts .even figure, 
	section#recent-projects .even figure {
		float: right; 
		padding-right: 0; 
		padding-left: 95px; 
		background: transparent url("../images/dash.png") no-repeat 15px 30px; 
	}
	section#overview figure img, 
	section#posts figure img, 
	section#recent-projects figure img {
		max-width: 540px; 
		height: auto; 
	}
	/* Make sure images scale nicely */
	section#post article { 
		padding: 60px 60px; 
	}
	section#post article p>img.align_center {
		width: 960px !important; 
		max-width: 960px !important; 
		height: auto; 
		margin: 40px -60px !important; 
	}
	
	/* Recent posts */
	section#recent-posts figure {
		float: right;
		padding: 0; 
		padding-left: 40px; 
		max-width: 50%; 
		box-sizing: border-box; 
	}
	
	/* Footer */
	#appendix nav {
		position: absolute; 
		top: 10px;
		right: 10px; 
	}

	/* Project filters */
	#filter {
		text-align: justify;
		font-size: 0.1px; /* IE 9/10 don't like font-size: 0; */
		padding: 0 80px 40px; 
		width: 100%;
		box-sizing: border-box; 
	}
		#filter div.option {
		  width: 20%;
		  height: auto;
		  display: inline-block;
		}
			#filter div.option p {
				margin: 20px 0 0;
				font-size: 16px; 
				text-align: center; 
			}
			#filter div.option a {
				color: #000;
				text-decoration: none;
			}
				#filter div:hover a {
					text-decoration: underline;
				}
		#filter div.icon {
			display: block; 
			width: 125px;
			height: 125px; 
			max-width: 125px; 
			max-height: 125px; 
			margin: 0 auto; 
			padding: 0 !important; 
		}
	
	/* Project list */
	#projects {
		padding: 0; 
		background: transparent url("../images/pattern.png") repeat top left; 
	}
	#project-list div { 
		float: left; 
		width: calc(25% - 20px);
		margin: 0 10px; 
		white-space: nowrap; 
		overflow: hidden; 
		height: 232px; 
		overflow: hidden; 
	}
	
	/* What we do */
	section#what-we-do figure {
		max-width: auto; 
		padding: 0; 
		margin: 0 20px 20px 0; 
		float: left; 
		padding-right: 85px; 
		background: transparent url("../images/dash.png") no-repeat 170px center; 
	}
	
	/* Product page */
	.template-product figure {
		float: left; 
		max-width: 43%; 
		height: auto;
		margin: 0; 
		padding-right: 80px; 
	}
	
	/* Enable CSS Lightbox */
	.lightbox { 
		position: fixed;
		top: 0;
		left: 0; 
		display: none; 
		z-index: 999999;
		width: 100%; 
		height: 100vh;
		margin: auto;
		text-align: center; 
		background: rgba(0, 0, 0, 0.6); 
	}
		.lightbox img {
			display: block; 
			margin: 0 auto; 
			max-width: 100%; 
			max-height: 90vh; 
			padding: 30px; 
			box-sizing: border-box; 
		}
	.lightbox:target {
		/** Remove default browser outline */
		outline: none;

		/** Unhide lightbox **/
		display: block;
	}
	
	/* Testimonial arrows */
	section#testimonials .quote {
		border-left: 80px solid #f6f1e9; 
		border-right: 80px solid #f6f1e9; 
	}
	button.previous {
		display: block;
	}
	button.next {
		display: block;
	}
	.flickity-page-dots {
		display: none;
	}
}









/*
============================
End of cascading style sheet 
============================
*/