#single_slider_responsive img { width: auto \9; height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } .single_slider_carousel { visibility: hidden; position: relative; line-height: 1; } .single_slider_carousel_container { /*width: 100%; */ background: #FFF; position: relative; z-index: 1; padding: 0; margin-top: 20px; } .single_slider_carousel_inner { position: relative; width: 100%; overflow: hidden; } .single_slider_carousel_inner > .item { position: relative; display: none; -webkit-transition: 0.6s ease-in-out left; -moz-transition: 0.6s ease-in-out left; -o-transition: 0.6s ease-in-out left; transition: 0.6s ease-in-out left; overflow:hidden; margin: 0; } .single_slider_carousel_inner > .item > img, .single_slider_carousel_inner > .item > a img { display: block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Android, remove default orange highlight on touch */ /* line-height: 1; */ } .single_slider_carousel_inner > .active, .single_slider_carousel_inner > .next, .single_slider_carousel_inner > .prev { display: block; } .single_slider_carousel_inner > .active { left: 0; } .single_slider_carousel_inner > .next, .single_slider_carousel_inner > .prev { position: absolute; top: 0; width: 100%; } .single_slider_carousel_inner > .next { left: 100%; } .single_slider_carousel_inner > .prev { left: -100%; } .single_slider_carousel_inner > .next.left, .single_slider_carousel_inner > .prev.right { left: 0; } .single_slider_carousel_inner > .active.left { left: -100%; } .single_slider_carousel_inner > .active.right { left: 100%; } .single_slider_carousel_control { position: absolute; top: 40%; left: 25px; /*background: #DDD url(../images/slide_buttons.png) no-repeat -13px -8px;*/ background: #222; width: 30px; height: 38px; margin-top: -20px; font-family: Arial, sans-serif; font-size: 60px; font-weight: 100; line-height: 28px; color: #fff; text-align: center; border: none; -moz-border-radius: 10px -webkit-border-radius: 10px; border-radius: 10px; opacity: 0.8; filter: ; /*text-indent: -9999px;*/ z-index: 10; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Android, remove default orange highlight on touch */ behavior: url(js/PIE.htc); } .single_slider_carousel_control:active, .single_slider_carousel_control:focus { color: #FFF; outline: none; text-decoration: none; } .single_slider_carousel_control.right { /*background: #DDD url(../images/slide_buttons.png) no-repeat -54px -8px;*/ left: auto; right: 25px; } .single_slider_carousel_control:hover { /*background: #DDD url(../images/slide_buttons.png) no-repeat -13px -8px;*/ color: #FFF; text-decoration: none; width: 30px; height: 38px; opacity: 0.9; filter: alpha(opactiy=90); behavior: url(js/PIE.htc); } .single_slider_carousel_control.right:hover { /*background: #DDD url(../images/slide_buttons.png) no-repeat -54px -8px;*/ } .single_slider_carousel_indicators { position: absolute; bottom: 80px; right: 35px; z-index: 5; margin: 0; list-style: none; padding: 0; } .single_slider_carousel_indicators li { /* width: 25px; height: 25px; background: transparent url(../images/slide_buttons.png) no-repeat -36px -56px; border-radius: none; */ padding: 3px; float: left; } .single_slider_carousel_indicators li span { display: block; padding: 3px; background: transparent; border: 1px solid #fd5068; border-radius: 10px; behavior: url(js/PIE.htc); } .single_slider_carousel_indicators li span:hover { /* background-position: -12px -56px; */ cursor: pointer; background: #FFF; opacity: 0.8; filter: alpha(opactiy=80); behavior: url(js/PIE.htc); } .single_slider_carousel_indicators li.active span { background: #fd5068; opacity: 0.8; filter: alpha(opactiy=80); behavior: url(js/PIE.htc); /* width: 25px; height: 25px; background: transparent url(../images/slide_buttons.png) no-repeat -12px -56px; border-radius: none; */ } .single_slider_carousel_bottom { visibility: hidden; height: 98px; width: 78%; margin: -62px auto 0 auto; /* background: url(../images/slideshow-corners.png) no-repeat center -48px; opacity: 0.4; filter: alpha(opacity=40); behavior: url(js/PIE.htc); */ } .single_slider_carousel_caption { position: absolute; padding: 1.5em; background: white; width: 52%; right: 0; top: 2em; box-shadow: 2px 2px 8px rgba(78, 78, 78, 0.5); margin-right: 1em; border-radius: 5px; height: 280px; } .single_slider_carousel_caption h4, .single_slider_carousel_caption h4 a { color: #343434; font-weight: bold; margin: 1em 0; font-size: 16px; } .single_slider_carousel_caption h4 a:hover { text-decoration: underline; } .single_slider_carousel_caption p { color: black; font-size: 14px; } .single_slider_carousel_caption .single_slider_carousel_description { font-size: 14px; padding: 0; line-height: 1.6; margin-bottom: 2em; font-weight: normal; } /* Slide Show Custom Homepage */ .single_slider_carousel_container, .single_slider_carousel_inner, .single_slider_carousel_container .item{ background: transparent !important; } .single_slider_carousel_container .item > a{ display: block; width: 50%; overflow: hidden; border-radius: 5px; margin: 10px; border: 1px solid #cecece; } .single_slider_carousel_container .item > a img{ width: 100%; } @media only screen and (max-width: 1200px){ .wd_hero_area > .container{ max-width: 100%; } .single_slider_carousel_container, .single_slider_carousel_inner, .single_slider_carousel_container .item{ overflow: visible; } } @media only screen and (max-width: 1024px){ .single_slider_carousel_indicators{ bottom: 20px; right: 60px; } } @media only screen and (max-width: 799px){ .single_slider_carousel{ } .single_slider_carousel_container .item > a{ width: 100%; margin: 0; box-shadow: none; margin-bottom: 1em; } .single_slider_carousel_caption { border: 1px solid #cecece; z-index: 2; height: auto; width: 90%; margin: -2em auto 0; position: relative; top: 0em; } }