/*

Title:			Saavn Corp | Corp Pages

Z-Index:	  	0    – Outer Blocks
				100  – Wraps
				1000 – Nav Bar

GREY
Background		#f6f6f6
Default			#3e3e3e
Dark			#121212
Alt				#707070
Light			#a9a9a9
Subtle			#e6e6e6

GREEN
Standard		#30b55a
Highlight		#98f0b3
Dark			#17733c
Mint			#ddf8e7

OTHER
Alert			#f3464a
Naavy			#2a2d36
Naavy HLight	#8b9dbf

*/


/* Navbar
--------------------------------------------- */
/* A custom copy of the navbar bezel, for cases where we want it to be fixed but also
   appear behind content (ie. the flipping artists). */
#back-bezel {
	left: 0;
	min-height: 75px;
	position: fixed;
	right: 0;
	top: 0;
}
#back-bezel .wrap { min-height: 75px; }
#back-bezel .wrap:after {
	background: rgba(255,255,255,.12);
	bottom: -1px;
	content: '';
	display: block;
	height: 1px;
	left: 30px;
	position: absolute;
	right: 30px;
	transition: all .12s ease-out;
}
.nav-pinned #back-bezel { display: none; }

/* Mobile Mode (Header) */
@media (max-width: 1240px) {
	#back-bezel .wrap:after {
		left: 5%;
		right: 5%;
	}
}
@media(max-width: 840px) {
	#back-bezel, #back-bezel .wrap { min-height: 60px; }
}
@media(max-width: 468px) {
	#back-bezel .wrap:after {
		left: 20px;
		right: 20px;
	}
}


/* Mastheads
--------------------------------------------- */
#top-block:not(.vert-flex) { height: 100vh; }
#top-block.home { min-height: 690px; }
#top-block.flex { height: 246px; min-height: 246px; }

.masthead.full-screen {
	height: 93vh;
	max-height: none;
	min-height: 690px;
}
.masthead.full-screen > .wrap { padding-bottom: 0; }

.masthead.full-screen .content { padding-bottom: 5vh; }

.masthead #artists {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: -26vh;
	left: 39%;
	pointer-events: none;
	position: absolute;
	right: 1%;
	top: -28vh;
	z-index: 100;
}
.masthead .artist { position: fixed; bottom: 200%; }

@keyframes flip {
	from {
		transform: perspective(1200px) rotate3d(0, 1, 0, 90deg);
		animation-timing-function: ease-in;
		/*opacity: 0;*/
	}
	40% {
    	transform: perspective(1200px) rotate3d(0, 1, 0, -20deg);
    	animation-timing-function: ease-in;
	}
	60% {
		transform: perspective(1200px) rotate3d(0, 1, 0, 10deg);
		/*opacity: 1;*/
	}
	80% { transform: perspective(1200px) rotate3d(0, 1, 0, -5deg); }
	to { transform: perspective(1200px); }
}
.flip {
	animation-duration: .62s;
    animation-fill-mode: both;
	animation-name: flip;
	backface-visibility: visible !important;
}

/* Mobile Mode (Header) */
@media(max-width: 840px) {
	.masthead.full-screen {
		height: 88vh;
		min-height: 462px !important;
	}
}
@media(max-width: 568px) {
	.masthead .content #pitch {
		display: block;
		font-size: .69em;
		margin: 1em 0 -1.2em 0;
	}
}



/*
---------------------------------------------

Page-Specific + Content Sections, Ahoy!

---------------------------------------------
*/


/* Home
--------------------------------------------- */
/* Masthead */
@media(max-height: 705px) {
	#home-mast #artists {
		top: -198px;
		bottom: -106px;
	}
}
@media(max-width: 1024px) {
	#home-mast #artists {
		left: 48%;
		right: -9%;
	}
}
@media(max-width: 568px) {
	#home-mast { padding-bottom: 14vw; }
	#home-mast .content { padding-bottom: 0; }
	
	#home-mast .content #pitch { display: none; }
	#home-mast.row .content #pitch { display: block; }
	#home-mast.row .content #pitch strong { display: none; }
	
	#home-mast #artists {
		bottom: 0;
		margin-left: -160px;
		left: 50%;
		right: auto;
		top: -157px;
		width: 320px;
	}
	.megaphone.show #home-mast #artists {
	    margin-left: -140px;
	    top: -120px;
	    width: 280px;
	}
}

/* Intro. */
#hello { padding-left: .12em; }
#intro.saarc { padding-bottom: 2em; }
#intro .highlight {
	color: rgba(0,0,0,.69);
	font-style: italic;
	padding: 1px 3px 2px 3px;
}
#intro .btn.large {
	margin-top: 1.6em;
	margin-bottom: .4em;
}
@media(max-width: 414px) {
	#intro .btn.large {
		font-size: 6vw;
		min-width: 0;
	}
}

/* ROW Pro Keys */
#pro-keys.angle-bottom { padding-bottom: 12vw; }
@media (max-width: 568px) {
	#pro-keys.angle-bottom { margin-top: -2em; }
}

/* Features */
#features {
	padding-bottom: 2vw;
	position: relative;
}
#features .fill { background: #f0f0f0; }

#features > .wrap > section .col.layout-5 .big-text { margin-top: -1.5em; }

#features .big-phone {
	background-image: url(../_i/phone.1.png);
	background-repeat: no-repeat;
	padding-top: 58.6%;
}
#features > .big-phone {
	background-position: left top;
	height: 100%;
	max-width: 1200px;
	min-height: 586px;
	position: absolute;
	right: 0;
	top: -5.7em;
	width: calc(58.3333% + 37px);
	z-index: 9;
}
#features .col .big-phone { display: none; }
#features .big-phone .screen {
	background-position: left top;
	background-repeat: no-repeat;
	bottom: 0;
	content: '';
	left: 0;
	opacity: 1;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity .39s ease-out;
	z-index: 100;
}
#features .big-phone .screen.top { z-index: 200; }
#features .big-phone .screen.btm { opacity: 0; }

