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.7k
1<!DOCTYPE html>2<html class="flexbox flexwrap">3 <head>4 <style>5 /*6 * jQuery FlexSlider v2.6.07 * http://www.woothemes.com/flexslider/8 *9 * Copyright 2012 WooThemes10 * Free to use under the GPLv2 and later license.11 * http://www.gnu.org/licenses/gpl-2.0.html12 *13 * Contributing author: Tyler Smith (@mbmufffin)14 *15 */16/* ====================================================================================================================17 * FONT-FACE18 * ====================================================================================================================*/19 20@font-face {21 font-family: 'flexslider-icon';22 src: url('fonts/flexslider-icon.eot');23 src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');24 font-weight: normal;25 font-style: normal;26}27/* ====================================================================================================================28 * RESETS29 * ====================================================================================================================*/30.flex-container a:hover,31.flex-slider a:hover {32 outline: none;33}34.slides,35.slides > li,36.flex-control-nav,37.flex-direction-nav {38 margin: 0;39 padding: 0;40 list-style: none;41}42.flex-pauseplay span {43 text-transform: capitalize;44}45/* ====================================================================================================================46 * BASE STYLES47 * ====================================================================================================================*/48.flexslider {49 margin: 0;50 padding: 0;51}52.flexslider .slides > li {53 display: none;54 -webkit-backface-visibility: hidden;55}56.flexslider .slides img {57 width: 100%;58 display: block;59}60.flexslider .slides:after {61 content: "\0020";62 display: block;63 clear: both;64 visibility: hidden;65 line-height: 0;66 height: 0;67}68html[xmlns] .flexslider .slides {69 display: block;70}71* html .flexslider .slides {72 height: 1%;73}74.no-js .flexslider .slides > li:first-child {75 display: block;76}77/* ====================================================================================================================78 * DEFAULT THEME79 * ====================================================================================================================*/80.flexslider {81 margin: 0 0 60px;82 background: #ffffff;83 border: 4px solid #ffffff;84 position: relative;85 zoom: 1;86 -webkit-border-radius: 4px;87 -moz-border-radius: 4px;88 border-radius: 4px;89 -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);90 -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);91 -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);92 box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);93}94.flexslider .slides {95 zoom: 1;96}97.flexslider .slides img {98 height: auto;99 -moz-user-select: none;100}101.flex-viewport {102 max-height: 2000px;103 -webkit-transition: all 1s ease;104 -moz-transition: all 1s ease;105 -ms-transition: all 1s ease;106 -o-transition: all 1s ease;107 transition: all 1s ease;108}109.loading .flex-viewport {110 max-height: 300px;111}112.carousel li {113 margin-right: 5px;114}115.flex-direction-nav {116 *height: 0;117}118.flex-direction-nav a {119 text-decoration: none;120 display: block;121 width: 40px;122 height: 40px;123 margin: -20px 0 0;124 position: absolute;125 top: 50%;126 z-index: 10;127 overflow: hidden;128 opacity: 0;129 cursor: pointer;130 color: rgba(0, 0, 0, 0.8);131 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);132 -webkit-transition: all 0.3s ease-in-out;133 -moz-transition: all 0.3s ease-in-out;134 -ms-transition: all 0.3s ease-in-out;135 -o-transition: all 0.3s ease-in-out;136 transition: all 0.3s ease-in-out;137}138.flex-direction-nav a:before {139 font-family: "flexslider-icon";140 font-size: 40px;141 display: inline-block;142 content: '\f001';143 color: rgba(0, 0, 0, 0.8);144 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);145}146.flex-direction-nav a.flex-next:before {147 content: '\f002';148}149.flex-direction-nav .flex-prev {150 left: -50px;151}152.flex-direction-nav .flex-next {153 right: -50px;154 text-align: right;155}156.flexslider:hover .flex-direction-nav .flex-prev {157 opacity: 0.7;158 left: 10px;159}160.flexslider:hover .flex-direction-nav .flex-prev:hover {161 opacity: 1;162}163.flexslider:hover .flex-direction-nav .flex-next {164 opacity: 0.7;165 right: 10px;166}167.flexslider:hover .flex-direction-nav .flex-next:hover {168 opacity: 1;169}170.flex-direction-nav .flex-disabled {171 opacity: 0!important;172 filter: alpha(opacity=0);173 cursor: default;174 z-index: -1;175}176.flex-pauseplay a {177 display: block;178 width: 20px;179 height: 20px;180 position: absolute;181 bottom: 5px;182 left: 10px;183 opacity: 0.8;184 z-index: 10;185 overflow: hidden;186 cursor: pointer;187 color: #000;188}189.flex-pauseplay a:before {190 font-family: "flexslider-icon";191 font-size: 20px;192 display: inline-block;193 content: '\f004';194}195.flex-pauseplay a:hover {196 opacity: 1;197}198.flex-pauseplay a.flex-play:before {199 content: '\f003';200}201.flex-control-nav {202 width: 100%;203 position: absolute;204 bottom: -40px;205 text-align: center;206}207.flex-control-nav li {208 margin: 0 6px;209 display: inline-block;210 zoom: 1;211 *display: inline;212}213.flex-control-paging li a {214 width: 11px;215 height: 11px;216 display: block;217 background: #666;218 background: rgba(0, 0, 0, 0.5);219 cursor: pointer;220 text-indent: -9999px;221 -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);222 -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);223 -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);224 box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);225 -webkit-border-radius: 20px;226 -moz-border-radius: 20px;227 border-radius: 20px;228}229.flex-control-paging li a:hover {230 background: #333;231 background: rgba(0, 0, 0, 0.7);232}233.flex-control-paging li a.flex-active {234 background: #000;235 background: rgba(0, 0, 0, 0.9);236 cursor: default;237}238.flex-control-thumbs {239 margin: 5px 0 0;240 position: static;241 overflow: hidden;242}243.flex-control-thumbs li {244 width: 25%;245 float: left;246 margin: 0;247}248.flex-control-thumbs img {249 width: 100%;250 height: auto;251 display: block;252 opacity: .7;253 cursor: pointer;254 -moz-user-select: none;255 -webkit-transition: all 1s ease;256 -moz-transition: all 1s ease;257 -ms-transition: all 1s ease;258 -o-transition: all 1s ease;259 transition: all 1s ease;260}261.flex-control-thumbs img:hover {262 opacity: 1;263}264.flex-control-thumbs .flex-active {265 opacity: 1;266 cursor: default;267}268/* ====================================================================================================================269 * RESPONSIVE270 * ====================================================================================================================*/271@media screen and (max-width: 860px) {272 .flex-direction-nav .flex-prev {273 opacity: 1;274 left: 10px;275 }276 .flex-direction-nav .flex-next {277 opacity: 1;278 right: 10px;279 }280}281/* Magnific Popup CSS */282 283 284.mfp-bg {285 top: 0;286 left: 0;287 width: 100%;288 height: 100%;289 z-index: 1042;290 overflow: hidden;291 position: fixed;292 background: #0b0b0b;293 opacity: 0.8;294 filter: alpha(opacity=80);295}296.mfp-wrap {297 top: 0;298 left: 0;299 width: 100%;300 height: 100%;301 z-index: 1043;302 position: fixed;303 outline: none !important;304 -webkit-backface-visibility: hidden;305}306.mfp-container {307 text-align: center;308 position: absolute;309 width: 100%;310 height: 100%;311 left: 0;312 top: 0;313 padding: 0 8px;314 -webkit-box-sizing: border-box;315 -moz-box-sizing: border-box;316 box-sizing: border-box;317}318.mfp-container:before {319 content: '';320 display: inline-block;321 height: 100%;322 vertical-align: middle;323}324.mfp-align-top .mfp-container:before {325 display: none;326}327.mfp-content {328 position: relative;329 display: inline-block;330 vertical-align: middle;331 margin: 0 auto;332 text-align: left;333 z-index: 1045;334}335.mfp-inline-holder .mfp-content,336.mfp-ajax-holder .mfp-content {337 width: 100%;338 cursor: auto;339}340.mfp-ajax-cur {341 cursor: progress;342}343.mfp-zoom-out-cur,344.mfp-zoom-out-cur .mfp-image-holder .mfp-close {345 cursor: -moz-zoom-out;346 cursor: -webkit-zoom-out;347 cursor: zoom-out;348}349.mfp-zoom {350 cursor: pointer;351 cursor: -webkit-zoom-in;352 cursor: -moz-zoom-in;353 cursor: zoom-in;354}355.mfp-auto-cursor .mfp-content {356 cursor: auto;357}358.mfp-close,359.mfp-arrow,360.mfp-preloader,361.mfp-counter {362 -webkit-user-select: none;363 -moz-user-select: none;364 user-select: none;365}366.mfp-loading.mfp-figure {367 display: none;368}369.mfp-hide {370 display: none !important;371}372.mfp-preloader {373 color: #CCC;374 position: absolute;375 top: 50%;376 width: auto;377 text-align: center;378 margin-top: -0.8em;379 left: 8px;380 right: 8px;381 z-index: 1044;382}383.mfp-preloader a {384 color: #CCC;385}386.mfp-preloader a:hover {387 color: #FFF;388}389.mfp-s-ready .mfp-preloader {390 display: none;391}392.mfp-s-error .mfp-content {393 display: none;394}395button.mfp-close,396a.mfp-arrow {397 background: none;398 overflow: visible;399 cursor: pointer;400 border: 0;401 display: block;402 padding: 0;403 z-index: 1046;404 -webkit-box-shadow: none;405 box-shadow: none;406}407.mfp-close {408 width: 44px;409 height: 44px;410 line-height: 44px;411 position: absolute;412 right: 0;413 top: 0;414 text-decoration: none;415 text-align: center;416 opacity: 0.65;417 filter: alpha(opacity=65);418 padding: 0 0 18px 10px;419 color: #FFF;420 font-style: normal;421 font-size: 28px;422 font-family: Arial, Baskerville, monospace;423}424.mfp-close:hover,425.mfp-close:focus {426 background: none;427 border: 0px;428 opacity: 1;429 filter: alpha(opacity=100);430}431.mfp-close:active {432 top: 1px;433}434.mfp-close svg {435 fill: #FFF;436 height: 18px;437 width: 18px;438 position: relative;439 z-index: -1;440}441.mfp-close-btn-in .mfp-close {442 color: #333;443}444.mfp-image-holder .mfp-close,445.mfp-iframe-holder .mfp-close {446 color: #FFF;447 text-align: right;448 width: 100%;449}450.mfp-counter {451 position: absolute;452 top: 16px;453 left: 0;454 color: #CCC;455 font-size: 14px;456 line-height: 18px;457 white-space: nowrap;458}459.mfp-arrow {460 position: absolute;461 background: rgba(0, 0, 0, 0.5);462 opacity: .8;463 filter: alpha(opacity=65);464 margin: 0;465 top: 50%;466 margin-top: -55px;467 padding: 0;468 width: 80px;469 height: 80px;470 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);471}472.mfp-arrow:active {473 margin-top: -54px;474}475.mfp-arrow:hover,476.mfp-arrow:focus {477 background: #000;478 opacity: 1;479 filter: alpha(opacity=100);480}481.mfp-arrow .mfp-b,482.mfp-arrow .mfp-a {483 content: '';484 display: block;485 width: 0;486 height: 0;487 position: absolute;488 left: 0;489 top: 0;490 margin-top: 35px;491 margin-left: 35px;492 border: medium inset transparent;493}494.mfp-arrow:after,495.mfp-arrow .mfp-a {496 top: 8px;497}498.mfp-arrow:before,499.mfp-arrow .mfp-b {500 opacity: 0.7;501}502.mfp-arrow-left {503 left: 20px;504 border-radius: 2px;505}506.mfp-arrow-left:after,507.mfp-arrow-left .mfp-a {508 margin-left: 31px;509}510.mfp-arrow-left:before,511.mfp-arrow-left .mfp-b {512 margin-left: 25px;513}514.mfp-arrow-right {515 right: 20px;516 border-radius: 2px;517}518.mfp-arrow-right:after,519.mfp-arrow-right .mfp-a {520 margin-left: 39px;521}522.mfp-arrow-right:before,523.mfp-arrow-right .mfp-b {} .mfp-iframe-holder {524 padding-top: 40px;525 padding-bottom: 40px;526}527.mfp-iframe-holder .mfp-content {528 line-height: 0;529 width: 100%;530 max-width: 900px;531}532.mfp-iframe-holder .mfp-close {533 top: -40px;534}535.mfp-iframe-scaler {536 width: 100%;537 height: 0;538 overflow: hidden;539 padding-top: 56.25%;540}541.mfp-iframe-scaler iframe {542 position: absolute;543 display: block;544 top: 0;545 left: 0;546 width: 100%;547 height: 100%;548 box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);549 background: #000;550}551/* Main image in popup */552 553img.mfp-img {554 width: auto;555 max-width: 100%;556 height: auto;557 display: block;558 line-height: 0;559 -webkit-box-sizing: border-box;560 -moz-box-sizing: border-box;561 box-sizing: border-box;562 padding: 40px 0 40px;563 margin: 0 auto;564}565/* The shadow behind the image */566 567.mfp-figure {568 line-height: 0;569}570.mfp-figure:after {571 content: '';572 position: absolute;573 left: 0;574 top: 40px;575 bottom: 40px;576 display: block;577 right: 0;578 width: auto;579 height: auto;580 z-index: -1;581 box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);582 background: #444;583}584.mfp-figure small {585 color: #BDBDBD;586 display: block;587 font-size: 12px;588 line-height: 14px;589}590.mfp-figure figure {591 margin: 0;592}593.mfp-bottom-bar {594 margin-top: 0;595 position: absolute;596 top: 0;597 left: 0;598 width: 100%;599 cursor: auto;600}601.mfp-title {602 text-align: left;603 line-height: 18px;604 color: #F3F3F3;605 word-wrap: break-word;606 padding-right: 36px;607}608.mfp-image-holder .mfp-content {609 max-width: 100%;610}611.mfp-gallery .mfp-image-holder .mfp-figure {612 cursor: pointer;613}614@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {615 .mfp-img-mobile .mfp-image-holder {616 padding-left: 0;617 padding-right: 0;618 }619 .mfp-img-mobile img.mfp-img {620 padding: 0;621 }622 .mfp-img-mobile .mfp-figure:after {623 top: 0;624 bottom: 0;625 }626 .mfp-img-mobile .mfp-figure small {627 display: inline;628 margin-left: 5px;629 }630 .mfp-img-mobile .mfp-bottom-bar {631 background: rgba(0, 0, 0, 0.6);632 bottom: 0;633 margin: 0;634 top: auto;635 padding: 3px 5px;636 position: fixed;637 -webkit-box-sizing: border-box;638 -moz-box-sizing: border-box;639 box-sizing: border-box;640 }641 .mfp-img-mobile .mfp-bottom-bar:empty {642 padding: 0;643 }644 .mfp-img-mobile .mfp-counter {645 right: 5px;646 top: 3px;647 }648 .mfp-img-mobile .mfp-close {649 top: 0;650 right: 0;651 width: 35px;652 height: 35px;653 line-height: 35px;654 background: rgba(0, 0, 0, 0.6);655 position: fixed;656 text-align: center;657 padding: 0;658 }659}660.mfp-arrow svg {661 height: 32px;662 width: 32px;663 fill: #FFF;664 position: relative;665 z-index: -1;666 top: 50%;667 -webkit-transform: translateY(-50%);668 -ms-transform: translateY(-50%);669 transform: translateY(-50%);670}671@media all and (max-width: 900px) {672 .mfp-container {673 padding-left: 6px;674 padding-right: 6px;675 }676}677.mfp-ie7 .mfp-img {678 padding: 0;679}680.mfp-ie7 .mfp-bottom-bar {681 width: 600px;682 left: 50%;683 margin-left: -300px;684 margin-top: 5px;685 padding-bottom: 5px;686}687.mfp-ie7 .mfp-container {688 padding: 0;689}690.mfp-ie7 .mfp-content {691 padding-top: 44px;692}693.mfp-ie7 .mfp-close {694 top: 0;695 right: 0;696 padding-top: 0;697}698/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */699html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}700* {701 box-sizing: border-box;702}703 704html {705 min-height: 100%;706 overflow-y: scroll;707 position: relative;708}709 710body {711 -moz-osx-font-smoothing: grayscale;712 -webkit-font-smoothing: antialiased;713 background-color: #ffffff;714 color: #555555;715 font-family: "Montserrat", sans-serif;716 line-height: 1;717 margin-bottom: 120px;718}719body.standalone {720 background-color: #ffffff;721 padding: 100px 15px;722}723@media screen and (max-width: 800px) {724 body.standalone {725 padding: 60px 15px;726 }727}728body.standalone .message_holder {729 -webkit-border-radius: 2px;730 -moz-border-radius: 2px;731 -ms-border-radius: 2px;732 -o-border-radius: 2px;733 border-radius: 2px;734 background-color: #ffffff;735 border: 1px solid #E5E5E5;736 margin: 0 auto;737 max-width: 600px;738 padding: 40px;739 text-align: center;740 width: 100%;741}742@media screen and (max-width: 800px) {743 body.standalone .message_holder {744 padding: 20px;745 }746}747body.standalone .message_holder h1 {748 margin: 0;749 min-height: 0;750}751body.standalone .message_holder p:last-child {752 margin: 15px 0 0;753}754 755a, a:visited {756 -webkit-transition: all 0.2s ease-in-out;757 -moz-transition: all 0.2s ease-in-out;758 -o-transition: all 0.2s ease-in-out;759 transition: all 0.2s ease-in-out;760 color: #656565;761 text-decoration: none;762}763a:hover, a:visited:hover {764 color: #f2add6;765}766 767h1, h2, h3, h4, h5, h6 {768 color: #70bcbb;769 font-family: "Abril Fatface", cursive;770 font-weight: 500;771 margin: 0;772 padding: 0;773}774 775h1 {776 font-size: 26px;777 line-height: 1.3em;778 margin-bottom: 30px;779 margin-top: 10px;780 min-height: 52px;781}782@media only screen and (max-width: 800px) {783 h1 {784 font-size: 24px;785 text-align: center;786 }787}788@media only screen and (max-width: 640px) {789 h1 {790 margin-bottom: 15px;791 }792}793 794h2 {795 font-size: 18px;796 line-height: 18px;797}798 799img {800 display: block;801 max-width: 100%;802}803 804p {805 font-size: 14px;806 line-height: 1.7em;807 margin: 0 0 20px;808}809 810ul, ol {811 list-style-position: inside;812 margin: 0;813 padding: 0;814}815 816.mobile_nav {817 *zoom: 1;818 -webkit-box-shadow: 0px 1px 3px #E5E5E5;819 -moz-box-shadow: 0px 1px 3px #E5E5E5;820 box-shadow: 0px 1px 3px #E5E5E5;821 background-color: #ffffff;822 border-bottom: 1px solid #E5E5E5;823 display: none;824 font-size: 21px;825 height: 60px;826 padding: 0 20px;827 position: absolute;828 top: 0;829 width: 100%;830}831.mobile_nav:after {832 content: "";833 display: table;834 clear: both;835}836@media only screen and (max-width: 800px) {837 .mobile_nav {838 display: block;839 z-index: 10;840 }841}842.mobile_nav .open_menu {843 position: relative;844 top: 50%;845 -webkit-transform: translateY(-50%);846 -ms-transform: translateY(-50%);847 transform: translateY(-50%);848 -webkit-transition: 0.5s ease-in-out;849 -moz-transition: 0.5s ease-in-out;850 -o-transition: 0.5s ease-in-out;851 transition: 0.5s ease-in-out;852 float: left;853 height: 14px;854 width: 22px;855}856.mobile_nav .open_menu span {857 -webkit-border-radius: 2px;858 -moz-border-radius: 2px;859 -ms-border-radius: 2px;860 -o-border-radius: 2px;861 border-radius: 2px;862 -webkit-transform: rotate(0deg);863 -moz-transform: rotate(0deg);864 -ms-transform: rotate(0deg);865 -o-transform: rotate(0deg);866 transform: rotate(0deg);867 -webkit-transition: 0.25s ease-in-out;868 -moz-transition: 0.25s ease-in-out;869 -o-transition: 0.25s ease-in-out;870 transition: 0.25s ease-in-out;871 display: block;872 background: #70bcbb;873 width: 100%;874 height: 2px;875 position: absolute;876 left: 0;877 opacity: 1;878}879.mobile_nav .open_menu span:nth-child(1) {880 top: 0px;881}882.mobile_nav .open_menu span:nth-child(2), .mobile_nav .open_menu span:nth-child(3) {883 top: 50%;884}885.mobile_nav .open_menu span:nth-child(4) {886 top: 99%;887}888.mobile_nav .open_menu.open span:nth-child(1) {889 top: 18px;890 width: 0%;891 left: 50%;892}893.mobile_nav .open_menu.open span:nth-child(2) {894 -webkit-transform: rotate(45deg);895 -moz-transform: rotate(45deg);896 -ms-transform: rotate(45deg);897 -o-transform: rotate(45deg);898 transform: rotate(45deg);899}900.mobile_nav .open_menu.open span:nth-child(3) {901 -webkit-transform: rotate(-45deg);902 -moz-transform: rotate(-45deg);903 -ms-transform: rotate(-45deg);904 -o-transform: rotate(-45deg);905 transform: rotate(-45deg);906}907.mobile_nav .open_menu.open span:nth-child(4) {908 top: 18px;909 width: 0%;910 left: 50%;911}912.mobile_nav:hover .line-1, .mobile_nav:focus .line-1 {913 -webkit-transform: translateY(-2px);914 -moz-transform: translateY(-2px);915 -ms-transform: translateY(-2px);916 -o-transform: translateY(-2px);917 transform: translateY(-2px);918}919.mobile_nav:hover .line3, .mobile_nav:focus .line3 {920 -webkit-transform: translateY(2px);921 -moz-transform: translateY(2px);922 -ms-transform: translateY(2px);923 -o-transform: translateY(2px);924 transform: translateY(2px);925}926.mobile_nav .mobile_cart {927 *zoom: 1;928 position: relative;929 top: 50%;930 -webkit-transform: translateY(-50%);931 -ms-transform: translateY(-50%);932 transform: translateY(-50%);933 float: right;934 height: 14px;935 font-size: 14px;936}937.mobile_nav .mobile_cart:after {938 content: "";939 display: table;940 clear: both;941}942.mobile_nav .mobile_cart .cart_icon {943 -webkit-transition: all 0.2s ease-in-out;944 -moz-transition: all 0.2s ease-in-out;945 -o-transition: all 0.2s ease-in-out;946 transition: all 0.2s ease-in-out;947 fill: #656565;948 float: left;949 height: 21px;950 margin-right: 10px;951 margin-top: -4px;952 width: 21px;953}954.mobile_nav .mobile_cart:hover, .mobile_nav .mobile_cart:focus, .mobile_nav .mobile_cart:active {955 -webkit-transition: all 0.2s ease-in-out;956 -moz-transition: all 0.2s ease-in-out;957 -o-transition: all 0.2s ease-in-out;958 transition: all 0.2s ease-in-out;959}960.mobile_nav .mobile_cart:hover .cart_icon, .mobile_nav .mobile_cart:focus .cart_icon, .mobile_nav .mobile_cart:active .cart_icon {961 fill: #f2add6;962}963 964.wrap {965 *zoom: 1;966 margin: 0 auto;967 max-width: 1300px;968 padding: 0 40px;969 width: 100%;970}971.wrap:after {972 content: "";973 display: table;974 clear: both;975}976@media only screen and (max-width: 800px) {977 .wrap {978 padding: 0 20px;979 }980}981 982header {983 background: #ffffff;984 border-bottom: 1px solid #E5E5E5;985 font-family: "Abril Fatface", cursive;986 font-size: 28px;987 padding: 80px 0;988 margin-bottom: 40px;989 text-align: center;990}991@media only screen and (max-width: 800px) {992 header {993 margin: 0 0 40px;994 padding: 100px 15px 40px;995 }996}997header a.store_header {998 color: #70bcbb;999 display: inline-block;1000 font-size: 42px;1001}1002header a.store_header.text {1003 display: block;1004 line-height: 1.2em;1005 white-space: normal;1006 word-wrap: break-word;1007}1008@media only screen and (max-width: 800px) {1009 header a.store_header {1010 font-size: 34px;1011 }1012}1013@media only screen and (max-width: 640px) {1014 header a.store_header {1015 font-size: 30px;1016 }1017}1018header a.store_header img {1019 max-height: 250px;1020 max-width: 100%;1021}1022header.logo {1023 padding: 50px 0;1024}1025@media only screen and (max-width: 800px) {1026 header.logo {1027 padding: 100px 15px 40px;1028 }1029}1030header.wrap {1031 padding: 0;1032}1033 1034.hidden {1035 display: none;1036}1037 1038.content {1039 *zoom: 1;1040 float: right ;1041 position: relative;1042 padding-bottom: 80px;1043 max-width: 75%;1044 width: 100%;1045}1046.content:after {1047 content: "";1048 display: table;1049 clear: both;1050}1051@media only screen and (max-width: 1200px) {1052 .content {1053 max-width: 75%;1054 }1055}1056@media only screen and (max-width: 945px) {1057 .content {1058 max-width: 71%;1059 }1060}1061@media only screen and (max-width: 800px) {1062 .content {1063 float: none;1064 padding-bottom: 40px;1065 max-width: 100%;1066 }1067}1068 1069.custom_content {1070 font-size: 14px;1071 line-height: 1.7em;1072 margin: 0 ;1073 max-width: 700px;1074 width: 100%;1075}1076.custom_content iframe {1077 max-width: 100%;1078}1079 1080.success_message {1081 margin-top: 20px;1082}1083.success_message .button {1084 margin: 32px 0;1085 width: 320px;1086}1087@media screen and (max-width: 800px) {1088 .success_message {1089 text-align: center;1090 }1091}1092 1093aside {1094 -webkit-border-radius: 2px;1095 -moz-border-radius: 2px;1096 -ms-border-radius: 2px;1097 -o-border-radius: 2px;1098 border-radius: 2px;1099 background-color: #ffffff;1100 float: left ;1101 padding-bottom: 80px;1102 width: 17%;1103}1104@media only screen and (max-width: 1200px) {1105 aside {1106 width: 20%;1107 }1108}1109@media only screen and (max-width: 945px) {1110 aside {1111 width: 23%;1112 }1113}1114@media only screen and (max-width: 800px) {1115 aside {1116 -webkit-border-radius: 0;1117 -moz-border-radius: 0;1118 -ms-border-radius: 0;1119 -o-border-radius: 0;1120 border-radius: 0;1121 height: auto;1122 left: 0;1123 opacity: 0;1124 padding: 0 20px;1125 position: absolute;1126 top: 0;1127 visibility: hidden;1128 width: 100%;1129 }1130}1131aside.open {1132 -webkit-transition: all 0.2s ease-in-out;1133 -moz-transition: all 0.2s ease-in-out;1134 -o-transition: all 0.2s ease-in-out;1135 transition: all 0.2s ease-in-out;1136 -webkit-box-shadow: 0px 1px 3px #E5E5E5;1137 -moz-box-shadow: 0px 1px 3px #E5E5E5;1138 box-shadow: 0px 1px 3px #E5E5E5;1139 border-bottom: 1px solid #E5E5E5;1140 display: block;1141 opacity: 1;1142 padding-top: 80px;1143 visibility: visible;1144 z-index: 9;1145}1146aside h3 {1147 border-bottom: 1px solid #E5E5E5;1148 font-size: 17px;1149 line-height: 1.3em;1150 margin-bottom: 4px;1151 padding: 0 0 6px;1152}1153aside .side_cart {1154 *zoom: 1;1155 -webkit-border-radius: 2px;1156 -moz-border-radius: 2px;1157 -ms-border-radius: 2px;1158 -o-border-radius: 2px;1159 border-radius: 2px;1160 background-color: #ffffff;1161 border: 1px solid #70bcbb;1162 color: #70bcbb;1163 display: block;1164 font-family: "Montserrat", sans-serif;1165 font-size: 14px;1166 height: 50px;1167 margin-bottom: 40px;1168 padding: 0 10px;1169 position: relative;1170}1171aside .side_cart:after {1172 content: "";1173 display: table;1174 clear: both;1175}1176@media only screen and (max-width: 1200px) {1177 aside .side_cart {1178 font-size: 13px;1179 height: 40px;1180 }1181}1182@media only screen and (max-width: 800px) {1183 aside .side_cart {1184 display: none;1185 }1186}1187aside .side_cart .cart_title {1188 position: relative;1189 top: 50%;1190 -webkit-transform: translateY(-50%);1191 -ms-transform: translateY(-50%);1192 transform: translateY(-50%);1193 float: left;1194 margin-left: 27px;1195}1196@media only screen and (max-width: 1200px) {1197 aside .side_cart .cart_title {1198 margin-left: 22px;1199 }1200}