@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot');
	src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Windows Chrome ugly fix http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout/14345363#14345363 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'icomoon';
		src: url('../fonts/icomoon.svg#icomoon') format('svg');
	};
}

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-left: 0em;
}
body, html { font-size: 17px; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #000000;
	background: #eeeeee;
}

a {
	color: #000000;
	text-decoration: underline;
}

a:hover {
	color: #000;
}

.mainmenu {
	width: 100%;
	margin: 0 auto;
	max-width: 77.5em;
	padding-top: 0.5em;
	padding-left: 2em;
	padding-right: 2em;
	padding-bottom: 0.2em;
}

.main {
	width: 100%;
	margin: 0 auto;
	max-width: 82.667em;
	min-height: 40em;
	padding-top: 0.5em;
	padding-left: 2em;
	padding-right: 2em;
	padding-bottom: 1em;
}

.container > header {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	padding-top: 1em;
	padding-right: 2em;
	padding-left: 2em;
	padding-bottom: 0.4em;
	background-color: #ffffff;
}

.container > header h1 {
	display: block;
	font-size: 1.35em;
	color: #ceccc6;
	margin: 0;
	text-align: center;
}

.container > header h2 {
	font-size: 1.2em;
	color: #ab9689;
	display: block;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
	text-align: center;
}

/* Für alle Anzeigen gilt */
.MainLinks, .MainRechts, .MainZentral, .MainZentralKurz, .MainGanzLinks, .MainGanzRechts, .MainRechts2 {
	line-height: 1.2;
	display: block;
	margin: 0;
	font-weight: 300;
	float: left;
	text-align: left;
	padding-top: 1em;
	padding-bottom: 1em;
	}
	
/* Bei nur einer Anzeige über die gesamte Breite */
.MainZentral {
	font-size: 1em;
	padding-left: 2.2em;
	width: 90%;
}

/* Anzeige im ersten Drittel */
.MainLinks {
	font-size: 1em;
	padding-right: 0em;
	padding-left: 2.2em;
	width: 33.33%;
}

/* Anzeige vom zweiten und dritten Drittel */
.MainRechts{
	clear: after;
	font-size: 1em;
	padding-right: 3em;
	padding-left: 1.5em;
	width: 66.66%;
}

/* Anzeige zentral über drei Sechstel*/
.MainZentralKurz{
	font-size: 1em;
	padding-right: 1.8em;
	padding-left: 1.5em;
	width: 48.5%;
}

/* Anzeige im ersten Sechstel */
.MainGanzLinks {
	font-size: 1em;
	padding-right: 0em;
	padding-left: 2.2em;
	width: 16.67%;
}


/* Anzeige im letzten Sechstel */
.MainGanzRechts {
	font-size: 1em;
	padding-right: 0em;
	padding-left: 0em;
	width: 15%;
}

/* Anzeige rechts letzte beiden Sechstel */
.MainRechts2 {
	font-size: 1em;
	padding-right: 0em;
	padding-left: 0em;
	width: 33.33%;
}

.BildVoll {
	max-width:100%;
	height:auto;
	position: relative;
	display:block;
	margin:0 auto;
}

.BildVoll img{
	width:100%;
	height:auto;
	padding-bottom: 0.5em;
	display:block;
}

.icon-Praxis, .icon-Info, .icon-Kontakt, .icon-Therapie, .icon-nP-kurz, .icon-nP, .icon-Team, .icon-Home, .icon-Mail, .icon-Kalender, .icon-menu, .icon-google-plus, .icon-facebook, .icon-youtube, .icon-paypal {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.icon-Praxis:before {content: "\e600";}
.icon-Info:before {content: "\e601";}
.icon-Kontakt:before {content: "\e602";}
.icon-Therapie:before {content: "\e603";}
.icon-nP-kurz:before {content: "\e604";}
.icon-nP:before {content: "\e605";}
.icon-Team:before {content: "\e606";}
.icon-Home:before {content: "\e002";}
.icon-Mail:before {content: "\e005";}
.icon-Kalender:before {content: "\e607";}
.icon-menu:before {content: "\f0c9";}
.icon-RechtsKreis:before {content: "\ea42";}
.icon-LinksKreis:before {content: "\ea44";}
.icon-google-plus:before {content: "\ea89";}
.icon-facebook:before {content: "\ea8d";}
.icon-youtube:before {content: "\ea99";}
.icon-paypal:before {content: "\ead6";}

a, li {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Global CSS that are applied for all screen sizes */

.nav ul {
	max-width: 1240px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.4em;
	font-weight: 300;
}

.nav li span {
	display: block;
}

.nav a {
	display: block;
	color: rgba(249, 249, 249, .9);
	text-decoration: none;
	-webkit-transition: color .5s, background .5s, height .5s;
	-moz-transition: color .5s, background .5s, height .5s;
	-o-transition: color .5s, background .5s, height .5s;
	-ms-transition: color .5s, background .5s, height .5s;
	transition: color .5s, background .5s, height .5s;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 
  0 3px 1px -2px rgba(0,0,0,0.7);
}

.nav i{
	/* Make the font smoother for Chrome */
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Remove the blue Webkit background when element is tapped */
a, button {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Hover effect for the whole navigation to make the hovered item stand out */
.no-touch .nav ul:hover a {
	color: rgba(249, 249, 249, .5);
}

.no-touch .nav ul:hover a:hover {
	color: rgba(249, 249, 249, 0.99);
}

/* Adding some background color to the different menu items */
.nav li:nth-child(6n+1) {
	background: rgb(146, 122, 105);
}

.nav li:nth-child(6n+2) {
	background: rgb(158, 136, 121);
}

.nav li:nth-child(6n+3) {
	background: rgb(171, 150, 136);
}

.nav li:nth-child(6n+4) {
	background: rgb(195, 211, 49);
}

.nav li:nth-child(6n+5) {
	background: rgb(178, 195, 45);
}

.nav li:nth-child(6n+6) {
	background: rgb(144, 158, 41);
}

	/* Größe für Video im 16:9-Format an Fenster anpassen */
	.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px; height: 0; overflow: hidden;
	}
	.video-container iframe,
	.video-container object,
	.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	}	

/* For screen bigger than 800px */
@media (min-width : 90em ){

	/* Transforms the list into a horizontal navigation */
	.nav li {
		float: left;
		width: 16.66666666666667%;
		text-align: center;
		-webkit-transition: border .5s;
		-moz-transition: border .5s;
		-o-transition: border .5s;
		-ms-transition: border .5s;
		transition: border .5s;
	}

	.nav a {
		display: block;
		width: auto;
	}

	/* hover, focused and active effects that add a little colored border to the different items */
	.no-touch .nav li:nth-child(6n+1) a:hover,
	.no-touch .nav li:nth-child(6n+1) a:active,
	.no-touch .nav li:nth-child(6n+1) a:focus {
		border-bottom: 4px solid rgb(195, 211, 49);
	}

	.no-touch .nav li:nth-child(6n+2) a:hover,
	.no-touch .nav li:nth-child(6n+2) a:active,
	.no-touch .nav li:nth-child(6n+2) a:focus {
		border-bottom: 4px solid rgb(195, 211, 49);
	}

	.no-touch .nav li:nth-child(6n+3) a:hover,
	.no-touch .nav li:nth-child(6n+3) a:active,
	.no-touch .nav li:nth-child(6n+3) a:focus {
		border-bottom: 4px solid rgb(195, 211, 49);
	}

	.no-touch .nav li:nth-child(6n+4) a:hover,
	.no-touch .nav li:nth-child(6n+4) a:active,
	.no-touch .nav li:nth-child(6n+4) a:focus {
		border-bottom: 4px solid rgb(171, 150, 136);
	}

	.no-touch .nav li:nth-child(6n+5) a:hover,
	.no-touch .nav li:nth-child(6n+5) a:active,
	.no-touch .nav li:nth-child(6n+5) a:focus {
		border-bottom: 4px solid rgb(171, 150, 136);
	}

	.no-touch .nav li:nth-child(6n+6) a:hover,
	.no-touch .nav li:nth-child(6n+6) a:active,
	.no-touch .nav li:nth-child(6n+6) a:focus {
		border-bottom: 4px solid rgb(171, 150, 136);
	}

	/* Placing the icon */
	
	.icon {
		padding-top: 1.2em;
	}

	.icon + span {
		margin-top: 0.7em;
		-webkit-transition: margin .5s;
		-moz-transition: margin .5s;
		-o-transition: margin .5s;
		-ms-transition: margin .5s;
		transition: margin .5s;
	}

	/* Animating the height of the element*/
	.nav a {
		height: 6em;
	}

	.no-touch .nav a:hover ,
	.nav a:active ,
	.nav a:focus {
		height: 6.35em;
	}	

	/* gilt nur für aktiven Menüpunkt */
	.nav a.aktiveSeite ,
	.nav a.aktiveSeite:hover ,
	.nav a.aktiveSeite:active ,
	.nav a.aktiveSeite:focus {
		height: 6.35em;
		color: rgba(255, 255, 255, 1);
		box-shadow: inset 2px 2px 0px rgba(255,255,255,0.5), 
		2px 3px 2px 0px rgba(0,0,0,0.5);
		border-bottom: 4px solid rgb(190,190,190);
	}
	
	/* Making the text follow the height animation */
	.no-touch .nav a:hover .icon + span {
		margin-top: 1.35em;
		-webkit-transition: margin .5s;
		-moz-transition: margin .5s;
		-o-transition: margin .5s;
		-ms-transition: margin .5s;
		transition: margin .5s;
	}

	/* Positioning the icons and preparing for the animation*/
	.nav i {
		position: relative;
		display: inline-block;
		margin: 0 auto;
		padding: 0.3em;
		border-radius: 50%;
		font-size: 1.5em;
		box-shadow: 0 0 0 30px transparent;
		background: rgba(255,255,255,0.1);
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-transition: box-shadow .6s ease-in-out;
		-moz-transition: box-shadow .6s ease-in-out;
		-o-transition: box-shadow .6s ease-in-out;
		-ms-transition: box-shadow .6s ease-in-out;
		transition: box-shadow .6s ease-in-out;
	}	
	
	/* Animate the box-shadow to create the effect */
	.no-touch .nav a:hover i,
	.no-touch .nav a:active i,
	.no-touch .nav a:focus i {		
		box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
		-webkit-transition: box-shadow .4s ease-in-out;
		-moz-transition: box-shadow .4s ease-in-out;
		-o-transition: box-shadow .4s ease-in-out;
		-ms-transition: box-shadow .4s ease-in-out;
		transition: box-shadow .4s ease-in-out;
	}
		
}

@media ( min-width : 61.25em ) and (max-width : 90.125em ){
	/* Größen und Schriftenanpassungen zum Einpassen in den Bildschirm*/
	.nav ul {font-size: 1.3em;}
	.MainLinks  {font-size: 1em;}
	.MainRechts {font-size: 0.9em;}
	.MainGanzLinks {font-size: 0.9em;}
	.MainRechts2 {font-size: 0.9em;}
	.MainGanzRechts {font-size: 0.9em;}
	.MainZentral {font-size: 0.9em;}
	.MainZentralKurz {font-size: 0.9em;	text-align: left;}
	.container > header h1 {font-size: 0.9em;}
}

@media (min-width: 50em) and (max-width: 61.250em) {
	/* Größen und Schriftenanpassungen zum Einpassen in den Bildschirm*/
	.nav ul {font-size: 1.05em;}
	.MainLinks  {font-size: 0.9em;text-align: justify;clear: left;}
	.MainRechts, .MainZentral, .MainZentralKurz, .MainRechts2, .MainGanzLinks, .MainGanzRechts {font-size: 0.9em;}
	.MainGanzLinks {width: 33.33%;}
	.MainGanzRechts {width: 100%;}
	.MainZentralKurz {width: 66.66%;}
}

@media (max-width: 49.938em) {		
	/* Die "Tablet" und "Mobile" Version */
	.MainLinks, .MainRechts, .MainZentral, .MainZentralKurz, .MainGanzLinks, .MainGanzRechts, .MainRechts2 {
	width: 100%;
	font-size: 1em;
	font-weight: 300;
	padding-left: 2.1em;
	padding-right: 2em;
	}
	
	/* Instead of adding a border, we transition the background color */
	.no-touch .nav ul li:nth-child(6n+1) a:hover,
	.no-touch .nav ul li:nth-child(6n+1) a:active,
	.no-touch .nav ul li:nth-child(6n+1) a:focus {
		background: rgb(95, 78, 66);
	}

	.no-touch .nav li:nth-child(6n+2) a:hover,
	.no-touch .nav li:nth-child(6n+2) a:active,
	.no-touch .nav li:nth-child(6n+2) a:focus {
		background: rgb(146, 122, 105);
	}

	.no-touch .nav li:nth-child(6n+3) a:hover,
	.no-touch .nav li:nth-child(6n+3) a:active,
	.no-touch .nav li:nth-child(6n+3) a:focus {
		background: rgb(171, 150, 136);
	}

	.no-touch .nav li:nth-child(6n+4) a:hover,
	.no-touch .nav li:nth-child(6n+4) a:active,
	.no-touch .nav li:nth-child(6n+4) a:focus {
		background: rgb(195, 211, 49);
	}

	.no-touch .nav li:nth-child(6n+5) a:hover,
	.no-touch .nav li:nth-child(6n+5) a:active,
	.no-touch .nav li:nth-child(6n+5) a:focus {
		background: rgb(123, 135, 38);
	}

	.no-touch .nav li:nth-child(6n+6) a:hover,
	.no-touch .nav li:nth-child(6n+6) a:active,
	.no-touch .nav li:nth-child(6n+6) a:focus {
		background: rgb(102, 111, 36);
	}

	.nav ul li {
		-webkit-transition: background 0.5s;
		-moz-transition: background 0.5s;
		-o-transition: background 0.5s;
		-ms-transition: background 0.5s;
		transition: background 0.5s;
	}	

	.container > header h1 {
	font-size: 0.7em;
}
}

/* CSS specific to the 2x3 columns version */
@media (min-width:32.5em) and (max-width: 49.938em) {

	/* Creating the 2 column layout using floating elements once again */
	.nav li {display: block;float: left;width: 50%;}
	
	/* Adding some padding to make the elements look nicer*/
	.nav a {padding: 0.6em 0em 0.6em 0.6em;}

	/* Displaying the icons on the left, and the text on the right side using inlin-block*/
	.nav li span {display: inline-block;text-align: right;}
	.nav li span.icon {display: inline-block;text-align: left;width: 50%;}
	.nav li .icon + span {font-size:0.9em;}
	.icon + span {position: relative;top: -0.4em;}

	/* Adaptating to the icons to animate the size and border of the rounded background in a more discreet way */
	.nav li i {
		display: inline-block;
		padding: 8% 9%;
		border: 4px solid transparent;
		border-radius: 50%;
		font-size: 1.5em;
		background: rgba(255,255,255,0.1);
		-webkit-transition: border .5s;
		-moz-transition: border .5s;
		-o-transition: border .5s;
		-ms-transition: border .5s;
		transition: border .5s;
	}

	/* Transition effect on the border color */
	.no-touch .nav li:hover i,
	.no-touch .nav li:active i,
	.no-touch .nav li:focus i {
		border: 4px solid rgba(255,255,255,0.1);
	}
	
}

/* Adapting the font size and width for smaller screns*/
@media (min-width: 32.5em) and (max-width: 38.688em) {
	
	.nav li span.icon {width: 40%;}
	.nav li .icon + span {font-size: 0.8em;}
}

/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
	display: none;	
	width: 100%;
	padding: 0.5em 0.5em 0.8em;
	font-family: 'Lato',Calibri,Arial,sans-serif;
	font-weight: normal;
	text-align: left;
	color: rgb(7, 16, 15);
	font-size: 1.2em;
	background: none;	
	border: none;
	border-bottom: 4px solid rgb(221, 221, 221);
	cursor: pointer;
}

.navtoogle i{
	z-index:-1;
}

.icon-menu {
	position: relative;
	top: 3px;
	line-height: 0;
	font-size: 1.5em;
}

@media (max-width: 32.438em) {

	.MainLinks, .MainRechts, .MainZentral, .MainZentralKurz, .MainGanzLnks, .MainGanzRechts, .MainRechts2 {
	font-size: 0.9em;
	padding-left: 0.1em;
	padding-right: 0.1em;
	}
	/* Unhiding the styled menu link */
	.nav .navtoogle{
		margin: 0;
		display: block;
	}
	
	/* Animating the height of the navigation when the button is clicked */
	
	/* When JavaScript is disabled, we hide the menu */
	.no-js .nav ul {max-height: 30em;overflow: hidden;}
	
	/* When JavaScript is enabled, we hide the menu */
	.js .nav ul {max-height: 0em;overflow: hidden;}
	
	/* Displaying the menu when the user has clicked on the button*/
	.js .nav .active + ul {		
		max-height: 30em;
		overflow: hidden;
		-webkit-transition: max-height .4s;
		-moz-transition: max-height .4s;
		-o-transition: max-height .4s;
		-ms-transition: max-height .4s;
		transition: max-height .4s;
	}

	/* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/
	.nav li span {display: inline-block;height: 100%;}
	.nav a {padding: 0.5em;}
	.icon + span {margin-left: 1em;font-size: 0.8em;}
	
	/* Adding a left border of 8 px with a different color for each menu item*/
	.nav li:nth-child(6n+1) {border-left: 8px solid rgb(195, 211, 49);}
	.nav li:nth-child(6n+2) {border-left: 8px solid rgb(195, 211, 49);}
	.nav li:nth-child(6n+3) {border-left: 8px solid rgb(195, 211, 49);}
	.nav li:nth-child(6n+4) {border-left: 8px solid rgb(171, 150, 136);}
	.nav li:nth-child(6n+5) {border-left: 8px solid rgb(171, 150, 136);}
	.nav li:nth-child(6n+6) {border-left: 8px solid rgb(171, 150, 136);}

	/* make the nav bigger on touch screens */
	.touch .nav a {padding: 0.8em;}
}

.grid {
	position: relative;
	clear: both;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1240px;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 300px;
	max-width: 600px;
	max-height: 360px;
	width: 48%;
	height: auto;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.2em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	max-width: 460px;
	text-align: left;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h7 {
	word-spacing: -0.15em;
	font-weight: 300;
	float: left;
}

.grid figure h7 span {
	font-weight: 800;
}

.grid figure h7,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

figure.effect-julia {
	background: #ab9688;
}

figure.effect-julia img {
	max-width: none;
	height: 400px;
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	transition: opacity 1s, transform 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-julia figcaption {
	text-align: left;
}

figure.effect-julia h7 {
	position: relative;
	padding: 0.5em 0;
}

figure.effect-julia p {
	display: inline-block;
	margin: 0 0 0.25em;
	padding: 0.4em 1em;
	background: rgba(255,255,255,3);
	color: #2f3238;
	text-transform: none;
	font-weight: 500;
	font-size: 75%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-460px,0,0);
	transform: translate3d(-460px,0,0);
	text-align: left;
}

figure.effect-julia p:first-child {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-julia p:nth-of-type(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia p:nth-of-type(3) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

figure.effect-julia:hover p:nth-of-type(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:nth-of-type(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia:hover img {
	opacity: 0.4;
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}

figure.effect-julia:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


@media (min-width:32.5em) and (max-width: 49.938em) {
	.grid figure {
	height: 250px;
	width: 100%;
	}
	.grid figure figcaption {
	font-size: 1.05em;
	}
}

@media (max-width: 32.438em) {
	.grid figure {
	height: 190px;
	width: 100%;
	}
	.grid figure figcaption {
	font-size: 0.9em;
	}
}


/*
 * jQuery FlexSlider v2.6.4
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 and later license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 *
 */
/* ====================================================================================================================
 * FONT-FACE
 * ====================================================================================================================*/
@font-face {
  font-family: 'flexslider-icon';
  src: url('../fonts/flexslider-icon.eot');
  src: url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('../fonts/flexslider-icon.woff') format('woff'), url('../fonts/flexslider-icon.ttf') format('truetype'), url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* ====================================================================================================================
 * RESETS
 * ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover {
  outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flex-pauseplay span {
  text-transform: capitalize;
}
/* ====================================================================================================================
 * BASE STYLES
 * ====================================================================================================================*/
.flexslider {
  margin: 0;
  padding: 0;
}
.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}
.flexslider .slides img {
  width: 100%;
  display: block;
}
.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .flexslider .slides {
  display: block;
}
* html .flexslider .slides {
  height: 1%;
}
.no-js .flexslider .slides > li:first-child {
  display: block;
}
/* ====================================================================================================================
 * DEFAULT THEME
 * ====================================================================================================================*/
.flexslider {
  margin: 0 0 60px;
  background: #fff;
  border: 0px solid #fff;
  position: relative;
  zoom: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
}
.flexslider .slides {
  zoom: 1;
}
.flexslider .slides img {
  height: auto;
  -moz-user-select: none;
}
.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.loading .flex-viewport {
  max-height: 300px;
}
.carousel li {
  margin-right: 5px;
}
.flex-direction-nav {
  *height: 0;
}
.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
  font-family: "flexslider-icon";
  font-size: 40px;
  display: inline-block;
  content: '\f001';
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
  content: '\f002';
}
.flex-direction-nav .flex-prev {
  left: -50px;
}
.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: 10px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: 10px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
}
.flex-direction-nav .flex-disabled {
  opacity: 0!important;
  filter: alpha(opacity=0);
  cursor: default;
  z-index: -1;
}
.flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: 0.8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000;
}
.flex-pauseplay a:before {
  font-family: "flexslider-icon";
  font-size: 20px;
  display: inline-block;
  content: '\f004';
}
.flex-pauseplay a:hover {
  opacity: 1;
}
.flex-pauseplay a.flex-play:before {
  content: '\f003';
}
.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: -40px;
  text-align: center;
}
.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.flex-control-paging li a:hover {
  background: #333;
  background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  cursor: default;
}
.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden;
}
.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0;
}
.flex-control-thumbs img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .7;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.flex-control-thumbs img:hover {
  opacity: 1;
}
.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}
/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/
@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px;
  }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px;
  }
}
/* ====================================================================================================================
 * Ende Flexslider
 * ====================================================================================================================*/