* {
	margin:0;
	padding:0;
	color:#FFFFFF;
	font-family:'Oswald', sans-serif;
	transition:.3s ease;
}

.clear {
	clear:both;
}

body {
	font-weight: 400;
	font-style: normal;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f0e9df+50,ffffff+100 */
	background: #000000;
	margin:0;
	padding:0;
	transition:.3s ease;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#140c16+0,290358+33,290358+33,290358+69,600d93+89,151272+100 */
background: #140c16; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #140c16 0%, #290358 33%, #290358 33%, #290358 69%, #600d93 89%, #151272 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #140c16 0%,#290358 33%,#290358 33%,#290358 69%,#600d93 89%,#151272 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #140c16 0%,#290358 33%,#290358 33%,#290358 69%,#600d93 89%,#151272 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#140c16', endColorstr='#151272',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

@media only screen and (min-width: 667px) {
	body {
		background:url('../_img/bg.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position:center;
	}

}

em {
	font-style: italic;
}

strong {
	font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 800;
	margin:0;
	line-height:1.1;
	text-transform:uppercase;
	color:#FFFFFFF;
}

p {
	margin:0 auto 22px;
	line-height:1.1;
}

.pink {
	color:#d3b4d3;
}

#snipe {
	position:fixed;
	background:#240429;
	padding:0;
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.22);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.22);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.22);
	text-align:center;
	top:0;
	left:0;
	right:0;
	z-index:15;
}

#snipe-wrapper {
	margin:0 auto 0;
	max-width:1200px;
}
	
#snipe h1 {
	color:#240429;
	text-align:center;
	font-size:24px;
	display:inline-block;
	margin:15px 8px 0 8px;
}


#wrapper {
	max-width:1200px;
	margin:0 auto 0;
	padding:22px 22px;
}

#hero-slider {
	display:block;
	position:fixed;
	z-index:0;
    top:0;
    bottom:0;
    left:0;
    right:0;
    opacity:.8;
    transition:1s;
}

#hero-slider.scroll {
    opacity:0;
}

.hero-slider-bg {
	position:absolute;
	display:block;
}

#hero-slider-mobile {
	display:block;
	position:fixed;
	z-index:0;
    top:0;
    bottom:0;
    left:0;
    right:0;
    opacity:.8;
    transition:1s;
}

#hero-slider-mobile.scroll {
    opacity:.2;
}

.hero-slider-bg {
	position:absolute;
	display:block;
}
	
.quotator-wrapper {
	margin:0 auto 0;
	position:relative;
	z-index:5;
	text-align:center;
	display:block;
	width:100%;
	/*height:150px;*/
}

.quotator {
	margin:0 auto 0;
	height:auto;
	display:inline-block;
	width:100%;
}

.quote-desktop {
	z-index:225;
	max-width:100%;
	margin:0 auto 0;
	position:relative;
	display:none;
	transform:translateY(0);
}

.quote-desktop {
	text-align:center;
}

.quote-desktop .stars {
	width:100%;
	max-width:311px;
	margin:0 auto 0;
}

.quote-desktop h3 {
	color:#d3b4d3;
	font-size:28px;
	margin:6px 0 6px;
}

.quote-desktop h4 {
	font-size:14px;
	letter-spacing:4px;
	margin:0;
}

.quote {
	text-align:center;
}

.quote .stars {
	width:100%;
	max-width:311px;
	margin:0 auto 0;
}

.quote h3 {
	color:#d3b4d3;
	font-size:28px;
	margin:6px 0 6px;
}

.quote h4 {
	font-size:14px;
	letter-spacing:4px;
	margin:0;
}

.art {
	margin:0;
	max-width:1200px;
}

.art.mobile {
	margin-top:37px;
}

.art img {
	position: absolute;
	width:100%;
	margin:0px auto 0;
	max-width:1200px;
}

.mobile {
	display:block;
}

.desktop {
	display:none;
	
}

.pulse {
  animation: pulse 1s infinite;
  animation-direction: alternate;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-filter: brightness(100%);
    opacity:1;
  }
  100% {
    -webkit-filter: brightness(160%);
    opacity:.8;
  }
}

@keyframes pulse {
  0% {
    -webkit-filter: brightness(100%);
    opacity:1;
  }
  100% {
    -webkit-filter: brightness(160%);
    opacity:.8;
  }
}

	.mobile {
		display:block;
	}

	.desktop {
		display:none;
}

@media only screen and (min-width: 667px) {

	.mobile {
		display:none;
	}

	.desktop {
		display:block;
		margin:0 auto 66px;
		
	}

}

#tagline {
	font-size: 30px;
    text-align: center;
    line-height: 1.25;
    margin: 22px auto 22px;
}


@media only screen and (min-width: 667px) {
	#tagline {
		font-size: 33px;
	}

}

#tickets {
	margin:111px 0 111px;
	padding:44px 22px;
	text-align:center;
	font-size:16px;
	line-height:1.6;
	/*border: 1px solid #c2ab86;*/
    background: rgba(0,0,0,.5);
	position:relative;
}

