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 dir="ltr" lang="en">3 <head>4 <meta content="width=device-width, initial-scale=1" name="viewport">5 <title>6 SAU Origins Exhibit Opening7 </title>8 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">9 <!-- Chrome, Firefox OS and Opera -->10 <meta content="#e7e7e7" name="theme-color">11 <!-- Windows Phone -->12 <meta content="#e7e7e7" name="msapplication-navbutton-color">13 <meta content="blogger" name="generator">14 <!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->15 <meta content="" property="og:url">16 <meta content="SAU Origins Exhibit Opening" property="og:title">17 <meta content="A blog about the creation/evolution debate from the president of Core Academy of Science." property="og:description">18 <meta content="" property="og:image">19 <style type="text/css">20 @font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/permanentmarker/v16/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cfw.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc3CsTKlA.woff2)format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc-CsTKlA.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc2CsTKlA.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc5CsTKlA.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc1CsTKlA.woff2)format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc0CsTKlA.woff2)format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:url(//fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2)format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKOzY.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKOzY.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKOzY.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7WxKOzY.woff2)format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKOzY.woff2)format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2)format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2)format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2)format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2)format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2)format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}21 </style>22 <style id="page-skin-1" type="text/css">23 <!--24/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{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,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: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{-moz-box-sizing:content-box;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;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;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}25/*!************************************************26* Blogger Template Style27* Name: Contempo28**************************************************/29body{30overflow-wrap:break-word;31word-break:break-word;32word-wrap:break-word33}34.hidden{35display:none36}37.invisible{38visibility:hidden39}40.container::after,.float-container::after{41clear:both;42content:"";43display:table44}45.clearboth{46clear:both47}48#comments .comment .comment-actions,.subscribe-popup .FollowByEmail .follow-by-email-submit,.widget.Profile .profile-link,.widget.Profile .profile-link.visit-profile{49background:0 0;50border:0;51box-shadow:none;52color:#d90b0b;53cursor:pointer;54font-size:14px;55font-weight:700;56outline:0;57text-decoration:none;58text-transform:uppercase;59width:auto60}61.dim-overlay{62background-color:rgba(0,0,0,.54);63height:100vh;64left:0;65position:fixed;66top:0;67width:100%68}69#sharing-dim-overlay{70background-color:transparent71}72input::-ms-clear{73display:none74}75.blogger-logo,.svg-icon-24.blogger-logo{76fill:#ff9800;77opacity:178}79.loading-spinner-large{80-webkit-animation:mspin-rotate 1.568s infinite linear;81animation:mspin-rotate 1.568s infinite linear;82height:48px;83overflow:hidden;84position:absolute;85width:48px;86z-index:20087}88.loading-spinner-large>div{89-webkit-animation:mspin-revrot 5332ms infinite steps(4);90animation:mspin-revrot 5332ms infinite steps(4)91}92.loading-spinner-large>div>div{93-webkit-animation:mspin-singlecolor-large-film 1333ms infinite steps(81);94animation:mspin-singlecolor-large-film 1333ms infinite steps(81);95background-size:100%;96height:48px;97width:3888px98}99.mspin-black-large>div>div,.mspin-grey_54-large>div>div{100background-image:url(https://www.blogblog.com/indie/mspin_black_large.svg)101}102.mspin-white-large>div>div{103background-image:url(https://www.blogblog.com/indie/mspin_white_large.svg)104}105.mspin-grey_54-large{106opacity:.54107}108@-webkit-keyframes mspin-singlecolor-large-film{109from{110-webkit-transform:translateX(0);111transform:translateX(0)112}113to{114-webkit-transform:translateX(-3888px);115transform:translateX(-3888px)116}117}118@keyframes mspin-singlecolor-large-film{119from{120-webkit-transform:translateX(0);121transform:translateX(0)122}123to{124-webkit-transform:translateX(-3888px);125transform:translateX(-3888px)126}127}128@-webkit-keyframes mspin-rotate{129from{130-webkit-transform:rotate(0);131transform:rotate(0)132}133to{134-webkit-transform:rotate(360deg);135transform:rotate(360deg)136}137}138@keyframes mspin-rotate{139from{140-webkit-transform:rotate(0);141transform:rotate(0)142}143to{144-webkit-transform:rotate(360deg);145transform:rotate(360deg)146}147}148@-webkit-keyframes mspin-revrot{149from{150-webkit-transform:rotate(0);151transform:rotate(0)152}153to{154-webkit-transform:rotate(-360deg);155transform:rotate(-360deg)156}157}158@keyframes mspin-revrot{159from{160-webkit-transform:rotate(0);161transform:rotate(0)162}163to{164-webkit-transform:rotate(-360deg);165transform:rotate(-360deg)166}167}168.skip-navigation{169background-color:#fff;170box-sizing:border-box;171color:#000;172display:block;173height:0;174left:0;175line-height:50px;176overflow:hidden;177padding-top:0;178position:fixed;179text-align:center;180top:0;181-webkit-transition:box-shadow .3s,height .3s,padding-top .3s;182transition:box-shadow .3s,height .3s,padding-top .3s;183width:100%;184z-index:900185}186.skip-navigation:focus{187box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);188height:50px189}190#main{191outline:0192}193.main-heading{194position:absolute;195clip:rect(1px,1px,1px,1px);196padding:0;197border:0;198height:1px;199width:1px;200overflow:hidden201}202.Attribution{203margin-top:1em;204text-align:center205}206.Attribution .blogger img,.Attribution .blogger svg{207vertical-align:bottom208}209.Attribution .blogger img{210margin-right:.5em211}212.Attribution div{213line-height:24px;214margin-top:.5em215}216.Attribution .copyright,.Attribution .image-attribution{217font-size:.7em;218margin-top:1.5em219}220.BLOG_mobile_video_class{221display:none222}223.bg-photo{224background-attachment:scroll!important225}226body .CSS_LIGHTBOX{227z-index:900228}229.extendable .show-less,.extendable .show-more{230border-color:#d90b0b;231color:#d90b0b;232margin-top:8px233}234.extendable .show-less.hidden,.extendable .show-more.hidden{235display:none236}237.inline-ad{238display:none;239max-width:100%;240overflow:hidden241}242.adsbygoogle{243display:block244}245#cookieChoiceInfo{246bottom:0;247top:auto248}249iframe.b-hbp-video{250border:0251}252.post-body img{253max-width:100%254}255.post-body iframe{256max-width:100%257}258.post-body a[imageanchor="1"]{259display:inline-block260}261.byline{262margin-right:1em263}264.byline:last-child{265margin-right:0266}267.link-copied-dialog{268max-width:520px;269outline:0270}271.link-copied-dialog .modal-dialog-buttons{272margin-top:8px273}274.link-copied-dialog .goog-buttonset-default{275background:0 0;276border:0277}278.link-copied-dialog .goog-buttonset-default:focus{279outline:0280}281.paging-control-container{282margin-bottom:16px283}284.paging-control-container .paging-control{285display:inline-block286}287.paging-control-container .comment-range-text::after,.paging-control-container .paging-control{288color:#d90b0b289}290.paging-control-container .comment-range-text,.paging-control-container .paging-control{291margin-right:8px292}293.paging-control-container .comment-range-text::after,.paging-control-container .paging-control::after{294content:"\b7";295cursor:default;296padding-left:8px;297pointer-events:none298}299.paging-control-container .comment-range-text:last-child::after,.paging-control-container .paging-control:last-child::after{300content:none301}302.byline.reactions iframe{303height:20px304}305.b-notification{306color:#000;307background-color:#fff;308border-bottom:solid 1px #000;309box-sizing:border-box;310padding:16px 32px;311text-align:center312}313.b-notification.visible{314-webkit-transition:margin-top .3s cubic-bezier(.4,0,.2,1);315transition:margin-top .3s cubic-bezier(.4,0,.2,1)316}317.b-notification.invisible{318position:absolute319}320.b-notification-close{321position:absolute;322right:8px;323top:8px324}325.no-posts-message{326line-height:40px;327text-align:center328}329@media screen and (max-width:800px){330body.item-view .post-body a[imageanchor="1"][style*="float: left;"],body.item-view .post-body a[imageanchor="1"][style*="float: right;"]{331float:none!important;332clear:none!important333}334body.item-view .post-body a[imageanchor="1"] img{335display:block;336height:auto;337margin:0 auto338}339body.item-view .post-body>.separator:first-child>a[imageanchor="1"]:first-child{340margin-top:20px341}342.post-body a[imageanchor]{343display:block344}345body.item-view .post-body a[imageanchor="1"]{346margin-left:0!important;347margin-right:0!important348}349body.item-view .post-body a[imageanchor="1"]+a[imageanchor="1"]{350margin-top:16px351}352}353.item-control{354display:none355}356#comments{357border-top:1px dashed rgba(0,0,0,.54);358margin-top:20px;359padding:20px360}361#comments .comment-thread ol{362margin:0;363padding-left:0;364padding-left:0365}366#comments .comment .comment-replybox-single,#comments .comment-thread .comment-replies{367margin-left:60px368}369#comments .comment-thread .thread-count{370display:none371}372#comments .comment{373list-style-type:none;374padding:0 0 30px;375position:relative376}377#comments .comment .comment{378padding-bottom:8px379}380.comment .avatar-image-container{381position:absolute382}383.comment .avatar-image-container img{384border-radius:50%385}386.avatar-image-container svg,.comment .avatar-image-container .avatar-icon{387border-radius:50%;388border:solid 1px #414141;389box-sizing:border-box;390fill:#414141;391height:35px;392margin:0;393padding:7px;394width:35px395}396.comment .comment-block{397margin-top:10px;398margin-left:60px;399padding-bottom:0400}401#comments .comment-author-header-wrapper{402margin-left:40px403}404#comments .comment .thread-expanded .comment-block{405padding-bottom:20px406}407#comments .comment .comment-header .user,#comments .comment .comment-header .user a{408color:#000000;409font-style:normal;410font-weight:700411}412#comments .comment .comment-actions{413bottom:0;414margin-bottom:15px;415position:absolute416}417#comments .comment .comment-actions>*{418margin-right:8px419}420#comments .comment .comment-header .datetime{421bottom:0;422color:rgba(0,0,0,.54);423display:inline-block;424font-size:13px;425font-style:italic;426margin-left:8px427}428#comments .comment .comment-footer .comment-timestamp a,#comments .comment .comment-header .datetime a{429color:rgba(0,0,0,.54)430}431#comments .comment .comment-content,.comment .comment-body{432margin-top:12px;433word-break:break-word434}435.comment-body{436margin-bottom:12px437}438#comments.embed[data-num-comments="0"]{439border:0;440margin-top:0;441padding-top:0442}443#comments.embed[data-num-comments="0"] #comment-post-message,#comments.embed[data-num-comments="0"] div.comment-form>p,#comments.embed[data-num-comments="0"] p.comment-footer{444display:none445}446#comment-editor-src{447display:none448}449.comments .comments-content .loadmore.loaded{450max-height:0;451opacity:0;452overflow:hidden453}454.extendable .remaining-items{455height:0;456overflow:hidden;457-webkit-transition:height .3s cubic-bezier(.4,0,.2,1);458transition:height .3s cubic-bezier(.4,0,.2,1)459}460.extendable .remaining-items.expanded{461height:auto462}463.svg-icon-24,.svg-icon-24-button{464cursor:pointer;465height:24px;466width:24px;467min-width:24px468}469.touch-icon{470margin:-12px;471padding:12px472}473.touch-icon:active,.touch-icon:focus{474background-color:rgba(153,153,153,.4);475border-radius:50%476}477svg:not(:root).touch-icon{478overflow:visible479}480html[dir=rtl] .rtl-reversible-icon{481-webkit-transform:scaleX(-1);482-ms-transform:scaleX(-1);483transform:scaleX(-1)484}485.svg-icon-24-button,.touch-icon-button{486background:0 0;487border:0;488margin:0;489outline:0;490padding:0491}492.touch-icon-button .touch-icon:active,.touch-icon-button .touch-icon:focus{493background-color:transparent494}495.touch-icon-button:active .touch-icon,.touch-icon-button:focus .touch-icon{496background-color:rgba(153,153,153,.4);497border-radius:50%498}499.Profile .default-avatar-wrapper .avatar-icon{500border-radius:50%;501border:solid 1px #414141;502box-sizing:border-box;503fill:#414141;504margin:0505}506.Profile .individual .default-avatar-wrapper .avatar-icon{507padding:25px508}509.Profile .individual .avatar-icon,.Profile .individual .profile-img{510height:120px;511width:120px512}513.Profile .team .default-avatar-wrapper .avatar-icon{514padding:8px515}516.Profile .team .avatar-icon,.Profile .team .default-avatar-wrapper,.Profile .team .profile-img{517height:40px;518width:40px519}520.snippet-container{521margin:0;522position:relative;523overflow:hidden524}525.snippet-fade{526bottom:0;527box-sizing:border-box;528position:absolute;529width:96px530}531.snippet-fade{532right:0533}534.snippet-fade:after{535content:"\2026"536}537.snippet-fade:after{538float:right539}540.post-bottom{541-webkit-box-align:center;542-webkit-align-items:center;543-ms-flex-align:center;544align-items:center;545display:-webkit-box;546display:-webkit-flex;547display:-ms-flexbox;548display:flex;549-webkit-flex-wrap:wrap;550-ms-flex-wrap:wrap;551flex-wrap:wrap552}553.post-footer{554-webkit-box-flex:1;555-webkit-flex:1 1 auto;556-ms-flex:1 1 auto;557flex:1 1 auto;558-webkit-flex-wrap:wrap;559-ms-flex-wrap:wrap;560flex-wrap:wrap;561-webkit-box-ordinal-group:2;562-webkit-order:1;563-ms-flex-order:1;564order:1565}566.post-footer>*{567-webkit-box-flex:0;568-webkit-flex:0 1 auto;569-ms-flex:0 1 auto;570flex:0 1 auto571}572.post-footer .byline:last-child{573margin-right:1em574}575.jump-link{576-webkit-box-flex:0;577-webkit-flex:0 0 auto;578-ms-flex:0 0 auto;579flex:0 0 auto;580-webkit-box-ordinal-group:3;581-webkit-order:2;582-ms-flex-order:2;583order:2584}585.centered-top-container.sticky{586left:0;587position:fixed;588right:0;589top:0;590width:auto;591z-index:50;592-webkit-transition-property:opacity,-webkit-transform;593transition-property:opacity,-webkit-transform;594transition-property:transform,opacity;595transition-property:transform,opacity,-webkit-transform;596-webkit-transition-duration:.2s;597transition-duration:.2s;598-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);599transition-timing-function:cubic-bezier(.4,0,.2,1)600}601.centered-top-placeholder{602display:none603}604.collapsed-header .centered-top-placeholder{605display:block606}607.centered-top-container .Header .replaced h1,.centered-top-placeholder .Header .replaced h1{608display:none609}610.centered-top-container.sticky .Header .replaced h1{611display:block612}613.centered-top-container.sticky .Header .header-widget{614background:0 0615}616.centered-top-container.sticky .Header .header-image-wrapper{617display:none618}619.centered-top-container img,.centered-top-placeholder img{620max-width:100%621}622.collapsible{623-webkit-transition:height .3s cubic-bezier(.4,0,.2,1);624transition:height .3s cubic-bezier(.4,0,.2,1)625}626.collapsible,.collapsible>summary{627display:block;628overflow:hidden629}630.collapsible>:not(summary){631display:none632}633.collapsible[open]>:not(summary){634display:block635}636.collapsible:focus,.collapsible>summary:focus{637outline:0638}639.collapsible>summary{640cursor:pointer;641display:block;642padding:0643}644.collapsible:focus>summary,.collapsible>summary:focus{645background-color:transparent646}647.collapsible>summary::-webkit-details-marker{648display:none649}650.collapsible-title{651-webkit-box-align:center;652-webkit-align-items:center;653-ms-flex-align:center;654align-items:center;655display:-webkit-box;656display:-webkit-flex;657display:-ms-flexbox;658display:flex659}660.collapsible-title .title{661-webkit-box-flex:1;662-webkit-flex:1 1 auto;663-ms-flex:1 1 auto;664flex:1 1 auto;665-webkit-box-ordinal-group:1;666-webkit-order:0;667-ms-flex-order:0;668order:0;669overflow:hidden;670text-overflow:ellipsis;671white-space:nowrap672}673.collapsible-title .chevron-down,.collapsible[open] .collapsible-title .chevron-up{674display:block675}676.collapsible-title .chevron-up,.collapsible[open] .collapsible-title .chevron-down{677display:none678}679.flat-button{680cursor:pointer;681display:inline-block;682font-weight:700;683text-transform:uppercase;684border-radius:2px;685padding:8px;686margin:-8px687}688.flat-icon-button{689background:0 0;690border:0;691margin:0;692outline:0;693padding:0;694margin:-12px;695padding:12px;696cursor:pointer;697box-sizing:content-box;698display:inline-block;699line-height:0700}701.flat-icon-button,.flat-icon-button .splash-wrapper{702border-radius:50%703}704.flat-icon-button .splash.animate{705-webkit-animation-duration:.3s;706animation-duration:.3s707}708.overflowable-container{709max-height:46px;710overflow:hidden;711position:relative712}713.overflow-button{714cursor:pointer715}716#overflowable-dim-overlay{717background:0 0718}719.overflow-popup{720box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);721background-color:#ffffff;722left:0;723max-width:calc(100% - 32px);724position:absolute;725top:0;726visibility:hidden;727z-index:101728}729.overflow-popup ul{730list-style:none731}732.overflow-popup .tabs li,.overflow-popup li{733display:block;734height:auto735}736.overflow-popup .tabs li{737padding-left:0;738padding-right:0739}740.overflow-button.hidden,.overflow-popup .tabs li.hidden,.overflow-popup li.hidden{741display:none742}743.pill-button{744background:0 0;745border:1px solid;746border-radius:12px;747cursor:pointer;748display:inline-block;749padding:4px 16px;750text-transform:uppercase751}752.ripple{753position:relative754}755.ripple>*{756z-index:1757}758.splash-wrapper{759bottom:0;760left:0;761overflow:hidden;762pointer-events:none;763position:absolute;764right:0;765top:0;766z-index:0767}768.splash{769background:#ccc;770border-radius:100%;771display:block;772opacity:.6;773position:absolute;774-webkit-transform:scale(0);775-ms-transform:scale(0);776transform:scale(0)777}778.splash.animate{779-webkit-animation:ripple-effect .4s linear;780animation:ripple-effect .4s linear781}782@-webkit-keyframes ripple-effect{783100%{784opacity:0;785-webkit-transform:scale(2.5);786transform:scale(2.5)787}788}789@keyframes ripple-effect{790100%{791opacity:0;792-webkit-transform:scale(2.5);793transform:scale(2.5)794}795}796.search{797display:-webkit-box;798display:-webkit-flex;799display:-ms-flexbox;800display:flex;801line-height:24px;802width:24px803}804.search.focused{805width:100%806}807.search.focused .section{808width:100%809}810.search form{811z-index:101812}813.search h3{814display:none815}816.search form{817display:-webkit-box;818display:-webkit-flex;819display:-ms-flexbox;820display:flex;821-webkit-box-flex:1;822-webkit-flex:1 0 0;823-ms-flex:1 0 0px;824flex:1 0 0;825border-bottom:solid 1px transparent;826padding-bottom:8px827}828.search form>*{829display:none830}831.search.focused form>*{832display:block833}834.search .search-input label{835display:none836}837.centered-top-placeholder.cloned .search form{838z-index:30839}840.search.focused form{841border-color:#ffffff;842position:relative;843width:auto844}845.collapsed-header .centered-top-container .search.focused form{846border-bottom-color:transparent847}848.search-expand{849-webkit-box-flex:0;850-webkit-flex:0 0 auto;851-ms-flex:0 0 auto;852flex:0 0 auto853}854.search-expand-text{855display:none856}857.search-close{858display:inline;859vertical-align:middle860}861.search-input{862-webkit-box-flex:1;863-webkit-flex:1 0 1px;864-ms-flex:1 0 1px;865flex:1 0 1px866}867.search-input input{868background:0 0;869border:0;870box-sizing:border-box;871color:#ffffff;872display:inline-block;873outline:0;874width:calc(100% - 48px)875}876.search-input input.no-cursor{877color:transparent;878text-shadow:0 0 0 #ffffff879}880.collapsed-header .centered-top-container .search-action,.collapsed-header .centered-top-container .search-input input{881color:#000000882}883.collapsed-header .centered-top-container .search-input input.no-cursor{884color:transparent;885text-shadow:0 0 0 #000000886}887.collapsed-header .centered-top-container .search-input input.no-cursor:focus,.search-input input.no-cursor:focus{888outline:0889}890.search-focused>*{891visibility:hidden892}893.search-focused .search,.search-focused .search-icon{894visibility:visible895}896.search.focused .search-action{897display:block898}899.search.focused .search-action:disabled{900opacity:.3901}902.widget.Sharing .sharing-button{903display:none904}905.widget.Sharing .sharing-buttons li{906padding:0907}908.widget.Sharing .sharing-buttons li span{909display:none910}911.post-share-buttons{912position:relative913}914.centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{915fill:#000000916}917.sharing-open.touch-icon-button:active .touch-icon,.sharing-open.touch-icon-button:focus .touch-icon{918background-color:transparent919}920.share-buttons{921background-color:#ffffff;922border-radius:2px;923box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);924color:#000000;925list-style:none;926margin:0;927padding:8px 0;928position:absolute;929top:-11px;930min-width:200px;931z-index:101932}933.share-buttons.hidden{934display:none935}936.sharing-button{937background:0 0;938border:0;939margin:0;940outline:0;941padding:0;942cursor:pointer943}944.share-buttons li{945margin:0;946height:48px947}948.share-buttons li:last-child{949margin-bottom:0950}951.share-buttons li .sharing-platform-button{952box-sizing:border-box;953cursor:pointer;954display:block;955height:100%;956margin-bottom:0;957padding:0 16px;958position:relative;959width:100%960}961.share-buttons li .sharing-platform-button:focus,.share-buttons li .sharing-platform-button:hover{962background-color:rgba(128,128,128,.1);963outline:0964}965.share-buttons li svg[class*=" sharing-"],.share-buttons li svg[class^=sharing-]{966position:absolute;967top:10px968}969.share-buttons li span.sharing-platform-button{970position:relative;971top:0972}973.share-buttons li .platform-sharing-text{974display:block;975font-size:16px;976line-height:48px;977white-space:nowrap978}979.share-buttons li .platform-sharing-text{980margin-left:56px981}982.sidebar-container{983background-color:#ffffff;984max-width:284px;985overflow-y:auto;986-webkit-transition-property:-webkit-transform;987transition-property:-webkit-transform;988transition-property:transform;989transition-property:transform,-webkit-transform;990-webkit-transition-duration:.3s;991transition-duration:.3s;992-webkit-transition-timing-function:cubic-bezier(0,0,.2,1);993transition-timing-function:cubic-bezier(0,0,.2,1);994width:284px;995z-index:101;996-webkit-overflow-scrolling:touch997}998.sidebar-container .navigation{999line-height:0;1000padding:16px1001}1002.sidebar-container .sidebar-back{1003cursor:pointer1004}1005.sidebar-container .widget{1006background:0 0;1007margin:0 16px;1008padding:16px 01009}1010.sidebar-container .widget .title{1011color:#000000;1012margin:01013}1014.sidebar-container .widget ul{1015list-style:none;1016margin:0;1017padding:01018}1019.sidebar-container .widget ul ul{1020margin-left:1em1021}1022.sidebar-container .widget li{1023font-size:16px;1024line-height:normal1025}1026.sidebar-container .widget+.widget{1027border-top:1px dashed #c2c2c21028}1029.BlogArchive li{1030margin:16px 01031}1032.BlogArchive li:last-child{1033margin-bottom:01034}1035.Label li a{1036display:inline-block1037}1038.BlogArchive .post-count,.Label .label-count{1039float:right;1040margin-left:.25em1041}1042.BlogArchive .post-count::before,.Label .label-count::before{1043content:"("1044}1045.BlogArchive .post-count::after,.Label .label-count::after{1046content:")"1047}1048.widget.Translate .skiptranslate>div{1049display:block!important1050}1051.widget.Profile .profile-link{1052display:-webkit-box;1053display:-webkit-flex;1054display:-ms-flexbox;1055display:flex1056}1057.widget.Profile .team-member .default-avatar-wrapper,.widget.Profile .team-member .profile-img{1058-webkit-box-flex:0;1059-webkit-flex:0 0 auto;1060-ms-flex:0 0 auto;1061flex:0 0 auto;1062margin-right:1em1063}1064.widget.Profile .individual .profile-link{1065-webkit-box-orient:vertical;1066-webkit-box-direction:normal;1067-webkit-flex-direction:column;1068-ms-flex-direction:column;1069flex-direction:column1070}1071.widget.Profile .team .profile-link .profile-name{1072-webkit-align-self:center;1073-ms-flex-item-align:center;1074align-self:center;1075display:block;1076-webkit-box-flex:1;1077-webkit-flex:1 1 auto;1078-ms-flex:1 1 auto;1079flex:1 1 auto1080}1081.dim-overlay{1082background-color:rgba(0,0,0,.54);1083z-index:1001084}1085body.sidebar-visible{1086overflow-y:hidden1087}1088@media screen and (max-width:1439px){1089.sidebar-container{1090bottom:0;1091position:fixed;1092top:0;1093left:0;1094right:auto1095}1096.sidebar-container.sidebar-invisible{1097-webkit-transition-timing-function:cubic-bezier(.4,0,.6,1);1098transition-timing-function:cubic-bezier(.4,0,.6,1);1099-webkit-transform:translateX(-284px);1100-ms-transform:translateX(-284px);1101transform:translateX(-284px)1102}1103}1104@media screen and (min-width:1440px){1105.sidebar-container{1106position:absolute;1107top:0;1108left:0;1109right:auto1110}1111.sidebar-container .navigation{1112display:none1113}1114}1115.dialog{1116box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);1117background:#ffffff;1118box-sizing:border-box;1119color:#4e4e4e;1120padding:30px;1121position:fixed;1122text-align:center;1123width:calc(100% - 24px);1124z-index:1011125}1126.dialog input[type=email],.dialog input[type=text]{1127background-color:transparent;1128border:0;1129border-bottom:solid 1px rgba(78,78,78,.12);1130color:#4e4e4e;1131display:block;1132font-family:Roboto, sans-serif;1133font-size:16px;1134line-height:24px;1135margin:auto;1136padding-bottom:7px;1137outline:0;1138text-align:center;1139width:100%1140}1141.dialog input[type=email]::-webkit-input-placeholder,.dialog input[type=text]::-webkit-input-placeholder{1142color:#4e4e4e1143}1144.dialog input[type=email]::-moz-placeholder,.dialog input[type=text]::-moz-placeholder{1145color:#4e4e4e1146}1147.dialog input[type=email]:-ms-input-placeholder,.dialog input[type=text]:-ms-input-placeholder{1148color:#4e4e4e1149}1150.dialog input[type=email]::-ms-input-placeholder,.dialog input[type=text]::-ms-input-placeholder{1151color:#4e4e4e1152}1153.dialog input[type=email]::placeholder,.dialog input[type=text]::placeholder{1154color:#4e4e4e1155}1156.dialog input[type=email]:focus,.dialog input[type=text]:focus{1157border-bottom:solid 2px #d90b0b;1158padding-bottom:6px1159}1160.dialog input.no-cursor{1161color:transparent;1162text-shadow:0 0 0 #4e4e4e1163}1164.dialog input.no-cursor:focus{1165outline:01166}1167.dialog input.no-cursor:focus{1168outline:01169}1170.dialog input[type=submit]{1171font-family:Roboto, sans-serif1172}1173.dialog .goog-buttonset-default{1174color:#d90b0b1175}1176.subscribe-popup{1177max-width:364px1178}1179.subscribe-popup h3{1180color:#000000;1181font-size:1.8em;1182margin-top:01183}1184.subscribe-popup .FollowByEmail h3{1185display:none1186}1187.subscribe-popup .FollowByEmail .follow-by-email-submit{1188color:#d90b0b;1189display:inline-block;1190margin:0 auto;1191margin-top:24px;1192width:auto;1193white-space:normal1194}1195.subscribe-popup .FollowByEmail .follow-by-email-submit:disabled{1196cursor:default;1197opacity:.31198}1199@media (max-width:800px){1200.blog-name div.widget.Subscribe{