/*
Theme Name: MCCFM
Author: Marin Wiellersen
Version: 1.0
*/

/* Custom Fonts */

@font-face {
	font-family: 'Leelawadee';
	src: url('http://www.mmc-fm.nl/wp-content/themes/MCC FM/Fonts/leelawadee V2.woff') format('woff');
	src: url('http://www.mmc-fm.nl/wp-content/themes/MCC FM/Fonts/leelawadee V2.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Leelawadee';
	src: url('http://www.mmc-fm.nl/wp-content/themes/MCC FM/Fonts/Leelawadee Bold V1.woff') format('woff');
	src: url('http://www.mmc-fm.nl/wp-content/themes/MCC FM/Fonts/leelawadee Bold V1.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Mairy Black';
	src: url('http://www.mmc-fm.nl/wp-content/themes/MCC FM/Fonts/Mairy Black.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}


span {
	color: #030068;
}
/* End Custom Fonts */

html {
	padding: 0;
	margin: 0;
}

body {
	padding: 0;
	margin: 0;
	font-family: 'Leelawadee', Arial, sans-serif;
	font-size: 15px;
	background-color: #FFF;
}


a:link,
a:visited {
	color: #FFF;
	text-decoration: none;
}

p {
	line-height: 1.65em;
	margin: 0 0 1em 0;
}


h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0 0;
	font-weight: normal;
	padding: 0;
}

h2 {
	color: #008b8b;
}

/* General Layout */
div.container {
width: 100%;
margin: none auto;
padding-left: none;
padding-right: none;
}


/* Content Area */
article.post {
border-bottom: 1px dotted #bbbbbb;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
min-height: 150px;
}

article.post:last-of-type {
border-bottom: none;
}

article.post:first-of-type {
	border-top: 5px solid #bbbbbb;
}

/* Aside Styles */
article.post-aside,
article.post-link {
	font-size: 110%;
	background-color: #FFF5CB;
	margin: 5px;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
	border-bottom: none;
}

.mini-meta {
	font-size: 68%;
	margin-top: 0px;
	margin-bottom: -15px;
	color: #777;
}

/* Link Post Format Styles */
article.post-link {
padding: 0px;
background-color: #E0EBFF;
}

article.post-link a {
	display: block;
	padding: 20px;
}

/* Header */
.site-header {
	width: 100%;
	max-height: 175px;
	margin: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background-color: #FFF;
}

div.main {
	margin-top: 175px;
}


/* Site Logo */

div.logo {
	width: 8%;
	min-width: 91px;
	max-height: 200px;
	margin: auto;
	padding-top: 15px;
}

@media screen and (min-width: 100px) and (max-width: 650px) {
	.logo {
		display: none !important;
	}
}

div.logomobile {
	max-height: 200px;
	float: left;
	margin-left: 30px;
	padding-top: 7px;
}

@media screen and (min-width: 651px) {
	div.logomobile {
		display: none !important;
	}
}

@media screen and (max-width: 650px) {
	div.main {
		margin-top: 90px;
	}
}

/* New Nav Menu */
div.frontnav {
	display: block;
	text-align: center;
	font-size: 17px;
	margin: auto;
	margin-left: -4%;
	margin-top: 0px;
}

div.frontnav ul {
display:inline-block;
list-style:none;
color: #008b8b;
}

div.frontnav li {
display:inline;
color: #008b8b;
}

div.frontnav a {
float:left;
text-decoration:none;
padding:0 30px;
color: #000;
}

@media screen and (min-width: 1300px) {

div.frontnav a {
	padding:0 55px;
	}
}


div.frontnav :hover {
	color: #008b8b;
}

div.frontnav ul li.current-menu-item a:link,
div.frontnav ul li.current-menu-item a:visited,
div.frontnav ul li.current-page-ancestor a:link,
div.frontnav ul li.current-page-ancestor a:visited {
	font-weight: bold;
	color: #008b8b;
	text-decoration: none;
}

#mobilemenuopen, #mobilemenuclose	{
	display: none;
	position: absolute;
	right: 2rem;
	top: 44px;
	transform: translateY(-50%);
	cursor: pointer;
}


@media screen and (max-width: 650px) {
	.mobilehide {
		display:	none!important;
	}

	div.frontnav {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100vw;
		background: white;
		margin: auto;
		border-bottom: 2px solid #008b8b;
	}

	div.frontnav ul {
		display: flow-root;
		margin: auto;
		padding: 0;
	}

	div.frontnav li {
		display: block;
		padding: 2rem;
	}

	div.frontnav a {
		float: none;
	}

	#mobilemenuopen {
		display: inline;
	}
}

/* Post Columns */
.home-columns {
	padding-top: 30px;
}

.one-half {
	width: 45%;
	float: left;
	margin-right: 10%;
}

.last {
	margin-right: 0;
}

/* Main Column */
.main-column {
width: 66%;
float: left;
}

/* Side Column */
.secondary-column {
	width: 30%;
	float: right;
}

/* Widget Item */
.widget-item {
	font-size: 85%;
}

.side-column .widget-item {
	width: 30%;
	float: right;
	border-bottom: 1px solid #DDD;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

h2.widget-title {
	font-weight: normal;
	margin-bottom: 10px;
	color: #000;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 138%;
}

.widget-item ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.widget-item ul {
	list-style-position: inside;
	line-height: 1.65em;
}

.widget-item p:last-child {
	margin: 0;
}

/* Footer Flexbox */
.footer-flex {
	display: flex;
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	color: #FFF;
	align-items: flex-start;
	justify-content: space-around;
	margin: auto;
	max-width: 1300px;
	padding: 10px 0px;
}

.footer-flex-background {
	display: flex;
	display: -webkit-flex;
	width: 100%;
	height: 100%;
	background-color: #030068;
	opacity: 0.9;
}

.footer-flex a:link,
.footer-flex a:visited {
	color: #008b8b;
}

.footer-flex a:hover {
	text-decoration: underline;
	color: #06B8B8;
}

.footer1 {
	max-width: 300px;
	margin: 10px 30px auto;
	width: 20%;
	text-align: center;

}

.footer2 {
	margin: 10px 30px auto;
	width: 20%;
	text-align: center;
	max-width: 300px;
}

.footer3 {
	margin: 10px 30px auto;
	width: 20%;
	text-align: center;
	max-width: 300px;
}

.footer4 {
	margin: 10px 30px auto;
	width: 20%;
	text-align: center;
	max-width: 300px;
}

div.contacticoonfooter {
	display: inline;
	position: relative;
	top: 7px;
}

@media screen and (min-width: 1000px) and (max-width: 1250px) {
	.footer-flex {
		margin-left: -40px;
	}

	.footer1 {
		margin-right: -10px;
	}

	.footer2 {
		margin-right: -10px;
	}

	.footer3 {
		margin-right: -10px;
	}

	.footer4 {
		margin-right: -10px;
	}
}

@media screen and (min-width: 501px) and (max-width: 1000px) {

	.footer1 {
		width: 35%!important;
		max-width: none;
}

	.footer2 {
		width: 35%!important;
		max-width: none;
}

	.footer3 {
		width: 35%!important;
		max-width: none;
}

	.footer4 {
		width: 35%!important;
		max-width: none;
}

}



@media screen and (max-width: 500px) {
	.footer1 {
		width: 100%!important;
	}
	.footer2 {
		width: 100%!important;
	}

	.footer3 {
		width: 100%!important;
	}
	.footer4 {
		width: 100%!important;
	}
}




.footerlink:a {
	color: #008b8b!important;
}


/* Footer */

div.footer-titel {
	font-family: 'Mairy Black';
	color: #FFF;
	font-size: 25px;
	margin-bottom: 10px;
}

div.copyright {
	border-top: 1px dotted #343536;
	background-color: #030068;
	color: #FFF;
	text-align: center;
	opacity: 0.9;
}

/* Clearfix */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* Two Column Title Layout */
div.title-column {
	text-align: center;
}

div.text-column {
	width: 70%;
	float: right;
}

/* Info Box Styles */
div.info-box {
	width: 30%;
	float: right;
	margin: 0 0 30px 30px;
	padding: 20px;
	background-color: #EEE;
}

div.info-box h4 {
	margin-bottom: 6px;
}

div.info-box p {
	font-size: 85%;
}

/* Children Links */
.children-links {
	margin-bottom: 20px;
	font-size: 80%;
}

.children-links a:link,
.children-links a:visited {
	text-decoration: none;

}

.children-links ul {
	float: left;
}
.children-links li {
	margin-right: 20px;
}
.children-links .parent-link {
	float: left;
	margin-right: 20px;
	padding-right: 20px;
	border-right: 1px solid #DDD;
	font-size: 120%;
	font-weight: bold;
}
.children-links .parent-link a:link,
.children-links .parent-link a:visited {
color: #000;
}

.children-links .current_page_item a:link,
.children-links .current_page_item a:visited {
	border-bottom: 1px solid #DDD;
	color: #000;
	cursor: default;

}

/* Post Styles */
.post h2 {
	margin-bottom: 0px;
}

.post-info {
	margin-top: 0px;
	font-size: 87%;
	color: #999;
}

p.post-info a:link,
p.post-info a:visited {
	color: #999;
}

/* Image Styles */


.has-thumbnail {
	position: relative;
	padding-left: 200px;
}

.post-thumbnail {
	position: absolute;
	top: 0;
	left: 0;
}

/* Search */
div.search {
	float: right;
	padding-right: 10px;
	margin-bottom: -50px;
}

/* Banner Image */
div.banner-image {
	width: 100%;
	height: 100%;
	opacity: 0.8;
	}

div.titel {
	margin-top: 5px;
	margin-bottom: -25px;
	text-align: center;
	padding: 10px;
	padding-bottom: none;
	font-size: 15px;
}

/* latest posts home*/
.pt-cv-readmore {
    color: #FFF!important;
    background-color: #ff7733!important;
	opacity: 0.95;
	border: none!important;
}

.pt-cv-readmore:hover {
	background-color: #ff661a!important;
	color: #FFF!important;
	opacity: 1;
}

.latest-posts {
	padding: 15px;
	font-family: 'PTSans', Arial, sans-serif;
}

/* banner op home */
div.banner {
	position: relative;
	background-image: url(http://www.mmc-fm.nl/wp-content/uploads/2017/01/alternativebanner1.png);
	text-align: right;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 100px;
	opacity: 0.8;
	height: 100px;
	background-position: left;
}

div.banner-titel {
	color:#FFF;
	margin-top: -40px;
	font-family: 'Mairy Black';
	font-size: 14px;
}

div.banner-titelmobiela {
	text-align: center;
	font-size: 14px;
	color:#FFF;
	font-family: 'Mairy Black';
}

div.banner-titelmobielb {
	text-align: center;
	font-size: 14px;
	color:#FFF;
	font-family: 'Mairy Black';
}

div.banner-tekst-actie {
	max-width: 1200px;
	position: absolute;
	top: 30%;
	right: 40px;
}

div.banner-description {
	margin-left: 45%;
	margin-top: 20px;
	font-size: 20px;
	color: #FFF;
}

div.banner-action {
	margin-left: 50%;
	margin-top: 40px;
}

@media screen and (min-width: 1300px) {
	.banner {
		height: 150px!important;
	}

	.banner-tekst-actie {
		top: 33%!important;
		font-size: 15px!important;
		margin-right: 50px;
	}

	.banner-action {
		margin-top: 50px;
	}

	.banner-titel {
		Font-size: 16px!important;
	}
}

@media screen and (min-width: 1600px) {

	.banner-tekst-actie {
		margin-right: 220px;
	}

}

@media screen and (max-width: 950px) {

	.banner-tekst-actie {
		font-size: 11px!important;
		top: 28%!important;
	}

	.banner-action {
		margin-top: 20px!important;
		margin-left: 10px!important;
	}

	.banner-description {
		margin-top: 10px!important;
	}

	.banner-titel {
		margin-left: 42%!important;
	}

}

@media screen and (max-width: 630px) {
	.banner {
		Background-image: url(http://www.mmc-fm.nl/wp-content/uploads/2017/05/Bannermobielblauw-e1494590512855.png)!important;
		background-position: center!important;
		height: 210px!important;
		text-align: center!important;
		margin: auto!important;
	}

	.banner-titel {
		display: none!important;
	}

	.banner-description {
		display: none!important;
	}

	.banner-actionmobiel {
		padding-bottom: 5px;
	}

	.banner-tekst-actiemobiel {
		position: absolute;
		right: 15px;
		top: 235px;
		font-size: 17px;
		padding: 5px;
	}

	.banner-descriptionmobiel {
		color: #FFF;
		text-align: center;
		padding:5px 10px 12px 10px!important;
	}
}

@media screen and (max-width: 480px) {

		.banner-titelmobiela {
			font-size: 11px!important;
		}
		.banner-titelmobielb {
			font-size: 11px!important;
		}

		.banner-tekst-actiemobiel {
		font-size: 11px!important;
	}

		.banner-actionmobiel {
			padding-top: 12px!important;
		}

		.banner-descriptionmobiel {
			font-size: 16px;
			padding-top:8px!important;
			padding:5px 10px 4px 10px!important;
		}
}

@media screen and (max-width: 310px) {

		.banner-tekst-actiemobiel {
			top: 210px!important;
		}

		.banner-descriptionmobiel {
			font-size: 15px;
		}
}

@media screen and (min-width: 631px) {
	.banner-titelmobiela {
		display: none!important;
	}

	.banner-titelmobielb {
		display: none!important;
	}

	.banner-descriptionmobiel {
		display: none!important;
	}

	.banner-actionmobiel {
		display: none!important;
	}

}

/* Archive Title */
div.archive-title {
	margin-left: 20px;
}

/* Post Banner Image */
div.post-image {
	margin-left: 20px;
	margin-right: 20px;
}


/* Main Grid */
div.flex-container {
max-width: 1400px;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
margin: auto;
align-items: center;
justify-content: space-around;
}

div.flex-item1 {
	background-image: url(http://www.mmc-fm.nl/wp-content/uploads/2017/01/fotoovermij-1.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 350px;
	height: 250px;
	margin: 20px;
	opacity: 0.85;
}

div.flex-item2 {
	background-image: url(http://www.mmc-fm.nl/wp-content/uploads/2017/01/fotooplossingen-1.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	max-width: 350px;
	width: 350px;
	height: 250px;
	margin: 20px;
	opacity: 0.85;
}

div.flex-item3 {
	background-image: url(http://www.mmc-fm.nl/wp-content/uploads/2017/01/fotoportfolio.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	max-width: 350px;
	width: 350px;
	height: 250px;
	margin: 20px;
	opacity: 0.85;
}

@media screen and (min-width: 1300px) {

	.flex-item1 {
		margin: 35px!important;
	}

	.flex-item2 {
		margin: 35px!important;
	}

	.flex-item3 {
		margin: 35px!important;
	}
}

@media screen and (max-width: 1200px) {

	.flex-item1 {
		width: 310px!important;
		height: 210px!important;
		margin: 20px 15px 20px 15px!important;
	}

	.flex-item2 {
		width: 310px!important;
		height: 210px!important;
		margin: 20px 15px 20px 15px!important;
	}

	.flex-item3 {
		width: 310px!important;
		height: 210px!important;
		margin: 20px 15px 20px 15px!important;
	}
}

@media screen and (max-width: 1050px) {

	.flex-item1 {
		width: 280px!important;
		height: 180px!important;
	}

	.flex-item2 {
		width: 280px!important;
		height: 180px!important;
	}

	.flex-item3 {
		width: 280px!important;
		height: 180px!important;
	}
}

@media screen and (max-width: 950px) {

	.flex-item1 {
		width: 225px!important;
		height: 170px!important;
		margin: 20px 5px 20px 5px!important;
	}

	.flex-item2 {
		width: 225px!important;
		height: 170px!important;
		margin: 20px 5px 20px 5px!important;
	}

	.flex-item3 {
		width: 225px!important;
		height: 170px!important;
margin: 20px 5px 20px 5px!important;
	}
}


@media screen and (max-width: 760px) {

	.flex-container {
	max-width: 500px!important;
	margin-top: 8px!important;
	margin-bottom: 8px!important;
	}

	.flex-item1 {
		width: 100%!important;
		width: 310px!important;
		height: 210px!important;
		margin: 10px!important;
	}

	.flex-item2 {
		width: 100%!important;
		width: 310px!important;
		height: 210px!important;
		margin:10px!important;
	}

	.flex-item3 {
		width: 100%!important;
		width: 310px!important;
		height: 210px!important;
		margin: 10px!important;
	}
}

@media screen and (max-width: 480px) {

	.flex-item1 {
		width: 280px!important;
		height: 180px!important;
	}

	.flex-item2 {
		width: 280px!important;
		height: 180px!important;
	}

	.flex-item3 {
		width: 280px!important;
		height: 180px!important;
	}
}


/* End Media Screen Boxes */

div.description-flex-container {
	color: #FFF!important;
	background-color: #008b8b;
	opacity: 0.8;
	margin-top: 25%;
	margin-right: 5%;
	padding: 20px 0px;
	border-bottom: 5px solid #FFF;
	text-align: center;
	font-family: 'Mairy Black';
	font-size: 28px;

}

.description-flex-container:hover {
	border-bottom: 5px solid #030068;
}


@media screen and (max-width: 1200px) {

	.description-flex-container {
		font-size: 25px!important;
		margin-top: 25%!important;
	}
}

@media screen and (max-width: 480px) {
		.description-flex-container {
		font-size: 23px!important;
		margin-left: 10%;
		margin-right: 10%!important;
	}
}

/* Grid */
.row {
	margin-right: -20px;
}

.col {
	width: 100%;
	float: left;
	padding-right: 20px;
	box-sizing: border-box;
}

.col-xs-11 {width: 91.662%}
.col-xs-10 {width: 83.332%;}
.col-xs-9 {width: 75%;}
.col-xs-8 {width: 66.662%;}
.col-xs-7 {width: 58.331%}
.col-xs-6 {width: 50%;}
.col-xs-5 {width: 41.662%}
.col-xs-4 {width: 33.332%;}
.col-xs-3 {width: 25%;}
.col-xs-2 {width: 16.662%;}
.col-xs-1 {width: 8.332%;}

@media screen and (min-width: 768px) {

	.row {
		margin-right: -40px;
	}

	.col {
	padding-right: 40px;
	}

	.col-sm-11 {width: 91.662%}
	.col-sm-10 {width: 83.332%;}
	.col-sm-9 {width: 75%;}
	.col-sm-8 {width: 66.662%;}
	.col-sm-7 {width: 58.331%}
	.col-sm-6 {width: 50%;}
	.col-sm-5 {width: 41.662%}
	.col-sm-4 {width: 33.332%;}
	.col-sm-3 {width: 25%;}
	.col-sm-2 {width: 16.662%;}
	.col-sm-1 {width: 8.332%;}

}

@media screen and (min-width: 1024px) {

	.col-md-11 {width: 91.662%}
	.col-md-10 {width: 83.332%;}
	.col-md-9 {width: 75%;}
	.col-md-8 {width: 66.662%;}
	.col-md-7 {width: 58.331%}
	.col-md-6 {width: 50%;}
	.col-md-5 {width: 41.662%}
	.col-md-4 {width: 33.332%;}
	.col-md-3 {width: 25%;}
	.col-md-2 {width: 16.662%;}
	.col-md-1 {width: 8.332%;}

}

@media screen and (min-width: 1280px) {

	.col-lg-11 {width: 91.662%}
	.col-lg-10 {width: 83.332%;}
	.col-lg-9 {width: 75%;}
	.col-lg-8 {width: 66.662%;}
	.col-lg-7 {width: 58.331%}
	.col-lg-6 {width: 50%;}
	.col-lg-5 {width: 41.662%}
	.col-lg-4 {width: 33.332%;}
	.col-lg-3 {width: 25%;}
	.col-lg-2 {width: 16.662%;}
	.col-lg-1 {width: 8.332%;}

}

/* Button */
.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #FFF;
    border-radius: 8px;
    background: ##f4efeb;
    background: -webkit-gradient(linear, left top, left bottom, from(##f4efeb), to(#aba7a5));
    background: -moz-linear-gradient(top, ##f4efeb, #aba7a5);
    background: linear-gradient(to bottom, ##f4efeb, #aba7a5);
    font-family: 'Leelawadee', Arial, sans-serif;
	font-size: 17px;
    color: #111111;
    text-decoration: none;
}
.button:hover,
.button:focus {
    border: 1px solid #030068;
    background: #030068;
    color: #FFF;
    text-decoration: none;
}
.button:active {
    background: #aba7a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#aba7a5), to(#aba7a5));
    background: -moz-linear-gradient(top, #aba7a5, #aba7a5);
    background: linear-gradient(to bottom, #aba7a5, #aba7a5);
}

.button a:link,
.button a:visited {
	color: #FFF;
}

@media screen and (max-width: 630px) {
	.button {
		font-size: 15px!important;
		padding: 6px 20px!important;
	}
}

@media screen and (max-width: 480px) {
	.button {
		font-size: 14px!important;
		padding: 5px 18px!important;
	}
}


/* Logo Display */

div.logo-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 1300px;
width: 90%;
max-height: 1200px;
margin: auto;
align-items: center;
margin-top: 10px;
margin-bottom: 30px;
justify-content: space-between;
padding-bottom: 20px;
}

/* Titels Referenties en Logos */
div.subtitel-logo {
	text-align: center;
	color:#008b8b;
	font-size: 50px;
	margin-top: 30px;
	font-family: 'Mairy Black';
	width: 100%;
}

@media screen and (max-width: 900px) {
div.flex-logo {
	margin: 30px!important;
	text-align: center;
	}
}

@media screen and (max-width: 580px) {
div.flex-logo {
	display: block;
	height: 100%;
}

div.flex-logo:first-of-type {
	margin-bottom: -20px;
}

div.logo-container {
	display: block;
	margin: auto;
	margin-top: -30px!important;
}
}

/* Referenties */

div.subtitel-referentie {
	text-align: center;
	color:#008b8b;
	font-size: 50px;
	margin-top: 20px;
	margin-bottom: 20px;
	font-family: 'Mairy Black';
	width: 100%;
}

/* Pages */

div.titel-subpagina {
	color:#008b8b;
	font-family: 'Mairy Black';
	text-align: center;
	width: 100%;
	font-size: 20px;
	padding: 40px;
}

/* Wat ik doe */

div.tekst-subpage {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	max-width: 750px;
	width: 90%;
	margin: auto;
	align-items: center;
	text-align: left;
	padding-left: 0px;
	margin-top: 15px;
}

div.tekst-subpage ul {
	padding-left: 1em;
}

div.tekst-subpage li {
	float: left;
	padding: 3px;
}

div.tekst-subpage h2 {
	margin-bottom: 3px;
}


/* Wat Ik Doe items */

div.container-subpage-backgroundoplossingen {
	display: -webkit-flex;
	display: flex;
	height: 100%;
	width: 100%;
	margin: auto;
	background-color: #E8ECED;
	align-items: stretch;
}

@media screen and (max-width: 680px) {
div.doe-container {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}

div.doe-item {
	width: 70%!important;
	min-width: none;
}
}

@media screen and (min-width: 401px) {
div.doe-container {
	flex-wrap: no-wrap;
	-webkit-flex-wrap: no-wrap;
	max-width: 1200px;
	margin: auto;
}
}

div.doe-item {
	display: inline-block;
	width: 30%;
	min-width: 200px;
	margin: auto;
	height: 100%;
	text-align: center;
}

div.doe-item:last-of-type {
	min-width: 250px;
}

div.doe-background {
	width: 100%;
	background-color: #E8ECED;
}

/* Banner Oplossingen */

div.banneroplossingen {
	position: relative;
	background-image: url(http://www.mmc-fm.nl/wp-content/uploads/2017/01/banneroplossingen.png);
	text-align: right;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 100px 0;
	opacity: 0.8;
	height: 100px;
}

@media screen and (min-width: 1300px) {
	.banneroplossingen {
		height: 150px!important;
	}
}

@media screen and (max-width: 1050px) {

	.banneroplossingen {
		height: 60px!important;
	}
}

@media screen and (max-width: 480px) {
	.banneroplossingen {
		height: 30px!important;
	}
}

div.banner-titeloplossingen {
	position: absolute;
	width: 100%;
	color:#FFF;
	text-align: center;
	font-family: 'Mairy Black';
	font-size: 18px;
	background-color: #008b8b;
	opacity: 0.9;
	padding: 2% 0;
	top: 40%;
}

@media screen and (min-width: 1300px) {
	.banner-titeloplossingen {
		width:50%;
		margin-top: 1%!important;
	}
}

@media screen and (max-width: 630px) {

	.banner-titeloplossingen {
		display: none;
	}

	.banner-titelmobieloplossingena {
		text-align: center;
		color: #FFF;
		font-family: 'Mairy Black';
		padding: 2% 0;
		font-size: 14px;
	}

	.banner-titelmobieloplossingenb {
		text-align: center;
		color: #FFF;
		font-family: 'Mairy Black';
		font-size: 14px;
	}

	.banner-titelmobieloplossingenab {
		background-color: #008b8b;
		opacity: 0.9;
		position: relative;
		margin-top: -10px;
	}
}

@media screen and (max-width: 350px) {

	.banner-titelmobieloplossingena {
		font-size: 11px;
	}

	.banner-titelmobieloplossingenb {
		font-size: 11px;
	}
}

@media screen and (min-width: 631px) {

	.banner-titelmobieloplossingena {
		display: none;
	}

	.banner-titelmobieloplossingenb {
		display: none;
	}
}

div.flex-containerportfolio {
max-width: 850px;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
margin: auto;
align-items: stretch;
justify-content: space-around;
padding-bottom:10px;

}


div.flex-item1portfolio {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative; /* Trial */
	background-image: url(http://www.mmc-fm.nl/wp-content/uploads/2017/02/professionalfm.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 45%;
	min-width: 370px;
	height: 320px;
	margin: 10px;
	opacity: 0.8;
	border: 1px solid #232424;
    align-items: center;
}

div.flex-item3portfolio {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative; /* Trial */
	background-image: url(http://www.mmc-fm.nl/wp-content/uploads/2017/02/coaching.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 45%;
	min-width: 370px;
	height: 320px;
	margin: 10px;
	opacity: 0.8;
	border: 1px solid #232424;
	align-items: center;
}

div.flex-item4portfolio {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative; /* Trial */
	background-image: url(http://www.mmc-fm.nl/wp-content/uploads/2017/02/onderwijs.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 45%;
	min-width: 370px;
	height: 320px;
	margin: 10px;
	opacity: 0.8;
	border: 1px solid #232424;
	align-items: center;
}

div.flex-item5portfolio {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative; /* Trial */
	border: 1px solid #232424;
	background-image: url(http://www.mmc-fm.nl/wp-content/uploads/2017/02/Contractmanagement.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 45%;
	min-width: 370px;
	height: 320px;
	margin: 10px;
	opacity: 0.8;
	align-items: center;
}

@media screen and (max-width: 480px) {

	.flex-item1portfolio {
		min-width: 280px!important;
		height: 250px!important;
	}

	.flex-item3portfolio {
		min-width: 280px!important;
		height: 250px!important;
	}

	.flex-item4portfolio {
		min-width: 280px!important;
		height: 250px!important;
	}

	.flex-item5portfolio {
		min-width: 280px!important;
		height: 250px!important;
	}

	.description-portfolio {
		font-size: 12px;
		padding: 25px!important;
		margin-top: 35%!important;
		margin-bottom: 20%!important;
	}

	.flex-item4portfolio .description-portfolio {
	margin-top: 40%!important;
	margin-bottom: 23%!important;
}
}

div.description-portfolio {
	color: #FFF!important;
	color: #FFF!important;
	background-color: #008b8b;
	opacity: 0.8;
	margin-top: 50%;
	margin-bottom: 30%;
	padding: 20px;
	text-align: center;
	font-family: 'Mairy Black';
	font-size: 13px;
	width: 100%;
	border-bottom: 5px solid #030068;
	margin-right: 5%;
	margin-left: 5%;
	z-index: 2; /* Trial */
}



@media screen and (max-width: 480px) {
.description-portfolio {
		font-size: 11.5px!important;
	}
}

/* Trial */

div.flex-item1portfolio span {
	background: #008b8b;
	bottom: 0;
	display: block;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

div.flex-item3portfolio:hover  {
	height: 400px;
	background-size: 100% 85%;
	background-position: bottom;
}

div.flex-item4portfolio:hover  {
	height: 350px;
	background-size: 100% 80%;
	background-position: bottom;
}

div.flex-item5portfolio:hover  {
	height: 445px;
	background-size: 100% 80%;
	background-position: bottom;

}


div.flex-item1portfolio:hover span {
	opacity: 0.8;
}

div.flex-item1portfolio:hover c {
	display: none;
}

div.flex-item3portfolio:hover c {
	display: none;
}

div.flex-item4portfolio:hover c {
	display: none;
}

div.flex-item5portfolio:hover c {
	display: none;
}

div.flex-item3portfolio span {
	background: #008b8b;
	bottom: 0;
	display: block;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

div.flex-item3portfolio:hover span {
	opacity: 0.8;
}

div.flex-item4portfolio span {
	background: #008b8b;
	bottom: 0;
	display: block;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

div.flex-item4portfolio:hover span {
	opacity: 0.8;
}

div.flex-item5portfolio span {
	background: #008b8b;
	bottom: 0;
	display: block;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

div.flex-item5portfolio:hover span {
	opacity: 0.8;
}

div.flex-item1portfolio:hover .description-portfolio {
	margin-top: -26px;
	margin-right: 0%;
	margin-left: 0%;
	height: 8%;
	border-bottom: 5px solid #030068;
	opacity: 1;
}

div.flex-item3portfolio:hover .description-portfolio {
	margin-top: -5px;
	margin-right: 0%;
	margin-left: 0%;
	height: 7%;
	border-bottom: 5px solid #030068;
	opacity: 1;
}

div.flex-item4portfolio:hover .description-portfolio {
	margin-top: 0%;
	margin-right: 0%;
	margin-left: 0%;
	height: 8%;
	border-bottom: 5px solid #030068;
	opacity: 1;
}

div.flex-item5portfolio:hover .description-portfolio {
	margin-top: 0%;
	margin-right: 0%;
	margin-left: 0%;
	height: 12%;
	border-bottom: 5px solid #030068;
	opacity: 1;
}

div.text-itemportfolio {
	display: none;
}

div.flex-item1portfolio:hover .text-itemportfolio {
	display: block;
	width: 80%;
	color: #FFF;
	margin: auto;
	margin-top: -20%;
	opacity: 1;
	z-index: 2; /* Trial */
}

div.flex-item3portfolio:hover .text-itemportfolio {
	display: block;
	width: 80%;
	color: #FFF;
	margin: auto;
	margin-top: -30%;
	opacity: 1;
	z-index: 2; /* Trial */
}

div.flex-item4portfolio:hover .text-itemportfolio {
	display: block;
	width: 80%;
	color: #FFF;
	margin: auto;
	margin-top: -30%;
	opacity: 1;
	z-index: 2; /* Trial */
}

div.flex-item5portfolio:hover .text-itemportfolio {
	display: block;
	width: 80%;
	color: #FFF;
	margin: auto;
	margin-top: -27%;
	opacity: 1;
	z-index: 2; /* Trial */
}

@media screen and (max-width: 800px) {

	.flex-item3portfolio:hover .text-itemportfolio {
		margin-top: -29%!important;
	}
	.flex-item4portfolio:hover .text-itemportfolio {
		margin-top: -29%!important;
		font-size: 15px;
	}
	.flex-item5portfolio:hover .text-itemportfolio {
		margin-top: -30%!important;
		font-size: 15px;
	}

	div.flex-item1portfolio:hover .description-portfolio {
		margin-top: -17px;
	}

	div.flex-item3portfolio:hover .description-portfolio {
	margin-top: 0%;
	}
}

@media screen and (max-width: 480px) {
	.flex-item1portfolio:hover {
		height: 260px!important;
	}
	.flex-item1portfolio:hover .description-portfolio {
		height: 20px!important;
		margin-top: 0px!important;
	}

	.flex-item1portfolio:hover .text-itemportfolio {
		height: 235px!important;
		width: 260px!important;
		text-align: center!important;
		margin-top: -18%!important;
	}

	.flex-item5portfolio:hover {
		height: 472px!important;
		background-size: 100% 82%!important;
	}

	.flex-item5portfolio:hover .description-portfolio {
		height: 45px!important;
		margin-top: 0px!important;
	}

	.flex-item5portfolio:hover .text-itemportfolio {
		height: 422px!important;
		width: 260px!important;
		text-align: center!important;
		margin-top: -20%!important;
	}

	.flex-item3portfolio:hover {
		height: 450px!important;
		background-size: 100% 85%!important;
	}

	.flex-item3portfolio:hover .description-portfolio {
		height: 6%!important;
		margin-top: 0px!important;
	}
	.flex-item3portfolio:hover .text-itemportfolio {
		width: 260px!important;
		text-align: center!important;
	}

	.flex-item4portfolio:hover {
		height: 423px!important;
		background-size: 100% 85%!important;
	}
	.flex-item4portfolio:hover .description-portfolio {
			height: 6%!important;
		margin-top: 0px!important;
	}
	.flex-item4portfolio:hover .text-itemportfolio {
		width: 260px!important;
		text-align: center!important;
	}


	.flex-item3portfolio:hover .text-itemportfolio {
		margin-top: -20%!important;
	}
	.flex-item4portfolio:hover .text-itemportfolio {
		margin-top: -23%!important;
		font-size: 15px;
	}

}




/* Subpagina overmij */

div.container-subpage {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	max-width: 750px;
	margin: auto;
}

div.container-subpage-background {
	display: -webkit-flex;
	display: flex;
	height: 100%;
	width: 100%;
	margin: auto;
	background-color: #E8ECED;
	border-top: 4px solid #008b8b;
	align-items: flex-start;
}


div.container-subpage a:link,
div.container-subpage a:visited {
	color: #008b8b;
}

div.container-subpage a:hover {
	color: #030068;
	text-decoration: underline;
}

div.titelvideo {
	padding-left: 39px;
	padding-top: 20px;
}
div.video {
	margin-top: 20px;
	padding-left: 39px;
	padding-right: 40px;
	width: 100%;
	max-width:660px;
}

@media screen and (max-width: 720px) {
	.video {
	padding-left: 33px!important;
	padding-right: 33px!important;
	}
}

@media screen and (max-width: 600px) {
	.video {
	padding-left: 15px!important;
	padding-right: 15px!important;
	}
}

@media screen and (max-width: 480px) {
	.video {
	padding-left: 10px!important;
	padding-right: 10px!important;
	}

	div.titelvideo {
	padding-left: 10px!important;
}
}

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.left {
   float: left;
   padding: 0 20px 20px 0;}

div.titelreferentie-overmij {
	text-align: center;
	color:#008b8b;
	width: 100%;
	background-color: #E8ECED;
	font-family: 'Mairy Black';
	font-size: 25px;
	margin-bottom: 20px;
}

div.reference-container-color-overmij {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	background-color: #E8ECED;
	justify-content: space-around;
	-webkit-justify-content: space-around;
	height: 100%;
}

div.flex-itemovermij {
	width: 350px;
	height: 280px;
	text-align: center;
	margin: 0px 0px 20px;
	border: 3px solid #FFF;
	border-radius: 15px;
	padding-top: 3px;
	padding-bottom: 10px;
}

div.text-itemovermij {
	Margin-left: 2%;
	Margin-right: 5%;
	font-size: 14px;
}

div.reference-container-overmij {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	background-color: #E8ECED;
	padding: 10px;
	justify-content: space-around;
	-webkit-justify-content: space-around;
	max-width: 1340px;
	height: 100%;
}

div.bannerovermij {
	position: relative;
	background-image: url(http://www.mmc-fm.nl/wp-content/uploads/2017/01/bannerovermijklein.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 100px 0;
	opacity: 0.8;
	height: 100px;
}

@media screen and (min-width: 1300px) {
	.bannerovermij {
		height: 150px!important;
	}
}

@media screen and (max-width: 1050px) {
	.bannerovermij {
		height: 60px!important;
	}
}

@media screen and (max-width: 480px) {
	.bannerovermij {
		height: 30px!important;
	}
}

div.banner-titelovermij {
	position: absolute;
	width: 100%;
	color:#FFF;
	text-align: center;
	font-family: 'Mairy Black';
	font-size: 18px;
	background-color: #008b8b;
	opacity: 0.9;
	padding: 2% 0;
	top: 40%;
}


@media screen and (min-width: 1300px) {
	.banner-titelovermij {
		width:50%;
		margin-top: 1%!important;
	}
}

@media screen and (max-width: 630px) {
	.banner-titelovermij {
		padding: 5% 0!important;
	}
}

/* Smartphone Overmij */

@media screen and (max-width: 480px) {
div.reference-container-overmij {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	background-color: #E8ECED;
	padding: 10px;
	justify-content: space-around;
	-webkit-justify-content: space-around;
	width: 95%;
	height: 100%;
}

div.flex-itemovermij {
	width: 90%;
	height: 100%;
	text-align: center;
	margin: 0px 0px 20px;
	border: 3px solid #FFF;
	border-radius: 15px;
	padding-top: 3px;
	padding-bottom: 10px;
}
}


/* Contact */

div.flex-containercontact {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 35%;
	height: 25%;
	padding-top: 85px;
	padding-left: 35px;
}

div.titelreferentie-contact {
	text-align: center;
	color:#008b8b;
	width: 100%;
	background-color: #E8ECED;
	font-family: 'Mairy Black';
	font-size: 22px;
	margin-bottom: 20px;
}

div.flex-itemcontact1 {
	width: 250px;
	margin: 5px;
	margin-top: 20px;
}

div.flex-itemcontact2 {
	width: 250px;
	margin: 10px;
	margin-top: 14px;
}

@media screen and (max-width: 850px) {
	.flex-itemcontact2 {
		margin-top: 8px!important;
	}

	.flex-itemcontact1 {
	margin-top: 13px!important;
	}
}

div.flex-itemcontact3 {
	width: 200px;
	margin: 15px;
	margin-top: -60px;
	margin-right: 50px;
	padding-top: -50px;
}


.formulier {
	width: 40%;
	padding-left: 125px;
	padding-bottom: 15px;
}

   div.wpcf7 .wpcf7-form-control {
	    max-width: 95%;
		width: 95%;
	}

	.wpcf7 select {
		background-color: #fff;
		border: 1px solid #ccc;
	    border-radius: 3px;
	    margin: 0;
	    padding: 4px;
	    text-indent: 0px;
	    width: 100%;
	    z-index: 100;
	}

		.wpcf7-text {
	    width: 100%;
	}

	div.wpcf7 {


	    padding:20px 10px 10px 10px;
	    -webkit-border-radius: 4px; /* Making form border rounded */
	    -moz-border-radius: 4px;
	    border-radius: 4px;
	}


@media screen and (max-width: 760px) {

	.flex-containercontact {
		width: 100%!important;
		margin-top: -25px!important;
		padding-left: 0px!important;
		text-align: center!important;
	}

	.flex-itemcontact1 {
		width: 100%!important;
		margin-top: 0px!important;
	}

	.flex-itemcontact2 {
		width: 100%!important;
	}
	.flex-itemcontact3 {
		width: 100%!important;
		margin-right: 0px!important;
	}

	.formulier {
		margin: center;
		max-width: 450px!important;
		padding-left: 4px!important;
	}



}

@media (min-width:761px) {
	.titelformulier {
	display: none!important;
	}
}

@media (max-width:760px) {


	.formulier {
		margin: auto!important;
		width: 100%!important;
		margin-top: -20px!important;
	}

	.titelformulier {
	text-align: center;
	padding-top: 10px;
	}
}

div.contact {
	display: inline;
	position: relative;
	top: 7px;
}

div.mailcontact {
	margin-bottom: -10px;
}

div.bannercontact {
	position: relative;
	background-image: url(http://www.mmc-fm.nl/wp-content/uploads/2017/01/bannercontact.jpg);
	text-align: right;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 100px 0;
	opacity: 0.8;
	height: 100px;
}

@media screen and (min-width: 1300px) {
	.bannercontact {
		height: 150px!important;
	}
}

@media screen and (max-width: 1050px) {

	.bannercontact {
		height: 60px!important;
	}
}

@media screen and (max-width: 480px) {
	.bannercontact {
		height: 30px!important;
	}
}

div.banner-titelcontact {
	position: absolute;
	width: 100%;
	color:#FFF;
	text-align: center;
	font-family: 'Mairy Black';
	font-size: 18px;
	background-color: #008b8b;
	opacity: 0.9;
	padding: 2% 0;
	top: 40%;
}

@media screen and (min-width: 1300px) {
	.banner-titelcontact {
		width:50%;
		margin-top: 1%!important;
	}
}

@media screen and (max-width: 630px) {
	.banner-titelcontact {
		padding: 5% 0!important;
	}
}

/*Portfolio */




div.bannerportfolio {
	position: relative;
	background-image: url(http://www.mmc-fm.nl/wp-content/uploads/2017/02/bannerportfoliozwartwit.jpg);
	text-align: right;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 100px 0;
	opacity: 0.8;
	height: 100px;
}

@media screen and (min-width: 1300px) {
	.bannerportfolio {
		height: 150px!important;
	}
}

@media screen and (max-width: 1050px) {

	.bannerportfolio {
		height: 60px!important;
	}
}

@media screen and (max-width: 480px) {
	.bannerportfolio {
		height: 30px!important;
	}
}


div.banner-titelportfolio {
	position: absolute;
	width: 100%;
	color:#FFF;
	text-align: center;
	font-family: 'Mairy Black';
	font-size: 18px;
	background-color: #008b8b;
	opacity: 0.9;
	padding: 2% 0;
	top: 40%;
}

@media screen and (min-width: 1300px) {
	.banner-titelportfolio {
		width:50%;
		margin-top: 1%!important;
	}
}

@media screen and (max-width: 630px) {
	.banner-titelportfolio {
		padding: 5% 0!important;
	}
}

div.portfolio {
    margin: auto;
	margin-bottom: 20px;
	max-width: 80%;
}

@media screen and (max-width: 630px) {
	div.portfolio {
	max-width: 98%;
}
}

div.titelportfolio {
margin-left: 75px;
padding-top: 20px;
padding-bottom: 15px;
}

@media screen and (max-width: 650px) {
	.titelportfolio {
	margin: auto!important;
	}
}




/* contact special template*/
div.container-contact-background {
	background-color: #E8ECED;
	border-top: 4px solid #008b8b;
}

div.container-contact {
	padding-top: 10px;
	max-width: 750px;
	margin: auto;
}

/* Image wrap in content */
.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
  margin-left: 1.5em;
  margin-top: 0.3em;
}


@media screen and (max-width: 550px) and (min-width: 381px) {

.aligncenter,
img.aligncenter {
	clear: both!important;
	display: block!important;
	margin-left: auto!important;
	margin-right: auto!important;
}
}

@media screen and (max-width: 380px) {
.alignright,
img.alignright {
	margin-left: 0em!important;
	margin-right: 1em!important;
	}
}