.noneDisplay {visibility: hidden; display: none}
.hidden-mobile {visibility: visible; display: block}
.hidden-temp {visibility: hidden; display: block}
.hidden {visibility: hidden; display: none}
.hidden-main {visibility: hidden; display: none}
.spacer-left {padding-left:0px;}
.spacer-right {padding-right:0px;}
.spacer-top {padding-top:40px;}
/*######## FONTS START###################*/


@media screen and (max-width:480px) {
.hidden-mobile {visibility: hidden; display: none}
.hidden-main {visibility: visible; display: block}
}
/*######## FONTS END###################*/
html, body, div, applet, object, spyn,
h1, h2, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers  background: url(../images/bg.jpg); */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  background-color:#FFF;
  font-family: 'Source Sans Pro', sans-serif; font-weight:300;
  color: #111;
  -webkit-font-smoothing: antialiased; 
  font-size: 1.3vw; line-height:1.8vw;
  overflow-x: hidden;
   
}



h2 {hyphens: auto;  }

@media screen and (max-width:1380px) {
	
	 body {
	  font-size: 1.6vw; line-height:2.1vw;
	 }

}

@media screen and (max-width:480px) {
	
	 body {
	  font-size: 5.2vw; line-height:6.8vw;
	 }

}

ol, ul {
  list-style: square;
  margin: 0 0 0.5em;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

p {
  margin: 0 ;
  }


a {
 color: #111; 
  text-decoration:none; font-weight:300;
}

.frame-default a {
 color: #111; 
  text-decoration:none; font-weight:300; border-bottom:solid 1px #111; 
}



a:hover, a:active {

  color: #808080;
}



table {
  border-collapse: collapse;
  border-spacing: 0;
}

img{
  max-width:100%;
  width: 100%;
  height:auto;
}

b{font-weight:700;}
#c101 a{font-weight:700; text-transform: uppercase;}

::-moz-selection {
  color:#FFF; background:#000;
}

::selection {
  color:#FFF; background:#000;
}


.list-overview a{font-size: 2.3vw; line-height:3.3vw;color:#000; text-transform:uppercase; font-weight:700;padding:0 0.5%}


.news-related-files-link { display: block;padding: 0 0 0.5em 0;}

/* video */
.video-box {float: left; width: 32.33333333333333%;padding: 0 0.5% 0% 0.5%; height: auto; margin: 0 0 -1.4% 0;}
.video-text-box{background: #ddd; text-align: left; font-size: 1.0vw; line-height:1.4vw;padding: 1em; height: 4.7em;}
.video-text-box h3{text-transform:none;font-weight:700;font-size: 1.3vw; line-height:1.8vw; padding:0.5em 0 0em 0; text-align: left}

.youtube {
	background-color: #000;
	margin-bottom: 0px;
	position: relative;
	padding-top: 56.25%;
	overflow: hidden;
	cursor: pointer;
}
.youtube img {
	width: 100%;
	top: -16.82%;
	left: 0;
	opacity: 0.8;
}
.youtube img:hover {
	
	opacity: 1.0;
}
.youtube .play-button {
	width: 70px;
	height: 50px;
	background-color: #cc3300;
	box-shadow: 0 0 20px rgba( 0,0,0,0.5 );
	z-index: 1;
	opacity: 1.0;
	border-radius: 6px;
}
.youtube .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
	cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
	position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}


/*BTN beginn*/
.btn-contact {font-size: 1.0vw; line-height:1.0vw; transition:all 0.5s ease;font-weight:400; text-align: center}
.btn-contact {text-decoration:none;padding:1em 1em;margin:0em auto 0% auto; width: 15%; cursor:pointer; text-transform:none;}
.btn-contact:hover{color:#fff; background:#111;}
.btn-contact:hover a{color:#FFF;}
.btn-contact a{text-decoration:none;color:#111;}
.btn-contact {border:#111 solid 1px; background:none;color:#111}

.btn-contact {
	border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

@media screen and (max-width:480px) {
	
	.video-box {float: left; width: 100%;padding: 0 0% 0% 0%; height: auto; margin: 0 0 0% 0;}
	.video-text-box{background: #ddd; text-align: left; font-size: 4.0vw; line-height:5.4vw;padding: 1em; height: 4.7em;}
	.video-text-box h3{text-transform:none;font-weight:700;font-size: 5.3vw; line-height:5.3vw; padding:0em 0 0.3em 0; text-align: left}
	
	.btn-contact {font-size: 4.2vw; line-height:4.2vw;width:70%;}

}

/*############## CONTENT BEGINN ###########################################*/
/*content elemente beginn*/ 
/* TYPO3 Anpassung für Responsive */
DIV.csc-textpic-above DIV.csc-textpic-imagewrap,
DIV.csc-textpic-below DIV.csc-textpic-imagewrap,
DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI,
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image {
        float: none; 
}
/*header-box*/





/*SECTIONS*/

.section{float:left;margin:0px;padding:0px;width:100%;text-align:center;}
.section-2{float:left;margin:0px;height: auto;padding-bottom:0px; margin-bottom:0px;width:100%;text-align:center;}
.section ul{list-style:none;margin: auto;}

.color-1 {background: #ddd;}

/*GRID*/
.grid { position:relative; z-index:1;width:100%;padding:0 0 0% 0; margin:0; text-align:center;}
/*SLOTS*/
.slot{ position:relative;width:70%;padding:4% 15% 0% 15%; text-align:center; margin:0% auto 0 auto;}
.slot-1{ position:relative;width:70%;padding:2% 15% 4% 15%; text-align:center; margin:0% auto 0 auto;}
.slot-1-1{ position:relative;width:100%;padding:3em 0% 3em 0%; text-align:center; margin:0% auto 0 auto;}
.slot-1-2 {float: left; width:100%;padding:0% 0% 4% 0%; text-align:center; margin:0% auto 0 auto;}
.slot-1-3{ position:relative;width:100%;padding:2% 0% 6% 0%; text-align:center; margin:0% auto 0 auto;}
.slot-2-1 {float: left; width:100%;padding:0% 0% 0% 0%; text-align:center; margin:0% auto 0 auto;}
.slot-2-2 {float: left; width:49%;padding:0% 1% 0% 0%; text-align:left; margin:0% auto 0 auto;}
.slot-2-3 {float: left; width:49%;padding:0% 0% 0% 1%; text-align:left; margin:0% auto 0 auto;}
.slot-2-2 p{padding: 0 0 1.5em 0}
.slot-2-3 p{padding: 0 0 1.5em 0}

.image-embed-item{padding: 0 0 1em 0}

@media screen and (max-width:480px) {
	
	.slot{ position:relative;width:80%;padding:24% 10% 0% 10%; text-align:center; margin:0% auto 0 auto;}
	.slot-1{ position:relative;width:90%;padding:2% 5% 4% 5%; text-align:center; margin:0% auto 0 auto;}
	.slot-1-3{ position:relative;width:100%;padding:2% 0% 22% 0%; text-align:center; margin:0% auto 0 auto;}
	.slot-2-2 {float: left; width:100%;padding:0% 0% 0% 0%; text-align:center; margin:0% auto 0 auto;}
	.slot-2-3 {float: left; width:100%;padding:0% 0% 0% 0%; text-align:center; margin:0% auto 0 auto;}

}

/*CONTENT-ELEMENTS*/
 h1 {margin:0;font-size: 3.8vw; line-height:3.8vw;padding:7% 0 7% 0; text-transform:uppercase;font-family: 'Oswald', sans-serif; font-weight:700}
 h2 {font-size: 3.8vw; line-height:5.2vw;padding:3% 0 6% 0; margin:0;text-align: center;text-transform:uppercase;font-weight:700;font-family: 'Oswald', sans-serif;}
 h3 {font-size: 1.8vw; line-height:2.2vw;padding:0% 10% 4% 10%;margin: -4% 0 0 0; font-weight:300; text-align: center; text-transform:none;}
 h4 {font-size: 1.4vw; line-height:2.2vw;padding:2% 0 6% 0; margin:0;text-align: center;text-transform:uppercase;font-weight:700;font-family: 'Oswald', sans-serif;}
 h5 {font-weight:700;font-family: 'Oswald', sans-serif; padding: 0 0 3em 0;}
.slot-2-2 h2{font-size: 1.4vw; line-height:2.2vw;padding:0% 0 1% 0;font-weight:700; text-align: left; text-transform:none;}
.slot-2-3 h2{font-size: 1.4vw; line-height:2.2vw;padding:0% 0 1% 0;font-weight:700; text-align: left; text-transform:none;}
.aktuelles h2 {font-size: 3.8vw; line-height:3.8vw;padding:0% 0 6% 0;} 

.close-icon-box { position: fixed; z-index:9;right:3em; top:2.0em;margin:0px 0px 0% 0%; padding:0px;opacity:1;transition:all 1s ease;}

.aktuelles-image { position: relative; width: 50%; padding: 2em 25% 1em 25%;}

.english-button {position: fixed; z-index: 2; top: 2.28em; left: 8em; color: #FFF;}
.english-button { font-weight: 300;font-size: 1.2vw; line-height:1.0vw;}



/*
.english-button {position: fixed; z-index: 2; bottom: 6em; right: 6em; width: 8em; height: 8em; border-radius: 8em; background:#bb2f78; color: #FFF;}
.english-button { font-weight: 700;}
.english-button:hover{background: #0d58ae;}
.english-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  }
*/	 
@media screen and (max-width:1320px) {
	
	.english-button {position: fixed; z-index: 2; top: 2.4em; left: 9em; color: #FFF;}
	.english-button { font-weight: 300;font-size: 1.4vw; line-height:1.2vw;}
	
	}

@media screen and (max-width:980px) {
	
	.english-button {position: fixed; z-index: 2; top: 2.4em; left: 9em; color: #FFF;}
	.english-button { font-weight: 300;font-size: 1.6vw; line-height:1.4vw;}
	
	}	

@media screen and (max-width:480px) {
	
	.aktuelles-image { position: relative; width: 100%; padding: 2em 0% 0 0%;}
	
	.english-button {position: fixed; z-index: 2; top: 2.1em; left: 8.0em; color: #FFF;}
	.english-button { font-weight: 300;font-size: 5.2vw; line-height:5.2vw;}
	
     h1 {font-size: 8.8vw; line-height:10.2vw;padding:3% 0 12% 0; text-align: center;}
	 h2 {font-size: 8.8vw; line-height:10.2vw;padding:3% 0 12% 0; text-align: center;}
	 h3 {font-size: 7.8vw; line-height:8.2vw;padding:6% 10% 4% 0%;margin: 0% 0 0 0; font-weight: 400;} 
	 h4 {font-size: 4.2vw; line-height:4.8vw;padding:2% 0 6% 0;}
	 .slot-2-2 h2{font-size: 5.2vw; line-height:6.8vw;padding:0% 0 4% 0;text-align: center;}
	 .slot-2-3 h2{font-size: 5.2vw; line-height:6.8vw;padding:0% 0 4% 0;text-align: center;}
	 .aktuelles h2 {font-size: 8.8vw; line-height:10.2vw;padding:0% 0 6% 0;} 
	 .close-icon-box { position: absolute;right:15%; top:2em;}

}
/*##### SOCIAL MEDIA FOOTER ##########*/
.footer-social-box {position: absolute; margin: auto;top: 3em; right: 3em;}
.social-box li{ list-style:none; display: inline-block; margin:0;text-align: left;padding:0 0.5em 0em 0.5em}
.social-box a{font-size: 0.75vw; line-height:0.75vw;color:#FFF;}
.social-box a:hover {color:#999;}

.social-box-main li{ list-style:none; display: inline-block; margin:0;text-align: left;}
.social-box-main a{font-size: 0.55vw; line-height:0.55vw;color:#111; padding:0 0.3em 0em 0.3em}
.social-box-main a:hover {color:#999;}

.footer {background:#111;color: #FFF; text-align: left;font-size: 1.2vw; line-height:2.0vw;}
.footer a{color: #fff; text-decoration: none;}
.footer-content {padding: 0 0 0 3em;}


        

@media screen and (max-width:480px) {
	
	.footer-social-box {position: relative; margin: auto;top: inherit; bottom: inherit; right:inherit; padding: 8% 0 0 10%}
	.social-box a{font-size: 3.0vw; line-height:3vw;color:#FFF;}

	.footer {background:#111;color: #FFF; text-align: left;font-size: 5.2vw; line-height:7.0vw;}
	.footer-content {padding: 0 10% 0 10%;}
	
	
}	
/* -----------------------------------------------------------------------------

  HAMBURGER ICONS COMPONENT
  
----------------------------------------------------------------------------- */
/**
 * Toggle Switch Globals
 *
 * All switches should take on the class `c-hamburger` as well as their
 * variant that will give them unique properties. This class is an overview
 * class that acts as a reset for all versions of the icon.
 */


/*hamburger*/








/* preloader animation*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:#FFF;

  z-index: 999999;}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -100px; }

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 4px solid transparent;
  border-top-color: #111;
  z-index: 1500;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  z-index: 1001; }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }





/*######## BLOG ########*/
/*SCROLL-ICON main-slider*/

/**/
 .icon-scroll {margin-left:-0.7em; cursor: pointer; bottom: 2em; opacity: 1; }
 
/*SCROLL-ICON main-slider*/
 
.icon-scroll,
.icon-scroll:before {
  position: absolute;
  z-index:99999999;
  left: 50%;
  
}
.icon-scroll {
  width: 36px;
  height: 58px;
  margin-left: -18px;
  margin-top: -29px;
  box-shadow: inset 0 0 0 1px #fff;
  opacity:0.9;
  border-radius: 30px;
}

.icon-scroll:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  margin-left: -4px;
  top: 8px;
  border-radius: 4px;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
          animation-name: scroll;
}

.news-single-image-box .icon-scroll:before {
  background: #fff;
}

@-webkit-keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(46px);
            transform: translateY(46px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(46px);
            transform: translateY(46px);
  }
}

@media screen and (max-width:1320px) {
.icon-scroll {
  width: 28px;
  height: 46px;
  margin-left: -12px;
  margin-top: -9px;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 30px;
}

.icon-scroll:before {
  content: '';
  width: 6px;
  height: 6px;
  background: #fff;
  margin-left: -3px;
  top: 2px;
  border-radius: 3px;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
          animation-name: scroll;
}
}

@media screen and (max-width:980px) {
.icon-scroll {
  width: 28px;
  height: 46px;
  margin-left: -12px;
  margin-top: -9px;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 30px;
}

.icon-scroll:before {
  content: '';
  width: 6px;
  height: 6px;
  background: #fff;
  margin-left: -3px;
  top: 2px;
  border-radius: 3px;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
          animation-name: scroll;
}
}

@media screen and (max-width:720px) {
.icon-scroll {
  width: 28px;
  height: 46px;
  margin-left: -12px;
  margin-top: -9px;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 30px;
}

.icon-scroll:before {
  content: '';
  width: 6px;
  height: 6px;
  background: #fff;
  margin-left: -3px;
  top: 2px;
  border-radius: 3px;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
          animation-name: scroll;
}
}

@media screen and (max-width:480px) {
.icon-scroll {
  width: 24px;
  height: 36px;
  margin-left: -12px;
  margin-top: -9px;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 30px;
}

.icon-scroll:before {
  content: '';
  width: 6px;
  height: 6px;
  background: #fff;
  margin-left: -3px;
  top: 2px;
  border-radius: 3px;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
          animation-name: scroll;
}
}



/*** PROJEKTANFRAGE OVERLAY ***/

/*CLOSE*/

#close-icon-box {position:absolute;z-index:999999;cursor:pointer;right:3em;top:3.4em;}	
#close-icon-box-2 {position:absolute;z-index:999999;cursor:pointer;right:6%;padding:1.2em 0 0 0;}




/*placeholder*/
#projektanfrage-box ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color:#FFF;
    opacity: 1; /* Firefox */
}

#projektanfrage-box ::-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:#FFF;
}

#projektanfrage-box ::-ms-input-placeholder { /* Microsoft Edge */
    color:#FFF;
}
/*placeholder*/

.projektanfrage { position: relative; width: 50%; padding: 4em 0 0 25%; color:#FFF;}
			
.projektanfrage h2 {padding:2% 5% 4% 5%; margin:0; font-weight:700;text-align: center;text-transform: none;}
.projektanfrage #c58 p{ display:block; visibility:visible;padding:0% 10% 2% 10%;}
#projektanfrage-box {
	position: fixed;
    top:0%;
    left: 0;
    height: 100vh;
    width: 100%;
    overflow: auto;
	z-index:9999;
	color:#000;
	text-align:center;
	display: none;
}

#projektanfrage-box{
	background:#111;
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
 }
 
/*Danke*/
#projektanfrage-box-2 {
	position: fixed;
    top:0%;
    left: 0;
    height: 100vh;
    width: 100%;
    overflow: auto;
	z-index:9;
	color:#000;
	text-align:center;
	display: block;
}

#projektanfrage-box-2{
	background: #b4aa98;
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
 }
/*DANKE*/
 

@media screen and (max-width:480px) {
	
	#close-icon-box {position:absolute;z-index:999999;cursor:pointer;right:10%;top:1.8em;}	
	#close-icon-box-2 {position:absolute;z-index:999999;cursor:pointer;right:6%;padding:1.2em 0 0 0;}	
	
}

#projektanfrage-box p{padding:0 0 4% 0;}

.form-control { float:left;border: solid 1px #fff; width:45%; background: transparent; color:#fff;font-size: 0.9vw; line-height:1.3vw; padding:1% 0% 1% 2%;}
.form-control {margin:1.5% 1% 1.5% 1%;}
.xxlarge  {float:left;border: solid 1px #fff; width:94.5%; height:4em;background:transparent; color:#fff;font-size: 0.9vw; line-height:1.3vw;padding:1% 0% 1% 2%;}

#projektanfrage-box label{ display:none; visibility:hidden}
.frame-type-form_formframework h2{ display:none; visibility:hidden}
.frame-type-form_formframework header{ display:none; visibility:hidden}

.btn-primary {width: auto; background: transparent;padding:1em 3em;  margin:4% 0 0 0}
.btn-primary { color:#fff;font-size: 0.9vw; line-height:0.9vw;}
.btn-primary {box-shadow: 0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;-moz-box-shadow:0 0 0 1px #fff; border: none}

.btn-primary {
	border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

@media screen and (max-width:920px) {
.projektanfrage p{font-size: 2.2vw; line-height:3.0vw;}
.frame-type-form_formframework h2 {padding:10% 0 10% 0;}
.btn-primary {font-size: 2.2vw; line-height:2.2vw;padding:1em 3em;}
.form-control { float:left; width:95%; background:transparent; color:#fff;font-size: 2.2vw; line-height:3.4vw; padding:2% 0% 2% 3%;}
.form-control {margin:2.5% 1% 2.5% 1%; -webkit-appearance: none;}	
}

@media screen and (max-width:480px) {	
.projektanfrage { position: relative; width: 70%; padding: 2em 0 0 15%; color:#FFF;}		
.projektanfrage h2 {font-size: 5.2vw; line-height:6.8vw;padding:10% 25% 6% 25%; margin:0; font-weight:700;text-align: center;text-transform: none;}
.projektanfrage #c58 p{ font-size: 4.2vw; line-height:6.2vw;display:block; visibility:visible;padding:0% 0% 4% 0%;}
.frame-type-form_formframework h2 {padding:10% 0 10% 0;}
.btn-primary {font-size: 3.2vw; line-height:3.2vw;padding:1em 3em;}
.form-control { float:left; width:95%;background:transparent; color:#fff;font-size: 3.2vw; line-height:3.2vw; padding:3% 0% 3% 4%;}
.form-control {margin:2.5% 1% 2.5% 1%; -webkit-appearance: none;}	
}


/*########## NAVIGATIONS CSS BEGINN ################*/

#menu-panel{position: fixed; z-index:11; top:0; left:0;width:30%; height:100vh; padding:0% 0 0 0;background:#fff; display: none}
#menu-panel-intro{position: fixed; z-index:11; top:0; right:0;width:30%; height:100vh; padding:0% 0 0 0;background:transparent; display: none}
#menu-panel-close{position: fixed; z-index:10; top:0; right:0;width:100%; height:100vh; padding:0% 0 0 0;background:rgba( 0,0,0,0.3); display: none}


/*NAVIGATION*/
.content {
  text-align:center;
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.content-box {float: left; width: 70%; padding: 0 15%;}
.menu-main li{list-style: none;text-align: center;}
.menu-main a{text-align: left; font-size: 1.8vw; line-height:2.6vw;text-transform:none; color: #111;}
.menu-main a:hover{color: #999;}
.menu-main .act a{color: #999;}

@media screen and (max-width:480px) {
	
	#menu-panel{position: fixed; z-index:11; top:0; right:0;width:100%; height:100vh;}
	.content-box {float: left; width: 70%; padding: 0 15%; margin: -3em 0 0 0;}
	.menu-main a{font-size: 7.8vw; line-height:9.6vw;}

}

* {
  margin: 0;
  padding: 0; 
}

/* Icon 1 */

#nav-icon-text {
  z-index:12;font-size: 1.2vw; line-height:1.0vw; font-weight: 700;
  width: auto;
  height: 50px;
  position: absolute;
  left:2.2em; top:0.1em;
  color:#fff;
  padding:0 0 0 0;
  margin:0px 0 0 0px;
  display:none;display: block;
}

#nav-telefon {
  z-index:999;
  width:auto;
  height: 50px;
  position: fixed;
  right:2.0em; top:2.2em;
  cursor: pointer;
  display: none; display:block;
  color: #FFF;
  font-size: 1.2vw; line-height:1.0vw; font-weight: 300;
}

#nav-telefon a{color: #FFF;font-weight: 400;}

.detail #nav-icon-text {color: #111;}

.open #nav-icon-text {display: none;}

#nav-icon1 {
  z-index:999;
  width: 1.4em;
  height: 50px;
  position: fixed;
  left:2.0em; top:2.0em;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  display: none; display:block;
}
#nav-icon1 span {
  display: block;
  position: absolute;
  height: 0.1em;
  width: 100%;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.n1, .n2, .n3 {background: #FFF;}

.detail .n1 {background: #111;}
.detail .n2 {background: #111;}
.detail .n3 {background: #111;}

.intro .n1 {background: #FFF;}
.intro .n2 {background: #FFF;}
.intro .n3 {background: #FFF;}

.open .n1 {background: #111;}
.open .n2 {background: #111;}
.open .n3 {background: #111;}



.hide-text { display:none; visibility:hidden;}

#nav-icon1 .n1 {
  top: 0px;
}

#nav-icon1 .n2 {
  top: 0.4em;
  left:0px;
}

#nav-icon1 .n3 {
  top: 0.8em;
  left:0px;
}


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

	#nav-icon-text {
	  font-size: 1.6vw; line-height:1.6vw;
	  height: 50px;
	  right:2.6em; top:0%;
	}	

}

@media screen and (max-width:980px) {	
#nav-icon-text {
  font-size: 2.0vw; line-height:2.0vw;
  height: 50px;
  right:2.6em; top:0%;
}

#nav-icon-lang {
 font-size: 2.0vw; line-height:2.0vw;
  height: 50px;
  right:6.2em;top:0;
}
	

}

@media screen and (max-width:720px) {	
#nav-icon-text {
  font-size: 2.6vw; line-height:2.6vw;
  height: 50px;
  right:2.6em; top:0%;
}

#nav-icon-lang {
  font-size: 2.6vw; line-height:2.6vw;
  height: 50px;
  right:6.2em;top:0;
}
	

}


@media screen and (max-width:480px) {
	
#nav-icon1 {
  width: 1.7em;
  height: 40px;
  position:absolute;
  left:10%; top:2em;
}

#nav-icon-text {
  font-size: 22px; line-height:22px; font-weight: 700;
  height: 50px;
  left:2.1em; top:2%;
  
}

#nav-icon1 .n1 {
  top: 0px;
}

#nav-icon1 .n2 {
  top: 0.5em;
  left:0px;
}

#nav-icon1 .n3 {
  top: 1.0em;
  left:0px;
}
	

}


/*
#nav-icon1.open span{background:#FFF}
*/

#nav-icon1.open span:nth-child(1) {
  top: 9px;
  left: 0px;
   
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}


#nav-icon1.open span:nth-child(2) {
    top: 9px;
  left: 0px;
   
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#nav-icon1.open span:nth-child(3) {
  top: 9px;
  left: 0px;
   
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#nav-icon1.open span:nth-child(4) {
  opacity: 0;
  left: -45px;
}


/*CLOSE*/

#close-icon-box-2 {position:absolute; top:1.8em; right:5%; width:1em;height:auto; cursor:pointer}	


.close {
  position: fixed;
  width: 40px;
  height: 0.5em;
  opacity: 1;
  z-index:999999;
   -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  cursor:pointer;
 
  
}

.close:before, .close:after {
  position: absolute;
  right: 20px;
  top:-10px;
  content: ' ';
  height: 40px;
  width: 4px;
  background-color: #fff;
}
#close-icon-main .close:before{
  background-color: #111;
}

#close-icon-main .close:after {
  background-color: #111;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}

@media screen and (max-width:1320px) {
 .close {
  position: fixed;
  width: 26px;
  height: 1.5em;
  opacity: 1;
  z-index:999999;
   -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  cursor:pointer; 
}

.close:before, .close:after {
  position: absolute;
  right: 14px;
  top:-10px;
  content: ' ';
  height: 32px;
  width: 3px;
}

}

@media screen and (max-width:480px) {
 .close {
  position: absolute;
  width: 30px;
  height: 2.5em;
  opacity: 1;
  z-index:999999;
   -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  cursor:pointer; 
}

.close:before, .close:after {
  position: absolute;
  right: 14px;
  top:-10px;
  content: ' ';
  height: 32px;
  width: 3px;
}

}

/*POWERMAIL*/ 
.powermail_label{font-weight: 300;}
.tx-powermail li{list-style: none; color: #e40521; padding: 1em 0 0.5em 0; margin: 0; text-align: left; display: block;}
.tx-powermail ul {padding: 0; margin: 0;}

.tx-powermail {float: left; width:90%;padding:0% 5% 4em 5% ;}

.tx-powermail h3 {display: none; visibility: hidden;}

.powermail_legend {display: none; visibility: hidden;}
.powermail_label { float: left;width: 40%; text-align: left;padding:0.3em 0; display: none;}



.powermail_input {width: 100%; }
.powermail_fieldwrap_type_submit {width: 100%;}

.powermail_submit {
  background:none;
  border: solid 1px #FFF;
  color:#FFF;
  padding:0.5em 2.0em;margin:2.0em auto 0% auto;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: .5s ease-in-out;
  font-size: 1.2vw; line-height:1.2vw;
  font-weight: 300;
    -webkit-border-radius:0; -webkit-appearance: none;
}


.powermail_fieldwrap_type_input{float: left; width: 46%; padding:1% 2%;}
.powermail_fieldwrap_type_textarea {float: left; width: 96%; padding:1% 2%;}

.powermail_input {
  float: left;
  display: block;
  width: 100%;
  margin: 0%;
  border: 1px solid #fff;
  padding: 0.5em 0.5em;
  background-color: #000;
  color: #fff;
  font-size: 1.2vw; line-height:1.2vw;
  font-family: 'Open Sans', sans-serif; font-weight: 300;
    -webkit-border-radius:0; -webkit-appearance: none;
}
.powermail_textarea {
  float: left;
  display: block;
  width: 100%;
  border: 1px solid #fff;
  padding: 0.5em 0.5em;
  background-color: #000;
  color: #FFF;
  font-size: 1.2vw; line-height:1.8vw;
  font-family: 'Open Sans', sans-serif; font-weight: 300;
    -webkit-border-radius:0; -webkit-appearance: none;
}


@media screen and (max-width:480px) {
	
	.tx-powermail {float: left; width:100%;padding:0% 0% 4em 0% ; text-align: center;}
	
	.powermail_input {font-size: 5.2vw; line-height:6.8vw;-webkit-border-radius:0; -webkit-appearance: none;}
    .powermail_textarea {font-size: 5.2vw; line-height:6.8vw;-webkit-border-radius:0; -webkit-appearance: none;}
	
	.powermail_label {width: 90%; text-align: left;padding:0.3em 0;}
	.powermail_field { width: 90%;  text-align: center;padding:0.3em 0;}
    
    .powermail_fieldwrap_type_input{ width: 98%; padding:1% 1%;}
    .powermail_fieldwrap_type_textarea {float: left; width: 98%; padding:1% 1%;}
    
    .powermail_submit {
      background:none;
      border: solid 1px #FFF;
      color:#FFF;
      padding:0.5em 2.0em;margin:2.0em auto 0% 10%;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      cursor: pointer;
      transition: .5s ease-in-out;
      font-size: 5.2vw; line-height:6.8vw;
      font-weight: 300;
    }
	
}


/*temp*/