.shadow {
	position:relative;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.1), 0 0 24px rgba(0, 0, 0, 0.1) inset;
}
.shadow:before, .shadow:after{
  position:absolute;
  content:"";
  bottom:28px;left:15px;top:80%;
  width:45%;
  background:#9B7468;
  z-index:-1;
  -webkit-box-shadow: 0 20px 15px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 20px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0 20px 15px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow:after{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 15px;left: auto;
}

#tickets h1 {
	font-size:26px;
	font-weight:800;
	margin:0 auto 22px;
}

#tickets h2 {
	font-size:24px;
	font-weight:800;
	margin:0 auto 8px;
}

#tickets h1, #tickets h2 {
	z-index:2;
	position:relative;
}

#diversionary .logo {
	width: 80px;
    display: block;
    margin: 33px auto 33px;
}

a.button {
	z-index:2;
	position:relative;
	max-width: 225px;
	display:block;
	margin:33px auto 0;
	padding:2px 0 5px 0;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a90329+0,8f0222+48,8f0222+48,6d0019+100 */
	background: #f14dd0; /* Old browsers */

	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.66);
	-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.66);
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.66);

	color: #240429;
	font-size: 28px;
	letter-spacing:1px;
	line-height: 1.18;
	font-weight: 800;
	font-style:normal;
	text-decoration: none;
	text-transform: uppercase;
	text-align:center;

	-webkit-transition: .5s;
	transition: .5s;
}

#snipe a.button {
	color:#240429;
	width: 225px;
	background:#f14dd0;
	display:inline-block;
	margin:14px 11px 0px 11px;
	padding:3px 0 5px 0;
	float:none;
	margin: 0 auto 0;
    position: absolute;
    left: 0;
    right: 0;
}

a.button:hover {
	background: #d3b4d3;
}

#snipe a.button:hover {
	color: #FFFFFF !important;
}

#copy {
	color:#FFFFFF;
	text-align:justify;
	font-size:18px;
	line-height:1.6;
	margin: 22px 0px 0px;
	position: relative;
    text-shadow: 2px 2px 9px rgb(0 0 0 / 40%);
}

#diversionary {
	color:#FFFFFF;
}

.video {
	display:block;
	width:100%;
	margin:0 auto 22px;
	position:relative;
}

.video-snap {
	width:100%;
	position:relative;
	border: 1px solid #FFFFFF;
}

.video i {
	position: absolute;
    top: 42%;
	left:48%;
	z-index: 1;
	font-size: 44px;
	opacity: .8;
	color: #FFFFFF;
	text-shadow: 0 0 12px rgb(0 0 0 / 50%);
}

.video:hover .video-snap {
	border:1px solid #ff19ff;
}

.video:hover i {
	color:#ff19ff;
}

@media only screen and (min-width: 1000px) {
	.video {
		max-width:400px;
		float:left;
		margin-right:44px;
	}

}

@media only screen and (min-width: 1200px) {
	.video {
		max-width:550px;
	}

}

#billing {
	display:block;
	text-align:center;
	margin: 111px auto 111px;

}

.creative-team {
	text-decoration: none;
    width: 100%;
    display: block;
    text-align: center;
    margin: 0 auto 22px;
}

@media screen and (min-width: 750px) {
	.creative-team {
	    width: calc(100% / 3 - 16px);
	    display: inline-block;
	}
}

.creative-team h3 {
	font-size: 22px;
    color: #FFFFFF;
    transition:.4s ease;
}

.creative-team h4 {
	color: #d3b4d3;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
    margin: 0 auto 4px;
}

#creative p {
	line-height:1.6;
	text-align:justify;
}

#creative p strong {
	color:#d3b4d3;
	text-transform:uppercase;
}

/* FOOTER */

#footer {
	padding:22px 0 0;
	display:block;
	text-align:center;
}

#footer .button {
	margin:12px auto 22px;
}

#footer i {
	color:#ff19ff;
	font-size:36px;
	margin:8px 8px 26px;
}

#footer p {
	color:#FFFFFF;
	font-size:14px;
}

#footer p a {
	color:#ff19ff;
}

#footer p a:hover, #footer i:hover {
	color:#240429;
}

/* PRIVACY POPUP */

#privacy-popup {
	color:#636466;
	margin:0 auto 0;
	width:calc(100% - 50px);
	padding:11px 22px 55px;
	text-align:center;
	font-size:16px;
	line-height:1.6;
	border: 1px solid #c2ab86;
    background: #FFFFFF;
}

#privacy-popup h1, #privacy-popup h3 {
	color:#ff19ff;
}

#privacy-popup p {
	line-height:1.6;
}

#privacy-popup .effective {
	font-style:italic;
}

#privacy-popup a {
	color:#ff19ff;
}

#privacy-popup a:hover {
	color:#240429;
}

.mfp-close-btn-in .mfp-close {
    color: #333333;
}

#privacy-popup h1, #privacy-popup h3 {
	margin:33px auto 11px;
}

