/*==============================================================
Project specific resets...
================================================================*/

html, body { width:100%; min-height:100%; height:auto !important; height:100%; margin:0; padding:0; text-align:left; }
body { }
ul, ol, dl { list-style:none; }
ul,ol,li,h1,h2,h3,h4,h5,h6,strong,em,pre,form,body,html,p,blockquote,cite,code,fieldset,legend,input,embed,object,param,dl,dd,dt,kbd,samp,var,tt,table,th,th,figure,figcaption { margin:0; padding:0; font-style:normal; font-weight:normal; }
a img, :link img, :visited img { border:none; }
embed,object,param { display:block; }
img { display:block; }

/* Typography reset... */
a, a:hover, a:visited, a:active, a:link, a:focus, object:focus { outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:12px; margin:0px;}

/* Form reset... */
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, textarea:focus { outline:none; }
input[type=submit], button { cursor:pointer;}
input, fieldset, select, textarea, button { background-color:transparent; border:none; overflow:visible; }
radio { overflow:visible; }

/* Disabling safari resize handles... */
textarea { resize:none; }


/*==============================================================
Window general styling...
================================================================*/

*{
    -webkit-user-select: none;
            user-select: none;
}

ul,ol,li,h1,h2,h3,h4,h5,h6,strong,em,pre,p,b,blockquote,cite,code,fieldset,legend,input,textarea,param,dl,dd,dt,kbd,samp,var,tt,td {
    -webkit-user-select: text;
            user-select: text;
}

/*==============================================================
Global layout and styling...
================================================================*/
body { 
    background: #F4F4F4; 
    color: #6D6D6D; 
    font-family: 'museo_sans'; 
    font-size:13px;
    font-weight: 300; 
    line-height:22px; 
    text-align: left; 
    position: relative;
}
    
.Wrap {
    height: auto;
    width: 100%; 
    min-width: 1280px;
    overflow: hidden; 
    position: relative; 
}
	.Wrap.Text {
		padding: 40px 0 15px 0; 	
	}
	
	.Wrap.Red {
		background: #C4715D;
	}
	
	.Wrap.White {
		background: #FFFFFF;
	}
	
	.Wrap.Footer {
		padding: 45px 0 15px 0;
		background: #212121;
	}
	
	.Wrap.Blocks {
		padding: 75px 0 75px 0;
	}

.Row {
	height: auto;
	width: 1230px;
	padding: 0 25px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}



/*==============================================================
Text styling...
================================================================*/

h2,h3 {
	color: #6D6D6D; 
    font-family: 'museo_sans'; 
}

h2.Heading.Large {
	font-size: 32px;
	font-weight: 100;
	line-height: 42px;
	text-align: center;
	width: 100%;
	padding: 0 0 69px 0;
	display: block;
	position: relative;
	
	-webkit-font-smoothing:antialiased;
}

h2.Heading.Small, h3.Heading.Small {
	font-size: 18px;
	font-weight: 300;
	line-height: 27px;
	text-align: left;
	padding: 31px 25px 15px 25px;
	display: block;
}

h3.Heading.Large {
	font-size: 26px;
	font-weight: 100;
	line-height: 34px;
	padding: 35px 25px 15px 25px;
	display: block;
	
	-webkit-font-smoothing:antialiased;
}

p {
	color: #6D6D6D; 
    font-family: 'museo_sans';
    font-size: 16px;
	font-weight: 100;
	line-height: 29px;
	text-align: left;
    padding: 0 0 29px 0;
     
    -webkit-font-smoothing:antialiased;
}
	
	.ColFill.White p {
	    padding: 0 0 29px 0;
	    display: block;
	    margin: 0 25px 0 25px;
	}
	
	.ColFill.White.Small p {
		color: #999999;
		font-size: 14px;
		line-height: 26px;
		padding: 0 0 18px 0;
		display: block;
		
		-webkit-font-smoothing: subpixel-antialiased;
	}
	
	.News p {
		color: #999999;
		font-size: 14px;
		line-height: 26px;
		padding: 0 0 18px 0;
		display: block;
		
		-webkit-font-smoothing: subpixel-antialiased;
	}

p a {
	color: #CD6E57;
}

p > a {
	text-decoration: underline !important;
}

