/* Swipe 2.0, (C) Brad Birdsall 2012, MIT license */ .content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666} * { margin:0; padding:0; border:0; } h1, h2, h3, h4 { margin:0; padding:0; border:0; } ul, li { list-style-type:none;} html, body { width:100%; height:100%; color:#000; font-family:Open Sans, Arial, sans-serif; font-weight:300; font-size:18px; } .js body { overflow-x: hidden; overflow: hidden; } h1 { font-family:Museo300, Arial; font-size:38px; font-weight:normal; margin-bottom:6px; } h3 { font-family:Museo700, Arial; font-size:38px; font-weight:normal; } h2 { font-family:Museo300, Open Sans, Arial; font-size:38px; font-weight:normal; margin-bottom:6px; } h4 { font-family:Museo300, Open Sans, Arial; font-size:28px; font-weight:normal; margin-bottom:6px;} h2 span, h1 span { font-family:Museo700, Arial; font-size:38px; font-weight:normal; } .center {text-align:center; } .float_left{ float:left; } .marOben #container { background-color:#fff; margin-top:50px; } .marOben #main { padding-top:60px; } /* AUFZÄHLUNGSZEICHEN */ #main ul, #main ol { padding-left: 1.46667em; } #main ul li { list-style:disc;} #main ol li { list-style:decimal;} /*allgemein*/ .trennlinie { border-bottom:1px solid #c5c5c5; margin:60px 0 80px 0; max-width:960px; margin-left:auto; margin-right:auto; } .trennlinie::before { content:""; border-bottom:3px solid #000; width:10%; display:block; left:50%; margin-left:-5%; position:relative;} .invisible {display:none !important;} .arrowLeft { width:50px; height:50px; border-top:2px solid #bcbcbc; border-left:2px solid #bcbcbc; transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transition: all 300ms; -moz-transition: all 300ms; -webkit-transition: all 300ms; -o-transition: all 300ms; -ms-transition: all 300ms;} .arrowRight { width:50px; height:50px; border-top:2px solid #bcbcbc; border-right:2px solid #bcbcbc; transform: rotate(-45deg); -moz-transform: rotate(45deg);-ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transition: all 300ms; -moz-transition: all 300ms; -webkit-transition: all 300ms; -o-transition: all 300ms; -ms-transition: all 300ms;} .arrowLeft:hover { border-top:2px solid #000; border-left:2px solid #000; } .arrowRight:hover { border-top:2px solid #000; border-right:2px solid #000; } .error { color:#f00; font-size:12px;} /*kontakt / impressum*/ #main section.social { display:block; text-align:center; margin-top:40px;} #main section.social .icon { width:70px; height:70px; border-radius:35px; } #footer section.social { display:inline-block; text-align:center; margin-top:0px; margin-left:10px;} #footer section.social .icon { width:20px; height:20px; border-radius:10px; } section.social .iconFb { display:inline-block; background-image:url(../../files/layout/icon_fb.png); background-repeat:no-repeat; transition: all 500ms; -moz-transition: all 500ms; -webkit-transition: all 500ms; -o-transition: all 500ms; -ms-transition: all 500ms;} section.social .iconGoogle { display:inline-block; background-image:url(../../files/layout/icon_googleplus.png); background-repeat:no-repeat; margin-left:-10px; transition: all 500ms; -moz-transition: all 500ms; -webkit-transition: all 500ms; -o-transition: all 500ms; -ms-transition: all 500ms; } section.social .iconTwitter { display:inline-block; background-image:url(../../files/layout/icon_twitter.png); background-repeat:no-repeat; margin-left:-10px; transition: all 500ms; -moz-transition: all 500ms; -webkit-transition: all 500ms; -o-transition: all 500ms; -ms-transition: all 500ms; } #footer section.social .iconFb { background-image:url(../../files/layout/icon_fb_f.png); margin-left:0px; } #footer section.social .iconGoogle { background-image:url(../../files/layout/icon_googleplus_f.png); margin-left:0px; } #footer section.social .iconTwitter { background-image:url(../../files/layout/icon_twitter_f.png); margin-left:0px; } section.social .iconFb:hover { background-color:#3b5997; } section.social .iconGoogle:hover { background-color:#d14333; } section.social .iconTwitter:hover { background-color:#44bcef; } section.kontakt a, section.impressum a, section.bewerbung a { color:#000; text-decoration:underline;} .disclaimer { text-align:center; max-width:960px; margin-right:auto; margin-left:auto;} .disclaimer h2 { font-size:24px; margin:30px 0 10px 0; } section.impressum .logo1c { display:block; text-align:center; margin-top:30px;} /*formular*/ .ce_form input, .ce_form .textarea { border:1px solid #d9d9d9; font-size:18px; padding: 12px 2%; width:95.6%; font-family:Open Sans, Arial, sans-serif; font-weight:300; margin-bottom:20px;} .ce_form span.mandatory { display:none;} .ce_form .formbody { text-align:center; width:60%; margin-left:auto; margin-right:auto;} .ce_form .explanation { font-family:Museo300, Open Sans, Arial; font-size:24px; margin:20px 0 20px 0;} .ce_form .submit { background-color:#fff; color:#000; display:block; width:200px; border:2px solid #000; margin-left:auto; margin-right:auto; font-family:Museo500, Open Sans, Arial; transition: all 300ms; -moz-transition: all 300ms; -webkit-transition: all 300ms; -o-transition: all 300ms; -ms-transition: all 300ms;} .ce_form .submit:hover { background-color:#000; color:#fff; cursor:pointer;} .ce_form { margin-top:50px;} .checkbox_container { margin-bottom:25px;} .checkbox_container label { width:24.7%; margin-right:1.6%; display:inline-block; border:1px solid #d9d9d9; padding: 12px 0 12px 7%; text-align:left; background:url(../../files/layout/checkbox.gif) 13px no-repeat; cursor:pointer; float:left; color:#999; transition: all 300ms; -moz-transition: all 300ms; -webkit-transition: all 300ms; -o-transition: all 300ms; -ms-transition: all 300ms;} .checkbox_container.datenschutz label {width:93%; } .checkbox_container label#lbl_4_2 { margin-right:0% !important;} .checkbox_container input {display:none;} input[type=checkbox].checkbox:checked + label, .checkbox_container label:hover {background:url(../../files/layout/check.gif) 13px no-repeat;background-color:#000;border-color:#000;color:#FFF;float:left;} .checkbox_container label:hover a { color:#fff;} @media only screen and (max-width: 780px) { .ce_form .formbody { width:90% !important;} .checkbox_container label { width:59.6% !important; margin-right:0px; margin-bottom:8px; padding: 12px 20%; display:block;} } /*IE 8 + 7 */ .ie8 .checkbox_container input, .ie7 .checkbox_container input {display:inline-block; float:left; width:20px; border:0px;} .ie8 .checkbox_container label, .ie7 .checkbox_container label { display:inline-block; border:0px; background:none; padding:0px; margin:0 0 0 8px;} .ie8 .checkbox_container span, .ie7 .checkbox_container span { width:26.9%; margin-right:1.6%; height:20px; display:inline-block; border:1px solid #d9d9d9; padding: 6px 0 6px 4%; text-align:left; float:left; color:#999;} .ie8 .checkbox_container .checkbox, .ie7 .checkbox_container .checkbox { margin:4px 0 0 0; padding:0px;} .ie8 .checkbox_container span:hover, .ie7 .checkbox_container span:hover {background-color:#000;} label {display:none; color:#999;} .no-placeholder label, .checkbox_container label {display:inline !important;} /*für IE9 und älter */ /*header*/ #header {height:80px; width:100%; border-bottom:1px solid #c5c5c5; position:fixed; top:0px; background-color:#fff; z-index:250;} #header .inside { max-width:1500px; width:90%; margin-left:auto; margin-right:auto; } #header .ignlogo {float:left; width:100px; height:40px; border:2px solid #000; line-height:40px; margin-top:20px; display:block; font-family:Museo700, Arial; font-size:23px; text-align:center;} #header a .ignlogo { color:#000; text-decoration:none;} #header a { text-decoration:none;} /*main*/ #main { max-width:1500px; width:90%; margin-left:auto; margin-right:auto; padding-bottom:50px;} /*navigation*/ @media only screen and (min-width: 780px) { .mod_navigation { height:40px !important; line-height:40px !important; margin-top:20px !important; font-family:Museo300, Open Sans, Arial; font-size:19px; display:block !important; float:right; } .mod_navigation a { text-decoration:none; height:40px; color:#000; display:block; transition: all 300ms; -moz-transition: all 300ms; -webkit-transition: all 300ms; -o-transition: all 300ms; } .mod_navigation a:hover, .mod_navigation a.active { color:#000; cursor:pointer;} .mod_navigation ul li { float:left; margin-left:39px; } .mod_navigation ul li::before, .mod_navigation ul li::after { content:""; border-bottom:1px solid #fff; display:block; width:100%; left:50%; margin-left:-0%; position:relative; transition: all 300ms; -moz-transition: all 300ms; -webkit-transition: all 300ms; -o-transition: all 300ms; } /*.mod_navigation ul li::before, .mod_navigation ul li::after { content:""; border-bottom:1px solid #eee; display:block; width:0%; left:50%; margin-left:-0%; position:relative; transition: all 300ms; -moz-transition: all 300ms; -webkit-transition: all 300ms; -o-transition: all 300ms; }*/ .mod_navigation ul li:hover::before, .mod_navigation ul li:hover::after { content:""; border-bottom:1px solid #000; display:block; width:100%; left:50%; margin-left:-50%; position:relative; } } @media only screen and (max-width: 780px) { html, body { font-size:15px; } #header {height:50px; } #header .inside { width:100% !important; } #header .ignlogo { margin-left:15px; height:30px; border:2px solid #000; line-height:30px; margin-top:8px; font-size:15px;} .mod_navigation { display:none; width:100%; height:40px; line-height:40px; font-family:Museo300, Open Sans, Arial; font-size:19px; position:absolute; top:51px; border-bottom:2px solid #000; } .mod_navigation ul li {width:100%; display:block; } .mod_navigation a { width:100%; text-decoration:none; height:50px; line-height:50px; color:#000; border-bottom:1px solid #c5c5c5; display:block; transition: all 300ms; -moz-transition: all 300ms; -webkit-transition: all 300ms; -o-transition: all 300ms; background-color:#fff; text-align:center; } .mod_navigation a.last { border-bottom:0px } .mod_navigation a:hover { background-color:#000; color:#fff;} /*"open" class per java script*/ #menu_open { position:fixed; top:12px; right:12px; height:28px; width:44px; cursor:pointer; } #menu_open span { display:block; width:70%; height:5px; left:15%; background:#000; position:absolute; } #menu_open span:nth-of-type(1) { top:0px; left:auto; left:15%; } #menu_open span:nth-of-type(2) { top:10px; } #menu_open span:nth-of-type(2):before { content:''; display:block; position:absolute; top:0; left:0; background:#000; width:100%; height:100%; } #menu_open span:nth-of-type(3) { top:20px; left:15%; } #menu_open.open span:nth-of-type(1), #menu_open.open span:nth-of-type(3){ width:0%; } #menu_open.open span:nth-of-type(2) { transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); background:#000; } #menu_open.open span:nth-of-type(2):before { transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); background:#000; } section.service .image_container { float:none !important; padding-bottom:20px;} #footer .inside .copyright { font-size:10px !important;} #footer .inside .handmade { font-size:14px !important; } #footer section.social { display:none;} } /*Section Start*/ section.start {min-height:720px; padding-top:80px;} span.scrolldown { display:block; font-size:14px; text-transform:uppercase; position:absolute; top:820px; width:212px; text-align:center; left:50%; margin-left:-105px;} span.scrolldown::before, span.scrolldown::after {content:'\2193'; padding: 0 20px;} #textstart { position:absolute; top:485px; left:50%; margin-left:-340px; display:block;} .titlestart h1 { color:#fff; background-color:#000; font-size:30px; font-family:Museo300, Open Sans, Arial; display:inline;} .aufgaben { width:305px; display:block;} /*WORD ROTATOR*/ .titlerotator{ position:absolute; top:300px; left:50%; margin-left:-155px; height:80px; width:310px; display:block; font-family:Museo300, Open Sans, Arial; font-size:80px; } #wordrotator{ position:absolute; top:380px; left:50%; height:90px; width:600px; margin-left:-150px; overflow:hidden; font-family:Museo700, Arial; font-size:80px; /* weihnachten 46px */ overflow:hidden; } #wordrotator span{ opacity:0; filter: alpha(opacity = 0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; position:absolute;} .current{ animation: rotateWord 4s linear infinite 0s; -moz-animation: rotateWord 4s linear infinite 0s; -webkit-animation: rotateWord 4s linear infinite 0s; -o-animation: rotateWord 4s linear infinite 0s; -ms-animation: rotateWord 4s linear infinite 0s;} /*für IE9 und älter*/ .no-csstransforms .current, .no-cssanimations .current { opacity: 1 !important; filter: alpha(opacity = 100) !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;} @-webkit-keyframes rotateWord { 0% { opacity: 0; filter: alpha(opacity = 0); } 2% { opacity: 0; filter: alpha(opacity = 0); transform: translateY(60px); -moz-transform: translateY(60px); -webkit-transform: translateY(60px); -o-transform: translateY(60px); -ms-transform: translateY(60px); } 8% { opacity: 1; filter: alpha(opacity = 100); } 10% { opacity: 1; filter: alpha(opacity = 100); transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px);} 90% { opacity: 1; filter: alpha(opacity = 100); transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); } 96% { opacity: 1; filter: alpha(opacity = 100); } 99% { opacity: 0; filter: alpha(opacity = 0); transform: translateY(-60px); -moz-transform: translateY(-60px); -webkit-transform: translateY(-60px); -o-transform: translateY(-60px); -ms-transform: translateY(-60px); } 100% { opacity: 0; filter: alpha(opacity = 0); } } @keyframes rotateWord { 0% { opacity: 0; filter: alpha(opacity = 0); } 2% { opacity: 0; filter: alpha(opacity = 0); transform: translateY(60px); -moz-transform: translateY(60px); -webkit-transform: translateY(60px); -o-transform: translateY(60px); -ms-transform: translateY(60px); } 8% { opacity: 1; filter: alpha(opacity = 100); } 10% { opacity: 1; filter: alpha(opacity = 100); transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px);} 90% { opacity: 1; filter: alpha(opacity = 100); transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); } 96% { opacity: 1; filter: alpha(opacity = 100); } 99% { opacity: 0; filter: alpha(opacity = 0); transform: translateY(-60px); -moz-transform: translateY(-60px); -webkit-transform: translateY(-60px); -o-transform: translateY(-60px); -ms-transform: translateY(-60px); } 100% { opacity: 0; filter: alpha(opacity = 0); } } /* CANVAS dotsandlines*/ canvas.dotsandlines { background: #fff; position:absolute; top:180px; left:50%; margin-left:-480px; z-index:-1;} @media screen and (max-width: 600px) { canvas.dotsandlines { display:none !important; width:0px; height:0px; } h2 span, h2, h3 { font-size:28px; } h2.center, section.service h2 { padding-bottom:8px;} section.service img { width:300px; height:188px; } section.service .image_container { float:none !important; padding-bottom:20px;} #main { padding-top:16px !important;} section.start {min-height:380px; padding-top:20px;} #wordrotator{ position:absolute; top:160px; height:90px; width:310px; font-size:40px; } #textstart { position:absolute; top:230px; left:50%; margin-left:-150px; display:block;} .titlerotator{ font-size:40px; top:110px !important;} .titlestart h1 { font-size:26px;} span.scrolldown { top:430px; } section.projektestart { padding-top:0px !important; } section.projektestart p.center { padding-bottom:20px;} .aufgaben { font-size:16px; } .slider-prev { left:-20px !important;} .slider-next { right:-20px !important;} .arrowLeft, .arrowRight, .slider-prev, .slider-next { width:20px !important; height:20px !important;} } /*Content Slider*/ .ce_sliderStart { max-width:80%; margin-left:auto; margin-right:auto; height:auto; position:relative;} .content-slider .image_container { text-align:center;} .content-slider .image_container { max-width:1200px; width:100% !important;} .content-slider img { max-width:1200px; height:auto; width:100% !important;} .slider-control { width:100%; height:50px; display:block; position:absolute; top:42%; } .slider-prev { width:50px; height:50px; display:block; position:absolute; left:-70px;} .slider-next { width:50px; height:50px; display:block; position:absolute; right:-70px;} /*Section Projektestart / Referenzentext*/ section.projektestart {padding-top:50px; } section.service, section.referenzentext, section.kontakt, section.bewerbung {max-width:960px; margin-left:auto; margin-right:auto; margin-top:60px; } .serviceblock { min-height:250px;} /*Section Headerimage*/ .headerimage { height:280px; width:100%; display:block; background-color:#eee; padding-top:0px; position:fixed; top:80px; z-index:-20; } .headerimage h1 {padding-top:100px; line-height:60px;} .headerimage h1::before, .headerimage h1::after { content:""; border-bottom:2px solid #000; width:120px; display:block; left:50%; margin-left:-60px; position:relative; transition: all 300ms; -moz-transition: all 300ms; -webkit-transition: all 300ms; -o-transition: all 300ms; } /* javascript .headerimage.leistungen { background-image:url(../../files/images/ipad_1200x700.jpg); background-position:center center; background-repeat:no-repeat; } .headerimage.referenzen { background-image:url(../../files/images/toyo_tires_print.jpg); background-position:center center; background-repeat:no-repeat; } */ /*footer*/ #footer { width:100%; margin-left:auto; margin-right:auto; background-color:#111; padding:120px 0 20px 0; background:url(../../files/layout/footer-ign.jpg) no-repeat; background-position:top center; height:40px;} #footer .inside { max-width:960px; width:90%; color:#fff; margin-left:auto; margin-right:auto; text-align:center; } #footer .inside .copyright { font-size:14px;} #footer .inside .handmade {font-family:Museo500, Arial; font-size:20px; display:inline-block; } #footer .inside a { color:#fff; text-decoration:none; } #footer .inside a:hover { text-decoration:underline; } /* Preloader */ .js #loader { background: white; width: 100%; height: 100%; position: fixed; top:0px; left:0px; z-index: 200; } .js .status { width:170px; height:170px; position:absolute; left:50%; top:50%; margin:-85px 0 0 -85px; } .js .circleAnim { display: block; width: 40px; height: 40px; border: solid 3px; border-color: #222 transparent; -webkit-border-radius: 1000px; -webkit-animation: rota 1s ease-in-out infinite; -moz-animation: rota 1s ease-in-out infinite; -ms-animation: rota 1s ease-in-out infinite; -o-animation: rota 1s ease-in-out infinite; animation: rota 1s ease-in-out infinite; margin-left:auto; margin-right:auto; } @-webkit-keyframes rota { to { -webkit-transform: rotate(360deg);} } @-moz-keyframes rota { to { -moz-transform: rotate(360deg); } } @-ms-keyframes rota { to { -ms-transform: rotate(360deg); } } @-o-keyframes rota { to { -o-transform: rotate(360deg); } } @keyframes rota { to { transform: rotate(360deg); } } /* FONT FACE (open sans per google webfont)*/ @font-face { font-family: 'Museo300'; src: url('../../files/font/Museo300.eot'); src: url('../../files/font/Museo300.eot?#iefix') format('embedded-opentype'), url('../../files/font/Museo300.woff') format('woff'), url('../../files/font/Museo300.ttf') format('truetype'), url('../../files/font/Museo300.svg#Museo300') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Museo500'; src: url('../../files/font/Museo500.eot'); src: url('../../files/font/Museo500.eot?#iefix') format('embedded-opentype'), url('../../files/font/Museo500.woff') format('woff'), url('../../files/font/Museo500.ttf') format('truetype'), url('../../files/font/Museo500.svg#Museo500') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Museo700'; src: url('../../files/font/Museo700.eot'); src: url('../../files/font/Museo700.eot?#iefix') format('embedded-opentype'), url('../../files/font/Museo700.woff') format('woff'), url('../../files/font/Museo700.ttf') format('truetype'), url('../../files/font/Museo700.svg#Museo700') format('svg'); font-weight: normal; font-style: normal; } /*platz für vieeel CSS*/ /* REFERENZEN */ ul.projektliste { width: 100%; height:auto; display:inline-block;} .referenzen li.projekt { float: left; overflow: hidden; display: block; width: 25%; position: relative; opacity: 1; height: auto; } .referenzen li.projekt .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out;} .referenzen li.projekt .thumb img { display: block; max-width: 375px; width: 100%; overflow:hidden; -webkit-transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75); -moz-transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75); -ms-transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75); -o-transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75); transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75);} .referenzen .content {padding: 27px 2em;} .referenzen a {text-decoration:none;} .content h3 {font-family:Museo300; font-size:28px; color:#000; line-height:30px;} .content p {font-size:17px; color:#000; line-height:20px;} .content p.tag {font-size:13px; color:#000; line-height:16px;} .referenzen ul li .thumb { position: relative; overflow: hidden; -webkit-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75); -moz-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75); -ms-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75); -o-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75); transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75);} .referenzen ul li .info { position: relative; overflow: hidden; max-height: 120px;} .referenzen ul li .info span{ position: absolute; top: 0; z-index: -1; display: block; width: 100%; height: 0%; background: #000; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -ms-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; } .content h3, .content p { -webkit-transition: font-size .5s; -moz-transition: font-size .5s; -ms-transition: font-size .5s; -o-transition: font-size .5s; transition: font-size .5s; } /*HOVER EFFEKTE*/ .referenzen ul li:hover span {height: 100%;} .referenzen ul li:hover .thumb > img { position: relative; -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .referenzen ul li:hover .content h3, .referenzen ul li:hover .content p {color:#fff;} .referenzen ul li:hover .thumb:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("../../files/images/overlay.png"); opacity: 0.5; } /*KUNDENLISTE*/ section.kunden {max-width:960px; margin-left:auto; margin-right:auto;} .kundenliste { margin-top:60px; } .kundenliste ul li img{text-align:center; width:100%; height:auto;} .kundenliste ul li { display: inline-block; vertical-align: middle; width: 15%; padding: 0 2%; margin: 0 0 51px; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } /*Responsive*/ @media only screen and (max-width: 1190px) { .content h3 {font-size: 25px;} } @media screen and (max-width: 1023px) { .referenzen li.projekt {width: 33.33333%;} .referenzen .content {padding: 20px 2em;} } @media screen and (max-width: 766px) { .referenzen li.projekt {width: 50%;} .referenzen .content {padding: 18px 2em;} .kundenliste ul li {width: 20%; margin: 0 0 41px;} } @media screen and (max-width: 680px) { .referenzen li.projekt {width: 100%; } .referenzen .content {padding: 16px 2em; } .referenzen li.projekt .thumb img {max-width: 100%;width: 100%;} .referenzen li.projekt .thumb {height: 260px;} .content { background-color:#000; margin-bottom:20px;} .content h3 {font-size: 28px;} .content h3, .content p {color:#fff !important;} } @media screen and (max-width: 480px) { .kundenliste ul li {width: 28%; margin: 0 0 41px;} }