html *{
margin:0;               
padding:0;
border:none;
}  
body{
background-color:#fff;
}
 /*Begin opbouw site */

.page{
display:flex;
flex-direction:column;
width:100%;
height:100%;
margin:0;
padding:0;
}
#toggle{
display:none;
}
.containernav{
position:fixed;
top:0;
left:0;
z-index:25;
width:100%;
height:40px;
margin:0;
background: -webkit-linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9)); 
background: -o-linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9));     
background: -moz-linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9));              
background: linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9)); 
}
nav{
width:auto;
margin:5px 0 0 0;
}
nav ul{ 
display:flex;
/*flex-direction:row;
flex-wrap:wrap;*/
justify-content:space-around;
align-items:center;
width:auto;
height:auto;
list-style-type:none;
margin:0 10px auto auto;
padding:0;
}
nav ul li{
width:auto;
height:auto;
margin:0 5px 0 0;
padding:0;
}                                        
nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:active{  
font-family:Lato,Arial;
font-size:1rem;
font-weight:550;
color:#000; 
margin:0;
padding:3px 0 12px 0;
text-decoration:none;  
outline-style:none; 
} 
nav ul li a:hover,
nav ul li a.current, nav ul li a:link.current, nav ul li a:visited.current, nav ul li a:active.current{  
color:#7030a0;  
margin:0;
padding:3px 0 12px 0;
text-decoration:none;  
outline-style:none; 
border-bottom:4px solid #7030a0;
}  
header{
display: flex;
flex-flow:row wrap;
justify-content:flex-start;
width:100%;
height:auto;
margin:40px auto auto 0;
}
.leftheader{
width:100%;
max-width:69%;
height:100%;
margin:0 auto auto 0;
padding:0;
}
.leftheadertop{
display:flex;
align-self:center;
position:relative;
max-width:100%;
height:auto;
margin:auto;
}
.picheader{
/*display:flex;*/
width:100%;
margin: 0;
box-shadow:2px 2px 5px #000;
}
.svgbox {
position:absolute;
width:100%;
height:auto;
top:73%;
}
.title{
display: flex;
justify-content:flex-start;
align-items: flex-start; 
position:relative;
width:90%;
font-family:Lato,Arial;
font-size:1.5rem;
font-weight:bold;
text-transform: uppercase;
color:#fff;
/*margin:20px auto 20px auto;*/
margin:-30px auto auto 0;
padding:0 0 0 10px;
text-shadow:2px 2px 5px #000;
}
.leftheaderbottom{
width:100%;
max-width:800px;
height:auto;
margin:5% auto 0 auto;
padding:0;
}
.imglogo{
width:100%;
max-width:800px;
height:auto;
margin:auto;
}
.rightheader{
display:flex;
flex-flow:row wrap;
justify-content:center;
align-items:flex-start;
flex:0 1 30%;
height:100%;
margin:-5px auto auto auto;
padding: 0;
}
.top,.middle,.bottom{
display:flex;
position:relative;
width:100%;
}
.imgslogan{
width:100%;
height:auto;
margin:5px 0 0 0; 
padding: 0;
box-shadow:2px 2px 5px #000;
}
.slogan{
position:absolute;
bottom:0;
left:0;
right:0;
width:100%;
max-width:50%;
font-family:Lato,Arial;
font-weight:bold;
font-size:1.1rem;
/*text-transform:uppercase;*/
text-align:center;
color:#fff;
margin: auto;
padding: 5px 0 5px 0;
background: -webkit-linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8)); 
background: -o-linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8));     
background: -moz-linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8));               
background: linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8)); 
border-radius:50px 50px 0 0; 
}
main{
display: flex;
flex-flow:row wrap;
justify-content:center;
width:100%;
margin:10px auto 30px auto;
}
.text{
width:90%;
font-family:Lato,Arial;
font-weight:normal;
font-size:1rem;
color:#000;
margin:20px auto 10px auto;
padding:15px 0  15px 0;
}
.textintext{
display:flex;
flex-flow:row wrap;
justify-content:flex-start;
align-items:flex-start;
width:100%;
}
.lefttext{
flex:0 1 45%;
height:auto;
margin:0 auto auto 0;
padding:0;
}
.righttext{
flex:0 1 45%;
height:auto;
margin:0 0 auto auto;
padding:0;
}
.picturestext{
display:flex;
flex-flow:row nowrap;
justify-content:space-around;
width:100%;
height:auto;
margin:40px auto 0 auto;
}
.textpic{
width:100%;
max-width:400px;
height:auto;
margin:0 5px 5px 0;
box-shadow:2px 2px 5px #000;
}
.textinpic{
display:inline;
float:left;
width:100%;
max-width:300px;
height:auto;
margin:0 10px 5px 0;
box-shadow:2px 2px 5px #000;
}
ul.contactpage{
color:#000;
margin:0; 
padding:0;
list-style-type:none;
}
li.onecontactpage{
background-image: url(../images/picto/t.png);
background-position: 0 0;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 30px;
}
li.twocontactpage{
background-image: url(../images/picto/e.png);
background-position: 0 0;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 30px;
}
li.threecontactpage{
background-image: url(../images/picto/w.png);
background-position: 0 0;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 30px;
}
a.contactpage, a:link.contactpage, a:visited.contactpage, a:active.contactpage{
color:#333; 
margin:0;
padding:3px 0 3px 0; 
text-decoration:none;  
outline-style:none;   
}
a:hover.contactpage{
color:#ff0000; 
margin:0;
padding:3px 0 3px 0;  
text-decoration:none;  
outline-style:none;  
} 
.klikcentered{
font-family:Arial;
font-size:12px;
font-weight:bold;
font-style:italic;
text-align:center;
color:#000;
padding:0;
margin:10px 0 -40px 0;
}
.klik{
font-family:Arial;
font-size:12px;
font-weight:bold;
font-style:italic;
color:#000;
padding:0;
margin:0;
}
a.in, a:link.in, a:visited.in, a:active.in{
font-family:Lato,Arial;
font-size:1rem;
font-weight:normal; 
color:#000; 
margin:0;
padding:3px 0 3px 0; 
text-decoration:none;  
outline-style:none;   
}
a:hover.in{
color:#ff0000; 
margin:0;
padding:3px 0 3px 0;  
text-decoration:none;  
outline-style:none;  
} 
a.in::after{
position:relative;
top:2px;
content:'>';
margin:0 0 0 2px;
padding:0;
}
a:hover.in::after{
position:relative;
top:2px;
content:'>>';
margin:0 0 0 2px;
padding:0;
}
.titlecontact{
display:flex;
justify-content:flex-start;
width:100%;
font-family:Lato, Arial;
font-size:1.2rem;
text-transform: uppercase;
color:#000;
line-height:40px;
margin:auto auto auto 0;
padding: 20px 0 10px 0;
}
.backtop a{
position:fixed;
right:2%;
bottom:1%;
width:50px;
height:50px;
z-index:60;
background-image: url('../images/backtop.png');
background-position: 0 0;
background-repeat: repeat;
text-decoration:none;  
outline-style:none; 
cursor:pointer;
}
.space{
width:100%;
height:20px;
}
.containerpictures{
display:flex;
flex-flow:row wrap;
justify-content:center;
align-items:center;
width:100%;
max-width:100%;
height:auto;
margin:20px auto 40px auto;
padding:0;
}
.left_pic,.right_pic{
display:flex;
width:50%;
margin:0;
}
.imgcontainerbox{
position:relative;
width:100%;
max-width:100%;
height:auto;
margin:0;
} 
.img_container{
display:flex;
width:100%;
max-width:100%;
height:auto;
margin:0 auto;
}
a.imgcontainer{
display:flex;
}
.spantextvisible{	
display:flex;
flex:row;
justify-content:center;
align-items:center;
width:100%;
max-width:100%;
height:100%;
font-family:Lato, Arial;
font-size:1rem;
font-weight:bold;
color:#fff;
/*color:#000;*/
text-align:center;
/*margin: 35% auto auto auto;
padding:5px 0 5px 15%;*/
margin:auto;
padding:0;
background: -webkit-linear-gradient(right,rgba(0,0,0,0.3),rgba(0,0,0,0.3)); 
background: -o-linear-gradient(right,rgba(0,0,0,0.3),rgba(0,0,0,0.3)); 
background: -moz-linear-gradient(right,rgba(0,0,0,0.3),rgba(0,0,0,0.3));     
background: linear-gradient(to right,rgba(0,0,0,0.3),rgba(0,0,0,0.3)); 
}
a .spanvisible{
display:flex;
position:absolute;
top:0;
width:100%;
max-width:100%; 
height:100%;
padding:0;
margin:0; 
cursor:default;
}
footer{
width:100%;
min-height:375px;
margin:0;
padding:0;
background-image: url(../images/footer/footer.jpg);
background-position: 100% 100%;
background-repeat: no-repeat;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;
background-size: cover;
}
.overlayfooter{
position:relative;
width:100%;
min-height:375px;
z-index:2;
margin:0;
padding:0 ;
background: -webkit-linear-gradient(rgba(255,255,255,1),rgba(112,173,71,0.5)); 
background: -o-linear-gradient(rgba(255,255,255,1),rgba(112,173,71,0.5));    
background: -moz-linear-gradient(rgba(255,255,255,1),rgba(112,173,71,0.5));              
background: linear-gradient(rgba(255,255,255,1),rgba(112,173,71,0.5)); 
}
.footerinner{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
align-items:center;
width:100%;
min-height:375px;
margin: 0 auto 0 auto; 
}
.footerleft,.footerright{
display:flex;
flex-flow:row wrap;
width:50%;
}
.titlefooter{
display:flex;
justify-content:center;
width:100%;
font-family:Lato, Arial;
font-size:1.2rem;
text-transform: uppercase;
color:#000;
line-height:40px;
padding: 20px 0 20px 0;
}
.footerbox{
align-items:flex-end;
width:auto;
height:auto;
margin: 0 auto 0 auto; 
padding:10px 0 10px 0;
list-style-type:none;
}  
.kopfooterbox{
display:flex;
justify-content:center;
font-family:Lato, Arial;
font-size:1.2rem;
font-weight:bold;
text-transform: uppercase;
text-align:center;
line-height:40px;
color:#000;
margin:0 auto 0 auto;
padding:0;
}
.footernav{ 
align-self:center;
width:auto;
height:auto;
margin: 0;   
padding:0 ;
list-style-type:none;
}
.footernav  li{
display:block;
width:auto;
height:auto;
margin:0 0 5px 0;
padding:0;  
}   
.footernav li a, .footernav li a:link, .footernav li a:visited, .footernav li a:active{
font-family:Lato,Arial;
font-size:1rem;
font-weight:normal;
font-style:normal;
color:#000;
margin:0;
padding:0 5px 0 5px;
text-decoration:none;  
outline-style:none; 
border-left: 4px double transparent;
}
.footernav li a:hover,
.footernav li a.current, .footernav li a:link.current, .footernav li a:visited.current, .footernav li a:active.current{  
font-weight:bold;
color:#7030a0;  
margin:0;
padding:0 5px 0 5px;
text-decoration:none;  
outline-style:none;  
border-left: 4px double #7030a0;  
}
.footernav li a::after{
position:relative;
top:0;
content:'>>';
margin:0 0 0 2px;
padding:0 0 5px 0;
}
.footernav li a:hover::after,.footernav li a.current::after{
position:relative;
top:0;
content:'>>';
margin:0 0 0 2px;
padding:0 0 5px 0;
}
a.privacy, a:link.privacy, a:visited.privacy, a:active.privacy{
font-family:Lato,Arial;
font-size:14px;
font-weight:bold; 
color: #fff;
margin:0;
padding:5px 10px 5px 10px; 
text-decoration:none;  
outline-style:none;   
background-color: #7030a0;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
a:hover.privacy{
color:#ff0000; 
margin:0;
padding:5px 10px 5px 10px; 
text-decoration:none;  
outline-style:none;  
} 
ul.adresbox{
display:flex;
flex-flow:column;
justify-content:flex-start;
font-family:Lato,Arial;
font-size:1rem;
color:#000;
margin:0 auto 0 auto;
padding:0;   
list-style-type:none;                                  
}
a.adres, a:link.adres, a:visited.adres, a:active.adres{  
font-family:Lato,Arial;
font-size:1rem;            
color:#000; 
text-decoration:none;
outline-style:none;
margin:0;
}          
a:hover.adres{
color:#000;
text-decoration:none;
outline-style:none;
}
li.one{
background-image: url(../images/picto/t.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 20px;
}
li.one:hover{
background-image: url(../images/picto/t.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 20px;
}
li.two{
background-image: url(../images/picto/e.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
li.two:hover{
background-image: url(../images/picto/e.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
li.three{
background-image: url(../images/picto/i.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
li.three:hover{
background-image: url(../images/picto/i.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
li.four{
background-image: url(../images/picto/wit/pv.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
li.four:hover{
background-image: url(../images/picto/pv.png);
background-position: 0 2px;
background-repeat: no-repeat;
margin:0;
padding:0 0 5px 25px;
}
.imgboxalignleft,.imgboxalignright{
position:relative;
width: 100%;
max-width:450px;
margin:20px auto 20px 0;
padding:0;
}
.imgboxalignright{
margin:20px 0 20px auto;
padding:0;
}
img.picleft,img.picright{
width:100%;
max-width:450px;
margin:0 auto 0 0;
}
.picoverlayleft450,.picoverlayright450{
width:100%;
max-width:450px;
margin:0 auto 0 0;
}
.overlayimgleft450,.overlayimgright450{
position:absolute;
top:0;
left:0;
z-index:5;
width:100%;
max-width:450px;
height:auto;
margin:0 auto 0 0;
border: 2px solid #fff;
}
.overlayimgright450{
right:0;
margin:0 auto 0 0;
}
.imgbox{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:relative;
width: 100%;
/*max-width:550px;*/
margin:40px auto 20px auto;
padding:0;
}
img.picimgbox{
width:100%;
max-width:250px;
margin:10px 5px 10px 5px;
}
.span_media{    
display:flex;
position:absolute;
font-family:Lato,Arial;
font-size:1rem;
font-weight:bold;
font-style:italic;
color:#000;
padding:0;
margin:-222px auto 0 10px;
text-decoration:none;  
}
img.centered{
display: block;
margin:0 auto 5px auto;
padding: 5px;
}
img.alignright{
display:inline;
margin: 5px 5px 0 5px;
padding: 0;
}
img.alignleft{
display:inline;
margin: 5px 5px 0 0;
padding: 0;
}
.alignright{
float:right;
}
.alignleft{
float:left;
}
img.boom{
width:100%;
max-width:150px;
margin:auto 20px auto auto;
}
img.tachtig{
position:absolute;
top:20px;
left:20px;
width:100%;
max-width:150px;
margin:auto 20px auto auto;
}
.hiddencontainer{
display:none;
}  
.kliktextpiccentered{
font-family:Lato,Arial;
font-size:0.9rem;
font-weight:bold;
font-style:italic;
text-align:center;
color:#000;
padding:0;
margin:10px 0 0 0;
}
table{
width:auto;
}
td{
font-family:Lato,Arial;
font-size:1rem;
}
.bg_ul{
width:100%;
height:auto;
padding:20px 10px 20px 0;
background-image: url(../images/pictext/boom_10.png);
background-position: 50% 50%;
background-repeat: no-repeat;
background-repeat: no-repeat;
-webkit-background-size:contain; 
-moz-background-size:  contain; 
-o-background-size:  contain; 
background-size:  contain; 
border:1px solid #7030a0;
}
ul.boompje{
list-style-image: url(../images/boompje.png);
margin:10px 0 20px 35px;
color:#000;
font-weight:bold;
}
h4{
font-family:Lato,Arial;
font-weight:bold;
font-size:1.2rem;
text-transform: uppercase;
color:#000;
padding: 20px;
}
.spanyt{
position:absolute;
z-index:10;
width:auto;
height:auto;
font-weight:bold;
font-size:0.8rem;
font-style:italic;
text-align:center;
color:#000;
margin:-20px auto 0 auto;
}
img.yt{
width:100%;
max-width:350px;
height:auto;
margin:0 auto;
padding:0 2px 0 0;
}
.ytbox{
width:100%;
max-width:350px;
height:auto;
margin:20px auto 45px auto;
}
img.bekijken{
position:absolute;
width:100%;
max-width:180px;
height:auto;
margin:0;
padding:0;
}
.bekijken{
position:absolute;
z-index:15;
width:100%;
max-width:180px;
height:auto;
margin:-45px auto 0 auto;
}
.iframebox{
display:flex;
width:100%;
justify-content:center;
margin:40px auto 20px auto;
}
html, body{
height:100%;
}  
@media only screen and (min-width: 1440px) and (max-width: 2560px){
header{
display: flex;
flex-flow:row wrap;
justify-content:flex-start;
width:100%;
height:auto;
/*margin:0 auto auto auto;*/
margin:40px auto auto auto;
}
.leftheader{
width:100%;
max-width:69%;
height:100%;
margin:0 auto auto 0;
padding:0;
}
.leftheadertop{
display:flex;
align-self:center;
max-width:100%;
height:auto;
margin:auto;
}
.picheader{
display:flex;
width:100%;
margin:0 auto auto 0;
box-shadow:2px 2px 5px #000;
}
.leftheaderbottom{
width:100%;
max-width:800px;
height:auto;
margin:5% auto 0 auto;
padding:0;
}
.imglogo{
width:100%;
max-width:800px;
height:auto;
margin:auto;
}
}
@media only screen and (min-width: 1280px) and (max-width: 1440px){
main{
max-width:105rem;
}
}
@media only screen and (min-width: 900px) and (max-width: 1024px){
header{
display: flex;
flex-flow:row wrap;
width:100%;
height:auto;
/*margin:0 auto 0 auto;*/
margin:40px auto auto auto;
}
.leftheader{
width:100%;
max-width:100%;
height:auto;
margin: auto;
padding:0;
}
.leftheadertop{
max-width:100%;
height:auto;
margin:auto auto 10px auto;
}
.picheader{
display:flex;
width:100%;
margin: auto;
box-shadow:2px 2px 5px #000;
}
.title{
margin:-40px auto auto 0;
}
.leftheaderbottom{
width:100%;
max-width:800px;
height:auto;
margin: 20px auto 20px auto;
padding:0;
}
.imglogo{
width:100%;
max-width:800px;
height:auto;
margin:auto auto 0 auto;
}
.rightheader{
display:flex;
flex-flow:row wrap;
jutify-content:space-around;
flex:0 1 100%;
height:auto;
margin:auto;
padding: 0;
}
.top,.middle,.bottom{
position:relative;
width:30%;
margin:auto;
}
.imgslogan{
width:100%;
height:auto;
margin: 0; 
padding: 0;
}
.slogan{
position:absolute;
bottom:0;
left:0;
right:0;
width:100%;
max-width:60%;
height:auto;
font-family:Lato,Arial;
font-weight:bold;
font-size:1rem;
/*text-transform:uppercase;*/
text-align:center;
color:#fff;
margin: auto;
padding: 5px 0 5px 0;
background: -webkit-linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8)); 
background: -o-linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8));     
background: -moz-linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8));               
background: linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8)); 
border-radius:50px 50px 0 0; 
}
.footerleft,.footerright{
width:100%;
}
.footernav li a, .footernav li a:link, .footernav li a:visited, .footernav li a:active{
font-size:0.9rem;
}
ul.adresbox{
justify-content:center;    
font-size:0.9rem;                           
}
}
@media only screen and (min-width: 640px) and (max-width: 900px){
.title{
font-size:1.3rem;
margin:-35px auto auto 0;
}
.text{
margin:0 auto 0 20px;
padding:0 0 0 0;
}
.footerleft,.footerright{
width:100%;
}
.footernav li a, .footernav li a:link, .footernav li a:visited, .footernav li a:active{
font-size:0.9rem;
}
ul.adresbox{
justify-content:center;    
font-size:0.9rem;                           
}
td{
font-family:Lato,Arial;
font-size:0.9rem;
}
}
@media only screen and (min-width: 240px) and (max-width: 800px){

.left_pic,.right_pic{
display:flex;
justify-content:center;
width:100%;
max-width:100%;
margin:0;
}
.containerpictures{
margin:20px auto 40p auto;
}
img.tachtig{
position:absolute;
top:20px;
left:20px;
width:100%;
max-width:125px;
margin:auto 20px auto auto;
}
.img_container{
width:100%;
max-width:100%;
}
.spantextvisible{
width:100%;
max-width:100%;
height:100%;
font-size:0.9rem;
}
td{
font-family:Lato,Arial;
font-size:0.9rem;
}
}
@media only screen and (min-width: 240px) and (max-width: 900px){
header{
display: flex;
flex-flow:row wrap;
width:100%;
height:auto;
/*margin:0 auto 0 0;*/
margin:40px auto auto auto;
}
.leftheader{
width:100%;
max-width:100%;
height:auto;
margin: auto;
padding:0;
}
.leftheadertop{
max-width:100%;
height:auto;
margin:auto auto 10px auto;
}
.picheader{
display:flex;
width:100%;
margin: auto;
box-shadow:2px 2px 5px #000;
}
.title{
font-size:1.3rem;
margin:-35px auto auto 0;
}
.leftheaderbottom{
width:100%;
max-width:800px;
height:auto;
margin: 20px auto 0 auto;
padding:0;
}
.imglogo{
width:100%;
max-width:800px;
height:auto;
margin:auto auto 0 auto;
}
.rightheader{
display:flex;
flex-flow:row wrap;
jutify-content:center;
flex:0 1 100%;
height:auto;
margin:0 auto 0 auto;
padding: 0;
}
.top,.middle,.bottom{
width:30%;
margin:10px auto 10px auto;
}
.imgslogan{
width:100%;
max-width:250px;
height:auto;
margin: 0 auto; 
padding: 0;
}
.slogan{
position:absolute;
bottom:0;
left:0;
right:0;
width:100%;
max-width:70%;
height:auto;
font-family:Lato,Arial;
font-weight:bold;
font-size:1rem;
/*text-transform:uppercase;*/
text-align:center;
color:#fff;
margin: auto;
padding: 5px 0 5px 0;
background: -webkit-linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8)); 
background: -o-linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8));     
background: -moz-linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8));               
background: linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8)); 
border-radius:50px 50px 0 0; 
}
.text{
font-size:1.1em;
}
.containerpictures{
margin:20px auto 40p auto;
}
.img_container{
width:100%;
max-width:100%;
}
img.tachtig{
position:absolute;
top:20px;
left:20px;
width:100%;
max-width:125px;
margin:auto 20px auto auto;
}
.spantextvisible{
width:100%;
max-width:100%;
height:100%;
font-size:0.9rem;
}
.footerleft,.footerright{
width:100%;
}
.footernav li a, .footernav li a:link, .footernav li a:visited, .footernav li a:active{
font-size:0.9rem;
}
ul.adresbox{
justify-content:center;    
font-size:0.9rem;                         
}
td{
font-size:0.9rem;
}
}
@media only screen and (min-width: 240px) and (max-width: 640px){
nav{
display:none;
}
html *{
margin:0px;               
padding:0px;
border:none;
} 
.page{
flex-direction:row;
flex-wrap:wrap;
width:100%;
}
.title{
font-size:1.2rem;
}
.containernav{
position:relative;
top:0;
right:0;
z-index:20;
width:100%;
height:auto;
margin:0!important;
background:none;
}
#toggle{
display:block;
position:absolute;
right:15px;
top:5px;
z-index:10;
margin:0 0 0 20px;
padding:10px;
color:#000;
cursor: pointer; 
background: -webkit-linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.6)); 
background: -o-linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6));    
background: -moz-linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6));      
background: linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)); 
border:1px solid #7030a0;
}
#toggle:hover{
color:#ff0000;
}
nav{
position:relative;
top:0;
width:100%;
height:auto;
margin:0;
padding:40px 0 10px 0;
background: -webkit-linear-gradient(rgba(112,173,71,0.9),rgba(112,173,71,0.9)); 
background: -o-linear-gradient(rgba(112,173,71,0.9),rgba(112,173,71,0.9));   
background: -moz-linear-gradient(rgba(112,173,71,0.9),rgba(112,173,71,0.9));     
background: linear-gradient(rgba(112,173,71,0.9),rgba(112,173,71,0.9)); 
}
nav ul{ 
flex-direction:column;
margin:0;  
padding:5px 0 5px 0; 
text-align:center;
list-style-type:none;
}
nav ul li{
margin: 0;
padding:0 0 5px 0!important;  
}                                         
nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:active{  
display:block!important;
font-family:Lato,Arial;
font-size:1rem !important; 
font-weight:bold;
text-align:center;
color:#fff; 
margin:0;
padding:5px!important;   
text-decoration:none;  
outline-style:none; 
}              
nav ul li a:hover,
nav ul li a.current, nav ul li a:link.current, nav ul li a:visited.current, nav ul li a:active.current{  
display:block!important;
color:#7030a0;   
font-weight:bold; 
margin:0;
padding:5px !important;   
text-decoration:underline;  
outline-style:none;  
border-bottom:none!important;
}   
.containerunderheader{
width:100%;
height:auto;
margin:0 auto 0 auto;
}
header{
display: flex;
flex-flow:row wrap;
width:99%;
height:auto;
margin:0 auto 0 auto;
}
.leftheader{
width:100%;
max-width:100%;
height:auto;
margin: auto;
padding:0;
}
.leftheadertop{
max-width:100%;
height:auto;
margin:auto auto 10px auto;
}
.picheader{
display:flex;
width:100%;
margin: auto;
box-shadow:2px 2px 5px #000;
}
.title{
font-size:1.1rem;
margin:-35px auto auto 0;
}
.leftheaderbottom{
width:100%;
max-width:800px;
height:auto;
margin: 20px auto 0 auto;
padding:0;
}
.imglogo{
width:100%;
max-width:800px;
height:auto;
margin:auto auto 0 auto;
}
.rightheader{
display:flex;
flex-flow:row wrap;
jutify-content:center;
flex:0 1 100%;
height:auto;
margin:0 auto 0 auto;
padding: 0;
}
.top,.middle,.bottom{
width:100%;
margin:10px auto 10px auto;
}
.imgslogan{
width:100%;
max-width:250px;
height:auto;
margin: 0 auto; 
padding: 0;
}
.slogan{
position:absolute;
bottom:0;
left:0;
right:0;
width:100%;
max-width:35%;
height:auto;
font-family:Lato,Arial;
font-weight:bold;
font-size:1rem;
/*text-transform:uppercase;*/
text-align:center;
color:#fff;
margin: auto;
padding: 5px 0 5px 0;
background: -webkit-linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8)); 
background: -o-linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8));     
background: -moz-linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8));               
background: linear-gradient(rgba(112,48,160,0.8),rgba(112,48,160,0.8)); 
border-radius:50px 50px 0 0; 
}
.text{
font-size:1rem;
margin:0 auto 0 0;
padding:15px 0 15px 20px;
}
.lefttext,.righttext{
display:flex;
justify-content:flex-start;
flex:0 1 100%;
height:auto;
margin:0 ;
padding:0;
}
.containerpictures{
margin:20px auto 40p auto;
}
.img_container{
width:100%;
max-width:100%;
}
.spantextvisible{
width:100%;
max-width:100%;
height:100%;
font-size:0.8rem;
}
a.in, a:link.in, a:visited.in, a:active.in{
font-family:Lato,Arial;
font-size:14px;
font-weight:normal; 
color:#333; 
margin:0;
padding:3px 0 3px 0; 
text-decoration:none;  
outline-style:none;   
}
a:hover.in{
color:#fff; 
margin:0;
padding:3px 0 3px 0;  
text-decoration:none;  
outline-style:none;  
} 
.footerleft,.footerright{
width:100%;
}
.footerbox{
flex-basis:100px;
} 
.footernav{ 
display:flex;
flex-flow:column nowrap;
width:auto;
width:0 auto 0 auto;
} 
.footernav li a, .footernav li a:link, .footernav li a:visited, .footernav li a:active{
font-size:0.9rem;
}
ul.adresbox{
justify-content:center;    
font-size:0.9rem;                          
}
.telmobiel{
display:block;
}
.teldesktop{
display:none;
}
h4.tel{
display:block;
font-style:italic;
font-weight:normal;
font-size:0.8rem;
color:#fff;
}
.backtop a{
position:fixed;
right:2%;
bottom:1%;
width:25px;
height:25px;
z-index:60;
background-image: url('../images/backtopmob.png');
background-position: 0 0;
background-repeat: repeat;
text-decoration:none;  
outline-style:none; 
cursor:pointer;
}
.bg_ul{
width:90%;
}
img.centered{
display: block;
margin:0 auto 5px auto;
padding: 5px;
}
img.alignright{
display:inline;
margin: 5px 5px 0 5px;
padding: 0;
border:3px double #fff;
}
img.alignleft{
display:inline;
margin: 5px 5px 0 0;
padding: 0;
border:3px double #fff;
}
.alignright{
float:right;
}
.alignleft{
float:left;
}
.hiddencontainer{
display:none;
}  
img.tachtig{
position:absolute;
top:20px;
left:20px;
width:100%;
max-width:100px;
margin:auto 20px auto auto;
}
.imgbox{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:relative;
width: 100%;
/*max-width:550px;*/
margin:40px auto 20px auto;
padding:0;
}
img.picimgbox{
width:100%;
max-width:200px;
margin:10px 5px 10px 5px;
}
.span_media{    
display:flex;
position:absolute;
font-family:Lato,Arial;
font-size:0.9rem;
font-weight:bold;
font-style:italic;
color:#000;
padding:0;
margin:-182px auto 0 10px;
text-decoration:none;  
}
td{
font-family:Lato,Arial;
font-size:0.9rem;
}
h3,h4{
font-size:1rem;
padding:0 0 10px 0;
}
html, body{
height:100%;
}  
}
@media only screen and (min-width: 240px) and (max-width: 400px){
.title{
font-size:1.1rem;
margin:-30px auto auto 0;
}
.bg_ul{
width:90%;
}
.spantextvisible{
width:100%;
max-width:100%;
height:100%;
font-size:0.8rem;
}
}
@media only screen and (min-width: 240px) and (max-width: 320px){
}
@media only screen and  (orientation:portrait){

}