/* The style of mediamasterminds.nl, as the WordPress theme "mediamasterminds.nl" had it, with the fonts on the site itself and the rows
   of the portfolio and the questions made by the style sheet (see the end) instead of by the template. */

@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/work-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/work-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
 


 


/* --- colors ---
mmmBlue:		rgb(101, 113, 181)
blueDark:		rgb(0, 35, 73)
white:			rgb(255, 255, 255)
greyMid:		rgb(112, 120, 127)
blueLight:		rgb(97, 173, 255)
*/

* { margin: 0; padding: 0; -webkit-appearance: none; outline: 0; }
img  { max-width: 100%; height: auto; display: block; border: 0; }
body { font-family: 'Work Sans'; background-color: rgb(255, 255, 255); color: rgb(0, 35, 73);  max-width: 100%; overflow-x: hidden; }

h1 { font-size: 40px; font-weight: 700; line-height: 1.5em; }
h2 { font-size: 40px; font-weight: 700; line-height: 1.5em; }
h3 { font-size: 22px; font-weight: 700; line-height: 1.5em; }
h4 { font-size: 18px; font-weight: 400; line-height: 1.5em; }
h5 { font-size: 18px; font-weight: 700; line-height: 1.5em; text-transform: uppercase; }
h6 {  }
p  { font-size: 16px; font-weight: 300; line-height: 1.7em; margin: 10px 0;}

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

/* mobile menu styling */
div#mobilemenu { width: 280px; height: 100%; overflow-y: auto !important; background-color: rgb(101, 113, 181); position: fixed; z-index: 50; top: 0; right: -280px; -webkit-overflow-scrolling: touch; transition: 0.3s right; }
div#mobilemenu ul { list-style-type: none; padding: 20px 20px 20vh 20px; margin-top: 130px; }
div#mobilemenu li { padding: 15px 0; border-top: solid 1px rgba(255, 255, 255, 0.8); }
div#mobilemenu li:last-child { border-bottom: solid 1px rgba(255, 255, 255, 0.8); }
div#mobilemenu a  { text-decoration: none; font-size: 18px; font-weight: 700; line-height: 1.5em; text-transform: uppercase; color: rgb(255, 255, 255); transition: 0.2s color; }
div#mobilemenu a:hover { color: rgb(0, 35, 73); }


section#top { z-index: 999; position: absolute; top: 0; height: 80px; width: 100%; background-color: rgba(255, 255, 255, 0.8); padding: 15px 0; }
section#top div#logo { float: left; position: relative; width: 200px; left: 20px; top: 50%; transform: translateY(-50%); }
section#top div#topnav { float: right; position: relative; right: 20px; top: 50%; transform: translateY(-50%); }
section#top div#topnav ul { list-style-type: none; }
section#top div#topnav li { position: relative; display: inline-block; margin: 0 6px; }
section#top div#topnav a  { text-decoration: none; color: rgb(255, 255, 255); padding: 6px 8px; 
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85); }
section#top div#topnav li:not(:last-child) a:hover { text-decoration: underline dotted rgb(255, 255, 255); }	
section#top div#topnav li:last-child a { border: 2px solid rgb(255, 255, 255); border-radius: 6px; 
	background-color: rgba(101, 113, 181, 0.85); transition: 0.2s background-color; }
section#top div#topnav li:last-child a:hover { background-color: rgb(0, 35, 73); } 
section#top div.hamburger { background-color: rgb(101, 113, 181); display: none; float: right; width: 24px; height: 24px; cursor: pointer; padding: 6px; border: 3px solid rgb(255, 255, 255); border-radius: 6px; position: relative; 
	top: 50%; transform: translate(0, -50%); right: 20px; transition: 0.2s all; }
section#top div.hamburger:hover { background-color: rgb(0, 35, 73); }
section#top div.hamburger svg { display: block; position: relative; top: 50%; transform: translate(0, -50%); }

