/*

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		#2bc5b4
Highlight		#b6fff7
Dark			#258f83
Mint			#ddf8e7

OTHER
Alert			#f3464a
Naavy			#2a2d36
Naavy HLight	#828da8

*/


/* 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
--------------------------------------------- */
#home-mast h1 {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: 1;
}
#home-mast .header {
    position: absolute;
    top: 175px;
    left: 50%;
    z-index: 110;
    margin-left: -570px;
}
#home-mast .header:last-of-type {
    top: 327px;
    margin-left: -525px;
    height: 1.32em;
    width: 5em;
}
#home-mast .header,
#home-mast .header svg {
    font-size: 130px;
    font-size: 8.125rem;
    line-height: 1.2;
    font-weight: 900;
    opacity: 0;
    transition: all .21s ease-in-out;
}
#home-mast .content { padding: 375px 0 0; }
#home-mast .content p { font-weight: 700; }
#home-mast .content .btn.large { margin: 2em .25em 1em 0; }
#home-mast .pattern-block {
    position: absolute;
    top: 15%;
    right: 10%;
    z-index: -1;
    overflow: hidden;
    height: 31.25em;
    width: 31.25em;
}
#home-mast .pattern-block svg {
    transition: fill .21s ease-in-out;
}

/* Masthead */
@media (max-width: 1240px) {
	#home-mast .header {
		left: 6%;
		margin-left: 0;
	}
	#home-mast .header:last-of-type { margin-left: 0.25em; }
}
@media(max-width: 1024px) {
	#home-mast #artists {
		left: 48%;
		right: -9%;
	}
	#home-mast .pattern-block { right: -2%; }
}
@media(max-width: 840px) {
	#home-mast .header {
		top: 360px;
		font-size: 100px;
		font-size: 6.25rem;
	}
	#home-mast .header:last-of-type {
		top: 470px;
	}
	#home-mast .content {
		padding: 29.75em 0 0;
	}
	#home-mast #artists {
		top: -38vh;
		left: 10%;
		right: 10%;
	}
	#home-mast .pattern-block {
		left: 50%;
		right: auto;
		height: auto;
		width: 70%;
		margin-left: -35%;
	}
}
@media(max-height: 705px) {
	#home-mast #artists {
		top: -198px;
		bottom: -106px;
	}
}
@media(max-width: 568px) {
	#home-mast { height: 80vh; padding-bottom: 18vw; }
	#home-mast .content { padding-bottom: 0; }
	#home-mast .content .btn.large { margin: 1em .25em 0 0; }
	#home-mast .content #pitch { display: none; }
	#home-mast.row .content #pitch { display: block; }
	#home-mast.row .content #pitch strong { display: none; }
	#home-mast .pattern-block {
		width: 78%;
		margin-left: -41%;
	}
	#home-mast .header {
		top: 365px;
		font-size: 65px;
		font-size: 4.0625rem;
	}
	#home-mast .header:last-of-type {
		top: 440px;
	}
	#home-mast #artists {
		bottom: 0;
		margin-left: -47%;
		left: 50%;
		right: auto;
		top: -190px;
		width: 94%;
	}
	.megaphone.show #home-mast #artists {
	    margin-left: -140px;
	    top: -120px;
	    width: 280px;
	}
}

@media(max-width: 340px) {
	#home-mast .content { padding: 27em 0 0; }
	#home-mast .header {
		font-size: 50px;
		font-size: 3.125rem;
	}
	#home-mast .header:last-of-type {
		top: 426px;
	}
}

/* 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;
	}
}

#wrapper.home-overflow-fix #main { overflow-x: hidden; }

/* 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%;
    margin-right:-10%;
}
#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: 1024px) {
	#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: -37vw;
		padding-top: 132.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; }
}


/* reCAPTCHA */
#g-recaptcha > div {
    margin: 0 auto 30px auto;
}
#g-recaptcha iframe {
    border: 1px solid transparent;
    border-radius: 3px;
    transition: border 300ms ease-in-out;
}
#g-recaptcha.error iframe {
    border-color: #f3464a;
}
#g-recaptcha .error-label {
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
}


