SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html class="flexbox flexwrap" lang="en">3 <head>4 <style>5 /*! normalize.css v2.1.0 | MIT License | git.io/normalize */6 7progress,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}8* {9 -webkit-box-sizing: border-box;10 -moz-box-sizing: border-box;11 box-sizing: border-box;12}13 14html {15 min-height: 100%;16 position: relative;17}18 19body {20 background: #444444;21 -moz-osx-font-smoothing: grayscale;22 -webkit-font-smoothing: antialiased;23 color: #ffffff;24 font-family: "Work Sans", sans-serif;25 font-size: 14px;26 line-height: 1;27 overflow-y: scroll;28 padding-top: 90px;29}30body.has_welcome {31 padding-top: 0;32}33body.has_welcome header {34 background: transparent;35}36body#cart .footer_cart {37 display: none;38}39body#home {40 padding-top: 0;41}42body.standalone {43 padding: 70px;44 text-align: center;45}46body.standalone h1 {47 font-size: 22px;48 line-height: 1.6em;49}50body.standalone .maintenance_icons {51 display: block;52}53body.standalone .maintenance_icons li {54 display: inline-block;55}56body.standalone .maintenance_icons li a {57 display: block;58 padding: 0 10px;59}60@media screen and (max-width: 668px) {61 body.standalone .maintenance_icons li a {62 padding: 0 6px;63 }64}65body.standalone .maintenance_icons li a svg {66 -webkit-transition: 0.2s linear;67 -moz-transition: 0.2s linear;68 -o-transition: 0.2s linear;69 transition: 0.2s linear;70 fill: #ffffff;71 height: 30px;72 width: 30px;73}74@media screen and (max-width: 668px) {75 body.standalone .maintenance_icons li a svg {76 height: 26px;77 width: 26px;78 }79}80body.standalone .maintenance_icons li a:hover svg {81 opacity: 0.6;82}83 84header {85 *zoom: 1;86 -webkit-transition: background 0.3s linear;87 -moz-transition: background 0.3s linear;88 -o-transition: background 0.3s linear;89 transition: background 0.3s linear;90 background: #000000;91 font-family: "Work Sans", sans-serif;92 height: 90px;93 left: 0;94 margin: 0;95 padding: 20px 0;96 position: fixed;97 right: 0;98 top: 0;99 z-index: 3;100}101header:after {102 content: "";103 display: table;104 clear: both;105}106@media screen and (max-width: 668px) {107 header {108 position: absolute;109 }110}111header.background_overlay {112 background: #000000 !important;113}114header .store_name {115 color: #bee21f;116 float: left;117 font-size: 20px;118 margin-left: 40px;119 max-width: 60%;120}121@media screen and (max-width: 800px) {122 header .store_name {123 margin-left: 20px;124 }125}126header .store_name a {127 color: #bee21f;128 display: block;129 line-height: 1.2em;130}131header .store_name.text {132 height: 50px;133}134header .store_name.text a {135 -webkit-transform: translateY(-50%);136 -moz-transform: translateY(-50%);137 -ms-transform: translateY(-50%);138 -o-transform: translateY(-50%);139 transform: translateY(-50%);140 position: relative;141 top: 50%;142}143header .store_name.image {144 -webkit-transform: translateY(-50%);145 -moz-transform: translateY(-50%);146 -ms-transform: translateY(-50%);147 -o-transform: translateY(-50%);148 transform: translateY(-50%);149 position: relative;150 top: 50%;151}152header .store_name.image a {153 height: 50px;154}155header .store_name.image a img {156 -webkit-transform: translateY(-50%);157 -moz-transform: translateY(-50%);158 -ms-transform: translateY(-50%);159 -o-transform: translateY(-50%);160 transform: translateY(-50%);161 position: relative;162 top: 50%;163 display: block;164 height: auto;165 max-height: 100%;166 max-width: 100%;167 width: auto;168}169header .header_icons {170 -webkit-transform: translateY(-50%);171 -moz-transform: translateY(-50%);172 -ms-transform: translateY(-50%);173 -o-transform: translateY(-50%);174 transform: translateY(-50%);175 position: relative;176 top: 50%;177 height: 30px;178 list-style: none;179 position: absolute;180 right: 40px;181}182@media screen and (max-width: 800px) {183 header .header_icons {184 right: 20px;185 }186}187header .header_icons li {188 display: inline-block;189 font-size: 0;190 height: 30px;191 margin-left: 30px;192}193header .header_icons li a {194 color: #bee21f;195 display: block;196 font-size: 14px;197 position: relative;198}199header .header_icons li a svg {200 fill: #bee21f;201 height: 30px;202 width: 30px;203}204header .header_icons li.open_search a {205 top: 1px;206}207header .header_icons li.open_cart {208 margin-left: 23px;209}210@media screen and (max-width: 668px) {211 header .header_icons li.open_cart {212 display: none;213 }214}215header .header_icons li.open_menu a {216 -webkit-transform: translateY(-50%);217 -moz-transform: translateY(-50%);218 -ms-transform: translateY(-50%);219 -o-transform: translateY(-50%);220 transform: translateY(-50%);221 position: relative;222 top: 50%;223 height: 16px;224 width: 22px;225}226header .header_icons li.open_menu a span {227 -webkit-border-radius: 2px;228 -moz-border-radius: 2px;229 -ms-border-radius: 2px;230 -o-border-radius: 2px;231 border-radius: 2px;232 -webkit-transform: rotate(0deg);233 -moz-transform: rotate(0deg);234 -ms-transform: rotate(0deg);235 -o-transform: rotate(0deg);236 transform: rotate(0deg);237 display: block;238 background: #bee21f;239 width: 100%;240 height: 2px;241 position: absolute;242 left: 0;243 opacity: 1;244}245header .header_icons li.open_menu a span:nth-child(1) {246 top: 0px;247}248header .header_icons li.open_menu a span:nth-child(2), header .header_icons li.open_menu a span:nth-child(3) {249 top: 50%;250}251header .header_icons li.open_menu a span:nth-child(4) {252 top: 99%;253}254 255.cart_count {256 position: absolute;257 right: -13px;258 top: 0;259}260.cart_count .cart_value {261 -webkit-border-radius: 3em;262 -moz-border-radius: 3em;263 -ms-border-radius: 3em;264 -o-border-radius: 3em;265 border-radius: 3em;266 background-color: #bee21f;267 color: #000000;268 display: inline-block;269 font-family: "Work Sans", sans-serif;270 font-size: 12px;271 line-height: 1.3;272 padding: 2px 8px;273}274 275a {276 color: #a0a0a0;277 text-decoration: none;278}279 280ul, ol {281 list-style: none;282 margin: 0;283 padding: 0;284}285 286button, a.button {287 -webkit-transition: 0.2s linear;288 -moz-transition: 0.2s linear;289 -o-transition: 0.2s linear;290 transition: 0.2s linear;291 background-color: #000000;292 border: none;293 color: #bee21f;294 cursor: pointer;295 display: inline-block;296 font-size: 18px;297 height: 60px;298 line-height: 60px;299 max-width: 300px;300 outline: none;301 padding: 0;302 text-align: center;303 width: 100%;304}305button:hover, button:focus, button.active, a.button:hover, a.button:focus, a.button.active {306 border: none;307 opacity: 0.6;308}309 310.errors {311 color: #bee21f;312 margin-bottom: 40px;313 text-align: center;314}315.errors li {316 line-height: 1.5em;317 margin-bottom: 20px;318}319 320.select {321 -webkit-transition: 0.2s linear;322 -moz-transition: 0.2s linear;323 -o-transition: 0.2s linear;324 transition: 0.2s linear;325 position: relative;326 border: 2px solid #999999;327 color: #a0a0a0;328 font-family: "Work Sans", sans-serif;329 height: 60px;330 margin-bottom: 20px;331 max-width: 300px;332 padding: 0;333 position: relative;334 width: 100%;335}336.select select {337 -webkit-transition: 0.2s linear;338 -moz-transition: 0.2s linear;339 -o-transition: 0.2s linear;340 transition: 0.2s linear;341 -webkit-appearance: none;342 -moz-appearance: none;343 appearance: none;344 background: none;345 border: 0;346 color: #a0a0a0;347 font-family: "Work Sans", sans-serif;348 font-size: 14px;349 height: 100%;350 line-height: 2em;351 padding: 0 50px 0 20px;352 position: relative;353 width: 100%;354 z-index: 2;355}356.select select option {357 background-color: white;358 color: black;359}360.select select:focus {361 box-shadow: none;362 outline: none;363}364.select select::-ms-expand {365 display: none;366}367.select svg {368 -webkit-transition: 0.2s linear;369 -moz-transition: 0.2s linear;370 -o-transition: 0.2s linear;371 transition: 0.2s linear;372 fill: #a0a0a0;373 height: 8px;374 margin-top: -2px;375 position: absolute;376 right: 20px;377 top: 50%;378 width: 13px;379 z-index: 1;380}381.select:hover {382 color: #a0a0a0;383 border-color: #a0a0a0;384}385.select:hover select {386 color: #ffffff;387}388.select:hover svg {389 fill: #ffffff;390}391 392.overlay {393 -webkit-transition: opacity 0.2s, visibility 0s;394 -webkit-transition-delay: 0s, 0.2s;395 -moz-transition: opacity 0.2s, visibility 0s 0.2s;396 -o-transition: opacity 0.2s, visibility 0s 0.2s;397 transition: opacity 0.2s, visibility 0s 0.2s;398 height: 100%;399 left: 0;400 opacity: 0;401 position: fixed;402 text-align: center;403 top: 0;404 visibility: hidden;405 width: 100%;406 z-index: 5;407}408.overlay.open {409 -webkit-transition: opacity 0.4s;410 -moz-transition: opacity 0.4s;411 -o-transition: opacity 0.4s;412 transition: opacity 0.4s;413 opacity: 1;414 visibility: visible;415}416.overlay .overlay_background {417 background: #000000;418 bottom: 0;419 left: 0;420 opacity: 0.95;421 position: absolute;422 right: 0;423 top: 0;424 z-index: 5;425}426.overlay .overlay_content {427 height: 100%;428 overflow-y: scroll;429 padding: 90px 0;430}431.overlay .close_overlay {432 cursor: pointer;433 fill: #bee21f;434 height: 18px;435 position: absolute;436 right: 42px;437 top: 37px;438 width: 18px;439 z-index: 6;440}441@media screen and (max-width: 668px) {442 .overlay .close_overlay {443 right: 22px;444 }445}446.overlay .page_list {447 display: none;448 margin: 0 auto;449 max-width: 80%;450 opacity: 0;451 position: relative;452 z-index: 6;453 visibility: hidden;454}455.overlay .page_list li {456 display: block;457}458.overlay .page_list li a {459 color: #bee21f;460 display: block;461 font-size: 26px;462 padding: 15px 0;463}464@media screen and (max-width: 668px) {465 .overlay .page_list li a {466 font-size: 20px;467 }468}469.overlay .search_form {470 display: none;471 z-index: 6;472}473.overlay.navigation .page_list {474 display: block;475 -webkit-transition: opacity 0.2s, visibility 0s;476 -webkit-transition-delay: 0s, 0.2s;477 -moz-transition: opacity 0.2s, visibility 0s 0.2s;478 -o-transition: opacity 0.2s, visibility 0s 0.2s;479 transition: opacity 0.2s, visibility 0s 0.2s;480 opacity: 1;481 visibility: visible;482}483.overlay.search .search_form {484 display: block;485 position: relative;486}487.overlay.search .search_form input {488 -webkit-appearance: none;489 -moz-appearance: none;490 appearance: none;491 background: none;492 border: none;493 font-size: 1.5em;494 color: #bee21f;495 display: block;496 margin: 0 auto;497 padding: 15px;498 width: 60%;499}500@media screen and (max-width: 668px) {501 .overlay.search .search_form input {502 width: 80%;503 }504}505.overlay.search .search_form input:focus {506 border: none;507 color: #bee21f;508 outline: none;509}510.overlay.search .search_form input::-moz-placeholder {511 color: #bee21f;512}513.overlay.search .search_form input::-webkit-input-placeholder {514 color: #bee21f;515}516.overlay.search .search_form input:-ms-input-placeholder {517 color: #bee21f;518}519 520.footer_cart {521 bottom: 0;522 display: none;523 height: 60px;524 left: 0;525 position: fixed;526 text-align: center;527 width: 100%;528 z-index: 4;529}530@media screen and (max-width: 668px) {531 .footer_cart {532 display: block;533 }534}535.footer_cart .background {536 background: #000000;537 height: 100%;538 left: 0;539 opacity: 0.9;540 position: absolute;541 top: 0;542 width: 100%;543}544.footer_cart .open_cart {545 -webkit-transform: translateY(-50%);546 -moz-transform: translateY(-50%);547 -ms-transform: translateY(-50%);548 -o-transform: translateY(-50%);549 transform: translateY(-50%);550 position: relative;551 top: 50%;552 display: inline-block;553 position: relative;554}555.footer_cart .open_cart svg {556 fill: #bee21f;557 height: 25px;558 width: 25px;559}560 561h1, h2, h3, h4, h5, h6 {562 font-family: "Work Sans", sans-serif;563 font-weight: normal;564 margin: 0;565 padding: 0;566}567 568h1 {569 font-size: 36px;570 margin-bottom: 60px;571}572@media screen and (max-width: 668px) {573 h1 {574 font-size: 24px;575 margin-bottom: 30px;576 }577}578 579h2.featured_products {580 font-size: 26px;581 margin: 0 0 60px;582 text-align: center;583}584@media screen and (max-width: 668px) {585 h2.featured_products {586 margin: 60px 0;587 }588}589 590.featured_categories + h2.featured_products {591 margin-top: 55px;592}593@media screen and (max-width: 800px) {594 .featured_categories + h2.featured_products {595 margin-top: 60px;596 }597}598 599@-webkit-keyframes welcome-text {600 0% {601 opacity: 0;602 -webkit-transform: translate3d(0, 10%, 0);603 -moz-transform: translate3d(0, 10%, 0);604 -ms-transform: translate3d(0, 10%, 0);605 -o-transform: translate3d(0, 10%, 0);606 transform: translate3d(0, 10%, 0);607 }608 609 100% {610 -webkit-transform: none;611 -moz-transform: none;612 -ms-transform: none;613 -o-transform: none;614 transform: none;615 opacity: 1;616 }617}618 619@-moz-keyframes welcome-text {620 0% {621 opacity: 0;622 -webkit-transform: translate3d(0, 10%, 0);623 -moz-transform: translate3d(0, 10%, 0);624 -ms-transform: translate3d(0, 10%, 0);625 -o-transform: translate3d(0, 10%, 0);626 transform: translate3d(0, 10%, 0);627 }628 629 100% {630 -webkit-transform: none;631 -moz-transform: none;632 -ms-transform: none;633 -o-transform: none;634 transform: none;635 opacity: 1;636 }637}638 639@-ms-keyframes welcome-text {640 0% {641 opacity: 0;642 -webkit-transform: translate3d(0, 10%, 0);643 -moz-transform: translate3d(0, 10%, 0);644 -ms-transform: translate3d(0, 10%, 0);645 -o-transform: translate3d(0, 10%, 0);646 transform: translate3d(0, 10%, 0);647 }648 649 100% {650 -webkit-transform: none;651 -moz-transform: none;652 -ms-transform: none;653 -o-transform: none;654 transform: none;655 opacity: 1;656 }657}658 659@-o-keyframes welcome-text {660 0% {661 opacity: 0;662 -webkit-transform: translate3d(0, 10%, 0);663 -moz-transform: translate3d(0, 10%, 0);664 -ms-transform: translate3d(0, 10%, 0);665 -o-transform: translate3d(0, 10%, 0);666 transform: translate3d(0, 10%, 0);667 }668 669 100% {670 -webkit-transform: none;671 -moz-transform: none;672 -ms-transform: none;673 -o-transform: none;674 transform: none;675 opacity: 1;676 }677}678 679@keyframes welcome-text {680 0% {681 opacity: 0;682 -webkit-transform: translate3d(0, 10%, 0);683 -moz-transform: translate3d(0, 10%, 0);684 -ms-transform: translate3d(0, 10%, 0);685 -o-transform: translate3d(0, 10%, 0);686 transform: translate3d(0, 10%, 0);687 }688 689 100% {690 -webkit-transform: none;691 -moz-transform: none;692 -ms-transform: none;693 -o-transform: none;694 transform: none;695 opacity: 1;696 }697}698 699@-webkit-keyframes hide-welcome-text {700 0% {701 -webkit-transform: none;702 -moz-transform: none;703 -ms-transform: none;704 -o-transform: none;705 transform: none;706 opacity: 1;707 }708 709 100% {710 opacity: 0;711 -webkit-transform: translate3d(0, 10%, 0);712 -moz-transform: translate3d(0, 10%, 0);713 -ms-transform: translate3d(0, 10%, 0);714 -o-transform: translate3d(0, 10%, 0);715 transform: translate3d(0, 10%, 0);716 }717}718 719@-moz-keyframes hide-welcome-text {720 0% {721 -webkit-transform: none;722 -moz-transform: none;723 -ms-transform: none;724 -o-transform: none;725 transform: none;726 opacity: 1;727 }728 729 100% {730 opacity: 0;731 -webkit-transform: translate3d(0, 10%, 0);732 -moz-transform: translate3d(0, 10%, 0);733 -ms-transform: translate3d(0, 10%, 0);734 -o-transform: translate3d(0, 10%, 0);735 transform: translate3d(0, 10%, 0);736 }737}738 739@-ms-keyframes hide-welcome-text {740 0% {741 -webkit-transform: none;742 -moz-transform: none;743 -ms-transform: none;744 -o-transform: none;745 transform: none;746 opacity: 1;747 }748 749 100% {750 opacity: 0;751 -webkit-transform: translate3d(0, 10%, 0);752 -moz-transform: translate3d(0, 10%, 0);753 -ms-transform: translate3d(0, 10%, 0);754 -o-transform: translate3d(0, 10%, 0);755 transform: translate3d(0, 10%, 0);756 }757}758 759@-o-keyframes hide-welcome-text {760 0% {761 -webkit-transform: none;762 -moz-transform: none;763 -ms-transform: none;764 -o-transform: none;765 transform: none;766 opacity: 1;767 }768 769 100% {770 opacity: 0;771 -webkit-transform: translate3d(0, 10%, 0);772 -moz-transform: translate3d(0, 10%, 0);773 -ms-transform: translate3d(0, 10%, 0);774 -o-transform: translate3d(0, 10%, 0);775 transform: translate3d(0, 10%, 0);776 }777}778 779@keyframes hide-welcome-text {780 0% {781 -webkit-transform: none;782 -moz-transform: none;783 -ms-transform: none;784 -o-transform: none;785 transform: none;786 opacity: 1;787 }788 789 100% {790 opacity: 0;791 -webkit-transform: translate3d(0, 10%, 0);792 -moz-transform: translate3d(0, 10%, 0);793 -ms-transform: translate3d(0, 10%, 0);794 -o-transform: translate3d(0, 10%, 0);795 transform: translate3d(0, 10%, 0);796 }797}798 799.welcome_image {800 background-image: none ;801 background-position: 50% 50%;802 background-repeat: no-repeat;803 background-attachment: fixed;804 background-size: cover;805 color: #FFFFFF;806 height: 100vh;807 left: 0;808 position: relative;809 text-align: center;810 top: 0;811 width: 100%;812}813@media screen and (max-width: 1024px) {814 .welcome_image {815 background-attachment: scroll;816 }817}818.welcome_image .welcome_overlay {819 background: #222222;820 bottom: 0;821 height: 100%;822 left: 0;823 opacity: 0.35;824 position: absolute;825 right: 0;826 top: 0;827 width: 100%;828}829.welcome_image .welcome_text {830 -webkit-transform: translateY(-50%);831 -moz-transform: translateY(-50%);832 -ms-transform: translateY(-50%);833 -o-transform: translateY(-50%);834 transform: translateY(-50%);835 position: relative;836 top: calc(50% - 45px);837 -webkit-animation: welcome-text ease-in 900ms forwards;838 -moz-animation: welcome-text ease-in 900ms forwards;839 -ms-animation: welcome-text ease-in 900ms forwards;840 -o-animation: welcome-text ease-in 900ms forwards;841 animation: welcome-text ease-in 900ms forwards;842 padding: 0 20px;843}844.welcome_image .welcome_text.fade_out {845 -webkit-animation: hide-welcome-text ease-in 200ms forwards;846 -moz-animation: hide-welcome-text ease-in 200ms forwards;847 -ms-animation: hide-welcome-text ease-in 200ms forwards;848 -o-animation: hide-welcome-text ease-in 200ms forwards;849 animation: hide-welcome-text ease-in 200ms forwards;850}851.welcome_image .welcome_text h1 {852 font-size: 60px;853 line-height: 1.6em;854 margin-bottom: 20px;855}856@media screen and (max-width: 668px) {857 .welcome_image .welcome_text h1 {858 font-size: 9vw;859 }860}861.welcome_image .welcome_text .welcome_button {862 -webkit-transition: opacity 0.2s linear;863 -moz-transition: opacity 0.2s linear;864 -o-transition: opacity 0.2s linear;865 transition: opacity 0.2s linear;866 color: #FFFFFF;867 font-size: 18px;868 padding: 10px;869}870.welcome_image .welcome_text .welcome_button:hover {871 opacity: 0.6;872}873 874section.content {875 margin: 0 auto 360px auto;876 max-width: 1300px;877 padding: 0 20px;878 padding-top: 90px;879 width: 100%;880}881@media screen and (max-width: 668px) {882 section.content {883 padding: 60px 20px 40px;884 }885}886section.content .custom_page {887 color: #a0a0a0;888 line-height: 1.7em;889 margin: 0 auto;890 max-width: 640px;891 overflow-y: auto;892 padding: 0 1px;893 width: 100%;894}895section.content .custom_page a[href] {896 -webkit-transition: 0.2s linear;897 -moz-transition: 0.2s linear;898 -o-transition: 0.2s linear;899 transition: 0.2s linear;900 text-decoration: underline;901}902section.content .custom_page a[href]:hover {903 opacity: 0.6;904}905section.content .custom_page img {906 display: block;907 max-width: 100%;908}909section.content .custom_page p {910 margin: 0 auto 20px;911}912section.content .custom_page ol, section.content .custom_page ul {913 margin: 1em 0;914}915section.content .custom_page ul {916 list-style: disc;917 list-style-position: inside;918}919section.content .custom_page ol {920 list-style: decimal;921 list-style-position: inside;922}923section.content.page-contact {924 max-width: 500px;925}926section.content.page-product {927 *zoom: 1;928 max-width: 1200px;929 padding-top: 60px;930}931section.content.page-product:after {932 content: "";933 display: table;934 clear: both;935}936@media screen and (max-width: 668px) {937 section.content.page-product {938 overflow: hidden;939 padding-left: 0;940 padding-right: 0;941 padding-top: 30px;942 }943}944section.content.page-product h1 {945 font-size: 26px;946 font-weight: normal;947 line-height: 36px;948 margin-bottom: 15px;949 text-align: left;950}951section.content.page-product h2 {952 color: #a0a0a0;953 font-size: 18px;954}955section.content.page-home {956 padding-top: 145px;957}958section.content.page-home.has_welcome {959 padding-top: 200px;960}961@media screen and (max-width: 800px) {962 section.content.page-home.has_welcome {963 padding-top: 30px;964 }965}966@media screen and (max-width: 668px) {967 section.content.page-home.has_welcome {968 padding-top: 100px;969 }970 section.content.page-home.has_welcome .home_tagline {971 margin-bottom: 160px;972 }973}974@media screen and (max-width: 800px) {975 section.content.page-home {976 padding-top: 160px;977 }978}979@media screen and (max-width: 668px) {980 section.content.page-home {981 padding-left: 0;982 padding-right: 0;983 padding-top: 110px;984 }985}986section.content.page-home.home-empty {987 margin: 0 !important;988 padding: 0 !important;989}990@media screen and (max-width: 668px) {991 section.content.page-products {992 padding-left: 0;993 padding-right: 0;994 }995}996section.content h1 {997 text-align: center;998}999 1000footer.footer {1001 *zoom: 1;1002 background: #a0a0a0;1003 font-family: "Work Sans", sans-serif;1004 bottom: 0;1005 min-height: 120px;1006 padding: 60px 20px;1007 position: absolute;1008 text-align: center;1009 width: 100%;1010}1011footer.footer:after {1012 content: "";1013 display: table;1014 clear: both;1015}1016@media screen and (max-width: 668px) {1017 footer.footer {1018 height: auto;1019 margin: 20px 0 0;1020 padding-bottom: 120px;1021 }1022}1023footer.footer .footer_icons {1024 margin: 10px auto;1025}1026footer.footer .footer_icons li {1027 display: inline-block;1028 font-size: 0;1029 margin: 0 10px;1030}1031footer.footer .footer_icons li a {1032 color: #000000;1033 display: block;1034 font-size: 12px;1035}1036footer.footer .footer_icons li a svg {1037 -webkit-transition: 0.2s linear;1038 -moz-transition: 0.2s linear;1039 -o-transition: 0.2s linear;1040 transition: 0.2s linear;1041 fill: #222222;1042 height: 30px;1043 width: 30px;1044}1045footer.footer .footer_icons li a:hover svg {1046 opacity: 0.6;1047}1048footer.footer .footer_pages {1049 font-size: 0;1050 margin: 10px auto;1051 max-width: 640px;1052 text-align: center;1053 width: 100%;1054}1055footer.footer .footer_pages li {1056 display: inline-block;1057}1058@media screen and (max-width: 668px) {1059 footer.footer .footer_pages li {1060 display: block;1061 }1062}1063footer.footer .footer_pages li a {1064 -webkit-transition: 0.2s linear;1065 -moz-transition: 0.2s linear;1066 -o-transition: 0.2s linear;1067 transition: 0.2s linear;1068 color: #000000;1069 display: block;1070 font-size: 14px;1071 padding: 10px;1072}1073footer.footer .footer_pages li a:hover {1074 opacity: 0.6;1075}1076footer.footer .footer_credit {1077 color: #000000;1078 font-size: 12px;1079 margin-top: 14px;1080}1081footer.footer .footer_credit .credit a {1082 color: #000000;1083}1084@media screen and (max-width: 800px) {1085 footer.footer .footer_credit .credit {1086 display: block;1087 margin-top: 20px;1088 }1089}1090 1091.home_tagline {1092 color: #a0a0a0;1093 font-family: "Work Sans", sans-serif;1094 font-size: 26px;1095 line-height: 1.3em;1096 margin: 0 auto 200px;1097 max-width: 680px;1098 padding: 0 20px;1099 text-align: center;1100 width: 100%;1101}1102@media screen and (max-width: 800px) {1103 .home_tagline {1104 margin: 90px auto 120px;1105 }1106}1107@media screen and (max-width: 668px) {1108 .home_tagline {1109 margin: 60px auto;1110 }1111}1112 1113.mini_cart {1114 -webkit-box-shadow: 0 2px 10px 0 #a0a0a0;1115 -moz-box-shadow: 0 2px 10px 0 #a0a0a0;1116 box-shadow: 0 2px 10px 0 #a0a0a0;1117 background: #444444;1118 height: 430px;1119 display: none;1120 position: fixed;1121 margin: 0;1122 max-width: 380px;1123 right: 40px;1124 top: 90px;1125 width: 380px;1126 z-index: 4;1127}1128@media screen and (max-width: 668px) {1129 .mini_cart {1130 display: none !important;1131 }1132}1133.mini_cart .triangle {1134 height: 0;1135 border-style: solid;1136 border-width: 2px 15px 14px 15px;1137 border-color: transparent transparent #444444 transparent;1138 position: absolute;1139 right: 57px;1140 top: -12px;1141 width: 0;1142}1143@media screen and (max-width: 800px) {1144 .mini_cart .triangle {1145 right: 37px;1146 }1147}1148.mini_cart .cart_holder .item_holder {1149 height: 277px;1150 position: absolute;1151 overflow-y: scroll;1152 padding: 0 30px;1153 padding-top: 30px;1154}1155.mini_cart .cart_holder .item_holder .cart_item {1156 *zoom: 1;1157 display: block;1158 margin-bottom: 20px;1159}1160.mini_cart .cart_holder .item_holder .cart_item:after {1161 content: "";1162 display: table;1163 clear: both;1164}1165.mini_cart .cart_holder .item_holder .cart_item .item_image {1166 float: left;1167 width: 30%;1168}1169.mini_cart .cart_holder .item_holder .cart_item .item_info {1170 color: #ffffff;1171 float: left;1172 font-family: "Work Sans", sans-serif;1173 font-size: 18px;1174 line-height: 22px;1175 padding-left: 20px;1176 width: 70%;1177}1178.mini_cart .cart_holder .item_holder .cart_item .item_info > span {1179 color: #a0a0a0;1180 display: block;1181 font-family: "Work Sans", sans-serif;1182 font-size: 14px;1183 line-height: 18px;1184 margin-top: 4px;1185}1186.mini_cart .cart_holder .item_holder .cart_item .item_price {1187 color: #a0a0a0;1188 font-family: "Work Sans", sans-serif;1189 font-size: 14px;1190 margin-top: 2px;1191}1192.mini_cart .cart_holder .cart_footer {1193 bottom: 0;1194 height: 178px;1195 left: 0;1196 padding: 30px;1197 position: absolute;1198 right: 0;1199}1200.mini_cart .cart_holder .cart_footer .item_subtotal {