.control-sprite { background: url('../images/video/control-s29e37c1500.png') no-repeat; } .link-icon-sprite, .link-icon-play:after, .link-icon-arrow:after { background: url('../images/sprites/link-icon-sedc8ab7f04.png') no-repeat; } .link-icon, .link-icon-play, .link-icon-arrow { display: inline-block; } .link-icon:after, .link-icon-play:after, .link-icon-arrow:after { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle;*; vertical-align: auto; content: " "; vertical-align: top; margin-left: 4px; margin-top: 1px; } .link-icon:after, .link-icon-play:after, .link-icon-arrow:after { * display: inline; } .link-icon-play:after { background-position: 0 -25px; height: 25px; width: 26px; } .link-icon-arrow:after { background-position: 0 0; height: 25px; width: 26px; } .ie8 .link-icon-arrow { vertical-align: middle; } .icon-sprite { background: url('../images/form/icon-sa8507d943f.png') no-repeat; } .navigation-sprite, .square-nav-item .nav-icon-home, .register-nav-item .nav-icon-home, .cards-nav-item .nav-icon-home { background: url('../images/sprites/navigation-sf3fa60fe27.png') no-repeat; } .supported-devices-sprite, .supported-devices-apple, .supported-devices-check, .supported-devices-droid { background: url('../images/sprites/supported-devices-s498e33c0e8.png') no-repeat; } .supported-devices-apple { background-position: 0 0; height: 18px; width: 15px; } .supported-devices-check { background-position: 0 -18px; height: 13px; width: 13px; } .supported-devices-droid { background-position: 0 -31px; height: 23px; width: 20px; } .home-sprite, .square-signup-form .divider, .square-signup-form .cards-list-light, .square-signup-form .cards-list-dark, .square-label, .register-label, .cardcase-label, .next-paddle, .previous-paddle { background: url('../images/home/home-sad6a3de646.png') no-repeat; } html { background: #fff; } .main-content { width: 100%; margin: 0 auto; color: #000; overflow: hidden; min-width: 1020px; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .main-content .inverted-section { background: transparent; } .hero-section { position: static; padding: 0; width: 1020px; height: 688px; margin: 0 auto; } .mask { width: 1940px; margin: 0 -460px; height: 688px; } .view { width: 100%; position: relative; height: 688px; } .glass { position: absolute; display: block; height: 688px; width: 100%; min-width: 1020px; z-index: 2; } .ie .glass { background: rgba(0,0,0,0.01); } h1 { font-size: 38px; line-height: 45px; } .square-signup-form, .cardcase-signup-form { z-index: 1; } .square-signup-form h1, .square-signup-form .pricing-prop, .square-signup-form p, .square-signup-form .instructions, .square-signup-form .cards-accepted, .cardcase-signup-form h1, .cardcase-signup-form .pricing-prop, .cardcase-signup-form p, .cardcase-signup-form .instructions, .cardcase-signup-form .cards-accepted { color: #fff; -moz-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); -webkit-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); -o-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); } .square-signup-form .cards-accepted, .cardcase-signup-form .cards-accepted { font-weight: bold; color: #ccc; margin-top: 45px; } .square-signup-form .cardcase-message-box, .cardcase-signup-form .cardcase-message-box { margin-top: 15px; } .square-scene .square-bg { opacity: 1; } .ie8 .square-scene .square-bg { display: block; } .square-scene .square-fg { opacity: 1; -webkit-transform: translate3d(0, 0, 0) rotate(0); -moz-transform: translate(0, 0) rotate(0); } .ie8 .square-scene .square-fg { display: block; } .square-scene .cardcase-fg { -webkit-transform: translate3d(4px, 6px, 0) rotate(1deg); -moz-transform: translate(4px, 6px) rotate(1deg); } .square-scene.in-motion .square-label { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate(0, 0); cursor: pointer; } .ie8 .square-scene.in-motion .square-label { display: block; } .square-scene .square-signup-form { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate(0, 0); z-index: 3; } .ie8 .square-scene .square-signup-form { display: block; } .square-scene .cardcase-signup-form { -webkit-transition-duration: 600ms; -moz-transition-duration: 600ms; } .register-scene .primary-button { -moz-box-shadow: inset 0 1px #60cbfa; -webkit-box-shadow: inset 0 1px #60cbfa; -o-box-shadow: inset 0 1px #60cbfa; box-shadow: inset 0 1px #60cbfa; } .register-scene .square-signup-form { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate(0, 0); z-index: 3; } .ie8 .register-scene .square-signup-form { display: block; } .register-scene .square-signup-form h1, .register-scene .square-signup-form p, .register-scene .square-signup-form .pricing-prop, .register-scene .square-signup-form .instructions { color: #000; } .register-scene .square-signup-form .cards-accepted { color: #595959; } .register-scene .square-signup-form .cards-list-light { opacity: 0; } .ie8 .register-scene .square-signup-form .cards-list-light { display: none; } .register-scene .square-signup-form .cards-list-dark { opacity: 1; } .ie8 .register-scene .square-signup-form .cards-list-dark { display: block; } .register-scene .square-signup-form .signup-errors { color: #000; } .register-scene .register-bg { opacity: 1; } .ie8 .register-scene .register-bg { display: block; } .register-scene .register-fg { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate(0, 0); } .ie8 .register-scene .register-fg { display: block; } .register-scene .register-label { opacity: 1; cursor: pointer; -webkit-transform: translate3d(0, 0, 0) rotate(0); -moz-transform: translate(0, 0) rotate(0); } .ie8 .register-scene .register-label { display: block; } .register-scene .square-label { opacity: 0; -webkit-transform: translate3d(-5px, 0, 0); -moz-transform: translate(-5px, 0); -webkit-transition-duration: 600ms; -moz-transition-duration: 600ms; } .ie8 .register-scene .square-label { display: none; } .register-scene .square-fg { -webkit-transition-duration: 600ms; -moz-transition-duration: 600ms; } .cards-scene .card-case-bg { opacity: 1; } .ie8 .cards-scene .card-case-bg { display: block; } .cards-scene .register-fg { opacity: 0; -webkit-transform: translate3d(-10px, -2px, 0); -moz-transform: translate(-10px, -2px); -webkit-transition-duration: 600ms; -moz-transition-duration: 600ms; } .ie8 .cards-scene .register-fg { display: none; } .cards-scene .cardcase-fg { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate(0, 0); } .ie8 .cards-scene .cardcase-fg { display: block; } .cards-scene .square-signup-form { -webkit-transform: translate3d(-50px, 0, 0); -moz-transform: translate(-50px, 0); -webkit-transition-duration: 600ms; -moz-transition-duration: 600ms; opacity: 0; } .ie8 .cards-scene .square-signup-form { display: none; } .cards-scene .cardcase-signup-form { opacity: 1; -webkit-transform: translate3d(0px, 0, 0); -moz-transform: translate(0px, 0); z-index: 4; cursor: pointer; } .ie8 .cards-scene .cardcase-signup-form { display: block; } .cards-scene .cardcase-label { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate(0, 0); cursor: pointer; } .ie8 .cards-scene .cardcase-label { display: block; } .cards-scene .register-label { opacity: 0; -webkit-transform: translate3d(-5px, 0, 0) rotate(0); -moz-transform: translate(-5px, 0) rotate(0); -webkit-transition-duration: 600ms; -moz-transition-duration: 600ms; } .ie8 .cards-scene .register-label { display: none; } .backdrop, .square-bg, .register-bg, .card-case-bg { position: absolute; width: 1940px; height: 688px; background-repeat: no-repeat; -moz-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms; -webkit-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms; -o-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms; transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms; -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .square-bg { opacity: 0; } .ie8 .square-bg { display: none; } .register-bg { opacity: 0; } .ie8 .register-bg { display: none; } .card-case-bg { opacity: 0; } .ie8 .card-case-bg { display: none; } .composite, .square-signup-form, .cardcase-signup-form, .square-fg, .register-fg, .cardcase-fg, .product-label, .square-label, .register-label, .cardcase-label { position: absolute; display: block; } .square-signup-form { width: 400px; height: 446px; left: 499px; top: 209px; padding: 0 20px; opacity: 0; -webkit-transition-property: opacity,-webkit-transform; -moz-transition-property: opacity,-moz-transform; -webkit-transition-duration: 800ms; -moz-transition-duration: 800ms; -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -webkit-transform: translate3d(-50px, 0, 0); -moz-transform: translate(-50px, 0); } .ie8 .square-signup-form { display: none; } @media { .square-signup-form { left: 519px; } } .square-signup-form .classic-signup-form { margin-bottom: 30px; } .square-signup-form h1 + p { margin: 23px 0 8px; } .square-signup-form .divider { background-position: 0 -108px; height: 2px; width: 436px; position: relative; left: -36px; } .square-signup-form .pricing { overflow: hidden;*; zoom: 1; padding: 15px 0; } .square-signup-form li { width: 50%; float: left; } .square-signup-form .cards-accepted { position: relative; } .square-signup-form .cards-list, .square-signup-form .cards-list-light, .square-signup-form .cards-list-dark { text-indent: -119988px; overflow: hidden; text-align: left; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle;*; vertical-align: auto; margin-left: 5px; position: absolute; top: -5px; right: 0; -moz-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); -webkit-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); -o-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); } .square-signup-form .cards-list, .square-signup-form .cards-list-light, .square-signup-form .cards-list-dark { * display: inline; } .square-signup-form .cards-list-light { background-position: 0 -31px; height: 31px; width: 273px; opacity: 1; } .ie8 .square-signup-form .cards-list-light { display: block; } .square-signup-form .cards-list-dark { background-position: 0 0; height: 31px; width: 273px; opacity: 0; } .ie8 .square-signup-form .cards-list-dark { display: none; } .square-signup-form .home-arrow { position: relative; } .square-signup-form .home-arrow:after { content: ""; position: absolute; width: 0; height: 0; border: 0.3em solid; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; right: -15px; bottom: 3px; } .pricing-prop { * zoom: 1; } .pricing-prop:after { content: ""; display: table; clear: both; } .pricing-amount { position: relative; float: left; margin: 48px 10px 28px 0; font-size: 38px; font-family: "agb","helvetica neue",helvetica,arial,sans-serif; } .pricing-description { position: relative; display: inline-block; top: 38px; font-size: 16px; line-height: 20px; } .pricing-description.home-arrow:after { right: 10px; bottom: 4px; } .prominent_percent { top: 181px; } .prominent_percent .cards-accepted { margin-top: 22px; } .prominent_percent .pricing-amount:before { content: "Only"; font-size: 16px; position: absolute; top: -29px; left: 0; } .prominent_percent_without_only { top: 187px; } .prominent_percent_without_only .cards-accepted { margin-top: 40px; } .prominent_percent_without_only .pricing-amount { margin: 28px 10px 28px 0; } .prominent_percent_without_only .pricing-description { top: 19px; } .cardcase-signup-form { width: 400px; height: 446px; right: 525px; top: 306px; opacity: 0; -webkit-transition-property: -webkit-transform,opacity; -moz-transition-property: -moz-transform,opacity; -webkit-transition-duration: 800ms,700ms; -moz-transition-duration: 800ms,700ms; -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -webkit-transform: translate3d(50px, 0, 0); -moz-transform: translate(50px, 0); } @media { .cardcase-signup-form { right: 575px; } } .ie8 .cardcase-signup-form { display: none; } .square-fg { background: url('../images/home/scene-fg-square-amex.png'); width: 833px; height: 544px; right: 198px; bottom: 0; opacity: 0; -webkit-transition-property: -webkit-transform,opacity; -moz-transition-property: -moz-transform,opacity; -webkit-transition-duration: 800ms,700ms; -moz-transition-duration: 800ms,700ms; -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -webkit-transform: translate3d(-1px, 5px, 0) rotate(-0.25deg); -moz-transform: translate(-1px, 5px) rotate(-0.25deg); -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; } .ie8 .square-fg { display: none; } @media { .square-fg { right: 220px; } } .register-fg { right: 246px; width: 734px; height: 490px; bottom: 0; opacity: 0; -webkit-transition-property: -webkit-transform,opacity; -moz-transition-property: -moz-transform,opacity; -webkit-transition-duration: 800ms,700ms; -moz-transition-duration: 800ms,700ms; -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -webkit-transform: translate3d(7px, 3px, 0); -moz-transform: translate(7px, 3px); } .ie8 .register-fg { display: none; } @media { .register-fg { right: 286px; } } .cardcase-fg { width: 315px; height: 525px; left: 640px; bottom: 0; opacity: 0; -webkit-transition-property: -webkit-transform,opacity; -moz-transition-property: -moz-transform,opacity; -webkit-transition-duration: 800ms,700ms; -moz-transition-duration: 800ms,700ms; -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -webkit-transform: translate3d(-4px, 6px, 0) rotate(-1deg); -moz-transform: translate(-4px, 6px) rotate(-1deg); } .ie8 .cardcase-fg { display: none; } .product-label, .square-label, .register-label, .cardcase-label { z-index: 3; cursor: default; color: #31b1ef; opacity: 0; -webkit-transition-property: opacity,-webkit-transform; -moz-transition-property: opacity,-moz-transform; -webkit-transition-duration: 800ms; -moz-transition-duration: 800ms; -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98); -webkit-transform: translate3d(5px, 0, 0); -moz-transform: translate(5px, 0); } .ie8 .product-label, .ie8 .square-label, .ie8 .register-label, .ie8 .cardcase-label { display: none; } .product-label h2, .square-label h2, .register-label h2, .cardcase-label h2 { font: 0/0 a; text-shadow: none; color: transparent; } .square-label { bottom: 114px; right: 546px; background-position: 0 -296px; height: 45px; width: 145px; } .square-label:hover, .square-label.square_hover, .square-label.square-hover { background-position: 0 -341px; } @media { .square-label { right: 560px; } } .register-label { top: 206px; right: 771px; background-position: 0 -250px; height: 23px; width: 179px; } .register-label:hover, .register-label.register_hover, .register-label.register-hover { background-position: 0 -273px; } @media { .register-label { right: 813px; } } .cardcase-label { bottom: 46px; left: 556px; background-position: 0 -62px; height: 23px; width: 194px; -webkit-transform: translated3d(-5px, 0, 0); -moz-transform: translate(-5px, 0); } .cardcase-label:hover, .cardcase-label.cardcase_hover, .cardcase-label.cardcase-hover { background-position: 0 -85px; } .paddle { position: absolute; margin-top: 376px; top: 0; opacity: 0; z-index: 3; -moz-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); -webkit-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); -o-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98); } .ie8 .paddle { display: none; } .ready .paddle { opacity: 0.6; } .ie8 .ready .paddle { display: block; } .ready .paddle:hover { opacity: 1; } .ie8 .ready .paddle:hover { display: block; } .next-paddle { background-position: 0 -110px; height: 70px; width: 70px; right: 30px; } @media { .next-paddle { right: 10px; } } .previous-paddle { background-position: 0 -180px; height: 70px; width: 70px; left: 30px; } @media { .previous-paddle { left: 10px; } } .main-header-home .nav-link:hover .nav-icon { opacity: 1; } .ie8 .main-header-home .nav-link:hover .nav-icon { display: block; } .main-header-home .nav-link:hover .nav-icon-home { opacity: 0; } .ie8 .main-header-home .nav-link:hover .nav-icon-home { display: none; } .main-header-home .actions { padding-top: 48px; } .main-header-home .nav-icon { opacity: 0; -moz-transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .ie8 .main-header-home .nav-icon { display: none; } .main-header-home .nav-icon-home { position: absolute; top: 23px; z-index: 1; opacity: 1; -moz-transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .ie8 .main-header-home .nav-icon-home { display: block; } .square-nav-item .nav-icon-home { left: 71px; background-position: 0 -562px; height: 51px; width: 66px; } .register-nav-item .nav-icon-home { left: 58px; background-position: 0 -460px; height: 51px; width: 66px; } .cards-nav-item .nav-icon-home { left: 56px; background-position: 0 -31px; height: 51px; width: 66px; } .footer-nav { color: #d4d4d4; } .footer-nav .nav-list a { color: #ccc; } .footer-nav:hover { color: #bbb; } .footer-nav:hover .nav-list a { color: #a7a9aa; } .footer-nav:hover .nav-list a:hover { color: #454a4f; }