@charset "UTF-8";
/*! Copyright 2013-2015 Nest Labs, All rights reserved */
/*! Copyright 2013-2015 Nest Labs, All rights reserved */
/*! Copyright 2013 Nest Labs, All rights reserved */
/*** Colors ***/
/** @variable: colors **/
/**
  Brand

  @grid
    nl-blue nl-orange nl-green nl-gray nl-red
**/
/**
  Grays

  @grid
    pearl  porcelain  mercury  mystic   iron
    raven  oslo       boulder  emperor  -
**/
/**
  Generic

  @grid
    white  off-white  polar  black
**/
/**
  Color Maps

  @grid
    background-light  background-med     background-dark  -f
    nav-link          nav-link-hover     -                -
    body-copy         body-copy-dark     link             link-hover
    border-color      border-color-dark  -                -
    icon-light        icon-med           icon-dark        -
    quote-background  -                  -                -
    product-footer-background  product-footer-border  -   -
**/
/*** Typography ***/
/** @variable: typography **/
/** Base: Unit Variables **/
/** Variables: Tech Specs **/
/*! Copyright 2016 Nest Labs, All rights reserved */
/*** CSS3 ***/
/**
  Box Model
    Set block-level element to contain margins and padding in defined width

  @usage: @include box;
**/
/**
  Transitions
    Set CSS3 transitions on elements

  @usage:
    @include transition(color 0.25s ease-in-out);
    @include transition( (background 0.25s ease-in-out),(color 0.25s ease-in-out) );

  !warning:
    `transition: transform ...` will not be prefixed properly. Need to manually write it.
**/
/**
  Transition Delays
    Set custom delay timing on element transitions

  @usage:
    @include transition-delay(0.25s);
**/
/**
  Transform
    Set (prefixed) CSS3 transform.
**/
/**
  Box Shadow
    Set (prefixed) CSS3 box shadow
**/
/*** App Store Buttons ***/
/**
  App Store Button
    Mixin to make a button for the Apple App Store.

  @usage:
    @include app-store-button();
    @include app-store-button(30px);
**/
/**
  Play Store Button
    Mixin to make a button for the Google Play Store.

  @usage:
    @include play-store-button();
    @include play-store-button(30px);
**/
/*** Block Grids ***/
/*== Equal width blocks ==*/
/**
  Block Grid Base
    For the parent element that holds grid items.
**/
/**
  Block Grid Columns
    Sets the number of columns for the grid.
**/
/*** Block Quotes ***/
/**
  Quote Mark Size
    Use to adjust the sizes of openning and closing quote marks
    - i.e. calculate a proper text-indent value (px) that keeps
    consistent spacing between the marks and the quote text.

  @param $quote-mark-size
    size of the openning and closing quote marks
  @param $vertical-adjustment
    the font-size of the quote mark will not vertically align properly
    to the design, we have to micro this value
**/
/*** Buttons ***/
/**
  Button
    The nl-button is the stylized button that we use accross the site.

  @markup: <a href="/" class="nl-button">Continue</a>
  @markup: <button class="nl-button">Continue</button>
**/
/**
  Chevron Button
    The nl-button works in concert with the `.chevron` class to give you a chevron animation on hover.

  @note: '>' = '`&gt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup: <a href="/" class="nl-button chevron">Continue&nbsp;<b>&gt;</b></a>
  @markup: <button class="nl-button chevron">Continue&nbsp;<b>&gt;</b></button>
  @markup: <a href="/" class="nl-button wide chevron">Continue&nbsp;<b>&gt;</b></a>
  @markup: <button class="nl-button wide chevron">Continue&nbsp;<b>&gt;</b></button>


  <p> When you want to have a left chevron, use the `left` classname with `nl-button` and `chevron`.

  @note: '<' = '`&lt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup: <a href="/" class="nl-button chevron left"><b>&lt;</b>&nbsp;Go Back</a>
  @markup: <button class="nl-button chevron left"><b>&lt;</b>&nbsp;Go Back</button>
  @markup: <a href="/" class="nl-button wide chevron left"><b>&lt;</b>&nbsp;Go Back</a>
  @markup: <button class="nl-button wide chevron left"><b>&lt;</b>&nbsp;Go Back</button>
**/
/**
  Watch Video Button
    The nl-button works in concert with the `.watch-video-button` class to give you a watch video icon in the button.

  @markup: <a href="/" class="nl-button watch-video-button">Watch Video</a>
  @markup: <button class="nl-button watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button blue watch-video-button">Watch Video</a>
  @markup: <button class="nl-button blue watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button wide watch-video-button">Watch Video</a>
  @markup: <button class="nl-button wide watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button wide blue watch-video-button">Watch Video</a>
  @markup: <button class="nl-button wide blue watch-video-button">Watch Video</button>

**/
/**
  Color Button
    The nl-button supports several colors.

  @markup: <a href="/" class="nl-button orange">Continue</a>
  @markup: <button class="nl-button grey">Continue</button>
  @markup: <a href="/" class="nl-button blue">Continue</a>
  @markup-dark: <button class="nl-button white">Continue</button>
  @markup: <a href="/" class="nl-button dark-gray">Continue</a>
  @markup: <button class="nl-button darker-gray">Continue</button>
**/
/*** Chevrons ***/
/**
  Chevron
    Chevrons are used on nearly all of Nest's links and buttons.
    The chevron class sets the font on the <b>&gt;</b> and adds an animation for hover/focus.

  @note: '>' = '`&gt;`' and '<' = '`&lt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup <a href="#" class="chevron">Continue&nbsp;<b>&gt;</b></a>

  @markup <a href="#" class="chevron left"><b>&lt;</b>&nbsp;Go Back</a>
**/
/*** Circular Icons ***/
/**
  Inactive Pagination Color
    Sets the color for inactive pagination.
**/
/**
  Circular Icon Theme

  <p> Use on the container such as `<li>` and container receives active class.

  !warning: `$size` must have a unit
**/
/**
  Circular Icon Size
    Sets size of circular pagination icon.
**/
/**
  Circular Icon Group Base
**/
/**
  Gallery Arrow Base
**/
/*** Gradients ***/
/**
  Gradients, Linear
    @include linear-gradient(top, #fefefe, #dedede);
**/
/*** Icons ***/
/*== Set Size, Set Layout, Set Base Styles ==*/
/**
  Icon Size
    Set the icon size. Use on the element that you set icon class.
    This allows abstraction of implementation detail from the feature,
      i.e. If we use a new technique to set icon size, we do not have
      to search and replace for the whole project

  <p> If passing only `$icon-width`, the `$icon-height` will equals to the width.
      If passing both values, you can specify both width and height

  @usage: 
    @include set-icon-size($icon-size, 65px);  // 40 x 65 (px)
    @include set-icon-size(65px);              // 65 x 65 (px)
    @include set-icon-size(50px, 60px);        // 50 x 60 (px)

  @param $icon-width
    @default icon size from _variables.scss
  @param $icon-height
    @default set equal width & height
**/
/**
  Icon Layout
    Set layout (position) of icon against text content.
    Use on the element that you set icon class.

  @param $layout { "horizontal", "vertical" }
    @default "vertical"
    $layout "vertical"   - icon on top of the text and align left
    $layout "horizontal" - icon by the text on the left, hanging text

  @param $horizontal-spacing
    Set space between icon and next sibling (e.g. label span).
    Only for horizontal layout.
**/
/**
  Icon Base
    Use to set base styling for .icon.
    Use if you want to set this on an element without using .icon class.

  @param $layout { "horizontal", "vertical" }
    @default "vertical"
**/
/*** Images ***/
/*== Background, inline images, retina, etc. ==*/
/**
  Background Image
    Set a bg-image, retina version and size.

  @usage:
    @include background-image('index/slide_thermostat/us_mobile.jpg', 'index/slide_thermostat/us_mobile_2x.jpg', cover);
**/
/**
  Transparent RGBA Background
    Choose a color and get RGBA IE-Friendly output.
    http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

  @usage: @include background-transparent(#000, 0.5);
**/
/**
  Textured Background
    Set a bg-color and overlay a texture

  @usage: @include textured-background($nl-gray);
**/
/*
  Rules passed into this will only be valid when the document is
  set to the specified language(s)

  example usage:

  @include language(en)

  will essentialy do:

  @include locale(en)
  @include locale(en-US)
  @include locale(en-GB)
  @include locale(en-CA)
  @include locale(en-IE)

  @mixin
  @param language(s)
  @param content
*/
/*** Layouts ***/
/**
  Section Container
**/
/**
  Section Layout
**/
/*** Localization ***/
/*== Country-specific mixins ==*/
/**
  Locale
    Scope CSS to specific locales

  @usage:
    @include locale('fr-FR') {}
    @include locale('fr-FR','fr-BE') {}
**/
/** @ignore **/
/**
  Loc v2

  Rules passed into this will only be valid when the document is
  set to the specified locale

  ** TODO: edit me & add blocks of comments for each new mixin added here
  // @include loc("en-CA") {
  //   background: red;
  // }
  // @include loc("en-C2A") {
  //   background: red;
  // }
  @mixin
  @param $locale IETF language tag
  @param content
*/
/*** Modular ***/
/*== Modules, Sizing, etc ==*/
/**
  Size
    Set height & width of an element. Border-radius is optional.

  @usage:
    @include size(120px, 100px);
    @include size(120px, 100px, 200px);
**/
/** 
  Border Radius
    Set border-radius on all corners

  @usage: @include border-radius(10px);
**/
/**
  Border Radius, Each
    Set border-radius on individual corners

  @usage:
    @include border-radius-each(10px, 12px);
    @include border-radius-each(10px, 12px, 14px, 16px);
**/
/** 
  Clearfix
    Clear custom floats

  @usage: @include clearfix;
**/
/*! Copyright 2013 Nest Labs, All rights reserved */
/*** Columns ***/
/**
  Column
**/
/**
  Columns
**/
/**
  Offset
**/
/**
  Two Columns
**/
/**
  Column Set
**/
/** @ignore **/
/*** Pill Controls ***/
/**
  Pills Size
**/
/*** Positioning ***/
/*== Centering, etc ==*/
/** 
  Center
    Absolutely position and transform to the center

  @usage: @include center;
**/
/**
  Vertical Center
    Absolutely position and transform to the center, vertically

  @usage: @include center-vertical;
**/
/** 
  Horizontal Center
    Absolutely position and transform/margin to the center, horizontally

  @usage:
    @include center-horizontal;
    @include center-horizontal(static);
**/
/**
  Overlay
    Absolutely position and fill the positioned parent width & height

  @usage:
    @include overlay;
    @include overlay(1);
**/
/*** Responsive Helpers ***/
/*== Media queries ==*/
/** 
  Media Queries: MIN
    Automatically sets configuration for non-responsive pages.

  @usage: @include mq(768px) {}
**/
/**
  Media Queries: MAX
    Automatically sets configuration for non-responsive pages.

  @usage: @include mq_max(767px) {}
**/
/**
  Retina Content
    Scope CSS to retina devices only

  @usage: @include retina() {}
**/
/**
  Remove Web Tap Highlight
  
  @usage: @include no-tap-higlight();
**/
/*** Responsive Media ***/
/*== Video, div of Scalable Background Image ==*/
/** 
  Responsive Media Wrapper
    Source: http://webdesignerwall.com/tutorials/css-elastic-videos
**/
/**
  Responsive Media Base
    Just leverage/delegate "overlay" mixin
**/
/**
  Responsive Media Size
    Use on media wrapper, not the media itself.

  <p> Suggest adding `background-size: cover`
      if using this for scalable `<div>` using background image
**/
/*** Sections ***/
/**
  Element Color
    Set color of elements on a section.
    Default to null, so it will not be set
    unless a value is passed in.
**/
/**
  Border
**/
/*** SVG ***/
/*== SVG Generation and Manipulation ==*/
/**
  Sprite Background

  @usage: @include svg-background.....
**/
/*** Tabs ***/
/*== Set base styles on tab container ==*/
/**
  Tab Container
**/
/**
  Font Sizing
    Set a px value and it outputs px and calcs Rem

  @usage: @include font-size(14);
**/
/**
  Line Heights
    Set a px value and it outputs px and calcs Rem

  @usage: @include line-height(14);
**/
/**
  Image Replacement

  @usage: @include ir;
**/
/** @ignore **/
/*** Watch Video Links ***/
/**
  Watch Video Size
    Use to set play (watch-video) icon to match the font-size.

  <p> Do not wrap left/right in quotes as a string.
      Error when we pass left/right as a string to background-position

  @param $font-size
  @param $icon-size
  @param $spacing

  <p> Pass the sizes (px value "with the unit") that we use for
      the watch-video copy, icon, and spacing between the copy and icon
**/
/**
  Watch Video Color
    Set play (watch-video) icon to match the font-color.

  <p> Ensure to add the SVG icon file if you use a new,
      not-yet-defined mixins like `set-watch-video-color--nl-gray`
      else during the build process, it will add up to the CSS filesize
**/
/**
  References:
  http://davidwalsh.name/html5-placeholder-css
  https://css-tricks.com/snippets/css/style-placeholder-text/
*/
/**
  Sets the background image to be the image at the specified URL,
  accepts an optional second parameter for a Retina version

  @mixin
  @param $image URL of normal image
  @param $image-2x (optional) url of Retina image
*/
/*
  START: DEPRECATED MIXINS USED IN WIDGETS
*/
/*
  END: DEPRECATED MIXINS USED IN WIDGETS
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

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

html {
  height: 100%;
  font-size: 62.5%; }

body {
  position: relative;
  height: 100%;
  margin: 0 auto;
  background-color: #e9eaee;
  cursor: auto;
  font-size: 15px;
  font-size: 1.5rem;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; }
  body > img[height="1"] {
    display: none; }

@media (min-width: 768px) {
  body {
    font-size: 18px;
    font-size: 1.8rem; } }

.content {
  position: relative;
  background-color: #ffffff;
  max-width: 1280px; }
  .content.main-wrapper {
    width: 100%;
    margin: 0 auto; }

#main {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto; }
  @media (min-width: 960px) {
    #main {
      max-width: 1280px; } }
  @media (min-width: 1300px) {
    #main {
      border-right: 10px solid white;
      border-left: 10px solid white; } }

section {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #8A9299; }

abbr {
  text-decoration: inherit; }

/*** Grid Container ***/
/**
  Container
    This class uses the `section-container` and `clearfix` mixins.
**/
.container {
  max-width: 1040px;
  padding: 0 30px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.container:after, .container:before,
.row:after,
.row:before {
  content: "";
  display: table;
  clear: both; }

/**!
 * @license
 * MyFonts Webfont Build ID 2998736, 2015-03-26T20:01:43-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: FullerSansDT-ExtraLight by DTP Types
 * URL: http://www.myfonts.com/fonts/dtptypes/fuller-sans-dt/extra-light/
 * Copyright: Copyright (c) 2006 DTP Types Limited. All rights reserved. FullerSansDT is a trademark of DTP Types Limited.
 * Licensed pageviews: 200,000
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2998736
 * 
 * (c) 2015 MyFonts Inc
*/
@font-face {
  font-family: "Fuller Sans";
  src: url("https://video.nest.com/fonts/fuller_sans_dt/regular/2DC1D4_0_0.woff") format("woff"), url("https://video.nest.com/fonts/fuller_sans_dt/regular/2DC1D4_0_0.eot") format("embedded-opentype"); }

@font-face {
  font-family: "Fuller Sans Bold";
  src: url("https://video.nest.com/fonts/fuller_sans_dt/bold/2DC1D5_0_0.woff") format("woff"), url("https://video.nest.com/fonts/fuller_sans_dt/bold/2DC1D5_0_0.eot") format("embedded-opentype"); }

@font-face {
  font-family: "Fuller Sans Italic";
  src: url("https://video.nest.com/fonts/fuller_sans_dt/italic/2DC1D5_1_0.woff") format("woff"), url("https://video.nest.com/fonts/fuller_sans_dt/italic/2DC1D5_1_0.eot") format("embedded-opentype"); }

@font-face {
  font-family: "Fuller Sans Light";
  src: url("https://video.nest.com/fonts/fuller_sans_dt/light/2DC1D3_0_0.woff") format("woff"), url("https://video.nest.com/fonts/fuller_sans_dt/light/2DC1D3_0_0.eot") format("embedded-opentype"); }

@font-face {
  font-family: "Fuller Sans ExtraLight";
  src: url("https://video.nest.com/fonts/fuller_sans_dt/extra_light/2DC1D0_0_0.woff") format("woff"), url("https://video.nest.com/fonts/fuller_sans_dt/extra_light/2DC1D0_0_0.eot") format("embedded-opentype"); }

/*** Typography ***/
/*! Copyright 2013-2015 Nest Labs, All rights reserved */
/*! Copyright 2013 Nest Labs, All rights reserved */
/*** Colors ***/
/** @variable: colors **/
/**
  Brand

  @grid
    nl-blue nl-orange nl-green nl-gray nl-red
**/
/**
  Grays

  @grid
    pearl  porcelain  mercury  mystic   iron
    raven  oslo       boulder  emperor  -
**/
/**
  Generic

  @grid
    white  off-white  polar  black
**/
/**
  Color Maps

  @grid
    background-light  background-med     background-dark  -f
    nav-link          nav-link-hover     -                -
    body-copy         body-copy-dark     link             link-hover
    border-color      border-color-dark  -                -
    icon-light        icon-med           icon-dark        -
    quote-background  -                  -                -
    product-footer-background  product-footer-border  -   -
**/
/*** Typography ***/
/** @variable: typography **/
/** Base: Unit Variables **/
/** Variables: Tech Specs **/
/*! Copyright 2016 Nest Labs, All rights reserved */
/*** CSS3 ***/
/**
  Box Model
    Set block-level element to contain margins and padding in defined width

  @usage: @include box;
**/
/**
  Transitions
    Set CSS3 transitions on elements

  @usage:
    @include transition(color 0.25s ease-in-out);
    @include transition( (background 0.25s ease-in-out),(color 0.25s ease-in-out) );

  !warning:
    `transition: transform ...` will not be prefixed properly. Need to manually write it.
**/
/**
  Transition Delays
    Set custom delay timing on element transitions

  @usage:
    @include transition-delay(0.25s);
**/
/**
  Transform
    Set (prefixed) CSS3 transform.
**/
/**
  Box Shadow
    Set (prefixed) CSS3 box shadow
**/
/*** App Store Buttons ***/
/**
  App Store Button
    Mixin to make a button for the Apple App Store.

  @usage:
    @include app-store-button();
    @include app-store-button(30px);
**/
/**
  Play Store Button
    Mixin to make a button for the Google Play Store.

  @usage:
    @include play-store-button();
    @include play-store-button(30px);
**/
/*** Block Grids ***/
/*== Equal width blocks ==*/
/**
  Block Grid Base
    For the parent element that holds grid items.
**/
/**
  Block Grid Columns
    Sets the number of columns for the grid.
**/
/*** Block Quotes ***/
/**
  Quote Mark Size
    Use to adjust the sizes of openning and closing quote marks
    - i.e. calculate a proper text-indent value (px) that keeps
    consistent spacing between the marks and the quote text.

  @param $quote-mark-size
    size of the openning and closing quote marks
  @param $vertical-adjustment
    the font-size of the quote mark will not vertically align properly
    to the design, we have to micro this value
**/
/*** Buttons ***/
/**
  Button
    The nl-button is the stylized button that we use accross the site.

  @markup: <a href="/" class="nl-button">Continue</a>
  @markup: <button class="nl-button">Continue</button>
**/
/**
  Chevron Button
    The nl-button works in concert with the `.chevron` class to give you a chevron animation on hover.

  @note: '>' = '`&gt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup: <a href="/" class="nl-button chevron">Continue&nbsp;<b>&gt;</b></a>
  @markup: <button class="nl-button chevron">Continue&nbsp;<b>&gt;</b></button>
  @markup: <a href="/" class="nl-button wide chevron">Continue&nbsp;<b>&gt;</b></a>
  @markup: <button class="nl-button wide chevron">Continue&nbsp;<b>&gt;</b></button>


  <p> When you want to have a left chevron, use the `left` classname with `nl-button` and `chevron`.

  @note: '<' = '`&lt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup: <a href="/" class="nl-button chevron left"><b>&lt;</b>&nbsp;Go Back</a>
  @markup: <button class="nl-button chevron left"><b>&lt;</b>&nbsp;Go Back</button>
  @markup: <a href="/" class="nl-button wide chevron left"><b>&lt;</b>&nbsp;Go Back</a>
  @markup: <button class="nl-button wide chevron left"><b>&lt;</b>&nbsp;Go Back</button>
**/
/**
  Watch Video Button
    The nl-button works in concert with the `.watch-video-button` class to give you a watch video icon in the button.

  @markup: <a href="/" class="nl-button watch-video-button">Watch Video</a>
  @markup: <button class="nl-button watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button blue watch-video-button">Watch Video</a>
  @markup: <button class="nl-button blue watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button wide watch-video-button">Watch Video</a>
  @markup: <button class="nl-button wide watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button wide blue watch-video-button">Watch Video</a>
  @markup: <button class="nl-button wide blue watch-video-button">Watch Video</button>

**/
/**
  Color Button
    The nl-button supports several colors.

  @markup: <a href="/" class="nl-button orange">Continue</a>
  @markup: <button class="nl-button grey">Continue</button>
  @markup: <a href="/" class="nl-button blue">Continue</a>
  @markup-dark: <button class="nl-button white">Continue</button>
  @markup: <a href="/" class="nl-button dark-gray">Continue</a>
  @markup: <button class="nl-button darker-gray">Continue</button>
**/
/*** Chevrons ***/
/**
  Chevron
    Chevrons are used on nearly all of Nest's links and buttons.
    The chevron class sets the font on the <b>&gt;</b> and adds an animation for hover/focus.

  @note: '>' = '`&gt;`' and '<' = '`&lt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup <a href="#" class="chevron">Continue&nbsp;<b>&gt;</b></a>

  @markup <a href="#" class="chevron left"><b>&lt;</b>&nbsp;Go Back</a>
**/
/*** Circular Icons ***/
/**
  Inactive Pagination Color
    Sets the color for inactive pagination.
**/
/**
  Circular Icon Theme

  <p> Use on the container such as `<li>` and container receives active class.

  !warning: `$size` must have a unit
**/
/**
  Circular Icon Size
    Sets size of circular pagination icon.
**/
/**
  Circular Icon Group Base
**/
/**
  Gallery Arrow Base
**/
/*** Gradients ***/
/**
  Gradients, Linear
    @include linear-gradient(top, #fefefe, #dedede);
**/
/*** Icons ***/
/*== Set Size, Set Layout, Set Base Styles ==*/
/**
  Icon Size
    Set the icon size. Use on the element that you set icon class.
    This allows abstraction of implementation detail from the feature,
      i.e. If we use a new technique to set icon size, we do not have
      to search and replace for the whole project

  <p> If passing only `$icon-width`, the `$icon-height` will equals to the width.
      If passing both values, you can specify both width and height

  @usage: 
    @include set-icon-size($icon-size, 65px);  // 40 x 65 (px)
    @include set-icon-size(65px);              // 65 x 65 (px)
    @include set-icon-size(50px, 60px);        // 50 x 60 (px)

  @param $icon-width
    @default icon size from _variables.scss
  @param $icon-height
    @default set equal width & height
**/
/**
  Icon Layout
    Set layout (position) of icon against text content.
    Use on the element that you set icon class.

  @param $layout { "horizontal", "vertical" }
    @default "vertical"
    $layout "vertical"   - icon on top of the text and align left
    $layout "horizontal" - icon by the text on the left, hanging text

  @param $horizontal-spacing
    Set space between icon and next sibling (e.g. label span).
    Only for horizontal layout.
**/
/**
  Icon Base
    Use to set base styling for .icon.
    Use if you want to set this on an element without using .icon class.

  @param $layout { "horizontal", "vertical" }
    @default "vertical"
**/
/*** Images ***/
/*== Background, inline images, retina, etc. ==*/
/**
  Background Image
    Set a bg-image, retina version and size.

  @usage:
    @include background-image('index/slide_thermostat/us_mobile.jpg', 'index/slide_thermostat/us_mobile_2x.jpg', cover);
**/
/**
  Transparent RGBA Background
    Choose a color and get RGBA IE-Friendly output.
    http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

  @usage: @include background-transparent(#000, 0.5);
**/
/**
  Textured Background
    Set a bg-color and overlay a texture

  @usage: @include textured-background($nl-gray);
**/
/*
  Rules passed into this will only be valid when the document is
  set to the specified language(s)

  example usage:

  @include language(en)

  will essentialy do:

  @include locale(en)
  @include locale(en-US)
  @include locale(en-GB)
  @include locale(en-CA)
  @include locale(en-IE)

  @mixin
  @param language(s)
  @param content
*/
/*** Layouts ***/
/**
  Section Container
**/
/**
  Section Layout
**/
/*** Localization ***/
/*== Country-specific mixins ==*/
/**
  Locale
    Scope CSS to specific locales

  @usage:
    @include locale('fr-FR') {}
    @include locale('fr-FR','fr-BE') {}
**/
/** @ignore **/
/**
  Loc v2

  Rules passed into this will only be valid when the document is
  set to the specified locale

  ** TODO: edit me & add blocks of comments for each new mixin added here
  // @include loc("en-CA") {
  //   background: red;
  // }
  // @include loc("en-C2A") {
  //   background: red;
  // }
  @mixin
  @param $locale IETF language tag
  @param content
*/
/*** Modular ***/
/*== Modules, Sizing, etc ==*/
/**
  Size
    Set height & width of an element. Border-radius is optional.

  @usage:
    @include size(120px, 100px);
    @include size(120px, 100px, 200px);
**/
/** 
  Border Radius
    Set border-radius on all corners

  @usage: @include border-radius(10px);
**/
/**
  Border Radius, Each
    Set border-radius on individual corners

  @usage:
    @include border-radius-each(10px, 12px);
    @include border-radius-each(10px, 12px, 14px, 16px);
**/
/** 
  Clearfix
    Clear custom floats

  @usage: @include clearfix;
**/
/*! Copyright 2013 Nest Labs, All rights reserved */
/*** Columns ***/
/**
  Column
**/
/**
  Columns
**/
/**
  Offset
**/
/**
  Two Columns
**/
/**
  Column Set
**/
/** @ignore **/
/*** Pill Controls ***/
/**
  Pills Size
**/
/*** Positioning ***/
/*== Centering, etc ==*/
/** 
  Center
    Absolutely position and transform to the center

  @usage: @include center;
**/
/**
  Vertical Center
    Absolutely position and transform to the center, vertically

  @usage: @include center-vertical;
**/
/** 
  Horizontal Center
    Absolutely position and transform/margin to the center, horizontally

  @usage:
    @include center-horizontal;
    @include center-horizontal(static);
**/
/**
  Overlay
    Absolutely position and fill the positioned parent width & height

  @usage:
    @include overlay;
    @include overlay(1);
**/
/*** Responsive Helpers ***/
/*== Media queries ==*/
/** 
  Media Queries: MIN
    Automatically sets configuration for non-responsive pages.

  @usage: @include mq(768px) {}
**/
/**
  Media Queries: MAX
    Automatically sets configuration for non-responsive pages.

  @usage: @include mq_max(767px) {}
**/
/**
  Retina Content
    Scope CSS to retina devices only

  @usage: @include retina() {}
**/
/**
  Remove Web Tap Highlight
  
  @usage: @include no-tap-higlight();
**/
/*** Responsive Media ***/
/*== Video, div of Scalable Background Image ==*/
/** 
  Responsive Media Wrapper
    Source: http://webdesignerwall.com/tutorials/css-elastic-videos
**/
/**
  Responsive Media Base
    Just leverage/delegate "overlay" mixin
**/
/**
  Responsive Media Size
    Use on media wrapper, not the media itself.

  <p> Suggest adding `background-size: cover`
      if using this for scalable `<div>` using background image
**/
/*** Sections ***/
/**
  Element Color
    Set color of elements on a section.
    Default to null, so it will not be set
    unless a value is passed in.
**/
/**
  Border
**/
/*** SVG ***/
/*== SVG Generation and Manipulation ==*/
/**
  Sprite Background

  @usage: @include svg-background.....
**/
/*** Tabs ***/
/*== Set base styles on tab container ==*/
/**
  Tab Container
**/
/**
  Font Sizing
    Set a px value and it outputs px and calcs Rem

  @usage: @include font-size(14);
**/
/**
  Line Heights
    Set a px value and it outputs px and calcs Rem

  @usage: @include line-height(14);
**/
/**
  Image Replacement

  @usage: @include ir;
**/
/** @ignore **/
/*** Watch Video Links ***/
/**
  Watch Video Size
    Use to set play (watch-video) icon to match the font-size.

  <p> Do not wrap left/right in quotes as a string.
      Error when we pass left/right as a string to background-position

  @param $font-size
  @param $icon-size
  @param $spacing

  <p> Pass the sizes (px value "with the unit") that we use for
      the watch-video copy, icon, and spacing between the copy and icon
**/
/**
  Watch Video Color
    Set play (watch-video) icon to match the font-color.

  <p> Ensure to add the SVG icon file if you use a new,
      not-yet-defined mixins like `set-watch-video-color--nl-gray`
      else during the build process, it will add up to the CSS filesize
**/
/**
  References:
  http://davidwalsh.name/html5-placeholder-css
  https://css-tricks.com/snippets/css/style-placeholder-text/
*/
/**
  Sets the background image to be the image at the specified URL,
  accepts an optional second parameter for a Retina version

  @mixin
  @param $image URL of normal image
  @param $image-2x (optional) url of Retina image
*/
/*
  START: DEPRECATED MIXINS USED IN WIDGETS
*/
/*
  END: DEPRECATED MIXINS USED IN WIDGETS
*/
body {
  text-rendering: optimizelegibility;
  font-variant: normal; }

body,
p,
li,
table {
  font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 2.4rem;
  line-height: 1.3; }

p {
  margin-bottom: 0.8rem; }

h1,
h2,
h3,
h4,
h5,
h6 {
  text-rendering: optimizeLegibility; }

time {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  letter-spacing: -1px;
  font-size: 19px;
  font-size: 1.9rem; }

strong {
  font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif; }

small {
  font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.6rem;
  margin-bottom: 1rem; }

/**
  Large Heading
    Wrapper class for `large-heading` mixins.

  @markup:
    <h1 class="large-heading">Large Heading</h1>
    <h1 class="large-heading-gray">Large Heading</h1>
    <h1 class="large-heading-blue">Large Heading</h1>
  @markup-dark:
    <h1 class="large-heading-white">Large Heading</h1>
**/
.large-heading {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 56px;
  font-size: 5.6rem;
  line-height: 6rem; }

.large-heading-gray {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 56px;
  font-size: 5.6rem;
  line-height: 6rem;
  color: #3d4247; }

.large-heading-blue {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 56px;
  font-size: 5.6rem;
  line-height: 6rem;
  color: #00AFD8; }

.large-heading-white {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 56px;
  font-size: 5.6rem;
  line-height: 6rem;
  color: #ffffff; }

/**
  Medium Heading
    Wrapper class for `medium-heading` mixins.

  @markup:
    <h1 class="medium-heading">Medium Heading</h1>
    <h1 class="medium-heading-gray">Medium Heading</h1>
    <h1 class="medium-heading-blue">Medium Heading</h1>
  @markup-dark:
    <h1 class="medium-heading-white">Medium Heading</h1>
**/
.medium-heading {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 44px;
  font-size: 4.4rem;
  line-height: 5.2rem; }

.medium-heading-gray {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 44px;
  font-size: 4.4rem;
  line-height: 5.2rem;
  color: #3d4247; }

.medium-heading-blue {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 44px;
  font-size: 4.4rem;
  line-height: 5.2rem;
  color: #00AFD8; }

.medium-heading-white {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 44px;
  font-size: 4.4rem;
  line-height: 5.2rem;
  color: #ffffff; }

/**
  Small Heading
    Wrapper class for `small-heading` mixins.

  @markup:
    <h2 class="small-heading">Small Heading</h2>
    <h2 class="small-heading-gray">Small Heading</h2>
    <h2 class="small-heading-blue">Small Heading</h2>
  @markup-dark:
    <h2 class="small-heading-white">Small Heading</h2>
**/
.small-heading {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 4rem; }

.small-heading-gray {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 4rem;
  color: #3d4247; }

.small-heading-blue, #overlay h2 {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 4rem;
  color: #00AFD8; }

.small-heading-white {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 4rem;
  color: #ffffff; }

/**
  Large Sub Heading
    Wrapper class for `large-sub-heading` mixin.

  @markup:
    <h3 class="large-sub-heading">Large Sub Heading</h3>
    <h3 class="large-sub-heading-gray">Large Sub Heading</h3>
    <h3 class="large-sub-heading-blue">Large Sub Heading</h3>
  @markup-dark:
    <h3 class="large-sub-heading-white">Large Sub Heading</h3>
**/
.large-sub-heading {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 28px;
  font-size: 2.8rem;
  line-height: 3.2rem; }

.large-sub-heading-gray {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 28px;
  font-size: 2.8rem;
  line-height: 3.2rem;
  color: #3d4247; }

.large-sub-heading-blue {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 28px;
  font-size: 2.8rem;
  line-height: 3.2rem;
  color: #00AFD8; }

.large-sub-heading-white {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 28px;
  font-size: 2.8rem;
  line-height: 3.2rem;
  color: #ffffff; }

/**
  Medium Sub Heading
    Wrapper class for `medium-sub-heading` mixin.

  @markup:
    <h3 class="medium-sub-heading">Medium Sub Heading</h3>
    <h3 class="medium-sub-heading-gray">Medium Sub Heading</h3>
    <h3 class="medium-sub-heading-blue">Medium Sub Heading</h3>
  @markup-dark:
    <h3 class="medium-sub-heading-white">Medium Sub Heading</h3>
**/
.medium-sub-heading {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 2.8rem; }

.medium-sub-heading-gray {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 2.8rem;
  color: #3d4247; }

.medium-sub-heading-blue {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 2.8rem;
  color: #00AFD8; }

.medium-sub-heading-white {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 2.8rem;
  color: #ffffff; }

/**
  Small Sub Heading
    Wrapper class for `small-sub-heading` mixin.

  @markup:
    <h3 class="small-sub-heading">Small Sub Heading</h3>
    <h3 class="small-sub-heading-gray">Small Sub Heading</h3>
    <h3 class="small-sub-heading-blue">Small Sub Heading</h3>
  @markup-dark:
    <h3 class="small-sub-heading-white">Small Sub Heading</h3>
**/
.small-sub-heading {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 20px;
  font-size: 2rem;
  line-height: 2.4rem; }

.small-sub-heading-gray {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 20px;
  font-size: 2rem;
  line-height: 2.4rem;
  color: #3d4247; }

.small-sub-heading-blue {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 20px;
  font-size: 2rem;
  line-height: 2.4rem;
  color: #00AFD8; }

.small-sub-heading-white {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 20px;
  font-size: 2rem;
  line-height: 2.4rem;
  color: #ffffff; }

/**
  Body Copy
    Wrapper class for `body-copy` mixin.

  @markup: <p class="body-copy">This is an example of body copy.</p>
**/
.body-copy {
  font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 2.4rem; }

/**
  Small Body Copy
    Wrapper class for `small-body-copy` mixin.

  @markup: <p class="small-body-copy">This is an example of small body copy.</p>
**/
.small-body-copy {
  font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.8rem; }

/**
  Tony Body Copy
    Wrapper class for `tiny-body-copy` mixin.

  @markup: <p class="tiny-body-copy">This is an example of tiny-body-copy/footnote/copyright copy.</p>
**/
.tiny-body-copy,
.footnote {
  font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.6rem; }

/**
  Label
    Reusable style for labels.

  @markup: <span class="label">A label</span>
**/
.label {
  color: #3d4247;
  font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif; }

/*** Icons ***/
/** @variable: icons **/
/**
  Icons

  @grid
    activity-sensor-blue
    airwave-white-small
    airwave
    auto-away-gray
    auto-away-dark-gray
    auto-away-white-small
    auto-away
    auto-schedule-white-small
    auto-schedule
    automatic-updates
    award-blue
    bell-blue
    bell-mute-white-small
    bell-mute
    bounding-box-blue-small
    bounding-box-white-small
    box-blue
    briefcase-blue
    california-fire-marshal
    camera-cutout-circle-blue
    canadian-standards
    car-front
    chart-decrease-white
    chirp-mute-white-small
    circle-plus-button
    circle-plus-button-blue
    clapper-board-blue-small
    clapper-board-blue
    clapper-board-white-small
    close-7e7e7e
    close-white
    cloud-door-blue
    cloud-door-7B858E
    co-badge
    compatibility-check-blue
    cool-to-dry-white-small
    cool-to-dry
    crosshair-white-small
    device-type-battery-blue
    device-type-battery-white
    device-type-wired-blue
    dragger-arrows-white
    dual-fuel
    early-on-white-small
    early-on
    energy-history
    family-blue
    family-white-small
    fan-white-small
    filter-reminders-white-small
    filter-reminders
    fire-cloud-7B858E
    fire-cloud-blue
    fire-cloud
    forced-air
    gear-blue
    gear-leaf-white
    gear-leaf
    gear-savings-white-small
    gear-time-of-savings
    globe-blue
    google-home-logo
    hammer-and-screwdriver-outline-white
    hd-text-white-small
    heart-outline-white
    heat-link-blue
    heat-pump-white-small
    heat-pumps
    history-clock-arrow-blue
    history-clock-blue-small
    history-clock-white-small
    history-clock
    humidity-sensor
    installer-blue
    laptop-flat-blue
    laptop-flat-7B858E
    leaf-blue
    leaf
    lightning-blue
    microphone-white
    microphone-blue
    mobile-and-tablet-flat-blue
    mobile-and-tablet-flat-7B858E
    moon-blue
    moon-white-small
    moonshine-cutout-circle-95a1aa
    moonshine-cutout-circle-blue
    nest-cam-040404
    nest-cam-3d4247
    nest-cam-7B858E
    nest-cam-blue
    nest-cam-magnet-white-small
    nest-cam-standing-white-small
    nest-cam-teardown-outline-gray-down-arrow
    nest-cam-teardown-outline-gray-up-arrow
    nest-cam-tripod-white-small
    nest-cam-wall-white-small
    nest-cam-white
    nest-cam-outdoor-blue
    nest-cam-outdoor-3d4247
    nest-cloud-black
    nest-cloud-blue
    nest-cloud-gray
    nest-cloud-white
    nest-house-blue
    nest-house-invert-white-small
    nest-house-white-small
    nest-pro-truck
    nest-protect-040404
    nest-protect-3d4247
    nest-protect-7B858E
    nest-protect-blue
    newspaper-blue
    odometer-9ecf72
    on-off-blue
    opentherm-white-small
    opentherm-white
    paint-palette-blue
    pathlight-white-small
    pencil-write-blue
    phone-alert-white-small-old
    phone-alert-white-small
    phone-alert
    piggy-bank-748693
    piggy-bank-energy-partners
    power-usage-blue
    pro-install
    pulse-circle-white-small
    radiant-gray
    radiant-red
    radiant-white-small
    replay-video
    saving-calendar-white
    saving-calendar
    screwdriver
    search-95a1aa
    search-white
    secure-lock
    signal-tower-blue
    speaker-blue
    speaker-white-small
    steam-check-white-small
    stopwatch-blue-small
    stopwatch-white-small
    sunblock-white-small
    sunblock
    sunshine-cutout-circle-95a1aa
    sunshine-cutout-circle-blue
    support-nest-aware
    support-app
    support-store
    support-contact-chat-white
    support-contact-email-white
    support-contact-phone-white
    support-contact-twitter-white
    talk-bubble-alert-white-small
    talk-bubbles-outline-blue
    talk-bubbles-white-small
    thermostat-c-7B858E
    thermostat-f-7B858E
    thermometer-blue
    thermometer-white
    thermostat-flat-cooling
    thermostat-flat-heating
    thermostat-outline-white
    time-to-temperature
    tools-cutout-white
    tool-auto-away
    tool-battery
    tool-billing
    tool-community
    tool-compatibility
    tool-family-accounts
    tool-gears
    tool-home-away-assist
    tool-house
    tool-installer
    tool-nest-app
    tool-nest-aware
    tool-nest-care
    tool-order-management
    tool-savings-calculator
    tool-shipping
    tool-stand
    tool-store
    tool-track-shipping
    tool-troubleshooting
    tool-user
    tool-warranty
    tool-wifi
    tool-wired-or-battery
    troubleshooting-gray
    true-radiant
    tv-blue
    underwriters-laboratories
    users-white
    warranty-badge-blue
    watch-flat-blue
    watch-video-knockout-white
    water-drop-single-white-small
    weather-aware-blue
    weather-aware
    weight-scale-blue
    wide-angle-blue
    wide-angle-white-small
    wifi
    wireless-blue
    works-with-nest-horizontal
    works-with-nest-horizontal-7B858E
    works-with-nest-vertical-blue
    works-with-nest-vertical-white
    works-with-nest-vertical-7B858E
    works-with-nest-vertical
    wrench-and-screwdriver-blue
    wrench-and-screwdriver-on-stamp-blue
    wrench-and-screwdriver
    youtube-white-small


**/
.icon {
  display: inline-block;
  background: transparent center center no-repeat;
  vertical-align: middle;
  margin-bottom: 9px;
  width: 40px;
  height: 40px;
  /*
   * Localized icons - e.g. fahrenheit/celsius, currency units
   */ }
  @media (min-width: 768px) {
    .icon {
      margin-bottom: 15px; } }
  .icon.icon-activity-sensor-blue {
    background-image: url("../../images/global/icons/activity-sensor-blue.svg"); }
  .icon.icon-activity-zones {
    background-image: url("../../images/global/icons/activity-zones.svg"); }
  .icon.icon-airwave {
    background-image: url("../../images/global/icons/airwave.svg"); }
  .icon.icon-airwave-white-small {
    background-image: url("../../images/global/icons/airwave-white-small.svg"); }
  .icon.icon-auto-away {
    background-image: url("../../images/global/icons/auto-away.svg"); }
  .icon.icon-auto-away-gray {
    background-image: url("../../images/global/icons/auto-away-gray.svg"); }
  .icon.icon-auto-away-dark-gray {
    background-image: url("../../images/global/icons/auto-away-dark-gray.svg"); }
  .icon.icon-auto-away-white-small {
    background-image: url("../../images/global/icons/auto-away-white-small.svg"); }
  .icon.icon-auto-schedule {
    background-image: url("../../images/global/icons/auto-schedule.svg"); }
  .icon.icon-auto-schedule-white-small {
    background-image: url("../../images/global/icons/auto-schedule-white-small.svg"); }
  .icon.icon-automatic-updates {
    background-image: url("../../images/global/icons/automatic-updates.svg"); }
  .icon.icon-award-blue {
    background-image: url("../../images/global/icons/award-blue.svg"); }
  .icon.icon-bell-blue {
    background-image: url("../../images/global/icons/bell-blue.svg"); }
  .icon.icon-bell-mute {
    background-image: url("../../images/global/icons/bell-mute.svg"); }
  .icon.icon-bell-mute-white-small {
    background-image: url("../../images/global/icons/bell-mute-white-small.svg"); }
  .icon.icon-bounding-box-blue-small {
    background-image: url("../../images/global/icons/bounding-box-blue-small.svg"); }
  .icon.icon-bounding-box-white-small {
    background-image: url("../../images/global/icons/bounding-box-white-small.svg"); }
  .icon.icon-box-blue {
    background-image: url("../../images/global/icons/box-blue.svg"); }
  .icon.icon-briefcase-blue {
    background-image: url("../../images/global/icons/briefcase-blue.svg"); }
  .icon.icon-california-fire-marshal {
    background-image: url("../../images/global/icons/california-fire-marshal.svg"); }
  .icon.icon-camera-blue {
    background-image: url("../../images/global/icons/camera-blue.svg"); }
  .icon.icon-camera-cutout-circle-blue {
    background-image: url("../../images/global/icons/camera-cutout-circle-blue.svg"); }
  .icon.icon-canadian-standards {
    background-image: url("../../images/global/icons/canadian-standards.svg"); }
  .icon.icon-car-front {
    background-image: url("../../images/global/icons/car-front.svg"); }
  .icon.icon-chart-decrease-white {
    background-image: url("../../images/global/icons/chart-decrease-white.svg"); }
  .icon.icon-check-mark {
    background-image: url("../../images/global/icons/check-mark.svg"); }
  .icon.icon-chirp-mute-white-small {
    background-image: url("../../images/global/icons/chirp-mute-white-small.svg"); }
  .icon.icon-circle-plus-button {
    background-image: url("../../images/global/icons/circle-plus-button.svg"); }
  .icon.icon-circle-plus-button-blue {
    background-image: url("../../images/global/icons/circle-plus-button-blue.svg"); }
  .icon.icon-clapper-board-blue {
    background-image: url("../../images/global/icons/clapper-board-blue.svg"); }
  .icon.icon-clapper-board-blue-small {
    background-image: url("../../images/global/icons/clapper-board-blue-small.svg"); }
  .icon.icon-clapper-board-gray {
    background-image: url("../../images/global/icons/clapper-board-gray.svg"); }
  .icon.icon-clapper-board-white-small {
    background-image: url("../../images/global/icons/clapper-board-white-small.svg"); }
  .icon.icon-close-7e7e7e {
    background-image: url("../../images/global/icons/close-7e7e7e.svg"); }
  .icon.icon-close-white {
    background-image: url("../../images/global/icons/close-white.svg"); }
  .icon.icon-cloud-door-blue {
    background-image: url("../../images/global/icons/cloud-door-blue.svg"); }
  .icon.icon-cloud-door-7B858E {
    background-image: url("../../images/global/icons/cloud-door-7B858E.svg"); }
  .icon.icon-cloud-recording {
    background-image: url("../../images/global/icons/cloud-recording.svg"); }
  .icon.icon-co-badge {
    background-image: url("../../images/global/icons/co-badge.svg"); }
  .icon.icon-compatibility-check-blue {
    background-image: url("../../images/global/icons/compatibility-check-blue.svg"); }
  .icon.icon-cool-to-dry {
    background-image: url("../../images/global/icons/cool-to-dry.svg"); }
  .icon.icon-cool-to-dry-white-small {
    background-image: url("../../images/global/icons/cool-to-dry-white-small.svg"); }
  .icon.icon-crosshair-white-small {
    background-image: url("../../images/global/icons/crosshair-white-small.svg"); }
  .icon.icon-device-type-battery-blue {
    background-image: url("../../images/global/icons/device-type-battery-blue.svg"); }
  .icon.icon-device-type-battery-white {
    background-image: url("../../images/global/icons/device-type-battery-white.svg"); }
  .icon.icon-device-type-wired-blue {
    background-image: url("../../images/global/icons/device-type-wired-blue.svg"); }
  .icon.icon-dragger-arrows-white {
    background-image: url("../../images/global/icons/dragger-arrows-white.svg"); }
  .icon.icon-dual-fuel {
    background-image: url("../../images/global/icons/dual-fuel.svg"); }
  .icon.icon-early-on {
    background-image: url("../../images/global/icons/early-on.svg"); }
  .icon.icon-early-on-white-small {
    background-image: url("../../images/global/icons/early-on-white-small.svg"); }
  .icon.icon-energy-history {
    background-image: url("../../images/global/icons/energy-history.svg"); }
  .icon.icon-family-blue {
    background-image: url("../../images/global/icons/family-blue.svg"); }
  .icon.icon-family-white-small {
    background-image: url("../../images/global/icons/family-white-small.svg"); }
  .icon.icon-fan-white-small {
    background-image: url("../../images/global/icons/fan-white-small.svg"); }
  .icon.icon-feature-all-devices {
    background-image: url("../../images/global/icons/feature-all-devices.svg"); }
  .icon.icon-feature-audio {
    background-image: url("../../images/global/icons/feature-audio.svg"); }
  .icon.icon-feature-cloud-storage {
    background-image: url("../../images/global/icons/feature-cloud-storage.svg"); }
  .icon.icon-feature-installation {
    background-image: url("../../images/global/icons/feature-installation.svg"); }
  .icon.icon-feature-live-streams {
    background-image: url("../../images/global/icons/feature-live-streams.svg"); }
  .icon.icon-feature-night-vision {
    background-image: url("../../images/global/icons/feature-night-vision.svg"); }
  .icon.icon-feature-person-alerts {
    background-image: url("../../images/global/icons/feature-person-alerts.svg"); }
  .icon.icon-feature-recording {
    background-image: url("../../images/global/icons/feature-recording.svg"); }
  .icon.icon-feature-streaming {
    background-image: url("../../images/global/icons/feature-streaming.svg"); }
  .icon.icon-feature-video-quality {
    background-image: url("../../images/global/icons/feature-video-quality.svg"); }
  .icon.icon-filter-reminders {
    background-image: url("../../images/global/icons/filter-reminders.svg"); }
  .icon.icon-filter-reminders-white-small {
    background-image: url("../../images/global/icons/filter-reminders-white-small.svg"); }
  .icon.icon-find-pro-van {
    background-image: url("../../images/global/icons/find-pro-van.svg"); }
  .icon.icon-fire-cloud {
    background-image: url("../../images/global/icons/fire-cloud.svg"); }
  .icon.icon-fire-cloud-7B858E {
    background-image: url("../../images/global/icons/fire-cloud-7B858E.svg"); }
  .icon.icon-fire-cloud-blue {
    background-image: url("../../images/global/icons/fire-cloud-blue.svg"); }
  .icon.icon-forced-air {
    background-image: url("../../images/global/icons/forced-air.svg"); }
  .icon.icon-gear-blue {
    background-image: url("../../images/global/icons/gear-blue.svg"); }
  .icon.icon-gear-leaf {
    background-image: url("../../images/global/icons/gear-leaf.svg"); }
  .icon.icon-gear-leaf-white {
    background-image: url("../../images/global/icons/gear-leaf-white.svg"); }
  .icon.icon-gear-savings-white-small {
    background-image: url("../../images/global/icons/gear-savings-white-small.svg"); }
  .icon.icon-gear-time-of-savings {
    background-image: url("../../images/global/icons/gear-time-of-savings.svg"); }
  .icon.icon-globe-blue {
    background-image: url("../../images/global/icons/globe-blue.svg"); }
  .icon.icon-google-home-logo {
    background-image: url("../../images/global/icons/google-home-logo.svg"); }
  .icon.icon-hammer-and-screwdriver-outline-white {
    background-image: url("../../images/global/icons/hammer-and-screwdriver-outline-white.svg"); }
  .icon.icon-hd-text-white-small {
    background-image: url("../../images/global/icons/hd-text-white-small.svg"); }
  .icon.icon-hd-video {
    background-image: url("../../images/global/icons/hd-video.svg"); }
  .icon.icon-heart-outline-white {
    background-image: url("../../images/global/icons/heart-outline-white.svg"); }
  .icon.icon-heat-link-blue {
    background-image: url("../../images/global/icons/heat-link-blue.svg"); }
  .icon.icon-heat-pump-white-small {
    background-image: url("../../images/global/icons/heat-pump-white-small.svg"); }
  .icon.icon-heat-pumps {
    background-image: url("../../images/global/icons/heat-pumps.svg"); }
  .icon.icon-history-clock {
    background-image: url("../../images/global/icons/history-clock.svg"); }
  .icon.icon-history-clock-arrow-blue {
    background-image: url("../../images/global/icons/history-clock-arrow-blue.svg"); }
  .icon.icon-history-clock-blue-small {
    background-image: url("../../images/global/icons/history-clock-blue-small.svg"); }
  .icon.icon-history-clock-white-small {
    background-image: url("../../images/global/icons/history-clock-white-small.svg"); }
  .icon.icon-hot-water {
    background-image: url("../../images/global/icons/hot-water.svg"); }
  .icon.icon-humidity-sensor {
    background-image: url("../../images/global/icons/humidity-sensor.svg"); }
  .icon.icon-installer-blue {
    background-image: url("../../images/global/icons/installer-blue.svg"); }
  .icon.icon-laptop-flat-blue {
    background-image: url("../../images/global/icons/laptop-flat-blue.svg"); }
  .icon.icon-laptop-flat-7B858E {
    background-image: url("../../images/global/icons/laptop-flat-7B858E.svg"); }
  .icon.icon-leaf {
    background-image: url("../../images/global/icons/leaf.svg"); }
  .icon.icon-leaf-blue {
    background-image: url("../../images/global/icons/leaf-blue.svg"); }
  .icon.icon-lightning-blue {
    background-image: url("../../images/global/icons/lightning-blue.svg"); }
  .icon.icon-live-streams {
    background-image: url("../../images/global/icons/live-streams.svg"); }
  .icon.icon-microphone-blue {
    background-image: url("../../images/global/icons/microphone-blue.svg"); }
  .icon.icon-microphone-gray {
    background-image: url("../../images/global/icons/microphone-gray.svg"); }
  .icon.icon-microphone-white {
    background-image: url("../../images/global/icons/microphone-white.svg"); }
  .icon.icon-mobile-and-tablet-flat-blue {
    background-image: url("../../images/global/icons/mobile-and-tablet-flat-blue.svg"); }
  .icon.icon-mobile-and-tablet-flat-7B858E {
    background-image: url("../../images/global/icons/mobile-and-tablet-flat-7B858E.svg"); }
  .icon.icon-moon-blue {
    background-image: url("../../images/global/icons/moon-blue.svg"); }
  .icon.icon-moon-white-small {
    background-image: url("../../images/global/icons/moon-white-small.svg"); }
  .icon.icon-moonshine-cutout-circle-95a1aa {
    background-image: url("../../images/global/icons/moonshine-cutout-circle-95a1aa.svg"); }
  .icon.icon-moonshine-cutout-circle-blue {
    background-image: url("../../images/global/icons/moonshine-cutout-circle-blue.svg"); }
  .icon.icon-nest-cam-040404 {
    background-image: url("../../images/global/icons/nest-cam-040404.svg"); }
  .icon.icon-nest-cam-3d4247 {
    background-image: url("../../images/global/icons/nest-cam-3d4247.svg"); }
  .icon.icon-nest-cam-7B858E {
    background-image: url("../../images/global/icons/nest-cam-7B858E.svg"); }
  .icon.icon-nest-cam-blue {
    background-image: url("../../images/global/icons/nest-cam-blue.svg"); }
  .icon.icon-nest-cam-magnet-white-small {
    background-image: url("../../images/global/icons/nest-cam-magnet-white-small.svg"); }
  .icon.icon-nest-cam-standing-white-small {
    background-image: url("../../images/global/icons/nest-cam-standing-white-small.svg"); }
  .icon.icon-nest-cam-teardown-outline-gray-down-arrow {
    background-image: url("../../images/global/icons/nest-cam-teardown-outline-gray-down-arrow.svg"); }
  .icon.icon-nest-cam-teardown-outline-gray-up-arrow {
    background-image: url("../../images/global/icons/nest-cam-teardown-outline-gray-up-arrow.svg"); }
  .icon.icon-nest-cam-tripod-white-small {
    background-image: url("../../images/global/icons/nest-cam-tripod-white-small.svg"); }
  .icon.icon-nest-cam-wall-white-small {
    background-image: url("../../images/global/icons/nest-cam-wall-white-small.svg"); }
  .icon.icon-nest-cam-white {
    background-image: url("../../images/global/icons/nest-cam-white.svg"); }
  .icon.icon-nest-cam-outdoor-blue {
    background-image: url("../../images/global/icons/nest-cam-outdoor-blue.svg"); }
  .icon.icon-nest-cam-outdoor-3d4247 {
    background-image: url("../../images/global/icons/nest-cam-outdoor-3d4247.svg"); }
  .icon.icon-nest-cloud-black {
    background-image: url("../../images/global/icons/nest-cloud-black.svg"); }
  .icon.icon-nest-cloud-blue {
    background-image: url("../../images/global/icons/nest-cloud-blue.svg"); }
  .icon.icon-nest-cloud-gray {
    background-image: url("../../images/global/icons/nest-cloud-gray.svg"); }
  .icon.icon-nest-cloud-white {
    background-image: url("../../images/global/icons/nest-cloud-white.svg"); }
  .icon.icon-nest-house-blue {
    background-image: url("../../images/global/icons/nest-house-blue.svg"); }
  .icon.icon-nest-house-invert-white-small {
    background-image: url("../../images/global/icons/nest-house-invert-white-small.svg"); }
  .icon.icon-nest-house-white-small {
    background-image: url("../../images/global/icons/nest-house-white-small.svg"); }
  .icon.icon-nest-pro-truck {
    background-image: url("../../images/global/icons/nest-pro-truck.svg"); }
  .icon.icon-nest-protect-040404 {
    background-image: url("../../images/global/icons/nest-protect-040404.svg"); }
  .icon.icon-nest-protect-3d4247 {
    background-image: url("../../images/global/icons/nest-protect-3d4247.svg"); }
  .icon.icon-nest-protect-7B858E {
    background-image: url("../../images/global/icons/nest-protect-7B858E.svg"); }
  .icon.icon-nest-protect-blue {
    background-image: url("../../images/global/icons/nest-protect-blue.svg"); }
  .icon.icon-newspaper-blue {
    background-image: url("../../images/global/icons/newspaper-blue.svg"); }
  .icon.icon-night-vision {
    background-image: url("../../images/global/icons/night-vision.svg"); }
  .icon.icon-odometer-9ecf72 {
    background-image: url("../../images/global/icons/odometer-9ecf72.svg"); }
  .icon.icon-on-off-blue {
    background-image: url("../../images/global/icons/on-off-blue.svg"); }
  .icon.icon-opentherm-white {
    background-image: url("../../images/global/icons/opentherm-white.svg"); }
  .icon.icon-opentherm-white-small {
    background-image: url("../../images/global/icons/opentherm-white-small.svg"); }
  .icon.icon-paint-palette-blue {
    background-image: url("../../images/global/icons/paint-palette-blue.svg"); }
  .icon.icon-pathlight-white-small {
    background-image: url("../../images/global/icons/pathlight-white-small.svg"); }
  .icon.icon-pencil-write-blue {
    background-image: url("../../images/global/icons/pencil-write-blue.svg"); }
  .icon.icon-person-alerts {
    background-image: url("../../images/global/icons/person-alerts.svg"); }
  .icon.icon-phone-alert {
    background-image: url("../../images/global/icons/phone-alert.svg"); }
  .icon.icon-phone-alert-white-small {
    background-image: url("../../images/global/icons/phone-alert-white-small.svg"); }
  .icon.icon-phone-alert-white-small-old {
    background-image: url("../../images/global/icons/phone-alert-white-small-old.svg"); }
  .icon.icon-piggy-bank-748693 {
    background-image: url("../../images/global/icons/piggy-bank-748693.svg"); }
  .icon.icon-piggy-bank-energy-partners {
    background-image: url("../../images/global/icons/piggy-bank-energy-partners.svg"); }
  .icon.icon-power-usage-blue {
    background-image: url("../../images/global/icons/power-usage-blue.svg"); }
  .icon.icon-pro-install {
    background-image: url("../../images/global/icons/pro-install.svg"); }
  .icon.icon-pulse-circle-white-small {
    background-image: url("../../images/global/icons/pulse-circle-white-small.svg"); }
  .icon.icon-radiant-gray {
    background-image: url("../../images/global/icons/radiant-gray.svg"); }
  .icon.icon-radiant-red {
    background-image: url("../../images/global/icons/radiant-red.svg"); }
  .icon.icon-radiant-white-small {
    background-image: url("../../images/global/icons/radiant-white-small.svg"); }
  .icon.icon-replay-video {
    background-image: url("../../images/global/icons/replay-video.svg"); }
  .icon.icon-saving-calendar {
    background-image: url("../../images/global/icons/saving-calendar.svg"); }
  .icon.icon-saving-calendar-white {
    background-image: url("../../images/global/icons/saving-calendar-white.svg"); }
  .icon.icon-screwdriver {
    background-image: url("../../images/global/icons/screwdriver.svg"); }
  .icon.icon-search-95a1aa {
    background-image: url("../../images/global/icons/search-95a1aa.svg"); }
  .icon.icon-search-white {
    background-image: url("../../images/global/icons/search-white.svg"); }
  .icon.icon-secure-lock {
    background-image: url("../../images/global/icons/secure-lock.svg"); }
  .icon.icon-secure-lock-blue {
    background-image: url("../../images/global/icons/secure-lock-blue.svg"); }
  .icon.icon-signal-tower-blue {
    background-image: url("../../images/global/icons/signal-tower-blue.svg"); }
  .icon.icon-solves_crime_arrow {
    background-image: url("../../images/global/icons/solves_crime_arrow.svg"); }
  .icon.icon-solves_crime_mute_button {
    background-image: url("../../images/global/icons/solves_crime_mute_button.svg"); }
  .icon.icon-solves_crime_pause_button {
    background-image: url("../../images/global/icons/solves_crime_pause_button.svg"); }
  .icon.icon-solves_crime_play_button {
    background-image: url("../../images/global/icons/solves_crime_play_button.svg"); }
  .icon.icon-solves_crime_unmute_button {
    background-image: url("../../images/global/icons/solves_crime_unmute_button.svg"); }
  .icon.icon-speaker-blue {
    background-image: url("../../images/global/icons/speaker-blue.svg"); }
  .icon.icon-speaker-white-small {
    background-image: url("../../images/global/icons/speaker-white-small.svg"); }
  .icon.icon-steam-check-white-small {
    background-image: url("../../images/global/icons/steam-check-white-small.svg"); }
  .icon.icon-stopwatch-blue-small {
    background-image: url("../../images/global/icons/stopwatch-blue-small.svg"); }
  .icon.icon-stopwatch-white-small {
    background-image: url("../../images/global/icons/stopwatch-white-small.svg"); }
  .icon.icon-sunblock {
    background-image: url("../../images/global/icons/sunblock.svg"); }
  .icon.icon-sunblock-white-small {
    background-image: url("../../images/global/icons/sunblock-white-small.svg"); }
  .icon.icon-sunshine-cutout-circle-95a1aa {
    background-image: url("../../images/global/icons/sunshine-cutout-circle-95a1aa.svg"); }
  .icon.icon-sunshine-cutout-circle-blue {
    background-image: url("../../images/global/icons/sunshine-cutout-circle-blue.svg"); }
  .icon.icon-support-nest-aware {
    background-image: url("../../images/global/icons/support-nest-aware.svg"); }
  .icon.icon-support-app {
    background-image: url("../../images/global/icons/support-app.svg"); }
  .icon.icon-support-store {
    background-image: url("../../images/global/icons/support-store.svg"); }
  .icon.icon-support-contact-chat-white {
    background-image: url("../../images/global/icons/support-contact-chat-white.svg"); }
  .icon.icon-support-contact-email-white {
    background-image: url("../../images/global/icons/support-contact-email-white.svg"); }
  .icon.icon-support-contact-phone-white {
    background-image: url("../../images/global/icons/support-contact-phone-white.svg"); }
  .icon.icon-support-contact-twitter-white {
    background-image: url("../../images/global/icons/support-contact-twitter-white.svg"); }
  .icon.icon-talk-bubble-alert-white-small {
    background-image: url("../../images/global/icons/talk-bubble-alert-white-small.svg"); }
  .icon.icon-talk-bubbles-outline-blue {
    background-image: url("../../images/global/icons/talk-bubbles-outline-blue.svg"); }
  .icon.icon-talk-bubbles-white-small {
    background-image: url("../../images/global/icons/talk-bubbles-white-small.svg"); }
  .icon.icon-thermostat-c-7B858E {
    background-image: url("../../images/global/icons/thermostat-c-7B858E.svg"); }
  .icon.icon-thermostat-f-7B858E {
    background-image: url("../../images/global/icons/thermostat-f-7B858E.svg"); }
  .icon.icon-thermometer-blue {
    background-image: url("../../images/global/icons/thermometer-blue.svg"); }
  .icon.icon-thermometer-white {
    background-image: url("../../images/global/icons/thermometer-white.svg"); }
  .icon.icon-thermostat-flat-cooling {
    background-image: url("../../images/global/icons/thermostat-flat-cooling.svg"); }
  .icon.icon-thermostat-flat-heating {
    background-image: url("../../images/global/icons/thermostat-flat-heating.svg"); }
  .icon.icon-thermostat-outline-white {
    background-image: url("../../images/global/icons/thermostat-outline-white.svg"); }
  .icon.icon-time-to-temperature {
    background-image: url("../../images/global/icons/time-to-temperature.svg"); }
  .icon.icon-tools-cutout-white {
    background-image: url("../../images/global/icons/tools-cutout-white.svg"); }
  .icon.icon-tool-auto-away {
    background-image: url("../../images/global/icons/tool-auto-away.svg"); }
  .icon.icon-tool-battery {
    background-image: url("../../images/global/icons/tool-battery.svg"); }
  .icon.icon-tool-billing {
    background-image: url("../../images/global/icons/tool-billing.svg"); }
  .icon.icon-tool-community {
    background-image: url("../../images/global/icons/tool-community.svg"); }
  .icon.icon-tool-compatibility {
    background-image: url("../../images/global/icons/tool-compatibility.svg"); }
  .icon.icon-tool-family-accounts {
    background-image: url("../../images/global/icons/tool-family-accounts.svg"); }
  .icon.icon-tool-gears {
    background-image: url("../../images/global/icons/tool-gears.svg"); }
  .icon.icon-tool-home-away-assist {
    background-image: url("../../images/global/icons/tool-home-away-assist.svg"); }
  .icon.icon-tool-house {
    background-image: url("../../images/global/icons/tool-house.svg"); }
  .icon.icon-tool-installer {
    background-image: url("../../images/global/icons/tool-installer.svg"); }
  .icon.icon-tool-nest-app {
    background-image: url("../../images/global/icons/tool-nest-app.svg"); }
  .icon.icon-tool-nest-aware {
    background-image: url("../../images/global/icons/tool-nest-aware.svg"); }
  .icon.icon-tool-nest-care {
    background-image: url("../../images/global/icons/tool-nest-care.svg"); }
  .icon.icon-tool-order-management {
    background-image: url("../../images/global/icons/tool-order-management.svg"); }
  .icon.icon-tool-savings-calculator {
    background-image: url("../../images/global/icons/tool-savings-calculator.svg"); }
  .icon.icon-tool-shipping {
    background-image: url("../../images/global/icons/tool-shipping.svg"); }
  .icon.icon-tool-stand {
    background-image: url("../../images/global/icons/tool-stand.svg"); }
  .icon.icon-tool-store {
    background-image: url("../../images/global/icons/tool-store.svg"); }
  .icon.icon-tool-track-shipping {
    background-image: url("../../images/global/icons/tool-track-shipping.svg"); }
  .icon.icon-tool-troubleshooting {
    background-image: url("../../images/global/icons/tool-troubleshooting.svg"); }
  .icon.icon-tool-user {
    background-image: url("../../images/global/icons/tool-user.svg"); }
  .icon.icon-tool-warranty {
    background-image: url("../../images/global/icons/tool-warranty.svg"); }
  .icon.icon-tool-wifi {
    background-image: url("../../images/global/icons/tool-wifi.svg"); }
  .icon.icon-tool-wired-or-battery {
    background-image: url("../../images/global/icons/tool-wired-or-battery.svg"); }
  .icon.icon-troubleshooting-gray {
    background-image: url("../../images/global/icons/troubleshooting-gray.svg"); }
  .icon.icon-true-radiant {
    background-image: url("../../images/global/icons/true-radiant.svg"); }
  .icon.icon-tv-blue {
    background-image: url("https://video.nest.com/images/global/icons/tv-blue.svg"); }
  .icon.icon-underwriters-laboratories {
    background-image: url("../../images/global/icons/underwriters-laboratories.svg"); }
  .icon.icon-users-white {
    background-image: url("../../images/global/icons/users-white.svg"); }
  .icon.icon-video-stream {
    background-image: url("../../images/global/icons/video-stream.svg"); }
  .icon.icon-warranty-badge-blue {
    background-image: url("../../images/global/icons/warranty-badge-blue.svg"); }
  .icon.icon-watch-flat-blue {
    background-image: url("../../images/global/icons/watch-flat-blue.svg"); }
  .icon.icon-watch-video-knockout-white {
    background-image: url("../../images/global/icons/watch-video-knockout-white.svg"); }
  .icon.icon-water-drop-single-white-small {
    background-image: url("../../images/global/icons/water-drop-single-white-small.svg"); }
  .icon.icon-weather-aware {
    background-image: url("../../images/global/icons/weather-aware.svg"); }
  .icon.icon-weather-aware-blue {
    background-image: url("../../images/global/icons/weather-aware-blue.svg"); }
  .icon.icon-weight-scale-blue {
    background-image: url("../../images/global/icons/weight-scale-blue.svg"); }
  .icon.icon-wide-angle {
    background-image: url("../../images/global/icons/wide-angle.svg"); }
  .icon.icon-wide-angle-blue {
    background-image: url("../../images/global/icons/wide-angle-blue.svg"); }
  .icon.icon-wide-angle-white-small {
    background-image: url("../../images/global/icons/wide-angle-white-small.svg"); }
  .icon.icon-wifi {
    background-image: url("../../images/global/icons/wifi.svg"); }
  .icon.icon-wireless-blue {
    background-image: url("../../images/global/icons/wireless-blue.svg"); }
  .icon.icon-works-with-nest-horizontal {
    background-image: url("../../images/global/icons/works-with-nest-horizontal.svg"); }
  .icon.icon-works-with-nest-horizontal-7B858E {
    background-image: url("../../images/global/icons/works-with-nest-horizontal-7B858E.svg"); }
  .icon.icon-works-with-nest-vertical {
    background-image: url("../../images/global/icons/works-with-nest-vertical.svg"); }
  .icon.icon-works-with-nest-vertical-blue {
    background-image: url("../../images/global/icons/works-with-nest-vertical-blue.svg"); }
  .icon.icon-works-with-nest-vertical-white {
    background-image: url("../../images/global/icons/works-with-nest-vertical-white.svg"); }
  .icon.icon-works-with-nest-vertical-7B858E {
    background-image: url("../../images/global/icons/works-with-nest-vertical-7B858E.svg"); }
  .icon.icon-wrench-and-screwdriver {
    background-image: url("../../images/global/icons/wrench-and-screwdriver.svg"); }
  .icon.icon-wrench-and-screwdriver-blue {
    background-image: url("../../images/global/icons/wrench-and-screwdriver-blue.svg"); }
  .icon.icon-wrench-and-screwdriver-on-stamp-blue {
    background-image: url("../../images/global/icons/wrench-and-screwdriver-on-stamp-blue.svg"); }
  .icon.icon-youtube-white-small {
    background-image: url("../../images/global/icons/youtube-white-small.svg"); }
  .icon.icon-zoom {
    background-image: url("../../images/global/icons/zoom.svg"); }
  .icon.icon-watch-video-blue {
    background-image: url("../../images/global/icons/watch-video-blue.svg"); }
  .icon.icon-watch-video-minimal-blue {
    background-image: url("https://video.nest.com/images/global/icons/watch-video-minimal-blue.svg"); }
  .icon.icon-arrow-gallery-previous-small, .icon.icon-arrow-gallery-next-small {
    background-image: url("../../images/global/icons/arrow-gallery-small.svg"); }
  .icon.icon-arrow-gallery-previous-white-small, .icon.icon-arrow-gallery-next-white-small {
    background-image: url("../../images/global/icons/arrow-gallery-white-small.svg"); }
  .icon[class*="icon-arrow-gallery-next-"] {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1); }
  .icon.icon-car-front {
    width: 48px;
    height: 40px; }
  .icon.fpo {
    -webkit-box-shadow: inset 0 0 0 5px red;
    -moz-box-shadow: inset 0 0 0 5px red;
    box-shadow: inset 0 0 0 5px red; }
  .icon.icon-google-home-logo {
    width: 110px;
    height: 40px; }
  .icon.icon-piggy-bank-energy-partners {
    width: 48px;
    height: 40px; }
  .icon.icon-pro-install {
    width: 77.6px;
    height: 40px; }
  .icon[class*="icon-works-with-nest-horizontal"] {
    width: 84px;
    height: 40px; }
  .icon[class*="icon-works-with-nest-vertical"] {
    width: 40px;
    height: 65px; }
  .icon .icon-wrench-and-screwdriver-on-stamp-blue {
    width: 46px;
    height: 40px; }
  .icon.gallery-arrow-down {
    background-image: url("../../images/global/icons/gallery-arrow-down.svg"); }
  .icon.nest-protect-teardown-outline-white-0 {
    background-image: url("../../images/global/icons/nest-protect-teardown-outline-white-0.svg"); }
  .icon.nest-protect-teardown-outline-white-1 {
    background-image: url("../../images/global/icons/nest-protect-teardown-outline-white-1.svg"); }
  .icon.nest-protect-teardown-outline-white-2 {
    background-image: url("../../images/global/icons/nest-protect-teardown-outline-white-2.svg"); }
  .icon.nest-protect-teardown-outline-white-3 {
    background-image: url("../../images/global/icons/nest-protect-teardown-outline-white-3.svg"); }
  .icon.nest-protect-teardown-outline-white-4 {
    background-image: url("../../images/global/icons/nest-protect-teardown-outline-white-4.svg"); }
  .icon.nest-protect-teardown-outline-white-5 {
    background-image: url("../../images/global/icons/nest-protect-teardown-outline-white-5.svg"); }
  .icon.nest-protect-teardown-outline-white-down-arrow {
    background-image: url("../../images/global/icons/nest-protect-teardown-outline-white-down-arrow.svg"); }
  .icon.watch-video-blue {
    background-image: url("../../images/global/icons/watch-video-blue.svg"); }
  .icon.watch-video-blue-alt {
    background-image: url("../../images/global/icons/watch-video-blue-alt.svg"); }
  .icon.watch-video-gray-3d4247 {
    background-image: url("../../images/global/icons/watch-video-gray-3d4247.svg"); }
  .icon.watch-video-gray-7b858e {
    background-image: url("../../images/global/icons/watch-video-gray-7b858e.svg"); }
  .icon.watch-video-orange {
    background-image: url("../../images/global/icons/watch-video-orange.svg"); }
  .icon.watch-video-minimal-white {
    background-image: url("../../images/global/icons/watch-video-simple-white.svg"); }
  .icon.watch-video-minimal-gray-7b858e {
    background-image: url("../../images/global/icons/watch-video-simple-gray-7b858e.svg"); }
  .icon.watch-video-minimal-blue {
    background-image: url("../../images/global/icons/watch-video-simple-blue.svg"); }
  .icon.icon-thermostat {
    background-image: url("../../images/global/icons/thermostat-c.svg"); }
  .icon.icon-thermostat-040404 {
    background-image: url("../../images/global/icons/thermostat-c-040404.svg"); }
  .icon.icon-thermostat-3d4247 {
    background-image: url("../../images/global/icons/thermostat-c-3d4247.svg"); }
  .icon.icon-thermostat-7B858E {
    background-image: url("../../images/global/icons/thermostat-c-7B858E.svg"); }
  .icon.icon-thermostat-blue {
    background-image: url("../../images/global/icons/thermostat-c-blue.svg"); }
  .icon.icon-thermostat-white-small {
    background-image: url("https://video.nest.com/images/global/icons/thermostat-c-white-small.svg"); }
  .icon:lang(en-US).icon-thermostat {
    background-image: url("../../images/global/icons/thermostat-f.svg"); }
  .icon:lang(en-US).icon-thermostat-040404 {
    background-image: url("../../images/global/icons/thermostat-f-040404.svg"); }
  .icon:lang(en-US).icon-thermostat-3d4247 {
    background-image: url("../../images/global/icons/thermostat-f-3d4247.svg"); }
  .icon:lang(en-US).icon-thermostat-7B858E {
    background-image: url("../../images/global/icons/thermostat-f-7B858E.svg"); }
  .icon:lang(en-US).icon-thermostat-blue {
    background-image: url("../../images/global/icons/thermostat-f-blue.svg"); }
  .icon:lang(en-US).icon-thermostat-white-small {
    background-image: url("../../images/global/icons/thermostat-f-white-small.svg"); }
  .icon.icon-phone-control-thermostat {
    background-image: url("../../images/global/icons/phone-control-thermostat-c.svg");
    width: 40px;
    height: 52px; }
    .icon.icon-phone-control-thermostat:lang(en-US) {
      background-image: url("../../images/global/icons/phone-control-thermostat-f.svg"); }
  .icon.icon-outlet {
    background-image: url("../../images/global/icons/outlet.svg"); }
    .icon.icon-outlet:lang(en-GB) {
      background-image: url("../../images/global/icons/outlet-en-GB.svg"); }
    .icon.icon-outlet:lang(en-IE) {
      background-image: url("../../images/global/icons/outlet-en-GB.svg"); }
    .icon.icon-outlet:lang(fr-FR) {
      background-image: url("../../images/global/icons/outlet-eu.svg"); }
    .icon.icon-outlet:lang(fr-BE) {
      background-image: url("../../images/global/icons/outlet-eu.svg"); }
    .icon.icon-outlet:lang(nl-NL) {
      background-image: url("../../images/global/icons/outlet-eu.svg"); }
    .icon.icon-outlet:lang(nl-BE) {
      background-image: url("../../images/global/icons/outlet-eu.svg"); }
  .icon[class*="icon-piggy-bank-outline-"] {
    width: 60px;
    height: 40px; }
  .icon.icon-piggy-bank-outline-blue {
    background-image: url("../../images/global/icons/piggy-bank-outline-blue.svg"); }
  .icon.icon-piggy-bank-solid-blue {
    background-image: url("../../images/global/icons/piggy-bank-solid-blue.svg"); }
  .icon.icon-piggy-bank-outline-gray {
    background-image: url("../../images/global/icons/piggy-bank-outline-gray.svg"); }
  .icon.icon-piggy-bank-solid-gray {
    background-image: url("../../images/global/icons/piggy-bank-solid-gray.svg"); }
  .icon.icon-piggy-bank-outline-white {
    background-image: url("../../images/global/icons/piggy-bank-outline-white.svg"); }
  .icon.icon-piggy-bank-solid-white {
    background-image: url("../../images/global/icons/piggy-bank-solid-white.svg"); }
  .icon:lang(fr-FR).icon-piggy-bank-outline-blue {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-blue.svg"); }
  .icon:lang(fr-FR).icon-piggy-bank-solid-blue {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-blue.svg"); }
  .icon:lang(fr-FR).icon-piggy-bank-outline-gray {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-gray.svg"); }
  .icon:lang(fr-FR).icon-piggy-bank-solid-gray {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-gray.svg"); }
  .icon:lang(fr-FR).icon-piggy-bank-outline-white {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-white.svg"); }
  .icon:lang(fr-FR).icon-piggy-bank-solid-white {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-white.svg"); }
  .icon:lang(fr-BE).icon-piggy-bank-outline-blue {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-blue.svg"); }
  .icon:lang(fr-BE).icon-piggy-bank-solid-blue {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-blue.svg"); }
  .icon:lang(fr-BE).icon-piggy-bank-outline-gray {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-gray.svg"); }
  .icon:lang(fr-BE).icon-piggy-bank-solid-gray {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-gray.svg"); }
  .icon:lang(fr-BE).icon-piggy-bank-outline-white {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-white.svg"); }
  .icon:lang(fr-BE).icon-piggy-bank-solid-white {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-white.svg"); }
  .icon:lang(en-IE).icon-piggy-bank-outline-blue {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-blue.svg"); }
  .icon:lang(en-IE).icon-piggy-bank-solid-blue {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-blue.svg"); }
  .icon:lang(en-IE).icon-piggy-bank-outline-gray {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-gray.svg"); }
  .icon:lang(en-IE).icon-piggy-bank-solid-gray {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-gray.svg"); }
  .icon:lang(en-IE).icon-piggy-bank-outline-white {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-white.svg"); }
  .icon:lang(en-IE).icon-piggy-bank-solid-white {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-white.svg"); }
  .icon:lang(nl-NL).icon-piggy-bank-outline-blue {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-blue.svg"); }
  .icon:lang(nl-NL).icon-piggy-bank-solid-blue {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-blue.svg"); }
  .icon:lang(nl-NL).icon-piggy-bank-outline-gray {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-gray.svg"); }
  .icon:lang(nl-NL).icon-piggy-bank-solid-gray {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-gray.svg"); }
  .icon:lang(nl-NL).icon-piggy-bank-outline-white {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-white.svg"); }
  .icon:lang(nl-NL).icon-piggy-bank-solid-white {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-white.svg"); }
  .icon:lang(nl-BE).icon-piggy-bank-outline-blue {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-blue.svg"); }
  .icon:lang(nl-BE).icon-piggy-bank-solid-blue {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-blue.svg"); }
  .icon:lang(nl-BE).icon-piggy-bank-outline-gray {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-gray.svg"); }
  .icon:lang(nl-BE).icon-piggy-bank-solid-gray {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-gray.svg"); }
  .icon:lang(nl-BE).icon-piggy-bank-outline-white {
    background-image: url("../../images/global/icons/piggy-bank-outline-euro-white.svg"); }
  .icon:lang(nl-BE).icon-piggy-bank-solid-white {
    background-image: url("../../images/global/icons/piggy-bank-solid-euro-white.svg"); }
  .icon:lang(en-GB).icon-piggy-bank-outline-blue {
    background-image: url("../../images/global/icons/piggy-bank-outline-pound-blue.svg"); }
  .icon:lang(en-GB).icon-piggy-bank-solid-blue {
    background-image: url("../../images/global/icons/piggy-bank-solid-pound-blue.svg"); }
  .icon:lang(en-GB).icon-piggy-bank-outline-gray {
    background-image: url("../../images/global/icons/piggy-bank-outline-pound-gray.svg"); }
  .icon:lang(en-GB).icon-piggy-bank-solid-gray {
    background-image: url("../../images/global/icons/piggy-bank-solid-pound-gray.svg"); }
  .icon:lang(en-GB).icon-piggy-bank-outline-white {
    background-image: url("../../images/global/icons/piggy-bank-outline-pound-white.svg"); }
  .icon:lang(en-GB).icon-piggy-bank-solid-white {
    background-image: url("../../images/global/icons/piggy-bank-solid-pound-white.svg"); }

/*
 * Image Icons (non-SVG) (e.g. devices)
 */
.icon.image-hue {
  background-image: url("../../images/global/icons/image-hue.jpg");
  background-repeat: no-repeat;
  background-size: 80px 80px; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .icon.image-hue {
      background-image: url("../../images/global/icons/image-hue_2x.jpg"); } }

.icon.image-bosch {
  background-image: url("../../images/global/icons/image-bosch.jpg");
  background-repeat: no-repeat;
  background-size: 80px 80px; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .icon.image-bosch {
      background-image: url("../../images/global/icons/image-bosch_2x.jpg"); } }

.icon.image-rheem {
  background-image: url("../../images/global/icons/image-rheem.jpg");
  background-repeat: no-repeat;
  background-size: 80px 80px; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .icon.image-rheem {
      background-image: url("../../images/global/icons/image-rheem_2x.jpg"); } }

.icon.image-nest-cam {
  background-image: url("../../images/global/icons/image-nest-cam.jpg");
  background-repeat: no-repeat;
  background-size: 90px 90px; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .icon.image-nest-cam {
      background-image: url("../../images/global/icons/image-nest-cam_2x.jpg"); } }

.icon.image-nest-protect {
  background-image: url("../../images/global/icons/image-nest-protect.jpg");
  background-repeat: no-repeat;
  background-size: 90px 90px; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .icon.image-nest-protect {
      background-image: url("../../images/global/icons/image-nest-protect_2x.jpg"); } }

.icon.image-nest-thermostat {
  background-image: url("../../images/global/icons/image-nest-thermostat_20C.jpg");
  background-repeat: no-repeat;
  background-size: 80px 80px; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .icon.image-nest-thermostat {
      background-image: url("../../images/global/icons/image-nest-thermostat_20C_2x.jpg"); } }
  .icon.image-nest-thermostat:lang(en-US) {
    background-image: url("../../images/global/icons/image-nest-thermostat.jpg");
    background-repeat: no-repeat;
    background-size: 80px 80px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat:lang(en-US) {
        background-image: url("../../images/global/icons/image-nest-thermostat_2x.jpg"); } }

.icon.image-nest-thermostat--away, .icon.image-nest-thermostat--eco {
  background-image: url("../../images/global/icons/image-nest-thermostat-eco.jpg");
  background-repeat: no-repeat;
  background-size: 65px 61px; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .icon.image-nest-thermostat--away, .icon.image-nest-thermostat--eco {
      background-image: url("../../images/global/icons/image-nest-thermostat-eco_2x.jpg"); } }
  .icon.image-nest-thermostat--away:lang(en-CA), .icon.image-nest-thermostat--eco:lang(en-CA) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-CA.jpg");
    background-repeat: no-repeat;
    background-size: 65px 61px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat--away:lang(en-CA), .icon.image-nest-thermostat--eco:lang(en-CA) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-CA_2x.jpg"); } }
  .icon.image-nest-thermostat--away:lang(fr-CA), .icon.image-nest-thermostat--eco:lang(fr-CA) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-CA.jpg");
    background-repeat: no-repeat;
    background-size: 65px 61px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat--away:lang(fr-CA), .icon.image-nest-thermostat--eco:lang(fr-CA) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-CA_2x.jpg"); } }
  .icon.image-nest-thermostat--away:lang(en-GB), .icon.image-nest-thermostat--eco:lang(en-GB) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-EU.jpg");
    background-repeat: no-repeat;
    background-size: 65px 61px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat--away:lang(en-GB), .icon.image-nest-thermostat--eco:lang(en-GB) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-EU_2x.jpg"); } }
  .icon.image-nest-thermostat--away:lang(en-IE), .icon.image-nest-thermostat--eco:lang(en-IE) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-EU.jpg");
    background-repeat: no-repeat;
    background-size: 65px 61px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat--away:lang(en-IE), .icon.image-nest-thermostat--eco:lang(en-IE) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-EU_2x.jpg"); } }
  .icon.image-nest-thermostat--away:lang(fr-FR), .icon.image-nest-thermostat--eco:lang(fr-FR) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-EU.jpg");
    background-repeat: no-repeat;
    background-size: 65px 61px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat--away:lang(fr-FR), .icon.image-nest-thermostat--eco:lang(fr-FR) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-EU_2x.jpg"); } }
  .icon.image-nest-thermostat--away:lang(fr-BE), .icon.image-nest-thermostat--eco:lang(fr-BE) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-EU.jpg");
    background-repeat: no-repeat;
    background-size: 65px 61px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat--away:lang(fr-BE), .icon.image-nest-thermostat--eco:lang(fr-BE) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-EU_2x.jpg"); } }
  .icon.image-nest-thermostat--away:lang(nl-NL), .icon.image-nest-thermostat--eco:lang(nl-NL) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-EU.jpg");
    background-repeat: no-repeat;
    background-size: 65px 61px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat--away:lang(nl-NL), .icon.image-nest-thermostat--eco:lang(nl-NL) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-EU_2x.jpg"); } }
  .icon.image-nest-thermostat--away:lang(nl-BE), .icon.image-nest-thermostat--eco:lang(nl-BE) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-EU.jpg");
    background-repeat: no-repeat;
    background-size: 65px 61px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat--away:lang(nl-BE), .icon.image-nest-thermostat--eco:lang(nl-BE) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-EU_2x.jpg"); } }

.icon.image-nest-thermostat-large--away, .icon.image-nest-thermostat-large--eco {
  background-image: url("../../images/global/icons/image-nest-thermostat-eco-large.jpg");
  background-repeat: no-repeat;
  background-size: 90px 90px; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .icon.image-nest-thermostat-large--away, .icon.image-nest-thermostat-large--eco {
      background-image: url("../../images/global/icons/image-nest-thermostat-eco-large_2x.jpg"); } }
  .icon.image-nest-thermostat-large--away:lang(en-CA), .icon.image-nest-thermostat-large--eco:lang(en-CA) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-CA.jpg");
    background-repeat: no-repeat;
    background-size: 90px 90px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat-large--away:lang(en-CA), .icon.image-nest-thermostat-large--eco:lang(en-CA) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-CA_2x.jpg"); } }
  .icon.image-nest-thermostat-large--away:lang(fr-CA), .icon.image-nest-thermostat-large--eco:lang(fr-CA) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-CA.jpg");
    background-repeat: no-repeat;
    background-size: 90px 90px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat-large--away:lang(fr-CA), .icon.image-nest-thermostat-large--eco:lang(fr-CA) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-CA_2x.jpg"); } }
  .icon.image-nest-thermostat-large--away:lang(en-GB), .icon.image-nest-thermostat-large--eco:lang(en-GB) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-EU.jpg");
    background-repeat: no-repeat;
    background-size: 90px 90px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat-large--away:lang(en-GB), .icon.image-nest-thermostat-large--eco:lang(en-GB) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-EU_2x.jpg"); } }
  .icon.image-nest-thermostat-large--away:lang(en-IE), .icon.image-nest-thermostat-large--eco:lang(en-IE) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-EU.jpg");
    background-repeat: no-repeat;
    background-size: 90px 90px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat-large--away:lang(en-IE), .icon.image-nest-thermostat-large--eco:lang(en-IE) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-EU_2x.jpg"); } }
  .icon.image-nest-thermostat-large--away:lang(fr-FR), .icon.image-nest-thermostat-large--eco:lang(fr-FR) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-EU.jpg");
    background-repeat: no-repeat;
    background-size: 90px 90px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat-large--away:lang(fr-FR), .icon.image-nest-thermostat-large--eco:lang(fr-FR) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-EU_2x.jpg"); } }
  .icon.image-nest-thermostat-large--away:lang(fr-BE), .icon.image-nest-thermostat-large--eco:lang(fr-BE) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-EU.jpg");
    background-repeat: no-repeat;
    background-size: 90px 90px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat-large--away:lang(fr-BE), .icon.image-nest-thermostat-large--eco:lang(fr-BE) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-EU_2x.jpg"); } }
  .icon.image-nest-thermostat-large--away:lang(nl-NL), .icon.image-nest-thermostat-large--eco:lang(nl-NL) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-EU.jpg");
    background-repeat: no-repeat;
    background-size: 90px 90px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat-large--away:lang(nl-NL), .icon.image-nest-thermostat-large--eco:lang(nl-NL) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-EU_2x.jpg"); } }
  .icon.image-nest-thermostat-large--away:lang(nl-BE), .icon.image-nest-thermostat-large--eco:lang(nl-BE) {
    background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-EU.jpg");
    background-repeat: no-repeat;
    background-size: 90px 90px; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .icon.image-nest-thermostat-large--away:lang(nl-BE), .icon.image-nest-thermostat-large--eco:lang(nl-BE) {
        background-image: url("../../images/global/icons/image-nest-thermostat-eco-large-EU_2x.jpg"); } }

.icon.image-wwn-whirlpool {
  background-image: url("../../images/global/icons/image-whirlpool.jpg");
  background-repeat: no-repeat;
  background-size: 80px 80px; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .icon.image-wwn-whirlpool {
      background-image: url("../../images/global/icons/image-whirlpool_2x.jpg"); } }

.icon.image-wwn-lifx {
  background-image: url("../../images/global/icons/image-lifx.jpg");
  background-repeat: no-repeat;
  background-size: 80px 80px; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .icon.image-wwn-lifx {
      background-image: url("../../images/global/icons/image-lifx_2x.jpg"); } }

.icon.image-wwn-google-home {
  background-image: url("../../images/global/icons/image-googlehome.jpg");
  background-repeat: no-repeat;
  background-size: 80px 80px; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .icon.image-wwn-google-home {
      background-image: url("../../images/global/icons/image-googlehome_2x.jpg"); } }

.icon.image-wwn-jennair {
  background-image: url("../../images/global/icons/image-jennair.jpg");
  background-repeat: no-repeat;
  background-size: 80px 80px; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .icon.image-wwn-jennair {
      background-image: url("../../images/global/icons/image-jennair_2x.jpg"); } }

.icon {
  display: inline-block;
  background: transparent center center no-repeat;
  vertical-align: middle;
  margin-bottom: 9px;
  width: 40px;
  height: 40px; }
  @media (min-width: 768px) {
    .icon {
      margin-bottom: 15px; } }
  .icon.icon-247 {
    background-image: url("../../images/global/icons/247.svg"); }
  .icon.icon-two-way-audio {
    background-image: url("../../images/global/icons/two-way-audio.svg"); }
  .icon.icon-phone-alert-2 {
    background-image: url("../../images/global/icons/phone-alert-2.svg"); }
  .icon.icon-slider-play-button {
    background-image: url("../../images/global/icons/slider-play-button.svg"); }
  .icon.icon-small-play {
    background-image: url("../../images/global/icons/small-play.svg"); }
  .icon.icon-external-link {
    background-image: url("../../images/global/icons/external-link.svg"); }
  .icon.icon-replay {
    background-image: url("../../images/global/icons/replay.svg"); }

/*** Anchor Links ***/
/**
  Anchor
    By default, anchor tags are Nest blue with no other decoration.
    On hover or focus, the link color changes to `$nl-gray`.

  @markup: <a href="#" title="Localizable Text" itemprop="url">Localizable Link Text</a>
**/
a,
a:visited {
  text-decoration: none;
  color: #00AFD8;
  transition: color 0.2s ease-in-out, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent; }
  a.nl-blue-alt,
  a:visited.nl-blue-alt {
    color: #3adaff; }
  a.underline-treatment,
  a:visited.underline-treatment {
    display: inline;
    color: #7B858E;
    border-bottom: 1px solid #7B858E; }

.no-touchevents a:hover {
  color: #3d4247; }

.no-touchevents a.hover-white:hover {
  color: #ffffff; }

.no-touchevents a.underline-treatment:hover {
  color: #00AFD8; }

.no-touchevents a[href^="tel:"] {
  pointer-events: none;
  color: inherit; }

/** @ignore **/
/*** Buttons ***/
/*
  We use Nest blue on white for any selections made on the page

  @markup n/a
*/
::selection {
  background: #00AFD8;
  color: #ffffff;
  text-shadow: none; }

/**
  Chevron
    Wrapper class for the @see[`chevron`, mixins.chevrons.chevron] mixin.

  @markup: <a href="#" class="chevron">Continue&nbsp;<b>&gt;</b></a>
  @markup: <a href="#" class="chevron left"><b>&lt;</b>&nbsp;Go Back</a>
**/
.chevron {
  position: relative;
  cursor: pointer; }
  .chevron b {
    position: relative;
    line-height: 0;
    -webkit-transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
    transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
    font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1.1em;
    bottom: 0; }
  .chevron b {
    margin-left: -0.15em;
    right: -.27em; }
  .chevron:focus b, .chevron:hover b, .chevron:active b {
    right: -.4em; }
  .chevron.left {
    position: relative;
    cursor: pointer; }
    .chevron.left b {
      position: relative;
      line-height: 0;
      -webkit-transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
      transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
      font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-size: 1.1em;
      bottom: 0; }
    .chevron.left b {
      margin-right: -0.15em;
      margin-left: 0;
      left: -0.27em;
      right: auto; }
    .chevron.left:focus b, .chevron.left:hover b, .chevron.left:active b {
      left: -.4em; }

/**
  Button
    Wrapper class for the @see[`nl-button`, mixins.buttons.button] mixin.

  @markup: <a href="/" class="nl-button">Continue</a>
  @markup: <button class="nl-button">Continue</button>
**/
.nl-button,
.nl-button:visited {
  cursor: pointer;
  border: none;
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  overflow: hidden;
  font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-style: normal;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 2px;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease;
  background-color: #FFA02F;
  color: #ffffff;
  padding: 0.8em 1.1em 0.6em; }
  .no-touchevents .nl-button:hover, .no-touchevents
  .nl-button:visited:hover {
    background-color: #3d4247;
    color: #ffffff; }
  .nl-button.disabled, .nl-button[disabled],
  .nl-button:visited.disabled,
  .nl-button:visited[disabled] {
    cursor: default !important;
    background-color: #DBE3E5;
    color: #ffffff; }
    .no-touchevents .nl-button.disabled:hover, .no-touchevents .nl-button[disabled]:hover, .no-touchevents
    .nl-button:visited.disabled:hover, .no-touchevents
    .nl-button:visited[disabled]:hover {
      background-color: #DBE3E5;
      color: #ffffff; }
  .nl-button.wide,
  .nl-button:visited.wide {
    cursor: pointer;
    border: none;
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    overflow: hidden;
    font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-style: normal;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 2px;
    -webkit-font-smoothing: antialiased;
    -webkit-appearance: none;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
    background-color: #FFA02F;
    color: #ffffff;
    padding: 0.8em 4.2em 0.6em; }
    .no-touchevents .nl-button.wide:hover, .no-touchevents
    .nl-button:visited.wide:hover {
      background-color: #3d4247;
      color: #ffffff; }
    .nl-button.wide.disabled, .nl-button.wide[disabled],
    .nl-button:visited.wide.disabled,
    .nl-button:visited.wide[disabled] {
      cursor: default !important;
      background-color: #DBE3E5;
      color: #ffffff; }
      .no-touchevents .nl-button.wide.disabled:hover, .no-touchevents .nl-button.wide[disabled]:hover, .no-touchevents
      .nl-button:visited.wide.disabled:hover, .no-touchevents
      .nl-button:visited.wide[disabled]:hover {
        background-color: #DBE3E5;
        color: #ffffff; }

/**
  Color Button
    Wrapper class for the @see[`nl-button`, mixins.buttons.button] mixin with colors.

  @markup: <a href="/" class="nl-button orange">Continue</a>
  @markup: <button class="nl-button grey">Continue</button>
  @markup: <a href="/" class="nl-button blue">Continue</a>
  @markup-dark: <button class="nl-button white">Continue</button>
  @markup: <a href="/" class="nl-button dark-gray">Continue</a>
  @markup: <button class="nl-button darker-gray">Continue</button>
**/
.nl-button,
.nl-button:visited {
  cursor: pointer;
  border: none;
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  overflow: hidden;
  font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-style: normal;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 2px;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease;
  background-color: #FFA02F;
  color: #ffffff;
  padding: 0.8em 1.1em 0.6em; }
  .no-touchevents .nl-button:hover, .no-touchevents
  .nl-button:visited:hover {
    background-color: #3d4247;
    color: #ffffff; }
  .nl-button.disabled, .nl-button[disabled],
  .nl-button:visited.disabled,
  .nl-button:visited[disabled] {
    cursor: default !important;
    background-color: #DBE3E5;
    color: #ffffff; }
    .no-touchevents .nl-button.disabled:hover, .no-touchevents .nl-button[disabled]:hover, .no-touchevents
    .nl-button:visited.disabled:hover, .no-touchevents
    .nl-button:visited[disabled]:hover {
      background-color: #DBE3E5;
      color: #ffffff; }
  .nl-button.orange,
  .nl-button:visited.orange {
    background-color: #FFA02F;
    color: #ffffff; }
    .no-touchevents .nl-button.orange:hover, .no-touchevents
    .nl-button:visited.orange:hover {
      background-color: #3d4247;
      color: #ffffff; }
    .nl-button.orange.disabled, .nl-button.orange[disabled],
    .nl-button:visited.orange.disabled,
    .nl-button:visited.orange[disabled] {
      cursor: default !important;
      background-color: #DBE3E5;
      color: #ffffff; }
      .no-touchevents .nl-button.orange.disabled:hover, .no-touchevents .nl-button.orange[disabled]:hover, .no-touchevents
      .nl-button:visited.orange.disabled:hover, .no-touchevents
      .nl-button:visited.orange[disabled]:hover {
        background-color: #DBE3E5;
        color: #ffffff; }
  .nl-button.blue,
  .nl-button:visited.blue {
    background-color: #00AFD8;
    color: #ffffff; }
    .no-touchevents .nl-button.blue:hover, .no-touchevents
    .nl-button:visited.blue:hover {
      background-color: #3d4247;
      color: #ffffff; }
    .nl-button.blue.disabled, .nl-button.blue[disabled],
    .nl-button:visited.blue.disabled,
    .nl-button:visited.blue[disabled] {
      cursor: default !important;
      background-color: #DBE3E5;
      color: #ffffff; }
      .no-touchevents .nl-button.blue.disabled:hover, .no-touchevents .nl-button.blue[disabled]:hover, .no-touchevents
      .nl-button:visited.blue.disabled:hover, .no-touchevents
      .nl-button:visited.blue[disabled]:hover {
        background-color: #DBE3E5;
        color: #ffffff; }
  .nl-button.gray, .nl-button.grey,
  .nl-button:visited.gray,
  .nl-button:visited.grey {
    background-color: #95a1aa;
    color: #ffffff; }
    .no-touchevents .nl-button.gray:hover, .no-touchevents .nl-button.grey:hover, .no-touchevents
    .nl-button:visited.gray:hover, .no-touchevents
    .nl-button:visited.grey:hover {
      background-color: #3d4247;
      color: #ffffff; }
    .nl-button.gray.disabled, .nl-button.gray[disabled], .nl-button.grey.disabled, .nl-button.grey[disabled],
    .nl-button:visited.gray.disabled,
    .nl-button:visited.gray[disabled],
    .nl-button:visited.grey.disabled,
    .nl-button:visited.grey[disabled] {
      cursor: default !important;
      background-color: #DBE3E5;
      color: #ffffff; }
      .no-touchevents .nl-button.gray.disabled:hover, .no-touchevents .nl-button.gray[disabled]:hover, .no-touchevents .nl-button.grey.disabled:hover, .no-touchevents .nl-button.grey[disabled]:hover, .no-touchevents
      .nl-button:visited.gray.disabled:hover, .no-touchevents
      .nl-button:visited.gray[disabled]:hover, .no-touchevents
      .nl-button:visited.grey.disabled:hover, .no-touchevents
      .nl-button:visited.grey[disabled]:hover {
        background-color: #DBE3E5;
        color: #ffffff; }
  .nl-button.dark-gray, .nl-button.dark-grey,
  .nl-button:visited.dark-gray,
  .nl-button:visited.dark-grey {
    background-color: #7B858E;
    color: #ffffff; }
    .no-touchevents .nl-button.dark-gray:hover, .no-touchevents .nl-button.dark-grey:hover, .no-touchevents
    .nl-button:visited.dark-gray:hover, .no-touchevents
    .nl-button:visited.dark-grey:hover {
      background-color: #3d4247;
      color: #ffffff; }
    .nl-button.dark-gray.disabled, .nl-button.dark-gray[disabled], .nl-button.dark-grey.disabled, .nl-button.dark-grey[disabled],
    .nl-button:visited.dark-gray.disabled,
    .nl-button:visited.dark-gray[disabled],
    .nl-button:visited.dark-grey.disabled,
    .nl-button:visited.dark-grey[disabled] {
      cursor: default !important;
      background-color: #DBE3E5;
      color: #ffffff; }
      .no-touchevents .nl-button.dark-gray.disabled:hover, .no-touchevents .nl-button.dark-gray[disabled]:hover, .no-touchevents .nl-button.dark-grey.disabled:hover, .no-touchevents .nl-button.dark-grey[disabled]:hover, .no-touchevents
      .nl-button:visited.dark-gray.disabled:hover, .no-touchevents
      .nl-button:visited.dark-gray[disabled]:hover, .no-touchevents
      .nl-button:visited.dark-grey.disabled:hover, .no-touchevents
      .nl-button:visited.dark-grey[disabled]:hover {
        background-color: #DBE3E5;
        color: #ffffff; }
  .nl-button.darker-gray, .nl-button.darker-grey,
  .nl-button:visited.darker-gray,
  .nl-button:visited.darker-grey {
    background-color: #5e656c;
    color: #ffffff; }
    .no-touchevents .nl-button.darker-gray:hover, .no-touchevents .nl-button.darker-grey:hover, .no-touchevents
    .nl-button:visited.darker-gray:hover, .no-touchevents
    .nl-button:visited.darker-grey:hover {
      background-color: #3d4247;
      color: #ffffff; }
    .nl-button.darker-gray.disabled, .nl-button.darker-gray[disabled], .nl-button.darker-grey.disabled, .nl-button.darker-grey[disabled],
    .nl-button:visited.darker-gray.disabled,
    .nl-button:visited.darker-gray[disabled],
    .nl-button:visited.darker-grey.disabled,
    .nl-button:visited.darker-grey[disabled] {
      cursor: default !important;
      background-color: #DBE3E5;
      color: #ffffff; }
      .no-touchevents .nl-button.darker-gray.disabled:hover, .no-touchevents .nl-button.darker-gray[disabled]:hover, .no-touchevents .nl-button.darker-grey.disabled:hover, .no-touchevents .nl-button.darker-grey[disabled]:hover, .no-touchevents
      .nl-button:visited.darker-gray.disabled:hover, .no-touchevents
      .nl-button:visited.darker-gray[disabled]:hover, .no-touchevents
      .nl-button:visited.darker-grey.disabled:hover, .no-touchevents
      .nl-button:visited.darker-grey[disabled]:hover {
        background-color: #DBE3E5;
        color: #ffffff; }
  .nl-button.white,
  .nl-button:visited.white {
    background-color: #ffffff;
    color: #00AFD8; }
    .no-touchevents .nl-button.white:hover, .no-touchevents
    .nl-button:visited.white:hover {
      color: #ffffff;
      background-color: #3d4247; }
    .nl-button.white.disabled, .nl-button.white[disabled],
    .nl-button:visited.white.disabled,
    .nl-button:visited.white[disabled] {
      cursor: default !important;
      background-color: #DBE3E5;
      color: #ffffff; }
      .no-touchevents .nl-button.white.disabled:hover, .no-touchevents .nl-button.white[disabled]:hover, .no-touchevents
      .nl-button:visited.white.disabled:hover, .no-touchevents
      .nl-button:visited.white[disabled]:hover {
        background-color: #DBE3E5;
        color: #ffffff; }
  .nl-button.porcelain,
  .nl-button:visited.porcelain {
    background-color: #f2f2f2;
    color: #7B858E; }
    .no-touchevents .nl-button.porcelain:hover, .no-touchevents
    .nl-button:visited.porcelain:hover {
      background-color: #7B858E;
      color: #ffffff; }
    .nl-button.porcelain.disabled, .nl-button.porcelain[disabled],
    .nl-button:visited.porcelain.disabled,
    .nl-button:visited.porcelain[disabled] {
      cursor: default !important;
      background-color: #DBE3E5;
      color: #ffffff; }
      .no-touchevents .nl-button.porcelain.disabled:hover, .no-touchevents .nl-button.porcelain[disabled]:hover, .no-touchevents
      .nl-button:visited.porcelain.disabled:hover, .no-touchevents
      .nl-button:visited.porcelain[disabled]:hover {
        background-color: #DBE3E5;
        color: #ffffff; }
  .nl-button.mystic,
  .nl-button:visited.mystic {
    background-color: #DBE3E5;
    color: #7B858E; }
    .no-touchevents .nl-button.mystic:hover, .no-touchevents
    .nl-button:visited.mystic:hover {
      background-color: #7B858E;
      color: #ffffff; }
    .nl-button.mystic.disabled, .nl-button.mystic[disabled],
    .nl-button:visited.mystic.disabled,
    .nl-button:visited.mystic[disabled] {
      cursor: default !important;
      background-color: #DBE3E5;
      color: #ffffff; }
      .no-touchevents .nl-button.mystic.disabled:hover, .no-touchevents .nl-button.mystic[disabled]:hover, .no-touchevents
      .nl-button:visited.mystic.disabled:hover, .no-touchevents
      .nl-button:visited.mystic[disabled]:hover {
        background-color: #DBE3E5;
        color: #ffffff; }
  .nl-button.iron,
  .nl-button:visited.iron {
    background-color: #95a1aa;
    color: #ffffff; }
    .no-touchevents .nl-button.iron:hover, .no-touchevents
    .nl-button:visited.iron:hover {
      background-color: #3d4247;
      color: #ffffff; }
    .nl-button.iron.disabled, .nl-button.iron[disabled],
    .nl-button:visited.iron.disabled,
    .nl-button:visited.iron[disabled] {
      cursor: default !important;
      background-color: #DBE3E5;
      color: #ffffff; }
      .no-touchevents .nl-button.iron.disabled:hover, .no-touchevents .nl-button.iron[disabled]:hover, .no-touchevents
      .nl-button:visited.iron.disabled:hover, .no-touchevents
      .nl-button:visited.iron[disabled]:hover {
        background-color: #DBE3E5;
        color: #ffffff; }
  .nl-button.oslo,
  .nl-button:visited.oslo {
    background-color: #7B858E;
    color: #ffffff; }
    .no-touchevents .nl-button.oslo:hover, .no-touchevents
    .nl-button:visited.oslo:hover {
      background-color: #3d4247;
      color: #ffffff; }
    .nl-button.oslo.disabled, .nl-button.oslo[disabled],
    .nl-button:visited.oslo.disabled,
    .nl-button:visited.oslo[disabled] {
      cursor: default !important;
      background-color: #DBE3E5;
      color: #ffffff; }
      .no-touchevents .nl-button.oslo.disabled:hover, .no-touchevents .nl-button.oslo[disabled]:hover, .no-touchevents
      .nl-button:visited.oslo.disabled:hover, .no-touchevents
      .nl-button:visited.oslo[disabled]:hover {
        background-color: #DBE3E5;
        color: #ffffff; }
  .nl-button.raven,
  .nl-button:visited.raven {
    background-color: #8A9299;
    color: #ffffff; }
    .no-touchevents .nl-button.raven:hover, .no-touchevents
    .nl-button:visited.raven:hover {
      background-color: #3d4247;
      color: #ffffff; }
    .nl-button.raven.disabled, .nl-button.raven[disabled],
    .nl-button:visited.raven.disabled,
    .nl-button:visited.raven[disabled] {
      cursor: default !important;
      background-color: #DBE3E5;
      color: #ffffff; }
      .no-touchevents .nl-button.raven.disabled:hover, .no-touchevents .nl-button.raven[disabled]:hover, .no-touchevents
      .nl-button:visited.raven.disabled:hover, .no-touchevents
      .nl-button:visited.raven[disabled]:hover {
        background-color: #DBE3E5;
        color: #ffffff; }
  .nl-button.boulder,
  .nl-button:visited.boulder {
    background-color: #5e656c;
    color: #ffffff; }
    .no-touchevents .nl-button.boulder:hover, .no-touchevents
    .nl-button:visited.boulder:hover {
      background-color: #3d4247;
      color: #ffffff; }
    .nl-button.boulder.disabled, .nl-button.boulder[disabled],
    .nl-button:visited.boulder.disabled,
    .nl-button:visited.boulder[disabled] {
      cursor: default !important;
      background-color: #DBE3E5;
      color: #ffffff; }
      .no-touchevents .nl-button.boulder.disabled:hover, .no-touchevents .nl-button.boulder[disabled]:hover, .no-touchevents
      .nl-button:visited.boulder.disabled:hover, .no-touchevents
      .nl-button:visited.boulder[disabled]:hover {
        background-color: #DBE3E5;
        color: #ffffff; }

/**
  Chevron Button
    This class uses the @see[`nl-button`, mixins.buttons.nl-button]
    and @see[`chevron`, mixins.buttons.chevron] mixins.

  @markup: <a href="/" class="nl-button chevron">Continue&nbsp;<b>&gt;</b></a>
  @markup: <button class="nl-button chevron">Continue&nbsp;<b>&gt;</b></button>
  @markup: <a href="/" class="nl-button wide chevron">Continue&nbsp;<b>&gt;</b></a>
  @markup: <button class="nl-button wide chevron">Continue&nbsp;<b>&gt;</b></button>
  @markup: <a href="/" class="nl-button chevron left"><b>&lt;</b>&nbsp;Go Back</a>
  @markup: <button class="nl-button chevron left"><b>&lt;</b>&nbsp;Go Back</button>
  @markup: <a href="/" class="nl-button wide chevron left"><b>&lt;</b>&nbsp;Go Back</a>
  @markup: <button class="nl-button wide chevron left"><b>&lt;</b>&nbsp;Go Back</button>
**/
.nl-button.chevron {
  position: relative;
  cursor: pointer;
  padding-right: 1.7em; }
  .nl-button.chevron b {
    position: relative;
    line-height: 0;
    -webkit-transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
    transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
    font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1.1em;
    bottom: 0; }
  .nl-button.chevron b {
    margin-left: -0.15em;
    right: -.27em; }
  .nl-button.chevron:focus b, .nl-button.chevron:hover b, .nl-button.chevron:active b {
    right: -.4em; }
  .nl-button.chevron b {
    font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1.3em;
    bottom: -.05em;
    margin-left: 0.2em; }
  .no-touchevents .nl-button.chevron:hover b {
    right: -.5em; }
  .no-touchevents .nl-button.chevron:hover[disabled] b, .no-touchevents .nl-button.chevron:hover:disabled b {
    right: -.27em; }
  .nl-button.chevron.wide {
    position: relative;
    cursor: pointer; }
    .nl-button.chevron.wide b {
      position: relative;
      line-height: 0;
      -webkit-transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
      transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
      font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-size: 1.1em;
      bottom: 0; }
    .nl-button.chevron.wide b {
      margin-left: -0.15em;
      right: -.27em; }
    .nl-button.chevron.wide:focus b, .nl-button.chevron.wide:hover b, .nl-button.chevron.wide:active b {
      right: -.4em; }
    .nl-button.chevron.wide b {
      font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-size: 1.3em;
      bottom: -.05em;
      margin-left: 0.2em; }
    .no-touchevents .nl-button.chevron.wide:hover b {
      right: -.5em; }
    .no-touchevents .nl-button.chevron.wide:hover[disabled] b, .no-touchevents .nl-button.chevron.wide:hover:disabled b {
      right: -.27em; }

.nl-button.chevron.left {
  position: relative;
  cursor: pointer;
  padding-right: 1.1em;
  padding-left: 1.7em; }
  .nl-button.chevron.left b {
    position: relative;
    line-height: 0;
    -webkit-transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
    transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
    font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1.1em;
    bottom: 0; }
  .nl-button.chevron.left b {
    margin-right: -0.15em;
    margin-left: 0;
    left: -0.27em;
    right: auto; }
  .nl-button.chevron.left:focus b, .nl-button.chevron.left:hover b, .nl-button.chevron.left:active b {
    left: -.4em; }
  .nl-button.chevron.left b {
    font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1.3em;
    bottom: -.05em;
    margin-left: 0.2em; }
  .nl-button.chevron.left b {
    margin-right: 0.2em;
    margin-left: auto; }
  .nl-button.chevron.left:active b {
    left: -.5em; }
  .nl-button.chevron.left:active[disabled] b, .nl-button.chevron.left:active:disabled b {
    left: -.27em; }
  .nl-button.chevron.left.wide {
    position: relative;
    cursor: pointer; }
    .nl-button.chevron.left.wide b {
      position: relative;
      line-height: 0;
      -webkit-transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
      transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
      font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-size: 1.1em;
      bottom: 0; }
    .nl-button.chevron.left.wide b {
      margin-right: -0.15em;
      margin-left: 0;
      left: -0.27em;
      right: auto; }
    .nl-button.chevron.left.wide:focus b, .nl-button.chevron.left.wide:hover b, .nl-button.chevron.left.wide:active b {
      left: -.4em; }
    .nl-button.chevron.left.wide b {
      font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-size: 1.3em;
      bottom: -.05em;
      margin-left: 0.2em; }
    .nl-button.chevron.left.wide b {
      margin-right: 0.2em;
      margin-left: auto; }
    .nl-button.chevron.left.wide:active b {
      left: -.5em; }
    .nl-button.chevron.left.wide:active[disabled] b, .nl-button.chevron.left.wide:active:disabled b {
      left: -.27em; }

/**
  Watch Video Button
    This class uses the @see[`nl-button`, mixins.buttons.nl-button]
    and @see[`watch-video-button`, mixins.buttons.watch-video-button] mixins.

  @markup: <a href="/" class="nl-button watch-video-button">Watch Video</a>
  @markup: <button class="nl-button watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button blue watch-video-button">Watch Video</a>
  @markup: <button class="nl-button blue watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button wide watch-video-button">Watch Video</a>
  @markup: <button class="nl-button wide watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button wide blue watch-video-button">Watch Video</a>
  @markup: <button class="nl-button wide blue watch-video-button">Watch Video</button>
**/
.nl-button.watch-video-button {
  line-height: 1.5em; }
  .nl-button.watch-video-button:after {
    content: "";
    display: inline-block;
    background: transparent center center no-repeat;
    background-image: url("../../images/global/icons/watch-video-knockout-white.svg");
    background-size: cover;
    width: 25px;
    height: 25px;
    margin-left: 10px;
    vertical-align: middle;
    margin-top: -0.95em;
    margin-bottom: -0.75em; }

/*** Forms ***/
/**
  Placeholder
**/
::-webkit-input-placeholder {
  display: block;
  color: #95a1aa; }

::-moz-placeholder {
  display: block;
  color: #95a1aa; }

:-ms-input-placeholder {
  display: block;
  color: #95a1aa; }

/**
  Input Boxes
    Input boxes have thick gray borders.

  @markup: <input type="date" />
  @markup: <input type="datetime" />
  @markup: <input type="datetime-local" />
  @markup: <input type="email" />
  @markup: <input type="month" />
  @markup: <input type="number" />
  @markup: <input type="password" />
  @markup: <input type="tel" />
  @markup: <input type="text" />
  @markup: <input type="time" />
  @markup: <input type="url" />
  @markup: <input type="week" />
  @markup: <textarea></textarea>
**/
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=url],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=month],
input[type=time],
input[type=week],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Remove default shadow */
  border-radius: 2px;
  /* Remove rounded corners on iOS */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #DBE3E5;
  width: 100%;
  padding: 10px;
  font-size: 12px;
  font-size: 1.2rem;
  color: #7B858E;
  color: #3d4247; }

label {
  display: block;
  color: #3d4247;
  margin-bottom: 5px; }

select,
select.nl-select {
  border: 4px solid #E2E7E8;
  -webkit-appearance: none;
  /* Remove default shadow */
  border-radius: 0;
  height: 34px;
  width: 200px;
  padding: 5px;
  background: url("https://video.nest.com/images/global/select_arrow.png") right center no-repeat white; }

select[multiple] {
  background: none;
  height: 68px; }

/*** Header ***/
/*== The site header ==*/
/*! Copyright 2012-2015 Nest Labs, All rights reserved */
/*! Copyright 2013-2015 Nest Labs, All rights reserved */
/*! Copyright 2013 Nest Labs, All rights reserved */
/*** Colors ***/
/** @variable: colors **/
/**
  Brand

  @grid
    nl-blue nl-orange nl-green nl-gray nl-red
**/
/**
  Grays

  @grid
    pearl  porcelain  mercury  mystic   iron
    raven  oslo       boulder  emperor  -
**/
/**
  Generic

  @grid
    white  off-white  polar  black
**/
/**
  Color Maps

  @grid
    background-light  background-med     background-dark  -f
    nav-link          nav-link-hover     -                -
    body-copy         body-copy-dark     link             link-hover
    border-color      border-color-dark  -                -
    icon-light        icon-med           icon-dark        -
    quote-background  -                  -                -
    product-footer-background  product-footer-border  -   -
**/
/*** Typography ***/
/** @variable: typography **/
/** Base: Unit Variables **/
/** Variables: Tech Specs **/
/*! Copyright 2016 Nest Labs, All rights reserved */
/*** CSS3 ***/
/**
  Box Model
    Set block-level element to contain margins and padding in defined width

  @usage: @include box;
**/
/**
  Transitions
    Set CSS3 transitions on elements

  @usage:
    @include transition(color 0.25s ease-in-out);
    @include transition( (background 0.25s ease-in-out),(color 0.25s ease-in-out) );

  !warning:
    `transition: transform ...` will not be prefixed properly. Need to manually write it.
**/
/**
  Transition Delays
    Set custom delay timing on element transitions

  @usage:
    @include transition-delay(0.25s);
**/
/**
  Transform
    Set (prefixed) CSS3 transform.
**/
/**
  Box Shadow
    Set (prefixed) CSS3 box shadow
**/
/*** App Store Buttons ***/
/**
  App Store Button
    Mixin to make a button for the Apple App Store.

  @usage:
    @include app-store-button();
    @include app-store-button(30px);
**/
/**
  Play Store Button
    Mixin to make a button for the Google Play Store.

  @usage:
    @include play-store-button();
    @include play-store-button(30px);
**/
/*** Block Grids ***/
/*== Equal width blocks ==*/
/**
  Block Grid Base
    For the parent element that holds grid items.
**/
/**
  Block Grid Columns
    Sets the number of columns for the grid.
**/
/*** Block Quotes ***/
/**
  Quote Mark Size
    Use to adjust the sizes of openning and closing quote marks
    - i.e. calculate a proper text-indent value (px) that keeps
    consistent spacing between the marks and the quote text.

  @param $quote-mark-size
    size of the openning and closing quote marks
  @param $vertical-adjustment
    the font-size of the quote mark will not vertically align properly
    to the design, we have to micro this value
**/
/*** Buttons ***/
/**
  Button
    The nl-button is the stylized button that we use accross the site.

  @markup: <a href="/" class="nl-button">Continue</a>
  @markup: <button class="nl-button">Continue</button>
**/
/**
  Chevron Button
    The nl-button works in concert with the `.chevron` class to give you a chevron animation on hover.

  @note: '>' = '`&gt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup: <a href="/" class="nl-button chevron">Continue&nbsp;<b>&gt;</b></a>
  @markup: <button class="nl-button chevron">Continue&nbsp;<b>&gt;</b></button>
  @markup: <a href="/" class="nl-button wide chevron">Continue&nbsp;<b>&gt;</b></a>
  @markup: <button class="nl-button wide chevron">Continue&nbsp;<b>&gt;</b></button>


  <p> When you want to have a left chevron, use the `left` classname with `nl-button` and `chevron`.

  @note: '<' = '`&lt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup: <a href="/" class="nl-button chevron left"><b>&lt;</b>&nbsp;Go Back</a>
  @markup: <button class="nl-button chevron left"><b>&lt;</b>&nbsp;Go Back</button>
  @markup: <a href="/" class="nl-button wide chevron left"><b>&lt;</b>&nbsp;Go Back</a>
  @markup: <button class="nl-button wide chevron left"><b>&lt;</b>&nbsp;Go Back</button>
**/
/**
  Watch Video Button
    The nl-button works in concert with the `.watch-video-button` class to give you a watch video icon in the button.

  @markup: <a href="/" class="nl-button watch-video-button">Watch Video</a>
  @markup: <button class="nl-button watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button blue watch-video-button">Watch Video</a>
  @markup: <button class="nl-button blue watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button wide watch-video-button">Watch Video</a>
  @markup: <button class="nl-button wide watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button wide blue watch-video-button">Watch Video</a>
  @markup: <button class="nl-button wide blue watch-video-button">Watch Video</button>

**/
/**
  Color Button
    The nl-button supports several colors.

  @markup: <a href="/" class="nl-button orange">Continue</a>
  @markup: <button class="nl-button grey">Continue</button>
  @markup: <a href="/" class="nl-button blue">Continue</a>
  @markup-dark: <button class="nl-button white">Continue</button>
  @markup: <a href="/" class="nl-button dark-gray">Continue</a>
  @markup: <button class="nl-button darker-gray">Continue</button>
**/
/*** Chevrons ***/
/**
  Chevron
    Chevrons are used on nearly all of Nest's links and buttons.
    The chevron class sets the font on the <b>&gt;</b> and adds an animation for hover/focus.

  @note: '>' = '`&gt;`' and '<' = '`&lt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup <a href="#" class="chevron">Continue&nbsp;<b>&gt;</b></a>

  @markup <a href="#" class="chevron left"><b>&lt;</b>&nbsp;Go Back</a>
**/
/*** Circular Icons ***/
/**
  Inactive Pagination Color
    Sets the color for inactive pagination.
**/
/**
  Circular Icon Theme

  <p> Use on the container such as `<li>` and container receives active class.

  !warning: `$size` must have a unit
**/
/**
  Circular Icon Size
    Sets size of circular pagination icon.
**/
/**
  Circular Icon Group Base
**/
/**
  Gallery Arrow Base
**/
/*** Gradients ***/
/**
  Gradients, Linear
    @include linear-gradient(top, #fefefe, #dedede);
**/
/*** Icons ***/
/*== Set Size, Set Layout, Set Base Styles ==*/
/**
  Icon Size
    Set the icon size. Use on the element that you set icon class.
    This allows abstraction of implementation detail from the feature,
      i.e. If we use a new technique to set icon size, we do not have
      to search and replace for the whole project

  <p> If passing only `$icon-width`, the `$icon-height` will equals to the width.
      If passing both values, you can specify both width and height

  @usage: 
    @include set-icon-size($icon-size, 65px);  // 40 x 65 (px)
    @include set-icon-size(65px);              // 65 x 65 (px)
    @include set-icon-size(50px, 60px);        // 50 x 60 (px)

  @param $icon-width
    @default icon size from _variables.scss
  @param $icon-height
    @default set equal width & height
**/
/**
  Icon Layout
    Set layout (position) of icon against text content.
    Use on the element that you set icon class.

  @param $layout { "horizontal", "vertical" }
    @default "vertical"
    $layout "vertical"   - icon on top of the text and align left
    $layout "horizontal" - icon by the text on the left, hanging text

  @param $horizontal-spacing
    Set space between icon and next sibling (e.g. label span).
    Only for horizontal layout.
**/
/**
  Icon Base
    Use to set base styling for .icon.
    Use if you want to set this on an element without using .icon class.

  @param $layout { "horizontal", "vertical" }
    @default "vertical"
**/
/*** Images ***/
/*== Background, inline images, retina, etc. ==*/
/**
  Background Image
    Set a bg-image, retina version and size.

  @usage:
    @include background-image('index/slide_thermostat/us_mobile.jpg', 'index/slide_thermostat/us_mobile_2x.jpg', cover);
**/
/**
  Transparent RGBA Background
    Choose a color and get RGBA IE-Friendly output.
    http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

  @usage: @include background-transparent(#000, 0.5);
**/
/**
  Textured Background
    Set a bg-color and overlay a texture

  @usage: @include textured-background($nl-gray);
**/
/*
  Rules passed into this will only be valid when the document is
  set to the specified language(s)

  example usage:

  @include language(en)

  will essentialy do:

  @include locale(en)
  @include locale(en-US)
  @include locale(en-GB)
  @include locale(en-CA)
  @include locale(en-IE)

  @mixin
  @param language(s)
  @param content
*/
/*** Layouts ***/
/**
  Section Container
**/
/**
  Section Layout
**/
/*** Localization ***/
/*== Country-specific mixins ==*/
/**
  Locale
    Scope CSS to specific locales

  @usage:
    @include locale('fr-FR') {}
    @include locale('fr-FR','fr-BE') {}
**/
/** @ignore **/
/**
  Loc v2

  Rules passed into this will only be valid when the document is
  set to the specified locale

  ** TODO: edit me & add blocks of comments for each new mixin added here
  // @include loc("en-CA") {
  //   background: red;
  // }
  // @include loc("en-C2A") {
  //   background: red;
  // }
  @mixin
  @param $locale IETF language tag
  @param content
*/
/*** Modular ***/
/*== Modules, Sizing, etc ==*/
/**
  Size
    Set height & width of an element. Border-radius is optional.

  @usage:
    @include size(120px, 100px);
    @include size(120px, 100px, 200px);
**/
/** 
  Border Radius
    Set border-radius on all corners

  @usage: @include border-radius(10px);
**/
/**
  Border Radius, Each
    Set border-radius on individual corners

  @usage:
    @include border-radius-each(10px, 12px);
    @include border-radius-each(10px, 12px, 14px, 16px);
**/
/** 
  Clearfix
    Clear custom floats

  @usage: @include clearfix;
**/
/*! Copyright 2013 Nest Labs, All rights reserved */
/*** Columns ***/
/**
  Column
**/
/**
  Columns
**/
/**
  Offset
**/
/**
  Two Columns
**/
/**
  Column Set
**/
/** @ignore **/
/*** Pill Controls ***/
/**
  Pills Size
**/
/*** Positioning ***/
/*== Centering, etc ==*/
/** 
  Center
    Absolutely position and transform to the center

  @usage: @include center;
**/
/**
  Vertical Center
    Absolutely position and transform to the center, vertically

  @usage: @include center-vertical;
**/
/** 
  Horizontal Center
    Absolutely position and transform/margin to the center, horizontally

  @usage:
    @include center-horizontal;
    @include center-horizontal(static);
**/
/**
  Overlay
    Absolutely position and fill the positioned parent width & height

  @usage:
    @include overlay;
    @include overlay(1);
**/
/*** Responsive Helpers ***/
/*== Media queries ==*/
/** 
  Media Queries: MIN
    Automatically sets configuration for non-responsive pages.

  @usage: @include mq(768px) {}
**/
/**
  Media Queries: MAX
    Automatically sets configuration for non-responsive pages.

  @usage: @include mq_max(767px) {}
**/
/**
  Retina Content
    Scope CSS to retina devices only

  @usage: @include retina() {}
**/
/**
  Remove Web Tap Highlight
  
  @usage: @include no-tap-higlight();
**/
/*** Responsive Media ***/
/*== Video, div of Scalable Background Image ==*/
/** 
  Responsive Media Wrapper
    Source: http://webdesignerwall.com/tutorials/css-elastic-videos
**/
/**
  Responsive Media Base
    Just leverage/delegate "overlay" mixin
**/
/**
  Responsive Media Size
    Use on media wrapper, not the media itself.

  <p> Suggest adding `background-size: cover`
      if using this for scalable `<div>` using background image
**/
/*** Sections ***/
/**
  Element Color
    Set color of elements on a section.
    Default to null, so it will not be set
    unless a value is passed in.
**/
/**
  Border
**/
/*** SVG ***/
/*== SVG Generation and Manipulation ==*/
/**
  Sprite Background

  @usage: @include svg-background.....
**/
/*** Tabs ***/
/*== Set base styles on tab container ==*/
/**
  Tab Container
**/
/**
  Font Sizing
    Set a px value and it outputs px and calcs Rem

  @usage: @include font-size(14);
**/
/**
  Line Heights
    Set a px value and it outputs px and calcs Rem

  @usage: @include line-height(14);
**/
/**
  Image Replacement

  @usage: @include ir;
**/
/** @ignore **/
/*** Watch Video Links ***/
/**
  Watch Video Size
    Use to set play (watch-video) icon to match the font-size.

  <p> Do not wrap left/right in quotes as a string.
      Error when we pass left/right as a string to background-position

  @param $font-size
  @param $icon-size
  @param $spacing

  <p> Pass the sizes (px value "with the unit") that we use for
      the watch-video copy, icon, and spacing between the copy and icon
**/
/**
  Watch Video Color
    Set play (watch-video) icon to match the font-color.

  <p> Ensure to add the SVG icon file if you use a new,
      not-yet-defined mixins like `set-watch-video-color--nl-gray`
      else during the build process, it will add up to the CSS filesize
**/
/**
  References:
  http://davidwalsh.name/html5-placeholder-css
  https://css-tricks.com/snippets/css/style-placeholder-text/
*/
/**
  Sets the background image to be the image at the specified URL,
  accepts an optional second parameter for a Retina version

  @mixin
  @param $image URL of normal image
  @param $image-2x (optional) url of Retina image
*/
/*
  START: DEPRECATED MIXINS USED IN WIDGETS
*/
/*
  END: DEPRECATED MIXINS USED IN WIDGETS
*/
/**
  Header
    The site header.
**/
.header-bar {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: relative;
  z-index: 301;
  background: #ffffff;
  margin: 0 auto;
  border-bottom: 1px solid #95a1aa;
  width: 100%;
  height: 45px; }
  .header-bar .container {
    height: 100%; }
  .header-bar:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    content: '';
    background: #ffffff;
    border-bottom: 1px solid #95a1aa;
    width: 100%;
    height: 100%; }

@media (min-width: 768px) {
  .header-bar .container {
    position: relative; } }

@media (min-width: 960px) {
  .header-bar {
    height: 80px;
    border-bottom: none; }
    .header-bar:after {
      display: none; } }

.logo.nest-logo {
  display: block;
  position: absolute;
  left: 30px;
  top: 10px;
  z-index: 400;
  overflow: hidden; }

@media (min-width: 600px) {
  .logo.nest-logo {
    left: 30px; } }

@media (min-width: 960px) {
  .logo.nest-logo {
    top: 28px; } }

/*! Copyright 2012-2015 Nest Labs, All rights reserved */
/*! Copyright 2013-2015 Nest Labs, All rights reserved */
/*! Copyright 2013 Nest Labs, All rights reserved */
/*** Colors ***/
/** @variable: colors **/
/**
  Brand

  @grid
    nl-blue nl-orange nl-green nl-gray nl-red
**/
/**
  Grays

  @grid
    pearl  porcelain  mercury  mystic   iron
    raven  oslo       boulder  emperor  -
**/
/**
  Generic

  @grid
    white  off-white  polar  black
**/
/**
  Color Maps

  @grid
    background-light  background-med     background-dark  -f
    nav-link          nav-link-hover     -                -
    body-copy         body-copy-dark     link             link-hover
    border-color      border-color-dark  -                -
    icon-light        icon-med           icon-dark        -
    quote-background  -                  -                -
    product-footer-background  product-footer-border  -   -
**/
/*** Typography ***/
/** @variable: typography **/
/** Base: Unit Variables **/
/** Variables: Tech Specs **/
/*! Copyright 2016 Nest Labs, All rights reserved */
/*** CSS3 ***/
/**
  Box Model
    Set block-level element to contain margins and padding in defined width

  @usage: @include box;
**/
/**
  Transitions
    Set CSS3 transitions on elements

  @usage:
    @include transition(color 0.25s ease-in-out);
    @include transition( (background 0.25s ease-in-out),(color 0.25s ease-in-out) );

  !warning:
    `transition: transform ...` will not be prefixed properly. Need to manually write it.
**/
/**
  Transition Delays
    Set custom delay timing on element transitions

  @usage:
    @include transition-delay(0.25s);
**/
/**
  Transform
    Set (prefixed) CSS3 transform.
**/
/**
  Box Shadow
    Set (prefixed) CSS3 box shadow
**/
/*** App Store Buttons ***/
/**
  App Store Button
    Mixin to make a button for the Apple App Store.

  @usage:
    @include app-store-button();
    @include app-store-button(30px);
**/
/**
  Play Store Button
    Mixin to make a button for the Google Play Store.

  @usage:
    @include play-store-button();
    @include play-store-button(30px);
**/
/*** Block Grids ***/
/*== Equal width blocks ==*/
/**
  Block Grid Base
    For the parent element that holds grid items.
**/
/**
  Block Grid Columns
    Sets the number of columns for the grid.
**/
/*** Block Quotes ***/
/**
  Quote Mark Size
    Use to adjust the sizes of openning and closing quote marks
    - i.e. calculate a proper text-indent value (px) that keeps
    consistent spacing between the marks and the quote text.

  @param $quote-mark-size
    size of the openning and closing quote marks
  @param $vertical-adjustment
    the font-size of the quote mark will not vertically align properly
    to the design, we have to micro this value
**/
/*** Buttons ***/
/**
  Button
    The nl-button is the stylized button that we use accross the site.

  @markup: <a href="/" class="nl-button">Continue</a>
  @markup: <button class="nl-button">Continue</button>
**/
/**
  Chevron Button
    The nl-button works in concert with the `.chevron` class to give you a chevron animation on hover.

  @note: '>' = '`&gt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup: <a href="/" class="nl-button chevron">Continue&nbsp;<b>&gt;</b></a>
  @markup: <button class="nl-button chevron">Continue&nbsp;<b>&gt;</b></button>
  @markup: <a href="/" class="nl-button wide chevron">Continue&nbsp;<b>&gt;</b></a>
  @markup: <button class="nl-button wide chevron">Continue&nbsp;<b>&gt;</b></button>


  <p> When you want to have a left chevron, use the `left` classname with `nl-button` and `chevron`.

  @note: '<' = '`&lt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup: <a href="/" class="nl-button chevron left"><b>&lt;</b>&nbsp;Go Back</a>
  @markup: <button class="nl-button chevron left"><b>&lt;</b>&nbsp;Go Back</button>
  @markup: <a href="/" class="nl-button wide chevron left"><b>&lt;</b>&nbsp;Go Back</a>
  @markup: <button class="nl-button wide chevron left"><b>&lt;</b>&nbsp;Go Back</button>
**/
/**
  Watch Video Button
    The nl-button works in concert with the `.watch-video-button` class to give you a watch video icon in the button.

  @markup: <a href="/" class="nl-button watch-video-button">Watch Video</a>
  @markup: <button class="nl-button watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button blue watch-video-button">Watch Video</a>
  @markup: <button class="nl-button blue watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button wide watch-video-button">Watch Video</a>
  @markup: <button class="nl-button wide watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button wide blue watch-video-button">Watch Video</a>
  @markup: <button class="nl-button wide blue watch-video-button">Watch Video</button>

**/
/**
  Color Button
    The nl-button supports several colors.

  @markup: <a href="/" class="nl-button orange">Continue</a>
  @markup: <button class="nl-button grey">Continue</button>
  @markup: <a href="/" class="nl-button blue">Continue</a>
  @markup-dark: <button class="nl-button white">Continue</button>
  @markup: <a href="/" class="nl-button dark-gray">Continue</a>
  @markup: <button class="nl-button darker-gray">Continue</button>
**/
/*** Chevrons ***/
/**
  Chevron
    Chevrons are used on nearly all of Nest's links and buttons.
    The chevron class sets the font on the <b>&gt;</b> and adds an animation for hover/focus.

  @note: '>' = '`&gt;`' and '<' = '`&lt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup <a href="#" class="chevron">Continue&nbsp;<b>&gt;</b></a>

  @markup <a href="#" class="chevron left"><b>&lt;</b>&nbsp;Go Back</a>
**/
/*** Circular Icons ***/
/**
  Inactive Pagination Color
    Sets the color for inactive pagination.
**/
/**
  Circular Icon Theme

  <p> Use on the container such as `<li>` and container receives active class.

  !warning: `$size` must have a unit
**/
/**
  Circular Icon Size
    Sets size of circular pagination icon.
**/
/**
  Circular Icon Group Base
**/
/**
  Gallery Arrow Base
**/
/*** Gradients ***/
/**
  Gradients, Linear
    @include linear-gradient(top, #fefefe, #dedede);
**/
/*** Icons ***/
/*== Set Size, Set Layout, Set Base Styles ==*/
/**
  Icon Size
    Set the icon size. Use on the element that you set icon class.
    This allows abstraction of implementation detail from the feature,
      i.e. If we use a new technique to set icon size, we do not have
      to search and replace for the whole project

  <p> If passing only `$icon-width`, the `$icon-height` will equals to the width.
      If passing both values, you can specify both width and height

  @usage: 
    @include set-icon-size($icon-size, 65px);  // 40 x 65 (px)
    @include set-icon-size(65px);              // 65 x 65 (px)
    @include set-icon-size(50px, 60px);        // 50 x 60 (px)

  @param $icon-width
    @default icon size from _variables.scss
  @param $icon-height
    @default set equal width & height
**/
/**
  Icon Layout
    Set layout (position) of icon against text content.
    Use on the element that you set icon class.

  @param $layout { "horizontal", "vertical" }
    @default "vertical"
    $layout "vertical"   - icon on top of the text and align left
    $layout "horizontal" - icon by the text on the left, hanging text

  @param $horizontal-spacing
    Set space between icon and next sibling (e.g. label span).
    Only for horizontal layout.
**/
/**
  Icon Base
    Use to set base styling for .icon.
    Use if you want to set this on an element without using .icon class.

  @param $layout { "horizontal", "vertical" }
    @default "vertical"
**/
/*** Images ***/
/*== Background, inline images, retina, etc. ==*/
/**
  Background Image
    Set a bg-image, retina version and size.

  @usage:
    @include background-image('index/slide_thermostat/us_mobile.jpg', 'index/slide_thermostat/us_mobile_2x.jpg', cover);
**/
/**
  Transparent RGBA Background
    Choose a color and get RGBA IE-Friendly output.
    http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

  @usage: @include background-transparent(#000, 0.5);
**/
/**
  Textured Background
    Set a bg-color and overlay a texture

  @usage: @include textured-background($nl-gray);
**/
/*
  Rules passed into this will only be valid when the document is
  set to the specified language(s)

  example usage:

  @include language(en)

  will essentialy do:

  @include locale(en)
  @include locale(en-US)
  @include locale(en-GB)
  @include locale(en-CA)
  @include locale(en-IE)

  @mixin
  @param language(s)
  @param content
*/
/*** Layouts ***/
/**
  Section Container
**/
/**
  Section Layout
**/
/*** Localization ***/
/*== Country-specific mixins ==*/
/**
  Locale
    Scope CSS to specific locales

  @usage:
    @include locale('fr-FR') {}
    @include locale('fr-FR','fr-BE') {}
**/
/** @ignore **/
/**
  Loc v2

  Rules passed into this will only be valid when the document is
  set to the specified locale

  ** TODO: edit me & add blocks of comments for each new mixin added here
  // @include loc("en-CA") {
  //   background: red;
  // }
  // @include loc("en-C2A") {
  //   background: red;
  // }
  @mixin
  @param $locale IETF language tag
  @param content
*/
/*** Modular ***/
/*== Modules, Sizing, etc ==*/
/**
  Size
    Set height & width of an element. Border-radius is optional.

  @usage:
    @include size(120px, 100px);
    @include size(120px, 100px, 200px);
**/
/** 
  Border Radius
    Set border-radius on all corners

  @usage: @include border-radius(10px);
**/
/**
  Border Radius, Each
    Set border-radius on individual corners

  @usage:
    @include border-radius-each(10px, 12px);
    @include border-radius-each(10px, 12px, 14px, 16px);
**/
/** 
  Clearfix
    Clear custom floats

  @usage: @include clearfix;
**/
/*! Copyright 2013 Nest Labs, All rights reserved */
/*** Columns ***/
/**
  Column
**/
/**
  Columns
**/
/**
  Offset
**/
/**
  Two Columns
**/
/**
  Column Set
**/
/** @ignore **/
/*** Pill Controls ***/
/**
  Pills Size
**/
/*** Positioning ***/
/*== Centering, etc ==*/
/** 
  Center
    Absolutely position and transform to the center

  @usage: @include center;
**/
/**
  Vertical Center
    Absolutely position and transform to the center, vertically

  @usage: @include center-vertical;
**/
/** 
  Horizontal Center
    Absolutely position and transform/margin to the center, horizontally

  @usage:
    @include center-horizontal;
    @include center-horizontal(static);
**/
/**
  Overlay
    Absolutely position and fill the positioned parent width & height

  @usage:
    @include overlay;
    @include overlay(1);
**/
/*** Responsive Helpers ***/
/*== Media queries ==*/
/** 
  Media Queries: MIN
    Automatically sets configuration for non-responsive pages.

  @usage: @include mq(768px) {}
**/
/**
  Media Queries: MAX
    Automatically sets configuration for non-responsive pages.

  @usage: @include mq_max(767px) {}
**/
/**
  Retina Content
    Scope CSS to retina devices only

  @usage: @include retina() {}
**/
/**
  Remove Web Tap Highlight
  
  @usage: @include no-tap-higlight();
**/
/*** Responsive Media ***/
/*== Video, div of Scalable Background Image ==*/
/** 
  Responsive Media Wrapper
    Source: http://webdesignerwall.com/tutorials/css-elastic-videos
**/
/**
  Responsive Media Base
    Just leverage/delegate "overlay" mixin
**/
/**
  Responsive Media Size
    Use on media wrapper, not the media itself.

  <p> Suggest adding `background-size: cover`
      if using this for scalable `<div>` using background image
**/
/*** Sections ***/
/**
  Element Color
    Set color of elements on a section.
    Default to null, so it will not be set
    unless a value is passed in.
**/
/**
  Border
**/
/*** SVG ***/
/*== SVG Generation and Manipulation ==*/
/**
  Sprite Background

  @usage: @include svg-background.....
**/
/*** Tabs ***/
/*== Set base styles on tab container ==*/
/**
  Tab Container
**/
/**
  Font Sizing
    Set a px value and it outputs px and calcs Rem

  @usage: @include font-size(14);
**/
/**
  Line Heights
    Set a px value and it outputs px and calcs Rem

  @usage: @include line-height(14);
**/
/**
  Image Replacement

  @usage: @include ir;
**/
/** @ignore **/
/*** Watch Video Links ***/
/**
  Watch Video Size
    Use to set play (watch-video) icon to match the font-size.

  <p> Do not wrap left/right in quotes as a string.
      Error when we pass left/right as a string to background-position

  @param $font-size
  @param $icon-size
  @param $spacing

  <p> Pass the sizes (px value "with the unit") that we use for
      the watch-video copy, icon, and spacing between the copy and icon
**/
/**
  Watch Video Color
    Set play (watch-video) icon to match the font-color.

  <p> Ensure to add the SVG icon file if you use a new,
      not-yet-defined mixins like `set-watch-video-color--nl-gray`
      else during the build process, it will add up to the CSS filesize
**/
/**
  References:
  http://davidwalsh.name/html5-placeholder-css
  https://css-tricks.com/snippets/css/style-placeholder-text/
*/
/**
  Sets the background image to be the image at the specified URL,
  accepts an optional second parameter for a Retina version

  @mixin
  @param $image URL of normal image
  @param $image-2x (optional) url of Retina image
*/
/*
  START: DEPRECATED MIXINS USED IN WIDGETS
*/
/*
  END: DEPRECATED MIXINS USED IN WIDGETS
*/
.nest-logo {
  display: block;
  vertical-align: middle;
  -webkit-appearance: none;
  background: transparent center center no-repeat;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9 IjAgMCAxMDUuMyA0Ny42Ij48cGF0aCBmaWxsPSIjOTVBMEE5IiBkPSJNMTA1LjMg MTUuNlY4LjRoLTUuOVYwaC03LjJ2OC40SDc3LjdjLTYuNyAwLTExLjYgNC41LTEx LjYgMTAuNyAwIC43LjEgMS40LjIgMi4xQzY0LjEgMTMuNCA1OCA4LjQgNDkuOSA4 LjRjLTkuOSAwLTE3LjUgNy43LTE4LjEgMTguMXYtMi4yYzAtOC44LTcuMS0xNS45 LTE1LjktMTUuOVMwIDE1LjYgMCAyNC40djIyLjhoNy4zVjI0LjRjMC00LjggMy45 LTguNiA4LjYtOC42IDQuOCAwIDguNiAzLjkgOC42IDguNnYyMi44aDcuM1YyOS40 Yy42IDEwLjUgOC4zIDE4LjIgMTguMyAxOC4yIDYuMSAwIDExLjUtMy42IDE0LjYt Ny43IDIuMyA0LjkgNi43IDcuNyAxMi4yIDcuNyA2LjQgMCAxMi44LTQuMSAxMi44 LTExLjkgMC00LjctMi43LTguNS03LjYtMTAuNy0uNi0uMy0xLjEtLjUtMS42LS44 aC0uMWMtLjYtLjMtMS4xLS41LTEuNy0uOC0zLjEtMS40LTQuNy0yLjUtNC43LTQu NiAwLTEuOSAxLjctMy4yIDMuNy0zLjJoMTQuNXYyMC4zYzAgNi41IDUuMyAxMS43 IDExLjcgMTEuN3YtNy4yYy0yLjUgMC00LjUtMi00LjUtNC41VjE1LjZoNS45em0t NTUuNC0uMWM1LjcgMCA4LjQgMy45IDkuMiA3LjlINDAuM2MxLTQuMSA0LjUtNy45 IDkuNi03Ljl6TTc4LjcgMzJjMiAuOSAzLjIgMi41IDMuMiA0LjQgMCAyLjUtMS45 IDMuOS01LjEgMy45LTMuNCAwLTQuOS0zLTUuMy0zLjlsLS41LTEuMUg1OC44Yy0x LjYgMi43LTQuOCA1LjEtOC42IDUuMS02LjggMC0xMC4xLTUuMy0xMC42LTEwLjVo MjcuNnYtMS4xYzAtMi4yLS4yLTQuMi0uNi02LjEuOCAyLjQgMi42IDQuOSA2LjQg Ni43IDEuNS43IDMuNSAxLjcgNS43IDIuNnoiLz48L3N2Zz4=");
  display: block;
  overflow: hidden;
  background-repeat: no-repeat;
  direction: ltr;
  text-indent: -999em;
  text-align: left;
  width: 52px;
  height: 24px; }

#nl-modal-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease-out, visibility 300ms ease-out;
  /**
    The modal-backdrop is generated by javascript

    @markup <div id="modal-backdrop"></div>
  */ }
  #nl-modal-container.visible {
    opacity: 1;
    visibility: visible; }
  #nl-modal-container #nl-modal-backdrop {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background: #ffffff;
    opacity: 0.8;
    -webkit-overflow-scrolling: touch; }

body.modal-open {
  overflow: hidden; }

/*! Copyright 2013 Nest Labs, All rights reserved */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes bloop {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.01; }
  10%, 20% {
    -webkit-transform: scale(0.2); }
  30% {
    -webkit-transform: scale(0.8);
    opacity: 1; }
  40%, 50% {
    -webkit-transform: scale(1.05); }
  60% {
    -webkit-transform: scale(1.1); }
  70%, 80% {
    -webkit-transform: scale(1.05); }
  90%, 100% {
    -webkit-transform: scale(1); } }

@keyframes bloop {
  0% {
    transform: scale(0);
    opacity: 0; }
  10%, 20% {
    transform: scale(0.2); }
  30% {
    transform: scale(0.8);
    opacity: 1; }
  40%, 50% {
    transform: scale(1.05); }
  60% {
    transform: scale(1.1); }
  70%, 80% {
    transform: scale(1.05); }
  90%, 100% {
    transform: scale(1); } }

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

@-webkit-keyframes flicker {
  0%, 40%, 50%, 90%, 100% {
    opacity: .5; }
  10%, 30%, 60%, 80% {
    opacity: 1; } }

@keyframes flicker {
  0%, 40%, 50%, 90%, 100% {
    opacity: .5; }
  10%, 30%, 60%, 80% {
    opacity: 1; } }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-ms-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-moz-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-o-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-ms-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px); } }

@-moz-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -moz-transform: translateY(0); }
  100% {
    opacity: 0;
    -moz-transform: translateY(20px); } }

@-o-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -o-transform: translateY(0); }
  100% {
    opacity: 0;
    -o-transform: translateY(20px); } }

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0;
    transform: translateY(20px); } }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px); }
  100% {
    opacity: 1;
    -moz-transform: translateY(0); } }

@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(20px); }
  100% {
    opacity: 1;
    -o-transform: translateY(0); } }

@-ms-keyframes fadeInUp {
  0% {
    opacity: 0;
    -ms-transform: translateY(20px); }
  100% {
    opacity: 1;
    -ms-transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px); }
  100% {
    opacity: 1;
    -moz-transform: translateY(0); } }

@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-20px); }
  100% {
    opacity: 1;
    -o-transform: translateY(0); } }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-20px); }
  100% {
    opacity: 1;
    -moz-transform: translateX(0); } }

@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-20px); }
  100% {
    opacity: 1;
    -o-transform: translateX(0); } }

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@-moz-keyframes fadeInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(20px); }
  100% {
    opacity: 1;
    -moz-transform: translateX(0); } }

@-o-keyframes fadeInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(20px); }
  100% {
    opacity: 1;
    -o-transform: translateX(0); } }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@-webkit-keyframes fadeInThenOut {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  25% {
    opacity: 1; }
  70% {
    opacity: 1; }
  75% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-moz-keyframes fadeInThenOut {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  25% {
    opacity: 1; }
  70% {
    opacity: 1; }
  75% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-o-keyframes fadeInThenOut {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  25% {
    opacity: 1; }
  70% {
    opacity: 1; }
  75% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes fadeInThenOut {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  25% {
    opacity: 1; }
  70% {
    opacity: 1; }
  75% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-webkit-keyframes fadeInThenOutSlow {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  45% {
    opacity: 1; }
  80% {
    opacity: 1; }
  95% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-moz-keyframes fadeInThenOutSlow {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  45% {
    opacity: 1; }
  80% {
    opacity: 1; }
  95% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-o-keyframes fadeInThenOutSlow {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  45% {
    opacity: 1; }
  80% {
    opacity: 1; }
  95% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes fadeInThenOutSlow {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  45% {
    opacity: 1; }
  80% {
    opacity: 1; }
  95% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-webkit-keyframes wwnNestHomeIntroFade {
  0% {
    opacity: 0.2; }
  10% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-moz-keyframes wwnNestHomeIntroFade {
  0% {
    opacity: 0.2; }
  10% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-o-keyframes wwnNestHomeIntroFade {
  0% {
    opacity: 0.2; }
  10% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes wwnNestHomeIntroFade {
  0% {
    opacity: 0.2; }
  10% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes animateStroke {
  0% {
    stroke-dashoffset: 920; }
  100% {
    stroke-dashoffset: 0; } }

@-moz-keyframes animateStroke {
  0% {
    stroke-dashoffset: 920; }
  100% {
    stroke-dashoffset: 0; } }

@-o-keyframes animateStroke {
  0% {
    stroke-dashoffset: 920; }
  100% {
    stroke-dashoffset: 0; } }

@keyframes animateStroke {
  0% {
    stroke-dashoffset: 920; }
  100% {
    stroke-dashoffset: 0; } }

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(2.75); }
  50% {
    -webkit-transform: scale(4.25); }
  100% {
    -webkit-transform: scale(2.75); } }

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(2.75); }
  50% {
    -moz-transform: scale(4.25); }
  100% {
    -moz-transform: scale(2.75); } }

@keyframes pulse {
  0% {
    transform: scale(2.75); }
  50% {
    transform: scale(4.25); }
  100% {
    transform: scale(2.75); } }

@-webkit-keyframes bloop {
  0% {
    -webkit-transform: scale(0); }
  50% {
    -webkit-transform: scale(1.25); }
  100% {
    -webkit-transform: scale(1); } }

@-moz-keyframes bloop {
  0% {
    -moz-transform: scale(0); }
  50% {
    -moz-transform: scale(1.25); }
  100% {
    -moz-transform: scale(1); } }

@keyframes bloop {
  0% {
    transform: scale(0); }
  50% {
    transform: scale(1.25); }
  100% {
    transform: scale(1); } }

@-webkit-keyframes bloopMedium {
  0% {
    -webkit-transform: scale(0); }
  50% {
    -webkit-transform: scale(2.5); }
  100% {
    -webkit-transform: scale(1); } }

@-moz-keyframes bloopMedium {
  0% {
    -moz-transform: scale(0); }
  50% {
    -moz-transform: scale(2.5); }
  100% {
    -moz-transform: scale(1); } }

@keyframes bloopMedium {
  0% {
    transform: scale(0); }
  50% {
    transform: scale(2.5); }
  100% {
    transform: scale(1); } }

@-webkit-keyframes bloopInvert {
  0% {
    -webkit-transform: scale(1); }
  20% {
    -webkit-transform: scale(1.25); }
  40% {
    -webkit-transform: scale(1); }
  100% {
    -webkit-transform: scale(0); } }

@-moz-keyframes bloopInvert {
  0% {
    -moz-transform: scale(1); }
  20% {
    -moz-transform: scale(1.25); }
  40% {
    -moz-transform: scale(1); }
  100% {
    -moz-transform: scale(0); } }

@keyframes bloopInvert {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1.25); }
  40% {
    transform: scale(1); }
  100% {
    transform: scale(0); } }

@-webkit-keyframes bloopInvertFade {
  0% {
    -webkit-transform: scale(1); }
  20% {
    -webkit-transform: scale(1.25); }
  40% {
    -webkit-transform: scale(1); }
  100% {
    -webkit-transform: scale(0);
    visibility: hidden;
    opacity: 0; } }

@-moz-keyframes bloopInvertFade {
  0% {
    -moz-transform: scale(1); }
  20% {
    -moz-transform: scale(1.25); }
  40% {
    -moz-transform: scale(1); }
  100% {
    -moz-transform: scale(0);
    visibility: hidden;
    opacity: 0; } }

@keyframes bloopInvertFade {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1.25); }
  40% {
    transform: scale(1); }
  100% {
    transform: scale(0);
    visibility: hidden;
    opacity: 0; } }

@-webkit-keyframes bloopScale {
  0% {
    -webkit-transform: scale(0); }
  100% {
    -webkit-transform: scale(1); } }

@-moz-keyframes bloopScale {
  0% {
    -moz-transform: scale(0); }
  100% {
    -moz-transform: scale(1); } }

@keyframes bloopScale {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1); } }

@-webkit-keyframes rotate {
  0% {
    -webkit-transform-origin: 50%;
    -webkit-transform: rotate(360deg); }
  100% {
    -webkit-transform-origin: 50%;
    -webkit-transform: none; } }

@-moz-keyframes rotate {
  0% {
    -moz-transform-origin: 50%;
    -moz-transform: rotate(360deg); }
  100% {
    -moz-transform-origin: 50%;
    -moz-transform: none; } }

@-ms-keyframes rotate {
  0% {
    -ms-transform-origin: 50%;
    -ms-transform: rotate(360deg); }
  100% {
    -ms-transform-origin: 50%;
    -ms-transform: none; } }

@keyframes rotate {
  0% {
    transform-origin: 50%;
    transform: rotate(360deg); }
  100% {
    transform-origin: 50%;
    transform: none; } }

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(200%); }
  100% {
    -webkit-transform: translateY(0); } }

@-moz-keyframes slideUp {
  0% {
    -moz-transform: translateY(200%); }
  100% {
    -moz-transform: translateY(0); } }

@-o-keyframes slideUp {
  0% {
    -o-transform: translateY(200%); }
  100% {
    -o-transform: translateY(0); } }

@-ms-keyframes slideUp {
  0% {
    -ms-transform: translateY(200%); }
  100% {
    -ms-transform: translateY(0); } }

@keyframes slideUp {
  0% {
    transform: translateY(200%); }
  100% {
    transform: translateY(0); } }

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(-200%); }
  100% {
    -webkit-transform: translateX(0); } }

@-moz-keyframes slideInRight {
  0% {
    -moz-transform: translateX(-200%); }
  100% {
    -moz-transform: translateX(0); } }

@-o-keyframes slideInRight {
  0% {
    -o-transform: translateX(-200%); }
  100% {
    -o-transform: translateX(0); } }

@-ms-keyframes slideInRight {
  0% {
    -ms-transform: translateX(-200%); }
  100% {
    -ms-transform: translateX(0); } }

@keyframes slideInRight {
  0% {
    transform: translateX(-200%); }
  100% {
    transform: translateX(0); } }

@-webkit-keyframes nightlyPromise {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  60% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-moz-keyframes nightlyPromise {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  60% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-o-keyframes nightlyPromise {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  60% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-ms-keyframes nightlyPromise {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  60% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes nightlyPromise {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  60% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes MeetD3SeeYourSavingsInfiniteFade {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  50% {
    opacity: 1; }
  60% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-moz-keyframes MeetD3SeeYourSavingsInfiniteFade {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  50% {
    opacity: 1; }
  60% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-o-keyframes MeetD3SeeYourSavingsInfiniteFade {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  50% {
    opacity: 1; }
  60% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes MeetD3SeeYourSavingsInfiniteFade {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  50% {
    opacity: 1; }
  60% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-webkit-keyframes InstallD3ProTruck {
  0% {
    -webkit-transform: translateX(-200%); }
  65% {
    -webkit-transform: translateX(3%); }
  80% {
    -webkit-transform: translateX(-2%); }
  100% {
    -webkit-transform: translateX(0); } }

@-moz-keyframes InstallD3ProTruck {
  0% {
    -moz-transform: translateX(-200%); }
  65% {
    -moz-transform: translateX(3%); }
  80% {
    -moz-transform: translateX(-2%); }
  100% {
    -moz-transform: translateX(0); } }

@-o-keyframes InstallD3ProTruck {
  0% {
    -o-transform: translateX(-200%); }
  65% {
    -o-transform: translateX(3%); }
  80% {
    -o-transform: translateX(-2%); }
  100% {
    -o-transform: translateX(0); } }

@-ms-keyframes InstallD3ProTruck {
  0% {
    -ms-transform: translateX(-200%); }
  65% {
    -ms-transform: translateX(3%); }
  80% {
    -ms-transform: translateX(-2%); }
  100% {
    -ms-transform: translateX(0); } }

@keyframes InstallD3ProTruck {
  0% {
    transform: translateX(-200%); }
  65% {
    transform: translateX(3%); }
  80% {
    transform: translateX(-2%); }
  100% {
    transform: translateX(0); } }

@-webkit-keyframes wwnProtectRingDetectsSmoke {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  40% {
    opacity: 0; }
  60% {
    opacity: 1; }
  80% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-moz-keyframes wwnProtectRingDetectsSmoke {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  40% {
    opacity: 0; }
  60% {
    opacity: 1; }
  80% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-o-keyframes wwnProtectRingDetectsSmoke {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  40% {
    opacity: 0; }
  60% {
    opacity: 1; }
  80% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-ms-keyframes wwnProtectRingDetectsSmoke {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  40% {
    opacity: 0; }
  60% {
    opacity: 1; }
  80% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes wwnProtectRingDetectsSmoke {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  40% {
    opacity: 0; }
  60% {
    opacity: 1; }
  80% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes cloudsAnimation {
  0% {
    -webkit-transform: translateX(0); }
  100% {
    -webkit-transform: translateX(-1440px); } }

@-moz-keyframes cloudsAnimation {
  0% {
    -moz-transform: translateX(0); }
  100% {
    -moz-transform: translateX(-1440px); } }

@-o-keyframes cloudsAnimation {
  0% {
    -o-transform: translateX(0); }
  100% {
    -o-transform: translateX(-1440px); } }

@-ms-keyframes cloudsAnimation {
  0% {
    -ms-transform: translateX(0); }
  100% {
    -ms-transform: translateX(-1440px); } }

@keyframes cloudsAnimation {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-1440px); } }

@-webkit-keyframes scaleInOut {
  0% {
    -webkit-transform: scale(1); }
  50% {
    -webkit-transform: scale(1.2); }
  100% {
    -webkit-transform: scale(1); } }

@keyframes scaleInOut {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }

@-webkit-keyframes cuckooAnimation {
  0% {
    -webkit-transform: translateX(0); }
  40% {
    -webkit-transform: translateX(-292px); }
  60% {
    -webkit-transform: translateX(-272px); }
  80% {
    -webkit-transform: translateX(-285px); }
  100% {
    -webkit-transform: translateX(-280px); } }

@-moz-keyframes cuckooAnimation {
  0% {
    -moz-transform: translateX(0); }
  40% {
    -moz-transform: translateX(-292px); }
  60% {
    -moz-transform: translateX(-272px); }
  80% {
    -moz-transform: translateX(-285px); }
  100% {
    -moz-transform: translateX(-280px); } }

@-o-keyframes cuckooAnimation {
  0% {
    -o-transform: translateX(0); }
  40% {
    -o-transform: translateX(-292px); }
  60% {
    -o-transform: translateX(-272px); }
  80% {
    -o-transform: translateX(-285px); }
  100% {
    -o-transform: translateX(-280px); } }

@-ms-keyframes cuckooAnimation {
  0% {
    -ms-transform: translateX(0); }
  40% {
    -ms-transform: translateX(-292px); }
  60% {
    -ms-transform: translateX(-272px); }
  80% {
    -ms-transform: translateX(-285px); }
  100% {
    -ms-transform: translateX(-280px); } }

@keyframes cuckooAnimation {
  0% {
    transform: translateX(0); }
  40% {
    transform: translateX(-292px); }
  60% {
    transform: translateX(-272px); }
  80% {
    transform: translateX(-285px); }
  100% {
    transform: translateX(-280px); } }

@-webkit-keyframes minuteAnimation {
  0% {
    -webkit-transform: rotateZ(0); }
  33% {
    -webkit-transform: rotateZ(360deg); }
  66% {
    -webkit-transform: rotateZ(720deg); }
  100% {
    -webkit-transform: rotateZ(1080deg); } }

@-moz-keyframes minuteAnimation {
  0% {
    -moz-transform: rotateZ(0); }
  33% {
    -moz-transform: rotateZ(360deg); }
  66% {
    -moz-transform: rotateZ(720deg); }
  100% {
    -moz-transform: rotateZ(1080deg); } }

@-o-keyframes minuteAnimation {
  0% {
    -o-transform: rotateZ(0); }
  33% {
    -o-transform: rotateZ(360deg); }
  66% {
    -o-transform: rotateZ(720deg); }
  100% {
    -o-transform: rotateZ(1080deg); } }

@-ms-keyframes minuteAnimation {
  0% {
    -ms-transform: rotateZ(0); }
  33% {
    -ms-transform: rotateZ(360deg); }
  66% {
    -ms-transform: rotateZ(720deg); }
  100% {
    -ms-transform: rotateZ(1080deg); } }

@keyframes minuteAnimation {
  0% {
    transform: rotateZ(0); }
  33% {
    transform: rotateZ(360deg); }
  66% {
    transform: rotateZ(720deg); }
  100% {
    transform: rotateZ(1080deg); } }

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(-3px); }
  50% {
    -webkit-transform: translateY(3px); }
  100% {
    -webkit-transform: translateY(-3px); } }

@-moz-keyframes bounce {
  0% {
    -moz-transform: translateY(-3px); }
  50% {
    -moz-transform: translateY(3px); }
  100% {
    -moz-transform: translateY(-3px); } }

@-o-keyframes bounce {
  0% {
    -o-transform: translateY(-3px); }
  50% {
    -o-transform: translateY(3px); }
  100% {
    -o-transform: translateY(-3px); } }

@keyframes bounce {
  0% {
    transform: translateY(-3px); }
  50% {
    transform: translateY(3px); }
  100% {
    transform: translateY(-3px); } }

@-webkit-keyframes hourAnimation {
  0% {
    -webkit-transform: rotateZ(-60deg); }
  100% {
    -webkit-transform: rotateZ(30deg); } }

@-moz-keyframes hourAnimation {
  0% {
    -moz-transform: rotateZ(-60deg); }
  100% {
    -moz-transform: rotateZ(30deg); } }

@-o-keyframes hourAnimation {
  0% {
    -o-transform: rotateZ(-60deg); }
  100% {
    -o-transform: rotateZ(30deg); } }

@-ms-keyframes hourAnimation {
  0% {
    -ms-transform: rotateZ(-60deg); }
  100% {
    -ms-transform: rotateZ(30deg); } }

@keyframes hourAnimation {
  0% {
    transform: rotateZ(-60deg); }
  100% {
    transform: rotateZ(30deg); } }

/** @ignore-group **/
.section-wrapper {
  padding-top: 30px;
  padding-bottom: 30px; }
  @media (min-width: 768px) {
    .section-wrapper {
      padding-top: 50px;
      padding-bottom: 50px; } }

.section-wrapper-expanded {
  padding-top: 50px;
  padding-bottom: 50px; }
  @media (min-width: 768px) {
    .section-wrapper-expanded {
      padding-top: 80px;
      padding-bottom: 80px; } }

.section-border-top {
  border-top: 10px solid #ffffff; }

.section-border-bottom {
  border-bottom: 10px solid #ffffff; }

.section-border-both {
  border-top: 10px solid #ffffff;
  border-bottom: 10px solid #ffffff; }

.hero .section-title {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  line-height: 1.1;
  letter-spacing: -0.2rem;
  font-size: 46px;
  font-size: 4.6rem; }

.tab-gallery .section-title {
  margin-bottom: 5px; }
  @media (min-width: 768px) {
    .tab-gallery .section-title {
      margin-bottom: 10px; } }

@media screen and (max-width: 767px) {
  .tab-gallery .tabs-text,
  .tab-gallery .tabs-container > li .tabs-text {
    margin-bottom: 30px; }
    .tab-gallery .tabs-text .label,
    .tab-gallery .tabs-container > li .tabs-text .label {
      display: none; }
  .tab-gallery .circular-icon-group {
    position: absolute;
    left: 0;
    bottom: 15px;
    width: 100%; } }

.nl-spinner {
  display: block;
  background-image: url("https://video.nest.com/images/nl-spinner/nl-spinner-blue.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  animation-direction: reverse;
  animation-iteration-count: infinite;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px; }
  .nl-spinner.is-loading {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }
  .nl-spinner.is-visible {
    opacity: 1;
    pointer-events: auto; }
  .nl-spinner.is-spinning {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }

.nl-spinner-small {
  display: block;
  background-image: url("https://video.nest.com/images/nl-spinner/nl-spinner-blue.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  animation-direction: reverse;
  animation-iteration-count: infinite;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px; }
  .nl-spinner-small.is-loading {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }
  .nl-spinner-small.is-visible {
    opacity: 1;
    pointer-events: auto; }
  .nl-spinner-small.is-spinning {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }

.nl-spinner-large {
  display: block;
  background-image: url("https://video.nest.com/images/nl-spinner/nl-spinner-blue.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  animation-direction: reverse;
  animation-iteration-count: infinite;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px; }
  .nl-spinner-large.is-loading {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }
  .nl-spinner-large.is-visible {
    opacity: 1;
    pointer-events: auto; }
  .nl-spinner-large.is-spinning {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }

.nl-spinner-grey,
.nl-spinner-gray {
  display: block;
  background-image: url("https://video.nest.com/images/nl-spinner/nl-spinner-gray.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  animation-direction: reverse;
  animation-iteration-count: infinite;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px; }
  .nl-spinner-grey.is-loading,
  .nl-spinner-gray.is-loading {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }
  .nl-spinner-grey.is-visible,
  .nl-spinner-gray.is-visible {
    opacity: 1;
    pointer-events: auto; }
  .nl-spinner-grey.is-spinning,
  .nl-spinner-gray.is-spinning {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }

.nl-spinner-small-grey,
.nl-spinner-small-gray {
  display: block;
  background-image: url("https://video.nest.com/images/nl-spinner/nl-spinner-gray.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  animation-direction: reverse;
  animation-iteration-count: infinite;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px; }
  .nl-spinner-small-grey.is-loading,
  .nl-spinner-small-gray.is-loading {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }
  .nl-spinner-small-grey.is-visible,
  .nl-spinner-small-gray.is-visible {
    opacity: 1;
    pointer-events: auto; }
  .nl-spinner-small-grey.is-spinning,
  .nl-spinner-small-gray.is-spinning {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }

.nl-spinner-large-grey,
.nl-spinner-large-gray {
  display: block;
  background-image: url("https://video.nest.com/images/nl-spinner/nl-spinner-gray.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  animation-direction: reverse;
  animation-iteration-count: infinite;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px; }
  .nl-spinner-large-grey.is-loading,
  .nl-spinner-large-gray.is-loading {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }
  .nl-spinner-large-grey.is-visible,
  .nl-spinner-large-gray.is-visible {
    opacity: 1;
    pointer-events: auto; }
  .nl-spinner-large-grey.is-spinning,
  .nl-spinner-large-gray.is-spinning {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }

.nl-spinner-white {
  display: block;
  background-image: url("https://video.nest.com/images/nl-spinner/nl-spinner-white.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  animation-direction: reverse;
  animation-iteration-count: infinite;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px; }
  .nl-spinner-white.is-loading {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }
  .nl-spinner-white.is-visible {
    opacity: 1;
    pointer-events: auto; }
  .nl-spinner-white.is-spinning {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }

.nl-spinner-small-white {
  display: block;
  background-image: url("https://video.nest.com/images/nl-spinner/nl-spinner-white.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  animation-direction: reverse;
  animation-iteration-count: infinite;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px; }
  .nl-spinner-small-white.is-loading {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }
  .nl-spinner-small-white.is-visible {
    opacity: 1;
    pointer-events: auto; }
  .nl-spinner-small-white.is-spinning {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }

.nl-spinner-large-white {
  display: block;
  background-image: url("https://video.nest.com/images/nl-spinner/nl-spinner-white.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  animation-direction: reverse;
  animation-iteration-count: infinite;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px; }
  .nl-spinner-large-white.is-loading {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }
  .nl-spinner-large-white.is-visible {
    opacity: 1;
    pointer-events: auto; }
  .nl-spinner-large-white.is-spinning {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 0.75s;
    -moz-animation-duration: 0.75s;
    -ms-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear; }

/*** Module: Block Grids ***/
/*
 * ------
 * MQ 415 (just above iPhone 6 Plus — 414px)
 * ------
 */
@media (min-width: 415px) {
  .block-grid-2,
  .block-grid-3,
  .block-grid-4 {
    margin: 0 -15px; }
    .block-grid-2:after, .block-grid-2:before,
    .block-grid-3:after,
    .block-grid-3:before,
    .block-grid-4:after,
    .block-grid-4:before {
      content: "";
      display: table;
      clear: both; }
    .block-grid-2 > li,
    .block-grid-2 > .block-item,
    .block-grid-3 > li,
    .block-grid-3 > .block-item,
    .block-grid-4 > li,
    .block-grid-4 > .block-item {
      box-sizing: border-box;
      float: left;
      padding: 0 15px 15px; }
    .block-grid-2 > li,
    .block-grid-2 > .block-item,
    .block-grid-3 > li,
    .block-grid-3 > .block-item,
    .block-grid-4 > li,
    .block-grid-4 > .block-item {
      width: 50%; }
      .block-grid-2 > li:nth-of-type(2n+1),
      .block-grid-2 > .block-item:nth-of-type(2n+1),
      .block-grid-3 > li:nth-of-type(2n+1),
      .block-grid-3 > .block-item:nth-of-type(2n+1),
      .block-grid-4 > li:nth-of-type(2n+1),
      .block-grid-4 > .block-item:nth-of-type(2n+1) {
        clear: both; } }

/*
 * ------
 * MQ 768
 * ------
 */
@media (min-width: 768px) {
  .block-grid-3 > li:nth-of-type(2n+1) {
    clear: none; }
  .block-grid-3 > li,
  .block-grid-3 > .block-item {
    width: 33.33333%; }
    .block-grid-3 > li:nth-of-type(3n+1),
    .block-grid-3 > .block-item:nth-of-type(3n+1) {
      clear: both; }
  .block-grid-4 > li:nth-of-type(2n+1) {
    clear: none; }
  .block-grid-4 > li,
  .block-grid-4 > .block-item {
    width: 25%; }
    .block-grid-4 > li:nth-of-type(4n+1),
    .block-grid-4 > .block-item:nth-of-type(4n+1) {
      clear: both; } }

.nl-gallery {
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }
  .nl-gallery .controls {
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 2; }
    .nl-gallery .controls .left {
      background-image: url("../../images/global/sprites/nl_gallery_arrow_l_small.png");
      background-repeat: no-repeat;
      background-size: 36px 36px;
      background-repeat: no-repeat;
      display: block;
      width: 36px;
      height: 36px;
      display: inline-block;
      cursor: pointer;
      vertical-align: middle; }
      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        .nl-gallery .controls .left {
          background-image: url("../../images/global/sprites/nl_gallery_arrow_l_small_2x.png"); } }
    .nl-gallery .controls .right {
      background-image: url("../../images/global/sprites/nl_gallery_arrow_r_small.png");
      background-repeat: no-repeat;
      background-size: 36px 36px;
      background-repeat: no-repeat;
      display: block;
      width: 36px;
      height: 36px;
      display: inline-block;
      cursor: pointer;
      vertical-align: middle; }
      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        .nl-gallery .controls .right {
          background-image: url("../../images/global/sprites/nl_gallery_arrow_r_small_2x.png"); } }
  .nl-gallery .arrow-container {
    display: none; }
  .nl-gallery.ready .nl-slides {
    display: block; }
  .nl-gallery .nl-slides {
    position: relative;
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .nl-gallery .nl-slides > * {
      opacity: 0;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      position: absolute;
      -webkit-transition: opacity 1000ms ease;
      transition: opacity 1000ms ease; }
      .nl-gallery .nl-slides > *.current {
        opacity: 1;
        z-index: 1; }
  .nl-gallery[data-transition-style="fade-over"] .nl-slides > * {
    opacity: 1;
    transition: none; }
    .nl-gallery[data-transition-style="fade-over"] .nl-slides > *[data-animating="true"] {
      animation-duration: 1000ms;
      animation-name: fade-over; }

@keyframes fade-over {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@media (min-width: 768px) {
  .nl-gallery .controls .left,
  .nl-gallery .controls .right {
    display: none; }
  .nl-gallery .arrow-container {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    position: absolute;
    height: auto;
    z-index: 2;
    display: block;
    margin-top: -23px;
    top: 50%;
    left: 0;
    right: 0; }
  .nl-gallery .arrow {
    position: relative;
    cursor: pointer; }
    .nl-gallery .arrow.right {
      right: -30px;
      float: right; }
    .nl-gallery .arrow.left {
      left: -30px;
      float: left; } }

@media (min-width: 1080px) {
  .nl-gallery .arrow.right {
    right: -40px; }
  .nl-gallery .arrow.left {
    left: -40px; } }

@media (min-width: 768px) {
  .nl-gallery .arrow {
    width: 50px;
    height: 50px;
    background-image: url("../../images/global/sprites/nl_gallery_arrow_l.png");
    background-repeat: no-repeat;
    background-size: 48px 48px;
    background-repeat: no-repeat;
    display: block;
    width: 48px;
    height: 48px; } }
  @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 144dpi) {
    .nl-gallery .arrow {
      background-image: url("../../images/global/sprites/nl_gallery_arrow_l_2x.png"); } }

@media (min-width: 768px) {
    .nl-gallery .arrow.right {
      background-image: url("../../images/global/sprites/nl_gallery_arrow_r.png");
      background-repeat: no-repeat;
      background-size: 48px 48px;
      background-repeat: no-repeat;
      display: block;
      width: 48px;
      height: 48px;
      right: -75px; } }
    @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 144dpi) {
      .nl-gallery .arrow.right {
        background-image: url("../../images/global/sprites/nl_gallery_arrow_r_2x.png"); } }

@media (min-width: 768px) {
    .nl-gallery .arrow.left {
      left: -75px; } }

.pagination,
.pagination-hp {
  display: inline-block;
  vertical-align: middle;
  padding: 0 10px;
  position: relative;
  height: 7px;
  text-align: center;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .pagination.dark-bg div,
  .pagination-hp.dark-bg div {
    background-image: url("../../images/global/sprites/nl_gallery_darkbg_dot.png");
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-repeat: no-repeat;
    display: block;
    width: 10px;
    height: 10px;
    display: inline-block; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .pagination.dark-bg div,
      .pagination-hp.dark-bg div {
        background-image: url("../../images/global/sprites/nl_gallery_darkbg_dot_2x.png"); } }
    .pagination.dark-bg div.current,
    .pagination-hp.dark-bg div.current {
      background-image: url("../../images/global/sprites/nl_gallery_dot.png");
      background-repeat: no-repeat;
      background-size: 10px 10px;
      background-repeat: no-repeat;
      display: block;
      width: 10px;
      height: 10px;
      display: inline-block; }
      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        .pagination.dark-bg div.current,
        .pagination-hp.dark-bg div.current {
          background-image: url("../../images/global/sprites/nl_gallery_dot_2x.png"); } }
  .pagination div,
  .pagination-hp div {
    display: inline-block;
    margin: 0 3px;
    cursor: pointer;
    position: relative;
    height: 7px;
    width: 7px;
    background-color: #8A9299;
    display: inline-block;
    vertical-align: top;
    border-radius: 100%; }
    .pagination div.current,
    .pagination-hp div.current {
      background-color: #00AFD8;
      display: inline-block; }

@media (min-width: 600px) {
  .pagination,
  .pagination-hp {
    height: 9px; }
    .pagination div,
    .pagination-hp div {
      width: 9px;
      height: 9px;
      margin: 0 5px; } }

.nlValidation .row {
  position: relative; }
  .nlValidation .row input.error, .nlValidation .row select.error, .nlValidation .row textarea.error {
    border-color: #ff0000 !important; }
  .nlValidation .row .message {
    position: absolute;
    bottom: -7px;
    right: 0;
    left: 0;
    width: 100%;
    padding: 0 10px;
    text-align: right;
    height: 13px;
    color: #ffffff;
    display: none;
    background-color: #ff0000;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 11px;
    font-size: 1.1rem;
    line-height: 13px;
    line-height: 1.3rem; }

.buy-button-block {
  display: block;
  margin: 25px 0; }
  .buy-button-block .price-label {
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    margin: 6px 10px 0 0;
    font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 20px;
    font-size: 2rem;
    color: #5e656c;
    line-height: 1.1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  .buy-button-block .price-label-promotion .normal-price {
    opacity: 0.7;
    text-decoration: line-through; }
  .buy-button-block .buy-button {
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    padding-left: 3.2em;
    padding-right: 3.2em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

@media (min-width: 960px) {
  .buy-button-block .price-label {
    margin-top: 0;
    font-size: 32px;
    font-size: 3.2rem; }
  .buy-button-block .price-label-promotion {
    font-size: 30px;
    font-size: 3rem; } }

@media (min-width: 960px) {
  .buy-button-block .price-label-promotion {
    font-size: 32px;
    font-size: 3.2rem; } }

video {
  outline: none;
  -moz-outline-style: none;
  o-object-fit: cover;
  object-fit: cover; }

/**
  Responsive Media (Video, Background Image Div) Container

  - See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.rqydLHVH.dpuf

*/
.responsive-media-wrapper,
.video-container {
  position: relative;
  height: 0;
  overflow: hidden; }

.video-container {
  padding-bottom: 56.25%;
  padding-top: 30px; }

.responsive-media,
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

.nl-play-video-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  top: 2px;
  left: 1px;
  background-color: #00AFD8;
  position: relative;
  border-radius: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden; }
  .nl-play-video-button:after {
    content: '';
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -3px;
    margin-left: -1px;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 3px solid white; }
  .nl-play-video-button.white {
    background-color: #FFA02F; }
    .nl-play-video-button.white:after {
      border-left-color: #ffffff; }
  .nl-play-video-button.clear {
    background: none;
    box-shadow: inset 0 0 0 1px #3d4247; }
    .nl-play-video-button.clear:after {
      border-left-color: #ffffff;
      border-left-color: #3d4247; }
    .nl-play-video-button.clear:hover {
      background: none; }
  .nl-play-video-button:hover {
    background-color: #3d4247; }

@media (min-width: 768px) {
  .nl-play-video-button {
    top: 4px;
    width: 24px;
    height: 24px;
    margin-right: 7px; }
    .nl-play-video-button:after {
      margin-top: -4px;
      margin-left: -2px;
      border-top-width: 4px;
      border-bottom-width: 4px;
      border-left-width: 6px; } }

.watch-video {
  display: inline-block; }
  .watch-video, .watch-video:hover,
  .no-touchevents .watch-video:hover {
    color: #00AFD8; }
  .watch-video, .watch-video.invert {
    font-size: 15px; }
    .watch-video:before, .watch-video:after, .watch-video.invert:before, .watch-video.invert:after {
      width: 15px;
      height: 15px; }
    .watch-video:before, .watch-video.invert:before {
      margin-left: 0;
      margin-right: 7.5px; }
    .watch-video:after, .watch-video.invert:after {
      margin-left: 7.5px;
      margin-right: 0; }
  .watch-video:before, .watch-video:after {
    content: "";
    display: inline-block;
    position: relative;
    background: transparent center center no-repeat;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjMDlCMERBIiBkPSJNNDAuOSAzMS41Yy0xLjMtLjgtMi40LS4yLTIuNCAxLjR2MzQuM2MwIDEuNiAxLjEgMi4yIDIuNCAxLjRsMjguNC0xNy4xYzEuMy0uOCAxLjMtMi4xIDAtMi45TDQwLjkgMzEuNXpNNTAgMUMyMi45IDEgMSAyMi45IDEgNTBzMjEuOSA0OSA0OSA0OSA0OS0yMS45IDQ5LTQ5Uzc3LjEgMSA1MCAxem0wIDkyLjVDMjYgOTMuNSA2LjUgNzQgNi41IDUwUzI2IDYuNSA1MCA2LjUgOTMuNSAyNiA5My41IDUwIDc0IDkzLjUgNTAgOTMuNXoiLz48L3N2Zz4="); }
  .watch-video:not(.invert):after {
    display: none; }
  .watch-video.invert:before {
    display: none; }

.watch-video.white, .watch-video.white:hover {
  color: #ffffff; }

.watch-video.white:before, .watch-video.white:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNNDAuOSAzMS41Yy0xLjMtLjgtMi40LS4yLTIuNCAxLjR2MzQuM2MwIDEuNiAxLjEgMi4yIDIuNCAxLjRsMjguNC0xNy4xYzEuMy0uOCAxLjMtMi4xIDAtMi45TDQwLjkgMzEuNXpNNTAgMUMyMi45IDEgMSAyMi45IDEgNTBzMjEuOSA0OSA0OSA0OSA0OS0yMS45IDQ5LTQ5Uzc3LjEgMSA1MCAxem0wIDkyLjVDMjYgOTMuNSA2LjUgNzQgNi41IDUwUzI2IDYuNSA1MCA2LjUgOTMuNSAyNiA5My41IDUwIDc0IDkzLjUgNTAgOTMuNXoiLz48L3N2Zz4=); }

html.no-touchevents .watch-video:hover, html.no-touchevents .watch-video:hover:before, html.no-touchevents .watch-video:hover:after {
  opacity: 0.7;
  transition: opacity 300ms; }

/*
 * ------
 * MQ 768
 * ------
 */
@media (min-width: 768px) {
  .watch-video,
  .watch-video.invert {
    font-size: 18px; }
    .watch-video:before, .watch-video:after,
    .watch-video.invert:before,
    .watch-video.invert:after {
      width: 18px;
      height: 18px; }
    .watch-video:before,
    .watch-video.invert:before {
      margin-left: 0;
      margin-right: 9px; }
    .watch-video:after,
    .watch-video.invert:after {
      margin-left: 9px;
      margin-right: 0; } }

/**
  Social Media Links

  Used in footer and press pages, or any place simple grayscale
  social media links are desired.

  Supported sites are facebook, twitter, pinterest, google-plus, instagram and youtube

  @markup: `<div class="social"><a href="https://twitter.com/nest/"><div class="twitter sprite"></div></a></div>`
*/
.social {
  font-size: 0px; }
  .social a {
    -webkit-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
    background-color: #95a1aa;
    height: 34px;
    width: 34px;
    margin-left: 6px; }
    .social a .sprite.twitter {
      background-image: url("../../images/global/sprites/twitter.png");
      background-repeat: no-repeat;
      background-size: 32px 32px;
      background-repeat: no-repeat;
      display: block;
      width: 32px;
      height: 32px; }
      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        .social a .sprite.twitter {
          background-image: url("../../images/global/sprites/twitter_2x.png"); } }
      .social a .sprite.twitter.small {
        background-image: url("../../images/global/sprites/twitter_small.png");
        background-repeat: no-repeat;
        background-size: 23px 23px;
        background-repeat: no-repeat;
        display: block;
        width: 23px;
        height: 23px; }
        @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
          .social a .sprite.twitter.small {
            background-image: url("../../images/global/sprites/twitter_small_2x.png"); } }
    .social a .sprite.facebook {
      background-image: url("../../images/global/sprites/facebook.png");
      background-repeat: no-repeat;
      background-size: 32px 32px;
      background-repeat: no-repeat;
      display: block;
      width: 32px;
      height: 32px; }
      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        .social a .sprite.facebook {
          background-image: url("../../images/global/sprites/facebook_2x.png"); } }
      .social a .sprite.facebook.small {
        background-image: url("../../images/global/sprites/facebook_small.png");
        background-repeat: no-repeat;
        background-size: 23px 23px;
        background-repeat: no-repeat;
        display: block;
        width: 23px;
        height: 23px; }
        @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
          .social a .sprite.facebook.small {
            background-image: url("../../images/global/sprites/facebook_small_2x.png"); } }
    .social a .sprite.pinterest {
      background-image: url("../../images/global/sprites/pinterest.png");
      background-repeat: no-repeat;
      background-size: 32px 32px;
      background-repeat: no-repeat;
      display: block;
      width: 32px;
      height: 32px; }
      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        .social a .sprite.pinterest {
          background-image: url("../../images/global/sprites/pinterest_2x.png"); } }
      .social a .sprite.pinterest.small {
        background-image: url("../../images/global/sprites/pinterest_small.png");
        background-repeat: no-repeat;
        background-size: 23px 23px;
        background-repeat: no-repeat;
        display: block;
        width: 23px;
        height: 23px; }
        @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
          .social a .sprite.pinterest.small {
            background-image: url("../../images/global/sprites/pinterest_small_2x.png"); } }
    .social a .sprite.google-plus {
      background-image: url("../../images/global/sprites/g-plus.png");
      background-repeat: no-repeat;
      background-size: 32px 32px;
      background-repeat: no-repeat;
      display: block;
      width: 32px;
      height: 32px; }
      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        .social a .sprite.google-plus {
          background-image: url("../../images/global/sprites/g-plus_2x.png"); } }
      .social a .sprite.google-plus.small {
        background-image: url("../../images/global/sprites/g-plus_small.png");
        background-repeat: no-repeat;
        background-size: 23px 23px;
        background-repeat: no-repeat;
        display: block;
        width: 23px;
        height: 23px; }
        @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
          .social a .sprite.google-plus.small {
            background-image: url("../../images/global/sprites/g-plus_small_2x.png"); } }
    .social a .sprite.instagram {
      background-image: url("../../images/global/sprites/instagram.png");
      background-repeat: no-repeat;
      background-size: 32px 32px;
      background-repeat: no-repeat;
      display: block;
      width: 32px;
      height: 32px; }
      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        .social a .sprite.instagram {
          background-image: url("../../images/global/sprites/instagram_2x.png"); } }
      .social a .sprite.instagram.small {
        background-image: url("../../images/global/sprites/instagram_small.png");
        background-repeat: no-repeat;
        background-size: 23px 23px;
        background-repeat: no-repeat;
        display: block;
        width: 23px;
        height: 23px; }
        @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
          .social a .sprite.instagram.small {
            background-image: url("../../images/global/sprites/instagram_small_2x.png"); } }
    .social a .sprite.youtube {
      background-image: url("../../images/global/sprites/youtube.png");
      background-repeat: no-repeat;
      background-size: 32px 32px;
      background-repeat: no-repeat;
      display: block;
      width: 32px;
      height: 32px; }
      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        .social a .sprite.youtube {
          background-image: url("../../images/global/sprites/youtube_2x.png"); } }
      .social a .sprite.youtube.small {
        background-image: url("../../images/global/sprites/youtube_small.png");
        background-repeat: no-repeat;
        background-size: 23px 23px;
        background-repeat: no-repeat;
        display: block;
        width: 23px;
        height: 23px; }
        @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
          .social a .sprite.youtube.small {
            background-image: url("../../images/global/sprites/youtube_small_2x.png"); } }
    .social a:hover {
      background-color: #3d4247; }

/**
 * Expand Gallery
 * (c) Nest Labs 2016
 * Author: Cal Mosher <calmosher@nestlabs.com>
 *
 * Styles for the expand gallery.
 */
/**
 * New Gallery Icons
 *
 * To be implemented on all galleries post-2016.
 */
.expand-gallery {
  position: relative;
  margin: 0 auto;
  width: 100%;
  overflow: hidden; }
  .expand-gallery .eg-state {
    display: none;
    width: 0; }
    @media (min-width: 768px) {
      .expand-gallery .eg-state {
        width: 768px; } }
  .expand-gallery .eg-image {
    display: block;
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    background-position: center center;
    background-size: cover !important; }
  .expand-gallery ul.eg-panel-list {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .expand-gallery ul.eg-panel-list li.eg-panel {
      position: absolute;
      z-index: 10;
      height: 100%;
      width: 100%;
      overflow: hidden;
      cursor: pointer;
      transition: height 250ms linear, width 250ms linear, margin 250ms linear, top 250ms linear, left 250ms linear; }
      .expand-gallery ul.eg-panel-list li.eg-panel.hovered {
        z-index: 12; }
      .expand-gallery ul.eg-panel-list li.eg-panel.hovered-neighbor {
        z-index: 11; }
      .expand-gallery ul.eg-panel-list li.eg-panel.no-transition,
      .expand-gallery ul.eg-panel-list li.eg-panel.no-transition .eg-image-wrapper .eg-image {
        transition: height 0 linear, width 0 linear, margin 0 linear, top 0 linear, left 0 linear; }
      .expand-gallery ul.eg-panel-list li.eg-panel.expanding {
        z-index: 40; }
        .expand-gallery ul.eg-panel-list li.eg-panel.expanding,
        .expand-gallery ul.eg-panel-list li.eg-panel.expanding .eg-image-wrapper .eg-image {
          will-change: height, width, margin, top, left;
          transition: height 500ms ease, width 500ms ease, margin 500ms ease, top 500ms ease, left 500ms ease; }
      .expand-gallery ul.eg-panel-list li.eg-panel.expanded {
        display: block;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        margin: 0;
        z-index: 40;
        cursor: default; }
      .expand-gallery ul.eg-panel-list li.eg-panel.remove-title .eg-title {
        display: none; }
      .expand-gallery ul.eg-panel-list li.eg-panel .eg-image-wrapper {
        display: block;
        position: absolute;
        height: 0;
        width: 0;
        top: 50%;
        left: 50%;
        overflow: visible; }
        .expand-gallery ul.eg-panel-list li.eg-panel .eg-image-wrapper .eg-image {
          top: 0;
          left: 0;
          transition: top 700ms ease-out, margin 250ms linear; }
      .expand-gallery ul.eg-panel-list li.eg-panel .eg-title {
        display: block;
        position: absolute;
        top: 50%;
        left: 5%;
        z-index: 30;
        width: 100%; }
        .expand-gallery ul.eg-panel-list li.eg-panel .eg-title .eg-title-plus {
          position: relative;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: rgba(25, 25, 25, 0.24);
          border: 1px solid rgba(255, 255, 255, 0.6);
          cursor: pointer;
          transition: background 200ms ease;
          height: 24px;
          width: 24px;
          display: inline-block;
          margin-bottom: -6px;
          margin-left: 6px; }
          .expand-gallery ul.eg-panel-list li.eg-panel .eg-title .eg-title-plus:hover {
            background: rgba(102, 102, 102, 0.24); }
          .expand-gallery ul.eg-panel-list li.eg-panel .eg-title .eg-title-plus:before, .expand-gallery ul.eg-panel-list li.eg-panel .eg-title .eg-title-plus:after {
            content: "";
            display: block;
            height: 0;
            width: 0;
            border: 0 solid #fff;
            position: absolute; }
          .expand-gallery ul.eg-panel-list li.eg-panel .eg-title .eg-title-plus:before {
            width: 10px;
            border-top-width: 2px;
            top: 11px;
            left: 7px; }
          .expand-gallery ul.eg-panel-list li.eg-panel .eg-title .eg-title-plus:after {
            height: 10px;
            border-left-width: 2px;
            top: 7px;
            left: 11px; }
        @media (min-width: 768px) {
          .expand-gallery ul.eg-panel-list li.eg-panel .eg-title {
            text-align: center;
            top: 90%;
            left: 0; }
            .expand-gallery ul.eg-panel-list li.eg-panel .eg-title .eg-title-plus {
              display: none; } }
  .expand-gallery .nl-gallery {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 50; }
    .expand-gallery .nl-gallery .eg-close {
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(25, 25, 25, 0.24);
      border: 1px solid rgba(255, 255, 255, 0.6);
      cursor: pointer;
      transition: background 200ms ease;
      position: absolute;
      z-index: 51;
      top: 10px;
      right: 10px;
      opacity: 0;
      transition: opacity 500ms ease, background 250ms ease; }
      .expand-gallery .nl-gallery .eg-close:hover {
        background: rgba(102, 102, 102, 0.24); }
      .expand-gallery .nl-gallery .eg-close:before, .expand-gallery .nl-gallery .eg-close:after {
        content: "";
        display: block;
        width: 20px;
        height: 0;
        border-bottom: 2px solid #fff;
        position: absolute;
        top: 23px;
        left: 14px; }
      .expand-gallery .nl-gallery .eg-close:before {
        transform: rotate(45deg); }
      .expand-gallery .nl-gallery .eg-close:after {
        transform: rotate(-45deg); }
      .expand-gallery .nl-gallery .eg-close.visible {
        opacity: 1; }
      @media (min-width: 768px) {
        .expand-gallery .nl-gallery .eg-close {
          top: 16px;
          right: 16px; } }
    .expand-gallery .nl-gallery .controls {
      bottom: 10px; }
      @media (min-width: 768px) {
        .expand-gallery .nl-gallery .controls {
          bottom: 0;
          height: 10%;
          overflow: visible; } }
      .expand-gallery .nl-gallery .controls .left {
        position: relative;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(25, 25, 25, 0.24);
        border: 1px solid rgba(255, 255, 255, 0.6);
        cursor: pointer;
        transition: background 200ms ease; }
        .expand-gallery .nl-gallery .controls .left:hover {
          background: rgba(102, 102, 102, 0.24); }
        .expand-gallery .nl-gallery .controls .left:before {
          content: "";
          display: block;
          height: 10px;
          width: 10px;
          border: 2px solid #fff;
          border-right: none;
          border-top: none;
          transform: rotate(45deg);
          position: absolute;
          top: 18px;
          left: 20px; }
        @media (min-width: 768px) {
          .expand-gallery .nl-gallery .controls .left {
            left: 16px; } }
      .expand-gallery .nl-gallery .controls .right {
        position: relative;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(25, 25, 25, 0.24);
        border: 1px solid rgba(255, 255, 255, 0.6);
        cursor: pointer;
        transition: background 200ms ease; }
        .expand-gallery .nl-gallery .controls .right:hover {
          background: rgba(102, 102, 102, 0.24); }
        .expand-gallery .nl-gallery .controls .right:before {
          content: "";
          display: block;
          height: 10px;
          width: 10px;
          border: 2px solid #fff;
          border-left: none;
          border-top: none;
          transform: rotate(-45deg);
          position: absolute;
          top: 18px;
          left: 16px; }
        @media (min-width: 768px) {
          .expand-gallery .nl-gallery .controls .right {
            right: 16px; } }
      @media (min-width: 768px) {
        .expand-gallery .nl-gallery .controls .left,
        .expand-gallery .nl-gallery .controls .right {
          display: block;
          position: absolute;
          bottom: 500%;
          margin-bottom: -25px; } }
      .expand-gallery .nl-gallery .controls .pagination {
        height: 8px; }
        .expand-gallery .nl-gallery .controls .pagination > div {
          display: block;
          float: left;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: rgba(25, 25, 25, 0.48);
          margin: 0 4px 8px;
          cursor: pointer;
          transition: background 200ms ease; }
          .expand-gallery .nl-gallery .controls .pagination > div:hover {
            background: rgba(102, 102, 102, 0.48); }
          .expand-gallery .nl-gallery .controls .pagination > div.active, .expand-gallery .nl-gallery .controls .pagination > div.current {
            background: #fff; }
            .expand-gallery .nl-gallery .controls .pagination > div.active:hover, .expand-gallery .nl-gallery .controls .pagination > div.current:hover {
              background: #fff; }

#video .container.not-found {
  background-color: #F9F9F9;
  color: #3C4247; }

.message.not-found {
  position: absolute;
  top: calc(50% - 50px);
  left: 0;
  right: 0;
  text-align: center; }
  .message.not-found h2 {
    font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 56px;
    font-size: 5.6rem;
    line-height: 6rem;
    margin-bottom: 2.4rem;
    color: #ffffff; }
  .message.not-found p {
    font-size: 14px;
    font-size: 1.4rem; }

@media (min-width: 768px) {
  .not-found .message p {
    font-size: 17px;
    font-size: 1.7rem; } }

.not-compatible#video .container::before {
  padding-top: unset; }

.not-compatible .video-wrapper {
  padding: 30px 0; }
  .not-compatible .video-wrapper h2, .not-compatible .video-wrapper p {
    color: #fff;
    margin: 0 30px; }
  .not-compatible .video-wrapper h2 {
    font-size: 21px;
    font-size: 2.1rem;
    margin-bottom: 14px; }

#video {
  background-color: #e9ebee;
  overflow: hidden;
  position: relative;
  max-height: 540px; }
  #video .container {
    background: #7b858e;
    overflow: hidden; }
    #video .container::before {
      content: '';
      padding-top: 56.25%;
      width: 100%; }
  #video.video-loaded .container .video-wrapper {
    min-height: auto; }
  #video.log-out .container::before {
    padding-top: 0; }
  #video.log-out .container .video-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 415px; }

.message {
  text-align: center; }
  .message.error .error-message {
    font-size: 18px;
    font-size: 1.8rem;
    background-color: #ff5a57;
    color: #ffffff;
    display: block;
    padding: 12px 0;
    font-weight: bold; }
  .message.error input[type=password] {
    background-image: url("../../images/error.png");
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: calc(100% - 8px) center;
    outline: none;
    border: 2px solid #ff5a57; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .message.error input[type=password] {
        background-image: url("../../images/error_2x.png"); } }
  .message h2 {
    font-size: 21px;
    font-size: 2.1rem;
    color: #ffffff;
    margin-bottom: 14px; }
  .message p {
    font-size: 14px;
    font-size: 1.4rem;
    color: #ffffff; }
  .message .error-message {
    display: none; }
  .message input[type=password],
  .message .nl-button,
  .message .error-message {
    border-radius: 5px;
    width: 302px;
    margin: 10px auto 0; }
  .message input[type=password] {
    border: 2px solid #98a0a7;
    background-color: white; }
  .message .nl-button {
    height: 35px;
    text-transform: inherit; }
  .message .g-recaptcha {
    display: table;
    margin: 14px auto 0; }
    .message .g-recaptcha.hidden {
      display: none; }

i.lock {
  background-image: url("../../images/lock-mobile.png");
  background-repeat: no-repeat;
  background-size: 38px 49px;
  background-size: 38px 49px;
  width: 38px;
  height: 49px;
  display: inline-block;
  margin: 0 auto 10px; }
  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    i.lock {
      background-image: url("../../images/lock-mobile_2x.png"); } }

.embedded {
  background-color: #000000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center; }

@media (min-width: 768px) {
  #video {
    margin-bottom: 45px; }
    #video.not-found .container .video-wrapper,
    #video.log-out .container .video-wrapper {
      height: 56.25vw;
      width: 177.78vh;
      max-height: 100%;
      max-width: 100%;
      position: absolute;
      top: 0; }
    #video.not-found .container::before,
    #video.log-out .container::before {
      padding-top: 52.6%; }
  .message input[type=password],
  .message .nl-button {
    font-size: 18px;
    font-size: 1.8rem;
    height: 45px; }
  i.lock {
    background-image: url("../../images/lock.png");
    background-repeat: no-repeat;
    background-size: 69px 90px;
    background-size: 69px 90px;
    width: 69px;
    height: 90px; } }
  @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 144dpi) {
    i.lock {
      background-image: url("../../images/lock_2x.png"); } }

@font-face {
  font-family: 'VideoJS';
  font-weight: normal;
  font-style: normal;
  src: url("../../vendor/VideoJS.eot");
  src: url("../../vendor/VideoJS.eot#iefix") format("embedded-opentype"), url("../../vendor/VideoJS.woff") format("woff"), url("../../vendor/VideoJS.ttf") format("truetype"), url("../../vendor/VideoJS.svg") format("svg"); }

.video-js {
  height: 100%;
  padding-top: 56.25%;
  position: absolute;
  top: 0;
  width: 100%; }
  .embedded .video-js {
    height: 56.25vw;
    left: 50%;
    max-height: 100%;
    max-width: 100%;
    padding-top: 0;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 177.78vh; }
  .video-js .vjs-poster {
    background-color: #7b858e;
    background-size: 100% 100%; }
  .video-js .vjs-tech {
    z-index: -1; }
    .touch .video-js .vjs-tech {
      z-index: auto; }
  .video-js.vjs-has-started .vjs-tech {
    z-index: auto; }
  .video-js .vjs-live-label {
    font-size: 14px;
    font-size: 1.4rem;
    background-color: #27a5ff;
    border-radius: 3px;
    color: #ffffff;
    font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
    height: 20px;
    left: 10px;
    line-height: 21px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 10px;
    width: 40px; }
  .video-js.vjs-paused .vjs-live-label {
    background-color: #3d4247;
    color: rgba(255, 255, 255, 0.2); }
  .video-js:hover .vjs-big-play-button,
  .video-js .vjs-big-play-button:focus,
  .video-js .vjs-big-play-button:active,
  .video-js .vjs-big-play-button:hover,
  .video-js .vjs-big-play-button {
    -webkit-transition: opacity 200ms ease-in-out;
    transition: opacity 200ms ease-in-out;
    background-image: url("../../images/big-play.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 40px;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    height: 40px;
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
    width: 40px;
    display: block; }
    .video-js:hover .vjs-big-play-button:before,
    .video-js .vjs-big-play-button:focus:before,
    .video-js .vjs-big-play-button:active:before,
    .video-js .vjs-big-play-button:hover:before,
    .video-js .vjs-big-play-button:before {
      content: none; }
    .touch .video-js:hover .vjs-big-play-button, .touch
    .video-js .vjs-big-play-button:focus, .touch
    .video-js .vjs-big-play-button:active, .touch
    .video-js .vjs-big-play-button:hover, .touch
    .video-js .vjs-big-play-button {
      display: none !important; }
  .video-js.vjs-playing .vjs-big-play-button:focus,
  .video-js.vjs-playing .vjs-big-play-button:active,
  .video-js.vjs-playing .vjs-big-play-button:hover,
  .video-js.vjs-playing .vjs-big-play-button {
    background-image: url("../../images/big-pause.svg"); }
  .video-js.vjs-user-inactive .vjs-big-play-button {
    opacity: 0; }
  .video-js.vjs-user-active .vjs-big-play-button {
    opacity: 1; }
  .video-js .vjs-control-bar {
    background-color: transparent;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
    .video-js .vjs-control-bar .vjs-control {
      background-color: rgba(54, 58, 61, 0.64);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 20px;
      border-radius: 5px;
      margin-right: 5px;
      margin-top: -5px;
      padding: 0 5px; }
    .video-js .vjs-control-bar .vjs-play-control {
      -webkit-box-ordinal-group: 2;
      -webkit-order: 1;
      -ms-flex-order: 1;
      order: 1; }
    .video-js .vjs-control-bar .vjs-progress-control {
      -webkit-box-ordinal-group: 3;
      -webkit-order: 2;
      -ms-flex-order: 2;
      order: 2; }
    .video-js .vjs-control-bar .vjs-volume-menu-button {
      -webkit-box-ordinal-group: 4;
      -webkit-order: 3;
      -ms-flex-order: 3;
      order: 3; }
    .video-js .vjs-control-bar .vjs-fullscreen-control {
      -webkit-box-ordinal-group: 5;
      -webkit-order: 4;
      -ms-flex-order: 4;
      order: 4; }
    .video-js .vjs-control-bar .vjs-nest-logo {
      -webkit-box-ordinal-group: 6;
      -webkit-order: 5;
      -ms-flex-order: 5;
      order: 5; }
    .video-js .vjs-control-bar .vjs-play-control {
      margin-left: 5px; }
    .video-js .vjs-control-bar .vjs-captions-button,
    .video-js .vjs-control-bar .vjs-subtitles-button,
    .video-js .vjs-control-bar .vjs-chapters-button,
    .video-js .vjs-control-bar .vjs-live-control {
      display: none; }
    .video-js .vjs-control-bar .vjs-fullscreen-control::before,
    .video-js .vjs-control-bar .vjs-mute-control::before {
      content: none; }
    .video-js .vjs-control-bar .vjs-mute-control {
      background-image: url("../../images/volume.svg"); }
      .video-js .vjs-control-bar .vjs-mute-control.vjs-vol-0 {
        background-image: url("../../images/volume-muted.svg");
        background-position: 10px center;
        background-size: 10px 15px; }
    .video-js .vjs-control-bar .vjs-fullscreen-control {
      background-image: url("../../images/full-screen.svg"); }
    .video-js .vjs-control-bar .vjs-nest-logo {
      background-color: rgba(54, 58, 61, 0.64);
      background-image: url("../../images/video-logo.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 40px 17px;
      border-radius: 5px;
      cursor: pointer;
      overflow: hidden;
      padding: 0 10px;
      width: 60px; }
      .video-js .vjs-control-bar .vjs-nest-logo a {
        display: block;
        width: 100%;
        height: 100%; }
  .video-js .vjs-nest-video-title {
    background-color: rgba(54, 58, 61, 0.64);
    border-radius: 5px;
    left: 5px;
    margin-right: 5px;
    padding: 5px 10px;
    position: absolute;
    top: 5px;
    z-index: 999; }
    .video-js .vjs-nest-video-title a {
      font-size: 16px;
      font-size: 1.6rem;
      color: #ffffff;
      font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
      text-decoration: none; }

.embedded .video-js {
  height: 56.25vw;
  width: 177.78vh;
  left: 50%;
  max-height: 100%;
  max-width: 100%;
  padding-top: 0;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.video-js .video-control-bar .vjs-nest-logo {
  display: none; }

.video-js .vjs-nest-video-title {
  display: none; }

.embedded .video-js .video-control-bar .vjs-nest-logo {
  display: block; }

#live .video-js .vjs-live-label {
  display: block; }

#clip.embedded .video-js .vjs-nest-video-title {
  display: block; }

.ios .video-js .vjs-big-play-button {
  display: none; }

.ios.ipad .video-js .vjs-big-play-button {
  display: inline; }

/*! Copyright 2013-2015 Nest Labs, All rights reserved */
/*! Copyright 2013 Nest Labs, All rights reserved */
/*** Colors ***/
/** @variable: colors **/
/**
  Brand

  @grid
    nl-blue nl-orange nl-green nl-gray nl-red
**/
/**
  Grays

  @grid
    pearl  porcelain  mercury  mystic   iron
    raven  oslo       boulder  emperor  -
**/
/**
  Generic

  @grid
    white  off-white  polar  black
**/
/**
  Color Maps

  @grid
    background-light  background-med     background-dark  -f
    nav-link          nav-link-hover     -                -
    body-copy         body-copy-dark     link             link-hover
    border-color      border-color-dark  -                -
    icon-light        icon-med           icon-dark        -
    quote-background  -                  -                -
    product-footer-background  product-footer-border  -   -
**/
/*** Typography ***/
/** @variable: typography **/
/** Base: Unit Variables **/
/** Variables: Tech Specs **/
/*! Copyright 2016 Nest Labs, All rights reserved */
/*** CSS3 ***/
/**
  Box Model
    Set block-level element to contain margins and padding in defined width

  @usage: @include box;
**/
/**
  Transitions
    Set CSS3 transitions on elements

  @usage:
    @include transition(color 0.25s ease-in-out);
    @include transition( (background 0.25s ease-in-out),(color 0.25s ease-in-out) );

  !warning:
    `transition: transform ...` will not be prefixed properly. Need to manually write it.
**/
/**
  Transition Delays
    Set custom delay timing on element transitions

  @usage:
    @include transition-delay(0.25s);
**/
/**
  Transform
    Set (prefixed) CSS3 transform.
**/
/**
  Box Shadow
    Set (prefixed) CSS3 box shadow
**/
/*** App Store Buttons ***/
/**
  App Store Button
    Mixin to make a button for the Apple App Store.

  @usage:
    @include app-store-button();
    @include app-store-button(30px);
**/
/**
  Play Store Button
    Mixin to make a button for the Google Play Store.

  @usage:
    @include play-store-button();
    @include play-store-button(30px);
**/
/*** Block Grids ***/
/*== Equal width blocks ==*/
/**
  Block Grid Base
    For the parent element that holds grid items.
**/
/**
  Block Grid Columns
    Sets the number of columns for the grid.
**/
/*** Block Quotes ***/
/**
  Quote Mark Size
    Use to adjust the sizes of openning and closing quote marks
    - i.e. calculate a proper text-indent value (px) that keeps
    consistent spacing between the marks and the quote text.

  @param $quote-mark-size
    size of the openning and closing quote marks
  @param $vertical-adjustment
    the font-size of the quote mark will not vertically align properly
    to the design, we have to micro this value
**/
/*** Buttons ***/
/**
  Button
    The nl-button is the stylized button that we use accross the site.

  @markup: <a href="/" class="nl-button">Continue</a>
  @markup: <button class="nl-button">Continue</button>
**/
/**
  Chevron Button
    The nl-button works in concert with the `.chevron` class to give you a chevron animation on hover.

  @note: '>' = '`&gt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup: <a href="/" class="nl-button chevron">Continue&nbsp;<b>&gt;</b></a>
  @markup: <button class="nl-button chevron">Continue&nbsp;<b>&gt;</b></button>
  @markup: <a href="/" class="nl-button wide chevron">Continue&nbsp;<b>&gt;</b></a>
  @markup: <button class="nl-button wide chevron">Continue&nbsp;<b>&gt;</b></button>


  <p> When you want to have a left chevron, use the `left` classname with `nl-button` and `chevron`.

  @note: '<' = '`&lt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup: <a href="/" class="nl-button chevron left"><b>&lt;</b>&nbsp;Go Back</a>
  @markup: <button class="nl-button chevron left"><b>&lt;</b>&nbsp;Go Back</button>
  @markup: <a href="/" class="nl-button wide chevron left"><b>&lt;</b>&nbsp;Go Back</a>
  @markup: <button class="nl-button wide chevron left"><b>&lt;</b>&nbsp;Go Back</button>
**/
/**
  Watch Video Button
    The nl-button works in concert with the `.watch-video-button` class to give you a watch video icon in the button.

  @markup: <a href="/" class="nl-button watch-video-button">Watch Video</a>
  @markup: <button class="nl-button watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button blue watch-video-button">Watch Video</a>
  @markup: <button class="nl-button blue watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button wide watch-video-button">Watch Video</a>
  @markup: <button class="nl-button wide watch-video-button">Watch Video</button>
  @markup: <a href="/" class="nl-button wide blue watch-video-button">Watch Video</a>
  @markup: <button class="nl-button wide blue watch-video-button">Watch Video</button>

**/
/**
  Color Button
    The nl-button supports several colors.

  @markup: <a href="/" class="nl-button orange">Continue</a>
  @markup: <button class="nl-button grey">Continue</button>
  @markup: <a href="/" class="nl-button blue">Continue</a>
  @markup-dark: <button class="nl-button white">Continue</button>
  @markup: <a href="/" class="nl-button dark-gray">Continue</a>
  @markup: <button class="nl-button darker-gray">Continue</button>
**/
/*** Chevrons ***/
/**
  Chevron
    Chevrons are used on nearly all of Nest's links and buttons.
    The chevron class sets the font on the <b>&gt;</b> and adds an animation for hover/focus.

  @note: '>' = '`&gt;`' and '<' = '`&lt;`'

  <p> Use a non-breaking-space too (`&nbsp;`).
      The `<b>` tags around the chevron are important. Use them.

  @markup <a href="#" class="chevron">Continue&nbsp;<b>&gt;</b></a>

  @markup <a href="#" class="chevron left"><b>&lt;</b>&nbsp;Go Back</a>
**/
/*** Circular Icons ***/
/**
  Inactive Pagination Color
    Sets the color for inactive pagination.
**/
/**
  Circular Icon Theme

  <p> Use on the container such as `<li>` and container receives active class.

  !warning: `$size` must have a unit
**/
/**
  Circular Icon Size
    Sets size of circular pagination icon.
**/
/**
  Circular Icon Group Base
**/
/**
  Gallery Arrow Base
**/
/*** Gradients ***/
/**
  Gradients, Linear
    @include linear-gradient(top, #fefefe, #dedede);
**/
/*** Icons ***/
/*== Set Size, Set Layout, Set Base Styles ==*/
/**
  Icon Size
    Set the icon size. Use on the element that you set icon class.
    This allows abstraction of implementation detail from the feature,
      i.e. If we use a new technique to set icon size, we do not have
      to search and replace for the whole project

  <p> If passing only `$icon-width`, the `$icon-height` will equals to the width.
      If passing both values, you can specify both width and height

  @usage: 
    @include set-icon-size($icon-size, 65px);  // 40 x 65 (px)
    @include set-icon-size(65px);              // 65 x 65 (px)
    @include set-icon-size(50px, 60px);        // 50 x 60 (px)

  @param $icon-width
    @default icon size from _variables.scss
  @param $icon-height
    @default set equal width & height
**/
/**
  Icon Layout
    Set layout (position) of icon against text content.
    Use on the element that you set icon class.

  @param $layout { "horizontal", "vertical" }
    @default "vertical"
    $layout "vertical"   - icon on top of the text and align left
    $layout "horizontal" - icon by the text on the left, hanging text

  @param $horizontal-spacing
    Set space between icon and next sibling (e.g. label span).
    Only for horizontal layout.
**/
/**
  Icon Base
    Use to set base styling for .icon.
    Use if you want to set this on an element without using .icon class.

  @param $layout { "horizontal", "vertical" }
    @default "vertical"
**/
/*** Images ***/
/*== Background, inline images, retina, etc. ==*/
/**
  Background Image
    Set a bg-image, retina version and size.

  @usage:
    @include background-image('index/slide_thermostat/us_mobile.jpg', 'index/slide_thermostat/us_mobile_2x.jpg', cover);
**/
/**
  Transparent RGBA Background
    Choose a color and get RGBA IE-Friendly output.
    http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

  @usage: @include background-transparent(#000, 0.5);
**/
/**
  Textured Background
    Set a bg-color and overlay a texture

  @usage: @include textured-background($nl-gray);
**/
/*
  Rules passed into this will only be valid when the document is
  set to the specified language(s)

  example usage:

  @include language(en)

  will essentialy do:

  @include locale(en)
  @include locale(en-US)
  @include locale(en-GB)
  @include locale(en-CA)
  @include locale(en-IE)

  @mixin
  @param language(s)
  @param content
*/
/*** Layouts ***/
/**
  Section Container
**/
/**
  Section Layout
**/
/*** Localization ***/
/*== Country-specific mixins ==*/
/**
  Locale
    Scope CSS to specific locales

  @usage:
    @include locale('fr-FR') {}
    @include locale('fr-FR','fr-BE') {}
**/
/** @ignore **/
/**
  Loc v2

  Rules passed into this will only be valid when the document is
  set to the specified locale

  ** TODO: edit me & add blocks of comments for each new mixin added here
  // @include loc("en-CA") {
  //   background: red;
  // }
  // @include loc("en-C2A") {
  //   background: red;
  // }
  @mixin
  @param $locale IETF language tag
  @param content
*/
/*** Modular ***/
/*== Modules, Sizing, etc ==*/
/**
  Size
    Set height & width of an element. Border-radius is optional.

  @usage:
    @include size(120px, 100px);
    @include size(120px, 100px, 200px);
**/
/** 
  Border Radius
    Set border-radius on all corners

  @usage: @include border-radius(10px);
**/
/**
  Border Radius, Each
    Set border-radius on individual corners

  @usage:
    @include border-radius-each(10px, 12px);
    @include border-radius-each(10px, 12px, 14px, 16px);
**/
/** 
  Clearfix
    Clear custom floats

  @usage: @include clearfix;
**/
/*! Copyright 2013 Nest Labs, All rights reserved */
/*** Columns ***/
/**
  Column
**/
/**
  Columns
**/
/**
  Offset
**/
/**
  Two Columns
**/
/**
  Column Set
**/
/** @ignore **/
/*** Pill Controls ***/
/**
  Pills Size
**/
/*** Positioning ***/
/*== Centering, etc ==*/
/** 
  Center
    Absolutely position and transform to the center

  @usage: @include center;
**/
/**
  Vertical Center
    Absolutely position and transform to the center, vertically

  @usage: @include center-vertical;
**/
/** 
  Horizontal Center
    Absolutely position and transform/margin to the center, horizontally

  @usage:
    @include center-horizontal;
    @include center-horizontal(static);
**/
/**
  Overlay
    Absolutely position and fill the positioned parent width & height

  @usage:
    @include overlay;
    @include overlay(1);
**/
/*** Responsive Helpers ***/
/*== Media queries ==*/
/** 
  Media Queries: MIN
    Automatically sets configuration for non-responsive pages.

  @usage: @include mq(768px) {}
**/
/**
  Media Queries: MAX
    Automatically sets configuration for non-responsive pages.

  @usage: @include mq_max(767px) {}
**/
/**
  Retina Content
    Scope CSS to retina devices only

  @usage: @include retina() {}
**/
/**
  Remove Web Tap Highlight
  
  @usage: @include no-tap-higlight();
**/
/*** Responsive Media ***/
/*== Video, div of Scalable Background Image ==*/
/** 
  Responsive Media Wrapper
    Source: http://webdesignerwall.com/tutorials/css-elastic-videos
**/
/**
  Responsive Media Base
    Just leverage/delegate "overlay" mixin
**/
/**
  Responsive Media Size
    Use on media wrapper, not the media itself.

  <p> Suggest adding `background-size: cover`
      if using this for scalable `<div>` using background image
**/
/*** Sections ***/
/**
  Element Color
    Set color of elements on a section.
    Default to null, so it will not be set
    unless a value is passed in.
**/
/**
  Border
**/
/*** SVG ***/
/*== SVG Generation and Manipulation ==*/
/**
  Sprite Background

  @usage: @include svg-background.....
**/
/*** Tabs ***/
/*== Set base styles on tab container ==*/
/**
  Tab Container
**/
/**
  Font Sizing
    Set a px value and it outputs px and calcs Rem

  @usage: @include font-size(14);
**/
/**
  Line Heights
    Set a px value and it outputs px and calcs Rem

  @usage: @include line-height(14);
**/
/**
  Image Replacement

  @usage: @include ir;
**/
/** @ignore **/
/*** Watch Video Links ***/
/**
  Watch Video Size
    Use to set play (watch-video) icon to match the font-size.

  <p> Do not wrap left/right in quotes as a string.
      Error when we pass left/right as a string to background-position

  @param $font-size
  @param $icon-size
  @param $spacing

  <p> Pass the sizes (px value "with the unit") that we use for
      the watch-video copy, icon, and spacing between the copy and icon
**/
/**
  Watch Video Color
    Set play (watch-video) icon to match the font-color.

  <p> Ensure to add the SVG icon file if you use a new,
      not-yet-defined mixins like `set-watch-video-color--nl-gray`
      else during the build process, it will add up to the CSS filesize
**/
/**
  References:
  http://davidwalsh.name/html5-placeholder-css
  https://css-tricks.com/snippets/css/style-placeholder-text/
*/
/**
  Sets the background image to be the image at the specified URL,
  accepts an optional second parameter for a Retina version

  @mixin
  @param $image URL of normal image
  @param $image-2x (optional) url of Retina image
*/
/*
  START: DEPRECATED MIXINS USED IN WIDGETS
*/
/*
  END: DEPRECATED MIXINS USED IN WIDGETS
*/
.endless-video-slider {
  margin-left: auto;
  margin-right: auto;
  position: relative; }
  .endless-video-slider .slider {
    position: relative;
    background: #fff; }
    .endless-video-slider .slider:before {
      content: '';
      position: relative;
      height: 0;
      padding-bottom: 56.25%;
      background: #eee;
      display: block;
      z-index: 0;
      margin: 0 auto; }
    .endless-video-slider .slider ol.slides {
      background: #fff;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0; }
    .endless-video-slider .slider li.slide {
      position: absolute; }
      .endless-video-slider .slider li.slide[data-animate-transition="true"] {
        -webkit-transition: -webkit-transform 600ms ease-in-out;
        transition: transform 600ms ease-in-out; }
      .endless-video-slider .slider li.slide[data-animate-transition="false"] {
        -webkit-transition: none;
        transition: none; }
      .endless-video-slider .slider li.slide[data-detached="true"] {
        display: none; }
      .endless-video-slider .slider li.slide .video-player-wrapper {
        opacity: 0.3;
        transition: opacity 600ms linear; }
      .endless-video-slider .slider li.slide[data-activated="true"] .video-player-wrapper {
        opacity: 1; }
      .endless-video-slider .slider li.slide[data-activated="false"] .vjs-control-bar {
        opacity: 0; }
  .endless-video-slider .control-zone {
    z-index: 5;
    position: absolute;
    cursor: pointer;
    top: 0;
    bottom: 0;
    width: 200px;
    transform: translateZ(0); }
    .endless-video-slider .control-zone .arrow {
      position: absolute;
      top: 50%;
      margin-top: -20px; }
    .endless-video-slider .control-zone.right {
      left: 100%; }
      .endless-video-slider .control-zone.right .arrow {
        left: 10px;
        margin-left: -20px; }
    .endless-video-slider .control-zone.left {
      right: 100%; }
      .endless-video-slider .control-zone.left .arrow {
        right: 10px;
        margin-right: -20px; }

@media (min-width: 700px) {
  .endless-video-slider .control-zone.right .arrow {
    left: 40px; }
  .endless-video-slider .control-zone.left .arrow {
    right: 40px; } }

.share-container > * {
  cursor: pointer;
  position: relative;
  display: block;
  float: left;
  width: 72px;
  height: 26px;
  background-color: #00AFD8;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  font-size: 14px; }
  .share-container > * span {
    display: block;
    position: absolute; }
    .share-container > * span.text {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
      margin-top: 1px; }
      .share-container > * span.text:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center; }
  .share-container > *.permalink[data-pressed="true"] {
    background-color: #0086a5; }
  .share-container > *.permalink span.text {
    padding-left: 14px; }
    .share-container > *.permalink span.text:before {
      margin-top: -1px;
      width: 9px;
      height: 14px;
      background-image: url("../../images/share-icon.png"); }
  .share-container > *.share-fb {
    background-color: #3050a5; }
    .share-container > *.share-fb span.text {
      padding-left: 18px; }
      .share-container > *.share-fb span.text:before {
        margin-top: -1px;
        width: 13px;
        height: 13px;
        background-image: url("../../images/fb-icon.png"); }
  .share-container > *.tweet {
    background-color: #55acee; }
    .share-container > *.tweet span.text {
      padding-left: 19px; }
      .share-container > *.tweet span.text:before {
        margin-top: -1px;
        width: 16px;
        height: 15px;
        background-image: url("../../images/tweet-icon.png"); }

.permalink-popover {
  cursor: default;
  -webkit-animation-name: fadeOutDown;
  -moz-animation-name: fadeOutDown;
  -ms-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
  -webkit-animation-duration: 300ms;
  -moz-animation-duration: 300ms;
  -ms-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -ms-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-box-shadow: 0 2px 4px 1px rgba(61, 66, 71, 0.2);
  -moz-box-shadow: 0 2px 4px 1px rgba(61, 66, 71, 0.2);
  box-shadow: 0 2px 4px 1px rgba(61, 66, 71, 0.2);
  background-color: #ffffff;
  left: 50%;
  margin-left: -330px;
  opacity: 0;
  padding: 20px 30px;
  position: absolute;
  text-align: left;
  top: 30%;
  width: 600px;
  z-index: 300; }
  .permalink-popover.template {
    display: none !important; }
  .permalink-popover .close-button {
    font-size: 30px;
    font-size: 3rem;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    color: rgba(61, 66, 71, 0.5);
    display: block;
    font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
    height: 50px;
    line-height: 50px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px; }
    .permalink-popover .close-button::after {
      content: '\FF0B'; }

@media (min-width: 460px) {
  .permalink-popover {
    width: 400px; }
    .permalink-popover h2 {
      font-size: 22px; }
    .permalink-popover textarea {
      font-size: 16px; } }

@media (min-width: 768px) {
  .permalink-popover {
    width: 600px; } }

.four-three-ratio .video-wrapper {
  position: relative;
  padding-top: 75%;
  width: 100%; }

.four-three-ratio .video-js {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.four-three-ratio #video {
  max-height: none; }
  .four-three-ratio #video .container::before {
    padding-top: none;
    width: auto;
    content: none; }

.four-three-ratio.embedded .video-js {
  height: auto;
  width: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transform: none;
  transform: none;
  max-width: none;
  max-height: none; }

body {
  background-color: #ffffff; }

header,
footer,
section {
  margin: 0;
  padding: 0;
  width: 100%; }

section {
  margin-bottom: 25px;
  position: relative; }
  @media (min-width: 768px) {
    section {
      margin-bottom: 45px; } }

.container {
  max-width: 960px;
  padding: 0;
  position: relative; }

.show-live-stream, .show-clip {
  display: none; }

body#live .show-live-stream, body#live-secure .show-live-stream {
  display: initial; }

body#clip .show-clip {
  display: initial; }

.product-list, #meet-nest-cam .container #product-list {
  margin-top: 2.4rem;
  overflow: hidden;
  clear: left; }
  .product-list a, #meet-nest-cam .container #product-list a {
    display: block;
    vertical-align: baseline;
    padding-top: 90px;
    font-family: "Akkurat Book", Helvetica, Arial, "Lucida Grande", sans-serif; }
  .product-list #vertical-rule, #meet-nest-cam .container #product-list #vertical-rule {
    display: none;
    width: 1px;
    height: 100%;
    border-left: 1px solid #CCD2D7;
    position: absolute;
    left: -10px; }
  .product-list #family-link a, #meet-nest-cam .container #product-list #family-link a {
    background-image: url("../../images/cam-family.png");
    background-repeat: no-repeat;
    background-size: 220px 95px;
    padding-top: 100px;
    background-position: center top; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .product-list #family-link a, #meet-nest-cam .container #product-list #family-link a {
        background-image: url("../../images/cam-family_2x.png"); } }
  .product-list #hello-link a, #meet-nest-cam .container #product-list #hello-link a {
    background-image: url("../../images/hello.png");
    background-repeat: no-repeat;
    background-size: 90px 158px;
    padding-top: 150px;
    background-position: center top; }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      .product-list #hello-link a, #meet-nest-cam .container #product-list #hello-link a {
        background-image: url("../../images/hello_2x.png"); } }
  .product-list ul li, #meet-nest-cam .container #product-list ul li {
    position: relative; }

#hello-link {
  display: none; }

.four-three-ratio #hello-link {
  display: block; }

.four-three-ratio #family-link {
  display: none; }

.header-bar,
.header-bar:after {
  border-bottom: none; }

@media (min-width: 1024px) {
  .logo.nest-logo {
    left: 0px; } }

header .tagline {
  font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #8A9299;
  display: none;
  position: absolute;
  height: 30px;
  line-height: 35px;
  left: 98px;
  top: 7px;
  border-left: 1px solid #CCD2D7;
  padding-left: 17px;
  z-index: 500; }
  header .tagline .tagline--clip, header .tagline .tagline--live {
    display: none; }

@media (min-width: 960px) {
  header .tagline {
    font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 20px;
    font-size: 2rem;
    line-height: 2.4rem;
    margin-bottom: 1.6rem;
    height: 41px;
    line-height: 42px;
    left: 100px;
    top: 20px; } }

@media (min-width: 1024px) {
  header .tagline {
    height: 41px;
    line-height: 42px;
    left: 69px;
    top: 20px; } }

#live-secure .tagline, #live-secure .tagline--live, #live .tagline, #live .tagline--live {
  display: block; }

#clip .tagline, #clip .tagline--clip {
  display: block; }

#missing {
  display: none;
  background-color: #F9F9F9;
  text-align: center;
  padding: 2.4rem 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  transition: padding-bottom 600ms ease;
  overflow: hidden; }
  #missing h2 {
    font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 2.8rem;
    margin-bottom: 1.6rem;
    color: #3d4247;
    font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-bottom: 0.8rem; }
  #missing p {
    font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: #3d4247;
    margin-bottom: 1.6rem; }
  #missing .icon.arrow {
    background-color: rgba(255, 255, 255, 0.65);
    border-radius: 100%;
    box-shadow: 0 0 0 1px #bbb; }
  #missing .icon-slider-play-button {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -32px;
    width: 64px;
    height: 64px; }
  #missing .label {
    font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding-top: 1.1rem; }
  #missing .tiles {
    margin-top: 4.6rem;
    display: none; }
    #missing .tiles .two-columns {
      width: 48%;
      margin-left: 4%;
      float: left;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
      #missing .tiles .two-columns.first {
        margin-left: 0; }
    #missing .tiles .columns {
      float: left;
      margin: 0 0 0 2.12766%;
      width: 6.38298%; }
      #missing .tiles .columns:first-child, #missing .tiles .columns.first {
        margin-left: 0; }
      #missing .tiles .columns.two {
        width: 14.89362%; }
      #missing .tiles .columns.three, #missing .tiles .columns.one-fourth {
        width: 23.40426%; }
      #missing .tiles .columns.four, #missing .tiles .columns.one-third {
        width: 31.91489%; }
      #missing .tiles .columns.five {
        width: 40.42553%; }
      #missing .tiles .columns.six, #missing .tiles .columns.one-half {
        width: 48.93617%; }
      #missing .tiles .columns.seven {
        width: 57.44681%; }
      #missing .tiles .columns.eight, #missing .tiles .columns.two-thirds {
        width: 65.95745%; }
      #missing .tiles .columns.nine, #missing .tiles .columns.three-fourths {
        width: 74.46808%; }
      #missing .tiles .columns.ten {
        width: 82.97872%; }
      #missing .tiles .columns.eleven {
        width: 91.48936%; }
      #missing .tiles .columns.twelve, #missing .tiles .columns.full {
        width: 100.0%; }
      #missing .tiles .columns.offset-one {
        margin-left: 10.6383%; }
        #missing .tiles .columns.offset-one:first-child, #missing .tiles .columns.offset-one.first {
          margin-left: 8.51064%; }
      #missing .tiles .columns.offset-two {
        margin-left: 19.14894%; }
        #missing .tiles .columns.offset-two:first-child, #missing .tiles .columns.offset-two.first {
          margin-left: 17.02128%; }
      #missing .tiles .columns.offset-three {
        margin-left: 27.65957%; }
        #missing .tiles .columns.offset-three:first-child, #missing .tiles .columns.offset-three.first {
          margin-left: 25.53191%; }
      #missing .tiles .columns.offset-four {
        margin-left: 36.17021%; }
        #missing .tiles .columns.offset-four:first-child, #missing .tiles .columns.offset-four.first {
          margin-left: 34.04255%; }
      #missing .tiles .columns.offset-five {
        margin-left: 44.68085%; }
        #missing .tiles .columns.offset-five:first-child, #missing .tiles .columns.offset-five.first {
          margin-left: 42.55319%; }
      #missing .tiles .columns.offset-six {
        margin-left: 53.19149%; }
        #missing .tiles .columns.offset-six:first-child, #missing .tiles .columns.offset-six.first {
          margin-left: 51.06383%; }
      #missing .tiles .columns.offset-seven {
        margin-left: 61.70213%; }
        #missing .tiles .columns.offset-seven:first-child, #missing .tiles .columns.offset-seven.first {
          margin-left: 59.57447%; }
      #missing .tiles .columns.offset-eight {
        margin-left: 70.21277%; }
        #missing .tiles .columns.offset-eight:first-child, #missing .tiles .columns.offset-eight.first {
          margin-left: 68.08511%; }
      #missing .tiles .columns.offset-nine {
        margin-left: 78.7234%; }
        #missing .tiles .columns.offset-nine:first-child, #missing .tiles .columns.offset-nine.first {
          margin-left: 76.59574%; }
      #missing .tiles .columns.offset-ten {
        margin-left: 87.23404%; }
        #missing .tiles .columns.offset-ten:first-child, #missing .tiles .columns.offset-ten.first {
          margin-left: 85.10638%; }
      #missing .tiles .columns.offset-eleven {
        margin-left: 95.74468%; }
        #missing .tiles .columns.offset-eleven:first-child, #missing .tiles .columns.offset-eleven.first {
          margin-left: 93.61702%; }
    #missing .tiles .tile {
      float: left;
      margin: 0 0 0 2.12766%;
      width: 6.38298%;
      width: 31.91489%; }
      #missing .tiles .tile:first-child, #missing .tiles .tile.first {
        margin-left: 0; }
      #missing .tiles .tile .image-wrap {
        position: relative; }
  #missing .slider {
    width: 80%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 3.2rem; }
    #missing .slider .slides {
      background: #ffffff;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0; }
      #missing .slider .slides .slide {
        max-width: 500px;
        position: absolute;
        opacity: 0.4; }
        #missing .slider .slides .slide p {
          font-size: 14px;
          font-size: 1.4rem; }
        #missing .slider .slides .slide[data-activated="true"] {
          opacity: 1; }
        #missing .slider .slides .slide:nth-last-child {
          clear: right; }
  #missing.with-transitions .slider .slides .slide {
    -webkit-transition: -webkit-transform 600ms ease-in-out, opacity 600ms ease-in-out;
    transition: transform 600ms ease-in-out, opacity 600ms ease-in-out; }
  #missing img {
    max-width: 500px;
    width: 100%; }

@media (min-width: 768px) {
  #missing {
    padding-bottom: 3.2rem;
    margin-bottom: 3.2rem; }
    #missing h2 {
      font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-size: 32px;
      font-size: 3.2rem;
      line-height: 4rem;
      margin-bottom: 0.8rem;
      font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
      margin-top: 2.4rem;
      margin-bottom: 1.2rem; }
    #missing p {
      font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-size: 16px;
      font-size: 1.6rem;
      line-height: 2.4rem;
      font-family: "Akkurat Book", Helvetica, Arial, "Lucida Grande", sans-serif;
      line-height: 2.2rem; }
    #missing .slider {
      display: none; }
      #missing .slider .slide p {
        font-size: 16px;
        font-size: 1.6rem; }
    #missing .tiles {
      display: block; } }

.embedded.not-found {
  background-color: #F9F9F9; }

#video {
  margin-bottom: 3.2rem;
  position: relative; }

#live .back-to-live-stream, #live-secure .back-to-live-stream {
  display: inline-block; }

#live .replay-video, #live-secure .replay-video {
  display: none; }

#clip .back-to-live-stream {
  display: none; }

#clip .replay-video {
  display: inline-block; }

.end-state-wrapper {
  -webkit-animation-name: fadeOut;
  -moz-animation-name: fadeOut;
  -ms-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 300ms;
  -moz-animation-duration: 300ms;
  -ms-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  -ms-animation-delay: 300ms;
  animation-delay: 300ms;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  text-align: center;
  white-space: nowrap;
  display: none; }
  .end-state-wrapper:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; }
  .end-state-wrapper.visible {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -ms-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 300ms;
    -moz-animation-duration: 300ms;
    -ms-animation-duration: 300ms;
    animation-duration: 300ms;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
    .end-state-wrapper.visible .end-state {
      -webkit-animation-name: fadeInDown;
      -moz-animation-name: fadeInDown;
      -ms-animation-name: fadeInDown;
      animation-name: fadeInDown;
      -webkit-animation-duration: 300ms;
      -moz-animation-duration: 300ms;
      -ms-animation-duration: 300ms;
      animation-duration: 300ms;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -ms-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-delay: 500ms;
      -moz-animation-delay: 500ms;
      -ms-animation-delay: 500ms;
      animation-delay: 500ms;
      -webkit-animation-timing-function: ease-in-out;
      -moz-animation-timing-function: ease-in-out;
      -ms-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      z-index: 600; }
  .end-state-wrapper .end-state {
    -webkit-animation-name: fadeOutDown;
    -moz-animation-name: fadeOutDown;
    -ms-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
    -webkit-animation-duration: 300ms;
    -moz-animation-duration: 300ms;
    -ms-animation-duration: 300ms;
    animation-duration: 300ms;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    background-color: #ffffff;
    width: 80%;
    min-width: 317px;
    max-width: 480px;
    padding: 1.6rem 1.6rem 2.4rem; }
    .end-state-wrapper .end-state .close-modal {
      font-size: 30px;
      font-size: 3rem;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
      position: absolute;
      right: -15px;
      text-align: center;
      top: -50px;
      height: 50px;
      width: 50px; }
      .end-state-wrapper .end-state .close-modal::after {
        color: rgba(255, 255, 255, 0.64);
        content: '\FF0B';
        font-size: 43px;
        font-size: 4.3rem; }
    .end-state-wrapper .end-state h2 {
      font-size: 20px;
      font-size: 2rem;
      font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
      color: #3d4247; }
    .end-state-wrapper .end-state .product-list, .end-state-wrapper .end-state #meet-nest-cam .container #product-list, #meet-nest-cam .container .end-state-wrapper .end-state #product-list {
      margin-bottom: 1.6rem;
      margin-top: 1.6rem; }
      .end-state-wrapper .end-state .product-list #hello-link a, .end-state-wrapper .end-state #meet-nest-cam .container #product-list #hello-link a, #meet-nest-cam .container .end-state-wrapper .end-state #product-list #hello-link a {
        font-size: 14px;
        font-size: 1.4rem;
        padding-top: 177px; }
      .end-state-wrapper .end-state .product-list #family-link a, .end-state-wrapper .end-state #meet-nest-cam .container #product-list #family-link a, #meet-nest-cam .container .end-state-wrapper .end-state #product-list #family-link a {
        font-size: 14px;
        font-size: 1.4rem;
        padding-top: 117px; }
    .end-state-wrapper .end-state .actions {
      margin-top: 1.6rem;
      width: 100%; }
      .end-state-wrapper .end-state .actions .action:nth-child(1) {
        box-sizing: border-box;
        border-right: 2px solid #CCD2D7; }
      .end-state-wrapper .end-state .actions .action {
        font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-size: 14px;
        font-size: 1.4rem;
        line-height: 1.8rem;
        width: 50%;
        float: left; }
        .end-state-wrapper .end-state .actions .action .icon {
          width: 24px;
          height: 24px;
          display: block;
          margin: auto;
          margin-bottom: 0.8rem; }
    .end-state-wrapper .end-state hr {
      border: 1px solid #CCD2D7;
      margin-left: 0.8rem;
      margin-right: 0.8rem; }
    @media (min-width: 500px) {
      .end-state-wrapper .end-state {
        padding: 2.4rem 0 1.6rem; }
        .end-state-wrapper .end-state h2 br {
          display: none; }
        .end-state-wrapper .end-state .product-list #hello-link a, .end-state-wrapper .end-state #meet-nest-cam .container #product-list #hello-link a, #meet-nest-cam .container .end-state-wrapper .end-state #product-list #hello-link a, .end-state-wrapper .end-state .product-list #family-link a, .end-state-wrapper .end-state #meet-nest-cam .container #product-list #family-link a, #meet-nest-cam .container .end-state-wrapper .end-state #product-list #family-link a {
          font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
          font-size: 16px;
          font-size: 1.6rem;
          line-height: 2.4rem; }
        .end-state-wrapper .end-state hr {
          margin-left: 2.4rem;
          margin-right: 2.4rem; }
        .end-state-wrapper .end-state .actions .action {
          font-family: "Akkurat", Helvetica, Arial, "Lucida Grande", sans-serif;
          font-size: 16px;
          font-size: 1.6rem;
          line-height: 2.4rem; }
          .end-state-wrapper .end-state .actions .action .icon {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-bottom: 0.3rem;
            margin-right: 0.3rem; } }

@media (min-width: 768px) {
  .end-state-wrapper {
    position: absolute; } }

#details {
  margin-bottom: 3.2rem;
  padding: 0 1.6rem; }
  #details .two-columns {
    width: 48%;
    margin-left: 4%;
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    #details .two-columns.first {
      margin-left: 0; }
  #details .columns {
    float: left;
    margin: 0 0 0 2.12766%;
    width: 6.38298%; }
    #details .columns:first-child, #details .columns.first {
      margin-left: 0; }
    #details .columns.two {
      width: 14.89362%; }
    #details .columns.three, #details .columns.one-fourth {
      width: 23.40426%; }
    #details .columns.four, #details .columns.one-third {
      width: 31.91489%; }
    #details .columns.five {
      width: 40.42553%; }
    #details .columns.six, #details .columns.one-half {
      width: 48.93617%; }
    #details .columns.seven {
      width: 57.44681%; }
    #details .columns.eight, #details .columns.two-thirds {
      width: 65.95745%; }
    #details .columns.nine, #details .columns.three-fourths {
      width: 74.46808%; }
    #details .columns.ten {
      width: 82.97872%; }
    #details .columns.eleven {
      width: 91.48936%; }
    #details .columns.twelve, #details .columns.full {
      width: 100.0%; }
    #details .columns.offset-one {
      margin-left: 10.6383%; }
      #details .columns.offset-one:first-child, #details .columns.offset-one.first {
        margin-left: 8.51064%; }
    #details .columns.offset-two {
      margin-left: 19.14894%; }
      #details .columns.offset-two:first-child, #details .columns.offset-two.first {
        margin-left: 17.02128%; }
    #details .columns.offset-three {
      margin-left: 27.65957%; }
      #details .columns.offset-three:first-child, #details .columns.offset-three.first {
        margin-left: 25.53191%; }
    #details .columns.offset-four {
      margin-left: 36.17021%; }
      #details .columns.offset-four:first-child, #details .columns.offset-four.first {
        margin-left: 34.04255%; }
    #details .columns.offset-five {
      margin-left: 44.68085%; }
      #details .columns.offset-five:first-child, #details .columns.offset-five.first {
        margin-left: 42.55319%; }
    #details .columns.offset-six {
      margin-left: 53.19149%; }
      #details .columns.offset-six:first-child, #details .columns.offset-six.first {
        margin-left: 51.06383%; }
    #details .columns.offset-seven {
      margin-left: 61.70213%; }
      #details .columns.offset-seven:first-child, #details .columns.offset-seven.first {
        margin-left: 59.57447%; }
    #details .columns.offset-eight {
      margin-left: 70.21277%; }
      #details .columns.offset-eight:first-child, #details .columns.offset-eight.first {
        margin-left: 68.08511%; }
    #details .columns.offset-nine {
      margin-left: 78.7234%; }
      #details .columns.offset-nine:first-child, #details .columns.offset-nine.first {
        margin-left: 76.59574%; }
    #details .columns.offset-ten {
      margin-left: 87.23404%; }
      #details .columns.offset-ten:first-child, #details .columns.offset-ten.first {
        margin-left: 85.10638%; }
    #details .columns.offset-eleven {
      margin-left: 95.74468%; }
      #details .columns.offset-eleven:first-child, #details .columns.offset-eleven.first {
        margin-left: 93.61702%; }
  #details h2 {
    font-size: 32px;
    font-size: 3.2rem;
    font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif;
    color: #3d4247;
    margin-bottom: 0.8rem; }
    #live-secure #details h2 {
      width: 100%;
      margin-bottom: 0;
      padding-bottom: 0; }
  #details #share-buttons {
    text-align: right; }
    #details #share-buttons .permalink {
      display: none; }
    #details #share-buttons .tweet {
      margin-right: 10px; }
    #details #share-buttons #embed-stream {
      font-size: 11px;
      font-size: 1.1rem;
      background-color: #f2f4f6;
      color: #7B858E;
      padding: 0.5em 0;
      text-align: center;
      width: 100%;
      display: none;
      margin-top: 1.2rem; }
  @media (min-width: 768px) {
    #details .container {
      display: flex;
      align-items: center;
      justify-content: center; }
    #details h2 {
      float: left;
      margin: 0 0 0 2.12766%;
      width: 6.38298%;
      width: 67.65957%; }
      #details h2:first-child, #details h2.first {
        margin-left: 0; }
    #details #share-buttons {
      float: left;
      margin: 0 0 0 2.12766%;
      width: 6.38298%;
      width: 30.21277%; }
      #details #share-buttons:first-child, #details #share-buttons.first {
        margin-left: 0; }
      #details #share-buttons #embed-stream, #details #share-buttons .permalink {
        display: inline-block; }
      #details #share-buttons .tweet {
        margin-right: 0; }
      #details #share-buttons .share-container {
        -ms-box-orient: horizontal;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        width: 100%; } }
  @media (min-width: 900px) {
    #details h2 {
      float: left;
      margin: 0 0 0 2.12766%;
      width: 6.38298%;
      width: 72.76596%; }
      #details h2:first-child, #details h2.first {
        margin-left: 0; }
    #details #share-buttons {
      float: left;
      margin: 0 0 0 2.12766%;
      width: 6.38298%;
      width: 25.10638%; }
      #details #share-buttons:first-child, #details #share-buttons.first {
        margin-left: 0; }
      #details #share-buttons #embed-stream {
        display: inline-block; } }
  @media (min-width: 960px) {
    #details {
      padding: 0; } }

