/* 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; }

/*
Light Blue: #B7C6E5
Mid Blue: #5272A9
Dark Blue: #24324D
*/

* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } /*solve padding problem*/
html { font-size: 16px; }

/* General */
body { position: relative; font-family: 'Signika Negative', 'Source Sans Pro', sans-serif; font-weight: 400; color: #000; min-height: 100vh; }
h1, h2 { font-family: 'Architects Daughter', sans-serif; font-size: 2.2rem; text-align: center; text-transform: uppercase; padding-bottom: 2rem; }
h3 { font-size: 2rem; text-align: center; padding-bottom: 1rem; padding-top: 2rem; }
h4 { font-size: 1.8rem; padding-bottom: 2rem; }
p { line-height: 1.5em; padding-bottom: 1rem; text-align: justify; }
a { color: #5272A9; text-decoration: none; }
a:hover { color: #24324D; }
strong { font-weight: 600; color: #5272A9; }
ol { display: block; font-size: 1.15rem; list-style-type: decimal; margin-bottom: 1rem; padding-left: 2.5rem; }
ol li { line-height: 1.7rem; padding-bottom: 1.3rem; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.clearfix { min-height: 100%; }
.clearfix:after { clear: both; content: ""; display: table; }
.normal { display: none; }
.no-pb { padding-bottom: 0.5rem; }

header { position: fixed; top: 0px; right: 0px; float: left; text-align: center; z-index: 100; box-shadow: 0 5px 12.5px #00000059; }
#menu { padding: 0.75rem 0; }
#menu ul { display: block; text-align: center; }
#menu li { display: none; padding: 0 0.75rem; }
#menu a { color: #FFF; } 
#menu a:hover { color: #B7C6E5; }
#menu .icon { display: block; position: absolute; top: 12px; right: 16px; text-shadow: 0px 0px 15px #FFFFFF55; }
#menu .icon a { color: #24324D; font-size: 2rem; text-align: right; }
#menu.responsive { width: 100%; background-color: #24324D; padding: 0.5rem 0; }
#menu.responsive li { display: block; text-align: left; font-size: 1.25rem; padding: .75rem 0 .75rem 1.5rem; border-bottom: 1px solid #B7C6E535; }
#menu.responsive .icon { display: none; cursor: pointer; }
#menu #closeMenu { display: none; position: absolute; top: 0.75rem; right: 1rem; text-transform: none; font-size: 2em; color: #FFF; cursor: pointer; }
#menu.responsive #closeMenu { display: block; }

#next-best-thing { width: 100%; background-image: url('../img/background-phone.jpg'); background-position: bottom; background-size: cover; background-repeat: no-repeat; margin-bottom: 3rem; padding-bottom: 100px; }
#hero-content { text-align: center; z-index: 1; }
#hero-content img { margin: 1rem 0 2.5rem; width: 150px; }
#hero-content p { font-size: 1.2rem; line-height: 1.5rem; padding-bottom: 1.1rem; text-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.3); }
#hero-content strong { color: #24324D; }

.block { margin-bottom: 3rem; position: relative; }
.block-img { width: 100%; height: 300px; background-position: center; background-size: cover; background-repeat: no-repeat; }
.block-content { padding: 3rem 2.5rem 0; }
#testi-img { background-position: right center; }

#light-blue-box-right, #light-blue-box-left { display: none; }

#bridge-services { text-align: center; margin: 0 auto; }
.services-block { width: 100%; padding: 0 1rem; margin-bottom: 1rem; vertical-align: top; }
.service-during { position: relative; display: inline-block; width: 100%; vertical-align: top; padding: 0 1.5rem; margin: 0 1% 2rem; align-items: center; justify-content: center; }
.service { position: relative; display: inline-flex; width: 100%; vertical-align: top; padding-left: 1.5rem; padding-right: 1.5rem; margin-bottom: 2rem; align-items: center; justify-content: center; }
.empty-service { display: none; background: none; }
#services-during .service-icon { display: flex; justify-content: center; margin-bottom: 1rem; }
.service-during i { display: flex; color: #24324D; font-size: 75px; }
.service-during p { display: flex; justify-content: center; }
.line { width: 150px; border-top: 5px solid #24324D; margin: 0 auto; }
.service i { flex: 1; width: 90px; color: #24324D; font-size: 60px; padding-right: 1rem; }
.service p { flex: 1; text-align: left; vertical-align: top; padding: 0; }
.service-btn { width: 50vw; max-width: 200px; background-color: #5272A9; border: none; text-align: center; text-decoration: none; font-size: 1.25rem; color: white; padding: 15px 0; margin: 0 auto 1.5rem; cursor: pointer; }
.service-btn:hover { background-color: #24324D; border: none; }
.more-services { display: none; }
#bridge-content-3 { padding-top: 2rem; background-color: #B7C6E53B; }
#bridge-content-3 .container p { padding-top: 1rem; padding-bottom: 3rem; }
#bridge-content-2 { padding-top: 4rem; }

.card { border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.card-title { color: #24324D; font-size: 1.3rem; }
.card-body i { font-size: 75px; color: #24324D; }

#testimonials { color: #000; background-color: #FFF; padding: 1.5rem 0; margin-bottom: 0; }
.slideshow-container { position: relative; max-width: 900px; margin: 0 auto; background-color: rgba(183, 198, 229, 0.2); }
.mySlides { display: none; padding: 2rem 30px; text-align: center; }
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -30px; padding: 8px; color: #888; font-weight: bold; font-size: 20px; border-radius: 3px 0 0 3px; user-select: none; }
.next { position: absolute; right: 0; border-radius: 0 3px 3px 0; }
.prev:hover, .next:hover { background-color: #24324D; color: white; }
.dot-container { height: 60px; text-align: center; padding: 20px; }
.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
.active, .dot:hover { background-color: #24324D; }
q { font-size: 0.9rem; line-height: 1.25; }
.author { text-align: center; color: #5272A9; padding-top: 0.5rem; padding-bottom: 0; }
.author a { text-decoration: underline; }
.author a:hover { text-decoration: none; }

#shape { width: 100%; background-color: #FFF; }
#shape-w { width: 100%; background-color: #24324D; }
#shape-2 { width: 100%; background-color: #FFF; vertical-align: text-bottom; }

footer { background-color: #24324D; color: #FFF; padding-top: 1rem; }

#contact { padding: 3rem 2.5rem 0; }
@keyframes pullDown { 0% { opacity: 0; padding: 0 0.5rem; margin-bottom: 0; } 100% { opacity: 1; padding: 0.5rem; margin-bottom: 1rem; } }
#message { text-align: center; padding: 0.5rem; margin-bottom: 1rem; animation-name: pullDown; animation-duration: 2s; animation-timing-function: ease-in-out; }
#contact-form { }
#name, #company, #email, #phone, #project, #question { width: 100%; padding: 0.5rem; background-color: #B7C6E5; margin-bottom: 2.5rem; font-family: 'Source Sans Pro', sans-serif; font-size: 1rem; border: 0; }
#contact-form textarea { height: 15rem; }
#contact-form input::placeholder, #contact-form textarea::placeholder { color: #24324D; font-style: italic; }
#form-left { }
#form-right { }
#buttons { text-align: center; }
#form-button { padding: 0.5rem 1.9rem; background-color: #5272A9; color: #FFF; font-size: 1.1rem; border: 0; border-radius: 0.5rem; transition: 0.5s; }
#form-button:hover { background-color: #B7C6E5; cursor: pointer; }
.cf-turnstile { width: 304px; margin: 0 auto 1.5rem; }

#data { max-width: 720px; padding-top: 2.5rem; margin-right: auto; margin-left: auto; margin-bottom: 1rem; font-size: 1.1rem; line-height: 2.5rem; text-align: center; }
#data a { color: #FFF; }
#data a:hover { color: #B7C6E5; }
#sm-icons i { font-size: 1.6rem; padding: 2rem 0.6rem 0; }

#copyright { width: 100%; text-align: center; background-color: #000; font-size: 16px; padding: 12px 0; }
#copyright a { color: #B7C6E5; }
#copyright a:hover { color: #5272A9; }
#created-by-wolf { display: inline-block; width: 76px; height: 16px; background: url('https://createdbywolf.com/img/footer-by-wolf.png'); background-repeat: no-repeat; background-size: 76px 16px; background-position: center top; text-align: center; }
#created-by-wolf:hover { background: url('https://createdbywolf.com/img/footer-by-wolf-blink.png'); }

/* Animations */
.statusMessage, .errorMessage { width: 100%; padding: 7px; color: #FFF; animation-name: pullDown; animation-duration: 1s; animation-timing-function: ease-in-out; }

@media (min-width: 400px) {
	.phone { display: none; }
	.normal { display: inherit; }
	#next-best-thing { margin-bottom: 5rem; }
}

@media (min-width: 576px) {
	html { font-size: 18px; }
	h3 { padding-top: 3rem; }
	#next-best-thing { background-image: url('../img/background-tablet.jpg'); margin-bottom: 4rem; padding-bottom: 150px; }
	.block { margin-bottom: 5rem; position: relative; }
	#bridge-services { padding-top: 3rem; }
	.services-block { padding: 0 3.5rem; }
	#services-before, #services-during { margin-bottom: 2.5rem; }
	.mySlides { padding: 2rem 60px; }
	.next, .prev { padding: 16px; }
	q { font-size: 1.1rem; }
}

@media (min-width: 768px) {
	html { font-size: 18px; }
	header { position: sticky; right: inherit; width: 100%; float: none; background-color: #24324D; }
	#menu .icon { display: none; }
	#menu li { display: inline-block; }
	h1 { font-size: 2.4rem; }
	#next-best-thing { margin-bottom: 5rem; }
	.block-img { height: 400px; }
	#data-content-1 { display: inline-block; width: 48%; margin-right: 3%; }
	#data-content-2 { display: inline-block; width: 48%; }
	.services-block { padding: 0 5rem; }
	.service-during { width: 45.5%; }
	.empty-service { display: inline-flex; }
	#services-before .service { width: 33%; }
	#bridge-content-3 .container p { padding-top: 0; padding-bottom: 1rem; }
}

@media (min-width: 992px) {
	html { font-size: 20px; }
	#next-best-thing { background-image: url('../img/background-comp.jpg'); margin-bottom: 5rem; padding-bottom: 275px; }
	#hero-content img { margin: 1rem 0 2.5rem; width: 180px; }
	#hero-content p { font-size: 1.05rem; line-height: 1.5rem; padding-bottom: 1.1rem; }
	.block { margin-bottom: 5rem; position: relative; }
	.block-img { height: 500px; }
	.services-block { flex: 1; padding: 0 1.5rem; margin-bottom: 0; }
	.service-btn { display: none; }
	.more-services { display: inherit; }
	#contact-form textarea { height: 22rem; }
	#form-left { display: inline-block; width: 40%; vertical-align: top; margin-right: 5%; }
	#form-right { display: inline-block; width: 54.5%; vertical-align: top; }
}

@media (min-width: 1200px) {
	#next-best-thing { margin-bottom: 8rem; }
	#hero-content img { margin: 1rem 0 2.5rem; width: 232px; }
	#hero-content p { font-size: 1.2rem; line-height: 1.5rem; padding-bottom: 1.1rem; }
	.block { margin-bottom: 5rem; position: relative; }
	#imagebox { height: 550px; }
	.block-img { width: 50%; height: 550px; z-index: 1; }
	#bridge-img, #extra-img, #synergy-img, #testi-img { position: absolute; left: 50%; }
	.block-content { position: absolute; top: 0; width: 600px;  }
	.block-content-right { right: 50%; }
	.block-content-left { left: 50%; height: 550px; }
	#light-blue-box-right, #light-blue-box-left { display: inherit; }
	#light-blue-box-right { position: absolute; left: 50%; width: 50%; height: 550px; background-image: url('../img/light-blue-box-right-comp.png'); background-position: left; background-size: cover; background-repeat: no-repeat; }
	#light-blue-box-left { position: absolute; right: 50%; width: 50%; height: 550px; background-image: url('../img/light-blue-box-left-comp.png'); background-position: right; background-size: cover; background-repeat: no-repeat; }
	/*.service { width: 24.7%; }*/
	.slideshow-container { height: 262px; }
	.mySlides { position: absolute; top: 50%; transform: translate(0, -50%); padding: 0 50px; }
	q { font-size: 0.9rem; }
}