/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, em, img, ins, kbd, q, s, samp, small, strike, strong, 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; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } * { /* Padding-probleem verhelpen */ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

/*
Colors:
Brownish: #B2A68A
Darker brown: #8C8473
*/

* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } /*solve padding problem*/

/* General */
body { position: relative; font-family: 'Signika Negative', sans-serif; font-weight: 400; font-size: 16px; color: #000; min-height: 100vh; }
#page { position: relative; background-color: #FFF; min-height: 100vh; padding-bottom: 41px; }
.clearfix { min-height: 100%; }
.clearfix:after { clear: both; content: ""; display: table; }
h1 { font-size: 2rem; padding: 1rem; text-align: center; background-color: #B2A68A; color: #FFF; }
h2 { font-size: 1.8rem; padding: 1rem; text-align: center; background-color: rgba( 178, 166, 138, 0.25); }
h2 .br { color: #666; }
h3 { font-size: 1.5rem; text-align: left; }
p { font-size: 1.4rem; line-height: 1.3; padding-bottom: 1rem; }
a { text-decoration: none; color: #B2A68A; }
a:hover { text-decoration: underline; }
a img:hover { opacity: 0.7; }
.header-line { width: 250px; margin: 0 auto 3rem; border-bottom: 2px solid #000; }
strong { color: #8C8473; font-variant: small-caps; }
.caps { text-transform: uppercase; }
.container { width: 100%; max-width: 1000px; margin: 0 auto; }
.br { color: #B2A68A; border-color: #B2A68A; }
.page { padding-top: 4rem; }
.section { margin-bottom: 2rem; }
.double-column { display: inline-block; width: 98%; padding: 0 0.5rem; vertical-align: top; }
.single-column { display: inline-block; width: 98%; padding: 0 0.5rem; }
.align-right { text-align: right; }
.note { font-style: italic; }

/* Loading Screen */
#loader { position: fixed; top: 0; right: 0; width: 100%; height: 100%; background-color: #000; text-align: center; vertical-align: middle; z-index: 101; }
#loader-content { position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%); max-width: 640px; text-align: center; }
#loader img { width: 85%; }
#loader.loaded { visibility: hidden; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.5s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.5s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000); }
#loader .loader-txt { color: #B2A68A; font-size: 2rem; margin-top: 2rem; }
#loader .loader-txt:after { content: ' .'; animation: dots 1s steps(5, end) infinite; }

/* Menu */
#header { position: fixed; width: 100%; background-color: #000; z-index: 5; }
#cont-menu { position: relative; width: 100%; max-width: 1200px; text-align: left; margin: 0 auto; padding: 1rem; }
#menu-logo { left: 0; display: inline-block; }
#menu-logo img { height: 24px; }
#menu-logo p { display: none; color: #FFF; font-size: 2rem; font-variant: small-caps; padding-left: 2rem; vertical-align: top; }
#menu-logo span { vertical-align: top; }
#menu { display: inline; transition: 0.5s; }
#menu li { display: none; text-align: left; margin: 0; padding: 0; }
#menu a { color: #FFF; font-size: 1.5rem; font-variant: small-caps; }
#menu a:hover { color: #B2A68A; text-decoration: none; }
#menu .icon { display: block; position: absolute; top: 0.75rem; right: 1rem; }
#menu .icon a { color: #B2A68A; font-size: 32px; text-align: right;}
#lang {}
#menu.responsive { width: 100%; background-color: #000; padding: 0.5rem 0; }
#menu.responsive li { display: block; text-align: left; margin-left: 1.5rem; padding: 0.5rem 0; }
#menu.responsive .icon { display: none; }
li#closeMenu { position: absolute; top: 0.75rem; right: 1rem; text-transform: none; font-size: 2rem; color: #B2A68A; }
#menu.responsive #closeMenu { display: block; margin: 0; padding: 0; }
#menu .active { color: #B2A68A; }

.dropdown { display: inline-block; }
.dropdown-content { }
.dropdown-content a { padding: 0.5rem 1.5rem; display: block; font-size: 0.8rem; }
.menu-item { margin-top: -4.5rem; padding-top: 4.5rem; }

/* Home */
#home h1, #home h2 { background: none; color: inherit; }

/* Hero */
#hero { position: relative; width: 100%; height: 100vh; }
#hero #hero-img { width: 100%; height: 100vh; object-fit: cover; }
#hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba( 140, 132, 115, 0.3); }
#hero-tagline { position: absolute; top: 50%; width: 100%; max-width: 900px; transform: translate( 0, -50%); color: #FFF; text-shadow: 1.5px 1.5px 3.5px rgba( 0, 0, 0, 1); font-size: 2.25rem; text-transform: uppercase; text-align: center; margin: 0 auto; padding: 0 2rem; }
#arrow-down { position: absolute; bottom: 1rem; width: 100%; text-align: center; }
#arrow-down img { max-width: 30vw; animation: jump 3s infinite; }

/* Home About */
#home-about { padding: 4rem 1rem; }
#home-about p { text-align: center; }

/* Price banner */
#price-banner { position: relative; display: block; background-color: #B2A68A; color: #FFF; padding: 1rem 0; }
#price-banner h1 { vertical-align: middle; }

/* Home Projects */
#home-projects { text-align: center; padding-top: 2rem; }
.project { display: inline-block; width: 100%; max-width: 432px; padding: 1rem; vertical-align: top; text-align: left; }
.project a { color: inherit; }
.project a:hover { color: #B2A68A; }
.project img { width: 100%; }
.project img:hover { opacity: 0.7; }
#home-project-text { padding: 0 1rem; }
#project-title { font-size: 1.8rem; padding: 1rem 0; }
#project-type { font-size: 1.5rem; color: #777; }

/* Projects Banner */
#projects-banner { display: block; width: 100%; background-color: #000; color: #B2A68A; text-align: center; padding: 1rem; }
#projects-banner img { display: inline; max-height: 24px; padding-right: 1rem; vertical-align: middle; }
#projects-banner h1 { display: inline; padding-left: 0; padding-right: 0; vertical-align: middle; }
a#projects-banner:hover { text-decoration: none; }
a#projects-banner:hover h1 { text-decoration: underline; }

/* Home Contact */
#home-contact { padding: 4rem 1rem; }
#home-contact p { text-align: center; padding-bottom: 3rem; }
#contact-btn { width: 240px; background-color: #B2A68A; color: #FFF; font-size: 1.75rem; text-align: center; margin: 0 auto; padding: 0.5rem; border-radius: 10px; transition: 0.3s; }
#contact-btn:hover { background-color: #8C8473; }

/* About */

/* Prices */
#prices { text-align: center; }
#prices h1 { margin-bottom: 1rem; }
#prices h2 { margin-bottom: 1rem; }
#prices ul { font-size: 1.25rem; text-align: left; padding: 0 3.75rem; text-indent: -1.75rem; }
#prices li { line-height: 1.5; }
#prices li:before { content: "√"; padding-right: 1rem; color: #B2A68A; }
#prices ul ul li:before { content: "*"; }
#prices p { font-size: 1rem; padding-top: 0.5rem; text-align: left; }
#prices p.top-text { font-size: 1.5rem; }
#price-contact { padding: 0rem 1rem 2rem; }
#price-contact #contact-btn { background-color: #8C8473; color: #FFF; }

/* Portfolio */
#portfolio { text-align: center; }
#websites {}
#web-design-develop { }
#web-design {}
#web-develop {}
#branding {}
#brand-logo { }
.logo { display: inline-block; width: 100%; max-width: 298px; margin: 1rem 0.5rem 0; padding: 0.5rem; vertical-align: top; text-align: left; border: 6px solid rgba( 178, 166, 138, 0.25); }
#portfolio-branding-text { padding: 0 1rem 1rem; }
.logo a { color: inherit; }
.logo a:hover { color: #B2A68A; }
.logo img { width: 100%; padding: 1rem 2rem; }
.logo img:hover { opacity: 0.7; }
#brand-identity {}
#brand-social-media {}

/* Blog */
#blog p, #post p { padding-left: 0.5rem; padding-right: 0.5rem; }
#blog #error-message, #blog #success-message { margin: 0 0 1rem !important; }
#blog form { max-width: 900px; background-color: #DDD; text-align: center; margin: 2rem auto; padding: 1rem 2rem 2rem 2rem; border-radius: 20px; }#blog .nieuwsbrief-header { background-color: inherit; }
#blog input { width: 100%; background-color: #FFF; color: #000; font-size: 1rem; padding: 1rem 1.5rem; border: none; }
#blog input#form-btn { color: #FFF; background-color: #B2A68A; text-transform: uppercase; font-weight: bold; cursor: pointer; transition: 0.3s; }
#blog input#form-btn:hover { background-color: #8C8473; }
#index-post { vertical-align: top; padding: 0 0.5rem; }
#index-post-title { text-align: center; margin: 1rem 0 1rem; }
#index-post-title a { color: #8C8473; transition: 0.3s; }
#index-post-title a:hover { color: #B2A68A; text-decoration: none; }
#index-post-title-line { margin: 0 25% 1rem; border-bottom: 3px solid #8C8473; }
#index-post-img { width: 100%; }
#index-post-descr { font-size: 1.2rem; color: #555; }
#index-post-link { text-align: center; background-color: #000; padding: 0.5rem; margin-bottom: 1.5rem; }
#post-date { font-size: 1rem; color: #8C8473; }
#post-img-container { padding: 2rem 0; margin: 0.5rem 0 1rem; background-color: #E8E8E8; }
#post-img { width: 100%; }
.in-post-container { width: 100%; text-align: center; margin: 2rem 0 1rem; }
.in-post-img { max-width: 100%; }
#recente-artikels { text-align: center; }
#recente-artikels h2 { margin-bottom: 1.5rem; }
#index-post-descr { text-align: left; }
.back-btn { width: 100%; text-align: center; margin-bottom: 2rem; }
.back-btn a { width: inherit; font-size: 1.2rem; text-transform: uppercase; padding: 0.5rem 2rem; color: #000; background-color: #CCC; border-radius: 10px; transition: 0.3s; }
.back-btn a:hover { background-color: #AAA; text-decoration: none; }

/* Contact */
#contact { text-align: center; }
#contact h1, #blog h1, #post h1 { margin-bottom: 2rem; }
#contact form { max-width: 900px; background-color: #DDD; text-align: center; margin: 2rem auto; padding: 2rem; border-radius: 20px; }

#contact input::placeholder, #contact textarea::placeholder, #blog input::placeholder { font-style: italic; color: #8C8473; }
#contact input, #contact select, #contact textarea { width: 100%; background-color: #FFF; color: #000; font-size: 1rem; padding: 1.5rem 2rem; border: none; }
#contact input, #contact select { margin-bottom: 1.5rem; }
#contact select { padding: 1rem; }
#contact textarea { height: 200px; margin-bottom: 0.5rem; }
.g-recaptcha { display: inline-block; margin-bottom: 1.5rem; }
#contact input#form-btn { width: inherit; color: #FFF; background-color: #B2A68A; text-transform: uppercase; font-weight: bold; padding: 1rem 2rem; cursor: pointer; transition: 0.3s; }
#contact input#form-btn:hover { background-color: #8C8473; }
#error-message, #success-message { display: block; width: 100%; background-color: #B2A68A; color: #FFF; font-size: 1.25rem; text-align: center; margin-top: 2rem; padding: 0.5rem 1.5rem; border-radius: 10px; animation-name: pullDown; animation-duration: 1s; animation-timing-function: ease-out; }
#error-message.error { background-color: #CC0000; }

/* Footer */
footer { position: absolute; bottom: 0px; width: 100%; background-color: #000; vertical-align: bottom; }
#cont-footer { width: 100%; max-width: 1200px; color: #FFF; font-size: 1rem; font-weight: 300; margin: 0 auto; padding: 0.75rem 1rem; text-align: right; }
footer img { height: 14px; margin: 0 1rem; }

/* Lightbox */
#lightbox { z-index: 10; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); text-align: center; vertical-align: middle; }
#lightbox img { position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%); max-width: 100%; box-shadow: 0 0 25px #111; -webkit-box-shadow: 0 0 25px #111; -moz-box-shadow: 0 0 25px #111; background-color: #FFF; text-align: center; vertical-align: middle; padding: 50px; }

/* Animations */
@keyframes pullDown { 0% {height: 0px; padding: 0px 2rem; margin-top: 0; } 100% {height: 38px; padding: 0.5rem 1.5rem; margin-top: 2rem; } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes dots { 0%, 20% { color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);} 40% { color: #B2A68A; text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);} 60% { text-shadow: .25em 0 0 #B2A68A, .5em 0 0 rgba(0,0,0,0);} 80%, 100% { text-shadow: .25em 0 0 #B2A68A, .5em 0 0 #B2A68A;}}
@keyframes jump { 0% { margin-bottom: 1rem; } 10% { margin-bottom: 0; } 90% { margin-bottom: 0} 100% { margin-bottom: 1rem; } }

@media ( min-width: 600px ) {
	.page { padding-top: 4.5rem; }
	.double-column { width: 49%; }
	.header-line { width: 340px; }
	#cont-menu { padding: 0.75rem 1rem; }
	#menu-logo img { height: 32px; }
	#menu { position: absolute; right: 1rem; text-align: right; padding: 0.25rem 0; }
	#menu li { display: inline-block; padding-left: 32px; }
	#menu .icon { display: none; }
	li#closeMenu { display: none; }

	.dropdown { display: inline-block; }
	.dropdown-content { display: none; position: absolute; background-color: #000; min-width: 160px; z-index: 1; }
	.dropdown-content a { color: #FFF; padding: 0.8rem 1.2rem; display: block; text-align: left; }
	.dropdown-content a:hover { color: #FFF; }
	.dropdown:hover .dropdown-content { display: block; }

	#hero-tagline { text-shadow: 2px 2px 5px rgba( 0, 0, 0, 1); padding: 0 4rem; }
	.project { width: 49%; }
	.logo { height: 380px; }
	#contact .two-col { display: inline-block; width: 48.5%; }
	#blog #email, #blog #name { display: inline-block; width: 38.5%; }
	#blog .btn { display: inline-block; width: 20%; }
	#index-post { max-width: 600px; }
}

@media ( min-width: 900px ) {
	#menu-logo p { display: inline; }
	#hero-tagline { left: 50%; transform: translate( -50%, -50%); font-size: 3.25rem; }
	#index-post-title { height: 78px; }
	#index-post { display: inline-block; width: 33%; }
}

@media ( min-width: 1200px ) {
	.project { width: 24.5%; }
}