Advertisement
Guest User

Untitled

a guest
Jul 25th, 2016
76
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 54.89 KB | None | 0 0
  1. /*! normalize.css v2.1.0 | MIT License | git.io/normalize */
  2.  
  3. progress,sub,sup{vertical-align:baseline}button,hr,input{overflow:visible}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} figcaption, menu,article,aside,details,figure,footer,header,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0} [hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
  4. * {
  5. -webkit-box-sizing: border-box;
  6. -moz-box-sizing: border-box;
  7. box-sizing: border-box;
  8. }
  9.  
  10. html {
  11. min-height: 100%;
  12. position: relative;
  13. }
  14.  
  15. body {
  16. background: {{ theme.background_color }};
  17. -moz-osx-font-smoothing: grayscale;
  18. -webkit-font-smoothing: antialiased;
  19. color: {{ theme.primary_text_color }};
  20. font-family: {{ theme.secondary_font | font_family }};
  21. font-size: 14px;
  22. line-height: 1;
  23. overflow-y: scroll;
  24. padding-top: 90px;
  25. }
  26. body.has_welcome {
  27. padding-top: 0;
  28. }
  29. body.has_welcome header {
  30. background: transparent;
  31. }
  32. body#cart .footer_cart {
  33. display: none;
  34. }
  35. body#home {
  36. padding-top: 0;
  37. }
  38. body.standalone {
  39. padding: 70px;
  40. text-align: center;
  41. }
  42. body.standalone h1 {
  43. font-size: 22px;
  44. line-height: 1.6em;
  45. }
  46. body.standalone .maintenance_icons {
  47. display: block;
  48. }
  49. body.standalone .maintenance_icons li {
  50. display: inline-block;
  51. }
  52. body.standalone .maintenance_icons li a {
  53. display: block;
  54. padding: 0 10px;
  55. }
  56. @media screen and (max-width: 668px) {
  57. body.standalone .maintenance_icons li a {
  58. padding: 0 6px;
  59. }
  60. }
  61. body.standalone .maintenance_icons li a svg {
  62. -webkit-transition: 0.2s linear;
  63. -moz-transition: 0.2s linear;
  64. -o-transition: 0.2s linear;
  65. transition: 0.2s linear;
  66. fill: {{ theme.primary_text_color }};
  67. height: 30px;
  68. width: 30px;
  69. }
  70. @media screen and (max-width: 668px) {
  71. body.standalone .maintenance_icons li a svg {
  72. height: 26px;
  73. width: 26px;
  74. }
  75. }
  76. body.standalone .maintenance_icons li a:hover svg {
  77. opacity: 0.6;
  78. }
  79.  
  80. header {
  81. *zoom: 1;
  82. -webkit-transition: background 0.3s linear;
  83. -moz-transition: background 0.3s linear;
  84. -o-transition: background 0.3s linear;
  85. transition: background 0.3s linear;
  86. background: {{ theme.header_background_color }};
  87. font-family: {{ theme.primary_font | font_family }};
  88. height: 90px;
  89. left: 0;
  90. margin: 0;
  91. padding: 20px 0;
  92. position: fixed;
  93. right: 0;
  94. top: 0;
  95. z-index: 3;
  96. }
  97. header:after {
  98. content: "";
  99. display: table;
  100. clear: both;
  101. }
  102. @media screen and (max-width: 668px) {
  103. header {
  104. position: absolute;
  105. }
  106. }
  107. header.background_overlay {
  108. background: {{ theme.header_background_color }} !important;
  109. }
  110. header .store_name {
  111. color: {{ theme.header_text_color }};
  112. float: left;
  113. font-size: 20px;
  114. margin-left: 40px;
  115. max-width: 60%;
  116. }
  117. @media screen and (max-width: 800px) {
  118. header .store_name {
  119. margin-left: 20px;
  120. }
  121. }
  122. header .store_name a {
  123. color: {{ theme.header_text_color }};
  124. display: block;
  125. line-height: 1.2em;
  126. }
  127. header .store_name.text {
  128. height: 50px;
  129. }
  130. header .store_name.text a {
  131. -webkit-transform: translateY(-50%);
  132. -moz-transform: translateY(-50%);
  133. -ms-transform: translateY(-50%);
  134. -o-transform: translateY(-50%);
  135. transform: translateY(-50%);
  136. position: relative;
  137. top: 50%;
  138. }
  139. header .store_name.image {
  140. -webkit-transform: translateY(-50%);
  141. -moz-transform: translateY(-50%);
  142. -ms-transform: translateY(-50%);
  143. -o-transform: translateY(-50%);
  144. transform: translateY(-50%);
  145. position: relative;
  146. top: 50%;
  147. }
  148. header .store_name.image a {
  149. height: 50px;
  150. }
  151. header .store_name.image a img {
  152. -webkit-transform: translateY(-50%);
  153. -moz-transform: translateY(-50%);
  154. -ms-transform: translateY(-50%);
  155. -o-transform: translateY(-50%);
  156. transform: translateY(-50%);
  157. position: relative;
  158. top: 50%;
  159. display: block;
  160. height: auto;
  161. max-height: 100%;
  162. max-width: 100%;
  163. width: auto;
  164. }
  165. header .header_icons {
  166. -webkit-transform: translateY(-50%);
  167. -moz-transform: translateY(-50%);
  168. -ms-transform: translateY(-50%);
  169. -o-transform: translateY(-50%);
  170. transform: translateY(-50%);
  171. position: relative;
  172. top: 50%;
  173. height: 30px;
  174. list-style: none;
  175. position: absolute;
  176. right: 40px;
  177. }
  178. @media screen and (max-width: 800px) {
  179. header .header_icons {
  180. right: 20px;
  181. }
  182. }
  183. header .header_icons li {
  184. display: inline-block;
  185. font-size: 0;
  186. height: 30px;
  187. margin-left: 30px;
  188. }
  189. header .header_icons li a {
  190. color: {{ theme.header_text_color }};
  191. display: block;
  192. font-size: 14px;
  193. position: relative;
  194. }
  195. header .header_icons li a svg {
  196. fill: {{ theme.header_text_color }};
  197. height: 30px;
  198. width: 30px;
  199. }
  200. header .header_icons li.open_search a {
  201. top: 1px;
  202. }
  203. header .header_icons li.open_cart {
  204. margin-left: 23px;
  205. }
  206. @media screen and (max-width: 668px) {
  207. header .header_icons li.open_cart {
  208. display: none;
  209. }
  210. }
  211. header .header_icons li.open_menu a {
  212. -webkit-transform: translateY(-50%);
  213. -moz-transform: translateY(-50%);
  214. -ms-transform: translateY(-50%);
  215. -o-transform: translateY(-50%);
  216. transform: translateY(-50%);
  217. position: relative;
  218. top: 50%;
  219. height: 16px;
  220. width: 22px;
  221. }
  222. header .header_icons li.open_menu a span {
  223. -webkit-border-radius: 2px;
  224. -moz-border-radius: 2px;
  225. -ms-border-radius: 2px;
  226. -o-border-radius: 2px;
  227. border-radius: 2px;
  228. -webkit-transform: rotate(0deg);
  229. -moz-transform: rotate(0deg);
  230. -ms-transform: rotate(0deg);
  231. -o-transform: rotate(0deg);
  232. transform: rotate(0deg);
  233. display: block;
  234. background: {{ theme.header_text_color }};
  235. width: 100%;
  236. height: 2px;
  237. position: absolute;
  238. left: 0;
  239. opacity: 1;
  240. }
  241. header .header_icons li.open_menu a span:nth-child(1) {
  242. top: 0px;
  243. }
  244. header .header_icons li.open_menu a span:nth-child(2), header .header_icons li.open_menu a span:nth-child(3) {
  245. top: 50%;
  246. }
  247. header .header_icons li.open_menu a span:nth-child(4) {
  248. top: 99%;
  249. }
  250.  
  251. .cart_count {
  252. position: absolute;
  253. right: -13px;
  254. top: 0;
  255. }
  256. .cart_count .cart_value {
  257. -webkit-border-radius: 3em;
  258. -moz-border-radius: 3em;
  259. -ms-border-radius: 3em;
  260. -o-border-radius: 3em;
  261. border-radius: 3em;
  262. background-color: {{ theme.header_text_color }};
  263. color: {{ theme.header_background_color }};
  264. display: inline-block;
  265. font-family: {{ theme.secondary_font | font_family }};
  266. font-size: 12px;
  267. line-height: 1.3;
  268. padding: 2px 8px;
  269. }
  270.  
  271. a {
  272. color: {{ theme.secondary_text_color }};
  273. text-decoration: none;
  274. }
  275.  
  276. ul, ol {
  277. list-style: none;
  278. margin: 0;
  279. padding: 0;
  280. }
  281.  
  282. button, a.button {
  283. -webkit-transition: 0.2s linear;
  284. -moz-transition: 0.2s linear;
  285. -o-transition: 0.2s linear;
  286. transition: 0.2s linear;
  287. background-color: {{ theme.header_background_color }};
  288. border: none;
  289. color: {{ theme.header_text_color }};
  290. cursor: pointer;
  291. display: inline-block;
  292. font-size: 18px;
  293. height: 60px;
  294. line-height: 60px;
  295. max-width: 300px;
  296. outline: none;
  297. padding: 0;
  298. text-align: center;
  299. width: 100%;
  300. }
  301. button:hover, button:focus, button.active, a.button:hover, a.button:focus, a.button.active {
  302. border: none;
  303. opacity: 0.6;
  304. }
  305.  
  306. .errors {
  307. color: {{ theme.error_text_color }};
  308. margin-bottom: 40px;
  309. text-align: center;
  310. }
  311. .errors li {
  312. line-height: 1.5em;
  313. margin-bottom: 20px;
  314. }
  315.  
  316. .select {
  317. -webkit-transition: 0.2s linear;
  318. -moz-transition: 0.2s linear;
  319. -o-transition: 0.2s linear;
  320. transition: 0.2s linear;
  321. position: relative;
  322. border: 2px solid {{ theme.border_color }};
  323. color: {{ theme.secondary_text_color }};
  324. font-family: {{ theme.secondary_font | font_family }};
  325. height: 60px;
  326. margin-bottom: 20px;
  327. max-width: 300px;
  328. padding: 0;
  329. position: relative;
  330. width: 100%;
  331. }
  332. .select select {
  333. -webkit-transition: 0.2s linear;
  334. -moz-transition: 0.2s linear;
  335. -o-transition: 0.2s linear;
  336. transition: 0.2s linear;
  337. -webkit-appearance: none;
  338. -moz-appearance: none;
  339. appearance: none;
  340. background: none;
  341. border: 0;
  342. color: {{ theme.secondary_text_color }};
  343. font-family: {{ theme.secondary_font | font_family }};
  344. font-size: 14px;
  345. height: 100%;
  346. line-height: 2em;
  347. padding: 0 50px 0 20px;
  348. position: relative;
  349. width: 100%;
  350. z-index: 2;
  351. }
  352. .select select option {
  353. background-color: white;
  354. color: black;
  355. }
  356. .select select:focus {
  357. box-shadow: none;
  358. outline: none;
  359. }
  360. .select select::-ms-expand {
  361. display: none;
  362. }
  363. .select svg {
  364. -webkit-transition: 0.2s linear;
  365. -moz-transition: 0.2s linear;
  366. -o-transition: 0.2s linear;
  367. transition: 0.2s linear;
  368. fill: {{ theme.secondary_text_color }};
  369. height: 8px;
  370. margin-top: -2px;
  371. position: absolute;
  372. right: 20px;
  373. top: 50%;
  374. width: 13px;
  375. z-index: 1;
  376. }
  377. .select:hover {
  378. color: {{ theme.secondary_text_color }};
  379. border-color: {{ theme.secondary_text_color }};
  380. }
  381. .select:hover select {
  382. color: {{ theme.primary_text_color }};
  383. }
  384. .select:hover svg {
  385. fill: {{ theme.primary_text_color }};
  386. }
  387.  
  388. .overlay {
  389. -webkit-transition: opacity 0.2s, visibility 0s;
  390. -webkit-transition-delay: 0s, 0.2s;
  391. -moz-transition: opacity 0.2s, visibility 0s 0.2s;
  392. -o-transition: opacity 0.2s, visibility 0s 0.2s;
  393. transition: opacity 0.2s, visibility 0s 0.2s;
  394. height: 100%;
  395. left: 0;
  396. opacity: 0;
  397. position: fixed;
  398. text-align: center;
  399. top: 0;
  400. visibility: hidden;
  401. width: 100%;
  402. z-index: 5;
  403. }
  404. .overlay.open {
  405. -webkit-transition: opacity 0.4s;
  406. -moz-transition: opacity 0.4s;
  407. -o-transition: opacity 0.4s;
  408. transition: opacity 0.4s;
  409. opacity: 1;
  410. visibility: visible;
  411. }
  412. .overlay .overlay_background {
  413. background: {{ theme.header_background_color }};
  414. bottom: 0;
  415. left: 0;
  416. opacity: 0.95;
  417. position: absolute;
  418. right: 0;
  419. top: 0;
  420. z-index: 5;
  421. }
  422. .overlay .overlay_content {
  423. height: 100%;
  424. overflow-y: scroll;
  425. padding: 90px 0;
  426. }
  427. .overlay .close_overlay {
  428. cursor: pointer;
  429. fill: {{ theme.header_text_color }};
  430. height: 18px;
  431. position: absolute;
  432. right: 42px;
  433. top: 37px;
  434. width: 18px;
  435. z-index: 6;
  436. }
  437. @media screen and (max-width: 668px) {
  438. .overlay .close_overlay {
  439. right: 22px;
  440. }
  441. }
  442. .overlay .page_list {
  443. display: none;
  444. margin: 0 auto;
  445. max-width: 80%;
  446. opacity: 0;
  447. position: relative;
  448. z-index: 6;
  449. visibility: hidden;
  450. }
  451. .overlay .page_list li {
  452. display: block;
  453. }
  454. .overlay .page_list li a {
  455. color: {{ theme.header_text_color }};
  456. display: block;
  457. font-size: 26px;
  458. padding: 15px 0;
  459. }
  460. @media screen and (max-width: 668px) {
  461. .overlay .page_list li a {
  462. font-size: 20px;
  463. }
  464. }
  465. .overlay .search_form {
  466. display: none;
  467. z-index: 6;
  468. }
  469. .overlay.navigation .page_list {
  470. display: block;
  471. -webkit-transition: opacity 0.2s, visibility 0s;
  472. -webkit-transition-delay: 0s, 0.2s;
  473. -moz-transition: opacity 0.2s, visibility 0s 0.2s;
  474. -o-transition: opacity 0.2s, visibility 0s 0.2s;
  475. transition: opacity 0.2s, visibility 0s 0.2s;
  476. opacity: 1;
  477. visibility: visible;
  478. }
  479. .overlay.search .search_form {
  480. display: block;
  481. position: relative;
  482. }
  483. .overlay.search .search_form input {
  484. -webkit-appearance: none;
  485. -moz-appearance: none;
  486. appearance: none;
  487. background: none;
  488. border: none;
  489. font-size: 1.5em;
  490. color: {{ theme.header_text_color }};
  491. display: block;
  492. margin: 0 auto;
  493. padding: 15px;
  494. width: 60%;
  495. }
  496. @media screen and (max-width: 668px) {
  497. .overlay.search .search_form input {
  498. width: 80%;
  499. }
  500. }
  501. .overlay.search .search_form input:focus {
  502. border: none;
  503. color: {{ theme.header_text_color }};
  504. outline: none;
  505. }
  506. .overlay.search .search_form input::-moz-placeholder {
  507. color: {{ theme.header_text_color }};
  508. }
  509. .overlay.search .search_form input::-webkit-input-placeholder {
  510. color: {{ theme.header_text_color }};
  511. }
  512. .overlay.search .search_form input:-ms-input-placeholder {
  513. color: {{ theme.header_text_color }};
  514. }
  515.  
  516. .footer_cart {
  517. bottom: 0;
  518. display: none;
  519. height: 60px;
  520. left: 0;
  521. position: fixed;
  522. text-align: center;
  523. width: 100%;
  524. z-index: 4;
  525. }
  526. @media screen and (max-width: 668px) {
  527. .footer_cart {
  528. display: block;
  529. }
  530. }
  531. .footer_cart .background {
  532. background: {{ theme.header_background_color }};
  533. height: 100%;
  534. left: 0;
  535. opacity: 0.9;
  536. position: absolute;
  537. top: 0;
  538. width: 100%;
  539. }
  540. .footer_cart .open_cart {
  541. -webkit-transform: translateY(-50%);
  542. -moz-transform: translateY(-50%);
  543. -ms-transform: translateY(-50%);
  544. -o-transform: translateY(-50%);
  545. transform: translateY(-50%);
  546. position: relative;
  547. top: 50%;
  548. display: inline-block;
  549. position: relative;
  550. }
  551. .footer_cart .open_cart svg {
  552. fill: {{ theme.header_text_color }};
  553. height: 25px;
  554. width: 25px;
  555. }
  556.  
  557. h1, h2, h3, h4, h5, h6 {
  558. font-family: {{ theme.primary_font | font_family }};
  559. font-weight: normal;
  560. margin: 0;
  561. padding: 0;
  562. }
  563.  
  564. h1 {
  565. font-size: 36px;
  566. margin-bottom: 60px;
  567. }
  568. @media screen and (max-width: 668px) {
  569. h1 {
  570. font-size: 24px;
  571. margin-bottom: 30px;
  572. }
  573. }
  574.  
  575. h2.featured_products {
  576. font-size: 26px;
  577. margin: 0 0 60px;
  578. text-align: center;
  579. }
  580. @media screen and (max-width: 668px) {
  581. h2.featured_products {
  582. margin: 60px 0;
  583. }
  584. }
  585.  
  586. .featured_categories + h2.featured_products {
  587. margin-top: 200px;
  588. }
  589. @media screen and (max-width: 800px) {
  590. .featured_categories + h2.featured_products {
  591. margin-top: 60px;
  592. }
  593. }
  594.  
  595. @-webkit-keyframes welcome-text {
  596. 0% {
  597. opacity: 0;
  598. -webkit-transform: translate3d(0, 10%, 0);
  599. -moz-transform: translate3d(0, 10%, 0);
  600. -ms-transform: translate3d(0, 10%, 0);
  601. -o-transform: translate3d(0, 10%, 0);
  602. transform: translate3d(0, 10%, 0);
  603. }
  604.  
  605. 100% {
  606. -webkit-transform: none;
  607. -moz-transform: none;
  608. -ms-transform: none;
  609. -o-transform: none;
  610. transform: none;
  611. opacity: 1;
  612. }
  613. }
  614.  
  615. @-moz-keyframes welcome-text {
  616. 0% {
  617. opacity: 0;
  618. -webkit-transform: translate3d(0, 10%, 0);
  619. -moz-transform: translate3d(0, 10%, 0);
  620. -ms-transform: translate3d(0, 10%, 0);
  621. -o-transform: translate3d(0, 10%, 0);
  622. transform: translate3d(0, 10%, 0);
  623. }
  624.  
  625. 100% {
  626. -webkit-transform: none;
  627. -moz-transform: none;
  628. -ms-transform: none;
  629. -o-transform: none;
  630. transform: none;
  631. opacity: 1;
  632. }
  633. }
  634.  
  635. @-ms-keyframes welcome-text {
  636. 0% {
  637. opacity: 0;
  638. -webkit-transform: translate3d(0, 10%, 0);
  639. -moz-transform: translate3d(0, 10%, 0);
  640. -ms-transform: translate3d(0, 10%, 0);
  641. -o-transform: translate3d(0, 10%, 0);
  642. transform: translate3d(0, 10%, 0);
  643. }
  644.  
  645. 100% {
  646. -webkit-transform: none;
  647. -moz-transform: none;
  648. -ms-transform: none;
  649. -o-transform: none;
  650. transform: none;
  651. opacity: 1;
  652. }
  653. }
  654.  
  655. @-o-keyframes welcome-text {
  656. 0% {
  657. opacity: 0;
  658. -webkit-transform: translate3d(0, 10%, 0);
  659. -moz-transform: translate3d(0, 10%, 0);
  660. -ms-transform: translate3d(0, 10%, 0);
  661. -o-transform: translate3d(0, 10%, 0);
  662. transform: translate3d(0, 10%, 0);
  663. }
  664.  
  665. 100% {
  666. -webkit-transform: none;
  667. -moz-transform: none;
  668. -ms-transform: none;
  669. -o-transform: none;
  670. transform: none;
  671. opacity: 1;
  672. }
  673. }
  674.  
  675. @keyframes welcome-text {
  676. 0% {
  677. opacity: 0;
  678. -webkit-transform: translate3d(0, 10%, 0);
  679. -moz-transform: translate3d(0, 10%, 0);
  680. -ms-transform: translate3d(0, 10%, 0);
  681. -o-transform: translate3d(0, 10%, 0);
  682. transform: translate3d(0, 10%, 0);
  683. }
  684.  
  685. 100% {
  686. -webkit-transform: none;
  687. -moz-transform: none;
  688. -ms-transform: none;
  689. -o-transform: none;
  690. transform: none;
  691. opacity: 1;
  692. }
  693. }
  694.  
  695. @-webkit-keyframes hide-welcome-text {
  696. 0% {
  697. -webkit-transform: none;
  698. -moz-transform: none;
  699. -ms-transform: none;
  700. -o-transform: none;
  701. transform: none;
  702. opacity: 1;
  703. }
  704.  
  705. 100% {
  706. opacity: 0;
  707. -webkit-transform: translate3d(0, 10%, 0);
  708. -moz-transform: translate3d(0, 10%, 0);
  709. -ms-transform: translate3d(0, 10%, 0);
  710. -o-transform: translate3d(0, 10%, 0);
  711. transform: translate3d(0, 10%, 0);
  712. }
  713. }
  714.  
  715. @-moz-keyframes hide-welcome-text {
  716. 0% {
  717. -webkit-transform: none;
  718. -moz-transform: none;
  719. -ms-transform: none;
  720. -o-transform: none;
  721. transform: none;
  722. opacity: 1;
  723. }
  724.  
  725. 100% {
  726. opacity: 0;
  727. -webkit-transform: translate3d(0, 10%, 0);
  728. -moz-transform: translate3d(0, 10%, 0);
  729. -ms-transform: translate3d(0, 10%, 0);
  730. -o-transform: translate3d(0, 10%, 0);
  731. transform: translate3d(0, 10%, 0);
  732. }
  733. }
  734.  
  735. @-ms-keyframes hide-welcome-text {
  736. 0% {
  737. -webkit-transform: none;
  738. -moz-transform: none;
  739. -ms-transform: none;
  740. -o-transform: none;
  741. transform: none;
  742. opacity: 1;
  743. }
  744.  
  745. 100% {
  746. opacity: 0;
  747. -webkit-transform: translate3d(0, 10%, 0);
  748. -moz-transform: translate3d(0, 10%, 0);
  749. -ms-transform: translate3d(0, 10%, 0);
  750. -o-transform: translate3d(0, 10%, 0);
  751. transform: translate3d(0, 10%, 0);
  752. }
  753. }
  754.  
  755. @-o-keyframes hide-welcome-text {
  756. 0% {
  757. -webkit-transform: none;
  758. -moz-transform: none;
  759. -ms-transform: none;
  760. -o-transform: none;
  761. transform: none;
  762. opacity: 1;
  763. }
  764.  
  765. 100% {
  766. opacity: 0;
  767. -webkit-transform: translate3d(0, 10%, 0);
  768. -moz-transform: translate3d(0, 10%, 0);
  769. -ms-transform: translate3d(0, 10%, 0);
  770. -o-transform: translate3d(0, 10%, 0);
  771. transform: translate3d(0, 10%, 0);
  772. }
  773. }
  774.  
  775. @keyframes hide-welcome-text {
  776. 0% {
  777. -webkit-transform: none;
  778. -moz-transform: none;
  779. -ms-transform: none;
  780. -o-transform: none;
  781. transform: none;
  782. opacity: 1;
  783. }
  784.  
  785. 100% {
  786. opacity: 0;
  787. -webkit-transform: translate3d(0, 10%, 0);
  788. -moz-transform: translate3d(0, 10%, 0);
  789. -ms-transform: translate3d(0, 10%, 0);
  790. -o-transform: translate3d(0, 10%, 0);
  791. transform: translate3d(0, 10%, 0);
  792. }
  793. }
  794.  
  795. .welcome_image {
  796. background-image: {% if theme.images.welcome_image != blank %} url("{{ theme.images.welcome_image.url }}") {% else %} none {% endif %};
  797. background-position: 50% 50%;
  798. background-repeat: no-repeat;
  799. background-attachment: fixed;
  800. background-size: cover;
  801. color: {{ theme.home_image_text_color }};
  802. height: 100vh;
  803. left: 0;
  804. position: relative;
  805. text-align: center;
  806. top: 0;
  807. width: 100%;
  808. }
  809. @media screen and (max-width: 1024px) {
  810. .welcome_image {
  811. background-attachment: scroll;
  812. }
  813. }
  814. .welcome_image .welcome_overlay {
  815. background: {{ theme.home_image_overlay_color }};
  816. bottom: 0;
  817. height: 100%;
  818. left: 0;
  819. opacity: 0.35;
  820. position: absolute;
  821. right: 0;
  822. top: 0;
  823. width: 100%;
  824. }
  825. .welcome_image .welcome_text {
  826. -webkit-transform: translateY(-50%);
  827. -moz-transform: translateY(-50%);
  828. -ms-transform: translateY(-50%);
  829. -o-transform: translateY(-50%);
  830. transform: translateY(-50%);
  831. position: relative;
  832. top: calc(50% - 45px);
  833. -webkit-animation: welcome-text ease-in 900ms forwards;
  834. -moz-animation: welcome-text ease-in 900ms forwards;
  835. -ms-animation: welcome-text ease-in 900ms forwards;
  836. -o-animation: welcome-text ease-in 900ms forwards;
  837. animation: welcome-text ease-in 900ms forwards;
  838. padding: 0 20px;
  839. }
  840. .welcome_image .welcome_text.fade_out {
  841. -webkit-animation: hide-welcome-text ease-in 200ms forwards;
  842. -moz-animation: hide-welcome-text ease-in 200ms forwards;
  843. -ms-animation: hide-welcome-text ease-in 200ms forwards;
  844. -o-animation: hide-welcome-text ease-in 200ms forwards;
  845. animation: hide-welcome-text ease-in 200ms forwards;
  846. }
  847. .welcome_image .welcome_text h1 {
  848. font-size: 60px;
  849. margin-bottom: 20px;
  850. }
  851. @media screen and (max-width: 668px) {
  852. .welcome_image .welcome_text h1 {
  853. font-size: 9vw;
  854. }
  855. }
  856. .welcome_image .welcome_text .welcome_button {
  857. -webkit-transition: opacity 0.2s linear;
  858. -moz-transition: opacity 0.2s linear;
  859. -o-transition: opacity 0.2s linear;
  860. transition: opacity 0.2s linear;
  861. color: {{ theme.home_image_text_color }};
  862. font-size: 18px;
  863. padding: 10px;
  864. }
  865. .welcome_image .welcome_text .welcome_button:hover {
  866. opacity: 0.6;
  867. }
  868.  
  869. section.content {
  870. margin: 0 auto 360px auto;
  871. max-width: 1300px;
  872. padding: 0 20px;
  873. padding-top: 90px;
  874. width: 100%;
  875. }
  876. @media screen and (max-width: 668px) {
  877. section.content {
  878. padding: 60px 20px 40px;
  879. }
  880. }
  881. section.content .custom_page {
  882. color: {{ theme.secondary_text_color }};
  883. line-height: 1.7em;
  884. margin: 0 auto;
  885. max-width: 640px;
  886. overflow-y: auto;
  887. padding: 0 1px;
  888. width: 100%;
  889. }
  890. section.content .custom_page a[href] {
  891. -webkit-transition: 0.2s linear;
  892. -moz-transition: 0.2s linear;
  893. -o-transition: 0.2s linear;
  894. transition: 0.2s linear;
  895. text-decoration: underline;
  896. }
  897. section.content .custom_page a[href]:hover {
  898. opacity: 0.6;
  899. }
  900. section.content .custom_page img {
  901. display: block;
  902. max-width: 100%;
  903. }
  904. section.content .custom_page p {
  905. margin: 0 auto 20px;
  906. }
  907. section.content .custom_page ol, section.content .custom_page ul {
  908. margin: 1em 0;
  909. }
  910. section.content .custom_page ul {
  911. list-style: disc;
  912. list-style-position: inside;
  913. }
  914. section.content .custom_page ol {
  915. list-style: decimal;
  916. list-style-position: inside;
  917. }
  918. section.content.page-contact {
  919. max-width: 500px;
  920. }
  921. section.content.page-product {
  922. *zoom: 1;
  923. max-width: 1200px;
  924. padding-top: 60px;
  925. }
  926. section.content.page-product:after {
  927. content: "";
  928. display: table;
  929. clear: both;
  930. }
  931. @media screen and (max-width: 668px) {
  932. section.content.page-product {
  933. overflow: hidden;
  934. padding-left: 0;
  935. padding-right: 0;
  936. padding-top: 30px;
  937. }
  938. }
  939. section.content.page-product h1 {
  940. font-size: 26px;
  941. font-weight: normal;
  942. line-height: 36px;
  943. margin-bottom: 15px;
  944. text-align: left;
  945. }
  946. section.content.page-product h2 {
  947. color: {{ theme.secondary_text_color }};
  948. font-size: 18px;
  949. }
  950. section.content.page-home {
  951. padding-top: 290px;
  952. }
  953. section.content.page-home.has_welcome {
  954. padding-top: 200px;
  955. }
  956. @media screen and (max-width: 800px) {
  957. section.content.page-home.has_welcome {
  958. padding-top: 30px;
  959. }
  960. }
  961. @media screen and (max-width: 668px) {
  962. section.content.page-home.has_welcome {
  963. padding-top: 100px;
  964. }
  965. section.content.page-home.has_welcome .home_tagline {
  966. margin-bottom: 160px;
  967. }
  968. }
  969. @media screen and (max-width: 800px) {
  970. section.content.page-home {
  971. padding-top: 160px;
  972. }
  973. }
  974. @media screen and (max-width: 668px) {
  975. section.content.page-home {
  976. padding-left: 0;
  977. padding-right: 0;
  978. padding-top: 110px;
  979. }
  980. }
  981. @media screen and (max-width: 668px) {
  982. section.content.page-products {
  983. padding-left: 0;
  984. padding-right: 0;
  985. }
  986. }
  987. section.content h1 {
  988. text-align: center;
  989. }
  990.  
  991. footer.footer {
  992. *zoom: 1;
  993. background: {{ theme.footer_background_color }};
  994. font-family: {{ theme.secondary_font | font_family }};
  995. bottom: 0;
  996. min-height: 120px;
  997. padding: 60px 20px;
  998. position: absolute;
  999. text-align: center;
  1000. width: 100%;
  1001. }
  1002. footer.footer:after {
  1003. content: "";
  1004. display: table;
  1005. clear: both;
  1006. }
  1007. @media screen and (max-width: 668px) {
  1008. footer.footer {
  1009. height: auto;
  1010. margin: 20px 0 0;
  1011. padding-bottom: 120px;
  1012. }
  1013. }
  1014. footer.footer .footer_icons {
  1015. margin: 10px auto;
  1016. }
  1017. footer.footer .footer_icons li {
  1018. display: inline-block;
  1019. font-size: 0;
  1020. margin: 0 10px;
  1021. }
  1022. footer.footer .footer_icons li a {
  1023. color: {{ theme.footer_text_color }};
  1024. display: block;
  1025. font-size: 12px;
  1026. }
  1027. footer.footer .footer_icons li a svg {
  1028. -webkit-transition: 0.2s linear;
  1029. -moz-transition: 0.2s linear;
  1030. -o-transition: 0.2s linear;
  1031. transition: 0.2s linear;
  1032. fill: {{ theme.footer_icon_color }};
  1033. height: 30px;
  1034. width: 30px;
  1035. }
  1036. footer.footer .footer_icons li a:hover svg {
  1037. opacity: 0.6;
  1038. }
  1039. footer.footer .footer_pages {
  1040. font-size: 0;
  1041. margin: 10px auto;
  1042. max-width: 640px;
  1043. text-align: center;
  1044. width: 100%;
  1045. }
  1046. footer.footer .footer_pages li {
  1047. display: inline-block;
  1048. }
  1049. @media screen and (max-width: 668px) {
  1050. footer.footer .footer_pages li {
  1051. display: block;
  1052. }
  1053. }
  1054. footer.footer .footer_pages li a {
  1055. -webkit-transition: 0.2s linear;
  1056. -moz-transition: 0.2s linear;
  1057. -o-transition: 0.2s linear;
  1058. transition: 0.2s linear;
  1059. color: {{ theme.footer_text_color }};
  1060. display: block;
  1061. font-size: 14px;
  1062. padding: 10px;
  1063. }
  1064. footer.footer .footer_pages li a:hover {
  1065. opacity: 0.6;
  1066. }
  1067. footer.footer .footer_credit {
  1068. color: {{ theme.footer_text_color }};
  1069. font-size: 12px;
  1070. margin-top: 14px;
  1071. }
  1072. footer.footer .footer_credit .credit a {
  1073. color: {{ theme.footer_text_color }};
  1074. }
  1075. @media screen and (max-width: 800px) {
  1076. footer.footer .footer_credit .credit {
  1077. display: block;
  1078. margin-top: 20px;
  1079. }
  1080. }
  1081.  
  1082. .home_tagline {
  1083. color: {{ theme.secondary_text_color }};
  1084. font-family: {{ theme.secondary_font | font_family }};
  1085. font-size: 26px;
  1086. line-height: 1.3em;
  1087. margin: 0 auto 200px;
  1088. max-width: 680px;
  1089. padding: 0 20px;
  1090. text-align: center;
  1091. width: 100%;
  1092. }
  1093. @media screen and (max-width: 800px) {
  1094. .home_tagline {
  1095. margin: 90px auto 120px;
  1096. }
  1097. }
  1098. @media screen and (max-width: 668px) {
  1099. .home_tagline {
  1100. margin: 60px auto;
  1101. }
  1102. }
  1103.  
  1104. .mini_cart {
  1105. -webkit-box-shadow: 0 2px 10px 0 {{ theme.secondary_text_color }};
  1106. -moz-box-shadow: 0 2px 10px 0 {{ theme.secondary_text_color }};
  1107. box-shadow: 0 2px 10px 0 {{ theme.secondary_text_color }};
  1108. background: {{ theme.background_color }};
  1109. height: 430px;
  1110. display: none;
  1111. position: fixed;
  1112. margin: 0;
  1113. max-width: 380px;
  1114. right: 40px;
  1115. top: 90px;
  1116. width: 380px;
  1117. z-index: 4;
  1118. }
  1119. @media screen and (max-width: 668px) {
  1120. .mini_cart {
  1121. display: none !important;
  1122. }
  1123. }
  1124. .mini_cart .triangle {
  1125. height: 0;
  1126. border-style: solid;
  1127. border-width: 2px 15px 14px 15px;
  1128. border-color: transparent transparent {{ theme.background_color }} transparent;
  1129. position: absolute;
  1130. right: 57px;
  1131. top: -12px;
  1132. width: 0;
  1133. }
  1134. @media screen and (max-width: 800px) {
  1135. .mini_cart .triangle {
  1136. right: 37px;
  1137. }
  1138. }
  1139. .mini_cart .cart_holder .item_holder {
  1140. height: 277px;
  1141. position: absolute;
  1142. overflow-y: scroll;
  1143. padding: 0 30px;
  1144. padding-top: 30px;
  1145. }
  1146. .mini_cart .cart_holder .item_holder .cart_item {
  1147. *zoom: 1;
  1148. display: block;
  1149. margin-bottom: 20px;
  1150. }
  1151. .mini_cart .cart_holder .item_holder .cart_item:after {
  1152. content: "";
  1153. display: table;
  1154. clear: both;
  1155. }
  1156. .mini_cart .cart_holder .item_holder .cart_item .item_image {
  1157. float: left;
  1158. width: 30%;
  1159. }
  1160. .mini_cart .cart_holder .item_holder .cart_item .item_info {
  1161. color: {{ theme.primary_text_color }};
  1162. float: left;
  1163. font-family: {{ theme.primary_font | font_family }};
  1164. font-size: 18px;
  1165. line-height: 22px;
  1166. padding-left: 20px;
  1167. width: 70%;
  1168. }
  1169. .mini_cart .cart_holder .item_holder .cart_item .item_info > span {
  1170. color: {{ theme.secondary_text_color }};
  1171. display: block;
  1172. font-family: {{ theme.secondary_font | font_family }};
  1173. font-size: 14px;
  1174. line-height: 18px;
  1175. margin-top: 4px;
  1176. }
  1177. .mini_cart .cart_holder .item_holder .cart_item .item_price {
  1178. color: {{ theme.secondary_text_color }};
  1179. font-family: {{ theme.secondary_font | font_family }};
  1180. font-size: 14px;
  1181. margin-top: 2px;
  1182. }
  1183. .mini_cart .cart_holder .cart_footer {
  1184. bottom: 0;
  1185. height: 178px;
  1186. left: 0;
  1187. padding: 30px;
  1188. position: absolute;
  1189. right: 0;
  1190. }
  1191. .mini_cart .cart_holder .cart_footer .item_subtotal {
  1192. *zoom: 1;
  1193. font-size: 18px;
  1194. padding: 20px 0;
  1195. }
  1196. .mini_cart .cart_holder .cart_footer .item_subtotal:after {
  1197. content: "";
  1198. display: table;
  1199. clear: both;
  1200. }
  1201. .mini_cart .cart_holder .cart_footer .item_subtotal > span {
  1202. float: right;
  1203. }
  1204. .mini_cart .cart_holder .cart_footer .button {
  1205. max-width: none;
  1206. width: 100%;
  1207. }
  1208. .mini_cart.empty {
  1209. font-size: 18px;
  1210. height: auto;
  1211. padding: 30px;
  1212. text-align: center;
  1213. }
  1214. .mini_cart.empty .button {
  1215. margin-top: 40px;
  1216. max-width: none;
  1217. }
  1218.  
  1219. .start_shopping_message {
  1220. line-height: 1.5em;
  1221. text-align: center;
  1222. }
  1223. .start_shopping_message p {
  1224. margin: 80px 40px;
  1225. }
  1226. @media screen and (max-width: 668px) {
  1227. .start_shopping_message .button {
  1228. max-width: 100%;
  1229. }
  1230. }
  1231. .category_list {
  1232. margin: 0 auto 60px;
  1233. text-align: center;
  1234. }
  1235. @media screen and (max-width: 668px) {
  1236. .category_list {
  1237. margin-bottom: 40px;
  1238. padding: 0 20px;
  1239. }
  1240. }
  1241. .category_list ul li {
  1242. display: inline-block;
  1243. font-size: 0;
  1244. }
  1245. .category_list ul li.current a {
  1246. color: {{ theme.primary_text_color }};
  1247. }
  1248. .category_list ul li a {
  1249. display: block;
  1250. font-size: 18px;
  1251. line-height: 24px;
  1252. padding: 0 10px 10px;
  1253. }
  1254. @media screen and (max-width: 668px) {
  1255. .category_list ul {
  1256. display: none;
  1257. }
  1258. }
  1259. .category_list .select {
  1260. display: none;
  1261. max-width: 100%;
  1262. }
  1263. @media screen and (max-width: 668px) {
  1264. .category_list .select {
  1265. display: block;
  1266. }
  1267. }
  1268.  
  1269. .featured_categories {
  1270. *zoom: 1;
  1271. font-family: {{ theme.primary_font | font_family }};
  1272. margin: 0 -10px 0;
  1273. }
  1274. .featured_categories:after {
  1275. content: "";
  1276. display: table;
  1277. clear: both;
  1278. }
  1279. @media screen and (max-width: 668px) {
  1280. .featured_categories {
  1281. margin: 0;
  1282. }
  1283. }
  1284. .featured_categories li {
  1285. float: left;
  1286. padding: 10px;
  1287. width: 33.33%;
  1288. }
  1289. @media screen and (max-width: 668px) {
  1290. .featured_categories li {
  1291. padding: 0 0 20px 0;
  1292. width: 100% !important;
  1293. }
  1294. }
  1295. .featured_categories li a {
  1296. display: block;
  1297. overflow: hidden;
  1298. position: relative;
  1299. }
  1300. .featured_categories li a img {
  1301. display: block;
  1302. height: 100%;
  1303. margin: auto;
  1304. }
  1305. .featured_categories li a .category_overlay {
  1306. -webkit-transition: opacity 0.1s linear;
  1307. -moz-transition: opacity 0.1s linear;
  1308. -o-transition: opacity 0.1s linear;
  1309. transition: opacity 0.1s linear;
  1310. -webkit-backface-visibility: hidden;
  1311. background: {{ theme.home_image_overlay_color }};
  1312. bottom: 0;
  1313. height: 100%;
  1314. left: 0;
  1315. opacity: 0.4;
  1316. position: absolute;
  1317. right: 0;
  1318. top: 0;
  1319. width: 100%;
  1320. }
  1321. .featured_categories li a .category_info {
  1322. -webkit-transform: rotate(0) translateY(-50%) translateZ(0);
  1323. -moz-transform: rotate(0) translateY(-50%) translateZ(0);
  1324. -ms-transform: rotate(0) translateY(-50%) translateZ(0);
  1325. -o-transform: rotate(0) translateY(-50%) translateZ(0);
  1326. transform: rotate(0) translateY(-50%) translateZ(0);
  1327. position: relative;
  1328. top: 50%;
  1329. -webkit-backface-visibility: hidden;
  1330. color: {{ theme.home_image_text_color }};
  1331. font-size: 26px;
  1332. line-height: 1.3em;
  1333. padding: 20px;
  1334. text-align: center;
  1335. }
  1336. .featured_categories li a:hover .category_overlay {
  1337. opacity: 0.25;
  1338. }
  1339. .featured_categories.two_categories li {
  1340. width: 50%;
  1341. }
  1342. .featured_categories.three_categories li {
  1343. width: 33.33%;
  1344. }
  1345. .featured_categories.four_categories li {
  1346. width: 50%;
  1347. }
  1348. .featured_categories.five_categories li {
  1349. width: 50%;
  1350. }
  1351. .featured_categories.five_categories li:nth-child(-n+3) {
  1352. width: 33.33%;
  1353. }
  1354. .featured_categories.six_categories li {
  1355. width: 33.33%;
  1356. }
  1357. .featured_categories.seven_categories li {
  1358. width: 50%;
  1359. }
  1360. .featured_categories.seven_categories li:nth-child(n+3):nth-child(-n+5) {
  1361. width: 33.33%;
  1362. }
  1363. .featured_categories.eight_categories li {
  1364. width: 33.33%;
  1365. }
  1366. .featured_categories.eight_categories li:nth-child(n+4):nth-child(-n+5) {
  1367. width: 50%;
  1368. }
  1369. .featured_categories.nine_categories li {
  1370. width: 33.33%;
  1371. }
  1372. .featured_categories.ten_categories li {
  1373. width: 50%;
  1374. }
  1375. .featured_categories.ten_categories li {
  1376. width: 33.333%;
  1377. }
  1378. .featured_categories.ten_categories li:nth-child(n+4) {
  1379. width: 50%;
  1380. }
  1381. .featured_categories.ten_categories li:nth-child(n+6) {
  1382. width: 33.33%;
  1383. }
  1384. .featured_categories.ten_categories li:nth-child(n+9) {
  1385. width: 50%;
  1386. }
  1387.  
  1388. .product_list {
  1389. *zoom: 1;
  1390. display: -webkit-box;
  1391. display: -webkit-flex;
  1392. display: -moz-flex;
  1393. display: -ms-flexbox;
  1394. display: flex;
  1395. -webkit-box-direction: normal;
  1396. -webkit-box-orient: horizontal;
  1397. -webkit-flex-direction: row;
  1398. -moz-flex-direction: row;
  1399. -ms-flex-direction: row;
  1400. flex-direction: row;
  1401. -webkit-flex-wrap: wrap;
  1402. -moz-flex-wrap: wrap;
  1403. -ms-flex-wrap: wrap;
  1404. flex-wrap: wrap;
  1405. font-size: 0;
  1406. margin: 0 -10px 10px;
  1407. padding: 0;
  1408. position: relative;
  1409. text-align: center;
  1410. }
  1411. .product_list:after {
  1412. content: "";
  1413. display: table;
  1414. clear: both;
  1415. }
  1416. @media screen and (max-width: 668px) {
  1417. .product_list {
  1418. margin: 0;
  1419. }
  1420. }
  1421. .product_list.justify_center {
  1422. -webkit-box-pack: center;
  1423. -ms-flex-pack: center;
  1424. -webkit-justify-content: center;
  1425. -moz-justify-content: center;
  1426. justify-content: center;
  1427. }
  1428. @media screen and (max-width: 800px) {
  1429. .product_list.justify_center {
  1430. -webkit-box-pack: start;
  1431. -ms-flex-pack: start;
  1432. -webkit-justify-content: flex-start;
  1433. -moz-justify-content: flex-start;
  1434. justify-content: flex-start;
  1435. }
  1436. }
  1437. .product_list li {
  1438. -webkit-transition: 0.2s linear;
  1439. -moz-transition: 0.2s linear;
  1440. -o-transition: 0.2s linear;
  1441. transition: 0.2s linear;
  1442. display: -webkit-box;
  1443. display: -webkit-flex;
  1444. display: -moz-flex;
  1445. display: -ms-flexbox;
  1446. display: flex;
  1447. padding: 0 10px 40px 10px;
  1448. position: relative;
  1449. vertical-align: top;
  1450. width: 25%;
  1451. }
  1452. @media screen and (max-width: 945px) {
  1453. .product_list li {
  1454. width: 33.33%;
  1455. }
  1456. }
  1457. @media screen and (max-width: 800px) {
  1458. .product_list li {
  1459. padding-bottom: 40px !important;
  1460. width: 50%;
  1461. }
  1462. }
  1463. @media screen and (max-width: 668px) {
  1464. .product_list li {
  1465. padding: 0 0 40px 0;
  1466. width: 100%;
  1467. }
  1468. }
  1469. .product_list li a {
  1470. display: block;
  1471. position: relative;
  1472. text-align: center;
  1473. width: 100%;
  1474. }
  1475. .product_list li a:hover {
  1476. opacity: 1;
  1477. }
  1478. .product_list li a img {
  1479. -webkit-transition: 0.2s linear;
  1480. -moz-transition: 0.2s linear;
  1481. -o-transition: 0.2s linear;
  1482. transition: 0.2s linear;
  1483. display: block;
  1484. height: auto;
  1485. max-width: 100%;
  1486. position: relative;
  1487. width: 100%;
  1488. z-index: 1;
  1489. }
  1490. .product_list li a .product_details {
  1491. -webkit-transition: 0.3s linear;
  1492. -moz-transition: 0.3s linear;
  1493. -o-transition: 0.3s linear;
  1494. transition: 0.3s linear;
  1495. color: {{ theme.primary_text_color }};
  1496. padding-top: 30px;
  1497. position: relative;
  1498. text-align: center;
  1499. width: 100%;
  1500. z-index: 2;
  1501. }
  1502. .product_list li a .product_details .details_background {
  1503. background: {{ theme.background_color }};
  1504. height: 100%;
  1505. opacity: 0.9;
  1506. position: absolute;
  1507. top: 0;
  1508. width: 100%;
  1509. }
  1510. .product_list li a .product_details .product_name {
  1511. font-family: {{ theme.primary_font | font_family }};
  1512. font-size: 18px;
  1513. line-height: 22px;
  1514. margin: 0;
  1515. padding: 0 20px;
  1516. position: relative;
  1517. }
  1518. .product_list li a .product_details .product_status {
  1519. color: {{ theme.secondary_text_color }};
  1520. font-size: 10px;
  1521. letter-spacing: 1px;
  1522. position: absolute;
  1523. text-transform: uppercase;
  1524. top: 12px;
  1525. width: 100%;
  1526. }
  1527. .product_list li a .product_details .product_price {
  1528. color: {{ theme.secondary_text_color }};
  1529. font-size: 14px;
  1530. margin: 10px 0 0;
  1531. position: relative;
  1532. }
  1533. @media screen and (max-width: 668px) {
  1534. .product_list li a .product_details {
  1535. bottom: auto;
  1536. opacity: 1;
  1537. position: relative;
  1538. }
  1539. .product_list li a .product_details .product_name {
  1540. font-size: 18px;
  1541. padding: 0 20px;
  1542. margin: 0;
  1543. }
  1544. .product_list li a .product_details .product_price {
  1545. font-size: 14px;
  1546. }
  1547. }
  1548. .product_list li.sold img {
  1549. opacity: 0.5;
  1550. }
  1551. .product_list li.sold .product_price {
  1552. text-decoration: line-through;
  1553. }
  1554. .product_list li.show_overlay {
  1555. padding-bottom: 20px;
  1556. }
  1557. .product_list li.show_overlay > a {
  1558. overflow: hidden;
  1559. }
  1560. @media screen and (min-width: 800px) {
  1561. .product_list li.show_overlay .product_details {
  1562. bottom: -150px;
  1563. opacity: 0;
  1564. padding: 30px 0;
  1565. position: absolute;
  1566. }
  1567. }
  1568. @media screen and (min-width: 800px) {
  1569. .product_list li.show_overlay:hover .product_details {
  1570. opacity: 1;
  1571. bottom: 0;
  1572. }
  1573. }
  1574. @media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  1575. .product_list li.show_overlay .product_details {
  1576. bottom: auto;
  1577. opacity: 1;
  1578. position: relative;
  1579. }
  1580. .product_list li.show_overlay .product_details .product_name {
  1581. font-size: 18px;
  1582. padding: 0 10px 0 10px;
  1583. margin: 0;
  1584. }
  1585. .product_list li.show_overlay .product_details .product_price {
  1586. font-size: 14px;
  1587. }
  1588. }
  1589.  
  1590. .no-flexbox .product_list li {
  1591. display: inline-block;
  1592. }
  1593.  
  1594. .featured_categories + .product_list {
  1595. margin-top: 80px;
  1596. }
  1597.  
  1598. .pagination {
  1599. *zoom: 1;
  1600. font-size: 0;
  1601. line-height: 60px;
  1602. margin: 0 auto;
  1603. max-width: 800px;
  1604. padding-top: 40px;
  1605. text-align: center;
  1606. width: 100%;
  1607. }
  1608. .pagination:after {
  1609. content: "";
  1610. display: table;
  1611. clear: both;
  1612. }
  1613. @media screen and (max-width: 668px) {
  1614. .pagination {
  1615. line-height: 40px;
  1616. max-width: 100%;
  1617. }
  1618. }
  1619. .pagination span, .pagination a {
  1620. display: inline-block;
  1621. font-size: 18px;
  1622. height: 60px;
  1623. line-height: 60px;
  1624. text-align: center;
  1625. width: 60px;
  1626. }
  1627. @media screen and (max-width: 800px) {
  1628. .pagination span, .pagination a {
  1629. font-size: 16px;
  1630. height: 44px;
  1631. line-height: 44px;
  1632. width: 44px;
  1633. }
  1634. }
  1635. @media screen and (max-width: 668px) {
  1636. .pagination span, .pagination a {
  1637. font-size: 14px;
  1638. height: 40px;
  1639. line-height: 40px;
  1640. width: 40px;
  1641. }
  1642. }
  1643. .pagination span i, .pagination a i {
  1644. font-size: 12px;
  1645. position: relative;
  1646. }
  1647. .pagination .current {
  1648. background: {{ theme.header_background_color }};
  1649. color: {{ theme.header_text_color }};
  1650. }
  1651. .pagination .previous svg, .pagination .next svg {
  1652. -webkit-transition: 0.2s linear;
  1653. -moz-transition: 0.2s linear;
  1654. -o-transition: 0.2s linear;
  1655. transition: 0.2s linear;
  1656. fill: {{ theme.secondary_text_color }};
  1657. height: 24px;
  1658. position: relative;
  1659. top: 6px;
  1660. width: 22px;
  1661. }
  1662. .pagination .previous svg {
  1663. -webkit-transform: rotate(90deg);
  1664. -moz-transform: rotate(90deg);
  1665. -ms-transform: rotate(90deg);
  1666. -o-transform: rotate(90deg);
  1667. transform: rotate(90deg);
  1668. }
  1669. .pagination .next svg {
  1670. -webkit-transform: rotate(-90deg);
  1671. -moz-transform: rotate(-90deg);
  1672. -ms-transform: rotate(-90deg);
  1673. -o-transform: rotate(-90deg);
  1674. transform: rotate(-90deg);
  1675. }
  1676. .pagination .disabled {
  1677. display: none;
  1678. }
  1679.  
  1680. .no_products {
  1681. text-align: center;
  1682. }
  1683. .previous_next {
  1684. *zoom: 1;
  1685. font-size: 12px;
  1686. margin-bottom: 60px;
  1687. }
  1688. .previous_next:after {
  1689. content: "";
  1690. display: table;
  1691. clear: both;
  1692. }
  1693. @media screen and (max-width: 668px) {
  1694. .previous_next {
  1695. margin-bottom: 30px;
  1696. padding-left: 20px;
  1697. padding-right: 20px;
  1698. }
  1699. }
  1700. .previous_next .previous_product {
  1701. float: left;
  1702. }
  1703. .previous_next .previous_product svg {
  1704. -webkit-transform: rotate(90deg);
  1705. -moz-transform: rotate(90deg);
  1706. -ms-transform: rotate(90deg);
  1707. -o-transform: rotate(90deg);
  1708. transform: rotate(90deg);
  1709. }
  1710. .previous_next .next_product {
  1711. float: right;
  1712. }
  1713. .previous_next .next_product svg {
  1714. -webkit-transform: rotate(-90deg);
  1715. -moz-transform: rotate(-90deg);
  1716. -ms-transform: rotate(-90deg);
  1717. -o-transform: rotate(-90deg);
  1718. transform: rotate(-90deg);
  1719. }
  1720. .previous_next a {
  1721. display: block;
  1722. position: relative;
  1723. }
  1724. .previous_next a svg {
  1725. display: inline-block;
  1726. fill: {{ theme.secondary_text_color }};
  1727. height: 10px;
  1728. position: relative;
  1729. top: 1px;
  1730. width: 10px;
  1731. }
  1732.  
  1733. .product_images {
  1734. float: left;
  1735. max-width: 50%;
  1736. width: 100%;
  1737. }
  1738. @media screen and (max-width: 668px) {
  1739. .product_images {
  1740. float: none;
  1741. max-width: 100%;
  1742. }
  1743. }
  1744. .product_images a {
  1745. display: block;
  1746. outline: none;
  1747. }
  1748. .product_images .primary_image {
  1749. display: block;
  1750. width: 100%;
  1751. }
  1752. .product_images .product_thumbnails {
  1753. *zoom: 1;
  1754. font-size: 0;
  1755. margin: 2px -1px 0 -1px;
  1756. padding: 0;
  1757. text-align: center;
  1758. }
  1759. .product_images .product_thumbnails:after {
  1760. content: "";
  1761. display: table;
  1762. clear: both;
  1763. }
  1764. @media screen and (max-width: 668px) {
  1765. .product_images .product_thumbnails {
  1766. margin: 2px 1px;
  1767. }
  1768. }
  1769. .product_images .product_thumbnails li {
  1770. display: inline-block;
  1771. padding: 0 1px;
  1772. vertical-align: top;
  1773. width: 20%;
  1774. }
  1775. .product_images .product_thumbnails li img {
  1776. -webkit-transition: opacity 0.02s linear;
  1777. -moz-transition: opacity 0.02s linear;
  1778. -o-transition: opacity 0.02s linear;
  1779. transition: opacity 0.02s linear;
  1780. display: block;
  1781. width: 100%;
  1782. }
  1783. .product_images .product_thumbnails li.active img {
  1784. opacity: 0.5;
  1785. }
  1786.  
  1787. .product_detail {
  1788. -webkit-transition: 0.2s linear;
  1789. -moz-transition: 0.2s linear;
  1790. -o-transition: 0.2s linear;
  1791. transition: 0.2s linear;
  1792. float: left;
  1793. max-width: 50%;
  1794. padding-left: 8%;
  1795. width: 100%;
  1796. }
  1797. .product_detail h2 {
  1798. font-family: {{ theme.secondary_font | font_family }};
  1799. }
  1800. @media screen and (max-width: 1200px) {
  1801. .product_detail {
  1802. padding-left: 5%;
  1803. }
  1804. }
  1805. @media screen and (max-width: 668px) {
  1806. .product_detail {
  1807. float: none;
  1808. margin-top: 40px;
  1809. max-width: 100%;
  1810. padding-left: 20px;
  1811. padding-right: 20px;
  1812. }
  1813. }
  1814. .product_detail .product_description {
  1815. color: {{ theme.secondary_text_color }};
  1816. font-size: 14px;
  1817. line-height: 1.6em;
  1818. margin-top: 40px;
  1819. }
  1820. .product_detail .product_description ol, .product_detail .product_description ul {
  1821. margin: 1em 0;
  1822. }
  1823. .product_detail .product_description ul {
  1824. list-style: disc;
  1825. list-style-position: inside;
  1826. }
  1827. .product_detail .product_description ol {
  1828. list-style: decimal;
  1829. list-style-position: inside;
  1830. }
  1831. .product_detail .product_description a[href] {
  1832. -webkit-transition: 0.2s linear;
  1833. -moz-transition: 0.2s linear;
  1834. -o-transition: 0.2s linear;
  1835. transition: 0.2s linear;
  1836. text-decoration: underline;
  1837. }
  1838. .product_detail .product_description a[href]:hover {
  1839. opacity: 0.6;
  1840. }
  1841. .product_detail .product_form {
  1842. margin-top: 40px;
  1843. }
  1844. .product_detail .product_form .errors {
  1845. font-size: 12px;
  1846. line-height: 20px;
  1847. margin-bottom: 20px;
  1848. text-align: left;
  1849. }
  1850. @media screen and (max-width: 800px) {
  1851. .product_detail .product_form .select, .product_detail .product_form button {
  1852. max-width: 100%;
  1853. }
  1854. }
  1855. .product_detail .product_form #quantity {
  1856. display: none;
  1857. }
  1858.  
  1859. .share_buttons {
  1860. margin-top: 40px;
  1861. }
  1862. @media screen and (max-width: 668px) {
  1863. .share_buttons {
  1864. text-align: center;
  1865. }
  1866. }
  1867. .share_buttons li {
  1868. display: inline-block;
  1869. margin-right: 20px;
  1870. position: relative;
  1871. }
  1872. @media screen and (max-width: 668px) {
  1873. .share_buttons li {
  1874. margin: 0 10px;
  1875. }
  1876. }
  1877. .share_buttons li a {
  1878. cursor: pointer;
  1879. display: block;
  1880. }
  1881. .share_buttons li a svg {
  1882. -webkit-transition: 0.2s linear;
  1883. -moz-transition: 0.2s linear;
  1884. -o-transition: 0.2s linear;
  1885. transition: 0.2s linear;
  1886. fill: {{ theme.secondary_text_color }};
  1887. height: 24px;
  1888. width: 24px;
  1889. }
  1890. .share_buttons li a:hover svg {
  1891. opacity: 0.6;
  1892. }
  1893. .share_buttons li.social_pinterest a {
  1894. display: inline-block;
  1895. position: relative;
  1896. }
  1897. .share_buttons li.social_pinterest a:after {
  1898. content: "";
  1899. position: absolute;
  1900. top: 0;
  1901. right: 0;
  1902. bottom: 0;
  1903. left: 0;
  1904. }
  1905.  
  1906. .facebook_popup_holder {
  1907. -webkit-transform: translateX(-50%);
  1908. -moz-transform: translateX(-50%);
  1909. -ms-transform: translateX(-50%);
  1910. -o-transform: translateX(-50%);
  1911. transform: translateX(-50%);
  1912. bottom: 200%;
  1913. display: none;
  1914. left: 50%;
  1915. position: absolute;
  1916. z-index: 1;
  1917. }
  1918.  
  1919. .facebook_popup {
  1920. -webkit-border-radius: 2px;
  1921. -moz-border-radius: 2px;
  1922. -ms-border-radius: 2px;
  1923. -o-border-radius: 2px;
  1924. border-radius: 2px;
  1925. -webkit-box-shadow: 0px 0px 1px 1px {{ theme.secondary_text_color }};
  1926. -moz-box-shadow: 0px 0px 1px 1px {{ theme.secondary_text_color }};
  1927. box-shadow: 0px 0px 1px 1px {{ theme.secondary_text_color }};
  1928. background-color: {{ theme.background_color }};
  1929. padding: 10px;
  1930. position: relative;
  1931. }
  1932.  
  1933. .facebook_popup:after {
  1934. -webkit-box-shadow: -1px 1px 1px 0 {{ theme.secondary_text_color }};
  1935. -moz-box-shadow: -1px 1px 1px 0 {{ theme.secondary_text_color }};
  1936. box-shadow: -1px 1px 1px 0 {{ theme.secondary_text_color }};
  1937. -webkit-transform: rotate(-45deg);
  1938. -moz-transform: rotate(-45deg);
  1939. -ms-transform: rotate(-45deg);
  1940. -o-transform: rotate(-45deg);
  1941. transform: rotate(-45deg);
  1942. -webkit-transform-origin: 0 0 50%;
  1943. -moz-transform-origin: 0 0 50%;
  1944. -ms-transform-origin: 0 0 50%;
  1945. -o-transform-origin: 0 0 50%;
  1946. transform-origin: 0 0 50%;
  1947. border: 10px solid black;
  1948. border-color: transparent transparent {{ theme.background_color }} {{ theme.background_color }};
  1949. bottom: -10px;
  1950. content: "";
  1951. height: 0;
  1952. left: 44%;
  1953. margin-left: -3px;
  1954. position: absolute;
  1955. width: 0;
  1956. }
  1957. #cart .cart_holder {
  1958. display: none;
  1959. }
  1960.  
  1961. #cart footer {
  1962. padding-bottom: 60px;
  1963. }
  1964.  
  1965. .cart_form {
  1966. *zoom: 1;
  1967. margin: 0 auto;
  1968. max-width: 1200px;
  1969. }
  1970. .cart_form:after {
  1971. content: "";
  1972. display: table;
  1973. clear: both;
  1974. }
  1975. .cart_form .errors {
  1976. margin: 0 auto 40px auto;
  1977. max-width: 540px;
  1978. width: 100%;
  1979. }
  1980.  
  1981. .cart_items {
  1982. float: left;
  1983. max-width: 60%;
  1984. width: 100%;
  1985. }
  1986. @media screen and (max-width: 1200px) {
  1987. .cart_items {
  1988. max-width: 65%;
  1989. }
  1990. }
  1991. @media screen and (max-width: 945px) {
  1992. .cart_items {
  1993. max-width: 60%;
  1994. }
  1995. }
  1996. @media screen and (max-width: 668px) {
  1997. .cart_items {
  1998. float: none;
  1999. max-width: 100%;
  2000. }
  2001. }
  2002. .cart_items li {
  2003. *zoom: 1;
  2004. font-size: 14px;
  2005. line-height: 15px;
  2006. padding-bottom: 40px;
  2007. }
  2008. .cart_items li:after {
  2009. content: "";
  2010. display: table;
  2011. clear: both;
  2012. }
  2013. .cart_items li a.item_image {
  2014. float: left;
  2015. height: 100%;
  2016. max-width: 40%;
  2017. text-align: center;
  2018. width: 100%;
  2019. }
  2020. @media screen and (max-width: 800px) {
  2021. .cart_items li a.item_image {
  2022. max-width: 35%;
  2023. }
  2024. }
  2025. .cart_items li a.item_image img {
  2026. display: block;
  2027. height: auto;
  2028. margin: 0 auto;
  2029. width: 100%;
  2030. }
  2031. .cart_items li .item_details {
  2032. font-family: {{ theme.primary_font | font_family }};
  2033. float: left;
  2034. max-width: 500px;
  2035. padding: 0 40px;
  2036. width: auto;
  2037. }
  2038. @media screen and (max-width: 945px) {
  2039. .cart_items li .item_details {
  2040. padding-left: 20px;
  2041. }
  2042. }
  2043. @media screen and (max-width: 668px) {
  2044. .cart_items li .item_details {
  2045. padding-right: 0;
  2046. }
  2047. }
  2048. .cart_items li .item_details a {
  2049. color: {{ theme.primary_text_color }};
  2050. display: block;
  2051. font-size: 26px;
  2052. line-height: 36px;
  2053. }
  2054. @media screen and (max-width: 945px) {
  2055. .cart_items li .item_details a {
  2056. font-size: 18px;
  2057. line-height: 26px;
  2058. }
  2059. }
  2060. .cart_items li .item_details a > span {
  2061. color: {{ theme.secondary_text_color }};
  2062. display: block;
  2063. font-family: {{ theme.secondary_font | font_family }};
  2064. font-size: 18px;
  2065. line-height: 26px;
  2066. margin-top: 6px;
  2067. }
  2068. @media screen and (max-width: 945px) {
  2069. .cart_items li .item_details a > span {
  2070. font-size: 14px;
  2071. line-height: 22px;
  2072. }
  2073. }
  2074. .cart_items li .qty_holder {
  2075. *zoom: 1;
  2076. margin-top: 20px;
  2077. }
  2078. .cart_items li .qty_holder:after {
  2079. content: "";
  2080. display: table;
  2081. clear: both;
  2082. }
  2083. .cart_items li .qty_holder button {
  2084. -webkit-border-radius: 3ex;
  2085. -moz-border-radius: 3ex;
  2086. -ms-border-radius: 3ex;
  2087. -o-border-radius: 3ex;
  2088. border-radius: 3ex;
  2089. -webkit-transform: translateZ(0px);
  2090. -moz-transform: translateZ(0px);
  2091. -ms-transform: translateZ(0px);
  2092. -o-transform: translateZ(0px);
  2093. transform: translateZ(0px);
  2094. background: none;
  2095. border: 2px solid {{ theme.border_color }};
  2096. color: {{ theme.secondary_text_color }};
  2097. float: left;
  2098. height: 40px;
  2099. line-height: normal;
  2100. width: 40px;
  2101. }
  2102. @media screen and (max-width: 668px) {
  2103. .cart_items li .qty_holder button {
  2104. height: 36px;
  2105. width: 36px;
  2106. }
  2107. }
  2108. .cart_items li .qty_holder button svg {
  2109. fill: {{ theme.secondary_text_color }};
  2110. height: 20px;
  2111. position: relative;
  2112. top: 2px;
  2113. width: 20px;
  2114. }
  2115. @media screen and (max-width: 668px) {
  2116. .cart_items li .qty_holder button svg {
  2117. height: 18px;
  2118. width: 18px;
  2119. }
  2120. }
  2121. .cart_items li .qty_holder input {
  2122. -webkit-appearance: none;
  2123. -moz-appearance: none;
  2124. appearance: none;
  2125. background: none;
  2126. border: none;
  2127. color: {{ theme.secondary_text_color }};
  2128. float: left;
  2129. font-size: 15px;
  2130. height: 40px;
  2131. text-align: center;
  2132. width: 60px;
  2133. }
  2134. @media screen and (max-width: 668px) {
  2135. .cart_items li .qty_holder input {
  2136. font-size: 14px;
  2137. height: 36px;
  2138. width: 56px;
  2139. }
  2140. }
  2141. .cart_items li .qty_holder input:focus {
  2142. box-shadow: none;
  2143. outline: none;
  2144. }
  2145.  
  2146. .flexbox .cart_items li {
  2147. display: -webkit-box;
  2148. display: -webkit-flex;
  2149. display: -moz-flex;
  2150. display: -ms-flexbox;
  2151. display: flex;
  2152. -webkit-box-align: center;
  2153. -ms-flex-align: center;
  2154. -webkit-align-items: center;
  2155. -moz-align-items: center;
  2156. align-items: center;
  2157. }
  2158.  
  2159. .cart_info {
  2160. border: 2px solid {{ theme.border_color }};
  2161. color: {{ theme.secondary_text_color }};
  2162. float: right;
  2163. max-width: 30%;
  2164. padding: 45px 40px 20px 40px;
  2165. position: -webkit-sticky;
  2166. position: sticky;
  2167. text-align: center;
  2168. top: 110px;
  2169. width: 100%;
  2170. }
  2171. @media screen and (max-width: 1200px) {
  2172. .cart_info {
  2173. max-width: 35%;
  2174. }
  2175. }
  2176. @media screen and (max-width: 945px) {
  2177. .cart_info {
  2178. max-width: 40%;
  2179. padding: 40px 35px 25px 35px;
  2180. }
  2181. }
  2182. @media screen and (max-width: 668px) {
  2183. .cart_info {
  2184. border: none;
  2185. float: none;
  2186. max-width: 100%;
  2187. padding: 40px 0 0;
  2188. }
  2189. }
  2190. .cart_info h3, .cart_info h4 {
  2191. margin-bottom: 20px;
  2192. text-align: left;
  2193. }
  2194. .cart_info h3 > span, .cart_info h4 > span {
  2195. float: right;
  2196. }
  2197. .cart_info h3 {
  2198. color: {{ theme.primary_text_color }};
  2199. font-size: 26px;
  2200. }
  2201. @media screen and (max-width: 800px) {
  2202. .cart_info h3 {
  2203. font-size: 18px;
  2204. }
  2205. }
  2206. @media screen and (max-width: 668px) {
  2207. .cart_info h3 {
  2208. font-size: 26px;
  2209. }
  2210. }
  2211. .cart_info h4 {
  2212. font-size: 13px;
  2213. }
  2214. .cart_info button, .cart_info .button {
  2215. max-width: 100%;
  2216. }
  2217. @media screen and (max-width: 800px) {
  2218. .cart_info button, .cart_info .button {
  2219. font-size: 16px;
  2220. }
  2221. }
  2222. @media screen and (max-width: 668px) {
  2223. .cart_info button, .cart_info .button {
  2224. font-size: 18px;
  2225. }
  2226. }
  2227. .cart_info .continue_shopping {
  2228. background: none;
  2229. color: {{ theme.secondary_text_color }};
  2230. font-size: 12px;
  2231. margin-top: 20px;
  2232. }
  2233. .cart_info .cart_shipping .select {
  2234. max-width: 100%;
  2235. }
  2236. .cart_info .cart_discounts {
  2237. border: 2px solid {{ theme.border_color }};
  2238. font-size: 14px;
  2239. height: 60px;
  2240. line-height: 56px;
  2241. margin-bottom: 40px;
  2242. padding: 0 10px;
  2243. text-align: left;
  2244. }
  2245. .cart_info .cart_discounts input {
  2246. -webkit-appearance: none;
  2247. -moz-appearance: none;
  2248. appearance: none;
  2249. -webkit-border-radius: 0;
  2250. -moz-border-radius: 0;
  2251. -ms-border-radius: 0;
  2252. -o-border-radius: 0;
  2253. border-radius: 0;
  2254. background: none;
  2255. border: none;
  2256. font-size: 14px;
  2257. height: 56px;
  2258. line-height: 56px;
  2259. text-align: left;
  2260. width: 240px;
  2261. }
  2262. .cart_info .cart_discounts input::-ms-clear {
  2263. height: 0;
  2264. width: 0;
  2265. }
  2266. .cart_info .cart_discounts input:active, .cart_info .cart_discounts input:focus {
  2267. outline: none;
  2268. }
  2269. .cart_info .cart_discounts .cancel_discount {
  2270. float: right;
  2271. margin-top: 10px;
  2272. }
  2273. .cart_info .cart_discounts .cancel_discount svg {
  2274. fill: {{ theme.secondary_text_color }};
  2275. height: 20px;
  2276. width: 20px;
  2277. }
  2278.  
  2279. .cart_empty_message {
  2280. text-align: center;
  2281. }
  2282. .cart_empty_message p {
  2283. margin: 80px 0;
  2284. }
  2285. .cart_empty_message svg {
  2286. fill: {{ theme.secondary_text_color }};
  2287. height: 40px;
  2288. width: 40px;
  2289. }
  2290. .contact_form > div {
  2291. margin-bottom: 20px;
  2292. text-align: left;
  2293. }
  2294. @media screen and (max-width: 668px) {
  2295. .contact_form > div {
  2296. margin-bottom: 15px;
  2297. }
  2298. }
  2299. @media screen and (max-width: 668px) {
  2300. .contact_form .contact_send {
  2301. text-align: center;
  2302. }
  2303. .contact_form .contact_send button {
  2304. margin-left: 0;
  2305. }
  2306. }
  2307. .contact_form input {
  2308. height: 56px;
  2309. }
  2310. .contact_form input, .contact_form textarea {
  2311. -webkit-transition: 0.2s linear;
  2312. -moz-transition: 0.2s linear;
  2313. -o-transition: 0.2s linear;
  2314. transition: 0.2s linear;
  2315. -webkit-appearance: none;
  2316. -moz-appearance: none;
  2317. appearance: none;
  2318. -webkit-border-radius: 0;
  2319. -moz-border-radius: 0;
  2320. -ms-border-radius: 0;
  2321. -o-border-radius: 0;
  2322. border-radius: 0;
  2323. border: 2px solid {{ theme.border_color }};
  2324. font-size: 16px;
  2325. padding: 14px;
  2326. width: 100%;
  2327. }
  2328. .contact_form input:active, .contact_form input:focus, .contact_form textarea:active, .contact_form textarea:focus {
  2329. border: 2px solid {{ theme.primary_text_color }};
  2330. outline: none;
  2331. }
  2332. .contact_form textarea {
  2333. height: 260px;
  2334. }
  2335. .contact_form label {
  2336. display: block;
  2337. font-size: 14px;
  2338. margin-bottom: 10px;
  2339. }
  2340. .contact_form .contact_name, .contact_form .contact_spam, .contact_form .contact_send, .contact_form .contact_email {
  2341. display: block;
  2342. position: relative;
  2343. width: 100%;
  2344. }
  2345. .contact_form .contact_spam {
  2346. width: 100%;
  2347. }
  2348. .contact_form .contact_spam span {
  2349. display: block;
  2350. font-size: 12px;
  2351. margin-top: 5px;
  2352. }
  2353. .contact_form .contact_spam .captcha_holder {
  2354. position: relative;
  2355. }
  2356. .contact_form #captcha:active #captcha_image, .contact_form #captcha:focus #captcha_image {
  2357. border-left: 2px solid {{ theme.border_color }};
  2358. }
  2359. .contact_form #captcha_image {
  2360. position: absolute;
  2361. right: 2px;
  2362. border-left: 2px solid {{ theme.border_color }};
  2363. height: 52px;
  2364. top: 2px;
  2365. }
  2366. .contact_form .contact_send {
  2367. text-align: center;
  2368. width: 100%;
  2369. }
  2370. @media screen and (max-width: 668px) {
  2371. .contact_form .contact_send {
  2372. text-align: center;
  2373. }
  2374. }
  2375. .contact_form .contact_send button {
  2376. margin: 30px auto;
  2377. width: 300px;
  2378. }
  2379. @media screen and (max-width: 668px) {
  2380. .contact_form .contact_send button {
  2381. max-width: 100%;
  2382. width: 100%;
  2383. }
  2384. }
  2385.  
  2386. .message_sent {
  2387. line-height: 1.3em;
  2388. text-align: center;
  2389. }
  2390. /*
  2391.  
  2392.  
  2393.  
  2394.  
  2395.  
  2396.  
  2397. */
  2398.  
  2399. /*============================================================
  2400. Custom Styles - add and override styles below.
  2401. ============================================================*/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement