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

img.body5Top10Img {
    max-width: 160px;
}

.tekst{
font-family: 'Josefin Sans', sans-serif;
margin-bottom: 10px;
font-size: 18px;
line-height: 1.2em;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

h1{
    display: block;
    font-size: 1.9em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
    line-height: 1em;			
}

h2{
    display: block;
    font-size: 1.3em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
    line-height: 1em;			
}

@media screen and (max-width: 450px){
    h1{
		   font-size: 22px;
       line-height: 1.2em;			 
    }
    h2{
		   font-size: 18px;
       line-height: 1.2em;			 
    }		 
		.mainimagechange{
		   max-height: 80px;
		   max-width: 80px;			 
		}  
}

@media screen and (max-width: 650px) and (min-width: 451px){
    h1{
		   font-size: 26px;
       line-height: 1.2em;	
    }
    h2{
		   font-size: 22px;
       line-height: 1.2em;			 
    }		
		.mainimagechange{
		   max-height: 100px;
		   max-width: 80px;			 
		}  		   
}

@media screen and (min-width: 651px){
		.mainimagechange{
		   max-height: 124px;
		   max-width: 100px;			 
		}  		   
}

.imgNintendoSwitch, .imgSplatoon, .imgPartners, .imgMarioKart, .imgBreath, .imgSuperMario{
  width: 100%;
}

.imgSplatoon, .imgPartners, .imgMarioKart, .imgBreath, .imgSuperMario{
  max-width: 800px;
}

.imgNintendoSwitch{
  max-width: 1800px;
}

.image1{
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}

.image2{
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

.video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
  margin-bottom: 10px;
  max-width: 800px;		
	
  margin-left: auto;
  margin-right: auto;	
}
@media screen and (min-width: 800px){
	.video {padding-bottom: 450px;}
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
  height: 100%;	
  max-width: 800px;	
	max-height: 450px;

  margin-left: auto;
  margin-right: auto;		 
}

@media screen and (min-width: 650px){
    .container1{
		  width: 100%;
      display: flex;
			flex-wrap: wrap;
    }
		.header1{
		order: 2;
		position: absolute;
		top: 20px;
		padding-left: 10px; 		
		padding-right: 10px;
		color: white;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
		}
		.image1{
		order: 1;
		width: 100%;
		}
		.eerste{
		order: 3;  
}

@media screen and (min-width: 600px){
    .container2{
		  width: 100%;
      display: flex;
			flex-wrap: wrap;
    }
		.vierde{
		order: 0;
		}		
		.image3{
		width: calc((100% - 11px)/2);
		order: 1;
		margin-right: 10px;		
		}
	  .image4{
		width: calc((100% - 11px)/2);
		order: 2;
		}
		.vijfde{
		order: 3;
		}
		.zesde{
		order: 4;
		}				
		.image5{
		width: calc((100% - 11px)/2);
		order: 5;
		margin-right: 10px;		
		}
		.image6{
		width: calc((100% - 11px)/2);
		order: 6;
		}				
		.zevende{
		order: 7;
		}
		.achtste{
		order: 8;
		}				
  
}