.TextCol p:last-child {
	padding: 0;
}

	.Col.CenterText p,
	.Col.CenterText {
		text-align: center;
	} /*weg  */
	
	.ColFill.CenterText p,
	.ColFill.CenterText {
		text-align: center;
	}
	
	.Wrap.Red h2, 
	.Wrap.Red h3, 
	.Wrap.Red p,
	.Wrap.Red a,
	.Wrap.Footer h2,
	.Wrap.Footer h3,
	.Wrap.Footer p,
	.Wrap.Footer a {
		color: #FFFFFF;
	}
	
.ReadMore {
	background: url('../img/sprite.png') 90px -236px no-repeat;
	color: #ADADAD;
	font-family: 'museo_sans';
    font-size: 16px;
    font-style: italic;
	font-weight: 100;
	text-align: left;
	width: 150px;
    padding: 0;
	display: block;
	float: left;
	margin: 0 25px 29px 25px;
	
	-webkit-font-smoothing: antialiased;

	transition: background-position 0.2s ease-out;
	-webkit-transition: background-position 0.2s ease-out;
}

	a:hover .ReadMore {
		background-position: 95px -236px;
	}
	
.Desc {
	color: #ADADAD;
	font-family: 'museo_sans';
    font-size: 13px;
	font-weight: 100;
	text-align: left;
	padding: 0;
	display: block;
	margin: 0 25px 19px 25px;
}

/*==============================================================
Input styling...
================================================================*/

.Label {
	background: #FFFFFF;
	height: auto;
	width: auto;
	padding: 9px 15px 9px 15px;
	overflow: hidden;
	display: block;
		
}

	.Label.Text {
		margin: 0 0 40px 0;
	}
		
	.Label.Textarea {
		margin: 0 0 0 0;
	}

.Field {
	color: #999999; 
    font-family: 'museo_sans';
    font-size: 15px;
	font-weight: 100;
	line-height: 28px;
	text-align: left;
	height: auto; 
	overflow: hidden;
	display: block;
}

.Field.Text {
	background: #FFFFFF;
	height: auto;
	width: 100%;
	float: left;
	margin: 0 0 0 0;
	
	transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
	-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; /* Safari */ 
}

.Field.Textarea {
	background: #FFFFFF;
	height: 200px;
	width: 100%;
	float: left;
	margin: 0 0 0 0;
}

.Submit {
	margin: 45px auto;
	
	border-radius: 0;
	-webkit-border-radius: 0;
	
	-webkit-appearance: none;
}

/*==============================================================
Qoute...
================================================================*/
.Author {
	background: url('../img/sprite.png') center -190px repeat-x;
	color: #FFFFFF; 
    font-family: 'museo_sans';
    font-size: 16px;
	font-weight: 100;
	line-height: 29px;
	text-align: center;
    padding: 0 24px 0 24px;
    display: inline-block;
    margin: 0 auto 29px;
    
    -webkit-font-smoothing:antialiased; 
}

	.Author .Name {
		background: #C4715D;
		padding: 0 10px 0 10px;
	}
	
/*==============================================================
Deco...
================================================================*/
.CurvedLine {
	background: url('../img/sprite.png') center -140px repeat-x;
	height: 10px;
	width: 48px;
	overflow: hidden;
	display: block;
	position: absolute;
	bottom: 28px;
	left: 50%;
	margin: 0 0 0 -24px;
}

	.Wrap.Red .CurvedLine {
		background-position: center -200px;	
	}

/*==============================================================
Col 
================================================================*/

.Col {
	height: auto;
	padding: 0;
	overflow: hidden;
	margin: 0;
	position: relative;
	float: left;
}

	.Col.TwoOfSix { 
		width: 33.33333%; 
	}
	.Col.ThreeOfSix { 
		width: 50%;  
	}
	
		.ThreeOfSix.Odd {
			float: left; 
			clear: left;
		}
		
		.ThreeOfSix.Even {
			float: right; 
			clear: right;
		}
		
	.Col.FourOfSix { 
		width: 66.66667%;
		width: 830px; 
	}
	.Col.SixOfSix { 
		width: 100%; 
	}
	
	.Col.Center {
		margin: 0 auto;
		float: none;
	}

	.Col.Left {
		float: left;
		clear: left;	
	}
	
	.Col.Right {
		float: right;
		clear: right;	
	}

