Advertisement
Guest User

Square CSS

a guest
Apr 19th, 2012
1,439
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 19.17 KB | None | 0 0
  1. .control-sprite {
  2.     background: url('../images/video/control-s29e37c1500.png') no-repeat;
  3. }
  4. .link-icon-sprite, .link-icon-play:after, .link-icon-arrow:after {
  5.     background: url('../images/sprites/link-icon-sedc8ab7f04.png') no-repeat;
  6. }
  7. .link-icon, .link-icon-play, .link-icon-arrow {
  8.     display: inline-block;
  9. }
  10. .link-icon:after, .link-icon-play:after, .link-icon-arrow:after {
  11.     display: -moz-inline-box;
  12.     -moz-box-orient: vertical;
  13.     display: inline-block;
  14.     vertical-align: middle;*;
  15.     vertical-align: auto;
  16.     content: " ";
  17.     vertical-align: top;
  18.     margin-left: 4px;
  19.     margin-top: 1px;
  20. }
  21. .link-icon:after, .link-icon-play:after, .link-icon-arrow:after {
  22. *   display: inline;
  23. }
  24. .link-icon-play:after {
  25.     background-position: 0 -25px;
  26.     height: 25px;
  27.     width: 26px;
  28. }
  29. .link-icon-arrow:after {
  30.     background-position: 0 0;
  31.     height: 25px;
  32.     width: 26px;
  33. }
  34. .ie8 .link-icon-arrow {
  35.     vertical-align: middle;
  36. }
  37. .icon-sprite {
  38.     background: url('../images/form/icon-sa8507d943f.png') no-repeat;
  39. }
  40. .navigation-sprite, .square-nav-item .nav-icon-home, .register-nav-item .nav-icon-home, .cards-nav-item .nav-icon-home {
  41.     background: url('../images/sprites/navigation-sf3fa60fe27.png') no-repeat;
  42. }
  43. .supported-devices-sprite, .supported-devices-apple, .supported-devices-check, .supported-devices-droid {
  44.     background: url('../images/sprites/supported-devices-s498e33c0e8.png') no-repeat;
  45. }
  46. .supported-devices-apple {
  47.     background-position: 0 0;
  48.     height: 18px;
  49.     width: 15px;
  50. }
  51. .supported-devices-check {
  52.     background-position: 0 -18px;
  53.     height: 13px;
  54.     width: 13px;
  55. }
  56. .supported-devices-droid {
  57.     background-position: 0 -31px;
  58.     height: 23px;
  59.     width: 20px;
  60. }
  61. .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 {
  62.     background: url('../images/home/home-sad6a3de646.png') no-repeat;
  63. }
  64. html {
  65.     background: #fff;
  66. }
  67. .main-content {
  68.     width: 100%;
  69.     margin: 0 auto;
  70.     color: #000;
  71.     overflow: hidden;
  72.     min-width: 1020px;
  73.     -moz-box-shadow: none;
  74.     -webkit-box-shadow: none;
  75.     -o-box-shadow: none;
  76.     box-shadow: none;
  77. }
  78. .main-content .inverted-section {
  79.     background: transparent;
  80. }
  81. .hero-section {
  82.     position: static;
  83.     padding: 0;
  84.     width: 1020px;
  85.     height: 688px;
  86.     margin: 0 auto;
  87. }
  88. .mask {
  89.     width: 1940px;
  90.     margin: 0 -460px;
  91.     height: 688px;
  92. }
  93. .view {
  94.     width: 100%;
  95.     position: relative;
  96.     height: 688px;
  97. }
  98. .glass {
  99.     position: absolute;
  100.     display: block;
  101.     height: 688px;
  102.     width: 100%;
  103.     min-width: 1020px;
  104.     z-index: 2;
  105. }
  106. .ie .glass {
  107.     background: rgba(0,0,0,0.01);
  108. }
  109. h1 {
  110.     font-size: 38px;
  111.     line-height: 45px;
  112. }
  113. .square-signup-form, .cardcase-signup-form {
  114.     z-index: 1;
  115. }
  116. .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 {
  117.     color: #fff;
  118.     -moz-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
  119.     -webkit-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
  120.     -o-transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
  121.     transition: all 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
  122. }
  123. .square-signup-form .cards-accepted, .cardcase-signup-form .cards-accepted {
  124.     font-weight: bold;
  125.     color: #ccc;
  126.     margin-top: 45px;
  127. }
  128. .square-signup-form .cardcase-message-box, .cardcase-signup-form .cardcase-message-box {
  129.     margin-top: 15px;
  130. }
  131. .square-scene .square-bg {
  132.     opacity: 1;
  133. }
  134. .ie8 .square-scene .square-bg {
  135.     display: block;
  136. }
  137. .square-scene .square-fg {
  138.     opacity: 1;
  139.     -webkit-transform: translate3d(0, 0, 0) rotate(0);
  140.     -moz-transform: translate(0, 0) rotate(0);
  141. }
  142. .ie8 .square-scene .square-fg {
  143.     display: block;
  144. }
  145. .square-scene .cardcase-fg {
  146.     -webkit-transform: translate3d(4px, 6px, 0) rotate(1deg);
  147.     -moz-transform: translate(4px, 6px) rotate(1deg);
  148. }
  149. .square-scene.in-motion .square-label {
  150.     opacity: 1;
  151.     -webkit-transform: translate3d(0, 0, 0);
  152.     -moz-transform: translate(0, 0);
  153.     cursor: pointer;
  154. }
  155. .ie8 .square-scene.in-motion .square-label {
  156.     display: block;
  157. }
  158. .square-scene .square-signup-form {
  159.     opacity: 1;
  160.     -webkit-transform: translate3d(0, 0, 0);
  161.     -moz-transform: translate(0, 0);
  162.     z-index: 3;
  163. }
  164. .ie8 .square-scene .square-signup-form {
  165.     display: block;
  166. }
  167. .square-scene .cardcase-signup-form {
  168.     -webkit-transition-duration: 600ms;
  169.     -moz-transition-duration: 600ms;
  170. }
  171. .register-scene .primary-button {
  172.     -moz-box-shadow: inset 0 1px #60cbfa;
  173.     -webkit-box-shadow: inset 0 1px #60cbfa;
  174.     -o-box-shadow: inset 0 1px #60cbfa;
  175.     box-shadow: inset 0 1px #60cbfa;
  176. }
  177. .register-scene .square-signup-form {
  178.     opacity: 1;
  179.     -webkit-transform: translate3d(0, 0, 0);
  180.     -moz-transform: translate(0, 0);
  181.     z-index: 3;
  182. }
  183. .ie8 .register-scene .square-signup-form {
  184.     display: block;
  185. }
  186. .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 {
  187.     color: #000;
  188. }
  189. .register-scene .square-signup-form .cards-accepted {
  190.     color: #595959;
  191. }
  192. .register-scene .square-signup-form .cards-list-light {
  193.     opacity: 0;
  194. }
  195. .ie8 .register-scene .square-signup-form .cards-list-light {
  196.     display: none;
  197. }
  198. .register-scene .square-signup-form .cards-list-dark {
  199.     opacity: 1;
  200. }
  201. .ie8 .register-scene .square-signup-form .cards-list-dark {
  202.     display: block;
  203. }
  204. .register-scene .square-signup-form .signup-errors {
  205.     color: #000;
  206. }
  207. .register-scene .register-bg {
  208.     opacity: 1;
  209. }
  210. .ie8 .register-scene .register-bg {
  211.     display: block;
  212. }
  213. .register-scene .register-fg {
  214.     opacity: 1;
  215.     -webkit-transform: translate3d(0, 0, 0);
  216.     -moz-transform: translate(0, 0);
  217. }
  218. .ie8 .register-scene .register-fg {
  219.     display: block;
  220. }
  221. .register-scene .register-label {
  222.     opacity: 1;
  223.     cursor: pointer;
  224.     -webkit-transform: translate3d(0, 0, 0) rotate(0);
  225.     -moz-transform: translate(0, 0) rotate(0);
  226. }
  227. .ie8 .register-scene .register-label {
  228.     display: block;
  229. }
  230. .register-scene .square-label {
  231.     opacity: 0;
  232.     -webkit-transform: translate3d(-5px, 0, 0);
  233.     -moz-transform: translate(-5px, 0);
  234.     -webkit-transition-duration: 600ms;
  235.     -moz-transition-duration: 600ms;
  236. }
  237. .ie8 .register-scene .square-label {
  238.     display: none;
  239. }
  240. .register-scene .square-fg {
  241.     -webkit-transition-duration: 600ms;
  242.     -moz-transition-duration: 600ms;
  243. }
  244. .cards-scene .card-case-bg {
  245.     opacity: 1;
  246. }
  247. .ie8 .cards-scene .card-case-bg {
  248.     display: block;
  249. }
  250. .cards-scene .register-fg {
  251.     opacity: 0;
  252.     -webkit-transform: translate3d(-10px, -2px, 0);
  253.     -moz-transform: translate(-10px, -2px);
  254.     -webkit-transition-duration: 600ms;
  255.     -moz-transition-duration: 600ms;
  256. }
  257. .ie8 .cards-scene .register-fg {
  258.     display: none;
  259. }
  260. .cards-scene .cardcase-fg {
  261.     opacity: 1;
  262.     -webkit-transform: translate3d(0, 0, 0);
  263.     -moz-transform: translate(0, 0);
  264. }
  265. .ie8 .cards-scene .cardcase-fg {
  266.     display: block;
  267. }
  268. .cards-scene .square-signup-form {
  269.     -webkit-transform: translate3d(-50px, 0, 0);
  270.     -moz-transform: translate(-50px, 0);
  271.     -webkit-transition-duration: 600ms;
  272.     -moz-transition-duration: 600ms;
  273.     opacity: 0;
  274. }
  275. .ie8 .cards-scene .square-signup-form {
  276.     display: none;
  277. }
  278. .cards-scene .cardcase-signup-form {
  279.     opacity: 1;
  280.     -webkit-transform: translate3d(0px, 0, 0);
  281.     -moz-transform: translate(0px, 0);
  282.     z-index: 4;
  283.     cursor: pointer;
  284. }
  285. .ie8 .cards-scene .cardcase-signup-form {
  286.     display: block;
  287. }
  288. .cards-scene .cardcase-label {
  289.     opacity: 1;
  290.     -webkit-transform: translate3d(0, 0, 0);
  291.     -moz-transform: translate(0, 0);
  292.     cursor: pointer;
  293. }
  294. .ie8 .cards-scene .cardcase-label {
  295.     display: block;
  296. }
  297. .cards-scene .register-label {
  298.     opacity: 0;
  299.     -webkit-transform: translate3d(-5px, 0, 0) rotate(0);
  300.     -moz-transform: translate(-5px, 0) rotate(0);
  301.     -webkit-transition-duration: 600ms;
  302.     -moz-transition-duration: 600ms;
  303. }
  304. .ie8 .cards-scene .register-label {
  305.     display: none;
  306. }
  307. .backdrop, .square-bg, .register-bg, .card-case-bg {
  308.     position: absolute;
  309.     width: 1940px;
  310.     height: 688px;
  311.     background-repeat: no-repeat;
  312.     -moz-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;
  313.     -webkit-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;
  314.     -o-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;
  315.     transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;
  316.     -moz-transform: translate3d(0, 0, 0);
  317.     -webkit-transform: translate3d(0, 0, 0);
  318.     -o-transform: translate3d(0, 0, 0);
  319.     -ms-transform: translate3d(0, 0, 0);
  320.     transform: translate3d(0, 0, 0);
  321. }
  322. .square-bg {
  323.     opacity: 0;
  324. }
  325. .ie8 .square-bg {
  326.     display: none;
  327. }
  328. .register-bg {
  329.     opacity: 0;
  330. }
  331. .ie8 .register-bg {
  332.     display: none;
  333. }
  334. .card-case-bg {
  335.     opacity: 0;
  336. }
  337. .ie8 .card-case-bg {
  338.     display: none;
  339. }
  340. .composite, .square-signup-form, .cardcase-signup-form, .square-fg, .register-fg, .cardcase-fg, .product-label, .square-label, .register-label, .cardcase-label {
  341.     position: absolute;
  342.     display: block;
  343. }
  344. .square-signup-form {
  345.     width: 400px;
  346.     height: 446px;
  347.     left: 499px;
  348.     top: 209px;
  349.     padding: 0 20px;
  350.     opacity: 0;
  351.     -webkit-transition-property: opacity,-webkit-transform;
  352.     -moz-transition-property: opacity,-moz-transform;
  353.     -webkit-transition-duration: 800ms;
  354.     -moz-transition-duration: 800ms;
  355.     -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
  356.     -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
  357.     -webkit-transform: translate3d(-50px, 0, 0);
  358.     -moz-transform: translate(-50px, 0);
  359. }
  360. .ie8 .square-signup-form {
  361.     display: none;
  362. }
  363. @media
  364. {
  365. .square-signup-form {
  366.     left: 519px;
  367. }
  368. }
  369. .square-signup-form .classic-signup-form {
  370.     margin-bottom: 30px;
  371. }
  372. .square-signup-form h1 + p {
  373.     margin: 23px 0 8px;
  374. }
  375. .square-signup-form .divider {
  376.     background-position: 0 -108px;
  377.     height: 2px;
  378.     width: 436px;
  379.     position: relative;
  380.     left: -36px;
  381. }
  382. .square-signup-form .pricing {
  383.     overflow: hidden;*;
  384.     zoom: 1;
  385.     padding: 15px 0;
  386. }
  387. .square-signup-form li {
  388.     width: 50%;
  389.     float: left;
  390. }
  391. .square-signup-form .cards-accepted {
  392.     position: relative;
  393. }
  394. .square-signup-form .cards-list, .square-signup-form .cards-list-light, .square-signup-form .cards-list-dark {
  395.     text-indent: -119988px;
  396.     overflow: hidden;
  397.     text-align: left;
  398.     display: -moz-inline-box;
  399.     -moz-box-orient: vertical;
  400.     display: inline-block;
  401.     vertical-align: middle;*;
  402.     vertical-align: auto;
  403.     margin-left: 5px;
  404.     position: absolute;
  405.     top: -5px;
  406.     right: 0;
  407.     -moz-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
  408.     -webkit-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
  409.     -o-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
  410.     transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
  411. }
  412. .square-signup-form .cards-list, .square-signup-form .cards-list-light, .square-signup-form .cards-list-dark {
  413. *   display: inline;
  414. }
  415. .square-signup-form .cards-list-light {
  416.     background-position: 0 -31px;
  417.     height: 31px;
  418.     width: 273px;
  419.     opacity: 1;
  420. }
  421. .ie8 .square-signup-form .cards-list-light {
  422.     display: block;
  423. }
  424. .square-signup-form .cards-list-dark {
  425.     background-position: 0 0;
  426.     height: 31px;
  427.     width: 273px;
  428.     opacity: 0;
  429. }
  430. .ie8 .square-signup-form .cards-list-dark {
  431.     display: none;
  432. }
  433. .square-signup-form .home-arrow {
  434.     position: relative;
  435. }
  436. .square-signup-form .home-arrow:after {
  437.     content: "";
  438.     position: absolute;
  439.     width: 0;
  440.     height: 0;
  441.     border: 0.3em solid;
  442.     border-top-color: transparent;
  443.     border-right-color: transparent;
  444.     border-bottom-color: transparent;
  445.     right: -15px;
  446.     bottom: 3px;
  447. }
  448. .pricing-prop {
  449. *   zoom: 1;
  450. }
  451. .pricing-prop:after {
  452.     content: "";
  453.     display: table;
  454.     clear: both;
  455. }
  456. .pricing-amount {
  457.     position: relative;
  458.     float: left;
  459.     margin: 48px 10px 28px 0;
  460.     font-size: 38px;
  461.     font-family: "agb","helvetica neue",helvetica,arial,sans-serif;
  462. }
  463. .pricing-description {
  464.     position: relative;
  465.     display: inline-block;
  466.     top: 38px;
  467.     font-size: 16px;
  468.     line-height: 20px;
  469. }
  470. .pricing-description.home-arrow:after {
  471.     right: 10px;
  472.     bottom: 4px;
  473. }
  474. .prominent_percent {
  475.     top: 181px;
  476. }
  477. .prominent_percent .cards-accepted {
  478.     margin-top: 22px;
  479. }
  480. .prominent_percent .pricing-amount:before {
  481.     content: "Only";
  482.     font-size: 16px;
  483.     position: absolute;
  484.     top: -29px;
  485.     left: 0;
  486. }
  487. .prominent_percent_without_only {
  488.     top: 187px;
  489. }
  490. .prominent_percent_without_only .cards-accepted {
  491.     margin-top: 40px;
  492. }
  493. .prominent_percent_without_only .pricing-amount {
  494.     margin: 28px 10px 28px 0;
  495. }
  496. .prominent_percent_without_only .pricing-description {
  497.     top: 19px;
  498. }
  499. .cardcase-signup-form {
  500.     width: 400px;
  501.     height: 446px;
  502.     right: 525px;
  503.     top: 306px;
  504.     opacity: 0;
  505.     -webkit-transition-property: -webkit-transform,opacity;
  506.     -moz-transition-property: -moz-transform,opacity;
  507.     -webkit-transition-duration: 800ms,700ms;
  508.     -moz-transition-duration: 800ms,700ms;
  509.     -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
  510.     -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
  511.     -webkit-transform: translate3d(50px, 0, 0);
  512.     -moz-transform: translate(50px, 0);
  513. }
  514. @media
  515. {
  516. .cardcase-signup-form {
  517.     right: 575px;
  518. }
  519. }
  520. .ie8 .cardcase-signup-form {
  521.     display: none;
  522. }
  523. .square-fg {
  524.     background: url('../images/home/scene-fg-square-amex.png');
  525.     width: 833px;
  526.     height: 544px;
  527.     right: 198px;
  528.     bottom: 0;
  529.     opacity: 0;
  530.     -webkit-transition-property: -webkit-transform,opacity;
  531.     -moz-transition-property: -moz-transform,opacity;
  532.     -webkit-transition-duration: 800ms,700ms;
  533.     -moz-transition-duration: 800ms,700ms;
  534.     -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
  535.     -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
  536.     -webkit-transform: translate3d(-1px, 5px, 0) rotate(-0.25deg);
  537.     -moz-transform: translate(-1px, 5px) rotate(-0.25deg);
  538.     -webkit-transform-origin: bottom right;
  539.     -moz-transform-origin: bottom right;
  540. }
  541. .ie8 .square-fg {
  542.     display: none;
  543. }
  544. @media
  545. {
  546. .square-fg {
  547.     right: 220px;
  548. }
  549. }
  550. .register-fg {
  551.     right: 246px;
  552.     width: 734px;
  553.     height: 490px;
  554.     bottom: 0;
  555.     opacity: 0;
  556.     -webkit-transition-property: -webkit-transform,opacity;
  557.     -moz-transition-property: -moz-transform,opacity;
  558.     -webkit-transition-duration: 800ms,700ms;
  559.     -moz-transition-duration: 800ms,700ms;
  560.     -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
  561.     -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
  562.     -webkit-transform: translate3d(7px, 3px, 0);
  563.     -moz-transform: translate(7px, 3px);
  564. }
  565. .ie8 .register-fg {
  566.     display: none;
  567. }
  568. @media
  569. {
  570. .register-fg {
  571.     right: 286px;
  572. }
  573. }
  574. .cardcase-fg {
  575.     width: 315px;
  576.     height: 525px;
  577.     left: 640px;
  578.     bottom: 0;
  579.     opacity: 0;
  580.     -webkit-transition-property: -webkit-transform,opacity;
  581.     -moz-transition-property: -moz-transform,opacity;
  582.     -webkit-transition-duration: 800ms,700ms;
  583.     -moz-transition-duration: 800ms,700ms;
  584.     -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
  585.     -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
  586.     -webkit-transform-origin: bottom right;
  587.     -moz-transform-origin: bottom right;
  588.     -webkit-transform: translate3d(-4px, 6px, 0) rotate(-1deg);
  589.     -moz-transform: translate(-4px, 6px) rotate(-1deg);
  590. }
  591. .ie8 .cardcase-fg {
  592.     display: none;
  593. }
  594. .product-label, .square-label, .register-label, .cardcase-label {
  595.     z-index: 3;
  596.     cursor: default;
  597.     color: #31b1ef;
  598.     opacity: 0;
  599.     -webkit-transition-property: opacity,-webkit-transform;
  600.     -moz-transition-property: opacity,-moz-transform;
  601.     -webkit-transition-duration: 800ms;
  602.     -moz-transition-duration: 800ms;
  603.     -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
  604.     -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);
  605.     -webkit-transform: translate3d(5px, 0, 0);
  606.     -moz-transform: translate(5px, 0);
  607. }
  608. .ie8 .product-label, .ie8 .square-label, .ie8 .register-label, .ie8 .cardcase-label {
  609.     display: none;
  610. }
  611. .product-label h2, .square-label h2, .register-label h2, .cardcase-label h2 {
  612.     font: 0/0 a;
  613.     text-shadow: none;
  614.     color: transparent;
  615. }
  616. .square-label {
  617.     bottom: 114px;
  618.     right: 546px;
  619.     background-position: 0 -296px;
  620.     height: 45px;
  621.     width: 145px;
  622. }
  623. .square-label:hover, .square-label.square_hover, .square-label.square-hover {
  624.     background-position: 0 -341px;
  625. }
  626. @media
  627. {
  628. .square-label {
  629.     right: 560px;
  630. }
  631. }
  632. .register-label {
  633.     top: 206px;
  634.     right: 771px;
  635.     background-position: 0 -250px;
  636.     height: 23px;
  637.     width: 179px;
  638. }
  639. .register-label:hover, .register-label.register_hover, .register-label.register-hover {
  640.     background-position: 0 -273px;
  641. }
  642. @media
  643. {
  644. .register-label {
  645.     right: 813px;
  646. }
  647. }
  648. .cardcase-label {
  649.     bottom: 46px;
  650.     left: 556px;
  651.     background-position: 0 -62px;
  652.     height: 23px;
  653.     width: 194px;
  654.     -webkit-transform: translated3d(-5px, 0, 0);
  655.     -moz-transform: translate(-5px, 0);
  656. }
  657. .cardcase-label:hover, .cardcase-label.cardcase_hover, .cardcase-label.cardcase-hover {
  658.     background-position: 0 -85px;
  659. }
  660. .paddle {
  661.     position: absolute;
  662.     margin-top: 376px;
  663.     top: 0;
  664.     opacity: 0;
  665.     z-index: 3;
  666.     -moz-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
  667.     -webkit-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
  668.     -o-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
  669.     transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98);
  670. }
  671. .ie8 .paddle {
  672.     display: none;
  673. }
  674. .ready .paddle {
  675.     opacity: 0.6;
  676. }
  677. .ie8 .ready .paddle {
  678.     display: block;
  679. }
  680. .ready .paddle:hover {
  681.     opacity: 1;
  682. }
  683. .ie8 .ready .paddle:hover {
  684.     display: block;
  685. }
  686. .next-paddle {
  687.     background-position: 0 -110px;
  688.     height: 70px;
  689.     width: 70px;
  690.     right: 30px;
  691. }
  692. @media
  693. {
  694. .next-paddle {
  695.     right: 10px;
  696. }
  697. }
  698. .previous-paddle {
  699.     background-position: 0 -180px;
  700.     height: 70px;
  701.     width: 70px;
  702.     left: 30px;
  703. }
  704. @media
  705. {
  706. .previous-paddle {
  707.     left: 10px;
  708. }
  709. }
  710. .main-header-home .nav-link:hover .nav-icon {
  711.     opacity: 1;
  712. }
  713. .ie8 .main-header-home .nav-link:hover .nav-icon {
  714.     display: block;
  715. }
  716. .main-header-home .nav-link:hover .nav-icon-home {
  717.     opacity: 0;
  718. }
  719. .ie8 .main-header-home .nav-link:hover .nav-icon-home {
  720.     display: none;
  721. }
  722. .main-header-home .actions {
  723.     padding-top: 48px;
  724. }
  725. .main-header-home .nav-icon {
  726.     opacity: 0;
  727.     -moz-transition: opacity 0.3s ease-in-out;
  728.     -webkit-transition: opacity 0.3s ease-in-out;
  729.     -o-transition: opacity 0.3s ease-in-out;
  730.     transition: opacity 0.3s ease-in-out;
  731. }
  732. .ie8 .main-header-home .nav-icon {
  733.     display: none;
  734. }
  735. .main-header-home .nav-icon-home {
  736.     position: absolute;
  737.     top: 23px;
  738.     z-index: 1;
  739.     opacity: 1;
  740.     -moz-transition: opacity 0.3s ease-in-out;
  741.     -webkit-transition: opacity 0.3s ease-in-out;
  742.     -o-transition: opacity 0.3s ease-in-out;
  743.     transition: opacity 0.3s ease-in-out;
  744. }
  745. .ie8 .main-header-home .nav-icon-home {
  746.     display: block;
  747. }
  748. .square-nav-item .nav-icon-home {
  749.     left: 71px;
  750.     background-position: 0 -562px;
  751.     height: 51px;
  752.     width: 66px;
  753. }
  754. .register-nav-item .nav-icon-home {
  755.     left: 58px;
  756.     background-position: 0 -460px;
  757.     height: 51px;
  758.     width: 66px;
  759. }
  760. .cards-nav-item .nav-icon-home {
  761.     left: 56px;
  762.     background-position: 0 -31px;
  763.     height: 51px;
  764.     width: 66px;
  765. }
  766. .footer-nav {
  767.     color: #d4d4d4;
  768. }
  769. .footer-nav .nav-list a {
  770.     color: #ccc;
  771. }
  772. .footer-nav:hover {
  773.     color: #bbb;
  774. }
  775. .footer-nav:hover .nav-list a {
  776.     color: #a7a9aa;
  777. }
  778. .footer-nav:hover .nav-list a:hover {
  779.     color: #454a4f;
  780. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement