/*
  HTML5 Reset :: style.css
  ----------------------------------------------------------
  We have learned much from/been inspired by/taken code where offered from:

  Eric Meyer          :: http://meyerweb.com
  HTML5 Doctor        :: http://html5doctor.com
  and the HTML5 Boilerplate :: http://html5boilerplate.com

-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
menu,
nav,
section,
time,
mark,
audio,
video,
details,
summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
article,
aside,
figure,
footer,
header,
nav,
section,
details,
summary {
  display: block;
}
/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {
  max-width: 100%;
}
/* we use a lot of ULs that aren't bulleted.
  don't forget to restore the bullets within content. */
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}
/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th {
  font-weight: bold;
  vertical-align: bottom;
}
td {
  font-weight: normal;
  vertical-align: top;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}
pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */
}
input[type="radio"] {
  vertical-align: text-bottom;
}
input[type="checkbox"] {
  vertical-align: bottom;
}
.ie7 input[type="checkbox"] {
  vertical-align: baseline;
}
.ie6 input {
  vertical-align: text-bottom;
}
select,
input,
textarea {
  font: 99% sans-serif;
}
table {
  font-size: inherit;
  font: 100%;
}
small {
  font-size: 85%;
}
strong {
  font-weight: bold;
}
td,
td img {
  vertical-align: top;
}
/* Make sure sup and sub don't screw with your line-heights
  gist.github.com/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* standardize any monospaced elements */
pre,
code,
kbd,
samp {
  font-family: monospace, sans-serif;
}
/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer;
}
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,
input,
select,
textarea {
  margin: 0;
}
/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible;
}
/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic;
}
/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:before,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}
@font-face {
  font-family: "icons";
  src: url("../fonts/icons.eot");
  src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.ttf") format("truetype"), url("../fonts/icons.svg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "icons";
    src: url("../fonts/icons.svg#icomoon") format("svg");
  }
}
/* "Helvetica Neue" */
lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes fade{ 0%{ opacity: 0; }  100%{ opacity: 1 }}
@-moz-keyframes fade{ 0%{ opacity: 0; }  100%{ opacity: 1 }}
@-o-keyframes fade{ 0%{ opacity: 0; }  100%{ opacity: 1 }}
@keyframes fade{ 0%{ opacity: 0; }  100%{ opacity: 1 };
}
lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes fadeShadowX{ 0%{ background-size: 0% 100%; } 25%{ background-size: 0% 100%; } 100%{ background-size: 100% 100%; }}
@-moz-keyframes fadeShadowX{ 0%{ background-size: 0% 100%; } 25%{ background-size: 0% 100%; } 100%{ background-size: 100% 100%; }}
@-o-keyframes fadeShadowX{ 0%{ background-size: 0% 100%; } 25%{ background-size: 0% 100%; } 100%{ background-size: 100% 100%; }}
@keyframes fadeShadowX{ 0%{ background-size: 0% 100%; } 25%{ background-size: 0% 100%; } 100%{ background-size: 100% 100%; };
}
lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes fadeShadowY{ 0%{ background-size: 100% 0%; } 25%{ background-size: 100% 0%; } 100%{ background-size: 100% 100%; }}
@-moz-keyframes fadeShadowY{ 0%{ background-size: 100% 0%; } 25%{ background-size: 100% 0%; } 100%{ background-size: 100% 100%; }}
@-o-keyframes fadeShadowY{ 0%{ background-size: 100% 0%; } 25%{ background-size: 100% 0%; } 100%{ background-size: 100% 100%; }}
@keyframes fadeShadowY{ 0%{ background-size: 100% 0%; } 25%{ background-size: 100% 0%; } 100%{ background-size: 100% 100%; };
}
lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes foldOut{ 0%{ max-height: 0px; opacity: 0; } 100% { max-height: 600px; opacity: 1; }}
@-moz-keyframes foldOut{ 0%{ max-height: 0px; opacity: 0; } 100% { max-height: 600px; opacity: 1; }}
@-o-keyframes foldOut{ 0%{ max-height: 0px; opacity: 0; } 100% { max-height: 600px; opacity: 1; }}
@keyframes foldOut{ 0%{ max-height: 0px; opacity: 0; } 100% { max-height: 600px; opacity: 1; };
}
lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes scroll-up{ 0%{ -webkit-transform: translate(0, 25px); opacity: 0; } 100% { -webkit-transform: translate(0, 0); opacity: 1 }}
@-moz-keyframes scroll-up{ 0%{ -moz-transform: translate(0, 25px); opacity: 0; } 100% { -moz-transform: translate(0, 0); opacity: 1 }}
@-o-keyframes scroll-up{ 0%{ -o-transform: translate(0, 25px); opacity: 0; } 100% { -o-transform: translate(0, 0); opacity: 1 }}
@keyframes scroll-up{ 0%{-webkit-transform: translate(0, 25px);-moz-transform: translate(0, 25px);-ms-transform: translate(0, 25px);transform: translate(0, 25px); opacity: 0; } 100% {-webkit-transform: translate(0, 0);-moz-transform: translate(0, 0);-ms-transform: translate(0, 0);transform: translate(0, 0); opacity: 1 };
}
lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes scroll-down{ 0%{ opacity: 0; -webkit-transform: translate(0, -25px); } 100% { opacity: 1; -webkit-transform: translate(0, 0); }}
@-moz-keyframes scroll-down{ 0%{ opacity: 0; -moz-transform: translate(0, -25px); } 100% { opacity: 1; -moz-transform: translate(0, 0); }}
@-o-keyframes scroll-down{ 0%{ opacity: 0; -o-transform: translate(0, -25px); } 100% { opacity: 1; -o-transform: translate(0, 0); }}
@keyframes scroll-down{ 0%{ opacity: 0;-webkit-transform: translate(0, -25px);-moz-transform: translate(0, -25px);-ms-transform: translate(0, -25px);transform: translate(0, -25px); } 100% { opacity: 1;-webkit-transform: translate(0, 0);-moz-transform: translate(0, 0);-ms-transform: translate(0, 0);transform: translate(0, 0); };
}
lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes zoom{ 0%{ background-size: 125% 125%; } 100%{ background-size: 100% 100%; }}
@-moz-keyframes zoom{ 0%{ background-size: 125% 125%; } 100%{ background-size: 100% 100%; }}
@-o-keyframes zoom{ 0%{ background-size: 125% 125%; } 100%{ background-size: 100% 100%; }}
@keyframes zoom{ 0%{ background-size: 125% 125%; } 100%{ background-size: 100% 100%; };
}
lesshat-selector {
  -lh-property: 0; } 
