/* Farben */ /* Blau #303B5D Beige #c2b89f */ /* Basis */ h1 { margin: 30px 0px; font-family: 'Open Sans', sans-serif;} h2 { margin: 30px 0px 10px 0px; font-family: 'Open Sans', sans-serif;} h3 { margin: 10px 0px 30px 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 } .mb0 {margin-bottom: 0px} .mt0 {margin-top: 0px} .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: #303B5D!important} .myleadform {display: none} .link { text-decoration: underline} .link:hover { text-decoration: none} /* Header */ .telefonnr {margin-top: 30px} ul {margin-left: 0px; padding-left: 0px} ul li {background: transparent url(https://schulden-insolvenzberatung.de/fileadmin/img/backgrounds/haken-rot.png) top left no-repeat; margin: 0px 0px 10px 0px; padding: 0px 0px 0.5em 30px; line-height: 1.3em; list-style-type: none; font-size: 15px} /* Button */ .btn-warning {background-color: #303B5D; color: #fff; padding-left: 50px; padding-right: 50px; border-color: #303B5D} .btn-warning:hover { background-color: #aaa; border-color: #aaa } .btn-warning:disabled { background-color: #bbbeca ; border-color: #bbbeca} /* Hintergrund */ .bg {background: #eee url('https://sitefuchs.de/temp/immobilienleadgen/bg/Background_Icons_weiss.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: 560px; 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} #haken_ort {display: none; margin-left: 15px} #X_ort {display: none; margin-left: 15px} #haken_firstname {display: none; margin-left: 15px} #X_firstname {display: none; margin-left: 15px} #haken_lastname {display: none; margin-left: 15px} #X_lastname {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: 90px} .field .button {background-color: #000; text-align: center; color:#fff; padding: 10px 0px} .haus .pic{background: transparent url('./icons/Haus.png') center center no-repeat; background-size: 40%;; ; padding: 30px} .haus:hover .pic{background: transparent url('./icons/Haus_MO.png') center center no-repeat; background-size: 40%;; ; padding: 30px} .wohnung .pic{background: transparent url('./icons/Wohnung.png') center center no-repeat; background-size: 40%;; padding: 30px} .wohnung:hover .pic{background: transparent url('./icons/Wohnung_MO.png') center center no-repeat; background-size: 40%;; padding: 30px} .grundstueck .pic{background: transparent url('./icons/Grundstueck.png') center center no-repeat; background-size: 40%;; padding: 30px} .grundstueck:hover .pic {background: transparent url('./icons/Grundstueck_MO.png') center center no-repeat; background-size: 40%;; padding: 30px} .gewerbe .pic {background: transparent url('./icons/Gewerbe.png') center center no-repeat; background-size: 40%;; padding: 30px} .gewerbe:hover .pic{background: transparent url('./icons/Gewerbe_MO.png') center center no-repeat; background-size: 40%;; padding: 30px} .verkauf .pic{background: transparent url('./icons/Verkaufen.png') center center no-repeat; background-size: 40%;; padding: 30px} .verkauf:hover .pic {background: transparent url('./icons/Verkaufen_MO.png') center center no-repeat; background-size: 40%;; padding: 30px} .vermietung .pic {background: transparent url('./icons/Vermieten.png') center center no-repeat; background-size: 40%;; padding: 30px} .vermietung:hover .pic{background: transparent url('./icons/Vermieten_MO.png') center center no-repeat; background-size: 40%;; padding: 30px} .einfamilienhaus .pic {background: transparent url('./icons/Einfamilienhaus.png') center center no-repeat; background-size: 40%;; padding: 30px} .einfamilienhaus:hover .pic{background: transparent url('./icons/Einfamilienhaus_MO.png') center center no-repeat; background-size: 40%;; padding: 30px} .mehrfamilienhaus .pic {background: transparent url('./icons/Mehrfamilienhaus.png') center center no-repeat; background-size: 40%;; padding: 30px} .mehrfamilienhaus:hover .pic{background: transparent url('./icons/Mehrfamilienhaus_MO.png') center center no-repeat; background-size: 40%;; padding: 30px} .doppelhaushaelfte .pic {background: transparent url('./icons/Doppelhaushaelfte.png') center center no-repeat; background-size: 40%;; padding: 30px} .doppelhaushaelfte:hover .pic{background: transparent url('./icons/Doppelhaushaelfte_MO.png') center center no-repeat; background-size: 40%;; padding: 30px} .mittel-reihenhaus .pic {background: transparent url('./icons/Mittelreihenhaus.png') center center no-repeat; background-size: 40%;; padding: 30px} .mittel-reihenhaus:hover .pic{background: transparent url('./icons/Mittelreihenhaus_MO.png') center center no-repeat; background-size: 40%;; padding: 30px} .end-reihenhaus .pic {background: transparent url('./icons/Reihenendhaus.png') center center no-repeat; background-size: 40%;; padding: 30px} .end-reihenhaus:hover .pic{background: transparent url('./icons/Reihenendhaus_MO.png') center center no-repeat; background-size: 40%;; padding: 30px} .bungalow .pic {background: transparent url('./icons/Bungalow.png') center center no-repeat; background-size: 40%;; padding: 30px} .bungalow:hover .pic{background: transparent url('./icons/Bungalow_MO.png') center center no-repeat; background-size: 40%;; padding: 30px} .soutterrain .pic {background: transparent url('./icons/Souterrain.png') center center no-repeat; background-size: 30%;; padding: 30px} .soutterrain:hover .pic{background: transparent url('./icons/Souterrain_MO.png') center center no-repeat; background-size: 30%;; padding: 30px} .erdgeschoss .pic {background: transparent url('./icons/Erdgeschoss.png') center center no-repeat; background-size: 30%;; padding: 30px} .erdgeschoss:hover .pic{background: transparent url('./icons/Erdgeschoss_MO.png') center center no-repeat; background-size: 30%;; padding: 30px} .etagenwohnung .pic {background: transparent url('./icons/Etagenwohnung.png') center center no-repeat; background-size: 30%;; padding: 30px} .etagenwohnung:hover .pic{background: transparent url('./icons/Etagenwohnung_MO.png') center center no-repeat; background-size: 30%;; padding: 30px} .dachgeschoss .pic {background: transparent url('./icons/Dachgeschoss.png') center center no-repeat; background-size: 30%;; padding: 30px} .dachgeschoss:hover .pic{background: transparent url('./icons/Dachgeschoss_MO.png') center center no-repeat; background-size: 30%;; padding: 30px} .maisonette .pic {background: transparent url('./icons/Maisonette.png') center center no-repeat; background-size: 30%;; padding: 30px} .maisonette:hover .pic{background: transparent url('./icons/Maisonette_MO.png') center center no-repeat; background-size: 30%;; padding: 30px} .loft .pic {background: transparent url('./icons/Loft.png') center center no-repeat; background-size: 30%;; padding: 30px} .loft:hover .pic{background: transparent url('./icons/Loft_MO.png') center center no-repeat; background-size: 30%;; padding: 30px} .buerogebaeude .pic {background: transparent url('./icons/Buero.png') center center no-repeat; background-size: 30%;; padding: 30px} .buerogebaeude:hover .pic{background: transparent url('./icons/Buero_MO.png') center center no-repeat; background-size: 30%;; padding: 30px} .industriegebaeude .pic {background: transparent url('./icons/Industrie.png') center center no-repeat; background-size: 30%;; padding: 30px} .industriegebaeude:hover .pic{background: transparent url('./icons/Industrie_MO.png') center center no-repeat; background-size: 30%;; padding: 30px} .wohn-geschaeftsgebaeude .pic {background: transparent url('./icons/Wohn-Geschaeft.png') center center no-repeat; background-size: 30%;; padding: 30px} .wohn-geschaeftsgebaeude:hover .pic{background: transparent url('./icons/Wohn-Geschaeft_MO.png') center center no-repeat; background-size: 30%;; padding: 30px} .renovierungsbeduerftig .pic {background: transparent url('./icons/renovierungsbeduerftig.png') center center no-repeat; background-size: 30%;; padding: 30px} .renovierungsbeduerftig:hover .pic {background: transparent url('./icons/renovierungsbeduerftig.png') center center no-repeat; background-size: 30%;; padding: 30px} .einfach .pic {background: transparent url('./icons/einfach.png') center center no-repeat; background-size: 30%;; padding: 30px} .einfach:hover .pic {background: transparent url('./icons/einfach.png') center center no-repeat; background-size: 30%;; padding: 30px} .normal .pic {background: transparent url('./icons/normal.png') center center no-repeat; background-size: 30%;; padding: 30px} .normal:hover .pic {background: transparent url('./icons/normal.png') center center no-repeat; background-size: 30%;; padding: 30px} .gehoben .pic {background: transparent url('./icons/gehoben.png') center center no-repeat; background-size: 30%;; padding: 30px} .gehoben:hover .pic {background: transparent url('./icons/gehoben.png') center center no-repeat; background-size: 30%;; padding: 30px} .Balkon_Terrasse .pic {background: transparent url('./icons/Balkon.png') center center no-repeat; background-size: 30%;; padding: 30px} .Keller .pic {background: transparent url('./icons/Keller.png') center center no-repeat; background-size: 30%;; padding: 30px} .Stellplatz .pic {background: transparent url('./icons/Stellplatz.png') center center no-repeat; background-size: 30%;; padding: 30px} .Garage_Carport .pic {background: transparent url('./icons/Garage.png') center center no-repeat; background-size: 30%;; padding: 30px} .Garten .pic {background: transparent url('./icons/Garten.png') center center no-repeat; background-size: 30%;; padding: 30px} .Dachboden .pic {background: transparent url('./icons/Dachboden.png') center center no-repeat; background-size: 30%;; 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: #c2b89f;} .range .slider-handle {background: #fff; border: 1px solid #c2b89f} .range .tooltip {opacity: 1; background-color: #fff; color: #c2b89f} .range .tooltip-inner {background-color: #fff; color: #c2b89f} /* Form */ .inputforms {border: 1px #303B5D 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: #303B5D; color: #fff; padding: 5px} /* Progress */ .progress {width: 500px; margin: 0 auto; text-align: center} /* Forms */ .form-check-inline {width:75px} .salutation .form-check {margin-left: 20px} /* 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: #303B5D; border-radius: 3px; border: 0.2px solid #aaaaaa; } input[type=range]:focus::-webkit-slider-runnable-track { background: #303B5D; } input[type=range]::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; background: #303B5D; 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: #303B5D; 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: #303B5D; 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%} @media (max-width: 501px) { h1 { margin: 30px 0px; font-family: 'Open Sans', sans-serif; font-size: 24px} h2 { margin: 30px 0px 10px 0px; font-family: 'Open Sans', sans-serif; font-size: 20px} h3 { margin: 10px 0px 30px 0px; font-family: 'Open Sans ', sans-serif; font-weight: 300; color:#444; font-size: 18px} .telefonnr {text-align: center!important; margin-top: 12px} .progress {width: 100%; margin: 0 auto; text-align: center} }