@charset "UTF-8";
/* CSS Document */

html, body {
	margin:0;
	background-color:#fff;
	font-family: 'Open Sans', sans-serif;
	letter-spacing:1px;
	font-size:14px;
	color:#000;
	height: 100%;
	font-weight: 400;
	overflow-x: hidden;
}

h1 {
	color: #000;
	margin-top: 0px;
	font-weight: 400;
	font-size: 2.2em;
}

h2 {
	font-weight: 400;
	color:#000;
	font-size: 1.4em;
	margin-bottom: 5px;
}

a:link {
	color: #009ee0;
}

a:visited {
	color: #009ee0;
}

iframe {
	width: 500px;
	height: 350px;
}

.thumbnails {
		width: 25%;
}

/* Text Layers */

.tekstlayer {
	visibility: visible;
	z-index: 9;
	width: 70%;
	margin-left: 15%;
	margin-top: 480px;
	text-align: center;
	overflow-x: hidden;
}

/* Opmaak lagen */

.languagelayer {
	position: absolute;
	width: 96px;
	height: 30px;
	left:15%;
	z-index: 5;
	top:53px;
	font-size: 0.7em;
	text-align: center;
}

.socialmedia {
	position: absolute;
	width: 96px;
	height: 30px;
	right:15%;
	z-index: 5;
	top:56px;
	font-size: 0.7em;
	text-align: center;
	
}

.socialmedia2 {
	visibility: hidden;
	position: relative;
	width: 96px;
	height: 30px;
	z-index: 5;
	top:56px;
	font-size: 0.7em;
	text-align: center;
	
}

.logolayer {
	position: absolute;
	width:100%;
	height:134px;
	top:0px;
	background-image: url("../afbeeldingen/logossub/logo.png");
	background-position: center;
	background-repeat: no-repeat;
}

.hoofdlayer {
	position: absolute;
	visibility: visible;
	z-index: 1;
	top: 0px;
	width: 100%;
	min-height: 100%;
	background-image:url("../afbeeldingen/opmaak/bg.jpg");
	background-position:-1600px 0px;
	background-repeat:repeat-y;
}

.youtube-banner {
	position: absolute;
	background-image:url(../afbeeldingen/socialicons/youtube-banner.jpg);
	width:63px;
	height:33px;
	top:466px;
	z-index: 1;
	right:15%;
	box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.7);
	display: block;
}

/* Navigatie balk */

ul.topnav {
    list-style-type:none;
	margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000;
}

/* Float the list items side by side */
ul.topnav li {
	float:left;
}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: left;
    text-decoration: none;
    transition: 0.3s;
	z-index: 4;
	vertical-align: top;
}

/* Change background color of links on hover */
ul.topnav li a:hover {
	background-color: #009ee0;
}

ul.topnav li a:active {
	background-color: #009ee0;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
	display: none;
}

li a, .dropbtn {
    color: #333;
    text-align: left;
    padding:14px 16px ;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #009ee0;
}

li a:active, .dropdown:hover .dropbtn {
    background-color: #009ee0;
}


li.dropdown {
    display: inline-block;
	vertical-align: top;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #111;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    text-decoration: none;
    text-align: left;
	width: auto;
}

.dropdown-content a:hover {
	background-color: orange
}

.dropdown:hover .dropdown-content {
    display: block;
}

.buttonlayer {
	position: absolute;
	visibility: visible;
	z-index: 3;
	top: 134px;
	width: 640px;
	left: 50%;
	margin-left: -320px;
	height: 47px;
	background-color:#000;
	font-size: 1em;
	text-align: left;
}

.buttonlayerbackground{
	position: absolute;
	top: 134px;
	width: 100%;
	height:47px;
	background-color:#000;
	z-index: 2;
}


/* Slider Layers */

.slidelayer {
	position: absolute;
	visibility: visible;
	z-index: 2;
	top: 176px;
	width: 100%;
	height: 290px;
	background-position:center;
	background-color: #000;
}

.slide-home {
	background-image:url("../afbeeldingen/banners/banner-home.jpg");
	background-repeat: repeat-x;
}

.slide-tsla {
	background-image:url("../afbeeldingen/banners/banner-tankssiloslinersvoeringen.jpg");
	background-repeat: repeat-x;
}

.slide-agrarisch {
	background-image:url("../afbeeldingen/banners/banner-agrarisch.jpg");
	background-repeat: repeat-x;
}

.slide-mest {
	background-image:url("../afbeeldingen/banners/banner-mest.jpg");
	background-repeat: repeat-x;
}

.slide-gww {
	background-image:url("../afbeeldingen/banners/banner-gww.jpg");
	background-repeat: repeat-x;
}

