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




.popup-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

}

.popup {

font-family: Arial, sans-serif;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: #fff;

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

}

.popup-content {

    text-align: center;

}

.popup .close {

    position: absolute;

    top: 10px;

    right: 10px;

    font-size: 20px;

    cursor: pointer;

    color: #333;

}

.popup #emailInput {

    width: 80%;

    padding: 10px;

    margin: 10px 0;

    border: 1px solid #ddd;

    border-radius: 4px;

}

.popup button {

    background-color: #4caf50;

    color: #fff;

    padding: 10px 20px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    font-size: 16px;

}














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

body {
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
margin: 0 0 0 0;
background-color: rgba(51, 51, 51, 1.0);
}

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300; 
src: url("../dateien/font/Roboto-Regular.ttf");
}

@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 300; 
src: url("../dateien/font/Roboto-Italic.ttf");
}

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100; 
src: url("../dateien/font/Roboto-Thin.ttf");
}

@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 100; 
src: url("../dateien/font/Roboto-ThinItalic.ttf");
}

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 600; 
src: url("../dateien/font/Roboto-Medium.ttf");
}

@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 600; 
src: url("../dateien/font/Roboto-MediumItalic.ttf");
}

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900; 
src: url("../dateien/font/Roboto-Black.ttf");
}

@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 900; 
src: url("../dateien/font/Roboto-Black.ttf");
}

@font-face {
font-family: 'RobotoSlab';
font-style: normal;
font-weight: 300; 
src: url("../dateien/font/RobotoSlab-Regular.ttf");
}

@font-face {
font-family: 'RobotoSlab';
font-style: normal;
font-weight: 600; 
src: url("../dateien/font/RobotoSlab-Bold.ttf");
}

@font-face {
font-family: 'RobotoSlab';
font-style: normal;
font-weight: 100; 
src: url("../dateien/font/RobotoSlab-Light.ttf");
}

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

.lgo {
width: 140px;
}

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

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

#inhalt {
position: absolute;
color:#545251;
top: 75vh;
width: 100%;
padding: 0 0 0 0;
box-shadow: 0px -3px 2px rgba(0, 0, 0, 0.4);
}

#inhaltb {
position: absolute;
color:#545251;
top: 30vh;
width: 100%;
padding: 0 0 0 0;
box-shadow: 0px -3px 2px rgba(0, 0, 0, 0.4);
}

#boden {
clear: both;
width: 70%;
height: 70px;
padding: 10px 15% 0 15%;
background-color: rgba(51, 51, 51, 1);
box-shadow: inset 0px 2px 1px rgba(0, 0, 0, 0.7);
}

#social {
position: absolute;
top: 30vh;
right: 20px;
z-index: 50;
}


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

.blo {
float: left;
width: 50%;
margin: 0 25% 50px 25%;
}

.mono, .duo, .port {
float: left;
min-height: 40vh;
width: 100%;
background-color: #ffffff;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}

.mhydro {
float: left;
min-height: 55vh;
width: 100%;
background-color: #ffffff;
background-repeat: no-repeat;
background-image: url("../bilder/ghp.png");
background-size: 150px;
background-position: 95% 70px;
}

.port {
min-height: 80vh;
background-attachment: fixed;
}

.duo {
width: 50%;
}

.downloads {
clear: both;
display: block;
float: left;
margin: 100px 0 0 10%; 
width: 80%;	
}

.table-pdf {
  border-collapse: separate;
  border-spacing: 10px;
  margin-bottom:30px;
}

.table-pdf span {
  display:block;
  font-weight:bold;
}

.pdf-text {
  max-width:700px;
  padding:30px;
  font-weight:normal;
}



.quad {
float: left;
width: 50%;
margin: 0 0 0 0;
}

.proserv {
float: left;
width: 70%;
padding: 30px 15% 40px 15%;
}

.proserv:nth-child(2n){
background-color: #F2F2F2;
}

.inab {
margin: 50px;
}

.space {
display: block;
height: 75px; 
}

.geviert {
float: left;
width: 24%;
}

.geviert img {
width: 90%;
border: 5px solid #ffffff;
}

.stopfloat {
clear: both;
}

.zitat, .zitata {
float: left;
width: 80%;
margin: 0 10% 5px 10%;
background-color: #ffffff;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}

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

strong {
  font-weight:bold;
}

h1 {
margin: 90px 0 10px 0;
font-weight: 100;
font-size: 5em;
line-height: 0.8em;
}

h2 {
font-weight: 900;
font-size: 2em;
margin: 0 0 40px 0;
}

h3 {
font-weight: 300;
font-size: 2.2vw;
text-transform: uppercase;
margin: 90px 0 30px 0;
}

.proserv h3 {
margin: 10px 0 30px 0;
display: block;
float: left;
width: 30vw;
}

h3.product-header {
  display: inline-block;
  width:100%;
  border-bottom: 8px solid rgba(0, 98, 155, 1);
}


h4 {
text-align: left;
font-weight: 300;
font-size: 1.8vw;
text-transform: uppercase;
margin: 40px 0 0 0;
}

h5 {
font-weight: 600;
text-transform: uppercase;
}

h5::before {
content: "";
display: block;
width: 120px;
height: 2px;
margin-bottom: 5px;
background-color: #00629B;
}

h6 {
text-align: left;
font-weight: 300;
font-size: 1.2vw;
margin: 40px 0 0 20px;
}

p {
font-weight: 300;
line-height: 1.5;
}

hr {
margin: 0 0 50px 10%;
width: 80%;
clear: both;
color: rgba(0, 98, 155, 1);
}

.atf {
float: left;
font-size: 1vw;
line-height: 1.8vw;
margin: 0 0 50px 0;
}

.adresse:before {
content: "JA-Gastechnology GmbH \A Albrecht-Thaer-Ring 9 \A 30938 Burgwedel";
white-space: pre;
}

.btz {
float: left;
width: 24%;
font-size: 1.2vw;
font-weight: 400;
line-height: 1.8vw;
}

.btz:nth-child(3n){
text-align: right;
margin: 70px 0% 30px 0%;
}

.btz:nth-child(3n+1){
text-align: left;
margin: 70px 0% 30px 0%;
}

.btz:nth-child(3n+2){
text-align: center;
margin: 70px 1% 30px 1%;
}

.btz:nth-child(3n+3){
text-align: center;
margin: 70px 1% 30px 1%;
}

.motxt {
font-size: 1.2vw;
line-height: 1.8vw;
}

.farbe {
color: #e33751!important;
}

.fbttit, .fbttxt, .fbtlink {
display: inline-block;
text-align: center;
width: 70%;
margin: 0 15% 0 15%;
}

.fbtbu .fbttit, .fbtbu .fbttxt, .fbtbu .fbtlink {
display: inline-block;
text-align: left;
width: 50%;
margin: 0px 15% 0 15%;
}

.fbttit {
margin-top: 10%;
font-weight: 900;
font-size: 4.5vw;
}

.fbttxt {
font-weight: 300;
font-size: 2vw;
}

.fbtlink {
text-transform: capitalize;
font-weight: 900;
font-size: 2em;
}

.fbtlink::before, .prolink::before {
content: "➥ ";
}

.geviert p {
display: block;
height: 72px;
}

.pro {
display: block;
font-size: 1.2vw;
font-weight: 600;
margin: 0 15px 15px 25px;
}

.proline {
display: block;
overflow: hidden;
height: 70px;
font-size: 1.0vw;
font-weight: 300;
margin: 0 15px 5px 25px;
padding: 0 0 0 10px;
}

.prolink {
display: block;
font-size: 0.8vw;
font-weight: 100;
text-align: right;
margin: 0 15px 15px 25px;	
	padding: 0 0 5px 0;
}

.text {
margin: 5px 30px 20px 30px;
float: right;
width: 30vw;
}

.mall:before {
content: "✉ ";
}

.mall:after {
content: "@jag.de";
}

.telfo:before, .telfint:before {
content: "✆ +495139 9855 "	
}

.teluk:before {
content: "✆ +4420 79932408"	
}

.visohead, .visotxt {
color: rgba(255, 255, 255, 1);	
margin: 35px 25% 0 25%;
text-shadow: 0px 0px 3px rgba(10, 10, 10, 1);
}

.visohead {
font-weight: 900;
font-size: 3em;
}

.visotxt {
font-size: 1.3em;	
}

.visotxt:last-child {
font-weight: 400;
margin-bottom: 55px;
}

.zitat p, .zitata p, .zitat p:last-child, .zitata p:last-child {
font-family: 'RobotoSlab';
display: block;
color: rgba(255, 255, 255, 1.0);
width: 40%;	
padding-left: 5%;
padding-right: 5%;
text-align: center;
vertical-align: middle;
}

.zitat p, .zitata p {
font-weight: 600;
font-size: 2.1vw;
margin-top: 150px;
text-shadow: 2px 2px 0px rgba(55, 55, 55, 1);
}

.zitata p, .zitata p:last-child {
margin-left: 50%;	
}

.zitat p:last-child, .zitata p:last-child {
font-weight: 100;
font-size: 1vw;
margin-top: 20px;
margin-bottom: 200px;
text-shadow: 1px 1px 0px rgba(55, 55, 55, 1) !important;
}

.fett {
font-weight: 900;
}

.light {
font-weight: 100;
}

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

a img {
border: none;
}

.size {
width: 100%;
}

.down {
position: absolute;
bottom: 90px;
left: 50%;
margin-left: -15px;
opacity: 0.3;
}

.imgintxt {
float: left;
}

.modimg {
float: right;
width: 70%;
margin: 0 0 10px 5%;
}

.titimg {
position: fixed;
height: 100vmin;
width: 100vmax;
}

.proicon {
border-radius: 3px;
border: 2px solid rgba(255, 255, 255, 1);
background-color: rgba(0, 98, 155, 1);
box-shadow: 0px 0px 2px 2px rgba(98, 98, 98, 0.2);
margin: 15px 0 5px 10px;
padding: 4px;
width: 35px;
}

/*--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);
}

#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('../bilder/JAG_h2_video.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}

/*--KARRIEREBUTTON---------------------------------------*/

.jobdisk {
display: block;
position: relative;
right: 0;
z-index: 1;
}

h7 {
text-align: left;
font-weight: 300;
font-size: 1.8vw;
text-transform: uppercase;
margin: 10px 0 10px 15px;
}

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

a {
font-weight: bold;
color: rgba(0, 0, 0, 1);
}

.bewer {
position: absolute;
top: 35vh;
right: 20vw;
padding: 20px 40px 20px 40px;
margin: 0 0 0 0;
color: rgba(255, 255, 255, 1);
font-weight: 700;
font-size: 1.3em;
text-align: center;
text-decoration: none;
box-shadow: 2px 6px 6px rgba(50, 50, 50, 1);
border: 3px solid rgba(255, 255, 255, 1);
background-color: rgba(0, 98, 155, 1);
transition-duration: 0.3s;
transition-timing-function: ease-out;
}

a.bewer:hover {
transition-duration: 0.3s;
transition-timing-function: ease-out;
color: rgba(0, 98, 155, 1);
box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.7);
background-color: rgba(255, 255, 255, 0.9);
border: 3px solid rgba(0, 98, 155, 1);
}

.sprung {
visibility: hidden; 
height: 0px !important; 
position: absolute; 
margin: -100px;
}

.fullbta, .fullbtb, .fbtbu {
display: block;
width: 100%;
height: 60vh;
text-decoration: none;
overflow: hidden;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0);
transition-duration: 0.3s;
transition-timing-function: ease-out;
}

