/*! 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,
hgroup,
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 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
 *    (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;
}

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

/*
 * Necessary pieces from:
 *   https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
 *   https://github.com/h5bp/html5-boilerplate/blob/v4/css/main.css
 */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px;
}

.visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus { 
        clip: auto; 
        height: auto; 
        margin: 0; 
        overflow: visible; 
        position: static; 
        width: auto; 
    }

/* apply a natural box layout model to all elements, but allowing components to change http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */

html {
  box-sizing: border-box;
}

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

html,
body {
  font-family: OneDotExt;
  height: 100%;
  margin: 0;

  -webkit-font-smoothing: antialiased;
}

body {
  --black: #000;
  --white: #fff;
  --brandGrey: #555;
  --brandBlue: #1a5e86;
  --lightGrey: #f6f6f6;
}

a {
  color: inherit;
  text-decoration: inherit;
}

.lowercase {
  text-transform: lowercase;
}

.debug * {
  outline: 1px solid red;
}

/************************ Fonts **************/

@font-face {
  font-family: 'OneDot';
  src: url('fonts/OneDot.eot');
  src: url('fonts/OneDot.eot?#iefix') format('embedded-opentype'),url('fonts/OneDot.woff') format('woff'),url('fonts/OneDot.ttf') format('truetype');
}

@font-face {
  font-family: 'OneDotCd';
  src: url('fonts/OneDotCd.eot');
  src: url('fonts/OneDotCd.eot?#iefix') format('embedded-opentype'),url('fonts/OneDotCd.woff') format('woff'),url('fonts/OneDotCd.ttf') format('truetype');
}

@font-face {
  font-family: 'OneDotCd-Bold';
  src: url('fonts/OneDotCd-Bold.eot');
  src: url('fonts/OneDotCd-Bold.eot?#iefix') format('embedded-opentype'),url('fonts/OneDotCd-Bold.woff') format('woff'),url('fonts/OneDotCd-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'OneDotExt';
  src: url('fonts/OneDotExt.eot');
  src: url('fonts/OneDotExt.eot?#iefix') format('embedded-opentype'),url('fonts/OneDotExt.woff') format('woff'),url('fonts/OneDotExt.ttf') format('truetype');
}

@font-face {
  font-family: 'OneDotExt-Bold';
  src: url('fonts/OneDotExt-Bold.eot');
  src: url('fonts/OneDotExt-Bold.eot?#iefix') format('embedded-opentype'),url('fonts/OneDotExt-Bold.woff') format('woff'),url('fonts/OneDotExt-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'OneDot-Bold';
  src: url('fonts/OneDot-Bold.eot');
  src: url('fonts/OneDot-Bold.eot?#iefix') format('embedded-opentype'),url('fonts/OneDot-Bold.woff') format('woff'),url('fonts/OneDot-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Pizza-Press-Fill';
  src: url('fonts/PizzaPressFill.eot');
  src: url('fonts/PizzaPressFill.eot?#iefix') format('embedded-opentype'),url('fonts/PizzaPressFill.woff') format('woff'),url('fonts/PizzaPressFill.ttf') format('truetype');
}

/************************ HEADER **************/

.header {
  width: 100%;
}

.touch .header .inactive-menu-element{
      display: none;
    }

.touch .header .inactive-menu-element .section-icon-menu,
      .touch .header .inactive-menu-element .menu-title-text {
        opacity: 0.5;
      }

.touch .header .inactive-menu-element .menu-coming-soon {
        opacity: 0;
      }

.no-touch .header .section-icon-menu,
    .no-touch .header .menu-title-text {
      transition-duration: 0.5s;
      opacity: 1;
    }

.no-touch .header .no-animation .section-icon-menu,
      .no-touch .header .no-animation .menu-title-text {
        transition-duration: 0s;
      }

.no-touch .header .menu-title-container:hover .menu-coming-soon,
        .no-touch .header .menu-title-container:hover .section-icon-menu,
        .no-touch .header .menu-title-container:hover .menu-title-text {
          opacity: 0.5;
        }

.no-touch .header .menu-title-container .inactive-menu-element {
        display: none;
      }

.no-touch .header .menu-title-container .inactive-menu-element:hover .menu-title-text {
            opacity: 0;
          }

.no-touch .header .main-menu-label:hover:before {
          clip: rect(0,95px,55px,0);

          transition-duration: 0.5s;
          transition-timing-function: cubic-bezier(0, 0.64, 0.44, 1.02);
        }

.header .header-logo {
    left: 14px;
    position: fixed;
    top: 14px;
    z-index: 3;
  }

.header .main-menu {
    overflow-y: auto;
    background-color: rgb(19,101,147);
    background-color: rgba(19,101,147,0.90);
    bottom: 0;
    clip: rect(0,1000px,3000px,15px);
    color: #fff;
    font-family: OneDotCd;
    min-width: 280px;
    padding: 25px;
    position: fixed;
    right: 0;
    text-align: right;
    text-transform: uppercase;
    top: 0;
    z-index: 5;

    transition-delay: 0.1s;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0, 0.64, 0.44, 1.02);
  }

.header .main-menu.hidden {
      clip: rect(0,1000px,3000px,300px);
	    overflow: hidden;

      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0, 0.64, 0.44, 1.02);
    }

@media (max-width:640px) {

.header .main-menu {

      clip: rect(0,1000px,3000px,0);
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0, 0.64, 0.44, 1.02);
      width: 100%
  }

      .header .main-menu.hidden {
        clip: rect(0px,1000px,3000px,700px);

        transition-duration: 0.3s;
        transition-timing-function: cubic-bezier(0, 0.64, 0.44, 1.02);
      }
    }

.header .main-menu-label {
    background-color: rgb(19,101,147);
    background-color: rgba(19,101,147,0.90);
    color: #fff;
    cursor: pointer;
    overflow: auto;
    padding: 15px;
    position: fixed;
    right: 14px;
    top: 14px;
    z-index: 3;
    opacity: 1;
    transition: opacity 0.5s 0.1s;
  }

.header .main-menu-label:before {
      background-color: rgb(61,133,177);
      background-color: rgba(61,133,177,0.90);
      clip: rect(0px,95px,55px,95px);
      content: '';
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: -1;

      transition-duration: 0.5s;
      transition-timing-function: cubic-bezier(0, 0.64, 0.44, 1.02);
    }

.header .main-menu-label.hidden {
      opacity: 0;
      transition: opacity 0.5s 0.1s;
    }

.header .main-menu-label-text {
    display: inline-block;
    float: left;
    font-family: OneDotCd;
    font-size: 0.9em;
    padding: 5px 10px 0 0;
    text-transform: uppercase;
  }

@media (max-width:940px) {

.header .main-menu-label-text {
      display: none
  }
    }

.header .main-menu-label-image {
    background: url(images/icons/icon-menu.png) center center no-repeat;
    display: inline-block;
    float: left;
    height: 22px;
    width: 25px;
  }