.ColFill {
	height: auto;
	padding: 0;
	overflow: hidden;
	margin: 25px;
	position: relative;
}

	.ColFill.White {
		background: #FFFFFF;
		
		box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.03);
		-webkit-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.03);
	}
	
	.ColFill.CenterText {}
	
	.ColFill.Padding {
		padding: 0 0 15px 0;
	}
	

/*==============================================================
Text Col styling...
================================================================*/
.TextCol {
	padding: 0 0 29px 0;
}
	
	.TextCol.Three {
		column-count:3;
		-moz-column-count:3; /* Firefox */
		-webkit-column-count:3; /* Safari and Chrome */
	
		column-width: auto;
		-moz-column-width: auto; /* Firefox */
		-webkit-column-width: auto; /* Safari and Chrome */
		
		column-gap: 50px;
		-moz-column-gap: 50px; /* Firefox */
		-webkit-column-gap: 50px; /* Safari and Chrome */
	}
/*==============================================================
Header styling...
================================================================*/
#Header{
	height: 130px;
	
	transition: height 0.3s ease-out;
	-webkit-transition: height 0.3s ease-out;
}

#Logo {
	text-indent: -9999px;
	height: 50px;
	width: 210px;
	overflow: hidden;
	display: block;
	float: left;
	position: relative;
	margin: 39px 0 41px 25px;
}

#LogoMask {
	background: url('../img/sprite.png') 0 0 no-repeat;
	height: 50px;
	width: 210px;
	display: block;
	position: relative;
}

.LogoIcon {
	background: url('../img/sprite.png') no-repeat;
	height: 50px;
	width: 48px;
	display: block;
	position: absolute;
	left: 0;
}

	.LogoIcon.Logo {
		background-position: 0 -60px;
		top: 0px;
		
		transition: top 0.2s ease-out;
		-webkit-transition: top 0.2s ease-out;
		
		transition-delay: 0.2s;
		-webkit-transition-delay: 0.2s;
	}
	
		#Logo:hover .LogoIcon.Logo {
			top: 50px;
			
			transition-delay: 0s;
			-webkit-transition-delay: 0s;
		}
	
	.LogoIcon.Home {
		background-position: -48px -60px;
		top: 50px;
		
		transition: top 0.2s ease-in;
		-webkit-transition: top 0.2s ease-in;
		
		transition-delay: 0s;
		-webkit-transition-delay: 0s;
	}
	
		#Logo:hover .LogoIcon.Home {
			top: 0px;
			
			transition-delay: 0.2s;
			-webkit-transition-delay: 0.2s;
		}
	

#NavUl {
	height: auto;
	overflow: hidden;
	display: block;
	float: right;
	margin: 40px 25px 40px;
}

.NavLi {
	float: left;
	margin: 16px 0 0 40px;
}

.NavA {
	border-bottom: 1px dotted #F4F4F4;
	color: #6D6D6D; 
    font-family: 'museo_sans'; 
    font-size:16px;
    font-weight: 300; 
    line-height:18px; 
    text-align: left; 
    padding: 0 0 6px 0;
    display: block; 
    position: relative;
    
    transition: border 0.5s ease;
	-webkit-transition: border 0.5s ease;
}

	.NavA:hover {
		border-bottom: 1px dotted #626262;
	}
	
	.NavA.Active {
		border-bottom: 1px dotted #626262;
	}
	
.MenuIcon {
	background: url('../img/sprite.png') -200px -66px;
	height: 25px;
	width: 35px;
	display: none;
	position: absolute;
	right: 50px;
	top: 52px;
} 	

/*==============================================================
Img...
================================================================*/

.ImgWrap.News {
	background-size: cover;
	background-position: center 0;
	height: 200px;
	width: 100%;
}

.SmallImg {
	width: 100%
}

.Wrap.Img {
	background-size: cover;
	height: 350px;
}

	.Wrap.Img.Home {
		background-position: center center;
		background-image: url('https://www.gedragkr8.nl/uploads/foto_1.jpg');	
	}
	
	.Wrap.Img.About {
		background-position: center -30px;
		background-image: url('https://www.gedragkr8.nl/uploads/foto_2.jpg');	
	}
	
	.Wrap.Img.About2 {
		background-position: center -50px;
		background-image: url('https://www.gedragkr8.nl/uploads/chefbijopvoeding_2.jpg');
		height: 420px;	
	}	
	
	.Wrap.Img.Proces {
		background-position: center 0;
		background-image: url('https://www.gedragkr8.nl/uploads/chefbijopvoeding_5.jpg');
	}
	
	.Wrap.Img.References {
		background-position: center -80px;
		background-image: url('https://www.gedragkr8.nl/uploads/chefbijopvoeding_4.jpg');
	}
	
	.Wrap.Img.News {
		background-position: center center;
		background-image: url('https://www.gedragkr8.nl/uploads/foto_3.jpg');
	}
	
	.Wrap.Img.Contact1 {
		background-position: center center;
		background-image: url('https://www.gedragkr8.nl/uploads/foto_4.jpg');	
	}	


