#vd {
  background-color: rgba(100, 197, 226, 0.4) ;
  border-radius: 10px ;

}


#rdrct {
  border-radius: 50% ;
}

video {
  border-radius: 10px ;
}

p.video {
  margin-botton: 20vh ;
}

.vidbgd {
  background-color: lightgoldenrodyellow ;
  position: relative;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100% ;
  min-height: 40vh ;
  margin-bottom: 0;
  transform: translateX(-10vw) ;
  display: flex;
  overflow-x: hidden;
}


.pcs{
  height: 15vw  ;
  width: 15vw ;
}



.plybtn{ 
  
  background: lightblue ;
  index: 1 ;
  width: 8vw ;
  height: 2vw ;
  transform: translateX(3vw) translateY(-8vw)
}

.prvbtn{ 
  opacity: 0.8 ;
  background: lightblue ;
  index: 1 ;
  width: 8vw ;
  height: 2vw ;
  transform: translateX(3vw) translateY(-8vw)
}

.nxtbtn{ 
  opacity: 0.8 ;
  background: lightblue ;
  index: 1 ;
  width: 8vw ;
  height: 2vw ;
  transform: translateX(3vw) translateY(-8vw)
}



/* Video background */

.pg {
  z-index: -50 ;
  background: rgba(0,0,0,0.05) ;
  position: fixed;
  height: 100vh ;
  width: 100vw ;
  
}

.bg-video {
  z-index: -99 ;
  width: 20vw ;
  height: 20vh ;

  position: fixed;
  left: 0;
  top: 0;
  background-size: cover;
  background: no-repeat center;
  margin-left: 0;
  user-select: none;
  pointer-events: none;

  /*custom styles, for example grayscale appearance*/
  filter: grayscale(0.8);

  /*additional tweaks for positioning, read more in the link above*/
  height: 35vh ;
  width: 100vw ;
  /* 100 * 16 / 9 */
  min-width: 10vw ;
  min-height: 10vw ;
  /* 100 * 9 / 16 */
  
  
}


.dwn {
  transform: translateY(15vh) ;
}

.dwn2 {
  transform: translateY(40vh) ;
}

.dwn3 {
  transform: translateY(60vh) ;
}

.dwn, .dwn2, .dwn3 {
  transition: all 4s;
  animation: sld 1s linear 1 ;
  
}

@keyframes sld {
  0% {
    transform: translateY(50vh) ;
  }
  100%{
    transform: translateY(20vh) ;
    
  }
}

/* map */

iframe {
  width: 100vw ;
  height: 40vh ;
  transform: translateY(-80vw) translateY(60vh) ;
  
  
}


/* main */


.link {
  color: lime ;
  font-size: 2.5vw ;
}

.msk{
  position: relative;
}
.msk1{
  position: relative ;
  opacity: 50% ;
  width: 74.5vw ;
}

.msk2{
  display: flex ;
  width: 100vw ;
  
}



body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: sans-serif;

animation: fdin ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fdin {
    0% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}


.ctnr {
  height: 60vh;
  width: 100%;
  position: relative ;
  background: #434943;
  display: flex ;
  align-items: center ;
  justify-content: center;
  animation: fdd 8s ease infinite ;
  

}

@keyframes fdd {
  0% {
    opacity: 1 ;
  }
  50% {
    opacity: 0.9 ;
  }
  100% {
    opacity: 1
  }
}


