Advertisement
Guest User

bigcartel

a guest
May 24th, 2016
102
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 46.09 KB | None | 0 0
  1. html, body, div, span, applet, object, iframe, h2, h3, h3, h4, h5, h6, p, blockquote, pre,
  2. a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,
  3. small, strike, strong, sub, sup, tt, var, b, u, i, center,
  4. dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
  5. table, caption, tbody, tfoot, thead, tr, th, td,
  6. article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
  7. menu, nav, output, ruby, section, summary, time, mark, audio, video {
  8. margin: 0;
  9. padding: 0;
  10. border: 0;
  11. font-size: 100%;
  12. font: inherit;
  13. vertical-align: baseline;
  14. }
  15. article, aside, details, figcaption, figure,
  16. footer, header, hgroup, menu, nav, section {
  17. display: block;
  18. }
  19. body {
  20. line-height: 1;
  21. }
  22. ol, ul {
  23. list-style: none;
  24. }
  25. blockquote, q {
  26. quotes: none;
  27. }
  28. blockquote:before, blockquote:after,
  29. q:before, q:after {
  30. content: '';
  31. content: none;
  32. }
  33. table {
  34. border-collapse: collapse;
  35. border-spacing: 0;
  36. }
  37. .clear:before,
  38. .clear:after {
  39. content: "";
  40. display: table;
  41. }
  42. .clear:after {
  43. clear: both;
  44. }
  45. .clear {
  46. zoom:1;
  47. }
  48. img,
  49. embed,
  50. object,
  51. video {
  52. max-width: 100%;
  53. }
  54. ::selection {
  55. background: {{theme.highlight_color}};
  56. color: {{theme.primary_color}};
  57. }
  58. ::-moz-selection {
  59. background: {{theme.highlight_color}};
  60. color: {{theme.primary_color}};
  61. }
  62. *:focus {
  63. outline: none
  64. }
  65. ::-webkit-input-placeholder {}
  66. :-moz-placeholder {}
  67. input[type=text],
  68. input[type=submit] {
  69. -webkit-appearance: none;
  70. border-radius: 0;
  71. }
  72. /* ICON FONT
  73. --------------------------------------------- */
  74. @font-face {
  75. font-family: "icons";
  76. src: url({{ 'icons.eot' | theme_font_url }});
  77. src: url({{ 'icons.eot#iefix' | theme_font_url }}) format("embedded-opentype"), url({{ 'icons.woff' | theme_font_url }}) format("woff"), url({{ 'icons.ttf' | theme_font_url }}) format("truetype"), url({{ 'icons.svg' | theme_font_url }}) format("svg");
  78. font-weight: normal;
  79. font-style: normal;
  80. }
  81.  
  82. [data-icon]:before {
  83. font-family: "icons" !important;
  84. content: attr(data-icon);
  85. font-style: normal !important;
  86. font-weight: normal !important;
  87. font-variant: normal !important;
  88. text-transform: none !important;
  89. speak: none;
  90. line-height: 1;
  91. -webkit-font-smoothing: antialiased;
  92. -moz-osx-font-smoothing: grayscale;
  93. }
  94.  
  95. [class^="icon-"]:before,
  96. [class*=" icon-"]:before {
  97. font-family: "icons" !important;
  98. font-style: normal !important;
  99. font-weight: normal !important;
  100. font-variant: normal !important;
  101. text-transform: none !important;
  102. speak: none;
  103. line-height: 1;
  104. -webkit-font-smoothing: antialiased;
  105. -moz-osx-font-smoothing: grayscale;
  106. }
  107.  
  108. .icon-cart:before {
  109. content: "a";
  110. }
  111.  
  112. .icon-menu:before {
  113. content: "b";
  114. }
  115.  
  116. .icon-close:before {
  117. content: "c";
  118. }
  119.  
  120. .icon-close-bold:before {
  121. content: "d";
  122. }
  123.  
  124. .icon-caret:before {
  125. content: "e";
  126. }
  127.  
  128. .icon-arrow-right:before {
  129. content: "f";
  130. }
  131.  
  132. .icon-arrow-left:before {
  133. content: "g";
  134. }
  135.  
  136. /* TYPOGRAPHY
  137. --------------------------------------------- */
  138. body {
  139. color: {{theme.primary_color}};
  140. font-family: "{{theme.text_font}}", sans-serif;
  141. font-size: 62.5%;
  142. -webkit-text-size-adjust: none;
  143. text-rendering: optimizeLegibility;
  144. cursor: default;
  145. }
  146.  
  147. input,
  148. textarea {
  149. color: {{theme.primary_color}};
  150. font-family: "{{theme.text_font}}", sans-serif;
  151. -webkit-font-smoothing: antialiased;
  152. }
  153.  
  154. a {
  155. color: {{theme.primary_color}};
  156. text-decoration: none;
  157. }
  158.  
  159. a:hover {
  160. color: {{theme.primary_color}};
  161. }
  162.  
  163. p,
  164. .main ul,
  165. .main ol,
  166. .main table,
  167. label {
  168. font-size: 16px;
  169. line-height: 24px;
  170. }
  171.  
  172. .main p a {
  173. text-decoration: underline;
  174. }
  175.  
  176. .main p a:hover {
  177. text-decoration: underline;
  178. background: {{theme.highlight_color}};
  179. }
  180.  
  181. h1, h2, h3 {
  182. font-family: "{{theme.header_font}}", sans-serif;
  183. }
  184.  
  185. h1 {
  186. font-size: 50px;
  187. line-height: 1.4em;
  188. margin: 0 0 30px;
  189. text-align: center;
  190. }
  191.  
  192. h2 {
  193. font-size: 30px;
  194. line-height: 1.4em;
  195. }
  196.  
  197. h3 {
  198. font-size: 22px;
  199. line-height: 1.4em;
  200. -webkit-transform: translateZ(0);
  201. -moz-transform: translateZ(0);
  202. -ms-transform: translateZ(0);
  203. -o-transform: translateZ(0);
  204. transform: translateZ(0);
  205. }
  206.  
  207. h4 {
  208. font-size: 12px;
  209. line-height: 1.3em;
  210. text-transform: uppercase;
  211. letter-spacing: 0.09em;
  212. font-weight: 700;
  213. }
  214.  
  215. .highlight {
  216. font-size: 18px;
  217. font-weight: 700;
  218. line-height: 24px;
  219. color: {{theme.primary_color}};
  220. background: {{theme.highlight_color}};
  221. padding: 6px 12px;
  222. border-radius: 5px;
  223. }
  224.  
  225. ul.bullets {
  226. font-size: 15px;
  227. line-height: 22px;
  228. margin-left: 18px;
  229. }
  230.  
  231. ul.bullets li {
  232. list-style: disc;
  233. }
  234.  
  235. /* GLOBAL LAYOUT
  236. --------------------------------------------- */
  237. html {
  238. overflow-y: scroll;
  239. position: relative;
  240. }
  241.  
  242. html, body {
  243. height: 100%;
  244. }
  245.  
  246. body {
  247. background-color: {{theme.background_color}};
  248. background-image: {% if theme.images.background != blank %} url("{{ theme.images.background.url }}") {% else %} none {% endif %};
  249. }
  250.  
  251. .wrapper {
  252. min-height: 100%;
  253. /* equal to footer height */
  254. margin-bottom: -80px;
  255. }
  256.  
  257. .wrapper:after {
  258. content: "";
  259. display: block;
  260. /* equal to footer height */
  261. height: 80px;
  262. }
  263.  
  264. .inner {
  265. max-width: 1200px;
  266. min-width: 280px;
  267. margin: 0 auto;
  268. position: relative;
  269. }
  270.  
  271. .main .inner {
  272. margin-top: 130px;
  273. }
  274.  
  275. /* MODULES
  276. --------------------------------------------- */
  277. /* Buttons */
  278. .btn {
  279. display: inline-block;
  280. padding: 15px 20px;
  281. font-family: "{{theme.text_font}}", sans-serif;
  282. font-size: 20px;
  283. line-height: 22px;
  284. color: {{theme.primary_color}};
  285. border: 3px solid {{theme.primary_color}};
  286. background: none;
  287. text-align: center;
  288. border-radius: 5px;
  289. font-weight: 700;
  290. text-transform: uppercase;
  291. cursor: pointer;
  292. -webkit-touch-callout: none;
  293. -webkit-user-select: none;
  294. -khtml-user-select: none;
  295. -moz-user-select: none;
  296. -ms-user-select: none;
  297. user-select: none;
  298. }
  299.  
  300. .btn:hover {
  301. background: {{theme.primary_color}};
  302. color: {{theme.background_color}};
  303. }
  304.  
  305. .btn-inactive:hover {
  306. background: none;
  307. color: {{theme.primary_color}};
  308. }
  309.  
  310. /* Badges */
  311. .badge {
  312. height: 80px;
  313. width: 80px;
  314. font-size: 14px;
  315. line-height: 18px;
  316. text-align: center;
  317. text-transform: uppercase;
  318. border-radius: 70px;
  319. display: table;
  320. -webkit-transform: translateZ(0);
  321. -moz-transform: translateZ(0);
  322. -ms-transform: translateZ(0);
  323. -o-transform: translateZ(0);
  324. transform: translateZ(0);
  325. }
  326.  
  327. .badge span {
  328. display: table-cell;
  329. vertical-align: middle;
  330. -webkit-transform: translateZ(0);
  331. -moz-transform: translateZ(0);
  332. -ms-transform: translateZ(0);
  333. -o-transform: translateZ(0);
  334. transform: translateZ(0);
  335. }
  336.  
  337. .badge-empty {
  338. color: {{theme.primary_color}};
  339. border: 3px solid {{theme.primary_color}};
  340. }
  341.  
  342. .badge-filled {
  343. color: {{theme.primary_color}};
  344. background: {{theme.background_color}};
  345. border: 3px solid {{theme.background_color}};
  346. }
  347.  
  348. /* Errors */
  349. .errors {
  350. margin-bottom: 20px;
  351. padding: 15px;
  352. border-radius: 5px;
  353. text-align: center;
  354. background: {{theme.highlight_color}};
  355. }
  356.  
  357. .errors li {
  358. margin-top: 10px;
  359. }
  360.  
  361. .errors li:first-child {
  362. margin-top: 0;
  363. }
  364.  
  365. /* Pagers */
  366. .cycle-pager {
  367. position: absolute;
  368. left: 24px;
  369. bottom: 24px;
  370. z-index: 400;
  371. }
  372.  
  373. .cycle-pager > span {
  374. display: inline-block;
  375. width: 13px;
  376. height: 13px;
  377. padding: 6px;
  378. cursor: pointer;
  379. }
  380.  
  381. .cycle-pager > span > span {
  382. display: inline-block;
  383. width: 7px;
  384. height: 7px;
  385. border-radius: 20px;
  386. text-indent: -999px;
  387. background: {{theme.highlight_color}};
  388. border: 3px solid {{theme.primary_color}};
  389. position: relative;
  390. -webkit-transition: background 300ms;
  391. -moz-transition: background 300ms;
  392. -o-transition: background 300ms;
  393. transition: background 300ms;
  394. }
  395.  
  396. .cycle-pager span.cycle-pager-active span {
  397. background: {{theme.primary_color}};
  398. -webkit-transition: background 300ms;
  399. -moz-transition: background 300ms;
  400. -o-transition: background 300ms;
  401. transition: background 300ms;
  402. }
  403.  
  404. /* HEADER
  405. --------------------------------------------- */
  406. header {
  407. background: {{theme.background_color}};
  408. border-bottom: 6px solid {{theme.primary_color}};
  409. position: fixed;
  410. top: 0;
  411. width: 100%;
  412. z-index: 501;
  413. }
  414.  
  415. .maintenance_on header {
  416. top: 27px;
  417. }
  418.  
  419. header .inner {
  420. height: 70px;
  421. position: relative;
  422. }
  423.  
  424. .wordmark {
  425. float: left;
  426. font-family: "{{theme.header_font}}", sans-serif;
  427. font-size: 22px;
  428. line-height: 30px;
  429. margin-top: 24px;
  430. }
  431.  
  432. .logo {
  433. display: block;
  434. float: left;
  435. height: 70px;
  436. width: 300px;
  437. background-image: {% if theme.images.logo != blank %} url("{{ theme.images.logo.url | constrain: '600', '140' }}") {% else %} none {% endif %};
  438. background-size: contain;
  439. background-position: center left;
  440. background-repeat: no-repeat;
  441. }
  442.  
  443. .logo img {
  444. height: 100%;
  445. width: auto;
  446. }
  447.  
  448. .nav-main {
  449. position: absolute;
  450. bottom: 0;
  451. right: 0;
  452. height: 70px;
  453. z-index: 500;
  454. }
  455.  
  456. .nav-main a,
  457. .nav-main > ul > li > span {
  458. font-size: 12px;
  459. color: {{theme.primary_color}};
  460. text-transform: uppercase;
  461. letter-spacing: 0.09em;
  462. font-weight: 700;
  463. }
  464.  
  465. .nav-main > ul {
  466. float: left;
  467. display: block;
  468. height: 70px;
  469. }
  470.  
  471. .nav-main > ul > li {
  472. float: left;
  473. display: block;
  474. list-style: none;
  475. position: relative;
  476. }
  477.  
  478. .nav-main > ul > li > a,
  479. .nav-main > ul > li > span {
  480. display: block;
  481. height: 12px;
  482. padding: 29px 25px;
  483. }
  484.  
  485. .nav-main > ul > li.active > a,
  486. .nav-main > ul > li.active > span {
  487. background: {{theme.primary_color}};
  488. color: {{theme.background_color}};
  489. }
  490.  
  491. .nav-main .dropdown {
  492. visibility: hidden;
  493. opacity: 0;
  494. position: absolute;
  495. top: 70px;
  496. padding: 6px 0 0 0;
  497. right: 0px;
  498. background: {{theme.primary_color}};
  499. text-align: right;
  500. overflow: hidden;
  501. border-bottom-left-radius: 5px;
  502. border-bottom-right-radius: 5px;
  503. }
  504.  
  505. .nav-main > ul > li.active .dropdown {
  506. visibility: visible;
  507. opacity: 1;
  508. }
  509.  
  510. .icon-cart {
  511. font-size: 40px;
  512. }
  513.  
  514. .nav-main .dropdown li {
  515. display: block;
  516. line-height: 18px;
  517. }
  518.  
  519. .nav-main .dropdown li a {
  520. display: block;
  521. color: {{theme.background_color}};
  522. padding: 15px 20px;
  523. min-width: 200px;
  524. }
  525.  
  526. .nav-main .dropdown li a:hover {
  527. color: {{theme.background_color}};
  528. background: {{theme.highlight_color}};
  529. color: {{theme.primary_color}};
  530. }
  531.  
  532. .nav-caret {
  533. text-transform: lowercase;
  534. font-size: 7px;
  535. position: relative;
  536. display: inline-block;
  537. top: -2px;
  538. -webkit-transform: scaleX(1.5);
  539. -moz-transform: scaleX(1.5);
  540. -ms-transform: scaleX(1.5);
  541. -o-transform: scaleX(1.5);
  542. transform: scaleX(1.5);
  543. }
  544.  
  545. .mobile-nav-trigger {
  546. display: none;
  547. }
  548.  
  549. .cart-status {
  550. float: left;
  551. padding: 0;
  552. width: 70px;
  553. height: 70px;
  554. -webkit-transform: scale(1, 1);
  555. -moz-transform: scale(1, 1);
  556. -ms-transform: scale(1, 1);
  557. -o-transform: scale(1, 1);
  558. transform: scale(1, 1);
  559. -webkit-transition: all 100ms ease-in-out;
  560. -moz-transition: all 100ms ease-in-out;
  561. -o-transition: all 100ms ease-in-out;
  562. transition: all 100ms ease-in-out;
  563. }
  564.  
  565. @-webkit-keyframes orbpulse {
  566. 0% {
  567. -webkit-transform: scale(1);
  568. }
  569.  
  570. 25% {
  571. -webkit-transform: scale(2);
  572. }
  573.  
  574. 50% {
  575. -webkit-transform: scale(1);
  576. }
  577.  
  578. 75% {
  579. -webkit-transform: scale(1.2);
  580. }
  581.  
  582. 100% {
  583. -webkit-transform: scale(1);
  584. }
  585. }
  586.  
  587. @-moz-keyframes orbpulse {
  588. 0% {
  589. -moz-transform: scale(1);
  590. }
  591.  
  592. 25% {
  593. -moz-transform: scale(2);
  594. }
  595.  
  596. 50% {
  597. -moz-transform: scale(1);
  598. }
  599.  
  600. 75% {
  601. -moz-transform: scale(1.2);
  602. }
  603.  
  604. 100% {
  605. -moz-transform: scale(1);
  606. }
  607. }
  608.  
  609. @-o-keyframes orbpulse {
  610. 0% {
  611. -o-transform: scale(1);
  612. }
  613.  
  614. 25% {
  615. -o-transform: scale(2);
  616. }
  617.  
  618. 50% {
  619. -o-transform: scale(1);
  620. }
  621.  
  622. 75% {
  623. -o-transform: scale(1.2);
  624. }
  625.  
  626. 100% {
  627. -o-transform: scale(1);
  628. }
  629. }
  630.  
  631. @keyframes orbpulse {
  632. 0% {
  633. transform: scale(1);
  634. }
  635.  
  636. 25% {
  637. transform: scale(2);
  638. }
  639.  
  640. 50% {
  641. transform: scale(1);
  642. }
  643.  
  644. 75% {
  645. transform: scale(1.2);
  646. }
  647.  
  648. 100% {
  649. transform: scale(1);
  650. }
  651. }
  652.  
  653. .cart-orb {
  654. height: 60px;
  655. width: 60px;
  656. border-radius: 80px;
  657. background: {{theme.highlight_color}};
  658. position: absolute;
  659. top: 5px;
  660. right: 5px;
  661. position: absolute;
  662. z-index: 505;
  663. -webkit-transition: -webkit-transform 100ms ease-in-out;
  664. -moz-transition: -moz-transform 100ms ease-in-out;
  665. -o-transition: -o-transform 100ms ease-in-out;
  666. transition: transform 100ms ease-in-out;
  667. }
  668.  
  669. .cart-status .cart-orb {
  670. -webkit-transform: scale(0, 0);
  671. -moz-transform: scale(0, 0);
  672. -ms-transform: scale(0, 0);
  673. -o-transform: scale(0, 0);
  674. transform: scale(0, 0);
  675. -webkit-transition: -webkit-transform 100ms ease-in-out;
  676. -moz-transition: -moz-transform 100ms ease-in-out;
  677. -o-transition: -o-transform 100ms ease-in-out;
  678. transition: transform 100ms ease-in-out;
  679. }
  680.  
  681. .cart-status:hover .cart-orb {
  682. -webkit-transform: scale(1.6, 1.6);
  683. -moz-transform: scale(1.6, 1.6);
  684. -ms-transform: scale(1.6, 1.6);
  685. -o-transform: scale(1.6, 1.6);
  686. transform: scale(1.6, 1.6);
  687. -webkit-transition: -webkit-transform 100ms ease-out;
  688. -moz-transition: -moz-transform 100ms ease-out;
  689. -o-transition: -o-transform 100ms ease-out;
  690. transition: transform 100ms ease-out;
  691. }
  692.  
  693. /* Disable orb on cart pages */
  694. .cart .cart-status:hover .cart-orb {
  695. display: none;
  696. }
  697.  
  698. .cart-count {
  699. display: block;
  700. text-align: center;
  701. margin-top: 16px;
  702. margin-bottom: -2px;
  703. padding-right: 5px;
  704. position: relative;
  705. z-index: 510;
  706. -webkit-transition: all 100ms;
  707. -moz-transition: all 100ms;
  708. -o-transition: all 100ms;
  709. transition: all 100ms;
  710. }
  711.  
  712. .icon-cart {
  713. display: block;
  714. margin: 0 auto;
  715. width: 40px;
  716. height: 40px;
  717. position: relative;
  718. top: -4px;
  719. z-index: 510;
  720. }
  721.  
  722. .cart-status .cart-count-animate {
  723. -webkit-transform: translate(0, 16px);
  724. -moz-transform: translate(0, 16px);
  725. -ms-transform: translate(0, 16px);
  726. -o-transform: translate(0, 16px);
  727. transform: translate(0, 16px);
  728. -webkit-transition: all 100ms;
  729. -moz-transition: all 100ms;
  730. -o-transition: all 100ms;
  731. transition: all 100ms;
  732. }
  733.  
  734. .cart-status .cart-orb-animate {
  735. -webkit-transform: scale(1.6, 1.6);
  736. -moz-transform: scale(1.6, 1.6);
  737. -ms-transform: scale(1.6, 1.6);
  738. -o-transform: scale(1.6, 1.6);
  739. transform: scale(1.6, 1.6);
  740. -webkit-transition: -webkit-transform 150ms ease-out;
  741. -moz-transition: -moz-transform 150ms ease-out;
  742. -o-transition: -o-transform 150ms ease-out;
  743. transition: transform 150ms ease-out;
  744. }
  745.  
  746. .nav-mobile {
  747. display: none;
  748. }
  749.  
  750. /* FOOTER
  751. --------------------------------------------- */
  752. footer {
  753. background: {{theme.primary_color}};
  754. font-size: 12px;
  755. line-height: 1.3em;
  756. color: {{theme.background_color}};
  757. text-transform: uppercase;
  758. letter-spacing: 0.09em;
  759. font-weight: 700;
  760. position: relative;
  761. z-index: 500;
  762. }
  763.  
  764. footer a {
  765. color: {{theme.background_color}};
  766. }
  767.  
  768. footer a:hover {
  769. color: {{theme.highlight_color}};
  770. }
  771.  
  772. footer .inner {
  773. min-height: 12px;
  774. padding: 34px 0;
  775. }
  776.  
  777. footer .copyright {
  778. float: left;
  779. }
  780.  
  781. footer .footer-text {
  782. float: right;
  783. }
  784.  
  785. /* DOM MODS
  786. --------------------------------------------- */
  787. .visible-phone {
  788. display: none !important;
  789. }
  790.  
  791. .visible-tablet {
  792. display: none !important;
  793. }
  794.  
  795. .visible-desktop {
  796. display: inherit !important;
  797. }
  798.  
  799. .hidden-phone {
  800. display: inherit !important;
  801. }
  802.  
  803. .hidden-tablet {
  804. display: inherit !important;
  805. }
  806.  
  807. .hidden-desktop {
  808. display: none !important;
  809. }
  810.  
  811. /* EXTRA LARGE */
  812. @media only screen and (min-width: 1600px) {
  813. .inner {
  814. max-width: 1480px;
  815. }
  816. }
  817. /* LARGE */
  818. @media only screen and (max-width: 1200px) {
  819. /* Global */
  820. .inner {
  821. margin-left: 30px;
  822. margin-right: 30px;
  823. }
  824.  
  825. .main .inner {
  826. margin-top: 130px;
  827. }
  828.  
  829. /* Typography */
  830. h1 {
  831. font-size: 45px;
  832. }
  833.  
  834. h2 {
  835. font-size: 20px;
  836. line-height: 1.5em;
  837. }
  838.  
  839. h3 {
  840. font-size: 18px;
  841. line-height: 1.7em;
  842. }
  843.  
  844. /* DOM mods */
  845. .visible-phone {
  846. display: none !important;
  847. }
  848.  
  849. .visible-tablet {
  850. display: inherit !important;
  851. }
  852.  
  853. .visible-desktop {
  854. display: none !important;
  855. }
  856.  
  857. .hidden-phone {
  858. display: inherit !important;
  859. }
  860.  
  861. .hidden-tablet {
  862. display: none !important;
  863. }
  864.  
  865. .hidden-desktop {
  866. display: inherit !important;
  867. }
  868. }
  869. /* MEDIUM */
  870. @media only screen and (max-width: 880px) {
  871. /* Global */
  872. .main .inner {
  873. margin-top: 50px;
  874. }
  875.  
  876. /* Typography */
  877. h3 {
  878. font-size: 16px;
  879. }
  880.  
  881. /* Modules */
  882. .btn {
  883. padding: 15px 30px;
  884. font-size: 16px;
  885. }
  886.  
  887. /* Header */
  888. header {
  889. position: relative;
  890. }
  891.  
  892. header .inner {
  893. height: 70px;
  894. }
  895.  
  896. .logo {
  897. width: 160px;
  898. }
  899.  
  900. .wordmark {
  901. margin-top: 24px;
  902. }
  903.  
  904. .nav-main {
  905. height: 70px;
  906. }
  907.  
  908. .nav-main ul {
  909. display: none;
  910. }
  911.  
  912. .mobile-nav-trigger {
  913. display: block;
  914. float: left;
  915. height: 70px;
  916. width: 50px;
  917. }
  918.  
  919. .icon-menu {
  920. display: block;
  921. font-size: 30px;
  922. width: 30px;
  923. margin: 22px auto 0;
  924. }
  925.  
  926. .cart-status {
  927. height: 70px;
  928. width: 50px;
  929. }
  930.  
  931. .cart-orb {
  932. width: 60px;
  933. height: 60px;
  934. top: 5px;
  935. right: -4px;
  936. }
  937.  
  938. .icon-cart {
  939. top: -4px;
  940. }
  941.  
  942. .nav-mobile {
  943. position: absolute;
  944. top: 70px;
  945. width: 100%;
  946. background: {{theme.primary_color}};
  947. z-index: 502;
  948. height: auto;
  949. }
  950.  
  951. .nav-mobile > ul {
  952. margin: 20px;
  953. border-radius: 5px;
  954. }
  955.  
  956. .nav-mobile li {
  957. margin-top: 5px;
  958. }
  959.  
  960. .nav-mobile li:first-child {
  961. margin-top: 0;
  962. }
  963.  
  964. .nav-mobile a {
  965. display: block;
  966. padding: 16px 0;
  967. background: {{theme.background_color}};
  968. color: {{theme.primary_color}};
  969. text-align: center;
  970. text-transform: uppercase;
  971. font-size: 16px;
  972. font-weight: 700;
  973. }
  974.  
  975. .nav-mobile a:hover {
  976. color: {{theme.primary_color}};
  977. background: {{theme.highlight_color}};
  978. }
  979.  
  980. .nav-mobile li > ul {
  981. display: none;
  982. margin-top: 0;
  983. }
  984.  
  985. .nav-mobile li > ul li {
  986. margin-top: 0;
  987. border-top: 3px solid {{theme.background_color}};
  988. }
  989.  
  990. .nav-mobile li > ul li:first-child {
  991. border-top: none;
  992. }
  993.  
  994. .nav-mobile li > ul a {
  995. background: none;
  996. color: {{theme.background_color}};
  997. }
  998. }
  999. /* SMALL */
  1000. @media only screen and (max-width: 700px) {
  1001. /* Typography */
  1002. h1 {
  1003. font-size: 34px;
  1004. }
  1005.  
  1006. /* Global */
  1007. .inner {
  1008. margin-left: 20px;
  1009. margin-right: 20px;
  1010. }
  1011.  
  1012. .main .inner {
  1013. margin-top: 40px;
  1014. }
  1015.  
  1016. .home .main .inner {
  1017. margin-left: 0;
  1018. margin-right: 0;
  1019. }
  1020.  
  1021. footer .inner {
  1022. min-height: 34px;
  1023. padding: 24px 0;
  1024. text-align: center;
  1025. }
  1026.  
  1027. header .inner {
  1028. margin-right: 10px;
  1029. }
  1030.  
  1031. /* Modules */
  1032. .highlight {
  1033. font-size: 16px;
  1034. }
  1035.  
  1036. .badge-view {
  1037. display: none;
  1038. }
  1039.  
  1040. .cycle-pager {
  1041. width: 100%;
  1042. left: 0;
  1043. text-align: center;
  1044. }
  1045.  
  1046. /* Footer */
  1047. footer .copyright,
  1048. footer .footer-text {
  1049. float: none;
  1050. display: block;
  1051. }
  1052.  
  1053. footer .footer-text {
  1054. margin-top: 10px;
  1055. }
  1056.  
  1057. /* DOM mods */
  1058. .visible-phone {
  1059. display: inherit !important;
  1060. }
  1061.  
  1062. .visible-tablet {
  1063. display: none !important;
  1064. }
  1065.  
  1066. .visible-desktop {
  1067. display: none !important;
  1068. }
  1069.  
  1070. .hidden-phone {
  1071. display: none !important;
  1072. }
  1073.  
  1074. .hidden-tablet {
  1075. display: inherit !important;
  1076. }
  1077.  
  1078. .hidden-desktop {
  1079. display: inherit !important;
  1080. }
  1081. }
  1082. /* EXTRA SMALL */
  1083. .home .main .inner {
  1084. text-align: center;
  1085. }
  1086.  
  1087. .home .main.has-slideshow .inner {
  1088. margin-top: 50px;
  1089. }
  1090.  
  1091. .preview {
  1092. margin: 0 15px 80px 15px;
  1093. position: relative;
  1094. display: inline-block;
  1095. }
  1096.  
  1097. .preview-inner a {
  1098. display: block;
  1099. position: relative;
  1100. width: 100%;
  1101. }
  1102.  
  1103. .image-wrap {
  1104. background: {{theme.background_color}};
  1105. position: relative;
  1106. z-index: 0;
  1107. }
  1108.  
  1109. .image-wrap img {
  1110. display: block;
  1111. position: absolute;
  1112. width: 100%;
  1113. height: 100%;
  1114. z-index: 1;
  1115. }
  1116.  
  1117. .preview .badge-empty {
  1118. -webkit-transition: -webkit-transform 100ms ease-in-out;
  1119. -moz-transition: -moz-transform 100ms ease-in-out;
  1120. -o-transition: -o-transform 100ms ease-in-out;
  1121. transition: transform 100ms ease-in-out;
  1122. }
  1123.  
  1124. .preview:hover .badge-empty {
  1125. color: {% if theme.background_color != 'transparent' %} {{ theme.background_color }} {% else %} #FFFFFF {% endif %};
  1126. background: {{theme.primary_color}};
  1127. -webkit-transform: translateZ(0);
  1128. -moz-transform: translateZ(0);
  1129. -ms-transform: translateZ(0);
  1130. -o-transform: translateZ(0);
  1131. transform: translateZ(0);
  1132. -webkit-transform: scale(1.1, 1.1);
  1133. -moz-transform: scale(1.1, 1.1);
  1134. -ms-transform: scale(1.1, 1.1);
  1135. -o-transform: scale(1.1, 1.1);
  1136. transform: scale(1.1, 1.1);
  1137. -webkit-transition: -webkit-transform 100ms ease-in-out;
  1138. -moz-transition: -moz-transform 100ms ease-in-out;
  1139. -o-transition: -o-transform 100ms ease-in-out;
  1140. transition: transform 100ms ease-in-out;
  1141. }
  1142.  
  1143. .preview:active .badge-empty {
  1144. -webkit-transform: scale(0.95, 0.95);
  1145. -moz-transform: scale(0.95, 0.95);
  1146. -ms-transform: scale(0.95, 0.95);
  1147. -o-transform: scale(0.95, 0.95);
  1148. transform: scale(0.95, 0.95);
  1149. -webkit-transition: -webkit-transform 50ms ease-in-out;
  1150. -moz-transition: -moz-transform 50ms ease-in-out;
  1151. -o-transition: -o-transform 50ms ease-in-out;
  1152. transition: transform 50ms ease-in-out;
  1153. }
  1154.  
  1155. .preview .badge {
  1156. position: absolute;
  1157. z-index: 2;
  1158. }
  1159.  
  1160. .meta {
  1161. border-top: 3px solid {{theme.primary_color}};
  1162. text-align: left;
  1163. padding: 20px 0;
  1164. position: relative;
  1165. }
  1166.  
  1167. .meta .price {
  1168. float: right;
  1169. margin: 0 0 10px 30px;
  1170. -webkit-transform: translateZ(0);
  1171. }
  1172.  
  1173. .pagination {
  1174. display: block;
  1175. font-size: 40px;
  1176. line-height: 1.5em;
  1177. margin-bottom: 80px;
  1178. }
  1179.  
  1180. .pagination a,
  1181. .pagination span {
  1182. display: inline-block;
  1183. white-space: nowrap;
  1184. padding: 0 4px;
  1185. }
  1186.  
  1187. .pagination .current,
  1188. .pagination a:hover {
  1189. border-radius: 5px;
  1190. background: {{theme.highlight_color}};
  1191. }
  1192.  
  1193. .pagination .disabled {
  1194. display: none;
  1195. }
  1196.  
  1197. .color-block-products {
  1198. width: 70%;
  1199. height: 70%;
  1200. position: fixed;
  1201. left: 0;
  1202. bottom: 0;
  1203. z-index: -1;
  1204. background-color: {{theme.accent_color}};
  1205. background-image: {% if theme.images.accent != blank %} url("{{ theme.images.accent.url }}") {% else %} none {% endif %};
  1206. }
  1207.  
  1208. .preview {
  1209. width: 300px;
  1210. }
  1211.  
  1212. .rand-0 {
  1213. width: 330px;
  1214. top: 40px;
  1215. }
  1216.  
  1217. .rand-0 .badge-view {
  1218. bottom: 20px;
  1219. right: 20px;
  1220. }
  1221.  
  1222. .rand-0 .badge-status {
  1223. top: 20px;
  1224. left: 20px;
  1225. }
  1226.  
  1227. .rand-1 {
  1228. width: 280px;
  1229. top: 20px;
  1230. }
  1231.  
  1232. .rand-1 .badge-view {
  1233. top: 21%;
  1234. right: -20px;
  1235. }
  1236.  
  1237. .rand-1 .badge-status {
  1238. bottom: 20%;
  1239. left: -20px;
  1240. }
  1241.  
  1242. .rand-2 {
  1243. width: 350px;
  1244. top: 0px;
  1245. }
  1246.  
  1247. .rand-2 .badge-view {
  1248. top: 30%;
  1249. right: 20px;
  1250. }
  1251.  
  1252. .rand-2 .badge-status {
  1253. top: 8%;
  1254. left: 20px;
  1255. }
  1256.  
  1257. .rand-3 {
  1258. width: 320px;
  1259. top: 40px;
  1260. }
  1261.  
  1262. .rand-3 .badge-view {
  1263. bottom: 20%;
  1264. left: -20px;
  1265. }
  1266.  
  1267. .rand-3 .badge-status {
  1268. top: 10%;
  1269. right: -20px;
  1270. }
  1271.  
  1272. .rand-4 {
  1273. width: 400px;
  1274. top: -20px;
  1275. }
  1276.  
  1277. .rand-4 .badge-view {
  1278. top: 20%;
  1279. left: -20px;
  1280. }
  1281.  
  1282. .rand-4 .badge-status {
  1283. bottom: 15%;
  1284. right: 20px;
  1285. }
  1286.  
  1287. .rand-5 {
  1288. top: 20px;
  1289. }
  1290.  
  1291. .rand-5 .badge-view {
  1292. top: 20px;
  1293. left: 20px;
  1294. }
  1295.  
  1296. .rand-5 .badge-status {
  1297. top: -20px;
  1298. right: -20px;
  1299. }
  1300.  
  1301. .rand-6 {
  1302. width: 330px;
  1303. top: 0px;
  1304. }
  1305.  
  1306. .rand-6 .badge-view {
  1307. top: -20px;
  1308. right: 20px;
  1309. }
  1310.  
  1311. .rand-6 .badge-status {
  1312. bottom: 10%;
  1313. left: -20px;
  1314. }
  1315.  
  1316. .home-slideshow-wrap {
  1317. max-width: 1200px;
  1318. margin: 76px auto 0;
  1319. position: relative;
  1320. }
  1321.  
  1322. .home-slideshow {
  1323. margin-left: 80px;
  1324. -webkit-transform: translateZ(0);
  1325. -moz-transform: translateZ(0);
  1326. -ms-transform: translateZ(0);
  1327. -o-transform: translateZ(0);
  1328. transform: translateZ(0);
  1329. }
  1330.  
  1331. .slideshow-stripe {
  1332. width: 80px;
  1333. height: 90%;
  1334. position: absolute;
  1335. top: 0;
  1336. left: 0;
  1337. background: {{theme.highlight_color}};
  1338. }
  1339.  
  1340. /* Categories / Artists */
  1341. .products .main .inner {
  1342. margin-top: 130px;
  1343. text-align: center;
  1344. }
  1345.  
  1346. /* EXTRA LARGE */
  1347. @media only screen and (min-width: 1600px) {
  1348. .home-slideshow-wrap {
  1349. max-width: 1480px;
  1350. }
  1351. }
  1352. /* LARGE */
  1353. @media only screen and (max-width: 1200px) {
  1354. .preview {
  1355. margin: 0 15px 70px 15px;
  1356. }
  1357.  
  1358. .preview {
  1359. width: 200px;
  1360. }
  1361.  
  1362. .meta {
  1363. padding: 0 0 20px 0;
  1364. text-align: center;
  1365. }
  1366.  
  1367. .meta .price {
  1368. float: none;
  1369. display: inline-block;
  1370. margin: 0 0 -5px 0;
  1371. position: relative;
  1372. top: -20px;
  1373. }
  1374.  
  1375. .rand-0 {
  1376. width: 240px;
  1377. top: 40px;
  1378. }
  1379.  
  1380. .rand-1 {
  1381. width: 200px;
  1382. top: 20px;
  1383. }
  1384.  
  1385. .rand-2 {
  1386. width: 250px;
  1387. top: 0px;
  1388. }
  1389.  
  1390. .rand-3 {
  1391. width: 220px;
  1392. top: 40px;
  1393. }
  1394.  
  1395. .rand-4 {
  1396. width: 300px;
  1397. top: -20px;
  1398. }
  1399.  
  1400. .rand-5 {
  1401. top: 20px;
  1402. }
  1403.  
  1404. .rand-6 {
  1405. width: 230px;
  1406. top: 0px;
  1407. }
  1408.  
  1409. .pagination {
  1410. font-size: 32px;
  1411. }
  1412. }
  1413. /* MEDIUM */
  1414. @media only screen and (max-width: 880px) {
  1415. /* Home */
  1416. .home-slideshow-wrap {
  1417. margin: 0 auto;
  1418. }
  1419.  
  1420. .home-slideshow {
  1421. margin-left: 0;
  1422. }
  1423.  
  1424. .slideshow-stripe {
  1425. display: none;
  1426. }
  1427.  
  1428. /* Categories / Artists */
  1429. .products .main .inner {
  1430. margin-top: 50px;
  1431. }
  1432. }
  1433. /* SMALL */
  1434. @media only screen and (max-width: 700px) {
  1435. .preview {
  1436. margin: 0 15px 20px 15px;
  1437. }
  1438.  
  1439. .rand-0 {
  1440. width: 210px;
  1441. top: 0;
  1442. }
  1443.  
  1444. .rand-1 {
  1445. width: 200px;
  1446. top: 0;
  1447. }
  1448.  
  1449. .rand-2 {
  1450. width: 230px;
  1451. top: 0;
  1452. }
  1453.  
  1454. .rand-3 {
  1455. width: 210px;
  1456. top: 0;
  1457. }
  1458.  
  1459. .rand-4 {
  1460. width: 190px;
  1461. top: 0;
  1462. }
  1463.  
  1464. .rand-5 {
  1465. width: 210px;
  1466. top: 0;
  1467. }
  1468.  
  1469. .rand-6 {
  1470. width: 230px;
  1471. top: 0;
  1472. }
  1473.  
  1474. .pagination {
  1475. font-size: 22px;
  1476. margin-bottom: 60px;
  1477. }
  1478.  
  1479. /* Categories / Artists */
  1480. .products .main .inner {
  1481. margin-top: 40px;
  1482. text-align: center;
  1483. }
  1484. }
  1485. /* EXTRA SMALL */
  1486. @media only screen and (max-width: 420px) {
  1487. /* Products */
  1488. .preview {
  1489. margin: 0 0 20px 0;
  1490. }
  1491.  
  1492. .rand-0 {
  1493. width: 260px;
  1494. top: 0;
  1495. }
  1496.  
  1497. .rand-1 {
  1498. width: 250px;
  1499. top: 0;
  1500. }
  1501.  
  1502. .rand-2 {
  1503. width: 280px;
  1504. top: 0;
  1505. }
  1506.  
  1507. .rand-3 {
  1508. width: 260px;
  1509. top: 0;
  1510. }
  1511.  
  1512. .rand-4 {
  1513. width: 210px;
  1514. top: 0;
  1515. }
  1516.  
  1517. .rand-5 {
  1518. width: 280px;
  1519. top: 0;
  1520. }
  1521.  
  1522. .rand-6 {
  1523. width: 240px;
  1524. top: 0;
  1525. }
  1526.  
  1527. .pagination {
  1528. padding: 0 40px;
  1529. }
  1530. }
  1531. .product .main .inner {
  1532. margin-top: 76px;
  1533. }
  1534.  
  1535. .product .wrapper {
  1536. overflow: hidden;
  1537. }
  1538.  
  1539. .product .images {
  1540. float: right;
  1541. width: 66%;
  1542. background-color: {{theme.accent_color}};
  1543. background-image: {% if theme.images.accent != blank %} url("{{ theme.images.accent.url }}") {% else %} none {% endif %};
  1544. }
  1545.  
  1546. .product .images-inner {
  1547. position: relative;
  1548. }
  1549.  
  1550. .product .color-block {
  1551. width: 2000%;
  1552. height: 2000%;
  1553. position: absolute;
  1554. top: 0;
  1555. left: 0;
  1556. background-color: {{theme.accent_color}};
  1557. background-image: {% if theme.images.accent != blank %} url("{{ theme.images.accent.url }}") {% else %} none {% endif %};
  1558. z-index: -1;
  1559. }
  1560.  
  1561. .slideshow {
  1562. position: relative;
  1563. overflow: hidden;
  1564. background-color: {{theme.accent_color}};
  1565. background-image: {% if theme.images.accent != blank %} url("{{ theme.images.accent.url }}") {% else %} none {% endif %};
  1566. }
  1567.  
  1568. .slideshow img {
  1569. display: block;
  1570. width: auto;
  1571. max-width: 100%;
  1572. }
  1573.  
  1574. .product .details {
  1575. float: left;
  1576. width: 28%;
  1577. }
  1578.  
  1579. .product h2 {
  1580. margin: 50px 0 0 0;
  1581. }
  1582.  
  1583. .product h4 {
  1584. margin: 0 0 15px 0;
  1585. }
  1586.  
  1587. .product .description {
  1588. margin: 30px 0 0 0;
  1589. }
  1590.  
  1591. .product .errors {
  1592. margin: 30px 0 0 0;
  1593. }
  1594.  
  1595. .product .description b,
  1596. .product .description strong {
  1597. font-weight: bold;
  1598. }
  1599.  
  1600. .product .description i,
  1601. .product .description em {
  1602. font-style: italic;
  1603. }
  1604.  
  1605. .static-option-list {
  1606. margin-bottom: 30px;
  1607. }
  1608.  
  1609. .product .description p {
  1610. margin-bottom: 20px;
  1611. }
  1612.  
  1613. .product .description p:last-child {
  1614. margin-bottom: 0;
  1615. }
  1616.  
  1617. .badge-sale {
  1618. position: absolute;
  1619. top: 30px;
  1620. left: 30px;
  1621. z-index: 400;
  1622. }
  1623.  
  1624. .product .price {
  1625. display: inline-block;
  1626. margin-top: 15px;
  1627. }
  1628.  
  1629. .purchase {
  1630. margin-top: 30px;
  1631. }
  1632.  
  1633. .social-links {
  1634. overflow: hidden;
  1635. margin-top: 30px;
  1636. margin-bottom: 15px;
  1637. }
  1638.  
  1639. .social-links li {
  1640. float: left;
  1641. margin: 0 10px 10px 0;
  1642. }
  1643.  
  1644. .social-links li a {
  1645. display: block;
  1646. background: {{theme.primary_color}};
  1647. color: {{theme.background_color}};
  1648. text-transform: uppercase;
  1649. font-weight: 700;
  1650. font-size: 12px;
  1651. letter-spacing: 0.09em;
  1652. padding: 5px 10px;
  1653. border-radius: 5px;
  1654. -webkit-touch-callout: none;
  1655. -webkit-user-select: none;
  1656. -khtml-user-select: none;
  1657. -moz-user-select: none;
  1658. -ms-user-select: none;
  1659. user-select: none;
  1660. }
  1661.  
  1662. .social-links li a:hover {
  1663. color: {{theme.highlight_color}};
  1664. }
  1665.  
  1666. @-webkit-keyframes purchasepulse {
  1667. 0% {
  1668. -webkit-transform: scale(1);
  1669. }
  1670.  
  1671. 50% {
  1672. -webkit-transform: scale(1.2);
  1673. }
  1674.  
  1675. 100% {
  1676. -webkit-transform: scale(1);
  1677. }
  1678. }
  1679.  
  1680. @-moz-keyframes purchasepulse {
  1681. 0% {
  1682. -moz-transform: scale(0.95);
  1683. }
  1684.  
  1685. 50% {
  1686. -moz-transform: scale(1.2);
  1687. }
  1688.  
  1689. 100% {
  1690. -moz-transform: scale(1);
  1691. }
  1692. }
  1693.  
  1694. @-o-keyframes purchasepulse {
  1695. 0% {
  1696. -o-transform: scale(0.95);
  1697. }
  1698.  
  1699. 50% {
  1700. -o-transform: scale(1.2);
  1701. }
  1702.  
  1703. 100% {
  1704. -o-transform: scale(1);
  1705. }
  1706. }
  1707.  
  1708. @keyframes purchasepulse {
  1709. 0% {
  1710. transform: scale(0.95);
  1711. }
  1712.  
  1713. 50% {
  1714. transform: scale(1.2);
  1715. }
  1716.  
  1717. 100% {
  1718. transform: scale(1);
  1719. }
  1720. }
  1721.  
  1722. .btn-purchase {
  1723. display: block;
  1724. -webkit-transform: scale(1, 1);
  1725. -moz-transform: scale(1, 1);
  1726. -ms-transform: scale(1, 1);
  1727. -o-transform: scale(1, 1);
  1728. transform: scale(1, 1);
  1729. -webkit-transition: -webkit-transform 100ms ease-in-out;
  1730. -moz-transition: -moz-transform 100ms ease-in-out;
  1731. -o-transition: -o-transform 100ms ease-in-out;
  1732. transition: transform 100ms ease-in-out;
  1733. }
  1734.  
  1735. .btn-active:active {
  1736. -webkit-transform: scale(0.95, 0.95);
  1737. -moz-transform: scale(0.95, 0.95);
  1738. -ms-transform: scale(0.95, 0.95);
  1739. -o-transform: scale(0.95, 0.95);
  1740. transform: scale(0.95, 0.95);
  1741. -webkit-transition: -webkit-transform 50ms ease-in-out;
  1742. -moz-transition: -moz-transform 50ms ease-in-out;
  1743. -o-transition: -o-transform 50ms ease-in-out;
  1744. transition: transform 50ms ease-in-out;
  1745. }
  1746.  
  1747. .btn-pulse {
  1748. -webkit-transform: scale(1.2, 1.2);
  1749. -moz-transform: scale(1.2, 1.2);
  1750. -ms-transform: scale(1.2, 1.2);
  1751. -o-transform: scale(1.2, 1.2);
  1752. transform: scale(1.2, 1.2);
  1753. -webkit-transition: -webkit-transform 100ms ease-in-out;
  1754. -moz-transition: -moz-transform 100ms ease-in-out;
  1755. -o-transition: -o-transform 100ms ease-in-out;
  1756. transition: transform 100ms ease-in-out;
  1757. }
  1758.  
  1759. .btn-inactive:hover {
  1760. background: none;
  1761. color: {{theme.primary_color}};
  1762. cursor: default;
  1763. }
  1764.  
  1765. .options {
  1766. border: 3px solid {{theme.primary_color}};
  1767. border-radius: 5px;
  1768. margin-bottom: 20px;
  1769. }
  1770.  
  1771. .option-selected {
  1772. font-size: 15px;
  1773. line-height: 22px;
  1774. padding: 10px;
  1775. cursor: pointer;
  1776. position: relative;
  1777. }
  1778.  
  1779. .option-selected:hover {
  1780. color: {{theme.background_color}};
  1781. background: {{theme.primary_color}};
  1782. }
  1783.  
  1784. .option-selected-name {
  1785. display: block;
  1786. margin-right: 30px;
  1787. font-size: 16px;
  1788. }
  1789.  
  1790. .options-wrap {
  1791. height: 48px;
  1792. margin-bottom: 20px;
  1793. position: relative;
  1794. z-index: 10;
  1795. }
  1796.  
  1797. .options-list {
  1798. background: {{theme.background_color}};
  1799. height: auto;
  1800. max-height: 200px;
  1801. overflow-y: auto;
  1802. -webkit-overflow-scrolling: touch;
  1803. }
  1804.  
  1805. .options-list li {
  1806. display: block;
  1807. padding: 10px;
  1808. cursor: pointer;
  1809. }
  1810.  
  1811. .options-list li:hover {
  1812. background: {{theme.primary_color}};
  1813. color: {{theme.background_color}};
  1814. }
  1815.  
  1816. .options .dropdown-caret {
  1817. position: absolute;
  1818. top: 50%;
  1819. right: 20px;
  1820. margin-top: -12px;
  1821. text-transform: lowercase;
  1822. font-size: 7px;
  1823. display: block;
  1824. font-weight: 700;
  1825. -moz-transform: scalex(1.5);
  1826. -ms-transform: scalex(1.5);
  1827. -o-transform: scalex(1.5);
  1828. -webkit-transform: scalex(1.5);
  1829. transform: scalex(1.5);
  1830. }
  1831.  
  1832. /* LARGE */
  1833. @media only screen and (max-width: 1200px) {
  1834. .product .main .inner {
  1835. margin-right: 0;
  1836. }
  1837.  
  1838. .product h2 {
  1839. margin-top: 30px;
  1840. }
  1841. }
  1842. /* MEDIUM */
  1843. @media only screen and (max-width: 880px) {
  1844. .product .main .inner {
  1845. margin-top: 0;
  1846. }
  1847. }
  1848. /* SMALL */
  1849. @media only screen and (max-width: 700px) {
  1850. .product .details,
  1851. .product .images {
  1852. float: none;
  1853. width: auto;
  1854. }
  1855.  
  1856. .product .images {
  1857. width: 100%;
  1858. }
  1859.  
  1860. .product .images-inner {
  1861. display: block;
  1862. }
  1863.  
  1864. .product .details {
  1865. text-align: center;
  1866. margin: 0 20px 20px 20px;
  1867. }
  1868.  
  1869. .product .description,
  1870. .product .bullets {
  1871. text-align: left;
  1872. }
  1873.  
  1874. .product .color-block {
  1875. display: none;
  1876. }
  1877.  
  1878. .product .main .inner {
  1879. margin: 0;
  1880. }
  1881.  
  1882. .badge-sale {
  1883. top: 20px;
  1884. left: 20px;
  1885. }
  1886.  
  1887. .slideshow {
  1888. max-width: 400px;
  1889. margin: 0 auto;
  1890. }
  1891. }
  1892. /* EXTRA SMALL */
  1893. .cart .main .inner {
  1894. margin-top: 78px;
  1895. }
  1896.  
  1897. .cart-header {
  1898. border-bottom: 3px solid {{theme.primary_color}};
  1899. font-size: 12px;
  1900. line-height: 20px;
  1901. text-transform: uppercase;
  1902. letter-spacing: 0.09em;
  1903. font-weight: 700;
  1904. overflow: hidden;
  1905. }
  1906.  
  1907. .link-continue,
  1908. .link-checkout {
  1909. display: block;
  1910. height: 20px;
  1911. margin: 20px 0;
  1912. position: relative;
  1913. }
  1914.  
  1915. .link-continue {
  1916. float: left;
  1917. padding-left: 40px;
  1918. }
  1919.  
  1920. .link-checkout {
  1921. float: right;
  1922. padding-right: 40px;
  1923. }
  1924.  
  1925. .icon-arrow-left,
  1926. .icon-arrow-right {
  1927. font-size: 40px;
  1928. line-height: 50px;
  1929. display: block;
  1930. height: 40px;
  1931. width: 40px;
  1932. position: absolute;
  1933. top: 50%;
  1934. margin-top: -20px;
  1935. }
  1936.  
  1937. .icon-arrow-left {
  1938. left: 0;
  1939. }
  1940.  
  1941. .icon-arrow-right {
  1942. right: 0;
  1943. }
  1944.  
  1945. .header-subtotal {
  1946. float: right;
  1947. display: block;
  1948. height: 20px;
  1949. margin: 20px 60px 20px 0;
  1950. }
  1951.  
  1952. .header-subtotal-number {
  1953. display: block;
  1954. float: right;
  1955. font-size: 30px;
  1956. line-height: 1.4em;
  1957. position: relative;
  1958. top: -12px;
  1959. margin-left: 8px;
  1960. }
  1961.  
  1962. .cart-items {
  1963. margin-bottom: 60px;
  1964. }
  1965.  
  1966. .cart-item {
  1967. border-bottom: 3px solid {{theme.primary_color}};
  1968. overflow: hidden;
  1969. width: 100%;
  1970. height: 200px;
  1971. }
  1972.  
  1973. .cart-item-cell {
  1974. float: right;
  1975. height: 100%;
  1976. display: table;
  1977. vertical-align: middle;
  1978. }
  1979.  
  1980. .cart-item-image {
  1981. width: 20%;
  1982. text-align: center;
  1983. background-color: {{theme.accent_color}};
  1984. background-size: cover;
  1985. background-position: center center;
  1986. }
  1987.  
  1988. .cart-item-name {
  1989. width: 36%;
  1990. padding: 0 2%;
  1991. }
  1992.  
  1993. .cart-item-name h3 {
  1994. display: table-cell;
  1995. vertical-align: middle;
  1996. }
  1997.  
  1998. .cart-item-actions {
  1999. display: block;
  2000. width: 20%;
  2001. }
  2002.  
  2003. .cart-item-price {
  2004. width: 20%;
  2005. }
  2006.  
  2007. .cart-item-quantity {
  2008. color: {{theme.primary_color}};
  2009. background: {{theme.accent_color}};
  2010. height: 50%;
  2011. }
  2012.  
  2013. .cart .quantity-controls {
  2014. width: 30%;
  2015. float: left;
  2016. height: 100%;
  2017. border-right: 3px solid {{theme.primary_color}};
  2018. -moz-box-sizing: border-box;
  2019. -webkit-box-sizing: border-box;
  2020. box-sizing: border-box;
  2021. }
  2022.  
  2023. .cart .quantity-decrement,
  2024. .cart .quantity-increment {
  2025. font-size: 20px;
  2026. line-height: 22px;
  2027. width: 101%;
  2028. height: 50%;
  2029. display: table;
  2030. text-align: center;
  2031. -webkit-touch-callout: none;
  2032. -webkit-user-select: none;
  2033. -khtml-user-select: none;
  2034. -moz-user-select: none;
  2035. -ms-user-select: none;
  2036. user-select: none;
  2037. }
  2038.  
  2039. .cart .quantity-increment {
  2040. border-bottom: 3px solid {{theme.primary_color}};
  2041. }
  2042.  
  2043. .cart .quantity-decrement span,
  2044. .cart .quantity-increment span {
  2045. display: table-cell;
  2046. vertical-align: middle;
  2047. }
  2048.  
  2049. .cart .quantity-decrement:hover,
  2050. .cart .quantity-increment:hover {
  2051. background: {{theme.primary_color}};
  2052. color: {{theme.accent_color}};
  2053. cursor: pointer;
  2054. }
  2055.  
  2056. .cart-item-quantity input {
  2057. width: 70%;
  2058. float: left;
  2059. height: 100%;
  2060. font-size: 30px;
  2061. line-height: 40px;
  2062. font-weight: 700;
  2063. text-align: center;
  2064. color: {{theme.primary_color}};
  2065. background: none;
  2066. padding: 0;
  2067. border: none;
  2068. outline: none;
  2069. }
  2070.  
  2071. .cart-item-remove {
  2072. color: {% if theme.accent_color != 'transparent' %} {{ theme.accent_color }} {% else %} #FFFFFF {% endif %};
  2073. background: {{theme.primary_color}};
  2074. width: 100%;
  2075. height: 50%;
  2076. text-align: center;
  2077. display: table;
  2078. cursor: pointer;
  2079. }
  2080.  
  2081. .icon-close {
  2082. display: table-cell;
  2083. vertical-align: middle;
  2084. font-size: 40px;
  2085. position: relative;
  2086. top: 6px;
  2087. }
  2088.  
  2089. .cart-item-price {
  2090. height: 100%;
  2091. background: {{theme.highlight_color}};
  2092. font-size: 30px;
  2093. line-height: 40px;
  2094. font-weight: 700;
  2095. text-align: center;
  2096. display: table;
  2097. }
  2098.  
  2099. .cart-item-price-inner {
  2100. display: table-cell;
  2101. vertical-align: middle;
  2102. }
  2103.  
  2104. .cart-options {
  2105. text-align: center;
  2106. border-bottom: 3px solid {{theme.primary_color}};
  2107. margin-bottom: 60px;
  2108. }
  2109.  
  2110. .cart-options-item {
  2111. float: left;
  2112. width: 30%;
  2113. padding: 0 10%;
  2114. margin-bottom: 60px;
  2115. }
  2116.  
  2117. .cart-one-option .cart-options-item {
  2118. float: none;
  2119. margin: 0 auto 60px;
  2120. }
  2121.  
  2122. .cart-options-item p {
  2123. margin-top: 10px;
  2124. }
  2125.  
  2126. .cart-options-item h3 {
  2127. margin-bottom: 10px;
  2128. }
  2129.  
  2130. .discount-wrap input {
  2131. width: 100%;
  2132. outline: none;
  2133. padding: 15px 100px 15px 15px;
  2134. font-family: "{{theme.text_font}}", sans-serif;
  2135. font-size: 16px;
  2136. color: {{theme.primary_color}};
  2137. border: 3px solid {{theme.primary_color}};
  2138. background: none;
  2139. text-align: center;
  2140. border-radius: 5px;
  2141. margin: 0;
  2142. -moz-box-sizing: border-box;
  2143. -webkit-box-sizing: border-box;
  2144. box-sizing: border-box;
  2145. }
  2146.  
  2147. .discount-wrap input:focus {
  2148. background: {{theme.accent_color}};
  2149. }
  2150.  
  2151. .discount-wrap {
  2152. position: relative;
  2153. }
  2154.  
  2155. .discount-refresh {
  2156. width: 55px;
  2157. height: 12px;
  2158. padding: 21px 15px;
  2159. color: {{theme.background_color}};
  2160. background: {{theme.primary_color}};
  2161. text-transform: uppercase;
  2162. letter-spacing: 0.09em;
  2163. font-size: 12px;
  2164. font-weight: 700;
  2165. position: absolute;
  2166. right: 0;
  2167. top: 0;
  2168. border-top-right-radius: 5px;
  2169. border-bottom-right-radius: 5px;
  2170. cursor: pointer;
  2171. }
  2172.  
  2173. .discount-refresh:hover {
  2174. color: {{theme.highlight_color}};
  2175. }
  2176.  
  2177. .total {
  2178. width: 100%;
  2179. margin-bottom: 30px;
  2180. text-align: center;
  2181. }
  2182.  
  2183. .total h3 {
  2184. font-family: "{{theme.text_font}}", sans-serif;
  2185. font-size: 12px;
  2186. line-height: 20px;
  2187. text-transform: uppercase;
  2188. letter-spacing: 0.09em;
  2189. font-weight: 700;
  2190. }
  2191.  
  2192. .countries-wrap {
  2193. display: block;
  2194. margin: 0 auto;
  2195. height: 55px;
  2196. position: relative;
  2197. z-index: 10;
  2198. }
  2199.  
  2200. .countries {
  2201. border: 3px solid {{theme.primary_color}};
  2202. border-radius: 5px;
  2203. }
  2204.  
  2205. #country {
  2206. display: none;
  2207. }
  2208.  
  2209. .country-selected {
  2210. font-size: 15px;
  2211. line-height: 22px;
  2212. padding: 14px 15px 13px;
  2213. cursor: pointer;
  2214. position: relative;
  2215. }
  2216.  
  2217. .country-selected:hover {
  2218. color: {{theme.background_color}};
  2219. background: {{theme.primary_color}};
  2220. }
  2221.  
  2222. .country-selected-name {
  2223. display: block;
  2224. margin-right: 30px;
  2225. font-size: 16px;
  2226. }
  2227.  
  2228. .country-list {
  2229. background: {{theme.background_color}};
  2230. height: auto;
  2231. max-height: 200px;
  2232. overflow-y: auto;
  2233. -webkit-overflow-scrolling: touch;
  2234. }
  2235.  
  2236. .country-list li {
  2237. display: block;
  2238. padding: 10px;
  2239. cursor: pointer;
  2240. }
  2241.  
  2242. .country-list li:hover {
  2243. background: {{theme.primary_color}};
  2244. color: {{theme.background_color}};
  2245. }
  2246.  
  2247. .countries .dropdown-caret {
  2248. position: absolute;
  2249. top: 50%;
  2250. right: 20px;
  2251. margin-top: -12px;
  2252. text-transform: lowercase;
  2253. font-size: 7px;
  2254. display: block;
  2255. font-weight: 700;
  2256. -moz-transform: scalex(1.5);
  2257. -ms-transform: scalex(1.5);
  2258. -o-transform: scalex(1.5);
  2259. -webkit-transform: scalex(1.5);
  2260. transform: scalex(1.5);
  2261. }
  2262.  
  2263. .cart-btns {
  2264. text-align: center;
  2265. margin-bottom: 60px;
  2266. }
  2267.  
  2268. .cart-btns .btn {
  2269. margin: 0 10px;
  2270. }
  2271.  
  2272. .grand-total {
  2273. display: inline-block;
  2274. padding: 10px 10px 7px;
  2275. background: {{theme.highlight_color}};
  2276. font-size: 50px;
  2277. font-weight: 700;
  2278. margin: 10px 0;
  2279. border-radius: 5px;
  2280. }
  2281.  
  2282. .checkout-placeholder {
  2283. margin-top: 100px;
  2284. }
  2285.  
  2286. .cart .errors {
  2287. margin-bottom: 0;
  2288. border-bottom: 3px solid {{theme.primary_color}};
  2289. border-radius: 0;
  2290. padding: 15px 20%;
  2291. }
  2292.  
  2293. .cart-empty-modal {
  2294. display: none;
  2295. }
  2296.  
  2297. /* LARGE */
  2298. @media only screen and (max-width: 1200px) {
  2299. .cart-options-item {
  2300. width: 44%;
  2301. padding: 0 3%;
  2302. }
  2303.  
  2304. .cart .errors {
  2305. padding: 15px;
  2306. }
  2307.  
  2308. .cart .quantity-decrement:hover,
  2309. .cart .quantity-increment:hover {
  2310. background: {{theme.accent_color}};
  2311. color: {{theme.primary_color}};
  2312. cursor: pointer;
  2313. }
  2314. }
  2315. /* MEDIUM */
  2316. @media only screen and (max-width: 880px) {
  2317. .cart .main .inner {
  2318. margin: 0;
  2319. }
  2320.  
  2321. .cart-item-price {
  2322. font-size: 20px;
  2323. }
  2324. }
  2325. /* SMALL */
  2326. @media only screen and (max-width: 700px) {
  2327. .cart-item {
  2328. height: auto;
  2329. }
  2330.  
  2331. .cart-item-cell {
  2332. float: none;
  2333. height: auto;
  2334. }
  2335.  
  2336. .cart-item-actions {
  2337. height: 100px;
  2338. width: 30%;
  2339. float: left;
  2340. }
  2341.  
  2342. .cart-item-quantity input {
  2343. font-size: 20px;
  2344. }
  2345.  
  2346. .icon-close {
  2347. font-size: 20px;
  2348. top: 2px;
  2349. }
  2350.  
  2351. .icon-close:before {
  2352. content: "d";
  2353. }
  2354.  
  2355. .cart-item-price {
  2356. height: 100px;
  2357. width: 45%;
  2358. float: left;
  2359. }
  2360.  
  2361. .cart-item-image-mobile {
  2362. height: 100px;
  2363. width: 25%;
  2364. float: left;
  2365. background-color: {{theme.accent_color}};
  2366. background-size: cover;
  2367. background-position: center center;
  2368. }
  2369.  
  2370. .cart-item-name {
  2371. width: 100%;
  2372. padding: 20px;
  2373. text-align: center;
  2374. -moz-box-sizing: border-box;
  2375. -webkit-box-sizing: border-box;
  2376. box-sizing: border-box;
  2377. }
  2378.  
  2379. .total {
  2380. width: 80%;
  2381. padding: 0 10%;
  2382. }
  2383.  
  2384. .cart-items,
  2385. .cart-options,
  2386. .cart-btns {
  2387. margin-bottom: 30px;
  2388. }
  2389.  
  2390. .cart-options-item {
  2391. float: none;
  2392. width: 80%;
  2393. padding: 0 10%;
  2394. margin-bottom: 30px;
  2395. }
  2396. }
  2397. /* EXTRA SMALL */
  2398. .contact-form-wrap {
  2399. max-width: 600px;
  2400. margin: 0 auto 80px;
  2401. }
  2402.  
  2403. .contact-row {
  2404. margin-bottom: 20px;
  2405. overflow: hidden;
  2406. }
  2407.  
  2408. .contact-row-centered {
  2409. text-align: center;
  2410. padding-top: 30px;
  2411. }
  2412.  
  2413. .contact-row label {
  2414. margin-bottom: 5px;
  2415. }
  2416.  
  2417. .contact-row-half {
  2418. width: 48%;
  2419. height: 100%;
  2420. float: left;
  2421. position: relative;
  2422. }
  2423.  
  2424. .contact-row .contact-row-half:first-child {
  2425. margin-right: 4%;
  2426. }
  2427.  
  2428. .contact-form-wrap label {
  2429. display: block;
  2430. width: 100%;
  2431. }
  2432.  
  2433. .contact-form-wrap input,
  2434. .contact-form-wrap textarea {
  2435. border: none;
  2436. outline: none;
  2437. padding: 15px;
  2438. width: 100%;
  2439. font-size: 16px;
  2440. background: none;
  2441. border: 3px solid {{theme.primary_color}};
  2442. font-family: "{{theme.text_font}}", sans-serif, sans-serif;
  2443. color: {{theme.primary_color}};
  2444. -moz-box-sizing: border-box;
  2445. -webkit-box-sizing: border-box;
  2446. box-sizing: border-box;
  2447. border-radius: 5px;
  2448. -webkit-appearance: none;
  2449. }
  2450.  
  2451. .contact-form-wrap input:focus,
  2452. .contact-form-wrap textarea:focus {
  2453. background: {{theme.accent_color}};
  2454. }
  2455.  
  2456. .contact-form-wrap textarea {
  2457. height: 100px;
  2458. resize: none;
  2459. }
  2460.  
  2461. .captcha-wrap {
  2462. border: 3px solid {{theme.primary_color}};
  2463. border-radius: 5px;
  2464. height: 52px;
  2465. overflow: hidden;
  2466. }
  2467.  
  2468. .captcha-code {
  2469. width: 125px;
  2470. height: 52px;
  2471. float: left;
  2472. background: #FFFFFF;
  2473. border-right: 3px solid {{theme.primary_color}};
  2474. }
  2475.  
  2476. .captcha-input {
  2477. width: 50%;
  2478. float: left;
  2479. }
  2480.  
  2481. .captcha-input input {
  2482. border: 0px;
  2483. }
  2484.  
  2485. .captcha-wrap.active {
  2486. background: {{theme.accent_color}};
  2487. }
  2488.  
  2489. .captcha-input input {
  2490. border-top: 0px;
  2491. background: none;
  2492. }
  2493.  
  2494. .captcha-input input:focus {
  2495. background: none;
  2496. }
  2497.  
  2498. .contact-form button {
  2499. width: 100%;
  2500. margin-top: 29px;
  2501. }
  2502.  
  2503. /* LARGE */
  2504. /* MEDIUM */
  2505. @media only screen and (max-width: 880px) {
  2506. .contact-form button {
  2507. margin-top: 28px;
  2508. }
  2509. }
  2510. /* SMALL */
  2511. @media only screen and (max-width: 700px) {
  2512. .contact-row-half {
  2513. width: 100%;
  2514. margin: 0;
  2515. }
  2516.  
  2517. .contact-row .contact-row-half:first-child {
  2518. margin-bottom: 20px;
  2519. }
  2520. }
  2521. /* EXTRA SMALL */
  2522. .custom .main .inner {
  2523. max-width: 820px;
  2524. margin: 130px auto 70px;
  2525. }
  2526.  
  2527. /* Message pages */
  2528. .centered-message {
  2529. margin-top: 100px;
  2530. text-align: center;
  2531. }
  2532.  
  2533. .btn-continue {
  2534. margin: 30px auto 0;
  2535. }
  2536.  
  2537. .centered-message h2 {
  2538. margin-bottom: 10px;
  2539. }
  2540.  
  2541. .centered-message .btn {
  2542. margin-top: 30px;
  2543. }
  2544.  
  2545. .centered-message-cart {
  2546. margin-top: 200px;
  2547. }
  2548.  
  2549. .centered-message-cart h1 {
  2550. margin-bottom: 0;
  2551. }
  2552.  
  2553. /* General pages */
  2554. .format-text p {
  2555. margin-bottom: 20px;
  2556. }
  2557.  
  2558. .format-text b,
  2559. .format-text strong {
  2560. font-weight: bold;
  2561. }
  2562.  
  2563. .format-text i,
  2564. .format-text em {
  2565. font-style: italic;
  2566. }
  2567.  
  2568. .format-text ul {
  2569. margin: 0 0 20px 40px;
  2570. }
  2571.  
  2572. .format-text ul li {
  2573. display: list-item;
  2574. list-style: disc;
  2575. }
  2576.  
  2577. .format-text ol {
  2578. margin: 0 0 20px 40px;
  2579. }
  2580.  
  2581. .format-text ol li {
  2582. display: list-item;
  2583. list-style: decimal;
  2584. }
  2585.  
  2586. /* LARGE */
  2587. @media only screen and (max-width: 1200px) {
  2588. .custom .main .inner {
  2589. margin-top: 130px 0 0 0;
  2590. padding: 0 20px 20px 20px;
  2591. }
  2592. }
  2593. /* MEDIUM */
  2594. @media only screen and (max-width: 880px) {
  2595. .custom .main .inner {
  2596. margin: 50px 0 0 0;
  2597. padding: 0 20px 20px 20px;
  2598. }
  2599. }
  2600. /* SMALL */
  2601. @media only screen and (max-width: 700px) {
  2602. /* Message pages */
  2603. .centered-message {
  2604. margin-top: 0;
  2605. }
  2606.  
  2607. .centered-message-cart {
  2608. margin-top: 40px;
  2609. }
  2610. }
  2611. /* EXTRA SMALL */
  2612. /* ------------------------------------------------------------------------------------------------
  2613. *
  2614. * This is where all of the CSS code is handled for your theme.
  2615. *
  2616. * We recommend you break your CSS into multiple files and put them in a separate
  2617. * directory. We've used a "stylesheets" directory in our example below. After that we'll use
  2618. * Sprockets (getsprockets.org) to package them into one file. Sprockets also allows you to
  2619. * use Sass/SCSS (sass-lang.com) by ending your file name with .sass or .scss, and you can also
  2620. * use LESS (lesscss.org) by ending your file with .less.
  2621. *
  2622. * However, if you don't have much CSS, or you're just a glutton for punishment,
  2623. * you could simply put all of your CSS in this file. It's up to you.
  2624. *
  2625. * ------------------------------------------------------------------------------------------------
  2626. */
  2627.  
  2628. /*
  2629. * Here we're including a 3rd-party stylesheet we put in stylesheets/vendor written in normal CSS,
  2630. * as well as a few custom Sass stylesheets we've written for different areas of the store
  2631. *
  2632.  
  2633.  
  2634.  
  2635.  
  2636.  
  2637.  
  2638.  
  2639. *
  2640. */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement