/*-------------------------------------------------- I A M S www.iams.it website by websolute --------------------------------------------------*/ /*-------------------------------------------------- HP SHOWREEL --------------------------------------------------*/ #hp_showreel {position:relative;} #hp_showreel .image img {width:930px; height:372px;} .showreel {position:relative; padding:5px; background:#fff; width:930px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;} .showreel div.slide {position:relative; overflow:hidden;} .showreel .showreel_nav div {width:40px; height:40px; background:url("../img/slider-control-left.png") 13px 12px no-repeat #f75d00; position:absolute; text-indent:-9999px; font-size:0; color:#000; z-index:2; top:40%; left:0; margin-top:19px; border:0; border-radius:0; opacity:1; cursor:pointer;} .showreel #next_btn {background:url("../img/slider-control-right.png") 16px 12px no-repeat #f75d00; left:auto; right:0;} .showreel .showreel_nav div:hover {background-color:#ffa405!important;} .showreel .showreel_pag {display:inline-block; background:#555; background:rgba(0,0,0,.5); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; padding:3px 10px; text-align:center; position:absolute; z-index:10; width:50px; margin-left:-25px; left:50%; bottom:10px;} .showreel .showreel_pag a {display:inline-block; width:8px; height:8px; background:#abada1; text-decoration:none; margin:0 4px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;} .showreel .showreel_pag a:hover {background:#ddd;} .showreel .showreel_pag a.selected {background:#fff;} .showreel .showreel_pag span {display:none;} /*-------------------------------------------------- slide --------------------------------------------------*/ .slide .tit, .slide .desc, .slide .prod, .slide .desc, .slide .cta {position:absolute; top:0; left:0; z-index:1; color:#fff; font-size:16px; line-height:24px; font-family:Verdana, Arial, sans-serif;} .slide .tit {font-size:32px; line-height:36px; margin-bottom:20px;} .slide .cta a {margin-right:10px;} /*-------------------------------------------------- box home --------------------------------------------------*/ .box_home {position:relative; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; font-size:11px; line-height:13px;} .box_home .bg {position:relative; z-index:1;} .box_home .tit {color:#f75d00; font-weight:bold;} /*-------------------------------------------------- box home 1 --------------------------------------------------*/ .box_home_1 .rabbit_dog {position:absolute; z-index:2; left:5px; top:49px;} .box_home_1 .rabbit_text {position:absolute; z-index:2; left:83px; top:25px;} .box_home_1 .text {position:absolute; z-index:2; left:104px; top:80px; width:110px;} .box_home_1 .cta {position:absolute; z-index:2; left:103px; top:145px; white-space:nowrap;} /*-------------------------------------------------- box home 2 --------------------------------------------------*/ .box_home_2 .prod {position:absolute; z-index:2; left:0px; top:27px;} .box_home_2 .tit {position:absolute; z-index:2; left:94px; top:14px; width:120px;} .box_home_2 .text {position:absolute; z-index:2; left:94px; top:57px; width:120px; font-size:10px; line-height:12px;} .box_home_2 .cta {position:absolute; z-index:2; left:94px; top:145px; white-space:nowrap;} /*-------------------------------------------------- box home 3 --------------------------------------------------*/ .box_home_3 .tit {position:absolute; z-index:2; left:14px; top:14px; width:120px;} .box_home_3 .text {position:absolute; z-index:2; left:14px; top:48px; width:120px;} .box_home_3 .cta {position:absolute; z-index:2; left:14px; top:145px; white-space:nowrap;} /*-------------------------------------------------- box home 4 --------------------------------------------------*/ .box_home_4 .tit {position:absolute; z-index:2; left:14px; top:14px; width:100px;} .box_home_4 .text {position:absolute; z-index:2; left:14px; top:60px; width:100px;} .box_home_4 .cta {position:absolute; z-index:2; left:14px; top:145px; white-space:nowrap;} @media (min-width: 980px) { .showreel, .showreel .caroufredsel_wrapper {width:930px; height:370px!important;} /*-------------------------------------------------- slide 1 --------------------------------------------------*/ .slide_1 .prod {top:15px; left:45px; z-index:1;} .slide_1 .tit {top:90px; left:365px; width:500px;} .slide_1 .desc {top:180px; left:365px; width:500px;} .slide_1 .cta {left:365px; top:270px; width:500px;} /*-------------------------------------------------- slide 2 --------------------------------------------------*/ .slide_2 .tit {top:85px; left:50px; width:500px;} .slide_2 .desc {top:170px; left:51px; width:500px;} .slide_2 .cta {top:260px; left:49px; width:500px;} /*-------------------------------------------------- slide 3 --------------------------------------------------*/ .slide_3 .tit {top:80px; left:540px; width:345px; text-align:center;} .slide_3 .cta {top:290px; left:660px; width:200px;} } @media (min-width: 768px) and (max-width: 979px){ .showreel, .showreel .caroufredsel_wrapper {width:715px; height:284px!important;} #hp_showreel .image img {width:715px; height:284px;} .slide .tit, .slide .desc, .slide .prod, .slide .desc, .slide .cta {position:absolute; top:0; left:0; z-index:1; color:#fff; font-size:14px; line-height:18px; font-family:Verdana, Arial, sans-serif;} .slide .tit {font-size:24px; line-height:26px; margin-bottom:20px;} /*-------------------------------------------------- slide 1 --------------------------------------------------*/ .slide_1 .prod {top:15px; left:45px; z-index:1; width:227px;} .slide_1 .tit {top:50px; left:295px; width:400px;} .slide_1 .desc {top:120px; left:295px; width:400px;} .slide_1 .cta {top:200px; left:295px; width:400px;} /*-------------------------------------------------- slide 2 --------------------------------------------------*/ .slide_2 .tit {top:45px; left:50px; width:500px;} .slide_2 .desc {top:120px; left:51px; width:500px;} .slide_2 .cta {top:200px; left:49px; width:500px;} /*-------------------------------------------------- slide 3 --------------------------------------------------*/ .slide_3 .tit {top:50px; left:375px; width:345px; text-align:center;} .slide_3 .cta {top:200px; left:500px; width:200px;} /*-------------------------------------------------- box home 1 --------------------------------------------------*/ .box_home_1 .rabbit_dog {position:absolute; z-index:2; left:5px; top:49px; width:62px;} .box_home_1 .rabbit_text {position:absolute; z-index:2; left:57px; top:15px; width:96px;} .box_home_1 .text {position:absolute; z-index:2; left:70px; top:62px; width:90px; font-size:10px; line-height:12px;} .box_home_1 .cta {position:absolute; z-index:2; left:auto; right:8px; top:auto; bottom:6px;} /*-------------------------------------------------- box home 2 --------------------------------------------------*/ .box_home_2 .prod {position:absolute; z-index:2; left:0px; top:6px; display:none;} .box_home_2 .tit {position:absolute; z-index:2; left:10px; top:8px; width:145px; font-size:10px; line-height:12px;} .box_home_2 .text {position:absolute; z-index:2; left:10px; top:38px; width:145px; font-size:10px; line-height:12px; font-size:10px; line-height:12px;} .box_home_2 .cta {position:absolute; z-index:2; left:auto; right:8px; top:auto; bottom:6px;} /*-------------------------------------------------- box home 3 --------------------------------------------------*/ .box_home_3 .tit {position:absolute; z-index:2; left:10px; top:8px; width:145px; font-size:10px; line-height:12px;} .box_home_3 .text {position:absolute; z-index:2; left:10px; top:26px; width:90px; font-size:10px; line-height:12px;} .box_home_3 .cta {position:absolute; z-index:2; left:auto; right:8px; top:auto; bottom:6px;} /*-------------------------------------------------- box home 4 --------------------------------------------------*/ .box_home_4 .tit {position:absolute; z-index:2; left:10px; top:8px; width:100px; font-size:10px; line-height:12px;} .box_home_4 .text {position:absolute; z-index:2; left:10px; top:36px; width:80px; font-size:10px; line-height:12px;} .box_home_4 .cta {position:absolute; z-index:2; left:auto; right:8px; top:auto; bottom:6px;} } @media (max-width: 767px) { .box_home {position:static; background:#fff; margin-bottom:10px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px;} .box_home img, .box_home div {position:static!important; width:auto!important; padding:5px;} .box_home .bg {display:none;} }