@media (max-width: 568px) {
	#features .big-text h2 { margin-bottom: 0; }
	#features .big-text h2 + p { display: none; }
	#features .big-text.bezel-outside { padding-bottom: 3em; }
	#features .big-text.bezel-outside:before { bottom: 1.37em; }
}

#features p + h3 { padding-top: .5em; }

/* Carousel Customization */
#features .carousel-dots {
	left: -4px;
	text-align: left;
}
#features .arrow { opacity: 1; }

@media(max-width: 1024px) {
	#features .grid .col { text-align: center; }
	#features .carousel-dots {
		left: 0;
		text-align: center;
	}
	
	#features .col.layout-5 {
		margin: 0 auto;
		order: 2;
		width: 69%;
	}
	#features .grid .col.layout-5 .big-text:before {
		left: 50%;
		margin-left: -20px;
	}
	
	#features .col.layout-7 {
		margin: 0 -5%;
		order: 1;
		width: 110%;
	}
	#features > .big-phone { display: none; }
	#features .col .big-phone {
		background-position: center top;
		background-size: cover;
		display: block;
		margin: -14vw auto 3em auto;
		position: relative;
		width: 100%;
	}
	#features .big-phone .screen {
		background-position: center top;
		background-size: cover;
	}
}
@media(max-width: 768px) {
	#pro-keys.angle-bottom { padding-bottom: 16vw; }
	
	#features .grid .col.layout-5 {
		margin: 0 auto;
		width: 84%;
	}
	#features .col .big-phone {
		background-size: 138% auto;
		margin-top: -17vw;
		padding-top: 80.87%;
	}
	#features .big-phone .screen { background-size: 138% auto; }
}
@media (max-width: 568px) {
	#features .grid .col.layout-5 { width: 100%; }
	
	.carousel-wrap.carousel-smallArrows .arrow {
		display: block;
		left: 50%;
		
		opacity: 1;
		top: calc(100% + 8px);
	}
	.carousel-wrap.carousel-smallArrows .arrow.left {
		margin-left: -110px;
	}
	.carousel-wrap.carousel-smallArrows .arrow.right {
		margin-left: 50px;
	}
}

/* Site Sections */
#site-sections { padding-top: 7.3vw; }
#site-sections h3 { margin-bottom: .6em; }

@media(max-width: 1024px) {
	#site-sections .grid-1-condensed.wide-break .col {
		margin: 1.5em auto .5em auto;
	}
}

/* RoW FAQs */
#intro-faqs .grid.padded { margin: 0 auto; }
#intro-faqs p + h4 { margin-top: 2em; }


/* Brands
--------------------------------------------- */
/* Targets */
#targets { position: relative; }
#targets > .wrap > .grid {
	position: relative;
	z-index: 75;
}
#targets > .wrap .grid + .grid { padding-top: 6vw; }
#targets .icon-list li {
	line-height: 1.25em;
	padding-bottom: .25em;
}
#targets .icon-list li strong { position: relative; }
#targets .icon-list li strong:before {
	background: url(../_i/icons.brand.svg) center top no-repeat;
	content: '';
	display: block;
	height: 80px;
	margin-bottom: .25em;
	width: 100%;
}
	#targets .icon-list li.target-geo strong:before {}
	#targets .icon-list li.target-content strong:before { background-position: center -80px; }
	#targets .icon-list li.target-time strong:before { background-position: center -160px; }
	#targets .icon-list li.target-os strong:before { background-position: center -240px; }
	#targets .icon-list li.target-gender strong:before { background-position: center -320px; }
	#targets .icon-list li.target-travel strong:before { background-position: center -400px; }
	#targets .icon-list li.target-fitness strong:before { background-position: center -480px; }
	#targets .icon-list li.target-more strong:before { background-position: center -560px; }
	#targets .icon-list li.target-memories strong:before { background-position: center -640px; }
	#targets .icon-list li.target-associations strong:before { background-position: center -720px; }
	#targets .icon-list li.target-engagement strong:before { background-position: center -800px; }

#targets .big-phone {
	background-repeat: no-repeat;
	height: 100%;
	max-width: 1200px;
	min-height: 586px;
	position: absolute;
	z-index: 100;
}
	#targets .big-phone.audience {
		background-image: url(../_i/phone.2.png);
		background-position: left top;
		right: 0;
		top: 1.2em;
		width: calc(51% + 12px);
	}
	#targets .big-phone.association {
		background-image: url(../_i/phone.3.png);
		background-position: right 126%;
		left: 0;
		bottom: 0;
		width: calc(43% + 21px);
	}

#targets .big-phone .screen {
	background-position: left top;
	background-repeat: no-repeat;
	bottom: 0;
	content: '';
	left: 0;
	opacity: 1;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity .39s ease-out;
	z-index: 100;
}
	#targets .big-phone.association .screen {
		background-image: url(../_i/brand-features/phone-1.0.png);
		background-position: right 126%;
	}
#targets .big-phone .screen.top { z-index: 200; }
#targets .big-phone .screen.btm { opacity: 0; }

@media(min-width: 841px) {
	#targets .wrap > .grid .col:first-child h2 { white-space: nowrap; }
	#targets p { max-width: 430px; }
	#targets ul { max-width: 480px; }
}

@media(min-width: 468px) {
	#targets .icon-list li.target-geo, #targets .icon-list li.target-travel { margin-left: 16.6666%; }
	#targets .icon-list li.target-more { display: none; }
}
@media(min-width: 1500px) {
	#targets .big-phone.association {
		background-position: right 120%;
		width: calc(42% + 3vw);
	}
	#targets .big-phone.association .screen { background-position: right 120%; }
}
@media(min-width: 1730px) {
	#targets .big-phone.association {
		background-position: right 104%;
		width: calc(42% + 5vw);
	}
	#targets .big-phone.association .screen { background-position: right 104%; }
}

