/*  
Theme Name: Schneider-Koslowski
Theme URI: 
Version: 1.0
Author: Veronika Sattler
Author URI: http://websache.de
*/

/* --------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------

	INHALT:
	
	1. BASICS
	2. SEITENSTRUKTUR 
	3. MEDIA QUERIES
	4. PLUGINS

/* 1. BASICS
-----------------------------------------------------------------------------------------------
===============================================================================================*/
/* news-cycle-regular - latin */
@font-face {
  font-family: 'News Cycle';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/news-cycle-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('News Cycle'), local('NewsCycle'),
       url('fonts/news-cycle-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/news-cycle-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/news-cycle-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/news-cycle-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/news-cycle-v14-latin-regular.svg#NewsCycle') format('svg'); /* Legacy iOS */
}

/* 1.1. HTML 5
-----------------------------------------------------------------------------------------------*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

/* 1.2. Reset
-----------------------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}

/* 1.3. Allgemeines
-----------------------------------------------------------------------------------------------*/
html, body {
	height: 100%;
	color: #545658;
	font-family: 'News Cycle', sans-serif; font-size:0.94em; 
	line-height: 1.5;
	-webkit-text-size-adjust: none;
	}
.mobil 	{
	display: none;
	}
.clear {
	clear: both;
	}

/* 1.3.1. Links
-----------------------------------------------------------------------------------------------*/
a {
	text-decoration:none; 
	-webkit-transition: color 300ms ease-in-out;
	-moz-transition: color 300ms ease-in-out;
	-o-transition: color 300ms ease-in-out;
	transition: color 300ms ease-in-out;
	color:#545658; 
	}
a:hover, a:focus {
	color:#e2001a;
	}	
a:visited {
	text-decoration:none;
	}
a:focus {
	text-decoration: underline;
}

/* 1.3.2. Listen
-----------------------------------------------------------------------------------------------*/
ul {
	list-style: none;
	}
ol {
	list-style: decimal outside;
	}
#main ul {
	padding-left: 20px;
	padding-bottom: 15px;
	}	
#main li:before	{
	position: relative;
	top:-2px;
	content:url('../images/bullet.png');
	display: inline-block;
	text-indent:-18px;
	}

/* 1.3.3. Typographie
-----------------------------------------------------------------------------------------------*/
h1 {
	font-weight: 500;
	color:#e00d1d;
	text-transform: uppercase;
	font-size: 200%;
	margin-bottom: 16px;
	}
h2 {
	font-weight: 500;
	font-size: 120%;
	font-weight: bold;
	margin-bottom: 8px;
	}
h3 	{
	font-weight: 500;
	font-size: 102%;
	font-weight: bold;
	margin-bottom: 8px;
	}
p {
	padding-bottom: 15px;
	}								

/*1.3.4. Media
-----------------------------------------------------------------------------------------------*/
img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	}
iframe {
	max-width: 100%;
	}	

/*1.3.5. Form
-----------------------------------------------------------------------------------------------*/
	
/* 2. Seitenstruktur
-----------------------------------------------------------------------------------------------
===============================================================================================*/
#wrapper {
	min-height: 100%;
	position: relative;
	} 
html #wrapper {
	min-height: 100%;
	} 

/*2.1. Header
-----------------------------------------------------------------------------------------------*/

/*2.1.1 Logo und Navigation
-----------------------------------------------------------------------------------------------*/
#pageheader {
	position: fixed;
	width: 300px;
	z-index: 1000;
	left: 0;
	height: 100%;
	text-transform: uppercase;
	padding-top: 50px;
	padding-left: 30px;
	padding-right: 30px;
	border-left: 5px solid #e00d1d;
	background: #f3f8fa;
	
	}
#pageheader li {
	padding-bottom: 5px;
	}
#main_nav {
	padding-top: 50px;
	}
#pageheader span {
	display: block;
	}			
#logo {
	margin-bottom: 20px;
	max-width: 260px;
	position: relative;
	}
.active:before {
	content:url('../images/arrow.png');
	padding-right: 7px;
	}	
.active a {
	color:#e00d1d;
	}	
.menu_open {
	display: none;
	position:absolute; 
	right:4%;
	width: 20px;
	height: 20px;
	z-index: 130;
	background: none;
	border: none;
	cursor: pointer;
	overflow: hidden;
	padding:0px;
	}
.menu_open:before {
	content:url('../images/menu.png');
	display: block;
	width: 20px;
	height: 20px;
	}	
		

/*2.1.2 Siegel
-----------------------------------------------------------------------------------------------*/
#pageheader .siegel {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: calc(100% - 60px);
	border-radius: 8px;
	padding: 1rem 0.5rem;
	text-align: center;
}
#pageheader .siegel p {
	text-transform: none;
}
.siegel {
	background: #e00d1d;
	color: #f3f8fa;
}

/*2.1.3 Kontaktdaten
-----------------------------------------------------------------------------------------------*/

.kontakt {
	position: absolute;
	bottom: 30px;
	text-transform: none;
	}

.sub {
	margin-top: 20px;
	}
#pageheader .sub li {
	padding-bottom: 0px; 
	display: inline-block;
	line-height: 1.1;
	}	
.tel:before {
	content:url('../images/phone.png');
	padding-right: 7px;
	}
.mail:before {
	content:url('../images/mail.png');
	padding-right: 7px;
	}
.adress {
	display: block;
	padding-left: 24px;
	background: url('../images/marker.png') no-repeat left 5px;
	}


	