@-webkit-keyframes rethink{ 0%{ background-image: url(../images/rethink-hover.png); margin-right: 0; } 25%{ background-image: url(../images/rethink-hover.png); margin-right: 12px; } 75%{ background-image: url(../images/rethink-hover.png); margin-right: 12px; } 99%{ background-image: url(../images/rethink-hover.png); margin-right: 0; } 100%{ background-image: url(../images/rethink.png); margin-right: 0; }}
@-moz-keyframes rethink{ 0%{ background-image: url(../images/rethink-hover.png); margin-right: 0; } 25%{ background-image: url(../images/rethink-hover.png); margin-right: 12px; } 75%{ background-image: url(../images/rethink-hover.png); margin-right: 12px; } 99%{ background-image: url(../images/rethink-hover.png); margin-right: 0; } 100%{ background-image: url(../images/rethink.png); margin-right: 0; }}
@-o-keyframes rethink{ 0%{ background-image: url(../images/rethink-hover.png); margin-right: 0; } 25%{ background-image: url(../images/rethink-hover.png); margin-right: 12px; } 75%{ background-image: url(../images/rethink-hover.png); margin-right: 12px; } 99%{ background-image: url(../images/rethink-hover.png); margin-right: 0; } 100%{ background-image: url(../images/rethink.png); margin-right: 0; }}
@keyframes rethink{ 0%{ background-image: url(../images/rethink-hover.png); margin-right: 0; } 25%{ background-image: url(../images/rethink-hover.png); margin-right: 12px; } 75%{ background-image: url(../images/rethink-hover.png); margin-right: 12px; } 99%{ background-image: url(../images/rethink-hover.png); margin-right: 0; } 100%{ background-image: url(../images/rethink.png); margin-right: 0; };
}
/* IE11 Snap view hack */
@-ms-viewport {
  width: device-width;
}
html {
  overflow-y: scroll;
}
html,
body {
  width: 100%;
  height: 100%;
}
html.nav-active body,
body.nav-active body,
html.playwheel-active body,
body.playwheel-active body {
  overflow: hidden;
}
@media only screen and (max-width: 880px) {
  html.nav-active,
  body.nav-active {
    overflow: auto;
  }
}
body {
  color: #ffffff;
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  line-height: 1.3em;
}
::selection {
  background: #cccccc;
}
::-moz-selection {
  background: #aaaaaa;
}
a {
  color: #ffffff;
  -webkit-transition: color 0.2s, background 0.25s;
  -moz-transition: color 0.2s, background 0.25s;
  -o-transition: color 0.2s, background 0.25s;
  transition: color 0.2s, background 0.25s;
}
a:hover {
  -webkit-transition: color 0.1s, background 0s;
  -moz-transition: color 0.1s, background 0s;
  -o-transition: color 0.1s, background 0s;
  transition: color 0.1s, background 0s;
}
/* Firefox icon rendering fix */
i {
  -moz-osx-font-smoothing: grayscale !important;
}
[ng-cloak] {
  display: none;
}
.wrapper {
  overflow: hidden;
}
@media only screen and (max-width: 880px) {
  .mobileMenuActive {
    display: none;
  }
}
.center {
  padding-top: 112px;
  padding-bottom: 112px;
  margin: 0 auto;
  clear: both;
  position: relative;
  max-width: 990px;
  padding-left: 10px;
  padding-right: 10px;
}
@media only screen and (max-width: 43em) {
  .center {
    height: 100%;
    width: 100%;
    padding: 0;
  }
}
.center__left {
  width: 300px;
  float: left;
  position: -webkit-sticky;
}
@media only screen and (max-width: 43em) {
  .center__left {
    float: none;
    width: 100%;
    height: 298px;
    max-width: auto;
  }
}
.center__right {
  margin-left: 310px;
}
@media only screen and (max-width: 43em) {
  .center__right {
    width: 100%;
    float: none;
    margin-left: 0;
    margin-top: -1px;
  }
}
.center:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
.tracking-pixel {
  position: absolute;
  top: 0;
}
@media only screen and (max-width: 880px) {
  .iOs-active {
    top: 92px;
  }
}
.nav {
  width: 100%;
  height: 68px;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  position: fixed;
  z-index: 10;
  top: 0;
  -webkit-animation: scroll-down 0.25s ease-out;
  -moz-animation: scroll-down 0.25s ease-out;
  -o-animation: scroll-down 0.25s ease-out;
  animation: scroll-down 0.25s ease-out;
  background: rgba(34, 34, 34, 0.96);
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
}
@media only screen and (max-width: 880px) {
  .nav {
    position: relative;
  }
  .nav .menuOpen {
    display: block;
  }
  .nav .menuClosed {
    display: none;
  }
}
@media only screen and (max-width: 43em) {
  .nav {
    background: none;
    position: relative;
  }
  .nav .menuOpen {
    display: block;
  }
  .nav .menuClosed {
    display: none;
  }
}
@media (max-width: 880px) and (min-width: 43em) {
  .nav {
    position: fixed;
  }
}
.nav__logo {
  -webkit-animation: scroll-down 0.1s ease-out;
  -moz-animation: scroll-down 0.1s ease-out;
  -o-animation: scroll-down 0.1s ease-out;
  animation: scroll-down 0.1s ease-out;
  margin-top: 20.4px;
  margin-left: 24px;
  margin-right: 12px;
  float: left;
}
.nav__logo img {
  width: 150px;
}
@media only screen and (max-width: 880px) {
  .nav__logo {
    display: none;
  }
}
.nav__mobile {
  display: none;
  color: #555555;
  font-size: 48px;
  background: #222222;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: auto;
  position: relative;
}
.nav__mobile .icon-menu {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  float: left;
  margin-top: 5px;
  margin-left: 12px;
  font-size: 60px;
  cursor: pointer;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}