/* 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: #2bc5b4;
	font-size: .75em;
	margin-left: auto;
	padding-top: 1px;
}
#all-jobs .nav-list .hdr:hover { color: #2bc5b4; }

@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%23828da8%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: #828da8; }
.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 p { font-size: inherit; }
.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; }

.legalese .eu-note {
	background: rgba(0,0,0,.07);
	border-radius: 4px;
	padding: 1em;
}
.legalese h5 {
	font-size: .95em;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: .875em;
}

/* accessibility changes */
.legalese{

	.section-title{
		font-size: 2.1em;
		font-weight: 400;
		line-height: 1.25;
		margin-bottom: .75em;
	}

	.section-subtitle{
		font-size: 1.3em;
		font-weight: 400;
		line-height: 1.2;
		margin-bottom: .875em;
	}

	.section-list-header{
		font-size: .95em;
    	font-weight: 600;
    	line-height: 1.2;
    	margin-bottom: .875em;
	}

}

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


/* Sonos / Alexa
--------------------------------------------- */
#sonos-about, #sonos-start, #alexa-about, #alexa-start, #google-about, #google-start, #homepod-about, #homepod-start {
	padding-top: 3em;
	position: relative;
}
#sonos-start { padding-top: 5em; }
#alexa-start, #google-start { padding-top: 10em; }
#sonos-about .big-image, #alexa-about .big-image, #google-about .big-image, #prog-audio-about .big-image, #homepod-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;
}

#alexa-about .big-image {
    background-image: url(../_i/alexa.1.jpg);
}

#google-about .big-image {
    background-image: url(../_i/googlehome.1.jpg);
}

#homepod-about .big-image {
    background-image: url(../_i/homepod.1.png);
}

.sonos-what { padding-top: 3em; }

.lt-blue { color: rgba(139, 157, 191, 1); margin-bottom:0; }

.quote {
    font-size: 40px;
    line-height: 1.4em;
    margin-bottom: .1em;
    color: rgba(139, 157, 191, 1);
    border: solid 1px rgba(139, 157, 191, 1);
    width: 40px;
    height: 40px;
    border-radius: 100px;
    padding-top: -4px;
    text-align: center;
    margin: 0 auto;
    margin-top: -14px;
    margin-bottom: 10px;
}

@media(max-width: 768px) {
	.sonos-what { padding-top: 1em; }
	#sonos-about, #alexa-about, #google-about, #homepod-about { padding-bottom: 20em; }
	#sonos-about .big-image, #alexa-about .big-image, #google-about .big-image, #prog-audio-about .big-image, #homepod-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, #alexa-about, #google-about, #homepod-about { padding-bottom: 15em; }
	#sonos-about .big-image, #alexa-about .big-image, #google-about .big-image, #homepod-about .big-image { height: 15em; }
}
@media(max-width: 568px) {
	#sonos-mast { background-position: 66% center; }
}
@media(max-width: 320px) {
	#sonos-about, #alexa-about, #google-about, #homepod-about { padding-bottom: 12em; }
	#sonos-about .big-image, #alexa-about .big-image, #google-about .big-image, #homepod-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;
}


/* Programmatic Ads
--------------------------------------------- */

/* Icons for programmatic ads */
.svg-icon { display: inline-block; }

#prog-audio-mast { background-position: right center; }

#prog-audio-about {
    position: relative;
    padding: 3em 0 5em;
}
#prog-audio-about img {
    display: inline-block;
    margin: 1em 0 0.5em;
}
#prog-audio-about .big-image {
    background-position: right top;
    background-image: url(../_i/prog-audio/iphone.jpg);
}
#prog-audio-about .svg-icon {
    margin: 0.5em 0;
    width: 68px;
}
@media(max-width: 768px) {
    #prog-audio-about { padding-bottom: 22em; }
    #prog-audio-about .big-image {
        background-position: center top;
        bottom: 1em;
        height: 18em;
    }
}
@media(max-width: 480px) {
    #prog-audio-about { padding-bottom: 16em; }
    #prog-audio-about .big-image { height: 14em; }
}
@media(max-width: 320px) {
    #prog-audio-about { padding-bottom: 12em; }
    #prog-audio-about .big-image { height: 10em; }
    #prog-audio-about .svg-icon + p { font-size: 0.8125em; }
}

#prog-audio-partners {
    padding: 2em 0;
    background: #e9e8e8;
}
#prog-audio-partners h5 {
    color: #b8b7b7;
    font-size: 0.8125em;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
}
#prog-audio-partners img {
    display: inline-block;
    padding: 2em;
}
#prog-audio-placement {
    position: relative;
    background: #2a2d36;
}
#prog-audio-placement > .wrap {
    padding-top: 5em;
    padding-bottom: 5em;
}
#prog-audio-placement .svg-icon {
    margin: 1em 0;
    height: 54px;
    width: 54px;
}
#prog-audio-placement .col:first-child .svg-icon { width: 99px; }
#prog-audio-placement .col:nth-child(2) .svg-icon { width: 41px; }
#prog-audio-placement .col:nth-child(3) .svg-icon { width: 22px; }



