/* ~~ ZWART ~~ */

#zwart{
    background:#000000;
	color:#ffffff;	
}
h1::selection, 
h2::selection, 
h3::selection, 
.txt p::selection, 
.txt a::selection, 
.txt li::selection  {
  background: #e6007e;
}
h1::-moz-selection, 
h2::-moz-selection, 
h3::-moz-selection, 
.txt p::-moz-selection, 
.txt a::-moz-selection, 
.txt li::-moz-selection {
  background: #e6007e;
}
.peervis_logo {
  	background: url("../img/peervis_logo_wit.png");	
	background: url("../img/peervis_logo_wit.svg"), 	
	linear-gradient(transparent, transparent);
	background-size: 160px 65px;   
}
.peervis_logo:hover {
  	background: url("../img/peervis_logo_mag.png");	
	background: url("../img/peervis_logo_mag.svg"), 	
	linear-gradient(transparent, transparent);
	background-size: 160px 65px;    
}
nav {
    color: #ffffff;
	background-color:transparent;
}
nav ul li a {
	color: #fffffff;
}
nav ul li a:hover {
	  color: #e6007e;
}
.odd {
	color: #e6007e;
}
.nav-open i {
	 background: #ffffff;
}
* {
	color:#ffffff;
}
ul.vin1 > li:before{
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80%' height='80%' viewBox='0 0 18.5 12' preserveAspectRatio='xMidYMid meet'><path fill='rgb(255, 255, 255)'  d='M7.2,10c2.8,0.2,8.7-2.4,11.4-10c0,0-7.5,0.9-11.4,6.6C3.3,0.9,0,2.1,0,2.1C0.7,8.1,4.4,10.2,7.2,10z'/></svg>");
	background-size:70%;
	background-position:center;
	transition: background-size 0.3s;
	-webkit-transition: background-size 0.3s;
}
ul.vin1 > li:hover:before{
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 18.5 12' preserveAspectRatio='xMidYMid meet'><path fill='rgb(230, 0, 126)'  d='M7.2,10c2.8,0.2,8.7-2.4,11.4-10c0,0-7.5,0.9-11.4,6.6C3.3,0.9,0,2.1,0,2.1C0.7,8.1,4.4,10.2,7.2,10z'/></svg>");
	background-size:100%;
}

.txt li  {
	color:#ffffff;	
}
.vin1 li:hover{
	color:#e6007e;	
}
.txt li:hover, .txt .link:hover {
	color:#e6007e;	
}
.txt p .link a {
    font-family:'Open Sans', sans-serif;
	text-decoration:underline;
	color:#FFFFFF;
}
.txt p .link a:hover{	
	color:#e6007e;
}
.voet a{
	color:#ffffff;
}
.voet a:hover{
	color:#e6007e;
	text-decoration:none;
}

/* ~~ IMAGES ~~ */

#over_ons {
	width: 750px;
	height: 600px;	
	background:url(../img/stage_over_ons.png) no-repeat center;
	background-size:cover; 
	background-position: 0 0; 
}
#contact {	
	width: 750px;
	height: 600px;	
	background:url(../img/stage_contact.png) no-repeat center;
	background-size:cover; 
	background-position: 0 0; 
	margin-bottom: 0;
}
#contact .link {
	text-decoration: none;
}
#contact .link:hover {
	text-decoration: underline;
}
@media screen and (max-width: 768px) {
	
	 #over_ons{
		width: auto;
		height: 590px;	
		background:url(../img/stage_over_ons_tab.jpg) no-repeat center;
		background-size: contain; 
		background-position: -25px 125px;
		margin-bottom: 0;
	}
	#contact {
		width: 738px;
		height: 600px;	
		background:url(../img/stage_contact.png) no-repeat center;
		background-size: contain; 
		background-position: 0 0;
		margin-bottom: 15px;
	}
}

@media screen and (max-width: 720px) {
	
	 #over_ons{
		width: auto;
		height: 590px;	
		background:url(../img/stage_over_ons_tab.jpg) no-repeat center;
		background-size: contain; 
		background-position: -25px 150px;
		margin-bottom: 0;
	}
	 #contact {
		width: 680px;
		height: 590px;	
		background:url(../img/stage_contact.png) no-repeat center;
		background-size: contain; 
		background-position: 0 0;
		margin-bottom: 0;
	}
}
@media screen and (max-width: 719px){

	#navigatie {
		background-color: #000000;
	}	 
	#trainingen{
		width: auto;
		float: left;
	}
	#trainingen p {
		margin-bottom: 30px;
	}
	.nav-container {
		background: #000000;
	}
	#nav:checked + .nav-open i {
	  background: #ffffff;
	}
}

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

	 #over_ons{
		width: auto;
		height: 600px;	
		background:url(../img/stage_over_ons_tab.jpg) no-repeat center;
		background-size: contain; 
		background-position: 0 250px;
		margin-bottom: 30px;
	}	
	#contact{
		width: auto;
		height: 600px;	
		background:url(../img/stage_contact.png) no-repeat center;
		background-size: cover; 
		background-position: -5px 0;
		margin-bottom: 30px;
	}
	
}

@media screen and (max-width: 460px) {
	
	 #over_ons{
		width: auto;
		height: 600px;	
		background:url(../img/stage_over_ons_tab.jpg) no-repeat center;
		background-size: contain; 
		background-position: 0 340px;
		margin-bottom: 30px;
	}	
	#contact{
		width: auto;
		height: 600px;	
		background:url(../img/stage_contact_mob.png) no-repeat center;
		background-size: contain; 
		background-position: 0 0;
	}	
	
}

@media screen and (max-width: 375px) {
	
	#over_ons{
		width: auto;
		height: 170px;	
		background:url(../img/stage_over_ons_mob.jpg) no-repeat center;
		background-size: contain; 
		background-position: 0 0;
	}
	#over_ons p{
		margin-top: 185px;
		margin-bottom: 45px;
	}	
	#contact{
		width: auto;
		height: 345px;	
		background:url(../img/stage_contact_mob.png) no-repeat center;
		background-size: cover; 
		background-position: 0 0;
	}	

}

@media screen and (max-width: 320px) {
	
	#over_ons{
		width: auto;
		height: 150px;	
		background:url(../img/stage_over_ons_mob.jpg) no-repeat center;
		background-size: cover; 
		background-position: -15px 0;
	}
	#over_ons p{
		margin-top: 150px;
		margin-bottom: 45px;	
	}		
	#contact{
		width: auto;
		height: 300px;	
		background:url(../img/stage_contact_mob.png) no-repeat center;
		background-size: cover; 
		background-position: 0 0;
	}
}