/****************************************************************

tizian bauer at ansichtsache dot com for agenturimturm dot com
project verdaemmtgut.de

****************************************************************/

/* ### HTML ### */
img, div.camera_target {max-width: 100%; border: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;}

/* ### BODY ### */
body {
    background-image: url(""), url("");
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
}

.container.bg {
background-color:#fff;
}


#header div {
display:block;
}

#header a.home {
display:block;
width:100%;
height:100px;
}

.six.columns .camera_wrap, .six.columns .image {margin-bottom: 25px; margin-top:50px;}
/*
.container.bg {
  display: flex;
  flex-direction: column;
  height: 100%;

#header,
footer {
  flex: none;
}

#article {
  flex: 1 0 auto;
  padding: 1.5em;
  width: 100%;
}
*/

				video {
  width: 100%    !important;
  height: auto   !important;
}


/* ___________________________________________________________________________ Startseite */

div {border:solid pink 0px;}

#article {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
   align-items:stretch;
}

#article .four.columns {
        display: flex;
        flex-flow: column wrap;
justify-content: space-between;
        align-items:stretch;
}
div#seitenspalte.four.columns {
    justify-content:start;
    margin-top:5px;
}

body.start div#seitenspalte.four.column {
    align-items: flex-start;
}

address {
font-size: 1.3rem;
margin-top: 15px;
}
body.start #logo {
background-image: url("./design/bauhof-logo.png");
background-repeat: no-repeat;
background-attachment: scroll;
height: 120px;
background-size: 100%;
background-position:left center
}

body.bauhof #logo {
background-image: url("./design/schiffszimmerei.svg");
background-repeat: no-repeat;
background-attachment: scroll;
height: 110px;
background-size: contain;
background-position:left center
}
body.verdaemmt #logo {
background-image: url("./design/verdaemmt-gut.svg");
background-repeat: no-repeat;
background-attachment: scroll;
height: 110px;
background-size: contain;
background-position:left center
}
body #header .four.columns {
background-image: url("./design/bauhof.svg");
background-repeat: no-repeat;
background-attachment: scroll;
height: 105px;
background-size: contain;
background-position:-10px center
}

body.start #header .four.columns {
background-image: url();
}


body#page67.bauhof #header  div.oi, body#page5.bauhof #header div.oi, body#page19.bauhof #header div.oi {
background-image: url("./design/bauhof-header-start.png");
background-repeat: no-repeat;
background-attachment: scroll;
1background-position: 155px bottom;
background-position:left center
}
body#page67.bauhof #header , body#page5.bauhof #header , body#page19.bauhof #header  {
background-image: url("");
}

body#page77 h1:first-of-type {font-size: 2.5rem;}
body#page77 h1 {font-size: 1.5rem;}

body.start #content {
width:100%;
}
body.start #article h1 {
margin:0.5em 0;
}


body.start #article h1.red a {
color:#C80A0C;
}
body.start #article h1.red a:hover {
color:#fff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
	background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
	background-color:#ce0100;-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
padding:5px;
}
.red {
color:#C80A0C;
}

.green {
color:#568E3A;
}

body.start #article  h1.green a{
color:#568E3A;
}
body.start #article  h1.green a:hover{
color:#fff;
-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #74b807;
	padding:5px;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403) );
	background:-moz-linear-gradient( center top, #77a809 5%, #89c403 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403');
	background-color:#77a809;
	}


	@media (max-width: 750px) {
address.four.columns {
    width: 100% !important;
}
body #header .four.columns {
    background-position: right center;
}
body.start #article h1 {
margin:0.25em 0;
}
}

.btn {margin:25px 0 50px;}

.btn a {font-weight:700; padding:15px; -webkit-border-radius:6px;
	border-radius:6px;}

