@charset "UTF-8";
/* Include the files we're dependent on. */
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Remove margin
 */
figure {
  margin: 0;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/* Blockquote
   ========================================================================== */
blockquote {
  margin: 0;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/MyriadPro-Regular.woff2") format("woff2"), url("../fonts/MyriadPro-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* Common classes/helpers */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  font-size: 10px;
}

body {
  width: 100%;
  background: #fff;
  font-family: "Myriad Pro", sans-serif;
  color: #212121;
  margin: 0 auto;
  text-align: center;
}

.wrapper {
  display: block;
  width: 100%;
  max-width: 960px;
  padding: 4rem;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}
@media (max-width: 500px) {
  .wrapper {
    padding: 2rem;
  }
}
.wrapper:after {
  display: table;
  clear: both;
  content: "";
}
.wrapper .text-box {
  margin: auto;
}

#frame {
  width: 100%;
  min-width: 960px;
  overflow: hidden;
}

@media (max-width: 980px) {
  #frame {
    min-width: 100%;
  }
}
.no-media .wrapper {
  max-width: 940px;
}
.no-media #frame {
  min-width: 960px;
}

.ie8 .wrapper {
  max-width: 940px;
}
.ie8 #frame {
  min-width: 960px;
}

.clearfix:after {
  clear: both;
  height: 0;
  content: " ";
  font-size: 0;
  display: block;
}

.left {
  float: left;
}

.right {
  float: right;
}

.clear {
  clear: both;
}

strong {
  font-weight: 700;
}

button {
  cursor: pointer;
  border: none;
}

h1, h2, h3, .progress-bar ul > li, h4, h5, h6 {
  font-family: "Signika", sans-serif;
}

h1, h2, h3, .progress-bar ul > li, h4, h5, h6, p, #results .nav li, #selector .manual .manual-form dt, #selector .manual .manual-form dd, .user-details dt label, .user-details div label {
  margin-bottom: 2rem;
}
h1:last-child, h2:last-child, h3:last-child, .progress-bar ul > li:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, #results .nav li:last-child, #selector .manual .manual-form dt:last-child, #selector .manual .manual-form dd:last-child, .user-details dt label:last-child, .user-details div label:last-child {
  margin-bottom: 0;
}
h1:focus, h2:focus, h3:focus, .progress-bar ul > li:focus, h4:focus, h5:focus, h6:focus, p:focus, #results .nav li:focus, #selector .manual .manual-form dt:focus, #selector .manual .manual-form dd:focus, .user-details dt label:focus, .user-details div label:focus {
  outline: none;
}

h1 {
  font-family: "Signika", sans-serif;
  letter-spacing: 0.18em;
}

h1 {
  font-size: 3.8em;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  h1 {
    font-size: 3.1em;
  }
}
@media (max-width: 500px) {
  h1 {
    font-size: 2.8em;
  }
}

h2 {
  font-size: 3em;
}

h3, .progress-bar ul > li, h4 {
  font-size: 1.6em;
}

p, #results .nav li, #selector .manual .manual-form dt, #selector .manual .manual-form dd, .user-details dt label, .user-details div label {
  font-size: 1.8rem;
  line-height: 1.6em;
}
.text-box p, .text-box #results .nav li, #results .nav .text-box li, .text-box #selector .manual .manual-form dt, #selector .manual .manual-form .text-box dt, .text-box #selector .manual .manual-form dd, #selector .manual .manual-form .text-box dd, .text-box .user-details dt label, .user-details dt .text-box label, .text-box .user-details div label, .user-details div .text-box label {
  font-weight: 700;
}

.highlight {
  color: inherit;
  border-bottom: 3px solid #ffd440;
}

/*.btn {
  @extend  %btn;

}*/
.text-right {
  text-align: right;
}

a {
  color: #ffd440;
  text-decoration: none;
  transition: color 0.5s ease;
}
a img {
  border: none;
}

.hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Hide text in an element */
#results .overlay .controls a, #selector .suggestion .composers .composerSliderPages a, #selector .suggestion .composers .composerSliderControls a, #selector .clear, #selector .close a, #votes > li .controls p a, #votes > li .controls #results .nav li a, #results .nav #votes > li .controls li a, #votes > li .controls #selector .manual .manual-form dt a, #selector .manual .manual-form #votes > li .controls dt a, #votes > li .controls #selector .manual .manual-form dd a, #selector .manual .manual-form #votes > li .controls dd a, #votes > li .controls .user-details dt label a, .user-details dt #votes > li .controls label a, #votes > li .controls .user-details div label a, .user-details div #votes > li .controls label a {
  display: block;
  text-indent: 102%;
  white-space: nowrap;
  overflow: hidden;
  color: transparent;
}

/* Create an empty block element - used with :before and :after elements */
header #listenBtn:before, header #listenBtn:after, #results .back-to-top a:before, #results .back-to-top a:after, #results .menu .search-field:before, #results .overlay .controls a:before, #results .overlay .controls a:after, #results .overlay .close a:before, #results .overlay .close a:after, #results .change span:before, #results .change span:after, #top-list .controls span:before, #top-list .controls span:after, #section-wrapper:before, .social a:before, #selector .suggestion .composers .composerSliderControls a:before, #selector .suggestion .composers .composerSliderControls a:after, #selector .list-holder .back a:before, #selector .list-holder .back a:after, #selector .clear:before, #selector .clear:after, #selector .search .search-field:before, #selector .close a:before, #selector .close a:after, .progress-bar ul > li:before, #vote #selector .wrapper:before, #vote #form .wrapper:before, .social a.cta-suggest:before, .cta-suggest.cta:before, .social a.cta-suggest:after, .cta-suggest.cta:after, #selector .social a.cta-edit:before, .social #selector a.cta-edit:before, #selector .cta-edit.cta:before, #notification .social a.cta-edit:before, .social #notification a.cta-edit:before, #notification .cta-edit.cta:before, #votes .social a.cta-edit:before, .social #votes a.cta-edit:before, #votes .cta-edit.cta:before, #form .social a.cta-edit:before, .social #form a.cta-edit:before, #form .cta-edit.cta:before, #selector .social a.cta-back:before, .social #selector a.cta-back:before, #selector .cta-back.cta:before, #selector .social a.cta-back:after, .social #selector a.cta-back:after, #selector .cta-back.cta:after, #notification .social a.cta-back:before, .social #notification a.cta-back:before, #notification .cta-back.cta:before, #notification .social a.cta-back:after, .social #notification a.cta-back:after, #notification .cta-back.cta:after, #votes .social a.cta-back:before, .social #votes a.cta-back:before, #votes .cta-back.cta:before, #votes .social a.cta-back:after, .social #votes a.cta-back:after, #votes .cta-back.cta:after, #form .social a.cta-back:before, .social #form a.cta-back:before, #form .cta-back.cta:before, #form .social a.cta-back:after, .social #form a.cta-back:after, #form .cta-back.cta:after {
  display: block;
  content: "";
  position: absolute;
}

