/**
*.........................................................*
*..............handcoded CSS and website by...............*
*.........................................................*
*..####..##.....######.##..##.######.#####................*
*.##..##.##.......##...##..##.##.....##..##...............*
*.##..##.##.......##...##..##.####...#####................*
*.##..##.##.......##....####..##.....##..##...............*
*..####..######.######...##...######.##..##...............*
*.........................................................*
*.##..##.######.######.#####..#####..######..####..##..##.*
*.##..##.##.......##...##..##.##..##...##...##..##.##..##.*
*.######.####.....##...##..##.#####....##...##.....######.*
*.##..##.##.......##...##..##.##..##...##...##..##.##..##.*
*.##..##.######.######.#####..##..##.######..####..##..##.*
*.........................................................*
*.................www.jetztmalwerbung.de..................*
*.........................................................*
**/

/*--ALLGEMEIN--------------------------------------------*/

body {
width: 100%;
height: 100%;
font-family: 'Titillium Web', sans-serif;
margin: 0 0 0 0;
background-color: rgba(51, 51, 51, 1.0);
color: rgba(255,255,255,1.00);
overflow-x: hidden;
}

/*--LOGO-------------------------------------------------*/

.lgo {
height: 67px;
margin-top: 4px;
}

/*--BEREICHE---------------------------------------------*/

#atf {
float: left;
width: 100vw;
height: 100vh;
color: rgba(255,255,255,1.00)
}

#tit {
position: absolute;
top: 23vh;
left: 15%;
width: 70%;
color: rgba(255, 255, 255, 1.0);
text-align: right;
clear: both;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

#content, #contents {
position: absolute;
width: 100%;
min-height: 10vh;	
}

#content {
top: 100vh;	
}

#contents {
top: 60vh;	
}

#footer {
float: left;
width: 70%;
height: 70px;
padding: 0 15% 0 15%; 
background-color: rgba(51, 51, 51, 1.0);
}

/*--BOXEN------------------------------------------------*/

.mono, .trio {
float: left;
background-color: rgba(0, 0, 0, 0.55);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

.mono {
width: 50%;
padding: 0 25% 3% 25%;
}

.trio {
width: 20%;
padding-bottom: 3%;
}

.trio:first-child, .trio:nth-child(3n+4) {
padding: 0 5% 3% 15%;
}

.trio:nth-child(3n) {
padding: 0 15% 3% 5%;
} 

.clearer {
clear: both;
}

.news_text {
float: left;
width: 80%;
}

/*--TEXT-------------------------------------------------*/

h1 {
margin: 0 0 10px 0;
font-weight: 700;
font-size: 8vw;
line-height: 0.8em;
}

h1:after {
content: "";
display: block;
margin: 35px 0 0 60%;
width: 40%;
height: 4px;
background-color: #f39200;
}

h2 {
font-weight: 300;
font-size: 2.5vw;
margin: 0 0 10px 0;
}

h1, h2 {
text-transform: uppercase;
text-shadow: 1px 1px #545251;
}

h3 {
text-align: center;
font-weight: 300;
font-size: 2vw;
text-transform: uppercase;
color: #f39200;
margin: 50px 0 50px 0;
}

h4 {
text-align: left;
font-weight: 700;
font-size: 1.2vw;
line-height: 1.2vw;
text-transform: uppercase;
}

h4:before {
content: "";
display: block;
margin: 0 0 2px 0;
width: 100%;
height: 2px;
background-color: #f39200;
}

h5 {
text-align: left;
font-weight: 700;
font-size: 1.2vw;
line-height: 0.4vw;
margin: 0 0 0 0;
padding: 20px 0 0 0;
text-transform: uppercase;
color: #f39200;
}

h6 {
text-align: left;
font-weight: 700;
font-size: 1.0vw;
line-height: 0.4vw;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

p {
font-weight: 300;
font-size: 1.2em;
}

#tit p {
width: 30vw;
float: right;
padding: 10px;
text-shadow: 1px 1px #545251;
text-align: left!important;
border: 1px solid #ffffff;
background-color: rgba(0,0,0,0.45);
}

.trio h4 {
height: 3vw;
overflow: hidden;
}

.trio p {
height: 174px;
overflow: hidden;
}

.farbe {
color: #e33751!important;
}

.mnord:after {
content: "@sbh-nord.de";
}

.mwest:after {
content: "@sbh-west.de";
}

.msuo:after {
content: "@sbh-suedost.de";
}

.msued:after {
content: "@sbh-sued.de";
}

/*--BILD-------------------------------------------------*/

a img {
border: none;
}

.pin {
width: 30px;
float: left;
margin: 30px 15px 10px 0px;
}

.size {
width: 100%;
}

.bogen {
min-width: 1100px;
float: right;
}

.imgintxt {
float: left;
}

.high {
float: left;
width: 100%;
height: 40vh;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}

.news_img {
float: left;
width: 19%;
margin: 0 1% 5px 0;
}


/*--VIDEO------------------------------------------------*/

.filter {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -95;
transform: translateX(-50%) translateY(-50%);
background-color: rgba(0, 0, 0, 0.4);
background-size: cover;
transition: 1s opacity;
}

/*--LINKS------------------------------------------------*/

.trio a {
padding: 0 15px 0 15px;
margin: 0 0 0 0;
float: right;
color: rgba(255, 255, 255, 1);
font-weight: 700;
font-size: 1.2em;
text-align: center;
text-decoration: none;
border: 3px solid rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 0);
transition-duration: 0.3s;
transition-timing-function: ease-out;
}

