/*
The style of monsterbrands.nl, as the WordPress theme "Monsterbrands.nl" (2016) had it, with the fonts on the site
itself instead of at Google, and grids where the theme counted items in PHP to make rows.

Colours:
off-white: rgb(254, 253, 252)
pink: rgb(219, 10, 91)
purple: rgb(103, 65, 114)
dark grey: rgb(32, 32, 32)
blue grey: rgb(108, 122, 137)
*/

@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/lato-300.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/lato-300-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/lato-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/lato-700.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/lato-700-italic.woff2') format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/ubuntu-300.woff2') format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ubuntu-700.woff2') format('woff2'); }

* { margin: 0; padding: 0; -webkit-appearance: none; outline: 0; }
img { max-width: 100%; height: auto; border: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
/* A button lays out what is in it as a block does, from the top (the theme had divs here). */
.hamburger, .arrow { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }

body { font-family: 'Lato'; max-width: 100%; overflow-x: hidden; }
h1 { font-family: 'Ubuntu'; font-weight: 300; font-size: 52px; }
h2 { font-family: 'Ubuntu'; font-weight: 300; font-size: 52px; line-height: 1.5em; }
h4 { font-family: 'Ubuntu'; font-size: 32px; font-weight: 700; text-transform: uppercase; }
h5, .lead { font-family: 'Lato'; font-weight: 300; font-size: 22px; line-height: 1.3em; font-style: italic; }
h6 { font-family: 'Ubuntu'; font-size: 16px; font-weight: 700; text-transform: uppercase; }
p { font-family: 'Lato'; font-weight: 300; font-size: 16px; line-height: 1.4em; margin: 10px 0; }
.lead p { font: inherit; margin: 0; }
.lead p + p { margin-top: 0.6em; }

div.wrapper { width: 960px; margin: 0 auto; }
.menu-active { position: fixed; }

/* mobile menu */
div#mobilemenu { width: 280px; height: 100%; overflow-y: auto !important; background-color: rgba(48, 48, 48, 0.97); position: fixed; z-index: 50; top: 0; right: -280px; -webkit-overflow-scrolling: touch; transition: 0.3s right; }
div#mobilemenu.open { right: 0; }
div#mobilemenu ul { list-style-type: none; padding: 20px 20px 20vh 20px; margin-top: 50px; }
div#mobilemenu li { padding: 15px 0; border-top: solid 1px #444; }
div#mobilemenu li:last-child { border-bottom: solid 1px #444; }
div#mobilemenu a { text-decoration: none; font-family: 'Ubuntu'; font-size: 16px; font-weight: 700; text-transform: uppercase; color: rgb(255, 255, 255); transition: 0.2s color; }
div#mobilemenu a:hover { color: rgb(219, 10, 91); }

/* top */
section#top { padding: 15px 0; position: absolute; top: 0; z-index: 100; width: 100%; }
section#top div.top_holder { overflow: visible; }
section#top div.logo { float: left; width: 220px; height: 32px; }
section#top div.logo img { display: block; }
section#top .topnav { float: right; }
section#top .topnav ul { list-style-type: none; margin-top: 10px; }
section#top .topnav li { display: inline-block; margin: 0 4px; }
section#top .topnav a { text-decoration: none; text-transform: uppercase; color: rgb(255, 255, 255);
	font-family: 'Ubuntu'; font-size: 16px; font-weight: 700; padding: 4px 8px; border-radius: 4px;
	text-shadow: 2px 2px 1px rgba(35, 35, 35, 0.83);
	transition: 0.2s all; }
section#top .topnav a:hover { color: rgb(219, 10, 91); text-shadow: none; background-color: rgba(255, 255, 255, 0.9); }
section#top .hamburger { display: none; float: right; width: 24px; height: 24px; box-sizing: content-box; cursor: pointer; padding: 6px; border: 3px solid rgb(255, 255, 255); border-radius: 6px; position: relative; bottom: 4px; transition: 0.2s all; }
section#top .hamburger:hover { background-color: rgb(219, 10, 91); }
section#top .hamburger svg { display: block; position: relative; top: 50%; transform: translate(0, -50%); }
section#top div.top_holder::after { content: ''; display: block; clear: both; }

/* slider (home page) */
section#slider { height: 550px; max-height: 75vh; position: relative; }
section#slider div.slider { width: 100%; height: 100%; position: relative; overflow: hidden; }
section#slider div.slider > div { width: 100%; height: 100%; position: absolute; z-index: 1;
	background-position: center center; background-size: cover; background-repeat: no-repeat; }
section#slider div.slider > div.active { z-index: 3; }
section#slider div.slider > div.next { z-index: 2; }
section#slider div.slider > div.leaving { opacity: 0; transition: opacity 1s; }
section#slider div.details { position: absolute; right: 10%; bottom: 30px; text-align: right;
	background-color: rgba(255, 255, 255, 0.90); border-radius: 8px;
	box-shadow: 10px 10px 26px -3px rgba(0, 0, 0, 0.36);
	transition: 0.2s background-color, 0.2s box-shadow; }
section#slider div.details:hover { background-color: rgba(255, 255, 255, 1); box-shadow: 10px 10px 26px -3px rgba(0, 0, 0, 0.5); }
section#slider div.details a { text-decoration: none; padding: 10px; display: block; }
section#slider div.details p { color: rgb(108, 122, 137); margin: 0 0 10px 0; }
section#slider div.details h5 { color: rgb(103, 65, 114); }
section#slider div.details h5 span { display: inline-block; background-color: rgb(103, 65, 114); border-radius: 50%;
	height: 18px; width: 18px; padding: 2px; position: relative; top: 3px; }
section#slider div.details h5 span img { display: block; position: relative; top: 50%; transform: translate(0, -50%); }
section#slider div.details h6 { color: rgb(219, 10, 91); }

/* visual (other pages) */
section#visual { height: 550px; max-height: 75vh; position: relative; }
section#visual div.visual { width: 100%; height: 100%; position: relative; overflow: hidden; }
section#visual div.visual > div { width: 100%; height: 100%; position: absolute;
	background-position: center center; background-size: cover; background-repeat: no-repeat; }
section#visual div.details { position: absolute; right: 10%; bottom: 30px; text-align: right; padding: 10px; max-width: 250px; border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.90);
	box-shadow: 10px 10px 26px -3px rgba(0, 0, 0, 0.36); }
section#visual div.details h6 { color: rgb(219, 10, 91); }
section#visual div.details p { color: rgb(108, 122, 137); margin: 0 0 10px 0; }

section#separator { background-image: url('../images/separator_pattern.png'); background-repeat: repeat; height: 24px; width: 100%; }

/* intro */
section#intro { background-color: rgb(254, 253, 252); padding: 20px 0 40px 0; }
section#intro h1 { text-align: center; color: rgb(219, 10, 91); }
section#intro .lead { text-align: center; margin: 10px auto 20px auto; width: 800px; color: rgb(103, 65, 114); }
section#intro h6 { color: rgb(219, 10, 91); }
section#intro p { color: rgb(103, 65, 114); }
section#intro a { color: rgb(103, 65, 114); }
section#intro div.row { overflow: auto; padding: 10px 0; }
section#intro div.col { float: left; width: calc((100% / 3) - 40px); margin-right: 40px; }
section#intro a.readmore { background-color: rgb(219, 10, 91); color: #fff; text-decoration: none; padding: 4px 8px; border-radius: 4px; display: inline-block; margin-top: 10px; transition: 0.2s background-color; }
section#intro a.readmore:hover { background-color: rgb(103, 65, 114); }

/* the whole portfolio (its page) */
section#portfolio_complete { background-color: rgb(254, 253, 252); padding: 0 0 40px 0; }
section#portfolio_complete div.portfolio_complete_holder { display: grid; grid-template-columns: repeat(3, 1fr); }
section#portfolio_complete div.col { padding: 0 20px 30px 0; }
section#portfolio_complete div.col img { display: block; margin: 0 auto; }
section#portfolio_complete div.col p { color: rgb(103, 65, 114); }
section#portfolio_complete div.url { text-align: center; padding-top: 2px; margin-top: 4px; border-top: 1px solid rgb(222, 222, 222); }
section#portfolio_complete div.url a { color: rgb(103, 65, 114); text-decoration: none; }
section#portfolio_complete div.url a:hover { text-decoration: underline; }
section#portfolio_complete a.readmore { background-color: rgb(219, 10, 91); color: #fff; text-decoration: none; padding: 4px 8px; border-radius: 4px; display: inline-block; margin-top: 10px; transition: 0.2s background-color; }
section#portfolio_complete a.readmore:hover { background-color: rgb(103, 65, 114); }