.fullbta:hover, .fullbtb:hover, .fbtbu:hover {
box-shadow: inset 0px 0px 0px 15px rgba(255, 255, 255, 1);
transition-duration: 0.3s;
transition-timing-function: ease-out;
}

.fullbtc {
display: inline-block;
text-decoration: none;
overflow: hidden;
color: #545251;
}





.btn_text {
  display: block;
  height: 0;
  opacity: 0;
  color: #545251;
  font-weight: normal;
  transition: height 400ms, opacity 800ms;
  vertical-align:middel;
}

.btn_with_img {
  position:relative;
  height: 220px;
  width:calc(100% - 20px);
  display: inline-block;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
  text-decoration: none;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin:10px;  
  background-size: cover;
}

.btn_with_img:hover .btn_text {
  height: 45px;
  opacity: 1;
}



.btn_container {
 position:absolute;
 left:0;
 bottom:0;
 padding:5px;
 width:calc(100% - 10px);
 background: linear-gradient(90deg, rgba(242,242,242,1) 0%, rgba(242,242,242,0.7693277994791666) 100%);
}

.btn_title {
  display:block;
  color: rgba(0, 98, 155, 1);
  font-size: 25px;
  font-weight: bold;
}




.btn_link a {
  font-weight:normal;
  text-decoration:none;
}