.slide-betonbescherming {
	background-image:url("../afbeeldingen/banners/banner-betonbescherming.jpg");
	background-repeat: repeat-x;
}

.slide-petrochemie {
	background-image:url("../afbeeldingen/banners/banner-petrochemie.jpg");
	background-repeat: repeat-x;
}

.slide-spuitlining {
	background-image:url("../afbeeldingen/banners/banner-spuitlining.jpg");
	background-repeat: repeat-x;
}

.slide-zwembaden {
	background-image:url("../afbeeldingen/banners/banner-zwembaden.jpg");
	background-repeat: repeat-x;
}

@media screen and (max-width:999px) {
	
/* Opmaak lagen */
	
.hoofdlayer {
 	background-image: url("../afbeeldingen/opmaak/bg-s.jpg");
	background-position:center;	
}	

.youtube-banner {
	right: 5%;
}

.tekstlayer{
	width: 90%;
	margin-left: 5%;
}	
	
}

@media screen and (max-width:800px) {
	
/* Opmaak lagen */
	
iframe {
	width: 400px;
	height: 300px;
}	
	
.socialmedia {
	top:95px;
	right:1%;
}	

.youtube-banner{
	right: 3%;	
	background-size: contain;
	width: 50px;
	height: 26px;
}	
	
.hoofdlayer {
 	background-image: url("../afbeeldingen/opmaak/bg-s800.jpg");
}	
	
.languagelayer {
	top:95px;
	left:0px;
}

.logolayer {
	width:100%;
	height:134px;
	top:43px;
	background-image: url("../afbeeldingen/logossub/logo.png");
	background-position: center;
	background-repeat: no-repeat;
}
	
/* Navigatie balk */

.dropdown-content {	
	position: relative;
}
	
ul.topnav li:not(:first-child) {
	display: none;
}
	
ul.topnav li.icon {
    float: right;
    display: inline-block;
}

ul.topnav.responsive {
	position: relative;
}
	
ul.topnav.responsive li.icon {
	z-index: 4;
    position: absolute;
    right: 0;
    top: 0;
 }
	
 ul.topnav.responsive li {
    float: none;
    display: inline;
 }

 ul.topnav.responsive li a {
    display: block;
    text-align: left;
 }	

.buttonlayer {
	position: absolute;
	visibility: visible;
	z-index: 3;
	top: 0px;
	width: 100%;
	left:0px;
	margin-left:0px;
	height: 42px;
	background-color:#000;
	font-size: 0.8em;
	text-align: left;
}
	
.buttonlayerbackground{
	visibility: hidden;
}	
	
}

@media screen and (max-width:600px) {
	
/* Opmaak lagen */
	
.tekstlayer{
	margin-top: 350px;
}
	
.youtube-banner {
	top:328px;
}	
	
.logolayer {
	background-image: url("../afbeeldingen/logossub/logo-m.png");
}	
	
.hoofdlayer {
 	background-image: url("../afbeeldingen/opmaak/bg-s600.jpg");
}	
		
.socialmedia{
	visibility: hidden;
}
	
.socialmedia2 {	
	visibility: visible;
	position: relative;
	display: block;
	}
	
/* slide layers */	
	
.slidelayer{
	height:152px;
}	
	
.slide-home {
	background-image:url("../afbeeldingen/banners/banner-home2.jpg");
	background-size: 1000px;
	background-repeat: repeat-x;
}
	
.slide-tsla {
	background-size: 1000px;
}

.slide-agrarisch {
	background-size: 1000px;
}

.slide-mest {
	background-size: 1000px;
}

.slide-gww {
	background-size: 1000px;
}

.slide-betonbescherming {
	background-size: 1000px;
}

.slide-petrochemie {
	background-size: 1000px;
}

.slide-spuitlining {
	background-size: 1000px;
}

.slide-zwembaden {
	background-size: 1000px;
}
	
}

@media screen and (max-width:500px) {
	
/* Opmaak lagen */	
		
iframe {
	width: 300px;
	height:200px;
}	
	
.languagelayer {
	width:100%;
	top: 140px;	
}	

	
.logolayer {
	background-image:url("../afbeeldingen/logossub/logo-s.png");
}	

.thumbnails{
	width: 30%
}	
	
}

@media (max-width: 400px){
	
.hoofdlayer {
 	background-image: url("../afbeeldingen/opmaak/bg-s400.jpg");
}	
	
}

@media (min-width: 1500px){

.hoofdlayer{
	position: absolute;
	visibility: visible;
	z-index: 1;
	top: 0px;
	width: 100%;
	min-height: 100%;
	background-image:url("../afbeeldingen/opmaak/bg.jpg");
	background-position:-1300px 0px;
	background-repeat:repeat-y;
}

}