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="js flexbox flexboxlegacy canvas canvastext postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache" data-cms="" data-siteid="19082" data-themeid="mk023" lang="en" style xml:lang="en">3 <!--<![endif]-->4 <head>5 <!--6 7Theme: MK023 "Graham"8Design © 2023 Monk Development, Inc. All rights reserved.9For help, see: http://help.ekklesia360.com/10 11-->12 <!-- Meta -->13 <title>14 Bethany Lutheran Church15 </title>16 <meta charset="utf-8">17 <meta content="IE=edge" http-equiv="X-UA-Compatible">18 <meta content name="description">19 <meta content name="keywords">20 <meta content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" name="viewport">21 <meta content="black" name="apple-mobile-web-app-status-bar-style">22 <!-- Icons -->23 <!-- Styles -->24 <!--[if IE 9]><![endif]-->25 <!--[if IE 8]><![endif]-->26 <style>27 @font-face {28 font-family: 'Montserrat';29 font-style: normal;30 font-weight: 400;31 src: url(http://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aX8.ttf) format('truetype');32}33@font-face {34 font-family: 'Montserrat';35 font-style: normal;36 font-weight: 700;37 src: url(http://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM73w5aX8.ttf) format('truetype');38}39@font-face {40 font-family: 'Vollkorn';41 font-style: italic;42 font-weight: 400;43 src: url(http://fonts.gstatic.com/s/vollkorn/v23/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmeObE.ttf) format('truetype');44}45@font-face {46 font-family: 'Vollkorn';47 font-style: normal;48 font-weight: 400;49 src: url(http://fonts.gstatic.com/s/vollkorn/v23/0ybgGDoxxrvAnPhYGzMlQLzuMasz6Df2MHGeHmmZ.ttf) format('truetype');50}51@font-face {52 font-family: 'Vollkorn';53 font-style: normal;54 font-weight: 700;55 src: url(http://fonts.gstatic.com/s/vollkorn/v23/0ybgGDoxxrvAnPhYGzMlQLzuMasz6Df213aeHmmZ.ttf) format('truetype');56}57 58 59 60/* Common CSS */61 62 63 64article,65aside,66details,67figcaption,68figure,69footer,70header,71hgroup,72nav,73section,74summary {75 display: block;76}77 78audio,79canvas,80video {81 display: inline-block;82 *display: inline;83 *zoom: 1;84}85 86audio:not([controls]) {87 display: none;88 height: 0;89}90 91[hidden] {92 display: none;93}94 95html {96 font-size: 100%;97 background: white;98 color: black;99 -webkit-text-size-adjust: 100%;100 -ms-text-size-adjust: 100%;101}102 103html,104button,105input,106select,107textarea {108 font-family: sans-serif;109}110 111body {112 margin: 0;113}114 115a:focus {116 outline: thin dotted;117}118a:hover, a:active {119 outline: 0;120}121 122h1 {123 font-size: 2em;124 margin: 0.67em 0;125}126 127h2 {128 font-size: 1.5em;129 margin: 0.83em 0;130}131 132h3 {133 font-size: 1.17em;134 margin: 1em 0;135}136 137h4 {138 font-size: 1em;139 margin: 1.33em 0;140}141 142h5 {143 font-size: 0.83em;144 margin: 1.67em 0;145}146 147h6 {148 font-size: 0.75em;149 margin: 2.33em 0;150}151 152abbr[title] {153 border-bottom: 1px dotted;154}155 156b,157strong {158 font-weight: bold;159}160 161blockquote {162 margin: 1em 40px;163}164 165dfn {166 font-style: italic;167}168 169mark {170 background: #ff0;171 color: #000;172}173 174p,175pre {176 margin: 1em 0;177}178 179code,180kbd,181pre,182samp {183 font-family: monospace, serif;184 _font-family: 'courier new', monospace;185 font-size: 1em;186}187 188pre {189 white-space: pre;190 white-space: pre-wrap;191 word-wrap: break-word;192}193 194q {195 quotes: "\201C" "\201D" "\2018" "\2019";196}197 198q {199 quotes: none;200}201 202q:before,203q:after {204 content: '';205 content: none;206}207 208small {209 font-size: 80%;210}211 212sub,213sup {214 font-size: 75%;215 line-height: 0;216 position: relative;217 vertical-align: baseline;218}219 220sup {221 top: -0.5em;222}223 224sub {225 bottom: -0.25em;226}227 228dl,229menu,230ol,231ul {232 margin: 1em 0;233}234 235dd {236 margin: 0 0 0 40px;237}238 239menu,240ol,241ul {242 padding: 0 0 0 40px;243}244 245nav ul,246nav ol {247 list-style-image: none;248}249 250img {251 border: 0;252 -ms-interpolation-mode: bicubic;253}254 255svg:not(:root) {256 overflow: hidden;257}258 259figure {260 margin: 0;261}262 263form {264 margin: 0;265}266 267fieldset {268 border: 1px solid #c0c0c0;269 margin: 0 2px;270 padding: 0.35em 0.625em 0.75em;271}272 273legend {274 border: 0;275 padding: 0;276 white-space: normal;277 *margin-left: -7px;278}279 280button,281input,282select,283textarea {284 font-family: inherit;285 font-size: 100%;286 margin: 0;287 vertical-align: baseline;288 *vertical-align: middle;289}290 291button,292input {293 line-height: normal;294}295 296button,297select {298 text-transform: none;299}300 301button,302html input[type="button"],303input[type="reset"],304input[type="submit"] {305 -webkit-appearance: button;306 cursor: pointer;307 *overflow: visible;308}309 310button[disabled],311input[disabled] {312 cursor: default;313}314 315input[type="checkbox"],316input[type="radio"] {317 box-sizing: border-box;318 padding: 0;319 *height: 13px;320 *width: 13px;321}322 323input[type="search"] {324 -webkit-appearance: textfield;325 -moz-box-sizing: content-box;326 -webkit-box-sizing: content-box;327 box-sizing: content-box;328}329 330input[type="search"]::-webkit-search-cancel-button,331input[type="search"]::-webkit-search-decoration {332 -webkit-appearance: none;333}334 335button::-moz-focus-inner, input::-moz-focus-inner {336 border: 0;337 padding: 0;338}339 340textarea {341 overflow: auto;342 vertical-align: top;343}344 345table {346 border-collapse: collapse;347 border-spacing: 0;348}349 350/*-----Navigation-----*/351nav#desktop-nav {352 z-index: 1000;353 clear: both;354 overflow: hidden;355 height: 52px;356 padding: 0;357 margin: 0 auto;358 border: 3px solid rgba(0, 0, 0, 0.2);359 border-bottom: none;360 -webkit-border-radius: 8px 8px 0 0;361 -moz-border-radius: 8px 8px 0 0;362 -ms-border-radius: 8px 8px 0 0;363 -o-border-radius: 8px 8px 0 0;364 border-radius: 8px 8px 0 0;365}366@media (min-width: 37.5em) {367 nav#desktop-nav {368 display: table;369 }370}371 372#nav {373 margin: 0;374 padding: 0;375 overflow: hidden;376 font-family: "Montserrat", sans-serif;377 background-image: url("/_assets/img/textures/aluminium-red.png");378 background-repeat: repeat;379 -webkit-box-shadow: inset 0 -2px 11px 0 rgba(0, 0, 0, 0.15);380 -moz-box-shadow: inset 0 -2px 11px 0 rgba(0, 0, 0, 0.15);381 box-shadow: inset 0 -2px 11px 0 rgba(0, 0, 0, 0.15);382}383 384#nav li {385 padding-left: 0;386 margin-bottom: 0;387}388 389#nav > li {390 float: left;391 background: url("/_assets/img/nav-bg.png") left center repeat-y;392}393#nav > li:first-child {394 background: none;395}396#nav > li > a {397 padding: 0 45px;398 -webkit-transition: background 0.2s ease-in-out;399 -moz-transition: background 0.2s ease-in-out;400 -o-transition: background 0.2s ease-in-out;401 transition: background 0.2s ease-in-out;402}403#nav > li:hover > a, #nav > li.current > a {404 font-weight: 400;405}406#nav > li#search-desktop {407 display: none;408}409@media (min-width: 61.5em) {410 #nav > li#search-desktop {411 display: inline-block;412 margin-right: 0;413 }414}415#nav > li:hover > ul {416 position: absolute;417 display: block;418 z-index: 5000;419}420#nav > li > ul {421 position: absolute;422 text-align: center;423 display: none;424 left: 0;425 margin: 0;426 padding: 0;427 width: 100%;428 z-index: 4000;429 background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, transparent));430 background: -webkit-linear-gradient(#ffffff, transparent);431 background: -moz-linear-gradient(#ffffff, transparent);432 background: -o-linear-gradient(#ffffff, transparent);433 background: linear-gradient(#ffffff, transparent);434 border-bottom: 1px solid rgba(0, 0, 0, 0.25);435 -webkit-box-shadow: 0 0 0 0 white;436 -moz-box-shadow: 0 0 0 0 white;437 box-shadow: 0 0 0 0 white;438}439#nav > li > ul * {440 text-transform: none;441 text-decoration: none;442 line-height: 20.8px;443}444#nav > li > ul > li {445 font-size: 12px;446 display: inline-block;447 padding: 0 15px;448}449#nav > li > ul > li > a {450 display: block;451 font-size: 1.3em;452 font-weight: 400;453}454#nav > li > ul > li:hover > a, #nav > li > ul > li.current > a {455 background: rgba(0, 0, 0, 0.05);456 -webkit-border-radius: 6px;457 -moz-border-radius: 6px;458 -ms-border-radius: 6px;459 -o-border-radius: 6px;460 border-radius: 6px;461 -webkit-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.2);462 -moz-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.2);463 box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.2);464}465#nav > li > ul > li > ul {466 padding: 18px 0;467 margin-bottom: 5px;468}469#nav > li > ul > li > a, #nav > li > ul > li > ul > li > a, #nav > li > ul > li > ul > li > ul > li > a {470 padding: 5px 15px;471}472#nav > li > ul > li > ul > li a {473 font-size: 0.8em;474 font-weight: 700;475 text-decoration: none;476}477#nav > li > ul > li > ul > li a:hover {478 text-decoration: underline;479}480#nav > li > ul > li > ul > li > ul > li a {481 font-size: 0.7em;482 font-weight: 700;483 text-decoration: none;484}485#nav > li > ul > li > ul > li > ul > li a:hover {486 text-decoration: underline;487}488 489#nav > li,490#nav > li > a {491 display: inline-block;492 height: 52px;493 text-decoration: none;494 font-size: 1em;495}496 497#nav > li,498#nav > li > a {499 font-weight: 400;500 text-transform: uppercase;501 line-height: 50px;502}503 504#nav > li > a {505 font-size: 1.22em;506}507 508#search-desktop {509 display: none;510}511#search-desktop form,512#search-desktop fieldset {513 position: relative;514}515#search-desktop form {516 display: inline-block;517 overflow: hidden;518 width: 0;519 margin-top: -9px;520 -webkit-transition: width 0.3s ease-in-out;521 -moz-transition: width 0.3s ease-in-out;522 -o-transition: width 0.3s ease-in-out;523 transition: width 0.3s ease-in-out;524}525#search-desktop form.active {526 width: 165px;527}528#search-desktop form a.icon-search {529 display: inline-block;530 position: absolute;531 left: 0;532 top: 0;533 margin: 19px 0 0 21px;534 color: rgba(0, 0, 0, 0.4);535 font-size: 1.3em;536}537#search-desktop form a.icon-search:hover {538 color: #000;539}540#search-desktop input {541 height: 30px;542 width: 110px;543 margin-left: 15px;544 padding: 0 0.5em 0 30px;545 border: none;546 -webkit-border-radius: 2px;547 -moz-border-radius: 2px;548 -ms-border-radius: 2px;549 -o-border-radius: 2px;550 border-radius: 2px;551}552#search-desktop .search {553 font-size: 1.6em;554 line-height: 48px;555}556 557header#primary {558 position: relative;559 z-index: 1000;560 border-top: 10px solid rgba(0, 0, 0, 0.15);561 display: none;562 background-image: url("/_assets/img/textures/grain5.png");563 background-repeat: repeat;564}565@media (min-width: 61.5em) {566 header#primary {567 display: block;568 }569}570header#primary:before {571 content: " ";572 position: absolute;573 display: block;574 top: 0;575 left: 0;576 z-index: -1;577 width: 50%;578 height: 100%;579 background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, transparent), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, transparent));580 background-image: -webkit-linear-gradient(left, transparent, rgba(255, 255, 255, 0.2), transparent);581 background-image: -moz-linear-gradient(left, transparent, rgba(255, 255, 255, 0.2), transparent);582 background-image: -o-linear-gradient(left, transparent, rgba(255, 255, 255, 0.2), transparent);583 background-image: linear-gradient(left, transparent, rgba(255, 255, 255, 0.2), transparent);584}585header#primary .container {586 position: initial;587}588header#primary #meta {589 display: table;590 padding: 35px 0;591}592header#primary #meta #logo {593 display: table-cell;594 text-align: left;595 margin-left: 0;596 width: 200px;597 vertical-align: middle;598}599header#primary #meta #logo img {600 max-width: 100%;601 height: auto;602}603header#primary #meta .wrap {604 display: table-cell;605 vertical-align: middle;606 border-top: 1px solid rgba(0, 0, 0, 0.25);607 border-bottom: 1px solid rgba(0, 0, 0, 0.25);608}609header#primary #meta .wrap p.tagline,610header#primary #meta .wrap .quick-links,611header#primary #meta .wrap #searchForm {612 display: inline-block;613 vertical-align: middle;614}615header#primary #meta .wrap p.tagline {616 font-size: 15px;617 font-style: italic;618 margin: 1em 20px;619 width: 275px;620}621header#primary #meta .wrap .quick-links {622 width: 203px;623 margin: 0 20px 0 0;624 padding: 0;625}626header#primary #meta .wrap .quick-links li {627 float: left;628 list-style-type: none;629 font-size: 12px;630 padding: 0 10px;631 margin-bottom: 0;632 border-right-style: solid;633 border-right-width: 1px;634}635header#primary #meta .wrap .quick-links li a {636 font-style: italic;637 text-decoration: none;638}639header#primary #meta .wrap .quick-links li a:hover {640 text-decoration: underline;641}642header#primary #meta .wrap .quick-links li:last-child {643 border-right: none;644}645header#primary #meta .wrap #searchForm {646 overflow: hidden;647 line-height: 0;648 background: #BBB;649 background: rgba(0, 0, 0, 0.3);650 -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 1px 0 0 rgba(255, 255, 255, 0.2);651 -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 1px 0 0 rgba(255, 255, 255, 0.2);652 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 1px 0 0 rgba(255, 255, 255, 0.2);653 -webkit-border-radius: 4px;654 -moz-border-radius: 4px;655 -ms-border-radius: 4px;656 -o-border-radius: 4px;657 border-radius: 4px;658}659header#primary #meta .wrap #searchForm fieldset {660 margin: 0;661 padding: 0;662}663header#primary #meta .wrap #searchForm #search_go,664header#primary #meta .wrap #searchForm #search_term {665 height: 30px;666 line-height: 30px;667}668header#primary #meta .wrap #searchForm #search_go {669 padding: 0 10px;670}671header#primary #meta .wrap #searchForm #search_term {672 float: right;673 border: none;674 color: white;675 outline: none;676 background: transparent;677 width: 125px;678}679 680footer#footer {681 clear: both;682 padding: 15px 0 35px 0;683 text-align: center;684}685@media (min-width: 61.5em) {686 footer#footer {687 text-align: left;688 padding: 5px 0 75px 0;689 }690}691footer#footer #footer-wrap {692 overflow: hidden;693}694 695footer#footer #vendor-tagline {696 margin: 31px auto;697}698@media (min-width: 61.5em) {699 footer#footer #vendor-tagline {700 margin: 31px 0;701 padding-right: 1.5em;702 float: right;703 }704}705 706footer#footer .copyright,707footer#footer nav.footer,708footer#footer #ekklogo span,709footer#footer #ekklogo .icon-ekklesia-full {710 display: inline-block;711 vertical-align: middle;712 line-height: 50px;713}714@media (min-width: 61.5em) {715 footer#footer .copyright,716 footer#footer nav.footer,717 footer#footer #ekklogo span,718 footer#footer #ekklogo .icon-ekklesia-full {719 line-height: 83px;720 }721}722footer#footer .copyright,723footer#footer #footer-nav li a {724 font-style: italic;725}726footer#footer #footer-nav {727 margin: 0;728 padding: 0 0 0 7px;729 overflow: hidden;730 text-align: center;731}732@media (min-width: 61.5em) {733 footer#footer #footer-nav {734 text-align: left;735 }736}737footer#footer #footer-nav li,738footer#footer #footer-nav li a,739footer#footer #footer-nav li .divider {740 font-size: 12px;741 display: inline-block;742 padding: 0;743}744footer#footer #footer-nav li a {745 padding: 0 7px;746 text-decoration: none;747}748footer#footer #footer-nav li a:hover {749 text-decoration: underline;750}751footer#footer #ekklogo,752footer#footer #social-links {753 display: block;754}755@media (min-width: 61.5em) {756 footer#footer #ekklogo,757 footer#footer #social-links {758 display: inline-block;759 float: right;760 }761}762footer#footer #social-links {763 margin: 0;764 padding: 0;765 text-align: center;766}767@media (min-width: 61.5em) {768 footer#footer #social-links {769 margin: 1em 0;770 text-align: right;771 float: right;772 }773}774footer#footer #social-links li {775 font-size: 12px;776 padding-left: 0;777 display: inline-block;778 margin: 10px 0;779}780@media (min-width: 37.5em) {781 footer#footer #social-links li {782 margin: 20px 0;783 }784}785footer#footer #social-links li a {786 position: relative;787 display: block;788 font-size: 1em;789 margin-left: 8px;790 overflow: hidden;791 text-align: center;792 line-height: 18px;793 width: 18px;794 height: 18px;795 -webkit-transition: background-color 0.2s ease-in-out;796 -moz-transition: background-color 0.2s ease-in-out;797 -o-transition: background-color 0.2s ease-in-out;798 transition: background-color 0.2s ease-in-out;799}800footer#footer #ekklogo {801 display: inline-block;802 position: relative;803 margin-right: 10px;804}805footer#footer #ekklogo .icon-ekklesia-full {806 font-size: 98px;807}808footer#footer #ekklogo span {809 margin-right: 9px;810 font-size: 10px;811 font-family: helvetica, sans-serif;812}813footer#footer .backtotop {814 clear: both;815 display: table;816 margin: 20px auto 0 auto;817}818@media (min-width: 61.5em) {819 footer#footer .backtotop {820 display: none;821 }822}823 824#feat-footer {825 display: block;826 overflow: hidden;827 position: relative;828 z-index: 1;829 padding: 2em 0;830 border-top: 1px solid rgba(0, 0, 0, 0.1);831 background: rgba(0, 0, 0, 0.05);832 -webkit-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.05);833 -moz-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.05);834 box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.05);835}836@media (min-width: 61.5em) {837 #feat-footer {838 padding: 50px 0;839 }840}841#feat-footer .featured-item {842 display: block;843 position: relative;844 z-index: 1000;845 text-align: center;846 overflow: visible;847 margin-bottom: 4%;848}849@media (min-width: 37.5em) {850 #feat-footer .featured-item {851 display: inline-block;852 width: 50%;853 }854}855@media (min-width: 61.5em) {856 #feat-footer .featured-item {857 margin-bottom: 0;858 padding-left: 0%;859 padding-right: 0%;860 width: 23.41401%;861 float: left;862 margin-right: 2.11465%;863 float: none;864 }865}866@media (min-width: 61.5em) {867 #feat-footer .featured-item.omega {868 padding-left: 0%;869 padding-right: 0%;870 width: 23.41401%;871 float: right;872 margin-right: 0;873 float: none;874 }875}876#feat-footer .featured-item.pos-4 {877 margin-right: 0;878}879#feat-footer .featured-item:last-child {880 margin-right: 0;881}882#feat-footer .featured-item a {883 text-decoration: none;884}885#feat-footer .featured-item p {886 font-size: 1.17em;887 line-height: 1.5em;888 margin-bottom: 1.7em;889}890#feat-footer .featured-item .thumb {891 position: relative;892 width: 100%;893 z-index: 2000;894 min-width: 100%;895 max-width: 100%;896 height: auto;897 border: 1px solid rgba(0, 0, 0, 0.1);898 display: table;899 margin: 0 auto;900 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);901 opacity: 1;902 -webkit-border-radius: 5px;903 -moz-border-radius: 5px;904 -ms-border-radius: 5px;905 -o-border-radius: 5px;906 border-radius: 5px;907 -webkit-backface-visibility: hidden;908 -moz-backface-visibility: hidden;909 -ms-backface-visibility: hidden;910 -o-backface-visibility: hidden;911 backface-visibility: hidden;912 -webkit-transition: opacity 0.2s ease-in-out;913 -moz-transition: opacity 0.2s ease-in-out;914 -o-transition: opacity 0.2s ease-in-out;915 transition: opacity 0.2s ease-in-out;916}917#feat-footer .featured-item .thumb:hover {918 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);919 opacity: 0.8;920}921@media (min-width: 37.5em) {922 #feat-footer .featured-item .thumb {923 width: 90%;924 min-width: 90%;925 max-width: 90%;926 }927}928@media (min-width: 61.5em) {929 #feat-footer .featured-item .thumb {930 display: inline-block;931 width: 99%;932 min-width: 99%;933 max-width: 99%;934 height: auto;935 }936}937#feat-footer .featured-item h4 {938 display: block;939 margin-bottom: 1em;940 font-size: 1.41em;941 line-height: 1.2em;942 font-weight: 700;943}944 945header#mobile-header {946 position: relative;947 width: 100%;948 z-index: 2001;949 overflow: hidden;950}951@media (min-width: 61.5em) {952 header#mobile-header {953 display: none;954 }955}956header#mobile-header a {957 text-decoration: none;958}959header#mobile-header h1 {960 position: relative;961 text-align: center;962 width: 24%;963 font-size: 1.5em;964 line-height: 3em;965 margin: 2% 3%;966}967@media (min-width: 37.5em) {968 header#mobile-header h1 {969 margin: 1% 3%;970 }971}972header#mobile-header #logo {973 height: 100%;974}975header#mobile-header #logo img {976 vertical-align: middle;977 display: block;978 width: 100%;979 height: auto;980 min-width: 100%;981 max-width: 100%;982 line-height: 0;983 padding: 0;984 margin: 0;985}986@media (min-width: 37.5em) {987 header#mobile-header #logo img {988 min-width: inherit;989 max-width: 60%;990 }991}992 993nav#mobile-nav {994 position: absolute;995 width: 70%;996 top: 0;997 overflow: hidden;998 font-family: "Montserrat", sans-serif;999}1000@media (min-width: 61.5em) {1001 nav#mobile-nav {1002 display: none;1003 }1004}1005@media (min-width: 37.5em) {1006 nav#mobile-nav {1007 width: 55%;1008 }1009}1010nav#mobile-nav li {1011 font-size: 12px;1012 padding-left: 0;1013 margin-bottom: 0;1014}1015 1016#nav-search {1017 overflow: hidden;1018 width: 91%;1019 background: rgba(255, 255, 255, 0.2);1020 padding: 5%;1021 display: table;1022 margin: 0 auto;1023}1024#nav-search form {1025 position: relative;1026 background: rgba(0, 0, 0, 0.25);1027 -webkit-border-radius: 3px;1028 -moz-border-radius: 3px;1029 -ms-border-radius: 3px;1030 -o-border-radius: 3px;1031 border-radius: 3px;1032}1033#nav-search fieldset {1034 width: 100%;1035}1036#nav-search input, #nav-search a {1037 height: 2.15em;1038 line-height: 2.15em;1039}1040#nav-search input {1041 border: 0;1042 height: 2.15em;1043 width: 76%;1044 padding: 0 3%;1045 font-size: 1.5em;1046 color: rgba(255, 255, 255, 0.6);1047 background: transparent;1048 -webkit-font-smoothing: antialiased !important;1049 -moz-font-smoothing: antialiased !important;1050 font-smoothing: antialiased !important;1051}1052#nav-search a {1053 position: absolute;1054 width: 14%;1055 text-align: center;1056 font-size: 1.5em;1057 color: rgba(255, 255, 255, 0.5);1058}1059#nav-search a:hover {1060 color: rgba(255, 255, 255, 0.8);1061}1062 1063#menu-more {1064 float: right;1065 width: 1em;1066 font-size: 2em;1067 padding: 0.20em 0.7em;1068 margin: 2% 1%;1069 cursor: pointer;1070 -webkit-border-radius: 4px;1071 -moz-border-radius: 4px;1072 -ms-border-radius: 4px;1073 -o-border-radius: 4px;1074 border-radius: 4px;1075 -webkit-background-clip: padding;1076 -moz-background-clip: padding;1077 background-clip: padding;1078 position: absolute;1079 right: 0;1080 top: 50%;1081 margin-top: -17px;1082}1083 1084#mobile-home,1085ul#menu-more-links {1086 margin: 0;1087 padding: 0;1088 list-style: none;1089}1090#mobile-home > li,1091ul#menu-more-links > li {1092 position: relative;1093 border-bottom: 1px solid rgba(255, 255, 255, 0.3);1094 text-transform: uppercase;1095}1096#mobile-home li a,1097ul#menu-more-links li a {1098 display: inline-block;1099 font-size: 1.4em;1100 padding: 1.2em 5%;1101}1102@media (min-width: 37.5em) {1103 #mobile-home li a,1104 ul#menu-more-links li a {1105 padding: 1.2em 5%;1106 }1107}1108#mobile-home > li > a,1109ul#menu-more-links > li > a {1110 text-transform: uppercase;1111 width: 70%;1112}1113@media (min-width: 37.5em) {1114 #mobile-home > li > a,1115 ul#menu-more-links > li > a {1116 width: 73%;1117 }1118}1119#mobile-home li .hotspot,1120ul#menu-more-links li .hotspot {1121 position: absolute;1122 top: 0;1123 right: 0;1124 cursor: pointer;1125 text-align: center;1126 vertical-align: middle;1127 display: table;1128 width: 20%;1129 min-height: 40px;1130 height: 100%;1131}1132@media (min-width: 37.5em) {1133 #mobile-home li .hotspot,1134 ul#menu-more-links li .hotspot {1135 width: 17%;1136 }1137}1138#mobile-home li .hotspot .icon,1139ul#menu-more-links li .hotspot .icon {1140 display: table-cell;1141 vertical-align: middle;1142 font-size: 12px;1143}1144#mobile-home > li > ul,1145ul#menu-more-links > li > ul {1146 width: 90%;1147 background: rgba(0, 0, 0, 0.25) url("/_assets/img/mobile-nav-expanded-arrow.png") top center no-repeat;1148 max-height: 0;1149 margin: 0;1150 padding: 0 5%;1151 overflow: hidden;1152 -webkit-transition: max-height 0.25s ease-in-out, padding 0.25s ease-in-out;1153 -moz-transition: max-height 0.25s ease-in-out, padding 0.25s ease-in-out;1154 -o-transition: max-height 0.25s ease-in-out, padding 0.25s ease-in-out;1155 transition: max-height 0.25s ease-in-out, padding 0.25s ease-in-out;1156}1157#mobile-home > li > ul a,1158ul#menu-more-links > li > ul a {1159 border: none;1160 padding: 3% 5%;1161 width: 90%;1162}1163#mobile-home > li > ul > li > a,1164ul#menu-more-links > li > ul > li > a {1165 font-size: 1.4em;1166 border-bottom: 1px solid rgba(255, 255, 255, 0.2);1167 margin-top: 10px;1168}1169#mobile-home > li > ul ul,1170ul#menu-more-links > li > ul ul {1171 display: block;1172 margin: .8em 0 1em 0;1173 background: transparent;1174}1175#mobile-home > li > ul ul a,1176ul#menu-more-links > li > ul ul a {1177 font-size: 1.25em;1178 margin-bottom: .5em;1179 text-transform: none;1180 color: rgba(255, 255, 255, 0.6);1181}1182#mobile-home li.hasChildren a,1183ul#menu-more-links li.hasChildren a {1184 position: relative;1185 background: none;1186}1187#mobile-home li.hasChildren > .hotspot,1188ul#menu-more-links li.hasChildren > .hotspot {1189 color: rgba(252, 252, 252, 0.4);1190}1191#mobile-home li.hasChildren > ul > li:last-child > a,1192ul#menu-more-links li.hasChildren > ul > li:last-child > a {1193 background: none;1194}1195#mobile-home li:not(.hasChildren) a,1196ul#menu-more-links li:not(.hasChildren) a {1197 width: 90%;1198}1199#mobile-home li.hasChildren.active > .hotspot,1200ul#menu-more-links li.hasChildren.active > .hotspot {