/*
Theme Name: csp-ow.ch 
Author: Hinz und Kunz Webagentur
Version: 2015 1.0
*/


/* Als Erstes eingie CSS Resets */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font: inherit;
    	vertical-align: top;
    	outline: 0;

    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }

    body {
    	line-height: normal;
        
        font-family: 'Oswald', sans-serif;
        
        font-weight: 300;
        font-style: normal;
        font-size: 1.1em;
        line-height: 1.5em;
        
        color: #3f3f3f;
       } 

	input, textarea {
		font-family: 'Oswald', sans-serif;
		font-weight: 300;
	}
	
	html {
	}
	
    body a, body {
        color: #000;
    }
    ol, ul {
    	list-style: none;
    }
    blockquofte, q {
    	quotes: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    .clear {float: none; clear: both;}
	
	.mobilenav {
		display: none;	
	}
	
	.alignleft {
		float: left;
		margin-right: 10px;
	}
	.alignright {
		float: right;
		margin-left: 10px;
	}
	
	
	.styled {
		color: #262626;
	}
	
	.styled strong {
		font-weight: bold; }
	
	.styled a {
		color: #e87b04;
		text-decoration: underline;
	}
		.styled a:hover {
			color: #000;
		}
	
	.styled p {
		margin-bottom: 20px;
	}
	
	.styled ul {
		list-style: disc;
		padding-left: 30px;
		margin-bottom: 15px;
	}
	
	.styled td {
		padding: 0 20px 20px 0;
	}
	
	
	

/* Animate CSS */ 

.animated {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
          animation-name: pulse;
}


/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: right;}
.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: #b7d5cf; cursor: pointer; text-indent: 99999em; overflow: hidden; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -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); }
.flex-control-paging li a:hover { background: #077964; }
.flex-control-paging li a.flex-active { background: #077964; cursor: default; }


/* Background Image */
/* Background Scaling */

img.bg {
        min-height: 100%;
        min-width: 960px;

        width: 100%;
        height: auto;

        position: absolute;
        top: 0;
        left: 0;
        
        z-index: -10;
}

@media screen and (max-width: 960px) {
        img.bg {
                left: 50%;
                margin-left: -480px;
        }
        
        
        
}
	
	.home {
		overflow: hidden;
	}
	
	.home header nav,
	.home .maincontainer {
		opacity: 0;
		transition: .2s all;
	}
	
	
	
	.bgoverlay {
		position: absolute;
		z-index: 10;
		
		top: 440px;
		
		color: #f07d00;
		font-size: 2em;
		
		width: 100%;
		text-align: center;
		
		cursor: pointer;
		
		text-shadow: 1px 1px 5px rgba(255,255,255,.8);
	}
		.bgoverlay .bubble {
			color: #f07d00;
			display: block;
			width: 100px;
			
			margin: 0px auto;
			
			margin-bottom: 20px;
			
			transition: .4s all;
		}
		
		.bgoverlay:hover .bubble {
			width: 110px;
			margin-bottom: 15px;
			margin-top: -5px;
		}
		
		.noTeaser .bgoverlay,
		.noTeaser img.bg {
			opacity: 0;
			display: none;
		}
		
		.home.noTeaser {
			overflow: auto;
		}
		
		.noTeaser header nav,
		.noTeaser .maincontainer {
			opacity: 1
		}
	

/* allgemeine Row Styles  */

	
	.row {
		width: 100%;
		
		overflow: hidden;
	}
	
		.row .middler {
			margin: 0px auto;
			position: relative;
			width: 970px;
		}

/* Header */

header {
	border-bottom: 3px solid #d12d1e;
	padding: 0px 0 10px 0;
	
	z-index: 10;
}
	
	header.row,
	header.row .middler {
		overflow: visible;
	}
	
	header .menu-icon {
		clear: both;
	}

	header.row .middler {
		overflow: visible;
	}
	
	header .facebookbutton {
		position: absolute;
		right: 0px;
		bottom: 20px;
		
		transition: .3s all;
	}
		header .facebookbutton img {
			width: 40px;
		}
		header .facebookbutton:hover {
			opacity: .8;
		}
	
	header .homelink {
		float: left;
		margin-top: 20px;
	}
	
	header .homelink img {
		width: 160px;
		float: left;
		transition: .4s all;
	}
		header .homelink:hover img {
			opacity: .8;
		}
	
	header nav.mainnav {
		float: left;
		margin: 50px 0 20px 50px;
	}
		.mainnav ul li {
			display: inline-block;
			margin-right: 25px;
		}
		
		.mainnav ul li a {
			text-decoration: none;
			font-size: 1.4em;
			font-weight: 300;
			
			transition: .2s all;
		}
			.mainnav ul li a:hover,
			.mainnav ul li.current_page_item a,
			.mainnav ul li.current_page_ancestor a {			
				color: #f1840d;
			}
		
		/* Subnav */
			.mainnav ul ul {
				position: absolute;
				padding: 10px 0 10px 0;
				background: #fff;
				background: rgba(255,255,255,.9);
				z-index: 10;
				
				border-radius: 0 4px 0 4px;
				
				display: none;
				
			}
			
				.mainnav ul li:hover ul {
					display: block;
				}
				
				.mainnav ul ul li {
					display: block;
					width: 100%;
				}
				.mainnav ul ul li a,
				.mainnav ul li.current_page_item ul li a,
				.mainnav ul li.current_page_ancestor ul li a   {
					padding: 5px 10px 3px 10px; 
					display: block;
					width: auto;
					
					color: #000;
					
					transition: .2s all;
					
					font-size: 1.0em;
				}
					.mainnav ul ul li a:hover {
						background: #fff;
					}


/* maincontent */
.maincontainer {
	z-index: 5;
}


	.einstiegsbild {
		width: 100%;
		height:auto;
		position: relative;
	}
	
		.einstiegsbild .bildeinleitungBild {
			width: 100%;
			height: auto;
		}
	
		.einstiegsbild .bildtext {
			position: absolute;
			top: 72%;
			left: 55%;
			width: 45%;
		}
			
			.bildtext .bubble {
				width: 60px;
				height: auto;
				float: left;
				margin-right: 10px;
			}
			
			.bildtext .text {
				color: #ee810a;
				font-size: 1.4em;
				line-height: normal;
				
				float: left;
				
			}
				.text .untertitel {
					font-size: 0.9em;
				}

.maintext {
	margin-top: 20px;
	margin-bottom: 80px;
	
	overflow: hidden;
}
	.maintext h1 {
		font-size: 1.5em;
		line-height: normal;
		color: #e82304;
		margin-bottom: 20px;
	}
	
	.maintext h2 {
		font-weight: bold !important;
	}
		h2 a {
			text-decoration: none;
		}
	
	
	.maintext .spalte {
		width: 48%;
		float: left;
		
		margin-right: 2%;
	}
		.maintext .spalte2 {
			margin: 0 0 0 2%;
		}
		
				.spalte.wide {
			width: 100%;
			margin-right: 0px;
		}


		
		/* Newsrows */
		
		.newsArtikel {
			margin-bottom: 20px;
			padding-bottom: 20px;
			border-bottom: 1px solid #cecece;
		}
		
		.newsHeader {
			margin-bottom: 20px;
		}
		
		.newsHeader h1 {
			
		}
		.newsHeader .date {
			font-size: 0.8em;
			color: #999;
		}

/* Footer */

footer.row {
	position: fixed;
	bottom: 0px;
	left: 0px;
	z-index: 999;
	
	color: #fff;
	font-size: 0.9em;
	
	background: #d12d1e;
	background: rgba(213,45,27, .6);
}

	footer .fwrapper {
		margin-top: 15px;
		background: #d12d1e;
		
		padding: 5px 0 5px 0;
	}
	
	footer address li {
		display: inline-block;
		margin-right: 15px;	
	}
		footer adddress li.first {
			font-weight: bold;
		}
		
		footer a {
			color: #fff;
			text-decoration: none;
		}




/* Formular */

.ninja-forms-required-items {
	display: none;
}

.ninja-forms-form-wrap label {
    font-weight: 200 !important;
    font-size: 1.0em;
}

form input,
form textarea {
	padding: 8px;
	font-size: 1.0em;
}


form textarea {
	height: 120px !important;	
}

.label-above label {
	font-weight: bold !important;
}

.btn {
	padding: 10px;
	background: #b52937;
	color: #fff;
	display: block;
	
	border: 0px;
	border-radius: 4px;
	cursor: pointer;
	
	transition: .2s all;
}
.btn:hover {
	opacity: .8;
}

/* Responsive */

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



	.row .middler {
		width: auto;
		padding: 0 20px 0 20px;
	}
	
		.row.bildrow .middler {
			padding: 0px;
		}
	
	
	
	header {
		min-height: 50px;
	}
	
	header .homelink {
		float: none;
		clear: both;
		
		display: inline-block;
		overflow: hidden;
	}
		header .homelink img {
			width: 120px;
		}
	
	
	
		.einstiegsbild .bildtext {
			position: absolute;
			bottom: 5%;
			top: auto;
			left: 0%;
			width: 100%;
			
			text-align: center;
			
			background: rgba(255,255,255,.9);
		}
			
			.bildtext .bubble {
				width: 60px;
				
				display: block;
				float: none;
				
				margin: 0px auto;
				
				margin-top: -30px;
				
			}
			
			.bildtext .text {
				color: #ee810a;
				font-size: 1.4em;
				line-height: normal;
				
				float: none;
				width: 100%;
				
			}
				.text .untertitel {
					font-size: 0.9em;
				}

	
		.maintext h1 {
			margin-bottom: 5px;
		}
	
		
		header .facebookbutton {
			
			right: 20px;
			bottom: auto;
			top: 10px;
			
		}
		
	 
	       /* Mobile Navigation */
        
        	html.mobNavOpend,
        	html.mobNavOpend body {
	        	overflow: hidden !important;
        	}
        
        nav.mainnav {
	        position: fixed;
            bottom: auto;
            
            top: -130%;
            left: 0px;
            z-index: 90;
            
            margin: 0px !important;
            
            width: 100%;
            height: 100%;
            
                                   
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
            
            
            padding: 40px 0 40px 0;
            
            background: rgba(255,255,255,.9);
            
            opacity: 0px;
            
            transition: .4s all;
        }
        
        	nav.mainnav.visible {
	        	top: 0px;
	        	opacity: 1;
        	}


        	nav ul {
	        	padding: 0px;
	        	
	        	margin-bottom: 50px;
	        	overflow: hidden;
	        	display: block;
	
        	}
        
            nav.mainnav li {
                display: block;
                margin: 0px;
            }
            nav.mainnav li a {
                text-decoration: none;
                font-size: 15px;
                line-height: normal;
                color: #000000;
                
                padding: 10px 20px 10px 20px;
                
                display: block;
                
                font-size: 1.0em !important;
            }
                nav.mainnav a:hover,
                nav.mainnav li.active {
                    background: #efefef;
                }
            
            nav.mainnav li.active {
                margin-right: 16px;
                margin-left: -4px;
            }
            
                	/* Subnavigation */
					nav.mainnav ul ul,
					nav.mainnav ul li:hover ul {
						display: block;
						position: relative;
						margin-left: 20px;
						
						display: none;
					}
						nav.mainnav ul li.ausgeklappt ul {
							display: block;
						}
					
						nav.mainnav ul ul li a {
							padding-left: 50px;
						}

	 
	 
						
                /* Menu Icon */
				.menu-icon {
				  display: block;
				  width: 40px;
				  -webkit-transform: translate3d(0, 0, 0);
				  -moz-transform: translate3d(0, 0, 0);
				  -ms-transform: translate3d(0, 0, 0);
				  -o-transform: translate3d(0, 0, 0);
				  transform: translate3d(0, 0, 0);
				  
				  position: absolute;
				  right: 20px;
				  top: 35px;
				  z-index: 100;
				  
				  cursor: pointer;
				}
				
				.menu-icon:before, .menu-icon:after,
				.menu-icon .menu-icon__text {
				  background: #113971;
				  content: '';
				  display: block;
				  height: 4px;
				  margin: 6px 0;
				  -webkit-transition: all 0.2s ease-out;
				  -moz-transition: all 0.2s ease-out;
				  -ms-transition: all 0.2s ease-out;
				  -o-transition: all 0.2s ease-out;
				  transition: all 0.2s ease-out;
				  width: 100%;
				}
				.menu-icon .menu-icon__text {
				  text-indent: -9999px;
				}
				.menu-icon.active:before {
				  -webkit-transform: rotate(45deg) translate3d(5px, 10px, 0);
				  -moz-transform: rotate(45deg) translate3d(5px, 10px, 0);
				  -ms-transform: rotate(45deg) translate3d(5px, 10px, 0);
				  -o-transform: rotate(45deg) translate3d(5px, 10px, 0);
				  transform: rotate(45deg) translate3d(5px, 10px, 0);
				}
				.menu-icon.active .menu-icon__text {
				  opacity: 0;
				}
				.menu-icon.active:after {
				  -webkit-transform: rotate(-45deg) translate3d(5px, -10px, 0);
				  -moz-transform: rotate(-45deg) translate3d(5px, -10px, 0);
				  -ms-transform: rotate(-45deg) translate3d(5px, -10px, 0);
				  -o-transform: rotate(-45deg) translate3d(5px, -10px, 0);
				  transform: rotate(-45deg) translate3d(5px, -10px, 0);
				}


}

@media only screen 
and (max-width : 750px) {
	
	.bgoverlay,
	img.bg {
			opacity: 0;
			display: none;
		}
		
		.home {
			overflow: auto;
		}
		.home header nav,
	.home .maincontainer {
		opacity: 1;
		transition: .2s all;
	}
	
	
	
	footer.row {
		position: relative;
		z-index: -10;
	}
	
	footer address li {
		display: block;
	}
	
	
		.einstiegsbild .bildtext {
			position: relative;
			
			top: 0px;
			bottom: auto;
			
			margin-top: 0px;
			margin-bottom: 50px;
			
			background: none;
		}
	
	.maintext {
		margin-bottom: 20px;
	}
	
	
	.maintext .spalte {
		width: 100%;
		float: none;
		
		margin: 0 0 20px 0;
	}
	

}


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

	.bgoverlay {
		top: 380px;
	}
}

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

	.bgoverlay {
		top: 310px;
	}
}


@media only screen 
and (max-height : 900px) {

	.bgoverlay {
		top: 360px;
	}
}

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

	.bgoverlay {
		top: 250px;
	}
}