Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup: Continue > @markup: @markup: Continue > @markup:
When you want to have a left chevron, use the `left` classname with `nl-button` and `chevron`. @note: '<' = '`<`'
Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup: < Go Back @markup: @markup: < Go Back @markup: **/ /** 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: Watch Video @markup: @markup: Watch Video @markup: @markup: Watch Video @markup: @markup: Watch Video @markup: **/ /** Color Button The nl-button supports several colors. @markup: Continue @markup: @markup: Continue @markup-dark: @markup: Continue @markup: **/ /*** Chevrons ***/ /** Chevron Chevrons are used on nearly all of Nest's links and buttons. The chevron class sets the font on the > and adds an animation for hover/focus. @note: '>' = '`>`' and '<' = '`<`'
Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup Continue > @markup < Go Back **/ /*** Circular Icons ***/ /** Inactive Pagination Color Sets the color for inactive pagination. **/ /** Circular Icon Theme
Use on the container such as `
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.
Suggest adding `background-size: cover` if using this for scalable `
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
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.
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("/fonts/fuller_sans_dt/regular/2DC1D4_0_0.woff") format("woff"), url("/fonts/fuller_sans_dt/regular/2DC1D4_0_0.eot") format("embedded-opentype"); } @font-face { font-family: "Fuller Sans Bold"; src: url("/fonts/fuller_sans_dt/bold/2DC1D5_0_0.woff") format("woff"), url("/fonts/fuller_sans_dt/bold/2DC1D5_0_0.eot") format("embedded-opentype"); } @font-face { font-family: "Fuller Sans Italic"; src: url("/fonts/fuller_sans_dt/italic/2DC1D5_1_0.woff") format("woff"), url("/fonts/fuller_sans_dt/italic/2DC1D5_1_0.eot") format("embedded-opentype"); } @font-face { font-family: "Fuller Sans Light"; src: url("/fonts/fuller_sans_dt/light/2DC1D3_0_0.woff") format("woff"), url("/fonts/fuller_sans_dt/light/2DC1D3_0_0.eot") format("embedded-opentype"); } @font-face { font-family: "Fuller Sans ExtraLight"; src: url("/fonts/fuller_sans_dt/extra_light/2DC1D0_0_0.woff") format("woff"), url("/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: Continue @markup: **/ /** Chevron Button The nl-button works in concert with the `.chevron` class to give you a chevron animation on hover. @note: '>' = '`>`'
Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup: Continue > @markup: @markup: Continue > @markup:
When you want to have a left chevron, use the `left` classname with `nl-button` and `chevron`. @note: '<' = '`<`'
Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup: < Go Back @markup: @markup: < Go Back @markup: **/ /** 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: Watch Video @markup: @markup: Watch Video @markup: @markup: Watch Video @markup: @markup: Watch Video @markup: **/ /** Color Button The nl-button supports several colors. @markup: Continue @markup: @markup: Continue @markup-dark: @markup: Continue @markup: **/ /*** Chevrons ***/ /** Chevron Chevrons are used on nearly all of Nest's links and buttons. The chevron class sets the font on the > and adds an animation for hover/focus. @note: '>' = '`>`' and '<' = '`<`'
Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup Continue > @markup < Go Back **/ /*** Circular Icons ***/ /** Inactive Pagination Color Sets the color for inactive pagination. **/ /** Circular Icon Theme
Use on the container such as `
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.
Suggest adding `background-size: cover` if using this for scalable `
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
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.
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:
This is an example of body copy.
**/ .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:This is an example of small body copy.
**/ .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:This is an example of tiny-body-copy/footnote/copyright copy.
**/ .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: A label **/ .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("/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("/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("/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: Localizable Link Text **/ a, a:visited { text-decoration: none; color: #00AFD8; transition: color 0.2s ease-in-out, opacity 0.2s ease; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 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: Continue > @markup: < Go Back **/ .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: -0.27em; } .chevron:focus b, .chevron:hover b, .chevron:active b { right: -0.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: -0.4em; } /** Button Wrapper class for the @see[`nl-button`, mixins.buttons.button] mixin. @markup: Continue @markup: **/ .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: Continue @markup: @markup: Continue @markup-dark: @markup: Continue @markup: **/ .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: Continue > @markup: @markup: Continue > @markup: @markup: < Go Back @markup: @markup: < Go Back @markup: **/ .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: -0.27em; } .nl-button.chevron:focus b, .nl-button.chevron:hover b, .nl-button.chevron:active b { right: -0.4em; } .nl-button.chevron b { font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.3em; bottom: -0.05em; margin-left: 0.2em; } .no-touchevents .nl-button.chevron:hover b { right: -0.5em; } .no-touchevents .nl-button.chevron:hover[disabled] b, .no-touchevents .nl-button.chevron:hover:disabled b { right: -0.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: -0.27em; } .nl-button.chevron.wide:focus b, .nl-button.chevron.wide:hover b, .nl-button.chevron.wide:active b { right: -0.4em; } .nl-button.chevron.wide b { font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.3em; bottom: -0.05em; margin-left: 0.2em; } .no-touchevents .nl-button.chevron.wide:hover b { right: -0.5em; } .no-touchevents .nl-button.chevron.wide:hover[disabled] b, .no-touchevents .nl-button.chevron.wide:hover:disabled b { right: -0.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: -0.4em; } .nl-button.chevron.left b { font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.3em; bottom: -0.05em; margin-left: 0.2em; } .nl-button.chevron.left b { margin-right: 0.2em; margin-left: auto; } .nl-button.chevron.left:active b { left: -0.5em; } .nl-button.chevron.left:active[disabled] b, .nl-button.chevron.left:active:disabled b { left: -0.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: -0.4em; } .nl-button.chevron.left.wide b { font-family: "Akkurat Bold", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 1.3em; bottom: -0.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: -0.5em; } .nl-button.chevron.left.wide:active[disabled] b, .nl-button.chevron.left.wide:active:disabled b { left: -0.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: Watch Video @markup: @markup: Watch Video @markup: @markup: Watch Video @markup: @markup: Watch Video @markup: **/ .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: @markup: @markup: @markup: @markup: @markup: @markup: @markup: @markup: @markup: @markup: @markup: @markup: **/ 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("/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: Continue @markup: **/ /** Chevron Button The nl-button works in concert with the `.chevron` class to give you a chevron animation on hover. @note: '>' = '`>`'Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup: Continue > @markup: @markup: Continue > @markup:
When you want to have a left chevron, use the `left` classname with `nl-button` and `chevron`. @note: '<' = '`<`'
Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup: < Go Back @markup: @markup: < Go Back @markup: **/ /** 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: Watch Video @markup: @markup: Watch Video @markup: @markup: Watch Video @markup: @markup: Watch Video @markup: **/ /** Color Button The nl-button supports several colors. @markup: Continue @markup: @markup: Continue @markup-dark: @markup: Continue @markup: **/ /*** Chevrons ***/ /** Chevron Chevrons are used on nearly all of Nest's links and buttons. The chevron class sets the font on the > and adds an animation for hover/focus. @note: '>' = '`>`' and '<' = '`<`'
Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup Continue > @markup < Go Back **/ /*** Circular Icons ***/ /** Inactive Pagination Color Sets the color for inactive pagination. **/ /** Circular Icon Theme
Use on the container such as `
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.
Suggest adding `background-size: cover` if using this for scalable `
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
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.
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: Continue @markup: **/ /** Chevron Button The nl-button works in concert with the `.chevron` class to give you a chevron animation on hover. @note: '>' = '`>`'
Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup: Continue > @markup: @markup: Continue > @markup:
When you want to have a left chevron, use the `left` classname with `nl-button` and `chevron`. @note: '<' = '`<`'
Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup: < Go Back @markup: @markup: < Go Back @markup: **/ /** 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: Watch Video @markup: @markup: Watch Video @markup: @markup: Watch Video @markup: @markup: Watch Video @markup: **/ /** Color Button The nl-button supports several colors. @markup: Continue @markup: @markup: Continue @markup-dark: @markup: Continue @markup: **/ /*** Chevrons ***/ /** Chevron Chevrons are used on nearly all of Nest's links and buttons. The chevron class sets the font on the > and adds an animation for hover/focus. @note: '>' = '`>`' and '<' = '`<`'
Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup Continue > @markup < Go Back **/ /*** Circular Icons ***/ /** Inactive Pagination Color Sets the color for inactive pagination. **/ /** Circular Icon Theme
Use on the container such as `
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.
Suggest adding `background-size: cover` if using this for scalable `
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
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.
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
*/ } #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: 0.5; } 10%, 30%, 60%, 80% { opacity: 1; } } @keyframes flicker { 0%, 40%, 50%, 90%, 100% { opacity: 0.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("/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("/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("/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("/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("/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("/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("/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("/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("/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.3333333333%; } .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: `` */ .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 MosherUse a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup: Continue > @markup: @markup: Continue > @markup:
When you want to have a left chevron, use the `left` classname with `nl-button` and `chevron`. @note: '<' = '`<`'
Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup: < Go Back @markup: @markup: < Go Back @markup: **/ /** 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: Watch Video @markup: @markup: Watch Video @markup: @markup: Watch Video @markup: @markup: Watch Video @markup: **/ /** Color Button The nl-button supports several colors. @markup: Continue @markup: @markup: Continue @markup-dark: @markup: Continue @markup: **/ /*** Chevrons ***/ /** Chevron Chevrons are used on nearly all of Nest's links and buttons. The chevron class sets the font on the > and adds an animation for hover/focus. @note: '>' = '`>`' and '<' = '`<`'
Use a non-breaking-space too (` `). The `` tags around the chevron are important. Use them. @markup Continue > @markup < Go Back **/ /*** Circular Icons ***/ /** Inactive Pagination Color Sets the color for inactive pagination. **/ /** Circular Icon Theme
Use on the container such as `
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.
Suggest adding `background-size: cover` if using this for scalable `
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
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.
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: "＋"; } @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.1276595745%; width: 6.3829787%; } #missing .tiles .columns:first-child, #missing .tiles .columns.first { margin-left: 0; } #missing .tiles .columns.two { width: 14.8936169745%; } #missing .tiles .columns.three, #missing .tiles .columns.one-fourth { width: 23.4042552489%; } #missing .tiles .columns.four, #missing .tiles .columns.one-third { width: 31.9148935234%; } #missing .tiles .columns.five { width: 40.4255317979%; } #missing .tiles .columns.six, #missing .tiles .columns.one-half { width: 48.9361700723%; } #missing .tiles .columns.seven { width: 57.4468083468%; } #missing .tiles .columns.eight, #missing .tiles .columns.two-thirds { width: 65.9574466213%; } #missing .tiles .columns.nine, #missing .tiles .columns.three-fourths { width: 74.4680848957%; } #missing .tiles .columns.ten { width: 82.9787231702%; } #missing .tiles .columns.eleven { width: 91.4893614447%; } #missing .tiles .columns.twelve, #missing .tiles .columns.full { width: 99.9999997191%; } #missing .tiles .columns.offset-one { margin-left: 10.6382978489%; } #missing .tiles .columns.offset-one:first-child, #missing .tiles .columns.offset-one.first { margin-left: 8.5106382745%; } #missing .tiles .columns.offset-two { margin-left: 19.1489361234%; } #missing .tiles .columns.offset-two:first-child, #missing .tiles .columns.offset-two.first { margin-left: 17.0212765489%; } #missing .tiles .columns.offset-three { margin-left: 27.6595743979%; } #missing .tiles .columns.offset-three:first-child, #missing .tiles .columns.offset-three.first { margin-left: 25.5319148234%; } #missing .tiles .columns.offset-four { margin-left: 36.1702126723%; } #missing .tiles .columns.offset-four:first-child, #missing .tiles .columns.offset-four.first { margin-left: 34.0425530979%; } #missing .tiles .columns.offset-five { margin-left: 44.6808509468%; } #missing .tiles .columns.offset-five:first-child, #missing .tiles .columns.offset-five.first { margin-left: 42.5531913723%; } #missing .tiles .columns.offset-six { margin-left: 53.1914892213%; } #missing .tiles .columns.offset-six:first-child, #missing .tiles .columns.offset-six.first { margin-left: 51.0638296468%; } #missing .tiles .columns.offset-seven { margin-left: 61.7021274957%; } #missing .tiles .columns.offset-seven:first-child, #missing .tiles .columns.offset-seven.first { margin-left: 59.5744679213%; } #missing .tiles .columns.offset-eight { margin-left: 70.2127657702%; } #missing .tiles .columns.offset-eight:first-child, #missing .tiles .columns.offset-eight.first { margin-left: 68.0851061957%; } #missing .tiles .columns.offset-nine { margin-left: 78.7234040447%; } #missing .tiles .columns.offset-nine:first-child, #missing .tiles .columns.offset-nine.first { margin-left: 76.5957444702%; } #missing .tiles .columns.offset-ten { margin-left: 87.2340423191%; } #missing .tiles .columns.offset-ten:first-child, #missing .tiles .columns.offset-ten.first { margin-left: 85.1063827447%; } #missing .tiles .columns.offset-eleven { margin-left: 95.7446805936%; } #missing .tiles .columns.offset-eleven:first-child, #missing .tiles .columns.offset-eleven.first { margin-left: 93.6170210191%; } #missing .tiles .tile { float: left; margin: 0 0 0 2.1276595745%; width: 6.3829787%; width: 31.9148935234%; } #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: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: "＋"; 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.1276595745%; width: 6.3829787%; } #details .columns:first-child, #details .columns.first { margin-left: 0; } #details .columns.two { width: 14.8936169745%; } #details .columns.three, #details .columns.one-fourth { width: 23.4042552489%; } #details .columns.four, #details .columns.one-third { width: 31.9148935234%; } #details .columns.five { width: 40.4255317979%; } #details .columns.six, #details .columns.one-half { width: 48.9361700723%; } #details .columns.seven { width: 57.4468083468%; } #details .columns.eight, #details .columns.two-thirds { width: 65.9574466213%; } #details .columns.nine, #details .columns.three-fourths { width: 74.4680848957%; } #details .columns.ten { width: 82.9787231702%; } #details .columns.eleven { width: 91.4893614447%; } #details .columns.twelve, #details .columns.full { width: 99.9999997191%; } #details .columns.offset-one { margin-left: 10.6382978489%; } #details .columns.offset-one:first-child, #details .columns.offset-one.first { margin-left: 8.5106382745%; } #details .columns.offset-two { margin-left: 19.1489361234%; } #details .columns.offset-two:first-child, #details .columns.offset-two.first { margin-left: 17.0212765489%; } #details .columns.offset-three { margin-left: 27.6595743979%; } #details .columns.offset-three:first-child, #details .columns.offset-three.first { margin-left: 25.5319148234%; } #details .columns.offset-four { margin-left: 36.1702126723%; } #details .columns.offset-four:first-child, #details .columns.offset-four.first { margin-left: 34.0425530979%; } #details .columns.offset-five { margin-left: 44.6808509468%; } #details .columns.offset-five:first-child, #details .columns.offset-five.first { margin-left: 42.5531913723%; } #details .columns.offset-six { margin-left: 53.1914892213%; } #details .columns.offset-six:first-child, #details .columns.offset-six.first { margin-left: 51.0638296468%; } #details .columns.offset-seven { margin-left: 61.7021274957%; } #details .columns.offset-seven:first-child, #details .columns.offset-seven.first { margin-left: 59.5744679213%; } #details .columns.offset-eight { margin-left: 70.2127657702%; } #details .columns.offset-eight:first-child, #details .columns.offset-eight.first { margin-left: 68.0851061957%; } #details .columns.offset-nine { margin-left: 78.7234040447%; } #details .columns.offset-nine:first-child, #details .columns.offset-nine.first { margin-left: 76.5957444702%; } #details .columns.offset-ten { margin-left: 87.2340423191%; } #details .columns.offset-ten:first-child, #details .columns.offset-ten.first { margin-left: 85.1063827447%; } #details .columns.offset-eleven { margin-left: 95.7446805936%; } #details .columns.offset-eleven:first-child, #details .columns.offset-eleven.first { margin-left: 93.6170210191%; } #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.1276595745%; width: 6.3829787%; width: 67.6595742762%; } #details h2:first-child, #details h2.first { margin-left: 0; } #details #share-buttons { float: left; margin: 0 0 0 2.1276595745%; width: 6.3829787%; width: 30.2127658685%; } #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.1276595745%; width: 6.3829787%; width: 72.7659572409%; } #details h2:first-child, #details h2.first { margin-left: 0; } #details #share-buttons { float: left; margin: 0 0 0 2.1276595745%; width: 6.3829787%; width: 25.1063829038%; } #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.1276595745%; width: 6.3829787%; } #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.8936169745%; } #meet-nest-cam .container > ul .columns.three, #meet-nest-cam .container > ul .columns.one-fourth { width: 23.4042552489%; } #meet-nest-cam .container > ul .columns.four, #meet-nest-cam .container > ul .columns.one-third { width: 31.9148935234%; } #meet-nest-cam .container > ul .columns.five { width: 40.4255317979%; } #meet-nest-cam .container > ul .columns.six, #meet-nest-cam .container > ul .columns.one-half { width: 48.9361700723%; } #meet-nest-cam .container > ul .columns.seven { width: 57.4468083468%; } #meet-nest-cam .container > ul .columns.eight, #meet-nest-cam .container > ul .columns.two-thirds { width: 65.9574466213%; } #meet-nest-cam .container > ul .columns.nine, #meet-nest-cam .container > ul .columns.three-fourths { width: 74.4680848957%; } #meet-nest-cam .container > ul .columns.ten { width: 82.9787231702%; } #meet-nest-cam .container > ul .columns.eleven { width: 91.4893614447%; } #meet-nest-cam .container > ul .columns.twelve, #meet-nest-cam .container > ul .columns.full { width: 99.9999997191%; } #meet-nest-cam .container > ul .columns.offset-one { margin-left: 10.6382978489%; } #meet-nest-cam .container > ul .columns.offset-one:first-child, #meet-nest-cam .container > ul .columns.offset-one.first { margin-left: 8.5106382745%; } #meet-nest-cam .container > ul .columns.offset-two { margin-left: 19.1489361234%; } #meet-nest-cam .container > ul .columns.offset-two:first-child, #meet-nest-cam .container > ul .columns.offset-two.first { margin-left: 17.0212765489%; } #meet-nest-cam .container > ul .columns.offset-three { margin-left: 27.6595743979%; } #meet-nest-cam .container > ul .columns.offset-three:first-child, #meet-nest-cam .container > ul .columns.offset-three.first { margin-left: 25.5319148234%; } #meet-nest-cam .container > ul .columns.offset-four { margin-left: 36.1702126723%; } #meet-nest-cam .container > ul .columns.offset-four:first-child, #meet-nest-cam .container > ul .columns.offset-four.first { margin-left: 34.0425530979%; } #meet-nest-cam .container > ul .columns.offset-five { margin-left: 44.6808509468%; } #meet-nest-cam .container > ul .columns.offset-five:first-child, #meet-nest-cam .container > ul .columns.offset-five.first { margin-left: 42.5531913723%; } #meet-nest-cam .container > ul .columns.offset-six { margin-left: 53.1914892213%; } #meet-nest-cam .container > ul .columns.offset-six:first-child, #meet-nest-cam .container > ul .columns.offset-six.first { margin-left: 51.0638296468%; } #meet-nest-cam .container > ul .columns.offset-seven { margin-left: 61.7021274957%; } #meet-nest-cam .container > ul .columns.offset-seven:first-child, #meet-nest-cam .container > ul .columns.offset-seven.first { margin-left: 59.5744679213%; } #meet-nest-cam .container > ul .columns.offset-eight { margin-left: 70.2127657702%; } #meet-nest-cam .container > ul .columns.offset-eight:first-child, #meet-nest-cam .container > ul .columns.offset-eight.first { margin-left: 68.0851061957%; } #meet-nest-cam .container > ul .columns.offset-nine { margin-left: 78.7234040447%; } #meet-nest-cam .container > ul .columns.offset-nine:first-child, #meet-nest-cam .container > ul .columns.offset-nine.first { margin-left: 76.5957444702%; } #meet-nest-cam .container > ul .columns.offset-ten { margin-left: 87.2340423191%; } #meet-nest-cam .container > ul .columns.offset-ten:first-child, #meet-nest-cam .container > ul .columns.offset-ten.first { margin-left: 85.1063827447%; } #meet-nest-cam .container > ul .columns.offset-eleven { margin-left: 95.7446805936%; } #meet-nest-cam .container > ul .columns.offset-eleven:first-child, #meet-nest-cam .container > ul .columns.offset-eleven.first { margin-left: 93.6170210191%; } #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.1276595745%; width: 6.3829787%; } #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.8936169745%; } #meet-nest-cam .container #feature-list ul .columns.three, #meet-nest-cam .container #feature-list ul .columns.one-fourth { width: 23.4042552489%; } #meet-nest-cam .container #feature-list ul .columns.four, #meet-nest-cam .container #feature-list ul .columns.one-third { width: 31.9148935234%; } #meet-nest-cam .container #feature-list ul .columns.five { width: 40.4255317979%; } #meet-nest-cam .container #feature-list ul .columns.six, #meet-nest-cam .container #feature-list ul .columns.one-half { width: 48.9361700723%; } #meet-nest-cam .container #feature-list ul .columns.seven { width: 57.4468083468%; } #meet-nest-cam .container #feature-list ul .columns.eight, #meet-nest-cam .container #feature-list ul .columns.two-thirds { width: 65.9574466213%; } #meet-nest-cam .container #feature-list ul .columns.nine, #meet-nest-cam .container #feature-list ul .columns.three-fourths { width: 74.4680848957%; } #meet-nest-cam .container #feature-list ul .columns.ten { width: 82.9787231702%; } #meet-nest-cam .container #feature-list ul .columns.eleven { width: 91.4893614447%; } #meet-nest-cam .container #feature-list ul .columns.twelve, #meet-nest-cam .container #feature-list ul .columns.full { width: 99.9999997191%; } #meet-nest-cam .container #feature-list ul .columns.offset-one { margin-left: 10.6382978489%; } #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.5106382745%; } #meet-nest-cam .container #feature-list ul .columns.offset-two { margin-left: 19.1489361234%; } #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.0212765489%; } #meet-nest-cam .container #feature-list ul .columns.offset-three { margin-left: 27.6595743979%; } #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.5319148234%; } #meet-nest-cam .container #feature-list ul .columns.offset-four { margin-left: 36.1702126723%; } #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.0425530979%; } #meet-nest-cam .container #feature-list ul .columns.offset-five { margin-left: 44.6808509468%; } #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.5531913723%; } #meet-nest-cam .container #feature-list ul .columns.offset-six { margin-left: 53.1914892213%; } #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.0638296468%; } #meet-nest-cam .container #feature-list ul .columns.offset-seven { margin-left: 61.7021274957%; } #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.5744679213%; } #meet-nest-cam .container #feature-list ul .columns.offset-eight { margin-left: 70.2127657702%; } #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.0851061957%; } #meet-nest-cam .container #feature-list ul .columns.offset-nine { margin-left: 78.7234040447%; } #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.5957444702%; } #meet-nest-cam .container #feature-list ul .columns.offset-ten { margin-left: 87.2340423191%; } #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.1063827447%; } #meet-nest-cam .container #feature-list ul .columns.offset-eleven { margin-left: 95.7446805936%; } #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.6170210191%; } #meet-nest-cam .container #feature-list ul li { float: left; margin: 0 0 0 2.1276595745%; width: 6.3829787%; width: 31.9148935234%; } #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.1276595745%; width: 6.3829787%; width: 57.4468083468%; } #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.1276595745%; width: 6.3829787%; width: 40.4255317979%; 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: "＋"; } #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; }