#template 
{
    display: none;
}

.hslider.holder 
{
    position: relative;
    overflow: hidden;
}

.hslider.holder ul.slider {
    position: absolute;
}

.hslider.holder ul.slider li
{
    float: left;
    opacity: 0.1;
    transition: opacity 0.6s ease;
}

.hslider.holder ul.slider li.active 
{
    opacity: 1;
    transition: initial;
}

.hslider.holder .bullet-list 
{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 210px;
    z-index: 100;
    text-align: center;
    display: none;
}

.hslider.holder .bullet-list .bullet 
{
    width: 15px;
    height: 15px;
    margin: 0 3px;
    border-radius: 50%;
    border: 3px solid #CCCCCC;
    display: inline-block;
    transition: background-color 0.6s ease;
    cursor: pointer;
}

.hslider.holder .bullet-list .bullet:hover {
    border: 3px solid #FFFFFF;
}

.hslider.holder .bullet-list .bullet.selected 
{
    border: 3px solid #FFFFFF;
    background-color: #FFFFFF;
}

.hslider.holder .navigator 
{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 100px;
    z-index: 100;
}
   
.hslider.holder .prev 
{
    position: absolute;
    top: 100px;
    left: 0px;
    z-index: 100;
    
    display: inline-block;
    background: url(../images/arrow_left.png) center center;
    width: 65px;
    height: 114px;
    cursor: pointer;
}

.hslider.holder .next
{
    position: absolute;
    top: 100px;
    right: 0px;
    z-index: 100;
    
    display: inline-block;
    background: url(../images/arrow_right.png) center center;
    width: 40px;
    height: 114px;
    cursor: pointer;
}

@media screen and (min-width: 576px) 
{
    
    .hslider.holder .bullet-list 
    {
        display: block;
        top: 320px;
    }
    
    .hslider.holder .prev,
    .hslider.holder .next
    {
        top: 550px;
    }
    
}
@media screen and (min-width: 768px) 
{
    
    .hslider.holder .bullet-list 
    {
        top: 285px;
    }
    
    .hslider.holder .prev,
    .hslider.holder .next
    {
        top: 455px;
    }
    
}

@media screen and (min-width: 992px) 
{
    
    .hslider.holder .bullet-list 
    {
        top: 400px;
    }
    
    .hslider.holder .prev,
    .hslider.holder .next
    {
        top: 605px;
    }
    
}

@media screen and (min-width: 1200px) 
{
    
    .hslider.holder .bullet-list 
    {
        top: 470px;
    }
    
    .hslider.holder .prev,
    .hslider.holder .next
    {
        top: 710px;
    }
    
}