.hero { width: 100%; position: relative; overflow: hidden; } .hero-carousel{ width: 10000px; } .hero-carousel article { width: 978px; margin: 0 auto; height: 390px; display: block; float: left; position: relative; } .hero-carousel article .article-cover{ background:#000; display: block; position:absolute; height:100%; width:100%; top:0; left:0; z-index:3; opacity: .5; -moz-opacity: .5; -khtml-opacity: .5; filter:alpha(opacity=50); } .hero-carousel-container article { float: left; } .hero-carousel article.current .article-cover{ display: none; } .hero-carousel article img { position: absolute; top: 0; left: 0; z-index: 1; width: 968px; height:100%; } .hero-carousel article .banner-info{ left: 50px; height:150px; position:absolute; top:12%; width:480px; z-index:2; } .hero-carousel article .banner-info h1{ width:80%; max-height: 80px; } .hero-carousel article .banner-info h1 a{ font: 600 30px/36px 'Open Sans'; text-shadow: 2px 0 0 #131313; } .hero-carousel article .banner-info .module-infos{ width: 70%; text-shadow: 1px 1px 0 #131313; padding:10px 0 0 0; max-height: 100px; } .hero-carousel article .banner-info .read-more{ font-size: 14px; text-shadow: 1px 1px 0 #131313; } .hero-carousel-nav { width: 980px; position: absolute; bottom: 0; left: 50%; margin-left: -490px; z-index: 5; } .hero-carousel-nav li { position: absolute; bottom: 130px; right: -100px; list-style: none; } .hero-carousel-nav li.prev { left: -100px; right: auto; } .hero-carousel-nav li a { border:none; background: url(../../images/global/arrows.png) no-repeat 0 0; display:block; height:81px; width:35px; } .hero-carousel-nav li.prev a:hover{ background-position: -50px 0; } .hero-carousel-nav li.prev a:active{ background-position: -100px 0; } .hero-carousel-nav li.next a{ background-position: -250px 0; } .hero-carousel-nav li.next a:hover{ background-position: -300px 0; } .hero-carousel-nav li.next a:active{ background-position: -350px 0; } @media (min-width:980px) and (max-width: 1279px) { .hero-carousel article { width: 820px; height: 328px; } .hero-carousel article img, .hero-carousel-nav{ width: 810px; } .hero-carousel-nav li.prev{ left: 10px; } .hero-carousel-nav li.next{ right: -160px; } } @media (min-width:760px) and (max-width: 979px) { .hero-carousel article { width: 628px; height:250px; } .hero-carousel article .banner-info{ left: 30px; top: 20px; } .hero-carousel article .banner-info h1, .hero-carousel article .banner-info .module-infos{ width: 60%; } .hero-carousel article .banner-info h1 a{ font-size:24px; line-height:26px; } .hero-carousel article img, .hero-carousel-nav{ width: 618px; } .hero-carousel-nav li.prev{ left: 125px; bottom: 80px; } .hero-carousel-nav li.next{ right: -240px; bottom: 80px; } } @media (max-width: 759px) { .news-list-banner{ display:none; } }