/**********SCROLLBAR*************/

/* width */
::-webkit-scrollbar {
  width: 10px;
  background-color: black;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: tomato; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: goldenrod; 
}

/***********************/

.body{
background-image: url(images/bg2.jpg); 
background-size: 100%;
}

.maindiv {
	margin-left: 21%;
	margin-top: 8vw;
	width: 77vw;
	height: auto;
}

.title{
  cursor: pointer;
	font-size: 45px; 
	color: tomato; 
	font-family: Papyrus,fantasy;
	letter-spacing: 5px;
}

.box-rule{
  transition: ease-in-out 0.5s;
	position: absolute; 
	border-color: red; 
	height: 14vw; 
	width: 14vw;
	border-radius: 30px; 
	margin-top: 5%;
	margin-left: 3%; 
	background-color: yellow; 
	color: tomato; 
}

.box-rule:hover{
  border: 5px solid red;
}


.rule-text{
	text-align: center;
	font-family: Impact,Haettenschweiler,Franklin Gothic Bold,Charcoal,Helvetica Inserat,Bitstream Vera Sans Bold,Arial Black,sans serif;
	position: relative;
	font-size: 2vw;
}

.result{
	position: absolute;
	height: 18vw; 
	width: 16vw;
	margin-top: 20%;
	margin-left: 2%; 
}


.result-text{
	color: aliceblue;
	font-size: 2.5vw;
	font-family: Impact,Haettenschweiler,Franklin Gothic Bold,Charcoal,Helvetica Inserat,Bitstream Vera Sans Bold,Arial Black,sans serif;
	position: relative;

}

.result-img{
	width: 15vw;
	height: 10vw;
	border-radius: 1vw;
}

.result-img:hover{
	transform: scale(1.3);
	transition-duration: 0.8s;
}

.box-taunt{
	position: absolute; 
	border-color: red; 
	height: 14vw; 
	width: 14vw;
	border-radius: 30px; 
	margin-top: 5vw;
	margin-left: 81%; 
	background-color: yellow; 
	color: tomato; 
  transition: ease-in-out 0.4s;
}

.box-taunt:hover{
  border: 5px solid red; 
}


.taunt-text{
	text-align: center;
	font-family: Impact,Haettenschweiler,Franklin Gothic Bold,Charcoal,Helvetica Inserat,Bitstream Vera Sans Bold,Arial Black,sans serif;
	font-size: 2vw;
}

.footer-banner{
	float: left;
	clear: both;
	width: 100%; 
	margin: 0;
	padding: 0.1%; 
	background: rgba(0, 0, 0, 0.6); 
}

@media only screen and (max-width: 1200px) {
   .footer-banner {
      margin-top: 55%;
    }
}

.footer1{
  transition: ease-in-out 0.5s;
  cursor: pointer;
font-size: 1.4vw; 
letter-spacing: 3px;
 font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
color: indianred;
float: left;
}

.footer1:hover{
  letter-spacing: 6px;
  font-size: 1.5vw; 
  color: red;
}

.footer2{
  transition: ease-in-out 0.5s;
  cursor: pointer;
font-size: 1.4vw; 
letter-spacing: 3px;
 font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif; 
float: left;
margin-left: 35vw;
color: indianred;
}

.footer2:hover{
  letter-spacing: 6px;
  font-size: 1.5vw; 
  color: red;
}


.footer3{
padding: 1%;
float: right;
cursor: pointer;
}

.red{
	color : red;
}

.darkred{
	color: darkred;
}

.locationIcon{
border-radius: 20px;
}

.instaIcon{
	border-radius: 20px;
}

.youtubeIcon{
	border-radius: 20px;
}

.icons_size{
	width: 2.5vw;
	height: 2.5vw;
}

.icons_size:hover{
	transform: scale(1.1);
	transition-duration: 0.5s;
}

.box-music{
	background-color: yellow ; 
	height: 11vw; 
	width: 18vw;
	font-size: 1.5vw; 
	border-radius: 50vw; 
	border-top-left-radius: 0vw;
	opacity: 0.7; 
	position: absolute; 
	left: 0;
	top: 0;
	text-align: center; 
	font-family: Lucida Console,Lucida Sans Typewriter,monaco,Bitstream Vera Sans Mono,monospace;
	color: tomato;
}

.modal::-webkit-scrollbar{
  display: none;
}

.audio{
	width: 240px; 
	outline: none;
	float: right;
}

.timer{
  cursor: pointer;
	background-color: tomato ; 
	height: 5vw; 
	width: 10vw;
	font-size: 1.5vw; 
	border-radius: 50px; 
	opacity: 0.8;
    position: absolute;
    margin-top: -14%;  
    margin-left: 83.5%; 
    text-align: center;
    transition: ease-in-out 0.4s;
}

.timer:hover{
 color: gold;
 border: 2px solid gold;
}


.down_arrow{
	position: absolute;
	width: 6vw;
	height: 4vw;
	margin-top: 4%;
}



.Btn1{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;  
background-color: white;
outline: none;
cursor: pointer;
}

.Btn2{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}

.Btn3{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}

.Btn4{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}

.Btn5{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}

.Btn6{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}

.Btn7{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}

.Btn8{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}

.Btn9{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;   
background-color: white;
outline: none;
cursor: pointer;
}

.Btn10{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}

.Btn11{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}

.Btn12{
border-color: black;
float: left;
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}

.Btn13{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}

.Btn14{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}

.Btn15{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}

.Btn16{
border-color: black;
float: left; 
height: 10.2vw; 
width: 14vw;    
background-color: white;
outline: none;
cursor: pointer;
}


.btns1{
	float: left;

}

.btn_rows{
	clear: both;
	float: left;
}


/**********MUSIC PLAYLIST**********/
.playlistText{
	font-size: 25px;
	float: left;
	width: 15vw;
	font-family: Papyrus,fantasy;  
}

.song{
	float: left;
	width: 100%;
	border-bottom: 1px solid black;
	padding-bottom: 3%;
}

@media only screen and (max-width: 1200px) and (min-width: 200px){
  .playlistText , .song , .audio{
   float: none;
  }
}


.musicImg{
  width: 5vw;
  height: 5vw;
}

.musicImg:hover{
  filter: sepia(100%) hue-rotate(-70deg) saturate(400%);
}

#fullscr{
  border: 0.05vw solid tomato;
  color: tomato;
  background: transparent;
  font-size: 1vw;
  outline: none;
  cursor: pointer;
  float: left;
}

#fullscr:hover{
  transition-duration: 1s;
  background-color: tomato;
  color: gold;
}

/********FIREWORKS*******/
.pyro > .before, .pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; }

.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s; }

@-webkit-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-moz-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-o-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-ms-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }