/*

Theme Name: Tatort Web
Theme URI: http://www.tatort-tekst.de
Description: Theme Entwicklung von Tatort Web für den Internetauftritt von Tatort Tekst
Author: Thomas Röttgen
Author URI: http://tatort-web.com/
Version: 1.0
Tags: white, red, tan, light, one-column, two-columns, right-sidebar, fluid-layout, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: tatort-tekst

License: Thomas Röttgen - Tatort Web
License URI: http://tatort-web.com

*/

/*===============================================================
	G E N E R A L  S T Y L I N G
===============================================================*/
* { margin: 0; padding:0;}
html, body { height: 100%; }

body {
	font-family: 'lato', sans-serif;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #41454e;
	font-weight: 400;
	background: #fff;
	overflow-x: hidden!important;
	margin: 0;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-font-smoothing: subpixel-antialiased;
	height: 100%;
	width: 100%;
}

html { font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;  }

.content-column { padding-bottom:100px; }



/**** LINKS ****/
a {
	color: #C61819; 
	text-decoration: none;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	outline: none;
}
a:hover {color:#C61819; text-decoration:none; }


/*===============================================================
	T Y P O G R A P H I E
===============================================================*/
p {
	font-size:1.2em;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 10px 0;
    font-weight: 500;
    line-height: 1.4em;
	font-family: 'Raleway', sans-serif;
}


h1 { 
	font-size: 3.8em; 
	color:white;
	font-family: 'Raleway', sans-serif;
	letter-spacing:-1px;
}

h1 span {
	color:black;
}

h2 { 
	font-size: 2em; 
	font-weight:800; 
	margin:auto; 
	text-shadow:none;	
	vertical-align:top; 
	color:#fff;
	line-height:2.0em; 
	text-align:center; 
}

h3 { 
	font-size: 2.0em;  
	text-align:left; 
	color:#41454e; 
	font-weight:500;
}

h3.h3-center {
	text-align:center;
}

h4 { 
	font-size:4em; 
	color:#D3C19D;
	/*color:#76923D;	green 1*/
	/*color:#7EA931;	green 2*/
	/*color:#B1C408;	green 3*/
	/*color:#79A62F;	green 3*/
	/*color:#354835; */
	/*color:#C61819; */
	line-height:40px;  
	margin-bottom:10px; 
	text-align:center;
	text-shadow:none;
	text-decoration:none;
	margin-top:50px;
}

h5 { 
	font-size: 18px; 
	line-height:6px;
	text-align:left; 
	padding-bottom:15px;
}

h6 { font-size: 16px;
	font-size:1.7em;
	color:#41454e; 
}

.h11 {
	font-size:5em;
	text-align:center;
}

h1.lead { font-size: 32px; line-height:40px; }

h1.big{
	font-family: 'Lato',sans-serif;
	margin: 0px 0 90px ;
    font-size: 260px;
	letter-spacing: -2px;
	line-height: 60px;
	font-weight: 700;
	color: #2A80B9;
}

p.blocksatz  {
	text-align:justify; 					/* justify => Blocksatz */
	-moz-hyphens: auto;						/* hyphens => Silbentrennung */		
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 							
   
	hyphenate-limit-chars: auto 2;			/* Zahl von Silbentrennungen in Folge */
	hyphenate-limit-lines: 2;				/* Zahl der Buchstaben im Wort bei der getrennt werden darf */
	-ms-hyphenate-limit-chars: auto;
}


	
/*===============================================================
	H E A D E R
===============================================================*/
#headerbild {
	/* background: url("http://susanne-mais.de/wordpress/wp-content/uploads/2017/06/cropped-cropped-Q39A2161-2.jpg");
	background-size:100% auto;
	background-repeat:no-repeat; */
	font-family: 'Herr Von Muellerhoff', cursive;
	font-family: 'Poiret One', cursive;
	font-size:4em;
	color:white;
	width:100%;
	height:800px;
}

#headerbild-bild { 
	position:relative;
	width:100%;
	height:100%;
}

#headerbild-bild img {
	width:100% !important; 
	height:100% !important;
	object-fit: cover;
}

#headerbild p {
	position:absolute;
	left:2%;
	top:5%;
	line-height:1.1em;
	font-size:1.2em;
	padding:10px;
	background: rgba(230,169,95,0.7);
}

#headerbild a {
	color:#D3C19D;
	color:#333333;
}