@media(max-width: 840px) {
	#targets .grid-2 > .col { width: 100%; }
	
	#targets .grid-2:first-child > .col:first-child, #targets .grid-2:last-child > .col:last-child { order: 2; }
	#targets .grid-2:first-child > .col:last-child {
		height: 568px;
		order: 1;
	}
	#targets .grid-2:last-child > .col:first-child {
		height: 4em;
		order: 1;
		position: relative;
	}
	#targets .grid-2:last-child > .col:first-child:after {
		background: #a9a9a9;
		content: '';
		height: 1px;
		left: 50%;
		margin-left: -24px;
		position: absolute;
		top: .5em;
		width: 48px;
	}
	
	#targets .big-phone.audience {
		background-position: 21% top;
		right: 0;
		top: -1.7em;
		width: 100%;
	}
	#targets .big-phone.audience .screen { background-position: 21% top; }
	#targets .big-phone.association {
		background-position: center top;
		position: relative;
		width: 100%;
	}
	#targets .big-phone.association .screen { background-position: center bottom; }
}
@media(max-width: 568px) {
	#targets { padding-top: 5vw; }
}
@media(max-width: 468px) {
	#targets { padding-top: 8vw; }
	#targets .icon-list li { width: 50%; }
	
	#targets .grid-2:last-child .icon-list li:last-child { margin-left: auto; margin-right: auto; }
}
@media(max-width: 420px) {
	#targets .big-phone {
		background-size: cover;
		height: 480px;
		min-height: 480px;
	}
	#targets .big-phone .screen { background-size: cover; }
	#targets .grid-2:first-child > .col:last-child { height: 430px; }
}

#targets .dots {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 50;
}
#targets .dots > div {
	/*background-size: 100%;*/
	background-repeat: no-repeat;
	position: absolute;
	z-index: 10;
}
	#targets .dots .top {
		background-image: url(../_i/brand-features/brand-dots-top.png);
		height: 220px;
		left: 30em;
		top: .5em;
		width: 583px;
	}
	#targets .dots .right {
		background-image: url(../_i/brand-features/brand-dots-right.png);
		bottom: -4.5em;
		height: 327px;
		right: 120px;
		width: 213px;
	}
	#targets .dots .bottom {
		background-image: url(../_i/brand-features/brand-dots-bottom.png);
		height: 113px;
		right: calc(50% + 2em);
		top: 5.5em;
		width: 362px;
	}

@media(max-width: 1340px) {
	#targets .dots .right {
		bottom: -3.5em;
		right: 100px;
	}
	#targets .dots .bottom {
		top: 4em;
	}
}
@media(max-width: 1180px) {
	#targets .dots .right {
		bottom: -3em;
		right: calc(50% - 303px);
	}
}
@media(max-width: 1120px) {
	#targets .dots .bottom {
		top: 3em;
	}
}
@media(max-width: 1024px) {
	#targets .dots .bottom {
		top: 2em;
	}
}
@media(max-width: 840px) {
	#targets .dots { display: none; }
}


/* Solutions */
#solutions {
	background: #2a2d36;
	position: relative;
}
@media(max-width: 1100px) {
	#solutions .grid .col h3 span { display: block; }
}
@media(max-width: 840px) {
	#solutions .grid .col h3 span { display: inline; }
}

/* Partner Strip */
#solutions .partners {
	background: #f0f0f0;
	padding-top: 2em;
	padding-bottom: 2em;
	position: relative;
	z-index: 10;
}

/* Solutions */
#solutions > .wrap {
	padding-top: 5em;
	padding-bottom: 5em;
}

/* Case Studies */
.case-studies {
	border-bottom: 1px solid #f6f6f6;
	position: relative;
	z-index: 10;
}
.case-studies .card {
	box-shadow: inset #f6f6f6 -1px 0 0;
	height: 75vw;
	max-height: 73vh;
	min-height: 43vh;
	width: 100%;
}
.case-studies .card-content {}

/* Carousel Customization */
.case-studies .carousel .arrow:after { color: rgba(255,255,255,.48); }
.case-studies .carousel .arrow:hover:after { color: rgba(255,255,255,.69); }

/* Contact Form */
#brand-contact {
	margin-bottom: -3.4em;
	padding: 0;
	position: relative;
}
#brand-contact > .wrap > .card {
	position: relative;
	top: -6.9em;
}
#brand-contact .fill { background: #f6f6f6; }
@media(max-width: 768px) {
	#brand-contact > .wrap > .card { top: -5.7em; }
}
@media(max-width: 568px) {
	#brand-contact > .wrap > .card { top: -4.8em; }
}


/* Careers
--------------------------------------------- */
/* Why Saavn */
#saavn-life {}
#saavn-life .wrap { padding-bottom: 3vw; }
#saavn-life > .wrap .grid + .grid { padding-top: 6vw; }

@media(max-width: 768px) {
	#saavn-life .col { margin-top: .5em; }
	#saavn-life .col + .col { margin-top: 2em; }
}

/* Team */
#team {
	padding-bottom: 2em;
	position: relative;
}
#team .fill { background: #f0f0f0; }

#more-team {
	font-size: .6125em;
	margin: -2px .4em 0 .5em !important;
}
#more-team .refresh {
	left: -1px;
	position: relative;
	top: -2px;
}

.team-highlights {
	padding-top: 1em;
	padding-bottom: calc(2.25em - 34px);
	position: relative;
	transition: opacity .21s ease-out;
	z-index: 10;
}
	.team-highlights.fadeOut { opacity: 0; }