#meet-nest-cam {
  margin-bottom: 15px; }
  #meet-nest-cam .container {
    background-color: #F9F9F9;
    text-align: center;
    overflow: hidden; }
    #meet-nest-cam .container > ul {
      margin: 0 0.8rem;
      padding: 2.4rem 0;
      display: block;
      overflow: hidden; }
      #meet-nest-cam .container > ul .two-columns {
        width: 48%;
        margin-left: 4%;
        float: left;
        -moz-box-sizing: border-box;
        box-sizing: border-box; }
        #meet-nest-cam .container > ul .two-columns.first {
          margin-left: 0; }
      #meet-nest-cam .container > ul .columns {
        float: left;
        margin: 0 0 0 2.12766%;
        width: 6.38298%; }
        #meet-nest-cam .container > ul .columns:first-child, #meet-nest-cam .container > ul .columns.first {
          margin-left: 0; }
        #meet-nest-cam .container > ul .columns.two {
          width: 14.89362%; }
        #meet-nest-cam .container > ul .columns.three, #meet-nest-cam .container > ul .columns.one-fourth {
          width: 23.40426%; }
        #meet-nest-cam .container > ul .columns.four, #meet-nest-cam .container > ul .columns.one-third {
          width: 31.91489%; }
        #meet-nest-cam .container > ul .columns.five {
          width: 40.42553%; }
        #meet-nest-cam .container > ul .columns.six, #meet-nest-cam .container > ul .columns.one-half {
          width: 48.93617%; }
        #meet-nest-cam .container > ul .columns.seven {
          width: 57.44681%; }
        #meet-nest-cam .container > ul .columns.eight, #meet-nest-cam .container > ul .columns.two-thirds {
          width: 65.95745%; }
        #meet-nest-cam .container > ul .columns.nine, #meet-nest-cam .container > ul .columns.three-fourths {
          width: 74.46808%; }
        #meet-nest-cam .container > ul .columns.ten {
          width: 82.97872%; }
        #meet-nest-cam .container > ul .columns.eleven {
          width: 91.48936%; }
        #meet-nest-cam .container > ul .columns.twelve, #meet-nest-cam .container > ul .columns.full {
          width: 100.0%; }
        #meet-nest-cam .container > ul .columns.offset-one {
          margin-left: 10.6383%; }
          #meet-nest-cam .container > ul .columns.offset-one:first-child, #meet-nest-cam .container > ul .columns.offset-one.first {
            margin-left: 8.51064%; }
        #meet-nest-cam .container > ul .columns.offset-two {
          margin-left: 19.14894%; }
          #meet-nest-cam .container > ul .columns.offset-two:first-child, #meet-nest-cam .container > ul .columns.offset-two.first {
            margin-left: 17.02128%; }
        #meet-nest-cam .container > ul .columns.offset-three {
          margin-left: 27.65957%; }
          #meet-nest-cam .container > ul .columns.offset-three:first-child, #meet-nest-cam .container > ul .columns.offset-three.first {
            margin-left: 25.53191%; }
        #meet-nest-cam .container > ul .columns.offset-four {
          margin-left: 36.17021%; }
          #meet-nest-cam .container > ul .columns.offset-four:first-child, #meet-nest-cam .container > ul .columns.offset-four.first {
            margin-left: 34.04255%; }
        #meet-nest-cam .container > ul .columns.offset-five {
          margin-left: 44.68085%; }
          #meet-nest-cam .container > ul .columns.offset-five:first-child, #meet-nest-cam .container > ul .columns.offset-five.first {
            margin-left: 42.55319%; }
        #meet-nest-cam .container > ul .columns.offset-six {
          margin-left: 53.19149%; }
          #meet-nest-cam .container > ul .columns.offset-six:first-child, #meet-nest-cam .container > ul .columns.offset-six.first {
            margin-left: 51.06383%; }
        #meet-nest-cam .container > ul .columns.offset-seven {
          margin-left: 61.70213%; }
          #meet-nest-cam .container > ul .columns.offset-seven:first-child, #meet-nest-cam .container > ul .columns.offset-seven.first {
            margin-left: 59.57447%; }
        #meet-nest-cam .container > ul .columns.offset-eight {
          margin-left: 70.21277%; }
          #meet-nest-cam .container > ul .columns.offset-eight:first-child, #meet-nest-cam .container > ul .columns.offset-eight.first {
            margin-left: 68.08511%; }
        #meet-nest-cam .container > ul .columns.offset-nine {
          margin-left: 78.7234%; }
          #meet-nest-cam .container > ul .columns.offset-nine:first-child, #meet-nest-cam .container > ul .columns.offset-nine.first {
            margin-left: 76.59574%; }
        #meet-nest-cam .container > ul .columns.offset-ten {
          margin-left: 87.23404%; }
          #meet-nest-cam .container > ul .columns.offset-ten:first-child, #meet-nest-cam .container > ul .columns.offset-ten.first {
            margin-left: 85.10638%; }
        #meet-nest-cam .container > ul .columns.offset-eleven {
          margin-left: 95.74468%; }
          #meet-nest-cam .container > ul .columns.offset-eleven:first-child, #meet-nest-cam .container > ul .columns.offset-eleven.first {
            margin-left: 93.61702%; }
    #meet-nest-cam .container .banner-option {
      margin-bottom: 0.8rem;
      overflow: hidden; }
      #meet-nest-cam .container .banner-option h2 {
        font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-size: 24px;
        font-size: 2.4rem;
        line-height: 2.8rem;
        margin-bottom: 1.6rem;
        color: #3d4247;
        font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif; }
    #meet-nest-cam .container #copy-a, #meet-nest-cam .container #copy-b {
      padding: 0 22px; }
      #meet-nest-cam .container #copy-a h2, #meet-nest-cam .container #copy-b h2 {
        margin-bottom: 1.2rem; }
      #meet-nest-cam .container #copy-a p, #meet-nest-cam .container #copy-b p {
        font-size: 14px;
        font-size: 1.4rem; }
    #meet-nest-cam .container #copy-a, #meet-nest-cam .container #copy-b {
      display: none; }
    #meet-nest-cam .container #feature-list ul .two-columns {
      width: 48%;
      margin-left: 4%;
      float: left;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
      #meet-nest-cam .container #feature-list ul .two-columns.first {
        margin-left: 0; }
    #meet-nest-cam .container #feature-list ul .columns {
      float: left;
      margin: 0 0 0 2.12766%;
      width: 6.38298%; }
      #meet-nest-cam .container #feature-list ul .columns:first-child, #meet-nest-cam .container #feature-list ul .columns.first {
        margin-left: 0; }
      #meet-nest-cam .container #feature-list ul .columns.two {
        width: 14.89362%; }
      #meet-nest-cam .container #feature-list ul .columns.three, #meet-nest-cam .container #feature-list ul .columns.one-fourth {
        width: 23.40426%; }
      #meet-nest-cam .container #feature-list ul .columns.four, #meet-nest-cam .container #feature-list ul .columns.one-third {
        width: 31.91489%; }
      #meet-nest-cam .container #feature-list ul .columns.five {
        width: 40.42553%; }
      #meet-nest-cam .container #feature-list ul .columns.six, #meet-nest-cam .container #feature-list ul .columns.one-half {
        width: 48.93617%; }
      #meet-nest-cam .container #feature-list ul .columns.seven {
        width: 57.44681%; }
      #meet-nest-cam .container #feature-list ul .columns.eight, #meet-nest-cam .container #feature-list ul .columns.two-thirds {
        width: 65.95745%; }
      #meet-nest-cam .container #feature-list ul .columns.nine, #meet-nest-cam .container #feature-list ul .columns.three-fourths {
        width: 74.46808%; }
      #meet-nest-cam .container #feature-list ul .columns.ten {
        width: 82.97872%; }
      #meet-nest-cam .container #feature-list ul .columns.eleven {
        width: 91.48936%; }
      #meet-nest-cam .container #feature-list ul .columns.twelve, #meet-nest-cam .container #feature-list ul .columns.full {
        width: 100.0%; }
      #meet-nest-cam .container #feature-list ul .columns.offset-one {
        margin-left: 10.6383%; }
        #meet-nest-cam .container #feature-list ul .columns.offset-one:first-child, #meet-nest-cam .container #feature-list ul .columns.offset-one.first {
          margin-left: 8.51064%; }
      #meet-nest-cam .container #feature-list ul .columns.offset-two {
        margin-left: 19.14894%; }
        #meet-nest-cam .container #feature-list ul .columns.offset-two:first-child, #meet-nest-cam .container #feature-list ul .columns.offset-two.first {
          margin-left: 17.02128%; }
      #meet-nest-cam .container #feature-list ul .columns.offset-three {
        margin-left: 27.65957%; }
        #meet-nest-cam .container #feature-list ul .columns.offset-three:first-child, #meet-nest-cam .container #feature-list ul .columns.offset-three.first {
          margin-left: 25.53191%; }
      #meet-nest-cam .container #feature-list ul .columns.offset-four {
        margin-left: 36.17021%; }
        #meet-nest-cam .container #feature-list ul .columns.offset-four:first-child, #meet-nest-cam .container #feature-list ul .columns.offset-four.first {
          margin-left: 34.04255%; }
      #meet-nest-cam .container #feature-list ul .columns.offset-five {
        margin-left: 44.68085%; }
        #meet-nest-cam .container #feature-list ul .columns.offset-five:first-child, #meet-nest-cam .container #feature-list ul .columns.offset-five.first {
          margin-left: 42.55319%; }
      #meet-nest-cam .container #feature-list ul .columns.offset-six {
        margin-left: 53.19149%; }
        #meet-nest-cam .container #feature-list ul .columns.offset-six:first-child, #meet-nest-cam .container #feature-list ul .columns.offset-six.first {
          margin-left: 51.06383%; }
      #meet-nest-cam .container #feature-list ul .columns.offset-seven {
        margin-left: 61.70213%; }
        #meet-nest-cam .container #feature-list ul .columns.offset-seven:first-child, #meet-nest-cam .container #feature-list ul .columns.offset-seven.first {
          margin-left: 59.57447%; }
      #meet-nest-cam .container #feature-list ul .columns.offset-eight {
        margin-left: 70.21277%; }
        #meet-nest-cam .container #feature-list ul .columns.offset-eight:first-child, #meet-nest-cam .container #feature-list ul .columns.offset-eight.first {
          margin-left: 68.08511%; }
      #meet-nest-cam .container #feature-list ul .columns.offset-nine {
        margin-left: 78.7234%; }
        #meet-nest-cam .container #feature-list ul .columns.offset-nine:first-child, #meet-nest-cam .container #feature-list ul .columns.offset-nine.first {
          margin-left: 76.59574%; }
      #meet-nest-cam .container #feature-list ul .columns.offset-ten {
        margin-left: 87.23404%; }
        #meet-nest-cam .container #feature-list ul .columns.offset-ten:first-child, #meet-nest-cam .container #feature-list ul .columns.offset-ten.first {
          margin-left: 85.10638%; }
      #meet-nest-cam .container #feature-list ul .columns.offset-eleven {
        margin-left: 95.74468%; }
        #meet-nest-cam .container #feature-list ul .columns.offset-eleven:first-child, #meet-nest-cam .container #feature-list ul .columns.offset-eleven.first {
          margin-left: 93.61702%; }
    #meet-nest-cam .container #feature-list ul li {
      float: left;
      margin: 0 0 0 2.12766%;
      width: 6.38298%;
      width: 31.91489%; }
      #meet-nest-cam .container #feature-list ul li:first-child, #meet-nest-cam .container #feature-list ul li.first {
        margin-left: 0; }
      #meet-nest-cam .container #feature-list ul li .icon {
        margin-bottom: 1.6rem; }
      #meet-nest-cam .container #feature-list ul li p {
        font-size: 12px;
        font-size: 1.2rem;
        font-family: "Akkurat Book", Helvetica, Arial, "Lucida Grande", sans-serif; }
    #meet-nest-cam .container hr {
      border: 1px solid #CCD2D7;
      width: 85%; }
    #meet-nest-cam .container #product-list ul li a {
      font-size: 12px;
      font-size: 1.2rem; }
  @media (min-width: 500px) {
    #meet-nest-cam .container #feature-list ul li p {
      font-size: 16px;
      font-size: 1.6rem; }
    #meet-nest-cam .container #product-list {
      box-sizing: border-box;
      padding-right: 10px; }
      #meet-nest-cam .container #product-list ul li a {
        font-size: 16px;
        font-size: 1.6rem; } }
  @media (min-width: 650px) {
    #meet-nest-cam .container {
      max-width: 960px; }
      #meet-nest-cam .container hr {
        display: none; }
      #meet-nest-cam .container > ul {
        padding: 3.2rem 0; }
      #meet-nest-cam .container #left {
        float: left;
        margin: 0 0 0 2.12766%;
        width: 6.38298%;
        width: 57.44681%; }
        #meet-nest-cam .container #left:first-child, #meet-nest-cam .container #left.first {
          margin-left: 0; }
      #meet-nest-cam .container .banner-option {
        box-sizing: border-box; }
        #meet-nest-cam .container .banner-option h2 {
          font-size: 32px;
          font-size: 3.2rem; }
      #meet-nest-cam .container #copy-a {
        text-align: left;
        padding: 0.7rem 7.2rem 0; }
        #meet-nest-cam .container #copy-a p {
          font-size: 16px;
          font-size: 1.6rem;
          line-height: 2.4rem; }
      #meet-nest-cam .container #copy-b {
        padding: 0; }
        #meet-nest-cam .container #copy-b h2 {
          margin-top: 3.7rem; }
        #meet-nest-cam .container #copy-b br {
          display: none; }
      #meet-nest-cam .container #feature-list h2 {
        margin-bottom: 3.2rem; }
      #meet-nest-cam .container #feature-list ul li p {
        font-size: 12px;
        font-size: 1.2rem;
        margin-bottom: 0; }
      #meet-nest-cam .container #feature-list ul li .icon {
        margin-bottom: 1.2rem; }
      #meet-nest-cam .container #product-list {
        float: left;
        margin: 0 0 0 2.12766%;
        width: 6.38298%;
        width: 40.42553%;
        border-top: none;
        padding-top: 0px;
        overflow: visible;
        clear: none; }
        #meet-nest-cam .container #product-list:first-child, #meet-nest-cam .container #product-list.first {
          margin-left: 0; }
        #meet-nest-cam .container #product-list ul li a {
          font-size: 12px;
          font-size: 1.2rem;
          padding-top: 110px; }
        #meet-nest-cam .container #product-list #vertical-rule {
          display: block; }
        #meet-nest-cam .container #product-list #family-link a {
          background-image: url("../../images/cam-family.png");
          background-repeat: no-repeat;
          background-size: 220px 95px;
          background-position: center top; } }
      @media (min-width: 650px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 650px) and (min-resolution: 144dpi) {
        #meet-nest-cam .container #product-list #family-link a {
          background-image: url("../../images/cam-family_2x.png"); } }
  @media (min-width: 650px) {
        #meet-nest-cam .container #product-list #hello-link a {
          background-image: url("../../images/hello.png");
          background-repeat: no-repeat;
          background-size: 90px 158px;
          background-position: center 3px;
          padding-top: 150px; } }
      @media (min-width: 650px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 650px) and (min-resolution: 144dpi) {
        #meet-nest-cam .container #product-list #hello-link a {
          background-image: url("../../images/hello_2x.png"); } }
  @media (min-width: 768px) {
    #meet-nest-cam .container #feature-list ul li p {
      font-size: 14px;
      font-size: 1.4rem; }
    #meet-nest-cam .container #product-list ul li a {
      font-size: 14px;
      font-size: 1.4rem; } }
  @media (min-width: 940px) {
    #meet-nest-cam .container #feature-list {
      box-sizing: border-box;
      padding: 0 3.2rem; }
      #meet-nest-cam .container #feature-list ul li p {
        font-size: 16px;
        font-size: 1.6rem; }
    #meet-nest-cam .container #product-list ul li a {
      font-size: 16px;
      font-size: 1.6rem; } }

