.general .navbar-default .navbar-nav li a.active::before {
  border-color: #1db954; }
.general .post-header p,
.general .text-accent,
.general .outer > li > a.active,
.general #secondary-navbar .active {
  color: #1db954; }
.general .bg-accent {
  background-color: #1db954; }
.general .bg-accent:hover {
  background-color: #2bde6a; }
.general.platform-link:focus .bg-accent {
  background-color: #168d40; }
.general.hover-accent:hover, .general.hover-accent:focus,
.general .hover-accent:hover,
.general .hover-accent:focus {
  color: #1db954; }
.general ul.navbar-nav > li > a:hover:hover, .general ul.navbar-nav > li > a:hover:focus,
.general aside a:hover,
.general aside a:focus {
  color: #1db954; }
.general ul.navbar-nav > li > a:hover:active,
.general aside a:active {
  color: #1db954; }

.wrap.general main a {
  color: #1db954; }
  .wrap.general main a:hover, .wrap.general main a:active, .wrap.general main a:focus {
    color: #168d40; }
  .wrap.general main a.btn-primary {
    color: white; }

.navbar-col#general a:hover, .navbar-col#general a:active, .navbar-col#general a:focus {
  color: #1db954; }
@media (min-width: 992px) {
  .navbar-col#general > a:first-of-type {
    color: white; }
    .navbar-col#general > a:first-of-type:hover {
      color: #e6e6e6; }
      .navbar-col#general > a:first-of-type:hover svg * {
        fill: #2bde6a; } }
.navbar-col#general .sub-nav a:hover,
.navbar-col#general .sub-nav a:focus {
  color: #1db954; }
.navbar-col#general svg * {
  fill: #1db954; }

a.general.icon-desc {
  color: #1db954;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500; }
  a.general.icon-desc:hover, a.general.icon-desc:focus {
    color: #2bde6a; }

svg.general * {
  fill: #1db954; }

a:hover svg.general * {
  fill: #2bde6a; }

.web-api .navbar-default .navbar-nav li a.active::before {
  border-color: #f59b23; }
.web-api .post-header p,
.web-api .text-accent,
.web-api .outer > li > a.active,
.web-api #secondary-navbar .active {
  color: #f59b23; }
.web-api .bg-accent {
  background-color: #f59b23; }
.web-api .bg-accent:hover {
  background-color: #f7b154; }
.web-api.platform-link:focus .bg-accent {
  background-color: #db810a; }
.web-api.hover-accent:hover, .web-api.hover-accent:focus,
.web-api .hover-accent:hover,
.web-api .hover-accent:focus {
  color: #f59b23; }
.web-api ul.navbar-nav > li > a:hover:hover, .web-api ul.navbar-nav > li > a:hover:focus,
.web-api aside a:hover,
.web-api aside a:focus {
  color: #f59b23; }
.web-api ul.navbar-nav > li > a:hover:active,
.web-api aside a:active {
  color: #f59b23; }

.wrap.web-api main a {
  color: #f59b23; }
  .wrap.web-api main a:hover, .wrap.web-api main a:active, .wrap.web-api main a:focus {
    color: #db810a; }
  .wrap.web-api main a.btn-primary {
    color: white; }

.navbar-col#web-api a:hover, .navbar-col#web-api a:active, .navbar-col#web-api a:focus {
  color: #f59b23; }
@media (min-width: 992px) {
  .navbar-col#web-api > a:first-of-type {
    color: white; }
    .navbar-col#web-api > a:first-of-type:hover {
      color: #e6e6e6; }
      .navbar-col#web-api > a:first-of-type:hover svg * {
        fill: #f7b154; } }
.navbar-col#web-api .sub-nav a:hover,
.navbar-col#web-api .sub-nav a:focus {
  color: #f59b23; }
.navbar-col#web-api svg * {
  fill: #f59b23; }

a.web-api.icon-desc {
  color: #f59b23;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500; }
  a.web-api.icon-desc:hover, a.web-api.icon-desc:focus {
    color: #f7b154; }

svg.web-api * {
  fill: #f59b23; }

a:hover svg.web-api * {
  fill: #f7b154; }

.ios-app-remote .navbar-default .navbar-nav li a.active::before {
  border-color: #2d46b9; }
.ios-app-remote .post-header p,
.ios-app-remote .text-accent,
.ios-app-remote .outer > li > a.active,
.ios-app-remote #secondary-navbar .active {
  color: #2d46b9; }
.ios-app-remote .bg-accent {
  background-color: #2d46b9; }
.ios-app-remote .bg-accent:hover {
  background-color: #4760d2; }
.ios-app-remote.platform-link:focus .bg-accent {
  background-color: #233690; }
.ios-app-remote.hover-accent:hover, .ios-app-remote.hover-accent:focus,
.ios-app-remote .hover-accent:hover,
.ios-app-remote .hover-accent:focus {
  color: #2d46b9; }
.ios-app-remote ul.navbar-nav > li > a:hover:hover, .ios-app-remote ul.navbar-nav > li > a:hover:focus,
.ios-app-remote aside a:hover,
.ios-app-remote aside a:focus {
  color: #2d46b9; }
.ios-app-remote ul.navbar-nav > li > a:hover:active,
.ios-app-remote aside a:active {
  color: #2d46b9; }

.wrap.ios-app-remote main a {
  color: #2d46b9; }
  .wrap.ios-app-remote main a:hover, .wrap.ios-app-remote main a:active, .wrap.ios-app-remote main a:focus {
    color: #233690; }
  .wrap.ios-app-remote main a.btn-primary {
    color: white; }

.navbar-col#ios-app-remote a:hover, .navbar-col#ios-app-remote a:active, .navbar-col#ios-app-remote a:focus {
  color: #2d46b9; }
@media (min-width: 992px) {
  .navbar-col#ios-app-remote > a:first-of-type {
    color: white; }
    .navbar-col#ios-app-remote > a:first-of-type:hover {
      color: #e6e6e6; }
      .navbar-col#ios-app-remote > a:first-of-type:hover svg * {
        fill: #4760d2; } }
.navbar-col#ios-app-remote .sub-nav a:hover,
.navbar-col#ios-app-remote .sub-nav a:focus {
  color: #2d46b9; }
.navbar-col#ios-app-remote svg * {
  fill: #2d46b9; }

a.ios-app-remote.icon-desc {
  color: #2d46b9;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500; }
  a.ios-app-remote.icon-desc:hover, a.ios-app-remote.icon-desc:focus {
    color: #4760d2; }

svg.ios-app-remote * {
  fill: #2d46b9; }

a:hover svg.ios-app-remote * {
  fill: #4760d2; }

.android-app-remote .navbar-default .navbar-nav li a.active::before {
  border-color: #f037a5; }
.android-app-remote .post-header p,
.android-app-remote .text-accent,
.android-app-remote .outer > li > a.active,
.android-app-remote #secondary-navbar .active {
  color: #f037a5; }
.android-app-remote .bg-accent {
  background-color: #f037a5; }
.android-app-remote .bg-accent:hover {
  background-color: #f466ba; }
.android-app-remote.platform-link:focus .bg-accent {
  background-color: #e3118e; }
.android-app-remote.hover-accent:hover, .android-app-remote.hover-accent:focus,
.android-app-remote .hover-accent:hover,
.android-app-remote .hover-accent:focus {
  color: #f037a5; }
.android-app-remote ul.navbar-nav > li > a:hover:hover, .android-app-remote ul.navbar-nav > li > a:hover:focus,
.android-app-remote aside a:hover,
.android-app-remote aside a:focus {
  color: #f037a5; }
.android-app-remote ul.navbar-nav > li > a:hover:active,
.android-app-remote aside a:active {
  color: #f037a5; }

.wrap.android-app-remote main a {
  color: #f037a5; }
  .wrap.android-app-remote main a:hover, .wrap.android-app-remote main a:active, .wrap.android-app-remote main a:focus {
    color: #e3118e; }
  .wrap.android-app-remote main a.btn-primary {
    color: white; }

.navbar-col#android-app-remote a:hover, .navbar-col#android-app-remote a:active, .navbar-col#android-app-remote a:focus {
  color: #f037a5; }
@media (min-width: 992px) {
  .navbar-col#android-app-remote > a:first-of-type {
    color: white; }
    .navbar-col#android-app-remote > a:first-of-type:hover {
      color: #e6e6e6; }
      .navbar-col#android-app-remote > a:first-of-type:hover svg * {
        fill: #f466ba; } }
.navbar-col#android-app-remote .sub-nav a:hover,
.navbar-col#android-app-remote .sub-nav a:focus {
  color: #f037a5; }
.navbar-col#android-app-remote svg * {
  fill: #f037a5; }

a.android-app-remote.icon-desc {
  color: #f037a5;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500; }
  a.android-app-remote.icon-desc:hover, a.android-app-remote.icon-desc:focus {
    color: #f466ba; }

svg.android-app-remote * {
  fill: #f037a5; }

a:hover svg.android-app-remote * {
  fill: #f466ba; }

.ios-sdk .navbar-default .navbar-nav li a.active::before {
  border-color: #509bf5; }
.ios-sdk .post-header p,
.ios-sdk .text-accent,
.ios-sdk .outer > li > a.active,
.ios-sdk #secondary-navbar .active {
  color: #509bf5; }
.ios-sdk .bg-accent {
  background-color: #509bf5; }
.ios-sdk .bg-accent:hover {
  background-color: #80b7f8; }
.ios-sdk.platform-link:focus .bg-accent {
  background-color: #207ff2; }
.ios-sdk.hover-accent:hover, .ios-sdk.hover-accent:focus,
.ios-sdk .hover-accent:hover,
.ios-sdk .hover-accent:focus {
  color: #509bf5; }
.ios-sdk ul.navbar-nav > li > a:hover:hover, .ios-sdk ul.navbar-nav > li > a:hover:focus,
.ios-sdk aside a:hover,
.ios-sdk aside a:focus {
  color: #509bf5; }
.ios-sdk ul.navbar-nav > li > a:hover:active,
.ios-sdk aside a:active {
  color: #509bf5; }

.wrap.ios-sdk main a {
  color: #509bf5; }
  .wrap.ios-sdk main a:hover, .wrap.ios-sdk main a:active, .wrap.ios-sdk main a:focus {
    color: #207ff2; }
  .wrap.ios-sdk main a.btn-primary {
    color: white; }

.navbar-col#ios-sdk a:hover, .navbar-col#ios-sdk a:active, .navbar-col#ios-sdk a:focus {
  color: #509bf5; }
@media (min-width: 992px) {
  .navbar-col#ios-sdk > a:first-of-type {
    color: white; }
    .navbar-col#ios-sdk > a:first-of-type:hover {
      color: #e6e6e6; }
      .navbar-col#ios-sdk > a:first-of-type:hover svg * {
        fill: #80b7f8; } }
.navbar-col#ios-sdk .sub-nav a:hover,
.navbar-col#ios-sdk .sub-nav a:focus {
  color: #509bf5; }
.navbar-col#ios-sdk svg * {
  fill: #509bf5; }

a.ios-sdk.icon-desc {
  color: #509bf5;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500; }
  a.ios-sdk.icon-desc:hover, a.ios-sdk.icon-desc:focus {
    color: #80b7f8; }

svg.ios-sdk * {
  fill: #509bf5; }

a:hover svg.ios-sdk * {
  fill: #80b7f8; }

.android-sdk .navbar-default .navbar-nav li a.active::before {
  border-color: #f573a0; }
.android-sdk .post-header p,
.android-sdk .text-accent,
.android-sdk .outer > li > a.active,
.android-sdk #secondary-navbar .active {
  color: #f573a0; }
.android-sdk .bg-accent {
  background-color: #f573a0; }
.android-sdk .bg-accent:hover {
  background-color: #f8a3c0; }
.android-sdk.platform-link:focus .bg-accent {
  background-color: #f24380; }
.android-sdk.hover-accent:hover, .android-sdk.hover-accent:focus,
.android-sdk .hover-accent:hover,
.android-sdk .hover-accent:focus {
  color: #f573a0; }
.android-sdk ul.navbar-nav > li > a:hover:hover, .android-sdk ul.navbar-nav > li > a:hover:focus,
.android-sdk aside a:hover,
.android-sdk aside a:focus {
  color: #f573a0; }
.android-sdk ul.navbar-nav > li > a:hover:active,
.android-sdk aside a:active {
  color: #f573a0; }

.wrap.android-sdk main a {
  color: #f573a0; }
  .wrap.android-sdk main a:hover, .wrap.android-sdk main a:active, .wrap.android-sdk main a:focus {
    color: #f24380; }
  .wrap.android-sdk main a.btn-primary {
    color: white; }

.navbar-col#android-sdk a:hover, .navbar-col#android-sdk a:active, .navbar-col#android-sdk a:focus {
  color: #f573a0; }
@media (min-width: 992px) {
  .navbar-col#android-sdk > a:first-of-type {
    color: white; }
    .navbar-col#android-sdk > a:first-of-type:hover {
      color: #e6e6e6; }
      .navbar-col#android-sdk > a:first-of-type:hover svg * {
        fill: #f8a3c0; } }
.navbar-col#android-sdk .sub-nav a:hover,
.navbar-col#android-sdk .sub-nav a:focus {
  color: #f573a0; }
.navbar-col#android-sdk svg * {
  fill: #f573a0; }

a.android-sdk.icon-desc {
  color: #f573a0;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500; }
  a.android-sdk.icon-desc:hover, a.android-sdk.icon-desc:focus {
    color: #f8a3c0; }

svg.android-sdk * {
  fill: #f573a0; }

a:hover svg.android-sdk * {
  fill: #f8a3c0; }

.web-playback-sdk .navbar-default .navbar-nav li a.active::before {
  border-color: #af2896; }
.web-playback-sdk .post-header p,
.web-playback-sdk .text-accent,
.web-playback-sdk .outer > li > a.active,
.web-playback-sdk #secondary-navbar .active {
  color: #af2896; }
.web-playback-sdk .bg-accent {
  background-color: #af2896; }
.web-playback-sdk .bg-accent:hover {
  background-color: #d238b5; }
.web-playback-sdk.platform-link:focus .bg-accent {
  background-color: #851f72; }
.web-playback-sdk.hover-accent:hover, .web-playback-sdk.hover-accent:focus,
.web-playback-sdk .hover-accent:hover,
.web-playback-sdk .hover-accent:focus {
  color: #af2896; }
.web-playback-sdk ul.navbar-nav > li > a:hover:hover, .web-playback-sdk ul.navbar-nav > li > a:hover:focus,
.web-playback-sdk aside a:hover,
.web-playback-sdk aside a:focus {
  color: #af2896; }
.web-playback-sdk ul.navbar-nav > li > a:hover:active,
.web-playback-sdk aside a:active {
  color: #af2896; }

.wrap.web-playback-sdk main a {
  color: #af2896; }
  .wrap.web-playback-sdk main a:hover, .wrap.web-playback-sdk main a:active, .wrap.web-playback-sdk main a:focus {
    color: #851f72; }
  .wrap.web-playback-sdk main a.btn-primary {
    color: white; }

.navbar-col#web-playback-sdk a:hover, .navbar-col#web-playback-sdk a:active, .navbar-col#web-playback-sdk a:focus {
  color: #af2896; }
@media (min-width: 992px) {
  .navbar-col#web-playback-sdk > a:first-of-type {
    color: white; }
    .navbar-col#web-playback-sdk > a:first-of-type:hover {
      color: #e6e6e6; }
      .navbar-col#web-playback-sdk > a:first-of-type:hover svg * {
        fill: #d238b5; } }
.navbar-col#web-playback-sdk .sub-nav a:hover,
.navbar-col#web-playback-sdk .sub-nav a:focus {
  color: #af2896; }
.navbar-col#web-playback-sdk svg * {
  fill: #af2896; }

a.web-playback-sdk.icon-desc {
  color: #af2896;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500; }
  a.web-playback-sdk.icon-desc:hover, a.web-playback-sdk.icon-desc:focus {
    color: #d238b5; }

svg.web-playback-sdk * {
  fill: #af2896; }

a:hover svg.web-playback-sdk * {
  fill: #d238b5; }

.widgets .navbar-default .navbar-nav li a.active::before {
  border-color: #ff4632; }
.widgets .post-header p,
.widgets .text-accent,
.widgets .outer > li > a.active,
.widgets #secondary-navbar .active {
  color: #ff4632; }
.widgets .bg-accent {
  background-color: #ff4632; }
.widgets .bg-accent:hover {
  background-color: #ff7465; }
.widgets.platform-link:focus .bg-accent {
  background-color: #fe1900; }
.widgets.hover-accent:hover, .widgets.hover-accent:focus,
.widgets .hover-accent:hover,
.widgets .hover-accent:focus {
  color: #ff4632; }
.widgets ul.navbar-nav > li > a:hover:hover, .widgets ul.navbar-nav > li > a:hover:focus,
.widgets aside a:hover,
.widgets aside a:focus {
  color: #ff4632; }
.widgets ul.navbar-nav > li > a:hover:active,
.widgets aside a:active {
  color: #ff4632; }

.wrap.widgets main a {
  color: #ff4632; }
  .wrap.widgets main a:hover, .wrap.widgets main a:active, .wrap.widgets main a:focus {
    color: #fe1900; }
  .wrap.widgets main a.btn-primary {
    color: white; }

.navbar-col#widgets a:hover, .navbar-col#widgets a:active, .navbar-col#widgets a:focus {
  color: #ff4632; }
@media (min-width: 992px) {
  .navbar-col#widgets > a:first-of-type {
    color: white; }
    .navbar-col#widgets > a:first-of-type:hover {
      color: #e6e6e6; }
      .navbar-col#widgets > a:first-of-type:hover svg * {
        fill: #ff7465; } }
.navbar-col#widgets .sub-nav a:hover,
.navbar-col#widgets .sub-nav a:focus {
  color: #ff4632; }
.navbar-col#widgets svg * {
  fill: #ff4632; }

a.widgets.icon-desc {
  color: #ff4632;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500; }
  a.widgets.icon-desc:hover, a.widgets.icon-desc:focus {
    color: #ff7465; }

svg.widgets * {
  fill: #ff4632; }

a:hover svg.widgets * {
  fill: #ff7465; }

.mobile-apps .navbar-default .navbar-nav li a.active::before {
  border-color: #1db954; }
.mobile-apps .post-header p,
.mobile-apps .text-accent,
.mobile-apps .outer > li > a.active,
.mobile-apps #secondary-navbar .active {
  color: #1db954; }
.mobile-apps .bg-accent {
  background-color: #1db954; }
.mobile-apps .bg-accent:hover {
  background-color: #2bde6a; }
.mobile-apps.platform-link:focus .bg-accent {
  background-color: #168d40; }
.mobile-apps.hover-accent:hover, .mobile-apps.hover-accent:focus,
.mobile-apps .hover-accent:hover,
.mobile-apps .hover-accent:focus {
  color: #1db954; }
.mobile-apps ul.navbar-nav > li > a:hover:hover, .mobile-apps ul.navbar-nav > li > a:hover:focus,
.mobile-apps aside a:hover,
.mobile-apps aside a:focus {
  color: #1db954; }
.mobile-apps ul.navbar-nav > li > a:hover:active,
.mobile-apps aside a:active {
  color: #1db954; }

.wrap.mobile-apps main a {
  color: #1db954; }
  .wrap.mobile-apps main a:hover, .wrap.mobile-apps main a:active, .wrap.mobile-apps main a:focus {
    color: #168d40; }
  .wrap.mobile-apps main a.btn-primary {
    color: white; }

.navbar-col#mobile-apps a:hover, .navbar-col#mobile-apps a:active, .navbar-col#mobile-apps a:focus {
  color: #1db954; }
@media (min-width: 992px) {
  .navbar-col#mobile-apps > a:first-of-type {
    color: white; }
    .navbar-col#mobile-apps > a:first-of-type:hover {
      color: #e6e6e6; }
      .navbar-col#mobile-apps > a:first-of-type:hover svg * {
        fill: #2bde6a; } }
.navbar-col#mobile-apps .sub-nav a:hover,
.navbar-col#mobile-apps .sub-nav a:focus {
  color: #1db954; }
.navbar-col#mobile-apps svg * {
  fill: #1db954; }

a.mobile-apps.icon-desc {
  color: #1db954;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500; }
  a.mobile-apps.icon-desc:hover, a.mobile-apps.icon-desc:focus {
    color: #2bde6a; }

svg.mobile-apps * {
  fill: #1db954; }

a:hover svg.mobile-apps * {
  fill: #2bde6a; }

.hardware .navbar-default .navbar-nav li a.active::before {
  border-color: #1db954; }
.hardware .post-header p,
.hardware .text-accent,
.hardware .outer > li > a.active,
.hardware #secondary-navbar .active {
  color: #1db954; }
.hardware .bg-accent {
  background-color: #1db954; }
.hardware .bg-accent:hover {
  background-color: #2bde6a; }
.hardware.platform-link:focus .bg-accent {
  background-color: #168d40; }
.hardware.hover-accent:hover, .hardware.hover-accent:focus,
.hardware .hover-accent:hover,
.hardware .hover-accent:focus {
  color: #1db954; }
.hardware ul.navbar-nav > li > a:hover:hover, .hardware ul.navbar-nav > li > a:hover:focus,
.hardware aside a:hover,
.hardware aside a:focus {
  color: #1db954; }
.hardware ul.navbar-nav > li > a:hover:active,
.hardware aside a:active {
  color: #1db954; }

.wrap.hardware main a {
  color: #1db954; }
  .wrap.hardware main a:hover, .wrap.hardware main a:active, .wrap.hardware main a:focus {
    color: #168d40; }
  .wrap.hardware main a.btn-primary {
    color: white; }

.navbar-col#hardware a:hover, .navbar-col#hardware a:active, .navbar-col#hardware a:focus {
  color: #1db954; }
@media (min-width: 992px) {
  .navbar-col#hardware > a:first-of-type {
    color: white; }
    .navbar-col#hardware > a:first-of-type:hover {
      color: #e6e6e6; }
      .navbar-col#hardware > a:first-of-type:hover svg * {
        fill: #2bde6a; } }
.navbar-col#hardware .sub-nav a:hover,
.navbar-col#hardware .sub-nav a:focus {
  color: #1db954; }
.navbar-col#hardware svg * {
  fill: #1db954; }

a.hardware.icon-desc {
  color: #1db954;
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500; }
  a.hardware.icon-desc:hover, a.hardware.icon-desc:focus {
    color: #2bde6a; }

svg.hardware * {
  fill: #1db954; }

a:hover svg.hardware * {
  fill: #2bde6a; }

.bg-1 {
  background-image: url("../images/bg-4.svg"); }

.bg-2 {
  background-image: url("../images/bg-5.svg"); }

.bg-3 {
  background-image: url("../images/bg-3.svg"); }

.bg-4 {
  background-image: url("../images/bg-3.svg"); }

.bg-5 {
  background-image: url("../images/bg-6.svg"); }

.bg-6 {
  background-image: url("../images/bg-2.svg"); }

.bg-7 {
  background-image: url("../images/bg-5.svg"); }

.bg-8 {
  background-image: url("../images/bg-1.svg"); }

.bg-9 {
  background-image: url("../images/bg-5.svg"); }

.bg-10 {
  background-image: url("../images/bg-2.svg"); }

.bg-11 {
  background-image: url("../images/bg-2.svg"); }

.bg-12 {
  background-image: url("../images/bg-1.svg"); }

.bg-13 {
  background-image: url("../images/bg-3.svg"); }

.bg-14 {
  background-image: url("../images/bg-1.svg"); }

.bg-15 {
  background-image: url("../images/bg-1.svg"); }

.bg-16 {
  background-image: url("../images/bg-3.svg"); }

.bg-17 {
  background-image: url("../images/bg-1.svg"); }

.bg-18 {
  background-image: url("../images/bg-3.svg"); }

.bg-19 {
  background-image: url("../images/bg-5.svg"); }

.bg-20 {
  background-image: url("../images/bg-1.svg"); }

.bg-21 {
  background-image: url("../images/bg-5.svg"); }

.bg-22 {
  background-image: url("../images/bg-1.svg"); }

.bg-23 {
  background-image: url("../images/bg-3.svg"); }

.bg-24 {
  background-image: url("../images/bg-6.svg"); }

.bg-25 {
  background-image: url("../images/bg-6.svg"); }

.bg-26 {
  background-image: url("../images/bg-3.svg"); }

.bg-27 {
  background-image: url("../images/bg-6.svg"); }

.bg-28 {
  background-image: url("../images/bg-6.svg"); }

.bg-29 {
  background-image: url("../images/bg-3.svg"); }

.bg-30 {
  background-image: url("../images/bg-4.svg"); }

.vresize {
  resize: vertical; }

.checkbox-inline + .checkbox-inline,
.radio-inline + .radio-inline {
  margin-left: 0; }

.checkbox-inline,
.radio-inline {
  margin-right: 10px; }

.form-footer-buttons {
  padding-bottom: 15px; }

table.parameter-reference-table {
  margin-bottom: 0; }

thead {
  color: #c1c3c6;
  border-bottom: 2px solid #c1c3c6;
  font-size: 12px;
  text-transform: uppercase; }

th,
td {
  font-weight: 100;
  padding: 7px 40px 7px 0; }
  @media (max-width: 1199px) {
    th,
    td {
      padding-right: 20px; } }

td {
  border-top: 1px solid #d9dadc; }

tbody tr:not(.unhoverable):hover,
tfoot tr:not(.unhoverable):hover {
  background-color: #f8f8f8;
  transition: 0.1s ease; }
tbody tr.unhoverable td,
tfoot tr.unhoverable td {
  border-top: 0; }

.use-cases .post {
  max-width: 900px; }
.use-cases table {
  table-layout: fixed;
  width: 100%;
  word-wrap: break-word; }

.tile {
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  margin-bottom: 3vw;
  padding: 40px;
  max-width: 450px;
  max-height: 450px;
  height: 25vw;
  width: 25vw; }
  .tile a:not(.btn) {
    color: white; }
    .tile a:not(.btn):hover, .tile a:not(.btn):focus {
      color: white; }
    .tile a:not(.btn):active {
      color: white; }
  .tile p {
    margin-bottom: 0; }

.tile-page-wrapper {
  align-self: center;
  margin: 0 auto; }
  @media (max-width: 767px) {
    .tile-page-wrapper {
      width: 100%; } }
  @media (max-width: 767px) {
    .tile-page-wrapper .tile {
      height: 40vw;
      width: 100%;
      max-width: none; } }

.tile-container-3-col {
  padding: 3em 0;
  width: calc(25vw * 3 + 3vw * 2); }
  @media (min-width: 768px) {
    .tile-container-3-col {
      display: flex;
      flex-wrap: wrap; } }
  @media (max-width: 767px) {
    .tile-container-3-col {
      max-width: none;
      width: auto; } }
  @media (min-width: 1800px) {
    .tile-container-3-col {
      max-width: calc(450px * 3 + 3vw * 2); } }
  .tile-container-3-col .tile {
    padding: 0;
    margin-right: 3vw; }
  .tile-container-3-col .tile-content {
    padding: 40px; }

.long-tile {
  background-color: #efefef;
  color: #1e3264;
  height: calc(25vw * 2 + 3vw);
  max-height: calc(900px + 3vw); }
  .long-tile a:not(.btn),
  .long-tile a:not(.btn):hover,
  .long-tile a:not(.btn):active,
  .long-tile a:not(.btn):focus {
    color: #1e3264; }

.wide-tile {
  flex-flow: row wrap;
  width: calc(25vw * 2 + 3vw);
  max-width: calc(450px * 2 + 3vw); }
  .wide-tile .content-text h2 {
    margin-bottom: 0; }
    @media (min-width: 768px) {
      .wide-tile .content-text h2 {
        margin-right: 8vw; } }
  .wide-tile .content-text .lead {
    align-self: flex-end; }

.tile.hero-tile {
  flex: 0 0 66%;
  justify-content: center; }
  .tile.hero-tile .btn {
    margin-top: 2em;
    width: 207px; }
  .tile.hero-tile .tile-content {
    flex: 2; }

@media (min-width: 1200px) {
  .long-tile {
    margin-right: 3vw; }

  .hero-tile {
    padding: 50px; } }
@media (min-width: 768px) {
  .small-tile-container,
  .content-text {
    display: flex; }

  .small-tile:not(:last-child) {
    margin-right: 3vw; } }
@media (max-width: 767px) {
  .tile,
  .hero-tile {
    padding: 2em 15px; }

  .long-tile,
  .wide-tile,
  .small-tile {
    height: auto;
    width: 100%;
    max-width: none; } }
@media (min-width: 768px) and (max-width: 1200px) {
  .tiles .small-tile {
    width: 38vw; }
  .tiles .long-tile,
  .tiles .wide-tile {
    width: 79vw;
    max-width: none; } }
@media (max-width: 1199px) {
  .tiles .tile {
    height: auto; } }
/**
 * Base styles for the Loading Screen
 */
.loading-home {
  text-align: center;
  padding: 16em 0 20em; }
  .loading-home svg {
    fill: #aaa;
    height: 100px;
    width: 100px; }
  .loading-home h3 {
    color: #aaa;
    font-size: 2em;
    font-weight: 200; }

.js .loading-home h3.text-loading {
  display: block; }
.js .loading-home h3.text-no-js {
  display: none; }
.js .loading-home svg {
  -webkit-animation: spotify-color-rotation 20s infinite;
  /* Safari 4+ */
  -moz-animation: spotify-color-rotation 20s infinite;
  /* Fx 5+ */
  -o-animation: spotify-color-rotation 20s infinite;
  /* Opera 12+ */
  animation: spotify-color-rotation 20s infinite;
  /* IE 10+ */ }

.no-js .loading-home h3.text-loading {
  display: none; }
.no-js .loading-home h3.text-no-js {
  display: block; }

/**
 * Loading animation CSS
 */
@keyframes spotify-color-rotation {
  0% {
    fill: #191414; }
  /* Black */
  3% {
    fill: #503750; }
  /* Aubergine */
  6% {
    fill: #8c1932; }
  /* Maroon */
  9% {
    fill: #7d4b32; }
  /* Chocolate */
  12% {
    fill: #006450; }
  /* Forest */
  15% {
    fill: #1e3264; }
  /* Midnight */
  18% {
    fill: #af2896; }
  /* Violet */
  21% {
    fill: #eb1e32; }
  /* Bright Red */
  24% {
    fill: #f59b23; }
  /* Gold */
  27% {
    fill: #4b917d; }
  /* Spearmint */
  30% {
    fill: #2d46b9; }
  /* Royal Blue */
  33% {
    fill: #f037a5; }
  /* Fuchsia */
  36% {
    fill: #ff4632; }
  /* Tangerine */
  39% {
    fill: #5ff550; }
  /* Neon Green */
  42% {
    fill: #4100f5; }
  /* Klein Blue */
  45% {
    fill: #f573a0; }
  /* Salmon */
  48% {
    fill: #19e68c; }
  /* Electric Seafoam */
  51% {
    fill: #509bf5; }
  /* Azure */
  54% {
    fill: #b49bc8; }
  /* Lavender */
  57% {
    fill: #ff6437; }
  /* Orange */
  60% {
    fill: #c87d55; }
  /* Bole */
  63% {
    fill: #fae62d; }
  /* Factory Yellow */
  66% {
    fill: #cdf564; }
  /* Citric */
  69% {
    fill: #9bf0e1; }
  /* Aquamarine */
  72% {
    fill: #ffcdd2; }
  /* Pink */
  75% {
    fill: #c39687; }
  /* Tan */
  85% {
    fill: #ffc864; }
  /* Sunflower */
  95% {
    fill: #c3f0c8; }
  /* Powder Green */
  100% {
    fill: #a0c3d2; }
  /* Storm */ }
nav,
#top-nav input,
#developer-footer {
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 0.5px; }
  nav .navbar-col a,
  #top-nav input .navbar-col a,
  #developer-footer .navbar-col a {
    color: white; }
    nav .navbar-col a:hover, nav .navbar-col a:focus,
    #top-nav input .navbar-col a:hover,
    #top-nav input .navbar-col a:focus,
    #developer-footer .navbar-col a:hover,
    #developer-footer .navbar-col a:focus {
      color: #1db954; }
  nav .navbar-col-title,
  #top-nav input .navbar-col-title,
  #developer-footer .navbar-col-title {
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase; }

#top-nav {
  padding: 0 10px;
  min-height: 70px;
  width: 100%; }
  #top-nav .navbar-header .accessibility-aid {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); }
  #top-nav .navbar-header .accessibility-aid:focus {
    width: auto;
    height: auto;
    clip: auto;
    display: block;
    top: 0;
    left: 0;
    margin: 6px 15px;
    z-index: 1001; }
  #top-nav .navbar-inner-background {
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; }
  #top-nav .navbar-nav {
    padding-left: 22px; }
    #top-nav .navbar-nav > li,
    #top-nav .navbar-nav > li > a {
      position: unset; }
    @media (min-width: 992px) {
      #top-nav .navbar-nav .hover-menu {
        position: absolute; } }

@media (min-width: 1200px) {
  .navbar-default .navbar-nav {
    padding-left: 2em; } }
@media (min-width: 992px) {
  .navbar-default .navbar-nav > li:hover > .hover-menu {
    display: flex;
    padding-left: 50px;
    transform: translateY(0);
    opacity: 1;
    position: fixed; }
  .navbar-default .navbar-nav .navbar-col {
    max-width: 8em;
    margin-right: 5em; } }
.navbar-default .navbar-nav > li {
  text-transform: uppercase; }
  .navbar-default .navbar-nav > li > a {
    font-size: 14px;
    font-weight: 100;
    padding: 23px 1em; }

#top-nav .navbar-header > .navbar-brand svg {
  height: auto;
  padding: 15px 0 0;
  width: 250px; }

#close-top-navbar,
#mobile-nav-search,
#desktop-nav-search {
  float: right;
  font-size: 1.5em;
  background-color: black;
  border: none;
  margin-bottom: 0;
  text-align: center;
  width: 42px; }
  #close-top-navbar:hover,
  #mobile-nav-search:hover,
  #desktop-nav-search:hover {
    cursor: pointer; }

#mobile-nav-search .fa,
#desktop-nav-search .fa {
  color: white;
  display: block;
  font-size: 23px;
  padding-top: 23px;
  padding-bottom: 23px; }

#close-top-navbar {
  padding-top: 17px; }

.hover-menu {
  background-color: #222326;
  transition: all 0.5s ease;
  width: 100%;
  z-index: 1; }
  .hover-menu .navbar-col svg {
    display: inline-block;
    height: 25px;
    margin: 0 5px 5px 0;
    width: 25px; }
  .hover-menu .navbar-col .sub-nav {
    padding-left: 0; }
    .hover-menu .navbar-col .sub-nav > li {
      margin: 5px 0; }
      .hover-menu .navbar-col .sub-nav > li a {
        text-transform: capitalize; }
  @media (min-width: 992px) {
    .hover-menu {
      display: flex;
      left: 0;
      padding: 2em 2em 3em 230px;
      position: fixed;
      transform: translateY(-310px);
      z-index: -2;
      opacity: 0; }
      .hover-menu .navbar-col#news .sub-nav, .hover-menu .navbar-col#showcase .sub-nav, .hover-menu .navbar-col#tutorials .sub-nav {
        display: none; }
      .hover-menu .navbar-col svg {
        display: block;
        height: 35px;
        margin-bottom: 10px;
        width: 35px; }
        .hover-menu .navbar-col svg * {
          fill: #1db954; }
      .hover-menu .sub-nav {
        margin-top: 10px; } }
  @media (min-width: 1200px) {
    .hover-menu {
      padding-left: 250px; } }

aside {
  position: relative;
  background-color: #efefef;
  padding: 55px 30px;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  overflow-y: auto;
  max-width: 250px; }
  @media (max-width: 991px) {
    aside {
      display: none; } }
  aside ul {
    padding-left: 0; }
    aside ul.inner {
      margin-top: 7px;
      padding-left: 1em; }
      aside ul.inner li {
        font-size: 13px;
        font-weight: 100;
        line-height: 1.3; }
        aside ul.inner li .active {
          color: black;
          font-weight: 500; }
    aside ul.outer {
      font-weight: 400; }
    aside ul a {
      color: black; }
    aside ul li {
      margin-bottom: 7px; }
  aside .page-title {
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase; }

#secondary-navbar {
  display: flex;
  width: 100%;
  position: relative;
  z-index: 2; }
  @media (max-width: 991px) {
    #secondary-navbar {
      display: none; } }
  #secondary-navbar .bg-accent,
  #secondary-navbar ul {
    color: white;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 7px 30px;
    text-transform: uppercase; }
    #secondary-navbar .bg-accent a,
    #secondary-navbar ul a {
      color: white; }
  #secondary-navbar ul {
    background-color: #222326;
    flex: 1;
    margin: 0; }
    @media (min-width: 992px) {
      #secondary-navbar ul {
        display: flex; } }
    #secondary-navbar ul a {
      font-weight: 100;
      margin-right: 3em;
      letter-spacing: 1px; }
      #secondary-navbar ul a.active {
        font-weight: 400; }

.bg-accent,
aside {
  flex: 0 0 230px; }

@media (min-width: 1200px) {
  #top-nav .navbar-nav {
    padding-left: 56px; }
    #top-nav .navbar-nav > li {
      margin-right: 32px; }
      #top-nav .navbar-nav > li .hover-menu {
        padding-left: 50px; }

  #secondary-navbar ul {
    padding-left: 45px; }

  aside,
  #secondary-navbar .bg-accent {
    min-width: 250px; } }
@media (max-width: 991px) {
  .overview-links {
    display: block; }

  .navbar-header {
    margin: 0 5px;
    min-height: 70px; }

  .nav-overlay.visible {
    transform: translateX(0); }

  .nav-overlay {
    display: none;
    position: absolute;
    background-color: #222326;
    top: 61px;
    left: 0;
    width: 100%;
    padding-left: 0;
    z-index: 1;
    transition: transform 0.3s ease;
    transform: translateX(100vw); }
    .nav-overlay ul {
      padding-left: 0; }
      .nav-overlay ul li {
        padding-left: 15px;
        font-size: 14px; }
    .nav-overlay > li {
      padding-left: 30px;
      margin: 9px 0; }
      .nav-overlay > li:not(.parent-nav) {
        font-size: 16px; }

  .parent-nav {
    background-color: black;
    border-bottom: solid 1px #616467;
    color: white !important;
    font-weight: 400;
    font-size: 13px;
    padding: 7px 30px 3px;
    margin: 0 0 12px !important; }

  li a {
    width: 100%; }

  .hover-menu {
    padding: 0 20px 0 30px; }
    .hover-menu .navbar-col {
      margin-bottom: 17px; }
      .hover-menu .navbar-col > a {
        font-size: 13px; }
      .hover-menu .navbar-col svg {
        height: 18px;
        width: 18px;
        margin-right: 10px; }
      .hover-menu .navbar-col a {
        display: inline-flex;
        -webkit-font-smoothing: antialiased; }
      .hover-menu .navbar-col .fa-angle-down {
        margin: 2px 10px;
        vertical-align: middle; }

  .sub-nav > li {
    padding-left: 40px; }
  .sub-nav li {
    margin: 9px 0; }

  #top-nav {
    padding: 0; }
    #top-nav .navbar-nav {
      background-color: #222326;
      margin: 0;
      padding: 0; }
      #top-nav .navbar-nav > li {
        border-top: 1px solid #616467; }
        #top-nav .navbar-nav > li > a {
          display: inline-block;
          padding: 25px 15px 25px 30px;
          height: 70px; }

  .navbar-collapse {
    padding: 0; }

  .fa-angle-down {
    color: white;
    margin: 23px 10px;
    font-size: 1.2em; } }
@media (min-width: 992px) {
  .overview-links {
    display: none; } }
.footer {
  background-color: #222326;
  clear: both;
  padding-bottom: 0;
  right: 0;
  left: 0;
  position: absolute; }
  .footer .nav-title {
    margin-top: 15px; }
    .footer .nav-title a {
      color: white; }
      .footer .nav-title a:hover, .footer .nav-title a:focus {
        color: white; }
      .footer .nav-title a:active {
        color: white; }
  .footer .main-footer {
    background-color: #222326; }
    .footer .main-footer li a {
      font-weight: 100; }
    .footer .main-footer a {
      font-size: 14px; }
  .footer .row-small {
    background-color: black;
    padding: 30px 0 20px; }
    @media (max-width: 991px) {
      .footer .row-small {
        padding: 20px 0; } }
  .footer .footer-logo {
    background-image: url("../images/icons/footer-icon.svg");
    background-repeat: no-repeat;
    background-position: -7px;
    margin-bottom: 20px;
    height: 57px;
    width: 57px; }
  .footer h3 a {
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase; }
  .footer hr {
    border-top-color: #c1c3c6;
    margin: 0; }

.wrap-content {
  display: flex; }

.split-screen .post {
  z-index: 10;
  min-height: 100%;
  padding-right: 0;
  background-color: white; }
  @media (min-width: 992px) {
    .split-screen .post pre,
    .split-screen .post blockquote {
      width: 50%;
      float: right;
      clear: right; }
    .split-screen .post .dark-box {
      width: calc(50% - 147px);
      right: 0;
      top: 0;
      bottom: 0;
      position: fixed; }
    .split-screen .post h1,
    .split-screen .post h2,
    .split-screen .post h3,
    .split-screen .post h4,
    .split-screen .post h5,
    .split-screen .post h6,
    .split-screen .post p,
    .split-screen .post table,
    .split-screen .post ul,
    .split-screen .post ol,
    .split-screen .post aside,
    .split-screen .post dl,
    .split-screen .post form:not(.form-scope) {
      display: inline-block;
      width: 50%;
      padding-right: 45px; } }
  @media (min-width: 992px) and (max-width: 1199px) {
    .split-screen .post .dark-box {
      width: calc(50% - 129px); } }
  @media (max-width: 991px) {
    .split-screen .post h1,
    .split-screen .post h2,
    .split-screen .post h3,
    .split-screen .post h4,
    .split-screen .post h5,
    .split-screen .post h6,
    .split-screen .post p,
    .split-screen .post table,
    .split-screen .post ul,
    .split-screen .post ol,
    .split-screen .post aside,
    .split-screen .post dl,
    .split-screen .post form {
      margin-right: 28px; } }
  .split-screen .post .alert {
    display: block;
    width: 100%; }
  .split-screen .post .dark-box {
    background-color: #2c3134; }
  .split-screen .post .post-content hr {
    background-color: #2c3134;
    border: none;
    height: 1px; }
  .split-screen .post .post-content h1,
  .split-screen .post .post-content h2,
  .split-screen .post .post-content h3,
  .split-screen .post .post-content h4,
  .split-screen .post .post-content h5,
  .split-screen .post .post-content h6,
  .split-screen .post .post-content hr {
    clear: both; }
  .split-screen .post .post-content img {
    padding-bottom: 22px; }
  .split-screen .post pre,
  .split-screen .post blockquote {
    margin: 48px 0 12px;
    border: none;
    background-color: #1b1f22;
    color: #fff;
    padding: 2em 28px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    z-index: 2;
    position: relative; }
    @media (max-width: 991px) {
      .split-screen .post pre,
      .split-screen .post blockquote {
        margin-right: 28px; } }
    @media (min-width: 992px) {
      .split-screen .post pre,
      .split-screen .post blockquote {
        border-radius: 0; }
        .post-content div:not([class*="modal"]):not([class*="gist"]):not([class*="panel"]):not([class*="form"]):not([class*="input"]):not([class*="alert"]) {
          display: inline; } }

/* stylelint-disable */
.highlight {
  background-color: #222326;
  color: #c1c3c6;
  /* Comment */
  /* Error */
  /* Generic */
  /* Keyword */
  /* Literal */
  /* Name */
  /* Operator */
  /* Other */
  /* Punctuation */
  /* Comment.Multiline */
  /* Comment.Preproc */
  /* Comment.Single */
  /* Comment.Special */
  /* Generic.deleted */
  /* Generic.emph */
  /* Generic.Error */
  /* Generic.Heading */
  /* Generic.Inserted */
  /* Generic.Output */
  /* Generic.Prompt */
  /* Generic.Strong */
  /* Generic.Subheading */
  /* Generic.Traceback */
  /* Keyword.Constant */
  /* Keyword.Declaration */
  /* Keyword.Namespace */
  /* Keyword.Pseudo */
  /* Keyword.Reserved */
  /* Keyword.Type */
  /* Literal.Date */
  /* Literal.Number */
  /* Literal.String */
  /* Name.Attribute */
  /* Name.Builtin */
  /* Name.Class */
  /* Name.Constant */
  /* Name.Decorator */
  /* Name.Entity */
  /* Name.Exception */
  /* Name.Function */
  /* Name.Label */
  /* Name.Namespace */
  /* Name.Other */
  /* Name.Property */
  /* Name.Tag */
  /* Name.Variable */
  /* Operator.Word */
  /* Text.Whitespace */
  /* Literal.Number.Float */
  /* Literal.Number.Hex */
  /* Literal.Number.Integer */
  /* Literal.Number.Oct */
  /* Literal.String.Backtick */
  /* Literal.String.Char */
  /* Literal.String.Doc */
  /* Literal.String.Double */
  /* Literal.String.Escape */
  /* Literal.String.Heredoc */
  /* Literal.String.Interpol */
  /* Literal.String.Other */
  /* Literal.String.Regex */
  /* Literal.String.Single */
  /* Literal.String.Symbol */
  /* Name.Builtin.Pseudo */
  /* Name.Variable.Class */
  /* Name.Variable.Global */
  /* Name.Variable.Instance */
  /* Literal.Number.Integer.Long */ }
  .highlight .c {
    color: #616467; }
  .highlight .err {
    color: #c1c3c6; }
  .highlight .g {
    color: #c1c3c6; }
  .highlight .k {
    color: #4b917d; }
  .highlight .l {
    color: #c1c3c6; }
  .highlight .n {
    color: #c1c3c6; }
  .highlight .o {
    color: #4b917d; }
  .highlight .x {
    color: #ff4632; }
  .highlight .p {
    color: #c1c3c6; }
  .highlight .cm {
    color: #616467; }
  .highlight .cp {
    color: #4b917d; }
  .highlight .c1 {
    color: #616467; }
  .highlight .cs {
    color: #4b917d; }
  .highlight .gd {
    color: #1ed760; }
  .highlight .ge {
    color: #c1c3c6;
    font-style: italic; }
  .highlight .gr {
    color: #eb1e32; }
  .highlight .gh {
    color: #ff4632; }
  .highlight .gi {
    color: #4b917d; }
  .highlight .go {
    color: #c1c3c6; }
  .highlight .gp {
    color: #c1c3c6; }
  .highlight .gs {
    color: #c1c3c6;
    font-weight: bold; }
  .highlight .gu {
    color: #ff4632; }
  .highlight .gt {
    color: #c1c3c6; }
  .highlight .kc {
    color: #ff4632; }
  .highlight .kd {
    color: #509bf5; }
  .highlight .kn {
    color: #4b917d; }
  .highlight .kp {
    color: #4b917d; }
  .highlight .kr {
    color: #509bf5; }
  .highlight .kt {
    color: #eb1e32; }
  .highlight .ld {
    color: #c1c3c6; }
  .highlight .m {
    color: #1ed760; }
  .highlight .s {
    color: #1ed760; }
  .highlight .na {
    color: #c1c3c6; }
  .highlight .nb {
    color: #4b917d; }
  .highlight .nc {
    color: #509bf5; }
  .highlight .no {
    color: #ff4632; }
  .highlight .nd {
    color: #509bf5; }
  .highlight .ni {
    color: #ff4632; }
  .highlight .ne {
    color: #ff4632; }
  .highlight .nf {
    color: #509bf5; }
  .highlight .nl {
    color: #c1c3c6; }
  .highlight .nn {
    color: #c1c3c6; }
  .highlight .nx {
    color: #c1c3c6; }
  .highlight .py {
    color: #c1c3c6; }
  .highlight .nt {
    color: #509bf5; }
  .highlight .nv {
    color: #509bf5; }
  .highlight .ow {
    color: #4b917d; }
  .highlight .w {
    color: #c1c3c6; }
  .highlight .mf {
    color: #1ed760; }
  .highlight .mh {
    color: #1ed760; }
  .highlight .mi {
    color: #1ed760; }
  .highlight .mo {
    color: #1ed760; }
  .highlight .sb {
    color: #616467; }
  .highlight .sc {
    color: #1ed760; }
  .highlight .sd {
    color: #c1c3c6; }
  .highlight .s2 {
    color: #1ed760; }
  .highlight .se {
    color: #ff4632; }
  .highlight .sh {
    color: #c1c3c6; }
  .highlight .si {
    color: #1ed760; }
  .highlight .sx {
    color: #1ed760; }
  .highlight .sr {
    color: #eb1e32; }
  .highlight .s1 {
    color: #1ed760; }
  .highlight .ss {
    color: #1ed760; }
  .highlight .bp {
    color: #509bf5; }
  .highlight .vc {
    color: #509bf5; }
  .highlight .vg {
    color: #509bf5; }
  .highlight .vi {
    color: #509bf5; }
  .highlight .il {
    color: #1ed760; }

body {
  font-weight: 100;
  background-color: #000;
  overflow-x: hidden; }

.wrap {
  background-color: #fff; }
  .wrap:not(.split-screen) .highlighter-rouge:not([class*='language']) .highlight {
    background-color: #efefef;
    padding: 0 3px;
    border-radius: 0;
    color: black;
    display: table; }

*:active {
  outline-width: 0 !important; }

nav ul,
aside ul {
  list-style: none; }

table {
  margin: 20px 0 50px; }

.read-more,
.next-post,
.last-post {
  color: #1db954;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 2em;
  text-transform: uppercase; }

.read-more:hover, .read-more:hover::after,
.next-post:hover,
.next-post:hover::after {
  color: #1ed760; }
.read-more::after,
.next-post::after {
  content: url("../images/icons/arrow.svg");
  color: #1db954;
  margin-left: 15px;
  display: inline-block;
  transform: rotate(180deg);
  vertical-align: text-bottom; }

.last-post {
  margin-top: 3px; }
  .last-post:hover, .last-post:hover::before {
    color: #1ed760; }
  .last-post::before {
    content: url("../images/icons/arrow.svg");
    color: #1db954;
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle; }

.bg-accent {
  background-color: #1db954; }

.text-accent {
  color: #1db954; }

article {
  padding: 3em 28px 40px; }

main {
  width: 100%; }
  main .post-header h1,
  main .post-header h2,
  main .post-header h3 {
    margin-top: 0; }
  main .post-header p {
    width: 60%;
    margin-top: -10px; }

.vertical-divider {
  background-color: #c1c3c6;
  height: 100px;
  margin: 18px 0 35px;
  width: 1px; }

.underline.active {
  font-weight: 400;
  margin-top: -3px; }
  .underline.active::before {
    border-bottom: 3px solid #1db954;
    top: 28px;
    content: '';
    display: block;
    position: relative;
    width: 40px; }
    @media (max-width: 991px) {
      .underline.active::before {
        bottom: 16px; } }

a {
  transition: 0.1s ease;
  word-wrap: break-word; }

p.lead {
  font-weight: 100;
  line-height: 1.3; }

@media (min-width: 1200px) {
  .tiles {
    display: flex; } }
code {
  word-break: break-word;
  color: black;
  background-color: #efefef; }

pre {
  background-color: #1b1f22;
  color: #c1c3c6;
  border: none; }

.wrap-content {
  min-height: calc(100vh - 511px - (60px + 35px)); }

.optimal-paragraph-width article {
  max-width: 900px; }

#cookies-alert,
#beta-alert {
  margin-bottom: 0;
  z-index: 1001;
  position: relative; }

.endpoint-list tr td:nth-of-type(1) {
  text-transform: uppercase; }

input:not([type='submit']).form-control,
textarea.form-control {
  font-size: 20px;
  line-height: 1.2;
  resize: none; }

.form-group {
  margin-bottom: 35px; }

.modal-header .close {
  color: black; }

.btn-link.text-danger:hover, .btn-link.text-danger:focus {
  color: #e27c79; }

.label {
  font-size: 40%;
  margin-left: 10px; }

.display-1-label {
  font-size: 25%; }

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px; }

article.post .bg-info {
  padding: 11.5px; }

.alert a {
  color: #fff !important; }

.g-recaptcha {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end; }
  .g-recaptcha .grecaptcha-badge {
    transform: scale(0.75);
    margin-right: -30px; }

.post .post-tags li,
.news .post-tags li {
  display: inline; }
.post .hero-background,
.news .hero-background {
  background: linear-gradient(to left, #65c9b7, #a0bfd5 33%, #b19ace 100%);
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  min-height: 450px;
  padding: 2em 0 5em; }
  .post .hero-background .display-1,
  .news .hero-background .display-1 {
    line-height: 1.1;
    margin-bottom: 0;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; }
  .post .hero-background .selected-category,
  .news .hero-background .selected-category {
    font-weight: 100;
    margin-top: 5px; }
.post .post-date,
.post .author-title,
.news .post-date,
.news .author-title {
  font-size: 13px;
  color: #c1c3c6;
  font-weight: 100; }
.post a.post-title,
.news a.post-title {
  color: black; }
  .post a.post-title:hover, .post a.post-title:focus,
  .news a.post-title:hover,
  .news a.post-title:focus {
    color: #1ed760; }
.post article,
.news article {
  margin: 0 auto;
  padding: 35px 1em 30px; }
  .post article .author,
  .news article .author {
    display: flex;
    margin-bottom: 2em; }
    .post article .author .author-avatar,
    .news article .author .author-avatar {
      background-size: contain;
      background-color: #c1c3c6;
      border-radius: 100%;
      height: 60px;
      width: 60px; }
    .post article .author .author-details,
    .news article .author .author-details {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 1em; }
    .post article .author h3,
    .news article .author h3 {
      margin: 0; }
    .post article .author .author-title,
    .news article .author .author-title {
      margin: 0; }
  .post article h4,
  .news article h4 {
    font-weight: 800; }
  .post article .btn,
  .news article .btn {
    margin-bottom: 15px; }
.post hr,
.news hr {
  border-color: #c1c3c6;
  margin-bottom: 0; }
  .post hr:last-of-type,
  .news hr:last-of-type {
    display: none; }
@media (min-width: 768px) {
  .post article,
  .post .related-posts,
  .news article,
  .news .related-posts {
    max-width: 650px; }
  .post article,
  .news article {
    padding: 3em 1em 4.5em; } }
@media (max-width: 1199px) {
  .post .hero-background,
  .news .hero-background {
    min-height: auto; } }
@media (max-width: 991px) {
  .post .hero-background .display-1,
  .news .hero-background .display-1 {
    padding-top: 15px; }
  .post .hero-background .display-1,
  .post .hero-background .selected-category,
  .post .hero-background .showcase-description,
  .news .hero-background .display-1,
  .news .hero-background .selected-category,
  .news .hero-background .showcase-description {
    padding: 0 28px; }
  .post .post-content,
  .post .post-header,
  .news .post-content,
  .news .post-header {
    padding: 0; } }

.related-posts {
  display: flex; }
  @media (min-width: 768px) {
    .related-posts {
      display: flex; }
      .related-posts section:first-of-type {
        padding-right: 2em; }
      .related-posts section:last-of-type {
        padding-left: 2em; } }
  .related-posts section {
    flex: 1; }
    .related-posts section:first-of-type {
      padding: 1em 1em 1em 0;
      text-align: right; }
    .related-posts section:last-of-type {
      padding: 1em 0 1em 1em; }
    .related-posts section h4 {
      font-weight: 700;
      margin: 10px 0; }
    .related-posts section .post-date {
      margin-top: 3px; }
  .related-posts .vertical-divider {
    height: inherit; }

.start .has-hover-overlay {
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative; }
.start .tile {
  display: flex; }
  .start .tile .tile-header {
    text-transform: uppercase;
    margin-top: 0; }
  .start .tile .lead {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical; }
.start .tile-content {
  z-index: 1;
  padding: 40px; }
.start a.tile:hover, .start a.tile:focus {
  color: white; }
.start a.tile:active {
  color: white; }
.start a.long-tile:hover, .start a.long-tile:focus {
  color: #1e3264; }
.start a.long-tile:active {
  color: #1e3264; }
.start .home {
  padding: 0; }
  @media (min-width: 1200px) {
    .start .home {
      height: calc(100vh - 60px); }
      .start .home .small-tile-container {
        display: block; } }
  @media (min-width: 992px) {
    .start .home .small-tile-container {
      flex: 0 0 34%; } }
  @media (max-width: 767px) {
    .start .home .tile-content {
      padding: 5em 15px; } }
  .start .home .tile,
  .start .home .wide-tile,
  .start .home .long-tile {
    height: auto;
    max-height: none;
    width: auto;
    max-width: none;
    margin: 0; }
  .start .home .hero-tile {
    background-color: #af2896;
    background-image: url("../images/home/tile-1-bg.jpg");
    background-size: cover;
    background-position: center; }
    @media (max-width: 767px) {
      .start .home .hero-tile {
        height: calc(100vh - 60px);
        padding: 0 15px 5em; } }
    .start .home .hero-tile .lead {
      width: 70%; }
  @media (min-width: 1200px) {
    .start .home .small-tile {
      height: 50%; } }
  @media (min-width: 768px) and (max-width: 1199px) {
    .start .home .small-tile {
      width: 50%; } }
  .start .home .small-tile:nth-of-type(1) {
    background-color: #efefef;
    color: #1e3264; }
    .start .home .small-tile:nth-of-type(1) .hover-overlay {
      background-image: url("../images/home/tile-2-bg.svg");
      position: absolute;
      z-index: 0;
      transition: opacity 0.3s ease, background-size 0.3s ease;
      opacity: 0;
      background-position: 10%;
      background-repeat: no-repeat;
      background-size: 140%;
      height: 100%;
      width: 100%; }
    .start .home .small-tile:nth-of-type(1):hover .hover-overlay {
      opacity: 1;
      background-size: 145%; }
  .start .home .small-tile:nth-of-type(2) {
    background-color: #1e3264; }
    .start .home .small-tile:nth-of-type(2) .hover-overlay {
      background-image: url("../images/home/tile-3-bg.svg");
      position: absolute;
      z-index: 0;
      transition: opacity 0.3s ease, background-size 0.3s ease;
      opacity: 0;
      background-position: 10%;
      background-repeat: no-repeat;
      background-size: 140%;
      height: 100%;
      width: 100%; }
    .start .home .small-tile:nth-of-type(2):hover .hover-overlay {
      opacity: 1;
      background-size: 145%; }
  .start .home img {
    margin-bottom: 2em;
    width: 70px; }
.start .community {
  padding: 60px 15px 80px;
  display: flex;
  flex-direction: column; }
  @media (max-width: 767px) {
    .start .community {
      padding-bottom: 0; }
      .start .community .tile {
        margin-bottom: 15px; } }
  @media (min-width: 768px) {
    .start .community {
      padding: 8em 5em; } }
  .start .community .tiles {
    align-self: center; }
    .start .community .tiles .long-tile {
      transition: background-size 0.3s ease;
      background-position: center;
      background-size: 130%; }
      .start .community .tiles .long-tile:hover {
        background-size: 135%; }
  .start .community .tile-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; }
  .start .community .section-title {
    margin-bottom: 2em;
    text-align: center; }
  .start .community .long-tile {
    background-color: #c1c3c6;
    background-image: url("../images/home/tile-4-bg.jpg");
    padding: 0; }
    .start .community .long-tile .content-text {
      display: block; }
  .start .community .small-tile:nth-of-type(1) {
    background-color: #19e68c; }
    .start .community .small-tile:nth-of-type(1) .hover-overlay {
      background-image: url("../images/home/tile-5-bg.svg");
      position: absolute;
      z-index: 0;
      transition: opacity 0.3s ease, background-size 0.3s ease;
      opacity: 0;
      background-position: 10%;
      background-repeat: no-repeat;
      background-size: 140%;
      height: 100%;
      width: 100%; }
    .start .community .small-tile:nth-of-type(1):hover .hover-overlay {
      opacity: 1;
      background-size: 145%; }
  .start .community .small-tile:nth-of-type(2) {
    background-color: #c1c3c6; }
    .start .community .small-tile:nth-of-type(2) .hover-overlay {
      background-image: url("../images/home/tile-6-bg.svg");
      position: absolute;
      z-index: 0;
      transition: opacity 0.3s ease, background-size 0.3s ease;
      opacity: 0;
      background-position: 10%;
      background-repeat: no-repeat;
      background-size: 140%;
      height: 100%;
      width: 100%; }
    .start .community .small-tile:nth-of-type(2):hover .hover-overlay {
      opacity: 1;
      background-size: 145%; }
  .start .community .wide-tile {
    background-color: #1e3264; }
    .start .community .wide-tile .hover-overlay {
      background-image: url("../images/home/tile-7-bg.svg");
      position: absolute;
      z-index: 0;
      transition: opacity 0.3s ease, background-size 0.3s ease;
      opacity: 0;
      background-position: 10%;
      background-repeat: no-repeat;
      background-size: 140%;
      height: 100%;
      width: 100%; }
    .start .community .wide-tile:hover .hover-overlay {
      opacity: 1;
      background-size: 145%; }
.start .feedback {
  padding-top: 60px;
  padding-bottom: 60px; }
  @media (min-width: 768px) {
    .start .feedback {
      padding-top: 8em;
      padding-bottom: 8em; }
      .start .feedback li {
        display: inline; } }
  @media (max-width: 767px) {
    .start .feedback .container {
      padding-left: 0;
      padding-right: 0; } }
  @media (max-width: 1199px) {
    .start .feedback .social-media h1 {
      margin-top: 55px; } }
  .start .feedback h1 {
    margin-bottom: 30px; }
  .start .feedback ul {
    list-style: none;
    padding-left: 0; }
    .start .feedback ul i {
      font-size: 1.3em;
      margin-right: 7px; }
    .start .feedback ul a {
      color: black; }
    .start .feedback ul li:not(:last-child) {
      margin: 0 15px 15px 0; }

.paginator {
  display: flex;
  flex-direction: row;
  margin: 15px 0 50px;
  width: 100%; }
  .paginator a.last-post {
    margin: 0 0 5px; }
  .paginator a.next-post {
    margin: -5px 0 0; }
  .paginator a.active {
    color: black; }
  .paginator div:not(:last-child) {
    margin-right: 20px; }
  @media (max-width: 767px) {
    .paginator {
      margin-left: 15px;
      margin-right: 15px; } }
  @media (max-width: 520px) {
    .paginator {
      justify-content: space-between; }
      .paginator a.last-post {
        content: url("../images/icons/arrow.svg");
        color: #1db954;
        display: inline-block;
        margin-right: 15px;
        vertical-align: middle; }
      .paginator a.next-post {
        content: url("../images/icons/arrow.svg");
        color: #1db954;
        margin-left: 15px;
        display: inline-block;
        transform: rotate(180deg);
        vertical-align: text-bottom; } }

.col-md-5.display-1 {
  min-width: 500px; }

.post.post-showcase {
  /**
   * Base styling.
   */
  /**
   * Mixins.
   */
  /**
   * Showcase items.
   */
  /* 3D Music Maze */
  /* Album Availability */
  /* Acrostify */
  /* BPM Music */
  /* Boil The Frog */
  /* Denied */
  /* DJay Algoriddim */
  /* Elvisualization */
  /* Elvis Influence */
  /* Every Noise */
  /* Klangspektrum */
  /* Klarafy */
  /* Magic Playlist */
  /* Mangomoji */
  /* Music Popcorn */
  /* Music Tonight */
  /* Musixmatch */
  /* Pacemaker DJ */
  /* Playlist Manager */
  /* Roadtrip Mixtape */
  /* Runkeeper */
  /* Setify */
  /* Shazam */
  /* Six Degrees of Kanye West */
  /* Spotify Artist Explorer */
  /* Spotify Dedup */
  /* TV Player for Spotify */ }
  .post.post-showcase .hero-background .showcase-description {
    font-size: 20px;
    padding-top: 15px; }
  @media (max-width: 991px) {
    .post.post-showcase .hero-background .showcase-description {
      padding: 0 28px; } }
  .post.post-showcase .hero-background.showcase-3d-music-maze {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/3d-music-maze/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: black;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-position: center bottom;
    background-size: 100% auto; }
    .post.post-showcase .hero-background.showcase-3d-music-maze else {
      background: black; }
    .post.post-showcase .hero-background.showcase-3d-music-maze .display-1,
    .post.post-showcase .hero-background.showcase-3d-music-maze .showcase-description {
      color: white; }
  .post.post-showcase .hero-background.showcase-album-availability {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/album-availability/image.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: #131315;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-position: center right;
    background-size: auto 100%; }
    .post.post-showcase .hero-background.showcase-album-availability else {
      background: #131315; }
    .post.post-showcase .hero-background.showcase-album-availability .display-1,
    .post.post-showcase .hero-background.showcase-album-availability .showcase-description {
      color: #51641b; }
    @media (max-width: 991px) {
      .post.post-showcase .hero-background.showcase-album-availability {
        background-image: none; } }
  .post.post-showcase .hero-background.showcase-acrostify {
    background: #566f0f; }
    .post.post-showcase .hero-background.showcase-acrostify .container {
      /* stylelint-disable selector-type-no-unknown */
      background: url("/images/community/showcase/acrostify/image.png");
      /* stylelint-enable selector-type-no-unknown */
      background-color: #566f0f;
      background-repeat: no-repeat;
      background-position: center right;
      background-size: auto 100%; }
      .post.post-showcase .hero-background.showcase-acrostify .container else {
        background: #566f0f; }
      .post.post-showcase .hero-background.showcase-acrostify .container .display-1,
      .post.post-showcase .hero-background.showcase-acrostify .container .showcase-description {
        color: white; }
      @media (max-width: 991px) {
        .post.post-showcase .hero-background.showcase-acrostify .container {
          background: #566f0f; } }
    @media (min-width: 992px) and (max-width: 1199px) {
      .post.post-showcase .hero-background.showcase-acrostify .container {
        background-size: auto 75%; } }
  .post.post-showcase .hero-background.showcase-bpm-music {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/bpm-music/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-position: bottom right;
    background-size: auto 80%; }
    .post.post-showcase .hero-background.showcase-bpm-music else {
      background: white; }
    .post.post-showcase .hero-background.showcase-bpm-music .display-1,
    .post.post-showcase .hero-background.showcase-bpm-music .showcase-description {
      color: #141414; }
    @media (min-width: 992px) and (max-width: 1199px) {
      .post.post-showcase .hero-background.showcase-bpm-music {
        background-image: none; } }
    @media (max-width: 991px) {
      .post.post-showcase .hero-background.showcase-bpm-music {
        background-image: none; } }
  .post.post-showcase .hero-background.showcase-boil-the-frog {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/boil-the-frog/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: #f2f2f4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-size: cover; }
    .post.post-showcase .hero-background.showcase-boil-the-frog else {
      background: #f2f2f4; }
    .post.post-showcase .hero-background.showcase-boil-the-frog .display-1,
    .post.post-showcase .hero-background.showcase-boil-the-frog .showcase-description {
      color: black; }
  .post.post-showcase .hero-background.showcase-denied {
    background: #e8e8e8; }
    .post.post-showcase .hero-background.showcase-denied .container {
      /* stylelint-disable selector-type-no-unknown */
      background: url("/images/community/showcase/denied/image.png");
      /* stylelint-enable selector-type-no-unknown */
      background-color: #e8e8e8;
      background-repeat: no-repeat;
      background-position: center right;
      background-size: auto 100%; }
      .post.post-showcase .hero-background.showcase-denied .container else {
        background: #e8e8e8; }
      .post.post-showcase .hero-background.showcase-denied .container .display-1,
      .post.post-showcase .hero-background.showcase-denied .container .showcase-description {
        color: #da4143; }
      @media (max-width: 991px) {
        .post.post-showcase .hero-background.showcase-denied .container {
          background: #e8e8e8; } }
    @media (min-width: 992px) and (max-width: 1199px) {
      .post.post-showcase .hero-background.showcase-denied .container {
        background-size: auto 75%; } }
  .post.post-showcase .hero-background.showcase-djay-algoriddim {
    background: #1d1d1b; }
    .post.post-showcase .hero-background.showcase-djay-algoriddim .container {
      /* stylelint-disable selector-type-no-unknown */
      background: url("/images/community/showcase/djay-algoriddim/image.png");
      /* stylelint-enable selector-type-no-unknown */
      background-color: #1d1d1b;
      background-repeat: no-repeat;
      background-position: center right;
      background-size: auto 100%; }
      .post.post-showcase .hero-background.showcase-djay-algoriddim .container else {
        background: #1d1d1b; }
      .post.post-showcase .hero-background.showcase-djay-algoriddim .container .display-1,
      .post.post-showcase .hero-background.showcase-djay-algoriddim .container .showcase-description {
        color: #fbbc3b; }
      @media (max-width: 991px) {
        .post.post-showcase .hero-background.showcase-djay-algoriddim .container {
          background: #1d1d1b; } }
    @media (min-width: 992px) and (max-width: 1199px) {
      .post.post-showcase .hero-background.showcase-djay-algoriddim .container {
        background-size: auto 75%; } }
  .post.post-showcase .hero-background.showcase-elvisualization {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/elvisualization/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: #1b1b1b;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-size: cover; }
    .post.post-showcase .hero-background.showcase-elvisualization else {
      background: #1b1b1b; }
    .post.post-showcase .hero-background.showcase-elvisualization .display-1,
    .post.post-showcase .hero-background.showcase-elvisualization .showcase-description {
      color: #ead7c3; }
  .post.post-showcase .hero-background.showcase-elvis-influence {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/elvis-influence/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-size: cover; }
    .post.post-showcase .hero-background.showcase-elvis-influence else {
      background: #cccccc; }
    .post.post-showcase .hero-background.showcase-elvis-influence .display-1,
    .post.post-showcase .hero-background.showcase-elvis-influence .showcase-description {
      color: black; }
  .post.post-showcase .hero-background.showcase-every-noise {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/every-noise/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-size: cover; }
    .post.post-showcase .hero-background.showcase-every-noise else {
      background: white; }
    .post.post-showcase .hero-background.showcase-every-noise .container {
      background: rgba(255, 255, 255, 0.75); }
    .post.post-showcase .hero-background.showcase-every-noise .display-1,
    .post.post-showcase .hero-background.showcase-every-noise .showcase-description {
      color: #dc668a; }
  .post.post-showcase .hero-background.showcase-klangspektrum {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/klangspektrum/hero.png");
    /* stylelint-enable selector-type-no-unknown */
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-size: cover; }
    .post.post-showcase .hero-background.showcase-klangspektrum else {
      background: white; }
    .post.post-showcase .hero-background.showcase-klangspektrum .display-1,
    .post.post-showcase .hero-background.showcase-klangspektrum .showcase-description {
      color: black; }
  .post.post-showcase .hero-background.showcase-klarafy {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/klarafy/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: #e7e7e7;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-size: cover; }
    .post.post-showcase .hero-background.showcase-klarafy else {
      background: #e7e7e7; }
    .post.post-showcase .hero-background.showcase-klarafy .display-1,
    .post.post-showcase .hero-background.showcase-klarafy .showcase-description {
      color: black; }
    @media (min-width: 992px) and (max-width: 1199px) {
      .post.post-showcase .hero-background.showcase-klarafy {
        background-image: none; } }
    @media (max-width: 991px) {
      .post.post-showcase .hero-background.showcase-klarafy {
        background-image: none; } }
    @media (min-width: 1200px) {
      .post.post-showcase .hero-background.showcase-klarafy .showcase-description {
        width: 75%; } }
  .post.post-showcase .hero-background.showcase-magic-playlist {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/magic-playlist/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-position: center right;
    background-size: auto 100%; }
    .post.post-showcase .hero-background.showcase-magic-playlist else {
      background: white; }
    .post.post-showcase .hero-background.showcase-magic-playlist .display-1,
    .post.post-showcase .hero-background.showcase-magic-playlist .showcase-description {
      color: #1c1232; }
    @media (min-width: 992px) and (max-width: 1199px) {
      .post.post-showcase .hero-background.showcase-magic-playlist {
        background-image: none; } }
    @media (max-width: 991px) {
      .post.post-showcase .hero-background.showcase-magic-playlist {
        background-image: none; } }
  .post.post-showcase .hero-background.showcase-mangomoji {
    /* stylelint-disable selector-type-no-unknown */
    background: url("");
    /* stylelint-enable selector-type-no-unknown */
    background-color: #f2d082;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center; }
    .post.post-showcase .hero-background.showcase-mangomoji else {
      background: #f2d082; }
    .post.post-showcase .hero-background.showcase-mangomoji .display-1,
    .post.post-showcase .hero-background.showcase-mangomoji .showcase-description {
      color: black; }
  .post.post-showcase .hero-background.showcase-music-popcorn {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/music-popcorn/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-position: center right;
    background-size: auto 100%; }
    .post.post-showcase .hero-background.showcase-music-popcorn else {
      background: #fff; }
    .post.post-showcase .hero-background.showcase-music-popcorn .container {
      background: rgba(255, 255, 255, 0.75); }
    .post.post-showcase .hero-background.showcase-music-popcorn .display-1,
    .post.post-showcase .hero-background.showcase-music-popcorn .showcase-description {
      color: #f08637; }
  .post.post-showcase .hero-background.showcase-music-tonight {
    background: #eeeeee; }
    .post.post-showcase .hero-background.showcase-music-tonight .container {
      /* stylelint-disable selector-type-no-unknown */
      background: url("/images/community/showcase/music-tonight/image.png");
      /* stylelint-enable selector-type-no-unknown */
      background-color: #eeeeee;
      background-repeat: no-repeat;
      background-position: center right;
      background-size: auto 150%; }
      .post.post-showcase .hero-background.showcase-music-tonight .container else {
        background: #eeeeee; }
      .post.post-showcase .hero-background.showcase-music-tonight .container .display-1,
      .post.post-showcase .hero-background.showcase-music-tonight .container .showcase-description {
        color: black; }
      @media (max-width: 991px) {
        .post.post-showcase .hero-background.showcase-music-tonight .container {
          background: #eeeeee; } }
  .post.post-showcase .hero-background.showcase-musixmatch {
    background: #e8e8e8; }
    .post.post-showcase .hero-background.showcase-musixmatch .container {
      /* stylelint-disable selector-type-no-unknown */
      background: url("/images/community/showcase/musixmatch/hero.png");
      /* stylelint-enable selector-type-no-unknown */
      background-color: #e8e8e8;
      background-repeat: no-repeat;
      background-position: center right;
      background-size: auto 150%; }
      .post.post-showcase .hero-background.showcase-musixmatch .container else {
        background: #e8e8e8; }
      .post.post-showcase .hero-background.showcase-musixmatch .container .display-1,
      .post.post-showcase .hero-background.showcase-musixmatch .container .showcase-description {
        color: #ee274a; }
      @media (max-width: 991px) {
        .post.post-showcase .hero-background.showcase-musixmatch .container {
          background: #e8e8e8; } }
    @media (min-width: 992px) and (max-width: 1199px) {
      .post.post-showcase .hero-background.showcase-musixmatch .container {
        background-size: auto 100%; } }
  .post.post-showcase .hero-background.showcase-pacemaker-dj {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/pacemaker-dj/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: #e73a65;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-size: cover; }
    .post.post-showcase .hero-background.showcase-pacemaker-dj else {
      background: #e73a65; }
    .post.post-showcase .hero-background.showcase-pacemaker-dj .display-1,
    .post.post-showcase .hero-background.showcase-pacemaker-dj .showcase-description {
      color: "white"; }
  .post.post-showcase .hero-background.showcase-playlist-manager {
    background: #34a1d6; }
    .post.post-showcase .hero-background.showcase-playlist-manager .container {
      /* stylelint-disable selector-type-no-unknown */
      background: url("/images/community/showcase/playlist-manager/hero.jpg");
      /* stylelint-enable selector-type-no-unknown */
      background-color: #34a1d6;
      background-repeat: no-repeat;
      background-position: center right;
      background-size: auto 100%; }
      .post.post-showcase .hero-background.showcase-playlist-manager .container else {
        background: #34a1d6; }
      .post.post-showcase .hero-background.showcase-playlist-manager .container .display-1,
      .post.post-showcase .hero-background.showcase-playlist-manager .container .showcase-description {
        color: "white"; }
      @media (max-width: 991px) {
        .post.post-showcase .hero-background.showcase-playlist-manager .container {
          background: #34a1d6; } }
  .post.post-showcase .hero-background.showcase-roadtrip-mixtape {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/roadtrip-mixtape/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: #abccfb;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-size: cover; }
    .post.post-showcase .hero-background.showcase-roadtrip-mixtape else {
      background: #abccfb; }
    .post.post-showcase .hero-background.showcase-roadtrip-mixtape .container {
      background: rgba(171, 204, 251, 0.8); }
    .post.post-showcase .hero-background.showcase-roadtrip-mixtape .display-1,
    .post.post-showcase .hero-background.showcase-roadtrip-mixtape .showcase-description {
      color: #4879c1; }
  .post.post-showcase .hero-background.showcase-runkeeper {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/runkeeper/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: #1cc9d9;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-position: bottom right;
    background-size: auto 100%; }
    .post.post-showcase .hero-background.showcase-runkeeper else {
      background: #1cc9d9; }
    .post.post-showcase .hero-background.showcase-runkeeper .display-1,
    .post.post-showcase .hero-background.showcase-runkeeper .showcase-description {
      color: white; }
    @media (min-width: 992px) and (max-width: 1199px) {
      .post.post-showcase .hero-background.showcase-runkeeper {
        background-image: none; } }
    @media (max-width: 991px) {
      .post.post-showcase .hero-background.showcase-runkeeper {
        background-image: none; } }
  .post.post-showcase .hero-background.showcase-setify {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/setify/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: #333333;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-size: cover; }
    .post.post-showcase .hero-background.showcase-setify else {
      background: #333333; }
    .post.post-showcase .hero-background.showcase-setify .container {
      background-color: rgba(51, 51, 51, 0.8); }
    .post.post-showcase .hero-background.showcase-setify .display-1,
    .post.post-showcase .hero-background.showcase-setify .showcase-description {
      color: white; }
  .post.post-showcase .hero-background.showcase-shazam {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/shazam/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: #f59b23;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center; }
    .post.post-showcase .hero-background.showcase-shazam else {
      background: #f59b23; }
    .post.post-showcase .hero-background.showcase-shazam .display-1,
    .post.post-showcase .hero-background.showcase-shazam .showcase-description {
      color: white; }
  .post.post-showcase .hero-background.showcase-six-degrees-of-kanye-west {
    background: #f58b57; }
    .post.post-showcase .hero-background.showcase-six-degrees-of-kanye-west .container {
      /* stylelint-disable selector-type-no-unknown */
      background: url("/images/community/showcase/six-degrees-of-kanye-west/image.png");
      /* stylelint-enable selector-type-no-unknown */
      background-color: #f58b57;
      background-repeat: no-repeat;
      background-position: center right;
      background-size: auto 100%; }
      .post.post-showcase .hero-background.showcase-six-degrees-of-kanye-west .container else {
        background: #f58b57; }
      .post.post-showcase .hero-background.showcase-six-degrees-of-kanye-west .container .display-1,
      .post.post-showcase .hero-background.showcase-six-degrees-of-kanye-west .container .showcase-description {
        color: black; }
      @media (max-width: 991px) {
        .post.post-showcase .hero-background.showcase-six-degrees-of-kanye-west .container {
          background: #f58b57; } }
  .post.post-showcase .hero-background.showcase-spotify-artist-explorer {
    /* stylelint-disable selector-type-no-unknown */
    background: url("/images/community/showcase/spotify-artist-explorer/hero.jpg");
    /* stylelint-enable selector-type-no-unknown */
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-size: cover; }
    .post.post-showcase .hero-background.showcase-spotify-artist-explorer else {
      background: white; }
    .post.post-showcase .hero-background.showcase-spotify-artist-explorer .container {
      background-color: rgba(255, 255, 255, 0.8); }
    .post.post-showcase .hero-background.showcase-spotify-artist-explorer .display-1,
    .post.post-showcase .hero-background.showcase-spotify-artist-explorer .showcase-description {
      color: #424242; }
  .post.post-showcase .hero-background.showcase-spotify-dedup {
    background: #e8e8e8; }
    .post.post-showcase .hero-background.showcase-spotify-dedup .container {
      /* stylelint-disable selector-type-no-unknown */
      background: url("/images/community/showcase/spotify-dedup/image.png");
      /* stylelint-enable selector-type-no-unknown */
      background-color: #e8e8e8;
      background-repeat: no-repeat;
      background-position: center right;
      background-size: auto 100%; }
      .post.post-showcase .hero-background.showcase-spotify-dedup .container else {
        background: #e8e8e8; }
      .post.post-showcase .hero-background.showcase-spotify-dedup .container .display-1,
      .post.post-showcase .hero-background.showcase-spotify-dedup .container .showcase-description {
        color: #8a8a8a; }
      @media (max-width: 991px) {
        .post.post-showcase .hero-background.showcase-spotify-dedup .container {
          background: #e8e8e8; } }
  .post.post-showcase .hero-background.showcase-tv-player-for-spotify {
    background: #84be00; }
    .post.post-showcase .hero-background.showcase-tv-player-for-spotify .container {
      /* stylelint-disable selector-type-no-unknown */
      background: url("/images/community/showcase/tv-player-for-spotify/image.png");
      /* stylelint-enable selector-type-no-unknown */
      background-color: #84be00;
      background-repeat: no-repeat;
      background-position: center right;
      background-size: auto 100%; }
      .post.post-showcase .hero-background.showcase-tv-player-for-spotify .container else {
        background: #84be00; }
      .post.post-showcase .hero-background.showcase-tv-player-for-spotify .container .display-1,
      .post.post-showcase .hero-background.showcase-tv-player-for-spotify .container .showcase-description {
        color: white; }
      @media (max-width: 991px) {
        .post.post-showcase .hero-background.showcase-tv-player-for-spotify .container {
          background: #84be00; } }
    @media (min-width: 992px) and (max-width: 1199px) {
      .post.post-showcase .hero-background.showcase-tv-player-for-spotify .container {
        background-size: auto 75%; } }

#search-container {
  background: black;
  color: white;
  height: 100vh;
  left: 0;
  overflow-y: scroll;
  padding: 35px 20px 55px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10; }
  #search-container .navbar-form {
    border-top: 0;
    margin: 0 0 20px; }
  #search-container > .navbar-brand svg {
    height: auto;
    padding: 0;
    width: 315px; }
  #search-container #exit-search {
    padding: 20px;
    position: absolute;
    right: 0;
    top: 18px;
    z-index: 11; }
    #search-container #exit-search .svg-close {
      fill: white;
      height: 35px;
      width: 35px; }
  #search-container form {
    height: 140px;
    padding-left: 0;
    width: 100%; }
    #search-container form .form-group {
      clear: both;
      display: block; }
    #search-container form input {
      background-color: transparent;
      border: none;
      color: white;
      height: 100%;
      font-size: 96px;
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1.15;
      padding-left: 0;
      position: relative;
      z-index: 11; }
      #search-container form input::-webkit-input-placeholder {
        color: #333; }
  #search-container #search-categories {
    border-bottom: solid 1px #616467;
    margin-left: -55px;
    margin-right: -45px;
    opacity: 0;
    padding: 55px 55px 17px;
    transition: opacity 0.3s ease; }
    #search-container #search-categories .underline.active::before {
      bottom: inherit;
      display: block;
      position: relative;
      top: 30px; }
    #search-container #search-categories li {
      margin-right: 1.5em;
      text-transform: uppercase; }
      #search-container #search-categories li:first-child {
        padding-left: 0; }
      #search-container #search-categories li a {
        color: white; }
  #search-container #search-results {
    margin: 5em 0;
    max-width: 650px;
    opacity: 0;
    padding-left: 0;
    transition: opacity 0.3s ease; }
    #search-container #search-results a {
      color: white;
      display: block;
      margin: 3em 0; }
      #search-container #search-results a > .result-title,
      #search-container #search-results a > .highlight-green {
        color: #1db954; }
      #search-container #search-results a > .result-title {
        font-size: 16px; }
      #search-container #search-results a p {
        margin-bottom: 0; }
        #search-container #search-results a p:last-of-type {
          font-size: 12px; }
        #search-container #search-results a p a {
          color: white;
          font-size: 13px;
          text-decoration: underline; }
  @media (max-width: 991px) {
    #search-container {
      padding: 20px 20px 55px; }
      #search-container .navbar-form {
        border-bottom: 0;
        box-shadow: none;
        height: 90px;
        margin: 40px -10px auto; }
        #search-container .navbar-form input {
          font-size: 32px;
          height: auto;
          padding: 0; }
      #search-container > .navbar-brand svg {
        padding: 15px 0;
        width: 250px; }
      #search-container #search-categories {
        border-bottom: 0;
        margin-left: 15px;
        margin-right: 15px;
        padding: 0;
        width: 565px; }
      #search-container #search-results {
        margin: auto 0; }
        #search-container #search-results a {
          margin: 0 -20px;
          padding: 1em 20px; }
        #search-container #search-results a.result:hover,
        #search-container #search-results a.result:focus {
          background: #282828; }
      #search-container nav {
        overflow-x: scroll;
        margin: auto -15px; }
      #search-container .navbar-logo::after {
        left: 43px; } }

.documentation:not(.split-screen) article {
  max-width: 900px; }

article.post {
  padding-top: 0; }
  @media (min-width: 1200px) {
    article.post {
      padding-left: 45px; } }
  article.post h1:not(.no-padding),
  article.post h2:not(.no-padding),
  article.post h3:not(.no-padding),
  article.post form:not(.no-padding) {
    padding-top: 45px; }
  article.post form .panel {
    margin-top: 25px; }
  article.post .gist td {
    border-top: none; }
  article.post .display-1 {
    margin-top: 0;
    padding-top: 40px; }
  article.post .docs {
    background: none;
    padding: 0 0 40px; }

.docs {
  padding: 20px 1em 40px;
  background-color: #f8f8f8; }
  @media (max-width: 420px) {
    .docs .display-1 {
      font-size: 40px; } }
  .docs p.lead {
    font-size: 24px;
    max-width: 670px; }
  @media (min-width: 768px) {
    .docs {
      padding: 3em 6em 5em; } }

@media (min-width: 768px) {
  .platforms {
    margin-top: 2em; }
    .platforms svg {
      width: 50px;
      height: 50px; } }
@media (max-width: 767px) {
  .platforms {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; }
    .platforms .platform-link {
      margin-left: 10px;
      margin-right: 10px; } }
.platforms .platform-link:hover svg *,
.platforms .bg-accent:hover > svg * {
  fill: white; }
.platforms .bg-accent {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  transition: 0.1s ease; }
  .platforms .bg-accent svg {
    align-self: center;
    height: 60px;
    width: 60px; }
    .platforms .bg-accent svg * {
      fill: white; }

.features {
  padding: 35px 1em 50px; }
  @media (min-width: 768px) {
    .features {
      padding: 4em 5em 8em; }
      .features hr {
        width: 650px; }
      .features .col-md-5 {
        margin-top: 10px; } }
  .features .col-md-5 {
    margin-top: 45px; }
  .features hr {
    border-bottom: 2px solid #d9dadc;
    border-top: 0;
    margin-bottom: 0; }
  .features .supported-platforms {
    display: flex; }
  .features .icon-desc {
    margin-right: 2em; }
  .features svg {
    display: block;
    height: 40px;
    width: 40px;
    margin: 1.5em auto 0.5em; }

.platform-link {
  text-align: center;
  display: inline-block;
  color: black;
  margin: 30px 0 0;
  vertical-align: top; }
  @media (min-width: 768px) {
    .platform-link:not(:last-child) {
      margin-right: 59px; } }
  .platform-link:hover {
    color: inherit; }

@media (min-width: 768px) {
  .platform-icon {
    width: 100px;
    height: 100px; }

  .platform-title {
    width: 100px; } }
.platform-icon {
  width: 120px;
  height: 120px;
  border-radius: 100px; }

.platform-title {
  margin-top: 20px;
  text-transform: uppercase;
  font-weight: 700;
  width: 120px; }

.showcase main {
  display: flex;
  flex-direction: column;
  padding: 0 15px; }
  @media (min-width: 992px) {
    .showcase main {
      padding: 3em 5em; } }
  .showcase main .selected-category {
    font-weight: 100;
    margin-top: 0; }
    @media (min-width: 992px) {
      .showcase main .selected-category {
        font-size: 48px; } }
  .showcase main .page-description {
    margin-bottom: 0;
    display: inline-block; }
    @media (min-width: 480px) {
      .showcase main .page-description {
        max-width: 420px; } }
  .showcase main #showcase-submit {
    display: inline-block;
    float: right;
    margin: 22px 0 0; }
    @media (max-width: 767px) {
      .showcase main #showcase-submit {
        float: none;
        display: block; } }
  @media (min-width: 768px) {
    .showcase main #showcase-submit-modal .modal-dialog {
      width: 800px; } }
  .showcase main .tile {
    margin-right: 3vw;
    padding: 0;
    background-size: cover;
    background-position: center; }
    @media (min-width: 768px) {
      .showcase main .tile:nth-child(5n + 3), .showcase main .tile:nth-child(5n) {
        margin-right: 0; }
      .showcase main .tile:nth-child(10n + 5), .showcase main .tile:nth-child(10n-1) {
        flex-flow: row wrap;
        width: 53vw;
        max-width: calc(900px + 3vw); }
        .showcase main .tile:nth-child(10n + 5) .tile-title, .showcase main .tile:nth-child(10n-1) .tile-title {
          width: 100%; }
        .showcase main .tile:nth-child(10n + 5) .content-text, .showcase main .tile:nth-child(10n-1) .content-text {
          width: 100%; }
          .showcase main .tile:nth-child(10n + 5) .content-text h2, .showcase main .tile:nth-child(10n-1) .content-text h2 {
            margin-bottom: 0;
            align-self: flex-end;
            margin-right: 3vw; }
          .showcase main .tile:nth-child(10n + 5) .content-text p, .showcase main .tile:nth-child(10n-1) .content-text p {
            align-self: flex-end; }
        .showcase main .tile:nth-child(10n + 5) .showcase-title, .showcase main .tile:nth-child(10n-1) .showcase-title {
          width: 53vw;
          max-width: 900px; } }
    .showcase main .tile .showcase-title {
      margin-top: 0;
      position: absolute;
      padding: 40px;
      width: 25vw;
      max-width: 450px; }
    .showcase main .tile .showcase-hover {
      background-color: rgba(255, 255, 255, 0.95);
      color: #616467;
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
      justify-content: center;
      opacity: 0;
      padding: 40px;
      text-align: center;
      transition: opacity 0.3s ease; }
    .showcase main .tile.single:not(:nth-of-type(3)) {
      margin-right: 3vw; }
    .showcase main .tile:not(.featured-image):hover > h2:nth-of-type(1) {
      display: none; }
    .showcase main .tile:not(.featured-image):hover .showcase-hover {
      opacity: 1; }
    .showcase main .tile.featured-image:hover .showcase-hover {
      opacity: 1; }
  .showcase main .wide-tile .content-text {
    display: block; }
  .showcase main .long-tile h1 {
    color: white; }

.terms-container ol ol {
  list-style-type: lower-alpha; }
.terms-container ol ol ol {
  list-style-type: lower-roman; }
.terms-container li {
  margin-bottom: 10px; }
.terms-container .copyright {
  color: #1db954; }

.terms-container {
  background-color: #f8f8f8;
  padding: 0; }

.terms-header {
  max-width: 1800px; }

.terms-header,
.terms-main,
.terms-footer {
  padding: 60px; }
  @media screen and (max-width: 700px) {
    .terms-header,
    .terms-main,
    .terms-footer {
      padding: 30px; } }

.terms-version {
  color: #1db954;
  font-size: 16px;
  font-weight: 300; }

.terms-contents {
  list-style: none;
  padding: 0;
  margin-top: 40px;
  display: flex;
  flex-flow: column wrap;
  height: 370px;
  width: 1000px; }
  .terms-contents li {
    color: black;
    font-size: 20px;
    width: 400px;
    padding: 10px 0;
    margin-bottom: 0;
    border-bottom: 1px solid #1db954; }
    .terms-contents li:hover {
      color: #1db954; }
  @media screen and (max-width: 1024px) {
    .terms-contents {
      height: auto;
      width: 100%; }
      .terms-contents li {
        width: auto; } }

.terms-contents-icon {
  display: inline-block;
  background-color: #1db954;
  color: white;
  font-weight: 700px;
  font-size: 16px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  margin-right: 15px; }

a:nth-of-type(6n + 1) .terms-contents-icon {
  background-color: #f59b23; }

a:nth-of-type(6n + 2) .terms-contents-icon {
  background-color: #509bf5; }

a:nth-of-type(6n + 3) .terms-contents-icon {
  background-color: #f573a0; }

a:nth-of-type(6n + 4) .terms-contents-icon {
  background-color: #19e68c; }

a:nth-of-type(6n + 5) .terms-contents-icon {
  background-color: #af2896; }

a:nth-of-type(6n + 6) .terms-contents-icon {
  background-color: #ff4632; }

.terms-main {
  background-color: white; }

.terms-section {
  margin: 30px auto;
  max-width: 1800px; }
  .terms-section > * {
    padding: 0; }

.terms-section-title {
  margin: 0; }

.terms-section-number {
  color: #1db954;
  margin-top: 0; }

.terms-clause-title {
  font-weight: 500; }

.use-cases article.post {
  padding: 45px 0 auto auto; }
  .use-cases article.post h1,
  .use-cases article.post h2,
  .use-cases article.post h3 {
    padding-top: 25px; }

.console #secondary-navbar {
  display: none; }
.console form label {
  color: black;
  font-weight: 100; }
.console .header-params .input-group {
  display: flex;
  margin-bottom: 60px; }
  .console .header-params .input-group .input-group {
    width: 100%; }
  .console .header-params .input-group .btn-stroked-dark {
    min-width: 208px; }
  .console .header-params .input-group input {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
.console .btn-primary {
  min-width: 113px;
  margin-right: 25px; }
.console .btn {
  margin-bottom: 20px; }
.console #response-body pre {
  margin-top: 0; }
.console .modal-dialog form,
.console .modal-dialog h2,
.console .modal-dialog p {
  padding: 0;
  width: auto;
  display: block; }
.console .modal-dialog input[type="submit"] {
  display: block;
  margin: 0 auto; }
.console .console-endpoint-description {
  font-size: 14px;
  margin-bottom: 0; }
  .console .console-endpoint-description a {
    font-weight: 400;
    margin-left: 15px;
    text-decoration: underline;
    text-transform: uppercase;
    color: black; }
    .console .console-endpoint-description a:hover, .console .console-endpoint-description a:focus {
      color: #333333; }
    .console .console-endpoint-description a:active {
      color: #333333; }
  .console .console-endpoint-description tr td:first-child {
    font-weight: 400;
    text-align: right;
    padding: 7px 20px;
    white-space: nowrap; }
  .console .console-endpoint-description tr td:last-child {
    width: 100%;
    word-break: break-word; }
  .console .console-endpoint-description td {
    border-top: none;
    border-bottom: 1px solid #d9dadc; }

.page-404 {
  position: relative; }
  .page-404 .page-404-container {
    background-color: #222326;
    padding-left: 60px;
    padding-right: 60px; }
    .page-404 .page-404-container .initial-screen {
      padding-bottom: 60px;
      padding-top: 60px; }
      .page-404 .page-404-container .initial-screen .display-2,
      .page-404 .page-404-container .initial-screen h4 {
        color: white; }
      .page-404 .page-404-container .initial-screen h4 {
        font-weight: 200;
        line-height: 1.5; }

main#branding-guidelines {
  width: 1000px;
  margin: auto; }
  main#branding-guidelines img {
    /* stylelint-disable property-no-unknown, declaration-block-no-duplicate-properties */
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* stylelint-enable property-no-unknown, declaration-block-no-duplicate-properties */ }
  main#branding-guidelines h3 {
    margin-top: 40px; }
  main#branding-guidelines .btn-primary {
    margin: 20px 0; }
  main#branding-guidelines .text-header {
    font-size: 122px;
    color: black;
    font-weight: bold;
    line-height: 80%;
    letter-spacing: -5px;
    margin-bottom: 30px;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1; }
  @media screen and (max-width: 480px) {
    main#branding-guidelines .text-header {
      font-size: 80px; } }
  main#branding-guidelines .text-description {
    font-size: 17px;
    color: #999; }
  main#branding-guidelines .text-info {
    font-size: 14px;
    color: #757575; }
  main#branding-guidelines .row.with-margin {
    margin-top: 30px;
    margin-bottom: -30px; }
  main#branding-guidelines .row.box-gray {
    background-color: #f6f6f6;
    padding-top: 30px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0; }
  main#branding-guidelines div.row.with-margin > div:not(.row) {
    margin-bottom: 30px; }
  main#branding-guidelines .divider {
    width: 75px;
    height: 7px;
    background-color: #1ed760;
    margin-top: 70px; }
  main#branding-guidelines div.row + div.divider {
    margin-top: 55px; }
  main#branding-guidelines .line {
    height: 1px;
    background-color: #757575; }
  main#branding-guidelines .color-spgreen {
    color: #1ed760; }
  main#branding-guidelines .color-red {
    color: #ff1e00; }
  main#branding-guidelines section.page_content img.img-1695 {
    max-width: 847px;
    width: 100%; }
  main#branding-guidelines section.page_content img.img-386 {
    max-width: 193px;
    width: 100%; }
  main#branding-guidelines section.page_content img.img-824 {
    max-width: 412px;
    width: 100%; }
  main#branding-guidelines section.page_content img.img-170 {
    max-width: 83px;
    width: 100%; }
  main#branding-guidelines section.page_content div.row img + p {
    margin-bottom: 18px; }
  main#branding-guidelines section.page_content div.row p {
    margin-bottom: 0; }
  main#branding-guidelines section.page_content div.row p.text-example-large {
    font-size: 82px;
    line-height: 85%;
    font-weight: bold;
    letter-spacing: -4px;
    padding-top: 40px;
    padding-bottom: 15px; }
  main#branding-guidelines section.page_content div.row p.text-example-medium {
    font-size: 40px;
    line-height: 85%;
    font-weight: bold;
    padding-top: 20px; }
  main#branding-guidelines section.page_content .widget-small {
    margin-top: 70px; }

/**
 * Base styles
 */
.self-provisioning-ui .jumbotron {
  background-color: #fff;
  padding-left: 0;
  padding-right: 0; }

.self-provisioning-ui .inner-container {
  padding: 40px 0; }
  .self-provisioning-ui .inner-container h1,
  .self-provisioning-ui .inner-container h2,
  .self-provisioning-ui .inner-container h3 {
    margin-top: 0; }

/**
 * Control Labels
 */
.self-provisioning-ui .required-field,
.self-provisioning-ui .control-label.feedback.danger {
  color: #d9534f; }

.create-app form {
  margin-top: 20px; }
.create-app div.form-buttons {
  margin-top: 20px; }
  .create-app div.form-buttons span {
    margin-right: 15px;
    margin-left: 10px;
    font-weight: 500;
    font-size: 14px; }

#create-app-modal {
  top: 4em;
  bottom: auto;
  max-height: 90vh; }
  #create-app-modal .modal-dialog {
    width: 500px; }
  @media screen and (max-width: 992px) {
    #create-app-modal .modal-dialog {
      width: auto; } }
  #create-app-modal .modal-header {
    border-radius: 6px 6px 0 0;
    color: white;
    padding: 30px 0; }
  #create-app-modal .modal-title {
    text-transform: uppercase;
    margin: 10px 0; }
  #create-app-modal .modal-body {
    padding: 35px; }
  #create-app-modal .modal-footer {
    text-align: center; }
  #create-app-modal .form-control {
    margin: 10px 0;
    border: none;
    border-bottom: 1px solid #d9dadc;
    box-shadow: none; }
  #create-app-modal .validate-error {
    border-bottom-color: #d9534f; }

.self-provisioning-ui .applications-list {
  display: flex;
  flex-direction: column;
  padding: 0 15px; }
  @media (min-width: 992px) {
    .self-provisioning-ui .applications-list {
      padding: 3em 5em; } }
  @media (max-width: 991px) {
    .self-provisioning-ui .applications-list .tile-page-wrapper .tile {
      height: 40vw;
      width: 100%;
      max-width: none; } }
  @media (max-width: 991px) {
    .self-provisioning-ui .applications-list .tile-page-wrapper .tile {
      margin-right: 0;
      height: 100%; } }
  @media (min-width: 768px) {
    .self-provisioning-ui .applications-list header {
      display: flex;
      align-items: baseline;
      justify-content: space-between; } }
  .self-provisioning-ui .applications-list header .call-to-action {
    margin: -20px 0 0 20px; }
    @media (max-width: 767px) {
      .self-provisioning-ui .applications-list header .call-to-action {
        margin: 10px 10px 10px 0; } }
  .self-provisioning-ui .applications-list header .btn.btn-stroked-black {
    color: black;
    box-shadow: 0 0 0 2px black inset; }
    .self-provisioning-ui .applications-list header .btn.btn-stroked-black:hover, .self-provisioning-ui .applications-list header .btn.btn-stroked-black:active, .self-provisioning-ui .applications-list header .btn.btn-stroked-black:focus {
      background: black;
      color: white; }
  .self-provisioning-ui .applications-list ul .tile {
    background-color: #1db954;
    list-style: none; }
    @media (min-width: 768px) {
      .self-provisioning-ui .applications-list ul .tile:nth-child(3n) {
        margin-right: 0; } }
    .self-provisioning-ui .applications-list ul .tile:not(.empty-filler-tile):hover a {
      background-color: rgba(255, 255, 255, 0.4); }
    .self-provisioning-ui .applications-list ul .tile:not(.empty-filler-tile) a {
      height: 100%;
      width: 100%;
      display: block;
      transition: background-color 0.3s ease; }
    .self-provisioning-ui .applications-list ul .tile .tile-header {
      border-bottom: 1px solid white;
      padding: 15px 20px 7px; }
      .self-provisioning-ui .applications-list ul .tile .tile-header .tile-header-dot {
        background: transparent;
        border: 1px solid white;
        border-radius: 50%;
        display: inline-block;
        height: 15px;
        margin-right: 4px;
        width: 15px; }
    .self-provisioning-ui .applications-list ul .tile .tile-content {
      padding: 17px 20px;
      height: calc(100% - 47px); }
      .self-provisioning-ui .applications-list ul .tile .tile-content .tile-title {
        margin-top: 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; }
        @media (min-width: 1500px) {
          .self-provisioning-ui .applications-list ul .tile .tile-content .tile-title {
            min-height: calc(42px * 2); } }
      .self-provisioning-ui .applications-list ul .tile .tile-content .app-description {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical; }
      @media (min-width: 1200px) and (max-width: 1500px) {
        .self-provisioning-ui .applications-list ul .tile .tile-content .app-description {
          -webkit-line-clamp: 2; }
        .self-provisioning-ui .applications-list ul .tile .tile-content .tile-title {
          -webkit-line-clamp: 1; } }
      @media (min-width: 992px) and (max-width: 1199px) {
        .self-provisioning-ui .applications-list ul .tile .tile-content .tile-title {
          -webkit-line-clamp: 1; }
        .self-provisioning-ui .applications-list ul .tile .tile-content .app-description {
          display: none; }
        .self-provisioning-ui .applications-list ul .tile .tile-content .app-label {
          padding-top: 0; } }
      @media (max-width: 767px) {
        .self-provisioning-ui .applications-list ul .tile .tile-content .tile-title {
          -webkit-line-clamp: 1; } }
      .self-provisioning-ui .applications-list ul .tile .tile-content .glue-to-bottom {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: calc(100% - 42px); }
        @media (min-width: 1500px) {
          .self-provisioning-ui .applications-list ul .tile .tile-content .glue-to-bottom {
            min-height: calc(100% - 42px * 2); } }
      .self-provisioning-ui .applications-list ul .tile .tile-content .app-client-id,
      .self-provisioning-ui .applications-list ul .tile .tile-content .app-label {
        font-size: 13px;
        font-weight: 400; }
      .self-provisioning-ui .applications-list ul .tile .tile-content .app-client-id {
        letter-spacing: 1px;
        padding: 1em 0;
        text-transform: uppercase; }
        .self-provisioning-ui .applications-list ul .tile .tile-content .app-client-id code {
          background: transparent;
          color: white;
          padding: 0;
          text-transform: lowercase; }
      .self-provisioning-ui .applications-list ul .tile .tile-content .app-description {
        font-size: 14px; }
      .self-provisioning-ui .applications-list ul .tile .tile-content .app-label {
        padding-top: 1em;
        text-transform: uppercase; }
  .self-provisioning-ui .applications-list ul .empty-filler-tile {
    background-color: white;
    border: 2px dashed #efefef;
    transition: border-color 0.3s ease; }
    .self-provisioning-ui .applications-list ul .empty-filler-tile .tile-header {
      border-bottom: 2px solid #efefef; }
      .self-provisioning-ui .applications-list ul .empty-filler-tile .tile-header .tile-header-dot {
        background: #efefef;
        width: 17px;
        height: 17px; }
    .self-provisioning-ui .applications-list ul .empty-filler-tile .tile-content {
      color: #efefef; }
      .self-provisioning-ui .applications-list ul .empty-filler-tile .tile-content .bracket-underscore {
        padding-top: 1em; }
        .self-provisioning-ui .applications-list ul .empty-filler-tile .tile-content .bracket-underscore::before {
          content: '>_';
          font-size: 40px; }
      .self-provisioning-ui .applications-list ul .empty-filler-tile .tile-content .quote-lines {
        padding-bottom: 2em; }
        @media (min-width: 1800px) {
          .self-provisioning-ui .applications-list ul .empty-filler-tile .tile-content .quote-lines {
            padding-top: 5em; } }
        .self-provisioning-ui .applications-list ul .empty-filler-tile .tile-content .quote-lines .quote-line {
          background: #efefef;
          border: 0;
          border-radius: 10px;
          display: block;
          height: 10px;
          margin: 0 0 10px;
          width: 90%; }
          .self-provisioning-ui .applications-list ul .empty-filler-tile .tile-content .quote-lines .quote-line.last-line {
            width: 60%; }
    .self-provisioning-ui .applications-list ul .empty-filler-tile .on-hover-content {
      height: 100%; }
    .self-provisioning-ui .applications-list ul .empty-filler-tile .on-hover-content {
      opacity: 0;
      text-align: center;
      text-transform: uppercase;
      color: #1db954;
      margin: 30% 0; }
      .self-provisioning-ui .applications-list ul .empty-filler-tile .on-hover-content .tile-title {
        margin-bottom: 20px;
        font-weight: 500;
        letter-spacing: 1px; }
      .self-provisioning-ui .applications-list ul .empty-filler-tile .on-hover-content .create-app {
        border: 2px solid #1db954;
        border-radius: 50%;
        font-weight: 500;
        font-size: 25px;
        margin: 0 auto;
        padding: 7px 0;
        height: 55px;
        width: 55px; }
    .self-provisioning-ui .applications-list ul .empty-filler-tile:hover, .self-provisioning-ui .applications-list ul .empty-filler-tile:active, .self-provisioning-ui .applications-list ul .empty-filler-tile:focus {
      border-color: #1db954; }
      .self-provisioning-ui .applications-list ul .empty-filler-tile:hover .on-hover-content, .self-provisioning-ui .applications-list ul .empty-filler-tile:active .on-hover-content, .self-provisioning-ui .applications-list ul .empty-filler-tile:focus .on-hover-content {
        opacity: 1;
        transition: opacity 0.3s ease; }
      .self-provisioning-ui .applications-list ul .empty-filler-tile:hover .tile-header,
      .self-provisioning-ui .applications-list ul .empty-filler-tile:hover .tile-content, .self-provisioning-ui .applications-list ul .empty-filler-tile:active .tile-header,
      .self-provisioning-ui .applications-list ul .empty-filler-tile:active .tile-content, .self-provisioning-ui .applications-list ul .empty-filler-tile:focus .tile-header,
      .self-provisioning-ui .applications-list ul .empty-filler-tile:focus .tile-content {
        display: none; }

/* Dashboard | Login Page */
.self-provisioning-ui .dashboard-login-view .dashboard-login-header {
  background: url("/images/dashboard/login/header.jpg") transparent;
  background-position: center center;
  background-size: 100% auto; }
  .self-provisioning-ui .dashboard-login-view .dashboard-login-header h1 {
    color: #fff;
    display: block;
    font-size: 70px;
    line-height: 1.3;
    margin: auto;
    padding: 100px 0;
    text-align: left; }
.self-provisioning-ui .dashboard-login-view .inner-container > .login-with-text > button {
  margin-right: 10px;
  position: relative;
  top: -1px; }
@media (max-width: 1200px) {
  .self-provisioning-ui .dashboard-login-view .dashboard-login-header {
    background-size: auto 100%; } }
@media (max-width: 1024px) {
  .self-provisioning-ui .dashboard-login-view .inner-container > .login-with-text > button {
    display: block;
    margin-bottom: 15px; } }
@media (max-width: 780px) {
  .self-provisioning-ui .dashboard-login-view .dashboard-login-header {
    background-position: -100px center; } }
@media (max-width: 400px) {
  .self-provisioning-ui .dashboard-login-view .dashboard-login-header h1 {
    font-size: 40px; }
    .self-provisioning-ui .dashboard-login-view .dashboard-login-header h1 br {
      display: inline; } }

.single-app-view {
  background-color: #0f0f0f;
  border-top: 1px solid #616467;
  padding: 35px 2.5em 35px 50px; }
  .single-app-view .client-credential,
  .single-app-view .client-info {
    margin: 0;
    position: relative; }
    .single-app-view .client-credential > span,
    .single-app-view .client-info > span {
      width: 100px;
      display: inline-block; }
    .single-app-view .client-credential > code,
    .single-app-view .client-info > code {
      display: inline-block; }
      @media (max-width: 991px) {
        .single-app-view .client-credential > code,
        .single-app-view .client-info > code {
          padding: 0; } }
    .single-app-view .client-credential .showcase-info,
    .single-app-view .client-info .showcase-info {
      bottom: 0;
      position: absolute;
      right: 0; }
      @media (max-width: 991px) {
        .single-app-view .client-credential .showcase-info,
        .single-app-view .client-info .showcase-info {
          position: relative; } }
  .single-app-view code {
    background-color: transparent;
    color: white; }
  .single-app-view h1 {
    margin: 0;
    padding: 0.5em 0 0.25em; }
  .single-app-view h1,
  .single-app-view h2,
  .single-app-view h3,
  .single-app-view h4,
  .single-app-view h5,
  .single-app-view h6,
  .single-app-view p,
  .single-app-view span,
  .single-app-view li {
    color: white; }
  .single-app-view p.lead {
    max-width: 475px; }
  @media (min-width: 768px) {
    .single-app-view .call-to-action {
      margin-right: 20px; } }
  .single-app-view .graph-container {
    position: relative; }
    .single-app-view .graph-container a {
      color: white; }
  .single-app-view .graph-container > .graph-inner-container {
    padding-top: 40px;
    display: flex;
    -webkit-flex-flow: row wrap;
    align-items: flex-start;
    align-content: center; }
    .single-app-view .graph-container > .graph-inner-container #dau-graph {
      order: 1;
      width: 55%;
      margin-right: 30px; }
    .single-app-view .graph-container > .graph-inner-container #mau-graph {
      order: 2;
      width: calc(40% + 30px); }
      .single-app-view .graph-container > .graph-inner-container #mau-graph h1.display-2 {
        padding: 0.13em 0 0; }
      .single-app-view .graph-container > .graph-inner-container #mau-graph h1,
      .single-app-view .graph-container > .graph-inner-container #mau-graph p {
        color: #509bf5; }
      .single-app-view .graph-container > .graph-inner-container #mau-graph .panel:nth-of-type(2) {
        border-left: none; }
      .single-app-view .graph-container > .graph-inner-container #mau-graph .panel {
        flex: 1;
        min-width: 150px; }
    .single-app-view .graph-container > .graph-inner-container #requests-per-endpoint-graph {
      order: 3;
      width: 55%;
      margin-right: 30px; }
    .single-app-view .graph-container > .graph-inner-container #users-per-country-map {
      order: 4;
      width: calc(40% + 30px); }
    .single-app-view .graph-container > .graph-inner-container #total-requests-graph {
      order: 5;
      width: 55%;
      margin-top: 25px; }
    .single-app-view .graph-container > .graph-inner-container .panel-group {
      display: inline-flex;
      flex-flow: row nowrap; }
      .single-app-view .graph-container > .graph-inner-container .panel-group .panel {
        margin-top: 0; }
    .single-app-view .graph-container > .graph-inner-container .panel.panel-default {
      background-color: transparent;
      border: 1px solid #616467;
      border-radius: 0;
      margin-bottom: 0; }
      .single-app-view .graph-container > .graph-inner-container .panel.panel-default .panel-body {
        background-color: transparent; }
        .single-app-view .graph-container > .graph-inner-container .panel.panel-default .panel-body#usernumber {
          height: 80%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center; }
      .single-app-view .graph-container > .graph-inner-container .panel.panel-default .panel-heading {
        background-color: #272727;
        border-bottom: 1px solid #616467;
        color: white; }
  @media (max-width: 1300px) {
    .single-app-view .pull-right .btn {
      margin-bottom: 15px; }
    .single-app-view .graph-container > .graph-inner-container {
      display: flex;
      flex-flow: column wrap;
      align-items: flex-start;
      align-content: center; }
      .single-app-view .graph-container > .graph-inner-container .panel-group {
        flex-flow: row wrap; }
      .single-app-view .graph-container > .graph-inner-container #mau-graph .panel:nth-of-type(2) {
        border-left: 1px solid #616467; }
    .single-app-view #dau-graph,
    .single-app-view #mau-graph,
    .single-app-view #requests-per-endpoint-graph,
    .single-app-view #users-per-country-map,
    .single-app-view #total-requests-graph {
      min-width: 90%; }
    .single-app-view #mau-graph,
    .single-app-view #users-per-country-map {
      margin-top: 25px; } }
  .single-app-view .graph-container .no-data-text {
    display: none; }
  .single-app-view .graph-container .loading-text {
    text-align: center; }
  .single-app-view .graph-container .loading-text p,
  .single-app-view .graph-container .no-data-text p {
    font-size: 25px; }
  .single-app-view .graph-container.no-data .panel {
    opacity: 0.25; }
  .single-app-view .graph-container.no-data .no-data-text {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%; }
    .single-app-view .graph-container.no-data .no-data-text p {
      margin: 0; }
    .single-app-view .graph-container.no-data .no-data-text p:first-child {
      padding-top: 15%; }
  .single-app-view .section-modal .modal-header h2,
  .single-app-view .section-modal a:not(.btn),
  .single-app-view .section-modal p,
  .single-app-view .section-modal span {
    color: #222326; }
  .single-app-view .section-modal textarea {
    height: auto;
    resize: vertical; }
  .single-app-view .section-modal .modal-header h2 {
    font-size: 24px;
    letter-spacing: 1px;
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase; }
  .single-app-view .section-modal .form-horizontal {
    display: block;
    padding: 0 30px; }
  .single-app-view .section-modal .form-group.extra-padding {
    padding: 0 15px; }
  .single-app-view .section-modal .form-group .control-label,
  .single-app-view .section-modal .form-group .form-label {
    color: black; }
  .single-app-view .section-modal .form-group .control-label {
    font-weight: 200;
    text-align: left; }
  .single-app-view .section-modal .form-group .control-label-validation {
    color: #d9534f; }
  .single-app-view .section-modal .form-group .form-control {
    border: 0;
    padding-left: 0;
    z-index: auto;
    box-shadow: none; }
    .single-app-view .section-modal .form-group .form-control.application-name {
      font-size: 20px;
      font-weight: 800; }
    .single-app-view .section-modal .form-group .form-control.application-description {
      font-size: 17px;
      font-weight: 400; }
  .single-app-view .section-modal .form-group .form-control-static {
    color: #1db954; }
  .single-app-view .section-modal .modal-footer {
    text-align: center; }
    .single-app-view .section-modal .modal-footer .btn {
      min-width: auto; }

.tos-accept .container {
  padding: 20px 0; }
.tos-accept .terms-body {
  background: #f8f8f8;
  max-height: 500px;
  padding: 30px;
  overflow: auto; }

.radio input[type='radio'],
.radio-inline input[type='radio'] {
  opacity: 1; }

.options h5,
.spotify-widget h5 {
  font-size: 18px;
  padding-top: 1em;
  font-weight: 700; }

.spb-uri-example {
  font-size: 12px; }

.spb-box {
  padding-left: 40%;
  margin: 5px; }

.form-control[readonly] {
  color: black;
  background-color: white;
  pointer-events: auto; }

.widget-generator .number {
  width: 100px; }
.widget-generator input:not([type='submit']).form-control,
.widget-generator textarea.form-control {
  font-size: 16px; }

.follow-embed-code {
  height: 120px; }

.console .form-control {
  margin: 0;
  flex: 2; }
.console .input-group-btn {
  flex: 1; }
.console .btn-green {
  width: 100%;
  font-size: 11px; }

.wp-image-6377,
.wp-image-6367 {
  margin: 0 auto;
  padding: 1em 0; }

.third-party-licenses .licenses-list {
  padding: 0; }
  .third-party-licenses .licenses-list li {
    display: block;
    list-style: none;
    margin-top: 20px; }
    .third-party-licenses .licenses-list li .license-body {
      font-size: 14px;
      max-height: 150px;
      max-width: 700px;
      overflow: auto; }