#dot,#slider{
    margin:0 auto
}
#dot,#heading{
    text-align:center
}
@keyframes fade{
    from{
        opacity:.4
    }
    to{
        opacity:1
    }
}
#slider{
    width:100%;
    overflow:hidden
}
.mySlides{
    overflow:hidden;
    animation-name:fade;
    animation-duration:1s;
    display:none
}
.dot{
    width:7px;
    height:7px;
    border-radius:30px;
    transition:width .3s;
    background:padding-box #a3a3a3;
    cursor:pointer;
    box-sizing:content-box;
    display:inline-block;
    margin: 9px 1px;
}
.active{
    width:15px ;
    cursor:auto ;
    background:#000;
}  
@media (max-width:567px){
    #slider{
        width:100%
    }
}
#heading{
    display:block;
    font-size:2em;
    margin:10px 0
}
.s-3{
    display:block!important
}
.s-4{
    display:none!important
}
@media only screen and (max-width:480px){
    .s-3{
        display:none!important
    }
    .s-4{
        display:block!important
    }
}