/* Resetting the CSS first */
 
	html {
		font-size:100%;
	
	}
		@media only screen and  (min-width : 800px ) and (max-width : 1000px) {
			html {
				font-size: 90%; }
		}
		@media only screen and  (min-width : 600px ) and (max-width : 799px) {
			html {
				font-size: 80%; }
		}
		@media only screen and  (max-width : 599px) {
			html {
				font-size: 70%; }
		}	
		
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
	form,fieldset,input,textarea,p,blockquote,th,td {
		padding: 0;
		margin: 0;
		font-family:Open Sans;
		font-weight:300;
	}
	
	a{
		text-decoration:none;
	}
	table {
		border-spacing: 0;    
	}
	fieldset,img {
		border: 0;
	}
	address,caption,cite,code,dfn,strong,th,var {
		font-weight: normal;
		font-style: normal;
	
	}
	strong{
		font-weight: bold;
	}
	ol,ul {
		list-style: none;
		margin:0;
		padding:0;
	}
	caption,th {
		text-align: left;
	
	}
	p,a,h1,h2,h3,h4,h5,h6 {
		font-weight: normal;
		margin:0;
		padding:0;
		color: rgba(0,0,0,0.8);
	}
	
	a {
		color:#f8581e; }
	
	a:hover {
		text-decoration: none; }
		
	h1 {
		color: rgba(0,0,0,0.6); }
		
	q:before,q:after {
		content:'';
	}
	abbr,acronym { border: 0;
	}

/* end reset */

/* Custom CSS
 * --------------------------------------- */
body{
	font-family: arial,helvetica;
	color: #333;
	color: rgba(0,0,0,0.5);
}

html, body {
	height:100%;
	text-align: center;
	width:100%;
	display:block;
}

body {
	overflow-x:hidden;*}
	
.block {
	min-height: 300px; }

/* fonts */
	h1{
		font-size: 6rem;
		font-weight:300;}
	
	h2 {
		font-size:3rem;
		font-weight:300; }
	
	h3 {
		font-size: 2rem;
		font-weight:400; }
	
	p{
		font-size: 1.2rem;  	
		line-height: 2.4rem; 
		
		text-align:left;}
		
	h1 {
		padding: 10rem 0px 2rem 0px; 
		width:100%; 
		position:relative;}

/* end fonts */

.site-container {
	width:96%;
	margin: 2% auto; 
	max-width:1000px; }
	
	/* Home */
	.home {
		width:100%;
		height:100%;
		display:block;
		background: url('../images/home-4.jpg') no-repeat top left;
		background-size:cover; }
	
	.logo {
		display:block;
		width: 535px;
		height: 124px;
		position:absolute;
		bottom:5rem;
		left:50%;
		margin-left:-265px;
		background: url('../images/anne-reijse.png') no-repeat top left;
		background-size:cover; }

		@media only screen and (max-width : 535px) {
			.logo {
				display:block;
				width: 267px;
				height: 62px;
				position:absolute;
				bottom:5rem;
				left:50%;
				margin-left:-135px;
				background: url('../images/anne-reijse.png') no-repeat top left; 
				background-size:cover; }
		}

	/* Praktisch */
	.circle-shape { 
		width:100%;
		margin:0 auto;
		font-family: Open Sans, sans-serif; 
		text-align:justify;
	}
	
	.circle-shape p { 
	}
	
	.circle-shape .curve { 
		width: 33%; 
		height: auto;
		min-width: 75px;
		float: left;
		margin-right:4rem; 
		border-radius: 50%;
		-webkit-shape-outside:circle();
		shape-outside:circle();
	}
	
	/* Duurzaam */
	/* Let op: in apart stylesheet, zie index.php */
	
	/* Gallery */
	
	span.beschrijving {
		display:inline-block;
		width:30%; 
		float:left; }
	
	span.waarde {
		display:inline-block;
		width:70%;
		float:right; }
		
	.filter,
	.typeinfo {float:left; }
	
	.filter p,
	.typeinfo p,
	.filter h2,
	.typeinfo h2,
	.typeinfo a{
		color: #fff; }
	
	.filter h2,
	.typeinfo h2 {
		margin-bottom:1rem; }
	.typinfo h2 {}
		
	.filter p,
	.typeinfo p {
		font-size:0.8rem; 
		line-height:1rem;
		padding:0; margin:0;}
	
	.filter-column {
		width:32%;
		margin: 0 1% 2rem 0;
		float:left;}
		
		@media only screen and (min-width : 550px) and (max-width : 800px) {
			.filter-column {
				width:49%;
				margin: 0 1% 2rem 0;
				float:left;}
			
			.filter-column right {
				width:100%;
				float:left; }
		}
		@media only screen and (max-width : 549px) {
			.filter-column {
				clear:both;
				width:100%;
				margin: 0 0 2rem 0;
				float:left;}
		}
		
	.filter-column p {
		padding-bottom: 1rem; 
		text-transform:uppercase;
		border-bottom: 1px solid #ff9f42; 
		margin-bottom:1rem;}
		
	label {  
		display: inline-block;  
		cursor: pointer;  
		position: relative;  
		left:30px;
		padding-bottom:0.5rem;
		font-size: 13px;  
	} 
	
	input[type=radio] {  
		display: none;  
	}
	
	label:before {  
		content: "";  
		display: inline-block;  
	  
		width: 16px;  
		height: 16px;  
		position: absolute;  
		left: -30px;  
		top:1px;
	   /* bottom:1px;  */
		background-color: #ff952e; 
		/*box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  */
	} 
	
	.radio label:before {  
		border-radius: 8px;  
	} 
	
	input[type=radio]:checked + label:before {  
		background-color: #ffe4ca;  
	}  
	
	input[type=submit] {
		background:none;
		border:none;
		font-size:1.2rem;
		text-transform:uppercase;
		color:#fff;
		font-weight:normal;
		cursor:pointer;
	}
	input[type=submit]:hover {
		border-bottom: 1px solid #fff; }

	/* Kleurig */
	.kleurig-absolute-text {
		float:left;
		height:20rem;}
		
	.kleurig-text,
	.kleurig-middle-text {
		display:none; }
	
	#sb-container-alt {
		display:none; }
		
		@media only screen
		and (min-width : 401px) and (max-width : 900px) {
		.kleurig-absolute-text,
		.kleurig-text {
			display:none; }
		
		.kleurig-middle-text {
			display:block;}
		
		.sb-container {
			position: relative;
			width: 400px;
			height: 400px;
			right:200px;

			}
		.sb-container div {
			position: absolute;
			width: 130px;
			background: #fff;
			height: 400px;
			}
			
		}
			
		@media only screen
		and (max-width : 400px) {			
			#sb-container-alt {
				display:block; 	
				width: 400px;
				height: 400px;
				background: url('../images/color-swatch-narrow.png') no-repeat center center; 
				/*background-size:cover;*/
				margin:0 auto;}
			
			#sb-container,
			.kleurig-absolute-text{
				display:none; }
			
			.kleurig-text {
				display:block; }
			
		}
	
	
	.staal {
		float:left;
		margin-top:2rem;
		margin-right:2rem;
		width:104px;
		height: 150px; }
		
		.staal p {
			font-size:12px;
			font-style:italic;
			text-align:center; }
	.ruler {
		width:100%;
		float:left; }
		
		.ruler p {
			text-align:center; }
		a.meer,
		a.minder {
			cursor:pointer;}
	
	.bottom-colors {
		display:none; }
		
	.top-colors {
		display:block; }
		
		
	/* Contact */
	.leftblock {
		float:left; 
		width:65%}
	
	.rightblock {
		float:right;
		width:30%;
		
		border-right: 3px solid #f8581e;}

	.rightblock p {
		text-align:right; 
		padding-right:2rem;}
		
		@media only screen and (max-width : 600px) {
			.leftblock {
				float:left; 
				width:45%}
			
			.rightblock {
				float:right;
				width:45%;
				}
		}

#footer {
	margin-top:10rem; 
	display:block;
	clear:both;
	width:100%;}
	
#footer p,
#footer a {
	text-align:center;
	font-size:0.8rem; }
	
#footer a {
	color: #f8581e; }