/**
* Title: Pannonian voting
* Author/s: Prototyp
* CSS build platform: Gulp
* CSS development build command: gulp build
* CSS production build command: gulp build
* CSS processor: PostCSS
* CSS processor usage: autoprefixing, nesting, variables, minification, pxtorem, color functions
* CSS name convention: BEM
* Global indentation: 4 spaces
* Global units: px
* Global prefix: none
* Browser support: IE10+, last 3 versions of modern browsers
* Additional notes:
*/

/**
* Import: vars
* Description: variables
*/
/*------------------------------------*\
    # vars.globals
\*------------------------------------*/

/**
 * The $unit variable is a global variable to be used
 * in paddings, margins, for sizing and positioning
 */

/**
 * The $spacer variable is a global variable to be used
 * in to create a unified spacer for all kinds of elements
 */

/**
 * Global class prefix - usage: .$(global-prefix)classname
 */

/**
 * Global radius and rounded
 */
/*------------------------------------*\
    # vars.typography
\*------------------------------------*/

/**
 * Project base line height (unitless in order to work with typomatic)
 */

/**
 * Type scale sizes must be entered in their pixel size
 * (unitless in order to work with typomatic)
 * Default type scale ratio: 1.333;
 */

/** 
 * Type weights
 */

/**
 * Font stacks
 */
/*------------------------------------*\
    # vars.responsive
\*------------------------------------*/ /* 544px */ /* 543px */ /* 768px */ /* 767px */ /* 992px */ /* 991px */ /* 1200px */ /* 1199px */ /* 1440px */ /* 1439px */
/*------------------------------------*\
    # vars.colors
\*------------------------------------*/

/**
 * Generic colors
 * Color naming taken from: http://www.color-blindness.com/color-name-hue/
 */


/**
 * Brand colors
 */

/**
 * Global text color
 */

/**
 * Theme colors
 */

/**
 * Utility colors
 */

/**
 * Greys
 */

/**
* Import: tools
* Description: tools like typomatic and other mixins / libraries
*/
/*------------------------------------*\
    # tools.typomatic
\*------------------------------------*/

/**
 * Mixin name: typomatic-init
 * Description: creates a vertical rhythm on a page using font-size
 * and line-height on the html element
 * Parameters: 
 * does not take parameters
 */

/**
 * Mixin name: type-scale
 * Description: type-scale sets the type to baseline to achieve
 * vertical rhythm.
 * Parameters: 
 * $scale ($base-font-size is default) - font size (unitless) variable
 * $baselines (1 is default) - number of baselines
 */
/*------------------------------------*\
    # tools.clearfix
\*------------------------------------*/

/**
 * Mixin name: clearfix
 * Description: applies clearfix to element
 * Parameters: 
 * does not take parameters
 */

/**
* Import: generic
* Description: normalize or reset CSS, box sizing
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device 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,
hgroup,
main,
menu,
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/10/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

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 variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * 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
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * 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"], /* 1 */
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.
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}

/**
 * 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;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 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;
}
/*------------------------------------*\
    # generic.boxsizing
\*------------------------------------*/

*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

/**
* Import: base
* Description: base structural stylings for setting the body, typography
* and other base styles (no classes should be added here)
*/
/*------------------------------------*\
    # base.globals
\*------------------------------------*/

/**
 * Initialize typomatic in project (sets font-size and line-height
 * on html selector.
 */
html {
    font-size: 112.5%;
    line-height: 1.33333;
    height: 100%;
}

body {
    position: relative;
    overflow-x: hidden;
    min-width: 320px;
    min-height: 100%;
    font-family: "neuzeit-grotesk", Helvetica, Arial, sans-serif;
    color: #1d1e23;
    background: #f7f7f7;
}

/* Lock scrolling on mobile nav open */

body.is-locked {
  overflow: hidden;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

svg {
    max-width: 100%;
}
/*------------------------------------*\
    # base.typography
\*------------------------------------*/

/**
 * Headings
 */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 800;
}
h1 {
    font-size: 58px;
    line-height: 60px;
}
h2 {
    font-size: 50px;
    line-height: 54px;
}
h3 {
    font-size: 42px;
    line-height: 48px;
}
h4, h5, h6 {
    font-size: 34px;
    line-height: 42px;
}

@media   (min-width: 48em) {
    h1 {
        font-size: 66px;
        line-height: 66px;
    }
    h2 {
        font-size: 58px;
        line-height: 60px;
    }
    h3 {
        font-size: 50px;
        line-height: 54px;
    }
    h4, h5, h6 {
        font-size: 42px;
        line-height: 48px;
    }
}

/**
 * Paragraphs
 */
p {
    margin: 0;
}

/**
 * Lists (ol, ul, dd)
 */
ol, ul, dl {
    margin: 0;
    padding: 0;
    list-style: none;
}
ol {}
ol li {}
ul {}
ul li {}
dd {}
dl dt {}
dl dd {}

/**
 * Anchors
 */
a {
    color: #00d7e9;
    text-decoration: none;
}
a:link {}
a:hover {
  color: rgb(0, 154, 168);
}
a:focus {
  color: rgb(0, 154, 168);
}
a:visited {}

/**
 * Typographic details
 */
hr {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid rgb(222, 222, 222);
}
em {}
b, strong {
    font-weight: 700;
}
address {}
small {}
pre {}
code {}
sub {}
sup {}
strike {}

/**
 * Tables
 */
table th {
  text-align: left;
}

/**
* Import: modules
* Description: cross project reusable 1
*/
/*------------------------------------*\
    # modules.container
\*------------------------------------*/

.container {
    margin: 0 auto;
    padding-bottom: 96px; /* Footer height */
}
/*------------------------------------*\
    # modules.wrapper
\*------------------------------------*/

.wrapper {
    max-width: 1600px;
    padding: 0 24px;
    margin: 0 auto;
}

