.spark-wrap{margin:0 auto 1rem;padding:0 4rem 3rem}@media (max-width: 830px){.spark-wrap{margin:5px auto;padding:1rem}}.spark-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:url(https://cpwebassets.codepen.io/assets/spark/spark-cf76865da12073994b410bb2541fce5153a78d818a7a84c5b9c5d1f93ec41158.svg);background-repeat:no-repeat;background-size:contain;background-position:300px 0;padding:3rem 0 1rem;margin:1rem 0 4rem 0}.spark-header .the{text-transform:uppercase;font-weight:bold;font-size:20px;letter-spacing:1px;margin-right:10px;position:relative;top:-0.9rem}@media (max-width: 550px){.spark-header .the{font-size:12px;top:-0.5rem}}.spark-header .header-line-two{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Telefon Black", Sans-Serif;text-transform:uppercase;font-size:130px;text-indent:-8px}.spark-header .header-line-two a{color:#ffdd40}@media (max-width: 550px){.spark-header .header-line-two{font-size:60px}}.spark-header .header-line-three{color:rgba(255,221,64,0.85);font-size:26px;letter-spacing:0.2px}@media (max-width: 550px){.spark-header .header-line-three{font-size:20px;margin-top:-0.5rem}}.spark-header .promo-item{background:#393c49;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;max-width:275px;padding:20px;margin-left:10px;position:relative;font-size:14px;vertical-align:text-bottom;border-radius:3px}.spark-header .promo-item svg{position:relative;width:80px;height:80px;display:block;margin:0 auto 15px}.spark-header .promo-item .icon-rss{fill:#47cf73}.spark-header .promo-item .icon-star{fill:#ffdd40}.spark-header .promo-item .icon-share{fill:#ae63e4}.spark-header .promo-item p{margin:0}@media (max-width: 1010px){.spark-header{display:block}.spark-header .spark-header-left{margin:0}.spark-header .spark-header-right{width:100%;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin:1rem 0}.spark-header .promo-item{-webkit-box-flex:0;-webkit-flex:0 0 32%;-ms-flex:0 0 32%;flex:0 0 32%;margin:0 0 10px 0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:10px;font-size:11px}.spark-header .promo-item svg{-webkit-box-flex:0;-webkit-flex:0 0 30px;-ms-flex:0 0 30px;flex:0 0 30px;height:30px;margin:0 10px 0 0}.spark-header .promo-item p{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}}@media (max-width: 550px){.spark-header .spark-header-right{display:block}.spark-header .promo-item{max-width:none}}.spark-header-left{padding-right:100px;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;line-height:1}.spark-header-right{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.spark-grid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.spark-grid .spark-sidebar{width:25%;padding-right:20px}.spark-grid .spark-items{width:75%}@media (max-width: 550px){.spark-grid{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.spark-grid .spark-sidebar,.spark-grid .spark-items{width:100%}.spark-grid .spark-sidebar{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2;padding-right:0}}.spark-items{background:#2c303a;border-radius:3px;padding:30px;position:relative}.spark-items::before{z-index:-1;position:absolute;content:'';width:100px;right:100%;top:5px;height:75%;max-height:520px;margin-right:-100px;background:#868ca0;-webkit-transform:rotate(-3deg);transform:rotate(-3deg);border-radius:3px}.spark-items::after{z-index:-2;position:absolute;content:'';width:100px;right:100%;top:5px;max-height:520px;height:75%;margin-right:-100px;background:#5a5f73;-webkit-transform:rotate(-6deg);transform:rotate(-6deg);border-radius:3px}.spark-items h1 span{font-family:"Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;color:#47cf73;font-size:18px;letter-spacing:0.5px;display:block;text-transform:uppercase}@media (max-width: 550px){.spark-items{padding:0;background:none;border-radius:0}.spark-items::before{display:none}}.spark-items-wrap{margin-top:20px;-webkit-columns:300px auto;-moz-columns:300px auto;columns:300px auto}.spark-item-tile{display:inline-block;margin-bottom:30px;background:#373c49;padding:20px}.spark-item-tile .spark-item-title{font-family:"Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;color:white;font-size:20px;margin-top:5px;display:block;margin-bottom:5px}.spark-item-tile .spark-item-description{color:rgba(255,255,255,0.8);letter-spacing:0.2px;font-size:14px;margin-bottom:0}.spark-item-tile:hover{background:#444857}.spark-pagination{display:block;text-align:center}.spark-pagination .button{margin-left:5px;margin-right:5px}.spark-pagination .next:only-child{margin-left:100px}.spark-pagination .previous:only-child{margin-left:-100px}.codepen-logo{display:inline-block;background-image:url(https://cpwebassets.codepen.io/assets/logos/codepen-logo-eccd67a3067908687f74b7725787a321b0a13ce18601ba839aaab2bd8df9d772.svg);background-size:contain;background-repeat:no-repeat;width:260px;height:45px}@media (max-width: 550px){.codepen-logo{width:130px;height:22px}}.spark-item-type-pen{border-bottom:5px solid #76daff}.spark-item-type-post{border-bottom:5px solid #47cf73}.spark-item-type-sponsor{border-bottom:5px solid #ffdd40}.spark-item-type-collection{border-bottom:5px solid #ae63e4}.sponsored-tag{color:#ffdd40;font-size:12px;letter-spacing:1px;text-transform:uppercase;display:block;margin-top:6px}.spark-sidebar-header{font-family:"Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;color:rgba(255,255,255,0.7);text-transform:uppercase;font-size:18px;margin-top:25px;letter-spacing:0.5px;margin-bottom:20px}.spark-sidebar ul{list-style:none;margin-left:0}.spark-sidebar li{margin:0 0 1.5rem 0}.spark-sidebar li.active a{border-bottom:2px solid #ffdd40}.spark-sidebar a{color:#fff;margin-bottom:8px;display:block}.spark-sidebar a time{display:block}.spark-header-centered{display:block;margin:auto;text-align:center}.spark-admin{background:-webkit-gradient(linear, left bottom, left top, from(#950000), to(#1e1f26));background:linear-gradient(to top, #950000, #1e1f26);padding:20px;text-align:center;margin:0 30px 30px}.spark-admin>span{color:white;margin-right:10px}.spark-admin form{display:inline-block}