/*==============================================================
Quickmenu...
================================================================*/
.Col.QuickMenu {
	margin:73px 13px;
}

	.QuickMenu li {
		float: left;
	}
	
	.QuickMenu a, 
	.Submit {
		background: #A6533F;
		color: #FFFFFF; 
	    font-family: 'museo_sans';
	    font-size: 16px;
		font-weight: 100;
		line-height: 24px;
		text-align: left;
		height: auto; 
		padding: 11px 15px 11px 15px;
		overflow: hidden;
		display: inline-block;
		
		transition: background 0.2s ease-out;
		-webkit-transition: background 0.2s ease-out;
	}
	
	.QuickMenu a {
		margin: 7px 7px 7px 7px;
	}
	
	.QuickMenu a:hover,
	.Submit:hover {
		background: #9C4935;
	}
	
/*==============================================================
Footer...
================================================================*/

#FooterLogo {
	height: 50px;
	width: 48px;
	overflow: hidden;
	display: block;
	position: relative;
	margin: 10px auto 32px;
}

	.LogoIcon.Logo.White {
		background-position: -96px -60px;
	}
	
		#FooterLogo:hover .LogoIcon.Logo {
			top: 50px;
			transition-delay: 0s;
			-webkit-transition-delay: 0s;
		}
	
	.LogoIcon.Home.White {
		background-position: -144px -60px;
	}
	
		#FooterLogo:hover .LogoIcon.Home {
			top: 0px;
			transition-delay: 0.2s;
			-webkit-transition-delay: 0.2s;
		}
		
	.LogoIcon.Mask {
		top: 40px;
		left: 0px;
		background-position: -96px -240px;
	}

.CopyRight {
	color: #FFFFFF;
	font-family: 'museo_sans';
    font-size: 16px;
	font-weight: 100;
	line-height: 29px;
	text-align: center;
	display: block;
	margin: 0 0 30px 0;
	
	-webkit-font-smoothing:antialiased;
}

/*============================================================================================================================
Responsive...
==============================================================================================================================*/

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

	.Wrap {
	    min-width: 100%;
	}
	
	.Row {
		width: auto;
		padding: 0 25px;
		margin: 0;
	}
	
}


@media screen and (min-width: 920px) and (max-width: 1000px) {
	
	.NavLi.First {
		display: none;
	}
}

@media screen and (max-width: 920px) {
	
	#Header.Open {
		height: 450px;
	}
	
	#NavUl {
		width: 100%;
		float: left;
		margin: 16px 0 0 25px;
	}
	
	.NavLi {
		float: left;
		clear: both;
		margin: 0 0 21px 0;
	}
	
	.MenuIcon {
		display: block;
	}
	
}