/* Element uses the sprite as a background image */
/* Standard CTA button or link styling */
.social a, .cta {
  display: inline-block;
  padding: 0.6em 2em;
  background: #ffd440;
  border: 2px solid #ffd440;
  border-radius: 360em;
  color: #fff;
  font-weight: 700;
  font-size: 1.2em;
  font-family: "Signika", sans-serif;
  text-align: inherit;
  text-transform: uppercase;
  text-shadow: none;
  margin: 2em 0.5em 1em;
  position: relative;
  transition: all 0.5s ease;
}
@media (max-width: 768px) {
  .social a, .cta {
    padding: 1em 4em;
  }
}
.social a:hover, .cta:hover, .social a:active, .cta:active, .social a:focus, .cta:focus {
  background: #fff;
  border-color: #fff;
  color: #533c26;
}
#selector .social a, .social #selector a, #selector .cta, #notification .social a, .social #notification a, #notification .cta, #votes .social a, .social #votes a, #votes .cta, #form .social a, .social #form a, #form .cta {
  padding: 0.4em 1.2em;
  border-radius: 8px;
  margin: 1em 0.5em;
}
#selector .social a:last-child, .social #selector a:last-child, #selector .cta:last-child, #notification .social a:last-child, .social #notification a:last-child, #notification .cta:last-child, #votes .social a:last-child, .social #votes a:last-child, #votes .cta:last-child, #form .social a:last-child, .social #form a:last-child, #form .cta:last-child {
  margin-right: 0;
}
#selector .social a:first-child, .social #selector a:first-child, #selector .cta:first-child, #notification .social a:first-child, .social #notification a:first-child, #notification .cta:first-child, #votes .social a:first-child, .social #votes a:first-child, #votes .cta:first-child, #form .social a:first-child, .social #form a:first-child, #form .cta:first-child {
  margin-left: 0;
}
#selector .social a.disabled, .social #selector a.disabled, #selector .disabled.cta, #notification .social a.disabled, .social #notification a.disabled, #notification .disabled.cta, #votes .social a.disabled, .social #votes a.disabled, #votes .disabled.cta, #form .social a.disabled, .social #form a.disabled, #form .disabled.cta {
  filter: grayscale(80);
  opacity: 0.3;
  pointer-events: none;
}
#selector .social a.secondary, .social #selector a.secondary, #selector .secondary.cta, #notification .social a.secondary, .social #notification a.secondary, #notification .secondary.cta, #votes .social a.secondary, .social #votes a.secondary, #votes .secondary.cta, #form .social a.secondary, .social #form a.secondary, #form .secondary.cta {
  background: #533c26;
  color: #fff;
  border-color: #fff;
}
#selector .social a.secondary:hover, .social #selector a.secondary:hover, #selector .secondary.cta:hover, #selector .social a.secondary:focus, .social #selector a.secondary:focus, #selector .secondary.cta:focus, #selector .social a.secondary:active, .social #selector a.secondary:active, #selector .secondary.cta:active, #notification .social a.secondary:hover, .social #notification a.secondary:hover, #notification .secondary.cta:hover, #notification .social a.secondary:focus, .social #notification a.secondary:focus, #notification .secondary.cta:focus, #notification .social a.secondary:active, .social #notification a.secondary:active, #notification .secondary.cta:active, #votes .social a.secondary:hover, .social #votes a.secondary:hover, #votes .secondary.cta:hover, #votes .social a.secondary:focus, .social #votes a.secondary:focus, #votes .secondary.cta:focus, #votes .social a.secondary:active, .social #votes a.secondary:active, #votes .secondary.cta:active, #form .social a.secondary:hover, .social #form a.secondary:hover, #form .secondary.cta:hover, #form .social a.secondary:focus, .social #form a.secondary:focus, #form .secondary.cta:focus, #form .social a.secondary:active, .social #form a.secondary:active, #form .secondary.cta:active {
  border-color: #fff;
  color: #533c26;
  background: #fff;
}
#selector .social a small, .social #selector a small, #selector .cta small, #notification .social a small, .social #notification a small, #notification .cta small, #votes .social a small, .social #votes a small, #votes .cta small, #form .social a small, .social #form a small, #form .cta small {
  display: block;
  position: absolute;
  width: 100%;
  top: calc(100% + 0.5rem);
  left: 0;
  text-transform: none;
  color: transparent;
  transform: translateY(-1em);
  transition: color 0.5s ease, transform 0.5s ease;
  max-width: 100%;
}
#selector .social a:hover small, .social #selector a:hover small, #selector .cta:hover small, #selector .social a:active small, .social #selector a:active small, #selector .cta:active small, #selector .social a:focus small, .social #selector a:focus small, #selector .cta:focus small, #notification .social a:hover small, .social #notification a:hover small, #notification .cta:hover small, #notification .social a:active small, .social #notification a:active small, #notification .cta:active small, #notification .social a:focus small, .social #notification a:focus small, #notification .cta:focus small, #votes .social a:hover small, .social #votes a:hover small, #votes .cta:hover small, #votes .social a:active small, .social #votes a:active small, #votes .cta:active small, #votes .social a:focus small, .social #votes a:focus small, #votes .cta:focus small, #form .social a:hover small, .social #form a:hover small, #form .cta:hover small, #form .social a:active small, .social #form a:active small, #form .cta:active small, #form .social a:focus small, .social #form a:focus small, #form .cta:focus small {
  color: #fff;
  transform: none;
}
#selector .social a.cta-back, .social #selector a.cta-back, #selector .cta-back.cta, #notification .social a.cta-back, .social #notification a.cta-back, #notification .cta-back.cta, #votes .social a.cta-back, .social #votes a.cta-back, #votes .cta-back.cta, #form .social a.cta-back, .social #form a.cta-back, #form .cta-back.cta {
  padding-left: 2.2em;
}
#selector .social a.cta-back:before, .social #selector a.cta-back:before, #selector .cta-back.cta:before, #selector .social a.cta-back:after, .social #selector a.cta-back:after, #selector .cta-back.cta:after, #notification .social a.cta-back:before, .social #notification a.cta-back:before, #notification .cta-back.cta:before, #notification .social a.cta-back:after, .social #notification a.cta-back:after, #notification .cta-back.cta:after, #votes .social a.cta-back:before, .social #votes a.cta-back:before, #votes .cta-back.cta:before, #votes .social a.cta-back:after, .social #votes a.cta-back:after, #votes .cta-back.cta:after, #form .social a.cta-back:before, .social #form a.cta-back:before, #form .cta-back.cta:before, #form .social a.cta-back:after, .social #form a.cta-back:after, #form .cta-back.cta:after {
  background: #fff;
  width: 0.75em;
  height: 2px;
  top: 50%;
  margin-top: -1px;
  left: 1em;
  border-radius: 3px;
  transform-origin: 1px center;
  transition: background 0.5s ease;
}
#selector .social a.cta-back:before, .social #selector a.cta-back:before, #selector .cta-back.cta:before, #notification .social a.cta-back:before, .social #notification a.cta-back:before, #notification .cta-back.cta:before, #votes .social a.cta-back:before, .social #votes a.cta-back:before, #votes .cta-back.cta:before, #form .social a.cta-back:before, .social #form a.cta-back:before, #form .cta-back.cta:before {
  transform: rotate(30deg);
}
#selector .social a.cta-back:after, .social #selector a.cta-back:after, #selector .cta-back.cta:after, #notification .social a.cta-back:after, .social #notification a.cta-back:after, #notification .cta-back.cta:after, #votes .social a.cta-back:after, .social #votes a.cta-back:after, #votes .cta-back.cta:after, #form .social a.cta-back:after, .social #form a.cta-back:after, #form .cta-back.cta:after {
  transform: rotate(-30deg);
}
#selector .social a.cta-back:hover:before, .social #selector a.cta-back:hover:before, #selector .cta-back.cta:hover:before, #selector .social a.cta-back:hover:after, .social #selector a.cta-back:hover:after, #selector .cta-back.cta:hover:after, #selector .social a.cta-back:focus:before, .social #selector a.cta-back:focus:before, #selector .cta-back.cta:focus:before, #selector .social a.cta-back:focus:after, .social #selector a.cta-back:focus:after, #selector .cta-back.cta:focus:after, #selector .social a.cta-back:active:before, .social #selector a.cta-back:active:before, #selector .cta-back.cta:active:before, #selector .social a.cta-back:active:after, .social #selector a.cta-back:active:after, #selector .cta-back.cta:active:after, #notification .social a.cta-back:hover:before, .social #notification a.cta-back:hover:before, #notification .cta-back.cta:hover:before, #notification .social a.cta-back:hover:after, .social #notification a.cta-back:hover:after, #notification .cta-back.cta:hover:after, #notification .social a.cta-back:focus:before, .social #notification a.cta-back:focus:before, #notification .cta-back.cta:focus:before, #notification .social a.cta-back:focus:after, .social #notification a.cta-back:focus:after, #notification .cta-back.cta:focus:after, #notification .social a.cta-back:active:before, .social #notification a.cta-back:active:before, #notification .cta-back.cta:active:before, #notification .social a.cta-back:active:after, .social #notification a.cta-back:active:after, #notification .cta-back.cta:active:after, #votes .social a.cta-back:hover:before, .social #votes a.cta-back:hover:before, #votes .cta-back.cta:hover:before, #votes .social a.cta-back:hover:after, .social #votes a.cta-back:hover:after, #votes .cta-back.cta:hover:after, #votes .social a.cta-back:focus:before, .social #votes a.cta-back:focus:before, #votes .cta-back.cta:focus:before, #votes .social a.cta-back:focus:after, .social #votes a.cta-back:focus:after, #votes .cta-back.cta:focus:after, #votes .social a.cta-back:active:before, .social #votes a.cta-back:active:before, #votes .cta-back.cta:active:before, #votes .social a.cta-back:active:after, .social #votes a.cta-back:active:after, #votes .cta-back.cta:active:after, #form .social a.cta-back:hover:before, .social #form a.cta-back:hover:before, #form .cta-back.cta:hover:before, #form .social a.cta-back:hover:after, .social #form a.cta-back:hover:after, #form .cta-back.cta:hover:after, #form .social a.cta-back:focus:before, .social #form a.cta-back:focus:before, #form .cta-back.cta:focus:before, #form .social a.cta-back:focus:after, .social #form a.cta-back:focus:after, #form .cta-back.cta:focus:after, #form .social a.cta-back:active:before, .social #form a.cta-back:active:before, #form .cta-back.cta:active:before, #form .social a.cta-back:active:after, .social #form a.cta-back:active:after, #form .cta-back.cta:active:after {
  background: #533c26;
}
#selector .social a.cta-suggest, .social #selector a.cta-suggest, #selector .cta-suggest.cta, #notification .social a.cta-suggest, .social #notification a.cta-suggest, #notification .cta-suggest.cta, #votes .social a.cta-suggest, .social #votes a.cta-suggest, #votes .cta-suggest.cta, #form .social a.cta-suggest, .social #form a.cta-suggest, #form .cta-suggest.cta {
  border-color: #fff;
  padding-left: 2.2em;
  padding-right: 1.2em;
  background: #533c26;
}
#selector .social a.cta-suggest:before, .social #selector a.cta-suggest:before, #selector .cta-suggest.cta:before, #selector .social a.cta-suggest:after, .social #selector a.cta-suggest:after, #selector .cta-suggest.cta:after, #notification .social a.cta-suggest:before, .social #notification a.cta-suggest:before, #notification .cta-suggest.cta:before, #notification .social a.cta-suggest:after, .social #notification a.cta-suggest:after, #notification .cta-suggest.cta:after, #votes .social a.cta-suggest:before, .social #votes a.cta-suggest:before, #votes .cta-suggest.cta:before, #votes .social a.cta-suggest:after, .social #votes a.cta-suggest:after, #votes .cta-suggest.cta:after, #form .social a.cta-suggest:before, .social #form a.cta-suggest:before, #form .cta-suggest.cta:before, #form .social a.cta-suggest:after, .social #form a.cta-suggest:after, #form .cta-suggest.cta:after {
  background: #fff;
  left: 1em;
}
#selector .social a.cta-suggest:hover, .social #selector a.cta-suggest:hover, #selector .cta-suggest.cta:hover, #selector .social a.cta-suggest:focus, .social #selector a.cta-suggest:focus, #selector .cta-suggest.cta:focus, #selector .social a.cta-suggest:active, .social #selector a.cta-suggest:active, #selector .cta-suggest.cta:active, #notification .social a.cta-suggest:hover, .social #notification a.cta-suggest:hover, #notification .cta-suggest.cta:hover, #notification .social a.cta-suggest:focus, .social #notification a.cta-suggest:focus, #notification .cta-suggest.cta:focus, #notification .social a.cta-suggest:active, .social #notification a.cta-suggest:active, #notification .cta-suggest.cta:active, #votes .social a.cta-suggest:hover, .social #votes a.cta-suggest:hover, #votes .cta-suggest.cta:hover, #votes .social a.cta-suggest:focus, .social #votes a.cta-suggest:focus, #votes .cta-suggest.cta:focus, #votes .social a.cta-suggest:active, .social #votes a.cta-suggest:active, #votes .cta-suggest.cta:active, #form .social a.cta-suggest:hover, .social #form a.cta-suggest:hover, #form .cta-suggest.cta:hover, #form .social a.cta-suggest:focus, .social #form a.cta-suggest:focus, #form .cta-suggest.cta:focus, #form .social a.cta-suggest:active, .social #form a.cta-suggest:active, #form .cta-suggest.cta:active {
  background: #fff;
}
#selector .social a.cta-suggest:hover:before, .social #selector a.cta-suggest:hover:before, #selector .cta-suggest.cta:hover:before, #selector .social a.cta-suggest:hover:after, .social #selector a.cta-suggest:hover:after, #selector .cta-suggest.cta:hover:after, #selector .social a.cta-suggest:focus:before, .social #selector a.cta-suggest:focus:before, #selector .cta-suggest.cta:focus:before, #selector .social a.cta-suggest:focus:after, .social #selector a.cta-suggest:focus:after, #selector .cta-suggest.cta:focus:after, #selector .social a.cta-suggest:active:before, .social #selector a.cta-suggest:active:before, #selector .cta-suggest.cta:active:before, #selector .social a.cta-suggest:active:after, .social #selector a.cta-suggest:active:after, #selector .cta-suggest.cta:active:after, #notification .social a.cta-suggest:hover:before, .social #notification a.cta-suggest:hover:before, #notification .cta-suggest.cta:hover:before, #notification .social a.cta-suggest:hover:after, .social #notification a.cta-suggest:hover:after, #notification .cta-suggest.cta:hover:after, #notification .social a.cta-suggest:focus:before, .social #notification a.cta-suggest:focus:before, #notification .cta-suggest.cta:focus:before, #notification .social a.cta-suggest:focus:after, .social #notification a.cta-suggest:focus:after, #notification .cta-suggest.cta:focus:after, #notification .social a.cta-suggest:active:before, .social #notification a.cta-suggest:active:before, #notification .cta-suggest.cta:active:before, #notification .social a.cta-suggest:active:after, .social #notification a.cta-suggest:active:after, #notification .cta-suggest.cta:active:after, #votes .social a.cta-suggest:hover:before, .social #votes a.cta-suggest:hover:before, #votes .cta-suggest.cta:hover:before, #votes .social a.cta-suggest:hover:after, .social #votes a.cta-suggest:hover:after, #votes .cta-suggest.cta:hover:after, #votes .social a.cta-suggest:focus:before, .social #votes a.cta-suggest:focus:before, #votes .cta-suggest.cta:focus:before, #votes .social a.cta-suggest:focus:after, .social #votes a.cta-suggest:focus:after, #votes .cta-suggest.cta:focus:after, #votes .social a.cta-suggest:active:before, .social #votes a.cta-suggest:active:before, #votes .cta-suggest.cta:active:before, #votes .social a.cta-suggest:active:after, .social #votes a.cta-suggest:active:after, #votes .cta-suggest.cta:active:after, #form .social a.cta-suggest:hover:before, .social #form a.cta-suggest:hover:before, #form .cta-suggest.cta:hover:before, #form .social a.cta-suggest:hover:after, .social #form a.cta-suggest:hover:after, #form .cta-suggest.cta:hover:after, #form .social a.cta-suggest:focus:before, .social #form a.cta-suggest:focus:before, #form .cta-suggest.cta:focus:before, #form .social a.cta-suggest:focus:after, .social #form a.cta-suggest:focus:after, #form .cta-suggest.cta:focus:after, #form .social a.cta-suggest:active:before, .social #form a.cta-suggest:active:before, #form .cta-suggest.cta:active:before, #form .social a.cta-suggest:active:after, .social #form a.cta-suggest:active:after, #form .cta-suggest.cta:active:after {
  background: #533c26;
}
#selector .social a.cta-edit, .social #selector a.cta-edit, #selector .cta-edit.cta, #notification .social a.cta-edit, .social #notification a.cta-edit, #notification .cta-edit.cta, #votes .social a.cta-edit, .social #votes a.cta-edit, #votes .cta-edit.cta, #form .social a.cta-edit, .social #form a.cta-edit, #form .cta-edit.cta {
  padding-left: 2.2em;
}
#selector .social a.cta-edit:before, .social #selector a.cta-edit:before, #selector .cta-edit.cta:before, #notification .social a.cta-edit:before, .social #notification a.cta-edit:before, #notification .cta-edit.cta:before, #votes .social a.cta-edit:before, .social #votes a.cta-edit:before, #votes .cta-edit.cta:before, #form .social a.cta-edit:before, .social #form a.cta-edit:before, #form .cta-edit.cta:before {
  background: #fff;
  width: 1em;
  height: 1em;
  top: calc(50% - 0.5em);
  left: 0.75em;
  background: url(../img/pencil-edit-button.svg) no-repeat center center;
  background-size: contain;
}
.social a.cta-suggest, .cta-suggest.cta {
  padding-left: 4.4em;
  padding-right: 3.6em;
  background: #ffd440;
  border-color: #ffd440;
}
.social a.cta-suggest:before, .cta-suggest.cta:before, .social a.cta-suggest:after, .cta-suggest.cta:after {
  background: #fff;
  width: 0.75em;
  height: 2px;
  top: 50%;
  left: 3em;
  border-radius: 3px;
  margin-top: -1px;
  transition: background 0.5s ease;
}
.social a.cta-suggest:before, .cta-suggest.cta:before {
  transform: rotate(90deg);
}
.social a.cta-suggest:hover, .cta-suggest.cta:hover, .social a.cta-suggest:focus, .cta-suggest.cta:focus, .social a.cta-suggest:active, .cta-suggest.cta:active {
  background: #fff;
  color: #533c26;
  border-color: #fff;
}
.social a.cta-suggest:hover:before, .cta-suggest.cta:hover:before, .social a.cta-suggest:hover:after, .cta-suggest.cta:hover:after, .social a.cta-suggest:focus:before, .cta-suggest.cta:focus:before, .social a.cta-suggest:focus:after, .cta-suggest.cta:focus:after, .social a.cta-suggest:active:before, .cta-suggest.cta:active:before, .social a.cta-suggest:active:after, .cta-suggest.cta:active:after {
  background: #533c26;
}
.social a.secondary, .secondary.cta {
  background: #533c26;
  border-color: #533c26;
}
.social a.secondary:hover, .secondary.cta:hover, .social a.secondary:focus, .secondary.cta:focus, .social a.secondary:active, .secondary.cta:active {
  background: #fff;
  color: #533c26;
  border-color: #fff;
}

/*%btn {
  @extend %cta;
  padding: .5em 2em;
  margin: 1em .5em;

  &.secondary {
      border-color: $text-color;
      background: $text-color;
      color: $white;

    &:hover, &:active, &:focus {
      border: 2px solid $text-color;
      background: $white;
      color: $text-color;
    }
  }
}*/
/* Standard input style */
.answers-container select, .answers-container textarea, .answers-container input, .user-details select, .user-details textarea, .user-details input, .competition-details select, .competition-details textarea, .competition-details input, .add-opinion select, .add-opinion textarea, .add-opinion input {
  color: #000;
  width: 100%;
  border: 1px solid #fff;
  padding: 0.6em 0.3em;
  height: 2.4em;
  font-size: 1.5em;
  display: block;
  font-family: "Source Sans Pro", Arial, sans-serif;
}

