/****************************************************************************** Home Page Slider *******************************************************************************/ #homepage-slider { padding-left: 0; padding-right: 0; margin-bottom: 14px; max-width: 100%; max-height: 100%; overflow: hidden; position: relative; z-index: 1; float: left; } @medianull (max-width: 767px) { #homepage-slider { width: 100%; max-width: 100%; padding-top: 20px; } } #homepage-slider #homeslider { margin: 0 auto; padding: 0; } #homepage-slider .homeslider-description { padding: 50px 50px; cursor: pointer; } #homepage-slider .homeslider-description h2 { font-size: 2.7em; color: white; margin: 0; padding: 0; } #homepage-slider .homeslider-description p { width: 50%; font-size: 1.15em; line-height: 1.3em; padding: 0.5em 0; color: white; } #homepage-slider .homeslider-description button { font-size: 1.2em; text-transform: uppercase; } @medianull (max-width: 1200px) { #homepage-slider .homeslider-description { padding: 20px; font-size: 0.8em; } } @medianull (max-width: 768px) { #homepage-slider .homeslider-description { padding: 30px; font-size: 0.7em; } #homepage-slider .homeslider-description p { font-size: 1.5em; } } @medianull (max-width: 480px) { #homepage-slider .homeslider-description { padding: 30px; font-size: 0.5em; } #homepage-slider .homeslider-description p { font-size: 1.7em; } } /***************************************************************************** BXSlider Styles ********************************************************************************/ #homepage-slider .homeslider-container { position: relative; } #homepage-slider .homeslider-image { position: absolute; left: 0; top: 0; } #homepage-slider .homeslider-description { position: absolute; left: 0; top: 0; } #homepage-slider .bx-wrapper { position: relative; padding: 0; *zoom: 1; } #homepage-slider .bx-wrapper a { display: block; } #homepage-slider .bx-wrapper img { display: block; max-width: 100%; height: auto; } #homepage-slider .bx-wrapper .bx-viewport { width: 100%; } #homepage-slider .bx-wrapper .bx-pager, #homepage-slider .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; } #homepage-slider .bx-wrapper .bx-loading { min-height: 50px; background: url(images/bx_loader.gif) center center no-repeat white; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } #homepage-slider .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #666; padding-top: 20px; } #homepage-slider .bx-wrapper .bx-pager .bx-pager-item, #homepage-slider .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } #homepage-slider .bx-wrapper .bx-pager.bx-default-pager a { background: #666; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #homepage-slider .bx-wrapper .bx-pager.bx-default-pager a:hover, #homepage-slider .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; } #homepage-slider .bx-wrapper .bx-prev { right: 60px; } #homepage-slider .bx-wrapper .bx-prev:after { content: "\f053"; } #homepage-slider .bx-wrapper .bx-next { right: 10px; } #homepage-slider .bx-wrapper .bx-next:after { content: "\f054"; } #homepage-slider .bx-wrapper .bx-controls-direction a { position: absolute; bottom: 10px; outline: 0; width: 52px; height: 52px; text-indent: -9999px; z-index: 9999; border: 2px solid white; } #homepage-slider .bx-wrapper .bx-controls-direction a:before { height: 48px; width: 48px; display: block; background: white; content: "."; opacity: 0.14; text-indent: -9999px; position: absolute; left: 0; top: 0; z-index: 1; } #homepage-slider .bx-wrapper .bx-controls-direction a:after { display: block; width: 48px; height: 48px; color: white; text-indent: 0; text-align: center; font-size: 21px; font-family: "FontAwesome"; position: absolute; top: 0; left: 0; z-index: 2; padding: 16px 0 0 0; } #homepage-slider .bx-wrapper .bx-controls-direction a:hover:before { background: #333333; opacity: 0.83; } #homepage-slider .bx-wrapper .bx-controls-direction a.disabled { display: none; } #homepage-slider .bx-wrapper .bx-controls-auto { text-align: center; } #homepage-slider .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(images/controls.png) -86px -11px no-repeat; margin: 0 3px; } #homepage-slider .bx-wrapper .bx-controls-auto .bx-start:hover, #homepage-slider .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } #homepage-slider .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(images/controls.png) -86px -44px no-repeat; margin: 0 3px; } #homepage-slider .bx-wrapper .bx-controls-auto .bx-stop:hover, #homepage-slider .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } #homepage-slider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } #homepage-slider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } #homepage-slider .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666666 \9; background: rgba(80, 80, 80, 0.75); width: 100%; } #homepage-slider .bx-wrapper .bx-caption span { color: white; font-family: Arial, Helvetica, sans-serif; display: block; font-size: .85em; padding: 10px; } .ie8 #homepage-slider .bx-wrapper .bx-controls-direction a:before { background: #333333; }