.btn.green a {
color:#fff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #568E3A) );
	background:-moz-linear-gradient( center top, #77a809 5%, #568E3A 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#568E3A');
	background-color:#568E3A;}

.btn.red a {color:#fff; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #C80A0C) );
	background:-moz-linear-gradient( center top, #fe1a00 5%, #C80A0C 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#C80A0C');
	background-color:#C80A0C;}

.btn.ghost.green a {color:#999;
	border:1px solid #568E3A;
	background:#ffffff;
	width:auto;}

.btn.ghost.red a {
color:#666;
	border:1px solid #C80A0C;
	background:#ffffff;
	width:auto;}

p.btn.ghost {
    margin: 3rem 0 4rem 0;
}


body.start #article  img {
margin-bottom:0.75em;
}
body.start #article  div.image_fade {
margin-bottom:0.75em;
}




body.start img {
margin-bottom:25px;
}

body.start #seitenspalte img {margin-top:10px;}
body.start #seitenspalte a {margin-top:0;}

.image img {width:100%;}

/* ___________________________________________________________________________ Contentcontainer */


#menu {
font-size: 100%;
padding-bottom:3em;
margin-bottom: 50px
}

footer {
font-size:0.75em;
margin:1em auto;
margin-top:1em;
text-align:left;
width:100%;
position:relative;
color:#999;
}

/* ___________________________________________________________________________ Navigation */

#menu ul {
padding:0;
}
#menu li {
float:none;
list-style: none;
margin: 0.5em 5px 0.5em 0;
display: block;
background-color:transparent;
}
#menu a {
padding:0.25em 0.5em 0 0;
color: #000;
display: block;
width:auto;  /* Breite den in li enthaltenen Elementen zuweisen */
text-decoration:none;
}
#menu li a:hover {
color:#C80A0C;
}
#menu li.active a {
color:#C80A0C;
}
#menu li.active a:hover {
color:#C80A0C;
}
#menu li ul {
margin:0;
padding: 0;
position:relative;
display:block;  /* Unternavigation einblenden */
z-index:900;
}

*:first-child+html #menu li ul {  /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom:0.4em;
}

#menu li ul li {
float:none;
margin:0 0 0 0.75em;
padding:0px 5px;
background: #fff;
border-bottom:0px solid #008b3a;
height:auto;
width:auto;
display:block;
}

li.active a {
font-weight:700;
}
body.verdaemmt #menu  li a, body.bauhof #menu .submenu li a {
color:#000;
}
body.verdaemmt #menu .submenu  li a, body.bauhof #menu li a {
color:#999;
}

body.bauhof #menu li a:hover, body.verdaemmt #menu li a:hover {
color:#C80A0C;
}
body.bauhof #menu li.active a, body.verdaemmt #menu li.active a {
color:#C80A0C;
}
body.bauhof #menu li.active a:hover, body.verdaemmt #menu li.active a:hover {
color:#C80A0C;
}



#menu .submenu ul  {
margin-top:2em;
border-top:1px solid #000;
}

body.verdaemmt #menu a.rex-current {
color:#C80A0C;
}


#nav_special ul.rex-navi1 {
margin:0;
padding:0;
list-style-type:none;
clear:both;
font-size:0.85em;
}

#nav_special ul.rex-navi1 li {
float:left;
margin:0 0.5em 0 0;
}

#nav_special a {
color:#999999;
text-decoration:none;
}

#nav_special a:hover {
color:#C80A0C;
text-decoration:none;
}

#toggle {
    margin:0 0 10px;
}
/* ___________________________________________________________________________ Typography */

p {
line-height:1.628em;
padding-bottom:1em;
}
span {
font-weight:normal;
}
em {
text-decoration:underline;
font-style:normal;
}

a {
color:#C80A0C;
text-decoration:none;
cursor:pointer;
outline:none; /* avoid firefox bug dotted lines */
border:none;

}
a:visited {
color:#666666;
text-decoration :none;
}
a:hover {
color:#000;
}
#article p, #linke_spalte p {
font-size:0.8125em; /* 16x0.875=14px */
line-height:1.628em;
padding:0;
letter-spacing:0.015em;
}
#seitenspalte p {
font-size:0.8125em; /* 16x0.75=12px */
line-height:1.628em;
padding-bottom:1em;
margin:0 0px;
}
li {
  font-size: 0.8125em;
line-height:1.228em;
}

#seitenspalte strong {
color:#56A328;
}
#seitenspalte img, #seitenspalte a {
margin-top:6px;
horizontal-align:center;
}
#seitenspalte  {
text-align:center;
}
#seitenspalte h1  {
text-align:left;
margin-top:-2em;
margin-bottom:1em;
  color: #ccc;
  font-weight:normal;
}
.start #seitenspalte  {
text-align:left;
}
.start #seitenspalte p  {
padding-bottom:0em;
}
#article #seitenspalte ul li {
    text-align: left;
    list-style-type: none;
}

body.bauhof h1, body.bauhof h2, body.bauhof h1 a {
color:#568E3A;
}
body.verdaemmt h1, body.verdaemmt h2, body.verdaemmt h1 a{
color:#C80A0C;
}

body.bauhof h1 a:hover, body.verdaemmt h1 a:hover {
color:#333;}

h1 {
color:#C80A0C;
font-weight:700;}
h2 {
color:#C80A0C;
margin:0.5em 0;
padding:0;
}
h3 {
color:#888;
font-size: 100%;
font-weight:700; }
h3 a {
color:#888;
font-weight:normal; }
.toggler {
color:#333;
}

h3.toggler {
font-size: 0.8125em;
padding:0 0 0 0.35em;
margin:0.5em 0 0.5em -0.35em;
}
.toggler {

}
#article ul li {
list-style-type:disc;
}

