/*
Theme Name: 	PTV
Description: 	Custom Wordpress theme for PTV
Version: 		1.12
Author: 		Studio SW (Design) & Odoson (Dev)
Author URI: 	http://odoson.com
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";
@import "css/fonts/GalaxiePolaris-Book.css";
@import "css/fonts/GalaxiePolaris-Bold.css";
@import "css/flickity.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

html, body {
	background: #eee;
}

body {
	font-size: 11px;
	line-height: 150%;
	font-family: 'GalaxiePolaris-Book', sans-serif; 
}
	
	@media screen and (min-width: 500px) {
		body { font-size: 12px; }
	}

	@media screen and (min-width: 800px) {
		body { font-size: 13px; }
	}

	@media screen and (min-width: 1000px) {
		body { font-size: 15px; }
	}

	@media screen and (min-width: 1200px) {
		body { font-size: 16px; }
	}

	@media screen and (min-width: 1400px) {
		body { font-size: 17px; }
	}

	@media screen and (min-width: 1600px) {
		body { font-size: 18px; }
	}

.wrap {
	width: 100%;
	margin: 0px auto;
	max-width: 1700px;
}

	.wrap-inner {
		/*max-width: 1600px;*/
		width: 100%;
		padding: 20px 10px;
		margin: 0px auto;
	}

		@media screen and (min-width: 800px) { 
			.wrap-inner { 
				padding: 50px 25px;
			}
		}
		
		@media screen and (min-width: 1600px) { 
			.wrap-inner { 
				width: 100%;
			}
		}

	.nopadding .wrap-inner {
		padding: 0px;
		width: 100%;
	}
	
	.wrap-inner.no-padding-tb {
		padding-top: 0;
		padding-bottom: 0;
	}

body { margin-top: 153px; }
	
	@media screen and (min-width: 1000px) { body { margin-top: 221px; } }
	@media screen and (min-width: 1200px) { body { margin-top: 230px; } }
	@media screen and (min-width: 1400px) { body { margin-top: 238px; } }
	@media screen and (min-width: 1600px) { body { margin-top: 256px; } }

.sticky {
	width: 100%;
	max-width: 1700px;
	position: fixed;
	top: 0px;
	z-index: 1000;
}

.header h1 {
	margin-bottom: 0;
	width: 186px;
	height: 54px;
	background: url(css/img/logo.svg) no-repeat 0 0;
	background-size: auto 100%;
	text-indent: -1000px;
	overflow: hidden;
}
	
	.header h2 {
		margin-bottom: 0;
	}
	
	.header .half {
		height: 103px;
		padding-top: 25px;
		padding-bottom: 25px;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		margin: 0px;
	}
	
	.header .half.border-left {
		display: none;
	}
	
	.sticky.narrow .header .half {
		height: 43px;
		margin: 0px;
		padding-top: 10px;
		padding-bottom: 20px;
	}
		
	.sticky.narrow .header h1 {
		background-image: url(css/img/Logo_PTV_small.svg);
		height: 17px;
		margin-top: 4px;
	}
	
	@media screen and (min-width: 700px) {
		.header h1 {
			width: 230px;
			height: 66px;
		}
		
		.header .half {
			height: 104px;
			padding-top: 20px;
			padding-bottom: 20px;
		}
		
		.header .half.border-left {
			display: block;
			border-left: 1px solid #000;
		}
		
		.header .half.border-left h2 {
			font-size: 1.5em;
		}
		
		
		.sticky.narrow .header .half {
			height: 65px;
			padding-top: 20px;
			padding-bottom: 20px;
		}
		
		.sticky.narrow .header h1 {
			background-image: url(css/img/Logo_PTV_small.svg);
			height: 17px;
			margin-top: 4px;
		}
	}

	@media screen and (min-width: 1000px) {
		.header h1 {
			width: 255px;
			height: 74px;
		}
		
		.header .half {
			height: 171px;
			padding-top: 50px;
			padding-bottom: 50px;
		}
		
		.header .half.border-left {

		}
		
		.header .half.border-left h2 {
			font-size: 1.666rem;
		}
		
		.sticky.narrow .header .half {
			height: 76px;
			padding-top: 20px;
			padding-bottom: 20px;
		}
		
		.sticky.narrow .header h1 {
			background-image: url(css/img/Logo_PTV_small.svg);
			height: 24px;
			margin-top: 6px;
		}
	}

	@media screen and (min-width: 1200px) {
		.header h1 {
			width: 285px;
			height: 83px;
		}
		
		.header .half {
			height: 180px;
		}
		
	}
	
	@media screen and (min-width: 1400px) {
		.header h1 {
			width: 310px;
			height: 90px;
		}
		
		.header .half {
			height: 188px;
		}
		
	}

	@media screen and (min-width: 1600px) {
		.header h1 {
			width: 373px;
			height: 110px;
		}
		
		.header .half {
			height: 206px;
		}
	}

	.header h1 a {
		width: 100%;
		height: 100%;
		display: block;
	}

