body{
    background:#1b1818c5;
  }
  h1  {
    font-family: 'Gilroy', sans-serif;
      text-align: center;
      letter-spacing: .15em;
  }

  a:link {
      color: cornsilk;
    text-decoration: none;
  }
  
  a:visited {
      color: cornsilk;
    text-decoration: none;
  }
  .button{
	text-decoration: none;
	color: cornsilk;
	font-weight: bold;
	font-size: 30px;
	position: relative;
	padding: 10px;
}
  a.button.one:before, a.button.one:after{
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	transition: all 0.3s ease;
}
a.button.one:before{
	top: -2.5%;
	left: -1%;
	border-top: 2px solid cornsilk;
	border-left: 2px solid cornsilk;	
}
a.button.one:after{
	bottom: -2.5%;
	right: -1%;
	border-bottom: 2px solid cornsilk;
	border-right: 2px solid cornsilk;
}
a.button.one:hover:before, a.button.one:hover:after{
	width: 100%;
	height: 100%;
	transition: all 0.3s ease;
}
.aapvo {
    position: absolute;
    margin-top: -60px;
    margin-left: -15px;
}
#aapvopupu {
    height: 10vh;
    width: 10vh;
    
}

  #slider{
    width:75%;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    box-shadow:2px 5px 10px rgba(0,0,0,0.4);;
  }
  
  .slide{
    width:100%;
    
    display:none;
    animation-name:fade;
    animation-duration:1s;
    
  }

  img, video{
    
   width:100%; 
  }
  @keyframes fade{
    from{opacity:0.5;}
    to{opacity:1;}
  }
  
  .controls{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:1.5em;
    padding:15px 10px;
    border-radius:5px;
    
  }
  video, #start, #stop, #pause, #plus, #minus, #mute {
    /* background color */
      background-color: #ffcccc;
      /* background gradient */
      background-image: linear-gradient(top, #fff, #fcc);
      background-image: -moz-linear-gradient(top, #fff, #fcc);
      background-image: -webkit-linear-gradient(top, #fff, #fcc);
      background-image: -o-linear-gradient(top, #fff, #fcc);
      background-image: -ms-linear-gradient(top, #fff, #fcc);
   }
  #controls {
    display: none;
      margin: 10px 30px;
   }
  .vcontrols{
    position:absolute;
    font-size:1.5em;
    padding:15px 10px;
    border-radius:5px;
    
  }
  .vcontrols:hover{
    background:white;
    transition:0.3s;
  }
  .controls:hover{
    background:white;
    transition:0.3s;
  }
  
  .controls:active{
    color:grey;
  }
  
  #left-arrow{
    left:10px;
  }
  
  #right-arrow{
    right:10px;
  }
  #mutebtn{
      bottom: 10px;
      right: 25px;
  }
  
  #dots-con{
    
    text-align:center;
  }
  .dot{
    display:inline-block;
    background:grey;
    padding:8px;
    border-radius:50%;
    margin:10px 5px;
  }
  
  .active{
    background:rgb(3, 141, 21);
  }
  
  @media (max-width:576px){
    #slider{width:100%;
    
    }
    
    .controls{
      font-size:1em;
    }
    
    #dots-con{
      display:none;
    }
  }