.btn_link a:hover {
  text-decoration:underline;
}








.fullbtc .btchead {
}

.fullbtc .btctext {
}






.fullbtc .proline {
border-left: outset 5px rgba(0, 98, 155, 1);
}

.fullbtc .prolink {
border-right: inset 1px rgba(0, 98, 155, 0);
transition-duration: 1.5s;
transition-timing-function: ease;	
}

.fullbtc:hover .prolink {
border-right: inset 70px rgba(0, 98, 155, 0);
transition-duration: 0.3s;
transition-timing-function: ease;	
}

.fullbta:hover .fbtlink, .fullbtb:hover .fbtlink, .fbtbu:hover .fbtlink {
text-decoration: underline;
}

.fullbta, .fbtbu {
color: rgba(0, 98, 155, 1);
}

.fullbtb {
color: rgba(255, 255, 255, 1);
}

.fbtbu {
padding-top: 50px;
}

.jobnavi {
color: rgba(255,255,255,1.00) !important;
text-decoration: none;
}

.jobnavi:before {
content: "⇓ ";
}

.jobnavi:hover {
text-decoration: underline 1px solid #ffffff;	
}

.jobbutton, .jobbuttona {
border-radius: 3px;
border: 2px solid rgba(255, 255, 255, 1);
background-color: rgba(0, 98, 155, 1);
box-shadow: 0px 0px 2px 2px rgba(98, 98, 98, 0.2);
margin: 15px 0 5px 10px;
padding: 4px;
width: 35px;
color: rgba(255, 255, 255, 1.00);
text-decoration: none;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}

.jobbuttona {
font-weight: 100 !important;	
}

.jobbutton:hover, .jobbuttona:hover {
border-radius: 3px;
border: 2px solid rgba(0, 98, 155, 1);
background-color: rgba(0, 98, 155, 0);
color: rgba(0, 98, 155, 1.00);
}

.kon {
padding: 20px 40px 20px 40px;
margin: 0 0 0 0;
color: rgba(255, 255, 255, 1);
font-weight: 700;
font-size: 1.8em;
text-align: center;
text-decoration: none;
border: 3px solid rgba(0, 98, 155, 0);
background-color: rgba(0, 98, 155, 1);
transition-duration: 0.3s;
transition-timing-function: ease-out;
}

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

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(225, 255, 255, 0.4);
text-decoration: underline;
}

a.ext {
color: #e33751;
}

.fb, .tw, .ku, .xi, .li, .toponehundred {
display: block;
width: 40px;
height: 40px;
border: 2px solid #f1f1f1;
margin: 0 0 20px 0;
border-radius: 50%;
}

.fb {
background: url(../bilder/share_fb.png)
            center center;
background-size: cover;
}

.ku {
background: url(../bilder/share_ku.png)
            center center;
background-size: cover;
}

.tw {
background: url(../bilder/share_tw.png)
            center center;
background-size: cover;
}

.xi {
background: url(../bilder/share_xi.png)
            center center;
background-size: cover;
}

.li {
background: url(../bilder/share_li.png)
            center center;
background-size: cover;
}

.toponehundred {
background: url(../bilder/share_top100.png)
            center center;
background-size: cover;
}

.fb:hover {
transition-duration: 0.3s;
transition-timing-function: ease-out;
background: url(../bilder/share_fb.png)
            #3b5998
            center center;
background-size: cover;
border: 2px solid #3b5998;
}

.ku:hover {
transition-duration: 0.3s;
transition-timing-function: ease-out;
background: url(../bilder/share_ku.png)
            #000000
            center center;
background-size: cover;
border: 2px solid #000000;
}

.tw:hover {
transition-duration: 0.3s;
transition-timing-function: ease-out;
background: url(../bilder/share_tw.png)
            #1da1f2
            center center;
background-size: cover;
border: 2px solid #1da1f2;
}

.xi:hover {
transition-duration: 0.3s;
transition-timing-function: ease-out;
background: url(../bilder/share_xi.png)
            #065d55
            center center;
background-size: cover;
border: 2px solid #065d55;
}

.li:hover {
transition-duration: 0.3s;
transition-timing-function: ease-out;
background: url(../bilder/share_li.png)
            #0a66c2
            center center;
background-size: cover;
border: 2px solid #0a66c2;
}

.toponehundred:hover {
transition-duration: 0.3s;
transition-timing-function: ease-out;
background: url(../bilder/share_top100-hover.png)
            #ffffff
            center center;
background-size: cover;
border: 2px solid #ffffff;
}

a.dwbt {
display: block;
clear: both;
padding: 20px 40px 20px 40px;
margin: 0 0 0 0;
color: rgba(255, 255, 255, 1);
font-weight: 700;
font-size: 1.5em;
text-align: center;
text-decoration: none;
border: 3px solid rgba(0, 98, 155, 0);
background-color: rgba(0, 98, 155, 1);
transition-duration: 0.3s;
transition-timing-function: ease-out;
}

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

/*--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(255, 255, 255, 1);
}

#steuerung a:first-child {
float: left;
display: block;
text-align: center;
padding: 25px 0 0 0;
text-decoration: none;
font-weight: 300;
font-size: 1.3em;
transition-duration: 0.3s;
transition-timing-function: ease-out;
border-bottom: none;
}

#steuerung a {
float: left;
display: block;
text-align: center;
height: 30px;
padding: 25px 12px 16px 12px;
text-decoration: none;
text-transform: uppercase;
color: rgba(34, 34, 34, 1.0);
font-weight: 300;
font-size: 1.1em;
transition-duration: 0.3s;
transition-timing-function: ease-out;
border-bottom: 4px solid rgba(0, 98, 155, 0);
}

#steuerung a:hover {
color: rgba(0, 98, 155, 1.0);
transition-duration: 0.3s;
transition-timing-function: ease-out;
border-bottom: 4px solid rgba(0, 98, 155, 1);
}

#steuerung a:hover:first-child {
border-bottom: none;
}

.menue-button {
display: none;
}


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

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

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

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

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

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

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

}


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


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

        h1 {
        margin: 40px 0 10px 0;
        font-size: 7vw;
        }

        .atf {
		font-size: 1.3vw;
		line-height: 2.0vw;
		margin: 0 0 50px 0;
		}
	
	    .geviert {
		width: 33%;
		}

}

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

        h3 {
        font-size: 2em;
        }

        h4 {
        font-size: 2em;
        margin: 40px 0 40px 1%;
        }
	
		.proserv {
		float: left;
		width: 100%;
		padding: 0px 0% 40px 0%;
		}
	
		.proserv h3 {
		margin: 10px 10% 30px 10%;
		width: 80%;
		}
	
		.proserv h6 {
		margin: 10px 0 30px 0;
		font-size: 0.9em;
		width: 100%;
		}
	
		.text {
		margin: 5px 10% 20px 10%;
		width: 80%;
		}
	
		.stopfloat {
		margin-left: 8%;
		margin-bottom: 10%;
		}
	
		.atf {
		font-size: 1.1em;
		line-height: 2.3vw;
		margin: 0 0 50px 0;
		}

        #tit {
		top: 20vh;
		left: 10%;
		width: 80%;
		}
	
		.bewer {
		top: 22vh;
		right: 10vw;
		}
	
		.mhydro {
		background-image: none;
		}
	
		.blo {
		width: 70%;
		margin: 0 15% 50px 15%;
		}
	
		.pro {
		font-size: 1.8vw;
		}
	
		.motxt, .btz {
		font-size: 1.05em;
		line-height: 1.3em;
		}

}

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


        h2 {
        width: 100%;
        }

		.atf {
		font-size: 1.3em;
		line-height: 1.2em;
		margin: 0 0 50px 0;
		}

        #tit {
		top: 25vh;
		left: 10%;
		width: 80%;
		}
	
		.blo {
		width: 80%;
		margin: 0 10% 50px 10%;
		}

        #social {
        right: 10px;
        }

        .fb, .tw, .ku, .xi, .li, .toponehundred {
        width: 30px;
        height: 30px;
        border: 1px solid #f1f1f1;
        margin: 0 0 20px 0;
        }

        .fb:hover {
        border: 1px solid #3b5998;
        }

        .ku:hover {
        border: 1px solid #000000;
        }

        .tw:hover {
        border: 1px solid #1da1f2;
        }

        .xi:hover {
        border: 1px solid #065d55;
        }

        .li:hover {
        border: 1px solid #0a66c2;
        }
        
        .toponehundred:hover {
          border: 1px solid #e2d0a8;
        }
	
		.zitat, .zitata {
		width: 100%;
		margin: 0 0 5px 0;
		}	
	
		.zitat {
		background-position: 70% top;
		}
	
		.zitata, .mono {
		background-position: 20% top;	
		}
	
		.zitat p, .zitata p {
		font-size: 1.3em;
		width: 90%;
		margin-top: 300px;
		margin-bottom: 5px;
		background-color: rgba(0, 98, 155, 0.7);
		}

		.zitata p, .zitata p:last-child {
		margin-left: 0%;	
		}

		.zitat p:last-child, .zitata p:last-child {
		font-weight: 100;
		font-size: 0.8em;
		width: 90%;
		text-aling: center;
		margin-top: 0px;
		margin-bottom: 0px;
		}

}

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

        h1 {
        margin: 40px 0 10px 0;
        font-size: 3em;
        }
	
		h2 {
		font-weight: 900;
		font-size: 1.3em;
		margin: 0 0 40px 0;
		}

        h3 {
        font-size: 1.5em;
        }

        h4 {
        font-size: 5vw;
        margin: 40px 0 40px 1%;
        }

        .fbttit {
        margin-top: 20%;
        font-size: 3em;
        }

        .fbttxt {
        font-size: 1.5em;
        }
	
		.pro {
		font-size: 1.3em;
		}

        .duo, .quad {
        width: 100%;
        }
	
	    .geviert {
		width: 50%;
		}

        #boden {
        width: 90%;
        height: 70px;
        padding: 10px 5% 0 5%;
        }


}

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

        #boden {
        height: 140px;
        }
	
		#inhalt {
		top: 75px;	
		}
	
		.pro {
		font-size: 1.1em;
		}
	
		#social, #tit, #bgvid, #strtbtns, .filter {
		visibility: hidden;	
		width: 0px;
		height: 0px;
		overflow: hidden;	
		}
		
		.btz {
		clear: both;	
		width: 100%;
		text-align: center !important;
		}
	
		.visohead, .visotxt {
		margin: 35px 10% 0 10%;
		}
	
		.fullbta, .fullbtb, .fbtbu { 
		height: 40vh;
		}
	
		.fbttit {
		margin-top: 20%;	
		}
	
		.fbttit, .fbttxt, .fbtlink {
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
		}

		.fbtbu .fbttit, .fbtbu .fbttxt, .fbtbu .fbtlink {
		width: 80%;
		margin: 0px 10% 0 10%;
		}
	
		.mono {
		min-height: 10vh !important;	
		}
	
		.pro {
		font-size: 1.4em;
		}

		.proline {
		font-size: 1em;
		}

		.prolink {
		font-size: 0.9em;
		}
	
		.proserv {
		float: left;
		width: 100%;
		padding: 0px 0% 40px 0%;
		}
	
		.proserv h3 {
		margin: 10px 10% 30px 10%;
		width: 80%;
		}
	
		.proserv h6 {
		margin: 10px 0 30px 0;
		font-size: 0.9em;
		width: 100%;
		}
	
		.text {
		margin: 5px 10% 20px 10%;
		width: 80%;
		}
	
		.geviert {
		clear: both;
		width: 100%;
		}
	
		.stopfloat {
		margin-left: 8%;
		margin-bottom: 10%;
		}
	
		.zitat, .zitata {
		width: 100%;
		margin: 0 0 5px 0;
		}	
	
		.zitat {
		background-position: 70% top;
		}
	
		.zitata, .mono {
		background-position: 20% top;	
		}
	
		.zitat p, .zitata p {
		font-size: 1.3em;
		width: 90%;
		margin-top: 300px;
		margin-bottom: 5px;
		background-color: rgba(0, 98, 155, 0.7);
		}

		.zitata p, .zitata p:last-child {
		margin-left: 0%;	
		}

		.zitat p:last-child, .zitata p:last-child {
		font-weight: 100;
		font-size: 0.8em;
		width: 90%;
		text-aling: center;
		margin-top: 0px;
		margin-bottom: 0px;
		}

}