section#slider { position: relative; height: 540px; }
section#slider div.slider { width: 100%; height: 100%; position: relative; overflow: hidden; }
section#slider div.slider>div { width: 100%; height: 100%; position: absolute;
    background-position: center center; background-size: cover; background-repeat: no-repeat; }
section#slider div.slide:before { position: absolute; content: ''; width: 100%; height: 200%; background-color: rgba(255, 255, 255, 0.5); z-index: 10; transform: skewY(12deg); bottom: -200%; right: 50%; transform-origin: 100% top;  }
section#slider div.slide:after { position: absolute; content: ''; width: 100%; height: 200%; background-color: rgb(255, 255, 255); z-index: 10; transform: skewY(-12deg); bottom: -200%; left: 50%; transform-origin: 0% top; }


section#main { position: relative; padding: 50px 0; }
section#main div.main_holder { text-align: center; }
section#main h1 { text-align: center; color: rgb(101, 113, 181); }
section#main h4 { display: inline-block; padding: 0 30px 10px 30px; border-bottom: 1px solid rgb(43, 32, 33); color: rgb(112, 120, 127); }
section#main p  { text-align: center; padding-top: 30px; margin: 0px auto; width: 80%;  }


section#process { position: relative; padding: 80px 0; background-color: rgb(101, 113, 181); overflow: hidden; }
section#process:before { position: absolute; content: ''; width: 100%; height: 200%; background-color: rgba(255, 255, 255, 0.5); z-index: 10; transform: skewY(-4deg); top: -200%; right: 0%; transform-origin: 100% top;  }
section#process:after { position: absolute; content: ''; width: 100%; height: 200%; background-color: rgb(255, 255, 255); z-index: 10; transform: skewY(4deg); bottom: -200%; right: 0%; transform-origin: 100% top; }
section#process div.process_holder { text-align: center; }
section#process div.row { overflow: auto; }
section#process div.col { float: left; width: calc((100% / 3) - 40px); padding: 20px; text-align: center; }
section#process div.col img { width: 60%; margin: 0 auto; }
section#process div.col h5 { color: rgb(255, 255, 255); }
section#process div.col p { font-size: 14px; color: rgb(255, 255, 255); }


section#portfolio { padding: 20px 0; }
section#portfolio div.portfolio_holder { text-align: center; }
section#portfolio div.portfolio_holder>h2 { text-align: center; color: rgb(101, 113, 181); }
section#portfolio div.portfolio_holder>h4 { display: inline-block; padding: 0 30px 10px 30px; border-bottom: 1px solid rgb(43, 32, 33); color: rgb(112, 120, 127)}
section#portfolio div.portfolio_holder>p  { text-align: center; margin: 30px auto 0 auto; width: 80%; }
section#portfolio div.row { overflow: auto; width: 100%; height: auto; padding: 50px 0;  }
section#portfolio div.col { text-align: left;  position: relative; float: left; width: calc((100% / 3) - 20px); margin-right: 20px; }
section#portfolio div.col>a { text-align: left; display: inline-block; text-decoration: none; color: rgb(33, 103, 178); border-bottom: 1px dashed rgb(33, 103, 178); }
section#portfolio div.col>a:hover { border-bottom: 1px solid rgb(33, 103, 178); }
section#portfolio div.col>h4 { text-align: left;  margin-top: 6px; color: rgb(112, 120, 127); }
section#portfolio div.thumb { position: relative; overflow: hidden; width: 100%; height: 175px; margin-bottom: 20px; cursor: pointer;
    background-position: center center; background-size: cover; background-repeat: no-repeat;
	-webkit-box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.3);
}
section#portfolio div.portfolio_url { position: relative; top: 100%; width: 100%; height: 100%; background: rgba(182, 204, 37, 0.75); box-sizing: border-box; text-align: center; }
section#portfolio div.portfolio_url h3 { position: relative; display: inline-block; top: 50%; transform: translateY(-50%); color: rgb(255, 255, 255); text-align: center; visibility: hidden; transition: 0.15s border; }
section#portfolio div.portfolio_url h3:hover { border-bottom: 2px solid rgb(255, 255, 255); }
section#portfolio a.readmore { color: rgb(255, 255, 255); background-color: rgb(0, 35, 73); border: solid 2px rgb(0, 35, 73); border-radius: 6px; padding: 6px 10px;
	text-decoration: none; transition: 0.2s background-color, 0.2s color; }
