/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(static/Roboto400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(static/Roboto500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body, html{
	max-width:100%;
	padding:0;
	margin:0;
	height:100%;
}
body{
background-color:#f2f8fd;
font-family: 'Roboto', sans-serif;
color:#646464;
background-repeat:no-repeat;
}

form label{
width: 20%;
display: inline-block;
margin-right: 32px;
vertical-align: top;
margin-top: 15px;
}
input[type=text], select, textarea, input[type=submit] {
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
width: 60%;
display: inline-block;
font-family: roboto, sans-serif;
font-size: 16px;
}
.rfrnc h3.big{
font-size:32px;
}
h1,h2,h3,h4{
font-size: 24px;
font-weight: normal;
color: #5e5c5c;
margin-top: 0px;
}
h1{
font-size: 32px;	
}
input[type=submit], a.button {
  background-color: #fff;
  color: #8e9399;
  padding: 12px 20px;
  border: 1px solid #448ccd;
  border-radius: 4px;
  cursor: pointer;
  text-decoration:none;
}
 a.button{
color: #448ccd;
position: relative;
display: block;
margin: 20px 0 15px;
text-align:center;
 }
.form-row{
	width:100%;
	display:flex;
}
.form-td{
width: 100%;
}

input[type=submit]:hover, a.button:hover {
  background-color:  #448ccd;
  color:#fff;
   border: 1px solid #fff;
   transition:0.5s all ease;
   text-decoration:none;
}
section.horiz{
background-repeat: no-repeat;
background-size: 19%;
background-position: 34% 61px;
background-image:url(img/contact.png);
}
.sec-content {
}

#logo{
width: 42%;
position: relative;
padding: 19px 35px;
display: inline-block;
}
.adress.md-2{
	margin-top:27px;
}

.rfrnc.plain{
background-color: transparent;
border: none;
box-shadow: none;
}
.rfrnc.plain p{        
margin: 17px 0;
padding: 0;
}
#logo img{
width: 298px;
position: relative;
}
header{
pointer-events: none;
height: 125px;
overflow: visible;
z-index: 1000;
position: fixed;
width: 100%;
}
nav#mainnav{
display: inline-block;
width: 590px;
vertical-align: top;
top: 40px;
right:5vw;
position: absolute;
background-color: rgba(242, 248, 253, 0.8);
}
a{
 outline: 0;
}
section{
position: relative;
display: block;
height: fit-content;
min-height: 500px;
width: 94%;
padding-top: 170px;
padding-left: 3%;
padding-right: 3%;
text-align:center;
padding-bottom: 195px;
}
.form-td.line{
	margin:10px 0;
}
nav#mainnav a{
	cursor:pointer;
	text-decoration:none;
	transition:1s all ease;
	color: #5e5c5c;
}
nav#mainnav a:hover, nav#mainnav a:active{
	color:#448ccd;
	transition:0.2s all ease;
}
nav#mainnav li{
display: inline;
color: #8e9399;
margin-right: 7%;
}
#wave-hldr{
display: flex;
max-width: 65%;
margin: 5% auto;
height: 207px;
position:relative;
}
footer{
	position:fixed;
	pointer-events: none;
	bottom:0px;
	width:100%;
	z-index:1000;
}
#Sine_thrd_svg{
top: -62px;	
}
#Sine_scnd_svg{
top: -34px;		
}
a:link, a:visited{
text-decoration:none;
color:#0c79fc;
transition:0.5s all ease;		
}
a:hover{
text-decoration:underline;
transition:0.5s all ease;	
}
#noise-sick{
	background-image:url(img/noise-sick.jpg);
}
#what-is-noise{
	background-image:url(img/what-is-noise.jpg);
	background-position: -185px 0px;
}
#noise-protection{
	background-image:url(img/noise-protection.jpg);
}
#about-me{
	background-image:url(img/simon-boehmer.jpg);
}
#imprint, #dataprotectionpolicy {
	background-image:none;
	opacity:0;
}
.md-2-bx .plain.pic{
background-repeat: no-repeat;
width: 300px;
height: 300px;
display: block;
flex: inherit;
top: 25px;
}
.form-td p{
display:inline;
margin:0;
padding:0;	
}
.sine-img{
width: 80px;
height: 80px;
position: absolute;
z-index: 10;
background-color: white;
border-radius: 50%;
box-shadow: 0px 0 20px -1px #5b5b5b63;
background-repeat: no-repeat;
background-size: cover;
border: 1px solid #fff;
cursor:pointer;
transition: 0.2s all ease;
filter:grayscale(100);
}
#wave-upper{
background-image: url(img/header-uppr-wave.svg);
pointer-events: none;
width: 100%;
height: fit-content;
background-repeat: no-repeat;
display: inline-block;
}
ul.service-listing, ul.straight {
padding:0 15px;
}
span.grey{
color:#5e5c5c;
font-size:16px;
}
ul.service-listing li, ul.straight li{
	margin:10px 0;
	list-style-type: circle;
}
#wave-footer{
background-image: url(img/footer-wave.svg);
width: 100%;
height: 119px;
background-position: -1px 0px;
background-repeat: no-repeat;
background-size: cover;
z-index: 4;
position: relative;
}
.rspnsv-bx{
display: flex;
width: 100%;
justify-content: center;
flex-wrap: wrap;
height: auto;
align-items: stretch;
align-content: flex-start;
}
.rfrnc{
display: flex;
border: 1px solid #f4f4f4;
flex-wrap: wrap;
text-align: center;
flex: 0 0 36vw;
padding: 20px;
margin: 1%;
border-radius: 10px;
background-color: white;
box-shadow: 0 0 10px -9px #313131;
}
.rfrnc h3{
color: #448ccd;
display: block;
width: 100%;
margin: 0 0 10px 0px;
font-size: 18px;
}
.rfrnc p{
	margin:0;
	padding:0;
}
.md-2{
display: inline-block;
width: 49%;
text-align: left;
vertical-align: top;
margin-top: 25px;
}
#footer-note{	
pointer-events: all;
right: 0;
position: absolute;
bottom: -11px;
z-index: 10;
}
section.nt-i-vsbl{
display:none;	
}
.tmprly-vsbl{
display:block;	
}
nav#footer-nav li{
	display:inline;
	color:#f2f8fd;
	list-style-image:none;
}
nav#footer-nav li a{
color: #f2f8fd;
margin-right: 28px;
font-size: 12px;
}
#Phone img{
margin-right: 13px;
margin-left: 38px;
}
#footer-nav ul.nav{	
pointer-events: all;
padding-top: 0;
margin-top: 11px;
}
#Phone p{
color: #f2f8fd;
font-weight: normal;
font-size: 16px;
line-height: 22px;
}
#Phone{
display: none;
align-items: center;
}
#wave-back-footer{
background-image: url(img/footer_wave_white.svg);
width: calc(100vw + 175px);
pointer-events: none;
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='img/footer_wave_white.svg', sizingMethod='scale');
height: 208px;
background-position: 0 -12px;
background-repeat: no-repeat;
position: absolute;
top: -65px;
z-index: 2;
transform: rotate(2deg);
left: -120px;
background-size: auto;
border-radius: 0 215px 0 0;
}
#footer-mod{
pointer-events: all;
background-image: url(img/Noise-Ear.png);
position: absolute;
left: 0px;
top: -80px;
padding: 64px 20px 48px 58px;
background-size: 59%;
background-repeat: no-repeat;
background-position: -15px 5px;
border-radius: 0 218px 0 0;
width: 300px;
z-index: 10;
}
#footer-mod p{
margin:0;
padding:0;
}
#footer-mod p a{
text-decoration: none;
color: #0c79fc;
font-size: 14px;
line-height: 20px;
transition:0.7s all ease;
}
#footer-mod p a:hover{
padding-left:10px;
transition:0.3s all ease;
}
.sine-img.zoomed {
width: 120px;
height: 120px;	
transition: 0.4s all ease;
margin-top:-20px;
filter:grayscale(0);
}

