API tools faq
paste
deTunicos

Untitled

deTunicos
Jul 21st, 2017
76
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 61.26 KB | None | 0 0
raw download clone embed print report
  1. /* Browser Resets */
  2.  
  3. .flex-container a:active,
  4. .flexslider a:active,
  5. .flex-container a:focus,
  6. .flexslider a:focus  {outline: none;}
  7. .slides,
  8. .flex-control-nav,
  9. .flex-direction-nav {margin: 0; padding: 0; list-style: none;}
  10.  
  11. /* FlexSlider Necessary Styles
  12. *********************************/
  13. .flexslider {margin: 0; padding: 0;}
  14. .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
  15. .flexslider .slides img {width: 100%; display: block;}
  16. .flex-pauseplay span {text-transform: capitalize;}
  17.  
  18. /* Clearfix for the .slides element */
  19. .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
  20. html[xmlns] .slides {display: block;}
  21. * html .slides {height: 1%;}
  22.  
  23. /* No JavaScript Fallback */
  24. /* If you are not using another script, such as Modernizr, make sure you
  25.  * include js that eliminates this class on page load */
  26. .no-js .slides > li:first-child {display: block;}
  27.  
  28.  
  29. /* FlexSlider Default Theme
  30. *********************************/
  31. .flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
  32. .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; -webkit-perspective: 1000; -webkit-backface-visibility: hidden;}
  33. .loading .flex-viewport {max-height: 300px;}
  34. .flexslider .slides {zoom: 1;}
  35.  
  36. .carousel li {margin-right: 5px}
  37.  
  38.  
  39. /* Direction Nav */
  40. .flex-direction-nav a { width: 24px; height: 39px; margin: -20px 0 0; display: block; background: no-repeat 0 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAnCAYAAABJ0cukAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAptJREFUeNrUmU9kHFEcxz+xLMsSlugSHZYSQgk9hSWnVCqEkFMIOYVU6Cnk1FMIPZUQSuiplBBKCKWEsIRQciohhBJCKCWE4fXyrT7bmdmZ2fdmJo89ZOb35/t9L++93+87I8YYHvXwQKALBBHPA71zi90xgWXgAbgGWtbzlp49yKaSBNaAELgCOhHvO3oXyrZSBN4ABvgBjCfYjcvGyKcSBN4K0HdgLIX9mGyNfEsl8E5AesBoBr9R+RjFKIXABwH4BjRz+DflaxSrMAI14JMSfwEaQ6xgQzGMYtZ8E6gDh0r4WX8PO+rWhBxmiZmVQAM4VqL9rLOVYlX3Fftr2lXNQqAJnCrBrsfC4L1ynKbZV2kJtIBzBd4uoLrZVq7zvts8F4E2cKGAmwWWaJvKeSEMuQgEwKUCrZdQZ64p92VMcZhI4JmKrxBYKbFYXhGGa2FKReA5cKPKcbECFf+isNwIWyKBF8AdcA/MVahtmROmO2GMJNAFfuvXpXrjP3w2gSdiGAKvKtxAvhTGe+Bp/wq81q6/itv1JY9A2IywRu6BZTH8CUxUCPyEMIV2Sxp3Ci1o198CUxUAPxV3KibdA7PWrp8uEfy0dSrOZr2Ju8Av7fqZEsDPDDoV09RC9r0wXyD4+ahzP281Omn9Dy4VAH7JunknXfUDHas2WvUIftWqfTquO7LA0nQ2PIDfsLSlVPdQnp64bWk6Ww7Bb1naUtu3KtECzpRwx2EHdjaoA3OpCzWBEwc98q5inOTRloYVtmyV4mNGlaImH6MYubQlF9JiHTgQkIOUmk5dmlIWH28E+mfzaMBsNmSTZ9W8Efg79kjWSm0tdM9FQh9faHb4p1b3f6HpOTy5vBFAEsxCTH3jVJ4xxjDy2L9S/hkA7Q6LJ2/HMdgAAAAASUVORK5CYII=); position: absolute !important; top: 50%; cursor: pointer; text-indent: -9999px; opacity: .5; -webkit-transition: all .3s ease; border: none !important;}
  41. .flex-direction-nav a:hover { opacity: .8; }
  42. .flex-direction-nav .flex-next {background-position: 100% 0; right: -50px; }
  43. .flex-direction-nav .flex-prev {left: -50px;}
  44. .flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
  45. .flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
  46. .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
  47. .flex-direction-nav .disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
  48.  
  49. /* Control Nav */
  50. .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
  51. .flex-control-nav li {margin: 0 3px !important; display: inline-block; zoom: 1; *display: inline;}
  52. .flex-control-paging li a { border: none; width: 6px; height: 6px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
  53. .flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
  54. .flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
  55.  
  56. .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
  57. .flex-control-thumbs li {width: 25%; float: left; margin: 0;}
  58. .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
  59. .flex-control-thumbs img:hover {opacity: 1;}
  60. .flex-control-thumbs .active {opacity: 1; cursor: default;}
  61.  
  62. @media screen and (max-width: 860px) {
  63.   .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  64.   .flex-direction-nav .flex-next {opacity: 1; right: 0;}
  65. }
  66. .slides img { opacity:0; }
  67. /**** Isotope Filtering ****/
  68.  
  69.  
  70. .isotope-item {
  71.   z-index: 2;
  72. }
  73.  
  74. .isotope-hidden.isotope-item {
  75.   pointer-events: none;
  76.   z-index: 1;
  77. }
  78.  
  79. /**** Isotope CSS3 transitions ****/
  80.  
  81. .isotope,
  82. .isotope .isotope-item {
  83.   -webkit-transition-duration: 0.8s;
  84.      -moz-transition-duration: 0.8s;
  85.       -ms-transition-duration: 0.8s;
  86.        -o-transition-duration: 0.8s;
  87.           transition-duration: 0.8s;
  88. }
  89.  
  90. .isotope {
  91.   -webkit-transition-property: height, width;
  92.      -moz-transition-property: height, width;
  93.       -ms-transition-property: height, width;
  94.        -o-transition-property: height, width;
  95.           transition-property: height, width;
  96. }
  97.  
  98. .isotope .isotope-item {
  99.   -webkit-transition-property: -webkit-transform, opacity;
  100.      -moz-transition-property:    -moz-transform, opacity;
  101.       -ms-transition-property:     -ms-transform, opacity;
  102.        -o-transition-property:      -o-transform, opacity;
  103.           transition-property:         transform, opacity;
  104. }
  105.  
  106. /**** disabling Isotope CSS3 transitions ****/
  107.  
  108. .isotope.no-transition,
  109. .isotope.no-transition .isotope-item,
  110. .isotope .isotope-item.no-transition {
  111.   -webkit-transition-duration: 0s;
  112.      -moz-transition-duration: 0s;
  113.       -ms-transition-duration: 0s;
  114.        -o-transition-duration: 0s;
  115.           transition-duration: 0s;
  116. }
  117. /* --------------------------------------------------------------
  118.   CSS Reset [ Resets default browser styles ]
  119. -------------------------------------------------------------- */
  120.  
  121. /* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126   License: none (public domain) */
  122.  
  123.  
  124. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}table{border-collapse:collapse;border-spacing:0;}
  125.  
  126.  
  127. /*! normalize.css v2.1.0 | MIT License | git.io/normalize */
  128.  
  129. /* ==========================================================================
  130.    HTML5 display definitions
  131.    ========================================================================== */
  132.  
  133. /**
  134.  * Correct `block` display not defined in IE 8/9.
  135.  */
  136.  
  137. article,
  138. aside,
  139. details,
  140. figcaption,
  141. figure,
  142. footer,
  143. header,
  144. hgroup,
  145. main,
  146. nav,
  147. section,
  148. summary {
  149.     display: block;
  150. }
  151.  
  152. /**
  153.  * Correct `inline-block` display not defined in IE 8/9.
  154.  */
  155.  
  156. audio,
  157. canvas,
  158. video {
  159.     display: inline-block;
  160. }
  161.  
  162. /**
  163.  * Prevent modern browsers from displaying `audio` without controls.
  164.  * Remove excess height in iOS 5 devices.
  165.  */
  166.  
  167. audio:not([controls]) {
  168.     display: none;
  169.     height: 0;
  170. }
  171.  
  172. /**
  173.  * Address styling not present in IE 8/9.
  174.  */
  175.  
  176. [hidden] {
  177.     display: none;
  178. }
  179.  
  180. /* ==========================================================================
  181.    Base
  182.    ========================================================================== */
  183.  
  184. /**
  185.  * 1. Set default font family to sans-serif.
  186.  * 2. Prevent iOS text size adjust after orientation change, without disabling
  187.  *    user zoom.
  188.  */
  189.  
  190. html {
  191.     font-family: sans-serif; /* 1 */
  192.     -webkit-text-size-adjust: 100%; /* 2 */
  193.     -ms-text-size-adjust: 100%; /* 2 */
  194. }
  195.  
  196. /**
  197.  * Remove default margin.
  198.  */
  199.  
  200. body {
  201.     margin: 0;
  202. }
  203.  
  204. /* ==========================================================================
  205.    Links
  206.    ========================================================================== */
  207.  
  208. /**
  209.  * Address `outline` inconsistency between Chrome and other browsers.
  210.  */
  211.  
  212. a:focus {
  213.     outline: thin dotted;
  214. }
  215.  
  216. /**
  217.  * Improve readability when focused and also mouse hovered in all browsers.
  218.  */
  219.  
  220. a:active,
  221. a:hover {
  222.     outline: 0;
  223. }
  224.  
  225. /* ==========================================================================
  226.    Typography
  227.    ========================================================================== */
  228.  
  229. /**
  230.  * Address variable `h1` font-size and margin within `section` and `article`
  231.  * contexts in Firefox 4+, Safari 5, and Chrome.
  232.  
  233. h1 {
  234.     font-size: 2em;
  235.     margin: 0.67em 0;
  236. }
  237.  
  238.  */
  239.  
  240. /**
  241.  * Address styling not present in IE 8/9, Safari 5, and Chrome.
  242.  */
  243.  
  244. abbr[title] {
  245.     border-bottom: none;
  246. }
  247.  
  248. /**
  249.  * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
  250.  */
  251.  
  252. b,
  253. strong {
  254.     font-weight: bold;
  255. }
  256.  
  257. /**
  258.  * Address styling not present in Safari 5 and Chrome.
  259.  */
  260.  
  261. dfn {
  262.     font-style: italic;
  263. }
  264.  
  265. /**
  266.  * Address differences between Firefox and other browsers.
  267.  */
  268.  
  269. hr {
  270.     -moz-box-sizing: content-box;
  271.     box-sizing: content-box;
  272.     height: 0;
  273. }
  274.  
  275. /**
  276.  * Address styling not present in IE 8/9.
  277.  */
  278.  
  279. mark {
  280.     background: #ff0;
  281.     color: #000;
  282. }
  283.  
  284. /**
  285.  * Correct font family set oddly in Safari 5 and Chrome.
  286.  */
  287.  
  288. code,
  289. kbd,
  290. pre,
  291. samp {
  292.     font-family: monospace, serif;
  293.     font-size: 1em;
  294. }
  295.  
  296. /**
  297.  * Improve readability of pre-formatted text in all browsers.
  298.  */
  299.  
  300. pre {
  301.     white-space: pre-wrap;
  302. }
  303.  
  304. /**
  305.  * Set consistent quote types.
  306.  */
  307.  
  308. q {
  309.     quotes: "\201C" "\201D" "\2018" "\2019";
  310. }
  311.  
  312. /**
  313.  * Address inconsistent and variable font size in all browsers.
  314.  */
  315.  
  316. small {
  317.     font-size: 80%;
  318. }
  319.  
  320. /**
  321.  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  322.  */
  323.  
  324. sub,
  325. sup {
  326.     font-size: 75%;
  327.     line-height: 0;
  328.     position: relative;
  329.     vertical-align: baseline;
  330. }
  331.  
  332. sup {
  333.     top: -0.5em;
  334. }
  335.  
  336. sub {
  337.     bottom: -0.25em;
  338. }
  339.  
  340. /* ==========================================================================
  341.    Embedded content
  342.    ========================================================================== */
  343.  
  344. /**
  345.  * Remove border when inside `a` element in IE 8/9.
  346.  */
  347.  
  348. img {
  349.     border: 0;
  350. }
  351.  
  352. /**
  353.  * Correct overflow displayed oddly in IE 9.
  354.  */
  355.  
  356. svg:not(:root) {
  357.     overflow: hidden;
  358. }
  359.  
  360. /* ==========================================================================
  361.    Figures
  362.    ========================================================================== */
  363.  
  364. /**
  365.  * Address margin not present in IE 8/9 and Safari 5.
  366.  */
  367.  
  368. figure {
  369.     margin: 0;
  370. }
  371.  
  372. /* ==========================================================================
  373.    Forms
  374.    ========================================================================== */
  375.  
  376. /**
  377.  * Define consistent border, margin, and padding.
  378.  */
  379.  
  380. fieldset {
  381.     border: 1px solid #c0c0c0;
  382.     margin: 0 2px;
  383.     padding: 0.35em 0.625em 0.75em;
  384. }
  385.  
  386. /**
  387.  * 1. Correct `color` not being inherited in IE 8/9.
  388.  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
  389.  */
  390.  
  391. legend {
  392.     border: 0; /* 1 */
  393.     padding: 0; /* 2 */
  394. }
  395.  
  396. /**
  397.  * 1. Correct font family not being inherited in all browsers.
  398.  * 2. Correct font size not being inherited in all browsers.
  399.  * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
  400.  */
  401.  
  402. button,
  403. input,
  404. select,
  405. textarea {
  406.     font-family: inherit; /* 1 */
  407.     font-size: 100%; /* 2 */
  408.     margin: 0; /* 3 */
  409. }
  410.  
  411. /**
  412.  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
  413.  * the UA stylesheet.
  414.  */
  415.  
  416. button,
  417. input {
  418.     line-height: normal;
  419. }
  420.  
  421. /**
  422.  * Address inconsistent `text-transform` inheritance for `button` and `select`.
  423.  * All other form control elements do not inherit `text-transform` values.
  424.  * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
  425.  * Correct `select` style inheritance in Firefox 4+ and Opera.
  426.  */
  427.  
  428. button,
  429. select {
  430.     text-transform: none;
  431. }
  432.  
  433. /**
  434.  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  435.  *    and `video` controls.
  436.  * 2. Correct inability to style clickable `input` types in iOS.
  437.  * 3. Improve usability and consistency of cursor style between image-type
  438.  *    `input` and others.
  439.  */
  440.  
  441. button,
  442. html input[type="button"], /* 1 */
  443. input[type="reset"],
  444. input[type="submit"] {
  445.     -webkit-appearance: button; /* 2 */
  446.     cursor: pointer; /* 3 */
  447. }
  448.  
  449. /**
  450.  * Re-set default cursor for disabled elements.
  451.  */
  452.  
  453. button[disabled],
  454. html input[disabled] {
  455.     cursor: default;
  456. }
  457.  
  458. /**
  459.  * 1. Address box sizing set to `content-box` in IE 8/9.
  460.  * 2. Remove excess padding in IE 8/9.
  461.  */
  462.  
  463. input[type="checkbox"],
  464. input[type="radio"] {
  465.     box-sizing: border-box; /* 1 */
  466.     padding: 0; /* 2 */
  467. }
  468.  
  469. /**
  470.  * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
  471.  * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
  472.  *    (include `-moz` to future-proof).
  473.  */
  474.  
  475. input[type="search"] {
  476.     -webkit-appearance: textfield; /* 1 */
  477.     -moz-box-sizing: content-box;
  478.     -webkit-box-sizing: content-box; /* 2 */
  479.     box-sizing: content-box;
  480. }
  481.  
  482. /**
  483.  * Remove inner padding and search cancel button in Safari 5 and Chrome
  484.  * on OS X.
  485.  */
  486.  
  487. input[type="search"]::-webkit-search-cancel-button,
  488. input[type="search"]::-webkit-search-decoration {
  489.     -webkit-appearance: none;
  490. }
  491.  
  492. /**
  493.  * Remove inner padding and border in Firefox 4+.
  494.  */
  495.  
  496. button::-moz-focus-inner,
  497. input::-moz-focus-inner {
  498.     border: 0;
  499.     padding: 0;
  500. }
  501.  
  502. /**
  503.  * 1. Remove default vertical scrollbar in IE 8/9.
  504.  * 2. Improve readability and alignment in all browsers.
  505.  */
  506.  
  507. textarea {
  508.     overflow: auto; /* 1 */
  509.     vertical-align: top; /* 2 */
  510. }
  511.  
  512. /* ==========================================================================
  513.    Tables
  514.    ========================================================================== */
  515.  
  516. /**
  517.  * Remove most spacing between table cells.
  518.  */
  519.  
  520. table {
  521.     border-collapse: collapse;
  522.     border-spacing: 0;
  523. }
  524. /* --------------------------------------------------------------
  525.   Base styles
  526. -------------------------------------------------------------- */
  527. body {
  528.   font-family: {{ theme.text_font | font_family }};
  529.   font-size: 15px;
  530.   color: {{ theme.text_color }};
  531.   text-rendering: optimizeLegibility;
  532.   -webkit-font-smoothing: antialiased;
  533.   -moz-osx-font-smoothing: grayscale;
  534.   background-color: {{ theme.background_color }};
  535.   background-image: {% if theme.background_image != blank %} url("{{ theme.background_image.url }}") {% else %} none {% endif %};
  536.   background-repeat: repeat;
  537. }
  538.  
  539. ::-moz-selection {
  540.   background: {{ theme.link_color }};
  541.   color: {{ theme.background_color }};
  542. }
  543.  
  544. ::selection {
  545.   background: {{ theme.link_color }};
  546.   color: {{ theme.background_color }};
  547. }
  548.  
  549. p, blockquote, ul, ol, dl {
  550.   margin-bottom: 1.2em;
  551.   line-height: 1.4em;
  552. }
  553.  
  554. h1, h2, h3, h4, h5, h6 {
  555.   margin-bottom: 1.2em;
  556.   line-height: 1.4em;
  557. }
  558.  
  559. strong, b {
  560.   font-weight: bold;
  561. }
  562.  
  563. em, i {
  564.   font-style: italic;
  565. }
  566.  
  567. a,
  568. a:link,
  569. a:visited {
  570.   color: {{ theme.link_color }};
  571.   text-decoration: none;
  572.   outline: none;
  573.   cursor: pointer;
  574. }
  575.  
  576. a:hover,
  577. a:active {
  578.   color: {{ theme.link_hover }};
  579. }
  580.  
  581. a img {
  582.   display: block;
  583.   text-decoration: none;
  584.   border: none;
  585. }
  586.  
  587. img {
  588.   border: none;
  589.   -ms-interpolation-mode: bicubic;
  590. }
  591.  
  592. img,
  593. embed,
  594. object,
  595. video {
  596.   max-width: 100%;
  597. }
  598.  
  599. /* --------------------------------------------------------------
  600.   Elements / Shared
  601. -------------------------------------------------------------- */
  602. button {
  603.   -webkit-font-smoothing: antialiased;
  604.   -moz-osx-font-smoothing: grayscale;
  605. }
  606.  
  607. .button {
  608.   padding: 13px 30px;
  609.   line-height: 1.4em !important;
  610.   margin: 0;
  611.   border: 1px solid {{ theme.border_color }};
  612.   color: {{ theme.text_secondary_color }} !important;
  613.   background: transparent;
  614.   cursor: pointer;
  615.   font-family: {{ theme.text_font | font_family }};
  616.   font-size: 15px;
  617.   text-align: center;
  618.   -webkit-font-smoothing: antialiased;
  619.   -moz-osx-font-smoothing: grayscale;
  620. }
  621.  
  622. .button:hover {
  623.   color: {{ theme.link_hover }} !important;
  624.   border-color: {{ theme.link_hover }};
  625. }
  626.  
  627. .button.disabled:hover {
  628.   cursor: default;
  629. }
  630.  
  631. input,
  632. textarea {
  633.   padding: 10px 8px;
  634.   width: auto;
  635.   font-family: {{ theme.text_font | font_family }};
  636.   background: {{ theme.background_color }};
  637.   outline: none;
  638.   -webkit-font-smoothing: antialiased;
  639.   -moz-osx-font-smoothing: grayscale;
  640. }
  641.  
  642. li:hover textarea,
  643. li:hover input {
  644.   background: {{ theme.background_secondary_color }};
  645. }
  646.  
  647. input:focus,
  648. textarea:focus {
  649.   color: {{ theme.background_color }};
  650.   outline: none;
  651.   background: {{ theme.link_color }} !important;
  652. }
  653.  
  654. label {
  655.   display: block;
  656.   float: left;
  657.   width: 170px;
  658.   padding-right: 30px;
  659.   margin-top: 10px;
  660.   text-align: right;
  661. }
  662.  
  663. ul#error {
  664.   max-width: 550px;
  665.   margin: 20px auto 80px;
  666.   text-align: center;
  667.   color: {{ theme.error_color }};
  668. }
  669.  
  670. ul#error li {
  671.   padding: 14px;
  672.   margin-bottom: 1px;
  673.   background: #fef1f8;
  674. }
  675.  
  676. .message {
  677.   max-width: 500px;
  678.   margin: 110px auto 0;
  679.   padding: 25px 25px;
  680.   text-align: center;
  681. }
  682.  
  683. .message p {
  684.   font-size: 15px;
  685.   margin-bottom: 0;
  686. }
  687.  
  688. #search {
  689.   position: relative;
  690.   margin-right: 10px;
  691. }
  692.  
  693. #search #search-form a {
  694.   position: absolute;
  695.   right: 0;
  696.   color: {{ theme.text_secondary_color }} !important;
  697. }
  698.  
  699. #search #search-form a:hover {
  700.   color: {{ theme.text_color }} !important;
  701. }
  702.  
  703. #search #search-form input {
  704.   visibility: hidden;
  705.   margin: -15px 0 0;
  706.   outline: none;
  707.   opacity: 0;
  708.   color: {{ theme.text_color }};
  709.   background: {{ theme.background_secondary_color }};
  710.   border: none;
  711.   transition: all .2s ease-in;
  712.   border-radius: 3px;
  713. }
  714.  
  715. #search #search-form input:focus {
  716.   color: {{ theme.background_color }};
  717. }
  718.  
  719. #search:hover #search-form a {
  720.   visibility: hidden;
  721. }
  722.  
  723. #search:hover #search-form input {
  724.   visibility: visible;
  725.   opacity: 1;
  726.   transition: all 0 ease-in;
  727. }
  728.  
  729. span.arrow {
  730.   display: inline-block;
  731.   position: relative;
  732.   top: -2px;
  733.   margin-left: 10px;
  734.   width: 0px;
  735.   height: 0px;
  736.   border-style: solid;
  737.   border-width: 5px 5px 0 5px;
  738.   border-color: {{ theme.text_secondary_color }} transparent transparent transparent;
  739. }
  740.  
  741. /* Big Cartel Badge
  742. ------------------------------------------------------------*/
  743. #badge {
  744.   width: 100%;
  745.   margin-top: 20px;
  746. }
  747.  
  748. #badge a {
  749.   display: block;
  750.   margin: 0 auto;
  751.   width: 79px;
  752.   height: 23px;
  753.   border: none;
  754.   text-indent: 100%;
  755.   white-space: nowrap;
  756.   overflow: hidden;
  757.   background: url({{ "bc_badge.png" | theme_image_url }}) no-repeat;
  758. }
  759.  
  760. /* --------------------------------------------------------------
  761.   Structure
  762. -------------------------------------------------------------- */
  763. .canvas {
  764.   width: 80%;
  765.   max-width: 800px;
  766.   min-width: 550px;
  767.   margin: 0 auto 0;
  768. }
  769.  
  770. #home .canvas,
  771. #products_page .canvas,
  772. #product .canvas {
  773.   max-width: 1000px;
  774. }
  775.  
  776. #site_content {
  777.   position: relative;
  778.   min-width: 550px;
  779.   min-height: 60vh;
  780.   margin: 110px auto 130px;
  781.   padding: 0;
  782. }
  783.  
  784. /* --------------------------------------------------------------
  785.   Site Header
  786. -------------------------------------------------------------- */
  787. #site_header {
  788.   position: fixed;
  789.   top: 0;
  790.   z-index: 10;
  791.   width: 100%;
  792.   padding: 25px 0;
  793. }
  794.  
  795. #branding a,
  796. #cart_nav a {
  797.   color: {{ theme.text_color }};
  798. }
  799.  
  800. #branding a:hover,
  801. #cart_nav a:hover {
  802.   color: {{ theme.text_secondary_color }};
  803. }
  804.  
  805. #branding {
  806.   float: left;
  807.   max-width: 50%;
  808.   margin-left: 30px;
  809. }
  810.  
  811. #cart_nav {
  812.   float: right;
  813.   margin-right: 20px;
  814. }
  815.  
  816. #cart_nav #menu {
  817.   display: none;
  818. }
  819.  
  820. #cart_nav li {
  821.   float: left;
  822. }
  823.  
  824. #cart_nav a {
  825.   padding: 0 10px;
  826. }
  827.  
  828. #cart_nav #cart_info span {
  829.   padding-left: 7px;
  830. }
  831.  
  832. #theme_image {
  833.   margin: -20px 0 40px;
  834.   text-align: center;
  835. }
  836.  
  837. #nav_primary {
  838.   position: relative;
  839.   z-index: 11;
  840.   margin: 0 0 70px;
  841.   text-align: center;
  842. }
  843.  
  844. #nav_primary li {
  845.   display: inline-block;
  846. }
  847.  
  848. #nav_primary li a {
  849.   padding: 0 12px;
  850.   color: {{ theme.text_color }};
  851. }
  852.  
  853. #nav_primary li a:hover,
  854. #nav_primary li.selected a {
  855.   color: {{ theme.text_secondary_color }};
  856. }
  857.  
  858. #home #intro .keyline,
  859. #nav_primary .keyline,
  860. #site_footer .keyline {
  861.   clear: both;
  862.   display: block;
  863.   margin: 50px auto 0;
  864.   height: 1px;
  865.   width: 200px;
  866.   background: {{ theme.border_color }};
  867. }
  868.  
  869. /* --------------------------------------------------------------
  870.   Site Footer
  871. -------------------------------------------------------------- */
  872. #site_footer {
  873.   position: relative;
  874.   overflow: hidden;
  875.   opacity: 1;
  876.   width: 100%;
  877.   clear: both;
  878.   padding: 0 0 15px;
  879.   text-align: center;
  880.   transition: all .2s ease-in;
  881. }
  882. #site_footer:hover {
  883.   opacity: 1;
  884. }
  885. #site_footer nav {
  886.   overflow: hidden;
  887. }
  888. #site_footer nav ul {
  889.   margin-bottom: .5em;
  890. }
  891. #site_footer nav ul li {
  892.   display: inline-block;
  893. }
  894. #site_footer nav ul li a {
  895.   display: block;
  896.   padding: 0 12px;
  897.   color: {{ theme.text_color }};
  898. }
  899. #site_footer nav ul li a:hover {
  900.   color: {{ theme.text_secondary_color }};
  901. }
  902. #site_footer nav ul li#search {
  903.   display: none;
  904. }
  905. #site_footer #social_links {
  906.   overflow: hidden;
  907. }
  908. #site_footer #social_links li {
  909.   display: inline-block;
  910. }
  911. #site_footer #social_links li a {
  912.   display: block;
  913.   padding: 0 12px;
  914.   color: {{ theme.text_secondary_color }};
  915. }
  916. #site_footer #social_links li a:hover {
  917.   color: {{ theme.text_color }};
  918. }
  919. #site_footer nav + #social_links {
  920.   margin-bottom: 12px;
  921. }
  922.  
  923. /* --------------------------------------------------------------
  924.   Site Content
  925. -------------------------------------------------------------- */
  926. #content_header {
  927.   margin-top: -25px;
  928.   text-align: center;
  929. }
  930.  
  931. #content_header h1 {
  932.   font-family: {{ theme.header_font | font_family }};
  933.   font-size: 34px;
  934.   color: {{ theme.text_color }};
  935. }
  936.  
  937. /* --------------------------------------------------------------
  938.   Loading Spinner
  939. -------------------------------------------------------------- */
  940. .spinner {
  941.   opacity: .5;
  942.   height: 40px;
  943.   width: 40px;
  944.   position: absolute;
  945.   top: 110px;
  946.   left: 50%;
  947.   margin: 0 auto 0 -20px;
  948.   -webkit-animation: rotation 1s infinite linear;
  949.   -moz-animation: rotation 1s infinite linear;
  950.   -o-animation: rotation 1s infinite linear;
  951.   animation: rotation 1s infinite linear;
  952.   border-left: 2px solid {{ theme.border_color }};
  953.   border-right: 2px solid {{ theme.border_color }};
  954.   border-bottom: 2px solid {{ theme.border_color }};
  955.   border-top: 2px solid {{ theme.text_secondary_color }};
  956.   border-radius: 100%;
  957. }
  958.  
  959. @-webkit-keyframes rotation {
  960.   from {
  961.     -webkit-transform: rotate(0deg);
  962.   }
  963.  
  964.   to {
  965.     -webkit-transform: rotate(359deg);
  966.   }
  967. }
  968.  
  969. @-moz-keyframes rotation {
  970.   from {
  971.     -moz-transform: rotate(0deg);
  972.   }
  973.  
  974.   to {
  975.     -moz-transform: rotate(359deg);
  976.   }
  977. }
  978.  
  979. @-o-keyframes rotation {
  980.   from {
  981.     -o-transform: rotate(0deg);
  982.   }
  983.  
  984.   to {
  985.     -o-transform: rotate(359deg);
  986.   }
  987. }
  988.  
  989. @keyframes rotation {
  990.   from {
  991.     transform: rotate(0deg);
  992.   }
  993.  
  994.   to {
  995.     transform: rotate(359deg);
  996.   }
  997. }
  998.  
  999. /*============================================================
  1000.   Basic Styles - used for the simple controls
  1001. ============================================================*/
  1002. #home #intro {
  1003.   margin: -28px auto 50px;
  1004.   max-width: 660px;
  1005.   font-family: {{ theme.header_font | font_family }};
  1006.   font-size: 30px;
  1007.   color: {{ theme.link_color }};
  1008.   text-align: center;
  1009. }
  1010. #home #intro .keyline {
  1011.   margin-bottom: 70px;
  1012. }
  1013. #home #all_products_btn {
  1014.   margin: 100px auto 0;
  1015.   display: block;
  1016.   width: 198px;
  1017.   padding-left: 0;
  1018.   padding-right: 0;
  1019.   display: block;
  1020. }
  1021. #home #gallery {
  1022.   position: relative;
  1023.   margin-top: -71px;
  1024.   margin-bottom: 150px;
  1025.   z-index: 100;
  1026. }
  1027. #home #gallery .flex-control-nav {
  1028.   bottom: -36px;
  1029. }
  1030. #home #gallery #shop_products {
  1031.   position: absolute;
  1032.   right: 0;
  1033.   bottom: -39px;
  1034. }
  1035.  
  1036. /* --------------------------------------------------------------
  1037.   Product
  1038. -------------------------------------------------------------- */
  1039. #product #site_content {
  1040.   margin-bottom: 0;
  1041. }
  1042. #product h1 {
  1043.   margin-bottom: 29px;
  1044.   line-height: 1.3em;
  1045. }
  1046. #product .product_images {
  1047.   position: relative;
  1048. }
  1049. #product .product_images .flex-control-nav {
  1050.   bottom: -36px;
  1051.   display: block;
  1052. }
  1053. #product .product_info {
  1054.   margin-bottom: 20px;
  1055. }
  1056. #product .product_info .product_price {
  1057.   padding: 15px 0 11px;
  1058. }
  1059. #product .product_info .product_price h3 {
  1060.   position: relative;
  1061.   right: 0;
  1062. }
  1063. #product .product_info .product_price h3.price {
  1064.   position: relative;
  1065.   width: 100%;
  1066.   color: {{ theme.text_color }};
  1067. }
  1068. #product .product_info #product_sharing {
  1069.   float: right;
  1070.   margin-top: -30px;
  1071. }
  1072. #product .product_info #product_sharing a {
  1073.   position: relative;
  1074.   z-index: 100;
  1075.   color: {{ theme.text_secondary_color }};
  1076. }
  1077. #product .product_info #product_sharing a:hover {
  1078.   color: {{ theme.text_color }};
  1079. }
  1080. #product .product_info #product_sharing ul {
  1081.   display: none;
  1082.   position: fixed;
  1083.   z-index: 200;
  1084.   top: 50%;
  1085.   left: 50%;
  1086.   min-width: 400px;
  1087.   padding: 60px 30px 80px;
  1088.   background: {{ theme.link_color }};
  1089.   opacity: .9;
  1090.   -webkit-transform: translate(-50%, -50%);
  1091.   -ms-transform: translate(-50%, -50%);
  1092.   transform: translate(-50%, -50%);
  1093. }
  1094. #product .product_info #product_sharing ul li a {
  1095.   display: block;
  1096.   width: 80%;
  1097.   margin: 0 auto;
  1098.   padding: 18px 0 20px;
  1099.   text-align: center;
  1100.   font-size: 34px;
  1101.   color: #fff;
  1102.   border-top: 1px solid rgba(255, 255, 255, 0.3);
  1103.   transition: background .5s ease-in;
  1104. }
  1105. #product .product_info #product_sharing ul li a:hover {
  1106.   color: #fff;
  1107.   background: rgba(255, 255, 255, 0.3);
  1108.   transition: background 0 ease-in;
  1109. }
  1110. #product .product_info #product_sharing ul li:first-child {
  1111.   padding-bottom: 10px;
  1112. }
  1113. #product .product_info #product_sharing ul li:first-child a {
  1114.   color: rgba(255, 255, 255, 0.7);
  1115.   border: none;
  1116. }
  1117. #product .product_info #product_sharing ul li:first-child a:hover {
  1118.   background: transparent;
  1119.   color: #fff;
  1120. }
  1121. #product .product_info #product_sharing ul li:last-child a {
  1122.   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  1123. }
  1124. #product #page_body {
  1125.   width: 520px;
  1126.   margin: 30px auto 0;
  1127. }
  1128. #product .product_inventory {
  1129.   width: 100%;
  1130.   margin: 24px auto;
  1131.   line-height: 0;
  1132. }
  1133. #product .product_inventory ul {
  1134.   margin-bottom: 0;
  1135. }
  1136. #product .product_inventory ul li {
  1137.   position: relative;
  1138.   overflow: hidden;
  1139.   margin: 0;
  1140.   padding: 10px 0 0;
  1141.   list-style: none;
  1142. }
  1143. #product .product_inventory ul li h3 {
  1144.   margin: 0 0 4px;
  1145.   padding: 0;
  1146.   font-size: 15px;
  1147. }
  1148. #product .product_inventory ul li h3 span {
  1149.   float: right;
  1150.   color: {{ theme.text_secondary_color }};
  1151. }
  1152. #product .product_inventory ul li .bar {
  1153.   z-index: -1;
  1154.   float: left;
  1155.   width: 100%;
  1156.   height: 3px;
  1157.   background: {{ theme.background_secondary_color }};
  1158. }
  1159. #product .product_inventory ul li .bar .fill {
  1160.   background: {{ theme.link_color }};
  1161. }
  1162. #product #pagination {
  1163.   margin: 100px auto;
  1164. }
  1165.  
  1166. #product_options {
  1167.   text-align: center;
  1168. }
  1169. #product_options .button {
  1170.   display: block;
  1171.   margin: 0 auto;
  1172.   width: 200px;
  1173.   border-color: transparent;
  1174.   border-top: 1px solid {{ theme.border_color }};
  1175.   color: {{ theme.link_color }} !important;
  1176. }
  1177. #product_options .button:hover {
  1178.   border: 1px solid {{ theme.link_hover }};
  1179.   color: {{ theme.link_hover }} !important;
  1180. }
  1181. #product_options #option_select {
  1182.   width: 200px;
  1183.   position: relative;
  1184.   display: inline-block;
  1185. }
  1186. #product_options #option_select span {
  1187.   text-decoration: none;
  1188. }
  1189. #product_options #option_select #options_button,
  1190. #product_options #option_select #button_header {
  1191.   padding-right: 0;
  1192.   padding-left: 0;
  1193.   color: {{ theme.link_color }};
  1194. }
  1195. #product_options #option_select #options_button span.arrow {
  1196.   top: -2px;
  1197.   opacity: .8;
  1198.   border-color: {{ theme.link_color }} transparent transparent transparent;
  1199. }
  1200. #product_options #option_select #options_button:hover span.arrow {
  1201.   border-color: {{ theme.link_hover }} transparent transparent transparent;
  1202. }
  1203. #product_options #option_select #button_header {
  1204.   color: {{ theme.text_secondary_color }} !important;
  1205. }
  1206.  
  1207. #options_menu {
  1208.   display: none;
  1209.   position: absolute;
  1210.   z-index: 999;
  1211.   padding-top: 47px;
  1212.   top: 0;
  1213.   width: 200px;
  1214.   text-align: center;
  1215.   text-indent: 0;
  1216.   background: transparent;
  1217.   border-radius: 0;
  1218.   border: 1px solid {{ theme.link_color }};
  1219.   box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
  1220. }
  1221. #options_menu:after {
  1222.   border: none;
  1223. }
  1224. #options_menu li {
  1225.   padding: 8px;
  1226.   cursor: pointer;
  1227.   line-height: 1.2em;
  1228.   color: {{ theme.link_color }};
  1229.   border-radius: 0;
  1230.   background: {{ theme.background_color }};
  1231.   border-top: 1px solid {{ theme.border_color }};
  1232.   border-bottom: 0;
  1233.   transition: background .5s ease-in;
  1234. }
  1235. #options_menu li span.currency_sign:before {
  1236.   content: "/";
  1237.   color: {{ theme.text_secondary_color }} !important;
  1238.   padding-right: 6px;
  1239. }
  1240. #options_menu li:last-child {
  1241.   border-top: 1px solid {{ theme.border_color }};
  1242. }
  1243. #options_menu li:hover {
  1244.   color: {{ theme.link_hover }};
  1245.   background: {{ theme.background_secondary_color }} !important;
  1246.   transition: background 0 ease-in;
  1247. }
  1248.  
  1249. /* --------------------------------------------------------------
  1250.   Home/Products
  1251. -------------------------------------------------------------- */
  1252. .product {
  1253.   position: relative;
  1254.   margin: 0 0 54px;
  1255. }
  1256. .product .flex-viewport {
  1257.   height: 100%;
  1258.   min-height: 300px;
  1259. }
  1260.  
  1261. .product_images {
  1262.   width: 100%;
  1263.   height: 100%;
  1264.   min-height: 300px;
  1265.   margin: 0 0 7px 0;
  1266.   text-align: center;
  1267.   background: transparent;
  1268. }
  1269. .product_images img {
  1270.   max-width: 100%;
  1271. }
  1272. .product_images ul, .product_images li {
  1273.   line-height: 0;
  1274. }
  1275. .product_images.loading li img {
  1276.   visibility: visible;
  1277. }
  1278. .product_images .flex-viewport ul li {
  1279.   cursor: e-resize;
  1280. }
  1281. .product_images .flex-viewport ul li.solo {
  1282.   cursor: default;
  1283. }
  1284. .product_images .flex-control-nav {
  1285.   width: 100%;
  1286.   position: absolute;
  1287.   bottom: 22px;
  1288.   left: -4px;
  1289. }
  1290. .product:hover .product_images .flex-control-nav {
  1291.   display: block;
  1292. }
  1293. .product_images .flex-control-nav li {
  1294.   margin: 3px !important;
  1295.   display: block;
  1296.   *display: block;
  1297.   float: left;
  1298. }
  1299. .product_images .flex-control-nav.flex-control-paging li a {
  1300.   width: 4px;
  1301.   height: 4px;
  1302.   display: block;
  1303.   border: 1px solid {{ theme.text_secondary_color }};
  1304.   opacity: .7;
  1305.   box-shadow: none;
  1306.   background: transparent;
  1307. }
  1308. .product_images .flex-control-nav.flex-control-paging li a:hover {
  1309.   background: {{ theme.text_secondary_color }};
  1310. }
  1311. .product_images .flex-control-nav.flex-control-paging li a.flex-active {
  1312.   margin-top: 1px;
  1313.   cursor: default;
  1314.   border: none;
  1315.   background: {{ theme.text_secondary_color }};
  1316. }
  1317.  
  1318. .product_info {
  1319.   width: 100%;
  1320. }
  1321.  
  1322. .product_price {
  1323.   position: relative;
  1324.   margin-top: 0;
  1325.   text-align: center;
  1326.   line-height: 0;
  1327. }
  1328. .product_price a {
  1329.   display: block;
  1330.   padding: 15px 0;
  1331.   color: {{ theme.text_color }};
  1332. }
  1333. .product_price a:hover {
  1334.   color: {{ theme.text_secondary_color }};
  1335. }
  1336. .product_price h2, .product_price h3 {
  1337.   margin-bottom: 0;
  1338.   display: inline-block;
  1339. }
  1340. .product_price h2 {
  1341.   width: 65%;
  1342.   white-space: nowrap;
  1343.   overflow: hidden;
  1344.   text-overflow: ellipsis;
  1345.   font-family: {{ theme.header_font | font_family }};
  1346. }
  1347. .product_price h3 {
  1348.   position: absolute;
  1349.   right: 0;
  1350.   color: {{ theme.text_secondary_color }};
  1351. }
  1352. .product_price h3 .on_sale {
  1353.   font-family: {{ theme.text_font | font_family }};
  1354.   color: {{ theme.error_color }};
  1355. }
  1356. .sold-out .product_price h3 {
  1357.   color: {{ theme.error_color }};
  1358. }
  1359.  
  1360. #pagination {
  1361.   clear: both;
  1362.   margin: 100px 0 0 0;
  1363.   text-align: center;
  1364. }
  1365. #products_page #pagination {
  1366.   margin-top: 120px;
  1367. }
  1368. #pagination li {
  1369.   display: inline-block;
  1370. }
  1371. #pagination li a.button {
  1372.   position: relative;
  1373.   display: block;
  1374.   width: 120px;
  1375.   padding: 13px 0;
  1376.   color: {{ theme.text_secondary_color }};
  1377. }
  1378. #pagination li a.button:hover {
  1379.   color: {{ theme.link_color }};
  1380.   z-index: 10;
  1381. }
  1382. #pagination li:first-child a.button {
  1383.   position: relative;
  1384.   right: -1px;
  1385. }
  1386.  
  1387. #categories {
  1388.   position: relative;
  1389.   z-index: 100;
  1390.   margin: -71px 0 64px 0;
  1391.   text-align: center;
  1392. }
  1393. #categories a.button {
  1394.   display: inline-block;
  1395.   margin: 0 auto;
  1396.   width: 198px;
  1397.   padding: 18px 0;
  1398. }
  1399. #categories a.button:hover span.arrow {
  1400.   opacity: .8;
  1401.   border-color: {{ theme.link_hover }} transparent transparent transparent;
  1402. }
  1403. #categories #options_menu {
  1404.   z-index: 1000;
  1405.   position: absolute;
  1406.   left: 50%;
  1407.   top: 0;
  1408.   z-index: 999;
  1409.   padding-top: 57px;
  1410.   width: 198px;
  1411.   margin: 0 0 0 -100px;
  1412. }
  1413. #categories #options_menu li {
  1414.   padding: 0;
  1415. }
  1416. #categories #options_menu li a {
  1417.   display: block;
  1418.   padding: 8px 0;
  1419. }
  1420. #categories #options_menu li.selected {
  1421.   display: none;
  1422. }
  1423. #categories #options_menu li.cat_header {
  1424.   padding: 12px 0;
  1425.   color: {{ theme.text_color }};
  1426.   background: {{ theme.background_secondary_color }} !important;
  1427. }
  1428. #categories #options_menu li.cat_header:hover {
  1429.   cursor: default;
  1430.   background: {{ theme.background_secondary_color }} !important;
  1431. }
  1432.  
  1433. #products_page .canvas.grid {
  1434.   width: 92%;
  1435.   max-width: 980px;
  1436. }
  1437. #products_page .canvas.grid #categories {
  1438.   margin-bottom: 74px;
  1439. }
  1440. #products_page .canvas.grid #pagination {
  1441.   margin-top: 30px;
  1442. }
  1443. #products_page .canvas.grid #products {
  1444.   overflow: hidden;
  1445.   width: 100%;
  1446.   text-align: left;
  1447. }
  1448. #products_page .canvas.grid #products #product_list {
  1449.   overflow: hidden;
  1450. }
  1451. #products_page .canvas.grid #products .product {
  1452.   float: left;
  1453.   width: 23.1%;
  1454.   margin: 0 .9% 0 .9%;
  1455. }
  1456. #products_page .canvas.grid #products .product a .product_images {
  1457.   width: 100%;
  1458.   min-height: 100%;
  1459.   margin: 0;
  1460.   background: transparent;
  1461.   background: #efefef;
  1462. }
  1463. #products_page .canvas.grid #products .product a .product_images img {
  1464.   max-width: 100%;
  1465.   max-height: 100%;
  1466.   margin: 0 auto;
  1467. }
  1468. #products_page .canvas.grid #products .product a .product_price {
  1469.   text-align: left;
  1470.   margin-top: 6px;
  1471.   margin-bottom: 15px;
  1472.   text-align: center;
  1473.   opacity: 0;
  1474.   transition: all 0.5s ease;
  1475. }
  1476. #products_page .canvas.grid #products .product a .product_price h2 {
  1477.   width: 100%;
  1478.   margin-bottom: 0;
  1479. }
  1480. #products_page .canvas.grid #products .product a .product_price h3 {
  1481.   position: relative;
  1482.   right: 0;
  1483.   top: 0;
  1484.   float: none;
  1485.   display: block;
  1486.   color: {{ theme.text_secondary_color }};
  1487. }
  1488. #products_page .canvas.grid #products .product a:hover .product_price {
  1489.   opacity: 1;
  1490. }
  1491.  
  1492. /* --------------------------------------------------------------
  1493.   Cart
  1494. -------------------------------------------------------------- */
  1495. #cart #site_content {
  1496.   width: 92%;
  1497.   max-width: 710px;
  1498. }
  1499.  
  1500. #cart_items {
  1501.   margin-top: -15px;
  1502. }
  1503. #cart_items ul {
  1504.   margin-bottom: 0;
  1505. }
  1506. #cart_items ul li {
  1507.   overflow: hidden;
  1508.   padding: 10px 0;
  1509.   transition: background .5s ease-in;
  1510.   border-top: 1px solid {{ theme.border_color }};
  1511. }
  1512. #cart_items ul li.with_option .item_name {
  1513.   margin-top: 8px;
  1514. }
  1515. #cart_items ul li .item_thumb {
  1516.   float: left;
  1517.   width: 10.6%;
  1518.   height: 56px;
  1519.   margin: 0 0 0 6%;
  1520.   text-align: center;
  1521. }
  1522. #cart_items ul li .item_thumb img {
  1523.   position: relative;
  1524.   top: 50%;
  1525.   -webkit-transform: translateY(-50%);
  1526.   -ms-transform: translateY(-50%);
  1527.   transform: translateY(-50%);
  1528.   max-height: 56px;
  1529. }
  1530. #cart_items ul li .item_name {
  1531.   float: left;
  1532.   width: 37%;
  1533.   padding: 0 3% 0 0;
  1534.   margin: 19px 0 0 6%;
  1535. }
  1536. #cart_items ul li .item_name h3, #cart_items ul li .item_name span {
  1537.   margin-bottom: 0;
  1538.   white-space: nowrap;
  1539.   overflow: hidden;
  1540.   text-overflow: ellipsis;
  1541. }
  1542. #cart_items ul li .item_name span {
  1543.   width: 100%;
  1544.   display: inline-block;
  1545.   color: {{ theme.text_secondary_color }};
  1546. }
  1547. #cart_items ul li input {
  1548.   float: left;
  1549.   margin: 11px 0 0;
  1550.   padding: 9px 8px;
  1551.   width: 20px;
  1552.   font-size: 13px;
  1553.   color: {{ theme.text_secondary_color }};
  1554.   text-align: center;
  1555.   border-color: transparent;
  1556.   border-radius: 3px;
  1557. }
  1558. #cart_items ul li input:focus {
  1559.   background: {{ theme.link_color }};
  1560.   box-shadow: none;
  1561.   color: {{ theme.background_color }};
  1562. }
  1563. #cart_items ul li .item_price {
  1564.   float: left;
  1565.   margin: 19px 0 0 3.9%;
  1566.   color: {{ theme.text_color }};
  1567. }
  1568. #cart_items ul li a.remove_item {
  1569.   float: right;
  1570.   margin: 20px 25px 0 0;
  1571.   font-size: 12px;
  1572.   color: {{ theme.link_color }};
  1573.   text-transform: uppercase;
  1574. }
  1575. #cart_items ul li a.remove_item:hover {
  1576.   color: {{ theme.link_hover }};
  1577. }
  1578.  
  1579. .update-btn {
  1580.   float: right;
  1581.   width: auto;
  1582.   margin-top: 15px;
  1583.   text-align: right;
  1584.   text-transform: uppercase;
  1585.   font-size: 12px;
  1586.   padding: 0;
  1587.   margin: 13px 25px 0 0;
  1588.   font-family: {{ theme.text_font | font_family }};
  1589.   color: {{ theme.link_color }};
  1590.   border: none;
  1591.   background: none;
  1592.   cursor: pointer;
  1593. }
  1594. .update-btn:hover {
  1595.   color: {{ theme.link_hover }};
  1596. }
  1597.  
  1598. #cart_options {
  1599.   margin: 0 0 25px;
  1600.   padding: 15px 0 0;
  1601.   border-top: 1px solid {{ theme.border_color }};
  1602. }
  1603. #cart_options li {
  1604.   overflow: hidden;
  1605.   position: relative;
  1606. }
  1607. #cart_options li:first-child {
  1608.   margin-bottom: 15px;
  1609. }
  1610. #cart_options li label {
  1611.   width: 40.1%;
  1612.   padding-right: 4%;
  1613.   color: {{ theme.text_secondary_color }};
  1614. }
  1615. #cart_options li label.not_set {
  1616.   color: {{ theme.error_color }};
  1617. }
  1618. #cart_options li input {
  1619.   float: left;
  1620.   padding: 12px 9px;
  1621.   width: 150px;
  1622.   border: none;
  1623. }
  1624. #cart_options li select {
  1625.   float: left;
  1626.   width: 168px;
  1627.   margin-top: 10px;
  1628. }
  1629. #cart_options li h3 {
  1630.   margin: 10px 0 0 27px;
  1631.   float: left;
  1632. }
  1633. #cart_options li p {
  1634.   float: left;
  1635.   margin-top: 10px;
  1636.   width: 161px;
  1637. }
  1638. #cart_options li#cart-shipping-tax.not_set {
  1639.   margin-bottom: 0;
  1640. }
  1641. #cart_options li#cart-shipping-tax.not_set h3 {
  1642.   margin-left: 0;
  1643. }
  1644. #cart_options li#discount_option {
  1645.   padding-top: 2px;
  1646. }
  1647. #cart_options li#discount_option input {
  1648.   background: {{ theme.background_secondary_color }};
  1649.   margin-top: -2px;
  1650.   border-radius: 3px;
  1651. }
  1652. #cart_options li#discount_option p {
  1653.   margin-bottom: 0;
  1654. }
  1655. #cart_options li#discount_option.solo {
  1656.   margin-top: 10px;
  1657. }
  1658.  
  1659. #cart_total {
  1660.   overflow: hidden;
  1661.   min-height: 70px;
  1662.   margin-top: 0;
  1663.   background: {{ theme.background_secondary_color }};
  1664. }
  1665. #cart_total p {
  1666.   float: left;
  1667.   width: 40%;
  1668.   margin: 28px 0 0 7.5%;
  1669.   font-size: 12px;
  1670.   color: {{ theme.text_secondary_color }};
  1671. }
  1672. #cart_total #total {
  1673.   float: right;
  1674.   width: 40%;
  1675.   margin: 20px 0 0 10%;
  1676. }
  1677. #cart_total #total h2 {
  1678.   float: left;
  1679.   margin: 0 0 0 2.1%;
  1680.   font-size: 22px;
  1681.   color: {{ theme.text_color }};
  1682. }
  1683. #cart_total #total h3 {
  1684.   float: left;
  1685.   margin: 8px 0 0;
  1686.   width: 27%;
  1687.   font-size: 12px;
  1688.   color: {{ theme.text_secondary_color }};
  1689.   text-align: center;
  1690. }
  1691. #cart_total #total .update-btn {
  1692.   margin-top: 10px;
  1693.   margin-right: 25px;
  1694.   text-transform: uppercase;
  1695. }
  1696.  
  1697. #checkout-btn {
  1698.   width: 198px;
  1699.   margin: 40px 0 0 61%;
  1700. }
  1701.  
  1702. #cart_empty {
  1703.   margin-top: 130px;
  1704. }
  1705. #cart_empty a {
  1706.   font-size: 34px;
  1707.   border-bottom: 2px solid {{ theme.link_color }};
  1708. }
  1709. #cart_empty a:hover {
  1710.   border-color: {{ theme.link_hover }};
  1711. }
  1712.  
  1713. /* --------------------------------------------------------------
  1714.   Contact
  1715. -------------------------------------------------------------- */
  1716. #contact #page_body {
  1717.   overflow: hidden;
  1718.   width: 550px;
  1719.   max-width: 550px;
  1720.   min-width: 550px;
  1721.   margin: 0 auto;
  1722. }
  1723.  
  1724. #contact_form {
  1725.   text-align: center;
  1726. }
  1727. #contact_form li {
  1728.   padding: 0;
  1729.   overflow: hidden;
  1730.   list-style-type: none;
  1731.   border-top: 1px solid {{ theme.border_color }};
  1732. }
  1733. #contact_form li label {
  1734.   float: left;
  1735.   width: 100px;
  1736.   margin-top: 12px;
  1737.   padding-bottom: 10px;
  1738.   color: {{ theme.text_secondary_color }};
  1739. }
  1740. #contact_form li input {
  1741.   float: left;
  1742.   width: 404px;
  1743.   padding: 12px 8px 24px;
  1744.   border: none;
  1745.   transition: background .5s ease-in;
  1746. }
  1747. #contact_form li:hover input, #contact_form li:hover textarea {
  1748.   transition: background 0s ease-in;
  1749. }
  1750. #contact_form li textarea {
  1751.   height: 22px;
  1752.   width: 404px;
  1753.   padding: 12px 8px 24px;
  1754.   border: none;
  1755.   transition: height .2s ease-in, background .5s ease-in;
  1756. }
  1757. #contact_form li textarea:focus {
  1758.   height: 150px;
  1759. }
  1760. #contact_form li#captcha_img {
  1761.   overflow: hidden;
  1762. }
  1763. #contact_form li#captcha_img img {
  1764.   width: auto;
  1765.   float: right;
  1766.   height: 34px;
  1767.   margin-top: 10px;
  1768.   padding-bottom: 8px;
  1769.   margin-right: 0;
  1770. }
  1771. #contact_form li#captcha_img input {
  1772.   float: left;
  1773.   width: 319px;
  1774.   margin-left: 0;
  1775. }
  1776. #contact_form button#contact_button {
  1777.   margin: 30px auto;
  1778.   min-width: 198px;
  1779. }
  1780.  
  1781. /* --------------------------------------------------------------
  1782.   Custom / Success / Typography
  1783. -------------------------------------------------------------- */
  1784. #page_body {
  1785.   overflow: hidden;
  1786.   width: 520px;
  1787.   max-width: 520px;
  1788.   min-width: 520px;
  1789.   margin: 0 auto;
  1790. }
  1791. #page_body * {
  1792.   line-height: 1.6em;
  1793. }
  1794. #page_body h1 {
  1795.   margin-top: 1.4em;
  1796.   margin-bottom: .2em;
  1797.   font-size: 28px;
  1798. }
  1799. #page_body h2 {
  1800.   margin-top: 1.4em;
  1801.   margin-bottom: .2em;
  1802.   font-size: 24px;
  1803. }
  1804. #page_body h3 {
  1805.   margin-top: 1.6em;
  1806.   margin-bottom: .2em;
  1807.   font-size: 20px;
  1808. }
  1809. #page_body h4 {
  1810.   margin-top: 1.5em;
  1811.   margin-bottom: .2em;
  1812.   font-size: 18px;
  1813. }
  1814. #page_body h5 {
  1815.   margin-top: 1.6em;
  1816.   margin-bottom: 0;
  1817.   font-size: 16px;
  1818. }
  1819. #page_body h6 {
  1820.   margin-top: 1.6em;
  1821.   margin-bottom: 0;
  1822.   text-decoration: underline;
  1823. }
  1824. #page_body ul, #page_body ol {
  1825.   list-style-position: inside;
  1826. }
  1827. #page_body ul {
  1828.   list-style-type: disc;
  1829. }
  1830. #page_body ol {
  1831.   list-style-type: decimal;
  1832. }
  1833. #page_body blockquote {
  1834.   padding: 1.3em 1em .2em;
  1835.   background: {{ theme.background_secondary_color }};
  1836. }
  1837. #page_body img {
  1838.   width: 100%;
  1839. }
  1840. #page_body hr {
  1841.   border: 0;
  1842.   border-top: 1px solid {{ theme.border_color }};
  1843.   display: block;
  1844.   height: 1px;
  1845.   margin: 1em 0;
  1846. }
  1847. #success #page_body {
  1848.   text-align: center;
  1849. }
  1850. #page_body #entries > li {
  1851.   list-style-type: none;
  1852.   margin-bottom: 4em;
  1853.   border-top: 1px solid {{ theme.border_color }};
  1854. }
  1855. #page_body #entries li {
  1856.   padding-top: 4px;
  1857. }
  1858. #page_body #entries li:first-child {
  1859.   border-top: none;
  1860. }
  1861. #page_body #entries li h2 {
  1862.   margin-bottom: 0;
  1863.   margin-top: .5em;
  1864. }
  1865. #page_body #entries li .blog_date {
  1866.   margin-top: -10px;
  1867. }
  1868. #page_body #entries div img {
  1869.   width: 100%;
  1870. }
  1871. #page_body #entries div p {
  1872.   margin-top: 20px;
  1873. }
  1874. #page_body #entries .blog_date {
  1875.   margin-top: -1px;
  1876.   margin-bottom: 1em;
  1877.   color: {{ theme.text_secondary_color }};
  1878. }
  1879.  
  1880. /*============================================================
  1881.   Responsive styles
  1882. ============================================================*/
  1883. @media screen and (max-width: 900px) {
  1884.   #products_page .canvas.grid #products .product {
  1885.     width: 31.4%;
  1886.     /* 230px*/
  1887.   }
  1888.  
  1889.   #products_page .canvas.grid #products .product .product_price {
  1890.     opacity: 1 !important;
  1891.   }
  1892. }
  1893. @media screen and (max-width: 560px), screen and (max-device-width: 560px) and (orientation: landscape) {
  1894.   body {
  1895.     border: none;
  1896.     padding-bottom: 70px;
  1897.     font-size: 16px !important;
  1898.   }
  1899.  
  1900.   body::before {
  1901.     top: 0;
  1902.   }
  1903.  
  1904.   body::after {
  1905.     bottom: 0;
  1906.   }
  1907.  
  1908.   body::before, body::after {
  1909.     height: 0;
  1910.     background: transparent;
  1911.   }
  1912.  
  1913.   .canvas > * {
  1914.     width: 92% !important;
  1915.     min-width: 290px !important;
  1916.     margin: 0 auto 0;
  1917.   }
  1918.  
  1919.   #products_page .canvas.grid {
  1920.     width: 100%;
  1921.   }
  1922.  
  1923.   #site_content {
  1924.     width: 100%;
  1925.     overflow: hidden;
  1926.     margin-top: 0;
  1927.     margin-bottom: 0;
  1928.     min-height: 40vh;
  1929.     min-width: inherit;
  1930.   }
  1931.  
  1932.   .button {
  1933.     width: 100%;
  1934.     padding: 19px 0 !important;
  1935.     line-height: 1.4em !important;
  1936.     box-sizing: border-box;
  1937.     font-size: 16px;
  1938.     color: {{ theme.link_hover }} !important;
  1939.     border-color: {{ theme.link_hover }} !important;
  1940.   }
  1941.  
  1942.   ul#error {
  1943.     margin: 20px auto 15px;
  1944.   }
  1945.  
  1946.   .message {
  1947.     max-width: 550px;
  1948.     margin: 70px auto 80px;
  1949.     padding: 25px 0;
  1950.     text-align: center;
  1951.     border-top: 0;
  1952.     background: transparent;
  1953.   }
  1954.  
  1955.   .spinner {
  1956.     top: 55px;
  1957.   }
  1958.  
  1959.   #theme_image {
  1960.     margin: 50px 0 35px;
  1961.     width: 100% !important;
  1962.   }
  1963.  
  1964.   /* --------------------------------------------------------------
  1965.     Site Header
  1966.   -------------------------------------------------------------- */
  1967.   #site_header {
  1968.     height: 70px;
  1969.     z-index: 200;
  1970.     padding: 0;
  1971.     bottom: 0;
  1972.     top: auto;
  1973.     opacity: .97;
  1974.     background: {{ theme.background_secondary_color }};
  1975.     border-top: 1px solid {{ theme.border_color }};
  1976.   }
  1977.  
  1978.   #branding {
  1979.     max-width: 50%;
  1980.     width: 50%;
  1981.     margin: 25px 0 0 15px;
  1982.   }
  1983.   #branding.wrap {
  1984.     margin-top: 15px;
  1985.   }
  1986.  
  1987.   #cart_nav {
  1988.     margin: 25px 0 40px 0;
  1989.   }
  1990.  
  1991.   #cart_nav span {
  1992.     display: none;
  1993.   }
  1994.  
  1995.   #cart_nav #menu {
  1996.     display: inherit;
  1997.   }
  1998.  
  1999.   #cart_nav #menu.selected {
  2000.     font-weight: bold;
  2001.   }
  2002.  
  2003.   #cart_nav a {
  2004.     padding: 0 15px;
  2005.     display: inline-block;
  2006.     color: {{ theme.link_color }};
  2007.   }
  2008.  
  2009.   #nav_primary,
  2010.   #nav_primary .keyline,
  2011.   #cart_nav #search {
  2012.     display: none;
  2013.   }
  2014.  
  2015.   #content_header {
  2016.     margin-top: 30px;
  2017.   }
  2018.  
  2019.   #content_header h1 {
  2020.     margin-bottom: .6em;
  2021.   }
  2022.  
  2023.   #products {
  2024.     margin-top: 20px;
  2025.   }
  2026.  
  2027.   #categories {
  2028.     width: 100%;
  2029.     margin: 20px auto 40px !important;
  2030.   }
  2031.  
  2032.   #categories a.button,
  2033.   #categories #options_menu {
  2034.     width: 100%;
  2035.     box-sizing: border-box;
  2036.     left: 0;
  2037.     margin-left: 0;
  2038.   }
  2039.  
  2040.   #categories #options_menu {
  2041.     padding-top: 60px;
  2042.     max-height: 40vh;
  2043.     overflow: scroll;
  2044.   }
  2045.   #categories #options_menu li {
  2046.     padding: 6px 0;
  2047.   }
  2048.   #categories #options_menu li.cat_header {
  2049.     padding: 14px 0;
  2050.   }
  2051.  
  2052.   #categories a.button {
  2053.     color: {{ theme.link_hover }};
  2054.     border-color: {{ theme.link_hover }};
  2055.   }
  2056.  
  2057.   #categories a.button .arrow {
  2058.     border-color: {{ theme.link_hover }} transparent transparent transparent !important;
  2059.   }
  2060.  
  2061.   /* --------------------------------------------------------------
  2062.     Site Footer
  2063.   -------------------------------------------------------------- */
  2064.   #site_footer {
  2065.     opacity: 1;
  2066.     width: 100% !important;
  2067.     position: relative;
  2068.     padding-top: 20px;
  2069.     margin-top: 20px;
  2070.     background: {{ theme.background_secondary_color }};
  2071.     border-top: 1px solid {{ theme.border_color }};
  2072.   }
  2073.   #site_footer .canvas {
  2074.     width: 100%;
  2075.     max-width: 100%;
  2076.     min-width: 100%;
  2077.   }
  2078.   #home #site_footer, #products_page #site_footer, #product #site_footer {
  2079.     margin-top: 0;
  2080.   }
  2081.   #site_footer nav {
  2082.     clear: both;
  2083.   }
  2084.   #site_footer nav ul li {
  2085.     display: block;
  2086.     width: 100%;
  2087.   }
  2088.   #site_footer nav ul li a {
  2089.     display: block;
  2090.     padding: 10px 0;
  2091.     border-bottom: 1px solid {{ theme.border_color }};
  2092.     color: {{ theme.text_color }};
  2093.   }
  2094.   #site_footer nav ul li#search {
  2095.     display: block;
  2096.     margin: 0 0 10px;
  2097.     min-height: 34px;
  2098.     padding: 0;
  2099.     text-align: center;
  2100.     border-bottom: 1px solid {{ theme.border_color }};
  2101.   }
  2102.   #site_footer nav ul li#search:hover a {
  2103.     visibility: visible;
  2104.   }
  2105.   #site_footer nav ul li#search:hover input {
  2106.     background: transparent;
  2107.   }
  2108.   #site_footer nav ul li#search a {
  2109.     display: block;
  2110.     width: 100%;
  2111.     padding: 12px 0;
  2112.     border-bottom: none;
  2113.     background: transparent;
  2114.   }
  2115.   #site_footer nav ul li#search input {
  2116.     position: relative;
  2117.     z-index: 1000;
  2118.     visibility: visible;
  2119.     box-sizing: border-box;
  2120.     width: 100%;
  2121.     margin: 0;
  2122.     padding: 14px 10px;
  2123.     border-radius: 0;
  2124.     z-index: 0;
  2125.   }
  2126.   #site_footer #social_links {
  2127.     margin-top: 30px;
  2128.   }
  2129.   #site_footer #social_links li a {
  2130.     padding: 4px 20px;
  2131.     color: {{ theme.text_secondary_color }};
  2132.   }
  2133.   #site_footer #social_links li#website {
  2134.     margin-top: 0;
  2135.     display: block;
  2136.     line-height: .6em;
  2137.   }
  2138.   #site_footer #social_links li + li#website {
  2139.     margin-top: 30px;
  2140.   }
  2141.   #site_footer #social_links + #badge {
  2142.     margin-top: 0;
  2143.   }
  2144.  
  2145.   #pagination {
  2146.     width: 100% !important;
  2147.     margin: 40px auto 0;
  2148.   }
  2149.   #pagination ul {
  2150.     margin-bottom: 0;
  2151.     border-top: 1px solid {{ theme.border_color }};
  2152.   }
  2153.   #pagination ul li {
  2154.     width: 50%;
  2155.   }
  2156.   #pagination ul li a.button {
  2157.     width: 100%;
  2158.     border: 0;
  2159.   }
  2160.   #pagination ul li + li a {
  2161.     border-left: 1px solid {{ theme.border_color }} !important;
  2162.   }
  2163.  
  2164.   /* --------------------------------------------------------------
  2165.     Home
  2166.   -------------------------------------------------------------- */
  2167.   #home #intro {
  2168.     margin: 25px auto 0;
  2169.     font-size: 24px;
  2170.   }
  2171.   #home #intro p {
  2172.     line-height: 1.4em;
  2173.   }
  2174.   #home #intro .keyline {
  2175.     display: none;
  2176.   }
  2177.   #home #gallery {
  2178.     margin-top: 20px;
  2179.     margin-bottom: 60px;
  2180.     min-height: 150px;
  2181.   }
  2182.   #home #gallery #shop_products {
  2183.     bottom: -37px;
  2184.   }
  2185.   #home #all_products_btn {
  2186.     box-sizing: border-box;
  2187.     margin: 10px auto 20px !important;
  2188.     color: {{ theme.link_hover }};
  2189.     border-color: {{ theme.link_hover }};
  2190.   }
  2191.  
  2192.   /* --------------------------------------------------------------
  2193.     Products
  2194.   -------------------------------------------------------------- */
  2195.   #products_page #pagination {
  2196.     margin-top: 10px;
  2197.   }
  2198.  
  2199.   #products .product {
  2200.     position: relative;
  2201.     margin: 0 0 25px;
  2202.   }
  2203.   #products .product .product_price h2 {
  2204.     width: 55%;
  2205.   }
  2206.   #products .product .product_price .on_sale {
  2207.     display: none;
  2208.   }
  2209.  
  2210.   .flex-viewport {
  2211.     height: 100%;
  2212.     min-height: intrinsic !important;
  2213.   }
  2214.  
  2215.   .product_images {
  2216.     min-height: 150px;
  2217.     margin: 0 auto;
  2218.   }
  2219.   .product_images .flex-viewport {
  2220.     height: 100%;
  2221.     min-height: intrinsic !important;
  2222.   }
  2223.   .product_images .flex-control-nav {
  2224.     bottom: 20px;
  2225.   }
  2226.  
  2227.   #products_page .canvas.grid #products .product {
  2228.     margin-bottom: 10px;
  2229.     width: 48.1%;
  2230.     /* 230px*/
  2231.   }
  2232.   #products_page .canvas.grid #products .product .product_price {
  2233.     opacity: 1 !important;
  2234.   }
  2235.  
  2236.   /* --------------------------------------------------------------
  2237.     Product
  2238.   -------------------------------------------------------------- */
  2239.   #product #site_content.canvas {
  2240.     overflow: visible;
  2241.   }
  2242.   #product .product_images {
  2243.     min-height: 200px;
  2244.   }
  2245.   #product .product_images .flex-control-nav {
  2246.     bottom: -32px;
  2247.     left: -4px;
  2248.   }
  2249.   #product .product_info.sold-out + #page_body {
  2250.     margin-top: 10px;
  2251.   }
  2252.   #product .product_info .product_price {
  2253.     padding: 15px 0;
  2254.   }
  2255.   #product .product_info #product_sharing {
  2256.     margin-top: -34px;
  2257.   }
  2258.   #product .product_info #product_options #option_select {
  2259.     width: 100%;
  2260.   }
  2261.   #product .product_info #product_options .button {
  2262.     width: 100%;
  2263.     border: 1px solid {{ theme.border_color }};
  2264.   }
  2265.   #product .product_info #product_options #options_menu {
  2266.     box-sizing: border-box;
  2267.     width: 100%;
  2268.     padding-top: 60px;
  2269.     max-height: 300px;
  2270.     overflow-y: scroll;
  2271.   }
  2272.   #product .product_info #product_options #options_menu li {
  2273.     padding: 12px 0;
  2274.   }
  2275.   #product .product_info #product_options #options_menu li:hover {
  2276.     background: {{ theme.background_color }} !important;
  2277.   }
  2278.   #product .product_info #product_options #options_menu li:active {
  2279.     color: {{ theme.link_hover }};
  2280.     background: {{ theme.background_secondary_color }} !important;
  2281.     transition: background 0 ease-in;
  2282.   }
  2283.   #product #page_body {
  2284.     margin-top: 30px;
  2285.   }
  2286.   #product #page_body .product_inventory {
  2287.     margin-top: -8px;
  2288.   }
  2289.   #product #pagination {
  2290.     margin-top: 40px;
  2291.     margin-bottom: 0;
  2292.   }
  2293.  
  2294.   /* --------------------------------------------------------------
  2295.     Contact
  2296.   -------------------------------------------------------------- */
  2297.   #contact h1 {
  2298.     margin-bottom: 22px;
  2299.   }
  2300.   #contact #contact_form {
  2301.     border: none;
  2302.   }
  2303.   #contact #contact_form button {
  2304.     margin: 10px 0 0;
  2305.   }
  2306.   #contact #contact_form ul li {
  2307.     margin: 0 0 20px;
  2308.     padding: 8px 0 0;
  2309.   }
  2310.   #contact #contact_form ul li label {
  2311.     width: 100%;
  2312.     box-sizing: border-box;
  2313.     float: none;
  2314.     margin: 0;
  2315.     border: 0;
  2316.     line-height: .8em;
  2317.     text-align: left;
  2318.     color: {{ theme.text_color }};
  2319.   }
  2320.   #contact #contact_form ul li input,
  2321.   #contact #contact_form ul li textarea {
  2322.     box-sizing: border-box;
  2323.     width: 100%;
  2324.     padding: 13px 8px;
  2325.     background: {{ theme.background_secondary_color }};
  2326.     border: none;
  2327.     border-radius: 3px;
  2328.   }
  2329.   #contact #contact_form ul li textarea {
  2330.     min-height: 51px;
  2331.   }
  2332.   #contact #contact_form ul li#captcha_img #captcha_phrase {
  2333.     float: right;
  2334.   }
  2335.   #contact #contact_form ul li#captcha_img #captcha_phrase img {
  2336.     height: 34px;
  2337.     margin-top: 8px;
  2338.     border: 0;
  2339.   }
  2340.   #contact #contact_form ul li#captcha_img input {
  2341.     float: left;
  2342.     width: 70%;
  2343.     margin-left: 0;
  2344.   }
  2345.  
  2346.   /* --------------------------------------------------------------
  2347.     Cart
  2348.   -------------------------------------------------------------- */
  2349.   #cart #site_content {
  2350.     width: 100%;
  2351.     min-height: 50%;
  2352.     margin-bottom: 0;
  2353.   }
  2354.   #cart #content_header {
  2355.     margin-bottom: 22px;
  2356.   }
  2357.   #cart #site_footer {
  2358.     margin-top: 20px;
  2359.   }
  2360.   #cart #cart-form {
  2361.     text-align: center;
  2362.   }
  2363.   #cart #cart_items {
  2364.     margin: 0 auto;
  2365.     text-align: left;
  2366.   }
  2367.   #cart #cart_items ul li {
  2368.     padding: 15px 0;
  2369.     border-top: 1px solid {{ theme.border_color }};
  2370.     background: transparent;
  2371.     margin: 0;
  2372.   }
  2373.   #cart #cart_items ul li:hover {
  2374.     background: transparent;
  2375.   }
  2376.   #cart #cart_items ul li:last-child {
  2377.     border-bottom: 1px solid {{ theme.border_color }};
  2378.   }
  2379.   #cart #cart_items ul li.with_option .item_name {
  2380.     margin-top: -3px;
  2381.   }
  2382.   #cart #cart_items ul li.with_option .item_name span {
  2383.     margin-bottom: 0;
  2384.     font-size: 15px;
  2385.   }
  2386.   #cart #cart_items ul li .item_thumb,
  2387.   #cart #cart_items ul li .remove_item {
  2388.     display: none;
  2389.   }
  2390.   #cart #cart_items ul li .item_name {
  2391.     float: left;
  2392.     width: 60%;
  2393.     padding: 0;
  2394.     margin: 8px 5% 0 0;
  2395.   }
  2396.   #cart #cart_items ul li input {
  2397.     float: left;
  2398.     margin: 0;
  2399.     color: {{ theme.text_secondary_color }};
  2400.     background: {{ theme.background_secondary_color }};
  2401.   }
  2402.   #cart #cart_items ul li .item_price {
  2403.     float: right;
  2404.     width: 21%;
  2405.     margin: 8px 0 0;
  2406.     padding: 0;
  2407.     text-align: right;
  2408.   }
  2409.   #cart #cart_options {
  2410.     margin: 0;
  2411.     padding: 15px 0;
  2412.     border-top: 0;
  2413.   }
  2414.   #cart #cart_options li {
  2415.     overflow: hidden;
  2416.   }
  2417.   #cart #cart_options li:first-child {
  2418.     margin-bottom: 0;
  2419.   }
  2420.   #cart #cart_options li label {
  2421.     display: block;
  2422.     float: none;
  2423.     width: auto;
  2424.     padding-right: 0;
  2425.     text-align: left;
  2426.     line-height: .8em;
  2427.     padding-bottom: 12px;
  2428.   }
  2429.   #cart #cart_options li input {
  2430.     box-sizing: border-box;
  2431.     width: 76%;
  2432.     padding: 13px 8px;
  2433.     line-height: 1.5em;
  2434.     font-size: 13px;
  2435.     background: {{ theme.background_secondary_color }};
  2436.     border: none;
  2437.   }
  2438.   #cart #cart_options li select {
  2439.     width: 76%;
  2440.     margin-top: 0;
  2441.   }
  2442.   #cart #cart_options li p {
  2443.     float: left;
  2444.     margin-top: -6px;
  2445.     width: auto;
  2446.   }
  2447.   #cart #cart_options li h3 {
  2448.     float: right;
  2449.     margin: 0;
  2450.     text-align: right;
  2451.   }
  2452.   #cart #cart_options li h3.cart_pending {
  2453.     display: none;
  2454.   }
  2455.   #cart #cart_options li#cart-shipping-tax + #discount_option {
  2456.     margin-top: 14px;
  2457.   }
  2458.   #cart #cart_options li#cart-shipping-tax.not_set {
  2459.     margin-bottom: -20px;
  2460.   }
  2461.   #cart #cart_options li#cart-shipping-tax h3 {
  2462.     margin-top: 0;
  2463.   }
  2464.   #cart #cart_options li#cart-shipping-tax .update-btn {
  2465.     margin-top: 7px;
  2466.   }
  2467.   #cart #cart_options li#discount_option {
  2468.     margin-bottom: 0;
  2469.   }
  2470.   #cart #cart_options li#discount_option p {
  2471.     width: 76%;
  2472.     text-align: left;
  2473.   }
  2474.   #cart #cart_options li#discount_option p + h3 {
  2475.     margin-top: -6px;
  2476.   }
  2477.   #cart #cart_total {
  2478.     background: transparent;
  2479.   }
  2480.   #cart #cart_total p {
  2481.     display: none;
  2482.   }
  2483.   #cart #cart_total #total {
  2484.     position: relative;
  2485.     text-align: left;
  2486.     width: 100%;
  2487.     padding: 0 0 5px;
  2488.     margin: 15px 0 0;
  2489.   }
  2490.   #cart #cart_total #total h2 {
  2491.     float: right;
  2492.     margin: 0;
  2493.     font-size: 34px;
  2494.     left: -1px;
  2495.   }
  2496.   #cart #cart_total #total h3 {
  2497.     float: left;
  2498.     width: auto;
  2499.     margin: 18px 5% 0 0;
  2500.     font-size: 15px;
  2501.   }
  2502.   #cart #cart_total #total .update-btn {
  2503.     float: left;
  2504.     margin: 17px 0 0;
  2505.     line-height: 1.5em;
  2506.     font-size: 15px;
  2507.   }
  2508.   #cart #checkout-btn {
  2509.     width: 100%;
  2510.     margin: 0 auto;
  2511.   }
  2512.   #cart .message {
  2513.     margin-top: 50px;
  2514.   }
  2515.   #cart #cart_empty {
  2516.     margin-top: 80px !important;
  2517.     margin-bottom: 100px;
  2518.   }
  2519. }
  2520. .ltie9 #product #product_sharing ul {
  2521.   top: 25%;
  2522.   left: 25%;
  2523. }
  2524. .ltie9 #product #product_sharing ul li a {
  2525.   border-top: 1px solid {{ theme.border_color }};
  2526. }
  2527. .ltie9 #product #product_sharing ul li a:hover {
  2528.   background: {{ theme.border_color }};
  2529. }
  2530. .ltie9 .product_images .flex-viewport ul li {
  2531.   cursor: pointer;
  2532. }
  2533. .ltie9 #cart_items li .item_thumb img {
  2534.   top: 0;
  2535. }
  2536. .ltie9 .spinner {
  2537.   height: 3px;
  2538.   width: 60px;
  2539.   border: none;
  2540.   background: {{ theme.border_color }};
  2541. }
  2542.  
  2543. .gteie9 .product_images .flex-viewport ul li {
  2544.   cursor: pointer;
  2545. }
  2546. /*------------------------------------------------------------
  2547.  
  2548. Theme:  Digihorror
  2549. Author: Antônio Carvalho
  2550.         http://singlenaut.com
  2551.  
  2552. ------------------------------------------------------------*/
  2553.  
  2554. /*
  2555.  
  2556.  
  2557.  */
  2558.  
  2559. /*============================================================
  2560.   Custom Styles - add and override styles below.
  2561. ============================================================*/
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!