/*
Theme Name: Jodi Cash
Author: Andrew Tibbetts
Author URI: http://dreamcodesign.com
*/
/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:

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

-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent; }

article, aside, figure, footer, header, nav, section, details, summary {
  display: block; }

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
  box-sizing: border-box; }

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

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {
  max-width: 100%; }

/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll; }

/* we use a lot of ULs that aren't bulleted.
	don't forget to restore the bullets within content. */
ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

th {
  font-weight: bold;
  vertical-align: bottom; }

td {
  font-weight: normal;
  vertical-align: top; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */ }

input[type="radio"] {
  vertical-align: text-bottom; }

input[type="checkbox"] {
  vertical-align: bottom; }

.ie7 input[type="checkbox"] {
  vertical-align: baseline; }

.ie6 input {
  vertical-align: text-bottom; }

select, input, textarea {
  font: 99% sans-serif; }

table {
  font-size: inherit;
  font: 100%; }

small {
  font-size: 85%; }

strong {
  font-weight: bold; }

td, td img {
  vertical-align: top; }

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* standardize any monospaced elements */
pre, code, kbd, samp {
  font-family: monospace, sans-serif; }

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
  margin: 0; }

/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible; }

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic; }

/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:before, .clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden; }

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

/*  Syntax Quick Reference
  --------------------------
  column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter)
  span($ratio: 1, $offset: 0)
  shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter)
  unshift()
  edit()
  center($max_width: 1410px, $pad: 0)
  stack($pad: 0, $align: false)
  unstack()
  align($direction: both)
  cf()
*/
/**
 * Grid settings.
 * All values are defaults and can therefore be easily overidden.
 */
/**
 * List functions courtesy of the wonderful folks at Team Sass.
 * Check out their awesome grid: Singularity.
 */
/**
 * Get  percentage from a given ratio.
 * @param {number} [$ratio=1] - The column ratio of the element.
 * @returns {number} - The percentage value.
 */
/**
 * Work out the column widths based on the ratio and gutter sizes.
 * @param {number} [$ratios=1] - The column ratio of the element.
 * @param {number} [$gutter=$jeet-gutter] - The gutter for the column.
 * @returns {list} $width $gutter - A list containing the with and gutter for the element.
 */
/**
 * Get the set layout direction for the project.
 * @returns {string} $direction - The layout direction.
 */
/**
 * Replace a specified list value with a new value (uses built in set-nth() if available)
 * @param {list} $list - The list of values you want to alter.
 * @param {number} $index - The index of the list item you want to replace.
 * @param {*} $value - The value you want to replace $index with.
 * @returns {list} $list - The list with the value replaced or removed.
 * @warn if an invalid index is supplied.
 */
/**
 * Reverse a list (progressively enhanced for Sass 3.3)
 * @param {list} $list - The list of values you want to reverse.
 * @returns {list} $result - The reversed list.
 */
/**
 * Get the opposite direction to a given value.
 * @param {string} $dir - The direction you want the opposite of.
 * @returns {string} - The opposite direction to $dir.
 * @warn if an incorrect string is provided.
 */
/**
 * Style an element as a column with a gutter.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns.
 * @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column mixin.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * Get the width of a column and nothing else.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Get the gutter size of a column and nothing else.
 * @param {number} [ratios=1] - A width relative to its container as a fraction.
 * @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column-width function.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * An alias for the column-gutter function.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * Style an element as a column without any gutters for a seamless row.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns.
 * @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one.
 */
/**
 * Reorder columns without altering the HTML.
 * @param {number} [$ratios=0] - Specify how far along you want the element to move.
 * @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Reset an element that has had shift() applied to it.
 */
/**
 * View the grid and its layers for easy debugging.
 * @param {string} [$color=black] - The background tint applied.
 * @param {boolean} [$important=false] - Whether to apply the style as !important.
 */
/**
 *  Alias for edit().
 */
/**
 * Horizontally center an element.
 * @param {number} [$max-width=1410px] - The max width the element can be.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 */