/* Generic box shadow that can be applied to a collection of elements */
.answers-container select:focus, .answers-container textarea:focus, .answers-container input:focus, .user-details select:focus, .user-details textarea:focus, .user-details input:focus, .competition-details select:focus, .competition-details textarea:focus, .competition-details input:focus, .add-opinion select:focus, .add-opinion textarea:focus, .add-opinion input:focus {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

/*
@mixin background-sprite($element-width, $element-height, $background-posX, $background-posY, $max-space: '') {

  background: $sprite-url no-repeat;
  background-size: ($sprite-width / $element-width) * 100% auto;
  background-position: if($background-posX == 0px, 0%, $background-posX / ($element-width - $sprite-width) * 100%) if($background-posY == 0px, 0%, $background-posY / ($element-height - $sprite-height) * 100%) ;

  @if $max-space != '' {
    max-width: $element-width;
    max-height: $element-height;
    width: $max-space;
    height: $element-height * $max-space / $element-width;
  }
  @else {
    width: $element-width;
    height: $element-height;
  }
}
*/
fieldset {
  border: 0;
}

.answers-container, .user-details, .competition-details, .add-opinion {
  /* QUESTION AND ANSWERS */
}
.answers-container select, .answers-container textarea, .answers-container input, .user-details select, .user-details textarea, .user-details input, .competition-details select, .competition-details textarea, .competition-details input, .add-opinion select, .add-opinion textarea, .add-opinion input {
  position: relative;
}
.answers-container select::-webkit-input-placeholder, .answers-container select:-moz-placeholder, .answers-container select::-moz-placeholder, .answers-container select:-ms-input-placeholder, .answers-container textarea::-webkit-input-placeholder, .answers-container textarea:-moz-placeholder, .answers-container textarea::-moz-placeholder, .answers-container textarea:-ms-input-placeholder, .answers-container input::-webkit-input-placeholder, .answers-container input:-moz-placeholder, .answers-container input::-moz-placeholder, .answers-container input:-ms-input-placeholder, .user-details select::-webkit-input-placeholder, .user-details select:-moz-placeholder, .user-details select::-moz-placeholder, .user-details select:-ms-input-placeholder, .user-details textarea::-webkit-input-placeholder, .user-details textarea:-moz-placeholder, .user-details textarea::-moz-placeholder, .user-details textarea:-ms-input-placeholder, .user-details input::-webkit-input-placeholder, .user-details input:-moz-placeholder, .user-details input::-moz-placeholder, .user-details input:-ms-input-placeholder, .competition-details select::-webkit-input-placeholder, .competition-details select:-moz-placeholder, .competition-details select::-moz-placeholder, .competition-details select:-ms-input-placeholder, .competition-details textarea::-webkit-input-placeholder, .competition-details textarea:-moz-placeholder, .competition-details textarea::-moz-placeholder, .competition-details textarea:-ms-input-placeholder, .competition-details input::-webkit-input-placeholder, .competition-details input:-moz-placeholder, .competition-details input::-moz-placeholder, .competition-details input:-ms-input-placeholder, .add-opinion select::-webkit-input-placeholder, .add-opinion select:-moz-placeholder, .add-opinion select::-moz-placeholder, .add-opinion select:-ms-input-placeholder, .add-opinion textarea::-webkit-input-placeholder, .add-opinion textarea:-moz-placeholder, .add-opinion textarea::-moz-placeholder, .add-opinion textarea:-ms-input-placeholder, .add-opinion input::-webkit-input-placeholder, .add-opinion input:-moz-placeholder, .add-opinion input::-moz-placeholder, .add-opinion input:-ms-input-placeholder {
  color: #000;
  font-style: italic;
}
.answers-container input[type=radio], .answers-container input[type=checkbox], .user-details input[type=radio], .user-details input[type=checkbox], .competition-details input[type=radio], .competition-details input[type=checkbox], .add-opinion input[type=radio], .add-opinion input[type=checkbox] {
  opacity: 0;
  width: 0;
  position: absolute;
}
.answers-container input[type=radio] + label, .answers-container input[type=checkbox] + label, .user-details input[type=radio] + label, .user-details input[type=checkbox] + label, .competition-details input[type=radio] + label, .competition-details input[type=checkbox] + label, .add-opinion input[type=radio] + label, .add-opinion input[type=checkbox] + label {
  padding-left: 2em;
  display: block;
  position: relative;
}
.answers-container input[type=radio] + label:before, .answers-container input[type=checkbox] + label:before, .user-details input[type=radio] + label:before, .user-details input[type=checkbox] + label:before, .competition-details input[type=radio] + label:before, .competition-details input[type=checkbox] + label:before, .add-opinion input[type=radio] + label:before, .add-opinion input[type=checkbox] + label:before {
  width: 1.1em;
  height: 1.1em;
  content: "";
  display: block;
  position: absolute;
  border-radius: 3px;
  top: 0.2em;
  left: 0;
  transition: background 0.5s ease, border 0.5s ease;
  background: transparent;
}
.answers-container input[type=checkbox] + label:before, .user-details input[type=checkbox] + label:before, .competition-details input[type=checkbox] + label:before, .add-opinion input[type=checkbox] + label:before {
  border: 1px solid #fff;
}
.answers-container input[type=radio] + label:before, .user-details input[type=radio] + label:before, .competition-details input[type=radio] + label:before, .add-opinion input[type=radio] + label:before {
  border-radius: 360em;
  border: 1px solid #949498;
}
.answers-container input[type=radio]:checked + label:before, .user-details input[type=radio]:checked + label:before, .competition-details input[type=radio]:checked + label:before, .add-opinion input[type=radio]:checked + label:before {
  background-color: #533c26;
  border-color: #533c26;
}
.answers-container input[type=checkbox]:checked + label:before, .user-details input[type=checkbox]:checked + label:before, .competition-details input[type=checkbox]:checked + label:before, .add-opinion input[type=checkbox]:checked + label:before {
  background-color: #ffd440;
  border-color: #533c26;
}
.answers-container input[type=radio]:focus + label:before, .answers-container input[type=checkbox]:focus + label:before, .user-details input[type=radio]:focus + label:before, .user-details input[type=checkbox]:focus + label:before, .competition-details input[type=radio]:focus + label:before, .competition-details input[type=checkbox]:focus + label:before, .add-opinion input[type=radio]:focus + label:before, .add-opinion input[type=checkbox]:focus + label:before {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.answers-container input[type=radio]:checked:focus + label:before, .answers-container input[type=checkbox]:checked:focus + label:before, .user-details input[type=radio]:checked:focus + label:before, .user-details input[type=checkbox]:checked:focus + label:before, .competition-details input[type=radio]:checked:focus + label:before, .competition-details input[type=checkbox]:checked:focus + label:before, .add-opinion input[type=radio]:checked:focus + label:before, .add-opinion input[type=checkbox]:checked:focus + label:before {
  box-shadow: 0 0 4px rgba(83, 60, 38, 0.8);
}
.answers-container input.date, .user-details input.date, .competition-details input.date, .add-opinion input.date {
  width: 32%;
  margin-right: 2%;
  float: left;
}
.answers-container input:last-child, .user-details input:last-child, .competition-details input:last-child, .add-opinion input:last-child {
  margin: 0;
  float: right;
}
.answers-container textarea, .user-details textarea, .competition-details textarea, .add-opinion textarea {
  min-height: 5rem;
  max-width: 687px;
}
.answers-container .question-container p, .answers-container .question-container #results .nav li, #results .nav .answers-container .question-container li, .answers-container .question-container #selector .manual .manual-form dt, #selector .manual .manual-form .answers-container .question-container dt, .answers-container .question-container #selector .manual .manual-form dd, #selector .manual .manual-form .answers-container .question-container dd, .answers-container .question-container .user-details dt label, .answers-container .question-container .user-details div label, .user-details .question-container p, .user-details .question-container #results .nav li, #results .nav .user-details .question-container li, .user-details .question-container #selector .manual .manual-form dt, #selector .manual .manual-form .user-details .question-container dt, .user-details .question-container #selector .manual .manual-form dd, #selector .manual .manual-form .user-details .question-container dd, .user-details .question-container dt label, .user-details dt .question-container label, .user-details .question-container div label, .user-details div .question-container label, .competition-details .question-container p, .competition-details .question-container #results .nav li, #results .nav .competition-details .question-container li, .competition-details .question-container #selector .manual .manual-form dt, #selector .manual .manual-form .competition-details .question-container dt, .competition-details .question-container #selector .manual .manual-form dd, #selector .manual .manual-form .competition-details .question-container dd, .competition-details .question-container .user-details dt label, .competition-details .question-container .user-details div label, .add-opinion .question-container p, .add-opinion .question-container #results .nav li, #results .nav .add-opinion .question-container li, .add-opinion .question-container #selector .manual .manual-form dt, #selector .manual .manual-form .add-opinion .question-container dt, .add-opinion .question-container #selector .manual .manual-form dd, #selector .manual .manual-form .add-opinion .question-container dd, .add-opinion .question-container .user-details dt label, .add-opinion .question-container .user-details div label {
  font-size: 2.4rem;
  font-style: italic;
}
.answers-container .answers-container ul, .user-details .answers-container ul, .competition-details .answers-container ul, .add-opinion .answers-container ul {
  list-style: none;
  text-align: center;
  margin: 1rem;
}
.answers-container .answers-container ul li, .user-details .answers-container ul li, .competition-details .answers-container ul li, .add-opinion .answers-container ul li {
  margin: 1rem 2rem 0 0;
  display: inline-block;
}
.answers-container .answers-container ul li label, .user-details .answers-container ul li label, .competition-details .answers-container ul li label, .add-opinion .answers-container ul li label {
  font-size: 1.8rem;
}
.answers-container .answers-container .answer-length, .user-details .answers-container .answer-length, .competition-details .answers-container .answer-length, .add-opinion .answers-container .answer-length {
  text-align: right;
  font-size: 1.4rem;
}
.answers-container .answers-container .answer-length.less-than-0, .user-details .answers-container .answer-length.less-than-0, .competition-details .answers-container .answer-length.less-than-0, .add-opinion .answers-container .answer-length.less-than-0 {
  color: #533c26;
}
.answers-container dd, .user-details dd, .competition-details dd, .add-opinion dd {
  margin-bottom: 0.5em;
  position: relative;
}
.answers-container .error, .answers-container .req, .user-details .error, .user-details .req, .competition-details .error, .competition-details .req, .add-opinion .error, .add-opinion .req {
  position: relative;
  color: #212121;
  font-style: italic;
  text-align: left;
  font-size: 1.4rem;
}
.answers-container .error a, .answers-container .req a, .user-details .error a, .user-details .req a, .competition-details .error a, .competition-details .req a, .add-opinion .error a, .add-opinion .req a {
  color: #212121;
}
.answers-container .error, .user-details .error, .competition-details .error, .add-opinion .error {
  background-color: #ffd440;
  padding: 4px;
  margin-top: 1rem;
}
.answers-container .submit, .user-details .submit, .competition-details .submit, .add-opinion .submit {
  text-align: center;
}

/* LABEL COLOURS */
.user-details {
  text-align: left;
}
.user-details fieldset {
  padding: 2rem 0;
}
.user-details dt label, .user-details div label {
  width: 100%;
  color: #fff;
  font-style: normal;
  font-weight: 400;
  margin: 1rem 0 0.3rem;
  display: inline-block;
  text-transform: uppercase;
}

#logInTitle {
  text-align: center;
}

.social-connect-container {
  background: transparent;
}
.social-connect-container * {
  font-size: 1.4rem;
  color: inherit;
}
.social-connect-container [step=Authenticated] {
  text-align: center;
}
.social-connect-container a {
  color: inherit;
}
.social-connect-container button, .social-connect-container input, .social-connect-container optgroup, .social-connect-container select, .social-connect-container textarea {
  color: #212121;
}
.social-connect-container > .component {
  background: transparent;
  color: inherit;
}
.social-connect-container label.field__label {
  color: inherit;
  font-size: 1.6rem;
}
.social-connect-container .grid-row {
  width: auto;
}
.social-connect-container .grid-row .grid-row__col--2 {
  float: none;
  margin: 0 auto;
  display: block;
}
.social-connect-container .tab-group {
  margin-top: 0;
}
.social-connect-container .tab-group .active a {
  background: #ffd440;
}
.social-connect-container .form__strapline {
  font-size: 1.3rem;
}
.social-connect-container .social_connect__label {
  font-size: 1.5rem;
  padding: 1em 0;
}
.social-connect-container .field__input--short {
  float: none;
}
.social-connect-container .button {
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  font-size: 1.6rem;
  background: #ffd440;
}
.social-connect-container .form__header {
  font-size: 1.9rem;
  margin-bottom: 0.2rem;
  text-transform: none;
}
.social-connect-container .gender__label {
  color: #ffd440;
}
.social-connect-container #signup .form form {
  text-align: left;
}

@media (min-width: 769px) {
  .column {
    width: 560px;
    margin: 0 auto;
  }
  #form .column {
    width: calc(560px + 4rem);
  }
}
@keyframes slideUpTo {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUpFrom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px);
    opacity: 0;
  }
}
@keyframes slideDownTo {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideDownFrom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
  }
}
#vote section.slide-leave-active, #vote section.slide-leave-to {
  display: none;
}
#vote #selector .wrapper, #vote #form .wrapper {
  background: #533c26;
  color: #fff;
  min-height: 600px;
}
#vote #selector.slide-enter-active .wrapper, #vote #selector.slide-enter-to .wrapper, #vote #notification.slide-enter-active .wrapper, #vote #notification.slide-enter-to .wrapper, #vote #form.slide-enter-active .wrapper, #vote #form.slide-enter-to .wrapper {
  animation: slideUpTo 0.5s ease forwards;
}
#vote #selector.slide-leave-active .wrapper, #vote #selector.slide-leave-to .wrapper, #vote #notification.slide-leave-active .wrapper, #vote #notification.slide-leave-to .wrapper, #vote #form.slide-leave-active .wrapper, #vote #form.slide-leave-to .wrapper {
  animation: slideUpFrom 0.5s ease forwards;
}
#vote #selector .wrapper:before, #vote #form .wrapper:before {
  width: 100%;
  padding-bottom: 32%;
  height: 0px;
  background: url(../img/ribbon.jpg) no-repeat center center;
  background-size: cover;
  top: 175px;
  left: 0;
}