h1,h2,.likeH2 {
	font-size: 1.6em;
	line-height: 130%;
	margin-bottom: 1.3em;
	font-family: 'GalaxiePolaris-Bold', sans-serif;
}

	h2 a.blue {
		text-decoration: none;
		line-height: 1em;
		padding: 10px 15px;
		margin-left: -15px;
		margin-top: 1em;
		display: inline-block;
	}

	@media screen and (min-width: 500px) { h2 a.blue { padding-bottom: 13px; } }
	@media screen and (min-width: 1000px) { h2 a.blue { padding-bottom: 14px; } }

h4 {
	font-size: 1.277em;
	line-height: 135%;
	font-family: 'GalaxiePolaris-Bold', sans-serif;
}

h6 {
	color: #9d9c9c;
}

h6 a {
	color: inherit !important;
}

p {
	margin-bottom: 1em;
}

strong {
	font-family: 'GalaxiePolaris-Bold', sans-serif;
	font-weight: normal;
}

.black {
	background: #000;
	color: #fff;
}

	.black a,
	.white-black a {
		color: #999;
		text-decoration: none;
	}

.white-black {
	background: #fff;
	background-size: 100% auto;
	color: #fff;
}
	
	@media screen and (min-width: 700px) {
		.white-black {
			background: #000 url(css/img/white-black.png) repeat-y center;
			background-size: 100% auto;
		}
	}
	
	.white-black .half.white {
		color: #000;
		background: transparent;
	}

		.white-black .half.white h2,
		.white-black .half.white .likeH2 { margin-top: 25px; }

		@media screen and (min-width: 1000px) {
			.white-black .half.white h2,
			.white-black .half.white .likeH2 { margin-top: 50px; }
		}

	/*.white-black .half.white {
		float: right;
	}

	.white-black .half.black {
		float: left;
	}*/

.white {
	background: #fff;
	color: #000;
}
	
	.white a {
		color: #000;
		text-decoration: none;
	}

.blue {
	background: #0073ff;
	color: #fff;
}

.gray {
	background: #f8f8f8;
}

.gray.footer {
	vertical-align: bottom;
	color: #999;
	padding-top: 50px;
	font-size: 0.9em;
	line-height: 140%;
	background: #f8f8f8;
}

	.gray a {
		color: inherit;
		text-decoration: none;
	}
	
	@media screen and (min-width: 800px) {
		.gray.footer { padding-top: 100px; }
	}
	
	@media screen and (min-width: 1200px) {
		.gray.footer { padding-top: 140px; }
	}

.nav {
	min-height: 50px;
	background: #000 url(css/img/nav_line.png) repeat-x 0 49px;
	color: #fff;
	line-height: 48px;
	font-size: 1.666em;
	font-family: 'GalaxiePolaris-Bold', sans-serif;
	z-index: 100;
	cursor: pointer;
}
	
	.nav h2 {
		font-size: 1em;
	}

	.nav h2:hover {
		color: rgba(255,255,255,0.5);
	}

	.nav .full {
		position: relative;
	}

	.nav .toggle {
		width: 0.8em;
		height: 0.8em;
		background: #f09;
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -0.4em;
		background: url(css/img/plus.svg) no-repeat center;
		background-size: 100% 100%;
	}
	
	@media screen and (min-width: 700px) {
		.nav .toggle { right: 25px; }
	}

	.nav.open .toggle {
		background-image: url(css/img/close_white.svg);
		top: 0.5em;
		margin-top: 0;
	}

	.nav .wrap-inner {
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.nav-inner {
		position: relative;
		z-index: 100;
		padding: 1em 0;
		display: none;
		overflow-x: visible !important;
	}
		.nav.open .nav-inner {
			/* display: block; */
		}
	
		.nav-inner h2 {
			margin-bottom: 0.2em;
			cursor: pointer;
		}

.slider,
.full-image {
	width: 100%;
	height: 250px;
}
	.full-image {
		background-size: cover;
		background-position: center;
	}

	@media screen and (min-width: 700px) { .slider, .full-image { height: 350px; } }
	@media screen and (min-width: 1000px) { .slider, .full-image { height: 450px; } }
	@media screen and (min-width: 1200px) { .slider, .full-image { height: 520px; } }
	@media screen and (min-width: 1400px) { .slider, .full-image { height: 600px; } }
	@media screen and (min-width: 1600px) { .slider, .full-image { height: 750px; } }

	.slider .slide {
		height: 100%;
		width: 100%;
		background-size: cover;
		background-position: center;
	}

p:empty {
	display: none;
}

ul.competencies.filter {
	border: 1px solid #000;
	border-top: 0;
	position: relative;
	width: 100%;
	width: calc(100% - 20px);
	padding: 15px 10px;
	position: absolute;
	background: #fff;
	z-index: 100;
	max-height: 201px;
	overflow: auto;
	display: none;
}
	
	@media screen and (min-width: 700px) {
		ul.competencies.filter { width: calc(100% - 50px) }
	}
	
	ul.competencies.filter li {
		display: block !important;
	}
	
	@media screen and (min-width: 700px) { ul.competencies.filter { max-height: 217px; } }
	@media screen and (min-width: 800px) { ul.competencies.filter { max-height: 228px; } }
	@media screen and (min-width: 1000px) { ul.competencies.filter { max-height: 255px; } }
	@media screen and (min-width: 1200px) { ul.competencies.filter { max-height: 205px; } }
	@media screen and (min-width: 1400px) { ul.competencies.filter { max-height: 212px; } }
	@media screen and (min-width: 1600px) { ul.competencies.filter { max-height: 223px; } }

ul.competencies li {
	border-bottom: 1px solid #fff;
	line-height: 2em;
}
	
	ul.competencies li:first-child {
		border-top: 1px solid #fff;
	}
	
	ul.competencies li:nth-child(n+10) {
		display: none;
	}

	ul.competencies.showAll li:nth-child(n+10) {
		display: block;
	}
	
	ul.competencies li span.title {
		cursor: pointer;
		display: inline-block;
	}
		
		ul.competencies.filter li span.title {
			padding: 0 10px;
		}
		
		ul.competencies.filter li.open span.title,
		ul.competencies.filter li:hover span.title {
			background: #000;
			color: #fff;
			display: inline-block;
		}
	
		ul.competencies li span.title .toggle {
			width: 0.8em;
			height: 0.8em;
			background: url(css/img/plus_small_white.svg) no-repeat center;
			background-size: 100%;
			display: block;
			position: absolute;
			right: 0.4em;
			top: 0.7em;
			margin-top: 0;
		}
		
		ul.competencies li.open span.title .toggle {
			background-image: url(css/img/close_white.svg);
			top: 0.8em;
			margin-top: 0;
		}
	
	ul.competencies li .members {
		display: none;
		padding: 1em 0 0.5em 0;
		color: #000;
		line-height: 120%;
	}
	
	ul.competencies li.open .members {
		/* display: block; */
	}
			
		ul.competencies li .members span {
			cursor: pointer;
		}
		
		ul.competencies li .members span:hover {
			color: #fff;
		}

	.showAllCompetencies,
	.dropdown {
		background: #000;
		display: block;
		color: #fff;
		font-family: 'GalaxiePolaris-Bold', sans-serif;
		margin-top: 2em;
		line-height: 2.8em;
		cursor: pointer;
		padding: 0 15px;
		position: relative;
	}
	
	.dropdown {
		margin-top: 0;
		padding: 0 20px;
	}
	
	.showAllCompetencies .toggle,
	.dropdown .toggle {
		width: 0.8em;
		height: 0.8em;
		background: url(css/img/plus.svg) no-repeat center;
		background-size: 100%;
		display: block;
		position: absolute;
		right: 0.8em;
		top: 50%;
		margin-top: -0.4em;
	}

	.showAllCompetencies.less .toggle {
		background-image: url(css/img/minus.svg);
	}
	
	.dropdown.open .toggle {
		background-image: url(css/img/close_white.svg);
	}

.members-list {	
    margin: 50px 0;
}

	.members-list .member {
		border-top: 1px solid #000;
		border-bottom: 1px solid #fff;
		margin: 0 0 0 0;
		padding: 0.5em 0;
		cursor: pointer;
		background: #fff;
	}

		.members-list .half:nth-child(2) .inner .member:last-child {
			border-bottom: 1px solid #000;
		}

		@media screen and (min-width: 700px) {
			.members-list .inner .member:last-child {
				border-bottom: 1px solid #000;
			}
		}
		
		.members-list .member .toggle {
			width: 0.8em;
			height: 0.8em;
			background: url(css/img/plus_small_black.svg) no-repeat center;
			background-size: 100%;
			display: block;
			position: absolute;
			right: 0.8em;
			top: 0.95em;
		}
			
			.members-list .member.open .toggle {
				background-image: url(css/img/close_black.svg);
				top: 0.95em;
				margin-top: 0;
			}

		
		.members-list .member.open {
			cursor: default;
		}
		
		.members-list .member.disabled .member-inner-holder {
			opacity: 0.1;
		}
	
		.members-list .member .title {
			font-family: 'GalaxiePolaris-Bold', sans-serif;
			display: block;
		}
		
		.members-list .member .contact-info {
			padding-top: 1em;
			color: #999;
			display: none;
		}
		
		.members-list .member.open .contact-info {
			/* display: block; */
		}

		
		.members-list .member .contact-info a {
			color: inherit;
			text-decoration: none;
		}
		
		.members-list .member .contact-info .third {
			width: 100%;
			float: left;
			margin-bottom: 0.5em;
		}
		
		@media screen and (min-width: 420px) { .members-list .member .contact-info .third { width: 40%; } .members-list .member .contact-info .third.right { text-align: right; width: 20%; } }
		@media screen and (min-width: 700px) { .members-list .member .contact-info .third { width: 50%; } .members-list .member .contact-info .third.right { text-align: left; width: 100%; } }
		@media screen and (min-width: 1000px) { .members-list .member .contact-info .third { width: 40%; } .members-list .member .contact-info .third.right { text-align: right; width: 20%; } }

.full {
	width: 100%;
	position: static;
}

.half {
	width: 100%;
	margin: 15px 0;
}
	
	.half img {
		margin: -20px 0px 0 -20px;
		width: calc(100% + 40px) !important;
	}
	
	.half.black {
		margin: 0 -15px;
		padding: 15px;
		width: calc(100% + 25px);
		background: #000;
	}

	.half.black, 
	.half.white {
		float: right;
	}
	
	@media screen and (min-width: 700px) {
		
		.half.black, 
		.half.white {
			float: right;
		}

		.half.black {
			background: transparent;
			width: 50%;
			margin: 0;
			padding: 0;
		}
		
		
		.half img {
			margin: -20px -20px 0 -40px;
			width: calc(100% + 65px) !important;
		}
		
		
		
	}
	
	@media screen and (min-width: 800px) {
		.half img {
			margin: -50px -25px 0 -50px;
			width: calc(100% + 75px) !important;
		}
	}

	@media screen and (min-width: 1550px) {
		.half img {
			width: calc(100% + 76px) !important;
		}
	}

.members-list .half {
	margin: 0;
}

.quarter,
.fifth {
	width: 50%;
	margin: 15px 0;
	float: left;
}
	
	@media screen and (min-width: 700px) { 
		.half { 
			float: left;
			width: 50%; 
			margin: 0;
		}
		
		.fifth {
			float: left;
			width: 33.33%; 
			margin: 0;
		}

		.fifth.vorstand {
			height:300px;
		}
	}

	@media screen and (min-width: 800px) { 
		.quarter { 
			width: 25%; 
			margin: 0;
		}

		.fifth.vorstand {
			height:360px;
		}
	}
	
	@media screen and (min-width: 1000px) {
		.fifth { 
			width: 20%; 
			margin: 0;
		}

		.fifth.vorstand {
    		height: auto;
		}
	}

	.half .inner,
	.full .inner,
	.quarter .inner,
	.fifth .inner {
		padding: 0 10px;
		position: static;
	}

		@media screen and (min-width: 700px) { 
			.full .inner,
			.half .inner,
			.quarter .inner,
			.fifth .inner {
				padding: 0 25px;
			}
		}

	.half .inner img,
	.full .inner img,
	.quarter .inner img,
	.fifth .inner img {
		width: 100%;
		height: auto;
	}

	.quarter.vorstand,
	.fifth.vorstand {
		margin-bottom: 4em;
	}

		.quarter.vorstand .inner img,
		.fifth.vorstand .inner img {
			margin: 0 0 1.5em 0;
		}

.clear {
	clear: both;
}

.scroll-up {
	display: inline-block;
	cursor: pointer;
	padding-top: 2.8em;
	position: relative;
	padding-left: 2.5em; 
}
	
	.scroll-up .icon {
		display: block;
		position: absolute;
		bottom: 0px;
		background-image: url(css/img/arrow-up.svg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		width: 2em;
		height: 2em;
		margin-bottom: -0.5em;
		margin-left: -2.5em;
	}

.flickity-prev-next-button.previous {
	background-image: url(css/img/arrow-left.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	left: 15px;
	background-color: transparent;
	border-radius: 0;
}

	.flickity-prev-next-button.previous svg { display: none; }

	@media screen and (min-width: 700px) {
		.flickity-prev-next-button.previous { left: 35px; } 
	}

	@media screen and (min-width: 800px) {
		.flickity-prev-next-button.previous { left: 50px; } 
	}

.flickity-prev-next-button.next {
	background-image: url(css/img/arrow-right.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	right: 15px;
	background-color: transparent;
	border-radius: 0;
}

	.flickity-prev-next-button.next svg { display: none; }

	@media screen and (min-width: 700px) {
		.flickity-prev-next-button.next { right: 35px; } 
	}

	@media screen and (min-width: 800px) {
		.flickity-prev-next-button.next { right: 50px; } 
	}

::-webkit-scrollbar {
    width: 10px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: none; 
    -webkit-border-radius: 0px;
    border-radius: 0px;
    background: #ccc;
}

.wrap ::-webkit-scrollbar-track {
	background: transparent;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0px;
    border-radius: 0px;
    background: #000; 
    -webkit-box-shadow: none;
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,0,0,0.4); 
}

.main .black:nth-child(2) ul {
	padding-left:23px;
}

.main .black:nth-child(2) ul >li {
	list-style: disc;
}