/*********************************************************************************************

Project : rwdgrid - responsive grid system for your next project
URI: http://rwdgrid.com/
Version: 1.0
Author: Vineeth G S 
Author URI: http://www.gsvineeth.com
Github URI: https://github.com/gsvineeth/rwdgrid/

**********************************************************************************************

1.  Default / for Grid 1200px             
2.  960px 
3.  720px
4.  lt 720px 


**********************************************************************************************/


/********************************************************************************************* 

1.  Default / for Grid 1200px             

*********************************************************************************************/   

/* Style for demo REMOVE THIS SECTION */
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12,  .grid-13,  .grid-14,  .grid-15,  .grid-16 {
	/*background:#efefef;
	min-height:50px;
	color:#333;
	margin-bottom:15px;*/}
.clean{
	height:1px !important;
	min-height:1px !important;
	margin-bottom:0;
	background:none;
	clear:both;}
.ingrid{margin:10px;}

body{
	background:#fff;}
a{
	text-decoration:none;
	color:inherit;}
article a{
    text-decoration: underline;
}

.bigpic img{
    max-width:100%;
}	
	
/********************************************************************************************* 

1.  Default / for Grid 1200px             

*********************************************************************************************/  
	/* +++++ COLORS +++++ */
	
	.white{color:#fff;}
	.green{color:#999;}
	.gray{color:#999;}
	
	/* +++++ TYPOGRAPHIE +++++ */
	
	h1{font-size:1.6em;font-family:'Josefin Sans', sans-serif;font-weight:700;}
	h2{font-size:1.4em;}
	h3{font-size:1.0em;
		text-transform:uppercase;
		font-family:'Josefin Sans', sans-serif;
		font-weight:700;
		margin:10px 0;}
	h4{font-size:0.95em;margin:10px 0 0 0; text-transform: uppercase;}
		h4 .datum{
			font-size:0.75em;
			font-style:italic;
			padding-left:30px;}
		.nieuws_article .datum{
			font-size:0.85em;
			font-style:italic;
			line-height:16px;
			font-weight:normal;}
	p{font-size:0.8em;line-height:1.7em;}
	.slogan, .adres, .nieuws, .contact{
		text-transform:uppercase;
		font-family:'Josefin Sans', sans-serif;
		font-weight:600;
		font-size:0.9em;}
	.slogan{
		margin-top:120px;
		margin-right:10px;
		letter-spacing:inherit;
		text-align:justify;}
		.slogan:after {
			content: "";
			display: inline-block;
			width: 100%;}
	.adres{
		margin-top:0;
		margin-right:10px;
		letter-spacing:1.0pt;
		text-align:justify;}
		.adres:after {
			content: "";
			display: inline-block;
			width: 100%;}
	.contact{
		margin-top:10px;}
		.map{
			border:1px solid #bfbfbf;
			width:566px;}
	.bold{font-weight:bold;}
	.grondplan{
		height:610px;
		background-image:url('../img/grondplan.gif');
		background-repeat:no-repeat;
		background-position: bottom right;
		position:relative;}
		.grondplan h1{
			position:absolute;}
			.grondplan .gelijkvloers{
				bottom:100px;
				left:120px;
				color:#9eba00;}
			.grondplan .verdieping{
				bottom:60px;
				left:120px;
				color:#39C;}
	.grondplan .plan_foto{
		width:460px;
		height:273px;
		background-color:#CCCCCC;
		position:absolute;
		left:85px;
		top:15px;}
		.grondplan .plan_foto img{
			max-width:460px;
			max-height:273px;}
	.grondplan .position{
		position:absolute;
		width:22px;
		height:22px;
		line-height:24px;
		text-align:center;
		-webkit-border-radius:11px;
		-moz-border-radius:11px;
		border-radius:11px;
		font-size:0.75em;
		color:#fff;
		cursor:pointer;}
		.grondplan .position.glvl{
			background-color:#9eba00;
			text-align:center;}
		.grondplan .position.verd{
			background-color:#39C;
			text-align:center;}
	
	/* +++++ ELEMENTS +++++ */
	
	body{
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
	.top_container{
		clear:both;
		background-image:url('../img/bg_pattern.jpg');
		text-align:center;
		padding:0;}
		.top_container .top_pic{
			 background-repeat:no-repeat;
			 background-position:center;
			 height:45px;}
	.content_container{
		clear:both;}
		.logo{
			margin-top:75px;}
		.nieuws{
			margin-top:20px;}
		.nieuws_box{
			position:relative;
			min-height:210px;}
			.nieuws_album{
				margin-top:62px;
				width:50%;
				float:right;
				text-align:center;}
				.nieuws_album img{
					width:75px;}
			.nieuws_foto{
				margin-top:40px;
				margin-right:5px;
				max-width:150px;
				float:right;
				text-align:right;
				position:relative;}
			.nieuws_foto img{
				width:150px;}
			.meer_nieuws{
				text-align:right;
				/*position:absolute;
				bottom:0;
				right:0;*/}
				.meer_nieuws a{
					font-size:0.8em;
					color:#fff;
					background-color:#9eba00;
					padding:5px 7px;
					-webkit-border-radius:13px;
					-moz-border-radius:13px;
					border-radius:13px;}
		.thumb{
			-moz-box-shadow: 0 0 5px #ccc;
			-webkit-box-shadow: 0 0 5px #ccc;
			box-shadow: 0 0 5px #ccc;
			border: solid #fff 5px;
			left: -5px;
			background: #fff;}
		.keuken{
			position:relative;
			width:120px;
			float:left;}
/*
		.pers{
			position:relative;
			width:100%;
			clear:both;}
			.pers a{
				float:left;
				display:block;
				width:30%;
				position:relative;}
			.pers .pers_desc{
				float:left;
				width:calc(70% - 25px);
				padding-left:25px;}
*/

.flex_container{
    display:flex;
    align-items:flex-start;
    align-content:stretch;
    flex-wrap:wrap;
    width:100%;
}
.flex_item{}
.pers .pers_item{
    width:50%;
    padding-bottom:20px;}

@media (max-width : 1200px) {
    .pers .pers_item{
        width:100%;}
}

.pers .pers_item_pic{
    width:40%;}
    .pers .pers_item_pic img{
        max-width:100%;}
.pers .pers_item_txt{
    width:60%;}
    .pers .pers_item_txt div{
        padding:0 20px;}
    .pers .pers_item_txt a{
        color:#999;}
    .pers .pers_item_txt h3{
        text-transform:none;}
    .pers .pers_item_txt h3.green{
        color:#777;
        font-weight:600;}
				
			.catering_pics .space{
				width:29px;
				float:left;}
		.thema{
			width:33%;
			float:left;
			position:relative;}
			.thema h4{
				margin-bottom:10px;}
			.article_pic{
				position:relative;
				float:right;
				margin-top:15px;}
			.catering_pic{
				float:left;
				width:130px;
				height:130px;
				margin-top:20px;}
			.nieuws_article .article_pic{
				float:left;
				margin:-10px 15px 15px -20px;}
			.thema .monocle, .article_pic .monocle, .plan_foto .monocle, .keuken .monocle, .nieuws_foto .monocle, .pers .monocle, .slide .monocle{
				color:#fff;
				background-color:#999;
				width:26px;
				height:26px;
				line-height:26px;
				position:absolute;
				text-align:center;
				-webkit-border-radius:13px;
				-moz-border-radius:13px;
				border-radius:13px;
				display:none;}
				.thema .monocle{
					top:60px;
					left:115px;}
				.article_pic .monocle{
					top:60px;
					left:60px;}
				.plan_foto .monocle{
					top:120px;
					left:225px;}
				.nieuws_article .monocle{
					top:80px;
					left:80px;}
				.keuken .monocle{
					top:65px;
					left:45px;}
				.nieuws_foto .monocle{
					top:65px;
					left:65px;}
				.pers .monocle{
					top:calc(50% - 15px);
					left:calc(50% - 15px);}
				.slide .monocle{
					top:32%;
					left:calc(50% - 15px);}
		.catering_pics{}
			.catering_pics img{}
	.foot_container{
		clear:both;
		background-image:url('../img/bg_pattern.jpg');
		text-align:center;
		padding:0;}
		.foot_container .foot_pic{
			 background-repeat:no-repeat;
			 background-position:center;
			 height:266px;}
		.foot_container .bottom{
			position:relative;
			 height:260px;}
			.foot_container .bottom .ramdesign{
				position:absolute;
				right:50px;
				bottom:0;
				color:#fff;
				font-size:0.75em;}
.langs_wrap{
    max-width:1000px;
    margin: auto;
    height:45px;
    text-align: right;}
	.langs{
		list-style:none;
		float:right;
        margin: 0;}
		.langs li{
			float:left;
			width:60px;
			height:45px;}
			.langs li a{
				width:60px;
				height:45px;
				display:block;
				font-size:0.8em;
				line-height:45px;
				text-align:center;
				text-decoration:none;
				text-transform:uppercase;
				position:relative;
				font-family:'Josefin Sans', sans-serif;
				font-weight:700;
                color:#fff;}
.langs li a.active{
background-color:#999;
color:#000;}
			.langs li a .active_lang{
				display:none;}
			.langs li a.active .active_lang{
				display:block;
				position:absolute;
				top:0;
				left:5px;}
			.langs li a:hover{
/*				background-image:url('../img/lang_hover.png');*/
				background-repeat:no-repeat;
				background-position:center;}
	
	/* +++++ NAVIGATION +++++ */
	 
			.nav{
				font-family: 'Josefin Sans', sans-serif;
				font-weight:700;
				list-style:none;
				margin:0;padding:0;
				min-height:250px;}
				.nav li{
					width:200px;
					height:45px;
					line-height:45px;
					border-bottom:1px solid #e8e8e8;}
				.nav li:last-child{
					border:none;}
					.nav li a{
						display:block;
						text-align:right;
						text-transform:uppercase;}
					.nav li a:hover, .nav li a.active{
/*						color:#9eba00;*/
                        color:#999;}
					.nav li a .fa{ 
						display:none;}
					.nav li a.active .fa{
						display:none;
						float:left;
						line-height:40px;}
	.content{
		clear:both;
		position:relative;
		margin-top:50px;}
		.welkom{}
			.welkom .slider{
				width:270px;
				height:270px;}
			.welkom .bx-wrapper{
				width:270px;
				max-width:270px;
				margin:0;padding:0;
				float:right;}
			.welkom .bx-wrapper ul{
				margin:0;padding:0;}
		.artikel{}
			.artikel img{
				float:right;
				margin:20px;
				margin-right:0;
				max-width:175px;}
		.album{}
			.album ul{
				margin:0;
				padding:0;
				list-style:none;}
				.album ul li{
					float:left;}
					.album ul li img{
						max-width:95px;
						border:5px solid #fff;
						-webkit-border-radius:0.3em;
						-moz-border-radius:0.3em;
						border-radius:0.3em;
						-webkit-box-shadow:2px 2px 2px 0px #6f5c1c;
						box-shadow:2px 2px 2px 0px #6f5c1c;
						margin:0 15px 15px 0;}
	.sfeer_title{margin:;}
	.content_scroll{width:100%; padding-bottom:10px; overflow:auto; clear:both; float:right;}
	.content_scroll .images_container{overflow:hidden; min-height:80px; max-height:280px;}
	.content_scroll .images_container ul { margin:0; padding:0; }
	.content_scroll .images_container ul li { float:left; list-style:none; margin:0 1px 0 0; }
	.content_scroll .images_container img{display:block; height:280px; float:left; border-right:0px solid #fff;}
	.images_container li { text-align:center; line-height:160px; font-size:25px; }
		
	/* --- FORMS --- */
	
	form{
		margin-top:-20px;}
	.forminput{
		width:230px;
		font-size:0.8em;
		margin-top:20px;}
	.contact_forminput{
		width:275px;
		font-size:0.8em;
		/*margin:5px 0;*/
		margin-top:20px;}
	.contact_email_forminput{
		width:532px;
		font-size:0.8em;
		margin-top:10px;}
	.datetime{
		width:203px;
		font-size:0.8em;
		margin-top:20px;}
	.contact_text{
		width:561px;
		max-width:561px;
		min-height:80px;
		font-size:0.8em;
		line-height:1.2em !important;
		margin-top:20px;
		padding-bottom:5px;}
	.corner-all, .select{
		-webkit-border-radius:0.4em;
		-moz-border-radius:0.4em;
		border-radius:0.4em;
		/*border:1px solid #e8e8e8;*/
		border:1px solid #b5b5b5;
		height:25px;
		line-height:25px;
		padding-left:5px;}
		.select{
			width:569px;
			overflow:hidden;
			font-size:0.8em;
			height:28px;
			line-height:28px;
			margin-top:20px;
			padding-left:0;}
			.select select{
				width:100%;
				height:28px;
				border:0;
				line-height:1.5em;
				-webkit-appearance:none;
				-moz-appearance:none;
				appearance:none;
				text-indent:0.01px;
				text-overflow: '';
				background:transparent url("../img/select_arrow.gif") no-repeat scroll 100% center;
				cursor:pointer;}
	.submit_row{
			height:30px;
            width:570px;
			padding-right:10px;
			margin-top:20px;
			text-align:right;}
	.submit-button{
			text-transform:uppercase;
			font-family:'Josefin Sans', sans-serif;
			font-weight:600;
			font-size:0.9em;
			background:none;
			border:none;}
			.submit_row i{
				color:#9eba00;
				font-size:1.2em;}
		
	/*
	.ui-datepicker{font-size:0.75em !important;display:none;}
	.ui-widget-header{border:1px solid #333; background: #f6a828 url(../admin/css/ui-lightness/images/ui-bg_gloss-wave_35_cccccc_500x100.png) 50% 50% repeat-x !important; color: #ffffff; font-weight: bold;}
	.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #333;}
	*/
	
	.alert{
		display: block;
		/*width: 455px;*/
		margin:10px 0;
		padding: 10px;
		font-size: 14px;
		border-radius: 0.8em;
		transition: all 1s ease;
		box-shadow: #999 0 0 5px;
		-webkit-border-radius: 0.8em;
		-moz-border-radius: 0.8em;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		-webkit-box-shadow: #999 0 0 5px;
		-moz-box-shadow: #999 0 0 5px;}
	.succes{
		border: 1px solid #79C20D;
		color: #32510F;}
	.error{
		border: 1px solid #D20009;
		color:#7B040F;}
	.fout{
		color:#7B040F;
		margin:0;padding:0;
		width:238px;float:left;
		margin-right:5px;
		font-size:90%;
		display:none;
		position:absolute;}
		#err_name, #err_email{
			margin-left:240px;}
.col-2{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;}

.col-3{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;}
.col-2 p:first-child, .col-3 p:first-child{
	/*margin-top:0;*/}
	
.clear{
	clear:both;
	/*overflow:auto;*/}
.clear_10{
	clear:both;
	height:10px;}
.clear_15{
	clear:both;
	height:15px;}
.clear_20{
	clear:both;
	height:20px;}
.clear_25{
	clear:both;
	height:25px;}
.clear_30{
	clear:both;
	height:30px;}
.clear_40{
	clear:both;
	height:40px;}
.clear_50{
	clear:both;
	height:50px;}
	
.scale{
	max-width:100%;}

.width10{width:10%;}
.width15{width:15%;}
.width20{width:20%;}
.width25{width:25%;}
.width30{width:30%;}
.width33{width:33.33%;}
.width35{width:35%;}
.width40{width:40%;}
.width45{width:45%;}
.width50{width:50%;}
.width55{width:55%;}
.width60{width:60%;}
.width65{width:65%;}
.width66{width:66.66%;}
.width70{width:70%;}
.width75{width:75%;}
.width80{width:80%;}
.width85{width:85%;}
.width90{width:90%;}
.width100{width:100%;}
.maxwidth50{max-width:50%;}
.height100{height:100%;}

@media (max-width : 720px) {
	.width10,
	.width15,
	.width20,
	.width25,
	.width30,
	.width33,
	.width35,
	.width40,
	.width45,
	.width50,
	.width55,
	.width60,
	.width65,
	.width66,
	.width70,
	.width75,
	.width80,
	.width85,
	.width90,
	.width100,
    .maxwidth50{
		width:100%;
		max-width:100%;}
}


figure .objectfit{
	object-fit: cover;
    object-position: 50% 30%;}

 	.resp_show{display:none;}
	.resp_hide{display:block;}
	.buttons{width:1063px;}
	
	.slogan, .adres, .nieuws, .contact{
		margin:0 10px 0 0;}
	.slogan{margin-top:120px;}

/********************************************************************************************* 

2.  960px 

*********************************************************************************************/  

@media only screen and (min-width: 960px) and (max-width: 1199px) {

	/* +++++ TYPOGRAPHIE +++++ */
	
	h1{font-size:1.3em;}
	h2{font-size:1.1em;}
	h3{font-size:0.9em;}
	p{font-size:0.8em;}
 	.resp_show{display:block;}
 	.resp_hide{display:none;}
	.logo{margin-top:20px;}
	.slogan, .adres, .nieuws, .contact{
		font-size:0.8em !important;
		margin:0 100px 0 0;}
	.slogan{
		letter-spacing:inherit;
		text-align:right;}
		.slogan:after {
			content: "";
			display: inline-block;
			width: auto;}
	.adres{
		letter-spacing:1.0pt;
		text-align:right;}
		.adres:after {
			content: "";
			display: inline-block;
			width: auto;}
	.buttons{width:860px;}
	.contact_forminput{max-width:450px;width:210px;}
	.contact_text{max-width:442px;}
	.submit_row{max-width:450px;}
    article a{
        text-decoration: underline !important;
    }
}
	

/********************************************************************************************* 

3.  720px 

*********************************************************************************************/ 

@media only screen and (min-width: 720px) and (max-width: 959px) {

	/* +++++ TYPOGRAPHIE +++++ */
	
	h1{font-size:1.3em;}
	h2{font-size:1.1em;}
	h3{font-size:0.9em;}
	p{font-size:0.8em;}
 	.resp_show{display:block;}
 	.resp_hide{display:none;}
	.logo{margin-top:20px;}
	.slogan, .adres, .nieuws, .contact{
		font-size:0.75em !important;
		margin:0 70px 0 0;}
	.slogan{
		letter-spacing:inherit;
		text-align:right;}
		.slogan:after {
			content: "";
			display: inline-block;
			width: auto;}
	.adres{
		letter-spacing:1.0pt;
		text-align:right;}
		.adres:after {
			content: "";
			display: inline-block;
			width: auto;}
	.buttons{width:662px;}
	.contact_forminput{max-width:450px;width:320px;}
	.contact_text{max-width:320px;}
	.submit_row{max-width:320px;}
}
 
 

/********************************************************************************************* 

4.  lt 720px 

*********************************************************************************************/ 

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

	/* +++++ TYPOGRAPHIE +++++ */
	
	h1{font-size:1.3em;}
	h2{font-size:1.1em;}
	h3{font-size:0.9em;}
	p{font-size:0.8em;}
 	.resp_show{display:block;}
 	.resp_hide{display:none;}
	.logo{margin-top:20px;}
	.slogan, .adres, .nieuws, .contact{
		font-size:0.75em !important;
		margin:0 !important; padding:0 !important;
		text-align:left !important;
		height:25px !important;}
	.slogan{
		letter-spacing:inherit;
		text-align:right;}
		.slogan:after {
			content: "";
			display: inline-block;
			width: auto;}
	.adres{
		letter-spacing:1.0pt;
		text-align:right;}
		.adres:after {
			content: "";
			display: inline-block;
			width: auto;}
	.buttons{width:98%;
		left:0px !important;}
	.contact_forminput{max-width:450px;width:442px;}
	.contact_text{max-width:442px;}
	.submit_row{max-width:450px;}

}