#selector {
  display: -ms-grid;
  display: grid;
}
#selector .selector {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
}
#selector .selector.v-leave-active, #selector .selector.v-leave-to {
  display: none;
}

#selection.slide-enter-active #votes li, #selection.slide-enter-to #votes li {
  transform: translateY(50px);
  opacity: 0;
  animation: slideUpTo 0.5s ease forwards;
}
#selection.slide-enter-active #votes li:nth-child(1), #selection.slide-enter-to #votes li:nth-child(1) {
  animation-delay: 0s;
}
#selection.slide-enter-active #votes li:nth-child(2), #selection.slide-enter-to #votes li:nth-child(2) {
  animation-delay: 0.25s;
}
#selection.slide-enter-active #votes li:nth-child(3), #selection.slide-enter-to #votes li:nth-child(3) {
  animation-delay: 0.5s;
}

.progress-bar {
  position: relative;
  width: 100%;
  z-index: 100;
  transform: translateY(-100%);
  transition: transform 0.5s ease;
  /* &:before {
     @extend %empty-block;
     width: 100%;
     height: 100%;
     top: 0; left: 0;
     background: linear-gradient(0deg, transparent, $white);
   }*/
}
.progress-bar .wrapper {
  padding-bottom: 0;
}
.progress-bar.showing {
  transform: translateY(0);
}
@media (max-width: 768px) {
  .progress-bar span {
    display: none;
  }
}
.progress-bar ul {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  list-style: none;
}
.progress-bar ul > li {
  position: relative;
  text-transform: uppercase;
  margin: 0;
  flex: 1;
  padding: 0.6em 0;
  color: #212121;
  transition: all 0.5s ease;
  margin: 0 -10px;
}
.progress-bar ul > li mark {
  display: block;
  margin: 0 auto;
  width: 3em;
  height: 3em;
  border-radius: 360rem;
  background: #fff;
  border: 2px solid #212121;
  transition: all 0.5s ease;
  transform: scale(0.4);
  margin-bottom: 0.5em;
  position: relative;
}
.progress-bar ul > li mark svg {
  width: 60%;
  margin: 0 auto;
  height: 100%;
  position: relative;
}
.progress-bar ul > li mark svg polyline {
  stroke: #fff;
  transition: stroke 0.5s ease;
}
.progress-bar ul > li:before {
  width: calc(100% - 20px);
  height: 2px;
  background: #212121;
  top: calc(2.1em - 1px);
  left: 50%;
}
.progress-bar ul > li:last-child:before {
  display: none;
}
.progress-bar ul > li.done mark {
  border-color: #fff;
  background: #ffd440;
  transform: none;
}
.progress-bar ul > li.done mark svg polyline {
  stroke: #fff;
}
.progress-bar ul > li.active mark {
  border-color: #ffd440;
  background: #ffd440;
  transform: none;
}
.progress-bar ul > li.active mark svg polyline {
  stroke: #ffd440;
}
.progress-bar.small li span {
  display: none;
}
@media (max-width: 768px) {
  .progress-bar.small li:nth-child(even) mark {
    margin-bottom: 2em;
  }
}

#vote {
  display: -ms-grid;
  display: grid;
}
#vote > section {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}

#votes {
  list-style: none;
  max-width: 780px;
  margin: 2em auto 0;
}
#votes > li {
  position: relative;
  margin-bottom: 2rem;
  box-shadow: 0 0 15px #949498;
  border-radius: 15px;
  background: #fff;
  padding: 1em;
  display: -ms-grid;
  display: grid;
}
#votes > li > div {
  display: flex;
  align-items: center;
}
#votes > li > div p, #votes > li > div #results .nav li, #results .nav #votes > li > div li, #votes > li > div #selector .manual .manual-form dt, #selector .manual .manual-form #votes > li > div dt, #votes > li > div #selector .manual .manual-form dd, #selector .manual .manual-form #votes > li > div dd, #votes > li > div .user-details dt label, .user-details #votes > li > div label {
  margin: 0 auto;
}
#votes > li > div.rank {
  padding-right: 1rem;
}
#votes > li > div.more {
  -ms-grid-row: 1;
      grid-row-start: 1;
  -ms-grid-row-span: 2;
  grid-row-end: 3;
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: 3;
  grid-column-end: 4;
}
#votes > li > div.add-opinion {
  display: block;
  -ms-grid-column: 1;
      grid-column-start: 1;
  -ms-grid-column-span: -2;
  grid-column-end: -1;
}
@media (min-width: 471px) {
  #votes > li {
    -ms-grid-columns: 30% auto 10%;
    grid-template-columns: 30% auto 10%;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
  }
  #votes > li > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  #votes > li > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  #votes > li > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #votes > li > *:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  #votes > li > *:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  #votes > li > *:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
  }
  #votes > li > div.rank {
    -ms-grid-row: 1;
        grid-row-start: 1;
    -ms-grid-row-span: 2;
    grid-row-end: 3;
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
  }
  #votes > li > div.content {
    -ms-grid-row: 1;
        grid-row-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 2;
    -ms-grid-column: 2;
        grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
  }
  #submitted #votes > li > div.content {
    -ms-grid-row-span: 3;
    grid-row-end: 3;
  }
  #votes > li > div.edit {
    -ms-grid-row: 2;
        grid-row-start: 2;
    -ms-grid-row-span: 1;
    grid-row-end: 3;
    -ms-grid-column: 2;
        grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
  }
  #votes > li > div.controls {
    -ms-grid-row: 1;
        grid-row-start: 1;
    -ms-grid-row-span: 2;
    grid-row-end: 3;
    -ms-grid-column: 3;
        grid-column-start: 3;
    -ms-grid-column-span: 1;
    grid-column-end: 4;
  }
  #votes > li .content, #votes > li .edit {
    text-align: left;
  }
  #votes > li .content p, #votes > li .content #results .nav li, #results .nav #votes > li .content li, #votes > li .content #selector .manual .manual-form dt, #selector .manual .manual-form #votes > li .content dt, #votes > li .content #selector .manual .manual-form dd, #selector .manual .manual-form #votes > li .content dd, #votes > li .content .user-details dt label, .user-details dt #votes > li .content label, #votes > li .content .user-details div label, .user-details div #votes > li .content label, #votes > li .edit p, #votes > li .edit #results .nav li, #results .nav #votes > li .edit li, #votes > li .edit #selector .manual .manual-form dt, #selector .manual .manual-form #votes > li .edit dt, #votes > li .edit #selector .manual .manual-form dd, #selector .manual .manual-form #votes > li .edit dd, #votes > li .edit .user-details dt label, .user-details dt #votes > li .edit label, #votes > li .edit .user-details div label, .user-details div #votes > li .edit label {
    margin: 0;
  }
}
@media (max-width: 470px) {
  #votes > li {
    -ms-grid-columns: 60% 40%;
    grid-template-columns: 60% 40%;
    -ms-grid-rows: auto auto auto;
    grid-template-rows: auto auto auto;
  }
  #votes > li > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  #votes > li > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  #votes > li > *:nth-child(3) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  #votes > li > *:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  #votes > li > *:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  #votes > li > *:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }
  #votes > li > div.rank {
    -ms-grid-row: 1;
        grid-row-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 2;
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
  }
  #votes > li > div.rank p, #votes > li > div.rank #results .nav li, #results .nav #votes > li > div.rank li, #votes > li > div.rank #selector .manual .manual-form dt, #selector .manual .manual-form #votes > li > div.rank dt, #votes > li > div.rank #selector .manual .manual-form dd, #selector .manual .manual-form #votes > li > div.rank dd, #votes > li > div.rank .user-details dt label, .user-details #votes > li > div.rank label {
    margin: 0 0 0 auto;
  }
  #votes > li > div.content {
    -ms-grid-row: 2;
        grid-row-start: 2;
    -ms-grid-row-span: 1;
    grid-row-end: 3;
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-column-span: 2;
    grid-column-end: 3;
  }
  #votes > li > div.edit {
    -ms-grid-row: 3;
        grid-row-start: 3;
    -ms-grid-row-span: 1;
    grid-row-end: 4;
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-column-span: 2;
    grid-column-end: 3;
    padding: 2rem 0;
  }
  #votes > li > div.controls {
    -ms-grid-row: 1;
        grid-row-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 2;
    -ms-grid-column: 2;
        grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
  }
  #votes > li > div.controls p, #votes > li > div.controls #results .nav li, #results .nav #votes > li > div.controls li, #votes > li > div.controls #selector .manual .manual-form dt, #selector .manual .manual-form #votes > li > div.controls dt, #votes > li > div.controls #selector .manual .manual-form dd, #selector .manual .manual-form #votes > li > div.controls dd, #votes > li > div.controls .user-details dt label, .user-details #votes > li > div.controls label {
    margin: 0 auto 0 0;
  }
}
#votes > li .rank p, #votes > li .rank #results .nav li, #results .nav #votes > li .rank li, #votes > li .rank #selector .manual .manual-form dt, #selector .manual .manual-form #votes > li .rank dt, #votes > li .rank #selector .manual .manual-form dd, #selector .manual .manual-form #votes > li .rank dd, #votes > li .rank .user-details dt label, .user-details dt #votes > li .rank label, #votes > li .rank .user-details div label, .user-details div #votes > li .rank label {
  font-family: "Oswald", sans-serif;
  color: #533c26;
  font-size: 10em;
  font-weight: 400;
  margin-bottom: 0.1em;
}
#votes > li .content {
  color: #212121;
}
#votes > li .content span {
  display: block;
}
#votes > li .content .author {
  text-transform: uppercase;
  font-size: 1.6em;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-family: "Signika", sans-serif;
}
#votes > li .content .title {
  color: #949498;
}
#votes > li .controls p a, #votes > li .controls #results .nav li a, #results .nav #votes > li .controls li a, #votes > li .controls #selector .manual .manual-form dt a, #selector .manual .manual-form #votes > li .controls dt a, #votes > li .controls #selector .manual .manual-form dd a, #selector .manual .manual-form #votes > li .controls dd a, #votes > li .controls .user-details dt label a, .user-details dt #votes > li .controls label a, #votes > li .controls .user-details div label a, .user-details div #votes > li .controls label a {
  display: block;
  width: 4rem;
  height: 4rem;
  transition: all 0.5s ease;
}
#votes > li .controls p a:before, #votes > li .controls #results .nav li a:before, #results .nav #votes > li .controls li a:before, #votes > li .controls #selector .manual .manual-form dt a:before, #selector .manual .manual-form #votes > li .controls dt a:before, #votes > li .controls #selector .manual .manual-form dd a:before, #selector .manual .manual-form #votes > li .controls dd a:before, #votes > li .controls .user-details dt label a:before, .user-details dt #votes > li .controls label a:before, #votes > li .controls .user-details div label a:before, .user-details div #votes > li .controls label a:before {
  display: block;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 8px;
  border: 1px solid #949498;
  line-height: 3.2rem;
  font-size: 2rem;
  top: 0;
  left: 0;
  color: #949498;
  text-indent: 0;
  font-family: "Signika", sans-serif;
  transition: border 0.5s ease, color 0.5s ease;
}
#votes > li .controls p a.move-up:before, #votes > li .controls #results .nav li a.move-up:before, #results .nav #votes > li .controls li a.move-up:before, #votes > li .controls #selector .manual .manual-form dt a.move-up:before, #selector .manual .manual-form #votes > li .controls dt a.move-up:before, #votes > li .controls #selector .manual .manual-form dd a.move-up:before, #selector .manual .manual-form #votes > li .controls dd a.move-up:before, #votes > li .controls .user-details dt label a.move-up:before, .user-details dt #votes > li .controls label a.move-up:before, #votes > li .controls .user-details div label a.move-up:before, .user-details div #votes > li .controls label a.move-up:before {
  content: "↑";
}
#votes > li .controls p a.move-down:before, #votes > li .controls #results .nav li a.move-down:before, #results .nav #votes > li .controls li a.move-down:before, #votes > li .controls #selector .manual .manual-form dt a.move-down:before, #selector .manual .manual-form #votes > li .controls dt a.move-down:before, #votes > li .controls #selector .manual .manual-form dd a.move-down:before, #selector .manual .manual-form #votes > li .controls dd a.move-down:before, #votes > li .controls .user-details dt label a.move-down:before, .user-details dt #votes > li .controls label a.move-down:before, #votes > li .controls .user-details div label a.move-down:before, .user-details div #votes > li .controls label a.move-down:before {
  content: "↓";
}
#votes > li .controls p a.move-up, #votes > li .controls #results .nav li a.move-up, #results .nav #votes > li .controls li a.move-up, #votes > li .controls #selector .manual .manual-form dt a.move-up, #selector .manual .manual-form #votes > li .controls dt a.move-up, #votes > li .controls #selector .manual .manual-form dd a.move-up, #selector .manual .manual-form #votes > li .controls dd a.move-up, #votes > li .controls .user-details dt label a.move-up, .user-details dt #votes > li .controls label a.move-up, #votes > li .controls .user-details div label a.move-up, .user-details div #votes > li .controls label a.move-up {
  margin-top: 1rem;
}
#votes > li .controls p a.move-up:last-child, #votes > li .controls #results .nav li a.move-up:last-child, #results .nav #votes > li .controls li a.move-up:last-child, #votes > li .controls #selector .manual .manual-form dt a.move-up:last-child, #selector .manual .manual-form #votes > li .controls dt a.move-up:last-child, #votes > li .controls #selector .manual .manual-form dd a.move-up:last-child, #selector .manual .manual-form #votes > li .controls dd a.move-up:last-child, #votes > li .controls .user-details dt label a.move-up:last-child, .user-details dt #votes > li .controls label a.move-up:last-child, #votes > li .controls .user-details div label a.move-up:last-child, .user-details div #votes > li .controls label a.move-up:last-child {
  margin-bottom: 4rem;
}
#votes > li .controls p a.move-down:first-child, #votes > li .controls #results .nav li a.move-down:first-child, #results .nav #votes > li .controls li a.move-down:first-child, #votes > li .controls #selector .manual .manual-form dt a.move-down:first-child, #selector .manual .manual-form #votes > li .controls dt a.move-down:first-child, #votes > li .controls #selector .manual .manual-form dd a.move-down:first-child, #selector .manual .manual-form #votes > li .controls dd a.move-down:first-child, #votes > li .controls .user-details dt label a.move-down:first-child, .user-details dt #votes > li .controls label a.move-down:first-child, #votes > li .controls .user-details div label a.move-down:first-child, .user-details div #votes > li .controls label a.move-down:first-child {
  margin-top: 5rem;
}
#votes > li .controls p a:first-child + a, #votes > li .controls #results .nav li a:first-child + a, #results .nav #votes > li .controls li a:first-child + a, #votes > li .controls #selector .manual .manual-form dt a:first-child + a, #selector .manual .manual-form #votes > li .controls dt a:first-child + a, #votes > li .controls #selector .manual .manual-form dd a:first-child + a, #selector .manual .manual-form #votes > li .controls dd a:first-child + a, #votes > li .controls .user-details dt label a:first-child + a, .user-details dt #votes > li .controls label a:first-child + a, #votes > li .controls .user-details div label a:first-child + a, .user-details div #votes > li .controls label a:first-child + a {
  margin-top: 0.5rem;
}
#votes > li .controls p a:focus:before, #votes > li .controls #results .nav li a:focus:before, #results .nav #votes > li .controls li a:focus:before, #votes > li .controls #selector .manual .manual-form dt a:focus:before, #selector .manual .manual-form #votes > li .controls dt a:focus:before, #votes > li .controls #selector .manual .manual-form dd a:focus:before, #selector .manual .manual-form #votes > li .controls dd a:focus:before, #votes > li .controls .user-details dt label a:focus:before, .user-details dt #votes > li .controls label a:focus:before, #votes > li .controls .user-details div label a:focus:before, .user-details div #votes > li .controls label a:focus:before, #votes > li .controls p a:active:before, #votes > li .controls #results .nav li a:active:before, #results .nav #votes > li .controls li a:active:before, #votes > li .controls #selector .manual .manual-form dt a:active:before, #selector .manual .manual-form #votes > li .controls dt a:active:before, #votes > li .controls #selector .manual .manual-form dd a:active:before, #selector .manual .manual-form #votes > li .controls dd a:active:before, #votes > li .controls .user-details dt label a:active:before, .user-details dt #votes > li .controls label a:active:before, #votes > li .controls .user-details div label a:active:before, .user-details div #votes > li .controls label a:active:before, #votes > li .controls p a:hover:before, #votes > li .controls #results .nav li a:hover:before, #results .nav #votes > li .controls li a:hover:before, #votes > li .controls #selector .manual .manual-form dt a:hover:before, #selector .manual .manual-form #votes > li .controls dt a:hover:before, #votes > li .controls #selector .manual .manual-form dd a:hover:before, #selector .manual .manual-form #votes > li .controls dd a:hover:before, #votes > li .controls .user-details dt label a:hover:before, .user-details dt #votes > li .controls label a:hover:before, #votes > li .controls .user-details div label a:hover:before, .user-details div #votes > li .controls label a:hover:before {
  color: #212121;
  border-color: #212121;
}
#votes > li .add-opinion {
  padding: 10px;
  text-align: left;
}
#votes > li .add-opinion #reason {
  font: inherit;
  background: #fff;
  margin: 0.5em auto;
  padding: 0.5em;
  position: relative;
  border: 2px solid #949498;
  border-radius: 8px;
  transition: border 0.5s ease;
  width: 100%;
  height: 5em;
  color: #212121;
  resize: none;
}
#votes > li .add-opinion #reason:focus {
  border-color: #ffd440;
}
#votes > li .add-opinion input[type=checkbox] + label:before {
  border-color: #949498;
}
#votes > li .add-opinion input[type=checkbox]:checked + label:before {
  border-color: #ffd440;
}