.trio a:hover {
transition-duration: 0.3s;
transition-timing-function: ease-out;
color: rgba(255, 255, 255, 1);
background-color: rgba(243, 146, 0, 1.0);
border: 3px solid rgba(243, 146, 0, 1.0);
}

a.bnav {
float: right;
display: block;
padding: 18px 14px 18px 14px;
margin: 4px 10px 0 10px;
font-weight: 400;
font-size: 0.7em;
color: rgba(255, 255, 255, 1.0);
text-decoration: none;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}

a.bnav:hover {
transition-duration: 0.3s;
transition-timing-function: ease-out;
color: rgba(243, 146, 0, 1.0);
text-decoration: underline;
}

a.ext {
color: #e33751;
}

/*--BURGERMENUE------------------------------------------*/

.cms #nav-menue {
top: 50px;
}

#nav-menue {
position: fixed;
top: 0;
left: 0;
width: 70%;
height: 75px;
padding: 0 15% 0 15%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.45);
}

#steuerung a:first-child {
float: left;
display: block;
text-align: center;
height: 55px;
padding: 0px;
text-decoration: none;
color: #ffffff; 
font-weight: 400;
font-size: 1.3em;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}

#steuerung a {
float: right;
display: block;
text-align: center;
height: 35px;
padding: 20px;
text-decoration: none;
color: rgba(255, 255, 255, 1.0); 
font-weight: 400;
font-size: 1.3em;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}

#steuerung a:hover {
color: rgba(243, 146, 0, 1.0);
transition-duration: 0.3s;
transition-timing-function: ease-out;
}

.menue-button {
display: none;
}


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

	#nav-menue {
	width: 100%;
	padding: 0 0 0 0;
	background-color: rgba(0, 0, 0, 0.0);
	}

	.menue-button {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	font-weight: 700;
	font-size: 2.5em;
	padding: 10px 5% 0 0;
	color: rgba(243, 146, 0, 1.0);
	cursor: pointer;
	text-decoration: none;
	}

	#steuerung a {
	float: left;
	clear: both;
	width: 100%;
	display: none;
	padding: 10px 0;
	}

	#steuerung a:first-child {
	text-align: left;
	padding: 10px 0 0 5%;
	}

	#nav-menue:target #steuerung a {
	display: block;
	background-color: rgba(0, 0, 0, 0.8);
	}

	#nav-menue:target .menue-button-beschr-open {
	display: none; 
	}	
	
}


/**
***********************************************************
***********************************************************
*                      BREAKPOINTS                        *
***********************************************************
***********************************************************
**/


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

  .mono {
  width: 70%;
  padding: 0 15% 5% 15%;
  }
  
  .trio, .trio:nth-child(3n+4), .trio:nth-child(3n) {
  width: 30%;
  padding: 0 0 0 0;
  }
  
  .trio:first-child, .trio:nth-child(2n+3) {
  padding: 0 5% 7.5% 15%;
  }
  
  .trio:nth-child(2n) {
  padding: 0 15% 7.5% 5%;
  }
  
  .trio a {
  float: right;
  }
  
  h3 {
  font-size: 2.8vw;
  line-height: 3vw;
  }
  
  h4 {
  font-size: 1.8vw;
  line-height: 1.7vw;
  }
  
  .bogen {
  height: 850px;
  }
  
  #tit p {
  width: 43vw;
  }
  
  #footer {
  width: 70%;
  padding: 0 15% 0 15%; 
  }

}

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

  .bogen {
  height: 830px;
  float: left;
  margin-left: -400px;
  }
  
  h1 {
  font-size: 10vw;
  }
  
  #tit p {
  width: 50vw;
  }

}

@media screen and (max-width:801px) {
  
  .mono, .trio, .trio:first-child, .trio:nth-child(2n), .trio:nth-child(2n+3)  {
  width: 80%;
  padding: 0 10% 10% 10%;
  }
  
  .trio a {
  float: right;
  }
  
  h1 {
  font-size: 12vw;
  }
  
  h2 {
  font-size: 4vw;
  }
  
  h3 {
  font-size: 4.5vw;
  line-height: 3vw;
  }
  
  h4 {
  font-size: 2.3vw;
  line-height: 2.5vw;
  }
  
  .bogen {
  margin-left: -520px;
  }
  
  #tit {
  left: 12%;
  width: 79%;
  }
  
  #tit p {
  width: 53vw;
  }
  
  #footer {
  width: 80%;
  padding: 0 10% 0 10%; 
  }

}

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

  #tit p {
  width: 100%;
  }
  
  h4 {
  font-size: 1.4em;
  line-height: 1.1em;
  }
  
  .trio h4 {
  height: 75px;
  }

}

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

}