html {
  box-sizing: border-box;
	}
*, *:before, *:after {
  box-sizing: inherit;  
	}

body {
  	background-image: url("bg.png");
  	font: 13.5px 'Fira Sans', sans-serif;
	color: #0c0c0c;  							/* tekst color */
	text-align: center;
	line-height: 24px; 
	text-decoration: none;
	}

img {
	border: 4px solid #fff;
	box-shadow: 1px 1px 2px #d5d5d5;
	}	



/* NAVIGATIE */


#navigatie {
	background-color: #0c0c0c;
	font-size: 13px; letter-spacing: 0.7px;
	text-transform: uppercase;
	color: #ffd35b; 
	height: 70px; 
	}

	
.woordennav {   
	display: inline-block;  		/* woorden achter elkaar ipv onder */
	margin: 25px 44px; 				/* woorden goed zetten */   /* BOVEN px . UIT ELKAARpx */
	}

.woordennav a {  
	text-decoration: none;  		/* geen streepje onder de woorden */
	}	

	a.pink {
		color: #f34e7d;
		}

	a.blue {
		color: #4e9cf3;
		}

	a.purple {
		color: #886ed2;
	}	

	#navigatie li a:hover {
		color: #fff;
		font-weight: bold;
		text-decoration: none;
		border-bottom: 2px solid #fff;
		}




#container {
  	margin-right: auto;
  	margin-left: auto;
  	padding-right: 15px;
  	padding-left: 15px;
  	width: 100%; 
  	max-width: 100%;
	}
 
 
@media (min-width: 768px) {
	#container{
		width: 750px;
		}
}


@media (min-width: 992px) {
 	#container{
    	width: 970px;
  		}
}

@media (min-width: 1200px) {
	#container{
		width: 1170px;
  		}
}



h1 {
	padding-top: 100px;  
	padding-bottom: 100px;					/* Boven Rechts Onder Links */
	font-family: 'Dosis', sans-serif;
	color: #0c0c0c; letter-spacing: 0.7px;
	font-size: 32px;
	}

h5 {
	padding-top: 100px;  
	padding-bottom: 30px;
	font-family: 'Dosis', sans-serif;
	color: #0c0c0c; letter-spacing: 0.7px;
	font-size: 32px;
	}	



/* WERK KADERS */

.xop-section {
	max-width: 100%;
	}

.xop-grid {
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
	}

.xop-grid:after {
	clear: both;
	}

.xop-grid:after, .xop-box:before {
	content: '';
	display: table;
	}

.xop-grid li {
	width: 300px;
	height: 270px;
	display: inline-block;
	margin: 7px;						/* Vlakken tussen ruimte */
	border: 3px solid #fff;				/* Witte rand rond foto */
	box-shadow: 1px 1px 2px #d5d5d5;	/* Schaduw */
	}


.xop-box {
	width: 100%;
	height: 100%;
	position: relative;
	cursor: default;
	}



/* WERK FOTO'S */

.xop-img-1 {
	background: url(../images/main/I&E.jpg);
	}
	.xop-img-1:hover {
		background: none;
		background-color: #fdd882;
		transition: all 0.8s ease-in-out;
		}

.xop-img-2 {
	background: url(../images/main/RSkills2.jpg);
	}
	.xop-img-2:hover {
		background: none;
		background-color: #fdd882;
		transition: all 1s ease-in-out;
		}

.xop-img-3 {
	background: url(../images/main/Astmabpm.jpg);
	}
	.xop-img-3:hover {
		background: none;
		background-color: #fdd882;
		transition: all 1s ease-in-out;
		}

.xop-img-4 {
	background: url(../images/main/VPROapp2.jpg);
	}
	.xop-img-4:hover {
		background: none;
		background-color: #fdd882;
		transition: all 1s ease-in-out;
		}

.xop-img-5 {
	background: url(../images/main/vouwerpower.jpg);
	}
	.xop-img-5:hover {
		background: none;
		background-color: #fdd882;
		transition: all 1s ease-in-out;
		}

.xop-img-6 {
	background: url(../images/main/ISO2.jpg);
	}
	.xop-img-6:hover {
		background: none;
		background-color: #fdd882;
		transition: all 1s ease-in-out;
		}

.xop-img-7 {
	background: url(../images/main/stillegetuigen.jpg);
	}
	.xop-img-7:hover {
		background: none;
		background-color: #fdd882;
		transition: all 1s ease-in-out;
		}

.xop-img-8 {
	background: url(../images/main/Buitenschool2.jpg);
	}
	.xop-img-8:hover {
		background: none;
		background-color: #fdd882;
		transition: all 1s ease-in-out;
		}

.xop-img-9 {
	background: url(../images/main/Illustraties.jpg);
	}
	.xop-img-9:hover {
		background: none;
		background-color: #fdd882;
		transition: all 1s ease-in-out;
		}


/* WERK TEKST */

.xop-info {
	position: absolute;
	width: 100%;
	height: 100%;
	}

