@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(fonts/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(fonts/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), url(fonts/0dTEPzkLWceF7z0koJaX1A.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: local('Raleway Bold'), local('Raleway-Bold'), url(fonts/JbtMzqLaYbbbCL9X6EvaI_k_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}


*{
	padding:0;
	margin:0;
}


body{
	font:15px/27px 'Open Sans', 'Helvetica', 'sans-serif';	
	background:#e3f2fd;
}


a#menu{
	display:none;
}


header{
	height:400px;
	background:#16168A;
	box-sizing:border-box;
	padding:150px 0 0 0;
	position:relative;
}
header:before{
	content:' ';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:400px;
	background-image:url(../images/studio-mic.jpg);
	background-position:center center;
	background-size:cover;
	text-align:center;
	opacity:0.5	
}

header a#logo{
	width:600px;
	left:-300px;
	margin-left:50%;
	display:block;
	text-align:center;
	font-size:36px;
	color:#FFF;
	text-decoration:none;
	font-weight:700;
	line-height:32px;
	letter-spacing:-1px;
	position:absolute;
	z-index:2;
	padding:24px 0;

}
header a#logo span{
	display:block;
	font-size:16px;	
	color:#FFF;
	letter-spacing:0;
	word-spacing:4px;
	position:relative;
	text-align:center	;
	text-shadow:none;
}

/*
header a#logo:before{
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	background:#FFF;
	z-index:-1;
	left:0;
	top:0;
	opacity:0.8
}
*/

a#logo_colored{
	display:block;
	color:#6600FF;
	letter-spacing:0;
	word-spacing:4px;
	text-shadow:none;
	font-weight:700;
	font-size:24px;
	text-decoration:none;
	display:block;
	letter-spacing:-1px;
	text-align:center;
	width:225px;
}
a#logo_colored span{
	display:block;
	font-size:16px;	
	color:#7030A0;
	letter-spacing:0;
	word-spacing:4px;
	position:relative;
	text-shadow:none;
	font-size:13px;
	letter-spacing:-1px;
}



#languages{
	position:absolute;
	right:16px;
	top:16px;
	z-index:999
}
#languages a{
	background-color: #000;
	background-repeat:no-repeat;
	background-position:8px center;
	color:#FFF;
	padding:4px 4px 4px 28px;
	text-decoration:none;
	font-size:12px;
	text-transform:uppercase;
	margin-right:16px;
	border-radius:4px;
}
#languages a.en{ background-image:url(../images/gb.png); }
#languages a.de{ background-image:url(../images/de.png); }
#languages a.pl{ background-image:url(../images/pl.png); }
#languages a.fr{ background-image:url(../images/fr.png); }

.wrapper{
	width:980px;
	margin:auto;
	position:relative;
}

a#to-top{
	position:fixed;
	right:8px;
	bottom:8px;
	display:block;
	width:48px;
	height:48px;
	line-height:48px;
	padding:8px;
	text-align:center;
	color:#FFF;
	background:#000;
	text-decoration:none;
	opacity:0.8;
	border-radius:4px;
	display:none;
	z-index:999
}

nav{
	background:#FFF;
	color:#000;
	height:72px;
	line-height:72px;
	position:absolute;
	width:100%;
	top:400px;
	box-shadow:0 0 5px #333;
	z-index:9999
}

nav.sticky{
	background:#FFF;
	position:fixed;
	top:0;
	left:0;
	z-index:10;
}

nav li{
	display:inline-block;
	margin-right:24px;
	font-size:18px;
	font-weight:500;
	text-transform:uppercase;
}
nav a{
	color:#7030A0;
	display:block;
	text-decoration:none;
	position:relative;
}
nav a.active{
	font-weight:900;
}
nav a.active:after{
	content:' ';
	width:100%;
	height:2px;
	background:#7030A0;
	top:48px;
	left:0;
	position:absolute;	
}

nav h3{
	float:left;
	margin-right:24px;
	font-size:0px;
	color:#FFF;
	padding:0 16px;
	background:#FFF;
	letter-spacing:-1px;
	text-transform:uppercase;	
	transition:linear 0.2s;
	text-align:center;
	position:relative;
	width:0;
}