section#portfolio a.readmore:hover { color: rgb(0, 35, 73); background-color: rgb(255, 255, 255); }




section#faq { position: relative; padding: 80px 0; background-color: rgb(101, 113, 181); color: rgb(255, 255, 255); overflow: hidden; }
section#faq:before { position: absolute; content: ''; width: 100%; height: 200%; background-color: rgba(255, 255, 255, 1); z-index: 10; transform: skewY(-4deg); top: -200%; right: 0%; transform-origin: 100% top;  }
section#faq:after { position: absolute; content: ''; width: 100%; height: 200%; background-color: rgba(255, 255, 255, 0.5); z-index: 10; transform: skewY(4deg); bottom: -200%; right: 0%; transform-origin: 100% top; }
section#faq div.faq_holder { text-align: center; }
section#faq div.faq_holder>h2 { text-align: center; }
section#faq div.faq_holder>h4 { display: inline-block; padding: 0 30px 10px 30px; border-bottom: 1px solid rgb(255, 255, 255); }
section#faq div.row { overflow: auto; text-align: left; padding: 20px 0; margin: 10px 0; }
section#faq div.col { width: calc((100% / 2) - 20px);  }
section#faq div.col:first-child { float: left; margin-right: 20px; }
section#faq div.col:last-child  { float: right; margin-left: 20px; }
section#faq div.faq_box { background-color: rgb(0, 35, 73); padding: 6px 10px; border-radius: 6px; 
	margin: 8px 0; cursor: pointer; transition: 0.3s background-color; 
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
section#faq div.faq_box:hover { background-color: rgba(0, 35, 73, 0.7); }	
section#faq div.faq_question { padding-bottom: 4px;  }
section#faq div.faq_question span { display: inline-block; box-sizing: border-box; width: 20px; height: 20px; padding: 2px; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translateY(25%); margin-right: 10px; }
section#faq div.faq_question img {  }
section#faq div.faq_answer { overflow: hidden; }
section#faq div.faq_answer p { font-size: 14px;  }
section#faq div.faq_box.closed>div.faq_answer { height: 0; }
section#faq div.row:last-child { text-align: right; }
section#faq a.readmore { background-color: rgb(255, 255, 255); color: rgb(0, 35, 73); border: solid 2px rgb(255, 255, 255); border-radius: 6px; padding: 6px 10px;
	text-decoration: none; transition: 0.2s background-color, 0.2s color; }
section#faq a.readmore:hover { background-color: rgb(0, 35, 73); color: rgb(255, 255, 255); }