#notification, #form {
  display: flex;
  align-items: center;
  padding: 0 4rem;
  width: 100%;
}
#notification .wrapper, #form .wrapper {
  background: #fff;
  color: #212121;
}

#notification b, #notification em {
  font-family: "Signika", sans-serif;
  font-weight: 700;
}
#notification em {
  font-style: normal;
  text-transform: uppercase;
}

#selector {
  /*.blackout {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba($black, 0.7);

    a {
      display: block;
      position: absolute;
      cursor: pointer;
      @extend %text-hide;
      width: 1.5*$wrapper-padding;
      height: 1.5*$wrapper-padding;
      background: url('../img/cancel.svg') no-repeat center center;
      background-size: contain;
      top: .25*$wrapper-padding;
      right: .25*$wrapper-padding;
      z-index: 10;
    }
  }*/
}
#selector .selector {
  display: flex;
  align-items: center;
  padding: 0 4rem;
  width: 100%;
  /*@media(max-width: $small-screen-width) {
    padding: 0 $wrapper-padding/2;
  }*/
}
@media (max-width: 768px) {
  #selector .selector {
    padding: 0 2rem;
  }
}
#selector .close {
  position: absolute;
  top: 2rem;
  right: 2rem;
}
#selector .close a {
  display: block;
  width: 2rem;
  height: 2rem;
}
#selector .close a:before, #selector .close a:after {
  background: #fff;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  height: 3px;
  width: 100%;
  transition: background 0.5s ease;
}
#selector .close a:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#selector .close a:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#selector .close a:hover:before, #selector .close a:hover:after, #selector .close a:active:before, #selector .close a:active:after, #selector .close a:focus:before, #selector .close a:focus:after {
  background: #533c26;
}
#selector .controls {
  color: #212121;
  font-size: 1.6rem;
  text-transform: uppercase;
}

#selector .search h1, #selector .search h2, #selector .search p, #selector .search #results .nav li, #results .nav #selector .search li, #selector .search .manual .manual-form dt, #selector .manual .manual-form .search dt, #selector .search .manual .manual-form dd, #selector .manual .manual-form .search dd, #selector .search .user-details dt label, .user-details dt #selector .search label, #selector .search .user-details div label, .user-details div #selector .search label {
  margin-bottom: 1rem;
}
#selector .search .search-field {
  display: inline-block;
  position: relative;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 0;
  max-width: 560px;
  width: 100%;
}
#selector .search .search-field:before {
  background: url("../img/search.svg") no-repeat center center;
  background-size: contain;
  z-index: 10;
  top: 50%;
  left: 0.7em;
  transform: translateY(-50%);
  height: 1.6em;
  width: 1.6em;
}
#selector .search .search-field input {
  font: inherit;
  background: #fff #fff;
  padding: 0.5em 2.6em;
  position: relative;
  border: 2px solid #fff;
  border-radius: 8px;
  transition: border 0.5s ease;
  width: 100%;
  color: #212121;
}
#selector .search .search-field input:focus {
  border-color: #ffd440;
}
#selector .search .search-field input:-ms-input-placeholder {
  color: #949498;
  font-weight: 400;
}
#selector .search .search-field input::placeholder {
  color: #949498;
  font-weight: 400;
}

#selector .clear {
  position: absolute;
  display: block;
  top: 50%;
  right: 0.6em;
  transform: translateY(-50%);
  transition: border 0.5s ease;
  border-radius: 360em;
  border: 2px solid transparent;
}
#selector .clear:hover, #selector .clear:active {
  border: 2px solid #212121;
}
#selector .clear:focus {
  border: 2px solid #533c26;
}
#selector .clear:before, #selector .clear:after {
  z-index: 10;
  background: #212121;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  height: 3px;
  width: 66%;
}
#selector .clear:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#selector .clear:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#selector .search .clear {
  width: 1.5em;
  height: 1.5em;
  top: 50%;
  right: 0.6em;
  transform: translateY(-50%);
}
#selector .list-holder {
  position: relative;
}
#selector .list-holder .back {
  margin: 0;
  position: absolute;
  bottom: 100%;
  right: 0;
  padding-left: 1em;
}
#selector .list-holder .back a {
  color: #212121;
  font-weight: 700;
}
#selector .list-holder .back a:before, #selector .list-holder .back a:after {
  background: #212121;
  border-radius: 10px;
  top: 50%;
  left: 0;
  height: 3px;
  width: 0.6em;
  transform-origin: 1px center;
  transition: background 0.5s ease;
}
#selector .list-holder .back a:before {
  transform: translateY(-50%) rotate(35deg);
}
#selector .list-holder .back a:after {
  transform: translateY(-50%) rotate(-35deg);
}
#selector .list-holder .back a:hover, #selector .list-holder .back a:active, #selector .list-holder .back a:focus {
  color: #533c26;
}
#selector .list-holder .back a:hover:before, #selector .list-holder .back a:hover:after, #selector .list-holder .back a:active:before, #selector .list-holder .back a:active:after, #selector .list-holder .back a:focus:before, #selector .list-holder .back a:focus:after {
  background: #533c26;
}

#selector .result-list .list-holder, #selector .suggestion .list-holder {
  height: 340px;
}
#selector .result-list .list-holder ul, #selector .suggestion .list-holder ul {
  overflow-y: scroll;
  width: 100%;
  margin: 0 auto 20px;
  box-shadow: 0 0 10px rgba(148, 148, 152, 0.6);
  list-style: none;
}
#selector .result-list .list-holder ul li, #selector .suggestion .list-holder ul li {
  text-align: left;
  border-bottom: 1px solid #d3d3d3;
  font-size: 1.6em;
  background: #fff;
}
#selector .result-list .list-holder ul li a, #selector .suggestion .list-holder ul li a {
  position: relative;
  padding: 2rem calc(4rem + 2em) 2rem 2rem;
  display: block;
  color: #212121;
  background: #fff;
  transition: background 0.5s ease, color 0.5s ease;
}
#selector .result-list .list-holder ul li a b, #selector .suggestion .list-holder ul li a b {
  font-weight: 400;
}
#selector .result-list .list-holder ul li a em, #selector .suggestion .list-holder ul li a em {
  font-family: "Signika", sans-serif;
  font-style: normal;
  font-weight: 700;
}
#selector .result-list .list-holder ul li a span, #selector .suggestion .list-holder ul li a span {
  text-decoration: underline;
}
#selector .result-list .list-holder ul li a mark, #selector .suggestion .list-holder ul li a mark {
  display: block;
  width: 2em;
  height: 2em;
  border-radius: 360rem;
  background: #d3d3d3;
  border: 2px solid #d3d3d3;
  transition: background 0.5s ease, border 0.5s ease;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}
#selector .result-list .list-holder ul li a mark svg, #selector .suggestion .list-holder ul li a mark svg {
  width: 60%;
  left: 20%;
  height: 100%;
  position: relative;
}
#selector .result-list .list-holder ul li a mark svg polyline, #selector .suggestion .list-holder ul li a mark svg polyline {
  stroke: #d3d3d3;
  transition: stroke 0.5s ease;
}
#selector .result-list .list-holder ul li a:hover, #selector .result-list .list-holder ul li a:focus, #selector .result-list .list-holder ul li a:active, #selector .suggestion .list-holder ul li a:hover, #selector .suggestion .list-holder ul li a:focus, #selector .suggestion .list-holder ul li a:active {
  background: #f5f5f5;
  color: #ffd440;
}
#selector .result-list .list-holder ul li a.selected, #selector .suggestion .list-holder ul li a.selected {
  background: #d3d3d3;
  color: #533c26;
}
#selector .result-list .list-holder ul li a.selected mark, #selector .suggestion .list-holder ul li a.selected mark {
  background: #d3d3d3;
  border-color: #533c26;
}
#selector .result-list .list-holder ul li a.selected mark svg polyline, #selector .suggestion .list-holder ul li a.selected mark svg polyline {
  stroke: #533c26;
}
#selector .result-list .list-holder ul li.staggered-fade-move, #selector .suggestion .list-holder ul li.staggered-fade-move {
  transition: transform 1s;
}
#selector .result-list .list-holder {
  /*
  -------------------------------------------
  Ajax animation
  -------------------------------------------
  */
  /*
   -------------------------------------------
   END Ajax animation
   -------------------------------------------
   */
}
#selector .result-list .list-holder .va-loading {
  bottom: 0;
  height: 19px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 19px;
  z-index: 9009;
}
#selector .result-list .list-holder .va-cssload-square {
  margin: auto;
  width: 19px;
  height: 19px;
  transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
}
#selector .result-list .list-holder .va-cssload-square-part {
  position: absolute;
  width: 19px;
  height: 19px;
  z-index: 1;
  animation: cssload-part-anim 0.92s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
  -o-animation: cssload-part-anim 0.92s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
  -ms-animation: cssload-part-anim 0.92s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
  -webkit-animation: cssload-part-anim 0.92s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
  -moz-animation: cssload-part-anim 0.92s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
