/*
RESET
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

a, abbr, article, aside, blockquote, body, button, code, dd, del, details, div, dl, dt, em, fieldset, figcaption, figure, footer, form, header, hgroup, html, h1, h2, h3, h4, h5, h6, iframe, label, li, main, menu, nav, object, ol, p, section, span, strong, table, tbody, td, tfoot, th, thead, tr, ul {
	background: transparent;
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
body { line-height: 1; }
img, svg {
	border: none;
	display: block;
	margin: 0;
}
ol, ul { list-style: none; }
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a, :focus { outline: none; }



/* HTML5 Display Set */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }



/* Convenience */
.hide, hr, legend, .hidden, .hidden-desk { display: none; }
.clear { clear: both; }
.clr:after {
	clear: both;
	content: ".";
	display: block;
	font-size: .00001em;
	height: 0; 
	visibility: hidden;
}
.round { border-radius: 100px; }
.visible, .hide-mobile { display: inline-block; }


/*
PAGE SETUP
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

html { background: #ffffff; height: 100%; padding: 0 15px; }
body { background: #f6f6f6; height: 100%; }



/* Type Baselines */
body, ul, ol, input, textarea, select, button {
	font-family: "Lato", -apple-system, "Roboto", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: subpixel-antialiased;
}
a, button { cursor: pointer; }
button {
	border: none;
	-webkit-appearance: none;
}



/* Color Baselines */

:root{
    /* Primary */
    --green: #2bc5b4;
    --white: #ffffff;
    --saavn-white: #f6f6f6;
    --grey: #3e3e3e;
    
    /* Secondary */
    --light-green: #b6fff7;
    --alt-green: #98f0b3;
    --dark-green: #258f83;
    
    --light-grey:#a9a9a9;
    --alt-light-grey:#e9e9e9;
    --alt-grey:#707070;
    --dark-grey:#202020;
    
    --subtle-white: #e9e9e9;
    --navy: #2a2d36;
    --navy-accent: #828da8;
    --alert: #f3454a;
}



/*
CORE LAYOUT
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

main {
	overflow: hidden;
	padding-top: 90vh;
	position: relative;
	z-index: 300;
}
	
/* Grid */
.one-whole { width: 100%; }
.three-quarter { width: 75%; }
.one-half { width: 50%; }
.one-third { width: 33.33%; }
.two-thirds { width: 66.67%; }
.one-quarter { width: 25%; }
.less-half { width: 30%; }
.more-half { width: 70%; }

