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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
}
main {
    overflow: hidden;
    clear: both;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    background: #f1f5f8;
}
main::before, main::after {
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
}
main::after {
    clear: both;
}
main {
    zoom: 1;
}
header, footer {
    background: #979c9c;
    height: 80px;
    line-height: 80px;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}
header figure {
    width: 50px;
    height: 50px;
    margin-left: 40px;
    border-radius: 100%;
    overflow: hidden;
    background: #fff;
    vertical-align: middle;
    display: inline-block;
}
header nav {
    display: inline-block;
    margin-left: 60px;
}
header nav li {
    height: 20px;
    border-radius: 3px;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    margin-right: 20px;
}
header nav li:last-child {
    margin: 0;
}
footer {
    text-align: center;
}
footer span {
    height: 20px;
    border-radius: 3px;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 70px;
    margin-right: 20px;
}
footer span:last-child {
    margin: 0;
}
article {
    padding: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
@media screen and (min-width: 980px) {
    article {
    float: left;
    width: 100%;
    padding: 40px 340px 40px 40px;
}
}
article figure {
    height: 20px;
    border-radius: 3px;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 30%;
    height: 260px;
    overflow: hidden;
}
article figure:last-child {
    margin: 0;
}
article figure::before, article figure::after {
    content: "";
    display: block;
    width: 300px;
    height: 300px;
    background: rgba(0, 0, 0, 0.05);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    border-radius: 4px;
}
article figure::before {
    top: 80%;
    left: -30%}
article figure::after {
    top: 60%;
    left: 20%}
article div {
    width: 70%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
article p {
    height: 20px;
    border-radius: 3px;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    display: block;
    margin-bottom: 40px;
}
article p:last-child {
    margin: 0;
}
article p, article figure {
    background: #e7edf2;
}
article section {
    margin-bottom: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
article section::before, article section::after {
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
}
article section::after {
    clear: both;
}
article section {
    zoom: 1;
}
article section:last-child {
    margin-bottom: 0;
}
article section:nth-child(odd) figure, article section:nth-child(odd) div {
    float: left;
}
article section:nth-child(odd) div {
    padding-left: 40px;
}
article section:nth-child(even) figure, article section:nth-child(even) div {
    float: right;
}
article section:nth-child(even) div {
    padding-right: 40px;
}
aside {
    background: #27282a;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
@media screen and (min-width: 980px) {
    aside {
    width: 300px;
    margin-left: -300px;
    float: left;
}
}
aside div, aside ul {
    padding: 40px;
}
aside div {
    background: #95ad5a;
    text-align: center;
}
aside div:nth-of-type(2) {
    background: #c15134;
}
aside div:nth-of-type(2) li {
    background: #d36245;
}
aside div:nth-of-type(3) {
    background: #f2e6cd;
}
aside div:nth-of-type(3) li {
    background: #ded3bc;
}
aside div h3 {
    height: 20px;
    border-radius: 3px;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    display: block;
    height: 30px;
    margin-bottom: 40px;
}
aside div h3:last-child {
    margin: 0;
}
aside div ul {
    padding: 0;
}
aside div li {
    display: block;
    background: #819947;
    margin-left: auto !important;
    margin-right: auto !important;
}
aside li {
    height: 20px;
    border-radius: 3px;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    background: #495055;
    display: block;
    margin-bottom: 40px;
}
aside li:last-child {
    margin: 0;
}
aside li:nth-child(1) {
    width: 65%}
aside li:nth-child(2) {
    width: 78%}
aside li:nth-child(3) {
    width: 33%}
aside li:nth-child(4) {
    width: 55%}
aside li:nth-child(5) {
    width: 62%}
.demo_3 article {
    padding: 0;
}
.demo_3 article:nth-child(1) {
    background: #c15134;
}
.demo_3 article:nth-child(1) figure, .demo_3 article:nth-child(1) p {
    background: #d36245;
}
.demo_3 article:nth-child(2) {
    background: #f2e6cd;
}
.demo_3 article:nth-child(2) figure, .demo_3 article:nth-child(2) p {
    background: #ded3bc;
}
.demo_3 article:nth-child(3) {
    background: #93a748;
}
.demo_3 article:nth-child(3) figure, .demo_3 article:nth-child(3) p {
    background: #84983a;
}
.demo_3 article:nth-child(4) {
    background: #979c9c;
}
.demo_3 article:nth-child(4) figure, .demo_3 article:nth-child(4) p {
    background: #a4a9a9;
}
.demo_3 article:nth-child(odd) figure, .demo_3 article:nth-child(odd) div {
    float: left;
}
.demo_3 article:nth-child(odd) div {
    padding-left: 40px;
}
.demo_3 article:nth-child(even) figure, .demo_3 article:nth-child(even) div {
    float: right;
}
.demo_3 article:nth-child(even) div {
    padding-right: 40px;
}
.demo_3 section {
    max-width: 1000px;
    padding: 20px;
    min-height: 100vh;
    margin: 0 auto;
}
@media screen and (min-width: 640px) {
    .demo_3 section {
    padding: 40px;
}
}
@media screen and (min-width: 1024px) {
    .demo_3 section {
    padding: 60px;
}
}
@media screen and (max-width: 640px) {
    .demo_3 section figure {
    width: 45%}
.demo_3 section div {
    width: 55%}
}