#selector .result-list .list-holder .va-cssload-square-color1 {
  background: #7c6b74;
  opacity: 0.8;
  right: 0;
  bottom: 0;
  animation-direction: alternate-reverse;
  -o-animation-direction: alternate-reverse;
  -ms-animation-direction: alternate-reverse;
  -webkit-animation-direction: alternate-reverse;
  -moz-animation-direction: alternate-reverse;
}
#selector .result-list .list-holder .va-cssload-square-color2 {
  background: #7c6b74;
  opacity: 0.6;
  left: 0;
  top: 0;
}
#selector .result-list .list-holder .va-cssload-square-blend {
  background: #7c6b74;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  animation: blend-anim 0.92s ease-in infinite;
  -o-animation: blend-anim 0.92s ease-in infinite;
  -ms-animation: blend-anim 0.92s ease-in infinite;
  -webkit-animation: blend-anim 0.92s ease-in infinite;
  -moz-animation: blend-anim 0.92s ease-in infinite;
}
@keyframes blend-anim {
  0% {
    transform: scale(0.01, 0.01) rotateY(0);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  50% {
    transform: scale(1, 1) rotateY(0);
    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  100% {
    transform: scale(0.01, 0.01) rotateY(0);
  }
}
@keyframes cssload-part-anim {
  0% {
    transform: translate3d(-10px, -10px, 0);
  }
  100% {
    transform: translate3d(10px, 10px, 0);
  }
}
#selector .result-list .list-holder ul {
  max-width: 512px;
  max-height: 340px;
}
#selector .suggestion .list-holder ul {
  max-height: 100%;
}

#selector .suggestion h3, #selector .suggestion .progress-bar ul > li, .progress-bar #selector .suggestion ul > li {
  transition: opacity 0.5s ease;
}
#selector .suggestion .composers {
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  position: relative;
}
#selector .suggestion .composers .composer-list {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  display: -ms-grid;
  display: grid;
}
#selector .suggestion .composers .composer-grid, #selector .suggestion .composers .list-grid {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  list-style: none;
}
#selector .suggestion .composers .composerList-leave-active, #selector .suggestion .composers .composerList-leave-to {
  display: none !important;
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
#selector .suggestion .composers .composerList-enter-active .composer, #selector .suggestion .composers .composerList-enter-to .composer {
  animation: slideUp 0.5s ease forwards;
  opacity: 0;
  transition: none !important;
}
#selector .suggestion .composers .composerList-enter-active .composer:nth-child(1), #selector .suggestion .composers .composerList-enter-to .composer:nth-child(1) {
  animation-delay: 0s;
}
#selector .suggestion .composers .composerList-enter-active .composer:nth-child(2), #selector .suggestion .composers .composerList-enter-to .composer:nth-child(2) {
  animation-delay: 0.1s;
}
#selector .suggestion .composers .composerList-enter-active .composer:nth-child(3), #selector .suggestion .composers .composerList-enter-to .composer:nth-child(3) {
  animation-delay: 0.2s;
}
#selector .suggestion .composers .composerList-enter-active .composer:nth-child(4), #selector .suggestion .composers .composerList-enter-to .composer:nth-child(4) {
  animation-delay: 0.3s;
}
#selector .suggestion .composers .composerList-enter-active .composer:nth-child(5), #selector .suggestion .composers .composerList-enter-to .composer:nth-child(5) {
  animation-delay: 0.4s;
}
#selector .suggestion .composers .composerList-enter-active .composer:nth-child(6), #selector .suggestion .composers .composerList-enter-to .composer:nth-child(6) {
  animation-delay: 0.5s;
}
#selector .suggestion .composers .composerList-enter-active .composer:nth-child(7), #selector .suggestion .composers .composerList-enter-to .composer:nth-child(7) {
  animation-delay: 0.6s;
}
#selector .suggestion .composers .composerList-enter-active .composer:nth-child(8), #selector .suggestion .composers .composerList-enter-to .composer:nth-child(8) {
  animation-delay: 0.7s;
}
#selector .suggestion .composers .composerSliderControls {
  position: absolute;
  top: calc(50% - 40px);
  height: 0;
  width: 100%;
}
#selector .suggestion .composers .composerSliderControls a {
  position: absolute;
  width: 2rem;
  height: 4rem;
  top: -2rem;
}
#selector .suggestion .composers .composerSliderControls a:before, #selector .suggestion .composers .composerSliderControls a:after {
  width: 20px;
  height: 2px;
  top: calc(2rem - 1px);
  background: #fff;
  border-radius: 2px;
  transition: background 0.5s ease;
}
#selector .suggestion .composers .composerSliderControls a.prev {
  left: 0;
}
#selector .suggestion .composers .composerSliderControls a.prev:before, #selector .suggestion .composers .composerSliderControls a.prev:after {
  left: 0;
  transform-origin: 1px center;
}
#selector .suggestion .composers .composerSliderControls a.prev:before {
  transform: rotate(45deg);
}
#selector .suggestion .composers .composerSliderControls a.prev:after {
  transform: rotate(-45deg);
}
#selector .suggestion .composers .composerSliderControls a.next {
  right: 0;
}
#selector .suggestion .composers .composerSliderControls a.next:before, #selector .suggestion .composers .composerSliderControls a.next:after {
  right: 0;
  transform-origin: 19px center;
}
#selector .suggestion .composers .composerSliderControls a.next:before {
  transform: rotate(45deg);
}
#selector .suggestion .composers .composerSliderControls a.next:after {
  transform: rotate(-45deg);
}
#selector .suggestion .composers .composerSliderControls a:focus:before, #selector .suggestion .composers .composerSliderControls a:focus:after, #selector .suggestion .composers .composerSliderControls a:hover:before, #selector .suggestion .composers .composerSliderControls a:hover:after, #selector .suggestion .composers .composerSliderControls a:active:before, #selector .suggestion .composers .composerSliderControls a:active:after {
  background: #ffd440;
}
#selector .suggestion .composers .composerSliderPages {
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
}
#selector .suggestion .composers .composerSliderPages a {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin: 0.5rem;
  border-radius: 360em;
  transition: background 0.5s ease;
  background: #fff;
}
#selector .suggestion .composers .composerSliderPages a.active, #selector .suggestion .composers .composerSliderPages a:hover, #selector .suggestion .composers .composerSliderPages a:focus, #selector .suggestion .composers .composerSliderPages a:active {
  background: #ffd440;
}
#selector .suggestion .composers .composerSliderControls, #selector .suggestion .composers .composerSliderPages {
  transition: opacity 0.5s ease;
}
#selector .suggestion .composers .composerSliderControls.invisible, #selector .suggestion .composers .composerSliderPages.invisible {
  opacity: 0;
  pointer-events: none;
}
#selector .suggestion .composers .composer {
  transition: transform 0.5s ease;
}
#selector .suggestion .composers .composer-thumbnail {
  display: block;
  transition: opacity 0.5s ease;
}
#selector .suggestion .composers .composer-thumbnail img {
  display: block;
  border-radius: 8px;
  width: 140px;
  height: 140px;
  margin: 0 auto;
}
#selector .suggestion .composers .composer-thumbnail label {
  margin-top: 1rem;
  display: block;
  text-align: center;
  font-family: "Signika", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  text-transform: uppercase;
}
@media (min-width: 661px) {
  #selector .suggestion .composers {
    max-width: 800px;
    padding: 0 40px 40px;
  }
  #selector .suggestion .composers .composer-grid, #selector .suggestion .composers .list-grid {
    display: -ms-grid;
    display: grid;
    grid-gap: 2em;
    -ms-grid-columns: 1fr 2em 1fr 2em 1fr 2em 1fr;
    grid-template-columns: repeat(4, 1fr);
  }
  #selector .suggestion .composers .list-grid {
    display: none;
  }
  #selector .suggestion .composers .list-grid .list-holder {
    -ms-grid-row: 1;
        grid-row-start: 1;
    -ms-grid-row-span: 2;
    grid-row-end: 3;
    -ms-grid-column: 2;
        grid-column-start: 2;
    -ms-grid-column-span: 3;
    grid-column-end: 5;
  }
  #selector .suggestion .composers .list-grid .controls {
    position: absolute;
    top: 100%;
    right: 0;
    /*grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 5;*/
  }
}
@media (max-width: 660px) {
  #selector .suggestion .composers .composer {
    padding: 5px;
  }
}
@media (max-width: 660px) and (min-width: 501px) {
  #selector .suggestion .composers {
    padding: 0 20px 40px;
  }
  #selector .suggestion .composers .composerSliderControls {
    width: calc(100% + 40px);
    left: -20px;
  }
  #selector .suggestion .composers .composer {
    width: 50%;
    float: left;
  }
}
@media (max-width: 660px) {
  #selector .suggestion .composers .composer-thumbnail {
    display: flex;
    width: 100%;
    align-items: center;
  }
  #selector .suggestion .composers .composer-thumbnail img, #selector .suggestion .composers .composer-thumbnail label {
    display: block;
    flex: 1;
    margin: 0;
  }
  #selector .suggestion .composers .composer-thumbnail img {
    flex: 0;
    width: 70px;
    height: 70px;
    margin: 0;
    display: block;
  }
}
@media (max-width: 660px) {
  #selector .suggestion .composers .list-holder {
    padding-top: 90px;
    padding-bottom: 40px;
  }
}
@media (max-width: 660px) {
  #selector .suggestion .composers .controls {
    margin-bottom: -20px;
  }
}
@media (max-width: 660px) and (max-width: 500px) {
  #selector .suggestion .composers {
    padding-bottom: 40px;
  }
  #selector .suggestion .composers .composerSliderControls {
    z-index: 1;
    top: auto;
    bottom: 1.25rem;
  }
  #selector .suggestion .composers .composerSliderControls a.next {
    right: 1rem;
  }
  #selector .suggestion .composers .composerSliderControls a.prev {
    left: 1rem;
  }
  #selector .suggestion .composers .composerSliderControls a:before, #selector .suggestion .composers .composerSliderControls a:after {
    width: 15px;
  }
  #selector .suggestion .composers .composerSliderControls a.next:before, #selector .suggestion .composers .composerSliderControls a.next:after {
    transform-origin: 14px center;
  }
  #selector .suggestion .composers .composer .composer-thumbnail {
    min-height: 40px;
    position: relative;
    border: 1px solid #949498;
    transition: background 0.5s ease;
  }
  #selector .suggestion .composers .composer .composer-thumbnail:focus, #selector .suggestion .composers .composer .composer-thumbnail:active, #selector .suggestion .composers .composer .composer-thumbnail:hover {
    background: rgba(148, 148, 152, 0.2);
  }
  #selector .suggestion .composers .composer .composer-thumbnail img {
    width: 56px;
    height: 56px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  #selector .suggestion .composers .composer:nth-child(2n) .composer-thumbnail img {
    right: 0;
    left: auto;
  }
  #selector .suggestion .composers .list-holder {
    padding: 60px 0 40px;
    height: 400px;
  }
}
#selector .suggestion.hasActiveComposer .composers .composer .composer-thumbnail, #selector .suggestion.afterActiveComposer .composers .composer .composer-thumbnail {
  filter: grayscale(80%);
  opacity: 0;
}
#selector .suggestion.hasActiveComposer .composers .composer.selected .composer-thumbnail, #selector .suggestion.afterActiveComposer .composers .composer.selected .composer-thumbnail {
  filter: none;
  opacity: 1;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#selector .suggestion.hasActiveComposer .composers .list-grid {
  position: relative;
  display: -ms-grid;
  display: grid;
  animation: fadeIn 0.5s ease;
}
@media (min-width: 661px) {
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(8n+2) {
    transform: translateX(calc(-100% - 2em));
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(8n+3) {
    transform: translateX(calc(-200% - 4em));
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(8n+4) {
    transform: translateX(calc(-300% - 6em));
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(8n+5) {
    transform: translateY(calc(-100% - 2em));
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(8n+6) {
    transform: translateX(calc(-100% - 2em)) translateY(calc(-100% - 2em));
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(8n+7) {
    transform: translateX(calc(-200% - 4em)) translateY(calc(-100% - 2em));
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(8n) {
    transform: translateX(calc(-300% - 6em)) translateY(calc(-100% - 2em));
  }
}
@media (max-width: 660px) and (min-width: 501px) {
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(n+1) {
    transform: translate(50%, 0);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(n+2) {
    transform: translate(-50%, 0);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(n+3) {
    transform: translate(50%, -100%);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(n+4) {
    transform: translate(-50%, -100%);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(n+5) {
    transform: translate(50%, -200%);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(n+6) {
    transform: translate(-50%, -200%);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(n+7) {
    transform: translate(50%, -300%);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(n+8) {
    transform: translate(-50%, -300%);
  }
}
@media (max-width: 500px) {
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(1) {
    transform: translateY(0%);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(2) {
    transform: translateY(-100%);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(3) {
    transform: translateY(-200%);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(4) {
    transform: translateY(-300%);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(5) {
    transform: translateY(-400%);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(6) {
    transform: translateY(-500%);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(7) {
    transform: translateY(-600%);
  }
  #selector .suggestion.hasActiveComposer .composers .composer-grid .selected:nth-child(8) {
    transform: translateY(-700%);
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#selector .suggestion.afterActiveComposer .list-grid {
  position: relative;
  display: -ms-grid;
  display: grid;
  animation: fadeOut 0.5s ease;
}

@media (min-width: 661px) and (max-width: 780px) {
  #selector .wrapper {
    height: 525px;
  }
  #selector .suggestion .composers .composer {
    height: 151px;
  }
  #selector .suggestion .composers .composer .composer-thumbnail img {
    width: 100px;
    height: 100px;
  }
  #selector .result-list .list-holder, #selector .suggestion .list-holder {
    height: 320px;
  }
  #selector .result-list .list-holder ul, #selector .suggestion .list-holder ul {
    max-height: 300px;
  }
}
@media (min-width: 661px) and (max-height: 660px) {
  #selector .wrapper {
    height: 525px;
  }
  #selector .suggestion .composers .composer {
    height: 151px;
  }
  #selector .suggestion .composers .composer .composer-thumbnail img {
    width: 100px;
    height: 100px;
  }
  #selector .result-list .list-holder, #selector .suggestion .list-holder {
    height: 320px;
  }
}
#selector .manual {
  position: relative;
}
#selector .manual .manual-form, #selector .manual .manual-confirm {
  display: flex;
  align-items: center;
  transition: opacity 0.5s ease, height 0.5s ease, filter 1.5s ease;
  overflow: hidden;
  min-height: 500px;
  display: none;
}
#selector .manual .manual-form > div, #selector .manual .manual-confirm > div {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
#selector .manual .manual-form.active, #selector .manual .manual-confirm.active {
  height: 100%;
  display: flex;
}
#selector .manual .manual-form.loading, #selector .manual .manual-confirm.loading {
  opacity: 0.75;
  filter: grayscale(100%);
  pointer-events: none;
}
#selector .manual .manual-form dt, #selector .manual .manual-form dd {
  text-align: left;
}
#selector .manual .manual-form dt {
  margin-bottom: 0;
  font-weight: 700;
}
#selector .manual .manual-form input {
  width: 100%;
  padding: 0.2em;
  border: 2px solid white;
  color: #212121;
}
#selector .manual .manual-form .disabled {
  filter: grayscale(80);
  opacity: 0.3;
  pointer-events: none;
}

.social {
  max-width: 560px;
  margin: 2em auto;
  color: #fff;
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.social a {
  flex: 1;
  border: none;
  display: block;
  padding: 0.7em 1.2em;
  transition: all 0.5s ease;
}
.social a:hover, .social a:active, .social a:focus {
  letter-spacing: 0.2em;
  color: #fff;
}
.social a:before {
  background: url("../img/social.jpg") no-repeat no-repeat;
  width: 35px;
  height: 35px;
  top: 50%;
  transform: translateY(-50%);
}
.social a.ttw {
  padding-left: 40px;
  background: #1da0f2;
  background-position: -640px -65px;
}
.social a.fcb {
  padding-right: 40px;
  background: #3b5998;
  background-position: -640px -1px;
}
.social a.ttw:before {
  right: 1em;
  background-position: right top;
}
.social a.fcb:before {
  left: 1em;
  background-position: left top;
}

#section-wrapper:before {
  width: 100vw;
  height: 100vh;
  background: url("../img/gold-bg.jpg") #533c26 no-repeat top center;
  background-attachment: fixed;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
#section-wrapper.showBg:before {
  opacity: 1;
}

.add-more {
  padding-top: 4rem;
}
.add-more .cta {
  margin-top: 0em;
}

.chartOpen #intro {
  min-height: 33vw;
}
.chartOpen #intro header #listenBtn {
  background: #533c26;
  color: #fff;
}
.chartOpen #intro header #listenBtn:before {
  background: #533c26;
}
.chartOpen #intro header #listenBtn:after {
  border-left-color: #fff;
}
.chartOpen #intro header #listenBtn:hover, .chartOpen #intro header #listenBtn:active, .chartOpen #intro header #listenBtn:focus {
  background: #ffd440;
}
.chartOpen #intro header #brandLogo {
  background-image: url("../img/gold-logo.png");
}
.chartOpen section {
  display: block;
  min-height: 0;
}
.chartOpen #chart {
  padding-top: 0;
}
.chartOpen #chart .wrapper {
  max-width: 800px;
}
.chartOpen #chart .text-box {
  margin: 0 auto;
  min-height: 100vh;
}