/* Floats & Positions */
.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }
.inline-block { display: inline-block; }
.block { display: block; }
.clear-both { clear: both; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.center { margin: 0 auto; }
.fixed { position: fixed; }
.absolute { position: absolute; }

/* Padding */
.soft { padding: 40px; }
.soft-top { padding-top: 40px; }
.soft-bottom { padding-bottom: 40px !important; }
.soft-left { padding-left: 40px !important; }
.soft-right { padding-right: 40px !important; }

.soft-double { padding:80px; }
.soft-double--top { padding-top:80px; }
.soft-double--bottom { padding-bottom:80px; }
.soft-double--left { padding-left:80px; }
.soft-double--right { padding-right:80px; }

.soft-right--small { padding-right: 10px; }
.soft-right--smaller { padding-right: 5px; }
.soft-left--smaller { padding-left: 5px; }
.soft-half { padding: 20px; }
.soft-small { padding: 10px; }

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

.push-bottom--half { margin-bottom: 20px; }
.push-right--small { margin-right: 10px; }

.push-top--small { margin-top: 10px !important; }
.push-bottom--small { margin-bottom:10px!important; }
.push-top--smaller { margin-top: 5px; }
.push-left--half { margin-left: 20px; }
.push-top--half { margin-top: 20px !important; }

.push-double { margin: 80px; }
.push-double--top { margin-top: 80px !important; }
.push-double--bottom { margin-bottom: 80px !important; }
.push-double--left { margin-left: 80px; }
.push-double--right { margin-right: 80px; }

.flush { padding: 0; }
.flush-top { padding-top: 0; }
.flush-bottom { padding-bottom: 0; }
.flush-left { padding-left: 0; }
.flush-right { padding-right: 0; }

.hard { margin: 0; }
.hard-top { margin-top: 0; }
.hard-bottom { margin-bottom: 0; }
.hard-left { margin-left: 0; }
.hard-right { margin-right: 0; }



/*
TEXT STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

h1{
    font-size:24px;
    line-height:38px;
    font-weight:bold;
    margin-top:0px;
}

h2{
    font-size:24px;
    line-height:38px;
    font-weight:400;
    margin-top:0px;
    margin-bottom:0px;
}

p {
    font-size:16px;
    line-height:24px;
    font-weight:400;
    display:inline-block;
    margin-top:10px;
    margin-bottom:10px;
}

p.row {
    display:block;
}

p.row-double {
    height:50px
}

.caption {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size:12px;
    line-height:12px;
    font-weight:600;
}

.mega {
    font-size:52px;
    line-height:52px;
    font-weight: 100;
    margin:0;
}

.major-mega {
    font-size:360px;
    line-height: 360px;
    font-weight: 800;
    margin-top:-30px!important;
    margin:0;
}

.micro {
    font-size:12px;
    line-height: 16px;
    margin:0;
}

.small {
    font-size:14px;
    line-height: 16px;
    margin:0;
}

.pull-quote {
    border-left:8px solid #2bc5b4;
    padding-left:20px;
}

h1.squished {
    line-height:28px;
}

p.squished {
    line-height:14px;
}

h1.heirarchy { font-size:32px; line-height:40px; font-weight: 100; }

.break-text {word-wrap:break-word;}

.blocked {
    background: #ffffff;
    padding: 6px;
    color: #202AF4;
    font-weight: 800;
    width: fit-content;
    background-blend-mode: difference;
}


/*
NAV
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 500;
}


/* Nav Bar */
#nav-bar {
	background: rgba(255, 255, 255, 0.95) url(../images/nav-bar-icon.svg) center center no-repeat;
	box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.1);
	height: 0;
	opacity: 0;
	transition: all 200ms;
	z-index: 100;
}
#nav-bar.show {
	height: 80px;
	opacity: 1;
}
#burger {
	background: transparent url(../images/nav-bar-burger.svg) left center no-repeat;
	height: 20px;
	left: 40px;
	line-height: 20px;
	margin-top: -10px;
	overflow: hidden;
	position: absolute;
	text-align: left;
	text-indent: 45px;
	top: 50%;
}
#section-part:not(:empty):before { content: "- "; }


/* Drawer */
#nav-drawer {
	height: 100%;
	left: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 200;
}
#nav-toc {
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .12);
	height: 100%;
	max-width: 280px;
	left: -280px;
	position: absolute;
	top: 0;
	transition: all 200ms;
	width: 25%;
	z-index: 100;
}
#nav-screen {
	background: rgba(0, 0, 0, .69);
	bottom: 0;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: all 200ms;
	z-index: 50;
}


/* Accordion */
#accordion {
	list-style: none;
    padding:0;
}
#accordion > li {
	display: block;
	list-style: none;
}
#accordion > li > span {
	display: block;
	color: #a9a9a9!important;
	cursor: pointer; 
    height:30px;
}

#accordion > li > div {
	list-style: none;
	display: none;
}
#accordion > li > div > div {
    height:30px;
    margin-left:20px;
}

#accordion > li > div > div > a {
    color:#a9a9a9;
}

#accordion > li > div > div > a:hover {
    color:#3e3e3e;
}

#accordion > ul li {
	font-weight: normal;
	cursor: auto;
}
#accordion a {
	text-decoration: none;
}
#accordion li > span:hover {
}
#accordion li > span.active {
	color:#3e3e3e!important;
}
#accordion li > span.active > div > a {
    color:#3e3e3e;
}


/* Hide/Show Drawer */
body.nav-show { overflow: hidden; }
.nav-show #nav-drawer { visibility: visible; }
.nav-show #nav-toc { left: 0; }
.nav-show #nav-screen { opacity: 1; }



/* 

BUTTONS & LINKS
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


.btn{
    text-decoration:none;
    width:auto;
    font-weight:400;
    font-size:14px;
    padding:12px 24px 12px 24px;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
     -o-transition: all 200ms;
    transition: all 200ms;
}
.btn.inline-block { vertical-align: middle; }

.btn.round {
    padding:12px;
}

.btn img.play{
    height:16px;
    width:16px;
    margin-bottom:-2px;
    margin-left:1px;
}

.btn img.download {
    margin-bottom:-2px;
}

.green-rounded{
    border-radius:100px;
    background-color:#2bc5b4;
    color:#f6f6f6;
}
.green-rounded:hover{
    background-color:#269d90;
    cursor: pointer;
}

.outline-rounded{
    border-radius:100px;
    border: 1px solid #c2c2c2; 
    color:#a9a9a9;
}
.outline-rounded:hover{
    border: 1px solid #2bc5b4; 
    color:#2bc5b4;
    cursor: pointer;
}

.outline-rounded-b{
    border-radius:100px;
    border: 1px solid #c2c2c2;
    background-color:#f6f6f6;
    color:#a9a9a9;
}
.outline-rounded-b:hover{
    border: 1px solid #2bc5b4; 
    color:#2bc5b4;
    cursor: pointer;
}

.facebook-rounded{
    border-radius:100px;
    background-color:#3b5998;
    color:#f6f6f6;
}

.facebook-rounded:hover{
    background-color:#2a4273;
    cursor: pointer;
}

.text-btn {
    color:#a9a9a9;
    font-weight:400;
    font-size:14px;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
     -o-transition: all 200ms;
    transition: all 200ms;
}

.text-btn:hover { color:#2bc5b4;}

.full-width-btn {
    width:100%;
    padding-top:12px;
    padding-bottom:12px;
    font-weight:400;
    font-size:14px;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
     -o-transition: all 200ms;
    transition: all 200ms;
}

.primary-green { background-color: #2bc5b4; color: #ffffff;}
.primary-green:hover { background-color: #269d90;}

.secondary-white { background-color: #ffffff; color: #3e3e3e;}
.secondary-white:hover { color: #2bc5b4;}

.toc {
    height:44px;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
     -o-transition: all 200ms;
    transition: all 200ms;
}

.toc:hover {
    color:#3e3e3e;
    cursor: pointer;
}

a.active{
    color:#3e3e3e;
}



.selected-div {
    height:16px;
    width:0px;
    margin-bottom: 3px;
    border-bottom:4px solid #3e3e3e;
    margin-left:20px;
    display: inline-block;
    opacity:0;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
     -o-transition: all 200ms;
    transition: all 200ms;
}

.selected-div.active {
    height:16px;
    width:40px;
    margin-bottom: 3px;
    border-bottom:4px solid #3e3e3e;
    margin-left:20px;
    display: inline-block;
    opacity:1;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
     -o-transition: all 200ms;
    transition: all 200ms;
}

.toc:hover + .selected-div {
    opacity:1;
    width:40px;
}

 .not-active {
     pointer-events: none;
     cursor: default;
     opacity: 0.3; 
}


/*
HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
header {
	height: 90vh;
	left: 15px;
	position: fixed;
	right: 15px;
	top: 0;
	z-index: 100;
}
header #main-title {
	position: absolute;
	right: 0px;
	top: 80px;
}
header #main-toc {
	left: 65px;
	position: absolute;
	top: 80px;
}

/* Top Table of Contents */
.toc {
    height: 44px;
	transition: all 200ms;
}
.toc:hover { color: #3e3e3e; }
.selected-div {
	border-bottom: 4px solid #3e3e3e;
	display: inline-block;
	height: 16px;
	margin-bottom: 3px;
	margin-left: 20px;
	opacity: 0;
	transition: all 200ms;
	width: 0px;
}
.selected-div.active {
    opacity: 1;
    width: 40px;
}
.toc:hover + .selected-div {
    opacity: 1;
    width: 40px;
}

/* Poly Artists */
#header-artists {}
#header-artists img {
	bottom: 0;
	left: 50%;
	max-width: 750px;
	min-width: 570px;
	position: absolute;
	transform: translate3d(-50%, 0, 0);
	width: 62%;
}
#header-artists img.preload { transform: translate3d(-50%, -200%, 0); }




/*
CONTENT
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#content {
	position: relative;
	z-index: 200;
}
#content:before {
    background-color:#f6f6f6;
    content: "";
    position:absolute;
    top:0;
    left:-50px;
    height:150px;
    width:150%;
    -webkit-transform-origin:70% 0;
    -ms-transform-origin:70% 0;
    transform-origin:70% 0;
    -webkit-transform:rotate(3.5deg);
    -ms-transform:rotate(3.5deg);
    transform:rotate(3.5deg);
}

/* Intro */
#intro {
	margin: 0 auto -20vh auto;
	position: relative;
	top: -20vh;
	z-index: 300;
    border-radius: 4px;
}

#intro.white-box {
    background: url(../images/background-pattern.svg);
    background-repeat: repeat;
    background-blend-mode: overlay;
    background-size: 130px;
    background-color:#202AF4;
}

/* Sections */

.group { max-width:1200px; margin:0 auto; }

section { overflow: hidden; }