section#rfp { position: relative; padding: 80px 0; background-color: rgb(101, 113, 181); color: rgb(255, 255, 255); overflow: hidden; }
section#rfp:before { position: absolute; content: ''; width: 100%; height: 200%; background-color: rgba(255, 255, 255, 1); z-index: 10; transform: skewY(-4deg); top: -200%; right: 0%; transform-origin: 100% top;  }
section#rfp:after { position: absolute; content: ''; width: 100%; height: 200%; background-color: rgba(255, 255, 255, 0.5); z-index: 10; transform: skewY(4deg); bottom: -200%; right: 0%; transform-origin: 100% top; }
section#rfp div.rfp_holder { text-align: center; }
section#rfp div.rfp_holder>h2 { text-align: center; }
section#rfp div.rfp_holder>h4 { display: inline-block; padding: 0 30px 10px 30px; border-bottom: 1px solid rgb(255, 255, 255); }
section#rfp div.rfp_holder h5 { padding: 15px 0 5px 0; }
section#rfp div.row { overflow: auto; text-align: left; padding: 20px 0; margin: 10px 0; }
section#rfp div#error_holder { padding: 0 !important; }
section#rfp div.col { float: left; width: calc((100% / 2) - 20px); margin-right: 20px; }
section#rfp div.form_row { padding: 4px 0; }
section#rfp div.form_label { padding: 6px 0; }
section#rfp div.form_field { }
section#rfp div.form_field span.spacer { width: 20px; }
section#rfp input[type=text], section#rfp input[type=submit], section#rfp textarea { font-family: 'Work Sans'; font-size: 16px; transition: background-color 0.2s; }
section#rfp textarea { width: calc(100% - 60px); height: 250px; padding: 5px 10px; border: 0; resize: none; background-color: rgba(255, 255, 255, 0.75); border-radius: 6px; }
section#rfp input[type=text] { width: calc(100% - 60px); padding: 5px 10px 8px 10px; border: 0; color: rgb(32, 32, 32); background-color: rgba(255, 255, 255, 0.75); border-radius: 6px; }
section#rfp input[type=text]:focus, section#rfp textarea:focus { background-color: rgb(255, 255, 255); }
section#rfp input[type=radio] { -webkit-appearance: radio; }
section#rfp input[type=radio]:checked { background-color: #333; }
section#rfp input[type=submit] { border: 0; padding: 2px 12px; border-radius: 6px; border: 2px solid #fff; background-color: rgb(255, 255, 255); color: rgb(0, 35, 73); cursor: pointer;  }
section#rfp input[type=submit]:hover { background-color: rgb(0, 35, 73); color: rgb(255, 255, 255); }
section#rfp div#errorbox { background-color: rgb(0, 35, 73); border: 2px solid rgb(255, 255, 255); color: rgb(255, 255, 255); width: 290px; padding: 10px; margin: 10px auto; border-radius: 8px; display: none; text-align: center; }
section#rfp div#errorbox.show { display: block; }
section#rfp div#errorbox p { margin: 0 0 10px 0 !important; font-weight: 400;}
section#rfp div#errorbox ul { text-align: center; }
section#rfp div#errorbox li { font-size: 16px; font-weight: 300; }


section#footer { padding: 50px 0; background-color: rgb(0, 35, 73) }
section#footer div.footer_holder {  }
section#footer div.row { overflow: auto; }
section#footer div.row>div.col:first-child { float: left; width: calc(100% - 440px); border-top: 1px solid rgb(101, 113, 181); margin-top: 36px; }
section#footer div.row>div.col:first-child ul { list-style-type: none; margin-top: 22px; }
section#footer div.row>div.col:first-child li { display: inline-block; }
section#footer div.row>div.col:first-child a  { text-decoration: none; color: rgb(255, 255, 255); font-size: 14px; font-weight: 300;  padding: 6px 8px; }
section#footer div.row>div.col:first-child li:not(:last-child) a:hover  { text-decoration: underline; }
section#footer div.row>div.col:first-child p a:hover  { text-decoration: underline; } 
section#footer div.row>div.col:first-child li:last-child a { padding: 3px 6px; border-radius: 4px; border: 1px solid rgb(255, 255, 255); transition: 0.2s background-color; }
section#footer div.row>div.col:first-child li:last-child a:hover { background-color: rgb(101, 113, 181); }
section#footer div.row>div.col:first-child p { margin: 3px 0; }
section#footer div.row>div.col:last-child { float: right; width: 400px; padding-right: 20px; }
section#footer div.row>div.col:last-child h3 { color: rgb(255, 255, 255); margin-left: 100px; }
section#footer div.row>div.col:last-child p { font-size: 14px; color: rgb(255, 255, 255); margin: 3px 0; }
section#footer div.row>div.col:last-child span { display: inline-block; width: 45%; margin-right: 5%; color: rgb(101, 113, 181); text-align: right; }
section#footer div.row>div.col:last-child a { text-decoration: none; color: rgb(255, 255, 255); }
section#footer div.row>div.col:last-child a:hover { text-decoration: underline; }