footer {
  font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
  position: relative; }
  footer nav {
    padding: 0 30px 10px; }
    footer nav li,
    footer nav a,
    footer nav a:visited {
      font-size: 12px;
      font-size: 1.2rem;
      color: #95a1aa;
      display: inline; }
    footer nav a {
      margin-left: 12px; }
  @media (min-width: 1000px) {
    footer nav {
      padding: 0 0 10px; } }

#overlay {
  -webkit-animation-name: fadeOut;
  -moz-animation-name: fadeOut;
  -ms-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 300ms;
  -moz-animation-duration: 300ms;
  -ms-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  -ms-animation-delay: 300ms;
  animation-delay: 300ms;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  background: rgba(255, 255, 255, 0.9);
  bottom: 0;
  display: none;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 500; }
  #overlay.visible {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -ms-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 300ms;
    -moz-animation-duration: 300ms;
    -ms-animation-duration: 300ms;
    animation-duration: 300ms;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
    #overlay.visible #embed-code {
      -webkit-animation-name: fadeInDown;
      -moz-animation-name: fadeInDown;
      -ms-animation-name: fadeInDown;
      animation-name: fadeInDown;
      -webkit-animation-duration: 300ms;
      -moz-animation-duration: 300ms;
      -ms-animation-duration: 300ms;
      animation-duration: 300ms;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -ms-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-delay: 500ms;
      -moz-animation-delay: 500ms;
      -ms-animation-delay: 500ms;
      animation-delay: 500ms;
      -webkit-animation-timing-function: ease-in-out;
      -moz-animation-timing-function: ease-in-out;
      -ms-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      z-index: 600; }
  #overlay.visible-permalink {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -ms-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 300ms;
    -moz-animation-duration: 300ms;
    -ms-animation-duration: 300ms;
    animation-duration: 300ms;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
    #overlay.visible-permalink .permalink-popover {
      -webkit-animation-name: fadeInDown;
      -moz-animation-name: fadeInDown;
      -ms-animation-name: fadeInDown;
      animation-name: fadeInDown;
      -webkit-animation-duration: 300ms;
      -moz-animation-duration: 300ms;
      -ms-animation-duration: 300ms;
      animation-duration: 300ms;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -ms-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-delay: 500ms;
      -moz-animation-delay: 500ms;
      -ms-animation-delay: 500ms;
      animation-delay: 500ms;
      -webkit-animation-timing-function: ease-in-out;
      -moz-animation-timing-function: ease-in-out;
      -ms-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      opacity: 1;
      visibility: visible;
      z-index: 600; }
  #overlay h2 {
    font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
    margin-bottom: 10px;
    text-align: left; }
  #overlay textarea {
    border-radius: 3px;
    color: #5e656c;
    margin-bottom: 10px;
    padding: 10px 15px;
    resize: none;
    width: 100%; }
    .highlight-off #overlay textarea {
      outline: none; }
  #overlay #embed-code {
    -webkit-animation-name: fadeOutDown;
    -moz-animation-name: fadeOutDown;
    -ms-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
    -webkit-animation-duration: 300ms;
    -moz-animation-duration: 300ms;
    -ms-animation-duration: 300ms;
    animation-duration: 300ms;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -ms-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-box-shadow: 0 2px 4px 1px rgba(61, 66, 71, 0.2);
    -moz-box-shadow: 0 2px 4px 1px rgba(61, 66, 71, 0.2);
    box-shadow: 0 2px 4px 1px rgba(61, 66, 71, 0.2);
    background-color: #ffffff;
    left: 50%;
    margin-left: -330px;
    opacity: 0;
    padding: 20px 30px;
    position: absolute;
    text-align: right;
    top: 30%;
    width: 600px;
    z-index: 300; }
    #overlay #embed-code #close-overlay {
      font-size: 30px;
      font-size: 3rem;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      color: rgba(61, 66, 71, 0.5);
      display: block;
      font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
      height: 50px;
      line-height: 50px;
      position: absolute;
      right: 0;
      text-align: center;
      top: 0;
      width: 50px; }
      #overlay #embed-code #close-overlay::after {
        content: '\FF0B'; }
    #overlay #embed-code button,
    #overlay #embed-code button:active {
      outline: none; }
    #overlay #embed-code button:focus {
      background-color: #FFA02F; }
    #overlay #embed-code #copied {
      font-size: 14px;
      font-size: 1.4rem;
      color: #00AFD8;
      font-family: "Akkurat Light", Helvetica, Arial, "Lucida Grande", sans-serif;
      margin-right: 10px;
      opacity: 0; }
      #overlay #embed-code #copied.visible {
        -webkit-animation-name: fadeIn;
        -moz-animation-name: fadeIn;
        -ms-animation-name: fadeIn;
        animation-name: fadeIn;
        -webkit-animation-duration: 300ms;
        -moz-animation-duration: 300ms;
        -ms-animation-duration: 300ms;
        animation-duration: 300ms;
        -webkit-animation-fill-mode: both;
        -moz-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-delay: 0;
        -moz-animation-delay: 0;
        -ms-animation-delay: 0;
        animation-delay: 0;
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        -ms-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out; }
    #overlay #embed-code [for=autoplay] {
      float: left;
      font-size: 0.8em; }
      #overlay #embed-code [for=autoplay] input {
        bottom: 1px;
        position: relative;
        vertical-align: middle; }

.highlight-off ::selection {
  background: #FFF;
  /* WebKit/Blink Browsers */
  color: #5e656c; }

.highlight-off ::-moz-selection {
  background: #FFF;
  /* Gecko Browsers */
  color: #5e656c; }

.ie #details #share-buttons .align-wrapper .fb-like {
  top: 0; }

.ie #overlay.visible,
.ie #overlay.visible #embed-code,
.ie #overlay #embed-code #copied.visible {
  display: inline-block;
  opacity: 1; }

.ie #overlay #embed-code textarea {
  margin-bottom: 15px; }

.ios #details #share-buttons #embed-stream {
  display: none; }