#results {
  position: relative;
  z-index: 10;
  margin-top: 4rem;
}
#results li.staggered-fade-leave-active, #results li.staggered-fade-leave-to {
  display: none;
}
#results li.staggered-fade-enter-active, #results li.staggered-fade-enter-to {
  transition: opacity 1s ease;
}

#top-list {
  margin-top: 2rem;
}
#top-list li {
  list-style: none;
  margin-bottom: 1.5rem;
}
#top-list li > a {
  display: -ms-grid;
  display: grid;
  border-radius: 20px;
  box-shadow: 0 0 15px #949498;
  background: white;
  padding: 1rem;
  -ms-grid-columns: 0 10rem auto 0;
  grid-template-columns: 0 10rem auto 0;
}
#top-list li > a > div {
  padding: 0 1rem;
}
#top-list li > a .img {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/span 2;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  padding: 0;
  width: 140px;
  height: 140px;
}
#top-list li > a .rating {
  -ms-grid-column: 2;
  -ms-grid-row: 1;
  grid-row: 1/2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
}
#top-list li > a .change {
  -ms-grid-column: 2;
  -ms-grid-row: 2;
  grid-row: 2/3;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
}
#top-list li > a .title {
  -ms-grid-column: 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/span 2;
  -ms-grid-column-span: 1;
  grid-column: 3/4;
  text-align: left;
}
#top-list li > a .controls {
  -ms-grid-column: 4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/span 2;
  -ms-grid-column-span: 1;
  grid-column: 4/5;
  -ms-grid-row-align: center;
      align-self: center;
}

#chart {
  z-index: 10;
  position: relative;
  /* @media(max-width: 530px) {
     li > a {
       //-ms-grid-columns: 100px auto 0;
      // grid-template-columns: 100px auto 0;
       -ms-grid-columns: 0 auto 0;
       grid-template-columns: 0 auto 0;
       .change {
         -ms-grid-column: 2;
         -ms-grid-row: 2;
         grid-row: 2 / 3;
         grid-column: 2 / 3;
         align-self: start;
         text-align: center;
       }
       .change, .rating {
         max-width: 14rem;
         line-height: normal;
       }
       .title {
         -ms-grid-column: 2;
         -ms-grid-column-span: 2;
         -ms-grid-row: 3;
         grid-row: 3 / 4;
         grid-column: 1 / 3;
       }
       .controls {
         -ms-grid-column: 3;
         -ms-grid-row-span: 3;
         -ms-grid-row: 1;
         grid-row: 1 / 4;
         grid-column: 3 / 4;
       }
     }
   } */
}
@media (max-width: 500px) {
  #chart .text-box {
    padding: 2rem;
  }
  #chart li > a {
    -ms-grid-columns: 0 10rem auto 0;
    grid-template-columns: 0 10rem auto 0;
  }
  #chart li > a .img {
    width: 110px;
    height: 110px;
  }
  #chart li > a .rating {
    line-height: 0.8em;
  }
  #chart li > a .change {
    -ms-grid-column: 3;
    -ms-grid-row: 1;
    grid-row: 1/2;
    -ms-grid-column-span: 1;
    grid-column: 3/4;
    -ms-grid-row-align: start;
        align-self: start;
    text-align: left;
  }
  #chart li > a .title {
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    -ms-grid-row: 2;
    grid-row: 2/3;
    grid-column: 2/4;
  }
}
@media (max-width: 640px) {
  #chart .wrapper {
    padding: 2rem;
  }
}

#top-list li > a h1, #top-list li > a h2, #top-list li > a h3, #top-list li > a .progress-bar ul > li, .progress-bar #top-list li > a ul > li, #top-list li > a h4, #top-list li > a h5, #top-list li > a h6 {
  margin-bottom: 0;
}
#top-list .controls span {
  display: block;
  background: #533c26;
  color: #fff;
  width: 5rem;
  height: 5rem;
  border-radius: 360em;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.5s ease;
}
#top-list .controls span:hover, #top-list .controls span:focus, #top-list .controls span:active {
  box-shadow: 0 0 10px #533c26;
}
#top-list .controls span:before, #top-list .controls span:after {
  width: 30%;
  left: 35%;
  height: 4px;
  margin-top: -2px;
  background: #fff;
  top: 50%;
}
#top-list .controls span:after {
  transform: rotate(90deg);
}
#top-list a:hover .controls span, #top-list a:focus .controls span, #top-list a:active .controls span {
  box-shadow: 0 0 10px #533c26;
}

#results .img {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #212121;
}
#results .img span {
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease;
  width: 100%;
  height: 100%;
  background: #212121;
  background-size: cover;
  background-position: center center;
}
#results .isVisible .img span {
  opacity: 1;
}
#results .rating {
  font-family: "Signika", sans-serif;
  font-size: 5rem;
  color: #533c26;
}
#results .change {
  font-size: 3rem;
  color: #949498;
}
#results .change span {
  display: inline-block;
  margin-right: 0.25em;
  position: relative;
}
#results .change span:before, #results .change span:after {
  top: calc(50% - 0.3em);
}
#results .change span:before {
  width: 2px;
  height: 0.7em;
  margin-left: -1px;
  left: 50%;
  background: #949498;
}
#results .change span:after {
  width: 0.3em;
  height: 0.3em;
  border: 2px solid #949498;
  border-bottom: none;
  border-right: none;
  left: 50%;
  margin-left: -1px;
  margin-top: -1px;
  transform-origin: 1px 1px;
  transform: rotate(45deg);
}
#results .change span.down {
  transform-origin: center 53%;
  transform: rotate(180deg);
}
#results .title h3, #results .title .progress-bar ul > li, .progress-bar #results .title ul > li {
  font-size: 1.8rem;
  font-family: "Oswald", sans-serif;
  margin: 0.5em 0 0.3em;
  color: #212121;
}
#results .title p, #results .title .nav li, #results .nav .title li, #results .title .user-details dt label, .user-details dt #results .title label, #results .title .user-details div label, .user-details div #results .title label, #results .title #selector .manual .manual-form dt, #selector .manual .manual-form #results .title dt, #results .title #selector .manual .manual-form dd, #selector .manual .manual-form #results .title dd {
  color: #ffca2d;
  font-size: 2.8rem;
  text-transform: uppercase;
  line-height: 1em;
  font-family: "Signika", sans-serif;
}

#results .overlay {
  display: none;
  z-index: 100;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(33, 33, 33, 0.7);
  top: 0;
  left: 0;
  padding: 4rem;
  overflow: scroll;
}
#results .overlay.open {
  display: flex;
}
@media (max-width: 640px) {
  #results .overlay {
    padding: 2rem;
  }
}
#results .overlay .card-holder {
  min-height: 100%;
  margin: 0 auto;
}
#results .overlay .card {
  margin: 0 auto 4rem;
  border-radius: 20px;
  padding: 4rem;
  max-width: 960px;
  background: #fff;
  position: relative;
}
@media (max-width: 650px) {
  #results .overlay .card {
    padding: 2rem;
  }
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#results .overlay .card.overlay-leave-active, #results .overlay .card.overlay-leave-to {
  display: none;
}
#results .overlay .card.overlay-enter-active .move, #results .overlay .card.overlay-enter-to .move {
  opacity: 0;
  animation: slideUp 0.5s ease forwards;
}
#results .overlay .card.overlay-enter-active, #results .overlay .card.overlay-enter-to {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}
#results .overlay .card.overlay-enter-active .move-1, #results .overlay .card.overlay-enter-to .move-1 {
  animation-duration: 1s;
  animation-delay: 0s;
}
#results .overlay .card.overlay-enter-active .move-2, #results .overlay .card.overlay-enter-to .move-2 {
  animation-duration: 0.9s;
  animation-delay: 0.1s;
}
#results .overlay .card.overlay-enter-active .move-3, #results .overlay .card.overlay-enter-to .move-3 {
  animation-duration: 0.8s;
  animation-delay: 0.2s;
}
#results .overlay .card.overlay-enter-active .move-4, #results .overlay .card.overlay-enter-to .move-4 {
  animation-duration: 0.7s;
  animation-delay: 0.3s;
}
#results .overlay .card.overlay-enter-active .move-5, #results .overlay .card.overlay-enter-to .move-5 {
  animation-duration: 0.6s;
  animation-delay: 0.4s;
}
#results .overlay .card.overlay-enter-active .move-6, #results .overlay .card.overlay-enter-to .move-6 {
  animation-duration: 0.5s;
  animation-delay: 0.5s;
}
#results .overlay .card.overlay-enter-active .move-7, #results .overlay .card.overlay-enter-to .move-7 {
  animation-duration: 0.4s;
  animation-delay: 0.6s;
}
#results .overlay .card.overlay-enter-active .move-8, #results .overlay .card.overlay-enter-to .move-8 {
  animation-duration: 0.3s;
  animation-delay: 0.7s;
}
#results .overlay .card .header {
  -ms-display: grid;
  display: grid;
  -ms-grid-columns: 10rem 7rem auto;
  grid-template-columns: 10rem 7rem auto;
  margin-bottom: 2rem;
}
#results .overlay .card .header .rating {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  grid-row: 1/2;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
}
#results .overlay .card .header .change {
  -ms-grid-column: 2;
  -ms-grid-row: 2;
  grid-row: 1/2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -ms-grid-row-align: center;
      align-self: center;
}
#results .overlay .card .header .title {
  -ms-grid-column: 3;
  -ms-grid-row: 1;
  grid-row: 1/2;
  -ms-grid-column-span: 1;
  grid-column: 3/4;
  text-align: left;
  padding: 0 1.5rem 0 1rem;
}
@media (max-width: 650px) {
  #results .overlay .card .header {
    -ms-grid-columns: 10rem auto;
    grid-template-columns: 10rem auto;
  }
  #results .overlay .card .header .change {
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    grid-row: 2/3;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
  }
  #results .overlay .card .header .title {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1/3;
    -ms-grid-column-span: 1;
    grid-column: 2/3;
    text-align: left;
    padding: 0 1.5rem 0 1rem;
  }
}
#results .overlay .card .blurb {
  text-align: justify;
  font-weight: 400;
  font-family: "Signika", sans-serif;
}
#results .overlay .card .blurb .cta {
  padding: 0.8em 3em;
}
#results .overlay .card .blurb .media {
  width: 100%;
  margin-bottom: 2rem;
}
@media (min-width: 651px) {
  #results .overlay .card .blurb .media {
    width: 66%;
    max-width: 450px;
    padding-left: 2rem;
    float: right;
  }
}
#results .overlay .card .blurb p.move-7, #results .overlay .card .blurb .nav li.move-7, #results .nav .overlay .card .blurb li.move-7, #results .overlay .card .blurb .user-details dt label.move-7, .user-details dt #results .overlay .card .blurb label.move-7, #results .overlay .card .blurb .user-details div label.move-7, .user-details div #results .overlay .card .blurb label.move-7, #results .overlay .card .blurb #selector .manual .manual-form dt.move-7, #selector .manual .manual-form #results .overlay .card .blurb dt.move-7, #results .overlay .card .blurb #selector .manual .manual-form dd.move-7, #selector .manual .manual-form #results .overlay .card .blurb dd.move-7 {
  clear: both;
}
#results .overlay .close {
  position: absolute;
  top: 2rem;
  right: 2rem;
}
@media (max-width: 650px) {
  #results .overlay .close {
    top: 1rem;
    right: 1rem;
  }
}
#results .overlay .close a {
  display: block;
  width: 3rem;
  height: 3rem;
}
#results .overlay .close a:before, #results .overlay .close a:after {
  width: 100%;
  height: 4px;
  background: #533c26;
  top: calc(50% - 2px);
  left: 0;
}
#results .overlay .close a:before {
  transform: rotate(45deg);
}
#results .overlay .close a:after {
  transform: rotate(135deg);
}
#results .overlay .controls {
  position: fixed;
  height: 0;
  width: 100%;
  max-width: calc(960px + 8rem);
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}
#results .overlay .controls a {
  position: absolute;
  width: 6rem;
  height: 6rem;
  background: rgba(33, 33, 33, 0.7);
  border-radius: 360em;
  top: -3rem;
  opacity: 0.6;
  transition: opacity 0.5s ease;
}
#results .overlay .controls a:active, #results .overlay .controls a:focus, #results .overlay .controls a:hover {
  opacity: 1;
}
#results .overlay .controls a.prev {
  left: 1rem;
}
#results .overlay .controls a.next {
  right: 1rem;
  transform: rotate(180deg);
}
#results .overlay .controls a:before, #results .overlay .controls a:after {
  height: 2px;
  width: 2.4rem;
  top: calc(50% - 1px);
  left: calc(50% - 1.2rem);
  background: #fff;
  transform-origin: 1px 1px;
}
#results .overlay .controls a:before {
  transform: rotate(45deg);
}
#results .overlay .controls a:after {
  transform: rotate(-45deg);
}
@media (max-width: 650px) {
  #results .overlay .controls a.prev {
    left: -1rem;
  }
  #results .overlay .controls a.next {
    right: -1rem;
  }
}

#results .menu .search-field {
  display: inline-block;
  position: relative;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 0;
  max-width: 560px;
  width: 100%;
}
#results .menu .search-field:before {
  background: url("../img/search.svg") no-repeat center center;
  background-size: contain;
  z-index: 10;
  top: 50%;
  left: 0.7em;
  transform: translateY(-50%);
  height: 1.6em;
  width: 1.6em;
}
#results .menu .search-field input {
  font: inherit;
  background: #fff #fff;
  padding: 0.5em 2.6em;
  position: relative;
  border: 2px solid #533c26;
  border-radius: 8px;
  transition: border 0.5s ease;
  width: 100%;
  color: #212121;
}
#results .menu .search-field input:focus {
  border-color: #ffd440;
}
#results .menu .search-field input:-ms-input-placeholder {
  color: #949498;
  font-weight: 400;
}
#results .menu .search-field input::placeholder {
  color: #949498;
  font-weight: 400;
}
#results .nav {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}
#results .nav li {
  flex: 6em 0 1;
  font-family: "Signika", sans-serif;
  margin-right: 0.5em;
}
#results .nav li:last-child {
  margin-right: 0;
}
#results .nav li a, #results .nav li span {
  display: block;
  color: #fff;
  background: #533c26;
  border-radius: 5px;
  font-size: 2rem;
  padding: 0.3em;
}
#results .nav-small li {
  flex: 2em 0 1;
}
@media (max-width: 551px) {
  #results .nav-large {
    display: none;
  }
}
@media (min-width: 551px) {
  #results .nav-small {
    display: none;
  }
}
#results .back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#results .back-to-top.isVisible {
  opacity: 1;
}
#results .back-to-top a {
  display: block;
  color: #533c26;
  font-family: "Signika", sans-serif;
  text-transform: uppercase;
  font-size: 2.6rem;
  position: relative;
}
#results .back-to-top a:before {
  background: #533c26;
  border-radius: 360em;
  width: 5rem;
  height: 5rem;
  transition: box-shadow 0.5s ease;
  bottom: 100%;
  left: calc(50% - 2.5rem);
}
#results .back-to-top a:after {
  width: 1.5rem;
  height: 1.5rem;
  border: 4px solid #fff;
  border-bottom: none;
  border-left: none;
  bottom: calc(100% + 1rem);
  left: calc(50% - 0.75rem - 2px);
  transform: rotate(-45deg);
}
#results .back-to-top a:hover:before, #results .back-to-top a:focus:before, #results .back-to-top a:active:before {
  box-shadow: 0 0 10px #533c26;
}

.iframe {
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-bottom: 56.2%;
  position: relative;
  top: 0;
  left: 0;
}
.iframe iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#frame {
  background: url("../img/tile.jpg") repeat center top;
  background-attachment: fixed;
  background-size: 40% auto;
  position: relative;
}
@media (min-width: 1275px) {
  #frame {
    background-size: auto;
  }
}
#frame section {
  padding-top: 40px;
  display: flex;
  align-items: center;
}
#frame footer {
  color: #533c26;
  bottom: 0;
  right: 0;
}
#frame footer p, #frame footer .user-details dt label, .user-details dt #frame footer label, #frame footer .user-details div label, .user-details div #frame footer label, #frame footer #selector .manual .manual-form dt, #selector .manual .manual-form #frame footer dt, #frame footer #selector .manual .manual-form dd, #selector .manual .manual-form #frame footer dd, #frame footer #results .nav li, #results .nav #frame footer li {
  margin: 0;
  padding: 1rem;
}
#frame footer p a, #frame footer .user-details dt label a, .user-details dt #frame footer label a, #frame footer .user-details div label a, .user-details div #frame footer label a, #frame footer #selector .manual .manual-form dt a, #selector .manual .manual-form #frame footer dt a, #frame footer #selector .manual .manual-form dd a, #selector .manual .manual-form #frame footer dd a, #frame footer #results .nav li a, #results .nav #frame footer li a {
  color: inherit;
}
#frame footer p a:hover, #frame footer .user-details dt label a:hover, .user-details dt #frame footer label a:hover, #frame footer .user-details div label a:hover, .user-details div #frame footer label a:hover, #frame footer #selector .manual .manual-form dt a:hover, #selector .manual .manual-form #frame footer dt a:hover, #frame footer #selector .manual .manual-form dd a:hover, #selector .manual .manual-form #frame footer dd a:hover, #frame footer #results .nav li a:hover, #results .nav #frame footer li a:hover {
  color: #533c26;
}

header {
  margin-bottom: 2rem;
  text-align: center;
  z-index: 3;
}
header a {
  display: inline-block;
}
header #listenBtn {
  position: absolute;
  top: 0;
  right: 2rem;
  display: inline-block;
  padding: 0.7em 1em 0.6em 3em;
  background: #fff;
  border-radius: 360em;
  color: #533c26;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: "Signika", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 0.5s ease;
}
header #listenBtn:before {
  left: 0;
  top: 0;
  height: 2.58em;
  width: 2.58em;
  border-radius: 360em;
  background: #fff;
  transition: background 0.5s ease;
}
header #listenBtn:after {
  border-top: 0.675em solid transparent;
  border-left: 1.26em solid #533c26;
  border-bottom: 0.675em solid transparent;
  top: 50%;
  left: 1.3em;
  margin-top: -0.675em;
  margin-left: -0.495em;
  transition: border 0.5s ease;
}
header #listenBtn:hover, header #listenBtn:active, header #listenBtn:focus {
  color: #ffd440;
}
header #listenBtn:hover:before, header #listenBtn:active:before, header #listenBtn:focus:before {
  background: #ffd440;
}
header #listenBtn:hover:after, header #listenBtn:active:after, header #listenBtn:focus:after {
  border-left-color: #fff;
}
@media (min-width: 11px) {
  header #brandLogo {
    background: url("../img/gold-logo.png") no-repeat center center;
    background-size: contain;
    width: 300px;
    height: 383px;
    max-width: 84vw;
    max-height: 59.75vw;
  }
}

section {
  text-align: center;
  min-height: calc(100vh - 140px);
}

#submitted .text-box {
  color: #fff;
}

#intro .text-box {
  color: #fff;
}
#intro .text-box h1 {
  padding: 0 4rem;
  margin: 4rem 0;
  text-shadow: 0 0 15px #ffd440;
}
#intro .text-box .cta {
  letter-spacing: 0.18em;
}

.competition {
  background-color: inherit;
  color: #fff;
  padding: 5em 0;
  text-align: left;
}
.competition h1 {
  color: #fff;
}
.competition .form-wrapper.thank-you {
  padding-top: 40em;
  padding-bottom: 200px;
  text-align: center;
}
.competition a {
  font-weight: 700;
}
.competition .column {
  max-width: 660px;
  margin: auto;
}
.competition p, .competition .user-details dt label, .user-details dt .competition label, .competition .user-details div label, .user-details div .competition label, .competition #selector .manual .manual-form dt, #selector .manual .manual-form .competition dt, .competition #selector .manual .manual-form dd, #selector .manual .manual-form .competition dd, .competition #results .nav li, #results .nav .competition li {
  font-size: 1.5em;
}
.competition .cta {
  text-align: center;
  background-color: #533c26;
  color: #fff;
  display: inline-block;
  margin: 2em auto 0;
  float: none;
}
.competition .cta button {
  background: transparent;
}
.competition .cta button {
  text-transform: uppercase;
}
.competition .competition-question .question-container {
  font-size: 1.6em;
  margin: 1em 0;
}
.competition .competition-question .answers-container ul {
  list-style: none;
  text-align: center;
  margin: 1em;
}
.competition .competition-question .answers-container ul li {
  margin: 1em 2em 0 0;
  font-size: 1.2em;
  display: inline-block;
}
.competition .competition-optins {
  margin-top: 5em;
}
.competition .competition-optins p label, .competition .competition-optins .user-details dt label label, .user-details dt .competition .competition-optins label label, .competition .competition-optins .user-details div label label, .user-details div .competition .competition-optins label label, .competition .competition-optins #selector .manual .manual-form dt label, #selector .manual .manual-form .competition .competition-optins dt label, .competition .competition-optins #selector .manual .manual-form dd label, #selector .manual .manual-form .competition .competition-optins dd label, .competition .competition-optins #results .nav li label, #results .nav .competition .competition-optins li label {
  font-size: 1em;
  color: #fff;
}
.competition .competition-optins.cta {
  text-align: center;
}
.competition small {
  text-align: right;
  display: block;
}

body > iframe {
  position: fixed !important;
}

@media (max-width: 850px) {
  html {
    font-size: 9px;
  }

  .competition .competition-details, .competition .competition-optins {
    width: 100%;
    float: none;
  }
  .competition .competition-details .sign-in-container, .competition .competition-details .register-container {
    width: 100%;
    float: none;
  }
  .competition .competition-details .register-container {
    border-left: 0;
    padding-left: 0;
  }
}
@media (max-height: 900px) {
  html {
    font-size: 9px;
  }
}
@media (max-width: 430px) {
  html {
    font-size: 8px;
  }

  header .wrapper a.brand-logo {
    float: none;
    margin: 0 auto;
  }
  header .wrapper a.client-logo {
    float: none;
    margin: 0 auto;
  }

  .competition .competition-details .nested.half, .competition .competition-optins .nested.half {
    width: 100%;
  }
}
#warning {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #212121;
  color: #fff;
  z-index: 20;
}
@keyframes unhide {
  0% {
    color: transparent;
  }
  80% {
    color: transparent;
  }
  100% {
    color: #fff;
  }
}
#warning p, #warning .user-details dt label, .user-details dt #warning label, #warning .user-details div label, .user-details div #warning label, #warning #selector .manual .manual-form dt, #selector .manual .manual-form #warning dt, #warning #selector .manual .manual-form dd, #selector .manual .manual-form #warning dd, #warning #results .nav li, #results .nav #warning li {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#vote #warning p, #vote #warning .user-details dt label, .user-details dt #vote #warning label, #vote #warning .user-details div label, .user-details div #vote #warning label, #vote #warning #selector .manual .manual-form dt, #selector .manual .manual-form #vote #warning dt, #vote #warning #selector .manual .manual-form dd, #selector .manual .manual-form #vote #warning dd, #vote #warning #results .nav li, #results .nav #vote #warning li {
  animation: unhide 2.5s ease;
  display: block;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #warning {
    display: table !important;
  }
}
/*# sourceMappingURL=layout.css.map */