@media screen and (min-width: 880px) and (max-width: 1280px) {
	
	/*==============================================================
	Text Col styling...
	================================================================*/
	
	.TextCol {
		padding: 0 0 29px 0;
	}
		
		.TextCol.Three {
			width: 780px;
			margin: 0 auto;
			column-count:2;
			-moz-column-count:2; /* Firefox */
			-webkit-column-count:2; /* Safari and Chrome */
		
			column-width: auto;
			-moz-column-width: auto; /* Firefox */
			-webkit-column-width: auto; /* Safari and Chrome */
			
			column-gap: 50px;
			-moz-column-gap: 50px; /* Firefox */
			-webkit-column-gap: 50px; /* Safari and Chrome */
		}
	
	/*==============================================================
	Img...
	================================================================*/
	
	.Wrap.Img {
		height: 300px;
	}
	
		.Wrap.Img.Home {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_1.jpg');	
		}
		
		.Wrap.Img.About {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_2.jpg');	
		}
		
		.Wrap.Img.About2 {
			background-image: url('https://www.gedragkr8.nl/uploads/chefbijopvoeding_2.jpg');
			height: 350px;	
		}	
		
		.Wrap.Img.Proces {
			background-image: url('https://www.gedragkr8.nl/uploads/chefbijopvoeding_5.jpg');
		}
		
		.Wrap.Img.References {
			background-image: url('https://www.gedragkr8.nl/uploads/chefbijopvoeding_4.jpg');
		}
		
		.Wrap.Img.News {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_3.jpg');	
		}
		
		.Wrap.Img.Contact1 {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_4.jpg');	
		}
	
}

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

	/*==============================================================
	Text Col styling...
	================================================================*/
	
	.Col.TwoOfSix { 
		width: 100%; 
	}
	.Col.ThreeOfSix { 
		width: 50%;  
	}
	.Col.FourOfSix { 
		width: 100%; 
	}
	.Col.SixOfSix { 
		width: 100%; 
	}

	
	/*==============================================================
	Text Col styling...
	================================================================*/
	
	.TextCol {
		padding: 0 0 29px 0;
	}
		
		.TextCol.Three {
			column-count:1;
			-moz-column-count:1; /* Firefox */
			-webkit-column-count:1; /* Safari and Chrome */
		
			column-width: auto;
			-moz-column-width: auto; /* Firefox */
			-webkit-column-width: auto; /* Safari and Chrome */
			
			column-gap: 0;
			-moz-column-gap: 0; /* Firefox */
			-webkit-column-gap: 0; /* Safari and Chrome */
		}

	/*==============================================================
	Img...
	================================================================*/
	
	.Wrap.Img {
		height: 300px;
	}
	
		.Wrap.Img.Home {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_1.jpg');	
		}
		
		.Wrap.Img.About {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_2.jpg');	
		}
		
		.Wrap.Img.About2 {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_2.jpg');
			height: 400px;	
		}	
		
		.Wrap.Img.Proces {
			background-image: url('https://www.gedragkr8.nl/uploads/chefbijopvoeding_5.jpg');
		}
		
		.Wrap.Img.References {
			height: 150px;
			background-repeat: no-repeat;
			background-image: url('https://www.gedragkr8.nl/uploads/chefbijopvoeding_4.jpg');
		}
		
		.Wrap.Img.News {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_3.jpg');	
		}
		
		.Wrap.Img.Contact1 {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_4.jpg');	
		}
	

}


@media screen and (min-width: 660px) and (max-width: 880px) {
	
	/*==============================================================
	Text styling...
	================================================================*/
	
	.ReadMore {
		margin: 0 25px 29px 0px;
	}
	
	/*==============================================================
	Img...
	================================================================*/
	.ImgWrap.Small {
		background: #F0F;
		height: 100%;
		width: 50%;
		overflow: hidden;
		margin: 0 25px 0 0; 
		float: left;
	}
	
	.SmallImg {
		height: 272px;
		width: auto;
		margin: 0 0 0 -90px
	}
	
	.ImgWrap.News {
		height: 190px;
		width: 100%;
	}


}


@media screen and (max-width: 700px) {
	
	.Col.Left {
		clear: both;
	}
	
	.Col.Right {
		float: left;
		clear: both;
	}
	
	.Col.News {
		width: 100%;
	}
	
	.Col.ThreeOfSix {
		width: 100%;
	}

	/*==============================================================
	Img...
	================================================================*/
	
	.Wrap.Img {
		height: 300px;
	}
	
		.Wrap.Img.Home {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_1.jpg');	
		}
		
		.Wrap.Img.About {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_2.jpg');	
		}
		
		.Wrap.Img.About2 {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_2.jpg');
			height: 300px;	
		}	
		
		.Wrap.Img.Proces {
			background-image: url('https://www.gedragkr8.nl/uploads/chefbijopvoeding_5.jpg');
		}
		
		.Wrap.Img.References {
			background-image: url('https://www.gedragkr8.nl/uploads/chefbijopvoeding_4.jpg');
		}
		
		.Wrap.Img.News {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_3.jpg');
		}	
		
		.Wrap.Img.Contact1 {
			background-image: url('https://www.gedragkr8.nl/uploads/foto_4.jpg');	
		}
	
	.ImgWrap.News {
		height: 240px;
		width: 100%;
	}
}

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

	.ImgWrap.News {
		height: 190px;
		width: 100%;
	}
}

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

	#LogoMask {
		width: 50px;
	}	
}