nav.sticky h3{
	background:#EEE;	
	color:#16168A;
	font-size:18px;
	width:auto;
}

nav.sticky li{
	font-size:15px;
}



main{
	margin-top:72px;
}



article{
	box-sizing:border-box;
	position:relative;
}





article .article-wrapper{
	padding:56px 0;
	width:980px;
	margin:auto;
	
}


img.intro-image{
	border-radius:50%;
	border:4px solid #FFF;
}

article h1{
	margin-bottom:24px;
	color:#7030A0 !important;
	text-transform:uppercase;
	font:24px/21px Raleway, 'Open Sans', 'Helvetica', 'sans-serif';	
	font-weight:700;
	line-height:28px;
	background:#FFF;
	padding:32px;
}

article h1 span{
	width:980px;
	margin:auto;
	display:block
}

article h2{
	margin-bottom:24px;
	color:#7030A0 !important;
	text-transform:uppercase;
	font:24px/21px Raleway, 'Open Sans', 'Helvetica', 'sans-serif';	
	font-weight:700;
	line-height:28px;
}

article p{
	margin-bottom:24px;
}


article:before,
article:after{
	content:' ';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	opacity:0.3;
	z-index:-9
}
article:after{
	z-index:-10;
	opacity:1;
}


#home{ background:#F6F0FF; padding-top:56px }

#what-is-the-service-station,#what-is-the-service-station h1{ color:#FFF; }
#what-is-the-service-station:before{background:url(../images/mixing-panel.jpg);}
#what-is-the-service-station:after{background:#16168A;}


#how-does-it-work, #how-does-it-work h1{ color:#FFF; }
#how-does-it-work:before{ background:url(../images/studio-mic.jpg);}
#how-does-it-work:after{ background:#16168A }


#in-the-future, #in-the-future h1{ color:#FFF; }

#in-the-future:before{ background:url(../images/testbeeld-zwartwit.jpg);}
#in-the-future:after{ background:#16168A }



#contact{ background: #F6F0FF;}



.lang-de{ display:none; }
.lang-pl{ display:none; }
.lang-en{ display:block; }





.form-group{
	margin-bottom:16px;
}
.form-group label{
	width:100%;
	font-weight:500;
}

.form-group input[type="text"]{
	width:100%;
	box-sizing:border-box;
	padding:4px;
	border:1px solid #CCC;
}

.form-group input[type="text"].error{
	border:1px dashed red;
}

.form-button{
	padding:8px 16px;
	background:#16168A;
	color:#FFF;
	border:none;
	border-radius:3px;
	cursor:pointer;
}

.images{ margin-top:72px; }
.center{ text-align:center }

/* COLS */


.row{
	box-sizing: border-box;
	margin-bottom: 2%;
}

.row .col-1,
.row .col-2,
.row .col-3,
.row .col-4,
.row .col-5,
.row .col-6,
.row .col-7,
.row .col-8,
.row .col-9,
.row .col-10,
.row .col-11,
.row .col-12{
	box-sizing: border-box;
	float: left;
	margin-right: 2%;
	overflow: hidden;
}

.row.padding .col-1,
.row.padding .col-2,
.row.padding .col-3,
.row.padding .col-4,
.row.padding .col-5,
.row.padding .col-6,
.row.padding .col-7,
.row.padding .col-8,
.row.padding .col-9,
.row.padding .col-10,
.row.padding .col-11,
.row.padding .col-12{
	padding: 16px;
}

.row .col-1{ width: 6.50%;  }
.row .col-2{ width: 15%;  }
.row .col-3{ width: 23.5%;  }
.row .col-4{ width: 32%;  }
.row .col-5{ width: 40.5%;  }
.row .col-6{ width: 49%;  }
.row .col-7{ width: 57.5%;  }
.row .col-8{ width: 66%;  }
.row .col-9{ width: 74.5%;  }
.row .col-10{ width: 83%;  }
.row .col-11{ width: 91.5%;  }
.row .col-12{ width: 100%;  }

.row>:nth-last-child(2){	
	margin: 0;
}
.row:nth-last-child(1){
	margin-bottom: 0
}

.clear{
	clear:both
}