.nav__mobile .icon-menu:before {
  content: "\e012";
}
.nav__mobile .icon-menu:hover {
  color: #ffffff;
}
.nav__mobile .menuOn {
  color: #ffffff;
}
.nav__mobile .menuOff {
  color: #555555;
}
@media only screen and (max-width: 880px) {
  .nav__mobile {
    display: block;
  }
  .nav__mobile__ios {
    height: 92px;
    width: 100%;
    background: #eaeaea;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .nav__mobile__ios a {
    text-decoration: none;
  }
  .nav__mobile__ios img {
    position: absolute;
    height: 75px;
    bottom: 0;
    margin-left: 24px;
  }
  .nav__mobile__ios--close {
    position: absolute;
    right: 0;
    top: 0;
    color: #aaaaaa;
    display: block;
    cursor: pointer;
    height: 50px;
    width: 50px;
  }
  .nav__mobile__ios--close i {
    font-family: "icons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    display: block;
    cursor: pointer;
  }
  .nav__mobile__ios--close i:before {
    content: "\e01e";
  }
  .nav__mobile__ios__textbox {
    font-size: 12px;
    padding-top: 30px;
    margin-left: 108px;
  }
  .nav__mobile__ios__textbox--title {
    font-weight: 400;
    width: 100%;
    display: inline;
    font-size: 16px;
    padding-bottom: 8px;
    color: #222222;
  }
  .nav__mobile__ios__textbox--subtitle {
    width: 100%;
    display: inline;
    font-size: 14px;
    color: #aaaaaa;
  }
  .nav__mobile__ios__textbox--arrow {
    font-family: "icons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
  }
  .nav__mobile__ios__textbox--arrow:before {
    content: "\e028";
  }
  .nav__mobile__wrap {
    height: 68px;
    width: 100%;
    display: block;
  }
  .nav__mobile__wrap--disc {
    display: block;
    height: 100%;
    width: 44px;
    padding-top: 18px;
    margin-right: 22px;
    cursor: pointer;
    text-align: center;
    border-radius: 2px;
    float: right;
  }
  .nav__mobile__wrap--disc img {
    width: 32px;
    height: 32px;
  }
  .nav__mobile__wrap--disc .nav__mobile__wrap--list {
    padding-top: 19.5px;
  }
  .nav__mobile__wrap--disc .nav__mobile__wrap--list img {
    width: 29px;
    height: 29px;
  }
  .nav__mobile .nav__logo {
    display: block;
    margin-top: 20.4px;
    position: absolute;
    left: 50%;
    margin-left: 0;
    margin-right: 0;
    margin-left: -75px;
  }
}
@media only screen and (max-width: 880px) {
  .nav .mobileMenuBackground {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background: #222222;
  }
}
.nav__cities {
  -webkit-animation: scroll-down 0.1s ease-out;
  -moz-animation: scroll-down 0.1s ease-out;
  -o-animation: scroll-down 0.1s ease-out;
  animation: scroll-down 0.1s ease-out;
  margin-top: 21.6px;
}
.nav__cities .about {
  display: none;
}
@media only screen and (max-width: 880px) {
  .nav__cities {
    margin: 0;
    height: auto;
    width: 100%;
    display: none;
    position: absolute;
    top: 68px;
    z-index: 10;
    margin-bottom: 20px;
  }
  .nav__cities .my22 {
    display: none;
  }
  .nav__cities .about {
    display: block;
  }
  .nav__cities .about a {
    text-decoration: none;
  }
}
@media (max-width: 880px) and (min-width: 43em) {
  .nav__cities {
    height: 1000%;
    overflow: scroll;
  }
}
.nav__cities__single {
  display: inline-block;
  text-transform: uppercase;
  margin-left: 12px;
}
@media only screen and (max-width: 880px) {
  .nav__cities__single {
    display: block;
    margin: 0 27px 0 27px;
    padding-top: 20px;
  }
  .nav__cities__single:first-child {
    padding-top: 0;
  }
}
.nav__cities__single .nav__city-link {
  display: inline-block;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 12px 3px 12px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.15);
  font-size: 11px;
  letter-spacing: 0.5px;
  font-weight: 500;
  cursor: pointer;
}
.nav__cities__single .nav__city-link.active {
  color: #ffffff;
  border-bottom: solid 1px #ffffff;
}
@media only screen and (max-width: 880px) {
  .nav__cities__single .nav__city-link.active {
    border-bottom: solid 1px rgba(255, 255, 255, 0.25);
  }
}
@media only screen and (max-width: 880px) {
  .nav__cities__single .nav__city-link.active.activeMobile {
    border-bottom: solid 1px #ffffff;
  }
  .nav__cities__single .nav__city-link.active.activeMobile:after {
    font-family: "icons";
    speak: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    right: 0;
    font-size: 48px;
    font-weight: normal;
  }
  .nav__cities__single .nav__city-link.active.activeMobile:after:before {
    content: "\e011";
  }
}
.nav__cities__single .nav__city-link:hover {
  color: #ffffff;
}
@media only screen and (max-width: 880px) {
  .nav__cities__single .nav__city-link {
    width: 100%;
    padding: 0 0 20px 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    position: relative;
  }
  .nav__cities__single .nav__city-link:after {
    font-family: "icons";
    speak: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    right: 0;
    font-weight: normal;
  }
  .nav__cities__single .nav__city-link:after:before {
    content: "\e00c";
  }
}
.nav__cities__single .mobileAnimation {
  -webkit-animation: scroll-up 0.15s ease-out;
  -moz-animation: scroll-up 0.15s ease-out;
  -o-animation: scroll-up 0.15s ease-out;
  animation: scroll-up 0.15s ease-out;
}
.nav__cities__single__foldout {
  position: fixed;
  display: block;
  top: 68px;
  bottom: 68px;
  left: 0;
  width: 100%;
  z-index: 10;
  background: rgba(34, 34, 34, 0.96);
  overflow: hidden;
  -webkit-transform: translateZ(0px);
  -moz-transform: translateZ(0px);
  -o-transform: translateZ(0px);
  -ms-transform: translateZ(0px);
  transform: translateZ(0px);
}
@media only screen and (max-width: 880px) {
  .nav__cities__single__foldout {
    position: relative;
    background: none;
    top: 0;
    left: 0;
  }
}
.nav__cities__single__foldout__submenu {
  -webkit-animation: scroll-down 0.15s ease-out;
  -moz-animation: scroll-down 0.15s ease-out;
  -o-animation: scroll-down 0.15s ease-out;
  animation: scroll-down 0.15s ease-out;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.nav .iOs-menu-active {
  top: 164px;
}
.nav .brandedActive {
  padding-left: 174px;
}
@media only screen and (max-width: 880px) {
  .nav .brandedActive {
    padding-left: 0;
  }
}
.nav__genres {
  display: block;
  margin-bottom: 12px;
}
.nav__genres--channels {
  -webkit-animation: scroll-down 0.3s ease-out;
  -moz-animation: scroll-down 0.3s ease-out;
  -o-animation: scroll-down 0.3s ease-out;
  animation: scroll-down 0.3s ease-out;
}
@media only screen and (max-width: 880px) {
  .nav__genres--channels {
    border-bottom: none;
    margin-bottom: 0;
  }
  .nav__genres--channels:first-child {
    padding-top: 12px;
  }
}
.nav__genres--channels li {
  margin-bottom: 18px;
}
@media only screen and (max-width: 880px) {
  .nav__genres--channels li {
    margin-bottom: 0;
  }
}
.nav__genres__single {
  width: 150px;
  vertical-align: top;
  display: inline-block;
  margin: 0 0 12px 24px;
  -ms-word-break: keep-all;
  word-break: keep-all;
}
.nav__genres__single--genre {
  height: 56px;
}
.nav__genres__single a {
  text-decoration: none;
  display: block;
  text-transform: none;
}
.nav__genres__single a:hover .nav__genres__single--dj {
  color: #cccccc;
}
.nav__genres__single--image {
  display: block;
  width: 100%;
  height: 69px;
  margin-bottom: 8px;
  background: #222222;
}
.nav__genres__single--image div {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-position: center;
}
@media only screen and (max-width: 880px) {
  .nav__genres__single--image {
    display: none;
  }
}
.nav__genres__single--title {
  font-size: 14px;
  font-weight: 400;
  word-break: normal;
}
.nav__genres__single--title__tip {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.nav__genres__single--title__tip:before {
  content: "\e01d";
}
.nav__genres__single--title__top {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.nav__genres__single--title__top:before {
  content: "\e018";
}
.nav__genres__single--title__top,
.nav__genres__single--title__tip {
  font-size: 2.5em;
  line-height: 0.5;
  margin: 0 -0.1em 0 -0.3em;
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.nav__genres__single--dj {
  color: #aaaaaa;
  font-size: 12px;
  font-weight: 300;
  display: block;
  line-height: 16px;
  padding-top: 3px;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}
@media only screen and (max-width: 880px) {
  .nav__genres__single {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px;
    overflow: hidden;
  }
}
.nav__branded {
  float: left;
  width: 150px;
  vertical-align: top;
  display: block;
  margin: 0 0 24px 24px;
  -ms-word-break: break-all;
  word-break: break-all;
}
.nav__branded a {
  text-decoration: none;
  display: block;
  text-transform: none;
}
.nav__branded--image {
  display: block;
  width: 100%;
  height: 69px;
  margin-bottom: 8px;
  background: #222222;
}
.nav__branded--image div {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-position: center;
}
@media only screen and (max-width: 880px) {
  .nav__branded--image {
    display: none;
  }
}
.nav__branded--title {
  font-size: 14px;
  font-weight: 400;
  word-break: normal;
}
@media only screen and (max-width: 880px) {
  .nav__branded {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 24px 0 12px 12px;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
  }
}
.nav__button-group {
  float: left;
  display: block;
  height: 44px;
  font-size: 0;
}
.nav__button-group--right {
  position: absolute;
  top: 0;
  right: 24px;
}
@media only screen and (max-width: 880px) {
  .nav__button-group--right {
    display: none;
  }
}
.nav__button {
  display: inline-block;
  height: 100%;
  width: 44px;
  margin: 12px 0 0 12px;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  border-radius: 2px;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
  color: #fff;
  font-size: 44px;
  line-height: 42px;
}
.nav__button--less {
  margin-left: 7px;
}
.nav__button:hover {
  color: rgba(255, 255, 255, 0.65);
  -webkit-transition: color 0.1s;
  -moz-transition: color 0.1s;
  -o-transition: color 0.1s;
  transition: color 0.1s;
}
.nav__button.active {
  color: #ffffff;
  background-color: rgba(34, 34, 34, 0.96);
}
.nav__button--disc {
  width: 34px;
  position: relative;
  top: 2px;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
@media only screen and (max-width: 750px) {
  .nav__button--disc {
    display: none;
  }
}
.nav__button--disc img {
  width: 26px;
  height: 26px;
}
.nav__button--disc:hover {
  opacity: 0.65;
}
.nav__button .icon-disc {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  color: rgba(255, 255, 255, 0.4);
}
.nav__button .icon-disc:before {
  content: "\e021";
}
.nav__button .icon-disc.active {
  color: #ffffff;
}
.nav__button .icon-my22-settings {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  position: relative;
  top: -1px;
}
.nav__button .icon-my22-settings:before {
  content: "\e01f";
}
#rethink-spacer {
  display: inline-block;
  margin-left: 22px;
  float: right;
  margin-top: 16px;
  width: 90px;
  height: 40px;
}
#ief-trigger-slideout-logo {
  display: none;
}
@media only screen and (max-width: 43em) {
  #rethink-spacer,
  #ief-trigger,
  #ief-peek {
    display: none;
  }
}
body.iOs-wheel-active #rethink-spacer,
body.iOs-wheel-active #ief-trigger,
body.iOs-wheel-active #ief-peek {
  display: none;
}
@media only screen and (min-width: 43em) {
  .genre .center__left {
    -webkit-animation: scroll-up 0.2s ease-out;
    -moz-animation: scroll-up 0.2s ease-out;
    -o-animation: scroll-up 0.2s ease-out;
    animation: scroll-up 0.2s ease-out;
  }
}
@media only screen and (min-width: 43em) {
  .genre .center__right {
    -webkit-animation: scroll-up 0.2s ease-out;
    -moz-animation: scroll-up 0.2s ease-out;
    -o-animation: scroll-up 0.2s ease-out;
    animation: scroll-up 0.2s ease-out;
  }
}
.genre .center__right--mobile {
  display: none;
}
@media only screen and (max-width: 43em) {
  .genre .center__right--mobile {
    background-color: #eaeaea;
    height: 152px;
    display: block;
  }
}
.genre .iOs-menu-active {
  margin-bottom: 100px;
}
@media only screen and (min-width: 43em) {
  .genre--topmargin {
    margin-top: 30%;
    margin-top: 66vh;
    padding-top: 0;
    -webkit-transition: margin 0.5s;
    -moz-transition: margin 0.5s;
    -o-transition: margin 0.5s;
    transition: margin 0.5s;
  }
}
.genre--zero-topmargin {
  display: none;
}
.info {
  width: 100%;
  background: #ffffff;
  color: #222222;
  -webkit-transform: translateZ(0px);
  -moz-transform: translateZ(0px);
  -o-transform: translateZ(0px);
  -ms-transform: translateZ(0px);
  transform: translateZ(0px);
}
@media only screen and (max-width: 43em) {
  .info {
    position: relative;
    background-color: #eaeaea;
  }
}
@media only screen and (min-width: 43em) {
  .info {
    -webkit-animation: fade 0.25s linear;
    -moz-animation: fade 0.25s linear;
    -o-animation: fade 0.25s linear;
    animation: fade 0.25s linear;
  }
}
.info__portrait {
  display: block;
  width: 100%;
  height: 140px;
  position: relative;
  background-color: #eaeaea;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.info__portrait:hover {
  opacity: 0.8;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
@media only screen and (max-width: 43em) {
  .info__portrait {
    width: 100%;
    top: 77.5px;
    height: 220px;
  }
}
.info__portrait div {
  width: 100%;
  height: 100%;
  background-position: 50% 0;
  background-size: cover;
}
.info__portrait:after {
  display: block;
  content: " ";
  width: 100%;
  height: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  position: absolute;
  top: 0;
  left: 0;
}
.info__description {
  position: relative;
  padding: 22.5px;
  overflow: auto;
  font-size: 12px;
  color: #222222;
  background: #ffffff;
}
@media only screen and (max-width: 43em) {
  .info__description {
    position: absolute;
    top: 0;
    background-color: #eaeaea;
    width: 100%;
    text-align: center;
    padding-bottom: 0;
  }
}
.info__description ul {
  list-style: inherit;
  list-style-position: inside;
}
.info__description--text a {
  border-bottom: solid 1px #cccccc;
}
@media only screen and (max-width: 43em) {
  .info__description--text {
    display: none;
  }
}
.info__description a {
  color: #222222;
  text-decoration: none;
  cursor: pointer;
}
.info__description a:hover {
  text-decoration: none;
  color: rgba(34, 34, 34, 0.4);
}
.info__description h2 {
  color: #222222;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2em;
}
.info__description__langSwitch {
  border-top: solid 1px #ededed;
  margin-top: 24px;
  padding-top: 12px;
}
@media only screen and (max-width: 43em) {
  .info__description__langSwitch {
    display: none;
  }
}
.info__description__langSwitch ul li {
  display: inline;
  padding-right: 12px;
}
.info__description__langSwitch ul li .active {
  color: #cccccc;
}
.info__description__days-left {
  border-top: solid 1px #ededed;
  margin-top: 24px;
  padding-top: 12px;
}
.info__description__days-left .icon {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  color: #aaaaaa;
  margin-right: .3em;
}
.info__description__days-left .icon:before {
  content: "\e020";
}
.info__description__days-left .urgent {
  color: #da6a52;
}
@media only screen and (max-width: 43em) {
  .info__description__days-left {
    display: none;
  }
}
.info__description__social {
  background: #fafafa;
  border-top: solid 1px #f4f4f4;
  padding: 12px;
  padding-left: 22.5px;
}
.info__description__social ul li {
  display: inline-block;
  margin-left: 2px;
}
.info__description__social ul li:first-child {
  margin-left: 0;
}
.info__description__social ul li a {
  text-decoration: none;
  color: #aaaaaa;
}
.info__description__social ul li a i {
  display: inline-block;
  padding: 6px;
  padding-bottom: 5px;
  padding-top: 7px;
  background: #f3f3f3;
  border: solid 1px #ededed;
  border-radius: 2px;
  transition: background 0.1s;
}
.info__description__social ul li a i:hover {
  color: #aaaaaa;
  background: #ededed;
}
.info__description__social ul li a .icon-homepage {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.info__description__social ul li a .icon-homepage:before {
  content: "\e016";
}
.info__description__social ul li a .icon-facebook {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.info__description__social ul li a .icon-facebook:before {
  content: "\e019";
}
.info__description__social ul li a .icon-twitter {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.info__description__social ul li a .icon-twitter:before {
  content: "\e005";
}
@media only screen and (max-width: 43em) {
  .info__description__social {
    display: none;
  }
}
.info__description__top22cities {
  margin-top: 12px;
}
@media only screen and (max-width: 43em) {
  .info__description__top22cities {
    display: none;
  }
}
.info__description__top22cities a {
  border-bottom: solid 1px #cccccc;
}
.info__description .button-list {
  border-top: solid 1px #ededed;
  margin-top: 24px;
  padding: 0;
  padding-top: 12px;
}
.info__description .button-list li {
  list-style: none;
  margin: 0;
}
.info__description .button-list a {
  color: #fff;
}
.info__subtitle {
  color: #222222;
  font-size: 14px;
  margin-top: 0.15em;
  margin-bottom: 1.35em;
  font-size: 12px;
  font-weight: 400;
}
@media only screen and (max-width: 43em) {
  .info__subtitle {
    margin-bottom: 0;
  }
}
.info__album {
  color: #222222;
  font-size: 14px;
  margin-top: 0.15em;
  margin-bottom: 1.35em;
  font-size: 12px;
  font-weight: 400;
  color: #aaaaaa;
}
.ad--rectangle {
  margin-top: 10px;
}
@media only screen and (max-width: 43em) {
  .ad--rectangle {
    display: none;
  }
}
.ad--billboard {
  text-align: center;
  margin-bottom: 10px;
}
.ad--billboard div {
  display: inline-block;
}
@media only screen and (max-width: 43em) {
  .ad--billboard {
    display: none;
  }
}
.withBackground {
  background-color: rgba(34, 34, 34, 0.96);
  padding: 3px;
  padding-left: 22.5px;
  margin-top: 10px;
}
@media only screen and (max-width: 43em) {
  .footerWrap {
    display: none;
  }
}
.footerWrap .footer-links {
  margin: 10px 0;
}
.footerWrap .footer-links li {
  display: inline-block;
}
.footerWrap .footer-links a {
  text-decoration: none;
  font-size: 10px;
  text-transform: uppercase;
  margin-right: 1em;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  letter-spacing: 0.5px;
}
.footerWrap .footer-links a:hover {
  color: #ffffff;
}
.footerWrap .footer-links .icon {
  margin-right: 0.25em;
  position: relative;
  top: 2px;
  font-size: 13px;
  display: inline-block;
  width: 0.5em;
  text-align: center;
  margin-right: 12px;
}
.footerWrap .footer-links .icon:before {
  margin-left: -0.25em;
}
.footerWrap .footer-links .icon-facebook {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.footerWrap .footer-links .icon-facebook:before {
  content: "\e019";
}
.footerWrap .footer-links .icon-twitter {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.footerWrap .footer-links .icon-twitter:before {
  content: "\e005";
}
.playlist {
  color: #222222;
  position: relative;
  list-style: none;
}
@media only screen and (max-width: 43em) {
  .playlist {
    padding-bottom: 68px;
  }
}
.playlist__track {
  position: relative;
  background: #ffffff;
  -webkit-transition: margin 0.2s;
  -moz-transition: margin 0.2s;
  -o-transition: margin 0.2s;
  transition: margin 0.2s;
}
.playlist__track.dragging {
  position: absolute;
  z-index: 10;
  width: 100%;
  margin: 0 10px;
}
.playlist__track--placeholder {
  opacity: 0.8;
  margin: 0 20px;
}
.playlist__track:hover {
  background: #f3f3f3;
}
.playlist__track:nth-child(even) {
  background: #fafafa;
}
.playlist__track:nth-child(even):hover {
  background: #f3f3f3;
}
.playlist .track-link {
  display: block;
  height: 100%;
  text-decoration: none;
  padding: 15px 17px;
  padding-left: 25.5px;
}
.playlist .track-link--unavailable {
  opacity: 0.25;
}
.playlist .active .track-link {
  background-color: rgba(255, 255, 255, 0.8);
}
.playlist__title {
  display: block;
  color: #222222;
  font-size: 14px;
  margin-top: 0.15em;
  margin-right: 190px;
  color: rgba(34, 34, 34, 0.4);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2em;
  margin-top: 0.1em;
}
.playlist__artist {
  display: block;
  color: #222222;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2em;
  margin-top: 0.25em;
}
.playlist__iconSet {
  display: inline;
  background: transparent;
  position: absolute;
  margin: 12px;
  right: 0;
  top: 0;
  line-height: 48px;
}
.playlist__iconSet li {
  display: inline-block;
  vertical-align: middle;
}
.playlist__iconSet__icon {
  font-size: 2.5em;
  text-decoration: none;
  padding-top: 3px;
  display: inline-block;
}
.playlist__iconSet__icon:hover {
  color: #555555;
}
.playlist__iconSet__flame {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  color: #da6a52;
}
.playlist__iconSet__flame:before {
  content: "\e018";
}
@media only screen and (max-width: 43em) {
  .playlist__iconSet__flame {
    display: none;
  }
}
.playlist__iconSet__diamond {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  color: #4982cf;
}
.playlist__iconSet__diamond:before {
  content: "\e01d";
}
@media only screen and (max-width: 43em) {
  .playlist__iconSet__diamond {
    display: none;
  }
}
.playlist__iconSet__my22 {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-size: 2em;
}
.playlist__iconSet__my22:before {
  content: "\e02a";
}
.playlist__iconSet__my22.added,
.playlist__iconSet__my22.added:hover {
  color: #555555;
}
@media only screen and (max-width: 43em) {
  .playlist__iconSet__my22 {
    display: none;
  }
}
.playlist__iconSet__new,
.playlist__iconSet__original-genre {
  font-size: 12px;
  color: #cccccc;
  margin: 12px;
  padding: 0;
  margin-top: 0;
}
.playlist__iconSet__new:hover,
.playlist__iconSet__original-genre:hover {
  color: #cccccc;
}
.playlist__iconSet__new a,
.playlist__iconSet__original-genre a {
  color: #cccccc;
  text-decoration: none;
}
.playlist__iconSet__new a:hover,
.playlist__iconSet__original-genre a:hover {
  color: #555555;
}
.playlist__iconSet__new {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.5px;
}
.my22-explanation {
  background: rgba(34, 34, 34, 0.96);
  padding: 22.5px;
  margin-top: 10px;
}
@media only screen and (max-width: 43em) {
  .my22-explanation {
    display: none;
  }
}
.my22-explanation__inline-icon {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  font-size: 1.8em;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.my22-explanation__inline-icon:before {
  content: "\e02a";
}
.my22-explanation h2 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.5em;
  font-weight: normal;
}
.my22-explanation ul {
  font-size: 12px;
  padding-left: 1em;
  margin-bottom: -0.5em;
}
.my22-explanation ul li {
  color: #ffffff;
  margin-bottom: 0.5em;
}
.my22-explanation ul li:before {
  content: "•";
  display: inline-block;
  margin-left: -1em;
  width: 1em;
  color: rgba(255, 255, 255, 0.4);
}
@media only screen and (max-width: 43em) {
  .mobileHide {
    height: 50px;
    background-color: #eaeaea;
  }
}
li[reorderable=true] {
  touch-action: none;
}
.player {
  -webkit-animation: scroll-up 0.25s ease-out;
  -moz-animation: scroll-up 0.25s ease-out;
  -o-animation: scroll-up 0.25s ease-out;
  animation: scroll-up 0.25s ease-out;
  width: 100%;
  height: 68px;
  background: rgba(34, 34, 34, 0.96);
  color: #ffffff;
  position: fixed;
  bottom: 0;
  right: 0;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
}
@media only screen and (min-width: 43em) {
  .player {
    z-index: 10;
  }
}
.player.minified {
  width: 100%;
}
@media only screen and (max-width: 43em) {
  .player.minified {
    width: 100%;
  }
}
@media only screen and (max-width: 43em) {
  .player.minified .mobileHide {
    display: none !important;
  }
}
.player__button__mobile-group {
  display: none;
}
@media only screen and (max-width: 43em) {
  .player__button__mobile-group {
    display: inline-block;
    text-align: center;
    margin: auto;
    height: 44px;
    width: 100%;
  }
  .player__button__mobile-group .player__button {
    margin-left: 0;
  }
  .player__button__mobile-group .player__button_wrap {
    display: inline-block;
  }
  .player__button__mobile-group .player__button_wrap .playPause {
    margin-left: 12px;
    margin-right: 12px;
  }
  .player__button__mobile-group .share {
    position: absolute;
    left: 12px;
  }
  .player__button__mobile-group .get {
    position: absolute;
    right: 12px;
  }
}
.player__button-group {
  float: left;
  display: block;
  height: 44px;
  font-size: 0;
}
@media only screen and (max-width: 43em) {
  .player__button-group {
    display: none;
  }
}
.player__button-group .facebookWrap {
  opacity: 0.4;
  transition: opacity 0.2s;
  display: inline-block;
  height: 20px;
  bottom: 16px;
  overflow: hidden;
  position: relative;
  margin-left: 12px;
  margin-right: 12px;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}
.player__button-group .facebookWrap:hover {
  opacity: 1;
  transition: opacity 0.2s;
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}
.player__button-group--right {
  float: right;
  margin-right: 6px;
}
@media only screen and (max-width: 43em) {
  .player__button-group--right {
    display: none;
  }
}
.player .disabled {
  opacity: 0.45;
}
.player .blob {
  width: 120px;
}
.player__button {
  display: inline-block;
  height: 100%;
  width: 44px;
  margin-top: 16px;
  margin-left: 6px;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  border-radius: 2px;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
  color: #fff;
  font-size: 36px;
  line-height: 44px;
}
.player__button--less {
  margin-left: 7px;
}
.player__button:hover {
  color: rgba(255, 255, 255, 0.65);
  -webkit-transition: color 0.1s;
  -moz-transition: color 0.1s;
  -o-transition: color 0.1s;
  transition: color 0.1s;
}
.player__button.active {
  color: #ffffff;
  background-color: rgba(34, 34, 34, 0.96);
}
.player__button .icon-play {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.player__button .icon-play:before {
  content: "\e00d";
}
.player__button .icon-pause {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.player__button .icon-pause:before {
  content: "\e00e";
}
.player__button .icon-next {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.player__button .icon-next:before {
  content: "\e017";
}
.player__button .icon-previous {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.player__button .icon-previous:before {
  content: "\e00b";
}
.player__button .icon-volume {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  margin-left: -7px;
}
.player__button .icon-volume:before {
  content: "\e003";
}
.player__button .icon-volume-medium {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.player__button .icon-volume-medium:before {
  content: "\e001";
}
.player__button .icon-volume-low {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.player__button .icon-volume-low:before {
  content: "\e002";
}
.player__button .icon-volume-mute {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.player__button .icon-volume-mute:before {
  content: "\e000";
}
.player__button .icon-my22 {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  color: rgba(255, 255, 255, 0.4);
}
.player__button .icon-my22:before {
  content: "\e02a";
}
.player__button .icon-my22.added {
  color: #ffffff;
}
.player__button .icon-share {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.player__button .icon-share:before {
  content: "\e00a";
}
.player__button .icon-get {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.player__button .icon-get:before {
  content: "\e00f";
}
.player__button .icon-info {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.player__button .icon-info:before {
  content: "\e015";
}
.player__progress {
  -webkit-animation: fade 0.5s;
  -moz-animation: fade 0.5s;
  -o-animation: fade 0.5s;
  animation: fade 0.5s;
  display: block;
  position: absolute;
  touch-action: none;
  left: 218px;
  right: 324px;
  height: 100%;
}
@media only screen and (max-width: 850px) {
  .player__progress {
    display: none;
  }
}
.player__progress__time {
  position: absolute;
  bottom: 12px;
  line-height: 1em;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.player__progress__time--current {
  left: 0;
}
.player__progress__time--duration {
  right: 0;
}
.player__progress__waves {
  width: 100%;
  height: 50%;
  padding-bottom: 2px;
  cursor: pointer;
  overflow: hidden;
}
.player__progress__waves canvas {
  position: absolute;
  bottom: 37px;
  left: 0;
  opacity: 0.3;
  -webkit-transition: height 0.75s ease-out;
  -moz-transition: height 0.75s ease-out;
  -o-transition: height 0.75s ease-out;
  transition: height 0.75s ease-out;
  height: 0;
}
.player__progress__waves canvas.visible {
  height: 34px;
}
.player__progress__waves .wave--front {
  opacity: 0.6;
}
.player__progress__waves .wave-back-container {
  width: 0px;
  overflow: hidden;
  height: 100%;
  position: absolute;
  -webkit-transition: width 0.125s;
  -moz-transition: width 0.125s;
  -o-transition: width 0.125s;
  transition: width 0.125s;
}
.player__progress__waves .wave-buffered {
  width: 0px;
  position: absolute;
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  -webkit-transition: width 0.125s;
  -moz-transition: width 0.125s;
  -o-transition: width 0.125s;
  transition: width 0.125s;
  height: 50%;
  top: 0;
  left: 0;
}
.player__progress__waves .wave-buffered--waiting {
  width: 100%;
  border-color: rgba(255, 255, 255, 0.3);
}
.player__progress__title {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 12px;
  line-height: 1em;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: #ffffff;
  text-decoration: none;
  padding: 0 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.player__progress__title:hover {
  color: rgba(255, 255, 255, 0.4);
}
.foldout {
  box-sizing: border-box;
  position: absolute;
  bottom: 68px;
  max-width: 180px;
  width: 100%;
  max-height: 600px;
}
.foldout__container {
  -webkit-animation: foldOut 0.15s ease-out;
  -moz-animation: foldOut 0.15s ease-out;
  -o-animation: foldOut 0.15s ease-out;
  animation: foldOut 0.15s ease-out;
  overflow: hidden;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(34, 34, 34, 0.04);
  border-bottom: 0;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}
.foldout__container .info__description__social {
  border-top: none;
  border-bottom: solid 1px #f4f4f4;
}
.foldout__container--tooltip {
  color: #222222;
  padding: 15px 17px;
  text-align: center;
  font-size: 14px;
}
.foldout:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #ffffff;
  bottom: -4px;
  position: absolute;
}
@media only screen and (max-width: 43em) {
  .foldout:after {
    display: none;
  }
}
.foldout--right-5 {
  right: 135.5px;
}
.foldout--right-5:after {
  right: 87.5px;
}
.foldout--left-5 {
  left: 197.5px;
}
.foldout--left-5:after {
  left: 25.5px;
}
.foldout--right-4 {
  right: 85.5px;
}
.foldout--right-4:after {
  right: 87.5px;
}
.foldout--left-4 {
  left: 147.5px;
}
.foldout--left-4:after {
  left: 25.5px;
}
.foldout--right-3 {
  right: 35.5px;
}
.foldout--right-3:after {
  right: 87.5px;
}
.foldout--left-3 {
  left: 97.5px;
}
.foldout--left-3:after {
  left: 25.5px;
}
.foldout--right-2 {
  border-right: none;
  right: 0;
}
.foldout--right-2:after {
  right: 73px;
}
.foldout--left-2 {
  left: 47.5px;
}
.foldout--left-2:after {
  left: 25.5px;
}
.foldout--right-1 {
  border-right: none;
  right: 0;
}
.foldout--right-1:after {
  right: 23px;
}
.foldout--left-1 {
  border-left: none;
  left: 0;
}
.foldout--left-1:after {
  right: 23px;
}
.foldout--right-1 {
  max-width: 300px;
}
.foldout--left-4 {
  max-width: 56px;
}
@media only screen and (max-width: 43em) {
  .foldout .info {
    display: none;
  }
}
.foldout .info__description {
  max-height: 350px;
  -webkit-user-select: text;
  /* Chrome all / Safari all */
  -moz-user-select: text;
  /* Firefox all */
  -ms-user-select: text;
  /* IE 10+ */
}
@media only screen and (max-width: 43em) {
  .minified .foldout--right-2:after {
    right: 25px;
  }
}
@media only screen and (min-width: 43em) {
  .foldout--right-3 {
    max-width: 100%;
    width: 434px;
    right: 0;
  }
  .foldout--right-3:after {
    right: 125.5px;
  }
  .foldout--right-3 .foldout__container {
    padding: 15px 17px;
    height: 400px;
    overflow-y: scroll;
  }
}
@media only screen and (max-width: 43em) {
  .foldout--right-3 {
    position: absolute;
    left: 0;
  }
  .foldout--right-3 .fb-comments {
    display: none;
  }
}
.foldout--left-4:after {
  left: 23px;
}
.button-list {
  padding: 25.5px;
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(34, 34, 34, 0.4);
  /* Free download */
  /* iTunes */
  /* 7Digital */
}
.button-list h2 {
  margin-bottom: 7.5px;
  color: #222222;
  font-weight: 400;
  font-size: 12px;
  text-transform: none;
}
.button-list li input {
  display: block;
  text-align: center;
  padding: 5px;
  padding-right: 0;
  margin-top: 3.75px;
  text-decoration: none;
  border: solid 1px #cccccc;
  border-radius: 2px;
  font-weight: normal;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  height: 28px;
  color: #aaaaaa;
}
.button-list li a {
  display: block;
  background: #222222;
  text-align: center;
  padding: 3.75px 0;
  margin-top: 3.75px;
  text-decoration: none;
  border-radius: 2px;
  letter-spacing: 0.5px;
  font-weight: 400;
  cursor: pointer;
  opacity: 0.99;
}
.button-list li a:hover {
  opacity: 0.85;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.button-list .button-list__button--facebook a {
  background: #50649c;
}
.button-list .button-list__button--twitter a {
  background: #64bcd7;
}
.button-list .button-list__button--deezer a {
  background: #e463a7;
}
.button-list .button-list__button--spotify a {
  background: #afca52;
}
.button-list .button-list__button--xbox a {
  background: #478e4d;
}
.button-list .button-list__button--beatport a {
  background: #9ecc11;
}
.button-list .button-list__button--shop1 a {
  background: #bb533e;
}
.button-list .button-list__button--shop2 a {
  background: #bebebe;
}
.button-list .button-list__button--shop4 a {
  background: #4d77b2;
}
.button-list + .button-list {
  padding-top: 0;
}
@media only screen and (min-width: 43em) {
  .button-list--horizontal {
    padding: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #f4f4f4;
  }
  .button-list--horizontal li,
  .button-list--horizontal li a,
  .button-list--horizontal li input {
    display: inline-block;
  }
  .button-list--horizontal li a {
    padding-left: 17px;
    padding-right: 17px;
    vertical-align: middle;
    margin-left: 3px;
  }
  .button-list--horizontal li input {
    width: 198px;
  }
}
.volume-slider {
  height: 100px;
  position: relative;
  margin: 25px 17px;
  cursor: pointer;
  touch-action: none;
}
.volume-slider__rail {
  position: absolute;
  height: 100%;
  width: 50%;
  border-right: 3px solid rgba(34, 34, 34, 0.04);
  top: 0;
  bottom: 6px;
  left: 1.5px;
}
.volume-slider__handle {
  width: 100%;
  border-top: 3px solid #ffffff;
  position: relative;
  bottom: 0;
  left: 0;
  overflow: visible;
}
.volume-slider__handle:after {
  content: " ";
  display: block;
  height: 1000px;
  margin-top: -500px;
}
.volume-slider__handle:before {
  content: " ";
  border-radius: 50%;
  border: 3px solid #222222;
  width: 12px;
  height: 12px;
  position: absolute;
  left: 50%;
  margin-left: -6px;
  margin-top: -6px;
}
.volume-slider__handle.dragging:before,
.volume-slider__handle:hover:before {
  border-color: #222222;
}
.visualiserToggle {
  position: fixed;
  bottom: 80px;
  left: 12px;
  background: rgba(34, 34, 34, 0.96);
  height: 45px;
  width: auto;
  text-align: center;
  border-radius: 2px;
  padding-right: 6px;
}
.visualiserToggle .playlist-toggle {
  padding-right: 22px;
  font-size: 11px;
  letter-spacing: 0.5px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: left;
  margin: 0;
  display: inline-block;
  width: auto;
  height: 100%;
}
.visualiserToggle .playlist-toggle div {
  display: inline-block;
}
.visualiserToggle .playlist-toggle .check {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  font-size: 44px;
  display: inline-block;
  vertical-align: middle;
  margin-left: -6px;
}
.visualiserToggle .playlist-toggle .check:before {
  content: "\e022";
}
.visualiserToggle .playlist-toggle .uncheck {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  font-size: 44px;
  display: inline-block;
  vertical-align: middle;
  margin-left: -6px;
}
.visualiserToggle .playlist-toggle .uncheck:before {
  content: "\e004";
}
.visualiserToggle .blob i {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.visualiserToggle .blob i:before {
  content: "\e026";
}
.visualiserToggle .disc {
  border-right: 1px solid #555555;
  padding-right: 6px;
}
.visualiserToggle .disc i {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.visualiserToggle .disc i:before {
  content: "\e01c";
}
.visualiserToggle .lines {
  margin-left: 0;
}
.visualiserToggle .lines i {
  font-family: "icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.visualiserToggle .lines i:before {
  content: "\e014";
}
.visualiserToggle .blob,
.visualiserToggle .disc,
.visualiserToggle .lines {
  margin-top: 0;
}
.visualiserToggle .blob i,
.visualiserToggle .disc i,
.visualiserToggle .lines i {
  line-height: 44px;
}
.visualiserToggle .blob.disabled,
.visualiserToggle .disc.disabled,
.visualiserToggle .lines.disabled {
  color: rgba(255, 255, 255, 0.4);
}
@media only screen and (max-width: 43em) {
  .visualiserToggle {
    display: none;
  }
}
.discGenreInfo {
  height: 68px;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: 100;
}
.discGenreInfo--djImage {
  display: inline-block;
}
.discGenreInfo--djImage img {
  height: 68px;
  width: auto;
}
@media only screen and (max-width: 880px) {
  .discGenreInfo--djImage {
    display: none;
  }
}
.discGenreInfo--infoWrap {
  height: 68px;
  display: inline-block;
  margin-left: 15px;
  vertical-align: top;
  margin-top: 16px;
}
.discGenreInfo--city {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.discGenreInfo--genre {
  font-size: 16px;
}
@media only screen and (max-width: 43em) {
  .discGenreInfo {
    display: none;
  }
}
.minifiedIos {
  width: 100% !important;
}
.foldout--right-5 {
  max-width: 56px;
  right: 304px;
}
.foldout--right-5:after {
  left: 50%;
  margin-left: -5px;
}
.modal {
  position: absolute;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}
.modal__frame {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #ffffff;
  width: 100%;
  max-width: 290px;
  height: 350px;
  -webkit-animation: scroll-up 0.2s ease-out;
  -moz-animation: scroll-up 0.2s ease-out;
  -o-animation: scroll-up 0.2s ease-out;
  animation: scroll-up 0.2s ease-out;
}
.modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(34, 34, 34, 0.96);
}
.playwheel {
  -webkit-animation: scroll-up 0.2s ease-out;
  -moz-animation: scroll-up 0.2s ease-out;
  -o-animation: scroll-up 0.2s ease-out;
  animation: scroll-up 0.2s ease-out;
  position: absolute;
  height: 530px;
  width: 530px;
  left: 50%;
  top: 50%;
  margin-left: -265px;
  margin-top: -265px;
}
@media only screen and (max-width: 530px) {
  .playwheel {
    height: 300px;
    width: 300px;
  }
}
@media only screen and (max-width: 530px) {
  .playwheel {
    position: absolute;
    margin-left: -150px;
    margin-top: -150px;
    top: 50%;
  }
}
.playwheel #playwheel {
  width: 100%;
  height: 100%;
  position: absolute;
  touch-action: none;
}
.playwheel__ui {
  position: absolute;
  height: 200px;
  width: 66%;
  margin-left: 17%;
  top: 50%;
  margin-top: -100px;
  text-align: center;
}
@media only screen and (max-width: 43em) {
  .playwheel__ui #player__button-group--desktop {
    display: none;
  }
}
.playwheel__ui .player__button-group {
  float: none;
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -44.5px;
  height: 78px;
  padding-right: 12px;
}
@media only screen and (max-width: 43em) {
  .playwheel__ui .player__button-group {
    display: block;
  }
}
.playwheel__ui .player__button-group .player__button {
  font-size: 58px;
  line-height: 1.5em;
  width: 66px;
}
.playwheel__ui__blob {
  display: block;
  text-align: center;
  width: 66px;
  height: 66px;
  position: absolute;
  bottom: -100px;
  left: 50%;
  margin-left: -33px;
  margin-top: 150px;
}
.playwheel__ui .playwheel__ui__info span {
  display: block;
  line-height: 1.6em;
}
.playwheel__ui .playwheel__ui__info__artist {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}
.playwheel__ui .playwheel__ui__info__title {
  color: #ffffff;
  font-size: 16px;
}
.playwheel__ui .playwheel__ui__progress {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.playwheel__ui .playwheel__ui__progress span {
  display: inline-block;
  padding: 0.5em 1em;
  width: 120px;
  font-size: 12px;
}
@media only screen and (max-width: 43em) {
  .playwheel__ui .playwheel__ui__progress span {
    width: 60px;
  }
}
.playwheel__ui .playwheel__ui__progress__duration {
  color: #ffffff;
  text-align: left;
}
.playwheel__ui .playwheel__ui__progress__current {
  color: rgba(255, 255, 255, 0.4);
  text-align: right;
  border-right: 1px solid;
}
@media only screen and (max-width: 43em) {
  .playwheel__ui__info {
    display: inline-block;
    position: relative;
    top: 65px;
  }
}
.iOs-wheel-active {
  top: 152px;
}
@media (min-height: 700px) and (max-height: 800px) {
  .ieMobileActive {
    overflow: hidden !important;
  }
}
.visualiser,
#visualiser {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
@media only screen and (max-width: 43em) {
  .visualiser,
  #visualiser {
    display: none;
  }
}
.oldie .hide-on-oldie {
  display: none !important;
}
.oldie body {
  background: #222222;
}
.oldie-notification {
  display: block;
  color: #222222;
  width: 300px;
  height: 230px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -115px;
  margin-left: -150px;
  background: #fafafa;
}
.oldie-notification h1 {
  padding-left: 33px;
  padding-bottom: 12px;
  width: 300px;
  display: block;
  text-align: left;
  line-height: 16px;
  color: #000000;
  font-size: 16px;
  padding-top: 33px;
  font-weight: bold;
  background: #f7f7f7;
  border-bottom: 1px solid #f0f0f0;
}
.oldie-notification #ieMessage {
  padding: 25px 33px;
}
.oldie-notification #ieMessage p {
  font-size: 12px;
  color: #000;
  line-height: 1.6em;
}
.oldie-notification #ieUpdateLink {
  padding: 0 33px;
}
.oldie-notification #ieUpdateLink a {
  display: block;
  background-color: #68B48A;
  padding: 6px 0;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 10px;
}
.softLoad {
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.softLoading {
  opacity: 0;
  -webkit-transition: opacity 0s;
  -moz-transition: opacity 0s;
  -o-transition: opacity 0s;
  transition: opacity 0s;
}
.softLoaded {
  opacity: 1;
}
.wallpaper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-size: 300% 100%;
}
.wallpaper.animated {
  -webkit-transition: background 1s ease-in-out;
  -moz-transition: background 1s ease-in-out;
  -o-transition: background 1s ease-in-out;
  transition: background 1s ease-in-out;
}
.wallpaper__branded {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-position: center center;
}
.wallpaper__branded__click {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.wallpaper--map {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
@media only screen and (max-width: 43em) {
  .wallpaper--map {
    display: none;
  }
}
.wallpaper--map .events-map {
  height: 100%;
}
.wallpaper--map--label {
  position: absolute;
  background: rgba(34, 34, 34, 0.96);
  color: #ffffff;
  padding: 11.25px 22.5px;
  font-size: 12px;
  pointer-events: none;
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 2px;
  font-weight: normal;
  -webkit-animation: scroll-up 0.2s ease-out;
  -moz-animation: scroll-up 0.2s ease-out;
  -o-animation: scroll-up 0.2s ease-out;
  animation: scroll-up 0.2s ease-out;
}
.wallpaper--map--label span {
  display: block;
}
.wallpaper--map--label span.date {
  color: #aaaaaa;
}
.wallpaper--video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.wallpaper--video__wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}
@media screen and (max-aspect-ratio: 9/5) {
  .wallpaper--video__wrapper {
    padding: 0;
    height: 100%;
    width: 1920px;
    position: absolute;
    left: 50%;
    margin-left: -960px;
  }
}
.wallpaper--video #ytvideo {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.wallpaper--video__click {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}
@media only screen and (max-width: 43em) {
  .wallpaper--video {
    display: none;
  }
}
.cover {
  background-repeat: no-repeat;
  background-size: cover;
}
.repeat {
  background-repeat: repeat;
}