MAIN P.codepen { min-height: 550px; position: relative; overflow: hidden; border-radius: 6px; margin: 0; }
MAIN P.codepen .loader-wrap { width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; cursor: pointer; }
MAIN P.codepen .loader-wrap > .bg { display: block; content: ''; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; background-image: url(../images/codepen-bg.png); background-repeat: no-repeat; background-size: cover; filter: blur(8px); -webkit-filter: blur(8px); opacity: 1; }
MAIN P.codepen:hover .loader-wrap > .bg { opacity: .95; }

MAIN P.codepen .loader-wrap > .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; align-items: center; }
MAIN P.codepen .loader-wrap > .content .icon { display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; background-color: #ffffff; border-radius: 50%; }
MAIN P.codepen .loader-wrap > .content .icon::before { display: block; content: '\f1cb'; color: #16181d; font-family: FontAwesome; font-size: 70px; margin: 0; }
MAIN P.codepen:hover .loader-wrap > .content .icon::before { content: '\f019'; }
MAIN P.codepen .loader-wrap > .content .text { color: #ffffff; margin-top: 10px; font-size: 14px; font-weight: 700; }
MAIN P.codepen .loader-wrap > .content .text::before { display: block; content: 'Загрузить CodePen'; }

@media only screen and (max-width: 730px) {
    MAIN P.codepen {
        width: 100vw;
        max-width: 100vw;
        border-radius: 0;
        margin-left: -20px;
        margin-right: -20px;
    }
}

.cp_embed_wrapper { background: #3d3d3e; }