.my-slider{
    overflow:hidden;
    height: 180px;
    position:relative;
}
.my-slider img{
    /*position:absolute;*/
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

.unactive-slde{
    display: none;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.active-slde{
    display: inline;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.active-slde1{
    display: inline;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.active-slde-efect1{
    animation-name: example;
    animation-duration: 2s;
    position: relative;
    animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {transform:rotate(0deg); width: 100%; margin-left:0;}
    100% {transform:rotate(360deg); width: 0; height: 20%!important; margin-left:50%}

}

/* Standard syntax */
@keyframes example {
    0%   {transform:rotate(0deg); width: 100%; margin-left:0;}
    100% {transform:rotate(360deg); width: 0; height: 20%!important; margin-left:50%}
}

.active-slde-efect4{
    animation-name: example4;
    animation-duration: 2s;
    position: relative;
    animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example4 {
    0%   {width: 100%; height: 100%; margin-left:0;}
    100% {width: 0; height: 20px!important; margin-left:50%}

}

/* Standard syntax */
@keyframes example4 {
    0%   {width: 100%; height: 100%; margin-left:0;}
    100% {width: 0; height: 20px!important; margin-left:50%}
}

.active-slde-efect4a{
    animation-name: example4a;
    animation-duration: 2s;
    position: relative;
    animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example4a {
    0%   {width: 0; height: 20px!important; margin-left:50%;}
    100% {width: 100%; height: 100%; margin-left:0;}

}

/* Standard syntax */
@keyframes example4a {
    0%   {width: 0; height: 20px!important; margin-left:50%;}
    100% {width: 100%; height: 100%; margin-left:0;}
}


.active-slde-efect5{
    animation-name: example5;
    animation-duration: 2s;
    position: relative;
    animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example5 {
    0%   {filter:blur(0px);}
    100% {filter:blur(110px);}

}

/* Standard syntax */
@keyframes example5 {
    0%   {filter:blur(0px);}
    100% {filter:blur(110px);}
}

.active-slde-efect5a{
    animation-name: example5a;
    animation-duration: 2s;
    position: relative;
    animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example5a {
    0%   {filter:blur(110px);}
    100% {filter:blur(0px);}

}

/* Standard syntax */
@keyframes example5a {
    0%   {filter:blur(110px);}
    100% {filter:blur(0px);}
}


.active-slde-efect6{
    animation-name: example6;
    animation-duration: 2s;
    position: relative;
    animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example6 {
    0%   {opacity: 1; filter: alpha(opacity=100);}
    100% {opacity: 0.02; filter: alpha(opacity=2);}

}

/* Standard syntax */
@keyframes example6 {
    0%   {opacity: 1; filter: alpha(opacity=100);}
    100% {opacity: 0.02; filter: alpha(opacity=2);}
}

.active-slde-efect6a{
    animation-name: example6a;
    animation-duration: 2s;
    position: relative;
    animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example6a {
    0%   {opacity: 0.02; filter: alpha(opacity=2);}
    100% {opacity: 1; filter: alpha(opacity=100);}

}

/* Standard syntax */
@keyframes example6a {
    0%   {opacity: 0.02; filter: alpha(opacity=2);}
    100% {opacity: 1; filter: alpha(opacity=100);}
}


.active-slde-efect2{
    animation-name: example2;
    animation-duration: 2s;
    position: relative;
    animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example2 {
    0%   { filter: brightness(100%);}
    100% {filter: brightness(10%);}

}

/* Standard syntax */
@keyframes example2 {
    0%   { filter: brightness(100%);}
    100% {filter: brightness(10%);}
}

.active-slde-efect2a{
    animation-name: example2a;
    animation-duration: 2s;
    position: relative;
    animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example2a {
    0%   { filter: brightness(10%);}
    100% {filter: brightness(100%);}

}

/* Standard syntax */
@keyframes example2a {
    0%   { filter: brightness(10%);}
    100% {filter: brightness(100%);}
}