demo.css

html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,a,p,blockquote,em,img,strong,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,article,aside,figure,footer,header,hgroup,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}ul{list-style:none}article,aside,figure,footer,header,nav,section,div{display:block;position:relative}body.home{background:#f1f5f8;color:#2E3444;text-align:center;font-family:'Lato', sans-serif;margin:0;padding:0}body.home a{background:#ff6873;color:#fff;text-decoration:none;border-radius:2px;padding:0 10px;font-size:13px;text-transform:uppercase;display:inline-block;margin-bottom:5px;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:opacity .15s ease}body.home a:hover{opacity:.8}body.home h1{margin:50px 0 0;font-size:2.5em;font-weight:900}body.home h2{font-size:26px;line-height:34px;font-weight:300;letter-spacing:1px;display:block;margin:0;cursor:pointer;color:#ff6873;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body.home h3{padding:0;font-weight:400}body.home p{font-size:17px;line-height:26px;position:relative;overflow:hidden;max-height:1000em;margin:10px 0 14px;z-index:2;font-weight:300}body.home p:last-child{margin-bottom:0}body.home p code{background:#f5f5f5;border-radius:3px;padding:2px 5px;font-size:15px;display:inline-block;line-height:1}body.home ul{list-style:none;padding:50px 30px;margin:0 auto;max-width:720px}body.home ul li{position:relative;padding:0;margin:0;padding:18px 25px;border-top:1px dotted #dce7eb;text-align:left;background:#fff}body.home ul li:first-of-type{border-top:none}body.home ul li i{position:absolute;margin-top:14px;right:30px}body.home ul li i::before,body.home ul li i::after{content:"";position:absolute;width:3px;height:9px;background:#ff6873}body.home ul li i::before{transform:translate(-2px, 0) rotate(45deg)}body.home ul li i::after{transform:translate(2px, 0) rotate(-45deg)}body.home ul li input[type="checkbox"]{position:absolute;cursor:pointer;left:0;top:0;width:100%;height:100%;z-index:1;opacity:0;padding:0;margin:0}body.home ul li input[type="checkbox"]:checked ~ p{margin:0;max-height:0;opacity:0}body.home ul li input[type="checkbox"]:checked ~ i::before{transform:translate(2px, 0) rotate(45deg)}body.home ul li input[type="checkbox"]:checked ~ i::after{transform:translate(-2px, 0) rotate(-45deg)}body.home #swm{background:#2E3444;margin-bottom:20px;font-weight:300}body.demo{display:flex;flex-direction:column;height:100%;min-height:100vh}body.demo main{overflow:hidden;clear:both;flex:1 0 auto;background:#f1f5f8}body.demo main::before,body.demo main::after{content:"";display:block;height:0;overflow:hidden}body.demo main::after{clear:both}body.demo main{zoom:1}body.demo header,body.demo footer{background:#979c9c;height:80px;line-height:80px;flex:none}body.demo header figure{width:50px;height:50px;margin-left:40px;border-radius:100%;overflow:hidden;background:#fff;vertical-align:middle;display:inline-block}body.demo header nav{display:inline-block;margin-left:60px}body.demo header nav li{height:20px;border-radius:3px;background:#fff;display:inline-block;vertical-align:middle;width:80px;margin-right:20px}body.demo header nav li:last-child{margin:0}body.demo footer{text-align:center}body.demo footer span{height:20px;border-radius:3px;background:#fff;display:inline-block;vertical-align:middle;width:70px;margin-right:20px}body.demo footer span:last-child{margin:0}body.demo article{padding:40px;box-sizing:border-box}@media screen and (min-width: 980px){body.demo article{float:left;width:100%;padding:40px 340px 40px 40px}}body.demo article figure{height:20px;border-radius:3px;background:#fff;display:inline-block;vertical-align:middle;width:30%;height:260px;overflow:hidden}body.demo article figure:last-child{margin:0}body.demo article figure::before,body.demo article figure::after{content:"";display:block;width:300px;height:300px;background:rgba(0,0,0,0.05);transform:rotate(45deg);position:absolute;border-radius:4px}body.demo article figure::before{top:80%;left:-30%}body.demo article figure::after{top:60%;left:20%}body.demo article div{width:70%;box-sizing:border-box}body.demo article p{height:20px;border-radius:3px;background:#fff;display:inline-block;vertical-align:middle;display:block;margin-bottom:40px}body.demo article p:last-child{margin:0}body.demo article p,body.demo article figure{background:#e7edf2}body.demo article section{margin-bottom:40px;box-sizing:border-box}body.demo article section::before,body.demo article section::after{content:"";display:block;height:0;overflow:hidden}body.demo article section::after{clear:both}body.demo article section{zoom:1}body.demo article section:last-child{margin-bottom:0}body.demo article section:nth-child(odd) figure,body.demo article section:nth-child(odd) div{float:left}body.demo article section:nth-child(odd) div{padding-left:40px}body.demo article section:nth-child(even) figure,body.demo article section:nth-child(even) div{float:right}body.demo article section:nth-child(even) div{padding-right:40px}body.demo aside{background:#27282a;box-sizing:border-box}@media screen and (min-width: 980px){body.demo aside{width:300px;margin-left:-300px;float:left}}body.demo aside div,body.demo aside ul{padding:40px}body.demo aside div{background:#95ad5a;text-align:center}body.demo aside div:nth-of-type(2){background:#c15134}body.demo aside div:nth-of-type(2) li{background:#d36245}body.demo aside div:nth-of-type(3){background:#f2e6cd}body.demo aside div:nth-of-type(3) li{background:#ded3bc}body.demo aside div h3{height:20px;border-radius:3px;background:#fff;display:inline-block;vertical-align:middle;display:block;height:30px;margin-bottom:40px}body.demo aside div h3:last-child{margin:0}body.demo aside div ul{padding:0}body.demo aside div li{display:block;background:#819947;margin-left:auto !important;margin-right:auto !important}body.demo aside li{height:20px;border-radius:3px;background:#fff;display:inline-block;vertical-align:middle;background:#495055;display:block;margin-bottom:40px}body.demo aside li:last-child{margin:0}body.demo aside li:nth-child(1){width:65%}body.demo aside li:nth-child(2){width:78%}body.demo aside li:nth-child(3){width:33%}body.demo aside li:nth-child(4){width:55%}body.demo aside li:nth-child(5){width:62%}body.demo_3 article{padding:0}@media screen and (min-width: 980px){body.demo_3 article{padding-right:40px}}body.demo_3 article:nth-child(1){background:#c15134}body.demo_3 article:nth-child(1) figure,body.demo_3 article:nth-child(1) p{background:#d36245}body.demo_3 article:nth-child(2){background:#f2e6cd}body.demo_3 article:nth-child(2) figure,body.demo_3 article:nth-child(2) p{background:#ded3bc}body.demo_3 article:nth-child(3){background:#93a748}body.demo_3 article:nth-child(3) figure,body.demo_3 article:nth-child(3) p{background:#84983a}body.demo_3 article:nth-child(4){background:#979c9c}body.demo_3 article:nth-child(4) figure,body.demo_3 article:nth-child(4) p{background:#a4a9a9}body.demo_3 article:nth-child(odd) figure,body.demo_3 article:nth-child(odd) div{float:left}body.demo_3 article:nth-child(odd) div{padding-left:40px}body.demo_3 article:nth-child(even) figure,body.demo_3 article:nth-child(even) div{float:right}body.demo_3 article:nth-child(even) div{padding-right:40px}body.demo_3 section{max-width:1000px;padding:20px;min-height:100vh;margin:0 auto}@media screen and (min-width: 640px){body.demo_3 section{padding:40px}}@media screen and (min-width: 1024px){body.demo_3 section{padding:60px}}@media screen and (max-width: 640px){body.demo_3 section figure{width:45%}body.demo_3 section div{width:55%}}