@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,500);

/*************************
******* Eerst wordt de CSS van bootstrap gelezen, dan hieronder ******
******* Basis voor gewoon scherm LG ******
******* Ook voor resoluties die niet extra gedefinieerd werden ************/
html {
  position: relative;
  min-height: 100%;
}

.cookiebalk {
	display:inline;
	position:fixed;
	left:0px;
	bottom:0px;
	width:100%;
	height:45px !important;
	text-align:center;
	line-height:normal;
	color:black;
	font-weight:normal;
	background:white;
	padding: 10px 0px 0px 0px;
	margin-left:auto;
	margin-right:auto;
	border-top:1px solid black;
	z-index:999999;

}

/*********** POP-UP ******************************/
.pop-up-kader {
	width:auto;
	max-width:400px;
	height:auto;
	padding:15px 35px 15px 15px;
	color:#fff;
	font-size:22px;
	position:fixed;
	top:150px;
	left:20%;
	border:3px dotted white;
	background-color:#00a1cb;
	z-index:999999;
	border-radius:7px;
	font-style:italic;
	box-shadow: 5px 10px 5px grey;
}

p.validatie{
	font-size:16px;
	line-height:12px;
}


body {
  background: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  color: #282828;
  line-height: 26px;
  padding-top: 100px;
  font-size:16px;
  margin-bottom: 0px;  
}
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }
    

.container {
	width:90%;
	margin:0px auto 0px auto;
}

hr{
	background: #C0C0C0;
	border:0px;
	height:1px;
	width:100%;
	margin:40px 0px 40px 0px;
}

.kader-manager{
	border:1px solid  gray;
	border-radius:15px;
	width:90%;	
	max-width:400px;
	height:180px;	
	padding:15px 5px 15px 5px;
	text-align:center; background-color:#5bc0de;color:white;
}

.kader-manager h2{
	margin-top:5px;
  font-size:18px;
}
.kader-manager h3{
	line-height:20px;
  font-size:14px;	
}

.slider-pijl{
	margin-top:130px;
}

.kader-common{
	border: 1px solid gray;
	border-radius: 15px;
	width: 90%;
	padding: 5px 15px 15px 15px;
	background-color: #f3f3f4;
	margin-top: 40px;
}



h1.pagina-titel{
	color:#00a1cb;
	font-size:50px;
	margin-top:30px;
	margin-bottom:40px;
	letter-spacing:2px;
	
}

.txt-blauw-opvallen{
	color:#286da2;
	padding-right:50px;
	line-height:36px;
	margin-top:0px;
}

.txt-blauw{
	color:#286da2;
}
    
.txt-rood{
	color:red;
}
    
    /* Add a gray background color and some padding to the footer */
    footer {
	  background-color: #f2f2f2;
    }

.adres-balk{
	padding:30px 30px 30px 30px;
	background:black;
	color:white;
}


.footer {
  position: relative;
  width: 100%;
  height: 60px;
  background-color: #121212;
  padding:20px 30px 20px 30px;
  margin-bottom:0px;
  color:silver;
  
}

/*** nodig voor melding foutieve spam code ***/
.spamcodediv{
	position:absolute;
	top:-100px;
	left:40%;
	right:auto;
	background:white;
	border:2px solid #CC3333;
	color:#ca1700;
	font-size:18px;
	line-height:18px;
	padding:15px 15px 15px 15px;
	font-weight:bold;
	z-index:999999;
}


/******** formulieren ********/

input, textarea {
	margin-bottom:5px;
}

.spamcode-veld{
	margin-top:0;
}


/********* Page up pijl *******/
.up-arrow {
        font-size:2em;
        color:white;
        margin-left:40px;
        margin-bottom:5px;
}
.up-arrow:hover {
        color: #0099CC;
}


/******** container over gans de pagina zonder marges , fluid heeft marges !!! **********/

.container-slider{
	padding:0;
	margin:-100px 0px 0px 0px ;	
	width:100%;
}

.logo-merk{
	max-width:285px;
	width:100%;
	height:auto;
	border:1px solid gray;
	border-radius:10px;
	margin-top:0px;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:0px;
}

.logo-merk:hover{
	border:3px solid #0099CC;
	
}

.foto-oog-contact{
	margin-left:40px;
}


.blikvanger{
	border: 1px solid gray;
	border-radius: 15px;
	margin: 50px 35px 0px 35px;
	padding: 15px 5px 15px 5px;
	text-align: center;
	background-color: #E5E5E5;
	color: #000000;
}


