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="js flexbox canvas canvastext webgl no-touch geolocation 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 svg inlinesvg smil svgclippaths" data-cms="" data-siteid="19115" data-themeid="mk028" lang="en" style xml:lang="en">3 <head>4 <!--5 6Theme: MK028 "ten Boom"7Design © 2023 Monk Development, Inc. All rights reserved.8For help, see: http://help.ekklesia360.com/9 10-->11 <meta charset="utf-8">12 <meta content="IE=edge" http-equiv="X-UA-Compatible">13 <title>14 Hampton Park Baptist Church15 </title>16 <meta content name="description">17 <meta content name="keywords">18 <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0" name="viewport">19 <meta content="yes" name="apple-mobile-web-app-capable">20 <style>21 @font-face {22 font-family: 'Playfair Display';23 font-style: italic;24 font-weight: 400;25 src: url(https://fonts.gstatic.com/s/playfairdisplay/v36/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_qiTXtHA_A.ttf) format('truetype');26}27@font-face {28 font-family: 'Playfair Display';29 font-style: italic;30 font-weight: 700;31 src: url(https://fonts.gstatic.com/s/playfairdisplay/v36/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_k-UXtHA_A.ttf) format('truetype');32}33@font-face {34 font-family: 'Playfair Display';35 font-style: normal;36 font-weight: 400;37 src: url(https://fonts.gstatic.com/s/playfairdisplay/v36/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtY.ttf) format('truetype');38}39@font-face {40 font-family: 'Playfair Display';41 font-style: normal;42 font-weight: 700;43 src: url(https://fonts.gstatic.com/s/playfairdisplay/v36/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiunDXbtY.ttf) format('truetype');44}45@font-face {46 font-family: 'Rambla';47 font-style: italic;48 font-weight: 400;49 src: url(https://fonts.gstatic.com/s/rambla/v13/snfps0ip98hx6mrEIYgNHtk.ttf) format('truetype');50}51@font-face {52 font-family: 'Rambla';53 font-style: italic;54 font-weight: 700;55 src: url(https://fonts.gstatic.com/s/rambla/v13/snfus0ip98hx6mrEIYC2O8l74Jo.ttf) format('truetype');56}57@font-face {58 font-family: 'Rambla';59 font-style: normal;60 font-weight: 400;61 src: url(https://fonts.gstatic.com/s/rambla/v13/snfrs0ip98hx6mrEJLgK.ttf) format('truetype');62}63@font-face {64 font-family: 'Rambla';65 font-style: normal;66 font-weight: 700;67 src: url(https://fonts.gstatic.com/s/rambla/v13/snfos0ip98hx6mrMn50aOfl8.ttf) format('truetype');68}69 70 71 72/* Common CSS */73 74 75 76@font-face {77 font-family: 'mk028';78 src: url('fonts/mk028.eot?6b1c00');79 src: url('fonts/mk028.eot?6b1c00#iefix') format('embedded-opentype'),80 url('fonts/mk028.ttf?6b1c00') format('truetype'),81 url('fonts/mk028.woff?6b1c00') format('woff'),82 url('fonts/mk028.svg?6b1c00#mk028') format('svg');83 font-weight: normal;84 font-style: normal;85}86 87[class^="icon-"], [class*=" icon-"] {88 /* use !important to prevent issues with browser extensions that change fonts */89 font-family: 'mk028' !important;90 speak: none;91 font-style: normal;92 font-weight: normal;93 font-variant: normal;94 text-transform: none;95 line-height: 1;96 97 /* Better Font Rendering =========== */98 -webkit-font-smoothing: antialiased;99 -moz-osx-font-smoothing: grayscale;100}101 102.icon-instagram-new:before {103 content: "\e900";104}105.icon-on-the-city:before {106 content: "\e600";107}108.icon-home:before {109 content: "\e000";110}111.icon-pencil:before {112 content: "\e00d";113}114.icon-image:before {115 content: "\e02b";116}117.icon-image2:before {118 content: "\e02c";119}120.icon-camera:before {121 content: "\e037";122}123.icon-music:before {124 content: "\e038";125}126.icon-headphones:before {127 content: "\e040";128}129.icon-book:before {130 content: "\e071";131}132.icon-books:before {133 content: "\e072";134}135.icon-file:before {136 content: "\e07b";137}138.icon-file2:before {139 content: "\e086";140}141.icon-envelop:before {142 content: "\e0eb";143}144.icon-envelop2:before {145 content: "\e0ec";146}147.icon-location:before {148 content: "\e0f1";149}150.icon-location2:before {151 content: "\e0f3";152}153.icon-map:before {154 content: "\e0fa";155}156.icon-calendar:before {157 content: "\e115";158}159.icon-screen:before {160 content: "\e123";161}162.icon-download:before {163 content: "\e132";164}165.icon-bubbles:before {166 content: "\e152";167}168.icon-bubbles2:before {169 content: "\e157";170}171.icon-bubble:before {172 content: "\e159";173}174.icon-users:before {175 content: "\e198";176}177.icon-quotes-left:before {178 content: "\e19f";179}180.icon-quotes-right:before {181 content: "\e1a0";182}183.icon-spinner:before {184 content: "\e1ae";185}186.icon-binoculars:before {187 content: "\e1b5";188}189.icon-search:before {190 content: "\e1ba";191}192.icon-list:before {193 content: "\e299";194}195.icon-list2:before {196 content: "\e29a";197}198.icon-list3:before {199 content: "\e29b";200}201.icon-numbered-list:before {202 content: "\e29c";203}204.icon-circle-small:before {205 content: "\e2ab";206}207.icon-menu:before {208 content: "\e2af";209}210.icon-bookmarks:before {211 content: "\e2e5";212}213.icon-starburst:before {214 content: "\e2e8";215}216.icon-snowflake:before {217 content: "\e2e9";218}219.icon-temperature:before {220 content: "\e2ea";221}222.icon-temperature2:before {223 content: "\e2eb";224}225.icon-weather-lightning:before {226 content: "\e2ec";227}228.icon-weather-rain:before {229 content: "\e2ed";230}231.icon-weather-snow:before {232 content: "\e2ee";233}234.icon-windy:before {235 content: "\e2ef";236}237.icon-hand:before {238 content: "\e33f";239}240.icon-plus-circle:before {241 content: "\e35f";242}243.icon-minus-circle:before {244 content: "\e361";245}246.icon-cancel-circle:before {247 content: "\e366";248}249.icon-close:before {250 content: "\e36b";251}252.icon-checkmark:before {253 content: "\e370";254}255.icon-minus:before {256 content: "\e375";257}258.icon-plus:before {259 content: "\e376";260}261.icon-minus2:before {262 content: "\e377";263}264.icon-play:before {265 content: "\e385";266}267.icon-volume-medium:before {268 content: "\e390";269}270.icon-volume-mute:before {271 content: "\e392";272}273.icon-arrow-up:before {274 content: "\e3b0";275}276.icon-arrow-right:before {277 content: "\e3b1";278}279.icon-arrow-down:before {280 content: "\e3b2";281}282.icon-arrow-left:before {283 content: "\e3b3";284}285.icon-arrow-up2:before {286 content: "\e3b4";287}288.icon-arrow-right2:before {289 content: "\e3b5";290}291.icon-arrow-down2:before {292 content: "\e3b6";293}294.icon-arrow-left2:before {295 content: "\e3b7";296}297.icon-arrow-up-left:before {298 content: "\e3e0";299}300.icon-arrowsquare:before {301 content: "\e3e1";302}303.icon-arrow-up-right:before {304 content: "\e3e2";305}306.icon-arrow-right3:before {307 content: "\e3e3";308}309.icon-arrow-down-right:before {310 content: "\e3e4";311}312.icon-arrow-down3:before {313 content: "\e3e5";314}315.icon-arrow-down-left:before {316 content: "\e3e6";317}318.icon-arrow-left3:before {319 content: "\e3e7";320}321.icon-arrow-up3:before {322 content: "\e408";323}324.icon-arrow-right4:before {325 content: "\e409";326}327.icon-arrow-down4:before {328 content: "\e40a";329}330.icon-arrow-left4:before {331 content: "\e40b";332}333.icon-facebook:before {334 content: "\e498";335}336.icon-twitter:before {337 content: "\e49d";338}339.icon-feed:before {340 content: "\e4a0";341}342.icon-feed2:before {343 content: "\e4a1";344}345.icon-youtube:before {346 content: "\e4a3";347}348.icon-vimeo:before {349 content: "\e4a5";350}351.icon-flickr:before {352 content: "\e4a9";353}354.icon-flickr2:before {355 content: "\e4aa";356}357.icon-blogger:before {358 content: "\e4c0";359}360.icon-tumblr:before {361 content: "\e4c2";362}363.icon-apple:before {364 content: "\e4c6";365}366.icon-android:before {367 content: "\e4c8";368}369.icon-windows:before {370 content: "\e4c9";371}372.icon-linkedin:before {373 content: "\e4cf";374}375.icon-pinterest:before {376 content: "\e4d7";377}378.icon-paypal:before {379 content: "\e4dd";380}381 382 383 384@charset "UTF-8";385/*386- - - - CSS SITEMAP - - - - 387i01 - Reset388i02 - Helpers389i03 - Plugins - Colorbox390i04 - Plugins - Selectmenu391i05 - Plugins - Cycle2392i06 - WYSIWYG Grid393i07 - Typography394i08 - Buttons395i09 - Tables396i10 - Forms397i11 - Filters398i12 - Mobile Nav399i13 - Desktop Nav 400i14 - Header401i15 - Billboard402i16 - Content403i17 - Subnav404i18 - Widgets405i19 - Sections406i20 - Footer407i21 - Notice408i22 - Containers409*/410/* i01 - Reset */411html, body, div, span, applet, object, iframe,412h1, h2, h3, h4, h5, h6, p, blockquote, pre,413a, abbr, acronym, address, big, cite, code,414del, dfn, em, img, ins, kbd, q, s, samp,415small, strike, strong, sub, sup, tt, var,416b, u, i, center,417dl, dt, dd, ol, ul, li,418fieldset, form, label, legend,419table, caption, tbody, tfoot, thead, tr, th, td,420article, aside, canvas, details, embed,421figure, figcaption, footer, header, hgroup,422menu, nav, output, ruby, section, summary,423time, mark, audio, video {424 margin: 0;425 padding: 0;426 border: 0;427 font: inherit;428 font-size: 100%;429 vertical-align: baseline;430}431 432html {433 line-height: 1;434}435 436ol, ul {437 list-style: none;438}439 440table {441 border-collapse: collapse;442 border-spacing: 0;443}444 445caption, th, td {446 text-align: left;447 font-weight: normal;448 vertical-align: middle;449}450 451q, blockquote {452 quotes: none;453}454q:before, q:after, blockquote:before, blockquote:after {455 content: "";456 content: none;457}458 459a img {460 border: none;461}462 463article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {464 display: block;465}466 467/* i02 - Helpers */468.clearfix:before, .clearfix:after {469 content: "";470 display: table;471}472 473.clearfix:after {474 clear: both;475}476 477.clearfix {478 zoom: 1;479}480 481.after, .div-row:after, .div-row .div-col:after, #content #text .filters:after, #content #text .filters .filter-wrap:after, .container:after, .container-wide:after {482 content: ".";483 display: block;484 clear: both;485 height: 0;486 visibility: hidden;487}488 489.clear {490 clear: both;491}492 493img {494 max-width: 100%;495 height: auto;496}497 498.ir {499 display: block;500 border: 0;501 text-indent: -999em;502 overflow: hidden;503 background-color: transparent;504 background-repeat: no-repeat;505 text-align: left;506 direction: ltr;507}508 509.ir br {510 display: none;511}512 513.hidden {514 display: none !important;515 visibility: hidden;516}517 518.visuallyhidden {519 border: 0;520 clip: rect(0 0 0 0);521 height: 1px;522 margin: -1px;523 overflow: hidden;524 padding: 0;525 position: absolute;526 width: 1px;527}528 529.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {530 clip: auto;531 height: auto;532 margin: 0;533 overflow: visible;534 position: static;535 width: auto;536}537 538.invisible {539 visibility: hidden;540}541 542/* i03 - Plugins - Colorbox */543#colorbox, #cboxOverlay, #cboxWrapper {544 position: absolute;545 top: 0;546 left: 0;547 z-index: 9999;548 overflow: hidden;549}550 551#cboxWrapper {552 max-width: none;553}554 555#cboxOverlay {556 position: fixed;557 width: 100%;558 height: 100%;559}560 561#cboxMiddleLeft, #cboxBottomLeft {562 clear: left;563}564 565#cboxContent {566 position: relative;567}568 569#cboxLoadedContent {570 overflow: auto;571 -webkit-overflow-scrolling: touch;572}573 574#cboxTitle {575 margin: 0;576}577 578#cboxLoadingOverlay, #cboxLoadingGraphic {579 position: absolute;580 top: 0;581 left: 0;582 width: 100%;583 height: 100%;584}585 586#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {587 cursor: pointer;588}589 590.cboxPhoto {591 float: left;592 margin: auto;593 border: 0;594 display: block;595 max-width: none;596 -ms-interpolation-mode: bicubic;597}598 599.cboxIframe {600 width: 100%;601 height: 100%;602 display: block;603 border: 0;604 padding: 0;605 margin: 0;606}607 608#colorbox, #cboxContent, #cboxLoadedContent {609 box-sizing: content-box;610 -moz-box-sizing: content-box;611 -webkit-box-sizing: content-box;612}613 614#cboxOverlay {615 background: #000;616 opacity: 0.9;617 filter: alpha(opacity=90);618}619 620#colorbox {621 outline: 0;622}623 624#cboxTopLeft {625 width: 14px;626 height: 14px;627 background: url(/_assets/img/colorbox/controls.png) no-repeat 0 0;628}629 630#cboxTopCenter {631 height: 14px;632 background: url(/_assets/img/colorbox/border.png) repeat-x top left;633}634 635#cboxTopRight {636 width: 14px;637 height: 14px;638 background: url(/_assets/img/colorbox/controls.png) no-repeat -36px 0;639}640 641#cboxBottomLeft {642 width: 14px;643 height: 43px;644 background: url(/_assets/img/colorbox/controls.png) no-repeat 0 -32px;645}646 647#cboxBottomCenter {648 height: 43px;649 background: url(/_assets/img/colorbox/border.png) repeat-x bottom left;650}651 652#cboxBottomRight {653 width: 14px;654 height: 43px;655 background: url(/_assets/img/colorbox/controls.png) no-repeat -36px -32px;656}657 658#cboxMiddleLeft {659 width: 14px;660 background: url(/_assets/img/colorbox/controls.png) repeat-y -175px 0;661}662 663#cboxMiddleRight {664 width: 14px;665 background: url(/_assets/img/colorbox/controls.png) repeat-y -211px 0;666}667 668#cboxContent {669 background: #fff;670 overflow: visible;671}672 673.cboxIframe {674 background: #fff;675}676 677#cboxError {678 padding: 50px;679 border: 1px solid #ccc;680}681 682#cboxLoadedContent {683 margin-bottom: 5px;684}685 686#cboxLoadingOverlay {687 background: url(/_assets/img/colorbox/loading_background.png) no-repeat center center;688}689 690#cboxLoadingGraphic {691 background: url(/_assets/img/colorbox/loading.gif) no-repeat center center;692}693 694#cboxTitle {695 position: absolute;696 bottom: -25px;697 left: 0;698 text-align: center;699 width: 100%;700 font-weight: bold;701 color: #7C7C7C;702}703 704#cboxCurrent {705 position: absolute;706 bottom: -25px;707 left: 58px;708 font-weight: bold;709 color: #7C7C7C;710}711 712#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {713 border: 0;714 padding: 0;715 margin: 0;716 overflow: visible;717 position: absolute;718 bottom: -29px;719 background: url(/_assets/img/colorbox/controls.png) no-repeat 0px 0px;720 width: 23px;721 height: 23px;722 text-indent: -9999px;723}724 725#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {726 outline: 0;727}728 729#cboxPrevious {730 left: 0px;731 background-position: -51px -25px;732}733 734#cboxPrevious:hover {735 background-position: -51px 0px;736}737 738#cboxNext {739 left: 27px;740 background-position: -75px -25px;741}742 743#cboxNext:hover {744 background-position: -75px 0px;745}746 747#cboxClose {748 right: 0;749 background-position: -100px -25px;750}751 752#cboxClose:hover {753 background-position: -100px 0px;754}755 756.cboxSlideshow_on #cboxSlideshow {757 background-position: -125px 0px;758 right: 27px;759}760 761.cboxSlideshow_on #cboxSlideshow:hover {762 background-position: -150px 0px;763}764 765.cboxSlideshow_off #cboxSlideshow {766 background-position: -150px -25px;767 right: 27px;768}769 770.cboxSlideshow_off #cboxSlideshow:hover {771 background-position: -125px 0px;772}773 774/* i04 - Plugins - Selectmenu */775#content .filters a {776 text-decoration: none;777}778 779.ui-selectmenu-button {780 display: block;781 position: relative;782 width: 160px;783 height: auto;784 line-height: 1;785 text-decoration: none;786 overflow: hidden;787 margin: 0;788 padding: 0;789 outline: none !important;790 text-decoration: none;791 cursor: pointer;792 background-color: #f1f1f1;793 border: 1px solid #e7e7e7;794 -moz-border-radius: 0.5em;795 -webkit-border-radius: 0.5em;796 border-radius: 0.5em;797}798.ui-selectmenu-button span.ui-icon {799 display: none !important;800}801.ui-selectmenu-button span.ui-selectmenu-text {802 position: relative;803 display: block;804 line-height: 2.75em;805 padding: 0 1.75em 0 .5em;806 font-size: 1em;807 font-weight: 400;808 color: #464647;809 overflow: hidden;810 white-space: nowrap;811 text-overflow: ellipsis;812 vertical-align: bottom;813}814.ui-selectmenu-button span.icon-arrow-down {815 color: #47ad4f;816 font-weight: normal;817 position: absolute;818 right: 5px;819 top: 50%;820 margin-top: -8px;821 font-weight: normal !important;822}823.ui-selectmenu-button.ui-state-focus {824 -moz-border-radius-bottomleft: 0;825 -webkit-border-bottom-left-radius: 0;826 border-bottom-left-radius: 0;827 -moz-border-radius-bottomright: 0;828 -webkit-border-bottom-right-radius: 0;829 border-bottom-right-radius: 0;830}831.ui-selectmenu-button.ui-state-focus span.ui-selectmenu-text {832 color: #47ad4f;833}834.ui-selectmenu-button.ui-state-disabled {835 cursor: default;836 opacity: .5;837}838.ui-selectmenu-button.ui-state-disabled span.icon-menu4 {839 display: none;840}841 842.ui-selectmenu-menu {843 position: absolute;844 top: 0;845 left: 0;846 margin: 10px 0 0 0;847 display: none;848 z-index: 999;849}850 851.ui-selectmenu-menu .ui-menu {852 position: relative;853 overflow: auto;854 overflow-x: hidden;855 margin: 0;856 padding: 0;857 width: 100%;858 max-width: 218px;859 max-height: 300px !important;860 list-style: none;861 background-color: white;862 border: 1px solid #e7e7e7;863}864.ui-selectmenu-menu .ui-menu li {865 margin: 0;866 padding: .5em;867 outline: none;868 font-size: 1em;869 font-weight: 400;870 text-transform: none;871 list-style: none;872 cursor: pointer;873 color: #47ad4f;874 border-top: 1px solid transparent;875 border-bottom: 1px solid transparent;876}877.ui-selectmenu-menu .ui-menu li:hover {878 color: #464647;879 background-color: #f1f1f1;880 border-top-color: #e7e7e7;881 border-bottom-color: #e7e7e7;882}883 884.ui-selectmenu-open {885 display: block;886}887 888/* i05 - Plugins - Selectmenu */889#cycle-ss,890.cycle-slideshow {891 width: 100%;892 margin: 0;893 padding: 0;894 position: relative;895}896 897#cycle-ss .slide,898.cycle-slideshow .slide {899 width: 100%;900}901 902#cycle-ss .slide,903.cycle-slideshow .slide {904 display: none;905}906 907#cycle-ss .slide.first,908.cycle-slideshow .slide.first {909 display: block;910}911 912#cycle-ss img,913.cycle-slideshow img {914 display: block;915 width: 100%;916 height: auto;917}918 919.disabled {920 opacity: .5;921 filter: alpha(opacity=50);922}923 924.cycle-pager {925 text-align: center;926 width: 100%;927 z-index: 500;928 overflow: hidden;929 padding: 0;930 height: 24px;931 line-height: 24px;932}933@media (min-width: 69em) {934 .cycle-pager {935 height: 18px;936 line-height: 18px;937 }938}939 940.cycle-pager span {941 font-size: 0;942 width: 12px;943 height: 12px;944 display: inline-block;945 background-color: #fafafa;946 cursor: pointer;947 margin: 0 4px;948 -moz-border-radius: 50px;949 -webkit-border-radius: 50px;950 border-radius: 50px;951}952.cycle-pager span:hover {953 opacity: .6;954}955 956.cycle-pager span.cycle-pager-active {957 background-color: #47ad4f;958}959 960.cycle-pager > * {961 cursor: pointer;962}963 964.pager-prev, .pager-next {965 visibility: hidden;966 position: absolute;967 font-size: 1.5em;968 top: 25%;969 color: #fafafa;970 z-index: 500;971 cursor: pointer;972 opacity: .4;973}974@media (min-width: 69em) {975 .pager-prev, .pager-next {976 font-size: 2.5em;977 top: 50%;978 margin-top: -.5em;979 }980}981.pager-prev:hover, .pager-next:hover {982 opacity: 1;983}984 985.pager-prev {986 left: .5em;987}988 989.pager-next {990 right: .5em;991}992 993.cycle-slideshow .pager, #cycle-ss .pager {994 display: none;995}996.cycle-slideshow:hover .pager, #cycle-ss:hover .pager {997 display: block;998}999 1000.disabled {1001 opacity: .5;1002 filter: alpha(opacity=50);1003}1004 1005.rotator {1006 overflow: hidden;1007 position: relative;1008 min-height: 180px;1009 background-color: #464647;1010 -moz-transition: all 0.2s ease-in-out;1011 -o-transition: all 0.2s ease-in-out;1012 -webkit-transition: all 0.2s ease-in-out;1013 transition: all 0.2s ease-in-out;1014}1015@media (min-width: 64em) {1016 .rotator {1017 min-height: 370px;1018 }1019}1020.rotator .loading {1021 display: inline-block;1022 width: auto;1023 position: absolute;1024 top: 50%;1025 left: 50%;1026 margin-top: -10px;1027 margin-left: -20px;1028}1029@media (min-width: 69em) {1030 .rotator .loading {1031 margin-top: -20px;1032 margin-left: -35px;1033 width: 70px;1034 }1035}1036.rotator .slide .caption {1037 padding: 2em;1038 text-align: center;1039 color: #fafafa;1040}1041@media (min-width: 69em) {1042 .rotator .slide .caption {1043 position: absolute;1044 left: 0;1045 top: 0;1046 width: 100%;1047 height: 100%;1048 padding: 0;1049 }1050}1051@media (min-width: 69em) {1052 .rotator .slide .caption .caption-inner {1053 position: relative;1054 top: 50%;1055 -webkit-transform: translateY(-50%);1056 -ms-transform: translateY(-50%);1057 transform: translateY(-50%);1058 }1059}1060.rotator .slide .caption .title {1061 font-size: 2.375em;1062 font-weight: bold;1063 margin-bottom: .25em;1064}1065.rotator .slide .caption .desc {1066 font-size: 1.25em;1067 margin-bottom: 1em;1068}1069.rotator .slide .caption .more {1070 margin: 0;1071}1072.rotator .slide .caption .button-medium {1073 color: #fafafa;1074 background-color: rgba(250, 250, 250, 0.15);1075 border: 1px solid #fafafa;1076 -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;1077 -o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;1078 -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;1079 transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;1080}1081.rotator .slide .caption .button-medium:hover {1082 color: #464647;1083 background-color: #fafafa;1084}1085 1086.js-rotator .loading {1087 display: none;1088}1089.js-rotator #cycle-ss {1090 opacity: 1;1091}1092.js-rotator .pager {1093 visibility: visible !important;1094}1095 1096/* i06 - WYSIWYG Grid */1097.div-row {1098 width: 100%;1099 position: relative;1100 margin-bottom: 0;1101}1102@media (min-width: 47.9375em) {1103 .div-row {1104 margin-bottom: 2em;1105 }1106}1107.div-row .div-col {1108 float: none;1109 width: 100%;1110 margin: 0 0 2em 0;1111 padding: 0;1112}1113@media (min-width: 47.9375em) {1114 .div-row .div-col {1115 float: left;1116 margin: 0 0 0 4%;1117 }1118}1119@media (min-width: 47.9375em) {1120 .div-row .div-col:first-child {1121 margin-left: 0 !important;1122 }1123}1124.div-row .div-col p:last-child {1125 margin: 0;1126}1127.div-row .div-col p img,1128.div-row .div-col div img,1129.div-row .div-col p iframe,1130.div-row .div-col div iframe,1131.div-row .div-col p object,1132.div-row .div-col div object,1133.div-row .div-col p video,1134.div-row .div-col div video {1135 margin-bottom: 1em;1136}1137 1138@media (min-width: 47.9375em) {1139 .div-row.one-half .div-col {1140 width: 48%;1141 }1142}1143 1144@media (min-width: 47.9375em) {1145 .div-row.one-third .div-col {1146 width: 30.66666666666667%;1147 }1148}1149 1150@media (min-width: 47.9375em) {1151 .div-row.one-fourth .div-col {1152 width: 22%;1153 }1154}1155 1156@media (min-width: 47.9375em) {1157 .div-row.two-third .div-col {1158 width: 72%;1159 }1160}1161@media (min-width: 47.9375em) {1162 .div-row.two-third .div-col:first-child {1163 width: 24%;1164 }1165}1166 1167@media (min-width: 47.9375em) {1168 .div-row.two-third.right .div-col {1169 width: 24%;1170 }1171}1172@media (min-width: 47.9375em) {1173 .div-row.two-third.right .div-col:first-child {1174 width: 72%;1175 }1176}1177 1178.div-embed {1179 position: relative;1180 padding-bottom: 56.25%;1181 padding-top: 0;1182 height: 0;1183 overflow: hidden;1184 margin-bottom: 1em;1185}1186.div-embed img {1187 display: block;1188 width: 100%;1189 height: auto;1190}1191.div-embed iframe, .div-embed object, .div-embed embed {1192 position: absolute;1193 top: 0;1194 left: 0;1195 width: 100%;1196 height: 100%;1197}1198 1199/* i07 - Typography */1200body {