*,:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }
html,body,#wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}

html{
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}

body {
background-image: url(https://stadt.firmen.app/pix/band.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #fcfcfa;
}

.green {color: #62b1ba;}

a:link {color: #62b1ba;}
a:visited {color: #62b1bb;}
a:active {color: #111;}


/*  Start Navi */
.navibutton {position:relative;margin:80px auto;width:50px;}

.hamburger .line, .closebutton .line {
width: 50px;
height: 6px;
background-color: #ccc;
display: block;
margin: 8px auto;
border-radius:4px;
-webkit-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.closebutton .line {
width: 50px;
height: 6px;
background-color: #ccc;
display: block;
margin: 8px auto;
border-radius:4px;
}

.hamburger:hover, .closebutton:hover {
cursor: pointer;
}

#hamburger.is-active .line:nth-child(2){
opacity: 0;
}

#hamburger.is-active .line:nth-child(1){
-webkit-transform: translateY(13px) rotate(45deg);
-ms-transform: translateY(13px) rotate(45deg);
-o-transform: translateY(13px) rotate(45deg);
transform: translateY(13px) rotate(45deg);
}

#hamburger.is-active .line:nth-child(3){
-webkit-transform: translateY(-14px) rotate(-45deg);
-ms-transform: translateY(-14px) rotate(-45deg);
-o-transform: translateY(-14px) rotate(-45deg);
transform: translateY(-14px) rotate(-45deg);
}

#closebutton .line:nth-child(1){
-webkit-transform: translateY(13px) rotate(45deg);
-ms-transform: translateY(13px) rotate(45deg);
-o-transform: translateY(13px) rotate(45deg);
transform: translateY(13px) rotate(45deg);
}

#closebutton .line:nth-child(2){
-webkit-transform: translateY(-1px) rotate(-45deg);
-ms-transform: translateY(-1px) rotate(-45deg);
-o-transform: translateY(-1px) rotate(-45deg);
transform: translateY(-1px) rotate(-45deg);
}

.sidenav {
height:auto; /*  auch schön: 100% */
width:0; /*  Änderung mit js */
position:fixed;
z-index:2; 
top:0;
left:0;
background-color:#111;
overflow-x:hidden;
padding-top:90px; 
padding-bottom:90px;
transition:.1s;
border-bottom:1px solid #eee;
}

.sidenav a {
padding: 20px 0;
display:block;
transition:.3s;
border-bottom:1px solid #333;
}

.sidenav a:hover, .sidenav a:focus{
border-bottom:1px solid #eee; 
}

.close {
position:absolute;
top:20px;
right:40px;
border-bottom:0 solid #111 !important;
}
/*  Ende Navi */



/* wenn Filterung mit Buttons gewünscht */
.button-group:after {content: '';display: block;clear: both;}
.button-group a {letter-spacing:1px;}
.button-group a:hover {color:#fafafa;}

a.link,a.extern {cursor:pointer;margin:0 50px;color:#ddd;}
a.link:hover,a.extern:hover {color:#fff;}
a.link:visited, a.extern:visited {color:#ddd;}
/* ---- Ende Filterung ---- */


a, a > * {-webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

p { line-height:1.3; padding:30px; }

.logo { padding:30px 0 0 30px; }

.icon { position:absolute; bottom:0; right:0; width:100px; height:100px; z-index:1; }

.small { font-size:15px; color:#aaa; padding:5px 30px; }

.bold {font-weight:bold}

.pix-3-3 {width:620px;height:620px;}
.pix-1-3 {width:300px;height:300px;}

img.me {
position:relative;
top:0;
left:0;
width:100px;
height:100px;
}

.imgtext {
position:absolute;
top:100px;
left:0;
width:530px;
background-color:rgba(0, 0, 0, 0.3);
color:#fff;
font-size:50px;
font-weight:bold;
padding:40px;
}

.imgtext-1-3 {
position:absolute;
top:50px;
left:0;
width:260px;
background-color:rgba(0, 0, 0, 0.3);
color:#fff;
font-size:25px;
font-weight:bold;
padding:10px 10px 10px 30px;
}

.container { width:1280px; position:relative; margin:50px auto; }

.col1-1 { width:100%; height:300px; margin:10px; float:left; background:#fff }
.col1-3 { width:300px; height:300px; margin:10px; float:left; background:#fff }
.col1-3.double { width:300px; height:620px; margin:10px; float:left; background:#fff }
.col2-3 { width:620px; height:300px; margin:10px; float:left; background:#fff }
.col3-3 { width:620px; height:620px; margin:10px; float:left; background:#fff }

.col3-3.auto, .col2-3.auto, .col1-3.auto, .double.auto, .col1-1.auto {height:auto; }

.overflow, .box {overflow:hidden; }

.transitions-enabled.exabits,
.transitions-enabled.exabits .exabits-brick {
-webkit-transition-duration: .7s;
-moz-transition-duration: .7s;
-ms-transition-duration: .7s;
-o-transition-duration: .7s;
transition-duration: .7s;
}

.transitions-enabled.exabits {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}

.transitions-enabled.exabits, .exabits-brick {
-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-ms-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}


/* disable transitions on container */
.transitions-enabled.infinite-scroll.exabits {
-webkit-transition-property: none;
-moz-transition-property: none;
-ms-transition-property: none;
-o-transition-property: none;
transition-property: none;
}

* html .clearfix { height:1%; }
.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }

.clearfix { display:block; }
.centered { text-align:center; }


@media only screen and (min-width: 768px) and (max-width: 1300px) {
.container { padding:0; width:640px; position:relative; }
.col1-1 {width:620px; }
#wrapper {width:640px; }
}

@media only screen and (max-width: 767px) {
.container { padding:0; width:320px; position:relative; }
.col1-3, .col2-3, .col1-1, .col1-3.double { width:300px; height:auto; margin-bottom:30px;}
.col3-3 { width:300px; height:300px; margin-bottom:30px;} /* height wegen foto */
#wrapper {width:320px; }

.pix-3-3 {
width:300px;
height:300px;
}

.imgtext {
position:absolute;
top:50px;
left:0;
width:280px;
background-color:rgba(0, 0, 0, 0.3);
color:#fff;
font-size:25px;
font-weight:bold;
padding:30px;
}

}