.team-highlights .carousel:not(.carousel-flush) .carousel-item {
	margin-top: 5px;
	margin-bottom: 34px;
}
.team-highlights .col { margin-bottom: 30px; }
.team-highlights .card {
	background: transparent;
	width: 100%;
}
.team-highlights .card-content {
	background: #d6d6d6;
	border-radius: 3px;
	overflow: hidden;
	padding: 0;
	position: relative;
	transform: translate3d(0,0,0);
}
.team-highlights .current .card:not(.invert) .card-content { background: #ced1d9; }
.team-highlights .card.invert .card-content { background: #212121; }
.team-highlights .card-content:after {
	border-radius: 3px;
	bottom: 0;
	box-shadow: inset rgba(0,0,0,.12) 0 0 0 1px;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}
.team-highlights .card img {
	transition: filter .34s;
	width: 100%;
	z-index: 10;
}
.team-highlights .carousel-item:not(.current) .card img {
	-webkit-filter: grayscale(84%);
	filter: grayscale(84%);
}
.team-highlights .card .copy {
	bottom: 110px;
	left: 0;
	overflow: hidden;
	padding: 30px 30px 0 30px;
	position: absolute;
	right: 34%;
	top: 0;
	z-index: 20;
}
	.team-highlights .card.flipped .copy {
		left: 34%;
		right: 0;
		text-align: right;
	}
.team-highlights .card h5 {
	font-size: 1.5em;
	margin-bottom: .25em;
}

.team-highlights p, #team-modal p, .team-highlights dl, #team-modal dl {
	color: #777;
	font-size: .9em;
	margin: 0;
}
.team-highlights .card p.title, #team-modal p.title {
	font-size: .95em;
	margin-bottom: 2.5em;
	position: relative;
}
.team-highlights .card p.title:after {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	bottom: -1.25em;
	color: rgba(0,0,0,.12);
	content: '';
	left: 0;
	position: absolute;
	width: 26px;
}
	.team-highlights .card.invert p.title:after { border-color: rgba(255,255,255,.12); }
	.team-highlights .card.flipped p.title:after { left: auto; right: 0; }
.team-highlights dl { line-height: 1.4; }
.team-highlights dt, #team-modal dt { color: #3e3e3e; font-weight: 600; }
	.team-highlights .invert, .team-highlights .invert dt { color: rgba(255,255,255,.84); }
.team-highlights dd, #team-modal dd { margin-bottom: 1em; }
	.team-highlights .invert p, #team-modal.invert p.title, .team-highlights .invert dd { color: rgba(255,255,255,.43); }
.team-highlights dd + dt, .team-highlights dd + dt + dd { padding-right: 57px; }
.team-highlights .card.flipped dd + dt, .team-highlights .card.flipped dd + dt + dd { padding-right: 0; padding-left: 84px; }

.team-highlights .now-playing, #team-modal .now-playing {
	background: rgba(255,255,255,.21);
	bottom: -90px;
	left: 0;
	padding: 10px 10px 20px 10px;
	position: absolute;
	right: 0;
	transition: background .34s, color .34s, bottom .34s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	z-index: 30;
}
	.team-highlights .card.flipped .now-playing { text-align: right; }
.team-highlights .carousel-item.current .now-playing { bottom: -10px; }
.team-highlights .carousel-item.current .now-playing:hover {
	background: rgba(42,45,54,.69);
	color: #fff;
}
.team-highlights .now-playing img, #team-modal .now-playing img {
	float: left;
	margin-right: 12px;
	width: 60px;
}
	.team-highlights .card.flipped .now-playing img {
		float: right;
		margin-right: 0;
		margin-left: 12px;
	}
.team-highlights .now-playing p, #team-modal .now-playing p {
	color: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.team-highlights .now-playing p.album, #team-modal .now-playing p.album {
	font-weight: 600;
	margin-top: .6em;
}
.team-highlights .now-playing p:not(.album), #team-modal .now-playing p:not(.album) { opacity: .75; }
.team-highlights .now-playing .btn {
	position: absolute;
	right: 30px;
	top: 50%;
}

.team-highlights .card .meet-btn {
	bottom: 24px;
	display: none;
	left: 24px;
	margin: 0;
	position: absolute;
	z-index: 20;
}
	.team-highlights .card.flipped .meet-btn {
		left: auto;
		right: 24px;
	}

/* Carousel Customization */
.team-highlights .carousel-dots {
	bottom: -.5em;
	top: auto;
	z-index: 100;
}

/* Team Modal (for phones only) */
#team-modal .modal {
	background: #f6f6f6;
	padding: 24px;
	position: relative;
}
#team-modal .meet-btn { display: none; }

#team-modal .modal-close {}

#team-modal-img {
	background-position: right -7px;
	background-size: 100%;
	border-radius: 6px 6px 0 0;
	box-shadow: rgba(0,0,0,.04) 0 2px 0, inset rgba(0,0,0,0.07) 0 -1px 0;
	height: 175px;
	left: 0;
	padding: 24px 24px 0 24px;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 10;
}
#team-modal h5 {
	line-height: 1.2;
	margin-bottom: .25em;
	overflow: hidden;
	text-overflow: ellipsis;
}
#team-modal p.title { margin-bottom: 3.4em; }
#team-modal p.title:after { display: none; }
#team-modal h5, #team-modal p.title { padding-right: 39.3%; }	/* The .3 is weird, but helps prevent exact integer matches, which can cause ellipsis to show. */
#team-modal.flipped h5, #team-modal.flipped p.title {
	padding-right: 0;
	padding-left: 39%;
	text-align: right;
}

#team-modal .copy {
	padding: 175px 0 75px 0;
	position: relative;
	z-index: 20;
}
#team-modal p, #team-modal dl { line-height: 1.4; }

#team-modal .now-playing {
	background: #f0f0f0;
	box-shadow: rgba(0,0,0,.07) 0 -1px 0;
	padding-bottom: 10px;
}
#team-modal .now-playing p { color: #3e3e3e; }
.modal-open #team-modal .now-playing { bottom: 0px; }