/* LOGO SECTION */
.horz-grid {
    background-image: url(../images/horz-grid.png);
    background-size:     contain;                      
    background-repeat:   no-repeat;
    background-position: center center; 
    padding:7.4%;
}
.horz-grid img {
    max-width:100%;
    max-height:100%;
    min-width:100%;
    margin-top:-1.7%;
    margin-left:0.7%;
}
.diagonal {
    content:"";
    position:relative;
    width:142%;
    border-top:4px solid red;
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);

}



/* COLOR SECTION */

img.color-graphic {
    margin-top:-21px!important;
    width:86px;
    height:86px;
}

.color-palette {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
} 

.palette-details {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.color-palette.primary {height:110px;}
.color-palette.secondary {height:70px;}

.light-grey path{ fill:#a9a9a9;}
.grey path{ fill:#3e3e3e;}
.dark-grey path{ fill:#202020;}
.navy path{ fill: #2a2d36;}
.subtle-white path{ fill:#e9e9e9;}
.light-green path{ fill:#b6fff7;}
.navy-accent path{ fill:#828da8;}
.green path{ fill:#2bc5b4;}
.dark-green path{ fill:#258f83;}

img.proper{
    margin-top:-30px;
    margin-right:-30px;
    padding:5px;
    border-radius:100px;
    height:20px;
    width:20px;
}
img.improper{
    padding:3px;
    border-radius:100px;
    margin-left:-4px!important;
    margin-top:2px;
    margin-right:4px;
}



/* STYLE SECTION */

.slider-wrapper {
  width:582px;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  position: relative;
  background-size:100% auto!important;
}

.slider-wrapper:hover { 
    cursor: url(../images/cursor.svg)11 6, auto; }

.comparison-slider {
  position: absolute;
  width: 1px;
  height:646px; 
  max-height: 100%;
  left: 50%;
  top: -10px;
  bottom: -10px;
  background-color:#202020;
  background-size:100% auto!important;
}

.before-wrapper {
  display: block;
  overflow: hidden;
  width:582px;
  max-width: 100%;
  max-height: 100%;
  background-size:100% auto!important;
  position: relative;
  background: url("../images/poly-1.png") no-repeat;
}

.motion-halftone {
  background: url("../images/drake-before.png") no-repeat;
}

.after-wrapper, .after-image {
}

.after-wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
}

.after-image {
  display: block;
  width:582px;
  height:646px; 
  max-width: 100%;
  max-height: 100%;
  position: relative;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-size:100% auto!important;
  background: url("../images/poly-2.png") no-repeat;
}

.motion-halftone-after {
  background: url("../images/drake-after.png") no-repeat;
}

.comparison-slider, .after-wrapper, .after-image { transition: all .3s; }
.slider-wrapper:hover .comparison-slider, .slider-wrapper:hover .after-wrapper, .slider-wrapper:hover .after-image { transition: none; }



/* 
COLORS
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* BACKGROUNDS */


/* Primary */
.white-back { background-color: #ffffff; }
.saavn-white-back { background-color: #f6f6f6; }
.green-back { background-color: #2bc5b4; }
.grey-back { background-color: #3e3e3e; }


/* Secondary */
.light-green-back { background-color: #b6fff7; }
.alt-green-back { background-color: #6effef; }
.alt-light-grey-back { background-color: #e9e9e9!important; }
.dark-green-back { background-color: #258f83; }

.light-grey-back { background-color: #a9a9a9; }
.alt-grey-back { background-color: #707070; }
.dark-grey-back { background-color: #202020; }

.subtle-white-back { background-color: #e9e9e9; }
.alt-subtle-white-back { background-color: #cccccc; }

.navy-back { background-color: #2a2d36; }
.navy-accent-back { background-color: #828da8; }
.alert-back { background-color: #f3454a; }


/* Other */
.teal-back { background-color: #239fb8; }



/* TEXT */

/* Primary */
.saavn-white { color:#f6f6f6; }
.dark { color: #3e3e3e; }
.light { color: #a9a9a9; }
.white { color: #f6f6f6; }
.green { color: #2bc5b4; }
a.green { color: #2bc5b4; }
a.green:hover {
	border-bottom: 1px solid #2bc5b4;
	padding-bottom: 5px;
}


/* Background Specific */
.green-back p.caption {color:#b7ffdb; }
.grey-back p.caption {color:#a9a9a9; }
.color-palette.saavn-white-back p {color:#3e3e3e; }
.color-palette.subtle-white-back p {color:#3e3e3e; }
.color-palette.alt-subtle-white-back p {color:#3e3e3e; }
.color-palette.saavn-white-back p.caption {color:#a9a9a9; }
.light-green-back p {color:#258f83; }
.alt-green-back p {color:#258f83; }
.navy-back p.caption {color:#8b9dbf; }


/* Other */
p.alert {color:#f3454a; }
p.caption.dark-green {color:#258f83; }
h2.alt-green {color:#b6fff7; }
h2.light-green {color:#b6fff7; }


/* Links */
a { cursor: pointer; text-decoration:none; color:#a9a9a9; }
a.page-link { 
    color:#2bc5b4;
    cursor: pointer;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
     -o-transition: all 200ms;
    transition: all 200ms;
}
a.page-link:hover { color:#269d90; cursor: pointer; }
a.active { color:#3e3e3e; }

a.external-link { 
    color:#3e3e3e!important;
    border-bottom: 1px solid #3e3e3e!important;
    -webkit-transition: all 400ms;
    -moz-transition: all 400ms;
    -ms-transition: all 400ms;
     -o-transition: all 400ms;
    transition: all 200ms;
}
a.external-link:hover { color:#202020; padding-bottom:2px; }



/* 
PAGE ELEMENTS
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.white-box {
    background-color:#ffffff;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
}
.drop-shadow {
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
}
.stroke {
    border: solid 1px rgba(0,0,0,.1);
}

.round-corners {
    border-radius: 8px; 
}

.white-box img {
    max-width:100%;
    max-height:100%;
    min-width:100%;
}
.white-box img.check {
    max-width:12px;
    max-height:12px;
    min-width:12px;
}
.full-sized-image {
    max-width:100%;
    max-height:100%;
    min-width:100%;
}
.divider {
    width:100%;
    height:1px;
    background-color:#e2e2e2;
}
.thick-div {
    width:40px;
    border-bottom:4px solid #3e3e3e;
    margin: 0 auto;
    margin-top:10px;
    margin-bottom:10px;
}



/* 
ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.keyAnimate {
	animation-fill-mode: both;
	visibility: hidden;
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes slideDown {
    0% { transform: translate3d(0, -100%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}
.fadeInSlideDown {
	animation: fadeIn .84s ease, slideDown 1s ease;
	visibility: visible;
}
.delay {
	animation-delay: .21s;
}



/* 

LARGE SCREEN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-height: 950px) {
    #header-artists img { 
        bottom:auto; 
        max-width: none;
        height: 84%;
        width: auto;
    }
}



/* 

TABLET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


@media screen and (max-width: 900px) {
    .one-half { width:100%; }
    #intro.one-third { width:75%; }
    .one-third { width:50%; }
    .two-thirds { width:50%; }
    .one-quarter { width:50%; }
    .soft-double {padding:40px;}
    .soft { padding:20px; }
    .soft-right { padding-right:20px!important; }
    .soft-bottom { padding-bottom:20px!important; }
    .soft-half {padding:10px;}
    .push-double--top { margin-top:40px!important; }
    .push-double--bottom { margin-bottom:40px!important; }
    .soft-double--left{padding-left:40px;}
    .soft-double--right{padding-right:40px;}
    .push-top--half { margin-top:10px!important; }
    .push-top { margin-top:20px!important; }
    .push-bottom { margin-bottom:20px!important; }
    .soft-left { padding-left:0px!important; }
    #nav-bar .soft-left {padding-left:20px!important;}
    .soft-right { padding-right:0px; }
    header { background-size:12% 40px; }
    .header-content .toc {display:none;}
    .title {float:left;}
    #nav-toc { width:50%; }
    .close-nav { width:60%; }
    .suggested-use .one-quarter { width:25%; }
    .hidden-desk {display:inline-block;}
    .major-mega { font-size:180px; line-height:180px; }
    .soft-right--smaller {padding-right:0px;}
    .soft-left--smaller {padding-left:0px;}
    .hide-mobile { display:none; }
    .soft-left.white-box {padding-left:0!important;}
    header #main-title { position:relative; right:auto; top:auto; }
}



/* 

MOBILE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


@media screen and (max-width: 560px) {
    html {padding:0;}
    header { background-size:25% 40px; right:0; left:0; height:80vh; }
    #intro { width: 70%; }
    .one-third { width:100%; }
    .two-thirds { width:100%; }
    .right-margin{display:none;}
    .left-margin{display:none;}
    #nav-toc { width:75%; }
    .close-nav {width:24%;}
    img.logo {display: none;}
    #nav-bar { background:rgba(255, 255, 255, 0.95); }
    .header-svg {max-width: 100%;}
    #header-artists img {min-width:450px; bottom:-10%;}
}