@charset "UTF-8";
/* CSS Document */

@import url("fonts/fonts.css");

:root{
	--fontColor:#fff;
	--transition: all 180ms;
}
a{color:var(--fontColor); text-decoration: none;}
html { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #000000; }
html, body { font-family: 'Helvetica', 'Inter', sans-serif; font-weight: 900; font-style: normal; padding: 0; margin: 0; position: relative; }
body { width: 100%; height: 100%; padding: 0px; margin: 0px; background-image: url('images/bg2025w.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; }
body.interior{ background-image: url('images/bg2025w-0.jpg');}
body.no-overflow { overflow: hidden; }
#logo { position: absolute; top: 2vw; left: 2vw; width: 14vw; height: 10.09vw; background-image: url('images/logo-white.png'); background-size: contain; background-repeat: no-repeat; background-position: center center; z-index: 9999999; }
#bolt-button { position: absolute; top: 2vw; right: 2vw; width: 6vw; height: 6vw; background-image: url('images/bolt.png'); background-size: contain; background-repeat: no-repeat; background-position: center center; cursor: pointer; transition: opacity 300ms; }
#bolt-button:hover { opacity: 0.6; }
#pre-save-wrapper { display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); text-align: center; width: 100%; }
#pre-save-wrapper iframe { width: 50vw; height: 60vh; }
#album-art { display: inline-block; width: 28vw; height: 28vw; background-image: url('images/summertimefriends.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin-left: -17vw; }
#right-side { display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin-left: 0vw; }
#sofarsogood { display: block; width: 35vw; height: 9.14vw; background-image: url('images/sofarsogood-fullwhite.png'); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#thechainsmokerslogo { display: block; width: 35vw; height: 8.87vw; background-image: url('images/thechainsmokers.png'); background-size: cover; background-repeat: no-repeat; background-position: center center; }
#album-text { display: block; margin: 1vw auto; color: #ffffff; text-transform: uppercase; text-align: center; font-size: 1.8vw; }
#listen-buttons { display: block; margin: 0 auto; text-align: center; }
.listen-icon { display: inline-block; font-family: 'fontello'; color: #ffffff; font-size: 2vw; text-decoration: none; transition: opacity 300ms; margin: 0px 0.8vw; }
.listen-icon:hover { opacity: 0.6; }
.listen-button { display: block; margin: 1vw auto; color: #ffffff; border: 3px solid #ffffff; border-radius: 60%; text-transform: uppercase; text-decoration: none; text-align: center; font-size: 1.3vw; width: 30vw; height: 4vw; line-height: 4vw; transition: all 300ms; }
.listen-button:hover { opacity: 0.6; }
#bottom-logo { position: absolute; bottom: 2vw; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 8vw; height: 2.85vw; background-image: url('images/logo-small-white.png'); background-size: contain; background-repeat: no-repeat; background-position: center center; }
#nav-buttons { position: absolute; bottom: 2.5vw; left: 2vw; display: block; color: #ffffff; text-align: left; z-index: 99999;}
.nav-toggle{display: none;}
.nav-button { display: inline-block; font-size: 1.2vw; text-decoration: none; text-transform: uppercase; color: #ffffff; transition: opacity 300ms; cursor: pointer; margin: 0px 0.5vw; text-shadow: rgba(0,0,0,0.4) 0px 0px 25px; }
.nav-button:hover { opacity: 0.6; }
#social-buttons { position: absolute; bottom: 2.5vw; right: 2vw; display: block; color: #ffffff; text-align: right;  z-index: 99999; }
.social-button { display: inline-block; font-family: 'fontello'; color: #ffffff; font-size: 1.4vw; text-decoration: none; transition: opacity 300ms; margin: 0px 0.5vw; text-shadow: rgba(0,0,0,0.4) 0px 0px 25px; }
.social-button:hover { opacity: 0.6; }
/**/
#soundcloud-button img{ width: 1.75vw !important; vertical-align: middle; filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(134deg) brightness(120%) contrast(105%);}
/**/
#featured-single{position:absolute; bottom: 120px; left: 50%; transform: translate(-50%,0); width: 100%; max-width: 800px; margin: auto; display: flex; justify-content: center;align-items:center; color: #fff; text-transform: uppercase; font-size:1.25em;}
#featured-single h2{ font-size: 1.26em; margin-top: auto; margin-bottom:5px;}
#featured-single .cover img{max-width: 150px;}
#featured-single .details{padding: 15px; text-align: center; flex: 1}
#featured-single .details span{display:block; margin-bottom: 20px; }
#featured-single .details a{display: inline-block; font-size: .85em; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px;  transition:var(--transition);}
#featured-single .details a:hover{text-underline-offset:10px;}
#featured-single .single{display:flex; align-items: center;}
#featured-single .single:nth-of-type(2){margin: auto 2.5vw;}

/* LISTEN LIGHTBOX */
#listen-lightbox { position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms; -webkit-overflow-scrolling: touch; z-index: -100; }
#listen-lightbox.open { opacity: 1; z-index: 10000; display: block; }
#listen-lightbox .overlay { position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
#listen-lightbox .popup { position: absolute; width: 40vw; height: 28.24vw; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); overflow-x: hidden; text-align: center; }
#listen-lightbox .popup #listen { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 40vw; height: 28.24vw; background-image: url('images/presavesofarsogood.png'); background-size: contain; background-repeat: no-repeat; background-position: center center; transition: all 300ms; }
#listen-lightbox .popup #listen:hover { /*filter: grayscale(1) contrast(10);*/ filter: blur(1px) }
#listen-lightbox .close { position: absolute; top: 0px; right: 0px; width: 40px; height: 40px; color: #ffffff; background-color: #000000; transition: color 300ms, background-color 300ms; cursor: pointer; text-align: center; line-height: 40px; font-size: 24px; z-index: 10000; }
#listen-lightbox .close:hover { color: #000000; background-color: #ffffff; }

/* TOUR */
 .content-wrap{position:absolute; width: 100%; height: 100%; box-sizing: border-box; display: flex; align-items:center; padding: 40px; color: var(--fontColor);}
#tour-frame{width:100%; height: 50vh; overflow: auto; scrollbar-color: white transparent;  scrollbar-width: thin;}
.seated-event-row{padding-top:1.7em !important; padding-bottom:1.7em !important ;}
.seated-event-row:first-of-type, .seated-events-table{border-top:none !important;}

/***/
.slider_circle_10 {height:70vw !important; width: 70vw !important; margin-top:-12vh !important; max-width: 1000px; max-height: 1000px; }

#music-gallery .active .title{}
#music-gallery .next_button, #music-gallery .prev_button {border-color:var(--fontColor) !important; background-color:transparent !important;}
#music-gallery .next_button:after {border-left-color: var(--fontColor) !important;}
#music-gallery .prev_button:after {border-right-color: var(--fontColor) !important;}

/* NEWSLETTER LIGHTBOX */
#newsletter-lightbox { position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms; -webkit-overflow-scrolling: touch; z-index: -100; }
#newsletter-lightbox.open { opacity: 1; z-index: 10000; display: block; }
#newsletter-lightbox .overlay { position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
#newsletter-lightbox .popup { position: absolute; width: 500px; height: 240px; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); overflow-x: hidden; background-color: #000000; border: 2px solid #ffffff; text-align: center; }
#newsletter-lightbox .popup .newsletter-wrapper { position: absolute; top: 0px; width: 100%; color: #ffffff; }
#newsletter-lightbox .close { position: absolute; top: 0px; right: 0px; width: 40px; height: 40px; color: #ffffff; background-color: #000000; transition: color 300ms, background-color 300ms; cursor: pointer; text-align: center; line-height: 40px; font-size: 24px; z-index: 10000; }
#newsletter-lightbox .close:hover { color: #000000; background-color: #ffffff; }
#newsletter-lightbox .popup .title-text { display: block; font-size: 28px; color: #ffffff; margin: 30px auto 10px auto; padding: 0; text-transform: uppercase; }
#newsletter-lightbox .popup #newsletter-body { text-align: center; width: 400px; margin: 0px auto; }
#newsletter-lightbox .popup #newsletter-body .links a { color: #000000; transition: opacity 300ms; }
#newsletter-lightbox .popup #newsletter-body .links a:hover { opacity: 0.6; }
#newsletter-lightbox .popup #newsletter-body .links { font-size: 13px; text-align: center; }
#newsletter-lightbox .popup #newsletter-body input, #newsletter-lightbox .popup #newsletter-body select { padding: 5px; display: inline-block; font-family: 'Helvetica', 'Inter', sans-serif; font-weight: 900; font-size: 12px; -webkit-appearance: none; outline: none; border: 1px solid #ffffff; border-radius: 0px; background-color: #ffffff; color: #000000; box-sizing: border-box; }
#newsletter-lightbox .popup #newsletter-body input { display: inline-block; height: 28px; margin: 4px 4px; }
#newsletter-lightbox .popup #newsletter-body #field_first_name { width: 186px; text-align: center; }
#newsletter-lightbox .popup #newsletter-body #field_email_address { width: 193px; text-align: center; }
#newsletter-lightbox .popup #newsletter-body #field_postal_code { width: 136px; text-align: center; position: relative; top: -14px; }
#newsletter-lightbox .popup #newsletter-body .strip { display: inline-block; width: 243px; position: relative; overflow: hidden; margin: 4px 4px; }
#newsletter-lightbox .popup #newsletter-body select { width: 244px; height: 28px; -moz-appearance: none; background-color: #ffffff; }
#newsletter-lightbox .popup #newsletter-body .arrow { position: absolute; top: 10px; right: 10px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid; font-size: 16px; color: #000000; }
#newsletter-lightbox .popup #newsletter-body .submit { display: block; background-color: #ffffff; text-transform: uppercase; cursor: pointer; color: #000000; font-family: 'Helvetica', 'Inter', sans-serif; font-size: 12px; width: 80px; height: 30px; transition: color 300ms, background-color 300ms, border 300ms; outline: none; border: 1px solid #ffffff; margin: 5px auto 0px auto; }
#newsletter-lightbox .popup #newsletter-body .submit:hover { color: #ffffff; background-color: #000000; border: 1px solid #000000; }
#newsletter-lightbox .popup #newsletter-body .privacy, #newsletter-body .terms { font-size: 8px; color: #ffffff; margin: 0px 5px; text-transform: uppercase; text-decoration: none; transition: opacity 300ms; }
#newsletter-lightbox .popup #newsletter-body .privacy:hover, #newsletter-body .terms:hover { opacity: 0.6; }
#newsletter-lightbox .popup #thankyou { color: #ffffff; text-align: center; position: relative; top: -5px; }
#newsletter-lightbox .popup .thanks { color: #ffffff; font-size: 24px; margin-top: 108px; display: block; text-transform: uppercase; }
#newsletter-lightbox .popup .thanks-text { color: #ffffff; font-size: 13px; margin-top: 34px; display: block; text-transform: uppercase; }

/* POPUP LIGHTBOX */
#popup-lightbox { position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms; -webkit-overflow-scrolling: touch; z-index: -100; }
#popup-lightbox.open { opacity: 1; z-index: 10000; display: block; }
#popup-lightbox .overlay { position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
#popup-lightbox .popup { position: absolute; width: 50vw; height: 50vh; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); overflow-x: hidden; background-color: #000000; border: 2px solid #ffffff; text-align: center; }
#popup-lightbox .popup #content { display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
#popup-lightbox .popup #dontlie { display: block; width: 45vw; height: 11.4vw; background-image: url('images/dontlieoutnow.png'); background-size: contain; background-repeat: no-repeat; background-position: center center; }
#popup-lightbox .popup .popup-button { display: block; width: 30vw; height: 3vw; line-height: 3vw; font-size: 1.5vw; text-transform: uppercase; text-decoration: none; color: #ffffff; border: 1px solid #ffffff; margin: 0.5vw auto; transition: color 300ms, background-color 300ms; }
#popup-lightbox .popup .popup-button:hover { color: #000000; background-color: #ffffff; }
#popup-lightbox .close { position: absolute; top: 0px; right: 0px; width: 40px; height: 40px; color: #ffffff; background-color: #000000; transition: color 300ms, background-color 300ms; cursor: pointer; text-align: center; line-height: 40px; font-size: 24px; z-index: 10000; }
#popup-lightbox .close:hover { color: #000000; background-color: #ffffff; }

.screenreader-text { position: absolute; left: -999px; width: 1px; height: 1px; top: auto; }
.screenreader-text:focus { color: black; display: inline-block; height: auto; width: auto; position: static; margin: auto; }


.small-text{font-size:1.00em !important;}
.desktop { display: none; }
.mobile { display: inline-block; }

@media (max-width: 1300px){
	.nav-button { font-size: 1.4vw; line-height: 2vw; }
	.social-button { font-size: 1.5vw; }
	#soundcloud-button img{ width:2vw !important; }
}

@media (max-width: 1100px){
	#album-art { width: 40vw; height: 40vw; margin-left: -22vw; }
	/*#right-side { margin-left: 22vw; }*/
	#sofarsogood { width: 45vw; height: 11.75vw; }
	#thechainsmokerslogo { width: 45vw; height: 11.41vw; }
	#album-text { font-size: 2.5vw; margin: 2vw auto; }
	.listen-button { width: 40vw; height: 5vw; line-height: 5vw; font-size: 2vw; margin: 2vw auto; }
}

@media (max-height: 700px) and (min-width: 901px){
	html, body { height: 700px; background-position: center top; }
	#pre-save-wrapper iframe { width: 60vw; height: 120vh; }
}

@media (max-width:900px) and (max-height:570px) and (orientation: landscape){
	html, body { height: 570px; background-position: center top; }
	#pre-save-wrapper iframe { width: 60vw; height: 125vh; }
}

@media (max-width:900px) and (orientation: portrait){
	html {background-position: center top; background-size:cover; }
	html, body { min-height: 800px; }
	body{ background-image: url('images/bg2025w.jpg'); }
	#logo { width: 25vw; height: 18.01vw; }
	#bolt-button { width: 12vw; height: 12vw; }
	#pre-save-wrapper iframe { width: 60vw; height: 80vh; }
	#album-art { display: block; position: relative; top: initial; left: initial; -webkit-transform: translate(0%,0%); -moz-transform: translate(0%,0%); -ms-transform: translate(0%,0%); -o-transform: translate(0%,0%); transform: translate(0%,0%); margin-left: 0px; margin: 2vw auto; }
	#right-side { display: block; position: relative; top: initial; left: initial; -webkit-transform: translate(0%,0%); -moz-transform: translate(0%,0%); -ms-transform: translate(0%,0%); -o-transform: translate(0%,0%); transform: translate(0%,0%); margin-left: 0px; margin: 2vw auto; }
	#sofarsogood { margin: 0 auto; }
	#thechainsmokerslogo { margin: 0 auto; }
	#bottom-logo { width: 20vw; height: 7.13vw; }
	#bottom-logo { display: none; }
	#nav-buttons{
		left: initial;
		bottom: initial;
		top: 1em;
		right: 1em;
		text-align: right;
	}
	.nav-toggle{
		display: block;
		width: 30px;
		height: 30px;
		position: relative;
		margin-left: auto;
		margin-bottom: 7px;
	}
	.nav-toggle::before{
		content:'';
		display: block;
		width: 30px;
		height: 3px;
		background-color: white;
		position: absolute;
		top: 0;
		left: 0;
	}
	.nav-toggle::after{
		content:'';
		display: block;
		width: 30px;
		height: 3px;
		background-color: white;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.nav-toggle div{
		display: block;
		width: 30px;
		height: 3px;
		background-color: white;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}
	
	.nav-button { font-size: 4vw; line-height: initial; display: block; display: none;}
	#nav-buttons:focus-within .nav-button{
		display: block;
	}
	.listen-icon { font-size: 5vw; margin: 0px 10px; }
	#social-buttons{
		display: flex; justify-content: space-between; width: 100%; left: 0;
	}
	.social-button { font-size: 1.25em; /* text-align: center; */ margin: 1.7vh auto;  }
	#soundcloud-button img{width:5vw !important; }
	
	#featured-single{bottom: initial; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 500px; flex-direction: column;}
	#featured-single .cover img{ max-width: 100px;}
	#featured-single .details a, #featured-single .details h2, #featured-single .details span{font-size: 16px;}
	#featured-single .details span{margin-bottom: 5px;}
    #featured-single .single{flex-direction:column;}
	/**/
	.slider_circle_10{width:80vw !important; height: 80vw !important;}
    .small-text{font-size:.75em !important;}
	
	/* POPUP LIGHTBOX */
	#popup-lightbox .popup { width: 80vw; height: 50vw; }
	#popup-lightbox .popup #dontlie { width: 75vw; height: 19vw; }
	#popup-lightbox .popup .popup-button { width: 60vw; height: 6vw; line-height: 6vw; font-size: 3vw; margin: 1vw auto; }
}

@media (max-width:900px) and (orientation: landscape){
	.listen-icon { font-size: 4vw; }
}

@media (max-width: 600px) and (orientation: portrait){
	#album-art { width: 60vw; height: 60vw; }
	#sofarsogood { width: 65vw; height: 16.97vw; }
	#thechainsmokerslogo { width: 65vw; height: 16.48vw; }
	#album-text { font-size: 3.5vw; margin: 3vw auto; }
	.listen-button { width: 60vw; height: 6vw; line-height: 6vw; font-size: 3vw; margin: 3vw auto; }
}

@media (max-width:900px){
	#listen-lightbox .popup { width: 60vw; height: 42.36vw; } 
	#listen-lightbox .popup #listen { width: 60vw; height: 42.36vw; }
	#tour-lightbox .popup { width: 80vw; }
	#newsletter-lightbox .popup { width: 300px; height: 300px; }
	#newsletter-lightbox .popup #newsletter-body { width: 100%; }
	#newsletter-lightbox .popup #newsletter-body input, #newsletter-lightbox .popup #newsletter-body select, #newsletter-lightbox .popup #newsletter-body .strip { display: block; }
	#newsletter-lightbox .popup #newsletter-body input, #newsletter-lightbox .popup #newsletter-body select { margin: 10px auto; }
	#newsletter-lightbox .popup #newsletter-body #field_first_name { width: 250px; }
	#newsletter-lightbox .popup #newsletter-body #field_email_address { width: 250px; }
	#newsletter-lightbox .popup #newsletter-body #field_postal_code { width: 250px; top: initial; }
	#newsletter-lightbox .popup #newsletter-body .strip { width: 250px; margin: -10px auto; top: 0px; }
	#newsletter-lightbox .popup #newsletter-body select { width: 250px; height: 28px; }
	#newsletter-lightbox .popup #newsletter-body .arrow { top: 20px; }
	#newsletter-lightbox .popup .thanks { font-size: 18px; margin-top: 140px; }
}