/*

Title:			Saavn Corp | Brand Guide

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

*/



/* Layout
--------------------------------------------- */
#bguide-contents { padding-left: 3em; }
#bguide-nav { margin-top: 4.5em; }

@media(max-width: 768px) {
	#bguide-contents { padding-left: 0; }
	
	#bguide-nav {
		margin-top: 3.5em;
		margin-bottom: -2em;
	}
	#bguide-nav .quick-nav-wrap { box-shadow: none; }
	#bguide-nav .children { display: none; }
}


/* Logos
--------------------------------------------- */
.bevel { position: relative; }
.bevel:after {
	bottom: 0;
	box-shadow: inset rgba(0,0,0,.12) 0 0 0 1px;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}
.bevel.light { box-shadow: inset rgba(0,0,0,.06) 0 0 0 1px; }
.fit img { width: 100%; }
.fit.flex img {
	max-width: 100%;
	width: auto;
}

.bguide-group {}
.bguide-group.section {
	border-top: 1px solid #e6e6e6;
	margin-top: 3em;
	padding-top: 6em;
}
.bguide-group + .bguide-group:not(.section) { padding-top: 3em; }
.bguide-group .fit, .bguide-group .col > img { margin-bottom: 1.5em; }

/* Logo */
#bguide-logo {
	padding-top: 5em;
	position: relative;
}
#logo-download {
	position: absolute;
	right: 0;
	top: 5em;
}

/* Misuse */
#bguide-misuse .col { position: relative; }
#bguide-misuse .col .nono {
	background-color: #fff;
	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%23f3464a%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);
	background-position: center center;
	background-size: 20px;
	background-repeat: no-repeat;
	border-radius: 100%;
	box-shadow: inset rgba(0,0,0,.12) 0 0 0 1px;
	height: 30px;
	position: absolute;
	right: calc(15px - 10px);
	top: -10px;
	width: 30px;
	z-index: 999;
}
#bguide-misuse .col:before {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
	content: '';
	display: block;
	margin-bottom: .75em;
	padding-top: 100%;
	width: 100%;
}
#bguide-misuse .col:nth-child(1):before  { background-image: url(../_i/brand-guide/nonos/color.png); }
#bguide-misuse .col:nth-child(2):before  { background-image: url(../_i/brand-guide/nonos/distort.png); }
#bguide-misuse .col:nth-child(3):before  { background-image: url(../_i/brand-guide/nonos/layout.png); }
#bguide-misuse .col:nth-child(4):before  { background-image: url(../_i/brand-guide/nonos/gradient.png); }
#bguide-misuse .col:nth-child(5):before  { background-image: url(../_i/brand-guide/nonos/shadow.png); }
#bguide-misuse .col:nth-child(6):before  { background-image: url(../_i/brand-guide/nonos/old.png); }
#bguide-misuse .col:nth-child(7):before  { background-image: url(../_i/brand-guide/nonos/rotate.png); }
#bguide-misuse .col:nth-child(8):before  { background-image: url(../_i/brand-guide/nonos/transparent.png); }
#bguide-misuse .col:nth-child(9):before  { background-image: url(../_i/brand-guide/nonos/contrast.png); }
#bguide-misuse .col:nth-child(10):before { background-image: url(../_i/brand-guide/nonos/size.png); }
#bguide-misuse .col:nth-child(11):before { background-image: url(../_i/brand-guide/nonos/halfpixel.png); }
#bguide-misuse .col:nth-child(12):before { background-image: url(../_i/brand-guide/nonos/inline.png); }
#bguide-misuse .col:after {
	box-shadow: inset rgba(0,0,0,.12) 0 0 0 1px;
	content: '';
	left: 15px;
	padding-top: calc(100% - 1.75em - 2px);
	position: absolute;
	right: 15px;
	top: 0;
}
	.mobile #bguide-misuse .col:after { padding-top: 100%; }
@media(max-width: 568px) {
	#bguide-misuse .col { width: 50%; }
}

/* Colors */
#bguide-colors > .grid > .col { margin-bottom: 1.25em; }
.pantone .card-content { padding: 1em; }
.pantone .card-content:before {
	background: #f6f6f6;
	content: '';
	display: block;
	margin-bottom: .8em;
	padding-top: 100%;
	width: 100%;
}
	.pantone.green .card-content:before { background-color: #2bc5b4; }
	.pantone.naavy .card-content:before { background-color: #2a2d36; }
	.pantone.grey .card-content:before  { background-color: #1f1f1f; }
	.pantone.white .card-content:before { background-color: #f6f6f6; }
.pantone h4 {
	font-size: 1em;
	font-weight: 600;
	margin-bottom: .25em;
}
.pantone p {
	font-size: .9em;
	margin: 0 0 -.2em 0;
}

.pantone-extras {
	border-top: 2px solid #e6e6e6;
	margin: 1.5em -1em -.5em -1em;
	padding: 1em 1em 0 1em;
}
.pantone-extras > div {
	color: rgba(0,0,0,.48);
	font-size: .7em;
	margin-bottom: .5em;
	padding: .6em;
}
.pantone-extras > div strong {
	color: #3e3e3e;
	display: block;
	margin-bottom: .4em;
}
.pantone-extras > div.invert { color: rgba(255,255,255,.39); }
.pantone-extras > div.invert strong { color: rgba(255,255,255,.84); }

.pantone-extras > div.green-dark { background: #258f83; }
.pantone-extras > div.green-light { background: #b6fff7; }
.pantone-extras > div.grey-medium { background: #3e3e3e; }
.pantone-extras > div.grey-light { background: #a9a9a9; }
.pantone-extras > div.white-alt { background: #e6e6e6; }
.pantone-extras > div.white-pure {
	background: #fff;
	box-shadow: inset rgba(0,0,0,.07) 0 0 0 1px;
}
.pantone-extras > div.naavy-light {
	background: #828da8;
	color: #2a2d36;
}
	.pantone-extras > div.naavy-light strong { color: #828da8; }
.pantone-extras > div.naavy-mint { background: #ddf8e7; }

@media(max-width: 768px) {
	.pantone-extras {
		display: flex;
		flex-wrap: wrap;
	}
	.pantone-extras > div { width: 49%; }
	.pantone-extras > div:first-child { margin-right: .5%; }
	.pantone-extras > div:last-child { margin-left: .5%; }
}
@media(max-width: 568px) {
	#bguide-colors .col { width: 50%; }
	
	.pantone-extras {
		display: block;
		flex-wrap: nowrap;
	}
	.pantone-extras > div {
		margin: 0 0 .5em 0;
		width: 100%;
	}
}

#bguide-plus .fit { margin: 0; }
#bguide-plus .col { position: relative; }
#bguide-plus .col:after {
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}


/* Download Modal */
#logo-packs h3 { margin: 0; }
#logo-asset-type { margin: 2em 0; }
#logo-packs .check-group {
	margin-bottom: 2em;
	padding-top: 0;
}
#logo-packs .check-group label {
	display: block;
	line-height: 1.4;
	padding-left: 1.7em;
	position: relative;
}
#logo-packs .check-group input[type=checkbox] {
	left: 0;
	margin: 0;
	position: absolute;
	top: .3em;
}