/* 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: #2bc5b4;
	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 #2bc5b4 0 0 0 3px;
	top: 50%;
}
.clock-s:after {
	background: #f6f6f6;
	box-shadow: inset #2bc5b4 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 #828da8;
	border-right: 5px solid #828da8;
	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; }

.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 #2bc5b4,
		207px -203px #828da8,
		-27px -114px #ddf8e7,
		-226px -337px #b6fff7,
		-213px -139px #828da8,
		238px -179px #ddf8e7,
		100px 67px #828da8,
		-129px -102px #828da8,
		61px -103px #ddf8e7,
		-59px 20px #b6fff7,
		-76px -79px #2bc5b4,
		142px -244px #ddf8e7,
		165px -404px #828da8,
		46px -349px #828da8,
		-249px 56px #ddf8e7,
		166px 27px #b6fff7,
		122px -273px #828da8,
		-208px 53px #ddf8e7,
		-120px -267px #828da8,
		-143px -199px #828da8,
		-48px -176px #2bc5b4,
		-112px -113px #b6fff7,
		90px -277px #828da8,
		2px -242px #ddf8e7,
		-64px -193px #828da8,
		-31px 6px #828da8,
		-56px -198px #ddf8e7,
		250px -25px #b6fff7,
		166px -36px #828da8,
		47px -110px #ddf8e7,
		-36px 38px #2bc5b4,
		-38px -239px #828da8,
		163px -2px #ddf8e7,
		-74px -348px #b6fff7,
		-42px -2px #828da8,
		201px 48px #ddf8e7,
		67px -210px #828da8,
		-116px -115px #828da8,
		38px -48px #ddf8e7,
		46px 62px #b6fff7,
		156px -80px #2bc5b4,
		-62px 74px #ddf8e7,
		1px -6px #828da8,
		-14px 16px #828da8,
		114px -54px #ddf8e7,
		227px -116px #b6fff7,
		164px 47px #828da8,
		-138px 72px #ddf8e7,
		-96px -305px #828da8;
  }
}
@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;
	}
}


/* Saavn 10
--------------------------------------------- */
/* Custom Masthead */
.s10-mast {
	max-height: none;
	min-height: 570px;
}
@media (max-width: 768px) {
	.s10-mast { min-height: 480px; }
}

