body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.ie7 img{-ms-interpolation-mode:bicubic}.ie8 img{width:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center}
 
/* roboto-flex-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 400;
  src: url('../../files/zaunbau/fonts/roboto-flex-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../../files/zaunbau/fonts/roboto-flex-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../files/zaunbau/fonts/roboto-flex-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../files/zaunbau/fonts/roboto-flex-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../../files/zaunbau/fonts/roboto-flex-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../files/zaunbau/fonts/roboto-flex-v9-latin-regular.svg#RobotoFlex') format('svg'); /* Legacy iOS */
}



*{ margin: 0; padding: 0; border: 0;}
html, body {width: 100%; height: auto}
body {font-size: 100%; font-family: 'Roboto Flex', Arial, Helvetica, sans-serif; font-weight: 400; font-style: normal; color: #333; vertical-align:baseline; background-color: #fff;}

#clear, .clear {clear: both!important; width: auto; height: 0px; font-size: 0.1px;}
img {margin: 0; padding: 0; display: block;}


#container, #footer, #header {width: 100%; height: auto;}
.contentHold, .mod_article .contentHold {width: 100%; height: auto; padding: 25px 2% 25px 2%; margin: 0px auto; box-sizing: border-box; position: relative; max-width: 1500px;}

.greenBgr {background-color: #076633; padding-top: 25px; padding-bottom: 25px;}
.greyBgr {background-color: #cbc9ca; padding-top: 50px; padding-bottom: 35px;}

/* Basics*/
.noMobile, .noMobil {display: block!important;}
.yesMobile, .hRightMobil {display: none!important;}
.overflowHidden {overflow: hidden; position: relative;}

.x1, .x2, .x3, .x32, .x4, .x43, .x30, .x5 {padding: 0%; margin-bottom: 1.25rem; box-sizing: border-box;}
.x1 {width: 96%; display: block;}
.x2 {width: 46%; float: left;}
.x1, .x2, .x3, .x32, .x4, .x5, .x43 {margin-left: 2%; margin-right: 2%;}

.x30 {width: 30%; float: left;}
.x3 {width: 29%; float: left;}
.x32 {width: 62%; float: left;}
.x4 {width: 21%; float: left;}
.x43 {width: 65%; float: left;}
.x5 {width: 16%; float: left;}
.maxWidth70 {max-width: 70%; padding: 0% 2%; box-sizing: border-box; margin: 0px auto; clear: both; float: none;}

object, svg, img {max-width: 100%; height: auto;}
.floatRight {float: right;}
.textCenter {text-align: center;}
.center {margin: 0px auto; text-align: center;}
.centerBlock {margin-left: auto!important; margin-right: auto!important; float: none!important;}
.imgCenter .image_container, .imgCenter img {margin-left: auto; margin-right: auto;}
.marginBottom50 {margin-bottom: 50px; }
.marginBottom100 {margin-bottom: 100px;}
.marginBottom150 {margin-bottom: 150px;}
.marginTop50 {margin-top: 50px;}
.marginTop100 {margin-top: 100px;}
.paddingTop50, .textContentpaddingTop50 .textContent {padding-top: 50px;}
.paddingTop100, .textContentpaddingTop100 .textContent {padding-top: 100px;}
.paddingTop150, .textContentpaddingTop150 .textContent {padding-top: 150px;}
.paddingBottom100, .textContentpaddingBottom100 .textContent {padding-bottom: 100px;}
.paddingBottom50, .textContentpaddingBottom50 .textContent {padding-bottom: 50px;}

.noMarginBottom {margin-bottom: 0!important;}
.noMargin {margin: 0!important;}
.noPadding {padding: 0;}
.noPaddingBottom .contentHold {padding-bottom: 0!important;}
.flexBoxHold {display: flex;display: -webkit-flex;display: -ms-flexbox;}
.flexBoxHold .image_container, .flexBoxHold .image_container img {width: auto; height: auto;}
.borderTop {margin-top: 50px; padding-top: 50px; border-top: 1px solid #ccc;}
.borderBottom {margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid #ccc;}
.textRight {text-align: right;}

.tab {width: 70px; float: left; display: block; margin-right: 10px;}
.noAfter::after {display: none!important;}

/* Basis Typo */
p, td, #main ul li, #main ol li, input, select, textarea, .ce_text a, #footer a, #footer p {font-size: 1.075rem; line-height: 1.45rem; margin-bottom: 1.45rem; word-wrap:break-word;}
h1, h2, h3, h4, h5, h6, p, td, #main ul li, #main ol li, input, select, textarea, .ce_text a, #footer a, #footer p {hyphens: auto; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; font-weight: normal;}

/* Header */


.logo {width: 280px; max-width: 80%; height: auto; overflow: hidden; transition: all .25s ease; margin: 20px auto;} 
.logo a span {text-indent: -9999px;display: block;position: absolute;}
.logo a {display: block; height: 100%; overflow: hidden; transition: all 0.25s ease; margin-top: 50px; margin-bottom: 10px;}
.logo a img, .logo a svg {height: auto; width: 100%; transition: all 0.25s ease;-webkit-box-shadow: 0 2px 5px 0 #757575; box-shadow: 0 2px 5px 0 #757575;}


a.linkPhone {position: absolute; width: 80px; height: 80px; top: 50px; right: 0; text-indent: -99999px; background: url(../../files/zaunbau/img/iconMail.svg) center no-repeat; background-size: 50% auto;}




/* Typografie */
h1, h2, h3, h4, h5, h6 {font-family: 'Roboto Flex',Arial, Helvetica, sans-serif; font-weight: 400; font-style: normal; margin-bottom: 1.65rem;hyphens: none; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; font-weight: normal;}

h1 {font-size: 2.5rem; line-height: 3rem; font-weight: 500; margin-bottom: 0; text-transform: uppercase; margin-bottom: 5px;}
h2 {font-size: 2rem; line-height: 2.45rem; font-weight: 400; color: #076633; }
.greyBgr h2::after {content:''; display: block; width: 150px; height: 2px; background-color: #1e1e1e; margin: 20px auto 40px;}
.greenBgr p, .greenBgr ul li {color: #f2f2f2;}

 
.topline {background-color: #3c3c3b; width: 100%; }
.topline p {color: #f2f2f2; font-weight: 400; margin-bottom: 0;}

.ce_text ul {list-style: none;}
.ce_text ul li {display: block; padding: 5px 20px 5px 50px;  position: relative; margin-bottom: 0!important;}
.ce_text ul li::before {content:'\2799'; position: absolute; top: 10px; left: 0; font-size: 2rem;}

.icontelefon {background-color: #f39017; padding: 10px 15px; font-size: 2.25rem; line-height: 2.85rem; text-decoration: none;font-weight: 700; color: #3d3c3b; position: absolute; right: 2%; z-index: 999; transform: rotate(-8deg); -webkit-box-shadow: 0 2px 5px 0 #313131; box-shadow: 0 2px 5px 0 #313131;  animation-name: rotateAnim;
  animation-duration: 5s;
  animation-iteration-count: infinite;}
.icontelefon::before {content:''; width: 40px; height: 40px; display: inline-block; background: url(../../files/zaunbau/img/telefonicon.svg)center no-repeat; margin-right: 10px; position: relative; top: 7px;}


@keyframes rotateAnim {
  0% {transform: rotate(-8deg)}
  25% {transform: rotate(-8deg)}
  50% {transform: rotate(0deg)}
  75% {transform: rotate(-8deg)}
  100% {transform: rotate(-8deg)}

}



/* Galery */

.galX6 ul, .galX4, .galX3, .galX2 {list-style: none;}
.galX6 ul li {float: left; margin: 1%; width: 14%; }
.galX6 ul li img {height: 150px; width: auto; margin: 0px auto;}
/*.galX6 li:nth-of-type(6n+7) {clear: both;}*/
.galX4 ul li img {max-height: 250px; width: auto; margin: 0px auto;}
.galX4 ul li {float: left; margin: 1%; width: 23%; border: 2px solid #04341a; box-sizing: border-box; padding: 10px;}
.galX4 .caption, .galX6 .caption {border-top: none;}
.galX3 ul li {float: left; margin: 1%; width: 31%; border: 1px solid #ccc; box-sizing: border-box; padding: 10px;}
.galX3 ul li img {max-height: 250px; width: auto; margin: 0px auto;}
.galX2 ul li {float: left; margin: 1%; width: 48%; border: 1px solid #ccc; box-sizing: border-box; padding: 10px;}
.galX2 ul li img {max-height: 450px; width: auto; margin: 0px auto;}




/* Formular */
.formFly { padding: 50px 3%!important; -webkit-box-shadow: 0 10px 25px 0 #ddd; box-shadow: 0 10px 25px 0 #ddd; background-color: #fff;box-sizing: border-box;}
.formbody input[type="text"], .formbody input[type="tel"], .formbody input[type="email"],.formbody input[type="password"], textarea, select {border: 1px solid #dadada; width: 100%; min-width:200px; padding: 15px; box-sizing: border-box; font-family:  'Roboto', Arial, Helvetica, sans-serif; font-weight: 400;  color: #3a3a3a;}

.formbody .widget {width: 48%; float: left; margin: 1%;}
.formbody .widget.widget-textarea {clear: both; width: 100%; padding: 0 2% 0 0; box-sizing: border-box; font-family: 'Roboto Flex', Arial, Helvetica, sans-serif; color: #707677;}
.formbody textarea {padding: 2%; font-family: 'Roboto Flex', Arial, Helvetica, sans-serif; font-weight: 400; color: #707677; }
.formbody label {width: 100%; font-size: 1.0125rem; clear:both; padding-top:8px; margin-bottom: 10px!important; padding-left: 0!important;}
label.message {clear: both!important; display: block; margin-bottom: 5px!important;} 
span.mandatory {color:#ff0000;}
.formbody .widget.widget-captcha {clear: both; margin: 20px 0; float: none; width: 100%;} .formbody .widget.widget-captcha label {width: 200px;}
.formbody .widget.widget-captcha input {clear: both; width: 50px; min-width: 30px; margin-right: 10px; float: left;}
.captcha_text {float:left; padding:8px 0 2px 8px; font-size:0.875em;color: #707677;}
.luft {width: 100%; height: auto; display: block; float: none; clear: both;}

.widget-submit {clear: both!important; width: 100%; text-align: center; margin: 30px 0;}
.widget-submit button {margin:20px 0px; border:1px solid #ccc; color:#fff; padding:10px 25px; cursor:pointer; display: block; background-color: #076633; width: 100%; background-image: none!important; font-size: 1.0125rem; line-height: 1.2rem; border-radius: 0!important; transition: all 0.25s ease;}
.widget-submit button:hover {background-color: #04341a; transition: all 0.5s ease;}


span.mandatory {vertical-align: top; padding-left: 2px;}
p.error {clear: both; display: block; color: #ff0000!important; font-size: 11px; margin-top: 20px;}
.ie7 p.error {margin-top: 5px; margin-left: 5px;}
.formbody br {clear: both; display: block;}
.widget.error {position: relative; padding-top: 40px; display: block; margin-top: 10px; clear: both;}


.widget fieldset {padding: 0!important; margin: 0!important;}
.widgetDS {width:98%!important; margin: 0 1%!important; padding: 0 2%; box-sizing: border-box;}
.widgetDS input {float: left!important; width: 40px!important; min-width: 40px; height: auto; margin-top: 5px;}
.widgetDS label {clear: none!important; padding-top: 0!important; display: block;}
.widgetDS p {font-size: 1.0125rem;}


/* Footer */

#footer {background-color: #1e1e1e; padding-top: 25px; padding-bottom: 15px; width: 100%; clear: both;}
#footer .x3 img.flogo {width: 150px; height: auto; margin-bottom: 20px;}
#footer p {color: #f2f2f2;}
#footer p a {color: #f39017; text-decoration: none;}
#footer p a::before {content:''; width: 25px; height: 25px; display: inline-block; background: url(../../files/zaunbau/img/telefoniconOrange.svg) center no-repeat; margin-right: 10px; position: relative; top: 3px;}

.navJur ul {list-style: none; float: right;}
.navJur ul li {margin-left: 10px; float: left;}
.navJur ul li a, .navJur ul li strong {color: #f2f2f2; text-decoration: none; padding: 5px; font-size: 1.075rem; line-height: 1.45rem;display: block; font-weight: 400; transition: all 0.25s ease;}
.navJur ul li a:hover, .navJur ul li strong {color: #f39017; transition: all 0.25s ease;}

.contactBox {background-color: #f2f2f2; padding: 2%; box-sizing: border-box;}
.contactBox p a {color: #333; text-decoration: none;}
.contactBox p a::before {content:''; width: 25px; height: 25px; display: inline-block; background: url(../../files/zaunbau/img/telefonicon.svg) center no-repeat; margin-right: 10px; position: relative; top: 3px;}


@media screen and (max-width: 1000px) {
  .x2 {width: 96%; clear: both; float: none;}
  .galX4 ul li {width: 48%;}
  .formbody .widget {width: 98%;}
}

@media screen and (max-width: 600px) {
  .x3, .x32 {width: 96%; float: none; clear: both;}
  .greenBgr {padding-top: 25px; padding-bottom: 0;}
  #header a.linkPhone {display: none;}
  h1 {font-size: 1.875rem; line-height: 2.25rem;}
  h2 {font-size: 1.65rem; line-height: 1.875rem;}
  #footer ul {float: left;}
  #footer ul li {margin-left: 0; margin-right: 10px;}
  .navJur {border-top: 1px solid #f2f2f2; padding-top: 10px;}
  .contactBox {padding-top: 25px;}
  .contactBox .image_container {display: none;}

  .icontelefon {font-size: 1.875rem; line-height: 2.0rem; padding: 10px 20px 15px 20px;}
  .icontelefon::before {width: 30px; height: 30px; top: 5px;}

}