.header .main-menu-label-image-close {
    background: url(images/icons/icon-menu-close.png) 0 0 no-repeat;
    cursor: pointer;
    display: inline-block;
    height: 26px;
    margin: 0 3px 15px 0;
    width: 25px;
  }

.header .menu-title-wrapper {
    list-style: none;
    margin: 0;
    padding: 0;
  }

@media (min-width: 641px) {

.header .menu-title-wrapper {
      margin-bottom: 20px
  }
    }

.header .menu-title {
    display: inline-block;
    font-size: 1.2em;
    margin-right: -10px;
    overflow: visible;
    padding: 10px 15px;
    position: relative;
  }

@media (max-width:640px) {

.header .menu-title {
      padding: 5px 15px
  }
    }

.header .secondary-menu-elements:before {
      content: url(images/icons/icon-menu-divider.png);
      height: 2px;
      width: 30px;
    }

.header .secondary-menu-elements .menu-title-text {
      font-size: 0.8em;
      padding-right: 0;
    }

.header .secondary-menu-elements .menu-title-container:nth-child(1) a {
          padding-top: 6px;
        }

.header .secondary-menu-elements .menu-title-container a {
        padding: 0 15px;
      }

.header .inactive-menu-element {
    position: relative;
    cursor: default;
  }

.header .menu-coming-soon {
    position: absolute;
    right: 50px;
    text-align: center;
    top: 13px;
    white-space: nowrap;

    opacity: 0;
  }

@media (max-width: 640px) {

.header .menu-coming-soon {
      top: 8px
  }
    }

.header .menu-item-coming-soon {
    display: none;
  }

.header .section-icon-menu {
    display: inline-block;
    float: right;
    padding-top: 2px;
    width: 20px;
    height: 22px;
  }

.header .menu-title-text {
    display: inline-block;
    float: left;
    padding: 3px 15px 0 0;
  }

/************************ Animations **************/

.csstransforms .header-item {
    transform: translateY(0);
    transition: transform 0.75s 0.05s;
    transition-delay: 1.5s;
  }

.csstransforms .header-item.loading {
      transform: translateY(-150%);
    }

/************************ LANDING **************/

section.landing {
  background-image: url("images/backgrounds/bg-mobile-landing-lrg.jpg");
}

@media (max-width: 640px) {

section.landing {
    background-image: url("images/backgrounds/bg-landing-mobile-01.jpg");
    background-position: 0 center
}
  }

section.landing .landing-wrapper {
    padding-bottom: 0;
  }

@media (max-width: 640px) {

section.landing .landing-wrapper {
      padding-bottom: 50%
  }
    }

.hero-title {
  display: block;
  text-align: center;
  margin: 0 auto 7px;
  max-width: 90%;
}

.landing-wrapper {
  left: 0;
  margin: 0 auto;
  /* max-width: 60%; */
  min-width: 300px;
  max-width: 640px;
  position: absolute;
  right: 0;
  top: 44%;
  transform: translateY(-50%);
}

@media (max-width: 640px) {

.landing-wrapper {
    transform: translateY(20%)
}
  }

.touch .landing-wrapper {
    margin-bottom: 35%;

    transform: translateY(10%);
  }

.gte-ie9 .landing-wrapper {
    position: relative;
  }

.landing-sub-header {
  color: #fff;
  font-family: "OneDot", sans-serif;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin: 10px auto 30px;
  text-align: center;
  width: 410px;

  /*  &:before,
  &:after {
    background: url('images/img-dotted-border-small.png') no-repeat;
    content: '';
    display: block;
    height: 3px;
    margin: 2% auto;
    width: 204px;
  }*/
}

.nav-icon {
  background-position: 0 -67px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 65px;
  margin: 0 auto;
  width: 65px;
}

.no-touch .nav-icon:hover {
      background-position: 0 0px;
    }

.svg .nav-icon {
    background-size: 100%;
  }

.nav-carplay {
  background-image: url("images/icons/icon-carplay-nav.png");
}

.svg .nav-carplay {
    background-image: url("images/landing-page/AnyWare-Icon-Hovers_CarPlay.svg");
  }

.nav-slack {
  background-image: url("images/landing-page/AnyWare_LandingModule-Hover_Slack.png");
}

.svg .nav-slack {
    background-image: url("images/landing-page/AnyWare_LandingModule-Hover_Slack.svg");
  }

.nav-cortana {
  background-image: url("images/landing-page/AnyWare_LandingModule-Hover_Cortana.png");
}

.svg .nav-cortana {
    background-image: url("images/landing-page/AnyWare_LandingModule-Hover_Cortana.svg");
  }

.nav-messenger {
  background-image: url("images/icons/icon-messenger.png");
}

.svg .nav-messenger {
    background-image: url("images/landing-page/AnyWare-Icon-Hovers_Messenger.svg");
  }

.nav-text {
  background-image: url("images/icons/icon-text-nav.png");
}

.svg .nav-text {
    background-image: url("images/landing-page/AnyWare-Icon-Hovers_Text.svg");
  }

.nav-tweet {
  background-image: url("images/icons/icon-tweet-nav.png");
}

.svg .nav-tweet {
    background-image: url("images/landing-page/AnyWare-Icon-Hovers_Tweet_02.svg");
  }

.nav-echo {
  background-image: url("images/icons/icon-echo-nav.png");
}

.svg .nav-echo {
    background-image: url("images/landing-page/AnyWare-Icon-Hovers_AmazonEcho.svg");
  }

.nav-voice {
  background-image: url("images/icons/icon-voice-nav.png");
}

.svg .nav-voice {
    background-image: url("images/landing-page/AnyWare-Icon-Hovers_Voice.svg");
  }

.nav-car {
  background-image: url("images/icons/icon-car-nav.png");
}

.svg .nav-car {
    background-image: url("images/landing-page/AnyWare-Icon-Hovers_FrdSync.svg");
  }

.nav-watch {
  background-image: url("images/icons/icon-watch-new.png");
}

.svg .nav-watch {
    background-image: url("images/landing-page/AnyWare-Icon-Hovers_SmartWatch.svg");
  }

.nav-zeroclickordering {
  background-image: url("images/icons/icon-zeroclickordering-nav.png");
}

.svg .nav-zeroclickordering {
    background-image: url("images/landing-page/AnyWare-Icon-Hovers_ZeroClickOrdering.svg");
  }

.nav-googlehome {
  background-image: url("images/icons/icon-googlehome-nav.png");
}

.svg .nav-googlehome {
    background-image: url("images/landing-page/AnyWare-Icon-Hovers_GoogleHome.svg");
  }

.nav-tv {
  background-image: url("images/icons/icon-tv-nav.png");
}

.svg .nav-tv {
    background-image: url("images/landing-page/AnyWare-Icon-Hovers_SmartTV.svg");
  }

.nav-xevo {
  background-image: url("images/icons/icon-car-nav.png");
}

.svg .nav-xevo {
    background-image: url("images/landing-page/AnyWare-Icon-Hovers_FrdSync.svg");
  }

.nav-coming-soon {
  background-image: url("images/icons/icon-coming-soon.png");
}

.svg .nav-coming-soon {
    background-image: url("images/landing-page/AnyWare-Icon-Hovers_ComingSoon.svg");
  }

.landing-icons {
  display: block;
  margin: 0 auto;
  padding: 25px 0 0; /* for 3 columns */
  /* padding: 25px 80px 0; /* for 2 columns */
  max-width: 560px;
  /* min-width: 340px; */
  text-align: center;

  transition-duration: 1s;
}

.landing-icons a {
    color: #fff;
    display: inline-block;
    position: relative;
    text-align: center;
    text-decoration: none;
  }

.landing-icons a.icon-3-col {
      width: 30%;
    }

.landing-icons a.icon-4-col {
      width: 19.4%;
    }

.landing-icons a.icon-5-col {
      width: 19.2%;
    }

.landing-icons a.icon-6-col {
      width: 14.2%;
    }

.landing-icons a.jsVideoLink {
      width: auto;
      font-family: "OneDotCd", sans-serif;
      background: url("images/icons/icon-play.png") no-repeat right top;
      padding-right: 2em;
      margin-top: 1.5em;
    }

.nav-coming-soon {
  display: none;
  font-family: Pizza-Press-Fill;
  font-size: 0.75em;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 75%;
  white-space: nowrap;
}

.touch .nav-coming-soon {
    display: block;
  }

.nav-title {
  display: block;
  font-family: Pizza-Press-Fill;
  padding: 0 0 30px;
  text-transform: uppercase;
  white-space: nowrap;
}

.jsVideoLink .nav-title {
    width: auto;
    font-family: "OneDotCd", sans-serif;
    text-transform: inherit;
    font-size: 1.3em;
    padding-bottom: 0;
  }

.tall-title {
  height: 96px;
}

.landing-order-tout {
  color: #fff;
  display: block;
  font-size: 1.1em;
  font-family: OneDotCd;
  margin: 60px auto 0;
  text-align: center;
  text-transform: uppercase;
}

@media only screen and (max-width: 1300px) {

.landing-order-tout {
    margin: 10px auto 0
}
  }

.landing-bottom-content {
  bottom: 80px;
  display: block;
  height: 14px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  width: 70px;

  opacity: 1;
  transition-delay: 2.5s;
  @include animation(scrollIcon 1.5s 0 infinite);
}

@media (max-width: 640px) {

.landing-bottom-content {
    display: none
}
  }

@media (max-height: 640px) {

.landing-bottom-content {
    display: none
}
  }

.landing-bottom-content.loading {
    opacity: 0;
    transition-delay: 3s;
  }

.scroll-down-text {
  color: #fff;
  display: block;
  font-family: OneDotCd;
  font-size: 0.8em;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

.scroll-down-arrow {
  display: block;
  height: 14px;
  margin: 0 auto;
  width: 21px;
}

@media (max-width: 767px) {
  .nav-title {
    font-size: 0.85em;
  }

  .nav-coming-soon {
    font-size: 0.75em;
  }

  .landing-sub-header {
    font-size: 1.1em;
    margin: 7px auto;
    width: 290px;
  }

  .landing-order-tout {
    display: none;
  }

  .landing-content {
    max-width: 100%;
  }

  .landing-icons {
    transition-duration: 1s;
    min-width: 300px;
    max-width: 400px;
    padding: 25px 5px 0;
  }

    .landing-icons a.icon-3-col,
    .landing-icons a.icon-4-col,
    .landing-icons a.icon-5-col,
    .landing-icons a.icon-6-col {
      width: 33.333%;
    }
}

@media (min-width: 768px) and (max-width: 1026px) {
    .landing-icons a.icon-3-col {
      width: 19.4%;
    }

    .landing-icons a.icon-4-col {
      width: 19.4%;
    }

    .landing-icons a.icon-5-col {
      width: 18.4%;
    }

    .landing-icons a.icon-6-col {
      width: 20%;
    }
}

/************************ animations **************/

.csstransforms .landing-order-tout,
  .csstransforms .jsVideoLink,
  .csstransforms .nav-title {
    opacity: 1;
    transition-delay: 2s;
    transition-duration: 2s;
  }

.csstransforms .landing-order-tout.loading, .csstransforms .jsVideoLink.loading, .csstransforms .nav-title.loading {
      opacity: 0;
    }

.csstransforms .hero-title {
    opacity: 1;
    transition-delay: 1s;
    transition-duration: 1s;
  }

.csstransforms .hero-title.loading {
      opacity: 0;
    }

.csstransforms .landing-sub-header {
    transition-delay: 1s;
    transition-duration: 1s;
    transform: translateY(0);
    opacity: 1;
  }

.csstransforms .landing-sub-header.loading {
      transform: translateY(10px);
      opacity: 0;
    }

.csstransforms .nav-icon {
    transform: scale(0);
  }

.csstransforms .nav-icon.animate {
      transform: scale(1);
      animation: navIcon 2s;
    }

@keyframes scrollIcon {
  0%,
  100% {
    bottom: 40px;
  }
  50% {
    bottom: 35px;
  }
}

@keyframes navIcon {
  0% {
    transform: scale(0);
  }
  25% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

/*
.xevo {
   border: 1px solid red;
}
*/

section.text .instruction-icon, section.tweet .instruction-icon {
    top: 6px;
  }

section.slack .order-instruction-tout, section.cortana .order-instruction-tout, section.smartwatch .order-instruction-tout, section.echo .order-instruction-tout, section.zeroclickordering .order-instruction-tout, section.samsung_smart_tv .order-instruction-tout, section.messenger .order-instruction-tout, section.googlehome .order-instruction-tout, section.facebookmessenger .order-instruction-tout, section.alexa .order-instruction-tout {
    display: none;
  }

section.slack .button-modal, section.cortana .button-modal, section.smartwatch .button-modal, section.echo .button-modal, section.zeroclickordering .button-modal, section.samsung_smart_tv .button-modal, section.messenger .button-modal, section.googlehome .button-modal, section.facebookmessenger .button-modal, section.alexa .button-modal {
    margin-top: 0;
  }

@media (max-width: 640px) {

section .button-modal {
      margin-top: 0
  }
    }

@media (max-width: 640px) {

section .order-instructions .button {
        width: 215px
    }
      }

.gte-ie9 body:after {
  content: "large";
  display: none;
}

@media (max-width: 940px) {

.gte-ie9 body:after {
    content: "medium"
}
  }

@media (max-width: 640px) {

.gte-ie9 body:after {
    content: "small"
}
  }

.js .cover {
    background: #fff;
    height: 100%;
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: 6;

    opacity: 1;
  }

.js .cover.loaded {
      opacity: 0;
      transition-duration: 1.2s;
    }

.js .inner-section-wrapper {
    opacity: 0;
    transition-duration: 1.2s;
  }

.js .animate .inner-section-wrapper {
      opacity: 1;
      transition-duration: 1.2s;
    }

.js .animate .static-section-icon {
      transform: scale(1);
      animation: navIcon 0.8s forwards;
    }

.content-wrapper {
  margin: 0 auto;
  overflow-x: hidden;
  width: 100%;
}

.content-container {
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.no-touch .content-container {
    height: 100%;
  }

@media (max-width: 640px) {

.no-touch .content-container {
      height: auto
  }
    }

.section-still {
  display: none;
}

.section-still img {
    display: block;
    width: 100%;
  }

@media (max-width: 640px) {

.section-still {
    display: block;
    width: 100%
}
  }

.no-video .section-still, .touch .section-still {
    display: block;
  }

.section-icon {
  width: 80px;
}

@media (max-width: 640px) {

.section-icon {
    width: 55px
}
  }

.order-cta {
  display: block;
  font-family: "Hoefler Text A", "Hoefler Text B", Times, serif;
  font-style: italic;
  font-weight: 400;
  padding: 8px 0 11px;
}

@media (max-width: 640px) {

.order-cta {
    font-size: 1.2em
}
  }

@media (max-width: 640px) {

.order-cta {
    font-size: 1em
}
  }

.title-name {
  height: auto;
}

.slack .title-name,
.cortana .title-name {
  /* height: 45px; */
}

.title-decoration {
  position: relative;
  top: -8px;
}

@media (max-width: 840px) {

.title-decoration {
    top: -4px
}
  }

.open-decoration {
  left: 12px;
}

.close-decoration {
  right: 12px;
}

.tall-decoration {
  top: -38px;
}

.order-instructions {
  padding: 45px 0 0;
  text-transform: uppercase;
}

@media (max-width: 840px) {

.order-instructions {
    padding-top: 50px
}
  }

@media (max-width: 640px) {

.order-instructions {
    padding: 0 0 0
}
  }

.featured-instruction {
  display: block;
  font-family: OneDotCd;
  font-size: 1.1em;
  margin: 0 auto 0;
  max-width: 275px;
  text-transform: uppercase;
}

@media (max-width: 640px) {

.featured-instruction {
    margin-bottom: 15px
}
  }

.featured-instruction.icon-instruction {
    margin-top: -11px;
  }

.featured-instruction-text {
  display: block;
  font-family: OneDotCd;
}

.secondary-instruction {
  display: block;
  font-family: OneDotCd;
  font-size: 1em;
  margin-bottom: 45px;
}

.instruction-cta {
  font-family: OneDotCd-Bold;
  font-weight: 400;
}

.instruction-icon {
  margin: 0 5px;
  height: 25px;
  position: relative;
  top: -3px;
  width: 15px;
}

.order-instruction-tout {
  display: block;
  font-size: 0.65em;
  margin-bottom: 10px;
}

.secondary-order-instruction-tout {
  margin-bottom: 5px;
}

.secondary-tout {
  margin-bottom: 22px;
}

.combiner {
  margin: 4px 0 7px 0;
  font-size: 10px;
}

.button {
  border-radius: 25px;
  color: #fff;
  display: inline-block;
  font-family: "OneDotCd-Bold";
  font-size: 1em;
  height: 40px;
  line-height: 42px;
  text-decoration: none;
  text-transform: uppercase;
  width: 200px;
  background-size: 100%;
  background-image: linear-gradient(#ee3350, #e32438);
}

.no-touch .button:hover {
    background-size: 100%;
    background-image: linear-gradient(#b82437, #b61f2e);
  }

@media (max-width: 840px) {

.button {
    font-size: 0.8em;
    width: 140px
}
  }

@media (max-width: 640px) {

.button {
    width: 90%
}
  }

.button-modal {
  margin-top: 15px;
}

.button-title {
  display: inline-block;
  padding-left: 30px;
}

.long-instruction {
  font-size: 0.98em;
  line-height: 1.4;
}

.scroll-down {
  display: block;
  height: 17px;
  margin: 0 auto;
  width: 29px;
}

.paragraph-end {
  white-space: nowrap;
}

/************************ Carplay Legal *************/

.carplay--legal {
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
  padding: 20px;
  pointer-events: none;
}

.carplay--legal p {
    max-width: 720px;
    min-width: 265px;
    color: #fff;
    font-family: "OneDotCd", sans-serif;
    font-size: 0.7em;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.7);
  }

@media (max-width: 640px) {

.carplay--legal {
    position: relative;
    background-color: #fff
}

    .carplay--legal p {
      color: var(--brandGrey);
      padding: 0;
      border-radius: 0;
      background-color: transparent;
    }
  }

/************************ Section Tout **************/

.section-tout-container {
  color: #fff;
  max-width: 360px;
  min-width: 265px;
  padding: 20px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 35%;
}

.csstransforms .section-tout-container {
    transition-duration: 0.5s;
    transform: translateY(-40%);
    opacity: 0;
  }

.csstransforms .section-tout-container.centered {
      opacity: 1;
      transform: translateY(-50%);
    }

@media (max-width: 640px) {

.csstransforms .section-tout-container {
      opacity: 1;
      transform: none
  }
    }

.section-tout-container.container--right {
    right: 11%;
  }

@media (max-width: 1045px) {

.section-tout-container.container--right {
      right: 8%
  }
    }

@media (max-width: 940px) {

.section-tout-container.container--right {
      right: 5%
  }
    }

.section-tout-container.container--left {
    left: 11%;
  }

@media (max-width: 1045px) {

.section-tout-container.container--left {
      right: 8%
  }
    }

@media (max-width: 940px) {

.section-tout-container.container--left {
      left: 5%
  }
    }

@media (max-width: 640px) {

.section-tout-container {
    height: 100%;
    max-width: 0;
    min-width: 100%;
    padding: 0;
    position: static;
    width: 100%
}

    .section-tout-container.container--right,
    .section-tout-container.container--left {
      left: 0;
      right: 0;
    }
  }

.section-tout {
  font-family: OneDotCd;
  font-size: 0.95em;
  line-height: 1.7;
  margin: 40px auto 0;
  padding: 0 3px;
  position: relative;
  text-align: left;
}

@media (max-width: 840px) {

.section-tout {
    margin-top: 40px
}
  }

@media (max-width: 640px) {

.section-tout {
    margin: 25px
}
  }

.section-tout:before,
  .section-tout:after {
    background-color: #fff;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
  }

.section-tout:before {
    top: -12px;
  }

@media (max-width: 640px) {

.section-tout:before {
      display: none
  }
    }

.section-tout:after {
    bottom: -10px;
  }

@media (max-width: 640px) {

.section-tout:after {
      background-color: #555;
      width: 146px
  }
    }

/** Right Align **/

.container--right {
  right: 17%;
}

/** Left Align **/

.container--left {
  left: 17%;
}

.section-tout-header {
  position: static;
  max-width: 360px;
}

@media (max-width: 640px) {

.section-tout-header {
    color: #fff;
    left: 0;
    margin: 10px auto 0;
    position: absolute;
    right: 0;
    top: 25px
}
  }

.section-tout-footer {
  background: transparent;
  color: #fff;
  position: relative;
}

@media (max-width: 640px) {

.section-tout-footer {
    background: #fff;
    color: var(--brandGrey);
    overflow: hidden;
    padding-bottom: 20px;
    width: 100%
}
  }

/************************ Quads **************/

.quad-tl-bg {
  background-position: 0 0;
}

.quad-tl-video {
  left: 0;
  position: absolute;
  top: 0;
}

.quad-tr-bg {
  background-position: 100% 0;
}

.quad-tr-video {
  position: absolute;
  right: 0;
  top: 0;
}

.quad-bl-bg {
  background-position: 0 100%;
}

.quad-bl-video {
  bottom: 0;
  left: 0;
  position: absolute;
}

@media (max-width: 940px) {

.quad-bl-video {
    left: -165px
}
  }

.quad-bl-video--wide {
  bottom: 0;
  display: block;
  left: -185px;
  position: relative;
}

@media (max-width: 940px) {

.quad-bl-video--wide {
    left: -165px
}
  }

.quad-br-bg {
  background-position: 100% 100%;
}

.quad-br-video {
  bottom: 0;
  position: absolute;
  right: 0;
}

@media (max-width: 940px) {

.quad-br-video {
    right: -165px
}
  }

@media (max-width: 640px) {

.section-title img {
      max-width: 90%
  }
    }

/************************ Animations **************/

.menu-close {
  transition-duration: 0.23s;
}

.no-touch .menu-close:hover {
    transition-duration: 0.23s;
    transform: rotate(180deg);
  }

.coming-soon .section-tout-container {
    max-width: 480px;
  }

.coming-soon .section-tout-header {
    max-width: 480px;
  }

.coming-soon .order-instruction-tout {
    display: none;
  }

.coming-soon .section-tout-footer {
    font-family: "OneDotCd", sans-serif;
    margin-top: 10px;
  }

@media (max-width: 640px) {

.coming-soon .section-tout-footer {
      margin-top: 0;
      padding-top: 25px
  }
    }

.coming-soon .featured-instruction {
    font-family: "OneDotExt";
    font-size: 0.65em;
    margin-bottom: 12px;
  }

.js .section-legal {
    background-color: var(--black);
    background-color: rgba(0, 0, 0, 0.65);
    display: table;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    top: -200%;
    width: 100%;
    z-index: 4;
    transition: opacity 0.5s linear 0, top 0.01s linear 0.5s;
  }

.js .section-legal.show {
      opacity: 1;
      top: 0;
      transition: opacity 0.5s linear 0.1s, top 0.01s linear 0;
    }

.section-legal h1 {
    color: var(--brandBlue);
    font-family: "OneDotCd", sans-serif;
    font-size: 1em;
    margin-bottom: 36px;
    text-align: center;
    text-transform: uppercase;
  }

.section-legal p {
    color: var(--brandGrey);
    font-family: "OneDot", sans-serif;
    font-size: .9em;
    line-height: 1.5em;
  }

.section-legal .legal-wrapper {
    display: table-cell;
    vertical-align: middle;
  }

.section-legal .legal-container {
    background-color: var(--white);
    margin: 0 auto;
    max-width: 550px;
    opacity: 0;
    padding: 40px 45px 29px;
    position: relative;

    transform: translateY(-20px);
    transition: opacity 0.5s linear, transform 0.5s ease-out;
  }

.show .legal-container {
    opacity: 1;
    transform: translateY(0px);
  }

.section-legal-footer {
  background-color: var(--lightGrey);
}

.section-legal-footer p {
    color: #aaaaaa;
    font-family: "OneDotCd", sans-serif;
    font-size: 0.7em;
    margin: 0 auto;
    max-width: 1330px;
    padding: 40px 0;
    width: 90%;
  }

/************************ FAQ **************/

.content-how-to-order  {
  padding: 45px;
}

.content-how-to-order:after {
    background: url('images/faq/img-dotted-blue.png') no-repeat;
    content: '';
    display: block;
    height: 2px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 362px;
  }

@media (max-width: 640px) {

.content-how-to-order:after {
      width: 246px
  }
    }

.content-faq {
  min-height: 500px;
  padding-top: 50px;
}

.content-faq sup {
    top: -0.3em;
  }

.content-how-to-order,
.content-faq {
  font-family: OneDotExt;
}

.content-how-to-order .section-icon, .content-faq .section-icon {
    color: #136593;
    display: block;
    margin: 0 auto 5px;
    text-align: center;
    width: 55px;
  }

.content-how-to-order .how-to-use-headline,
  .content-how-to-order .faq-headline,
  .content-faq .how-to-use-headline,
  .content-faq .faq-headline {
    font-size: 2em;
    height: 37px;
    margin-top: 20px;
    position: relative;
    text-align: center;
  }

.content-how-to-order .how-to-use-headline, .content-faq .how-to-use-headline {
    margin-bottom: 15px;
  }

@media (max-width: 900px) {

.content-how-to-order .how-to-use-headline, .content-faq .how-to-use-headline {
      height: 63px
  }
    }

.content-how-to-order .faq-headline, .content-faq .faq-headline {
    margin-top: 14px;
    margin-bottom: 55px;
  }

.content-how-to-order .how-to-use-title,
  .content-how-to-order .faq-headline-title,
  .content-faq .how-to-use-title,
  .content-faq .faq-headline-title {
    margin: 0 auto;
    text-indent: -99999px;
  }

.content-how-to-order .faq-headline-title, .content-faq .faq-headline-title {
    background-image: url(images/faq/EO_Titles-FAQ.png);
  }

.svg .content-how-to-order .faq-headline-title, .svg .content-faq .faq-headline-title {
      background-image: url(images/faq/EO_Titles-FAQ.svg);
    }

@media (max-width: 640px) {

.svg .content-how-to-order .faq-headline-title, .svg .content-faq .faq-headline-title {
        background-image: url(images/faq/EO_Titles-FAQ-mobile.svg)
    }
      }

.content-how-to-order .faq-headline-title, .content-faq .faq-headline-title {
    background-repeat: no-repeat;
    background-size: contain;
    width: 614px;
}

@media (max-width: 640px) {

.content-how-to-order .faq-headline-title, .content-faq .faq-headline-title {
      width: 94px
  }
    }

.content-how-to-order .how-to-use-title, .content-faq .how-to-use-title {
    background-image: url(images/faq/EO_Titles-How-To-Use-ie8.png);
  }

.svg .content-how-to-order .how-to-use-title, .svg .content-faq .how-to-use-title {
      background-image: url(images/faq/EO_Titles-How-To-Use.svg);
    }

@media (max-width: 900px) {

.svg .content-how-to-order .how-to-use-title, .svg .content-faq .how-to-use-title {
        background-image: url(images/faq/EO_Titles-How-To-Use-mobile.svg)
    }
      }

.content-how-to-order .how-to-use-title, .content-faq .how-to-use-title {
    background-repeat: no-repeat;
    background-size: contain;
    width: 646px;
}

@media (max-width: 900px) {

.content-how-to-order .how-to-use-title, .content-faq .how-to-use-title {
      width: 247px
  }
    }

.content-how-to-order .faq-list-item-q-container, .content-faq .faq-list-item-q-container {
    position: relative;
    display: inline;
    margin: 0 auto;
  }

.content-how-to-order .faq-categories, .content-faq .faq-categories {
    color: var(--brandBlue);
    cursor: pointer;
    display: table;
    font-family: 'OneDotCd';
    font-size: 1.4em;
    margin: 10px auto;
    position: relative;
  }

.content-how-to-order .icon-more, .content-faq .icon-more {
    left: 0;
    position: absolute;
    top: 1px;
    width: 15px;

    transition-property: transform;
    transition-duration: 0.20s;
  }

.content-how-to-order .active-icon-more, .content-faq .active-icon-more {
    transform: rotate(90deg);
  }

.content-how-to-order .faq-list, .content-faq .faq-list {
    background: #fff;
    font-family: 'OneDotCd';
    font-size: 1.2em;
    margin: 0 auto;
    width: 75%;
    min-width: 400px;
    max-height: 1px;
    max-width: 500px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-transform: uppercase;
    z-index: 2;
    text-align: center;
    transition-property: max-height;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

@media (max-width: 640px) {

.content-how-to-order .faq-list, .content-faq .faq-list {
      margin: 0 auto 0px;
      padding: 0;
      min-width: 290px;
      max-width: 90%
  }
    }

.content-how-to-order .faq-list.expand, .content-faq .faq-list.expand {
      margin: 15px auto 15px;
      opacity: 1;
      max-height: 4000px;
      transition-duration: 4s;
      transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    }

.content-how-to-order .faq-list-item, .content-faq .faq-list-item {
    list-style-type: none;
    overflow: auto;
    margin: 0 auto;
    padding: 0 0 25px;
    position: relative;
    display: table;
    color: #136593;
    color: rgba(19, 101, 147, 0.9);
  }

@media (max-width: 640px) {

.content-how-to-order .faq-list-item, .content-faq .faq-list-item {
      text-align: left
  }
    }

.content-how-to-order .faq-list-copy, .content-faq .faq-list-copy {
    display: inline-block;
    margin: 0;
  }

.content-how-to-order .faq-answer, .content-faq .faq-answer {
    font-family: 'Hoefler Text A', 'Hoefler Text B', Times, serif;
    font-weight: 400;
    font-size: 0.75em;
    font-style: normal;
    float: left;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    text-transform: none;
    transition-property: max-height;
    transition-duration: 0.5s;
  }

@media (max-width: 640px) {

.content-how-to-order .faq-answer, .content-faq .faq-answer {
      padding-left: 24px
  }
    }

.content-how-to-order .faq-answer.expand, .content-faq .faq-answer.expand {
      max-height: 370px;
    }

.content-how-to-order .faq-answer a, .content-faq .faq-answer a {
      font-weight: 600;
    }

.content-how-to-order .faq-profile-cta, .content-faq .faq-profile-cta {
    color: var(--brandBlue);
    display: block;
    font-family: 'OneDotCd';
    font-size: 1.1em;
    margin-bottom: 30px;
    text-transform: uppercase;
  }

@media (max-width: 640px) {

.content-how-to-order .faq-profile-cta, .content-faq .faq-profile-cta {
      font-size: 0.8em;
      text-align: center
  }
    }

.content-how-to-order .icon-pizza-profile, .content-faq .icon-pizza-profile {
    width: 50px;
  }

.js .content-how-to-order.animate .faq-profile-cta,
    .js .content-how-to-order.animate .icon-pizza-profile,
    .js .content-faq.animate .faq-profile-cta,
    .js .content-faq.animate .icon-pizza-profile {
      transition-timing-function: cubic-bezier(0,.64,.44,1.02);
      transition-delay: 0.5s;
      transition-duration: 1s;
      transform: translateY(0);
    }

.content-how-to-order .faq-profile-cta,
  .content-how-to-order .icon-pizza-profile,
  .content-faq .faq-profile-cta,
  .content-faq .icon-pizza-profile {
    transform: translateY(10px);
  }

.content-how-to-order .faq-order-instructions, .content-faq .faq-order-instructions {
    background: #fff;
    position: relative;
    text-align: center;
    z-index: 2;
  }

@media (max-width: 640px) {

.content-how-to-order .faq-order-instructions, .content-faq .faq-order-instructions {
      padding-top: 0;
      margin: 0 auto;
      max-width: 290px
  }
    }

.content-how-to-order .faq-buttons, .content-faq .faq-buttons {
    display: block;
    padding-bottom: 45px;
    text-align: center;
    text-transform: uppercase;
  }

.content-how-to-order .button, .content-faq .button {
    color: #fff;
    display: inline-block;
    font-family: 'OneDotCd-Bold';
    font-size: 1em;
    height: 40px;
    line-height: 44px;
    margin: 0 10px;
    text-transform: uppercase;
    width: 215px;
    background-size: 100%;
    background-image: linear-gradient(#ee3350, #e32438);
    border-radius: 25px;
  }

@media (max-width: 640px) {

.content-how-to-order .button, .content-faq .button {
      display: block;
      height: 46px;
      line-height: 46px;
      margin: 15px auto 0;
      width: 90%
  }
    }

.faq-categories-wrapper {
  margin: 0 auto;
  position: relative;
  width: 430px;
  z-index: 2;
}

@media (max-width: 640px) {

.faq-categories-wrapper {
    width: 100%
}
  }

.faq-categories-container {
  background-color: #f6f6f6;
  max-height: 44px;
  overflow: hidden;
  position: absolute;
  width: 100%;

  transition-property: max-height;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@media (max-width: 640px) {

.faq-categories-container {
    margin: 0 5%;
    width: 90%
}
  }

.faq-categories-container.expand {
    max-height: 400px;
    /* overflow-y: scroll;*/
  }

.categories-container {
  display: inline-block;
  list-style-type: none;
  margin-top: 0;
  padding-left: 0;
  width: 80%;
}

.categories-container .lable {
    background-color: #ececec;
    font-family: "OneDotCd-Bold", sans-serif;
    height: 44px;
    width: 130%;
  }

.categories-container .lable span {
      display: block;
      top: 33%;
      position: relative;
    }

.categories-container .category {
    cursor: pointer;
    padding: 5px 0 5px 5%;
    margin: 5px 0;
  }

.categories-container li {
    color: var(--brandGrey);
    font-family: "OneDotCd", sans-serif;
    padding-left: 5%;
  }

.faq-categories-arrow {
  background-color: var(--brandBlue);
  background-image: url("images/faq/faq-arrow-2.png");
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  font-size: 0;
  height: 44px;
  text-indent: -99999px;
  overflow: hidden;
  right: 0;
  position: absolute;
  top: 0;
  width: 44px;
  z-index: 2;
}

.svg .faq-categories-arrow {
    background-color: var(--brandBlue);
    background-image: url("images/faq/faq-arrow-2.svg");
  }

.faq-container {
  padding-top: 40px;
  position: relative;
  top: 44px;
  z-index: 1;
  transition-property: opacity;
  transition-duration: 0.8s;
}

.faq-container.dim {
    opacity: 0.3;
  }

.faq-list {
  background: #fff;
  font-family: 'OneDotCd';
  font-size: 1.2em;
  margin: 0 auto;
  width: 75%;
  min-width: 614px;
  max-height: 1px;
  max-width: 731px;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-transform: uppercase;
  z-index: 2;
  text-align: center;
  transition-property: max-height;
  transition-duration: 0.8s;
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@media (max-width: 640px) {

.faq-list {
    margin: 0 auto;
    padding: 0;
    min-width: 290px;
    max-width: 90%
}
  }

.faq-list.expand {
    max-height: 4000px;
    transition-duration: 3s;
  }

.faq-question {
  cursor: pointer;
  display: inline-block;
  position: relative;
  text-indent: 24px;
  transition-property: font-weight;
  transition-duration: 0.3s;
}

@media (max-width: 640px) {

.faq-question {
    padding-left: 24px;
    text-indent: 0
}
  }

.faq-question.active {
    font-weight: 700;
  }

.faq-question.active:before {
      transform: scale(1, 1) rotateZ(90deg) translate(0, 0) skew(0, 0);
      transform-origin: 50% 50%;
    }

.faq-question:before {
    background: url("images/faq/faq-arrow.png") center center no-repeat;
    background-size: 15px 15px;
    content: '';
    display: inline-block;
    height: 15px;
    position: relative;
    right: 10px;
    top: 1px;
    width: 15px;
    transition-property: transform;
    transition-duration: 0.3s;
    transform: scale(1, 1) rotateZ(0) translate(0, 0) skew(0, 0);
    transform-origin: 50% 50%;
  }

@media (max-width: 640px) {

.faq-question:before {
      display: block;
      position: absolute;
      right: 0;
      left: 0
  }
    }

.desktop,
.mobile {
  min-height: 500px;
}

@media (max-width: 1330px) {

.desktop,
.mobile {  /* must match max width of parent section */
    min-height: initial
}
  }

.desktop .inner-section-wrapper, .mobile .inner-section-wrapper {
    margin: 0 auto;
    max-width: 1330px;
    position: relative;
  }

.desktop .device-image-container, .mobile .device-image-container {
    position: absolute;
    top: 0;
    width: 50%;
  }

@media (max-width: 720px) {

.desktop .device-image-container, .mobile .device-image-container {
      position: relative;
      width: 100%
  }
    }

.desktop {
  background-color: var(--lightGrey);
}

.desktop .order-location-tout {
    background-color: var(--lightGrey);
  }

.desktop .device-image-container {
    left: 0;
  }

.mobile .device-image-container {
    right: 0;
  }

/************************ Order Locations **************/

.content-order-locations {
  overflow: hidden;
  text-align: center;
}

.content-order-locations .button {
    width: 215px;
  }

.content-order-locations .apps-img {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

.content-order-locations .apps-img img {
      margin: 0 auto;
      max-width: 100%;
      display: block;
    }

.secondary-order-location {
  background: white;
}

.secondary-order-location .order-location-tout {
    background: white;
  }

.order-location-section-title {
  margin-top: 5px;
}

.order-location-title {
  color: var(--brandBlue);
  font-family: OneDotCd-Bold;
  font-size: 2.5em;
  font-weight: 400;
  text-transform: uppercase;
}

.order-location-tout {
  background: #fff;
  font-family: OneDotCd;
  font-size: 0.95em;
  line-height: 1.7;
  margin: 35px auto 45px;
  position: relative;
  text-align: left;
  z-index: 2;
}

.order-location-tout:before,
  .order-location-tout:after {
    background: url('images/faq/img-dotted-blue.png') no-repeat;
    content: '';
    display: block;
    height: 2px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
  }

.order-location-tout:before {
    top: -12px;
  }

.order-location-tout:after {
    bottom: -12px;
  }

.order-locations-tout-container {
  max-width: 360px;
  min-width: 265px;
  padding: 65px 0;
  width: 35%;
}

@media (max-width: 640px) {

.order-locations-tout-container {
      padding-top: 25px;
      width: 70%
}
    }

.order-location-hero--left {
  float: right;
  margin-top: 70px;
  max-width: 647px;
  width: 100%;
}

@media (max-width: 1000px) {

.order-location-hero--left {
    float: none;
    margin-top: 65px;
    width: 100%
}
  }

@media (max-width: 720px) {

.order-location-hero--left {
    margin-top: 22px
}
  }

.order-location-hero--right {
  float: left;
  margin-top: 70px;
  margin-bottom: 70px;
  max-width: 720px;
  padding-left: 5%;
  width: 100%;
}

@media (max-width: 1000px) {

.order-location-hero--right {
    float: none;
    margin-top: 65px;
    margin-bottom: 0;
    width: 100%
}
  }

@media (max-width: 720px) {

.order-location-hero--right {
    margin-top: 22px;
    padding-left: 0
}
  }

.order-locations-container--left {
  float: left;
  margin-left: 11%;
}

@media (max-width: 720px) {

.order-locations-container--left {
    float: none;
    margin: 0 auto
}
  }

.order-locations-container--right {
  float: right;
  margin-right: 11%;
}

.order-location-icon {
  width: 55px;
}

.order-location-title-decoration {
  position: relative;
  top: -3px;
}

.order-location-open-decoration {
  left: -5px;
}

.order-location-close-decoration {
  right: -5px;
}

.secondary-app-location {
  margin-left: 25px;
}

@media (max-width: 640px) {

.secondary-app-location {
    margin: 0
}
  }

.desktop-app {
  padding-top: 0;
  padding-bottom: 0;
  margin: 5% 11% 5% 0;
}

@media (max-width: 720px) {

.desktop-app {
    float: none;
    margin: 5% auto
}
  }

/************************ Animations **************/

.js .content-how-to-order .static-section-cta, .js .content-faq .static-section-cta, .js .content-order-locations .static-section-cta {
      display: inline-block;

      transition-timing-function: cubic-bezier(0,.64,.44,1.02);
      transition-duration: 1s;
      transform: translateY(-100px);
    }

.js .content-how-to-order .static-section-cta.animate, .js .content-faq .static-section-cta.animate, .js .content-order-locations .static-section-cta.animate {
        transition-timing-function: cubic-bezier(0,.64,.44,1.02);
        transition-duration: 1s;
        transform: translateY(0);
      }

/************************ IN THE PRESS **************/

.footer {
  padding: 50px 0 50px;

}

.footer .footer-brand-items {
    display: block;
    margin: 0 auto;
    max-width: 1330px;
    padding-left: 0;
    text-align: center;
  }

.footer .footer-brand-container {
    display: inline-block;
    padding: 2%;
    position: relative;
    width: 24%;
  }

.no-touch .footer .footer-brand-container a {
        opacity: 0.5;
        transition-duration: 0.4s;
        transition-property: opacity;
      }

.no-touch .footer .footer-brand-container a:hover {
        opacity: 1;
      }

.footer .footer-brand {
    max-width: 100%;
  }

@media (max-width: 1080px) {
    .footer .footer-brand-container {
      padding: 1% 0;
      width: 32%;
    }
  }

@media (max-width: 850px) {
    .footer .footer-brand-items {
      max-width: 80%;
    }

    .footer .footer-brand-container {
      padding: 1% 0;
      width: 49%;
    }

  }

@media (max-width: 620px) {

    .footer .footer-section-title {
      margin: 0 auto 35px;
    }
      .footer .footer-brand-items:before {
        width: 146px;
      }

    .footer .footer-brand-container {
      width: 100%;
    }
  }

.footer .static-section-cta {
    opacity: 1;
  }

.js.csstransforms .footer .static-section-cta {
      opacity: 0;
    }

.js.csstransforms .footer .static-section-cta.animate {
        transition-duration: 0.8s;
        opacity: 1;
      }

/************************ Defaults **************/

.modal {
  background: #fff;
  display: none;
  font-family: OneDotCd;
  margin: 0 auto;
  padding: 40px 0;
  text-align: center;
  z-index: 11;
}

.modal .modal-button {
    line-height: 3.2em;
  }

.modal-tout-wrapper {
  margin: 0;
  padding: 0 7%;
  text-transform: uppercase;
}

.modal-tout {
  color: var(--brandGrey);
  display: block;
  letter-spacing: 0.1em;
  font-family: OneDotExt-Bold;
  font-size: 1.2em;
  text-transform: uppercase;
}

.modal-icon {
  color: var(--brandBlue);
  display: block;
  font-size: 4em;
  margin: 0 auto 27px;
  width: 64px;
}

.faq-cta {
  color: #555;
  font-family: "OneDotCd", sans-serif;
  font-size: 1.1em;
  text-transform: none;
}

.modal-subheader {
  color: #555;
  display: block;
  font-family: OneDotExt;
  text-transform: uppercase;
}

/** Steps **/

.steps-container {
  list-style: none;
  margin: 0;
  padding: 45px 75px 15px;
  text-align: left;

}

@media (max-width: 640px) {

.steps-container {
    padding: 25px 0 15px

}
  }

.modal-step {
  display: table;
  margin-bottom: 28px;
  overflow: auto;
  padding: 0 15px;
  width: 100%;
}

.step-number {
  color: #1a5e86;
  display: table-cell;
  font-family: OneDotCd-Bold;
  font-size: 1.5em;
  text-transform: uppercase;
  vertical-align: middle;
  width: 22%;
}

@media (max-width: 640px) {

.step-number {
    width: 30%
}
  }

.step {
  color: #555;
  display: table-cell;
  font-size: 1.1em;
  width: 78%;
}

@media (max-width: 640px) {

.step {
    width: 70%
}
  }

.step img {
    width: 15px;
    line-height: 0;
    vertical-align: middle;
  }

/** Buttons **/

.button-container {
  margin: 0 0 0 -15px;
}

.modal-button {
  font-size: 0.9em;
  height: 43px;
  padding: 0;
  width: 220px;
  margin-left: 15px;
  margin-top: 10px;
}

@media (max-width: 640px) {

.modal-button {
    display: block;
    margin: 15px auto
}
  }

.stroke-button {
  border: 3px solid var(--brandBlue);
  color: var(--brandBlue);
  background: #fff;
  height: 45px;
  position: relative;
  top: 3px;
  background-size: 100%;
  background-image: linear-gradient(#ffffff, #ffffff);
}

@media (max-width: 640px) {

.stroke-button {
    margin: 15px auto 0
}
  }

.no-touch .stroke-button:hover {
    background-size: 100%;
    background-image: linear-gradient(#ffffff, #ececec);
  }

.lt-ie9 .stroke-button {
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FFFFFFFF');
}

.close-modal {
  background: url('images/img-modal-close.png') no-repeat;
  cursor: pointer;
  display: block;
  height: 25px;
  position: absolute;
  right: 30px;
  top: 18px;
  width: 25px;
}

.button-wrapper {
  padding: 55px 0 0;
  position: relative;
}

.button-wrapper:before {
    background: url('images/img-dotted-border-modal.png') no-repeat;
    content: '';
    display: block;
    height: 3px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 30px;
    width: 357px;
  }

/************************ Mask Modal **************/

.mask {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  opacity: 0.8;
  background: #000;
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

.mask-modal {
  left: 0;
  position: absolute;
  right: 0;
  width: 550px;
  overflow: hidden;
}

@media (max-width: 640px) {

.no-csstransforms3d .mask-modal {
      width: 90%
  }
    }

@media (max-width: 320px) {

.mask-modal {
    width: 100%
}
  }

/************************ Flipper **************/

.has-flipper {
  left: 0;
  position: relative;
  top: 0;
  backface-visibility: hidden;
  transform: rotateY(0deg);
}

.flip-modal {
  display: block;
  left:0;
  position: absolute;
  top: 0;
  width: 100%;

  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.flip-container {
  background: #fff;
  height: 100%;
  position: relative;
  width: 100%;

  perspective: 1000;
}

.flipper {
  height: 100%;
  position: relative;
  width: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.turn {
  border-bottom: 2px solid #c2c2c2;;
  border-top: 2px solid #c2c2c2;;
  z-index: 3;
}

.turn .flipper {
     transform: rotateY(180deg) translateZ(-2px);
  }

.videoModal {
  padding: 65px 20px 20px;
  width: 70%;
}

.videoModal iframe {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
  }

.videoModal .ytWrap {
    height: 0%;
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
  }

.offscreen {
    position: absolute;
    left: -999em;
}

//
.modal-container {
  background: #fff;
  display: block;
  max-height: none;
  overflow: hidden;
  /* transition: max-height 0.3s ease;*/
}

.modal-container ~ .modal-container ~ .modal-container {
  max-height: 0;
}

.long-instruction.scrollable {
  max-height: 300px;
  overflow-y: scroll;
}

.modal {
  max-height: 770px;
  overflow-y: scroll;
}

.modal-container {
  opacity: 1;
  transition: opacity 0.3s linear, max-height 0 linear 0.4s;
}

/* hide the first tout wrapper and button wrapper */

.multi-instructions .modal-tout-wrapper {
    display: none;
  }

.multi-instructions .button-wrapper {
    display: none;
    padding-bottom: 3px;
  }

/* show the second tout wrapper and button wrapper */

.multi-instructions .modal-container ~ .modal-container .button-wrapper {
      display: block;
    }

.multi-instructions .modal-container ~ .modal-container .modal-tout-wrapper {
      display: block;
    }

.show-second-sbs .modal-container {
    opacity: 0;
    max-height: 0;
    pointer-events: none;
    transition: opacity 0.4s linear, max-height 0 linear 0.4s;
  }

.show-second-sbs .modal-container ~ .modal-container  ~ .modal-container {
    opacity: 1;
    max-height: 1500px;
    pointer-events: auto;
    transition: opacity 0.4s linear, max-height 0 linear 0.4s;
  }

.show-second-sbs .modal-container ~ .modal-container  ~ .modal-container .button-wrapper {
      display: block;
    }