/* media queries */
@media screen and (max-width: 980px) {
	div.wrapper { width: 90%; }
}

@media screen and (max-width: 900px) {
	section#footer { padding: 40px 0 50px 0; }
	section#footer div.row>div.col:first-child { float: none; width: 90%; margin: 10px auto; padding: 20px 0; text-align: center; border-bottom: 1px solid rgb(101, 113, 181); border-top: none; }
	section#footer div.row>div.col:last-child { float: none; width: 400px; padding: 20px 0; margin: 0 auto; }
	section#footer div.row>div.col:last-child h3 { text-align: center; }
}	

@media screen and (max-width: 850px) {	
	section#top div#topnav { display: none; }
	section#top div.hamburger { display: block; }
	section#portfolio div.row { padding: 0;  }
	section#portfolio div.col { text-align: center; float: none; width: 300px; margin: 0 auto; padding: 30px 0 10px 0; }
	section#portfolio div.col h4 { text-align: center; }
}



@media screen and (max-width: 750px) {
	section#process div.col { float: none; width: 80%; padding: 0; margin: 0 auto; }
	section#process div.col img { width: 168px; }
	section#rfp div.col { float: none; width: 100%; margin: 0; }
}

@media screen and (max-width: 650px) {
	section#slider { height: 400px; }
	section#faq div.row { padding: 10px 0; margin: 0; }
	section#faq div.col { width: 100%; margin: 10px 0; }
}

@media screen and (max-width: 550px) {
	h1 { font-size: 40px; line-height: 1em; margin: 10px 0; }
	h2 { font-size: 40px; line-height: 1em; }
	h3 { font-size: 20px; line-height: 1em; }
	h4 { font-size: 18px; line-height: 1.3em; }
	h5 { font-size: 18px; line-height: 1em; }

	section#footer div.row>div.col:last-child { width: 100%; }
	section#footer div.row>div.col:last-child p { font-size: 13px; }
}

@media screen and (max-width: 450px) {
	section#slider { height: 240px; }
	section#footer div.row>div.col:first-child ul { display: none; }
	section#rfp input[type=text], 	
	section#rfp input[type=submit], 
	section#rfp textarea,
	section#rfp div.form_field,
	section#rfp div.form_label { font-size: 14px; } 
	section#rfp div#errorbox { width: calc(90% - 20px); text-align: left; }
	section#rfp div#errorbox li { margin-left: 20px; }
}

@media screen and (max-width: 400px) {
	section#main { padding: 20px 0 30px 0; }
	section#process { padding: 80px 0; }	
	section#portfolio div.col { width: 90%; }
	section#portfolio div.thumb { height: 43vw; }

	section#footer div.row>div.col:last-child h3 { margin-left: 0px; text-align: center; }
	section#footer div.row>div.col:last-child p { }
	section#footer div.row>div.col:last-child span { width: 30%; margin-right: 5%; }
}


/* The mobile menu is open (site.js). */
div#mobilemenu.open { right: 0; }

/* The theme put every three portfolio items and every two FAQ groups in a row of their own; here they are in one
   row, and these rules make the same rows: a new line for the first of each row, with the space between two rows. */
@media screen and (min-width: 851px) {
	section#portfolio div.col:nth-child(3n+1) { clear: left; }
	section#portfolio div.col:nth-child(n+4) { margin-top: 100px; }
}
section#faq div.groups>div.col:nth-child(odd) { float: left; clear: both; margin: 0 20px 0 0; }
section#faq div.groups>div.col:nth-child(even) { float: right; margin: 0 0 0 20px; }
section#faq div.groups>div.col:nth-child(n+3) { margin-top: 50px; }
@media screen and (max-width: 650px) {
	section#faq div.groups>div.col:nth-child(odd), section#faq div.groups>div.col:nth-child(even) { margin: 10px 0; }
	section#faq div.groups>div.col:nth-child(2n+3) { margin-top: 30px; }
}