/* way of working (home page) */
section#main { background-color: rgb(108, 122, 137); padding: 20px 0; color: rgb(239, 239, 239); }
section#main div.container { padding: 10px 0; border-top: dashed 1px rgb(239, 239, 239); border-bottom: dashed 1px rgb(239, 239, 239); }
section#main a { color: rgb(239, 239, 239); }
section#main h2 { text-align: center; }
section#main .lead { text-align: center; margin: 20px auto; width: 800px; }
section#main div.row { overflow: auto; padding: 10px 0; }
section#main div.col { float: left; width: calc((100% / 3) - 40px); margin-right: 40px; }
section#main div.row.actions { padding: 0 0 30px calc(200% / 3); }
section#main a.readmore { text-decoration: none; display: inline-block; padding: 4px 8px; border-radius: 6px; border: 2px solid #fff; transition: 0.2s background-color; }
section#main a.readmore:hover { background-color: rgba(255, 255, 255, 0.1); }

/* call to action */
section#cta { background-color: rgb(108, 122, 137); padding: 20px 0; color: rgb(239, 239, 239); }
section#cta div.container { padding: 10px 0; border-top: dashed 1px rgb(239, 239, 239); border-bottom: dashed 1px rgb(239, 239, 239); }
section#cta a { color: rgb(239, 239, 239); }
section#cta div.row { overflow: auto; padding: 10px 0; }
section#cta div.col:first-child { float: left; width: calc((200% / 3) - 40px); margin-right: 40px; }
section#cta div.col:last-child { float: left; width: calc((100% / 3) - 40px); margin-right: 40px; text-align: center; }
section#cta a.readmore { text-decoration: none; display: inline-block; padding: 4px 8px; border-radius: 6px; border: 2px solid #fff; transition: 0.2s background-color; }
section#cta a.readmore:hover { background-color: rgba(255, 255, 255, 0.1); }

/* contact form */
section#contact { background-color: rgb(108, 122, 137); padding: 20px 0; color: rgb(239, 239, 239); }
section#contact div.container { padding: 10px 0; border-top: dashed 1px rgb(239, 239, 239); border-bottom: dashed 1px rgb(239, 239, 239); }
section#contact div.contact_holder { padding: 20px 0; }
section#contact div.row { overflow: auto; }
section#contact div.row:first-child p { text-align: center; margin: 0 !important; }
section#contact div.row:last-child { padding-bottom: 20px; }
section#contact div#errorbox { background-color: rgb(103, 65, 114); border: 2px solid rgb(255, 255, 255); color: rgb(255, 255, 255); width: 290px; padding: 10px; margin: 20px auto; border-radius: 8px; display: none; text-align: center; }
section#contact div#errorbox.show { display: block; }
section#contact div#errorbox p { margin: 0 0 10px 0 !important; }
section#contact div#errorbox ul { text-align: center; list-style-position: inside; }
section#contact div#errorbox li { font-size: 16px; font-weight: 300; }
section#contact h6 { width: calc(100% - 40px); padding: 6px 0; margin: 30px 0 15px 0; border-top: 1px solid rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); }
section#contact div.col h6:first-child { margin: 0px 0 15px 0; }
section#contact div.col { float: left; width: calc(50% - 40px); margin-right: 40px; }
section#contact form { padding: 30px 0; }
section#contact div.form_row { padding: 4px 0; }
section#contact div.form_label { padding: 6px 0; }
section#contact div.form_field label { display: inline; }
section#contact input[type=text], section#contact input[type=email], section#contact input[type=tel], section#contact input[type=submit], section#contact textarea { transition: background-color 0.2s; }
section#contact textarea { width: calc(100% - 60px); height: 250px; padding: 5px 10px; border: 0; resize: none; font-family: 'Lato'; font-weight: 300; font-size: 16px; background-color: rgba(255, 255, 255, 0.75); border-radius: 6px; }
section#contact input[type=text], section#contact input[type=email], section#contact input[type=tel] { width: calc(100% - 60px); padding: 5px 10px 8px 10px; border: 0; font-family: 'Lato'; font-weight: 300; font-size: 16px; color: rgb(32, 32, 32); background-color: rgba(255, 255, 255, 0.75); border-radius: 6px; }
section#contact input[type=text]:focus, section#contact input[type=email]:focus, section#contact input[type=tel]:focus, section#contact textarea:focus { background-color: rgb(255, 255, 255); }
section#contact input[type=radio] { -webkit-appearance: radio; appearance: auto; }
section#contact input[type=submit] { border: 0; font-family: 'Lato'; font-weight: 400; font-size: 16px; padding: 2px 4px; border-radius: 6px; border: 2px solid #fff; color: rgb(255, 255, 255); background-color: transparent; cursor: pointer; }
section#contact input[type=submit]:hover { background-color: rgba(255, 255, 255, 0.1); }