@media only screen and (min-width: 768px) {
	#snipe {
		/*padding:0 33px 11px 33px;*/
	}
	
	#snipe h1 {
		font-size:36px;
		margin:11px 8px 0 8px;
	}
	
	#wrapper {
		padding:22px 44px 55px;
	}
	
	.quote h3 {
		font-size:36px;
	}
	
	.quote-desktop h3 {
		font-size:36px;
	}
	
	#tickets h1 {
		font-size:36px;
	}

	#tickets h2 {
		font-size:28px
	}
	
	#copy {
		font-size:20px;
	}
}

/* ANIMATION */

.fadeIn {
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function:linear;	
	-webkit-animation-timing-function:linear;		

	visibility: visible !important;	
}

@-webkit-keyframes fadeIn {
	0% {
		opacity:0;
	}
	20% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@keyframes fadeIn {
	0% {
		opacity:0;
	}
	20% {
		opacity:0;
	}
	100% {
		opacity:1;
	}		
}

.animateIn {
	animation: AnimateIn ease 1s;
}

.animateOut {
	animation: AnimateOut ease 1s;
}


@-webkit-keyframes AnimateIn {
	0% { opacity:0}
    100% { opacity:1;}
}

@keyframes AnimateIn {
    0% { opacity:0}
    100% { opacity:1;}
}

#poster {
	width:100%;
	max-width:300px;
}


#gradient-bg {
	position: fixed;
	right: 0;
	bottom: 0;
	width: auto;
	min-width: 100%;
	height: auto;
	min-height: 100%;
	z-index: -100;
	background: transparent url(video-bg.jpg) no-repeat;
	background-size: cover;
	opacity:.2;
	display:none;
}

#video-bg {
	position: fixed;
	right: 0;
	bottom: 0;
	width: auto;
	min-width: 100%;
	height: auto;
	min-height: 100%;
	z-index: -100;
	background: transparent url(video-bg.jpg) no-repeat;
	background-size: cover;
	opacity:.2;
	display:none;
}

@media only screen and (min-width: 768px) {
	#video-bg {
		display:block;
	}

	}

/* MUSIC PLAYER */

#music-btn {
    position: fixed;
    z-index: 3000;
    right: 0;
    bottom: 16%;
    padding: 11px;
    background-color: #d3b4d3;
    color: #000000;
    cursor: pointer;
    transition: 1s ease;
	
}

#music-btn i {
	color:#000000;
}

body.music-open #music-btn {
    right: 243px;
}

#open-music-btn {
	margin-top: 12px;
}

/*#music-btn i.music {
    position: relative;
    left: -2px;
    top: -30px;
    font-size: .7em;
    margin-top: 10px;
    background: #ffffff;
    color: #007eea;
    padding: 12px 3px;
    border-radius: 0 20px 0 0;
}*/

#music-btn i.music {
	margin-left: 2px;
	font-size: 12px;
}

#music-btn span {
    display: block;
    position: absolute;
    left: -99px;
    font-size: 16px;
    letter-spacing: 1.4px;
    bottom: 109px;
    width: 219px; 
    transform: rotate(-90deg);
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    -webkit-text-shadow: 1px 1px 0px #040808;
	-moz-text-shadow: 1px 1px 0px #040808;
	text-shadow: 1px 1px 0px #040808;
}

#music-btn i.left {
    display: none;
}

body.music-open #music-btn i.left {
    display: inline-block;
}

#music-btn #music-player,body.music-open #music-btn i.right {
    display: none;
}

#music-player {
	width: 243px;
    display: block;
    position: fixed;
    right: -243px;
    bottom: 0;
    z-index: 10;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 80%);
    transition: 1s ease;
}

#cast-album {
	width:100%;
}

.control-bar {
	color:#000000;
	padding:12px;
	text-align:center;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cdcbcb+0,fdfdfd+35,ffffff+35,fdfdfd+65,cdcbcb+99 */
	background: rgb(205,203,203); /* Old browsers */
	background: -moz-linear-gradient(45deg,  rgba(205,203,203,1) 0%, rgba(253,253,253,1) 35%, rgba(255,255,255,1) 35%, rgba(253,253,253,1) 65%, rgba(205,203,203,1) 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  rgba(205,203,203,1) 0%,rgba(253,253,253,1) 35%,rgba(255,255,255,1) 35%,rgba(253,253,253,1) 65%,rgba(205,203,203,1) 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  rgba(205,203,203,1) 0%,rgba(253,253,253,1) 35%,rgba(255,255,255,1) 35%,rgba(253,253,253,1) 65%,rgba(205,203,203,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdcbcb', endColorstr='#cdcbcb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	transition:3s ease;
}

#song-title {
	font-size:22px;
	display:block;
	margin:0 auto 6px;
}

#volume {
	background: #d00c09;
    color: #ffffff;
    border-radius: 22px;
    font-size: 22px;
    padding: 8px;
    margin: 0px auto 12px;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 50%);
}

body.music-open #music-player {
    right: 0;
}