/* _ _ _ | |(_) | \ ___ ___ ____ ___| |__ ____ _____ ___ ___ _____ | | ____ _ __ _ / \/ \ / __ \ / _ | |/ __ \/ _ \ / \/ \|____ \| |/ __ \| |/ | | |___ | |\ |\ | |__) | / | | | |__) | | \ | |\ |\ | ___| | | |__) | __| __| | _ \ | | | | | | ____/| | | | | ____/| | | | | | | | |/ __ | | ____/| / / _ | __/ | | | | | | |____| \_| | | |____| | | | | | | | | (__| | | |____| | _| (_| ||__ |__| |_| |_|______|\_____|__|______|_| |_|__| |_| |_|\_____|__|_____|_| (_)\____|___| exklusiv fuer HomeBrace Dipl.-Ing. (FH) Jens Stuiber medienmaler.de CSS - Cascading Stylesheet ************************************************* ////////////// STANDARD \\\\\\\\\\\\\\\\\ ************************************************** Version: 05/01/2016 Stand: 18/05/2021 Farben: d20015 */ @font-face { font-family:'swiss-light'; src: url('Swiss 721 Light Condensed BT.eot'); src: url('Swiss 721 Light Condensed BT.eot?#iefix') format('embedded-opentype'), url('Swiss 721 Light Condensed BT.woff2') format('woff2'), url('Swiss 721 Light Condensed BT.woff') format('woff'), url('Swiss 721 Light Condensed BT.svg#Swiss 721 Light Condensed BT') format('svg'); font-weight: 400; font-style: normal; font-stretch: condensed; unicode-range: U+0020-F002; } @font-face { font-family:'swiss'; src: url('Swiss_721_Condensed_BT.eot'); src: url('Swiss_721_Condensed_BT.eot?#iefix') format('embedded-opentype'), url('Swiss_721_Condensed_BT.woff2') format('woff2'), url('Swiss_721_Condensed_BT.woff') format('woff'), url('Swiss_721_Condensed_BT.svg#Swiss 721 Condensed BT') format('svg'); font-weight: 400; font-style: normal; font-stretch: condensed; unicode-range: U+0020-F002; } @font-face { font-family:'swiss-bold'; src: url('Swiss 721 Bold Condensed BT.eot'); src: url('Swiss 721 Bold Condensed BT.eot?#iefix') format('embedded-opentype'), url('Swiss 721 Bold Condensed BT.woff2') format('woff2'), url('Swiss 721 Bold Condensed BT.woff') format('woff'), url('Swiss 721 Bold Condensed BT.svg#Swiss 721 Bold Condensed BT') format('svg'); font-weight: 700; font-style: normal; font-stretch: condensed; unicode-range: U+0020-F002; } @font-face { font-family:'swiss-light'; src: url('https://homebrace.ch/css/Swiss 721 Light Condensed BT.eot'); src: url('https://homebrace.ch/css/Swiss 721 Light Condensed BT.eot?#iefix') format('embedded-opentype'), url('https://homebrace.ch/css/Swiss 721 Light Condensed BT.woff2') format('woff2'), url('https://homebrace.ch/css/Swiss 721 Light Condensed BT.woff') format('woff'), url('https://homebrace.ch/css/Swiss 721 Light Condensed BT.svg#Swiss 721 Light Condensed BT') format('svg'); font-weight: 400; font-style: normal; font-stretch: condensed; unicode-range: U+0020-F002; } @font-face { font-family:'swiss'; src: url('https://homebrace.ch/css/Swiss_721_Condensed_BT.eot'); src: url('https://homebrace.ch/css/Swiss_721_Condensed_BT.eot?#iefix') format('embedded-opentype'), url('https://homebrace.ch/css/Swiss_721_Condensed_BT.woff2') format('woff2'), url('https://homebrace.ch/css/Swiss_721_Condensed_BT.woff') format('woff'), url('https://homebrace.ch/css/Swiss_721_Condensed_BT.svg#Swiss 721 Condensed BT') format('svg'); font-weight: 400; font-style: normal; font-stretch: condensed; unicode-range: U+0020-F002; } @font-face { font-family:'swiss-bold'; src: url('https://homebrace.ch/css/Swiss 721 Bold Condensed BT.eot'); src: url('https://homebrace.ch/css/Swiss 721 Bold Condensed BT.eot?#iefix') format('embedded-opentype'), url('https://homebrace.ch/css/Swiss 721 Bold Condensed BT.woff2') format('woff2'), url('https://homebrace.ch/css/Swiss 721 Bold Condensed BT.woff') format('woff'), url('https://homebrace.ch/css/Swiss 721 Bold Condensed BT.svg#Swiss 721 Bold Condensed BT') format('svg'); font-weight: 700; font-style: normal; font-stretch: condensed; unicode-range: U+0020-F002; } body {padding:0;height:101%;margin:0;font-family:'swiss', georgia,sans-serif, Verdana, Arial, sans-serif;background:#fff/*rgb(220,220,220)*/ /*url(../img/background.png) fixed center bottom no-repeat;background-size:110% auto;*/;font-size:25px;overflow:hidden} div.clear {clear:both;width:0 !important;height:0 !important;margin:0!important;padding:0} .off {display:none;} strong{font-family:'swiss-bold';} h1, h2, h3 {font-weight:normal;line-height:110%;} h1 , h2{font-size:50px; } h2 {margin-top:100px;} h3 {font-size:30px;padding-top:50px;} h1 {display:inline-block;padding:15px 20px; background:#d20015;color:#fff;} a {color:rgb(176,86,156);color:#000;color:#d20015; outline:none;text-decoration:none;/*border-bottom:0.1px dotted*/} a:hover{color:#d20015;} p {line-height:30px;} hr {border:none;background:lightgrey;height:1px;margin:30px 0 30px 0} img {display:block;} .center {clear:both;width:80%;margin:0 auto;padding:8% 10% 15% 10%;} ul {margin-left:-16px;} li {margin-bottom:10px;list-style:square;} .white {background-color:#fff} .red {background-color:#d20015;color:#fff} .red a {color:#fff} .red a:hover {color:#000} .black {background-color:#000;color:#fff} .black a {color:#fff} .black a:hover {color:#d20015} .black .button {background:#fff;color:#000} .black .button:hover {color:#fff} .grey {background-color:#ccc;color:#000} /* HEADER --------------------------------------------- */ #header {height:120px;width:100%;background:#000;position:fixed;top:0;left:0;z-index:9999} #logo {float:left;display:block;max-width:250px;width:100%;height:120px;background:url(../img/logo_hb.svg) left center no-repeat;background-size:auto 60px;} #logo.HBA {background:url(../img/logo_hba.svg) left center no-repeat;background-size:auto 80px;} #logo span, #logoHBA span {display:none;} .subline {color:#fff;font-size:14px;position:absolute;margin-top:95px;} /*.scrollmenue .subline {display:none;}*/ #header, .scrollmenue, #menue a, #menue div , #logo, .subline, .fotos a, .social a, #sidebar a, #sidebar a.showroom, .docs a, .accordion-titl, .ad { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} /* LANGUAGE -----------------------------------------------*/ .language {color:#555;width:90px;font-size:15px;position:absolute;top:0;z-index:99999;/*float:right;margin-right:18%;*/right:0} .language a {color:#999 !important;display:block;width:30px;height:20px;float:left;padding-top:10px;text-align:center;background:#333} .language a:hover {color:#fff!important} .language a.active {color:#000!important;background:#fff;} .language a.active:hover{color:#000!important;} /* FORMULAR --------------------------------------------- */ /* KONTAKT */ #kontakt {position:fixed;width:100%;height:100%;top:0;background:rgba(0,0,0,0.9);z-index:999999;display:none;} #kontakt form {width:80%;max-width:500px;margin:0 auto;margin-top:10vh;} #kontakt h2 {color:#fff;width:100%;text-align:center;margin-top:100px} input, textarea {font-family:'swiss';border:none;outline:none;padding:10px;width:calc(100% - 20px);margin-bottom:15px; font-size:inherit;text-align:left;} textarea {height:150px;} input:focus, textarea:focus {background:#d20015;color:#fff;} input[type='submit'], button[type='submit'], .button, #rollstuhl .button.close {font-family:'swiss';border:none;width:150px;height:50px;font-size:20px;margin:0;cursor:pointer;background:#d20015;color:#fff;display:inline-block;} input[type='submit']:hover, button[type='submit']:hover, .button:hover, #rollstuhl .button.close:hover, #konsole .button.close:hover {background:#fff;color:#000;} .button.close {width:50px;position:absolute;right:0;top:0;padding:0;margin-top:20px;margin-right:20px;} .red button {background-color:#000} .red input:focus, .red textarea:focus{background-color:#000} label {line-height:46px;width:100%;text-align:center} .success, .error, .tick {display:block;padding:10px;color:green;margin-bottom:20px;text-align:center} .error {color:#d20015} .g-recaptcha {margin:0 auto;width:304px;margin-bottom:50px} #recaptcha_widget_div {width:318px!important;margin:0 auto;} input[type='checkbox'] {float:left;margin:0;width:auto;height:46px;margin-right:20px;} /* MENUE --------------------------------------------- */ #header a, #sidebar a {text-decoration:none;border:none;} #menue a:hover, #menue a.active, #menue a.active:hover{color:#d20015} #menue a:nth-child(5) {padding-right:0} #header.scrollmenue, .scrollmenue #menue a, .scrollmenue #logo, .scrollmenue #menue li div {height:80px;line-height:80px;z-index:999} #menue {float:right;font-size:20px;} #menue li{float:left;list-style:none;postition:relative;margin:0} #menue ul {margin:0; } #menue > ul:nth-child(1) > li:nth-child(4) > a:nth-child(1) {padding-right:0} #menue > ul > li > a, #menue > ul > li > div{text-decoration:none;color:#fff;float:left;padding-right:35px;text-align:right;height:100%;line-height:120px;} #menue a:hover, #menue a.active, #menue a.active:hover{color:#d20015} .topper {height:100px;width:100px;display:block;background:url(../img/top.png); position:fixed;right:3vw;bottom:5vh;display:none;z-index:9} #menue .loxone, .loxone span {display:block;width:calc(100% - 60px);height:50px !important;background-size:calc(100% - 60px) auto;background-position:30px} /* Loxone Logo im Text */ .loxone span {height:120px !important;width:60px;background-size:100% auto;} #menue .loxone {background-image:url(../img/loxone_weiss.svg)} #menue .loxone.active , #menue .loxone:hover{background-image:url(../img/loxone.svg)} #sidebar {position:fixed;right:0;top:18vh;z-index:9999} #sidebar a {opacity:0.7;display:block;height:80px;width:250px;margin-right:-200px;margin-bottom:10px;background-color:#fff;background-size:auto 60%;background-position:10px;font-size:40px;line-height:70px;text-decoration:none;text-indent:0px;color:#000;font-family:'swiss-bold';} #siderbar i.fa, #sidebar i.fas {display:inline;font-size:1em;} #sidebar a * {clear:left;} #sidebar a.sideout {margin-left:-185px} #sidebar a.showroom i{display:none;} #sidebar a.showroom {background-image: url(../img/logo_hb_haus_schwarz.svg) ;background-position:10px 45%;background-repeat: no-repeat; background-size:0.9em auto;text-indent:55px;} /* NEU */ #sidebar {top:0;margin-top:130px;} #sidebar a {margin:0;margin-bottom:10px;background-size:50px auto;background-position:center;width:70px;height:70px;box-shadow:-1px 2px 4px #999;text-align:center;} #sidebar a:hover {opacity:1} #sidebar .fa, #sidebar .fas, #sidebar .far, #sidebar .fal, #sidebar .fad, #sidebar .fab {text-align:center;} .social {float:right;margin-top:1%;margin-bottom:5px;padding:1% 7% 1% 1%;background:#fff;} .social a {float:left;display:block; height:50px;width:140px} .youtube {background:url(../img/sidebar_yt.svg) no-repeat left center;} .facebook {background:url(../img/sidebar_fb.png) no-repeat left center;} .loxone {display:block;background:url(../img/smarthome_loxone.svg) no-repeat left center;} .rehakind {cursor:default;background:url(../img/sidebar_rehakind.jpg) no-repeat left center;} .gkv {width:100%;max-width:150px;margin-top:50px;} .docs {padding:50px 0} .docs .vierer {width:100%;} .docs a, .vierer div{cursor:pointer;display:block;width:22.75%; float:left;text-align:center; margin-right:3%; background:#000;/*border-radius:5px*/color:#fff;padding:5% 0;} .vierer div {cursor:inherit;} .docs a:hover {background:#d20015; color:#fff;} .docs .four {margin-right:0;} /* CONTENT --------------------------------------------- */ .text{display:block;padding:0 10% ;width:80%;} .text, .center, .dreier, .vierer{max-width:1400px;margin:0 auto;} #content_01 {padding:10vh 0;padding-top:calc(10vh + 120px);position:relative;} #content_02, #content_03 {padding:10vh 0;overflow:hidden;} #foto_01, #foto_02 {background-size: cover!important;background-position: center 70px;background-repeat:no-repeat; } #foto_01 {height:50vh;/*min-height:200px;*/overflow:hidden;width:100%;background-attachment:fixed;} #foto_02 {height:80vh;/*min-height:400px;*/overflow:hidden;width:100%;background-position:center;} .produktfoto {max-width:900px; width:35%;margin-top:0px;float:left;margin-left:10%;} .col {width:50%;z-index:9} .col.right{float:right;} .col.left{float:left;} .button {clear:both;line-height:50px;text-align:center;text-decoration:none;padding:5px 3%;margin-top:0px;width:auto;margin-right:20px;margin-bottom:10px;background-color:#000;color:#fff} .button:hover {background-color:#d20015;color:#fff} /* FOTOS */ .fotos a{float:left;margin-right:20px;margin-bottom:20px;border-radius:65px;overflow:hidden;width:130px;height:130px;} .fotos a img {height:200px;margin-top:-35px;margin-left:-20px;} /*#content_02 .button {background:#ccc;color:#000} #content_02 .button:hover {background:#000;color:#fff} #content_03 .button {margin:0 0 30px 0 ;} */ .logos{margin-top:100px} a.pp_arrow_previous, a.pp_arrow_next {margin-top:11px!important;} /* STARTSEITE */ #start #content_01 {position:relative;} /*myecc-pupil_foto1.jpg*/ .teaser { position: relative; background: #fff url(../img/myecc-pupil_foto1.jpg); background-size: cover; background-position: center 120px; width: 100%; padding-top: 120px; height: calc(100vh - 120px);} /*.teaser {position:relative;background: #fff url(../img/start_rosner.png) 70% bottom no-repeat; background-size:auto 80%;width:100%; height:700px;padding-top:120px;height:calc(100vh - 120px);}*/ .teaser .slogan{font-size: 60px;margin-top:5%; } .teaser .slogan div, .teaser .slogan a {padding-left:10%;background:#000;color:#fff;padding-right:2%;width:auto;line-height:140%; display:inline;} .newsletter-teaser{display:inline-block;padding:20px;background:#d20015;left:20%;top:-60px;transform:rotate(-2deg);position:absolute;cursor:pointer;} .newsletter-teaser:hover{color:#000!important} .image img {width:100%;max-width:400px;} .image {display:block;margin:10px 0; } .name {position:absolute;display:inline-block;color:#000;bottom:10%;left:50%;margin-left:-20%;padding:10px;background:rgba(255,255,255,0.5);;} /*#start .center {padding:8% 10%} #start #content_00 {background-image:none;} #start #content_01 {background:none;height:auto;padding:} #start #content_02 {background: url(../img/showroom_01.jpg) center no-repeat;background-size:100% auto;height:500px} */ #start #foto_01 {background-image: url(../img/startseite_01.jpg) } #start #content_02 {padding-bottom:15vh;} /* SMARTHOME/LOXONE */ #smarthome #content_01 {background:#000 url(../img/smarthome_produktfoto.png) no-repeat 85% 100%;background-size:auto 80%;color:#fff} #smarthome #content_01 {padding-bottom:15%;} #smarthome h1 {padding:0} #smarthome .foto_01 {background:url(../img/smarthome_01.jpg) center;background-size:100% auto; border-bottom:10px solid #000;} #smarthome .foto_02 {background:url(../img/smarthome_02.jpg) center fixed;background-size:100% auto;} #smarthome .foto_03 {background:url(../img/smarthome_03.jpg) center;background-size:100% auto; border-top:10px solid #000;} #smarthome .fotos a {border:3px solid #69c350;} #smarthome .fotos a:hover {border:3px solid #fff;} #smarthome .button, #smarthome button{background:#69c350;color:#000} #smarthome .button:hover, #smarthome button:hover{background:#fff;color:#69c350} #smarthome #foto_01 {background-image: url(../img/smarthome_foto1.jpg) } #smarthome #foto_02 {background-image: url(../img/smarthome_foto2.jpg) } /* UMFELDKONTROLLE */ #umfeld .produktfoto {transform: rotate(3deg);max-width:300px;margin-left:25%} #umfeld #foto_01 {background-image: url(../img/myenvi_foto1.jpg)} #umfeld #foto_02 {background-image: url(../img/myenvi_foto2.jpg)} #umfeld .icons {background-color:#000!important;} .googleplay img{width:100%;max-width:250px;margin-top:50px; } /* ROLLSTUHL */ /*#rollstuhl .text {padding-top:5vh;}*/ .fotos a{border:3px solid #000;} .fotos a:hover{border:3px solid #d20015;} #rollstuhl #foto_01 {background-image: url(../img/myecc_foto1.jpg);} #rollstuhl #foto_02 {background-image: url(../img/myecc_foto2.jpg);/*background-position: center 35%*/background-position:bottom;} /*#rollstuhl .button{background:rgb(220,220,220);color:#000} #rollstuhl .button:hover{background:#000;color:#fff}*/ /* MyEccPupil */ #MyEccPupil #foto_01 {background-image: url(../img/MyEccPupil_02.jpg);} /*#MyEccPupil #foto_01 {background-image: url(../img/myecc-pupil_foto1.jpg);}*/ #MyEccPupil #foto_02 {background-image: url(../img/myecc-pupil_foto2.jpg);background-position: center 35%} #MyEccPupil .produktfoto {max-width:800px;} #MyEccPupil .award {position:absolute;left:0;bottom:200px;background:rgba(0,0,0,0.1)} #MyEccPupil .award img {width:20vw;max-width:150px;margin:15px;margin-left:10vw; } #MyEccPupil .award.gda {bottom:50px;} /* KONSOLE */ #konsole #foto_01 {background-image:url(../img/mystick_foto1.jpg);background-position:right 70px} #konsole #foto_01 {background-image:url(../img/mystick_foto1.jpg);background-position:left 70px} #konsole #foto_02 {background-image: url(../img/mystick_foto2.jpg) } #konsole .produktfoto {width:35%;margin-top:10vh} /*#konsole .foto_02 {background: #fff url(../img/konsole_2.jpg) center no-repeat ;background-size:100% auto;}*/ .apple, .win, .ps4, .xbox {height:50px;float:left;margin-bottom:20px} .apple {background:url(../img/logo_apple.svg) no-repeat; width:90px;background-size:auto 50px;} .win {background:url(../img/logo_win.png) no-repeat; width:90px;background-size:auto 50px;} .ps4 {background:url(../img/logo_ps4.png) no-repeat; width:100px;background-size:auto 50px;} .xbox {background:url(../img/logo_xbox.png) no-repeat; width:200px;background-size:auto 50px;} /* TABLET */ #tablet #foto_01 {background-image:url(../img/myyeti_foto1.jpg) } #tablet #foto_02 {background-image:url(../img/myyeti_foto2.jpg) } #tablet .produktfoto {transform: rotate(-1deg);width:32vw;max-width:600px;margin-left:13%} /* SHOWROOM */ #showroom .foto_01 {background: url(../img/showroom_01.jpg) center no-repeat fixed;background-size:100% auto;} #showroom .foto_02 {background: url(../img/showroom_02.jpg) center no-repeat ;background-size:100% auto;padding-bottom:400px;height:auto;} #showroom .dreier_container {background:rgba(0,0,0,.8)} #showroom .dreier_container img{ margin:0 auto;max-height:55px;width:100%;margin-bottom:40px;} #showroom .fotos a{border:3px solid #fff;} /* ACADEMY */ #academy .fa-mobile-alt {float:left; transform: rotate(5deg);margin-right:20px;margin-top:-10px} #academy #content_02 {padding:5vh 0} #academy .hotline span {font-family:'swiss-bold';font-size:50px;} #academy .hotline {margin-top:20px;} #academy .schulung {background:#000;float:left;margin-bottom:50px;color:#fff;} #academy .schulung h2 {margin-top:15px;margin-bottom:50px;} #academy .schulung img {width:100%;float:left;} #academy .schulung div:nth-child(1) {width:30%; height:100%;float:left; padding:5%;padding-right:0 } #academy .schulung div:nth-child(2) {width:55%; padding:5%;float:right} #academy #foto_01 {background-image:url(../img/academy_hotel_02.jpg) } #academy #foto_02 {background-image:url(../img/academy_hotel_01.jpg) } #academy #foto_01, #academy #foto_02 {position:relative} #academy #foto_01 div, #academy #foto_02 div {position:absolute;bottom:5px;right:5px;color:#fff;font-size:15px;} #schulungen {padding:5vh 0; padding-bottom:10vh} #hotel {padding:5vh 0; padding-bottom:10vh} #academy .map {width:100%;margin-top:50px;} #academy .family {transform: rotate(-3deg);width:90%;max-width:400px;margin-left:10%;} #academy hr {margin:10px 0; background-color:#fff;opacity:0.2} .postIT {transform:rotate(2deg);box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); position:absolute;right:20%;bottom:80px;width:100%;max-width:350px;} .postIT {display:none;} /* REZENSIONEN */ #rezensionen #blasen .center{padding-top:0;width:80%!important;} #rezensionen #presse .center{width:80%!important;} .blase {padding:50px; color:#fff;margin:0 auto;margin-bottom:5%;width:calc(100% - 100px);max-width:700px;} .blase p{margin-bottom:0} .blase:nth-child(odd) {background:#d20015} .blase:nth-child(even) {background:#000} .blase small {opacity:0.5;} .blase { position: relative; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #3babe2;} .blase:before { content: ' '; position: absolute; width: 0; height: 0; left: -20px; top: 50px; } .blase:nth-child(odd):before { border-top: 20px solid #d20015; border-left: 20px solid transparent; border-bottom: 20px solid transparent;} .blase:nth-child(even):before {left:auto;right:-20px; border-top: 20px solid #000; border-right: 20px solid transparent; border-bottom: 20px solid transparent;} #presse a span {display:block;width:100%;height:5vh;min-height:250px;background-size:100% auto;overflow:hidden;margin-bottom:20px; } #presse a {padding-top:0;border-bottom:0;text-decoration:none;opacity:0.5;height:25vh;min-height:400px;} #presse a:hover {background:#000;color:#fff;opacity:1; } /* FAQ */ #faq #blasen .center{padding-top:0;width:80%!important;} #faq #blasen hr{margin-top:50px;margin-bottom:50px;} #faq h2 {margin-top:150px;} #faq .accordion-title {/*background:#ccc;*/cursor:pointer;} #faq .accordion-title h3{color:#000;padding-top:0} #faq .accordion-title.open h3{color:#d20015;} #faq .accordion-content {position:relative;display:none;padding-bottom:5px;} #faq .mitarbeiter, #ueberuns .mitarbeiter {float:left;top:20px;text-align:center;} #faq .mitarbeiter .titel, #ueberuns .mitarbeiter .titel {width:150px;} #faq .mitarbeiter small, #ueberuns .mitarbeiter small{color:#ccc} #faq .person, #ueberuns .person{width:150px;margin-bottom:10px;} #faq .blase {background: #000;margin-left:200px;width:calc(90% - 200px);max-width:none;padding-top:25px } #faq .blase:before {border-top: 20px solid #000;content: ' ';position: absolute;width: 0;height: 0;left: -20px;top: 70px;border-top: 20px solid #000; border-left: 20px solid transparent; border-bottom: 20px solid transparent;} /*.accordion-content {background:magenta;}*/ /* UEBER UNS */ #map_container {position:relative;} .map {margin:0 auto; width:100%; max-width:900px; } .ad {width:20vw;max-width:150px;position:absolute;} .ad:hover { transform: scale(1.2, 1.2);} .ad.jochen {top:40%;left:70%;} .ad.jochen2 {top:75%;right:53%;} .ad.dennis {top:47%;right:63%;} .ad.markus {top:18%;right:45%;} .ad.juergen {top:65%;left:53%;} /* ID */ #ueberuns .innendienst div {padding:3% 0 0 0;} #ueberuns .innendienst a {display:block;margin:0;padding:0;width:100%;float:none;font-size:23px;} #ueberuns .innendienst a:hover {color:#fff} #ueberuns .vierer .person {margin:0 auto;} #ueberuns .vierer .titel {width:100%;margin-bottom:20px;margin-top:7px;} #ueberuns .vierer .mitarbeiter {padding:25px 10px;width: calc(22% - 20px);} #ueberuns .vierer .mitarbeiter a {width:100%;float:none;font-size:23px;} #ueberuns .vierer .mitarbeiter a:hover {background:none;color:#ccc} .do-not-break {display:inline-block;} #ueberuns .vierer .mitarbeiter a small {color:#fff} #ueberuns .vierer .mitarbeiter a:hover small {color:#ccc} /* Profilseite */ .mobil, .kontakt.mobil {display:none;} /* siehe Responsive 765 */ .qr {height:3em;margin:0 auto;margin-bottom:30px;display:block;} #ueberuns.jochen #foto_01 {background-image:url(../img/ueberuns_jochen_back.jpg);height:40vh;padding: 5vh 0} #ueberuns.markus #foto_01 {background-image:url(../img/ueberuns_markus_back.jpg);height:40vh;padding: 5vh 0} #ueberuns.dennis #foto_01 {background-image:url(../img/ueberuns_dennis_back.jpg);height:40vh;padding: 5vh 0} #ueberuns.juergen #foto_01 {background-image:url(../img/ueberuns_juergen_back.jpg);height:40vh;padding: 5vh 0} #ueberuns.messe #foto_01 {background-image:url(../img/ueberuns_thomas_back.jpg);height:40vh;padding: 5vh 0} #ueberuns .profil {max-height:40vh;float:left;margin-right:50px;max-width:100%} #ueberuns #foto_01 .button:nth-child(2){margin-top:15vh} .map_bereiche {float:left;margin-right:50px;width:100%;max-width:300px;} #ueberuns #foto_01 {background-position:center;} /* PARTNER */ #partner #foto_01 {background-image: url(../img/showroom_01.jpg) } #partner .dreier a {color:#fff} #partner .dreier a:hover {color:#000} #partner .dreier strong {display:block; margin-bottom:10px;padding-top:5px;} #partner .dreier hr {background:none;border-bottom:1px solid #fff;margin:0;margin-bottom:10px;opacity:0.3} #partner .dreier .img {float:none; height:150px; width:100%; background-color:#fff!important; margin-bottom:15px;} #partner .dreier .wolfsburg {background:url(../img/partner_wolfsburgag.jpg) no-repeat center;background-size: 70% auto ;} #partner .dreier .dgm {background:url(../img/partner_dgm.jpg) no-repeat center;background-size: 70% auto ;} #partner .dreier .storch {background:url(../img/partner_storch_und_beller.jpg) no-repeat center;background-size: 80% auto;} #partner .dreier .stibotec {background:url(../img/partner_stibotec.jpg) no-repeat center;background-size: 70% auto;} #partner .dreier .adviva {background:url(../img/partner_adviva.jpg) no-repeat center;background-size: 70% auto;} #partner .dreier .geiger {background:url(../img/partner_geiger.png) no-repeat center;background-size: 70% auto;} #partner .dreier .mechatron {background:url(../img/partner_mechatron.jpg) no-repeat center;background-size: 70% auto;} #partner .dreier .hmc {background:url(../img/partner_hmc.png) no-repeat center;background-size: 60% auto;} #partner .dreier .orfo {background:url(../img/partner_orfo.jpg) no-repeat center;background-size: 70% auto;} #partner .dreier .rdg {background:url(../img/partner_rdg.png) no-repeat center;background-size: 70% auto;} #partner .dreier .strack {background:url(../img/partner_strack.jpg) no-repeat center;background-size: 60% auto;} #partner .dreier .rehacare {background:url(../img/partner_rehacare.png) no-repeat center;background-size: 60% auto;} #partner .dreier .schmidt {background:url(../img/partner_schmidt.jpg) no-repeat center;background-size: auto 80%!important} #partner .dreier .rolltalk {background:url(../img/partner_roll-talk.jpg) no-repeat center;background-size: 80% auto } #partner .dreier .talktools {background:url(../img/partner_talktools.png) no-repeat center;background-size: auto 65%!important;} #partner .dreier .gehrke {background:url(../img/partner_gehrke.jpg) no-repeat center;background-size: 85% auto} #partner .dreier .link {background:url(../img/partner_link.jpg) no-repeat center;background-size: 85% auto} #partner .dreier .rehapoint{background:url(../img/partner_rehapoint.png) no-repeat center;background-size: 85% auto} #partner .dreier .carstens{background:url(../img/partner_carstens.jpg) no-repeat center;background-size: auto 70% !important} #partner .dreier .haeussler{background:url(../img/partner_haeussler.jpg) no-repeat center;background-size: 85% auto} #partner .dreier .oratho{background:url(../img/partner_oratho.jpg) no-repeat center;background-size: 80% auto} #partner .dreier .ambulanzpartner{background:url(../img/partner_versorgungsportal.png) no-repeat center;background-size:90% auto} #partner .dreier .weinmann{background:url(../img/partner_weinmann.jpg) no-repeat center;background-size:90% auto} .button .door-open {display:block;width:40px; height:100%;float:left;margin-right:20px;background:url(../img/door-open.svg) center no-repeat;background-size: 100% auto;} .silber, .gold, .expert {background:url(../img/partnerstatus_silber.png) no-repeat; background-size:100%;position:absolute;width:70px!important;height:70px;margin-top:-60px;margin-left:-10px;} .gold {background:url(../img/partnerstatus_gold.png) no-repeat; background-size:100%;} .expert {background:url(../img/partnerstatus_expert.png) no-repeat; background-size:100%;} .dreier .flag{height:25px;width:33.3px;box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.12);/*transform: rotate(-2deg);margin-top:-14px;*/display:inline-block;margin-right:10px;margin-bottom:-2px;} #partner.ausstattung #content_01 {padding:15vh 0} #partner.ausstattung .logo {max-width:300px;width:100%;margin-bottom:50px;} #partner.ausstattung .logo.trv {max-width:200px;} #partner.ausstattung .produktfoto.left {max-width:272px;float:right;margin-right:10vw} #partner.ausstattung .produktfoto.right {max-width:272px;float:left;margin-left:10vw} /* NEWSLETTER */ #newsletter #foto_01 {background-image: url(../img/showroom_01.jpg) } #newsletter input[type='email']{width:100%; max-width:500px;margin:0 auto;height:50px;margin-bottom:50px;border-radius:0!important} #newsletter button {background-color:white!important; color:black!important;border-radius:0!important} #newsletter button:hover {background-color:black!important;color:white!important;} #newsletter form label {display:block;} #newsletter label:first-child {display:none;} #newsletter input[type='checkbox'] {float:left; width:30px;margin-top:15px} #newsletter label.rechts {text-align:left;} #newsletter .n2g a {text-decoration:underline;} /* IMPRESSUM */ #impressum .button:hover {background-color:#000;color:#fff} /*#impressum .red h3{color:#000}*/ #impressum .black h3{color:#d20015} #impressum a {color:#d20015} /* DREIER + VIERER */ .dreier_container , .vierer_container{width:100%;padding:100px 0} /*.dreier, .vierer{width:80%!important;}*/ .dreier div{float:left;width:25%;margin-right:12.5%;text-align:center} .vierer div, .vierer a {float:left;width:22%;margin-right:4%;text-align:center;margin-bottom:5vh;} /*.dreier .three{margin:0} .vierer .four{margin:0}*/ .dreier > div:last-child {margin-right:0} .vierer > div:nth-child(4n+0), .vierer a:nth-child(4n+0) {margin-right:0;} .icons .vierer div { margin-bottom:0} i.fa, i.fas {display:block;margin-bottom:30px;font-size:3em;} /* MESSE */ .messe #content_03{height: auto;} .messe #content_03 h2{margin:0} /*.messe h1 {margin-bottom:0}*/ .messe .blase {margin:0;background-color:#000;} .messe .blase p{margin:0} .messe .blase:before {left: 50px;top: -20px;} .messe .blase:nth-child(n):before {left:20%;border-top:20px solid transparent;border-right: 20px solid #000;border-bottom: 20px solid transparent;border-left: 20px solid transparent; } .messe #content_03 small {font-size:15px;} .success, .error, .tick{background:#000;color:#fff;text-align:left;} .messe button[type='submit']{margin-top:30px;margin-bottom:30px;} .messe .messelogo {width:100%;max-width:400px;} .messe form a{text-decoration:underline} .messe .vierer_container {padding-bottom:0} /* left:auto;right:-20px; border-top: 20px solid #000; border-right: 20px solid transparent; border-bottom: 20px solid transparent;} */ /* INFOPAGE */ /*#info {background: rgb(79,79,79) url(../img/background2.png) center bottom fixed no-repeat;background-size:110% auto;} #info .white {background-color:rgba(255,255,255,0.7);padding:0;padding-bottom:5%;} #info .red {background-color:rgba(210,0,21,0.85);color:#fff;padding:0;padding-bottom:5%} #info .grey {background-color:rgba(79,79,79,0.9);color:#fff;padding:0;padding-bottom:5%;} #info .black {background-color:rgba(0,0,0,0.8);color:#fff;padding:0; padding-bottom:5%;} #info .teaser {height:auto;background:none;} */ .pdf a, .zip a, .bilder a{display:block;width:calc(100% - 100px);color:#fff;text-decoration:none;background:#000 url(../img/file-pdf.svg) left 25px center no-repeat;background-size:auto 40px;padding:15px;padding-left:85px;margin-bottom:5px} /*.pdf a:hover, .zip a:hover {background:#d20015 url(../img/file-pdf_hover.svg) left 25px center no-repeat;background-size:auto 40px;color:#fff} */ .zip a {background:#000 url(../img/file-archive.svg) left 25px center no-repeat;background-size:auto 40px;} /*.zip a:hover {background:#fff url(../img/file-archive_hover.svg) left 25px center no-repeat;background-size:auto 40px;}*/ .pdf a:hover, .zip a:hover, .download:hover {background-color:#d20015} .bilder a{border:none;background:#000;padding-left:0;border-radius:0;width:250px;height:150px;margin:0;overflow:hidden;padding:0;margin-bottom:5px;} .bilder a:hover {border:none;} .bild:hover {opacity:0.8} .fotos .bild img {width:100%;height: auto;margin:0; } .download {display:inline-block;line-height:150px;padding-left:50px!important;width: calc(100% - 300px)!important;} .bilder h3, .pdf h3 {margin-top:50px;padding-top:0} .bilder h3:first-child, .pdf h3:first-child {margin-top:0;padding-top:0} .bild.logo img {margin-top:17%;margin-left:10%;} /* #info .fotos a {border:3px solid #fff;} #info #footer_container {background:#000 url(../img/background.png) center bottom fixed no-repeat;background-size:110% auto;} #info #content_00, #info #content_01, #info #content_02, #info #content_03 {background-image:none;} #info #content_01 {height:auto;} #info #content_01 .text {background:none;} */ /*#content_02 {background: #d20015 url(../img/myecc_skizze.jpg) no-repeat left;background-size:auto 95%;}*/ #info #content_02 img {max-width:600px; width:100%;margin-top:-50px;float:left;} /*#info #content_02 {padding-top:12%;padding-bottom:12%}*/ #info #content_02 iframe {margin-right:20px;margin-bottom:20px;} /* #info .fotos a{display:block;background-size:200% auto!important;background-position:center!important;width:150px;height:150px;float:left;margin-right:15px;margin-bottom: 15px;border-radius:75px} #info .fotos a:hover{opacity:0.7} */ /*#info .button {clear:both;line-height:50px;text-align:center;text-decoration:none;padding:13px 8%;margin-top:20px;width:auto;} #info #content_02 .button {background:#ccc;color:#000} #info #content_02 .button:hover {background:#000;color:#fff} */ #info .teaser {background-image: url(../img/showroom_01.jpg);min-height:50vh } /* YOUTUBE */ .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .video { position: relative; padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/ padding-top: 0px; height: 0; overflow: hidden; } .video{margin-top:50px;} /* FOOTER --------------------------------------------- */ #footer_container {position:relative;background:#000} #footer, #footer a {text-decoration:none;color:rgb(150,150,150);} #footer.center {padding:50px 0;font-size:18px;padding-bottom:80px;text-align:center;} #footer a {line-height:150%;} #footer a:hover{color:rgb(79,79,79);} .button.orgweb {width:84%;margin:0;height:40px;position:absolute;bottom:0;left:0;background-color:rgb(150,150,150);color:#fff!important} #footer a.button.orgweb {line-height:200%;} .orgweb:hover {opacity:0.7} .medienmaler {margin:0 auto;margin-top:50px} .medienmaler img{margin:0 auto;margin-top:10px;} /* KORREKTUR FANCYBOX */ html {overflow-y:scroll;} .compensate-for-scrollbar {margin-right: 0 !important;} /* CONSENT */ .uc-embedding-accept {background:#d20015} /* RESPONSIVE --------------------------------------------- */ @media all and (max-width: 2000px){ .newsletter-teaser{left:10%} } @media all and (max-width: 2000px){ /*#content_01 {height:1000px;}*/ #menue ul:first-child {margin-left:-37px;} } @media all and (max-width: 1600px){ #content_02 .col.right{width:45%} /*.teaser {background-size:130% auto;}*/ #content_03, #content_05 {height:800px;background-size:100% auto} } @media all and (max-width: 1500px){ /*#foto_02{ background-size: auto 100% !important;}*/ #umfeld .produktfoto {margin-left:15%} #konsole .produktfoto {width:40%;margin-left:5vw;} #smarthome #content_01 {background-size:auto 50%!important;min-height:600px;} } @media all and (max-width: 1400px){ #content_02 .col.right{width:40%} .postIT {position:static;float:right;margin-top:40px;margin-bottom:60px;} } @media all and (max-width: 1250px){ #start #content_02 .col.left, #start #content_02 .col.right {width:80%;padding-left:0;margin-left:0;float:none;} #content_02 .col.right{width:80%;padding: 5% 10%} /*#content_02 {padding-bottom:20%;}*/ /*#content_02 img {margin-top:50px;width:70%;margin-left:10%} */ .sub .foto_01, .sub .foto_02, .sub .foto_03, #content_01, #content_03, #content_05 {background-size: auto 100%!important;background-size:cover!important; } } @media all and (max-width: 1200px){ /* MENUE UMBAU */ /*#header {height:160px;} .first, #content_01{margin-top:100px} #start #content_01 {margin:0} #logo {height:100px;} #menue {float:none;position:absolute;height:80px;top:70px;width:100%;} #menue a, .#menue a.loxone {line-height:80px;padding-right:5%;}*/ .teaser {padding-top:260px; height:700px;background-position:110% bottom;} .teaser .slogan {font-size:50px} .topper {height:50px;width:50px;display:block;background:url(../img/top.png); background-size:100% auto;position:fixed;right:3vw;bottom:5vh;display:none;} #smarthome #content_01 {background-size:auto 50%;min-height:700px;} } @media all and (max-width: 1050px){ #content_01 {padding-top:calc(7vh + 80px);} /* VIERER */ .vierer_container{padding:0} .vierer_container {padding-top:100px;padding-bottom:50px;} .vierer div, .vierer a, .icons .vierer di, #ueberuns .vierer .mitarbeiter {width:100%;margin-bottom:100px;} .vierer a {margin-bottom:30px} /* ZWEISPALTER */ #content_01 .col.left, #content_02 .col.left , #content_01 .col.right, #content_02 .col.right {width:100%} .produktfoto {width:60vw!important; float:none!important;margin:0 auto!important;padding-top:100px!important;} #konsole .produktfoto {width:80vw!important;} #smarthome #content_01 {background-position:bottom right;background-size:80% auto;height:800px} /*FAQ BLASEN*/ #faq .mitarbeiter/*, #ueberuns .mitarbeiter */{position:relative;left:0px;top:0px;margin-top:0;text-align:left;padding-bottom:20px;float:none;} #faq .person/*, #ueberuns .person*/{width:150px;float:left;} #faq .mitarbeiter .titel/*, #ueberuns .mitarbeiter .titel*/{padding-top:70px;margin-left:170px;width:auto;} #faq .blase {margin-left:0px;width:calc(100% - 50px); padding:25px;padding-top:10px;} #faq .blase:before {content: ' ';position: absolute;width: 0;height: 0;top: -20px;left: 70px;border-left: 20px solid #000; border-top: 20px solid transparent; border-right: 20px solid transparent;} #faq .blase *{font-size:20px;line-height:130%; hyphens: Auto;-ms-hyphens: Auto;-webkit-hyphens: None;word-wrap: break-word; } /* UEBER UNS */ /*#ueberuns .person {float:left;margin-left:2%;}*/ } @media all and (max-width: 850px){ /*.teaser {background-size:200% auto;}*/ #menue a { padding-right:3%;} /* DREIER */ .dreier_container {padding:0} .dreier_container:first-child{padding-top:100px;padding-bottom:100px;} .dreier div {width:100%;margin-bottom:100px;} #partner .dreier .img{ background-size: auto 60%;} .teaser {background-position:150% bottom;} } @media all and (min-width: 1150px){ /* WEICHE */ .mobil, .kontakt.mobil {display:none!important;} .desktop {display:block!important;} } @media all and (max-width: 1150px){ #ueberuns #foto_01 .button{display:none;} .map_bereiche {float:none;} /* WEICHE */ .mobil, .kontakt.mobil {display:block!important;} .desktop {display:none!important;} } @media all and (max-width: 750px){ #content_02 iframe {width:100%;} #content_02 .col.right{margin-top:0px} .teaser {height:600px;background-position:40vw bottom;} .teaser .slogan {font-size:40px} } @media all and (max-width: 730px){ #menue span {display:none;} #menue a {padding-right:5%;} } @media all and (max-width: 840px), all and (max-height: 400px){ #content_02 .col.right{margin-top:-50px} #smarthome #content_01 {background-size:120% auto;} #partner .dreier .img{ background-size: 50% auto;} /* RESPONSIVE MENUE */ #logo{position:absolute;left:0;z-index:9;height:100px;margin-top:10px;} #logo.HBA {margin-top:0;} #menue {display:none;z-index:9999;position:absolute;left:0;height:100vh;width:100vw;top:100px;background:rgba(0,0,0,0.95) } #menue span {display:inline} #menue ul {width:100%;margin:0} #menue li{float:none;width:100%} #menue li a, #menue li div{margin:0;padding:0;display:block;width:100%;text-align: center !important;border-bottom:1px solid rgba(255,255,255,0.1);} #menue li div.more {display:none;} #menue ul ul {display:block!important;top:0;position:relative;margin:0} #menue ul ul li a{width:100%;text-align:center;/*background:rgba(255,255,255,0.1);*/} #menue a span {display:none;} #menue a:nth-child(1){border-top:1px solid rgba(255,255,255,0.1)} #menue a:hover,#menue ul ul li a:hover{background:rgba(255,255,255,0.1)} #menue .loxone, #menue .loxone:hover {margin:0 auto;width:100%;background-size:100px auto;background-position:center;background-repeat:no-repeat;} /* LANGUAGE */ .language {/*top:80px;*/right:12%;} .center {width:100%;} #logo {margin-left:10%;} /* BUTTON */ .menu {z-index:99;position:absolute;top:35px;right: 30px;display:block;width:50px;height:50px;background:url(../img/menu.svg);background-size:50px auto;cursor:pointer;} #header {height:100px}.first, #content_01{margin-top:0px} #sidebar {margin-top:115px;} #sidebar a {height:50px;width:50px;background-size:40px auto;line-height:50px;} .sideout {margin-left:-130px} /* ACADEMY */ #academy .schulung {float:none;} #academy .schulung div:nth-child(1) {width:90%; float:none; padding:5%;margin-bottom:5%;} #academy .schulung div:nth-child(2) {clear:both;width:90%; float:none} #academy .hotline span {font-size:30px;} #academy .hotline i.fas{font-size:60px;} } @media all and (min-width: 1200px){ /* ACADEMY */ #academy .schulung {width:30%;margin-right:5%;float:left; min-height:800px;} #academy .schulung:nth-child(5) {margin-right:0} #academy .schulung div:nth-child(1) {width:90%; float:none; padding:5%;margin-bottom:5%;} #academy .schulung div:nth-child(2) {clear:both;width:90%; float:none} } @media all and (max-width: 570px){ /* PARTNERPORTAL */ .bild {width:100%!important;margin-bottom:0!important;} .bild img {height:auto!important;} .download {width:100%!important;padding:0!important;text-align:center;height:50px!important;line-height:50px;} #MyEccPupil .award {bottom:150px;} #MyEccPupil .award.gda{bottom:50px;} .mega-menu li{ } } /* GyroSet Vigo Drive Kit */ #vigo #foto_01 { background-image: url(../img/GyrosetVigo_foto1.jpg); } #vigo #foto_02 { background-image: url(../img/GyrosetVigo_foto2.jpg); } @media all and (max-width: 500px){ #content_03 .col.left{width:100%} /*#content_02 .col.right{margin-top:-100px}*/ .teaser {height:430px;padding-top:400px; background-position:10vw bottom;} .teaser .text div {padding-left:0;} #newsletter input[type='email']{font-size:5vw} } @media all and (max-width: 430px){ .teaser {background-position:-10vw bottom} h1.loxone span {margin-top:70px} #partner .dreier .img{ background-size: 60% auto;} h1 {font-size:35px;} h1, h2 {font-size:40px;} } /* HOEHE */ @media all and (max-height: 600px), all and (max-width: 515px){ .menu {width:43px; height:43px;background-size:43px auto;top:40px;} #sidebar a {opacity:1;height:40px;width:40px;background-size:30px auto;line-height:40px;font-size:30px;} } @media all and (max-height: 1000px){ .error, .success, .tick {font-size:20px;padding:0} } @media all and (max-height: 800px){ #kontakt h2 {margin-top:30px;margin-bottom:0} #kontakt form {margin-top:10px} } @media all and (max-height: 650px){ #kontakt h2 {display:none;} } @media all and (max-height: 530px){ .kontakt{display:none;} } /* IE 10 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* Ruckeln bei Fixed Background verhindern*/ html{ overflow: hidden; height: 100%; } body{ overflow: auto; height: 100%; } /* Menuebreite */ #menue ul ul { width: 300px!important; } } /* CUSTOM CODE MEGA MENU */ /* Main menu */ #menucl{ display: inline-block; float: right; margin-top: 30px; } #menucl .more{ color: #fff; } #menucl > ul{ display: flex; column-gap: 30px; margin: 0; } #menucl > ul > li > a{ color: #fff; } #menucl li:hover .mega-menu{ display: flex; } #menucl > ul > li{ padding: 30px 0; margin: 0; list-style: none; } .mega-menu{ width: 100vw; position: fixed; left: 0; margin-left: 0; background: white; top: 120px; padding-left: 0; display: none ; z-index: 2; } @media(min-width:1400px){ .mega-menu{ max-width: 1400px; left: calc(50% - 700px); } .mega-menu:before{ content: ''; position: absolute; top: 0; left: -50vw; height: 100%; background: white; width:200vw; z-index: -1; } } .mega-menu a{ padding: 20px; display: block; box-sizing: border-box; height: 100%; } .mega-menu a:hover, .mega-menu a.a{ box-shadow: inset 0px -5px 0px 0 #d20015; } .mega-menu li{ width: 25%; display: inline-block; vertical-align: top; text-align: center; border-right: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .mega-menu li:last-child{ border-right: 0; } .mega-menu li .mega-label{ color: #000 !important; } .mega-image{ text-align: center; margin-bottom: 20px !important; height: 100px; } .mega-image img{ display: inline-block; } .mega-label{ margin-bottom: 30px !important; } .mega-label span{ font-weight: bold; } .mega-action{display: inline-block;padding: 5px 10px;} .mega-menu a:hover .mega-action, .mega-menu a.a .mega-action{ background-color: #d20015; color: #fff; } #menucl .more{ padding-left: 159px; } #menucl .more:hover{ color:#d20015; cursor:pointer; } @media(max-width: 840px){ #menucl{ display: none; position: absolute; left: 0; top: 100px; margin-top: 0; background: black; height: calc(100vh - 100px); } #menucl > ul{ list-style: none !important; padding-left: 0; flex-direction: column; max-height: calc(100vh - 100px); overflow: auto; } #menucl li::marker{ display: none; } #menucl .more{ display: none; } #menucl .mega-menu{ display: flex; position: static; flex-wrap: wrap; } #menucl > ul > li{ padding: 0; } #menucl > ul > li > a{ padding: 30px !important; display: block; text-align:center; } .mega-menu{ padding-left: 0; overflow: auto; } .mega-menu li{ width: calc(50% - 2px); border-bottom: 1px solid #e5e5e5; } .mega-menu a{ height: auto !important; padding: 20px !important; } } @media(max-width: 600px){ .mega-menu li{ width: 100%; border-right: 0 !important;; } }