.s10-funz, .s10-polys-front, .s10-polys-front:after {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.s10-grid:before, .s10-grid:after {
	content: '';
	position: absolute;
}

.s10-ten {
	text-align: center;
	z-index: 10;
}
.s10-ten span {
	color: rgba(21,26,34,.34);
	font-family: "Khand", sans-serif;
	font-size: 730px;
	font-weight: 700;
	height: 570px;
	line-height: 642px;
	margin-top: -285px;
	overflow: visible;
	position: absolute;
	top: 50%;
}
.s10-ten span.s1 {
	right: 52%;
}
.s10-ten span.s0 {
	left: 48%;
}
.s10-grid { z-index: 20; }
.s10-grid:before {
	background: rgba(255,255,255,.04);
	height: 1px;
	left: 0;
	right: 0;
	top: 48.6%;
	z-index: 100;
}
@media(max-width: 568px) {
	.s10-grid:before { top: 50%; }
}
.s10-grid:after {
	background: #32353e;
	bottom: 0;
	box-shadow: rgba(255,255,255,.04) 42px 0 0, rgba(255,255,255,.04) -42px 0 0, #2a2d36 0 0 0 42px;
	height: 100%;
	left: 48%;
	top: 0;
	transform: rotate(7.5deg);
	width: 1px;
	z-index: 50;
}

.s10-polys-back { z-index: 30; }
.s10-polys-front {
	pointer-events: none;
	z-index: 200;
}
.s10-polys-front:after {
	background: #f6f6f6;
	bottom: -7vw;
	content: '';
	height: calc(7vw + 1px);
	top: auto;
	transform: skewY(3.5deg);
	transform-origin: 100%;
	z-index: 10;
}

.s10-funz .wrap { height: 100%; }
.s10-funz .poly {
	background: transparent url(../_i/poly-shapes.svg) center top no-repeat;
	height: 400px;
	position: absolute;
	width: 400px;
}
	.s10-funz .poly-blue {}
	.s10-funz .poly-red { background-position: center -400px; }
	.s10-funz .poly-green { background-position: center -800px; }
	.s10-funz .poly-yellow { background-position: center -1200px; }
	.s10-funz .foreground {
		transform: scale3d(.62, .62, 1);
	}
	.s10-funz .far {
		filter: blur(7px);
		transform: scale3d(.57, .57, 1);
		opacity: .93;
	}
	.s10-funz .farther {
		filter: blur(21px);
		transform: scale3d(.34, .34, 1);
		opacity: .84;
	}
	.s10-funz .farthest {
		filter: blur(75px);
		transform: scale3d(.17, .17, 1);
		opacity: .75;
	}
.poly-blue.far {
	right: -62px;
	top: 12%;
}
.poly-green.far {
	left: 42%;
	top: 26%;
}
.poly-yellow.farther {
	right: -260px;
	top: -69px;
}
.poly-blue.farthest {
	left: -260px;
	top: -93px;
}
.poly-red.foreground {
	left: 162px;
	margin-top: 2vh;
	top: -120px;
}
@media (max-width: 840px) {
	.poly-blue.farthest, .poly-green.far, .poly-yellow.farther { display: none; }
}
@media (max-width: 768px) {
	.poly-red.foreground {
		top: -138px;
		transform: scale3d(0.48, .48, 1);
	}
	.poly-blue.far {
		top: 26%;
		transform: scale3d(.42, .42, 1);
	}
}
@media (max-width: 768px) {
	.poly-red.foreground {
		top: -138px;
		transform: scale3d(0.48, .48, 1);
	}
	.poly-blue.far {
		top: 26%;
		transform: scale3d(.42, .42, 1);
	}
}
@media (max-width: 568px) {
	.poly-red.foreground {
		left: 69px;
		top: -120px;
	}
	.poly-blue.far {
		right: 75px;
		top: 37%;
		transform: scale3d(.37, .37, 1);
	}
}

/* Saavn 10 Copy */
#saavn-10 { padding-top: calc(2.6vw + 2em); }
ol.s10 { counter-reset: li; }
.s10 li { padding-top: 1.84em; }
@media (min-width: 769px) {
	.s10.padded li:nth-child(odd) { padding-right: 30px; }
	.s10.padded li:nth-child(even) { padding-left: 30px; }
}
.s10 li:before {
	border-bottom: 3px solid #3e3e3e;
	color: #a9a9a9;
	content: counter(li)'.';
	counter-increment: li;
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 3.4em;
	margin-bottom: 1.48em;
	width: 2em;
}
.s10 p { color: #a9a9a9; }

/* User Research
--------------------------------------------- */

#intro.user-research .btn.large {
	width: 240px;
	margin-top: 10px;
}

.user-research .card-content { padding: 6% 7%; }

#research-faq {
	margin-bottom: 40px;
}

#research-faq .nav-list:first-child {
	border-top: 0;
	padding-top: 0;
}

#research-faq .nav-list {
	border-top: 1px solid #f6f6f6;
	padding-top: 20px;
}

.faq-Q { font-size: 18px; }
.faq-Q:hover { color: #2bc5b4; }

.faq-A ul {
	padding-left: 20px;
	color: #707070;
	list-style-type: disc;
	font-weight: 400;
}

@media (max-width: 568px) {
	#intro.user-research p:not(.small) {
	  font-size: 1.2em;
	}
}

/* Apple Watch
--------------------------------------------- */

/* Positioning */
.float-right {
    float: right;
}

.push-bottom { margin-bottom: 40px!important; }
.push-top { margin-top: 40px!important; }
.push-top--small { margin-top: 8px; }
.push-right--small { margin-right: 8px; }
.soft-right { padding-right: 40px; }
.soft-left { padding-left: 40px; }


/* Text */
h1.watch {
    font-size: 2em!important;
    line-height: 1.2em!important;
    max-width: 280px;
    margin: 0 auto;
}

h3.watch {
    font-size: 1.375em!important;
    line-height: 1.5em;
    font-weight: 400;
    margin-bottom: 0;
}

p.caption {
    font-size: .875em!important;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    margin-bottom:5px;
}

