@charset "UTF-8"; /*! Theme Name: Starter Theme Author: Studio Science Author URI: http://studioscience.com Version: 1.0 */ html { box-sizing: border-box; } *, *::after, *::before { box-sizing: inherit; } /* * Symbolset * www.symbolset.com * Copyright © 2014 Oak Studios LLC * * Upload this file to your web server * and place this within your tags. * */ @font-face { font-family: "SSSocialCircle"; src: url("ss-social-circle.eot"); src: url("ss-social-circle.eot?#iefix") format("embedded-opentype"), url("ss-social-circle.woff") format("woff"), url("ss-social-circle.ttf") format("truetype"), url("ss-social-circle.svg#SSSocialCircle") format("svg"); font-weight: normal; font-style: normal; } /* This triggers a redraw in IE to Fix IE8's :before content rendering. */ html:hover [class^="ss-"] { -ms-zoom: 1; } .ss-icon, .ss-icon.ss-social-circle, [class^="ss-"]:before, [class*=" ss-"]:before, [class^="ss-"].ss-social-circle:before, [class*=" ss-"].ss-social-circle:before, [class^="ss-"].right:after, [class*=" ss-"].right:after, [class^="ss-"].ss-social-circle.right:after, [class*=" ss-"].ss-social-circle.right:after { font-family: "SSSocialCircle"; font-style: normal; font-weight: normal; text-decoration: none; text-rendering: optimizeLegibility; white-space: nowrap; /*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */ -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="ss-"].right:before, [class*=" ss-"].right:before { display: none; content: ''; } .ss-facebook:before, .ss-facebook.right:after { content: ''; } .ss-twitter:before, .ss-twitter.right:after { content: ''; } .ss-googleplus:before, .ss-googleplus.right:after { content: ''; } .ss-appdotnet:before, .ss-appdotnet.right:after { content: ''; } .ss-ello:before, .ss-ello.right:after { content: ''; } .ss-aboutme:before, .ss-aboutme.right:after { content: ''; } .ss-vk:before, .ss-vk.right:after { content: ''; } .ss-weibo:before, .ss-weibo.right:after { content: ''; } .ss-linkedin:before, .ss-linkedin.right:after { content: ''; } .ss-zerply:before, .ss-zerply.right:after { content: ''; } .ss-xing:before, .ss-xing.right:after { content: ''; } .ss-reddit:before, .ss-reddit.right:after { content: ''; } .ss-steam:before, .ss-steam.right:after { content: ''; } .ss-tumblr:before, .ss-tumblr.right:after { content: ''; } .ss-wordpress:before, .ss-wordpress.right:after { content: ''; } .ss-blogger:before, .ss-blogger.right:after { content: ''; } .ss-quora:before, .ss-quora.right:after { content: ''; } .ss-youtube:before, .ss-youtube.right:after { content: ''; } .ss-vimeo:before, .ss-vimeo.right:after { content: ''; } .ss-vine:before, .ss-vine.right:after { content: ''; } .ss-letterboxd:before, .ss-letterboxd.right:after { content: ''; } .ss-flickr:before, .ss-flickr.right:after { content: ''; } .ss-instagram:before, .ss-instagram.right:after { content: ''; } .ss-vscogrid:before, .ss-vscogrid.right:after { content: ''; } .ss-fivehundredpx:before, .ss-fivehundredpx.right:after { content: ''; } .ss-feedly:before, .ss-feedly.right:after { content: ''; } .ss-pinterest:before, .ss-pinterest.right:after { content: ''; } .ss-dropbox:before, .ss-dropbox.right:after { content: ''; } .ss-pinboard:before, .ss-pinboard.right:after { content: ''; } .ss-delicious:before, .ss-delicious.right:after { content: ''; } .ss-dribbble:before, .ss-dribbble.right:after { content: ''; } .ss-behance:before, .ss-behance.right:after { content: ''; } .ss-github:before, .ss-github.right:after { content: ''; } .ss-bitbucket:before, .ss-bitbucket.right:after { content: ''; } .ss-stackoverflow:before, .ss-stackoverflow.right:after { content: ''; } .ss-stackexchange:before, .ss-stackexchange.right:after { content: ''; } .ss-codepen:before, .ss-codepen.right:after { content: ''; } .ss-jsfiddle:before, .ss-jsfiddle.right:after { content: ''; } .ss-paypal:before, .ss-paypal.right:after { content: ''; } .ss-shopify:before, .ss-shopify.right:after { content: ''; } .ss-kickstarter:before, .ss-kickstarter.right:after { content: ''; } .ss-etsy:before, .ss-etsy.right:after { content: ''; } .ss-foursquare:before, .ss-foursquare.right:after { content: ''; } .ss-swarm:before, .ss-swarm.right:after { content: ''; } .ss-yelp:before, .ss-yelp.right:after { content: ''; } .ss-skype:before, .ss-skype.right:after { content: ''; } .ss-whatsapp:before, .ss-whatsapp.right:after { content: ''; } .ss-rdio:before, .ss-rdio.right:after { content: ''; } .ss-spotify:before, .ss-spotify.right:after { content: ''; } .ss-lastfm:before, .ss-lastfm.right:after { content: ''; } .ss-soundcloud:before, .ss-soundcloud.right:after { content: ''; } .ss-appstore:before, .ss-appstore.right:after { content: ''; } .ss-googleplay:before, .ss-googleplay.right:after { content: ''; } .ss-appleinc:before, .ss-appleinc.right:after { content: ''; } .ss-microsoft:before, .ss-microsoft.right:after { content: ''; } .ss-windows:before, .ss-windows.right:after { content: ''; } .ss-android:before, .ss-android.right:after { content: ''; } .ss-blackberry:before, .ss-blackberry.right:after { content: ''; } .ss-link:before, .ss-link.right:after { content: '🔗'; } .ss-phone:before, .ss-phone.right:after { content: '📞'; } .ss-mail:before, .ss-mail.right:after { content: '✉'; } .ss-like:before, .ss-like.right:after { content: '👍'; } .ss-rss:before, .ss-rss.right:after { content: ''; } .ss-share:before, .ss-share.right:after { content: ''; } /* Legacy */ /*! normalize.css v1.1.0 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. * Known issue: no IE 6 support. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using * `em` units. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-size: 100%; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /** * Address `font-family` inconsistency between `textarea` and other form * elements. */ html, button, input, select, textarea { font-family: sans-serif; } /** * Address margins handled incorrectly in IE 6/7. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address font sizes and margins set differently in IE 6/7. * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */ h1 { font-size: 2em; margin: 0; } h2 { font-size: 1.5em; margin: 0; } h3 { font-size: 1.17em; margin: 0; } h4 { font-size: 1em; margin: 0; } h5 { font-size: 0.83em; margin: 0; } h6 { font-size: 0.67em; margin: 0; } /** * Address styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. * Known issue: no IE 6/7 normalization. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 6/7/8/9. */ mark { background: #ff0; color: #000; } /** * Address margins set differently in IE 6/7. */ p, pre { margin: 1em 0; } /** * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /** * Address CSS quotes not supported in IE 6/7. */ q { quotes: none; } /** * Address `quotes` property not supported in Safari 4. */ q:before, q:after { content: ''; content: none; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Lists ========================================================================== */ /** * Address margins set differently in IE 6/7. */ dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 40px; } /** * Address paddings set differently in IE 6/7. */ menu, ol, ul { padding: 0 0 0 40px; } /** * Correct list images handled incorrectly in IE 7. */ nav ul, nav ol { margin: 0; padding: 0; list-style: none; list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ /** * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. * 2. Improve image quality when scaled in IE 7. */ img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Correct margin displayed oddly in IE 6/7. */ form { margin: 0; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct color not being inherited in IE 6/7/8/9. * 2. Correct text not wrapping in Firefox 3. * 3. Correct alignment displayed oddly in IE 6/7. */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ } /** * 1. Correct font size not being inherited in all browsers. * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, * and Chrome. * 3. Improve appearance and consistency in all browsers. */ button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ } /** * Address Firefox 3+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. * 4. Remove inner spacing in IE 7 without affecting normal text inputs. * Known issue: inner spacing remains in IE 6. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to content-box in IE 8/9. * 2. Remove excess padding in IE 8/9. * 3. Remove excess padding in IE 7. * Known issue: excess padding remains in IE 6. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px; /* 3 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 3+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 6/7/8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /* Base styles: opinionated defaults */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, button, input, select, textarea { color: #222; } body { font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */ img { vertical-align: middle; } /* Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* Non-semantic helper classes */ .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .container { max-width: 100%; margin-left: auto; margin-right: auto; max-width: 960px; } .container::after { clear: both; content: ""; display: table; } .lg-container { max-width: 100%; margin-left: auto; margin-right: auto; max-width: 1160px; } .lg-container::after { clear: both; content: ""; display: table; } h1 { font-family: "brandon-grotesque", sans-serif; font-weight: 300; text-transform: uppercase; font-size: 42px; word-spacing: 5px; } @media (min-width: 45em) { h1 { line-height: 60px; } } h2 { font-family: "brandon-grotesque", sans-serif; font-size: 30px; font-weight: 300; word-spacing: 5px; text-transform: uppercase; color: #00A3DA; } @media (min-width: 26.25em) { h2 { font-size: 30px; } } .small-h2 { font-size: 30px; word-spacing: 5px; } @media (min-width: 33.75em) { .small-h2 { font-size: 40px; } } h3 { font-family: "brandon-grotesque", sans-serif; font-size: 30px; font-weight: 300; text-transform: uppercase; color: #00A3DA; } h4 { font-family: "museo-sans-rounded", sans-serif; font-weight: 100; font-size: 25px; color: #686868; } h5 { font-family: "museo-sans-rounded", sans-serif; font-weight: 100; font-size: 20px; color: #686868; } p { font-family: "museo-sans-rounded", sans-serif; line-height: 26px; color: #686868; } button { width: 200px; padding: 10px; color: white; font-family: "museo-sans-rounded", sans-serif; font-weight: 100; background-color: white; border: none; border-radius: 2px; } ul { list-style-type: none; } .btn-primary { border: 1px solid #F49D53; color: #F49D53; } button:hover { border: 1px solid #00A3DA; color: #00A3DA; } a { text-decoration: none; color: #686868; font-family: "museo-sans-rounded", sans-serif; } a:hover { color: #F49D53; } .btn-buy { border: 1px solid #F49D53; color: #F49D53; background-color: #EEEEEE; } .logo { width: 150px; margin-left: 30px; } @media (min-width: 45em) { .logo { margin-left: 50px; } } .top-header { height: 80px; } nav { padding-top: 20px; } .nav-toggle { display: block; padding: 10px; font-family: "museo-sans-rounded", sans-serif; font-weight: 100; background-color: white; border: none; border-radius: 2px; border: 1px solid #F49D53; color: #F49D53; } .nav-toggle:hover { color: #00A3DA; border: 1px solid #00A3DA; } .nav-toggle { margin-right: 20px; float: right; } @media (min-width: 45em) { .nav-toggle { display: none; } } .top-nav ul li a { display: block; padding: 10px; } .top-nav { position: relative; z-index: 9999; display: block; height: 0px; overflow: hidden; margin-top: 26px; background-color: white; transition: height .4s ease-in; } @media (min-width: 45em) { .top-nav { float: right; margin-top: 0; border-top: 0px; height: auto; overflow: none; } } @media (min-width: 60em) { .top-nav { padding-right: 50px; } } .show-nav { border-top: 2px solid #00A3DA; height: 294px; width: 100%; transition: height .4s ease-in; box-shadow: 0px 5px 20px -5px #888888; } .nav-tabs li { padding: 15px 15px; border-bottom: 1px solid #EEEEEE; } @media (min-width: 45em) { .nav-tabs li { float: left; display: inline; padding: 10px 20px; border-bottom: 0; } } .hero { position: relative; height: 400px; background: url("../img/header-img-small.png"); background-size: cover; background-position: center center; } @media (min-width: 33.75em) { .hero { height: 500px; } } @media (min-width: 45em) { .hero { background: url("../img/header-img.png"); background-size: cover; background-position: center center; } } @media (min-width: 67.6875em) { .hero { height: 650px; } } .headline { padding: 0 30px 0 30px; text-align: center; padding-top: 50px; } @media (min-width: 33.75em) { .headline { padding-top: 80px; } } .headline h5 { color: white; } @media (min-width: 45em) { .headline h5 { font-size: 30px; } } .headline h1 { text-align: center; display: block; margin: 0 auto; font-size: 30px; color: white; max-width: 850px; } @media (min-width: 33.75em) { .headline h1 { font-size: 42px; } } @media (min-width: 60em) { .headline h1 { animation: type 4s steps(60, end); white-space: nowrap; overflow: hidden; border-right: .05em solid; -webkit-animation: typing 4s steps(35, end), blink-caret 1s step-end; -moz-animation: typing 4s steps(35, end), blink-caret 1s step-end; } } @-webkit-keyframes typing { from { width: 0; } to { width: 850px; } } @-moz-keyframes typing { from { width: 0; } to { width: 850px; } } @-webkit-keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: white; } 100% { border: hidden; } } @-moz-keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: white; } 100% { border: hidden; } } .header-icons { padding: 0 30px 50px 30px; margin-top: 50px; text-align: center; } @media (min-width: 67.6875em) { .header-icons { padding: 0; } } .icons { height: auto; margin-top: 30px; margin-left: 30px; margin-right: 30px; } .icons .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 48.821174201%; padding: 30px; margin-left: 0px; margin-right: 0px; } .icons .grid-item:last-child { margin-right: 0; } .icons .grid-item:nth-child(2n) { margin-right: 0; } .icons .grid-item:nth-child(2n+1) { clear: left; } @media (min-width: 45em) { .icons .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 23.2317613015%; } .icons .grid-item:nth-child(2n) { margin-right: 2.3576515979%; } .icons .grid-item:nth-child(2n+1) { clear: none; } .icons .grid-item:last-child { margin-right: 0; } } .icon-circle { height: 100px; width: 100px; display: block; margin-left: auto; margin-right: auto; } @media (min-width: 33.75em) { .icon-circle { height: 123px; width: 123px; } } .icon-text { text-align: center; padding-top: 20px; color: #686868; } .break { text-align: center; } .break .divider { width: 150px; padding-top: 50px; } @media (min-width: 45em) { .break .divider { padding-top: 100px; } } .connect-to-klowd { margin-top: 50px; padding: 0 30px 0 30px; text-align: center; } @media (min-width: 45em) { .connect-to-klowd { padding: 0 30px 0 30px; margin-top: 100px; margin-bottom: 80px; } } .column-1 { text-align: center; float: left; display: block; margin-right: 2.3576515979%; width: 100%; margin-bottom: 40px; } .column-1:last-child { margin-right: 0; } @media (min-width: 45em) { .column-1 { float: left; display: block; margin-right: 2.3576515979%; width: 48.821174201%; margin-bottom: 0px; } .column-1:last-child { margin-right: 0; } } .column-1 .product-container { position: relative; width: 60%; margin: 0 auto 30px auto; max-width: 140px; float: none; } @media (min-width: 26.25em) { .column-1 .product-container { margin: 0px auto 30px auto; } } @media (min-width: 45em) { .column-1 .product-container { max-width: 375px; float: left; margin-bottom: 0px; } } .column-1 .product-container .phone { width: 100%; } .column-1 .product-container .hub { position: absolute; width: 110%; right: -75px; bottom: -30px; } @media (min-width: 45em) { .column-1 .product-container .hub { right: -150px; bottom: -50px; } } .column-2 { float: left; display: block; margin-right: 2.3576515979%; width: 100%; } .column-2:last-child { margin-right: 0; } @media (min-width: 45em) { .column-2 { float: left; display: block; margin-right: 2.3576515979%; width: 48.821174201%; margin-bottom: 0px; } .column-2:last-child { margin-right: 0; } } @media (min-width: 45em) { .content-block-1 { text-align: left; } } .connect-to-klowd button { margin-top: 40px; } .three-sixty-view { background-image: url("../img/360-view.png"); background-size: cover; background-position: center center; position: relative; height: 400px; padding: 80px 80px; } @media (min-width: 45em) { .three-sixty-view { margin-top: 180px; height: 500px; } } .three-sixty-small-content { margin-top: 80px; text-align: center; padding: 0 30px 50px 30px; } @media (min-width: 45em) { .three-sixty-small-content { display: none; } } .three-sixty-small-content { text-align: center; } .three-sixty-small-content .divider { width: 150px; padding-bottom: 50px; } .three-sixty-content { display: none; } @media (min-width: 45em) { .three-sixty-content { display: block; width: 400px; padding-top: 50px; } } .monitor-anywhere { margin-top: 120px; margin-bottom: 120px; text-align: center; padding: 0 30px 0 30px; } .full-width-img { text-align: center; } .monitor-img { width: 300px; margin-top: 50px; } @media (min-width: 45em) { .monitor-img { width: 600px; margin-top: 80px; } } @media (min-width: 60em) { .monitor-img { width: 800px; } } .monitor-anywhere button { margin-top: 40px; } .klowd-products { margin-top: 50px; } .klowd-family { margin-top: 80px; } .klowd-family .grid-item { text-align: center; height: auto; float: left; display: block; margin-right: 2.3576515979%; width: 48.821174201%; } .klowd-family .grid-item:last-child { margin-right: 0; } .klowd-family .grid-item:nth-child(2n) { margin-right: 0; } .klowd-family .grid-item:nth-child(2n+1) { clear: left; } @media (min-width: 45em) { .klowd-family .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .klowd-family .grid-item:nth-child(2n) { margin-right: 2.3576515979%; } .klowd-family .grid-item:nth-child(2n+1) { clear: none; } .klowd-family .grid-item:nth-child(3n) { margin-right: 0; } .klowd-family .grid-item:nth-child(3n+1) { clear: left; } .klowd-family .grid-item:last-child { margin-right: 0; } } .klowd-family-headline { text-align: center; padding: 20px; } .klowd-family .divider { padding-top: 0px; } .rec-additions .divider { padding-top: 0px; } .product-item { width: 140px; padding: 20px; } @media (min-width: 26.25em) { .product-item { width: 180px; } } @media (min-width: 45em) { .product-item { padding: 0; } } .price { margin-top: -2px; font-family: "brandon-grotesque", sans-serif; font-weight: 100; } .grid-item button { display: none; width: 120px; } @media (min-width: 33.75em) { .grid-item button { width: 200px; } } .grid-item:hover button { display: inline-block; } .other-products, .klowd-products { padding: 0 30px 0 30px; } .other-products::after, .klowd-products::after { clear: both; content: ""; display: table; } .other-products .grid-item, .klowd-products .grid-item { box-sizing: border-box; border: 2px solid white; cursor: pointer; height: 320px; } @media (min-width: 45em) { .other-products .grid-item:hover, .klowd-products .grid-item:hover { border: 2px solid #EEEEEE; } } .other-products .grid-item a, .klowd-products .grid-item a { display: block; cursor: pointer; } .other-products { margin-top: 50px; } .rec-additions { margin-top: 80px; } .rec-additions .grid-item { text-align: center; float: left; display: block; margin-right: 2.3576515979%; width: 48.821174201%; } .rec-additions .grid-item:last-child { margin-right: 0; } .rec-additions .grid-item:nth-child(2n) { margin-right: 0; } .rec-additions .grid-item:nth-child(2n+1) { clear: left; } @media (min-width: 45em) { .rec-additions .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .rec-additions .grid-item:nth-child(2n) { margin-right: 2.3576515979%; } .rec-additions .grid-item:nth-child(2n+1) { clear: none; } .rec-additions .grid-item:nth-child(3n) { margin-right: 0; } .rec-additions .grid-item:nth-child(3n+1) { clear: left; } .rec-additions .grid-item:last-child { margin-right: 0; } } .rec-additions-headline { text-align: center; padding: 20px; } .iphone-flat { margin-top: 80px; text-align: center; width: 300px; padding-right: 30px; } @media (min-width: 33.75em) { .iphone-flat { width: 400px; } } @media (min-width: 45em) { .iphone-flat { margin-top: 0px; float: left; } } @media (min-width: 60em) { .iphone-flat { width: 600px; } } @media (min-width: 67.6875em) { .iphone-flat { width: 700px; } } .step-one .content-block-1 { margin: 0 30px 30px; } @media (min-width: 45em) { .step-one .content-block-1 { margin-top: 100px; margin-right: 100px; } } .step-number { color: #F49D53; } .small-h2 { size: 30px; } .step-two-three { clear: both; margin: 0 30px 30px; } @media (min-width: 45em) { .step-two-three { padding-top: 60px; } } @media (min-width: 67.6875em) { .step-two-three { margin: 0; } } @media (min-width: 45em) { .step-two { margin: 0; float: left; display: block; margin-right: 2.3576515979%; width: 48.821174201%; } .step-two:last-child { margin-right: 0; } } .connected-img { width: 100%; margin-top: 50px; text-align: center; } @media (min-width: 45em) { .connected-img { max-width: 600px; } } @media (min-width: 60em) { .connected-img { max-width: 800px; } } .know-your-home { background-image: linear-gradient(rgba(216, 216, 216, 0.65), rgba(216, 216, 216, 0.65)), url("../img/know-your-home.png"); background-size: cover; background-position: center center; position: relative; height: 300px; padding: 30px 30px; margin-top: 50px; } @media (min-width: 45em) { .know-your-home { background-image: linear-gradient(transparent, transparent), url("../img/know-your-home.png"); margin-top: 120px; height: 500px; padding: 80px 80px; } } .know-your-home-content { padding-top: 30px; color: white; } @media (min-width: 45em) { .know-your-home-content { display: block; width: 400px; padding-top: 50px; } } .live-better { margin-top: 80px; } @media (min-width: 45em) { .live-better { margin-top: 100px; } } .content-block-2 { text-align: center; padding: 0 30px 0 30px; } .use-blocks { margin-top: 100px; text-align: center; } @media (min-width: 26.25em) { .use-blocks .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 100%; } .use-blocks .grid-item:last-child { margin-right: 0; } } @media (min-width: 33.75em) { .use-blocks .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .use-blocks .grid-item:last-child { margin-right: 0; } } @media (min-width: 45em) { .use-blocks .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .use-blocks .grid-item:last-child { margin-right: 0; } } #office h4 { color: white; padding: 50px; font-size: 25px; background-image: url("../img/automate-office.png"); background-size: cover; } @media (min-width: 33.75em) { #office h4 { padding: 100px 50px 100px 50px; } } #home h4 { color: white; padding: 50px; font-size: 25px; background-image: url("../img/automate-home.png"); background-size: cover; } @media (min-width: 33.75em) { #home h4 { padding: 100px 50px 100px 50px; } } #rental h4 { color: white; padding: 50px; font-size: 25px; background-image: url("../img/automate-rental.png"); background-size: cover; } @media (min-width: 33.75em) { #rental h4 { padding: 100px 50px 100px 50px; } } .hub-product-header { background-color: #EEEEEE; height: 400px; } @media (min-width: 45em) { .hub-product-header { height: 400px; } } .hub-product-text { float: left; padding-right: 30px; padding-left: 30px; padding-top: 40px; } @media (min-width: 45em) { .hub-product-text { width: 60%; padding-top: 50px; } } @media (min-width: 60em) { .hub-product-text { padding-top: 50px; } } @media (min-width: 67.6875em) { .hub-product-text { width: 50%; } } .hub-product-text h4 { color: #00A3DA; } .hub-product-text p { padding-bottom: 20px; border-bottom: 1px solid #D5D5D5; } .buy-now { margin-top: 30px; } .buy-now h3 { color: #686868; font-family: "museo-sans-rounded", sans-serif; } .header-price { float: left; padding-right: 50px; } .hub-img { width: 0px; } @media (min-width: 45em) { .hub-img { width: 250px; float: right; margin-top: 80px; } } @media (min-width: 52.5em) { .hub-img { margin-top: 80px; width: 300px; } } @media (min-width: 67.6875em) { .hub-img { margin-top: 60px; width: 400px; margin-right: 100px; } } .sm-container { max-width: 100%; margin-left: auto; margin-right: auto; margin-left: 0; } .sm-container::after { clear: both; content: ""; display: table; } @media (min-width: 45em) { .sm-container { max-width: 80%; } } .sm-container .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .sm-container .grid-item:last-child { margin-right: 0; } .hero-icon { width: 80px; text-align: center; margin-top: 5px; } .hero-lable { padding-left: 15px; } .tech-specs { margin-top: 80px; text-align: center; } .secondary-header { position: relative; text-align: center; } .specs-img { margin-top: 50px; text-align: center; width: 300px; } @media (min-width: 45em) { .specs-img { width: 60px; } } .detail-lable { padding-left: 40px; } .detail-icon { width: 20px; float: left; margin-top: 5px; } .product-details { margin-top: 80px; padding: 0 10px; } .product-details .grid-item { height: auto; padding: 20px; float: left; display: block; margin-right: 2.3576515979%; width: 100%; } .product-details .grid-item:last-child { margin-right: 0; } @media (min-width: 45em) { .product-details .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .product-details .grid-item:nth-child(3n) { margin-right: 0; } .product-details .grid-item:nth-child(3n+1) { clear: left; } .product-details .grid-item:last-child { margin-right: 0; } } .sensor-product-header { background-color: #EEEEEE; height: 400px; } @media (min-width: 45em) { .sensor-product-header { height: 400px; } } .sensor-product-text { float: left; padding-right: 30px; padding-left: 30px; padding-top: 40px; } @media (min-width: 45em) { .sensor-product-text { width: 60%; padding-top: 50px; } } @media (min-width: 60em) { .sensor-product-text { padding-top: 50px; } } @media (min-width: 67.6875em) { .sensor-product-text { width: 50%; } } .sensor-product-text h4 { color: #00A3DA; } .sensor-product-text p { padding-bottom: 20px; border-bottom: 1px solid #D5D5D5; } .sensor-img { width: 0px; } @media (min-width: 45em) { .sensor-img { width: 280px; float: right; margin-top: 80px; } } @media (min-width: 52.5em) { .sensor-img { margin-top: 80px; } } @media (min-width: 67.6875em) { .sensor-img { margin-top: 60px; width: 350px; margin-right: 150px; } } .sm-container { max-width: 100%; margin-left: auto; margin-right: auto; margin-left: 0; } .sm-container::after { clear: both; content: ""; display: table; } @media (min-width: 45em) { .sm-container { max-width: 80%; } } .sm-container .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .sm-container .grid-item:last-child { margin-right: 0; } .hero-icon { width: 80px; text-align: center; margin-top: 5px; } .hero-lable { padding-left: 15px; } .tech-specs { margin-top: 80px; text-align: center; } .secondary-header { position: relative; text-align: center; } .specs-img { margin-top: 50px; text-align: center; width: 300px; } @media (min-width: 45em) { .specs-img { width: 600px; } } .detail-lable { padding-left: 40px; } .detail-icon { width: 20px; float: left; margin-top: 5px; } .product-details { margin-top: 80px; padding: 0 10px; } .product-details .grid-item { height: auto; padding: 20px; float: left; display: block; margin-right: 2.3576515979%; width: 100%; } .product-details .grid-item:last-child { margin-right: 0; } @media (min-width: 45em) { .product-details .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .product-details .grid-item:nth-child(3n) { margin-right: 0; } .product-details .grid-item:nth-child(3n+1) { clear: left; } .product-details .grid-item:last-child { margin-right: 0; } } .lock-product-header { background-color: #EEEEEE; height: 400px; } @media (min-width: 45em) { .lock-product-header { height: 400px; } } .lock-product-text { float: left; padding-right: 30px; padding-left: 30px; padding-top: 40px; } @media (min-width: 45em) { .lock-product-text { width: 60%; padding-left: 60px; padding-right: 30px; padding-top: 80px; } } @media (min-width: 60em) { .lock-product-text { padding-left: 100px; padding-right: 40px; padding-top: 50px; } } .lock-product-text h4 { color: #00A3DA; } .lock-product-text p { padding-bottom: 20px; border-bottom: 1px solid #D5D5D5; } .lock-img { width: 0px; } @media (min-width: 45em) { .lock-img { width: 250px; float: right; margin-top: 60px; } } @media (min-width: 52.5em) { .lock-img { margin-top: 50px; width: 280px; } } @media (min-width: 67.6875em) { .lock-img { margin-right: 100px; } } .sm-container { max-width: 100%; margin-left: auto; margin-right: auto; margin-left: 0; } .sm-container::after { clear: both; content: ""; display: table; } @media (min-width: 45em) { .sm-container { max-width: 80%; } } .sm-container .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .sm-container .grid-item:last-child { margin-right: 0; } .hero-icon { width: 80px; text-align: center; margin-top: 5px; } .hero-lable { padding-left: 15px; } .tech-specs { margin-top: 80px; text-align: center; } .secondary-header { position: relative; text-align: center; } .specs-img { margin-top: 50px; text-align: center; width: 300px; } @media (min-width: 45em) { .specs-img { width: 600px; } } .detail-lable { padding-left: 40px; } .detail-icon { width: 20px; float: left; margin-top: 5px; } .product-details { margin-top: 80px; padding: 0 10px; } .product-details .grid-item { height: auto; padding: 20px; float: left; display: block; margin-right: 2.3576515979%; width: 100%; } .product-details .grid-item:last-child { margin-right: 0; } @media (min-width: 45em) { .product-details .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .product-details .grid-item:nth-child(3n) { margin-right: 0; } .product-details .grid-item:nth-child(3n+1) { clear: left; } .product-details .grid-item:last-child { margin-right: 0; } } .camera-product-header { background-color: #EEEEEE; height: 400px; } @media (min-width: 45em) { .camera-product-header { height: 400px; } } .camera-product-text { float: left; padding-right: 30px; padding-left: 30px; padding-top: 40px; } @media (min-width: 45em) { .camera-product-text { width: 60%; padding-top: 50px; } } @media (min-width: 60em) { .camera-product-text { padding-top: 50px; } } @media (min-width: 67.6875em) { .camera-product-text { width: 50%; } } .camera-product-text h4 { color: #00A3DA; } .camera-product-text p { padding-bottom: 20px; border-bottom: 1px solid #D5D5D5; } .camera-product-img { float: right; widows: 400px; } .camera-img { width: 0px; } @media (min-width: 45em) { .camera-img { width: 280px; float: right; margin-top: 60px; } } @media (min-width: 52.5em) { .camera-img { width: 300px; } } @media (min-width: 67.6875em) { .camera-img { margin-right: 60px; } } .sm-container { max-width: 100%; margin-left: auto; margin-right: auto; margin-left: 0; } .sm-container::after { clear: both; content: ""; display: table; } @media (min-width: 45em) { .sm-container { max-width: 80%; } } .sm-container .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .sm-container .grid-item:last-child { margin-right: 0; } .hero-lable { padding-left: 15px; } .tech-specs { margin-top: 80px; text-align: center; } .secondary-header { position: relative; text-align: center; } .specs-img { margin-top: 50px; text-align: center; width: 300px; } @media (min-width: 45em) { .specs-img { width: 600px; } } .detail-lable { padding-left: 40px; } .detail-icon { width: 20px; float: left; margin-top: 5px; } .product-details { margin-top: 80px; padding: 0 10px; } .product-details .grid-item { height: auto; padding: 20px; float: left; display: block; margin-right: 2.3576515979%; width: 100%; } .product-details .grid-item:last-child { margin-right: 0; } @media (min-width: 45em) { .product-details .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .product-details .grid-item:nth-child(3n) { margin-right: 0; } .product-details .grid-item:nth-child(3n+1) { clear: left; } .product-details .grid-item:last-child { margin-right: 0; } } .switch-product-header { background-color: #EEEEEE; height: 400px; } @media (min-width: 45em) { .switch-product-header { height: 400px; } } .switch-product-text { float: left; padding-right: 30px; padding-left: 30px; padding-top: 40px; } @media (min-width: 45em) { .switch-product-text { width: 60%; padding-left: 60px; padding-right: 30px; padding-top: 80px; } } @media (min-width: 60em) { .switch-product-text { padding-left: 100px; padding-right: 40px; padding-top: 50px; } } .switch-product-text h4 { color: #00A3DA; } .switch-product-text p { padding-bottom: 20px; border-bottom: 1px solid #D5D5D5; } .switch-img { width: 0px; } @media (min-width: 45em) { .switch-img { width: 220px; float: right; margin-top: 30px; } } @media (min-width: 52.5em) { .switch-img { width: 230px; margin-right: 60px; margin-top: 20px; } } .product-icons { padding: 10px 0; } .product-icons li { padding: 0px 0px; color: white; font-family: "museo-sans-rounded", sans-serif; display: inline; padding-right: 20px; } .product-icons img { width: 40px; } .tech-specs { margin-top: 80px; text-align: center; } .secondary-header { position: relative; text-align: center; } .specs-img { margin-top: 50px; text-align: center; width: 300px; } @media (min-width: 45em) { .specs-img { width: 600px; } } .detail-lable { padding-left: 40px; } .detail-icon { width: 20px; float: left; margin-top: 5px; } .product-details { margin-top: 80px; padding: 0 10px; } .product-details .grid-item { height: auto; padding: 20px; float: left; display: block; margin-right: 2.3576515979%; width: 100%; } .product-details .grid-item:last-child { margin-right: 0; } @media (min-width: 45em) { .product-details .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .product-details .grid-item:nth-child(3n) { margin-right: 0; } .product-details .grid-item:nth-child(3n+1) { clear: left; } .product-details .grid-item:last-child { margin-right: 0; } } .outlet-product-header { background-color: #EEEEEE; height: 400px; } @media (min-width: 45em) { .outlet-product-header { height: 400px; } } .outlet-product-text { float: left; padding-right: 30px; padding-left: 30px; padding-top: 40px; } @media (min-width: 45em) { .outlet-product-text { width: 60%; padding-left: 60px; padding-right: 30px; padding-top: 80px; } } @media (min-width: 60em) { .outlet-product-text { padding-left: 100px; padding-right: 40px; padding-top: 50px; } } .outlet-product-text h4 { color: #00A3DA; } .outlet-product-text p { padding-bottom: 20px; border-bottom: 1px solid #D5D5D5; } .outlet-img { width: 0px; } @media (min-width: 45em) { .outlet-img { width: 250px; float: right; margin-top: 80px; margin-right: 38px; } } @media (min-width: 67.6875em) { .outlet-img { margin-left: 0px; margin-right: 50px; } } .product-icons { padding: 10px 0; } .product-icons li { padding: 0px 0px; color: white; font-family: "museo-sans-rounded", sans-serif; display: inline; padding-right: 20px; } .product-icons img { width: 40px; } .tech-specs { margin-top: 80px; text-align: center; } .secondary-header { position: relative; text-align: center; } .specs-img { margin-top: 50px; text-align: center; width: 300px; } @media (min-width: 45em) { .specs-img { width: 600px; } } .detail-lable { padding-left: 40px; } .detail-icon { width: 20px; float: left; margin-top: 5px; } .product-details { margin-top: 80px; padding: 0 10px; } .product-details .grid-item { height: auto; padding: 20px; float: left; display: block; margin-right: 2.3576515979%; width: 100%; } .product-details .grid-item:last-child { margin-right: 0; } @media (min-width: 45em) { .product-details .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .product-details .grid-item:nth-child(3n) { margin-right: 0; } .product-details .grid-item:nth-child(3n+1) { clear: left; } .product-details .grid-item:last-child { margin-right: 0; } } .sub-hero { height: 400px; background-image: url("../img/sub-hero-background.png"); background-size: cover; text-align: center; } .sub-hero h1 { padding-top: 100px; color: white; } form { padding-top: 50px; } input { font-family: "museo-sans-rounded", sans-serif; height: 60px; text-align: center; } input[type=text] { border: none; width: 400px; color: #686868; } input:focus { outline: none; } ::-webkit-input-placeholder { color: #C5C5C5; } :-moz-placeholder { /* Firefox 18- */ color: #C5C5C5; } ::-moz-placeholder { /* Firefox 19+ */ color: #C5C5C5; } :-ms-input-placeholder { color: #C5C5C5; } input[type=submit] { border: 3px solid white; width: 100px; background-color: #00A3DA; text-transform: uppercase; color: white; } .klowd-store { margin-top: 80px; } .klowd-store .grid-item { height: auto; float: left; display: block; margin-right: 2.3576515979%; width: 100%; } .klowd-store .grid-item:last-child { margin-right: 0; } .klowd-store .grid-item:nth-child(2n) { margin-right: 0; } .klowd-store .grid-item:nth-child(2n+1) { clear: left; } @media (min-width: 45em) { .klowd-store .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .klowd-store .grid-item:nth-child(2n) { margin-right: 2.3576515979%; } .klowd-store .grid-item:nth-child(2n+1) { clear: none; } .klowd-store .grid-item:nth-child(3n) { margin-right: 0; } .klowd-store .grid-item:nth-child(3n+1) { clear: left; } .klowd-store .grid-item:last-child { margin-right: 0; } } .klowd-store h4 { color: #00A3DA; } .klowd-store h5:hover { color: #F49D53; } .packages { width: 100%; } .directions { margin-top: -2px; font-family: "brandon-grotesque", sans-serif; font-weight: 100; font-size: 16px; } .third-col { margin-top: 55px; } hr { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .contact { margin-top: 50px; } .contact .grid-item { height: auto; text-align: center; float: left; display: block; margin-right: 2.3576515979%; width: 100%; } .contact .grid-item:last-child { margin-right: 0; } .contact .grid-item:nth-child(2n) { margin-right: 0; } .contact .grid-item:nth-child(2n+1) { clear: left; } @media (min-width: 45em) { .contact .grid-item { float: left; display: block; margin-right: 2.3576515979%; width: 31.7615656014%; } .contact .grid-item:nth-child(2n) { margin-right: 2.3576515979%; } .contact .grid-item:nth-child(2n+1) { clear: none; } .contact .grid-item:nth-child(3n) { margin-right: 0; } .contact .grid-item:nth-child(3n+1) { clear: left; } .contact .grid-item:last-child { margin-right: 0; } } .contact-lines { margin: 0; font-family: "brandon-grotesque", sans-serif; font-size: 16px; font-weight: 100; color: #00A3DA; } .auto-office { margin-top: 80px; padding: 0 40px; } @media (min-width: 45em) { .auto-office { padding: 0; } } .office-content { text-align: center; } @media (min-width: 45em) { .office-content { text-align: left; width: 50%; padding-left: 40px; padding-top: 70px; } } @media (min-width: 60em) { .office-content { padding-top: 80px; padding-left: 0; } } .office-image { text-align: center; } @media (min-width: 45em) { .office-image { float: right; margin-right: -80px; padding-left: 20px; } } @media (min-width: 60em) { .office-image { margin: 0; padding: 0; } } .office-image img { width: 300px; padding-bottom: 40px; } @media (min-width: 45em) { .office-image img { width: 426px; padding: 0px; } } .auto-home { margin-top: 80px; padding: 0 40px; } @media (min-width: 45em) { .auto-home { padding: 0; } } .home-content { text-align: center; } @media (min-width: 45em) { .home-content { float: right; padding-top: 60px; padding-right: 40px; width: 50%; text-align: left; } } @media (min-width: 60em) { .home-content { padding-top: 80px; } } @media (min-width: 67.6875em) { .home-content { margin-right: 60px; } } .home-image { text-align: center; } @media (min-width: 45em) { .home-image { float: left; margin-left: -100px; padding-right: 20px; } } @media (min-width: 60em) { .home-image { margin: 0; padding: 0; } } .home-image img { width: 300px; padding-bottom: 40px; } @media (min-width: 45em) { .home-image img { width: 426px; padding: 0; } } .auto-rental { margin-top: 80px; padding: 0 40px; } @media (min-width: 45em) { .auto-rental { padding: 0; } } .rental-content { text-align: center; } @media (min-width: 45em) { .rental-content { width: 50%; padding-top: 60px; padding-left: 40px; text-align: left; } } @media (min-width: 60em) { .rental-content { padding-top: 80px; padding-left: 0; } } .rental-image { text-align: center; } @media (min-width: 45em) { .rental-image { float: right; margin-right: -80px; padding-left: 20px; } } @media (min-width: 60em) { .rental-image { margin: 0; padding: 0; } } .rental-image img { width: 300px; padding-bottom: 40px; } @media (min-width: 45em) { .rental-image img { width: 426px; padding: 0; } } .sub-footer { background: #36403F; margin-top: 80px; padding: 30px 50px; } @media (min-width: 60em) { .sub-footer { padding: 30px 0p; } } menu, ol, ul { padding: 0 0 0 0px; } footer a { text-decoration: none; color: white; font-family: "museo-sans-rounded", sans-serif; } a:hover { color: #F49D53; } ul { list-style-type: none; } .sub-footer li { display: inline; font-size: 15px; padding: 0 20px 0 0; } .white-footer p { text-align: center; font-size: 10px; } .footer-contact { list-style: none; padding: 0px; } @media (min-width: 45em) { .footer-contact { float: right; margin: -10px; } } .footer-contact p { color: white; line-height: 20px; font-size: 14px; } @media (min-width: 45em) { .address { float: left; margin-left: 100px; } } @media (min-width: 45em) { .social-badges { float: right; padding-left: 40px; } } .ss-icon img { width: 30px; } .footer-contact .address span { margin-left: -20px; } .footer-contact span { display: inline-block; margin-right: 10px; } .footer-nav { margin-top: 40px; } @media (min-width: 45em) { .footer-nav { width: 50%; margin-top: 0px; } } .copyright { display: inline; color: #696969; font-size: 14px; line-height: 40px; } .footer-nav ul { margin: 0; }