/* Basis */ h1 { margin: 60px 0px; font-family: 'Open Sans', sans-serif;} h2 { margin: 60px 0px 10px 0px; font-family: 'Open Sans', sans-serif;} h3 { margin: 10px 0px 60px 0px; font-family: 'Open Sans ', sans-serif; font-weight: 300; color:#444} /* Helferklassen */ .mt15 {margin-top:15px } .mt30 {margin-top:30px } .mt45 {margin-top:45px } .mt60 {margin-top:60px } .mt90 {margin-top:90px } .mb15 {margin-bottom:15px } .mb30 {margin-bottom:30px } .mb45 {margin-bottom:45px } .mb60 {margin-bottom:60px } .mb90 {margin-bottom:90px } .pt15 {padding-top:15px } .pt30 {padding-top:30px } .pt45 {padding-top:45px } .pt60 {padding-top:60px } .pt90 {padding-top:90px } .pb15 {padding-bottom:15px } .pb30 {padding-bottom:30px } .pb45 {padding-bottom:45px } .pb60 {padding-bottom:60px } .pb90 {padding-bottom:90px } .p30 {padding: 30px} .right {text-align: right} .center {text-align: center} .orangetext {color: #fd8d03!important} .link { text-decoration: underline} .link:hover { text-decoration: none} /* Button */ .btn-warning {background-color: #fd8d03; color: #fff; padding-left: 50px; padding-right: 50px} /* Hintergrund */ .bg {background: #eee url("./bg/Background_Icons_weissx.jpg") repeat; } /* Progress Bar */ .progress-bar {background-color: #666} /* Stage */ .wizzard-slider {position: relative; height: 560px; margin-bottom: 100px} @media only screen and (min-width: 300px) and (max-width: 768px) { .wizzard-slider {position: relative; height: 1500px; margin-bottom: 100px} } .fly {top:0px; position: absolute; width: 100%; } .stage0 {} .stage1 {display: none; left: 1000px;} .stage2 {display: none; left: 1000px;} .stage3 {display: none; left: 1000px;} .stage4 {display: none; left: 1000px;} .stage5 {display: none; left: 1000px;} .stage6 {display: none; left: 1000px;} .stage7 {display: none; left: 1000px;} .stage8 {display: none; left: 1000px;} .stage9 {display: none; left: 1000px;} .stage10 {display: none; left: 1000px;} .stage11 {display: none; left: 1000px;} .stage12 {display: none; left: 1000px;} .stage13 {display: none; left: 1000px;} .stage14 {display: none; left: 1000px;} .stage15 {display: none; left: 1000px;} #haken_plz {display: none; margin-left: 15px} #X_plz {display: none; margin-left: 15px} #haken_strasse {display: none; margin-left: 15px} #X_strasse {display: none; margin-left: 15px} #haken_hausnr {display: none; margin-left: 15px} #X_hausnr {display: none; margin-left: 15px} #haken_name {display: none; margin-left: 15px} #X_name {display: none; margin-left: 15px} #haken_email {display: none; margin-left: 15px} #X_email {display: none; margin-left: 15px} #haken_telefon {display: none; margin-left: 15px} #X_telefon {display: none; margin-left: 15px} .stage6 .form-check{ font-size: 20px} .stage6 .form-check label {margin-bottom: 15px} .stage6 .form-check input {margin-right: 15px; height: 20px; width: 20px} .stage6 h4.orangetext {margin-bottom: 20px} .linie {margin-top: -300px; text-align: center} .linie img { width: 800px} /* Field */ .field {background-color: #fff} .field:hover {cursor: pointer} .pic {text-align: center; padding: 20px; height:200px} .pic img {height: 10rem} .field .button {background-color: #000; text-align: center; color:#fff; padding: 10px 0px} .haus .pic{background: transparent url('./icons/Haus.svg') center center no-repeat; background-size: 50%;; ; padding: 30px} .haus:hover .pic{background: transparent url('./icons/Haus_MO.svg') center center no-repeat; background-size: 50%;; ; padding: 30px} .wohnung .pic{background: transparent url('./icons/Wohnung.svg') center center no-repeat; background-size: 50%;; padding: 30px} .wohnung:hover .pic{background: transparent url('./icons/Wohnung_MO.svg') center center no-repeat; background-size: 50%;; padding: 30px} .grundstueck .pic{background: transparent url('./icons/Grundstueck.svg') center center no-repeat; background-size: 50%;; padding: 30px} .grundstueck:hover .pic {background: transparent url('./icons/Grundstueck_MO.svg') center center no-repeat; background-size: 50%;; padding: 30px} .gewerbe .pic {background: transparent url('./icons/Gewerbe.svg') center center no-repeat; background-size: 50%;; padding: 30px} .gewerbe:hover .pic{background: transparent url('./icons/Gewerbe_MO.svg') center center no-repeat; background-size: 50%;; padding: 30px} .verkauf .pic{background: transparent url('./icons/Verkaufen.svg') center center no-repeat; background-size: 50%;; padding: 30px} .verkauf:hover .pic {background: transparent url('./icons/Verkaufen_MO.svg') center center no-repeat; background-size: 50%;; padding: 30px} .vermietung .pic {background: transparent url('./icons/Vermieten.svg') center center no-repeat; background-size: 50%;; padding: 30px} .vermietung:hover .pic{background: transparent url('./icons/Vermieten_MO.svg') center center no-repeat; background-size: 50%;; padding: 30px} .einfamilienhaus .pic {background: transparent url('./icons/Einfamilienhaus.svg') center center no-repeat; background-size: 60%;; padding: 30px} .einfamilienhaus:hover .pic{background: transparent url('./icons/Einfamilienhaus_MO.svg') center center no-repeat; background-size: 60%;; padding: 30px} .mehrfamilienhaus .pic {background: transparent url('./icons/Mehrfamilienhaus.svg') center center no-repeat; background-size: 60%;; padding: 30px} .mehrfamilienhaus:hover .pic{background: transparent url('./icons/Mehrfamilienhaus_MO.svg') center center no-repeat; background-size: 60%;; padding: 30px} .doppelhaushaelfte .pic {background: transparent url('./icons/Doppelhaushaelfte.svg') center center no-repeat; background-size: 60%;; padding: 30px} .doppelhaushaelfte:hover .pic{background: transparent url('./icons/Doppelhaushaelfte_MO.svg') center center no-repeat; background-size: 60%;; padding: 30px} .mittel-reihenhaus .pic {background: transparent url('./icons/Mittelreihenhaus.svg') center center no-repeat; background-size: 60%;; padding: 30px} .mittel-reihenhaus:hover .pic{background: transparent url('./icons/Mittelreihenhaus_MO.svg') center center no-repeat; background-size: 60%;; padding: 30px} .end-reihenhaus .pic {background: transparent url('./icons/Reihenendhaus.svg') center center no-repeat; background-size: 60%;; padding: 30px} .end-reihenhaus:hover .pic{background: transparent url('./icons/Reihenendhaus_MO.svg') center center no-repeat; background-size: 60%;; padding: 30px} .bungalow .pic {background: transparent url('./icons/Bungalow.svg') center center no-repeat; background-size: 60%;; padding: 30px} .bungalow:hover .pic{background: transparent url('./icons/Bungalow_MO.svg') center center no-repeat; background-size: 60%;; padding: 30px} .soutterrain .pic {background: transparent url('./icons/Souterrain.svg') center center no-repeat; background-size: 40%;; padding: 30px} .soutterrain:hover .pic{background: transparent url('./icons/Souterrain_MO.svg') center center no-repeat; background-size: 40%;; padding: 30px} .erdgeschoss .pic {background: transparent url('./icons/Erdgeschoss.svg') center center no-repeat; background-size: 40%;; padding: 30px} .erdgeschoss:hover .pic{background: transparent url('./icons/Erdgeschoss_MO.svg') center center no-repeat; background-size: 40%;; padding: 30px} .etagenwohnung .pic {background: transparent url('./icons/Etagenwohnung.svg') center center no-repeat; background-size: 40%;; padding: 30px} .etagenwohnung:hover .pic{background: transparent url('./icons/Etagenwohnung_MO.svg') center center no-repeat; background-size: 40%;; padding: 30px} .dachgeschoss .pic {background: transparent url('./icons/Dachgeschoss.svg') center center no-repeat; background-size: 40%;; padding: 30px} .dachgeschoss:hover .pic{background: transparent url('./icons/Dachgeschoss_MO.svg') center center no-repeat; background-size: 40%;; padding: 30px} .maisonette .pic {background: transparent url('./icons/Maisonette.svg') center center no-repeat; background-size: 40%;; padding: 30px} .maisonette:hover .pic{background: transparent url('./icons/Maisonette_MO.svg') center center no-repeat; background-size: 40%;; padding: 30px} .loft .pic {background: transparent url('./icons/Loft.svg') center center no-repeat; background-size: 40%;; padding: 30px} .loft:hover .pic{background: transparent url('./icons/Loft_MO.svg') center center no-repeat; background-size: 40%;; padding: 30px} .buerogebaeude .pic {background: transparent url('./icons/Buero.svg') center center no-repeat; background-size: 40%;; padding: 30px} .buerogebaeude:hover .pic{background: transparent url('./icons/Buero_MO.svg') center center no-repeat; background-size: 40%;; padding: 30px} .industriegebaeude .pic {background: transparent url('./icons/Industrie.svg') center center no-repeat; background-size: 40%;; padding: 30px} .industriegebaeude:hover .pic{background: transparent url('./icons/Industrie_MO.svg') center center no-repeat; background-size: 40%;; padding: 30px} .wohn-geschaeftsgebaeude .pic {background: transparent url('./icons/Wohn-Geschaeft.svg') center center no-repeat; background-size: 40%;; padding: 30px} .wohn-geschaeftsgebaeude:hover .pic{background: transparent url('./icons/Wohn-Geschaeft_MO.svg') center center no-repeat; background-size: 40%;; padding: 30px} .renovierungsbeduerftig .pic {background: transparent url('./icons/renovierungsbeduerftig.svg') center center no-repeat; background-size: 60%;; padding: 30px} .renovierungsbeduerftig:hover .pic {background: transparent url('./icons/renovierungsbeduerftig_MO.svg') center center no-repeat; background-size: 60%;; padding: 30px} .einfach .pic {background: transparent url('./icons/einfach.svg') center center no-repeat; background-size: 60%;; padding: 30px} .einfach:hover .pic {background: transparent url('./icons/einfach_MO.svg') center center no-repeat; background-size: 60%;; padding: 30px} .normal .pic {background: transparent url('./icons/normal.svg') center center no-repeat; background-size: 60%;; padding: 30px} .normal:hover .pic {background: transparent url('./icons/normal_MO.svg') center center no-repeat; background-size: 60%;; padding: 30px} .gehoben .pic {background: transparent url('./icons/gehoben.svg') center center no-repeat; background-size: 60%;; padding: 30px} .gehoben:hover .pic {background: transparent url('./icons/gehoben_MO.svg') center center no-repeat; background-size: 60%;; padding: 30px} .Balkon_Terrasse .pic {background: transparent url('./icons/Balkon.svg') center center no-repeat; background-size: 60%;; padding: 30px} .Keller .pic {background: transparent url('./icons/Keller.svg') center center no-repeat; background-size: 60%;; padding: 30px} .Stellplatz .pic {background: transparent url('./icons/Stellplatz.svg') center center no-repeat; background-size: 60%;; padding: 30px} .Garage_Carport .pic {background: transparent url('./icons/Garage.svg') center center no-repeat; background-size: 60%;; padding: 30px} .Garten .pic {background: transparent url('./icons/Garten.svg') center center no-repeat; background-size: 60%;; padding: 30px} .Dachboden .pic {background: transparent url('./icons/Dachboden.svg') center center no-repeat; background-size: 60%;; padding: 30px} .button input[type=checkbox] {transform: scale(2.0);} .button input[type="checkbox"]:after {background-color: #f57f07} /* Slider */ .range .slider{width: 100%; margin-bottom: 15px} .range .slider-selection { background: #f57f07;} .range .slider-handle {background: #fff; border: 1px solid #f57f07} .range .tooltip {opacity: 1; background-color: #fff; color: #f57f07} .range .tooltip-inner {background-color: #fff; color: #f57f07} /* Form */ .inputforms {border: 1px #fd8d03 solid; padding: 10px 15px} /* MAP */ #map {width: 100%; height: 400px} /* Footer */ .footer li {display: inline-block; padding-right: 30px; background: transparent url("./bg/haken.png") no-repeat; padding-left: 20px; color: #999 } .footer ul {margin: 15px auto; text-align: center} .orangebox {background-color: #fd8d03; color: #fff; padding: 5px} /* Range */ input[type=range] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ background: transparent; /* Otherwise white in Chrome */ } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]:focus { outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ } input[type=range]::-ms-track { width: 100%; cursor: pointer; /* Hides the slider so custom styles can be added */ background: transparent; border-color: transparent; color: transparent; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */ } /* All the same stuff for Firefox */ input[type=range]::-moz-range-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 16px; width: 16px; background: #ffffff; cursor: pointer; } /* All the same stuff for IE */ input[type=range]::-ms-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8.4px; cursor: pointer; background: #fd8d03; border-radius: 3px; border: 0.2px solid #aaaaaa; } input[type=range]:focus::-webkit-slider-runnable-track { background: #fd8d03; } input[type=range]::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; background: #fd8d03; border-radius: 3px; border: 0.2px solid #aaaaaa; } input[type=range]::-ms-track { width: 100%; height: 8.4px; cursor: pointer; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent; } input[type=range]::-ms-fill-lower { background: #fd8d03; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } input[type=range]:focus::-ms-fill-lower { background: #3071a9; } input[type=range]::-ms-fill-upper { background: #fd8d03; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } input[type=range]:focus::-ms-fill-upper { background: #367ebd; } .rangeslider {width: 100%} .col-md-3, .col-md-4, .col-md-6 { margin-bottom: 30px; } body{ overflow-x: hidden; } .range .row{ flex-wrap: nowrap; justify-content: space-between; } .range .row .col-md-6{ width: 100%; } .range .row .col-md-6.right{ display: flex; flex-wrap: nowrap; align-content: center; justify-content: flex-end; align-items: stretch; } .range .row .col-md-6.right .orangebox{ height: 100%; } .wizzard-slider{ margin-bottom: 220px; } @media only screen and (max-width: 767px) { .col-md-3, .col-md-4, .col-md-6 { width: 50%; margin-bottom: 30px; } .col-md-6 { margin-bottom: 30px; } .form-group .form-control{ width: calc(100% - 50px); margin-left: 0px !important; } } @media only screen and (max-width: 571px) { .col-md-6 { width: 100%; } } @media only screen and (max-width: 319px) { .col-md-3, .col-md-4 { width: 100%; } }