.white-text { color: #fff!important; }


/* Layout */
.watch.grid { max-width: 1000px; margin: 0 auto; }

.watch.grid.browse img { max-width: 275px; width: 100%; margin: 0 auto; margin-top:0px; }

.watch-download .watch.grid img { max-width: 375px; width: 100%; margin: 0 auto; margin-top: -60px; }

.watch-control .watch.grid img { width: 120%; margin: 0 auto; margin-top: -100px; margin-left: -100px; }

.masthead .content.watch { padding: 0; max-width:1000px; }


/* Elements */
img.watch {
    position: absolute;
    width: 277px;
    left: 0!important;
    right: 0!important;
    margin: 0 auto;
    top: 20px;
}
    /* Icons */
    .watch-icons { 
        background: transparent url(../_i/watch/icons-watch.png) center top no-repeat;
        height: 50px;
        width: 140px; 
        background-size:100%;
    }
    .watch-browse { background-position: center 0px; margin:0 auto; }
    .watch-dl { background-position: center -63px; margin-left:-40px; }
    .watch-cntrl { background-position: center -122px; }
    .watch-div { background-position: center -166px; margin:0 auto; }

.rotate {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    width:130px;
    margin-top:90px;
}

.top-15, .featured, .artist{
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
     -o-transition: all 200ms;
    transition: all 200ms;
}

.top-15:hover, .featured:hover, .artist:hover { color: #3e3e3e; }

.watch-vid .vid video { box-shadow: rgba(0,0,0,.21) 0 3px 39px; margin-top:40px; max-width:100%; height:auto; }


/* Sections */
section { margin-top: 100px!important; }
.watch-intro { max-width: 400px; margin: 0 auto; }
.watch-download, .watch-control, .watch-vid { max-width: 900px; margin: 0 auto; }


/* Mobile */        
@media (max-width: 568px) {
    #main.watch {
        padding-left: 20px;
        padding-right: 20px;
    }

    #main.watch .soft-left, #main.watch .soft-right { padding-left:0!important; padding-right:0!important; }
    #main.watch .watch-download .col, #main.watch .watch-control .col {
        width:100%;
    }

    section { margin-top: 80px!important; }
    .float-right { float: none; }
    img.watch { opacity: .15; top:0; }
    .rotate { display:none; }
    h3.watch {
        font-size: 1.375em!important;
        line-height: 1.5em;
        font-weight: 400;
    }

    .watch-download .watch.grid img { display:none; }
    .watch-control .watch.grid img { margin-top:0; margin-left:0px; width:100%; }

    .watch-download, .watch-control { text-align:center; }

    .watch-dl, .watch-cntrl { margin: 0 auto; }
}

/* Full screen takover */
.fullscreen {
    color: #f6f6f6;
}

.fullscreen #wrapper {
    background: #2a2d36;
}

.fullscreen .light {
    color: #8b9dbf;
}

.fullscreen .legalese .eu-note {
    background: #707070;
}

.fullscreen p,
.fullscreen li,
.fullscreen .legal .legalese p,
.fullscreen .legal .legalese ul li,
.fullscreen .legal .legalese ol li {
    font-size: 1.25rem;
}

.fullscreen header.navbar,
.fullscreen .masthead .content h1 + p,
.fullscreen .masthead .content h1 + h3,
.fullscreen .masthead .fill.angle,
.fullscreen .footer,
.fullscreen .card-div {
    display: none;
}

.fullscreen .legal {
    padding-top: 4vw;
}

.fullscreen .masthead {
    padding: 6em 30px 0;
    height: auto;
    min-height: 0;
}

.fullscreen .masthead .content {
    padding: 0;
    opacity: 1 !important;
}

.fullscreen .masthead .content h1,
.fullscreen .masthead .content h2 {
    margin: 0 0 6px 0;
    text-align: left;
}

.fullscreen .masthead .wrap {
    padding: 0;
    margin: 0 auto;
    width: 66.6666%;
}

.fullscreen .angle-bottom {
    padding: 0;
}

.fullscreen .wrap {
    max-width: none;
}

.fullscreen #main a {
    color: inherit;
    pointer-events: none;
    cursor: default;
}

.fullscreen #rights-info {
	padding-top: 4vw;
}

@media(max-width: 768px) {

    .fullscreen .masthead .wrap {
        width: 100%;
    }

}

@media(max-width: 468px) {

    .fullscreen .masthead {
        padding-top: 5vw;
        padding-right: 20px;
        padding-left: 20px;
    }

}

@media(max-width: 1240px) {

    .fullscreen .masthead {
        padding-right: 5%;
        padding-left: 5%;
    }

}

/* Accessibility: Skip to Content Link */
.skip-to-content {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.skip-to-content:focus {
    background-color: #fff;
    -webkit-clip-path: none;
    clip-path: none;
    clip: auto !important;
    color: #000;
    display: block;
    height: auto;
    left: 1rem;
    line-height: normal;
    margin: 0;
    padding: 1rem;
    position: absolute;
    text-decoration: none;
    top: 90px;
    width: auto;
    z-index: 100000; /* Over other elements */
}