@media(max-width: 568px) {
	.team-highlights .card .copy { padding: 24px 24px 0 24px; }
	.team-highlights .card h5 { font-size: 1.3em; }
	.team-highlights .card p.title {
		font-size: .9em;
		line-height: 1.3;
	}
}
@media(max-width: 468px) {
	.team-highlights .card .copy { bottom: 24px; }
	.team-highlights .card-content dl, .team-highlights .carousel-item .now-playing { display: none; }
	.team-highlights .card .meet-btn { display: block; }
}
@media(max-width: 320px) {
	.team-highlights .card .copy {
		bottom: 20px;
		padding: 20px 20px 0 20px;
	}
	.team-highlights .card h5 {
		font-size: 1.1em;
		line-height: 1.1;
	}
	.team-highlights .card p.title { font-size: .84em; }
	.team-highlights .card .meet-btn {
		bottom: 20px;
		left: 20px;
	}
	.team-highlights .card.flipped .meet-btn { right: 20px; }

	.team-highlights .meet-btn { box-shadow: none; }
	.team-highlights .meet-btn.outline {
		background: #2a2d36;
		color: #fff;
	}
	.team-highlights .card.invert .meet-btn.outline {
		background: #fff;
		color: #2a2d36;
	}
}

/* Jobs */
#jobs { padding-top: 7.3vw; }
#featured-jobs { padding-top: 2em; }
#featured-jobs .col { margin-bottom: 1em; }
#featured-jobs .col:first-child { padding-right: .5em; }
#featured-jobs .col:last-child { padding-left: .5em; }
#featured-jobs .col:first-child:last-child { padding-left: 0; padding-right: 0; }

@media(max-width: 768px) {
	#featured-jobs .col:first-child { padding-right: 0; }
	#featured-jobs .col:last-child { padding-left: 0; }
}

#all-jobs {}
#all-jobs .card-content { padding: calc(30px - 1em) 30px; }
#all-jobs .nav-list { border-top: 1px solid #f6f6f6; }
#all-jobs .job-filter + .nav-list { border-top: 1px solid #f6f6f6; }
#all-jobs .nav-list.open + .nav-list { border-top-color: transparent; }
#all-jobs .nav-list .hdr, #all-jobs .nav-list li a {
	align-items: center;
	display: flex;
	margin: 0 -30px;
	padding: 1em 30px;
}
#all-jobs .nav-list .hdr .openings {
	color: #30b55a;
	font-size: .75em;
	margin-left: auto;
	padding-top: 1px;
}
#all-jobs .nav-list .hdr:hover { color: #30b55a; }

@media(max-width: 568px) {
	#all-jobs .nav-list .hdr, #all-jobs .nav-list .hdr span {
		display: block;
		text-align: center;
	}
	#all-jobs .job-list li a { display: block; }
	#all-jobs .job-list li a p:not(.title) { display: inline; }
	#all-jobs .job-list li a p.type:after { content: ' · '; }
}

#all-jobs .nav-list.open .job-list { padding-bottom: 2em; }
#all-jobs .job-list li { margin: 0; }
#all-jobs .job-list li a {
	border-top: 1px solid #f6f6f6;
	padding: .6em 0;
	margin: 0 auto;
}
#all-jobs .nav-list.open .job-list {
	border-top: 1px solid #ccc;
	box-shadow: inset rgba(0,0,0,.03) 0 2px 0;
	padding-top: 1px;
}
#all-jobs .job-list li a p { margin: 0; }
#all-jobs .job-list li a p.title { margin-right: auto; }
#all-jobs .job-list li a p.type, #all-jobs .nav-list li a p.locale {
	color: #a9a9a9;
	font-size: .75em;
	min-width: 120px;
	width: 15%;
}
#all-jobs .job-list li a p.type { text-align: center; }
#all-jobs .job-list li a p.locale { text-align: right; }

#job-locations {
	margin-bottom: 30px;
	margin-top: 16px;
}

/* Locations */
#locations { padding-top: 8.4vw; }
#locations .map {
	margin: -7em auto 0 auto;
	max-width: 1480px;
	pointer-events: none;
	width: 100%;
}
#locations h3 { font-weight: 700; }

.cities { margin-top: -5em; }
.cities .col { margin-bottom: 3em; }
.cities h5 {
	font-size: 1em;
	font-weight: 600;
	margin: 0 0 .25em 0;
}
.cities .clock { padding: 1em 0; }

@media (max-width: 568px) {
	#locations { padding-top: 4em; }
	#locations .map { margin-top: -1em; }
	.cities { margin-top: -2em; }
}


/* Pro
--------------------------------------------- */
#pro-masthead {
	height: 78vh;
	max-height: 750px;
	min-height: 620px;
}
#pro-masthead > .wrap { padding-top: 1em; }

#pro-keys:not(.angle-bottom) {
	padding-top: 2.6vh;
	padding-bottom: 3.9vw;
	position: relative;
}
#pro-keys:not(.angle-bottom):after {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	bottom: 0;
	content: '';
	left: 50%;
	margin-left: -20px;
	position: absolute;
	width: 40px;
}
#pro-keys .key-features > .col:before {
	background: url(../_i/icons.core.svg) center top no-repeat;
	content: '';
	display: block;
	height: 100px;
	margin: 0 auto .5em auto;
	width: 100%;
}
	#pro-keys .key-features > .col.feature-offline:before {}
	#pro-keys .key-features > .col.feature-nolimits:before { background-position: center -100px; }
	#pro-keys .key-features > .col.feature-audio:before { background-position: center -200px; }
	#pro-keys .key-features > .col.feature-library:before { background-position: center -300px; }

#pro-pricing { padding-top: 3.9vw; }
.compare-tables[class] .card-content { padding: 30px 30px 0 30px; }
.compare-tables .pro .card-content {
	padding-left: 38px;
	padding-right: 38px;
}
.compare-tables > .col.free {
	margin-left: 10px;
	margin-right: -10px;
	padding-top: 8px;
	padding-bottom: 8px;
}
.compare-tables > .col.free h3 { margin-top: -7px; }
.compare-tables > .col.pro h3 { margin-top: 1px; }
.compare-tables .big-text p { font-weight: 700; }
.compare-tables .btn[class] {
	margin-top: 1em;
	margin-bottom: 30px;
}