#headerbild p span {
	font-size:.6em;
}


/*===============================================================
	N A V I
===============================================================*/
#navi {
	width:100%; 
	margin-top:0px;
	clear:both; 
	float:left;
	height:90px; 
	z-index:10;
	background:white;
	color:#41454e; 
	font-weight:500; 
	font-size:1.9em;
	-webkit-box-shadow: 0px 3px 3px #888;
	-moz-box-shadow: 0px 3px 3px #888;
	box-shadow: 0px 3px 3px #888;
}

#mobil-header { display:none; }

#mobil-header p {  padding-top:15px; color:white;}

#navi ul {
	line-height:90px;
	height:90px;
	max-width:800px; 
	margin:0; padding:0; 
	margin:auto; 
	padding-left:40px;
}

#navi ul li {
	list-style-type:none; 
	float:left;
	width:150px;
	text-align:center;
}

#navi ul li a {
	color:#41454e; 
}

#navi ul li:first-child {
	padding:0;
}

.position { 
	position:relative; 
}

.scrolled { 
	position:fixed;
	top:0; 
	left:0;
	display:block;
}

.box-left { 
	width:10%; 
	height:100%; 
	float:left; 
	position:relative; 
	background-color:#D3C19D;
}

.box-right {
	 width:10%; 
	 height:100%; 
	 float:right; 
	 position:relative; 
	 background-color:#D3C19D;
}

.box-middle {
	position:relative;
	height:100%; 
	display:inline;
	float:left;
	width:80%;
}

.mobil-logo {
	position:relative;
	top:50px;
	margin:auto !important; 
	text-align:center;
}

#responsive-menu-container #responsive-menu > li.responsive-menu-item:first-child > a {
	height:150px !important; 
	line-height:80px !important;
}

/*================================
	Submenue
================================*/	
.sub-menu {
	position:relative;
	top:-10px;
	display:none;
	width: 100%;
	height:50px;
	float:left;
	clear:both;
	left:-30px !important;
	padding:0; margin:0;
}

.sub-menu li {
	background-color:white;
	width: 110% !important;
	border-top:1px solid #D3C19D;
	text-align:left;
}


.sub-menu li a {
	font-size:18px;
	line-height:30px;
	text-align:left;
	float:left;
	clear:both;
	padding:5px;
}


.sub-menu li:hover {
	background-color:#D3C19D;
}

.sub-menu li:hover a {
	color:white !important;
}

#menu-item-45:hover .sub-menu {
	display:inline-block;
}


/*===============================================================
	C O N T E N T
===============================================================*/
#content {
	width:100%;
	position:relative;
	background-color:#D8D4C9;
	//background:url(../images/beton.jpg) 0 0 repeat; 
} /*end Content*/

#content a { 
	color: #41454e; }


	
/*================================
	START SEITE
================================*/	
#zitat {
	float:left; 
	width: 55%; 
	height: 250px; 
	position:relative; 
	top:60px; 
	padding-left:5%; 
}

#zitat p {
	padding-left: 40px;
}

#zitat p:last-child {
	font-size: 0.8em;
}

#bild-zitat {
	float:right; 
	width: 30%; 
	height: 250px; 
	position:relative; 
	padding-right:1%; 
	top:20px; 
}

/*================================
	GALLERIE
================================*/	
button {
	background:none;
	border:none;
	border:1px solid #eee;
	padding:7px;
	cursor:pointer;
	font-size:20px;
	color:#41454e; 
}

button:hover {
	color:#D3C19D;
}

button:last-child {
	//margin-left:20px;
}


.grid-item {
	width:21%;
	padding:20px;
	box-shadow:black;
}

.grid-item:hover {
	background-color:#D8D4C9;
}

.grid-top {
}

.grid-bottom {
}

.grid-item img {
  width: 100%;
  height: 180px;
  border:3px solid #D3C19D;
  object-fit: cover;
}

/*================================
	KONTAKT
================================*/	

input, label, textarea { width:100%; }

.h6-kontakt { float: right; width: 45%; font-size: 1.3em; }

.kontakt-formular { float: left; width: 48%; }

/*===================================================
	F O O T E R
====================================================*/
#footer {
	position:relative; 
	clear:both; 
	background:#D3C19D;
	height:150px;
	width:100%;
}

#footer h4 {
	font-size:3.2em;
	color:white;
	margin:0; padding:0;
	line-height:2em;
}