/* frequently asked questions */
section#faq { background-color: rgb(108, 122, 137); padding: 20px 0; color: rgb(239, 239, 239); }
section#faq div.container { padding: 10px 0; border-top: dashed 1px rgb(239, 239, 239); border-bottom: dashed 1px rgb(239, 239, 239); }
section#faq div.faq_holder { padding: 40px 0; display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
section#faq div.col { padding-right: 40px; text-align: left; }
section#faq div.col h6 { border-bottom: 1px solid rgb(255, 255, 255); border-top: 1px solid rgb(255, 255, 255); padding: 6px 0; }
section#faq div.faq_box { margin: 10px 0; }
section#faq .faq_question { display: block; width: 100%; cursor: pointer; font-family: 'Lato'; font-size: 16px; }
section#faq .faq_question:hover { text-decoration: underline; }
section#faq div.faq_answer { overflow: hidden; }

/* portfolio carousel */
section#portfolio { background-color: rgb(254, 253, 252); padding: 30px 0; }
section#portfolio a { color: rgb(32, 32, 32); }
section#portfolio h2 { text-align: center; color: rgb(219, 10, 91); }
section#portfolio .lead { text-align: center; color: rgb(103, 65, 114); margin: 20px auto; width: 800px; }
section#portfolio div.row { overflow: auto; }
section#portfolio div.carousel_holder { overflow: auto; }
section#portfolio .arrow { float: left; width: 60px; height: 40px; cursor: pointer; margin-top: 70px; transition: 0.2s margin; }
section#portfolio .arrow:hover { margin-top: 65px; }
section#portfolio .arrow img { display: block; width: 50px; margin: 0 auto; transition: 0.2s all; }
section#portfolio .arrow:hover img { width: 60px; }
section#portfolio div.items_holder { float: left; overflow: hidden; width: calc(100% - 120px); }
section#portfolio div.inner_container { position: relative; width: 50000px; }
section#portfolio div.item { float: left; width: calc((840px / 3) - 40px); padding: 20px; border-radius: 10px;
	cursor: pointer; transition: 0.2s background-color; }
section#portfolio div.item:hover { background-color: rgba(103, 65, 114, 0.05); }
section#portfolio div.item img { display: block; margin: 0 auto; width: 220px; }
section#portfolio div.item div.url { text-align: center; padding-top: 2px; margin-top: 4px; border-top: 1px solid rgb(222, 222, 222); }
section#portfolio div.item div.url a { color: rgb(103, 65, 114); text-decoration: none; }
section#portfolio div.item div.url a:hover { text-decoration: underline; }
section#portfolio div.row:last-child { padding-bottom: 20px; }
section#portfolio div.row:last-child div.col { width: 240px; margin: 0 auto; text-align: center; }
section#portfolio a.readmore { background-color: rgb(219, 10, 91); color: #fff; text-decoration: none; padding: 4px 8px; border-radius: 4px; display: inline-block; margin-top: 10px; transition: 0.2s background-color; }
section#portfolio a.readmore:hover { background-color: rgb(103, 65, 114); }

/* footer */
section#footer { background-color: rgb(219, 10, 91); padding: 20px 0; color: rgb(239, 239, 239); }
section#footer div.container { padding: 20px 0; border-top: dashed 1px rgb(239, 239, 239); }
section#footer div.row { overflow: auto; }
section#footer div.row:first-child { margin: 10px 0 30px 0; }
section#footer div.row:first-child img { width: 170px; }
section#footer div.col { float: left; width: calc((100% / 3) - 40px); margin-right: 40px; }
section#footer div.col p { margin: 3px 0; }
section#footer div.col a { text-decoration: none; color: rgb(239, 239, 239); }
section#footer div.col a:hover { text-decoration: underline; }
section#footer div.col span.icon { width: 14px; height: 14px; display: inline-block; margin-right: 10px; }
section#footer div.col .footernav ul { list-style-type: none; font-family: 'Lato'; font-weight: 300; font-size: 16px; line-height: 1.4em; }
section#footer div.col .footernav li { margin: 3px 0; }
section#footer a.readmore { font-weight: 400; text-decoration: none; display: inline-block; margin-bottom: 14px; padding: 4px 8px; border-radius: 6px; border: 2px solid #fff; background-color: rgb(103, 65, 114); transition: 0.2s background-color; }
section#footer a.readmore:hover { background-color: rgba(255, 255, 255, 0.2); text-decoration: none !important; }
section#footer a.readmore span { display: inline-block; height: 18px; width: 18px; position: relative; top: 4px; }
section#footer a.readmore img { display: block; position: relative; top: 50%; transform: translate(0, -50%); }