.xop-info h2{ 							
	color: #333;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.7px;
	line-height: 18px; 
	text-transform: uppercase;
	padding: 100px 0 8px 0;

	border-bottom: 1.5px solid #333; 	/*streep*/
	margin: 0 30px; 					/*lengte streep*/

   	transform: scale(0);				/* !!! zorgt ervoor dat de h2 onzichtbaar word !!! */
    transition: all 0.5s linear;
    opacity: 0; 	
	}

.xop-info:hover h2{      				/* !!! zorgt ervoor dat de h2 zichtbaar word !!! */
	transform: scale(1);
    opacity: 1;
	} 

.xop-info p {
	color: #333;
	font-style: italic; 
	font-weight: 400;
	font-size: 14px;
	padding: 4px 5px;
	margin: 0 30px;
	opacity: 0;							/* !!! zorgt ervoor dat de P onzichtbaar word !!! */
	transform: scale(0);
	transition: all 0.5s linear;
	}

.xop-info:hover p {						/* !!! zorgt ervoor dat de P zichtbaar word !!! */
    transform: scale(1);
    opacity: 1;
	}



/* ALGEMEEN */

.projecttekst {
	text-decoration: none;
	text-align: justify;
	padding: 0 22% 3% 22%;
	font-weight: 400; 
	letter-spacing: 0.3px; 
	}

.projecttekst h3 {
	text-transform: uppercase; 
	font-size: 17px; 
	letter-spacing: 0.8px;
	font-weight: 700;	
	}
.projecttekst i {
	font-style: italic;
	}

.projecttekst b {
	font-weight: bold;
	}	

#projecttekstlink a{
	text-decoration: none;
	}	



.order {
	display: inline-block;
	width: 650px;
	}



/* ABOUT */

.profielpic { 							/* de afbeelding */
	width: 364px; height: 473.2px;
	display: inline-block;
	}

.tekstbox h3 { 							/* kopje */
	font-weight: 700;
	text-transform: uppercase; 
	font-size: 17px; 
	letter-spacing: 0.8px;
	}

.tekstbox a { /*link*/
	text-decoration: none;
	font-weight: 500;
	letter-spacing: 0.6px;
	color: #f34e7d;
	}

	.tekstbox a:visited {
		color: #f34e7d;
		}
	.tekstbox a:hover {
		color: #4e9cf3;
		font-weight: 700;
		}
	.tekstbox a:link {
		color: #f34e7d;
		}

.tekstbox{
	width: 520px;
	display: inline-block;
	text-align: justify;   				/* tekst in een blok */
	padding-left: 25px; 				/* ruimte tussen foto en tekst */ 
	letter-spacing: 0.2px; 
	word-spacing: 0.1px;
	color: #0c0c0c;
	}

.tekstbox p {
	margin: 0 0 20px 0;
	}	

.CV div {
	font-weight: 500;
	letter-spacing: 0.5px;
	color: #0c0c0c;
	}

	.CV a:visited {
		color: #0c0c0c;
		}
	.CV a:hover {
		color: #ffd35b;
		font-weight: 700;
		border-bottom: 2.7px solid #ffd35b;
		}
	.CV a:link {
		color: #ffd35b;
		font-weight: 700;
		text-decoration: none;
		}


/* Introvert & Extravert */


.infoie {
	width: 500px;
	margin-top: 30px;
	border: none;
	}
.schetsie {
	width: 650px;
	margin: 25px 0px;
	}
.iefotos {
	width: 320px;
	margin: 5px 1.5px 0 1px;
	}

.expofoto {
	width: 320px;
	margin: 30px 1.5px 0 1px;
	}


/* Revolution Skills */

.vofotos {
	width: 320px;
	margin: 5px 1.5px 0 1px;
	}


/* Astma BPM */	

.astma {
	width: 650px;
	margin-top: 25px;
	}

	#astmov {
	width: 650px;
	height: 100%;
	margin-top: 25px;
	border: 4px solid #fff;
	box-shadow: 1px 1px 2px #d5d5d5;
	}



/*VPRO*/	

.vprof {
	width: 650px;
	}


/*Vouwerpower*/

.vpfoto {
	width: 650px;
	margin-top: 20px;
	}

.vpfoto2 {
	width: 320px;
	margin: 20px 1.5px 0 1px;
	}

#vpposter {
	width: 400px;
	margin-top: 25px;
	margin-bottom: 35px;
	}


/*ISO*/

.doelgroepbox {
	display: inline-block;
	width: 665px;
	position: static;
	}

.doelgroepbox img {
	width: 210px;
	margin: 3px;
	}
	.doelgroepbox img:hover {
		width: 215px;
		}

.isofoto {
	width: 650px;
	margin-top: 15px;
	}	

.isofotos1 { /*de kaart*/
	width: 320px;
	margin-top: 15px;
	}

canvas {
	width: 400px;
	margin-top: 25px;
	border: 4px solid #fff;
	box-shadow: 1px 1px 2px #d5d5d5;
	}

