#slider{
    width:80%;
    margin:0px auto;
    position:relative;
    overflow:hidden;
 	border-radius:10px;
    }
    
    .slide{
    width:100%;
    display:none;
    animation-name:fade;
    animation-duration:4s;
    }
    
    img{
    width:100%;
    }
    
    @keyframes fade{
    from{opacity:0.3;}
    to{opacity:1;}
    }
    
    .controls{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:1.5em;
    padding:15px 10px;
    border-radius:5px;
    trasparent:.2px;
    }
    
    .controls:hover{
    transition:0.3s;
    background:gray;
    opacity: 0.5;
    
    }
    
    .controls:active{
    color:white;
    }
    
    #left-arrow{
    left:20px;
    color:white;
    }
    
    #right-arrow{
    right:20px;
    color:white;
    }
    
    #dots-con{
     position: absolute;
	 bottom: 1%;
	 width: 100%;
	 text-align: center;
    }
    .dot{
    
    display:inline-block;
    background:white;
    padding:5px;
    border-radius:50%;
    margin:10px 5px;
    width: .5em;
 	height: .5em;
    
    }
    
    .activate{
    background:gray;
    }
    
    @media (min-width:0px){
    #slider{width:100%;
    }
    
    .controls{
      font-size:2em;
    }
    
    #dots-con{
      display:-ms-inline-flexbox;
    }