/* the page of an address without a file */
section#missing { background-color: rgb(254, 253, 252); padding: 160px 0 80px 0; text-align: center; color: rgb(103, 65, 114); }
section#missing h1 { color: rgb(219, 10, 91); }
section#missing a { color: rgb(103, 65, 114); }

@media screen and (max-width: 980px) {
	div.wrapper { width: 90%; }
	section#intro .lead,
	section#main .lead,
	section#portfolio .lead { width: 100%; }
	section#portfolio div.item { width: calc(((90vw - 120px) / 3) - 2vw); padding: 10px 0; margin: 1vw; }
}

@media screen and (max-width: 900px) {
	section#portfolio div.item { width: calc(((90vw - 120px) / 2) - 2vw); }
	section#slider,
	section#visual { height: 400px; max-height: 50vh; }
}

@media screen and (max-width: 850px) {
	section#top .topnav { display: none; }
	section#top .hamburger { display: flex; }
}

@media screen and (max-width: 770px) {
	section#footer div.row:nth-child(1) { text-align: center; }
	section#footer div.row:nth-child(2) div.col { float: none; width: 70%; margin: 0px auto 30px auto; text-align: center; }
}

@media screen and (max-width: 680px) {
	h1 { font-size: 38px; }
	h2 { font-size: 38px; }
	h5, .lead { font-size: 19px; }
	section#intro { padding: 10px 0 0 0; }
	section#main div.row.actions { padding: 0 0 40px 0; }
	section#intro div.col, section#main div.col { float: none; width: 100%; margin: 0 0 40px 0; }
	section#portfolio_complete div.portfolio_complete_holder { display: block; }
	section#portfolio_complete div.col { width: 90%; padding: 20px 0; margin: 0 auto; text-align: center; border-top: 1px dashed rgb(103, 65, 114); }
	section#portfolio_complete div.col img { width: 220px; }
	section#portfolio_complete div.url { width: 60%; margin: 4px auto 0 auto; overflow: hidden; }
	section#contact div#errorbox { width: calc(90% - 20px); }
	section#contact div.col { float: none; width: 100%; margin-right: 0; }
	section#contact div.col:last-child h6:first-child { margin: 30px 0 15px 0; }
	section#contact input[type=text], section#contact input[type=email], section#contact input[type=tel] { width: calc(100% - 30px); }
	section#contact textarea { width: calc(100% - 30px); }
	section#faq div.faq_holder { display: block; padding: 20px 0; }
	section#faq div.col { padding: 20px 0; }
	section#intro a.readmore { margin-top: 0px; }
	section#portfolio div.item { width: calc(((90vw - 120px) / 1) - 2vw); }
}

@media screen and (max-width: 600px) {
	section#slider, section#visual { height: 350px; max-height: none; }
	section#slider div.details,
	section#visual div.details { display: none; }
	section#cta div.col:first-child { float: none; width: 100%; margin-right: 0px; text-align: center; }
	section#cta div.col:last-child { float: none; width: 100%; margin-right: 0px; margin-top: 20px; }
}

@media screen and (max-width: 500px) {
	section#slider, section#visual { height: 300px; }
	section#contact textarea { height: 200px; }
	section#portfolio_complete div.url { width: 80%; }
	section#footer div.row:nth-child(2) div.col { width: 90%; }
}

@media screen and (max-width: 400px) {
	section#slider, section#visual { height: 240px; }
	section#portfolio .arrow { width: 40px; margin-top: 80px; }
	section#portfolio .arrow:hover { margin-top: 75px; }
	section#portfolio .arrow img { width: 30px; }
	section#portfolio .arrow img:hover { width: 38px; }
	section#portfolio div.items_holder { width: calc(100% - 80px); }
	section#portfolio div.item { width: calc(((90vw - 80px) / 1) - 2vw); }
	section#portfolio div.item img { width: 90%; text-align: center; }
}