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="wf-ftnk-n7-active wf-vcsm-n4-active wf-ftnk-n4-active wf-ftnk-n5-active wf-vcsm-n7-active wf-active" lang="en-US">3 <head>4 <style>5 .disable-download img {6 pointer-events: none; }7.link-transition a {8 transition: background 0.2s ease, color 0.2s ease; }9 .link-transition a svg {10 transition: fill 0.2s ease; }11 12.project-cover .details {13 transition: background 0.2s ease; }14 15.project-cover .title,16.project-cover .fields,17.project-cover .custom,18.project-cover .description,19.project-cover .date {20 transition: color 0.2s ease; }21@-webkit-keyframes rotate-forever {22 0% {23 -webkit-transform: rotate(0deg);24 -moz-transform: rotate(0deg);25 -ms-transform: rotate(0deg);26 -o-transform: rotate(0deg);27 transform: rotate(0deg); }28 100% {29 -webkit-transform: rotate(360deg);30 -moz-transform: rotate(360deg);31 -ms-transform: rotate(360deg);32 -o-transform: rotate(360deg);33 transform: rotate(360deg); } }34 35@-moz-keyframes rotate-forever {36 0% {37 -webkit-transform: rotate(0deg);38 -moz-transform: rotate(0deg);39 -ms-transform: rotate(0deg);40 -o-transform: rotate(0deg);41 transform: rotate(0deg); }42 100% {43 -webkit-transform: rotate(360deg);44 -moz-transform: rotate(360deg);45 -ms-transform: rotate(360deg);46 -o-transform: rotate(360deg);47 transform: rotate(360deg); } }48 49@keyframes rotate-forever {50 0% {51 -webkit-transform: rotate(0deg);52 -moz-transform: rotate(0deg);53 -ms-transform: rotate(0deg);54 -o-transform: rotate(0deg);55 transform: rotate(0deg); }56 100% {57 -webkit-transform: rotate(360deg);58 -moz-transform: rotate(360deg);59 -ms-transform: rotate(360deg);60 -o-transform: rotate(360deg);61 transform: rotate(360deg); } }62 63.lightbox-spinner {64 -webkit-animation-duration: 0.7s;65 -moz-animation-duration: 0.7s;66 animation-duration: 0.7s;67 -webkit-animation-iteration-count: infinite;68 -moz-animation-iteration-count: infinite;69 animation-iteration-count: infinite;70 -webkit-animation-name: rotate-forever;71 -moz-animation-name: rotate-forever;72 animation-name: rotate-forever;73 -webkit-animation-timing-function: linear;74 -moz-animation-timing-function: linear;75 animation-timing-function: linear;76 height: 30px;77 width: 30px;78 border: 4px solid #fff;79 border-right-color: transparent;80 border-radius: 50%;81 display: inline-block;82 opacity: 0.7; }83html.lightbox-enabled,84html.lightbox-enabled body {85 overflow: hidden; }86 87html.lightbox-zoomed .lightbox-content {88 cursor: zoom-out;89 overflow: auto; }90 html.lightbox-zoomed .lightbox-content.zoomable-x {91 justify-content: flex-start; }92 html.lightbox-zoomed .lightbox-content.zoomable-y {93 align-items: baseline; }94 95html.lightbox-zoomed #lightbox-wrap img {96 max-width: inherit;97 max-height: inherit; }98 99html.lightbox-zoomed #lightbox-img-wrap .lightbox-extra {100 display: none; }101 102.lightbox-link,103.lightbox-content.zoomable {104 cursor: zoom-in; }105 106#lightbox-wrap .lightbox-contents {107 -moz-user-select: none;108 -webkit-user-select: none;109 -ms-user-select: none;110 user-select: none; }111 112.lightbox-content {113 align-items: center;114 display: flex;115 height: 100%;116 justify-content: center;117 opacity: 1;118 position: absolute;119 top: 0;120 transition: opacity .4s;121 width: 100vw; }122 123#lightbox-blocking {124 align-items: center;125 bottom: 0;126 display: flex;127 justify-content: center;128 left: 0;129 position: fixed;130 right: 0;131 top: 0;132 z-index: 1002; }133 #lightbox-blocking .lightbox-spinner {134 display: none; }135 136#lightbox-wrap {137 height: 100%;138 left: 0;139 position: fixed;140 top: 0;141 width: 100vw;142 z-index: 1001; }143 #lightbox-wrap .offscreen, #lightbox-wrap.offscreen {144 height: 0;145 overflow: hidden;146 visibility: hidden;147 -webkit-transform: translateX(-99999px);148 -ms-transform: translateX(-99999px);149 transform: translateX(-99999px);150 width: 0; }151 #lightbox-wrap.loading .lightbox-spinner {152 display: block; }153 #lightbox-wrap .hidden {154 opacity: 0; }155 #lightbox-wrap .lightbox-contents {156 display: inline-block;157 max-height: 100%;158 max-width: 100%; }159 #lightbox-wrap.single .next, #lightbox-wrap.single .next:hover,160 #lightbox-wrap.single .prev,161 #lightbox-wrap.single .prev:hover {162 display: none; }163 #lightbox-wrap.extras-hidden #lightbox-img-wrap .lightbox-extra {164 opacity: 0;165 transition: opacity 1s; }166 #lightbox-wrap img {167 max-height: 100vh;168 max-width: 100vw; }169 170#lightbox-inner-wrap {171 height: 100%;172 margin: auto;173 position: relative;174 z-index: 1003; }175 #lightbox-inner-wrap .control {176 cursor: pointer;177 position: absolute;178 z-index: 1003; }179 #lightbox-inner-wrap svg .lightbox-icon-bg {180 fill: #696969;181 opacity: .2; }182 #lightbox-inner-wrap svg:hover .lightbox-icon-bg {183 opacity: .4; }184 #lightbox-inner-wrap .next,185 #lightbox-inner-wrap .prev {186 height: 100vh;187 opacity: 0;188 top: 0;189 width: 30vw; }190 #lightbox-inner-wrap .next:hover,191 #lightbox-inner-wrap .prev:hover {192 opacity: 1; }193 #lightbox-inner-wrap .next.hidden,194 #lightbox-inner-wrap .prev.hidden {195 cursor: default; }196 #lightbox-inner-wrap .next.hidden svg,197 #lightbox-inner-wrap .prev.hidden svg {198 display: none; }199 #lightbox-inner-wrap .next svg,200 #lightbox-inner-wrap .prev svg {201 top: -webkit-calc(50% - 30px) ;202 top: calc(50% - 30px) ;203 position: absolute; }204 #lightbox-inner-wrap .next svg .lightbox-icon-arrow,205 #lightbox-inner-wrap .prev svg .lightbox-icon-arrow {206 fill: #FFFFFF; }207 #lightbox-inner-wrap .next {208 right: 0; }209 #lightbox-inner-wrap .next svg {210 right: 20px; }211 #lightbox-inner-wrap .prev {212 left: 0; }213 #lightbox-inner-wrap .prev svg {214 left: 20px; }215 #lightbox-inner-wrap .close {216 position: fixed;217 height: 40px;218 right: 20px;219 top: 20px;220 width: 40px; }221 #lightbox-inner-wrap .close:hover {222 cursor: pointer; }223 #lightbox-inner-wrap .close .lightbox-icon-bg {224 fill: #fff; }225 226@media (max-width: 1024px) {227 #lightbox-inner-wrap .close {228 right: 0;229 top: 0; }230 #lightbox-inner-wrap .close circle {231 display: none; }232 #lightbox-inner-wrap .next:hover,233 #lightbox-inner-wrap .prev:hover {234 opacity: 0; } }235 236@media (min-width: 1024px) {237 .lightbox-link.hover-icon-enabled {238 position: relative; }239 .lightbox-link.hover-icon-enabled:hover::after {240 background: rgba(105, 105, 105, 0.2) url(data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZmlsbDogd2hpdGUiIHZpZXdCb3g9IjAgMCAyMSAyMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICA8cGF0aCBkPSJNLTEuMjUyMjIyNTEsMTUuNjAzNDE5NyBDLTEuMzUyNTE5MjcsMTUuNjkzNjg2OCAtMS40MjUyMzMzMywxNS43OTg5OTY4IC0xLjQ3MDM2Njg3LDE1LjkxOTM1MjkgQy0xLjUxNTUwMDQxLDE2LjAzOTcwOSAtMS41MzgwNjY4NCwxNi4xNjAwNjMzIC0xLjUzODA2Njg0LDE2LjI4MDQxOTQgQy0xLjUzODA2Njg0LDE2LjQwMDc3NTUgLTEuNTE1NTAwNDEsMTYuNTIxMTI5OCAtMS40NzAzNjY4NywxNi42NDE0ODU5IEMtMS40MjUyMzMzMywxNi43NjE4NDIgLTEuMzUyNTE5MjcsMTYuODY3MTUyIC0xLjI1MjIyMjUxLDE2Ljk1NzQxOTEgTDMuNTYxOTk3NzEsMjEuNzcxNjM5MyBDMy43NTI1NjE1NSwyMS45NjIyMDMyIDMuOTgwNzMzMjQsMjIuMDU3NDgzNyA0LjI0NjUxOTY1LDIyLjA1NzQ4MzcgQzQuNTEyMzA2MDUsMjIuMDU3NDgzNyA0LjczNTQ2Mjk5LDIxLjk2MjIwMzIgNC45MTU5OTcxNSwyMS43NzE2MzkzIEM1LjEwNjU2MDk4LDIxLjU4MTA3NTUgNS4yMDE4NDE0NywyMS4zNTU0MTEyIDUuMjAxODQxNDcsMjEuMDk0NjM5NiBDNS4yMDE4NDE0NywyMC44MzM4NjggNS4xMDY1NjA5OCwyMC42MDgyMDM3IDQuOTE1OTk3MTUsMjAuNDE3NjM5OSBMMS43NTY2NjUxMywxNy4yNDMyNjM0IEwxMC4wMTYwNjE3LDE3LjI0MzI2MzQgQzEwLjI4Njg2MjksMTcuMjQzMjYzNCAxMC41MTUwMzQ2LDE3LjE1MDQ5MDMgMTAuNzAwNTgzNiwxNi45NjQ5NDEzIEMxMC44ODYxMzI2LDE2Ljc3OTM5MjMgMTAuOTc4OTA1NywxNi41NTEyMjA2IDEwLjk3ODkwNTcsMTYuMjgwNDE5NCBDMTAuOTc4OTA1NywxNi4wMDk2MTgyIDEwLjg4NjEzMjYsMTUuNzgxNDQ2NSAxMC43MDA1ODM2LDE1LjU5NTg5NzUgQzEwLjUxNTAzNDYsMTUuNDEwMzQ4NSAxMC4yODY4NjI5LDE1LjMxNzU3NTMgMTAuMDE2MDYxNywxNS4zMTc1NzUzIEwxLjc1NjY2NTEzLDE1LjMxNzU3NTMgTDQuOTE1OTk3MTUsMTIuMTQzMTk4OSBDNS4xMDY1NjA5OCwxMS45NTI2MzUxIDUuMjAxODQxNDcsMTEuNzI2OTcwNyA1LjIwMTg0MTQ3LDExLjQ2NjE5OTIgQzUuMjAxODQxNDcsMTEuMjA1NDI3NiA1LjEwNjU2MDk4LDEwLjk3OTc2MzMgNC45MTU5OTcxNSwxMC43ODkxOTk1IEM0LjczNTQ2Mjk5LDEwLjU5ODYzNTYgNC41MTIzMDYwNSwxMC41MDMzNTUxIDQuMjQ2NTE5NjUsMTAuNTAzMzU1MSBDMy45ODA3MzMyNCwxMC41MDMzNTUxIDMuNzUyNTYxNTUsMTAuNTk4NjM1NiAzLjU2MTk5NzcxLDEwLjc4OTE5OTUgTC0xLjI1MjIyMjUxLDE1LjYwMzQxOTcgWiIgaWQ9IngiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuNzIwNDE5LCAxNi4yODA0MTkpIHJvdGF0ZSgtNDUuMDAwMDAwKSB0cmFuc2xhdGUoLTQuNzIwNDE5LCAtMTYuMjgwNDE5KSAiPjwvcGF0aD4KICA8cGF0aCBkPSJNMTAuMzA3Nzc3NCw0LjA0MzQxOTczIEMxMC4yMDc0ODA3LDQuMTMzNjg2ODEgMTAuMTM0NzY2Niw0LjIzODk5NjgzIDEwLjA4OTYzMzEsNC4zNTkzNTI5MyBDMTAuMDQ0NDk5NSw0LjQ3OTcwOTA0IDEwLjAyMTkzMzEsNC42MDAwNjMzNCAxMC4wMjE5MzMxLDQuNzIwNDE5NDUgQzEwLjAyMTkzMzEsNC44NDA3NzU1NiAxMC4wNDQ0OTk1LDQuOTYxMTI5ODYgMTAuMDg5NjMzMSw1LjA4MTQ4NTk3IEMxMC4xMzQ3NjY2LDUuMjAxODQyMDcgMTAuMjA3NDgwNyw1LjMwNzE1MjA5IDEwLjMwNzc3NzQsNS4zOTc0MTkxNyBMMTUuMTIxOTk3NywxMC4yMTE2Mzk0IEMxNS4zMTI1NjE1LDEwLjQwMjIwMzIgMTUuNTQwNzMzMiwxMC40OTc0ODM3IDE1LjgwNjUxOTYsMTAuNDk3NDgzNyBDMTYuMDcyMzA2LDEwLjQ5NzQ4MzcgMTYuMjk1NDYyOSwxMC40MDIyMDMyIDE2LjQ3NTk5NzEsMTAuMjExNjM5NCBDMTYuNjY2NTYwOSwxMC4wMjEwNzU2IDE2Ljc2MTg0MTQsOS43OTU0MTEyNCAxNi43NjE4NDE0LDkuNTM0NjM5NjcgQzE2Ljc2MTg0MTQsOS4yNzM4NjgxMSAxNi42NjY1NjA5LDkuMDQ4MjAzNzkgMTYuNDc1OTk3MSw4Ljg1NzYzOTk1IEwxMy4zMTY2NjUxLDUuNjgzMjYzNDkgTDIxLjU3NjA2MTYsNS42ODMyNjM0OSBDMjEuODQ2ODYyOSw1LjY4MzI2MzQ5IDIyLjA3NTAzNDYsNS41OTA0OTAzOSAyMi4yNjA1ODM2LDUuNDA0OTQxMzkgQzIyLjQ0NjEzMjYsNS4yMTkzOTIzOSAyMi41Mzg5MDU3LDQuOTkxMjIwNjkgMjIuNTM4OTA1Nyw0LjcyMDQxOTQ1IEMyMi41Mzg5MDU3LDQuNDQ5NjE4MjEgMjIuNDQ2MTMyNiw0LjIyMTQ0NjUxIDIyLjI2MDU4MzYsNC4wMzU4OTc1MSBDMjIuMDc1MDM0NiwzLjg1MDM0ODUxIDIxLjg0Njg2MjksMy43NTc1NzU0MSAyMS41NzYwNjE2LDMuNzU3NTc1NDEgTDEzLjMxNjY2NTEsMy43NTc1NzU0MSBMMTYuNDc1OTk3MSwwLjU4MzE5ODk0NyBDMTYuNjY2NTYwOSwwLjM5MjYzNTExMSAxNi43NjE4NDE0LDAuMTY2OTcwNzk0IDE2Ljc2MTg0MTQsLTAuMDkzODAwNzcxNSBDMTYuNzYxODQxNCwtMC4zNTQ1NzIzMzcgMTYuNjY2NTYwOSwtMC41ODAyMzY2NTQgMTYuNDc1OTk3MSwtMC43NzA4MDA0OSBDMTYuMjk1NDYyOSwtMC45NjEzNjQzMjcgMTYuMDcyMzA2LC0xLjA1NjY0NDgyIDE1LjgwNjUxOTYsLTEuMDU2NjQ0ODIgQzE1LjU0MDczMzIsLTEuMDU2NjQ0ODIgMTUuMzEyNTYxNSwtMC45NjEzNjQzMjcgMTUuMTIxOTk3NywtMC43NzA4MDA0OSBMMTAuMzA3Nzc3NCw0LjA0MzQxOTczIFoiIGlkPSJ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNi4yODA0MTksIDQuNzIwNDE5KSByb3RhdGUoLTIyNS4wMDAwMDApIHRyYW5zbGF0ZSgtMTYuMjgwNDE5LCAtNC43MjA0MTkpICI+PC9wYXRoPgo8L3N2Zz4K) no-repeat center;241 background-size: 16px;242 border-radius: 50%;243 content: '';244 display: block;245 height: 36px;246 position: absolute;247 right: 10px;248 top: 10px;249 width: 36px;250 z-index: 1000; } }251 252@media all and (-ms-high-contrast: none) {253 .lightbox-link,254 .lightbox-content.zoomable {255 cursor: pointer; } }256@-webkit-keyframes fade-in {257 from {258 opacity: 0; }259 to {260 opacity: 1; } }261 262@-moz-keyframes fade-in {263 from {264 opacity: 0; }265 to {266 opacity: 1; } }267 268@keyframes fade-in {269 from {270 opacity: 0; }271 to {272 opacity: 1; } }273 274@-webkit-keyframes fade-out {275 from {276 opacity: 1; }277 to {278 opacity: 0; } }279 280@-moz-keyframes fade-out {281 from {282 opacity: 1; }283 to {284 opacity: 0; } }285 286@keyframes fade-out {287 from {288 opacity: 1; }289 to {290 opacity: 0; } }291 292.transition-enabled {293 opacity: 0; }294 295.transition-in {296 -webkit-animation: fade-in ease-in;297 animation: fade-in ease-in;298 -webkit-animation-duration: 0.25s;299 animation-duration: 0.25s;300 -webkit-animation-fill-mode: forwards;301 animation-fill-mode: forwards; }302 303.transition-out {304 opacity: 1;305 -webkit-animation: fade-out ease-out;306 animation: fade-out ease-out;307 -webkit-animation-duration: 0.25s;308 animation-duration: 0.25s;309 -webkit-animation-fill-mode: forwards;310 animation-fill-mode: forwards; }311 312 313 314.site-header:after, .site-content:after, .logo-wrap:after {315 clear: both;316 content: "";317 display: table; }318 319/*! normalize.css v3.0.1 | MIT License | git.io/normalize */320/**321 * 1. Set default font family to sans-serif.322 * 2. Prevent iOS text size adjust after orientation change, without disabling323 * user zoom.324 */325html {326 font-family: sans-serif;327 /* 1 */328 -ms-text-size-adjust: 100%;329 /* 2 */330 -webkit-text-size-adjust: 100%;331 /* 2 */ }332 333/**334 * Remove default margin.335 */336body {337 margin: 0; }338 339/* HTML5 display definitions340 ========================================================================== */341/**342 * Correct `block` display not defined for any HTML5 element in IE 8/9.343 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.344 * Correct `block` display not defined for `main` in IE 11.345 */346article,347aside,348details,349figcaption,350figure,351footer,352header,353hgroup,354main,355nav,356section,357summary {358 display: block; }359 360/**361 * 1. Correct `inline-block` display not defined in IE 8/9.362 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.363 */364audio,365canvas,366progress,367video {368 display: inline-block;369 /* 1 */370 vertical-align: baseline;371 /* 2 */ }372 373/**374 * Prevent modern browsers from displaying `audio` without controls.375 * Remove excess height in iOS 5 devices.376 */377audio:not([controls]) {378 display: none;379 height: 0; }380 381/**382 * Address `[hidden]` styling not present in IE 8/9/10.383 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.384 */385[hidden],386template {387 display: none; }388 389/* Links390 ========================================================================== */391/**392 * Remove the gray background color from active links in IE 10.393 */394a {395 background: transparent; }396 397/**398 * Improve readability when focused and also mouse hovered in all browsers.399 */400a:active,401a:focus,402a:hover {403 outline: 0; }404 405/* Text-level semantics406 ========================================================================== */407/**408 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.409 */410abbr[title] {411 border-bottom: 1px dotted; }412 413/**414 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.415 */416b,417strong {418 font-weight: bold; }419 420/**421 * Address styling not present in Safari and Chrome.422 */423dfn {424 font-style: italic; }425 426/**427 * Address variable `h1` font-size and margin within `section` and `article`428 * contexts in Firefox 4+, Safari, and Chrome.429 */430h1 {431 font-size: 2em;432 margin: 0.67em 0; }433 434/**435 * Address styling not present in IE 8/9.436 */437mark {438 background: #ff0;439 color: #000; }440 441/**442 * Address inconsistent and variable font size in all browsers.443 */444small {445 font-size: 80%; }446 447/**448 * Prevent `sub` and `sup` affecting `line-height` in all browsers.449 */450sub,451sup {452 font-size: 75%;453 line-height: 0;454 position: relative;455 vertical-align: baseline; }456 457sup {458 top: -0.5em; }459 460sub {461 bottom: -0.25em; }462 463/* Embedded content464 ========================================================================== */465/**466 * Remove border when inside `a` element in IE 8/9/10.467 */468img {469 border: 0; }470 471/**472 * Correct overflow not hidden in IE 9/10/11.473 */474svg:not(:root) {475 overflow: hidden; }476 477/* Grouping content478 ========================================================================== */479/**480 * Address margin not present in IE 8/9 and Safari.481 */482figure {483 margin: 1em 40px; }484 485/**486 * Address differences between Firefox and other browsers.487 */488hr {489 -moz-box-sizing: content-box;490 box-sizing: content-box;491 height: 0; }492 493/**494 * Contain overflow in all browsers.495 */496pre {497 overflow: auto; }498 499/**500 * Address odd `em`-unit font size rendering in all browsers.501 */502code,503kbd,504pre,505samp {506 font-family: monospace, monospace;507 font-size: 1em; }508 509/* Forms510 ========================================================================== */511/**512 * Known limitation: by default, Chrome and Safari on OS X allow very limited513 * styling of `select`, unless a `border` property is set.514 */515/**516 * 1. Correct color not being inherited.517 * Known issue: affects color of disabled elements.518 * 2. Correct font properties not being inherited.519 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.520 */521button,522input,523optgroup,524select,525textarea {526 color: inherit;527 /* 1 */528 font: inherit;529 /* 2 */530 margin: 0;531 /* 3 */ }532 533/**534 * Address `overflow` set to `hidden` in IE 8/9/10/11.535 */536button {537 overflow: visible; }538 539/**540 * Address inconsistent `text-transform` inheritance for `button` and `select`.541 * All other form control elements do not inherit `text-transform` values.542 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.543 * Correct `select` style inheritance in Firefox.544 */545button,546select {547 text-transform: none; }548 549/**550 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`551 * and `video` controls.552 * 2. Correct inability to style clickable `input` types in iOS.553 * 3. Improve usability and consistency of cursor style between image-type554 * `input` and others.555 */556button,557html input[type="button"],558input[type="reset"],559input[type="submit"] {560 -webkit-appearance: button;561 /* 2 */562 cursor: pointer;563 /* 3 */ }564 565/**566 * Re-set default cursor for disabled elements.567 */568button[disabled],569html input[disabled] {570 cursor: default; }571 572/**573 * Remove inner padding and border in Firefox 4+.574 */575button::-moz-focus-inner,576input::-moz-focus-inner {577 border: 0;578 padding: 0; }579 580/**581 * Address Firefox 4+ setting `line-height` on `input` using `!important` in582 * the UA stylesheet.583 */584input {585 line-height: normal; }586 587/**588 * It's recommended that you don't attempt to style these elements.589 * Firefox's implementation doesn't respect box-sizing, padding, or width.590 *591 * 1. Address box sizing set to `content-box` in IE 8/9/10.592 * 2. Remove excess padding in IE 8/9/10.593 */594input[type="checkbox"],595input[type="radio"] {596 box-sizing: border-box;597 /* 1 */598 padding: 0;599 /* 2 */ }600 601/**602 * Fix the cursor style for Chrome's increment/decrement buttons. For certain603 * `font-size` values of the `input`, it causes the cursor style of the604 * decrement button to change from `default` to `text`.605 */606input[type="number"]::-webkit-inner-spin-button,607input[type="number"]::-webkit-outer-spin-button {608 height: auto; }609 610/**611 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.612 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome613 * (include `-moz` to future-proof).614 */615input[type="search"] {616 -webkit-appearance: textfield;617 /* 1 */618 -moz-box-sizing: content-box;619 -webkit-box-sizing: content-box;620 /* 2 */621 box-sizing: content-box; }622 623/**624 * Remove inner padding and search cancel button in Safari and Chrome on OS X.625 * Safari (but not Chrome) clips the cancel button when the search input has626 * padding (and `textfield` appearance).627 */628input[type="search"]::-webkit-search-cancel-button,629input[type="search"]::-webkit-search-decoration {630 -webkit-appearance: none; }631 632/**633 * Define consistent border, margin, and padding.634 */635fieldset {636 border: 0;637 margin: 0;638 padding: 0; }639 640/**641 * 1. Correct `color` not being inherited in IE 8/9/10/11.642 * 2. Remove padding so people aren't caught out if they zero out fieldsets.643 */644legend {645 border: 0;646 /* 1 */647 padding: 0;648 /* 2 */ }649 650/**651 * Remove default vertical scrollbar in IE 8/9/10/11.652 */653textarea {654 overflow: auto; }655 656/**657 * Don't inherit the `font-weight` (applied by a rule above).658 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.659 */660optgroup {661 font-weight: bold; }662 663/* Tables664 ========================================================================== */665/**666 * Remove most spacing between table cells.667 */668table {669 border-collapse: collapse;670 border-spacing: 0; }671 672td,673th {674 padding: 0; }675 676* {677 box-sizing: border-box; }678 679html {680 -webkit-font-smoothing: antialiased;681 text-rendering: optimizeLegibility; }682 683ul {684 margin: 0;685 padding: 0; }686 ul li {687 list-style-type: none; }688 689img {690 vertical-align: top; }691 692p {693 margin: 0; }694 695a {696 text-decoration: none; }697 698html,699body {700 min-height: 100%; }701 702.italic {703 font-style: italic; }704 705.underline {706 text-decoration: underline; }707 708.strikethrough {709 text-decoration: line-through; }710 711.bold {712 font-weight: bold; }713 714.cfix:after {715 clear: both;716 content: ' ';717 display: block;718 height: 0;719 line-height: 0;720 overflow: hidden;721 visibility: hidden; }722 723html {724 background-image: url("");725 /* stylelint-disable-line function-url-quotes */726 background-position: top left;727 background-repeat: no-repeat;728 background-size: contain; }729 html:before {730 background-color: #000;731 display: none;732 opacity: calc(30 * .01); }733 734.site-container {735 float: none;736 margin-left: auto;737 margin-right: auto;738 max-width: 1400px; }739 740.example-site-footer {741 background: rgba(37, 38, 42, 0.94);742 bottom: 0;743 color: #fff;744 display: inline-block;745 font-family: 'Helvetica Neue', sans-serif;746 font-size: 14px;747 left: 0;748 padding: 0 20px 0 0;749 position: fixed;750 width: 100%;751 z-index: 4; }752 .example-site-footer .icon {753 fill: #fff;754 float: left; }755 .example-site-footer .content-left,756 .example-site-footer .content-right {757 height: 70px; }758 .example-site-footer .content-left {759 float: left; }760 .example-site-footer .content-right {761 float: right; }762 763.example-footer-content {764 -webkit-transform: translateY(-50%);765 -moz-transform: translateY(-50%);766 -ms-transform: translateY(-50%);767 -o-transform: translateY(-50%);768 transform: translateY(-50%);769 display: inline-block;770 position: relative;771 top: 50%; }772 773.example-footer-link {774 border-bottom: 1px solid #fff;775 color: #fff; }776 .example-footer-link:hover {777 border-bottom-width: 0; }778 779@media (max-width: 768px) {780 .example-site-footer .desktop {781 display: none; }782 .example-site-footer .mobile {783 text-transform: capitalize; } }784 785html {786 position: relative; }787 html:before {788 content: '';789 height: 100%;790 left: 0;791 position: fixed;792 top: 0;793 width: 100%; }794 795.site-wrap,796.site-container {797 position: relative;798 width: 100%; }799 800.site-wrap:before {801 content: '';802 height: 100%;803 left: 0;804 position: absolute;805 top: 0;806 width: 100%; }807 808.site-header {809 position: relative; }810 811.theme-container:before {812 content: '';813 height: 100%;814 left: 0;815 position: absolute;816 top: 0;817 width: 100%; }818 819.responsive-nav {820 display: none;821 opacity: 0;822 visibility: hidden; }823 824.project-cover .separator:last-child,825.project-header .fields .separator:last-child {826 display: none; }827 828.preserve-whitespace {829 white-space: pre-wrap; }830 831.preserve-whitespace--nowrap {832 white-space: pre; }833 834.logo,835.logo-secondary {836 clear: both;837 word-wrap: break-word; }838 .logo img,839 .logo-secondary img {840 max-width: 100%; }841 .logo a,842 .logo-secondary a {843 color: inherit; }844 .logo .image-link,845 .logo-secondary .image-link {846 display: inline-block;847 max-width: 100%; }848 .logo .image-rollover,849 .logo .image-scroll,850 .logo-secondary .image-rollover,851 .logo-secondary .image-scroll {852 display: none; }853 .logo.has-rollover:hover .image-link,854 .logo-secondary.has-rollover:hover .image-link {855 display: none; }856 .logo.has-rollover:hover .image-link.image-rollover,857 .logo-secondary.has-rollover:hover .image-link.image-rollover {858 display: block; }859 .on-scroll .logo.has-scroll .image-normal,860 .on-scroll .logo.has-scroll .image-rollover, .on-scroll861 .logo-secondary.has-scroll .image-normal,862 .on-scroll863 .logo-secondary.has-scroll .image-rollover {864 display: none !important; }865 .on-scroll .logo.has-scroll .image-scroll, .on-scroll866 .logo-secondary.has-scroll .image-scroll {867 display: inline-block; }868 869.logo-image,870.logo-secondary-image {871 width: 100%; }872 873.social {874 font-size: 0; }875 .social li {876 display: inline-block; }877 .social li:first-child {878 padding-left: 0 !important; }879 .social li:last-child {880 padding-right: 0 !important; }881 .social li svg {882 vertical-align: middle; }883 .social a {884 display: block;885 text-align: center; }886 887.masthead {888 position: relative; }889 .masthead:after {890 content: '';891 height: 100%;892 left: 0;893 position: absolute;894 top: 0;895 width: 100%; }896 .masthead h1,897 .masthead p {898 display: inline-block;899 width: 100%;900 word-wrap: break-word; }901 902.masthead,903.masthead-placeholder {904 width: 100%; }905 906.masthead-placeholder {907 opacity: 0;908 position: relative !important;909 z-index: -1; }910 911.masthead-contents,912.masthead-text {913 width: 100%; }914 915.masthead-contents {916 height: 100%;917 top: 0;918 z-index: 1; }919 920.masthead,921.masthead-contents {922 display: -webkit-box;923 display: -moz-box;924 display: box;925 display: -webkit-flex;926 display: -moz-flex;927 display: -ms-flexbox;928 display: flex;929 -webkit-box-align: center;930 -moz-box-align: center;931 box-align: center;932 -webkit-align-items: center;933 -moz-align-items: center;934 -ms-align-items: center;935 -o-align-items: center;936 align-items: center;937 -ms-flex-align: center; }938 939.masthead-arrow-container {940 cursor: pointer;941 height: 40px;942 width: 60px; }943 944.masthead-arrow {945 -webkit-transform: rotate(45deg) translateY(-15px) translateX(5px);946 -moz-transform: rotate(45deg) translateY(-15px) translateX(5px);947 -ms-transform: rotate(45deg) translateY(-15px) translateX(5px);948 -o-transform: rotate(45deg) translateY(-15px) translateX(5px);949 transform: rotate(45deg) translateY(-15px) translateX(5px);950 border-bottom: 1px solid transparent;951 border-right: 1px solid transparent;952 bottom: 5px;953 height: 30px;954 position: absolute;955 width: 30px; }956 957.masthead-button {958 cursor: pointer;959 display: inline-block;960 vertical-align: middle; }961 .masthead-button + .masthead-button-spacer + .masthead-button {962 margin-left: 17px; }963 964.masthead-button-spacer {965 display: none; }966 967@media (max-width: 540px) {968 .masthead-button + .masthead-button-spacer {969 display: block;970 height: 17px; }971 .masthead-button + .masthead-button-spacer + .masthead-button {972 margin-left: 0; } }973 974.site-footer {975 clear: both;976 display: block; }977 978.cookie-banner {979 bottom: 0;980 display: none;981 position: fixed;982 text-align: center;983 z-index: 99999; }984 .cookie-banner.show {985 display: block; }986 .cookie-banner p {987 font-size: 18px;988 line-height: 1.222;989 margin: 24px;990 max-width: calc(100% - 84px); }991 @media (max-width: 768px) {992 .cookie-banner p {993 font-size: 16px; } }994 .cookie-banner a {995 color: inherit;996 text-decoration: underline; }997 .cookie-banner .close-btn {998 position: absolute;999 right: 20px;1000 top: 50%;1001 transform: translateY(-50%);1002 width: 16px; }1003 1004.site-content {1005 margin-left: 0%;1006 margin-right: 0%;1007 width: 100%; }1008 1009.sidebar-content,1010main {1011 float: left; }1012 1013main {1014 width: 75%; }1015 1016.sidebar-content {1017 margin-right: 0%;1018 width: 25%; }1019 1020.logo-wrap {1021 max-width: 100%;1022 margin-left: auto;1023 margin-right: auto;1024 padding-bottom: 50px;1025 padding-top: 50px;1026 width: 80%; }1027 1028.logo-text {1029 margin-left: auto;1030 margin-right: auto;1031 text-align: center; }1032 1033.logo-image {1034 max-width: 100%;1035 margin-left: auto;1036 margin-right: auto;1037 text-align: center; }1038 1039.logo-secondary-text {1040 margin-left: auto;1041 margin-right: auto;1042 text-align: center; }1043 1044.logo-secondary-image {1045 max-width: 100%;1046 margin-left: auto;1047 margin-right: auto;1048 text-align: center; }1049 1050.logo {1051 font-family: ftnk;1052 font-size: 30px;1053 font-style: normal;1054 font-weight: 700;1055 line-height: 30px;1056 padding-bottom: 0px;1057 padding-left: 0%;1058 padding-right: 0%;1059 padding-top: 0px;1060 text-transform: uppercase; }1061 .logo,1062 .logo a {1063 color: #222222; }1064 .logo a:hover {1065 color: #222222;1066 font-style: normal;1067 font-weight: 700;1068 text-transform: uppercase; }1069 1070.logo-secondary {1071 font-family: ftnk;1072 font-size: 14px;1073 font-style: normal;1074 font-weight: 700;1075 line-height: 18px;1076 padding-bottom: 0px;1077 padding-left: 0%;1078 padding-right: 0%;1079 padding-top: 0px;1080 text-transform: none; }1081 .logo-secondary,1082 .logo-secondary a {1083 color: #222222; }1084 .logo-secondary a:hover {1085 color: #222222;1086 font-style: normal;1087 font-weight: 700;1088 text-transform: none; }1089 1090nav {1091 float: none;1092 margin-left: auto;1093 margin-right: auto;1094 padding-bottom: 0px;1095 padding-top: 0px;1096 width: 80%; }1097 nav .gallery-title a {1098 color: #222222;1099 font-family: ftnk;1100 font-size: 14px;1101 font-style: normal;1102 font-weight: 700;1103 line-height: 14px;1104 text-transform: uppercase; }1105 nav .gallery-title a:hover {1106 color: #999999;1107 font-style: normal;1108 font-weight: 700;1109 text-transform: uppercase; }1110 nav .gallery-title a.active {1111 color: #999999;1112 font-style: normal;1113 font-weight: 700;1114 text-transform: uppercase; }1115 nav .project-title a {1116 color: #999999;1117 font-family: vcsm;1118 font-size: 16px;1119 font-style: normal;1120 font-weight: 400;1121 line-height: 20px;1122 text-transform: none; }1123 nav .project-title a:hover {1124 color: #222222;1125 font-style: normal;1126 font-weight: 400;1127 text-transform: none; }1128 nav .project-title a.active {1129 color: #222222;1130 font-style: normal;1131 font-weight: 400;1132 text-transform: none; }1133 nav .page-title a {1134 color: #999999;1135 font-family: vcsm;1136 font-size: 16px;1137 font-style: normal;1138 font-weight: 400;1139 line-height: 16px;1140 text-transform: none; }1141 nav .page-title a:hover {1142 color: #222222;1143 font-style: normal;1144 font-weight: 400;1145 text-transform: none; }1146 nav .page-title a.active {1147 color: #222222;1148 font-style: normal;1149 font-weight: 400;1150 text-transform: none; }1151 nav .link-title a {1152 color: #999999;1153 font-family: vcsm;1154 font-size: 16px;1155 font-style: normal;1156 font-weight: 400;1157 line-height: 16px;1158 text-transform: none; }1159 nav .link-title a:hover {1160 color: #222222;1161 font-style: normal;1162 font-weight: 400;1163 text-transform: none; }1164 1165nav .group {1166 padding-bottom: 40px;1167 padding-top: 0px; }1168 1169nav .gallery-title {1170 padding-bottom: 20px;1171 padding-top: 0px;1172 text-align: center; }1173 1174nav .project-title {1175 padding-bottom: 10px;1176 padding-top: 0px;1177 text-align: center; }1178 1179nav .page-title {1180 padding-bottom: 20px;1181 padding-top: 0px;1182 text-align: center; }1183 1184nav .link-title {1185 padding-bottom: 20px;1186 padding-top: 0px;1187 text-align: center; }1188 1189.pf-nav-social {1190 text-align: center; }1191 .pf-nav-social li {1192 padding-top: 0px;1193 padding-bottom: 15px;1194 padding-left: 0px;1195 padding-right: 15px; }1196 .pf-nav-social a:hover svg {1197 fill: #222222;1198 opacity: 1; }1199 .pf-nav-social svg {1200 fill: #999999;