img.left {
float:left;
margin:1em 1em 0 0;
}
img.right {
float:right;
margin:1em 0 0 1em;
}
.clear {
clear:both;
}
li.trenner {
display:block;
padding-top:.5em;
}
.druck {
float:right;
margin-top:90px;
margin-right:0.5em;
font-size:0.75em; /* 16x0.75=12px */
clear:right;
}

/****************************************** formular ******************/

.formgen {
padding:2em 0;
font-size:0.875em; /* 16x0.875=14px */
line-height:1.428em; /* 14x1.428=20px */
}
label,select,input[type=checkbox],input[type=radio],input[type=button],input[type=submit] {
cursor : pointer;
}
.formgen form {
line-height : 120%;
}
/* Wie sehen die einzelnen Blöcke aus? Jedes Feld wird von einem DIV umschlossen, das hier definiert werden kann */
.formgen .formblock {
	margin-bottom: 15px;
	margin-top: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right:0;
	padding-left:0;

}
 .forminfo {
	width: 360px;
	margin-bottom: 15px;
	background-color: #FFCC33;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 2px;
	padding-left: 5px;
	font-weight: bold;
	border: 5px dashed #990000;
}
/* Verhalten von br-Tags */
.formgen br {
clear : both;
}
/* Mehrzeiliges Eingabefeld */
.formgen .formtextfield
{
	width:64%;
	height: 150px;
	margin:0;
	border: 1px solid #666;
	background-color: #fff;
		float:right;

}


/* Textfeld */
.formgen .formtext
{
	width:64%;
	margin:3px 0 0 0;
	padding-bottom: 4px;
	font-size: 1em;
	background-color: #fff;
	border: 1px solid #666;
	float:right;
}

.formgen input:focus, .formgen input:hover,
.formgen select:focus, .formgen select:hover,
.formgen textarea:focus, .formgen textarea:hover {
	border-bottom-color: #000000;
	background-color: #efefef;
	color:#000;
}
/* Label */
.formgen label {
	width:34%;
	clear: left;
	float: left;
	height: 20px;
	padding:5px 0 0 0;
}
/* Aussehen der Select-Ausgabe */
.formgen .formselect
{
	width: 200px;
	background-color: #33FF33;
	margin-left: 4px;
	color: #000000;
}
/* Sende-Button */
.formgen .formsubmit {
	width: 100%;
	text-align: center;
	background-color: #666;
	border: 1px solid #666;
	float: right;
	color: #fff;
}
/* Fieldsetbeschriftung */
.formgen legend {
	color: #FFFFFF;
	background-color: #990000;
	width: 150px;
}
.formgen .fieldset {
	margin-bottom: 10px;
}
/* -------------- AUSGABEN / Fehlermeldungen --------*/
.formgen .formerror {
	border-bottom-width: 1px;
	color: #990000;
}
.formgen .formcaptcha {
	border: 2px solid #990000;
	vertical-align: top;
	float: left;
	margin-right: 10px;
}
.formgen .formreq {
	color: #C80A0C;
}
.formgen .formheadline {
	color: #993300;
	background-color: #FFF7EA;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-top: 5px;
	margin-bottom: 5px;
	font-style: italic;
}
/*///////////////////////////////////// Ende der Formulardefinition /////////////////*/

.accordion button {width: 100%;
height: auto;
white-space: normal;
line-height: 1.8rem;
text-transform: none;
padding: 10px 0;
margin-top:15px;
text-align: left;
font-size: 16px;
font-weight: 400;
color: #555;
background: #fff;}

.accordion__panel {border:solid 1px #555; padding:10px;}

.js-accordion__header[aria-expanded='true'] {
color:#fff;
    background: #555;
    padding:10px;
}

/*///////////////////////////////////// neue styles  ///////////////// */

ul.untermenu {
margin:3em 0 0 0;
border-top:1px solid #999;
}

.gallerie_container {
margin:2em 0 0;}

.gallerie_container img {
margin:0 2% 1% 0;
width: 30%;
}
@media (max-width: 440px) {
.gallerie_container img {
    width: 100%;
}
}
@media (min-width: 440px) and (max-width: 750px) {
.gallerie_container img {
    width: 48%;
}
}
@media (max-width: 750px) {
body.verdaemmt #logo {
    background-size: 140%;
}
#camera_wrap_2 {
display: none !important;
}
}
@media (min-width: 750px) {
#camera_wrap_1 {
display: none !important;
}
}

.back-to-top {
 background:#999;
 position: fixed;
 bottom:20px;
 right:20px;
 padding:1em;
 border-radius: 4px;

}


.slider-wrapper {
	margin-bottom: 50px;
}