.slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } #nav h1 { float: left; width: 54px; height: 75px; padding-left: 17px; margin: 0; } #nav h1 a { display: block; width: 100%; height: 100%; padding: 0; white-space: nowrap; text-indent: 100%; overflow: hidden; background: url('../images/logo-transparent.svg') no-repeat center center; background-size: 75%; opacity: 1; background-color: transparent !important; top: 0; } #nav { width: 100%; position: absolute; top: 0; left: 0; z-index: 99; border-bottom: 1px dashed rgba(255,255,255, .25); } #nav > div { margin: 0 auto; max-width: 1100px; } #nav ul { float: right; list-style-type: none; } #nav li { float: left; } #nav a { font: normal 11px/18px "FF DIN", "ff-din-web", Helvetica, Arial, sans-serif; text-decoration: none; display: block; color: #fff; padding: 28px 22px; text-transform: uppercase; letter-spacing: 2px; -webkit-transition: background-color .1s ease-out; -moz-transition: background-color .1s ease-out; transition: background-color .1s ease-out; } #nav a span { position: relative; top: 2px; } #nav a:hover { color: #f5b923; background-color: rgba(255,255,255, .05); } #nav .selected a, #page-index.section-home #nav .home a, #page-pricing #nav .pricing a, #page-signin #nav .signin a, .section-blog #nav .blog a, .section-help #nav .help a { color: #f5b923; background-color: rgba(255,255,255, .05); cursor: default; } #nav .hamburger { float: right; background: url('../images/hamburger.svg') center center no-repeat; background-size: 25%; width: 100px; height: 75px; text-indent: 200%; overflow: hidden; white-space: nowrap; padding: 0; display: none; opacity: 1; } @media screen and (max-width: 620px) { #nav .hamburger { display: block; } #nav ul { width: 100%; float: none; clear: both; background: rgba(0,0,0, .9); text-align: center; position: relative; z-index: 200; display: none; } #nav li { display: block; float: none !important; padding: 0 !important; margin: 0 !important; border-top: 1px dashed rgba(255,255,255, .25); } #nav a { font-size: 16px; } } body { width: 100%; height: 100%; } #menu { position: fixed; top: 0; bottom: 0; right: 0; z-index: 0; width: 200px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: none; background: #111; } #menu h1 { display: block; width: 25px; height: 25px; padding: 0; margin: 25px; white-space: nowrap; text-indent: 100%; overflow: hidden; background: url('../images/logo-transparent.svg') no-repeat center center; background-size: 100%; opacity: .5; background-color: transparent !important; } #menu a { display: block; color: #fff; font-family: "FF DIN", "ff-din-web", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; border-top: 1px dashed rgba(255,255,255, .15); padding: 25px; letter-spacing: .08em; text-transform: uppercase; } #menu a:hover, #page-index #menu .home a, #page-pricing #menu .pricing a, #page-signin #menu .signin a, .section-blog #menu .blog a, .section-home #menu .help a { color: #f5b923; background: rgba(255,255,255, .05); } .slideout-panel { position:relative; z-index: 1; } .slideout-open, .slideout-open body, .slideout-open .slideout-panel { overflow: hidden; } .slideout-open .slideout-menu { display: block !important; } @font-face { font-family: 'FF DIN'; src: url('../fonts/ff-din-light.woff') format('woff'); font-weight: normal; } @font-face { font-family: 'FF DIN'; src: url('../fonts/ff-din-bold.woff') format('woff'); font-weight: bold; } @-webkit-keyframes "fade" { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes "fade_up" { 0% { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 25% { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); } 50% { -webkit-transform: translateY(2px); -moz-transform: translateY(2px); -ms-transform: translateY(2px); -o-transform: translateY(2px); transform: translateY(2px); opacity: 1; } 75% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } * { margin: 0; padding: 0; } img { border: none; } a { outline: none; } ul { list-style-type: none; } main, section, article, header, footer, nav, aside, hgroup { display: block; } @font-face { font-family: 'FF DIN'; src: url('../fonts/ff-din-light.woff') format('woff'); font-weight: normal; } @font-face { font-family: 'FF DIN'; src: url('../fonts/ff-din-bold.woff') format('woff'); font-weight: bold; } @-webkit-keyframes "fade" { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes "fade_up" { 0% { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 25% { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); } 50% { -webkit-transform: translateY(2px); -moz-transform: translateY(2px); -ms-transform: translateY(2px); -o-transform: translateY(2px); transform: translateY(2px); opacity: 1; } 75% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } #mti_wfs_colophon { display: none !important; } body { background: #212225 url('../images/bg-body.png') center 0; } * { box-sizing: border-box; } main { overflow: auto; } #panel { background: #212225 url('../images/bg-body.png') center 0; } section { float: left; width: 100%; } #billboard { line-height: 25px; text-align: center; box-sizing: border-box; height: 100vh; min-height: 520px; position: relative; clear: both; background: url('../images/billboards/antelope-canyon.jpg') center top; background-size: cover; border-bottom: 1px dashed rgba(255, 255, 255, .25); } #billboard.channel-0 { background-image: url('../images/billboards/antelope-canyon.jpg'); } #billboard.channel-1 { background-image: url('../images/billboards/grand-canyon.jpg'); background-position: center bottom; } #billboard.channel-2 { background-image: url('../images/billboards/tahquitz-peak.jpg'); background-position: center bottom; } #billboard.channel-3 { background-image: url('../images/billboards/laguna.jpg'); } #billboard.small { height: 225px; min-height: 225px; } #billboard.small > h1 { margin-top: 150px; font-size: 42px; } #billboard > div { max-width: 1100px; height: 100%; margin: 0 auto; } #billboard #intro { padding-bottom: 150px; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } #billboard #intro h1 { font-size: 56px; line-height: 1.3em; font-weight: normal; margin-bottom: 25px; } #billboard #intro p { width: 75%; margin: 0 auto 37.5px; max-width: 485px; } #billboard .credit { display: block; position: absolute; bottom: 0; right: 0; padding: 6.25px 18px; font-size: 10px; color: #fff; opacity: 0.25; background: url('../images/credit.svg') left 45% no-repeat; -webkit-transition: opacity 0.15s ease-out; -moz-transition: opacity 0.15s ease-out; -ms-transition: opacity 0.15s ease-out; -o-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } #billboard .credit:hover { opacity: 0.5; } #setup { display: block; width: 350px; margin: 0 auto; padding: 20px 25px; color: #f5b923; border: 1px solid #f5b923; border-radius: 1px; -webkit-transition: background-color 0.15s ease-out; -moz-transition: background-color 0.15s ease-out; -ms-transition: background-color 0.15s ease-out; -o-transition: background-color 0.15s ease-out; transition: background-color 0.15s ease-out; } #setup:after { clear: both; } #setup:hover { color: #000; background: #f5b923; } #setup strong { display: block; font-size: 1.1em; font-weight: bold; } #setup small { display: block; font-size: 1em; } #setup em { font-style: normal; border-bottom: 1px dashed; } footer { font-size: 12px; line-height: 1.5em; color: #999; clear: both; width: 100%; padding: 25px 0; text-align: center; } footer p { margin: 10px 0; } footer span { display: inline-block; padding: 0 12.5px; } footer a { color: inherit; -webkit-transition: color 0.15s ease-out; -moz-transition: color 0.15s ease-out; -ms-transition: color 0.15s ease-out; -o-transition: color 0.15s ease-out; transition: color 0.15s ease-out; } footer a:hover { color: #fff; } .overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; color: #fff; background: #2d2f32; background: rgba(45, 47, 50, .85); z-index: 100; -webkit-animation-name: fade; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: 1; -moz-animation-name: fade; -moz-animation-duration: 0.5s; -moz-animation-iteration-count: 1; } .overlay.show { display: block; } .overlay > div { width: 410px; position: absolute; top: 50%; left: 50%; margin: -220px 0 0 -205px; background: #efefef; border: 30px solid ; display: none; -webkit-animation-name: fade_up; -webkit-animation-duration: 0.75s; -webkit-animation-iteration-count: 1; -moz-animation-name: fade_up; -moz-animation-duration: 0.75s; -moz-animation-iteration-count: 1; } .overlay > div.show { display: block; } .overlay ol { padding-left: 25px; } .overlay .close { position: absolute; top: -27px; right: -27px; display: block; width: 30px; height: 30px; text-indent: -5000px; background: url('../images/a-close.png') center center no-repeat; border: none; opacity: 0.4; filter: alpha(opacity=40); -webkit-transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; -ms-transition: opacity 0.25s ease-out; -o-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; } .overlay .close:hover { opacity: 1; filter: alpha(opacity=100); } .overlay h3 { font-size: 28px; } #loading .content { margin: -100px 0 0 -100px; width: 200px; height: 200px; padding: 0; background: #111 url('../images/loading.gif') center center no-repeat; } #loading span { display: block; text-align: center; margin-top: 130px; } @font-face { font-family: 'FF DIN'; src: url('../fonts/ff-din-light.woff') format('woff'); font-weight: normal; } @font-face { font-family: 'FF DIN'; src: url('../fonts/ff-din-bold.woff') format('woff'); font-weight: bold; } @-webkit-keyframes "fade" { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes "fade_up" { 0% { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 25% { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); } 50% { -webkit-transform: translateY(2px); -moz-transform: translateY(2px); -ms-transform: translateY(2px); -o-transform: translateY(2px); transform: translateY(2px); opacity: 1; } 75% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } ::selection { color: #000; background: rgba(245, 185, 35, .75); } ::-moz-selection { color: #000; background: rgba(245, 185, 35, .75); } body { font: normal 14px/22px 'FF DIN', Helvetica, Arial, sans-serif; color: #fff; } p { margin-bottom: 1em; } h1, h2, h3, h4, h5 { line-height: 1em; margin-bottom: 25px; font-weight: normal; } a { text-decoration: none; color: #fff; } a[href="#"] { cursor: default; } #page-pricing .price { width: 200px; height: 200px; border-radius: 200px; margin: 0 auto; border: 1px solid; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } #page-pricing .price strong { display: block; font-size: 72px; font-weight: normal; line-height: 1em; margin-top: 50px; } #page-pricing .price em { font-style: normal; letter-spacing: -4px; } #page-pricing .price span { font-size: 24px; line-height: 24px; position: relative; top: -17px; padding-left: 5px; } #page-pricing .price p { font-size: 12px; line-height: 1.5em; } .message { top: 75px; position: absolute; z-index: 2; left: 0; right: 0; padding: 25px 0; text-align: center; color: #000; background: #f5b923; opacity: 0.95; } .message p { margin: 0; } .message a { color: #000; border-bottom: 1px solid; } .setup .message { padding: 0; background: transparent; position: static; } .setup .message a { color: #000; border-bottom: 1px solid; } #example { position: relative; width: 55%; max-width: 700px; margin: -250px auto 0; } #example a { display: block; -webkit-transition: opacity 0.15s ease-out; -moz-transition: opacity 0.15s ease-out; -ms-transition: opacity 0.15s ease-out; -o-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } #example a:hover { opacity: 0.5; } #example .byline { margin-top: -37.5px; } #laptop { width: 120%; background: url('../images/laptop.png') center top no-repeat; background-size: 100%; position: relative; left: -10%; } #laptop > div { width: 77%; padding: 3.6% 0 6%; margin: 4% auto; overflow: hidden; } #laptop img { display: block; width: 100%; height: auto; } #phone { position: absolute; top: 40%; right: -3.5%; width: 23%; background: url('../images/phone.png') center top no-repeat; background-size: 100%; } #phone > div { width: 88%; padding: 23% 0%; margin: 0 auto; overflow: hidden; } #phone img { display: block; width: 100%; height: auto; } #sites { padding: 12.5px 0; } #sites ul { width: 100%; max-width: 1500px; margin: 0 auto; box-sizing: border-box; padding: 12.5px; } #sites li { float: left; padding: 12.5px; width: 25%; } #sites ul a { display: block; position: relative; -webkit-transition: transform 0.15s ease-out; -moz-transition: transform 0.15s ease-out; -ms-transition: transform 0.15s ease-out; -o-transition: transform 0.15s ease-out; transition: transform 0.15s ease-out; } #sites ul a img { display: block; width: 100%; height: auto; -webkit-transition: opacity 0.15s ease-out; -moz-transition: opacity 0.15s ease-out; -ms-transition: opacity 0.15s ease-out; -o-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } #sites ul a .byline { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; width: 100%; opacity: 0; -webkit-transform: translateY(-40%); -moz-transform: translateY(-40%); -ms-transform: translateY(-40%); -o-transform: translateY(-40%); transform: translateY(-40%); -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } #sites ul a:hover img { opacity: 0.25; } #sites ul a:hover .byline { opacity: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } #sites:after { display: block; content: " "; clear: both; } .byline { padding: 25px; color: #fff; text-align: center; } .byline h4 { margin: 0 0 5px; text-transform: uppercase; letter-spacing: 0.2em; line-height: 1.5em; } .byline span { display: block; font-size: 12px; opacity: 0.5; line-height: 1.3em; } #difference { float: left; width: 100%; clear: both; font-size: 16px; line-height: 26px; background: #efefef; color: #000; } #difference > div { padding: 75px 25px; float: left; width: 100%; } #difference > div > div { max-width: 800px; margin: 0 auto; position: relative; } #difference h4 { font-size: 22px; line-height: 1.6em; text-transform: uppercase; margin-bottom: 12.5px; letter-spacing: 0.2em; } #templates { text-align: center; } #templates > div { max-width: 600px !important; } #templates #layouts { width: 250px; padding: 23px 12px 12px; margin: 0 auto 12.5px; background: url('../images/browser-chrome.svg') no-repeat; background-size: 100%; } #templates #layouts img { width: 100%; height: 100%; } #templates img { display: inline-block; height: 37.5px; } #different { color: #fff; background: #44413e url('../images/desk.jpg') center top; background-size: cover; } #different > div > div { padding-right: 50%; } #support > div > div { text-align: center; margin: 0 auto; } #features { font-size: 13px; color: #999; float: left; width: 100%; } #features h4 { font-size: 16px; margin-bottom: 12.5px; color: #fff; } #features > div { padding: 0 25px; width: 100%; max-width: 1100px; margin: 0 auto; } #features ul { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; border-left: 1px solid #333; margin: 0 auto; } #features li { width: 33.3%; padding: 50px 25px 25px; border: 1px solid #333; border-bottom: 0; border-left: 0; position: relative; overflow: hidden; } #features li div { padding: 0 0 0 25px; } #features img { max-width: 100%; } #features #responsive, #features #flickr, #features #lab { width: 66.6%; padding-left: 33.3%; } #features #responsive img, #features #flickr img, #features #lab img { width: 45%; position: absolute; top: 25px; left: 25px; } #testimonials { text-align: center; color: #fff; background: #2d2f32; padding-top: 50px; position: relative; } #testimonials > div { max-width: 100%; overflow: hidden; } #testimonials .slides { display: block; width: 75%; max-width: 750px; margin: 50px auto; position: relative; opacity: 0; } #testimonials .slides.show { opacity: 1; } #testimonials .slides .slick-slide { background: #2d2f32; visibility: hidden; } #testimonials .slides .slick-slide.slick-active { visibility: visible; } #testimonials .slides p { font-size: 22px; line-height: 1.5em; } #testimonials .slides img { display: inline-block; width: 50px; height: 50px; border-radius: 100px; background: #ccc; margin-bottom: 5px; } #testimonials .slides h4 { margin: 0; text-transform: uppercase; letter-spacing: 0.2em; line-height: 1.5em; font-size: 12px; } #testimonials .slides a { font-size: 12px; opacity: 0.5; -webkit-transition: opacity 0.15s ease-out; -moz-transition: opacity 0.15s ease-out; -ms-transition: opacity 0.15s ease-out; -o-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } #testimonials .slides a:hover { opacity: 1; } #testimonials .pager { display: block; position: absolute; top: 50px; left: 0; right: 0; line-height: 0; } #testimonials .pager ul { position: relative; } #testimonials .pager li { display: inline-block; position: relative; } #testimonials .pager button { border: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; outline: none; border: none; display: block; text-indent: 200%; overflow: hidden; text-align: left; white-space: nowrap; width: 8px; height: 8px; margin: 5px; background: #fff; border-radius: 25px; cursor: pointer; opacity: 0.25; -webkit-transition: opacity 0.15s ease-out; -moz-transition: opacity 0.15s ease-out; -ms-transition: opacity 0.15s ease-out; -o-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } #testimonials .pager button:hover { opacity: 0.75; } #testimonials .pager button:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ' '; } #testimonials .pager .slick-active button { opacity: 0.75; } section.legal { background: #efefef; color: #333; } section.legal > div { width: 90%; max-width: 800px; margin: 0 auto; } .legal .body { width: 100%; padding: 50px 5%; } .body { clear: left; font-size: 16px; line-height: 24px; } .body h1, .body h2, .body h3, .body h4, .body h5 { clear: left; margin: 40px 0 20px; font-weight: bold; text-transform: uppercase; } .body h3 { font-size: 1.7em; margin-top: 60px; } .body h4 { font-size: 1.2em; } .body h5 { margin-top: 30px; margin-bottom: 10px; } .body h1:first-child, .body h2:first-child, .body h3:first-child, .body h4:first-child { margin-top: 0; } .body p { margin: 0 0 20px; } .body hr { margin: 0 0 20px; display: block; width: 100%; height: 1px; border-top: 1px dashed; } .body a { color: #000; border-bottom: 1px solid; } .body ul, .body ol { padding-left: 30px; margin: 0 0 20px; } .body ul { list-style-type: square; } .body li { margin-bottom: 10px; } .body li .action.small { margin-top: 5px; } .body table { border-spacing: 0; } .body table a { font-size: 0.8em; white-space: nowrap; } .body table strong { white-space: nowrap; } .body th { text-align: left; padding: 10px 0; } .body th + th { padding-left: 20px; } .body td { padding: 10px 0; border-top: 1px solid rgba(0, 0, 0, .1); } .body td + td { padding-left: 20px; } @font-face { font-family: 'FF DIN'; src: url('../fonts/ff-din-light.woff') format('woff'); font-weight: normal; } @font-face { font-family: 'FF DIN'; src: url('../fonts/ff-din-bold.woff') format('woff'); font-weight: bold; } @-webkit-keyframes "fade" { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes "fade_up" { 0% { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 25% { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); } 50% { -webkit-transform: translateY(2px); -moz-transform: translateY(2px); -ms-transform: translateY(2px); -o-transform: translateY(2px); transform: translateY(2px); opacity: 1; } 75% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } input { outline: none; font: normal 14px/22px 'FF DIN', Helvetica, Arial, sans-serif; } .panel { width: 410px; max-width: 100%; margin: 0 auto; padding: 0; border: 30px solid ; color: #444; background: #efefef; } .panel .message { padding: 20px; } .panel h2 { color: inherit; font: 100 38px/1em ; padding: 20px; border-bottom: 1px dashed #ccc; margin: 0; } .panel label { float: left; width: 100%; padding: 0; margin: 0; position: relative; } .panel input[type="text"], .panel input[type="email"], .panel input[type="password"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; border: none; width: 100%; padding: 20px; font-size: 16px; line-height: 1em; color: #666; background: transparent; border-bottom: 1px dashed #ccc !important; } .panel em { display: block; font-style: normal; padding: 4px 20px; } .panel p { padding: 20px; border-bottom: 1px dashed #ccc; margin: 0; } .panel a { color: #000; border-bottom: 1px solid; } .panel .privacy { display: block; clear: both; padding: 10px; font-size: 12px; text-align: center; font-weight: normal; opacity: 0.5; -webkit-transition: opacity 0.15s ease-out; -moz-transition: opacity 0.15s ease-out; -ms-transition: opacity 0.15s ease-out; -o-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } .panel .privacy:hover { opacity: 1; } .panel.static { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .sitename { color: rgba(255, 255, 255, .5); background-color: #444; margin-top: -20px; padding: 10px 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; } #forgot { position: absolute; bottom: -75px; color: #fff; border: none; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); opacity: 0.5; } #forgot:hover { opacity: 1; } .error input, .error input:focus { color: #f94d4d !important; border-color: #f94d4d !important; } .error .tip { display: block; width: 220px; position: absolute; top: 11px; right: 100%; color: #fff; color: rgba(255, 255, 255, .7); background: url('../images/tip.png') right top no-repeat; padding: 10px 40px 10px 20px; display: none; font-size: 11px; line-height: 13px; letter-spacing: 1px; } #overlay-setup .address input { padding-right: 130px; } #overlay-setup .address small { position: absolute; left: 230px; top: 0; color: #666; font-size: 16px; line-height: 1em; padding: 22px 0; } @keyframes floatup { from { opacity: 0; transform: translateY(30px); } to { opacity: 0; transform: translateY(30px); } } input[type="submit"] { outline: none; color: #111; background: #f5b923; text-align: center; width: 100%; padding: 30px 0; filter: alpha(opacity=80); -webkit-appearance: none; border: none; appearance: none; text-transform: uppercase; font: normal 14px/22px 'FF DIN', Helvetica, Arial, sans-serif; letter-spacing: 0.1em; cursor: pointer; -webkit-transition: opacity 0.15s ease-out; -moz-transition: opacity 0.15s ease-out; -ms-transition: opacity 0.15s ease-out; -o-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } input[type="submit"]:hover { opacity: 0.7; filter: alpha(opacity=70); } .loading { position: absolute; top: 50%; left: 50%; width: 150px; margin: -10px 0 0 -75px; text-align: center; } #signin .msie { display: none; } html.msie #signin .signinform { display: none; } html.msie #signin .msie { display: block; } @font-face { font-family: 'FF DIN'; src: url('../fonts/ff-din-light.woff') format('woff'); font-weight: normal; } @font-face { font-family: 'FF DIN'; src: url('../fonts/ff-din-bold.woff') format('woff'); font-weight: bold; } @-webkit-keyframes "fade" { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes "fade_up" { 0% { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 25% { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); } 50% { -webkit-transform: translateY(2px); -moz-transform: translateY(2px); -ms-transform: translateY(2px); -o-transform: translateY(2px); transform: translateY(2px); opacity: 1; } 75% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @media screen and (max-height: 700px) { #billboard #intro { padding-top: 125px; } #billboard #intro h1 { font-size: 46px; } #example { margin-top: -150px; } } @media screen and (max-width: 840px) { } @media screen and (max-width: 620px) { #billboard #intro h1 { font-size: 36px; } #billboard #intro p { width: 75%; } #billboard .credit { display: none; } #example { width: 75%; margin-top: -125px; } #sites li { width: 50%; } #sites li:nth-child(7), #sites li:nth-child(8), #sites li:nth-child(9), #sites li:nth-child(10), #sites li:nth-child(11), #sites li:nth-child(12) { display: none; } #different > div > div { padding-right: 25%; } #features > div { padding: 0; } #features li { width: 100% !important; text-align: center; padding: 25px !important; } #features #responsive img, #features #flickr img, #features #lab img { position: static; width: auto; margin: 0 0 25px; } } .no-flexbox #features ul li { float: left; height: 250px; }