#scroller { float: left; height: 100%; padding: 0; width: 400%; } #scroller ul { display: block; float: left; height: 100%; list-style: none outside none; margin: 0; padding: 0; text-align: left; width: 100%; } .slider-wrapper, .slider-wrapper-item { overflow: hidden; width: 100%; height: 203px;} .slider-wrapper { position: absolute; bottom: 0px; left: 0px; } .slider-wrapper-item { position: relative;} .thumbs-item-group { position: absolute; bottom: 0px; z-index: 120; width: 100%; background: none; } .thumbs-item-group ul { height: auto; padding: 0; width: 100%; z-index: 120; margin:15px 0 0;padding:0 5px 5px;} .thumbs-item-group ul li { float: left; width: 23%; overflow: hidden; padding: 28px 2px 5px; background: url("../images/opaqueBlack70.png") repeat scroll 0 0 transparent; margin: 5px 0 0 !important; } .thumbs-item-group ul li.active { padding-top: 48px; margin-top:-15px !important; } .thumbs-item-group ul li.blue{ background: url('../images/selectedBlue.png') no-repeat center 0 } .thumbs-item-group ul li.orange { background: url('../images/selectedOrange.png') no-repeat center 0 } .thumbs-item-group ul li.green { background: url('../images/selectedGreen.png') no-repeat center 0 } .thumbs-item-group ul li.red { background: url('../images/selectedRed.png') no-repeat center 0 } .thumbs-item-group ul li a { float: left; width: 100%; margin: 0; } .thumbs-item-group ul li a span { float: left; width: 100%; background: #5d70b4; height: 40px; line-height: 40px; font-size: 1.4em; color: #fff; text-transform: uppercase; text-align: center; text-shadow: 1px 1px #333; text-shadow: 1px 1px #333; } .thumbs-item-group ul li a img { float: left; width: 96%; height: auto; padding: 2%; background: #fff; } .thumbs-item-group ul li .orange a span { background: #d18728 } .thumbs-item-group ul li .green a span { background: #82892a } .thumbs-item-group ul li .red a span { background: #b4160a } .wrapper .home_carousel { float: left; height: auto; position: relative; width: 98%; margin: 0 1%; padding: 0 0 1%; } .wrapper .home_carousel .carousel_slider { display: block; float: left; height: 350px; overflow: hidden; position: relative; width: 100%; background: #000; } .wrapper .home_carousel .carousel_slider .slide_item { border: medium none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .wrapper .home_carousel .carousel_slider .slide_item .caption { position: absolute; width: 86%; height: auto; bottom: 0px; left: 0px; padding: 10px 7% 50px; } .wrapper .home_carousel .carousel_slider .slide_item .caption p { font-size: 1.4em; color: #fff; } .wrapper .home_carousel .carousel_slider .slide_item a { color: #FFFFFF; display: block !important } .wrapper .home_carousel .carousel_slider .slide_item a:hover { text-decoration: underline; } .wrapper .home_carousel .carousel_slider .slide_item img { border: medium none; float: left; height: auto; width: 100%; } .wrapper .home_carousel .carousel_slider * { border: medium none; text-decoration: none; } .wrapper .home_carousel .carousel_content { float: right; text-align: left; width: 293px; } .wrapper .home_carousel .carousel_content div.slide_info { display: none } .wrapper .home_carousel .carousel_content div.slide_info h3 { color: #0F205C; font-family: "adobe-garamond-pro"; font-size: 5em; line-height: 1.1em; padding: 0 0 10px; } .wrapper .home_carousel .carousel_content div.slide_info h4 { color: #0F205C; font-family: "adobe-garamond-pro"; font-size: 2.8em; line-height: 1.1em; padding: 0 0 10px; } .wrapper .home_carousel .carousel_content div.slide_info p { color: #000000; font-size: 1.3em; line-height: 1.6em; padding: 0 0 20px; } .wrapper .home_carousel .carousel_content div.slide_info p.button { color: #FFFFFF; font-size: 1em; line-height: 1em; padding: 0; } .wrapper .home_carousel .carousel_content div.selected { display: block } .homeScroller .bx-wrapper{float:left;width:100%;padding:0 0 10px;} .homeScroller .bx-wrapper .bx-viewport{} .wrapper .home_carousel .carousel_slider .slide_item .innerCaption { margin-left: 45px; font-size: 1.7em; line-height: 1.5em; } .slideControl { bottom: 0; position: absolute; z-index: 200; } .slideControl a { float: left; width: 65px; height: 55px; background-image: url('../images/carouselArrows.png'); background-repeat: no-repeat; } .slideControl a span { display: none } .slidePrev, .slideNext { font-size: 14px; height: 55px; width: 65px; } .slideNext { right: -16px } .slidePrev { left: -14px } .slidePrev a { background-position: 0 0 } .slidePrev a:hover { background-position: 0 -55px } .slideNext a { background-position: -65px 0 } .slideNext a:hover { background-position: -65px -55px } .wrapper .homeScroller .carousel_slider {height: 480px;} .wrapper .homeControl { bottom: 30px; } .home_carousel .thumbs { position: absolute; left: 0px; bottom: 2%; background: url("../images/opaqueBlack70.png") repeat scroll 0 0 transparent; width: 100%; height: 28px; z-index: 100; } .home_carousel .thumbs ul { position: absolute; width: 80px; left: 50%; margin: 0 0 0 -40px; top: 5px; } .home_carousel .thumbs ul li { float: left; width: 20px; height: 15px; background: url('../images/slideOff.png') no-repeat center center; font-size: 0.01em; line-height: 40px; overflow: hidden; } .home_carousel .thumbs ul li a { float: left; width: 20px; height: 15px; } .home_carousel .thumbs ul li.selected { background-image: url('../images/slideOn.png') } .wrapper .homeScroller .carousel_slider .slide_item { float: left; font-family: georgia; font-size: 1em; height: auto; text-align: center; display:none;} .wrapper .homeScroller .carousel_slider .active{display:block;} .wrapper .homeScroller .carousel_slider .slide_item .caption { position: absolute; left:auto;right: 0px; top: 5%; width: 264px; height: 226px; background: url('../images/slideTextBg.png') no-repeat 0 0; text-align: right; padding: 28px 30px 0; } .wrapper .homeScroller .carousel_slider .slide_item .blue{background-image: url('../images/slideTextBg.png');} .wrapper .homeScroller .carousel_slider .slide_item .orange{background-image: url('../images/slideTextBgOrange.png');} .wrapper .homeScroller .carousel_slider .slide_item .green{background-image: url('../images/slideTextBgGreen.png');} .wrapper .homeScroller .carousel_slider .slide_item .red{background-image: url('../images/slideTextBgRed.png');} .wrapper .homeScroller .carousel_slider .slide_item .caption p { font-size: 1.9em; color: #fff; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-shadow: 1px 1px 1px #333;line-height:1.4em; } .wrapper .homeScroller .carousel_slider .slide_item img { float: left; width: 100%; } .mobile-caption {display: none;} .wrapper .homeScroller .carousel_slider .slide_item .mobile-header p, .wrapper .homeScroller .carousel_slider .slide_item .mobile-header{ font-size: 18px!important; font-family:Arial, Helvetica, sans-serif; } .thumbs-item-group ul li {overflow: visible!important; z-index: 9999;} .bx-viewport { height:400px!important; margin-top: 200px!important; } .thumb-description{ display: none; font-size: 12px; position: absolute; top: -141px; z-index: 9999; height:163px; font-weight:bold; line-height: 17px; text-shadow: 1px 1px 2px #000000; color:#fff!important; } .active .thumb-description{ display: block; color: #fff!important; } .rtTitle { margin-bottom: 10px; font-size:24px; display: block; overflow: hidden; } .rtTitle a { text-transform: uppercase; font-size: 20px !important; color:#fff!important; } .thumbs-item-group.mobileHide ul li.active,.thumbs-item-group.mobileHide ul li { margin-top:178px!important; padding-top:45px; } .thumb-description-padding { padding-top:15px; padding-bottom:20px; padding-left:20px; padding-right:20px; } .thumb-description a, .thumb-description a:hover { color: #fff; font-size: 13px; line-height:17px; } .thumb-description.blue { background: url(../images/thumb-blue-bg.png); background-repeat: no-repeat; background-position: center top; } .thumb-description.orange { background: url(../images/thumb-orange-bg.png); background-repeat: no-repeat; background-position: center top; } .thumb-description.red { background: url(../images/thumb-red-bg.png); background-repeat: no-repeat; background-position: center top; } .thumb-description.green { background: url(../images/thumb-green-bg.png); background-repeat: no-repeat; background-position: center top; } @media only screen and (max-width: 1036px){ .wrapper .homeScroller .carousel_slider .slide_item .caption { top: 11%; width: 191px; height: 190px; background-size: 100%; text-align: right; padding: 16px 34px 0; } .wrapper .home_carousel .carousel_slider .slide_item .innerCaption { margin-left: 30px; font-size: 1.7em; line-height: 1.5em; } .wrapper .homeScroller .carousel_slider .slide_item .caption p{ font-size: 1.5em; } } @media only screen and (max-width: 920px){ .wrapper .home_carousel .carousel_slider {height: 300px;} .wrapper .homeScroller .carousel_slider {height: 400px;} .wrapper .homeScroller .carousel_slider .slide_item .caption { top:7%; } .wrapper .home_carousel .carousel_slider .slide_item .innerCaption { margin-left: 25px; font-size: 1.5em; line-height: 1.5em; } } @media only screen and (max-width: 976px){ .rtTitle { margin-bottom: 5px; } .rtTitle a{ font-size: 18px; } .thumb-description-padding { padding:10px; } .thumbs-item-group.mobileHide ul li.active,.thumbs-item-group.mobileHide ul li { margin-top:188px!important; padding-top:45px; } } @media only screen and (max-width: 840px){ .thumbs-item-group.mobileHide ul li.active,.thumbs-item-group.mobileHide ul li { margin-top:210px!important; padding-top:45px; } } @media only screen and (max-width: 767px){ .wrapper .home_carousel .carousel_slider {height: 250px;} .wrapper .home_carousel .carousel_slider .slide_item .caption{width:74%;padding:10px 13% 50px;} .wrapper .home_carousel .carousel_slider .slide_item .caption p { font-size: 1.2em; color: #fff; } .wrapper .homeScroller .carousel_slider {height: 350px;} .slideControl {display: none;} .mobile-caption {display: block;} } @media only screen and (max-width: 550px){ .slider-wrapper {bottom: auto; left: auto; float: left; position: relative; height: auto;} .slider-wrapper-item {height: auto;} .wrapper .homeScroller .carousel_slider .slide_item .caption { float: left;height: auto;padding: 9px 16%;position: relative;text-align: center;width: 68%;background:#000;} .wrapper .homeScroller .carousel_slider .slide_item .caption p { font-size:1.3em; } .thumbs-item-group{ position: relative; } } @media only screen and (max-width: 400px){ .wrapper .homeScroller .carousel_slider {height: 310px;} }