#footer h2 {
	color:white; 
	font-size:3.5em; 
	font-family:'orbitron-bold';
}

#footer h2 span {
	color:black;
}


#footer .text-container {
	padding:0; 
	background:#D3C19D;
	color:white;
}

#footer .text-container a  { color:white; }


.ms-sbar { display:none;}

.text-container {
	width:80%;
	//min-height:1500px;
	margin-left:10%;
	background-color:white;
	font-size:1.2em;
	padding-top:100px; 
}

li.current_page_item a {
	color:#D3C19D !important;
	//border-bottom:2px solid #D3C19D;
	
}


.text-container-inner { max-width:1000px; padding:20px; margin:auto; }

img.startseite-bild1 { width:auto; margin:auto; display:block; padding-top:50px;}
img.startseite-bild2 { width:auto; float:right;  display:none;}

.logo-menu { margin-top:-5px; }

.title {
	font-family: 'Raleway', sans-serif; font-weight:500 !important; 
	color:#41454e; }
	

div.pp_default .pp_description {
	font-size: 15px !important;
}	
	




.srcolled { position:fixed; }

#hero {
    position: relative;
    width: 100%;
    height: 100%;
}

#hero h2 {
	font-size:1.4em;
}

#spacer-i {
	 height:80px; 
	 background:none; 
	 padding:0; 
	 margin:0; 
	 border:none; 
	 box-shadow:none; 
	 display:block;	
}

.left, .middle {
	clear:both;
	float:left;
	text-align:left;
	vertical-align:top; 
}

.right {
	clear:right;
	float:right;
	text-align:right;
	vertical-align:baseline; 
}

.head-button {
	position:absolute; 
	bottom:3%;
}






		
						
/*-------------------- 
	J U M P S
--------------------*/					
#jumptop {
	position:relative;
	top:-80px;
}

						
#jump1, #jump2, 	
#jump3, #jump4, 
#jump5, #jump6	{
	position:relative;
	top:-78px;
}

#jump12, #jump14 {
	position:relative;
	top:-100px;
}	

#jump16 {
	position:relative;
	top:-80px;
}						

#jump-x1 {
	position:relative;
	top:-85px;
}

#jump-x2 {
	position:relative;
	top:-140px;
}					

/*===============================================================
					M E D I A   Q U E R I E S
===============================================================*/
@media all and (max-width:1100px) {
	h4 { font-size:2.5em; }
}

@media all and (max-width:1065px) {
	
	#navi {
		font-size:1.6em;
	}
	.text-container {
		width:100%; margin-left:0; margin-right:0; padding-left:0; padding-right:0;
	}
	
	#navi ul {
	max-width:680px; 
}

	
	#navi ul li {
		width:120px;
	}
	
	#headerbild p {
	line-height:.8em;
	font-size:1em;
	}

	#headerbild p span {
		font-size:.5em;
	}

}	
			
@media all and (max-width:860px) {
	
	#headerbild { display:none; }
	
	#nav-primary { 
		display:none; 
	}	
	.box-middle { 
		background-color:#D3C19D;
	}
	
	#headerbild p {
		line-height:.5em;
		font-size:.7em;
	}

	#headerbild p span {
		font-size:.4em;
	}
	
	#mobil-header {
		display:inline;
	}
	
	
	#footer p.alignRight {
		text-align:center;
		padding-top:30px;
		padding-bottom:20px;
	}
	
	

	.grid-item img {
	  width: 100%;
	  height: 90px;
	}
	
	
	.h6-kontakt { clear:both; width: 100%; padding-bottom:50px;}

	.kontakt-formular { clear:both; width: 100%; }
	
}
			

@media all and (max-width:460px) {
	
	.startseite-bild1 {
		width:80% !important; height:auto !important;
	}
	
	.box-left, .box-right { display:none; }
	
	.box-middle { width: 100%; padding-left: 10px; }
	
	
	#footer h2 { font-size:3em; }

	#zitat {
		clear:both; 
		width: 100%; 
		padding:0; margin:0;
		height:auto;
		padding-bottom:80px;
	}

	#bild-zitat {
		float:left;
		clear:both; 
		width: 100%; 
		margin:0;
		padding:0;
		height:auto;
	}
	
	#bild-zitat img {
		width:150px;
		margin:auto;
		position:relative;
		display:block;
	}
	
}