@media   (min-width: 48em) {

  .wrapper{
    padding: 0 48px;
  }
}
/*------------------------------------*\
    # modules.logo
\*------------------------------------*/

.logo {
    transition: all .15s ease-in;
    
}

.logo:hover,
    .logo:focus {
  opacity: 0.7;
}

.logo--narrow {
  display: block;
}

.logo--narrow img {
  width: 100%;
  max-width: 170px;
}

.logo--centered {
  text-align: center;
}
/*------------------------------------*\
    # modules.btn
\*------------------------------------*/

.btn {

    /**
     * Button base
     */
    display: inline-block;
    vertical-align: middle;
    
    -ms-touch-action: manipulation;
    
        touch-action: manipulation;
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
    
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
    border: 0;
    background: transparent;

    transition: all .15s ease-in-out;

    /**
     * Button base project styling
     */
    font-family: "neuzeit-grotesk", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;


}

.btn:focus {
  outline: 0;
}

/**
     * Button styles
     */

.btn--primary {
  background: linear-gradient(to bottom,  #00d7e9 0%, rgb(0, 189, 207) 100%);
  color: white;
}

.btn--primary:hover,
        .btn--primary:focus {
  background: linear-gradient(to bottom,  #00d7e9 0%, rgb(0, 166, 181) 100%);
  color: white;
}

.btn--primary:disabled:hover,
            .btn--primary:disabled:focus,
            .btn--primary.is-disabled:hover,
            .btn--primary.is-disabled:focus {
  background: #00d7e9;
  color: white;
}

.btn--primary--alt {
  background: linear-gradient(to bottom,  #00d7e9 0%, rgb(0, 189, 207) 100%);
  color: #1d1e23;
}

.btn--primary--alt:hover,
        .btn--primary--alt:focus {
  background: linear-gradient(to bottom,  #00d7e9 0%, rgb(0, 166, 181) 100%);
  color: #1d1e23;
}

.btn--primary--alt:disabled:hover,
            .btn--primary--alt:disabled:focus,
            .btn--primary--alt.is-disabled:hover,
            .btn--primary--alt.is-disabled:focus {
  background: #00d7e9;
  color: #1d1e23;
}

.btn--secondary {
  background: #fed017;
  color: #1d1e23;
}

.btn--secondary:hover,
        .btn--secondary:focus {
  background: rgb(255, 214, 48);
  color: #1d1e23;
}

.btn--secondary:disabled:hover,
            .btn--secondary:disabled:focus,
            .btn--secondary.is-disabled:hover,
            .btn--secondary.is-disabled:focus {
  background: #fed017;
  color: #1d1e23;
}

.btn--neutral {
  background: linear-gradient(to bottom,  rgb(232, 232, 232) 0%, rgb(212, 213, 213) 100%);
  color: #1d1e23;
}

.btn--neutral:hover,
        .btn--neutral:focus {
  background: linear-gradient(to bottom,  rgb(212, 213, 213) 0%, rgb(196, 196, 196) 100%);
  color: #1d1e23;
}

.btn--neutral:disabled:hover,
            .btn--neutral:disabled:focus,
            .btn--neutral.is-disabled:hover,
            .btn--neutral.is-disabled:focus {
  background: #1d1e23;
  color: white;
}

.btn--negative {
  background-color: white;
  color: #00d7e9;
}

.btn--negative:hover,
        .btn--negative:focus {
  background-color: rgba(white a(0.6));
  color: #00d7e9;
}

.btn--negative:disabled:hover,
            .btn--negative:disabled:focus,
            .btn--negative.is-disabled:hover,
            .btn--negative.is-disabled:focus {
  background-color: rgba(white a(0.6));
  color: #00d7e9;
}

.btn--ghost {
  background-color: transparent;
  color: #00d7e9;
}

.btn--ghost:hover,
        .btn--ghost:focus {
  color: rgb(0, 189, 207);
}

.btn--ghost:disabled:hover,
            .btn--ghost:disabled:focus,
            .btn--ghost.is-disabled:hover,
            .btn--ghost.is-disabled:focus {
  background-color: transparent;
  color: #00d7e9;
}

.btn--ghost--negative {
  background-color: transparent;
  color: white;
}

.btn--ghost--negative:hover,
        .btn--ghost--negative:focus {
  color: rgba(255, 255, 255, 0.7);
}

.btn--ghost--negative:disabled:hover,
            .btn--ghost--negative:disabled:focus,
            .btn--ghost--negative.is-disabled:hover,
            .btn--ghost--negative.is-disabled:focus {
  background-color: transparent;
  color: white;
}

/**
     * Disabled
     */

.btn.is-disabled,
    .btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: transparent;
}

.btn.is-disabled {
  pointer-events: none;
}

/**
     * Button sizes
     */

.btn--sml {
  font-size: 14px;
  line-height: 24px;
  height: 24px;
  line-height: 24px;
  padding: 0 18px;
}

.btn--med {
  font-size: 16px;
  line-height: 24px;
  height: 36px;
  line-height: 36px;
  padding: 0 18px;
}

.btn--lrg {
  height: 48px;
  line-height: 48px;
  padding: 0 24px;
}

/**
     * Spacer - a placeholder for text between
     * two or more buttons
     */

.btn-spacer {
  padding: 0 6px;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgb(170, 170, 170);
}

/* Special cases */

.btn--nopadding {
  padding-right: 0;
  padding-left: 0;
}
/*------------------------------------*\
    # modules.btn-group
\*------------------------------------*/

.btn-group {

    /**
     * Btngroup base
     */
     display: inline-block;

}

.btn-group:after{
  content: "";
  display: block;
  clear: both;
}

.btn-group--radial .btn:first-child {
  border-radius: 4px 0 0 4px;
}

.btn-group--radial .btn:last-child {
  border-radius: 0 4px 4px 0;
}

.btn-group--rounded .btn:first-child {
  border-radius: 1000px 0 0 1000px;
}

.btn-group--rounded .btn:last-child {
  border-radius: 0 1000px 1000px 0;
}

.btn-group .btn {
  float: left;
}

.btn-group .btn + .btn {
  margin-left: -1px;
}
/*------------------------------------*\
    # modules.status
\*------------------------------------*/

.status {
    display: inline-block;

}

/* Status types */

.status--warning {
  background: rgb(245, 90, 79);
  color: white;
}

.status--success {
  background: rgb(102, 176, 104);
  color: white;
}

.status--note {
  background: rgb(227, 194, 94);
  color: white;
}

/* Status sizes */

.status--sml {
  font-size: 14px;
  line-height: 24px;
  height: 24px;
  line-height: 24px;
  padding: 0 12px;
}

.status--med {
  font-size: 16px;
  line-height: 24px;
  height: 36px;
  line-height: 36px;
  padding: 0 18px;
}

.status--lrg {
  height: 48px;
  line-height: 48px;
  padding: 0 24px;
}
/*------------------------------------*\
    # modules.input
\*------------------------------------*/

.input {

    /**
     * Input base
     */
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    border-bottom: 1px solid rgb(182, 182, 182);
    
    -webkit-border-radius: 0; /* Prefixed to remove border radius on iOS */
    
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    font-family: "neuzeit-grotesk", Helvetica, Arial, sans-serif;
    background: transparent;

}

.input:focus {
  border-color: rgb(150, 150, 150);
  outline: 0;
}

/**
     * input sizes
     */

.input--sml {
  font-size: 16px;
  line-height: 24px;
  height: 24px;
  line-height: 24px;
}

/* Sometimes inputs need l/r paddings */

.input--sml--padded {
  padding-right: 12px;
  padding-left: 12px;
}

.input--med {
  height: 36px;
  line-height: 36px;
}

/* Sometimes inputs need l/r paddings */

.input--med--padded {
  padding-right: 18px;
  padding-left: 18px;
}

.input--lrg {
  height: 48px;
  line-height: 48px;
  font-size: 48px;
  font-weight: 700;
}

/* Sometimes inputs need l/r paddings */

.input--lrg--padded {
  padding-right: 24px;
  padding-left: 24px;
}

/**
     * input types
     */

.input--text {}

.input--number {
  padding-right: 0;
}

.input--text {}

.input--select--multiple {
  min-height: 160px;
}

.input--textarea {
  min-height: 160px;
  resize: vertical;
  border: 1px solid rgb(196, 196, 196);
  padding: 0 12px;
}

.input--fileupload {
  padding: 24px;
  border: 1px solid rgb(196, 196, 196);
}

.input--check,
    .input--radio {
  position: absolute;
  left: -99999px;
  opacity: 0;
}

/* input[type="hidden"] is added since MVC.NET
         * generates a hidden field after the input element
         */

.input--check + input[type="hidden"] + label,
        .input--check + input[type="hidden"] + input[type="hidden"] + label,
        .input--radio + input[type="hidden"] + label,
        .input--radio + input[type="hidden"] + input[type="hidden"] + label {
  padding-left: 12px;
}

.input--check + input[type="hidden"] + label:before, .input--check + input[type="hidden"] + input[type="hidden"] + label:before, .input--radio + input[type="hidden"] + label:before, .input--radio + input[type="hidden"] + input[type="hidden"] + label:before {
  content: '';
  display: block;
  float: left;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  transition: all .2s ease-in-out;
  border: 1px solid rgb(196, 196, 196);
}

.input--check:focus + input[type="hidden"] + label:before, .input--check:focus + input[type="hidden"] + input[type="hidden"] + label:before, .input--radio:focus + input[type="hidden"] + label:before, .input--radio:focus + input[type="hidden"] + input[type="hidden"] + label:before {
  box-shadow: 0 0 5px #00d7e9;
}

.input--check:checked + input[type="hidden"] + label:before, .input--check:checked + input[type="hidden"] + input[type="hidden"] + label:before, .input--radio:checked + input[type="hidden"] + label:before, .input--radio:checked + input[type="hidden"] + input[type="hidden"] + label:before {
  background: #00d7e9;
  border-color: transparent;
}

.input--radio + input[type="hidden"] + label:before, .input--radio + input[type="hidden"] + input[type="hidden"] + label:before {
  border-radius: 50%;
}

/* MVC Validation */
.input-validation-error {
    display: inline-block;
    border-color: #F44336 !important;
}

.field-validation-error {
    display: inline-block;
    margin: 12px 0 !important;
}
/*------------------------------------*\
    # modules.field
\*------------------------------------*/

.field {

    /**
     * Field base
     */
    margin-bottom: 24px;
    
}

.field__lbl {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 18px;
  color: rgba(29, 30, 35, 0.85);
}

.field__lbl--nextToInput {
  padding-top: 18px;
}

.field__description {
  padding: 6px 0;
  font-size: 16px;
  line-height: 18px;
}

/* Field group holds input and buttons together */

.field__group {
  display: table;
}

.field__group > * {
  display: table-cell;
  vertical-align: top;
}

/* Icon on the left or right of the input */

.field__icon {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  pointer-events: none;
}

.field__icon--left {
  left: 0;
}

.field__icon--right {
  right: 0;
}
/*------------------------------------*\
    # modules.fieldset
\*------------------------------------*/

.fieldset {

    /**
     * Fieldset base
     */
    padding: 0;
    margin: 0;
    border: 0;

}

.fieldset__legend {
  padding: 48px 0;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
}

.fieldset__legend--first {
  padding-top: 0;
}
/*------------------------------------*\
    # modules.alert
\*------------------------------------*/

.alert {
    display: block;
    font-size: 16px;
    line-height: 18px;

}

.alert--success {
  color: #4CAF50;
}

.alert--warning {
  color: #F44336;
}

.alert--note {
  color: #E2BA45;
}
/*------------------------------------*\
    # modules.validation-summary
\*------------------------------------*/

.validation-summary {
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 24px;
    padding: 12px;
    background: rgba(244, 67, 54, 0.7);
}

.validation-summary > ul > li {
  margin-bottom: 6px;
  color: white;
}

.validation-summary > ul > li:last-child {
  margin-bottom: 0;
}

.validation-summary-valid {
  display: none;
}

.validation-summary-errors {
  display: block;
}
/*------------------------------------*\
    # modules.message
\*------------------------------------*/

.message {

    font-size: 16px;

    line-height: 24px;
    padding: 12px 24px;
    color: white;

}

.message--warning {
  background-color: #F44336;
}

.message--success {
  background-color: #4CAF50;
}

.message--note {
  background-color: #E2BA45;
}
/*------------------------------------*\
    # modules.layout
\*------------------------------------*/

.layout--fullWidth {/* Layout when there is no sidebar */
  padding: 48px 0;
}

@media   (min-width: 48em) {

  .layout--fullWidth{
    padding: 84px 0;
  }
}

.layout--split__wrapper {/* Table display is used in order to 
             * provide an equal height of sidebar and
             * content areas
             */
  display: table;
  width: 100%;
  min-height: 1024px;
  min-width: 1024px;
}

.layout--split__sidebar {
  width: 20%;
  display: table-cell;
  vertical-align: top;
}

.layout--split__content {
  width: 80%;
  display: table-cell;
  vertical-align: top;
}

.layout--split__body {
  padding: 36px;
}

.layout--narrow {/* Narrow layout */
  max-width: 520px;
  min-height: 78vh;
  margin: 0 auto;
  padding: 120px 12px;
}

.layout--narrow__header {
  margin-bottom: 48px;
}
/*------------------------------------*\
    # modules.contentlayout
\*------------------------------------*/

.contentlayout--narrow {
  width: 40%;
}
/*------------------------------------*\
    # modules.smm
\*------------------------------------*/

.smm {
    overflow: hidden;

}

.smm__item {
  float: left;
  margin-right: 6px;
}

.smm__link {
  display: block;
  width: 42px;
  height: 42px;
  padding: 0 0 0 0;
  line-height: 39px;
  text-align: center;
  border: 1px solid #00d7e9;
  border-radius: 50%;
  transition: all .2s ease-in-out;
}

.smm__link img {
  height: 30px;
}

.smm__link:focus,
        .smm__link:hover {
  opacity: 0.7;
}
/*------------------------------------*\
    # modules.hamburger
\*------------------------------------*/

 .hamburger {
    /* Reset button styling */
    padding: 0;
    border: 0;
    background: transparent;

    position: relative;
    display: block;
    width: 30px;
    height: 16.5px;
    padding: 18px;

 }

 .hamburger span,
    .hamburger:after,
    .hamburger:before {
  position: absolute;
  left: 6px;
  width: 24px;
  height: 1px;
  background: white;
  transition: all .2s ease-in-out;
  transform: translate3d(0,0,0);
}

 .hamburger span {
  top: 18px;
}

 .hamburger:after,
    .hamburger:before {
  content: '';
  display: block;
}

 .hamburger:after {
  bottom: 11px;
}

 .hamburger:before {
  top: 12px;
}

 .hamburger.is-open span {
  opacity: 0;
}

 .hamburger.is-open:after {
  -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
  bottom: 17px;
}

 .hamburger.is-open:before {
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  top: 17px;
}
/*------------------------------------*\
    # modules.table
\*------------------------------------*/

.table {
    overflow-x: auto;

}

/**
     * Table base
     */

.table__data {
  width: 100%;
}

.table thead {
  border-bottom: 1px solid #1d1e23;
}

.table th {
  text-transform: uppercase;
  letter-spacing: .15em;
}

.table th,
    .table td {
  vertical-align: top;
  padding: 12px;
  font-size: 16px;
  line-height: 24px;
}

.table tr {
  border-bottom: 1px solid rgba(29, 30, 35, 0.1);
}

.table tr:last-child {
  border-bottom: 0;
}

.table__row--noborder {
  border-bottom: 0 !important;
}
/*------------------------------------*\
    # modules.formatted
\*------------------------------------*/

.formatted p,
    .formatted ul,
    .formatted ol,
    .formatted dl,
    .formatted table,
    .formatted object,
    .formatted img {
  margin-bottom: 24px;
}

.formatted h1,
    .formatted h2,
    .formatted h3,
    .formatted h4,
    .formatted h5,
    .formatted h6 {
  margin: 48px 0;
}

.formatted ul,
    .formatted ol,
    .formatted dl {
  list-style: inherit;
  list-style-position: inside;
}

.formatted p {
  font-size: 18px;
  line-height: 30px;
}

.formatted p:last-child {
  margin-bottom: 0 !important;
}

/* Large photos that span edge to edge with text */

.formatted__hugephoto {
  position: relative;
  background-color: white;
  text-align: center;
}

/* &:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: color(black a(0.1));
        } */

.formatted__hugephoto__photo {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.formatted__hugephoto__copy {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
  z-index: 1;
  width: 50%;
}

.formatted__hugephoto__title {
  font-size: 26px;
  line-height: 30px;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

@media   (min-width: 48em) {

  .formatted__hugephoto__title{
    margin-bottom: 24px;
    font-size: 50px;
    line-height: 54px;
    color: white;
  }
}

.formatted__hugephoto__subtitle {
  display: none;
}

@media   (min-width: 48em) {

  .formatted__hugephoto__subtitle{
    display: block;
    font-size: 26px;
    line-height: 30px;
    color: rgba(255, 255, 255, 0.8);
  }
}
/*------------------------------------*\
    # modules.card
\*------------------------------------*/

.card {
    position: relative;
    background: white;

}

.card--padded {
  padding: 36px;
}

.card--nested {
  margin: 0 -36px;
  padding: 54px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 0%,rgba(0, 0, 0, 0) 12px);
  border-bottom: 1px solid rgb(232, 232, 232);
}

.card--nested:last-child {
  border-bottom: 0;
}

.card__header {
  padding-bottom: 24px;
}

.card__title {
  font-size: 26px;
  line-height: 36px;
  margin: 12px 0;
}

.card__corner {
  position: absolute;
  top: 36px;
  right: 36px;
}

.card__content {
  padding: 24px 0;
}

.card__footer {}
/*------------------------------------*\
    # modules.list
\*------------------------------------*/

.list--bordered > * {
  padding: 12px 0;
  border-bottom: 1px solid rgb(212, 213, 213);
}

.list--inline:after{
  content: "";
  display: block;
  clear: both;
}

.list--inline > * {
  float: left;
  margin-right: 12px;
}

.list--commaseparated > * {
  display: inline;
}

.list--commaseparated > *:after {
  content: ',';
}

.list--commaseparated > *:last-child:after {
  content: '';
}
/*------------------------------------*\
    # modules.spinner
\*------------------------------------*/

@keyframes bouncedelay {
    0%, 80%, 100% { 
        transform: scale(0);
        opacity: 0;
    }
    40% { 
        transform: scale(1.0);
        opacity: 1;
    }
}

.spinner {
    display: inline-block;
    width: 70px;

}

.spinner > span {
  display: inline-block;
  width: 15px;
  height: 15px;
  animation-name: bouncedelay;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  background-color: #00d7e9;
  border-radius: 50%;
}

.spinner__bounce1 {
  animation-delay: -0.32s;
}

.spinner__bounce2 {
  animation-delay: -0.16s;
}
/*------------------------------------*\
    # modules.overlay
\*------------------------------------*/

.overlay {
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
    position: absolute;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
}
/* @import modules.anchor.css; */

/**
* Import: components
* Description: specific website/app components
*/

/*------------------------------------*\
    # components.auth
\*------------------------------------*/

.auth__header {
  padding: 48px 48px;
  border-bottom: 1px solid rgb(232, 232, 232);
  background: white;
}

.auth__title {
  font-size: 26px;
  line-height: 36px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.auth__content {
  padding: 48px;
  background: white;
}

.auth__footer {
  padding: 24px 48px;
  border-top: 1px solid rgb(232, 232, 232);
  background: white;
}

.auth__splitform {
  overflow: hidden;
}

.auth__splitform__item {
  width: calc(99.99% * 1/2 - (30px - 30px * 1/2));
}

.auth__splitform__item:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.auth__splitform__item:last-child{
  margin-right: 0;
}

.auth__splitform__item:nth-child(2n){
  margin-right: 0;
  float: right;
}

.auth__splitform__item:nth-child(2n + 1){
  clear: left;
}
/*------------------------------------*\
    # components.header
\*------------------------------------*/

.header {
    overflow: hidden;

}

.header__nav {
  overflow: hidden;
}

.header__nav--primary {
  float: left;
}

.header__nav--secondary {
  display: block;
  float: right;
}

.header__nav__item {
  float: left;
}

.header__nav__item.active a {
  color: #00d7e9;
}

.header__nav__item.active a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: #00d7e9;
}

.header__nav__item:last-child a {
  margin-right: 0;
}

.header__nav__link {
  position: relative;
  padding: 24px 0 12px 0;
  margin-right: 24px;
  display: block;
  color: #1d1e23;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  font-weight: 800;
}

.header__nav__link:hover,
            .header__nav__link:focus {
  color: rgba(29, 30, 35, 0.6);
}
/*------------------------------------*\
    # components.page
\*------------------------------------*/

.page__header {
  padding: 24px 36px;
  margin: -36px -36px 0 -36px;
  background: rgba(255, 255, 255, 0.4);
}

.page__subheader {
  margin: 0 -36px;
  padding: 24px 36px;
}

.page__content {
  padding: 24px 0;
}

.page__footer {
  padding: 24px 36px;
  margin: 0 -36px -36px -36px;
  border-top: 1px solid rgb(212, 213, 213);
}
/*------------------------------------*\
    # components.nav
\*------------------------------------*/

/* Main nav holder for each level0 nav item */

.nav__item {
  overflow: hidden;
}

/* Level0 link styling*/

.nav__link {
  position: relative;
  display: block;
  padding: 18px 24px 18px 66px;
  color: white;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  transition: all .2s ease-in;
}

.nav__link:hover,
        .nav__link:focus {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
/*------------------------------------*\
    # components.sidenav
\*------------------------------------*/

.sidenav__item {}

.sidenav__title {
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin: 12px 0;
}

.sidenav__link {
  display: block;
  padding: 12px;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #1d1e23;
  border-bottom: 1px solid rgb(232, 232, 232);
  background: white;
}

.sidenav__link:hover,
        .sidenav__link:focus {
  background: rgba(255, 255, 255, 0.7);
}

.sidenav__link.is-active {
  background: #00d7e9;
  color: white;
}

.sidenav__link.is-active:hover, 
            .sidenav__link.is-active:focus {
  background: #00d7e9;
  color: white;
}
/*------------------------------------*\
    # components.footer
\*------------------------------------*/

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    padding: 36px 0;
}

.footer p {
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: rgba(29, 30, 35, 0.6);
}
/*------------------------------------*\
    # components.item
\*------------------------------------*/

.item {
    display: -ms-flexbox;
    display: flex;
    background: white;
    min-height: 72px;

}

.item__heading {
  flex: 0 0 auto;
  width: calc(99.99% * 3/12 - (30px - 30px * 3/12));
  padding: 18px 24px;
}

.item__heading:nth-child(1n){
  margin-right: 30px;
  margin-left: 0;
}

.item__heading:last-child{
  margin-right: 0;
}

.item__heading:nth-child(12n){
  margin-right: 0;
  margin-left: auto;
}

.item__title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.item__content {
  flex: 0 0 auto;
  width: calc(99.99% * 6/12 - (30px - 30px * 6/12));
  padding: 18px 0;
}

.item__content:nth-child(1n){
  margin-right: 30px;
  margin-left: 0;
}

.item__content:last-child{
  margin-right: 0;
}

.item__content:nth-child(12n){
  margin-right: 0;
  margin-left: auto;
}

.item__options {
  flex: 0 0 auto;
  width: calc(99.99% * 3/12 - (30px - 30px * 3/12));
  padding: 18px 12px 0 30px;
}

.item__options:nth-child(1n){
  margin-right: 30px;
  margin-left: 0;
}

.item__options:last-child{
  margin-right: 0;
}

.item__options:nth-child(12n){
  margin-right: 0;
  margin-left: auto;
}

.item__options:after{
  content: "";
  display: block;
  clear: both;
}

/* Item types: Event */

.item--event__meta {
  width: calc(99.99% * 1/2 - (30px - 30px * 1/2));
}

.item--event__meta:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.item--event__meta:last-child{
  margin-right: 0;
}

.item--event__meta:nth-child(2n){
  margin-right: 0;
  float: right;
}

.item--event__meta:nth-child(2n + 1){
  clear: left;
}
/*------------------------------------*\
    # components.item-list
\*------------------------------------*/

.item-list--spaced .item {
  margin-bottom: 6px;
}
/*------------------------------------*\
    # components.options
\*------------------------------------*/

.options:after{
  content: "";
  display: block;
  clear: both;
}

.options__option {
  float: left;
  padding: 6px 12px;
  color: rgba(29, 30, 35, 0.6);
}

.options__option i {
  font-size: 24px;
}
/*------------------------------------*\
    # components.actionselector
\*------------------------------------*/

@media    (min-width: 62em) {

  .actionselector{
    display: flex;
    flex-flow: row wrap;
  }
}

.actionselector__item {
  position: relative;
  padding: 24px 0;
  margin-bottom: 24px;
  border-top: 3px solid rgb(255, 255, 255);
}

@media    (min-width: 62em) {

  .actionselector__item{
    margin-bottom: 0;
    flex: 0 0 auto;
    width: calc(99.99% * 4/12 - (30px - 30px * 4/12));
    padding: 48px 0;
  }

  .actionselector__item:nth-child(1n){
    margin-right: 30px;
    margin-left: 0;
  }

  .actionselector__item:last-child{
    margin-right: 0;
  }

  .actionselector__item:nth-child(12n){
    margin-right: 0;
    margin-left: auto;
  }
}

.actionselector__heading {
  margin-bottom: 24px;
}

.actionselector__footer {}
/*------------------------------------*\
    # components.appsummary
\*------------------------------------*/

.appsummary {
    position: relative;

    padding: 60px 0;

}

@media    (min-width: 62em) {

  .appsummary{
    padding: 96px 0;
  }
}

.appsummary__item {
  margin-bottom: 48px;
  text-align: center;
}

@media    (min-width: 62em) {

  .appsummary__item{
    text-align: left;
    margin-bottom: 0;
    width: calc(99.99% * 4/12 - (30px - 30px * 4/12));
  }

  .appsummary__item:nth-child(1n){
    float: left;
    margin-right: 30px;
    clear: none;
  }

  .appsummary__item:last-child{
    margin-right: 0;
  }

  .appsummary__item:nth-child(12n){
    margin-right: 0;
    float: right;
  }

  .appsummary__item:nth-child(12n + 1){
    clear: left;
  }
}

.appsummary__header {
  margin-bottom: 12px;
}

.appsummary__title {}

.appsummary__content {}
/*------------------------------------*\
    # components.badge-square
\*------------------------------------*/

.badge-square {
    display: inline-block;
    min-width: 30px;
    height: 30px;
    line-height: 30px;

    background-color: #1d1e23;
    color: white;

    font-weight: 800;
    text-align: center;

    padding: 0 6px;
}
/*------------------------------------*\
    # components.badge
\*------------------------------------*/

.badge {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;

    border-radius: 50%;
    background-color: #1d1e23;
    color: white;

    font-weight: 800;
    text-align: center;
}
/*------------------------------------*\
    # components.votesystem
\*------------------------------------*/

.votesystem__number {
  border: 0;
  padding: 0;
  display: block;
  float: left;
  width: 72px;
  height: 72px;
  margin: 0 18px 18px 0;
  font-weight: 800;
  font-size: 30px;
  border-radius: 50%;
}

.votesystem__number.active {
  background: #00d7e9;
  -ms-transform: scale(1.3);
      transform: scale(1.3);
}
/*------------------------------------*\
    # components.tabs
\*------------------------------------*/

.tabs {
    overflow: hidden;
    
}

.tabs__item {
  float: left;
}

.tabs__item.active a {
  background: linear-gradient(to bottom,  #00d7e9 0%, rgb(0, 189, 207) 100%);
  color: white;
}

.tabs__link {
  background: linear-gradient(to bottom,  rgb(232, 232, 232) 0%, rgb(212, 213, 213) 100%);
  color: #1d1e23;
}

/**
* Import: views
* Description: specific website/app views (example: 404 view, login view)
*/
/* @import views.404.css; */

/**
* Import: utils
* Description: reusable utilities such as floats, spacers etc.
*/
/*------------------------------------*\
    # utils.grid
\*------------------------------------*/

.u-grid:after{
  content: "";
  display: block;
  clear: both;
}

.u-grid__col1 {
  width: calc(99.99% * 1/12 - (30px - 30px * 1/12));
}

.u-grid__col1:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.u-grid__col1:last-child{
  margin-right: 0;
}

.u-grid__col1:nth-child(12n){
  margin-right: 0;
  float: right;
}

.u-grid__col1:nth-child(12n + 1){
  clear: left;
}

.u-grid__col2 {
  width: calc(99.99% * 2/12 - (30px - 30px * 2/12));
}

.u-grid__col2:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.u-grid__col2:last-child{
  margin-right: 0;
}

.u-grid__col2:nth-child(12n){
  margin-right: 0;
  float: right;
}

.u-grid__col2:nth-child(12n + 1){
  clear: left;
}

.u-grid__col3 {
  width: calc(99.99% * 3/12 - (30px - 30px * 3/12));
}

.u-grid__col3:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.u-grid__col3:last-child{
  margin-right: 0;
}

.u-grid__col3:nth-child(12n){
  margin-right: 0;
  float: right;
}

.u-grid__col3:nth-child(12n + 1){
  clear: left;
}

.u-grid__col4 {
  width: calc(99.99% * 4/12 - (30px - 30px * 4/12));
}

.u-grid__col4:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.u-grid__col4:last-child{
  margin-right: 0;
}

.u-grid__col4:nth-child(12n){
  margin-right: 0;
  float: right;
}

.u-grid__col4:nth-child(12n + 1){
  clear: left;
}

.u-grid__col5 {
  width: calc(99.99% * 5/12 - (30px - 30px * 5/12));
}

.u-grid__col5:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.u-grid__col5:last-child{
  margin-right: 0;
}

.u-grid__col5:nth-child(12n){
  margin-right: 0;
  float: right;
}

.u-grid__col5:nth-child(12n + 1){
  clear: left;
}

.u-grid__col6 {
  width: calc(99.99% * 6/12 - (30px - 30px * 6/12));
}

.u-grid__col6:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.u-grid__col6:last-child{
  margin-right: 0;
}

.u-grid__col6:nth-child(12n){
  margin-right: 0;
  float: right;
}

.u-grid__col6:nth-child(12n + 1){
  clear: left;
}

.u-grid__col7 {
  width: calc(99.99% * 7/12 - (30px - 30px * 7/12));
}

.u-grid__col7:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.u-grid__col7:last-child{
  margin-right: 0;
}

.u-grid__col7:nth-child(12n){
  margin-right: 0;
  float: right;
}

.u-grid__col7:nth-child(12n + 1){
  clear: left;
}

.u-grid__col8 {
  width: calc(99.99% * 8/12 - (30px - 30px * 8/12));
}

.u-grid__col8:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.u-grid__col8:last-child{
  margin-right: 0;
}

.u-grid__col8:nth-child(12n){
  margin-right: 0;
  float: right;
}

.u-grid__col8:nth-child(12n + 1){
  clear: left;
}

.u-grid__col9 {
  width: calc(99.99% * 9/12 - (30px - 30px * 9/12));
}

.u-grid__col9:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.u-grid__col9:last-child{
  margin-right: 0;
}

.u-grid__col9:nth-child(12n){
  margin-right: 0;
  float: right;
}

.u-grid__col9:nth-child(12n + 1){
  clear: left;
}

.u-grid__col10 {
  width: calc(99.99% * 10/12 - (30px - 30px * 10/12));
}

.u-grid__col10:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.u-grid__col10:last-child{
  margin-right: 0;
}

.u-grid__col10:nth-child(12n){
  margin-right: 0;
  float: right;
}

.u-grid__col10:nth-child(12n + 1){
  clear: left;
}

.u-grid__col11 {
  width: calc(99.99% * 11/12 - (30px - 30px * 11/12));
}

.u-grid__col11:nth-child(1n){
  float: left;
  margin-right: 30px;
  clear: none;
}

.u-grid__col11:last-child{
  margin-right: 0;
}

.u-grid__col11:nth-child(12n){
  margin-right: 0;
  float: right;
}

.u-grid__col11:nth-child(12n + 1){
  clear: left;
}

.u-grid__col12 {
  width: 100%;
}
/*------------------------------------*\
    # utils.width
\*------------------------------------*/

.u-width--full {
  width: 100%;
}

.u-width--one-half {
  width: 50%;
}

.u-width--one-third {
  width: 33.33333%;
}

.u-width--one-fourth {
  width: 25%;
}

.u-width--one-fifth {
  width: 20%;
}

.u-width--one-sixth {
  width: 16.66667%;
}

.u-width--one-seventh {
  width: 14.28571%;
}

.u-width--one-eight {
  width: 12.5%;
}

.u-width--one-nineth {
  width: 11.11111%;
}

.u-width--one-tenth {
  width: 10%;
}
/*------------------------------------*\
    # utils.group
\*------------------------------------*/

.u-group:after {
  content:"";
  display:block;
  clear:both;
}
/*------------------------------------*\
    # utils.spacers
\*------------------------------------*/

.u-spc-top--tny {
  margin-top: 6px;
}

.u-spc-top--sml {
  margin-top: 12px;
}

.u-spc-top--med {
  margin-top: 24px;
}

.u-spc-top--lrg {
  margin-top: 36px;
}

.u-spc-top--xlrg {
  margin-top: 48px;
}

.u-spc-top--xxlrg {
  margin-top: 72px;
}

.u-spc-right--tny {
  margin-right: 6px;
}

.u-spc-right--sml {
  margin-right: 12px;
}

.u-spc-right--med {
  margin-right: 24px;
}

.u-spc-right--lrg {
  margin-right: 36px;
}

.u-spc-right--xlrg {
  margin-right: 48px;
}

.u-spc-right--xxlrg {
  margin-right: 72px;
}

.u-spc-bottom--tny {
  margin-bottom: 6px;
}

.u-spc-bottom--sml {
  margin-bottom: 12px;
}

.u-spc-bottom--med {
  margin-bottom: 24px;
}

.u-spc-bottom--lrg {
  margin-bottom: 36px;
}

.u-spc-bottom--xlrg {
  margin-bottom: 48px;
}

.u-spc-bottom--xxlrg {
  margin-bottom: 72px;
}

.u-spc-left--tny {
  margin-left: 6px;
}

.u-spc-left--sml {
  margin-left: 12px;
}

.u-spc-left--med {
  margin-left: 24px;
}

.u-spc-left--lrg {
  margin-left: 36px;
}

.u-spc-left--xlrg {
  margin-left: 48px;
}

.u-spc-left--xxlrg {
  margin-left: 72px;
}
/*------------------------------------*\
    # utils.type
\*------------------------------------*/

.u-type--bold {
  font-weight: 700;
}

.u-type--light {
  font-weight: 300;
}

.u-type--center {
  text-align: center;
}

.u-type--upper {
  text-transform: uppercase;
  letter-spacing: .15em;
}

.u-type--ultra {
  text-transform: uppercase;
  letter-spacing: -.03em;
  font-weight: 800;
}

/* Sizes */

.u-type--alpha {
  font-size: 58px;
  line-height: 60px;
}

@media   (min-width: 48em) {

  .u-type--alpha{
    font-size: 66px;
    line-height: 66px;
  }
}

.u-type--beta {
  font-size: 50px;
  line-height: 54px;
}

@media   (min-width: 48em) {

  .u-type--beta{
    font-size: 58px;
    line-height: 60px;
  }
}

.u-type--gamma {
  font-size: 42px;
  line-height: 48px;
}

@media   (min-width: 48em) {

  .u-type--gamma{
    font-size: 50px;
    line-height: 54px;
  }
}

.u-type--delta {
  font-size: 34px;
  line-height: 42px;
}

@media   (min-width: 48em) {

  .u-type--delta{
    font-size: 42px;
    line-height: 48px;
  }
}

.u-type--epsilon {
  font-size: 26px;
  line-height: 36px;
}

@media   (min-width: 48em) {

  .u-type--epsilon{
    font-size: 34px;
    line-height: 42px;
  }
}

.u-type--zeta {
  font-size: 14px;
  line-height: 18px;
}

@media   (min-width: 48em) {

  .u-type--zeta{
    font-size: 16px;
    line-height: 18px;
  }
}

.u-type--eta {
  font-size: 12px;
  line-height: 12px;
}

@media   (min-width: 48em) {

  .u-type--eta{
    font-size: 14px;
    line-height: 18px;
  }
}

/* Colors */

.u-type--primary {
  color: #00d7e9;
}

.u-type--secondary {
  color: #fed017;
}

.u-type--neutral {
  color: rgb(75, 75, 75);
}

.u-type--negative {
  color: white;
}

/* Shorten long links */

.u-type--shorten {/* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;/* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;/* Instead use this non-standard one: */
  word-break: break-word;/* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/*------------------------------------*\
    # utils.radius
\*------------------------------------*/

.u-radial {
  border-radius: 4px;
}

.u-rounded {
  border-radius: 1000px;
}
/*------------------------------------*\
    # utils.float
\*------------------------------------*/

.u-float--left {
  float: left;
}

.u-float--right {
  float: right;
}
/*------------------------------------*\
    # utils.position
\*------------------------------------*/

.u-pos--rel {
  position: relative;
}

.u-pos--absolute {
  position: absolute;
}

.u-pos--absolutecenter {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
}
/*------------------------------------*\
    # utils.bg
\*------------------------------------*/

.u-bg--primary {
  background: #00d7e9;
}

.u-bg--dark {
  background: #1d1e23;
}
/*------------------------------------*\
    # utils.well
\*------------------------------------*/

.u-well--bordered {
  padding-bottom: 24px;
  border-bottom: 1px solid rgb(222, 222, 222);
}
/*------------------------------------*\
    # utils.actionlist
\*------------------------------------*/

.u-actionlist__item {
  overflow: hidden;
  padding: 24px 0;
  border-bottom: 1px solid rgb(212, 213, 213);
}

.u-actionlist__content {
  float: left;
  width: 55%;
  margin-right: 5%;
}

.u-actionlist__action {
  float: left;
  width: 40%;
}
/*------------------------------------*\
    # utils.animation
\*------------------------------------*/

.u-animation--fadeInSection {
  transition: all .35s ease-in-out;
  opacity: 0.4;
  -ms-transform: translateY(48px);
      transform: translateY(48px);
}

.u-animation--fadeInWithMove {
  opacity: 1;
  -ms-transform: translateY(0);
      transform: translateY(0);
}
/*------------------------------------*\
    # utils.visibility
\*------------------------------------*/

.is-hidden {
  display: none;
}

.is-visible {
  display: block;
}

.is-ontop {
  position: relative;
  z-index: 1;
}

/**
* Import: plugins
* Description: 3rd party code, external plugin CSS etc
* Note: when importing code from a 3rd party it should be stripped off
* any vendor prefixes since autoprefixer will use project specific vendor prefixes
*/
/*------------------------------------*\
    # plugins.fontface
\*------------------------------------*/
/* @import plugins.pickadate.css; */
/* @import plugins.select2.css; */
/* @import plugins.ionicons.css; */
/* @import plugins.tooltipster.css; */
/* @import plugins.remodal.css; */

/**
* Import: shame
* Description: CSS shame file
* Note: to be avoided, exists only if REALLY necessary or legacy code
*/

/* @import shame.css; */