/**
 * Uncenter an element.
 */
/**
 * Stack an element so that nothing is either side of it.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 * @param {boolean/string} [$align=false] - Specify the text align for the element.
 */
/**
 * Unstack an element.
 */
/**
 * Center an element on either or both axes.
 * @requires A parent container with relative positioning.
 * @param {string} [$direction=both] - Specify which axes to center the element on.
 */
/**
 * Apply a clearfix to an element.
 */
/**
 * fullPage 2.7.4
 * https://github.com/alvarotrigo/fullPage.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 * Contribution by Jhony0311
 */
html.fp-enabled,
.fp-enabled body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /*Avoid flicker on slides transitions for mobile phones #336 */
  -webkit-tap-highlight-color: transparent; }

#superContainer {
  height: 100%;
  position: relative;
  /* Touch detection for Windows 8 */
  -ms-touch-action: none;
  /* IE 11 on Windows Phone 8.1*/
  touch-action: none; }

.fp-section {
  position: relative;
  /* Safari<=5 Android<=3 */
  /* <=28 */
  box-sizing: border-box; }

.fp-slide {
  float: left; }

.fp-slide, .fp-slidesContainer {
  height: 100%;
  display: block; }

.fp-slides {
  z-index: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
  -webkit-transition: all 0.3s ease-out;
  /* Safari<=6 Android<=4.3 */
  transition: all 0.3s ease-out; }

.fp-section.fp-table, .fp-slide.fp-table {
  display: table;
  table-layout: fixed;
  width: 100%; }

.fp-tableCell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%; }

.fp-slidesContainer {
  float: left;
  position: relative; }

.fp-controlArrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  cursor: pointer;
  width: 0;
  height: 0;
  border-style: solid;
  margin-top: -38px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }
  .fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent; }
  .fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff; }

.fp-scrollable {
  overflow: scroll; }

.fp-notransition {
  -webkit-transition: none !important;
  transition: none !important; }

.fp-slidesNav {
  position: absolute;
  z-index: 4;
  left: 50%;
  opacity: 1; }
  .fp-slidesNav.bottom {
    bottom: 17px; }
  .fp-slidesNav.top {
    top: 17px; }

#fp-nav ul,
.fp-slidesNav ul {
  margin: 0;
  padding: 0; }
  #fp-nav ul li,
  .fp-slidesNav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position: relative; }
    #fp-nav ul li a,
    .fp-slidesNav ul li a {
      display: block;
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      cursor: pointer;
      text-decoration: none; }
      #fp-nav ul li a.active span,
      .fp-slidesNav ul li a.active span {
        height: 12px;
        width: 12px;
        margin: -6px 0 0 -6px;
        border-radius: 100%; }
        #fp-nav ul li:hover #fp-nav ul li a.active span, #fp-slidesNav ul li:hover #fp-nav ul li a.active span, #fp-nav ul li:hover
        .fp-slidesNav ul li a.active span, #fp-slidesNav ul li:hover
        .fp-slidesNav ul li a.active span {
          height: 12px;
          width: 12px;
          margin: -6px 0 0 -6px;
          border-radius: 100%; }
      #fp-nav ul li a span,
      .fp-slidesNav ul li a span {
        border-radius: 50%;
        position: absolute;
        z-index: 1;
        height: 4px;
        width: 4px;
        border: 0;
        background: #333;
        left: 50%;
        top: 50%;
        margin: -2px 0 0 -2px;
        -webkit-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out; }
    #fp-nav ul li:hover a span,
    .fp-slidesNav ul li:hover a span {
      width: 10px;
      height: 10px;
      margin: -5px 0px 0px -5px; }

#fp-nav {
  position: fixed;
  z-index: 100;
  margin-top: -32px;
  top: 50%;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0); }
  #fp-nav.right {
    right: 17px; }
  #fp-nav.left {
    left: 17px; }
  #fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0; }
    #fp-nav ul li .fp-tooltip.right {
      right: 20px; }
  #fp-nav ul li:hover .fp-tooltip {
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    width: auto;
    opacity: 1; }
  #fp-nav.fp-show-active a.active + .fp-tooltip {
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    width: auto;
    opacity: 1; }