#processingtekst {
	font-size: 12px;
	font-weight: 400;
	color: #0c0c0c;
	line-height: 16px;
	text-decoration: none;
	}
	#processingtekst a:hover{
		text-decoration: none;
		color: #ffd35b;
	}
	#processingtekst a:visited{
		text-decoration: none;
		font-size: 12.5px;
		color: #0c0c0c;
	}
	#processingtekst a:link{
		text-decoration: none;
		font-weight: 500;
		font-size: 12.5px;
		color: #0c0c0c;
	}



/*Stillegetuigen*/

.stfoto {
	width: 650px;
	margin-top: 15px;
	}


/*Jansen*/

.jansenfoto {
	width: 650px;
	margin-top: 15px;
	}


/*Vrije tijd*/

h4 {
	font-size: 13px; letter-spacing: 0.2px; word-spacing: 0.1px;
	font-weight: 500;
	text-transform: uppercase;
	color: #333;
	margin-top: 55px;
	margin-bottom: 15px;
	}


.vtbox1 {
	display: inline-block;
	width: 80%;
	}

.vtbox1 img {
	width: 270px;
	position: static;
	}
	.vtbox1 img:hover{
		width: 275px;
		} 

.vtbox2 {
	display: inline-block;
	width: 80%;
	}

.vtbox2 img {
	width: 270px;
	position: static;
	}	
	.vtbox2 img:hover{
		width: 275px;
		}

.vtbox3 {
	display: inline-block;
	width: 80%;
	}

.vtbox3 img {
	width: 270px;
	position: static;
	}	
	.vtbox3 img:hover{
		width: 275px;
		}



/* CONTACT */

.contact-form {
	padding-top: 5%;
	padding-bottom: 5%;
	margin-bottom: 300px;
	}

input[type=text], textarea {
	width: 60%;
	text-align: justify;
	background-color: #ffdf87;
	color: #0c0c0c;
	font-size: 12px;
	padding: 12px;
	border: 3px solid #fff;
	border-radius: 4px;
	box-shadow: 1px 1px 2px #d5d5d5;
	margin-top: 6px;
	margin-bottom: 15px;
	}

textarea {
	height: 170px;
	}




/* FOOTER */

#footer {
	margin-top: 100px;
	padding: 25px 0; 
	text-align: center; font-size: 11px;
	}

#footer b {
	font-weight: 700;
	}

#footer small {
	font-weight: 300;
}	




/*MEDIA*/

@media only screen and (max-width: 600px) {

	body {
		background-color:;
		}	

	.woordennav {   
		margin: 25px 10px; 			/* woorden goed zetten */   /* BOVEN px . UIT ELKAARpx */
		}

	h1 {
		font-size: 250%;
		font-weight: 700;	
		line-height: 40px;
		padding-top: 100px;
		padding-bottom: 50px;
		}

	.projecttekst { 
		padding: 15% 2% 10% 2%;
		font-size: 110%;
		text-align: left;
		line-height: 25px; 
		}	

	.order {
		display: inline-block;
		width: 100%;
		}
	

/*
	.xop-img-1 {
		background: url(../images/main/I&E2.1.jpg);
		}
	.xop-img-2 {
		background: url(../images/main/RSkills2.1.jpg);
		}
	.xop-info h2{ 					
   		transform: none;		
    	transition: none;
    	opacity: 1; 	
		}
	.xop-info p {
		opacity: 1;						
		transform: none;
		transition: none;
		}	
*/


	/* ABOUT */

	.profielpic { 
		width: 90%;
		height: 90%;
		}

	.tekstbox{ 
		padding: 10% 5% 10% 5%;
		width: 100%;
		font-size: 115%;
		line-height: 28px; 
		font-size: 115%;
		}	


	.infoie {
		width: 80%
		}	
	.schetsie {
		width: 100%;
		}	
	.iefotos {
		width: 48%;
		}
	.expofoto {
		width: 48%;
		}
	
	

	.astma {
		width: 100%;
		}
	#astmov {
		width: 100%;
		height: 100%;
		}	

	.vprof {
		width: 100%;
		}

	.jansenfoto {
		width: 100%;	
		}


	.vpfoto {
		width: 100%;
		}

	.vpfoto2 {
		width: 100%;
		}

	#vpposter {
		width: 80%;
		}

	.stfoto {    		/* Stille getuigen */
		width: 100%;
		}

	.doelgroepbox {  	/* ISO */
		width: 100%;
		}

	.doelgroepbox img {
		width: 100%;
		}

	.isofoto {
		width: 100%;
		}	

	.isofotos1 { 		/*de kaart*/
		width: 100%;
		}	

	canvas {
		width: 75%; 
		}


	.vtbox1 img{
		width: 100%;
		}	

	.vtbox2 img{
		width: 100%;
		}

	.vtbox3 img{
		width: 100%;
		}


	/* FOOTER */

	#footer {
		text-align: center; font-size: 13px;
		}


	/* CONTACT */
		
	input[type=text], textarea {
		width: 90%;	
	}

}