.sine-img.zoomed.x{
width: 50px;
height: 50px;
background-image: none !important;
background-color: #448ccd;
box-shadow: none !important;
right: -25px !important;
top: -6px !important;
border:2px solid #c3c4ff;
}
.sine-img.zoomed.x:hover{
background-color: #f2f8fd;
border:2px solid #448ccd;
}
.sine-img.zoomed.x:hover .x-gen{
background-color: #448ccd;	
}
.sine-img.zoomed.x a{
color: white;
font-weight: bold;
font-size: 30px;
margin: 0 auto;
position: absolute;
text-align: center;
width: 100%;
margin-top: 7px;
}
#Sine_frst_svg{
top: 0px;	
}

.x-first,.x-gen{
background-color: white;
height: 30px;
width: 6px;
transform: rotate(45deg);
border-radius: 10px 10px 10px 10px;
position: absolute;
left: 50%;
margin-left: -3px;
margin-top: 10px;
}
.x-second{

transform: rotate(135deg);

}
.service-text{
opacity:0;
transition:0.4s all ease;
position:absolute;
height:auto;
padding: 10px 30px;
background-repeat:no-repeat;
}
.wve.zoomed .service-text.frthelem.zoomed{
	background-position: 0 -80px;
}

.wve.zoomed .service-text.zoomed{
transition: 0.4s all ease;
opacity: 1;
background-color: #fafbff;
border-radius: 10px;
box-shadow: 0 0 10px -2px #ccc;
height: auto;
z-index: 8;
background-position: 0 -110px;
padding-top: 100px;
background-size: contain;
text-align: left;
padding: 125px 30px 20px 30px;
}
.wve.zoomed{
	height:auto;
	width: 333px !important;
}
.wve {
overflow: visible;
display: flex;
position: relative;
width: 319px;
overflow:visible !important;
}
.wve svg{
	display:block;
	margin:auto;
	position:relative;
}


#firstelem, .md-2-bx .pic.firstelem-pic{
background-image: url(img/SchallschutzMauer.jpg);
top: 33px;
background-position: 0px 20px;
left: -40px;
}
#secelem, .md-2-bx .pic.secelem-pic{
background-image: url(img/SchallschutzWand.jpg);
top: 78px;
background-position: -21px 13px;
right: -37px;
}
#thrdelem, .md-2-bx .pic.thrdelem-pic{
background-image: url(img/SchallschutzDDkdr.jpg);
top: -28px;
background-position: 3px 2px;
right: -37px;
}
#frthelem, .md-2-bx .pic.frthelem-pic{
background-image: url(img/SchallschutzAuditorium.jpg);
top: 27px;
background-position: -17px -1px;
right: -37px;
}
.md-2-bx .pic.thrdelem-pic, .md-2-bx .pic.firstelem-pic, .md-2-bx .pic.frthelem-pic, .md-2-bx .pic.secelem-pic{
	top:100px;
	background-position:0 0;
	left:0;
}
.sine-img.zoomed{
top: -14px !important;
right: -39px !important;
left:inherit !important;
}
.sine-img h2{
position: absolute;
margin-top: 87px;
font-size: 14px;
margin-left: 5px;
color: #448ccd;
}
.sine-img.zoomed h2{
	display:none;
}
.w{
border:1px solid #666;
display:flex;
height:30%;
width:25%;
}

#wavesvg{
        fill: #448ccd;
        fill-rule: evenodd;
}
.rfrnc.md-2{
text-align:left;	
flex:0 0 33%;
max-width: 600px;
}
.content-action-button{
width: calc(100% - 42px);
}
.rspnsv-bx.md-2-bx{
	justify-content:center;
}
.rfrnc.md-2.info p{
padding:15px 0px;
}
.rfrnc.md-2 li{
list-style-type:circle;
margin: 10px 0;
}
.md-2-bx .pic{
background-image: url(img/SchallschutzMauer.jpg);
width: 200px;
background-position: 0px -3px;
height: 200px;
border-radius: 50%;
position: relative;
top: 100px;
box-shadow: 0 0 10px -2px #666;
border: 2px solid white;
left: 0;
}

.round {
  position: relative;
}

.round label {
    background-color: #f2f8fd;
    border: 2px solid #0c79fc;
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    left: 0;
    position: absolute;
    top: 0;
	width: 28px;
}

.round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 3px;
    left: 5px;
    opacity: 0;
    position: absolute;
    top: 7px;
    transform: rotate(-45deg);
	width: 8px;
}

input.error, textarea.error, checkbox.error{
border:1px solid red;
color:red;
}
input.validated, textarea.validated, checkbox.validated{
border:1px solid #0c79fc;
color:#666;
}
p.errormsg{
display: block;
font-size: 10px;
margin-top: -14px;
margin-bottom: 10px;
color: red;
position: absolute;
margin-left: 196px;
}
form .round label {
    width: 20px;
    display: inline-block;
    vertical-align: top;
	margin-top: -2px;
	margin-left: 22%;
    position: relative;
    margin-right: 5px;
}

.round input[type="checkbox"] {
  visibility: hidden;
}

.round input[type="checkbox"]:checked + label {
  background-color: #0c79fc;
  border-color: #f2f8fd !important;
}

.round input[type="checkbox"]:checked + label:after {
  opacity: 1;
}