.fp-slidesNav ul li {
  display: inline-block; }

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell {
  height: auto !important; }

@font-face {
  font-family: 'montserratregular';
  src: url("_/font/montserrat/montserrat-regular-webfont.eot");
  src: url("_/font/montserrat/montserrat-regular-webfont.eot?#iefix") format("embedded-opentype"), url("_/font/montserrat/montserrat-regular-webfont.woff2") format("woff2"), url("_/font/montserrat/montserrat-regular-webfont.woff") format("woff"), url("_/font/montserrat/montserrat-regular-webfont.ttf") format("truetype"), url("_/font/montserrat/montserrat-regular-webfont.svg#montserratregular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'montserratbold';
  src: url("_/font/montserrat/montserrat-bold-webfont.eot");
  src: url("_/font/montserrat/montserrat-bold-webfont.eot?#iefix") format("embedded-opentype"), url("_/font/montserrat/montserrat-bold-webfont.woff2") format("woff2"), url("_/font/montserrat/montserrat-bold-webfont.woff") format("woff"), url("_/font/montserrat/montserrat-bold-webfont.ttf") format("truetype"), url("_/font/montserrat/montserrat-bold-webfont.svg#montserratbold") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'montserratblack';
  src: url("_/font/montserrat/montserrat-black-webfont.eot");
  src: url("_/font/montserrat/montserrat-black-webfont.eot?#iefix") format("embedded-opentype"), url("_/font/montserrat/montserrat-black-webfont.woff2") format("woff2"), url("_/font/montserrat/montserrat-black-webfont.woff") format("woff"), url("_/font/montserrat/montserrat-black-webfont.ttf") format("truetype"), url("_/font/montserrat/montserrat-black-webfont.svg#montserratblack") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'montserratlight';
  src: url("_/font/montserrat/montserrat-light-webfont.eot");
  src: url("_/font/montserrat/montserrat-light-webfont.eot?#iefix") format("embedded-opentype"), url("_/font/montserrat/montserrat-light-webfont.woff2") format("woff2"), url("_/font/montserrat/montserrat-light-webfont.woff") format("woff"), url("_/font/montserrat/montserrat-light-webfont.ttf") format("truetype"), url("_/font/montserrat/montserrat-light-webfont.svg#montserratlight") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'abril_fatface';
  src: url("_/font/abrilfatface/abrilfatface-regular-webfont.eot");
  src: url("_/font/abrilfatface/abrilfatface-regular-webfont.eot?#iefix") format("embedded-opentype"), url("_/font/abrilfatface/abrilfatface-regular-webfont.woff2") format("woff2"), url("_/font/abrilfatface/abrilfatface-regular-webfont.woff") format("woff"), url("_/font/abrilfatface/abrilfatface-regular-webfont.ttf") format("truetype"), url("_/font/abrilfatface/abrilfatface-regular-webfont.svg#abril_fatfaceregular") format("svg");
  font-weight: normal;
  font-style: normal; }
/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection {
  background: #ff0055;
  color: #fff;
  text-shadow: none; }

::selection {
  background: #ff0055;
  color: #fff;
  text-shadow: none; }

/*	j.mp/webkit-tap-highlight-color */
a:link {
  -webkit-tap-highlight-color: #ff0055; }

ins {
  background-color: #ff0055;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff0055;
  color: #000;
  font-style: italic;
  font-weight: bold; }

::-webkit-input-placeholder {
  color: rgba(40, 36, 32, 0.5); }

::-moz-placeholder {
  color: rgba(40, 36, 32, 0.5); }

:-ms-input-placeholder {
  color: rgba(40, 36, 32, 0.5); }

::placeholder {
  color: rgba(40, 36, 32, 0.5); }

* {
  -webkit-font-smoothing: antialiased;
  outline: none; }

html {
  font-size: 1vw; }
  @media (max-width: 1200px) {
    html {
      font-size: 12px; } }

body,
select,
input,
button,
textarea {
  font: 100%/1.5 'montserratregular', Helmet, Freesans, sans-serif;
  color: #282420; }

a {
  color: #ff0055;
  text-decoration: none; }
  a:hover {
    color: #282420; }

img {
  height: auto; }

.btn,
button {
  display: inline-block;
  padding: .5em 1em;
  font-family: 'montserratbold', Helmet, Freesans, sans-serif;
  font-size: .875rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .15em;
  background-color: #ff0055;
  border: 0;
  border-radius: .33em;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease; }
  .btn:hover,
  button:hover {
    color: #fff;
    background-color: #282420; }

input,
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }

input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]),
textarea {
  width: 100%;
  height: 2.5em;
  padding: .5em 5em .5em 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #282420;
  border-radius: 0; }

textarea {
  resize: vertical;
  max-height: 10em; }

.wpcf7-form {
  padding: 0 20%; }

.wpcf7-form-control-wrap {
  display: block; }

.wpcf7-form-control {
  margin-top: 1rem; }

.wpcf7-not-valid {
  border-bottom: 1px solid #ff0055 !important; }

.wpcf7-response-output {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important; }

div.wpcf7-validation-errors {
  display: none !important; }

span.wpcf7-not-valid-tip {
  position: absolute;
  top: 1.5em;
  right: 0;
  color: #ff0055; }

.no_break {
  display: inline-block; }

.logo {
  display: block;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0; }
  .logo,
  .logo svg {
    width: 8.00008rem;
    height:5.4rem; }

button.menu {
  position: fixed;
  z-index: 4;
  right: 0;
  bottom: 0;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  font-family: 'times new roman';
  font-size: 3rem;
  line-height: 1;
  letter-spacing: 0;
  background-color: #443e37;
  border-radius: 0; }
  button.menu span {
    display: inline-block;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease; }
  button.menu.on span {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }

nav {
  position: fixed;
  z-index: -1;
  right: 0;
  bottom: 0; }
  nav .old_android_fix {
    position: relative;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    width: auto;
    height: auto;
    padding: 0 4.4rem 0 0;
    background-color: #282420;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease; }
  nav.open {
    z-index: 2; }
    nav.open .old_android_fix {
      -webkit-transform: translateY(0);
              transform: translateY(0); }
  nav ul#menu-main {
    padding: .75rem .5rem 1rem .5rem;
    font-size: 0; }
    nav ul#menu-main li {
      display: block; }
    nav ul#menu-main a {
      display: block;
      padding: .5em .75em;
      font-family: 'montserratbold', Helmet, Freesans, sans-serif;
      font-size: 1.25rem;
      color: rgba(255, 255, 255, 0.5);
      text-transform: uppercase;
      letter-spacing: .1em; }
      nav ul#menu-main a:hover {
        color: #ff0055; }
      nav ul#menu-main a.active {
        color: #fff; }
  nav ul#menu-social {
    position: absolute;
    top: 0;
    right: 0;
    width: 4.4rem;
    height: 100%;
    padding: .75rem 0;
    background-color: #443e37; }
    nav ul#menu-social li {
      width: 100%;
      height: 3.3082706767rem;
      text-align: center; }
    nav ul#menu-social a {
      width: 2.2rem;
      height: 3.3082706767rem;
      line-height: 3.3082706767rem;
      color: #ff0055; }
  nav .nav_active {
    display: none; }

.fp-controlArrow {
  margin: 0;
  background-color: transparent; }
  .fp-controlArrow.fp-prev, .fp-controlArrow.fp-next {
    -webkit-transform: translate3d(0, -50%, 0) rotate(45deg);
            transform: translate3d(0, -50%, 0) rotate(45deg);
    width: 3rem;
    height: 3rem;
    border: 0; }
    .fp-controlArrow.fp-prev:hover, .fp-controlArrow.fp-next:hover {
      border-color: #ff0055; }
  .fp-controlArrow.fp-prev {
    left: 2rem;
    border-bottom: .25rem solid #fff;
    border-left: .25rem solid #fff;
    box-shadow: -0.125rem 0.125rem 0 0.125rem #ff0055; }
  .fp-controlArrow.fp-next {
    right: 2rem;
    border-top: .25rem solid #fff;
    border-right: .25rem solid #fff;
    box-shadow: 0.125rem -0.125rem 0 0.125rem #ff0055; }

.section {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center center; }
  .section[data-anchor=home] .slide:first-child .content {
    top: 44%; }
  .section[data-anchor=music] .content {
    text-align: center; }
    .section[data-anchor=music] .content p {
      position: relative;
      display: inline-block;
      max-width: 10rem; }
  .section[data-anchor=videos] {
    background-color: #000; }

.content {
  position: absolute;
  top: 55%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  padding: 2.5rem; }
  .content.intro {
    font-size: 3vw; }
    @media (max-width: 700px) {
      .content.intro {
        font-size: 21px; } }

.fp-slides .content {
  text-align: center; }

.dark:before,
.light:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.dark {
  color: #fff; }
  .dark:before {
    background-color: rgba(40, 36, 32, 0.33); }

.light:before {
  background-color: rgba(255, 255, 255, 0.5); }

.slide {
  position: relative;
  background-size: cover;
  background-position: center center; }
  .slide .content {
    padding: 0 4rem; }
  .slide h1 {
    padding-left: .3em;
    font-family: 'montserratlight', Helmet, Freesans, sans-serif;
    font-size: 6vw;
    line-height: 1.125;
    color: #fff;
    letter-spacing: .3em;
    text-indent: .1em;
    text-transform: uppercase;
    word-break: break-word;
    word-spacing: -.5em; }
    @media (max-width: 550px) {
      .slide h1 {
        font-size: 33px; } }
  .slide h2 {
    margin-top: .5rem;
    font-family: 'montserratlight', Helmet, Freesans, sans-serif;
    font-size: 1.75rem;
    line-height: 1.25;
    color: #fff;
    letter-spacing: .33em;
    text-transform: uppercase;
    word-spacing: .25em;
    text-indent: .25em; }
  .slide:first-child h1 {
    font-family: 'abril_fatface', Helmet, Freesans, sans-serif;
    font-size: 4rem;
    word-break: normal;
    word-spacing: normal; }
  .slide .btn {
    margin-top: 2vh; }
  .slide img {
    width: auto;
    max-width: 50vw;
    height: auto;
    max-height: 50vh;
    font-size: 2vw; }
    @media (max-width: 650px) {
      .slide img {
        font-size: 13px; } }
    .slide img.behind {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      z-index: -1;
      width: 280px;
      height: 166px; }
      .slide img.behind path {
        fill: #ff0055; }
  .slide .twitter {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    background-color: #fff; }
    .slide .twitter,
    .slide .twitter svg {
      width: 4.4rem;
      height: 4.4rem; }
    .slide .twitter svg {
      -webkit-transform: scale(0.5);
              transform: scale(0.5); }
      .slide .twitter svg * {
        fill: #ff0055; }
    .slide .twitter span {
      display: block;
      position: absolute;
      top: 1px;
      right: 1px;
      -webkit-transform: translate(100%, -100%);
              transform: translate(100%, -100%);
      margin: 0;
      width: auto;
      padding: .5em 1em;
      border: 1px solid #fff;
      border-radius: 1em;
      border-bottom-left-radius: 0;
      white-space: nowrap; }

.fp-slidesNav ul li {
  width: 1rem;
  height: 1rem;
  margin: .5rem; }
  .fp-slidesNav ul li a {
    background: #fff;
    border-radius: 50%; }
    .fp-slidesNav ul li a span {
      margin: 0 !important;
      height: 0;
      width: 0;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      background: #ff0055; }
    .fp-slidesNav ul li a:hover span {
      height: .5rem;
      width: .5rem; }
    .fp-slidesNav ul li a.active {
      background: transparent; }
      .fp-slidesNav ul li a.active span {
        height: 1rem;
        width: 1rem; }

.vid_wrap {
  position: absolute;
  top: 50%;
  left: 5rem;
  right: 5rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 0;
  padding-bottom: 56.25%;
  max-height: calc( 100vh - 8.8rem ); }
  .vid_wrap:before, .vid_wrap:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  .vid_wrap:before {
    width: 5rem;
    height: 5rem;
    background-color: #ff0055;
    border-radius: 50%; }
  .vid_wrap:after {
    margin-left: .25em;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-left: 2rem solid #fff; }
  .vid_wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .vid_wrap img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    cursor: pointer; }
  .vid_wrap.player:before, .vid_wrap.player:after,
  .vid_wrap.player img {
    display: none; }

.video-title {
  position: absolute;
  right: 4.4rem;
  bottom: 0;
  left: 0;
  height: 4.4rem;
  padding: 0 1rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.5); }

.cdbaby_wrap {
  margin: auto;
  max-width: 70vh;
  max-height: 70vh; }
  .cdbaby_wrap > div {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll; }

#overlay {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ff0055; }

/* Media queries
-------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
  .logo,
  .logo svg {
    width: calc( 10rem * 1.8182 );
    height: 10rem; }

  .no_break {
    display: inline; }

  nav {
    z-index: 1;
    left: 0;
    width: calc( 100% - 4.4rem ); }
    nav ul#menu-main {
      padding: 0 1rem; }
      nav ul#menu-main li {
        display: inline-block; }
      nav ul#menu-main a {
        padding-top: 0;
        padding-bottom: 0;
        height: 4.4rem;
        line-height: 4.4rem; }
    nav ul#menu-social {
      width: auto;
      height: 4.4rem;
      padding: 0 1rem;
      font-size: 0;
      background-color: transparent; }
      nav ul#menu-social li {
        position: relative;
        display: inline-block;
        width: 3.52rem;
        height: 4.4rem;
        font-size: 1rem; }
      nav ul#menu-social a {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        height: 4.4rem;
        line-height: 4.4rem; }
      nav ul#menu-social .menu-item i._mi {
        margin-top: 0; }
      nav ul#menu-social svg {
        width: 2.2rem;
        height: 2.2rem; }
        nav ul#menu-social svg * {
          fill: #ff0055; }
    nav .nav_active {
      display: block;
      position: absolute;
      z-index: 1;
      right: 0;
      top: -4.4rem;
      height: 4.4rem;
      padding: 0 1.5em;
      font-family: 'montserratbold', Helmet, Freesans, sans-serif;
      font-size: 1rem;
      line-height: 4.4rem;
      color: rgba(255, 255, 255, 0.5);
      background-color: #282420;
      text-transform: uppercase;
      letter-spacing: .1em;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transform-origin: center bottom;
              transform-origin: center bottom;
      -webkit-transform: perspective(200) rotateX(90deg);
              transform: perspective(200) rotateX(90deg);
      -webkit-transition: all 500ms ease;
      transition: all 500ms ease; }
      nav .nav_active.show {
        -webkit-transform: perspective(200) rotateX(0deg);
                transform: perspective(200) rotateX(0deg); }

  .content {
    top: 50%;
    width: 769px; }
    .content.intro {
      top: 48%; }

  .slide h1 {
    line-height: 1;
    word-break: normal;
    word-spacing: 0; }
  .slide .content {
    width: auto;
    padding: 0; }
  .slide .twitter {
    bottom: 4.4rem;
    left: auto;
    right: 0; }
    .slide .twitter span {
      left: 1px;
      right: auto;
      -webkit-transform: translate(-100%, -100%);
              transform: translate(-100%, -100%);
      border-bottom-left-radius: 1em;
      border-bottom-right-radius: 0; }

  .video-title {
    left: 0;
    padding: 0 2rem;
    line-height: 4.4rem; } }

h2 {
    font-size: 41px;
}

.fasc-button.fasc-size-large.fasc-type-flat.fasc-rounded-large {
    height: 100%;
    width: 100%;
    display:block;
}