/** * BASlider - Multipurpose Before After Slider * Copyright 2013, Brainstorm Force, http://brainstormforce.com/ * Version - 2.4.2 */ @charset "utf-8"; /* CSS Document */ .baslider-main { max-width: 100%; box-shadow: 1px 1px 7px #C7C7C7; -moz-box-shadow: 1px 1px 7px #C7C7C7; -webkit-box-shadow: 1px 1px 7px #C7C7C7; cursor: pointer; box-sizing: content-box; } .beforeAfterSlidebar { position: relative; width: auto; height: auto; margin: 0; } .beforeAfterSlidebar .bottomImage { overflow: hidden; position: relative; top: 0px; width: 100%; box-sizing: content-box; } .beforeAfterSlidebar .topImage { position: absolute; top: 0px; left: 50%; width: 100%; overflow: hidden; display: block; border-left-width: 2px; border-left-style: solid; box-shadow: -4px -4px 6px -4px #474747; -moz-box-shadow: -4px -4px 6px -4px #474747; -webkit-box-shadow: -4px -4px 6px -4px #474747; box-sizing: content-box; } .beforeAfterSlidebar .topImg { left: -50%; } .beforeAfterSlidebar .bottomImage img, .beforeAfterSlidebar .topImage img { margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; position: relative; display: block; width: 100% !important; height: auto; max-height: none; max-width: 100% !important; visibility: visible !important; } .beforeAfterSlidebar h5 { position: absolute; z-index: 999; width: 100% !important; bottom: 0 !important; right: 0 !important; left: 0; padding: 0 !important; line-height: 2.5em !important; margin: 0 !important; } .ba-title { background: #3D3D3D\0/; background: #3D3D3D\9; background: rgba(29, 29, 29, 0.8); padding: 7px 10px; font-weight: normal !important; line-height: 1em !important; display: inline-block !important; } .ba-before, .ba-after { background: #3D3D3D\0/; background: #3D3D3D\9; background: rgba(29, 29, 29, 0.3); padding: 7px 7px; margin-top: 3px !important; font-size: 13px !important; line-height: 1em !important; font-weight: normal !important; } .ba-before {float: left; margin-left: 10px; margin-right: 10px;} .ba-after {float: right; margin-right: 10px; margin-left: 10px;} .baslider-main .bx-viewport .ba-before, .baslider-main .bx-viewport .ba-after { opacity: 1; transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; -ms-transition: opacity 500ms ease-in; -o-transition: opacity 500ms ease-in; -webkit-transition: opacity 500ms ease-in; } .baslider-main .bx-viewport:hover .ba-before, .baslider-main .bx-viewport:hover .ba-after { opacity: 0; } .ba-outside { max-width: 100%; clear: both; float: left; margin: 0 0 40px 0; } .ba-outside span { position: relative; z-index: 999; top: 11px; overflow: hidden; } .ba-outside .slide-pre, .ba-outside .slide-nex { background: url('images/arrow.png') no-repeat; width: 22px; height: 22px; border: 1px solid #464646; margin: 0 0 0 10px; opacity: 0.4; transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; -ms-transition: opacity 500ms ease-in; -o-transition: opacity 500ms ease-in; -webkit-transition: opacity 500ms ease-in; } .ba-outside .slide-pre { float: right !important; /*background-position: -2px -1px;*/ background-position: -2px -25px; } .ba-outside .slide-pre:hover { /*background-position: -2px -25px;*/ opacity: 1; } .ba-outside .slide-nex { float: right !important; /*background-position: -25px -1px;*/ background-position: -25px -25px; } .ba-outside .slide-nex:hover { /*background-position: -25px -25px;*/ opacity: 1; } .ba-outside a.bx-next, .ba-outside a.bx-prev { text-decoration: none; line-height: 1px; color: rgba(0,0,0,0) !important; font-size: 1px; float: left; padding: 10.5px; } /*Slider*/ .baslider-main ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } li.baslideli { margin: 0 !important; padding: 0 !important; list-style: none !important; } .baslider-main .bx-wrapper { position: relative; margin: 0 auto; padding: 0; *zoom: 1; } .baslider-main .bx-wrapper img { max-width: 100%; display: block; } .baslider-main .bx-wrapper .bx-viewport { background: #fff; } .baslider-main .bx-wrapper .bx-pager, .baslider-main .bx-wrapper .bx-controls-auto { position: absolute; bottom: -28px; width: 100%; } .baslider-main .bx-wrapper .bx-loading { min-height: 0; background: url('images/bx_loader.gif') center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } .baslider-main .bx-wrapper .bx-pager { text-align: left !important; font-size: 1em; font-family: Arial; font-weight: bold; color: #666; padding: 0; line-height: 0; margin: 0; } .baslider-main .bx-wrapper .bx-pager .bx-pager-item, .baslider-main .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *vertical-align: bottom; *zoom: 1; *display: inline; vertical-align: bottom\0/; vertical-align: bottom\9; } .baslider-main .bx-wrapper .bx-pager.bx-default-pager a { background: #c5c5c5; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 3px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; transition: background 500ms ease-in; -moz-transition: background 500ms ease-in; -ms-transition: background 500ms ease-in; -o-transition: background 500ms ease-in; -webkit-transition: background 500ms ease-in; } .baslider-main .bx-wrapper .bx-pager.bx-default-pager a:hover, .baslider-main .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; } .baslider-main .bx-wrapper .bx-prev { left: 10px; background: url('images/controls.png') no-repeat 0 -32px; } .baslider-main .bx-wrapper .bx-next { right: 10px; background: url('images/controls.png') no-repeat -43px -32px; } .baslider-main .bx-wrapper .bx-prev:hover { background-position: 0 0; } .baslider-main .bx-wrapper .bx-next:hover { background-position: -43px 0; } .baslider-main .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 999; } .baslider-main .bx-wrapper .bx-controls-direction a.disabled { display: none; } .baslider-main .bx-wrapper .bx-controls-auto { text-align: center; } .baslider-main .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; } .baslider-main .bx-wrapper .bx-controls-auto .bx-start:hover, .baslider-main .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } .baslider-main .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; } .baslider-main .bx-wrapper .bx-controls-auto .bx-stop:hover, .baslider-main .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } .baslider-main .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 45px; width: 35px; } .baslider-main .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666\9; background: rgba(80, 80, 80, 0.75); width: 100%; } .baslider-main .bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; } .baslideli { z-index: 0 !important; }