body,html {
font-family: 'Eurostile';
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
@font-face{
font-family: "EurostileDemi";
src: url("fonts/EurostileLTStd-Demi.otf");
}
@font-face{
font-family: "Eurostile";
src: url("fonts/EurostileLTStd.otf");
}
.content_block{
display: block;
position: relative;
width: 100%;
z-index: 0;
}
.slider_wrapper{
margin-top: 30px;
height: 60px;
color: black;
}
.flexbox.logo_center{
height: 125px;
width: 180px;
background: url(graphics/fromm_icon-logo.svg) no-repeat;
}
.flexbox.logo_2{
position: relative;
}
.flexbox.logo{
position: absolute;
right: 19%;
top: 10px;
display: block;
height: 140px;
width: 190px;
background: url(graphics/fromm_icon-logo.svg) no-repeat;
z-index: 1;
}
.flexbox.logo_small{
height: 16px;
z-index: 1;
top:-3px;
margin-left: 10px;
}
.flexbox.logo_l{
width: 700px;
}
.underline > div{
position: relative;
text-align: left;
margin-right: 20px;
margin-top: 0px;
color: black;
}
.main_container{
display: block;
position: relative;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
z-index: -1;
}
.line{
width: 100%;
height: 47px;
border-bottom: 1px solid black;
position: absolute;
}
.line.v2{
margin-top: 30px;
}
.flexwrap{
display: flex;
flex-flow: row wrap;
}
.flexwrap2{
display: flex;
flex-flow: row wrap;
}
.flexwrap2.space_between{
justify-content: space-between;
}
.flexwrap_col{
display: flex;
flex-flow: column wrap;
}
.flexwrap.space_between{
justify-content: space-between;
}
.flexwrap_col.space_between{
justify-content: space-between;
}
.flexwrap.center{
justify-content: center;
}
.flexwrap.spaceven{
justify-content: space-evenly;
}
.flexwrap.flexend{
justify-content: flex-end;
}
.flexwrap_col.spaceven{
justify-content: space-evenly;
}
b{
font-weight: 900;
}
.flexbox{
position: relative;
}
.content_small h2{
font-size: 20px;
margin-top: 5%;
font-family: "EurostileDemi";
margin-left: 20px;
}
.content_small ul{
width: 50%;
font-size: 15px;
}
.content_small li{
margin: 4px 0;
}
.content_small > div{
margin-bottom: 40px;
}
.flexbox.content_small{
width: 100%;
margin-top: 0px;
font-family: "Eurostile";
margin-left: 370px;
width: 100%;
}
.flexbox.content_small p{
margin-top: 0;
width: 100%;
margin-left:-100px;
}
.content_icon_1{
position: relative;
width: 91.5%;
height: 405px;
object-fit: cover;
padding-bottom: 30px;
max-width: 100%;
}
.content_icon_1_edit{
position: relative;
width: 90%;
height: 405px;
object-fit: cover;
padding-bottom: 30px;
}
.overlayy{
position: relative;
background-color: rgba(0,0,0,0.5);
z-index: 2;
}
.content_icon_2{
position: relative;
height: 183px;
}
.content_icon_3{
position: relative;
margin-left:0px;
height: 183px;
}
.content_icon_4{
position: relative;
margin-left:0px;
height: 183px;
}
.new_content_icon{
height: 13em;
}
.texticon{
position: relative;
height: 40px;
z-index: 2;
background-color: white;
width: 190px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap:5.4em;
margin-left: 0;
}
.texticon > #sanier{
left: 0px;
}
.texticon.v3{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap:3em;
}
.texticon.v2 > p{
max-width: 100%;
width: 345px;
color: black;
}
.texticon.v2 > a{
background-color: transparent;
}
.texticon > a{
background-color: white;
font-size: 18px;
font-family: "Eurostile";
text-align: center;
padding-top: 10px;
position: relative;
height: 40px;
width: 200px;
left: 10px;
}
.texticon >p {
background-color: white;
font-size: 17px;
font-family: "Eurostile";
text-align: center;
padding-top: 10px;
position: relative;
height: 40px;
}
.texticon > a > p{
color: #000;
}
.texticon.v2 > a > p {
background-color: #3973b9;
width: 70px;
height: 70px;
font-size: 13px;
color: white;
align-items: center;
justify-content: center;
padding-top: 27px;
}
.texticon.v2 > a{
left: -74px;
top: 31px;
}
/*
#denk{
left: 14px;
}
*/
#denk2{
left: 14px;
}
.ansehenButton{
position: absolute;
right: 0;
top:38px;
}
.cell{
margin-top: 40px;
padding: 50px;
margin-left: 10%;
padding-bottom: 0%;
align-items: center;
padding-top:40px;
padding-right: 170px;
padding-left: 135px;
position: relative;
}
.tag{
position:fixed;
left: 75px;
font-family: "Eurostile";
}
.tag.v2{
position:fixed;
left: 70px;
}
.tag.v3{
position:fixed;
left: 80px;
}
.contact{
height: 50px;
width: 200px;
background-color:#3973b9 ;
color: white;
text-align: center;
padding-top: 15px;
font-family: "Eurostile";
margin-right: 265px;
margin-top: 50px;
}
.contact:focus , contact:visited
{
color: white;
text-decoration-color: transparent;
}
.flexbox.content2{
max-width: 100%;
height: auto;
background-color:#f0f0f0;
position: relative;
z-index: 1 !important;
padding-bottom: 0;
}
.overlay{
background-color: rgba(0,0,0,0.5);
}
.flexbox.content3{
width: 100%;
margin-top: 0px;
bottom:100px;
}
.flexbox.content4{
width: 100%;
background-color:#f0f0f0;
bottom:390px;
}
.flexbox._footer{
position: relative;
margin-top: 20px;
width: 100%;
z-index:-1;
}
.footer_wrapper > p{
position: relative;
margin-left: 19%;
z-index:-1;
font-family: "Eurostile";
font-size: 11p;
}
img{
position: relative;
z-index: 1;
}
.spacer{
display: block;
height: 10px;
}
.logoS{
height:70px;
}
/*KONTAKT*/
.content_left{
display: block;
float:left;
width: 40%;
margin-left: 100px;
margin-top: 10px;
position: relative;
z-index: 2;
font-family: "Eurostile"
}
.content_right{
display: block;
float:right;
width:43%;
position: relative;
z-index: 2;
}
.logo_contact{
float: left;
height:20px;
margin-right: 10px;
}
.logo_contact.v2{
top: -0.8px;
}
.anordnung{
grid-template-rows: 1fr;
}
.tel > p {
grid-template-rows: 1fr 1fr 1fr;
margin-left: 30px;
}
.submit_{
width:70px;
height: 70px;
background: url(graphics/fromm_icon-senden.svg) no-repeat;
float: right;
right: 0;
}
.modal-body{
margin-top: 60px;
width: 100%;
height: 570px;
position:relative;
z-index: 2;
border-radius: 0;
}
.modal-body > h5{
bottom:30px;
}
#kontaktForm{
height: 600px;
}
.modal-body h4{
font-family: "EurostileDemi";
}
.modal-header{
}
.lightbox_right > h5{
font-family: "EurostileDemi";
}
.mod{
margin: 0 auto;
position:relative;
z-index:1 !important;
overflow:hidden;
}
.linie{
top: 10;
}
input{
width: 300px;
border: 1px solid lightgrey;
}
textarea{
border: 1px solid lightgrey;
}
form{
font-family: "Eurostile";
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}
/**/
/*Lightbox Modal*/
.lightbox_left{
position: relative;
object-fit: cover;
justify-content: center;
}
.lightbox_right{
display: grid;
grid-template-rows: 40px 40px 40px ;
grid-gap:6em;
float: right;
width: 30%;
}
.lightbox_right_22{
display: grid;
grid-template-rows: 50px 50px 50px 50px;
grid-gap:0em;
float: right;
}
.lightbox_right_2.v2{
display: grid;
grid-template-rows: 40px 40px 40px 40px;
grid-gap:6.7em;
float: right;
}
.modal-body v1{
height: 700px;
}
.lightbox_right_2.v3{
display: grid;
grid-template-rows: 40px 40px 40px 40px 40px;
grid-gap:6em;
float: right;
}
.lightbox_right_2{
display: grid;
grid-template-rows: 40px 40px 40px 40px 40px;
grid-gap:6em;
float: right;
}
.lightbox_right_3{
display: grid;
grid-template-rows: 40px 40px 40px 40px 40px;
grid-gap:6em;
float: right;
}
#secondModal,#modal1,#thirdModal{
height: 450px;
width: 500px;
}
.lightbox_right > img{
max-width: 100%;
height:110px;
}
.lightbox_right_2 > img{
max-width: 100%;
height:110px;
}
.lightbox_right_3 > img{
max-width: 100%;
height:110px;
}
.extra_item{
width: 130px;
object-fit: cover;
}
.item1{
width: 100%;
height:400px;
left:60px;
bottom: 20px;
}
.item1.v2{
height: 550px;
}
.item2{
left: 220px;
bottom: 420px;
width: 130px;
object-fit: cover;
}
.item2.v2{
left: 360px;
bottom: 792px;
}
.item2.v4{
left: 340px;
bottom: 792px;
}
.item2.v3{
left: 200px;
}
.item2.v5{
left: 200px;
}
.item3{
width: 100%;
object-fit: cover;
left: 50px;
height: 400px;
bottom: 21px;
}
.item4{
width: 100%;
object-fit: cover;
left: 55px;
height: 400px;
bottom: 21px;
}
.item5{
width: 700px;
height: 450px;
bottom: 20px;
left: 70px;
object-fit: cover;
}
.prev , .next{
display: none !important;
}
.noShow{
display: none;
}
.mySlides,.mySlides_2,.mySlides_3, .slider{
display:none;
}
.modal-body > .footer_wrapper > p{
display: none;
}
.item1.v3{
left: 40%;
width:100%;
object-fit: cover;
justify-content: center;
align-items: center;
}
.iframe{
font-family: 'Eurostile';
}
@media (max-width: 1410px){
.main_container{
max-width: 900px;
}
.cell{
padding:0;
margin-right: 90px;
padding-left: 100px;
}
.content_icon_4{
margin-top: 4px;
}
.content_small ul{
width: 70%;
}
.flexbox.content_small{
margin-left: 150px;
}
.flexbox.content4{
bottom: 500px;
width: 100%;
}
.flexbox.content3{
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
bottom: 250px;
}
.texticon{
grid-template-columns: 1fr 1fr;
grid-gap:5em;
}
.texticon.v2{
bottom: 100px;
}
#denk{
left: 0px;
margin-top: 40px;
}
.lightbox_right , .lightbox_right_2 , .lightbox_right_3{
display: none !important;
}
#pic1, #modal2pic1 , #modal3pic1 {
display: none;
}
.item1, .item3 , .item4{
width: 90%;
left:30px;
}
.slider , .mySlides , .mySlides_2,.mySlides_3{
display:block;
}
.prev{
position: fixed;
float: left;
height: 40px;
z-index: 2;
left: 1;
top: 51%;
display: block !important;
}
.next{
display: block !important;
position: fixed;
height: 40px;
z-index: 2;
right: 2%;
top: 50%;
transform: rotate(180deg);
float: right;
}
.lightbox_right_2.v2{
display: none !important;
}
.lightbox_right_2.v3{
display: none !important;
}
.flexbox.logo_small{
margin-left: 2px;
}
.contact{
margin-right: 150px;
}
.item5{
width: 500px;
height: 430px;
left: 40%;
}
.tag{
left: 200px;
}
.tag.v3{
left: 200px;
}
.tag.v2{
left: 200px;
}
}
@media (max-width: 991px){
#kontaktForm{
height: 1110px;
}
#kontaktForm > .content_right{
right: 40%;
}
.submit_{
float: left;
}
.item1.v3{
left: 60px;
height:470px;
}
}
@media (max-width: 910px){
.main_container{
max-width: 100%;
}
.footer_wrapper > p {
margin-left:10%;
}
.flexbox.content_small p{
margin-left: -50px;
}
.lightbox_right{
display: none;
}
.lightbox_left > .item1{
width: 100%;
}
h2 > img{
position: relative;
margin-right: 70%;
}
.cell {
padding-left: 0;
}
.content_small ul {
width: 80%;
}
.texticon{
grid-gap:5em;
}
.flexbox.content4{
bottom:500px;
}
.item1.v3{
left: 12%;
}
.tag ,.tag.v2,.tag.v3{
left: 110px;
}
.slider > .footer_wrapper{
display: none;
}
.prev , .next{
bottom: 60px;
}
}
@media (max-width: 729px){
.flexbox.content4{
bottom:685px;
}
}
@media (max-width: 704px){
.flexbox.content3{
margin-left: 0;
width: 60%;
bottom: 600px;
}
#sanier{
left: 0;
}
.item5{
width: 600px;
}
.item1.v3{
left: 20%;
}
.content_icon_3{
height: 261px;
top: 2px;
}
.content_icon_2{
height: 270px;
}
.content_icon_4{
height: 250px;
}
#denk{
margin-left:0px;
}
.flexbox.content4{
bottom: 900px;
}
.flexbox._footer {
width:67%;
}
.flexbox._footer > a{
margin-top: 7%;
}
.flexbox.content_small p {
font-size: 12px;
margin-left: 20px;
}
.flexbox.content_small h2 {
font-size: 21px;
}
.content_small > div{
margin-bottom: 20px;
}
.content_right{
float:none;
left: 25%;
width: 48%;
}
.content_left{
float: none;
width: 100%;
margin-left: 0px;
left: 25%;
margin-bottom: 50px;
}
.modal-body iframe{
padding-bottom: 50px;
}
h2 > img{
margin-right: 50%;
margin-top: 10px;
}
.texticon.v2 > p{
width: 100px;
text-align: center;
margin-left: 44px;
font-size: 40px;
}
.texticon{
grid-template-columns: 1fr;
grid-gap:13em;
}
.cell{
padding-left: 100px;
padding-left: 90px;
}
.texticon.v2 > a {
top: -200px;
left: 200px;
}
}
@media (max-width: 648px){
#secondModal,#modal1,#thirdModal{
height: 320px;
width: 500px;
}
.item1.v3{
align-items: center;
justify-content: center;
width: 100%;
top: -20px;
left: 70px;
height: 320px;
}
}
@media (max-width: 500px){
input{
width: 100px;
}
textarea{
width: 100px;
}
#senden{
left:20px;
}
form{
width:50%;
}
.rc-anchor-center-item{
display:block;
}
.prev{
left: 1px;
}
.item1.v3{
left: 20px;
width: 55%;
top: -20px;
align-items: center;
justify-content: center;
height: 320px;
}
.tag , .tag.v2 , .tag.v3{
left: 40px;
}
.content_small > p {
width: 70%;
}
.item5{
width: 300px;
left: 00px;
height: auto;
}
.flexbox.content_small{
margin-left: 0;
}
.flexwrap.space_between{
}
.content_icon_1_edit{
height: 300px;
width: 308px;
padding-bottom: 10px;
}
.content_icon_2{
height: 206px;
}
.content_icon_3{
height: 200px;
}
.content_icon_4{
height: 208px;
}
#kontaktForm > .content_right{
float: none;
right: 0;
left: 20%;
}
.content_right h4{
float: left;
}
.content_left{
left:10%;
}
.content_left > iframe{
width: 100;
height:100;
}
.item1 ,.item2 , .item3{
margin-left: 0;
}
.prev , .next{
height: 25px;
}
h2 > img{
margin-right: 55%;
}
.texticon.v2{
width: 200px;
top: 100px;
}
.texticon{
}
.texticon.v2 > a {
left: 120px;
}
.flexbox._footer {
width:90%;
}
.cell{
margin-left: 0;
padding-left: 20px;
}
.contact{
margin-right: 0px;
}
.modal-body > .footer_wrapper > p{
display: none;
}
}