/*
 * BX3 Alpha Slider v0.0.1 Custom
 * http://www.bx3interactive.com/
 *
 * Copyright 2014, BX3 Interactive, LLC
 * Built this because we couldn't find any open source sliders like it
 * One of these days we might release it in some public fashion and actually make
 * an official downloadable slider, but until then, if you find it and you're
 * reading this, then you can use it under an MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

/* max-height: 586px; */

#alpha_slider{
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    z-index: 1000;
    text-align: center;
    margin: 0;
    padding: 0 0 38px;
    background: transparent url(/images/slider-shadow.gif) no-repeat bottom center;
}

.alpha_view_port{
    position: relative;
    z-index: 0;
    margin: 0px auto;
    width: 100%;
    max-width: 1920px;
    white-space: nowrap;
    /* calculated */
    height: auto;
}

.alpha_cover{ position: absolute; top: 0px; z-index: 1000; height: 100%; margin: 0px; padding: 0px;
    background: rgba(255, 255, 255, .5);
    /* background: #fff; opacity: .2; */
}

/* to make sure it covers extrordinarily wide screens */
.alpha_cover_left, .alpha_cover_right{ width: 100%; margin: 0; padding: 0; }
.alpha_cover_left{ left: -100%; }
.alpha_cover_right{ left: 100%; }
.alpha_cover_center{ display: none; left: 0px; width: 100%; }

.alpha_slides{ position: absolute; top: 0px; z-index: 100;}

.alpha_slides ul{ }

.alpha_slides ul, .alpha_slides ul li{ display: inline; display: inline-block; vertical-align: top; margin: 0px; padding: 0px;
    /* actual height specified by defined aspect ratio */
    max-height: 750px;
}
.alpha_slides ul li{
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    word-spacing:0em;
}
.alpha_slides ul li > img{ position: absolute; z-index: 10; top: 0px; left: 0px; display: inline; display: inline-block; margin: 0px; padding: 0px; width: 100%; height: auto; }
.slide_text{ position: relative; z-index: 100; }

/* most stuff you want to change would be below here */

/* small size screens, disable this */

.slide_control_prev, .slide_control_next{ display: block; position: absolute; top: 50%; z-index: 900; width: 39px; height: 67px; margin-top: -33px; opacity: 1; cursor: pointer; }

.slide_control_prev:hover, .slide_control_next:hover{ opacity: .8; }

.slide_control_prev{ background: url(/images/slider-arrows.png) no-repeat 0px 0px; left: 31px; }
.slide_control_next{ background: url(/images/slider-arrows.png) no-repeat 0px -67px; right: 31px; }

.slide_pagination{ display: block; position: absolute; bottom: -38px; text-align: center; width: 100%; z-index: 900; }

.slide_pagination ul{ list-style: none; margin: 0px auto; padding: 0px; text-align: center; }
.slide_pagination li{ display: inline-block; margin: 0px 5px; padding: 0px; }
.slide_pagination li a{ display: block; width: 12px; height: 12px; background-color: #d5d5d5; border-radius: 12px; text-decoration: none; opacity: 1; }
.slide_pagination li .cur_slide{ background-color: #155c9f; opacity: 1;  box-shadow: 0px 0px 3px 0px rgb(255, 255, 255); }



/* responsive */

/* 450 */
@media screen and (min-width: 450px) {

}
/* end 450 */

/* 580 */
@media screen and (min-width: 640px) {

}
/* end 580 */

/* 780 */
@media screen and (min-width: 780px) {

}
/* end 780 */

/* 950 */
@media screen and (min-width: 950px) {

}
/* end 950 */


/* 1200 */
@media screen and (min-width: 1200px) {

}
/* end 1200 */