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

html {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: #fff;
}

body {
	background: #242021;
}

* {
    box-sizing: border-box;
}

img {
	max-width: 100%;
}

h1 {
	font-size: 30px;
	font-weight: 300;
	color: #fff;
	text-transform:uppercase;
}

h2 {
	font-size: 25px;
	font-weight: 300;
	color: #fc9b26;
	text-transform:uppercase;
}

a {
	color: #fff;
	transition: color 0.2s;
}

	a:hover {
		color: #fc9b26;
	}

.container {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}

header {
	width: 100%;
	float: left;
	dislpay: block;
	margin: 0 0 25px 0;
}

	#logo {
		width: 100%;
		display: block;
		float: left;
		text-align: center;
		margin-top: 10px;
	}
	
	#socialMedia {
		width: 100%;
		display: block;
		float: left;
		text-align: center;
	}
		
		.sm_icon {
			width: 35px;
			height: 35px;
			display: inline-block;
			margin: 0 5px 0 5px;
		}
		
		#facebook {
			background:url(../s4s_images/icon_fb_off.png);
			transition: background 0.2s;
		}
		
			#facebook:hover {
			background:url(../s4s_images/icon_fb_on.png);
			}
		
		#twitter {
			background: url(../s4s_images/icon_tw_off.png);
			transition: background 0.2s;
		}
			
			#twitter:hover {
			background: url(../s4s_images/icon_tw_on.png);
			}
		
		#youtube {
			background:url(../s4s_images/icon_yt_off.png);
			transition: background 0.2s;
		}
		
			#youtube:hover {
				background:url(../s4s_images/icon_yt_on.png);
			}
		
		#soundcloud {
			background:url(../s4s_images/icon_sc_off.png);
			transition: background 0.2s;
		}

			#soundcloud:hover {
				background:url(../s4s_images/icon_sc_on.png);
			}
		
	
nav {
	width: 100%;
	float: left;
	display: block;
	min-height: 45px;
}

	#menu {
		width: 100%;
		float: left;
		text-align: center;
	}
		
		#menu li {
			min-height: 45px;
			list-style-type: none;
			display: inline-block;
			margin: 0 auto;
		}
		
		#menu li a {
			font-weight: 300;
			font-size: 20px;
			color: #fff;
			text-decoration: none;
			height: 35px;
			float: left;
			padding:10px 15px 0 15px;
			transition: color 0.3s;
		}
			
			#menu li a:hover {	
			color: #fc9b26;
			}

#banner {
	width: 100%;
	float: left;
	margin: 40px 0 40px 0;
}
			
footer {
	width: 100%;
	float: left;
	dislpay: block;
	margin: 25px 0;
}
	
	footer ul {
		display: block;
		width: 25%;
		padding: 10px 15px 10px 0;
		float: left;
	}
	
		footer ul li {
			list-style-type: none;
			font-size: 16px;
			font-weight: light;
			color: #fff;
			text-transform: uppercase;
		}
			
			footer ul li a{
				color: #fff;
				text-decoration: none;
				transition: color 0.2s;
			}
			
				footer ul li a:hover {
					color: #fc9b26;
				}
	
	footer #links {
		text-align: center;
	}
	
	footer #midden1 {
		text-align: center;
	}
	
	footer #midden2 {
		text-align: center;
	}
	
	footer #rechts {
		text-align: center;
	}
	
.row {
	width: 100%;
	float: left;
	display: block;
	margin: 25px 0 40px 0
}

	.row h1 {
		margin-bottom: 10px;
	}

	.rowContent {
		width: 100%;
		padding: 25px;
		min-height: 300px;
		color: #fff;
		background: #2a2a2a;
	}
	
	.rowContentSlider {
		width: 100%;
		padding: 0;
		
		color: #fff;
		background: #2a2a2a;
	}
	

.fade_line { 
    height: 1px;
    background: white;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#242021), to(#242021), color-stop(50%, white));
	float: left;
	width: 100%;
	
}

.oranjeLetters {
	color: #fc9b26;
}
	
#close {
	width: 100%;
	float: left;
	padding: 25px 0;
	text-align: center;
	color: #fff;
}
#close a {
	text-decoration:none;
}

.infoContainer {
	width:96%;
	min-height:300px;
	padding:2%;
}
.infoContainer .afbeelding {
	float:left;
	max-width:43%;
	margin:0 2% 2% 5%;
	padding:0;
}
.infoContainer .content {
	float:left;
	max-width:48%;
	min-height:300px;
	margin:0 0 20px 0;
	padding:0 2% 10px 0;
	line-height:24px;
}
.infoContainer .content .titel {
	line-height:30px;
	color: #fc9b26;
}
.infoContainer hr {
	
	display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #666;
    margin: 1em 0;
    padding: 0; 
}
.infoContainer .datum {
	
	color: #666;
	font-size:18px;
	text-transform:uppercase;
}
.infoContainer ul {
	margin-left:20px;
}
.backToTop {
	display:inline-block;
	width:38px;
	height:13px;
	float:right;
	background:url(../s4s_images/pijl_Off.png);
	transition:background 0.3s;
}
.backToTop:hover {
	background:url(../s4s_images/pijl_On.png);
}
.backToTop a {
	display:block;
	width:100%;
	height:13px;
}


/* b-slider */
.bx-wrapper .bx-viewport {
	border-color: #2a2a2a;
	-webkit-box-shadow: 0 0 0 #2a2a2a; 
	box-shadow: 0 0 0 #2a2a2a; 
	border: 0 solid #2a2a2a;
    background: #2a2a2a;
	left:0;
}

.bx-wrapper .bx-prev {
	left:0;
}
.bx-wrapper .bx-next {
	right:0;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -50px;
    width: 100%;
}
.bx-wrapper .bx-caption {
	
	font-size:20px;
	
	text-align:center;
	background-color:rgba(0,0,0,0.5);
}

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

.row {
	padding-left: 20px;
	padding-right: 20px;	
}

footer {
	padding-left: 20px;
	padding-right: 20px;	
}

	footer ul {
		width: 100%;
		margin-bottom: 20px;
		padding-left: 20px;
		padding-right: 20px;	
	}		
	
		footer #links {
			text-align: center;
		}
		
		footer #midden {
			text-align: center;
		}
		
		footer #rechts {
			text-align: center;
		}
}
@media only screen and (max-width: 640px) {
	.infoContainer .afbeelding {
	width:100%;
	max-width:100%;
	margin:0 0 2% 0;
	padding:0 0 0 10%;
}
.infoContainer .content {
	float:left;
	width:100%;
	max-width:100%;
	margin:0 5% 20px 5%;
	padding:0 5% 10px 5%;
}
h1 {
	font-size:22px;
}
.bx-wrapper .bx-prev {
	left:-20px;
}
.bx-wrapper .bx-next {
	right:-20px;
}
}