@media(max-width: 1024px) {
	.compare-tables[class] { width: 90%; }
}
@media(max-width: 768px) {
	.compare-tables > .col {
		margin: 0 auto;
		width: 69%;
	}
	.compare-tables .col.pro { order: 1; }
	.compare-tables .col.free {
		margin: 1em auto 0 auto;
		order: 2;
	}
	.compare-tables > .col[class] h3 { margin-top: 0; }
}
@media(max-width: 568px) {
	#pro-masthead { padding-bottom: 14vw; }
	
	#pro-masthead h3 { margin-bottom: .5em; }
	#pro-masthead .btn { margin: .4em .25em .25em .25em; }
	
	.compare-tables[class] { width: 100%; }
	.compare-tables > .col { width: 80%; }
	
	.compare-tables .btn[class] { margin-top: .5em; }
}
@media(max-width: 480px) {
	#pro-masthead { min-height: 480px; }
	
	.compare-tables > .col { width: 100%; }
}

.check-list li {
	padding: .43em 0 .43em 42px;
	position: relative;
	margin: 0;
}
.check-list li:last-child { border-bottom: none; }
.check-list li.off { color: #e6e6e6; }

.check-list li:before {
	background: transparent center center no-repeat;
	background-size: 57%;
	bottom: 3px;
	content: '';
	left: 0;
	position: absolute;
	top: 0;
	width: 30px;
}
.check-list li:before {
	background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%220%200%2060%2060%22%20class%3D%27ease%27%3E%3Cstyle%3E.saavn-check-svg%20%7Bfill%3A%233e3e3e%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3Cpath%20id%3D%27saavn-icon-check%27%20class%3D%27saavn-check-svg%27%20d%3D%22M58.3%2C14.206L21.927%2C54.268a3.462%2C3.462%2C0%2C0%2C1-5.01%2C0L1.727%2C38.75c-1.144-1.168-.873-3.339.6-4.849s3.6-1.786%2C4.747-.618l12.29%2C12.552L53.048%2C8.743c1.123-1.168%2C3.209-.891%2C4.659.617S59.423%2C13.039%2C58.3%2C14.206Z%22%2F%3E%3C%2Fsvg%3E);
}
.check-list li.off:before {
	background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%220%200%2060%2060%22%20class%3D%27ease%27%3E%3Cstyle%3E.saavn-x-svg%20%7Bfill%3A%23e6e6e6%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3Cpath%20id%3D%27saavn-icon-x%27%20class%3D%27saavn-x-svg%27%20d%3D%27M49.022%2C15.729L34.751%2C30%2C48.987%2C44.236a3.36%2C3.36%2C0%2C0%2C1-4.751%2C4.751L30%2C34.751%2C15.764%2C48.987a3.36%2C3.36%2C0%2C0%2C1-4.751-4.751L25.249%2C30%2C10.978%2C15.729a3.36%2C3.36%2C0%2C0%2C1%2C4.751-4.751L30%2C25.249%2C44.271%2C10.978A3.36%2C3.36%2C0%2C0%2C1%2C49.022%2C15.729Z%27%2F%3E%3C%2Fsvg%3E);
	bottom: 0;
}

.invert .check-list li { border-bottom-color: rgba(255,255,255,.04); }
.invert .check-list li:before {
	background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%220%200%2060%2060%22%20class%3D%27ease%27%3E%3Cstyle%3E.saavn-check-svg%20%7Bfill%3A%238b9dbf%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3Cpath%20id%3D%27saavn-icon-check%27%20class%3D%27saavn-check-svg%27%20d%3D%22M58.3%2C14.206L21.927%2C54.268a3.462%2C3.462%2C0%2C0%2C1-5.01%2C0L1.727%2C38.75c-1.144-1.168-.873-3.339.6-4.849s3.6-1.786%2C4.747-.618l12.29%2C12.552L53.048%2C8.743c1.123-1.168%2C3.209-.891%2C4.659.617S59.423%2C13.039%2C58.3%2C14.206Z%22%2F%3E%3C%2Fsvg%3E);
}

.pro .check-list li:not(.pro) { color: #8b9dbf; }
.pro .check-list li.pro:before {
	background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%220%200%2060%2060%22%20class%3D%27ease%27%3E%3Cstyle%3E.saavn-check-svg%20%7Bfill%3A%23ffffff%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3Cpath%20id%3D%27saavn-icon-check%27%20class%3D%27saavn-check-svg%27%20d%3D%22M58.3%2C14.206L21.927%2C54.268a3.462%2C3.462%2C0%2C0%2C1-5.01%2C0L1.727%2C38.75c-1.144-1.168-.873-3.339.6-4.849s3.6-1.786%2C4.747-.618l12.29%2C12.552L53.048%2C8.743c1.123-1.168%2C3.209-.891%2C4.659.617S59.423%2C13.039%2C58.3%2C14.206Z%22%2F%3E%3C%2Fsvg%3E);
}

#pro-faq h3 { margin-bottom: 1.5em; }
#pro-faq h5 {
	font-size: 1.1em;
	position: relative;
}
#pro-faq h5:before {
	/*background: rgba(255,0,0,.12);*/
	content: '';
	display: block;
	/*height: 100px;*/
	margin: 0 auto .75em auto;
	width: 100%;
}


/* Contact
--------------------------------------------- */
#contact {
	position: relative;
	z-index: 100;
}
#contact .big-text.condensed { padding-bottom: 1.5em; }
#contact .big-text p {
	line-height: 1.3;
	margin-top: .25em;
}

#suggestions { padding-top: 30px; }

#contact-form { padding-top: 30px; }


/* Terms & Conditions
--------------------------------------------- */
.legal {
	padding-top: 6vw;
	padding-bottom: 5vw;
}
.legal article { padding-bottom: 3em; }

