html *{
margin:0;               
padding:0;
border:none;
}  
 body{                         
background-color:#3f3f3f;                
}  
.containerflex{
display:flex;
flex-flow:column;
width:100%;
height:100%;
margin:auto;
}
.headerunder{
display:flex;
flex-wrap: wrap;
justify-content:space-around;
align-items:center;
width:100%;
height:auto;
/*margin-top:auto;*/
margin:auto;
padding:0;
}
.headerunderbox{
display:flex;
justify-content:center; /* zorgt voor plaatsing img in midden */
width:100%;
max-width:250px;
height:auto;
margin:10px 15px 20px 0;
}
img.headerunderpic{
display:flex;/* zorgt voor plaatsing img in midden */
width:100%;
max-width:250px;
height:auto;
margin:0;
box-shadow: rgba(255, 255, 255, 0.4) 5px 5px, rgba(255, 255, 255, 0.3) 10px 10px, rgba(255, 255, 255, 0.2) 15px 15px, rgba(255, 255, 255, 0.1) 20px 20px, rgba(255, 255, 255, 0.05) 25px 25px;
}
a.inheaderunder, a:link.inheaderunder, a:visited.inheaderunder, a:active.inheaderunder{
text-decoration:none;  
outline-style:none;   
text-shadow:5px 5px 5px #000;
}
a:hover.inheaderunder{
margin:0;
padding:0;  
text-decoration:none;  
outline-style:none;  
} 
span{
display:block;
position:relative;
font-family:Lato,Arial;
font-weight:bold;
font-size:1rem;
text-transform:uppercase;
text-align:center;
color:#fff; 
margin:15px auto auto auto;
padding:0; 
}
#fb a{
position:fixed;
right:-110px;
top:50%;
width:100%;
max-width:250px;
height:auto;
z-index:20;
padding:5px 0 10px 0;
background: -webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); 
background: -o-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
background: -moz-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));    
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
text-decoration:none;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;

transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);

-webkit-animation-name: slide;
-moz-animation-name: slide;
-o-animation-name: slide;
animation-name: slide;

-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s; 
}

@-webkit-keyframes slide {
from {
top:0;
}
to {
top:50%;
}
}

@-moz-keyframes slide{
from {
top:0;
}
to {
top:50%;
}
}

@keyframes slide{
from {
top:0;
}
to {
top:50%;
}
}
h2.textcolor{
font-family:AmaranthRegular, Arial;  
font-weight:bold;
font-size:1em;
text-align:center;
color:#fff;
-webkit-animation-name: textcolor;
-moz-animation-name: textcolor;
-o-animation-name: textcolor;
animation-name: textcolor;

-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s; 

-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

@-webkit-keyframes textcolor {
from {
color:#fff;
}
25%{
color:#ffa500;
}
50%{
color:#ffff00;
}
75%{
color:#ee82ee;
}
to {
color:#fff;
}
}

@-moz-keyframes textcolor{
from {
color:#fff;
}
25%{
color:#ffa500;
}
50%{
color:#ffff00;
}
75%{
color:#ee82ee;
}
to {
color:#fff;
}
}

@keyframes textcolor{
from {
color:#fff;
}
25%{
color:#ffa500;
}
50%{
color:#ffff00;
}
75%{
color:#ee82ee;
}
to {
color:#fff;
}
}
.pagebg{
position:fixed;
left:0;
top:0;
z-index:-1;
width: 100%;
height: 100%;
margin:0;
padding:0;
background-image: url('../images/background/landscape.jpg');
background-position: 50% 100%;
background-repeat: no-repeat;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;
background-size: cover;
}
 html, body{
height:100%;
}          

@media only screen and (min-width: 240px) and (max-width: 640px){
.headerunderbox{
display:flex;
justify-content:center; /* zorgt voor plaatsing img in midden */
width:100%;
max-width:200px;
height:auto;
margin:10px 5px 10px 0;
}
img.headerunderpic{
display:flex;/* zorgt voor plaatsing img in midden */
width:100%;
max-width:200px;
height:auto;
margin:0;
}
a.in, a:link.in, a:visited.in, a:active.in{
font-size:1em;
}
}

@media only screen and (orientation:portrait){
.pagebg{
position:fixed;
left:0;
top:0;
z-index:-1;
width:100%;
height:100%;
margin:0;
padding:0;
background-image: url(../images/background/portrait.jpg);
background-position: 50% 100%;
background-repeat: no-repeat;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;
background-size: cover;
}
}