:root {
  --main-bg-color: #151515;
  --cream: #fcf2e9;
  --black: #0d0d0d;
  --primary: #ffffff;
  --hover: #f9f0e7;
}

/* Selection colours (easy to forget) */
::selection     {background: rgb(64,65,81); color: #404151; }
::-moz-selection  {background: rgb(64,65,81); color: #404151; }
img::selection    {background: transparent; color: #FFF; }
img::-moz-selection {background: transparent; color: #FFF; }
body {-webkit-tap-highlight-color: rgb(64,65,81); color: #404151; }

body {
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight: 500;
  font-size: 16px;

  min-width: 320px;
  background-color: var(--main-bg-color);
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('images/the-features-bg.jpg');
  color: var(--primary);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: sans-serif;
  font-weight: 700;

  margin: 0;
  padding: 0;
  line-height: 1;
}
.serif { font-family: serif; font-weight: 500; }
.sans { font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 500; }
.large { font-size: 3rem; }
.medium { font-size: 2rem; }

.fullwidth { max-width: 100%; }
.fullheight { height: 100vh; }
.fullheight.almost { height: 90vh; }
.fullwidth [class*="block-grid-"] { margin-right: 0; margin-left: 0; }
.flush-padding .columns { padding-left: 0; padding-right: 0; }
.row .row.flush-padding { margin-left:0; margin-right:0;}
.flush-grid { margin-left:0; margin-right:0; }
.flush-left { margin-left:0; padding-left: 0 !important;}
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.bold { font-weight: 900; }
.small { font-size: 11px; }

.hidden, .is-hidden { display: none !important; }
.letterspace { letter-spacing: 2px; }
.letterspace-wide { letter-spacing: 0.5em; }
.line-height { line-height:  1.45em; }

.rounded { 
  border-radius: 12px; 
  overflow: hidden; 
}
.rounded.overflow-visible {
  overflow: visible;
}
.rounded.album-container,
.rounded.top-container {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0
}
.rounded.bottom-container {
  border-top-left-radius: 0;
  border-top-right-radius: 0
}
.padding-xsmall { padding: 0.5em; }
.padding-small { padding: 1.5em; }
.padding { padding: 3em; }
.padding-large { padding: 5em; }
.padding-none { padding: 0px !important; }

.padding-top-xxsmall { padding-top: 0.25em; }
.padding-bottom-xxsmall { padding-bottom: 0.25em; }
.padding-left-xxsmall { padding-left: 0.25em; }
.padding-right-xxsmall { padding-right: 0.25em; }

.padding-top-xsmall { padding-top: 0.5em; }
.padding-bottom-xsmall { padding-bottom: 0.5em; }
.padding-left-xsmall { padding-left: 0.5em; }
.padding-right-xsmall { padding-right: 0.5em; }

.padding-top-small { padding-top: 1.5em; }
.padding-bottom-small { padding-bottom: 1.5em; }
.padding-left-small { padding-left: 1.5em; }
.padding-right-small { padding-right: 1.5em; }

.padding-top { padding-top: 3em; }
.padding-bottom { padding-bottom: 3em; }
.padding-right { padding-right: 3em; }
.padding-left { padding-left: 3em; }

.padding-top-large { padding-top: 5em !important; }
.padding-top-xlarge { padding-top: 7em !important; }
.padding-bottom-large { padding-bottom: 5em !important; }
.padding-bottom-xlarge { padding-bottom: 7em !important; }
.padding-bottom-medium { padding-bottom: 3em !important; }

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

.margin-top-small { margin-top: 1.5em; }
.margin-bottom-small { margin-bottom: 1.5em; }
.margin-top { margin-top: 3em; }
.margin-bottom { margin-bottom: 3em; }
.margin-top-large { margin-top: 5em; }
.margin-bottom-large { margin-bottom: 5em; }
.margin-bottom-xlarge { margin-bottom: 7em; }
.margin-left-xsmall { margin-left: 0.5em; }
.margin-left-small { margin-left: 1.5em; }
.margin-left { margin-left: 3em; }
.margin-left-large { margin-left: 5em; }
.margin-left-xlarge { margin-left: 7em; }
.margin-right-xsmall { margin-right: 0.5em; }
.margin-right-small { margin-right: 1.5em; }
.margin-right { margin-right: 3em; }
.margin-right-large { margin-right: 5em; }
.margin-right-xlarge { margin-right: 7em; }

.overflow-hidden { overflow: hidden; }
hr.slim {
  width: 60%;
  margin: 0 auto;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
.relative { position: relative; }
.topmost { z-index: 100; }
.widescreen {
  height: 0;
  position: relative;
  padding-top: 56.25%;
  display: block;
  background-size: cover;
}
.text-large {
  font-size: 22px;
}
.text-xlarge {
  font-size: 32px;
}
.widescreen iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------- */
/* SITE SPECIFIC */
/* ------------------------------------------- */
.white { color: #fafafa; }
.white-bg { background-color: #fafafa; }
.cream { color: var(--cream); }
.cream-bg { background-color: var(--cream); }
.black { color: var(--black); }
.black-bg { background-color: var(--black); }
.skos-blue { color: #178ac9; }
.skos-blue-bg { background-color: #178ac9; }
.skos-red { color: #e91d20; }
.skos-red-bg { background-color: #e91d20; }
.skos-cream { color: #fbfae8; }
.skos-cream-bg { background-color: #fbfae8; }


a, a:active {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--primary);
}
a:hover {
  color: var(--hover);
}
a.underline {
  border-bottom: 1px solid var(--primary);
}
a.no-underline,
a.white.no-underline {
  border-bottom: none !important;
  text-decoration: none;
}
a.underline:hover,
a.no-underline:hover {
  opacity: 0.5;
}

[data-vertical-center] > *,
.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.vertical-center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%,-50%);
}
.align-bottom {
  position: absolute;
  bottom: 20%;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* tOOLS */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.border { border: 10px solid var(--primary); }
.border-thick {
  border-width: 40px;
  border-style: solid;
  border-color: var(--primary);
}
.border-thin { border: 1px solid rgba(255,255,255,0.2); }
.border-bottom { border-bottom: 1px solid rgba(255,255,255,0.4); }
.border-black { border-color: #525e60; }
.border-white { border-color: rgba(255,255,255,0.5); }
.border-left { border-left: 1px solid #6c9ede; }
.border-right { border-right: 1px solid #6c9ede; }
.border-top { border-top: 1px solid #6c9ede; }
.border-radius { border-radius: 5px; overflow: hidden; }
.border-radius-top-none { border-top-left-radius: 0; border-top-right-radius: 0; }
.border-radius-bottom-none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.inline-block { display: inline-block !important; }
.block { display: block !important;}
[data-equal-columns] {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 39.9375em) {
  [data-equal-columns] {
    display: inherit;
    align-items: center;
    justify-content: center;
  }
}

.button {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 700;
  font-family: sans-serif;
  padding: 10px 20px;
  border-radius: 4px;
  background: var(--main-bg-color);
  color: var(--primary);
  border-bottom: none;
}
.button:hover,
.button.hover {
  background: var(--primary);
  color: var(--main-bg-color);
}

.large-buttons .button {
  font-size: 20px;
}
.button.large {
  font-size: 18px;
  max-width: 300px;
  margin: 0 auto;
}
.button.badge {
  background: #FFF;
  font-size: 30px;
  color: #000;
  border-radius: 100%;
  text-align: center;
  width: 80px;
  height: 80px;
  border: 2px solid rgba(0,0,0,0.5);
  position: relative;
  display: block;
}
.button.badge i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.button.badge:hover {
  color: #FFF;
  background: #ff4b00;
}
.button.badge.small {
  width: 40px;
  height: 40px;
  font-size: 16px;
}
.button.tiny {
  display: inline-block;
  padding: 6px 15px;
  font-size: 12px;
}
.button.black-bg {
  background: #231f20;
  color: #FAFAFA;
}
.button.black-bg:hover {
  background: rgba(0,0,0,0.5);
  color: #FAFAFA;
}
.dropshadow {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.strong {
  font-weight: 900;
}
.fullpage{
  min-height: 95vh;
}
.halfpage {
  height: 60vh;
}
@media only screen and (max-width: 39.9375em) {
  .small-only-padding-right-none { padding-right: 0; }
  .small-only-padding-none { padding: 0; }
  .small-only-padding { padding: 1.5em; }
  .small-only-padding-top { padding-top: 1.5em; }
  .small-only-padding-bottom { padding-bottom: 1.5em; }
  .small-only-padding-bottom-none { padding-bottom: 0em; }
  .small-only-padding-left { padding-left: 1.5em; }
  .small-only-padding-right { padding-right: 1.5em; }
  .small-only-margin-bottom-none { margin-bottom: 0 !important; }
  .small-only-text-center { text-align: center; }
}

/* NAV */
.nav-logo {
  background-image: url('images/the-features-1999.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  text-indent: -9999px;
  border-bottom: none;
}
.nav-logo:active {
  border-bottom: none;
}
input#control-nav {
	visibility: hidden;
	position: absolute;
	left: -9999px;
	opacity: 0;
}
.control-nav { /* label icon */
  display: block;
  top: 10px;
  position: relative;
}
.control-nav:hover {
  cursor: pointer;
}
.control-nav:before {
	content: "";
	display: block;
	height: 3px;
}
.control-nav-close {
  display: none;
}

input#control-nav:checked ~ .mobile-nav-menu-container .control-nav-open {
  display: none;
}
input#control-nav:checked ~ .mobile-nav-menu-container .control-nav-close {
  display: inline-block;
}

input#control-nav:checked ~ .mobile-menu-container {
  display: block;
}
body.menu-open {
  overflow: hidden;
}

.mobile-menu-container {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100% - 80px);
  background: rgba(0,0,0,0.8);
  display: none;
  z-index: 1500;
}
.navbar.fixed .mobile-menu-container {
  top: 53px;
  height: calc(100% - 53px);
}
.mobile-menu-container .mobile-menu-options {
  position: absolute;
  width: 100%;
  height: auto;
  top:50%;
  left: 0;
  transform: translate(0,-50%);
  font-size: 50px;
}
.mobile-menu-options a {
  border-bottom: none;
  text-decoration: none;
}
body.home .header-container {
  display: none;
}


/* SPECIFIC STYLES */
.branding h1 {
  text-indent: -9999px;
  display: block;
  background-image: url('images/the-features-1999.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 60%;
  height: 0;
  padding-top: 10%;
  max-width: 650px;
  margin: 0 auto;
  margin-bottom: 1em;
}
.branding h1.homepage {
  background-image: url('images/the-features--the-mahaffey-sessions-1999--homepage.jpg');
  padding-top: 30%;
}
.branding.skos h1.homepage {
  background-image: url('images/the-features--skos-eye-guy.png');
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-60%);
  width: 331px;
  height: 400px;
  margin: 0;
  padding: 0;
  animation-name: eyeguy;
  animation-duration: 4s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;

}
.branding.skos {
  position: relative;
}
.branding .spiral {
  position: absolute;
  top: 0; left:0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.branding .spiral:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  transform: translate(-50%,-50%);

}

.branding .spiral.left:before {
  background-image: url('images/the-features--skos-spiral--one.png');
  animation-name: spiral-left;
  animation-duration: 24s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}
.branding .spiral.right:before {
  background-image: url('images/the-features--skos-spiral--two.png');
  animation-name: spiral-right;
  animation-duration: 24s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}
@keyframes eyeguy {
  0% { transform: translate(-50%,-60%); }
  50%  { transform: translate(-50%,-65%); }
  100%   { transform: translate(-50%,-60%); }
}
@keyframes spiral-left {
  from { transform: translate(-50%,-50%) rotate(0deg);}
  to {  transform: translate(-50%,-50%) rotate(360deg);}
}
@keyframes spiral-right {
  from { transform: translate(-50%,-50%) rotate(360deg);}
  to {  transform: translate(-50%,-50%) rotate(0deg);}
}

.branding h1.homepage:hover {
  cursor: pointer;
}
.branding h1.homepage a {
  display: block;
  border: none;
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .branding h1.homepage {
    padding-top: 40%;
  }
  .branding.skos.fullheight.almost {
    height: 70vh;
  }
}
@media only screen and (max-width: 39.9375em) {
  .branding h1 {
    width: 90%;
  }
  .branding h1.homepage {
    padding-top: 50%;
  }
  .branding.skos h1.homepage {
    padding: 0;
    width: 280px;
    height: 338px;
  }
  .branding.skos.fullheight.almost {
    height: 90vh;
  }
}
.destinations-container {
  font-size: 2em;
}
@media only screen and (max-width: 39.9375em) { 
  .destinations-container {
    width: 80%;
    margin: 0 auto;
  }

}
.destinations-container a {
  display: inline-block;
  transition: all .3s ease;
  margin-right: 0.8em;
  border: none;
}
.destinations-container a:last-child {
  margin-right: 0;
}
.destinations-container a:hover {
  transform: scale(1.3);
}
@media only screen and (max-width: 39.9375em) {
  .destinations-container  {
    font-size: 1.5em;
  }
}
.mailing-list-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding: 1rem;
  border-radius: 3px;
}
label {
  display: block;
  text-transform: uppercase;
  display: none;
}
input[type='email'] {
  padding: 22px;
  font-size: 12px;
  color: #000;
  border: none;
  width: 100%;
  border-radius: 3px;
}
button[type='submit'] {
  position: absolute;
  right: 4px;
  bottom: 4px;
  border: 1px solid var(--main-bg-color);
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--main-bg-color);
  color: #fff;
  padding: 12px 18px;
  border-radius: 3px;
  z-index: 10;
}
button[type='submit']:hover {
  background: var(--hover);
  color: #000;
  cursor: pointer;
}
@media only screen and (max-width: 39.9375em) {

  button[type='submit'] {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    border: none;
    margin-top: 3px;
    background: var(--hover);
    color: var(--main-bg-color);
  }
}

.album-container .offset {
  position: relative;
  top: -40px;
}
body.music .album-container .offset {
  top: 0;
  padding-top: 1em;
  display: block;
  border-bottom: none;
}
.time {
  opacity: 0.5;
  font-size: 12px;
  display: none;
}
.side {
  background: var(--black);
  color: var(--cream);
  font-weight: 700;
  display: inline;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}
.caption {
  font-size: 0.9em;
  opacity: 0.6;
  padding-top: 0.5em;
}

.skos-tracklisting h2 {
  font-size: 1.2em;
}