.legalese {
	order: 1;
	padding-right: 30px !important;
}
.legal .legalese p, .legal .legalese li { font-size: .84em; }
.legal .legalese li ul { margin-top: .5em; }
.legal .legalese li li { font-size: 1em; }
.legal .legalese li { margin-left: 2em; }
.legal .legalese ul li { list-style: disc; }
.legal .legalese ol li { list-style: decimal; }

.layman {
	border-left: 1px solid #e6e6e6;
	color: #a9a9a9;
	order: 2;
	padding-left: 30px !important;
}
.layman h3 { font-weight: 300; }


/* Sonos
--------------------------------------------- */
#sonos-about, #sonos-start {
	padding-top: 3em;
	position: relative;
}
#sonos-start { padding-top: 5em; }
#sonos-about .big-image {
	background-image: url(../_i/sonos.1.jpg);
	background-position: right center;
	background-repeat: no-repeat;
	height: 100%;
	max-width: 1200px;
	min-height: 480px;
	position: absolute;
	left: 0;
	top: 2.1em;
	width: calc(58.3333% - 62px - 3vw);
	z-index: 9;
}
.sonos-what { padding-top: 3em; }

@media(max-width: 768px) {
	.sonos-what { padding-top: 1em; }
	#sonos-about { padding-bottom: 20em; }
	#sonos-about .big-image {
		background-position: center center;
		background-size: contain;
		bottom: -2em;
		height: 20em;
		left: 0;
		min-height: 0;
		top: auto;
		width: 100%;
	}
}
@media(max-width: 480px) {
	#sonos-about { padding-bottom: 15em; }
	#sonos-about .big-image { height: 15em; }
}
@media(max-width: 568px) {
	#sonos-mast { background-position: 66% center; }
}
@media(max-width: 320px) {
	#sonos-about { padding-bottom: 12em; }
	#sonos-about .big-image { height: 12em; }
}


/* Extras */
#rights-info > .wrap > .layout h4:not(:first-child) { margin-top: 3em; }
#rights-info h5 { margin: 0 0 .4em -3px; }
.rights-callout {
	background: #fff;
	border-radius: 3px;
	box-shadow: rgba(0,0,0,.07) 0 5px 21px;
	padding: 1.6em 1.5em 1px 1.6em;
	margin-top: 3em;
}


/* Clocks (Reused in a few spots.)
--------------------------------------------- */
.clock {}

.clock-face {
	/*background: #f0f0f0;*/
	border-radius: 50%;
	height: 120px;
	margin: 0 auto;
	position: relative;
	width: 120px;
}
.clock-h, .clock-m, .clock-s {
	box-shadow: rgba(0,0,0,.17) 0 0 2px;
	left: 50%;
	position: absolute;
	top: 50%;
	transition: .48s;
}
.clock-h, .clock-m {
	background: #3e3e3e;
	border-radius: 2px;
	margin-left: -2px;
	width: 4px;
}
.clock-h {
	height: 37px;
	margin-top: -29px;
	transform-origin: 2px 29px;
	z-index: 2;
}
.clock-m {
	height: 52px;
	margin-top: -43px;
	transform-origin: 2px 43px;
	z-index: 3;
}
.clock-s {
	background: #30b55a;
	border-radius: 2px;
	height: 57px;
	margin: -48px 0 0 -1px;
	transform-origin: 1px 48px;
	width: 2px;
	z-index: 4;
}
.clock-face:after, .clock-s:after {
	border-radius: 50%;
	content: '';
	height: 8px;
	left: 50%;
	margin: -4px 0 0 -4px;
	position: absolute;
	width: 8px;
	z-index: 5;
}
.clock-face:after {
	background: #e6e6e6;
	box-shadow: inset #30b55a 0 0 0 3px;
	top: 50%;
}
.clock-s:after {
	background: #f6f6f6;
	box-shadow: inset #30b55a 0 0 0 1px;
	top: 21%;
}

/* Optional Dial */
.clock-dial span {
	height: 100%;
	margin-left: -4px;
	position: absolute;
	width: 8px;
}
.clock-dial span:after, .clock-dial span:nth-child(12):before {
	background: #fff;
	box-shadow: inset #ccc 0 0 0 1px;
	content: '';
	left: 50%;
	position: absolute;
	top: 8px;
}

/* Standard Style */
.clock-dial span:after {
	border-radius: 50%;
	height: 7px;
	margin-left: -3.5px;
	width: 7px;
}

/* 12, 3, 6, 9 Style */
.clock-dial span:nth-child(3):after, .clock-dial span:nth-child(6):after, .clock-dial span:nth-child(9):after, .clock-dial span:nth-child(12):after {
	border-radius: 0;
	height: 12px;
	margin-left: -2px;
	width: 4px;
}
/* 12 Fancy Style */
.clock-dial span:nth-child(12):after {
	background: transparent;
	border-top: 17px solid #ccc;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	margin-left: -5.5px;
	z-index: 1;
}
.clock-dial span:nth-child(12):before {
	background: transparent;
	border-top: 14px solid #fff;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	margin-top: 1px;
	margin-left: -3.5px;
	z-index: 2;
}

/* Dial Positions */ 
.clock-dial span:nth-child(1) { transform: rotate(30deg); }
.clock-dial span:nth-child(2) { transform: rotate(60deg); }
.clock-dial span:nth-child(3) { transform: rotate(90deg); }
.clock-dial span:nth-child(4) { transform: rotate(120deg); }
.clock-dial span:nth-child(5) { transform: rotate(150deg); }
.clock-dial span:nth-child(6) { transform: rotate(180deg); }
.clock-dial span:nth-child(7) { transform: rotate(210deg); }
.clock-dial span:nth-child(8) { transform: rotate(240deg); }
.clock-dial span:nth-child(9) { transform: rotate(270deg); }
.clock-dial span:nth-child(10) { transform: rotate(300deg); }
.clock-dial span:nth-child(11) { transform: rotate(330deg); }
.clock-dial span:nth-child(12) {}


/* Pro Checkout Success Page
--------------------------------------------- */
#top-block.checkout-success { height: auto; }

.checkout-success .masthead h1 { padding-top: 1.2em; }
.checkout-success .masthead .content .app-stores .saavn-store-svg { fill: #fff; }
.checkout-success .masthead .content .btn.large { margin: 2.1em 0 1.75em 0; }

.checkout-success .masthead:after {
	border-bottom: 5px solid #8b9dbf;
	border-right: 5px solid #8b9dbf;
	border-radius: 2px;
	bottom: 5.7vw;
	content: '';
	height: 16px;
	left: 50%;
	margin-left: -8px;
	position: absolute;
	transform: rotate(45deg);
	transition: opacity .21s linear;
	width: 16px;
	z-index: 500;
}
.phone-display .checkout-success .masthead:after { bottom: 9.3vw; }

.checkout-success #tips {
	margin: 0 auto;
	max-width: 800px;
	padding: 3em 0 1em 0;
}
.checkout-success #tips .tip + .big-text { padding-top: 6em; }

p.cancel-existing-subs-info {
  max-width: 540px;
  margin: 40px auto;
}

.cancel-existing-subs h5 {
  color: #ffffff;
}

.cancel-subs-row a.btn {
  width: 150px;
  margin: 0 5px;
}

@media(max-width: 468px) {
  .cancel-existing-subs h5 {
    font-size: 18px;
  }
  .cancel-subs-row a.btn {
    width: 100%;
    display: block;
    margin: 10px auto;
    padding: 15px 0;
  }
}

.tip { align-items: center; }
.tip:not(:first-child) { padding-top: 5em; }

.tip .screen[class]:not(.right), .tip .copy[class].left { padding-right: 4vw; }
.tip .copy[class]:not(.left), .tip .screen[class].right { padding-left: 4vw; }

.tip .col { order: 0; }
.tip .col.screen.right { order: 2; }
.tip .col.copy.left { order: 1; }

.tip .vid {
	margin: 0 auto;
	position: relative;
}
.tip .vid img, .tip .vid video {
	box-shadow: rgba(0,0,0,.21) 0 3px 39px;
	display: block;
	margin: 0;
	position: relative;
	width: 100%;
	z-index: 40;
}
.tip .vid .control {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 50;
}

@media(max-width: 768px) {
	#main.checkout-success { padding-top: calc(3em + 2vw); }
}
@media(max-width: 568px) {
	.checkout-success .masthead .content p { font-size: 18px; }
	.checkout-success .masthead .content .btn.large { margin: 2.1em 0 1.75em 0; }
	
	.checkout-success .big-text.condensed { padding-bottom: 0; }
	.checkout-success .big-text p:not(.small):not(.medium) { font-size: 18px; }
}
@media(max-width: 480px) {
	.tip { display: block; }
	.tip .col { width: 100%; }
	.tip .copy[class] {
		padding-top: 2em;
		text-align: center;
	}
	.tip p { font-size: 14px; }
	
	.tip .vid { max-width: 304px; }
}

/* Fireworks */
.fireworks {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 90;
}
.fireworks:before, .fireworks:after {
	animation: 1s colorz ease-out 12 backwards, 1s fall ease-in 12 backwards, 5s explode linear 12 backwards;
	border-radius: 50%;
	box-shadow: #fff 0 0;
	content: '';
	height: 4px;
	left: 0;
	position: absolute;
	top: 0;
	width: 4px;
}
	.phone-display .fireworks:before, .phone-display .fireworks:after {
		height: 3px;
		width: 3px;
	}
.fireworks:after {
	animation-delay: 1.25s, 1.25s, 1.25s;
	animation-duration: 1.25s, 1.25s, 6.25s;
}
@keyframes colorz {
	to {
		box-shadow:
		174px -267px #30b55a,
		207px -203px #8b9dbf,
		-27px -114px #ddf8e7,
		-226px -337px #98f0b3,
		-213px -139px #8b9dbf,
		238px -179px #ddf8e7,
		100px 67px #8b9dbf,
		-129px -102px #8b9dbf,
		61px -103px #ddf8e7,
		-59px 20px #98f0b3,
		-76px -79px #30b55a,
		142px -244px #ddf8e7,
		165px -404px #8b9dbf,
		46px -349px #8b9dbf,
		-249px 56px #ddf8e7,
		166px 27px #98f0b3,
		122px -273px #8b9dbf,
		-208px 53px #ddf8e7,
		-120px -267px #8b9dbf,
		-143px -199px #8b9dbf,
		-48px -176px #30b55a,
		-112px -113px #98f0b3,
		90px -277px #8b9dbf,
		2px -242px #ddf8e7,
		-64px -193px #8b9dbf,
		-31px 6px #8b9dbf,
		-56px -198px #ddf8e7,
		250px -25px #98f0b3,
		166px -36px #8b9dbf,
		47px -110px #ddf8e7,
		-36px 38px #30b55a,
		-38px -239px #8b9dbf,
		163px -2px #ddf8e7,
		-74px -348px #98f0b3,
		-42px -2px #8b9dbf,
		201px 48px #ddf8e7,
		67px -210px #8b9dbf,
		-116px -115px #8b9dbf,
		38px -48px #ddf8e7,
		46px 62px #98f0b3,
		156px -80px #30b55a,
		-62px 74px #ddf8e7,
		1px -6px #8b9dbf,
		-14px 16px #8b9dbf,
		114px -54px #ddf8e7,
		227px -116px #98f0b3,
		164px 47px #8b9dbf,
		-138px 72px #ddf8e7,
		-96px -305px #8b9dbf;
  }
}
@keyframes explode {
	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 fall {
	to {
		transform: translateY(210px);
		opacity: 0;
	}
}

iframe[class^=stripe] { transform: translate3d(0, 0, 2000px); }