.js .loading::before,
.js .loading::after{content: '';position: fixed;z-index: 1000;}
.loading::before{top: 0;left: 0;width: 100%;height: 100%;background: #2c2d31;}
.loading::after{top: 50%;left: 50%;width: 40px;height: 40px;margin: -20px 0 0 -20px;border: 8px solid #383a41;border-bottom-color: #565963;border-radius: 50%;animation: animLoader 0.8s linear infinite forwards;}
@keyframes animLoader{to{transform: rotate(360deg);}}
a{text-decoration: none;color: #f2f2f2;outline: none;}
a:hover,
a:focus{color: #e6629a;}
.hidden{position: absolute;overflow: hidden;width: 0;height: 0;pointer-events: none;}
.mainmain{display: flex;flex-wrap: wrap; width:1200px; margin:auto}
/* Icons*/.icon{display: block;width: 1.5em;height: 1.5em;margin: 0 auto;fill: currentColor;}
.content--side{position: relative;z-index: 100;width: 15vw;min-width: 130px;max-height: 100vh;padding: 0 1em;order: 2;}
.content--center{flex: 1;max-width: calc(100vw);order: 3;}
.content--right{order: 4;}
.content--related{display: flex;flex-wrap: wrap;justify-content: center;width: 100%;padding: 8em 1em 3em;text-align: center;order: 5;}
.media-related{width: 100%;}
.media-item{padding: 1em;}
.media-item__img{max-width: 100%;opacity: 0.7;transition: opacity 0.3s;}
.media-item:hover .media-item__img,
.media-item:focus .media-item__img{opacity: 1;}
.media-item__title{font-size: 1em;max-width: 220px;padding: 0.5em;margin: 0 auto;}
/* Header*/
.codrops-header{position: relative;z-index: 100;display: flex;align-items: center;width: 100%;padding: 3em 1em 4em;order: 1;}
.codrops-header__title{font-size: 1em;font-weight: normal;flex: 1;margin: 0 7em 0 0;text-align: center;text-transform: lowercase;}
.codrops-header__title::before,
.codrops-header__title::after{font-size: 22px;font-weight: bold;display: inline-block;padding: 0 0.25em;color: #42454c;}
.codrops-header__title::after{content: '\2309';vertical-align: sub;}
.codrops-header__title::before{content: '\230A';}
/* GitHub corner*/
.github-corner{position: absolute;top: 0;right: 0;}
.github-corner__svg{fill: #82888a;color: #2c2d31;position: absolute;top: 0;border: 0;right: 0;}
.github-corner:hover .octo-arm{animation: octocat-wave 560ms ease-in-out;}
@keyframes octocat-wave{0%,100%{transform: rotate(0);}
20%,60%{transform: rotate(-25deg);}
40%,80%{transform: rotate(10deg);}}
@media (max-width:500px){.github-corner:hover .octo-arm{animation: none;}
.github-corner .octo-arm{animation: octocat-wave 560ms ease-in-out;}}
/* Top Navigation Style*/
.codrops-links{position: relative;display: flex;justify-content: space-between;align-items: center;height: 2.75em;margin: 0 0 0 2.25em;text-align: center;white-space: nowrap;background: #1f2125;}
.codrops-links::after{content: '';position: absolute;top: -10%;left: calc(50% - 1px);width: 2px;height: 120%;background: #2c2d31;transform: rotate3d(0,0,1,22.5deg);}
.codrops-icon{display: inline-block;padding: 0 0.65em;}
/* Controls*/.control--grids{margin: 0 0 2.5em;text-align: right;}
.control__title{font-size: 0.85em;display: block;width: 100%;margin: 0 0 1em;color: #e6629a;}
.control__item{position: relative;display: block;margin: 0 0 0.5em;}
.control__radio{position: absolute;z-index: 10;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;opacity: 0;}
.control__label{white-space: nowrap;}
.control__radio:checked + .control__label{color: #fff;background: #673ab7;}
.control__radio:not(:checked):hover + .control__label,
.control__btn:hover{color: white;}
.control__btn{display: block;width: 100%;margin: 0 0 0.5em;padding: 0;text-align: left;color: inherit;border: none;background: none;}
.control__btn:focus{outline: none;}
/* Grid*/.grid{position: relative;z-index: 2;display: block;margin: 0 auto;}
.grid--hidden{position: fixed !important;z-index: 1;top: 0;left: 0;width: 100%;pointer-events: none;opacity: 0;}
.js .grid--loading::before,
.js .grid--loading::after{content: '';z-index: 1000;}
.js .grid--loading::before{position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: #2c2d31;}
.js .grid--loading::after{position: absolute;top: calc(25vh - 20px);left: 50%;width: 40px;height: 40px;margin: 0 0 0 -20px;border: 8px solid #383a41;border-bottom-color: #565963;border-radius: 50%;animation: animLoader 0.8s linear forwards infinite;}
.grid__sizer{margin-bottom: 0 !important;}
.grid__link,.grid__img{display: block;background-color: #fff; }
.grid__link h2{font-size:16px; color:#333; padding:5px 10px; line-height:30px; margin-top: 10px;}
.grid__link p{font-size:14px; color:#999; padding:0px 10px; line-height:22px; padding-bottom:20px;}
.grid__img{width: 100%; }
.grid__deco{position: absolute;top: 0;left: 0;pointer-events: none;}
.grid__deco path{fill: none;stroke: #fff;stroke-width: 2px;}
.grid__reveal{position: absolute;z-index: 50;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;opacity: 0;background-color: #2c2d31;}
.grid .grid__item,
.grid .grid__sizer{width: calc(50% - 20px);margin: 0 10px 20px;}
@media screen and (min-width: 60em){.grid .grid__item,.grid .grid__sizer{width: calc((100% / 3) - 20px);margin: 0 10px 20px;}}
/*@media screen and (min-width: 70em){.grid .grid__item,.grid .grid__sizer{width: calc(25% - 30px);margin: 0 15px 30px;}*/
@media screen and (min-width: 70em){.grid .grid__item,.grid .grid__sizer{width: calc((100% / 3) - 20px);margin: 0 10px 20px;}
/* Grid types*/.grid--type-b .grid__item,.grid--type-b .grid__sizer{width: calc(20% - 20px);margin: 0 10px 20px;}
.grid--type-c .grid__item,.grid--type-c .grid__sizer{width: calc(25% - 16px);margin: 0 8px 16px;}}
@media screen and (max-width: 50em){
 .mainmain{display: block;}
.codrops-header{padding: 1em;flex-wrap: wrap;}
.codrops-links{margin: 0;}
.codrops-header__title{width: 100%;text-align: left;flex: none;margin: 1em 0;}
.content--side{width: 100%;}
.content--right{order: 3;}
.content--center{max-width: 100vw;}
.control{margin: 0 0 1em;text-align: left;}
.control__item,.control__btn{display: inline-block;}
.control__btn{width: auto;}}