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 dir="ltr" lang="en">3 <head>4 <style>5 </style>6 <meta content="width=device-width, initial-scale=1" name="viewport">7 <title>8 Ms. Healthy Face9 </title>10 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">11 <!-- Chrome, Firefox OS and Opera -->12 <meta content="#f4f4f4" name="theme-color">13 <!-- Windows Phone -->14 <meta content="#f4f4f4" name="msapplication-navbutton-color">15 <meta content="blogger" name="generator">16 <!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->17 <meta content="a beauty blog with blog posts about skincare, organic skincare, natural skincare, makeup, beauty and cosmetic products." name="description">18 <meta content="" property="og:url">19 <meta content="Ms. Healthy Face" property="og:title">20 <meta content="a beauty blog with blog posts about skincare, organic skincare, natural skincare, makeup, beauty and cosmetic products." property="og:description">21 <meta content="" property="og:image">22 <style type="text/css">23 @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;}24 </style>25 <style id="page-skin-1" type="text/css">26 <!--27/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}28/*!************************************************29* Blogger Template Style30* Name: Essential31**************************************************/32body{33overflow-wrap:break-word;34word-break:break-word;35word-wrap:break-word36}37.hidden{38display:none39}40.invisible{41visibility:hidden42}43.container:after,.float-container:after{44clear:both;45content:"";46display:table47}48.clearboth{49clear:both50}51#comments .comment .comment-actions,.subscribe-popup .FollowByEmail .follow-by-email-submit,.widget.Profile .profile-link,.widget.Profile .profile-link.visit-profile{52background:transparent;53border:0;54box-shadow:none;55color:#2196f3;56cursor:pointer;57font-size:14px;58font-weight:700;59outline:none;60text-decoration:none;61text-transform:uppercase;62width:auto63}64.dim-overlay{65height:100vh;66left:0;67position:fixed;68top:0;69width:100%70}71#sharing-dim-overlay{72background-color:transparent73}74input::-ms-clear{75display:none76}77.blogger-logo,.svg-icon-24.blogger-logo{78fill:#ff9800;79opacity:180}81.loading-spinner-large{82-webkit-animation:mspin-rotate 1568.63ms linear infinite;83animation:mspin-rotate 1568.63ms linear infinite;84height:48px;85overflow:hidden;86position:absolute;87width:48px;88z-index:20089}90.loading-spinner-large>div{91-webkit-animation:mspin-revrot 5332ms steps(4) infinite;92animation:mspin-revrot 5332ms steps(4) infinite93}94.loading-spinner-large>div>div{95-webkit-animation:mspin-singlecolor-large-film 1333ms steps(81) infinite;96animation:mspin-singlecolor-large-film 1333ms steps(81) infinite;97background-size:100%;98height:48px;99width:3888px100}101.mspin-black-large>div>div,.mspin-grey_54-large>div>div{102background-image:url(https://www.blogblog.com/indie/mspin_black_large.svg)103}104.mspin-white-large>div>div{105background-image:url(https://www.blogblog.com/indie/mspin_white_large.svg)106}107.mspin-grey_54-large{108opacity:.54109}110@-webkit-keyframes mspin-singlecolor-large-film{1110%{112-webkit-transform:translateX(0);113transform:translateX(0)114}115to{116-webkit-transform:translateX(-3888px);117transform:translateX(-3888px)118}119}120@keyframes mspin-singlecolor-large-film{1210%{122-webkit-transform:translateX(0);123transform:translateX(0)124}125to{126-webkit-transform:translateX(-3888px);127transform:translateX(-3888px)128}129}130@-webkit-keyframes mspin-rotate{1310%{132-webkit-transform:rotate(0deg);133transform:rotate(0deg)134}135to{136-webkit-transform:rotate(1turn);137transform:rotate(1turn)138}139}140@keyframes mspin-rotate{1410%{142-webkit-transform:rotate(0deg);143transform:rotate(0deg)144}145to{146-webkit-transform:rotate(1turn);147transform:rotate(1turn)148}149}150@-webkit-keyframes mspin-revrot{1510%{152-webkit-transform:rotate(0deg);153transform:rotate(0deg)154}155to{156-webkit-transform:rotate(-1turn);157transform:rotate(-1turn)158}159}160@keyframes mspin-revrot{1610%{162-webkit-transform:rotate(0deg);163transform:rotate(0deg)164}165to{166-webkit-transform:rotate(-1turn);167transform:rotate(-1turn)168}169}170.skip-navigation{171background-color:#fff;172box-sizing:border-box;173color:#000;174display:block;175height:0;176left:0;177line-height:50px;178overflow:hidden;179padding-top:0;180position:fixed;181text-align:center;182top:0;183-webkit-transition:box-shadow .3s,height .3s,padding-top .3s;184transition:box-shadow .3s,height .3s,padding-top .3s;185width:100%;186z-index:900187}188.skip-navigation:focus{189box-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);190height:50px191}192#main{193outline:none194}195.main-heading{196position:absolute;197clip:rect(1px,1px,1px,1px);198padding:0;199border:0;200height:1px;201width:1px;202overflow:hidden203}204.Attribution{205margin-top:1em;206text-align:center207}208.Attribution .blogger img,.Attribution .blogger svg{209vertical-align:bottom210}211.Attribution .blogger img{212margin-right:.5em213}214.Attribution div{215line-height:24px;216margin-top:.5em217}218.Attribution .copyright,.Attribution .image-attribution{219font-size:.7em;220margin-top:1.5em221}222.BLOG_mobile_video_class{223display:none224}225.bg-photo{226background-attachment:scroll!important227}228body .CSS_LIGHTBOX{229z-index:900230}231.extendable .show-less,.extendable .show-more{232border-color:#2196f3;233color:#2196f3;234margin-top:8px235}236.extendable .show-less.hidden,.extendable .show-more.hidden,.inline-ad{237display:none238}239.inline-ad{240max-width:100%;241overflow:hidden242}243.adsbygoogle{244display:block245}246#cookieChoiceInfo{247bottom:0;248top:auto249}250iframe.b-hbp-video{251border:0252}253.post-body iframe,.post-body img{254max-width:100%255}256.post-body a[imageanchor=\31]{257display:inline-block258}259.byline{260margin-right:1em261}262.byline:last-child{263margin-right:0264}265.link-copied-dialog{266max-width:520px;267outline:0268}269.link-copied-dialog .modal-dialog-buttons{270margin-top:8px271}272.link-copied-dialog .goog-buttonset-default{273background:transparent;274border:0275}276.link-copied-dialog .goog-buttonset-default:focus{277outline:0278}279.paging-control-container{280margin-bottom:16px281}282.paging-control-container .paging-control{283display:inline-block284}285.paging-control-container .comment-range-text:after,.paging-control-container .paging-control{286color:#2196f3287}288.paging-control-container .comment-range-text,.paging-control-container .paging-control{289margin-right:8px290}291.paging-control-container .comment-range-text:after,.paging-control-container .paging-control:after{292content:"\b7";293cursor:default;294padding-left:8px;295pointer-events:none296}297.paging-control-container .comment-range-text:last-child:after,.paging-control-container .paging-control:last-child:after{298content:none299}300.byline.reactions iframe{301height:20px302}303.b-notification{304color:#000;305background-color:#fff;306border-bottom:1px solid #000;307box-sizing:border-box;308padding:16px 32px;309text-align:center310}311.b-notification.visible{312-webkit-transition:margin-top .3s cubic-bezier(.4,0,.2,1);313transition:margin-top .3s cubic-bezier(.4,0,.2,1)314}315.b-notification.invisible{316position:absolute317}318.b-notification-close{319position:absolute;320right:8px;321top:8px322}323.no-posts-message{324line-height:40px;325text-align:center326}327@media screen and (max-width:800px){328body.item-view .post-body a[imageanchor=\31][style*=float\:\ left\;],body.item-view .post-body a[imageanchor=\31][style*=float\:\ right\;]{329float:none!important;330clear:none!important331}332body.item-view .post-body a[imageanchor=\31] img{333display:block;334height:auto;335margin:0 auto336}337body.item-view .post-body>.separator:first-child>a[imageanchor=\31]:first-child{338margin-top:20px339}340.post-body a[imageanchor]{341display:block342}343body.item-view .post-body a[imageanchor=\31]{344margin-left:0!important;345margin-right:0!important346}347body.item-view .post-body a[imageanchor=\31]+a[imageanchor=\31]{348margin-top:16px349}350}351.item-control{352display:none353}354#comments{355border-top:1px dashed rgba(0,0,0,.54);356margin-top:20px;357padding:20px358}359#comments .comment-thread ol{360margin:0;361padding-left:0;362padding-left:0363}364#comments .comment-thread .comment-replies,#comments .comment .comment-replybox-single{365margin-left:60px366}367#comments .comment-thread .thread-count{368display:none369}370#comments .comment{371list-style-type:none;372padding:0 0 30px;373position:relative374}375#comments .comment .comment{376padding-bottom:8px377}378.comment .avatar-image-container{379position:absolute380}381.comment .avatar-image-container img{382border-radius:50%383}384.avatar-image-container svg,.comment .avatar-image-container .avatar-icon{385border-radius:50%;386border:1px solid #707070;387box-sizing:border-box;388fill:#707070;389height:35px;390margin:0;391padding:7px;392width:35px393}394.comment .comment-block{395margin-top:10px;396margin-left:60px;397padding-bottom:0398}399#comments .comment-author-header-wrapper{400margin-left:40px401}402#comments .comment .thread-expanded .comment-block{403padding-bottom:20px404}405#comments .comment .comment-header .user,#comments .comment .comment-header .user a{406color:#424242;407font-style:normal;408font-weight:700409}410#comments .comment .comment-actions{411bottom:0;412margin-bottom:15px;413position:absolute414}415#comments .comment .comment-actions>*{416margin-right:8px417}418#comments .comment .comment-header .datetime{419bottom:0;420display:inline-block;421font-size:13px;422font-style:italic;423margin-left:8px424}425#comments .comment .comment-footer .comment-timestamp a,#comments .comment .comment-header .datetime,#comments .comment .comment-header .datetime a{426color:rgba(66,66,66,.54)427}428#comments .comment .comment-content,.comment .comment-body{429margin-top:12px;430word-break:break-word431}432.comment-body{433margin-bottom:12px434}435#comments.embed[data-num-comments=\30]{436border:0;437margin-top:0;438padding-top:0439}440#comment-editor-src,#comments.embed[data-num-comments=\30] #comment-post-message,#comments.embed[data-num-comments=\30] div.comment-form>p,#comments.embed[data-num-comments=\30] p.comment-footer{441display:none442}443.comments .comments-content .loadmore.loaded{444max-height:0;445opacity:0;446overflow:hidden447}448.extendable .remaining-items{449height:0;450overflow:hidden;451-webkit-transition:height .3s cubic-bezier(.4,0,.2,1);452transition:height .3s cubic-bezier(.4,0,.2,1)453}454.extendable .remaining-items.expanded{455height:auto456}457.svg-icon-24,.svg-icon-24-button{458cursor:pointer;459height:24px;460width:24px;461min-width:24px462}463.touch-icon{464margin:-12px;465padding:12px466}467.touch-icon:active,.touch-icon:focus{468background-color:hsla(0,0%,60%,.4);469border-radius:50%470}471svg:not(:root).touch-icon{472overflow:visible473}474html[dir=rtl] .rtl-reversible-icon{475-webkit-transform:scaleX(-1);476transform:scaleX(-1)477}478.svg-icon-24-button,.touch-icon-button{479background:transparent;480border:0;481margin:0;482outline:none;483padding:0484}485.touch-icon-button .touch-icon:active,.touch-icon-button .touch-icon:focus{486background-color:transparent487}488.touch-icon-button:active .touch-icon,.touch-icon-button:focus .touch-icon{489background-color:hsla(0,0%,60%,.4);490border-radius:50%491}492.Profile .default-avatar-wrapper .avatar-icon{493border-radius:50%;494border:1px solid #707070;495box-sizing:border-box;496fill:#707070;497margin:0498}499.Profile .individual .default-avatar-wrapper .avatar-icon{500padding:25px501}502.Profile .individual .avatar-icon,.Profile .individual .profile-img{503height:120px;504width:120px505}506.Profile .team .default-avatar-wrapper .avatar-icon{507padding:8px508}509.Profile .team .avatar-icon,.Profile .team .default-avatar-wrapper,.Profile .team .profile-img{510height:40px;511width:40px512}513.snippet-container{514margin:0;515position:relative;516overflow:hidden517}518.snippet-fade{519bottom:0;520box-sizing:border-box;521position:absolute;522width:96px;523right:0524}525.snippet-fade:after{526content:"\2026";527float:right528}529.post-bottom{530-webkit-box-align:center;531align-items:center;532display:-webkit-box;533display:flex;534flex-wrap:wrap535}536.post-footer{537-webkit-box-flex:1;538flex:1 1 auto;539flex-wrap:wrap;540-webkit-box-ordinal-group:2;541order:1542}543.post-footer>*{544-webkit-box-flex:0;545flex:0 1 auto546}547.post-footer .byline:last-child{548margin-right:1em549}550.jump-link{551-webkit-box-flex:0;552flex:0 0 auto;553-webkit-box-ordinal-group:3;554order:2555}556.centered-top-container.sticky{557left:0;558position:fixed;559right:0;560top:0;561width:auto;562z-index:50;563-webkit-transition-property:opacity,-webkit-transform;564transition-property:opacity,-webkit-transform;565transition-property:transform,opacity;566transition-property:transform,opacity,-webkit-transform;567-webkit-transition-duration:.2s;568transition-duration:.2s;569-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);570transition-timing-function:cubic-bezier(.4,0,.2,1)571}572.centered-top-placeholder{573display:none574}575.collapsed-header .centered-top-placeholder{576display:block577}578.centered-top-container .Header .replaced h1,.centered-top-placeholder .Header .replaced h1{579display:none580}581.centered-top-container.sticky .Header .replaced h1{582display:block583}584.centered-top-container.sticky .Header .header-widget{585background:none586}587.centered-top-container.sticky .Header .header-image-wrapper{588display:none589}590.centered-top-container img,.centered-top-placeholder img{591max-width:100%592}593.collapsible{594-webkit-transition:height .3s cubic-bezier(.4,0,.2,1);595transition:height .3s cubic-bezier(.4,0,.2,1)596}597.collapsible,.collapsible>summary{598display:block;599overflow:hidden600}601.collapsible>:not(summary){602display:none603}604.collapsible[open]>:not(summary){605display:block606}607.collapsible:focus,.collapsible>summary:focus{608outline:none609}610.collapsible>summary{611cursor:pointer;612display:block;613padding:0614}615.collapsible:focus>summary,.collapsible>summary:focus{616background-color:transparent617}618.collapsible>summary::-webkit-details-marker{619display:none620}621.collapsible-title{622-webkit-box-align:center;623align-items:center;624display:-webkit-box;625display:flex626}627.collapsible-title .title{628-webkit-box-flex:1;629flex:1 1 auto;630-webkit-box-ordinal-group:1;631order:0;632overflow:hidden;633text-overflow:ellipsis;634white-space:nowrap635}636.collapsible-title .chevron-down,.collapsible[open] .collapsible-title .chevron-up{637display:block638}639.collapsible-title .chevron-up,.collapsible[open] .collapsible-title .chevron-down{640display:none641}642.flat-button{643font-weight:700;644text-transform:uppercase;645border-radius:2px;646padding:8px;647margin:-8px648}649.flat-button,.flat-icon-button{650cursor:pointer;651display:inline-block652}653.flat-icon-button{654background:transparent;655border:0;656outline:none;657margin:-12px;658padding:12px;659box-sizing:content-box;660line-height:0661}662.flat-icon-button,.flat-icon-button .splash-wrapper{663border-radius:50%664}665.flat-icon-button .splash.animate{666-webkit-animation-duration:.3s;667animation-duration:.3s668}669.overflowable-container{670max-height:46px;671overflow:hidden;672position:relative673}674.overflow-button{675cursor:pointer676}677#overflowable-dim-overlay{678background:transparent679}680.overflow-popup{681box-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);682background-color:#ffffff;683left:0;684max-width:calc(100% - 32px);685position:absolute;686top:0;687visibility:hidden;688z-index:101689}690.overflow-popup ul{691list-style:none692}693.overflow-popup .tabs li,.overflow-popup li{694display:block;695height:auto696}697.overflow-popup .tabs li{698padding-left:0;699padding-right:0700}701.overflow-button.hidden,.overflow-popup .tabs li.hidden,.overflow-popup li.hidden{702display:none703}704.pill-button{705background:transparent;706border:1px solid;707border-radius:12px;708cursor:pointer;709display:inline-block;710padding:4px 16px;711text-transform:uppercase712}713.ripple{714position:relative715}716.ripple>*{717z-index:1718}719.splash-wrapper{720bottom:0;721left:0;722overflow:hidden;723pointer-events:none;724position:absolute;725right:0;726top:0;727z-index:0728}729.splash{730background:#ccc;731border-radius:100%;732display:block;733opacity:.6;734position:absolute;735-webkit-transform:scale(0);736transform:scale(0)737}738.splash.animate{739-webkit-animation:ripple-effect .4s linear;740animation:ripple-effect .4s linear741}742@-webkit-keyframes ripple-effect{743to{744opacity:0;745-webkit-transform:scale(2.5);746transform:scale(2.5)747}748}749@keyframes ripple-effect{750to{751opacity:0;752-webkit-transform:scale(2.5);753transform:scale(2.5)754}755}756.search{757display:-webkit-box;758display:flex;759line-height:24px;760width:24px761}762.search.focused,.search.focused .section{763width:100%764}765.search form{766z-index:101767}768.search h3{769display:none770}771.search form{772display:-webkit-box;773display:flex;774-webkit-box-flex:1;775flex:1 0 0;776border-bottom:1px solid transparent;777padding-bottom:8px778}779.search form>*{780display:none781}782.search.focused form>*{783display:block784}785.search .search-input label{786display:none787}788.collapsed-header .centered-top-container .search.focused form{789border-bottom-color:transparent790}791.search-expand{792-webkit-box-flex:0;793flex:0 0 auto794}795.search-expand-text{796display:none797}798.search-close{799display:inline;800vertical-align:middle801}802.search-input{803-webkit-box-flex:1;804flex:1 0 1px805}806.search-input input{807background:none;808border:0;809box-sizing:border-box;810color:#424242;811display:inline-block;812outline:none;813width:calc(100% - 48px)814}815.search-input input.no-cursor{816color:transparent;817text-shadow:0 0 0 #424242818}819.collapsed-header .centered-top-container .search-action,.collapsed-header .centered-top-container .search-input input{820color:#424242821}822.collapsed-header .centered-top-container .search-input input.no-cursor{823color:transparent;824text-shadow:0 0 0 #424242825}826.collapsed-header .centered-top-container .search-input input.no-cursor:focus,.search-input input.no-cursor:focus{827outline:none828}829.search-focused>*{830visibility:hidden831}832.search-focused .search,.search-focused .search-icon{833visibility:visible834}835.widget.Sharing .sharing-button{836display:none837}838.widget.Sharing .sharing-buttons li{839padding:0840}841.widget.Sharing .sharing-buttons li span{842display:none843}844.post-share-buttons{845position:relative846}847.sharing-open.touch-icon-button:active .touch-icon,.sharing-open.touch-icon-button:focus .touch-icon{848background-color:transparent849}850.share-buttons{851background-color:#ffffff;852border-radius:2px;853box-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);854color:#424242;855list-style:none;856margin:0;857padding:8px 0;858position:absolute;859top:-11px;860min-width:200px;861z-index:101862}863.share-buttons.hidden{864display:none865}866.sharing-button{867background:transparent;868border:0;869margin:0;870outline:none;871padding:0;872cursor:pointer873}874.share-buttons li{875margin:0;876height:48px877}878.share-buttons li:last-child{879margin-bottom:0880}881.share-buttons li .sharing-platform-button{882box-sizing:border-box;883cursor:pointer;884display:block;885height:100%;886margin-bottom:0;887padding:0 16px;888position:relative;889width:100%890}891.share-buttons li .sharing-platform-button:focus,.share-buttons li .sharing-platform-button:hover{892background-color:hsla(0,0%,50.2%,.1);893outline:none894}895.share-buttons li svg[class*=sharing-],.share-buttons li svg[class^=sharing-]{896position:absolute;897top:10px898}899.share-buttons li span.sharing-platform-button{900position:relative;901top:0902}903.share-buttons li .platform-sharing-text{904display:block;905font-size:16px;906line-height:48px;907white-space:nowrap;908margin-left:56px909}910.sidebar-container{911background-color:#ffffff;912max-width:284px;913overflow-y:auto;914-webkit-transition-property:-webkit-transform;915transition-property:-webkit-transform;916transition-property:transform;917transition-property:transform,-webkit-transform;918-webkit-transition-duration:.3s;919transition-duration:.3s;920-webkit-transition-timing-function:cubic-bezier(0,0,.2,1);921transition-timing-function:cubic-bezier(0,0,.2,1);922width:284px;923z-index:101;924-webkit-overflow-scrolling:touch925}926.sidebar-container .navigation{927line-height:0;928padding:16px929}930.sidebar-container .sidebar-back{931cursor:pointer932}933.sidebar-container .widget{934background:none;935margin:0 16px;936padding:16px 0937}938.sidebar-container .widget .title{939color:#424242;940margin:0941}942.sidebar-container .widget ul{943list-style:none;944margin:0;945padding:0946}947.sidebar-container .widget ul ul{948margin-left:1em949}950.sidebar-container .widget li{951font-size:16px;952line-height:normal953}954.sidebar-container .widget+.widget{955border-top:1px dashed #cccccc956}957.BlogArchive li{958margin:16px 0959}960.BlogArchive li:last-child{961margin-bottom:0962}963.Label li a{964display:inline-block965}966.BlogArchive .post-count,.Label .label-count{967float:right;968margin-left:.25em969}970.BlogArchive .post-count:before,.Label .label-count:before{971content:"("972}973.BlogArchive .post-count:after,.Label .label-count:after{974content:")"975}976.widget.Translate .skiptranslate>div{977display:block!important978}979.widget.Profile .profile-link{980display:-webkit-box;981display:flex982}983.widget.Profile .team-member .default-avatar-wrapper,.widget.Profile .team-member .profile-img{984-webkit-box-flex:0;985flex:0 0 auto;986margin-right:1em987}988.widget.Profile .individual .profile-link{989-webkit-box-orient:vertical;990-webkit-box-direction:normal;991flex-direction:column992}993.widget.Profile .team .profile-link .profile-name{994align-self:center;995display:block;996-webkit-box-flex:1;997flex:1 1 auto998}999.dim-overlay{1000background-color:rgba(0,0,0,.54);1001z-index:1001002}1003body.sidebar-visible{1004overflow-y:hidden1005}1006@media screen and (max-width:1439px){1007.sidebar-container{1008bottom:0;1009position:fixed;1010top:0;1011left:0;1012right:auto1013}1014.sidebar-container.sidebar-invisible{1015-webkit-transition-timing-function:cubic-bezier(.4,0,.6,1);1016transition-timing-function:cubic-bezier(.4,0,.6,1);1017-webkit-transform:translateX(-284px);1018transform:translateX(-284px)1019}1020}1021@media screen and (min-width:1440px){1022.sidebar-container{1023position:absolute;1024top:0;1025left:0;1026right:auto1027}1028.sidebar-container .navigation{1029display:none1030}1031}1032.dialog{1033box-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);1034background:#ffffff;1035box-sizing:border-box;1036color:#757575;1037padding:30px;1038position:fixed;1039text-align:center;1040width:calc(100% - 24px);1041z-index:1011042}1043.dialog input[type=email],.dialog input[type=text]{1044background-color:transparent;1045border:0;1046border-bottom:1px solid rgba(117,117,117,.12);1047color:#757575;1048display:block;1049font-family:Roboto, sans-serif;1050font-size:16px;1051line-height:24px;1052margin:auto;1053padding-bottom:7px;1054outline:none;1055text-align:center;1056width:100%1057}1058.dialog input[type=email]::-webkit-input-placeholder,.dialog input[type=text]::-webkit-input-placeholder{1059color:#7575751060}1061.dialog input[type=email]::-moz-placeholder,.dialog input[type=text]::-moz-placeholder{1062color:#7575751063}1064.dialog input[type=email]:-ms-input-placeholder,.dialog input[type=text]:-ms-input-placeholder{1065color:#7575751066}1067.dialog input[type=email]::-ms-input-placeholder,.dialog input[type=text]::-ms-input-placeholder{1068color:#7575751069}1070.dialog input[type=email]::placeholder,.dialog input[type=text]::placeholder{1071color:#7575751072}1073.dialog input[type=email]:focus,.dialog input[type=text]:focus{1074border-bottom:2px solid #2196f3;1075padding-bottom:6px1076}1077.dialog input.no-cursor{1078color:transparent;1079text-shadow:0 0 0 #7575751080}1081.dialog input.no-cursor:focus{1082outline:none1083}1084.dialog input[type=submit]{1085font-family:Roboto, sans-serif1086}1087.dialog .goog-buttonset-default{1088color:#2196f31089}1090.subscribe-popup{1091max-width:364px1092}1093.subscribe-popup h3{1094color:#424242;1095font-size:1.8em;1096margin-top:01097}1098.subscribe-popup .FollowByEmail h3{1099display:none1100}1101.subscribe-popup .FollowByEmail .follow-by-email-submit{1102color:#2196f3;1103display:inline-block;1104margin:24px auto 0;1105width:auto;1106white-space:normal1107}1108.subscribe-popup .FollowByEmail .follow-by-email-submit:disabled{1109cursor:default;1110opacity:.31111}1112@media (max-width:800px){1113.blog-name div.widget.Subscribe{1114margin-bottom:16px1115}1116body.item-view .blog-name div.widget.Subscribe{1117margin:8px auto 16px;1118width:100%1119}1120}1121.tabs{1122list-style:none1123}1124.tabs li,.tabs li a{1125display:inline-block1126}1127.tabs li a{1128cursor:pointer;1129font-weight:700;1130text-transform:uppercase;1131padding:12px 8px1132}1133.tabs .selected{1134border-bottom:4px solid #4242421135}1136.tabs .selected a{1137color:#4242421138}1139body#layout .bg-photo,body#layout .bg-photo-overlay{1140display:none1141}1142body#layout .page_body{1143padding:0;1144position:relative;1145top:01146}1147body#layout .page{1148display:inline-block;1149left:inherit;1150position:relative;1151vertical-align:top;1152width:540px1153}1154body#layout .centered{1155max-width:954px1156}1157body#layout .navigation{1158display:none1159}1160body#layout .sidebar-container{1161display:inline-block;1162width:40%1163}1164body#layout .hamburger-menu,body#layout .search{1165display:none1166}1167.centered-top-container .svg-icon-24,body.collapsed-header .centered-top-placeholder .svg-icon-24{1168fill:#4242421169}1170.sidebar-container .svg-icon-24{1171fill:#7070701172}1173.centered-bottom .svg-icon-24,body.collapsed-header .centered-top-container .svg-icon-24{1174fill:#7070701175}1176.centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{1177fill:#4242421178}1179body{1180background-color:#f4f4f4;1181color:#757575;1182font:15px Roboto, sans-serif;1183margin:0;1184min-height:100vh1185}1186img{1187max-width:100%1188}1189h3{1190color:#757575;1191font-size:16px1192}1193a{1194text-decoration:none;1195color:#2196f31196}1197a:visited{1198color:#2196f31199}1200a:hover{