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

@import url("fonts/fonts.css");
@import url("https://use.typekit.net/gch3tqc.css");

:root{
	--fontColor:#000;
    --primaryColor02:#dde327;
    --siteFont: 'bembo-mt-pro', sans-serif;
    --cursiveFont: 'Colleen-Cursive', sans-serif;   
	--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: var(--siteFont); letter-spacing: 1px; 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/bg-echo01.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; }
body.interior{ background-image: url('images/bg-echo00.jpg');}
body.homepage #logo {}
body#music-page{}
body.no-overflow { overflow: hidden; }
#logo { position: absolute; top: 35px; left: 50%; transform: translate(-50%,0); width: 100%; max-width:550px; height: auto; aspect-ratio:829/40; background-image: url('images/echo-wordmark.png'); background-size: contain; background-repeat: no-repeat; background-position: center center; z-index: 9999999;  }

#nav-buttons .nav-button[href="https://thechainsmokers.lnk.to/presave"], #nav-buttons .nav-button[href="https://forms.sonymusicfans.com/campaign/the-chainsmokers-new-music/"] { display:none !important;}

#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: var(--fontColor); 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: var(--fontColor); 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: var(--siteFont); border: 3px solid var(--siteFont); 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/UnicornMark.png'); background-size: contain; background-repeat: no-repeat; background-position: center center; z-index: 9999; }
#nav-buttons { position: absolute; bottom: 2.5vw; left: 2vw; display: flex; width:40%; justify-content:space-between; color: var(--siteFont); 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: var(--siteFont); 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: flex; width:40%; align-items:center; justify-content: space-between; color: var(--siteFont); text-align: right;  z-index: 99999; }
.social-button { display: inline-block; font-family: 'fontello'; color: var(--siteFont); 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%);*/}
/**/

.cursive{font-family:var(--cursiveFont); text-transform: none;}
#featured-single h2 span{display:block;}
#featured-single h2{font-size:1.90em; margin:25px auto 10px auto; line-height: .7em;}
#featured-single h2.small-text{margin:0 auto 10px auto; font-size: 1.35em !important;  line-height: 1em;}
#featured-single{position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 550px; margin: auto; display: flex; flex-direction:column; justify-content: center;align-items:center; text-transform: uppercase; font-size:1.25em; box-sizing: border-box; padding: 20px 20px 0 20px;}
#featured-single .details{ align-self: flex-start; font-size:1.55em;}
#featured-single .divider{background-color:#090e3f; height: 30px; width: 100%; margin: 30px auto; opacity: .85;  }
#featured-single img{width:100%; height: auto; max-width: 415px; display:block; margin: 25px auto;}
#featured-single .cta{align-self:flex-end; }
#featured-single .cta:hover{text-decoration:none;}
#featured-single .sub-feature{width:100%; text-align: center; font-size:.78em; margin-top:10px;} 
#featured-single .sub-feature .cta{text-align:center; display: block;}
/*#featured-single .cover img{max-width: 150px;}

#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: var(--fontColor) 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;}
.seated-event-link1, .seated-event-link1:visited, .seated-event-link2, .seated-event-link2:visited{background-color:var(--fontColor) !important; color: var(--primaryColor02) !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; border-width: 5px !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 var(--primaryColor02); text-align: center; scrollbar-width: thin;
  scrollbar-color: var(--primaryColor02) var(--fontColor) ; }
#newsletter-lightbox .popup .newsletter-wrapper { position: absolute; top: 0px; width: 100%; color: var(--primaryColor02); }
#newsletter-lightbox .close { position: absolute; top: 0px; right: 0px; width: 40px; height: 40px; color: var(--primaryColor02); 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: var(--primaryColor02); 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: var(--siteFont); font-weight: 900; font-size: 12px; -webkit-appearance: none; outline: none; border: 1px solid var(--primaryColor02); border-radius: 0px; background-color: #ffffff; color: #000000; box-sizing: border-box; }

#newsletter-lightbox .popup #newsletter-body .form-row {display:flex;}

#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; }
#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: var(--primaryColor02); text-transform: uppercase; cursor: pointer; color: #000000; font-family: var(--siteFont); font-size: 12px; width: 80px; height: 30px; transition: color 300ms, background-color 300ms, border 300ms; outline: none; border: 1px solid var(--primaryColor02); 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; display:block; margin-top:20%;}
#newsletter-lightbox .popup .thanks { font-size: 24px; margin-top: 108px; display: block; text-transform: uppercase; }
#newsletter-lightbox .popup .thanks-text { 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: 850px; 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; }
	
	#logo { width: 80%; left:1em; transform: translate(0,0); top: 25px;}
	#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;
        display: block;
	}
	.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: var(--fontColor);
		position: absolute;
		top: 0;
		left: 0;
	}
	.nav-toggle::after{
		content:'';
		display: block;
		width: 30px;
		height: 3px;
		background-color: var(--fontColor);
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.nav-toggle div{
		display: block;
		width: 30px;
		height: 3px;
		background-color: var(--fontColor);
		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; align-items:center; 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: auto; box-sizing: border-box; padding: 20px; }
	#newsletter-lightbox .popup #newsletter-body { width: 100%; }
    #newsletter-lightbox .popup #newsletter-body .form-row{flex-direction:column;}
	#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 #thankyou{margin-top:0;}
	#newsletter-lightbox .popup .thanks { font-size: 18px; margin: auto;}
}