/*2.2. Content
-----------------------------------------------------------------------------------------------*/
#main {
	overflow: hidden;
	position: relative;
	background:#fff;
	padding-left: 340px;
	width: 95%;
	max-width: 1250px;
	padding-top: 50px;
	font-size: 105%;
	box-sizoing: border-box;
	}
#main img, iframe {
	border-radius: 8px;
	}	
#main a {
	color:#e00d1d;
	}


/*2.2.1. Startseite / Teaserbilder
-----------------------------------------------------------------------------------------------*/
.start figure {
	width: 48%;
	float: left; 
	margin-right: 2%;
	margin-bottom: 2%;
	overflow: hidden;
	position: relative;
	}
.start #main a {
	color:#ffffff;
	}			
.start a figcaption {
	position: absolute;
	z-index:100;
	padding: 20px;
	font-size: 110%;
	bottom: 0;
	}
.start figcaption h2:before {
	content:url('../images/arrow_white.png');
	display: inline-block;
	margin-right: 10px;
	vertical-align: middle;
	}	
.start a figcaption p {
	height: 0;
	opacity: 0;
	transition:all linear 400ms;
	font-weight: bold;
	}
.start a:hover figcaption p {
	height: auto;
	opacity: 1;
	}		

/*2.2.2. Unterseite
-----------------------------------------------------------------------------------------------*/
.left {
	width: 48%;
	float: left; 
	margin-right: 2%;
	margin-bottom: 50px;
	}
.right {
	width: 48%;
	float: right; 
	margin-left: 2%;
	margin-bottom: 50px;
	}
.rightcontainer {
	position: relative; 
  	height: 0; 
  	overflow: hidden; 
  	width: 100%;
  	height: auto;
	float: right; 
	width: 48%;
	float: right; 
	margin-left: 2%;
	margin-bottom: 50px;
}
.leftcontainer {
	position: relative; 
  	height: 0; 
  	overflow: hidden; 
  	width: 100%;
  	height: auto;
	float: right; 
	width: 48%;
	float: left; 
	margin-left: 2%;
	margin-bottom: 50px;
}
.rightcontainer iframe, .leftcontainer iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}	
.accordian {
	padding-bottom: 50px;
	}	
.accordion_tab 	{
	background:#f3f8fa;
	padding: 10px 20px;
	border-radius:8px;
	color:#e1001a;
	font-size:102%;
	cursor: pointer;
	position: relative;
	}
.accordion_tab:after {
	content:'+';
	font-weight: bold;
	font-size: 220%;
	top:-7px;
	position:absolute;
	right: 20px;
	}
.accordion_tab.open:after {
	content:'-';
	top:-9px;
	}			
.collapsing-section {
	padding: 10px 20px;
	}

.profil  {
	display: flex;
}
.profil  .siegel {
	justify-content: center;
	align-items: center;
	margin-top: 50px;
	height: 300px;
	width: 300px;
	border-radius: 8px;
	display: flex;
	align-content: center;
	text-align: center;
	font-weight: bold;
	font-size: 110%;
}


 /* Tablett hoch ----------- */
@media only screen and (max-width: 1023px){
#wrapper {
	position: relative;
	min-height: 100%;
	}
.inner {
	width:92%;
	position: relative;
	margin: auto;
	}
#pageheader .inner {
	width:92%;
	position: static;
	margin: auto;
	}	
.mobil 	{
	display: block;
	}		
#pageheader {
	position: static;
	height: auto;
	width: 100%;
	border-top: 5px solid #e00d1d;
	border-left: none;
	padding:30px 0;
	}
#pageheader li {
	border-bottom: dotted #e00d1d thin;
	padding-bottom: 7px;
	margin-bottom: 7px;
	}		
#pageheader:after {
	display: block;
	content:'.';
	clear: both;
	width: 100%;
	height:0px;
	visibility:hidden;	
	}					
.menu_open {
	display: block;
	}
.kontakt {
	position: absolute;
	bottom: 0;
	left:0;
	padding: 20px 4%;
	width: 100%;
	background:#fff;
	z-index:120;
	}
.adress {
	float: left;
	margin-right: 40px;
	}			
#main_nav {
	top:-28px;
	left:-4%;
	min-height: 100%;
	width: 108%;
	position: absolute;
	background: rgba(255,255,255,0.97);
	z-index: 120;
	padding: 180px 4% 50px 4%;
	margin-top:-3000px;
	}
#main_nav ul {
	padding: 0 4%;
	}	
#main_nav.show {
	margin-top:0px;
	}	
#logo {
	float: left;
	z-index:140;
	position: relative;
	}	
#main {
	width: 92%;
	margin: auto;
	max-width: none;
	padding: 50px 0 100px 0;
	}
		
}
 /* kleine Tabletts ----------- */
@media only screen and (max-width: 767px){	
	.start a figcaption {
		font-size: 100%;
		}
	}	
@media only screen and (max-width: 600px){
	.start figure {
		width: 100%;
		float: none; 
		margin-right: 0;
		margin-bottom: 2%;
	}
	.left {
		width: 100%;
		float: none; 
		margin-right: 0%;
		margin-bottom: 30px;
	}
	.right {
		width: 100%;
		float: none; 
		margin-left: 0%;
		margin-bottom: 30px;
		}
	.rightcontainer {
		float: none; 
		width: 100%;
		margin-left: 0%;
		margin-bottom: 30px;
	}
	.leftcontainer {
		float: none; 
		width: 100%;
		margin-left: 0%;
		margin-bottom: 30px;
	}
}