.bbx::before{
  content: '' ;
  position: absolute;
  height: 12vw;
  width: 12vw;
  border-radius: 50% ;
  background: linear-gradient(#35A785 , #E4BE05)
  
  ;
  transform : translate(30vw, -10vh) ;
  transition: opacity 5s;
  
}

.bbx::after{
  content: '';
  position: absolute;
  height: 25vw;
  width: 25vw;
  border-radius: 45%;
  background: linear-gradient(#EBE504, #E40505);
  transform: translate(45vw, -12vh);
  opacity: 0.5 ;
  transition: opacity 5s;
  

}

.b1{
  position: absolute;
  height: 50px;
  width: 50px;
  background: rgba(144, 184, 73, 0.78) ;
  border-radius: 50% ;
  transform: translateY(-5vh) translateX(10vw);
  z-index: 1 ;
  opacity: 0.8;
  transition: opacity 5s;
  
}


.bx{
  
  height: 50vh ;
  width: 75vw;
  padding: 0, 5vw;
  background: rgba(46, 133, 226, 0.1);
  z-index: 1 ;
  display: flex ;
  position: relative ;
  border: 2px solid rgba(131, 187, 232, 0.7);
  backdrop-filter: blur(25px) ;
  box-shadow: -15px 17px 17px rgba(10, 10, 10, 0.3);
  
  animation: fdin2 ease 8s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  }
  
  @keyframes fdin2 {
    0% {
      opacity: 0;
      transform: translateX(-10px);
      
    }
  
    100% {
      opacity: 1;
      transform: translateX(0px);
      
    }
  }
  



.bx nav{
  height: 8% ;
  width: 95% ;
  display: flex ;
  position: absolute ;
  align-items: center ;
  justify-content: space-between;
  padding: 5vw 10vw ;
  margin: 15px auto ;
  z-index: 1 ;
  
}


.bx nav ul li{
  display: inline-block ;
  padding: 0 0.5vw 0;
}

.bx nav ul li a{
  font-size: 2vw ;
  cursor: pointer ;
  
  padding-top: 1vh;
  padding-bottom: 1vh;
  color: lime ;
  
}

.bx nav ul li a:hover {
  color: rgba(123, 227, 133, 0.93);


}

.bx nav .lg{
  font-size: 2vw;
  color: wheat ;
  margin-top: 10px ;
  margin-left: 20px ;
  
  
}

.bx.cts {
  justify-content: space-between ;
  display: flex ;
  height: 80% ;
  width: 100% ;
  position: relative ;
  margin-top: 8% ;
  padding-left: 80px ;
  
}

.bx.cts.s1{
  position: relative ;
  margin-top: 80px ;
  
}

.bx.cts.s2{
  position: relative ;
  width: 75vw
  
}



h1{
  font-size: 5vw;
  color: white ;
  padding-top: 10vh ;
}
h3, p{
  font-size: 4vw;
  color: goldenrod /* rgba(194, 223, 211, 1) */ ;
  padding-bottom: 2vh ;
  max-width: 72vw;
}



h1, h3, p {
  width: 80vw;
  padding-left: 10vw ;
  font-family: optima ;
  

}

.btn {
  scale: 0.8 ;
  transform: translateY(3vh) translateX(2vw);
  
}

.btn a  {
  align-items: center ;
  justify-content: center;
  padding-right:  5vw ;
  padding-left: 5vw ;
  padding-top: 1vh ;
  padding-bottom: 1vh;
  
  border: 1px solid #28472A;
  cursor: pointer ;
  background: rgba(82, 158, 100, 0.2)
}



.nw p{
  color: skyblue;
  display: flex ;
  height: 30vh ;
  
}



.rdd {
  Opacity: 0 ;
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  transform: translateX(40vw) translateY(-35vh);
  scale: 0.8;
  padding: 0;
  display: flex;
}


.rd {
  animation: blur linear 12s infinite ;
  width: 40vw ;
  height: 40vw ;
  border-radius: 50% ;
  transform: translateX(40vw)  translateY(-35vh) ;
  scale: 0.8 ;
  padding: 0 ;
  display: flex ;
}

@keyframes blur {
  0%{
    opacity: 0 ;
  }
  100%{
    opacity: 0.4 ;
  }
}

.up {
  transform: translateY(-45vh) translateX(40vw);
  
}

.rd2 {
  width: 40vw ;
  height: 40vw ;
  border-radius: 50% ;

  scale: 0.8;
  padding: 0 ;
  display: flex 
}


.rd3 {
  width: 40vw ;
  height: 40vw ;
  border-radius: 50% ;
  transform: scaleX(1.5) ;
  scale: 1.2;
  padding: 0 ;
  display: flex 
}

.rd4 {
  width: 40vw;
  height: 40vw;
  border-radius: 10px;
  
  padding: 0;
  display: flex ;
  
}

.rd5 {
  width: 10vw;
  height: 10vw;
  border-radius: 10px;
  
  padding: 0;
  display: flex ;
  transform: translateY(-17vh) translateX(30vw) ;
  
}

.rd6 {
  width: 10vw;
  height: 10vw;
  border-radius: 10px;
  
  padding: 0;
  display: flex ;
  transform: translateY(-22vh) translateX(50vw) ;
}


.social {
  align-items: center ;
  align-content: center ;
  
}


/*search bar */

.srch{
  width: max-content ;
  align-items: center ;
  display: flex ;
  border-radius: 30px ;
  padding: 3vw ;
  border: solid lightblue 2px ;
  background: rgba(121, 129, 126, 0.21);
  transform: scaleY(80%) ;
  transition: background 0.25s ;
  
}

.srch:focus-within {
  background: #f1f1f1;

}



form{
  justify-content: center ;
  justify-items: center ;
  align-items: center ;
  align-content: center ;
  padding-left: 15vw ;
  transform: translateY(-30vh);

  
  
}

.srch-input{
  color: #333333 ;
  font-size: 16px ;
  margin-left: 1vw ;
  font-family: sans-serif ;
  outline: none ;
  border: none ;
  background: transparent ;
  width: 57vw ;
}

.srch-input::placeholder, .srch-icon {
  color: rgba(0, 0, 0, 0.25) ;
  
}



/* scroll-animarion on view */

@keyframes wipe-enter {
	0% {
		transform: scale(0, .025);
		opacity: 0.2 ;
	}
	50% {
		transform: scale(1, .025);
		opacity: 1 ;
	}
}

.square-wrapper{
  align-content: center ;
  align-items: center ;
  justify-content: center ;
  justify-items: center ;

  
}

.square {
  width: 40vw ;
  height: 40vw ;
  
  align-items: center;
  text-align: center;
  justify-content: center ;
  display: box;
  margin-left: 30vw;
  
  
}

@media (prefers-reduced-motion: no-preference) {
  .square-animation {
    animation: wipe-enter 1.5s 1;
  }
}


.mv {
  transform: translateY(-30vh);
  
}

.mv2 {
  transform: translateY(20vh);

}

.mv3 {
  transform: translateY(-10vh);
  
}


footer {
  height: 25vh;
  background: rgba(0, 0, 0, 0.5) ;
  padding-top: 5vw ;
}

h4 {
  width: 100vw;
  padding-top: 5vw;
  padding-left: 10vw;
  color: rgba(131, 159, 194, 0.8);
  font-family: arial;
  font-size: 3vw ;
  
  transform: translateY(-25vh) ;
}

.f1 {
  transform:  translateY(-12vh)  ;
  padding-left: 21vw ;
  color: rgba(0,0,0, 0.3);
  
}



/* media player */


@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

*,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
input,button{outline:none;}
a,a:hover,a:visited{color:#ddd;text-decoration:none;}
.flex{display:-webkit-flex;display:flex;}
.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flex-align{-webkit-align-items:center;align-items:center;}
.w-full{width:100%;}

/* HTML5 Audio Player with Playlist, source: https://codepen.io/sekedus/pen/ExxjZEz */
#simp button,#simp input,#simp img{border:0;}
#simp{max-width:600px; font-size:14px;font-family:"Segoe UI", Tahoma, sans-serif;text-align:initial;line-height:initial;background:#17212b;color:#ddd;margin:0 auto;border-radius:6px;overflow:hidden;}
#simp .simp-album{padding:20px 25px 5px;}
#simp .simp-album .simp-cover{margin-right:20px;}
#simp .simp-album .simp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;}
#simp .simp-album .simp-title{font-size:120%;font-weight:bold;}
#simp .simp-album .simp-artist{font-size:90%;color:#6c7883;}
#simp .simp-controls{padding:15px;}
#simp .simp-controls button{font-size:130%;width:32px;height:32px;background:none;color:#ddd;padding:7px;cursor:pointer;border:0;border-radius:3px;}
#simp .simp-controls button[disabled]{color:#636469;cursor:initial;}
#simp .simp-controls button:not([disabled]):hover{background:#4082bc;color:#fff;}
#simp .simp-controls .simp-prev,#simp .simp-controls .simp-next{font-size:100%;}
#simp .simp-controls .simp-tracker,#simp .simp-controls .simp-volume{flex:1;margin-left:10px;position:relative;}
#simp .simp-controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
#simp .simp-controls .simp-loading .simp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;}
#simp .simp-controls .simp-time,#simp .simp-controls .simp-others{margin-left:10px;}
#simp .simp-controls .simp-volume{max-width:110px;}
#simp .simp-controls .simp-volume .simp-mute{margin-right:5px;}
#simp .simp-controls .simp-others .simp-active{background:#242f3d;}
#simp .simp-controls .simp-others .simp-shide button{font-size:100%;padding:0;width:24px;height:14px;display:block;}
#simp .simp-controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;}
#simp .simp-controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls .simp-load .simp-progress::-webkit-slider-runnable-track{background:#2f3841;}
#simp .simp-controls .simp-load .simp-progress::-moz-range-track{background:#2f3841;}
#simp .simp-controls .simp-loading .simp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);}
#simp .simp-controls .simp-loading .simp-progress::-moz-range-track{background:rgba(255,255,255,.25);}
#simp .simp-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;margin-top:-4px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;}
#simp .simp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;}
#simp .simp-hide{max-height:0;}
/* playlist */
#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:245px;}
#simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;}
#simp ul li:last-child{padding-bottom:13px;}
#simp ul li:nth-child(odd){background:#0e1621;}
#simp ul li:hover{background:#242f3d;}
#simp ul li.simp-active{background:#4082bc;color:#fff;}
#simp ul li .simp-desc{font-size:90%;opacity:.5;margin-left:5px;}
/* playlist scrollbar */
#simp ul{overflow-y:auto;overflow-x:hidden;scrollbar-color:#73797f #2f3841;}
#simp ul::-webkit-scrollbar-track{background-color:#2f3841;}
#simp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;}
#simp ul::-webkit-scrollbar-thumb{background-color:#73797f;}
/* progress animation */
@-webkit-keyframes audio-progress{to{background-position:25px 0;}}
@keyframes audio-progress{to{background-position:25px 0;}}
/* mobile */
@media screen and (max-width:480px) {
#simp .simp-controls .simp-volume,#simp .simp-controls .simp-others{display:none;}
#simp .simp-controls .simp-time{margin-right:10px;}
}
@media screen and (max-width:370px) {
#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
}