body{background-color:#004e66;padding-right:.5em;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX/mQC5YThkAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=="),url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQI12NgYGAUAgAAGQAUc/3B9gAAAABJRU5ErkJggg=="),url("/img/posts/responsive-design/background.jpg");background-position:top right,top left,0% 0%;background-repeat:repeat-y,repeat-y,repeat;-webkit-background-size:.5em,0,auto;-moz-background-size:.5em,0,auto;background-size:.5em,0,auto;}body header{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQI12NgYGAUAgAAGQAUc/3B9gAAAABJRU5ErkJggg==") repeat}@media (min-width:37em){body{padding-right:1em;-webkit-background-size:1em,0,auto;-moz-background-size:1em,0,auto;background-size:1em,0,auto}}@media (min-width:41em){body{padding-right:1.5em;-webkit-background-size:1.5em,0,auto;-moz-background-size:1.5em,0,auto;background-size:1.5em,0,auto}}@media (min-width:60em){body{-webkit-background-size:1.5em,14em,auto;-moz-background-size:1.5em,14em,auto;background-size:1.5em,14em,auto;padding-left:14em}body header{background:none}}h1{color:#fff;color:rgba(255,255,255,0.9);font-family:'Della Respira',serif;font-size:3.4em;font-weight:400;line-height:1.4;text-align:right;margin:.75em 0 1em;max-width:10.3em;text-shadow:-1px -1px 2px rgba(30,30,50,0.6);}h1 .dr{display:block;margin-right:1em}h1 .pu{font-size:.6em;font-style:italic;line-height:1.5em;vertical-align:top}section{clear:both;margin-bottom:5em;position:relative}article p,article li,blockquote{color:#fff;color:rgba(255,255,255,0.95)}section em{color:#fff0a5;font-style:normal}section strong{color:#edc951;font-weight:normal}section p code,section li code{color:#ffa}section h2{margin:1em 0}article a{color:#edaa51;}article a:hover{text-decoration:none}.intro{font-size:1.125em;font-weight:normal;line-height:1.6em;margin-left:7%;}.intro p{max-width:30em;width:90%}.comeco{padding-left:210px;}.comeco .destaque{color:#ffb03b;font-family:'Della Respira',serif;font-size:1.5em;padding:.5em 0;text-shadow:-1px -1px 2px rgba(0,0,0,0.4)}h2.sub{color:#ffb03b;font-family:'Della Respira',serif;font-size:5em;float:none;margin:0;padding:0;line-height:.8em;text-align:right;text-transform:lowercase;text-shadow:-1px -1px 2px rgba(30,30,50,0.6);}h2.sub span{display:block}.rwd .sub{width:4.8em}.rwd div.txt{float:right;padding-left:1em;max-width:32em;margin-top:1em}.rwd:after{content:' ';display:block;clear:both}.no-js .demo,.no-js .rwd button,.no-responsive-play .rwd button{display:none}.demo{background:url("/img/posts/responsive-design/regua.png") no-repeat 7px 0;padding-top:2.4em;margin-bottom:2em;}.demo.video{background:none;padding-top:0}.demo .wrapper{background:url("/img/posts/responsive-design/demobg.png");border-radius:8px;-webkit-box-shadow:inset 1px 1px 12px rgba(0,0,0,0.35);box-shadow:inset 1px 1px 12px rgba(0,0,0,0.35);padding:10px;position:relative;overflow:hidden;height:340px;width:100%;}.demo .wrapper:before{content:url("/img/posts/responsive-design/seta.png");height:117px;width:300px;position:absolute;left:300px;top:100px;}.demo .wrapper iframe{border:0;position:relative;width:240px;z-index:2;-webkit-overflow-scrolling:touch;}.demo .protector{content:' ';display:block;position:absolute;top:0;left:0;bottom:0;right:0;z-index:3;}.demo .protector:after{content:url("/img/posts/responsive-design/ativar.png");position:absolute;bottom:-70px;left:5px;}.demo.up .wrapper{-webkit-transition:height 3s linear;-moz-transition:height 3s linear;-o-transition:height 3s linear;-ms-transition:height 3s linear;transition:height 3s linear;height:470px;}.demo.up .wrapper iframe{-webkit-transition:width 5s linear;-moz-transition:width 5s linear;-o-transition:width 5s linear;-ms-transition:width 5s linear;transition:width 5s linear;height:100%}.rwd button{background:#ffb03b;border:0;color:#222;font-size:1.5em;padding:.2em .7em .3em .7em;text-align:center;display:block;margin:1em auto;max-width:300px;width:96%;border-radius:.3em;-webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.35);box-shadow:1px 1px 5px rgba(0,0,0,0.35);text-shadow:0 -1px 2px rgba(255,255,255,0.6);}.rwd button:active{position:relative;top:1px;text-shadow:none;-webkit-box-shadow:none;box-shadow:none}.oque ul{font-size:1.125em;padding-left:14em;width:100%;float:right;list-style-type:none}.oque .oque li{color:#efe0e0;font-style:italic;font-size:.833em;padding-bottom:1.8em;}.oque .oque li span{color:#fff0a5;display:block;font-size:1.2em;font-style:normal}.como h2,.mas h2,.fim h2{color:#123745;font-family:'Della Respira',serif;font-size:5em;text-shadow:-1px -1px 2px rgba(0,0,0,0.65);font-weight:normal;text-transform:lowercase}.como hgroup{margin-bottom:3.5em}.como h2{display:inline-block;margin:0;line-height:.7;vertical-align:baseline;}.como h2 span{display:none}.como .destaque{color:#153f4f;display:inline-block;font-size:1.8em;margin:0;padding-left:1em;text-shadow:-1px -1px 1px rgba(0,0,0,0.6)}.como ol{margin-top:2em;list-style-type:none;padding:0}.como li{position:relative;}.como li:first-child h3:before{background-position:0 0}.como li:last-child h3:before{background-position:100% 0}.como h3{color:#123745;font-family:'Della Respira',serif;font-size:3em;font-weight:normal;line-height:128px;height:128px;text-shadow:-1px -1px 1px rgba(0,0,0,0.6);}.como h3:before{background:url("/img/posts/responsive-design/numeros.png") no-repeat;background-position:50% 0;content:' ';display:inline-block;margin-right:.25em;height:128px;vertical-align:middle;width:129px}.como .txt{position:relative;}.como .txt p{padding-right:350px}.como .mq{position:absolute;top:0;right:0;}.como small{display:block;max-width:240px;margin:0 auto;font-style:italic}.como .highlighted{margin-top:0;font-size:.85em}.como .fluido .txt p{padding-right:0;margin-left:auto;margin-right:auto;max-width:600px;width:95%}.como .imagens .txt p{padding-right:0;padding-left:290px}.mas h2{margin-bottom:0}.mas p{margin-left:auto;max-width:680px;padding-right:8%;width:94%}.mas h3{color:#ffb03b;font-family:'Della Respira',serif;font-size:1.8em;font-weight:normal;padding-left:6em;padding-top:1.5em;text-shadow:-1px -1px 1px rgba(0,0,0,0.6)}.mb h2{line-height:.9em;width:3.5em}.fim h2{margin-bottom:0}.mb p,.fim p{margin-left:auto;margin-right:auto;max-width:680px;width:96%}.fim .ultimo{font-size:1.125em;line-height:1.5;max-width:780px;padding-top:1.2em}@media (min-width:700px){h1{background:url("/img/posts/responsive-design/h1.png") no-repeat center center}.comeco{background:url("/img/posts/responsive-design/iphone-sketch.png") no-repeat left top}.como .imagens{background:url("/img/posts/responsive-design/pagedesign.png") no-repeat 0 center}}@media (max-width:1088px){.como .txt p{padding-right:290px}}@media (max-width:880px){.mas h3{padding-left:3em}}@media (max-width:760px){.como h2,.mas h2,.fim h2{font-size:5em}.como .destaque{font-size:1.5em}.como .txt p{padding-right:0}.como .mq{padding-right:45%;position:relative;top:auto;right:auto}.como small{max-width:43%;position:absolute;top:3em;right:0}.como .imagens{background-position:0 center;}.como .imagens .txt p{padding-left:265px}.mas h3{padding-left:0}}@media (max-width:720px){.como h3{padding-left:0}}@media (max-width:699px){h1.title{font-size:3em}.intro p{margin-left:auto;margin-right:auto;width:80%}.comeco{padding-left:0;margin-left:auto;width:auto}.como .destaque{font-size:1.4em;padding-left:0;display:block;margin-top:0}.como .imagens .txt p{margin-left:auto;margin-right:auto;padding-left:0;width:95%}}@media (max-width:650px){.como h3{font-size:2.5em}}@media (max-width:600px){.rwd .txt:last-child{margin-top:0}.demo .wrapper:before,.demo .protector:after{display:none}.como h3{line-height:64px;height:64px;vertical-align:bottom}.como h3:before{-webkit-background-size:auto 64px;-moz-background-size:auto 64px;background-size:auto 64px;height:64px;width:64px}}@media (max-width:540px){body:before{height:106px}section{margin-bottom:3em}.intro p{width:92%}.como h2,.mas h2,.fim h2{font-size:4em}}@media (max-width:520px){h1{font-size:2.8em}.intro{margin:0;font-size:inherit;}.intro p{width:auto}.rwd{margin-bottom:2em;}.rwd div.txt{padding-left:0}.como h3{padding-bottom:2.7em;line-height:1}.como h3:before{display:block}.mas p,.mb p,.fim p{padding-right:0;width:auto}}@media (max-width:479px){h1.title{font-size:2.5em}.como .mq{padding-right:0;margin-bottom:0}.como small{max-width:80%;position:relative;top:auto}}@media (max-width:460px){body:before{height:73px}h1.title{font-size:2.3em}}@media (max-width:400px){h2.sub{font-size:3.5em}h1.title{font-size:2em}}