/*
#Slider

|Locations Used|
|------|
|Home Page|

|Classes|
|---|
|flexslider|
|hide-on-load|
|flex-control-nav|
|flex-direction-nav|
|active|
|prev|
|next|

```
<div class="flexslider" style="min-height: inherit;">
    <ul class="slides">
    <li style="display: none;">
        <a href="/parametric-search">
        <img src="/images/slider-images/title-slider.jpg?width=1009" alt="CUI" />
        </a>
    </li>
    <li class="hide-on-load" style="display: none;">
        <a href="/catalog/power">
        <img src="/images/slider-images/power-slider.jpg?width=1009" alt="CUI Power" />
        </a>
    </li>
    <li class="hide-on-load" style="display: list-item;">
        <a href="/catalog/components">
        <img src="/images/slider-images/components-slider.jpg?width=1009" alt="CUI Components" />
        </a>
    </li>
    </ul>
    <ol class="flex-control-nav">
    <li>
        <a class="">1</a>
    </li>
    <li>
        <a class="">2</a>
    </li>
    <li>
        <a class="active">3</a>
    </li>
    </ol>
    <ul class="flex-direction-nav">
    <li>
        <a class="prev" href="#">Previous</a>
    </li>
    <li>
        <a class="next" href="#">Next</a>
    </li>
    </ul>
</div>
```
*/

/* *******************************************************************
**
** Styles for the Slider -- using flexslider
**
******************************************************************** */

/* FlexSlider Necessary Styles
*********************************/
.flexslider {
    width: 100%;
    margin: 0 10;
    padding: 20px 0;
    position: relative;
}

/* FlexSlider Default Theme
*********************************/
.flexslider .slides, .flexslider p {
    margin: 0;
    padding: 0 auto;
}

/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flexslider-container {
    position: relative;
}

.flex-direction-nav {
    display: none;
}

/* Caption style */
.flex-caption {
    width: 96%;
    margin-bottom: 0;
    padding: 2%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,.3);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    font-size: 15px;
    line-height: 18px;
}

/* Control Nav */
.flex-control-nav {
    display: none;
    margin-left: -31px;
    position: absolute;
    bottom: -30px;
    left: 50%;
}

#preloader_1{
    position:relative;
}
#preloader_1 span{
    display:block;
    bottom:0px;
    width: 9px;
    height: 5px;
    background:#9b59b6;
    position:absolute;
    animation: preloader_1 1.5s  infinite ease-in-out;
}
 
#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;
 
}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
    0% {height:5px;transform:translateY(0px);background:#9b59b6;}
    25% {height:30px;transform:translateY(15px);background:#3498db;}
    50% {height:5px;transform:translateY(0px);background:#9b59b6;}
    100% {height:5px;transform:translateY(0px);background:#9b59b6;}
}