.slider {
    background-color: lightgrey;
    box-shadow: inset 0 0 2px hsla(0,0%,0%,.2),
                0 3px 1px hsla(0,0%,100%,.75),
              0 -1px 1px 2px hsla(0,0%,0%,.1);
   padding: 28px;
    z-index:0;
    position:relative; 
    text-align:center; 
    overflow:hidden;
}

.simple_slide_slides {
    list-style: none;
    position:absolute;
    text-align:center;
}

.simple_slide_slides input {
display:none;
}

    .simple_slide_slides label {  

    cursor: pointer;  
    position:absolute;
    bottom:-10px;

    }  
    .simple_slide_slides label:before {  
        content: "";  
        display: inline-block;  
      
        width: 16px;  
        height: 16px;  
        position: absolute;  
        left: 0px;  
        bottombottom: 1px;  
        background-color: #<?php echo get_option('color'); ?>;  
        box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
    }  


     .simple_slide_slides label:before {  
        border-radius: 8px;  
    }  

    .simple_slide_slides input[type=radio]:checked + label:before {  
        content: "\2022";  
        color: #f3f3f3;  
        font-size: 30px;  
        text-align: center;  
        line-height: 18px;  
    }  


.slider:hover label {
    opacity: 1;
    visibility: visible;
}
.simple_slide_slides input:checked + label:before {
    content: "\2022";  
    color: #f3f3f3;  
    font-size: 40px;  
    text-align: center;  
    line-height: 20px;  
}

.simple_slider_content {
    width:100%;
    height:50px;
    color:#4D4D4D;
    position:relative;
    margin-top:-50px;
    bottom:0px;
    left:0px;
    z-index:11;
    opacity:0.85;
    overflow:auto;
    line-height:20px;
    animation: fade 1s;
}


.simple_slider {
    width:95%;
    opacity: 0;
    transition: .25s;
    visibility: hidden;
    position:absolute;
    top:0px;
    left:0px;
}

.simple_slider img {
    z-index:99999;
    width:100%;
    transition: .25s;
    vertical-align: top;
}

.simple_slide_slides input:checked ~ .simple_slider{
    opacity: 1;
    visibility: visible;
}



.slider div a {
text-decoration:none;
}


#dot1, #dot2, #dot3, #dot4{z-index:9999999;position:absolute;right:0px;}

#dot1:active, #dot2:active, #dot3:active, #dot4:active{z-index:9999999;}

#dot1{top:20%;}
#dot2{top:40%;}
#dot3{top:60%;}
#dot4{top:80%;}



@keyframes slide
{
0% {margin-right:100%;}
25% {margin-right:0%;}
100%{margin-right:0%;}
}


@-o-keyframes slide
{
0% {margin-right:100%;}
25% {margin-right:0%;}
100%{margin-right:0%;}
}


@-moz-keyframes slide
{
0% {margin-right:100%;}
25% {margin-right:0%;}
100%{margin-right:0%;}
}


@-webkit-keyframes slide
{
0% {margin-right:100%;}
25% {margin-right:0%;}
100%{margin-right:0%;}
}


@keyframes slideUp
{
0% {margin-top:100%;}
25% {margin-top:0%;}
100%{margin-top:0%;}
}


@-o-keyframes slideUp
{
0% {margin-top:100%;}
25% {margin-top:0%;}
100%{margin-top:0%;}
}


@-moz-keyframes slideUp
{
0% {margin-top:100%;}
25% {margin-top:0%;}
100%{margin-top:0%;}
}


@-webkit-keyframes slideUp
{
0% {margin-top:100%;}
25% {margin-top:0%;}
100%{margin-top:0%;}
}


@keyframes fade 
{
0% {opacity: 1.0;}
90% {opacity:1.0;}
100% {opacity: 0.0;}
}

@-o-keyframes fade 
{
0% {opacity: 1.0;}
90% {opacity:1.0;}
100% {opacity: 0.0;}
}

@-moz-keyframes fade 
{
0% {opacity: 1.0;}
90% {opacity:1.0;}
100% {opacity: 0.0;}
}

@-webkit-keyframes fade 
{
0% {opacity: 1.0;}
90% {opacity:1.0;}
100% {opacity: 0.0;}
}


@keyframes bounceDown
{
0% {top:-100%;}
10% {top:0%;}
20% {top:-5%;}
30% {top:0%;}
100% {top:0%;}
}

@-o-keyframes bounceDown
{
0% {top:-100%;}
10% {top:0%;}
20% {top:-5%;}
30% {top:0%;}
100% {top:0%;}
}

@-moz-keyframes bounceDown
{
0% {top:-100%;}
10% {top:0%;}
20% {top:-5%;}
30% {top:0%;}
100% {top:0%;}
}

@-webkit-keyframes bounceDown
{
0% {top:-100%;}
10% {top:0%;}
20% {top:-5%;}
30% {top:0%;}
100% {top:0%;}
}


@keyframes bounceLeft
{
0% {left:-100%;}
10%{left:0%;}
20%{left:-10%;}
30%{left:0%}
100%{left:0%;}
}

@-p-keyframes bounceLeft
{
0% {left:-100%;}
10%{left:0%;}
20%{left:-10%;}
30%{left:0%}
100%{left:0%;}
}

@-moz-keyframes bounceLeft
{
0% {left:-100%;}
10%{left:0%;}
20%{left:-10%;}
30%{left:0%}
100%{left:0%;}
}

@-webkit-keyframes bounceLeft
{
0% {left:-100%;}
10%{left:0%;}
20%{left:-10%;}
30%{left:0%}
100%{left:0%;}
}


@keyframes bounceRight
{
0% {left:100%;}
10%{left:0%;}
20%{left:10%;}
30%{left:0%;}
100%{left:0%;}
}


@-o-keyframes bounceRight
{
0% {left:100%;}
10%{left:0%;}
20%{left:10%;}
30%{left:0%;}
100%{left:0%;}
}


@-moz-keyframes bounceRight
{
0% {left:100%;}
10%{left:0%;}
20%{left:10%;}
30%{left:0%;}
100%{left:0%;}
}


@-webkit-keyframes bounceRight
{
0% {left:100%;}
10%{left:0%;}
20%{left:10%;}
30%{left:0%;}
100%{left:0%;}
}