/*** Voor andere schermresoluties, enkel EXTRA codes definieren ***/

/* Tablets horizontaal MD) */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) 
  and (orientation: landscape) {
body {
	padding-top: 67px; /* moet zelfde hoogte zijn als navigatie */
}

.slider-pijl{
	margin-top:85px;
}

.container-slider{
	margin:0px 0px 0px 0px ;	
}

.kader-manager{
	border:1px solid  gray;
	border-radius:15px;
	width:270px;	
	height:150px;
	max-width:270px;
	padding:15px 5px 15px 5px;
	text-align:center; 
	background-color:#5bc0de;color:white;
}

.kader-manager h2{
	margin-top:5px;
	font-size:18px;
}
.kader-manager h3{
	line-height:22px;
	font-size:15px;
}
.foto-oog-contact{
	margin-left:0px;
}


}


/* Tablets verticaal SM) */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) 
  and (orientation: portrait) {
body {
	padding-top: 67px;
}

.navbar-brand {
      margin-right:40px;
}
.slider-pijl{
	margin-top:64px;
}

.container-slider{
	margin:100px 0px 0px 0px ;	
}
.kader-manager{
	border:1px solid  gray;
	border-radius:15px;
	width:210px;	
	max-width:95%;
	height:auto;
	min-height:160px;
	padding:15px 5px 15px 5px;
	text-align:center; 
	background-color:#5bc0de;color:white;
}

.kader-manager h2{
	margin-top:5px;
	font-size:16px;
}
.kader-manager h3{
	line-height:22px;
	font-size:13px;
}
.foto-oog-contact{
	margin-left:0px;
}
/*** nodig voor melding foutieve spam code ***/
.spamcodediv{
	top:-45px;
}
}


/* Smartphones horizontaal XS */
@media only screen 
  and (min-width: 481px) 
  and (max-width: 767px) {
body {
	padding-top: 67px;
}
.navbar-brand {
      margin-right:0px;
}
.footer {
  position: absolute;
}

/*** nodig voor melding foutieve spam code ***/
.spamcodediv{
	position:absolute;top:-470px;right:10px;left:auto;

}

.container-slider{
	margin:-50px 0px 0px 0px ;	
}

.slider-pijl{
	margin-top:40px;
}

.kader-manager{
	width:100%;	
	padding:15px 5px 15px 5px;
	text-align:center; 
	background-color:#5bc0de;
	color:white;
	margin-bottom:18px;
	height:150px;

}

.kader-manager h2{
	margin-top:2px;
	font-size:13px;
}
.kader-manager h3{
	line-height:20px;
	font-size:15px;
}

.foto-oog-contact{
	margin-left:0px;
}

}


/* Smartphones verticaal XS */
@media only screen 
  and (min-width: 100px) 
  and (max-width: 480px) {
body {
	padding-top: 67px;
}
.navbar-brand {
      margin-right:0px;
}

.slider-pijl{
	margin-top:20px;
}

.kader-manager{
	width:100%;	
	padding:15px 5px 15px 5px;
	text-align:center; 
	background-color:#5bc0de;
	color:white;
	margin-bottom:15px;
	height:120px;
	
}

.kader-manager h2{
	margin-top:2px;
	font-size:16px;
}
.kader-manager h3{
	line-height:22px;
	font-size:14px;
}

.txt-blauw-opvallen{
	color:#286da2;
	padding-right:0px;
	font-size:20px;
	line-height:26px;
	margin-top:0px;
}

h1.pagina-titel{
	color:#00a1cb;
	font-size:30px;
	margin-top:30px;
	margin-bottom:30px;
	letter-spacing:2px;
	
}

ul{
  margin-left:0px;
  padding-left:10px;
}
li{
  margin-left:5px;
  padding-left:0px;
}

.footer {
  position: absolute;
  min-height:60px;
  height:auto;
  font-size:14px;
  color:silver;
  padding:10px 0px 0px 0px;
}
/*** nodig voor melding foutieve spam code ***/
.spamcodediv{
	position:fixed;top:100px;right:15px;left:auto;

}

.pop-up-kader {
	width:auto;
	max-width:300px;
	height:auto;
	padding:15px 15px 15px 15px;
	color:#fff;
	font-size:16px;
	position:fixed;
	top:100px;
	left:20px;
}


.container-slider{
	margin:-50px 0px 0px 0px ;	
}
.foto-oog-contact{
	margin-left:0px;
}

}