a:active, a:hover { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
mark { background: #ff0; color: #000; }
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space: pre-wrap; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
button, input { line-height: normal; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none;
}
button::-moz-focus-inner, input::-moz-focus-inner {
border:0;
padding:0;
}
textarea { overflow: auto; vertical-align: top; }
table { border-collapse: collapse; border-spacing: 0; }
*, *::after, *::before {box-sizing:border-box;}
/* Page Loader */
.js .loading::before { content: ''; position: fixed; z-index: 100000; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); }
.js .loading::after { content: ''; position: fixed; z-index: 100000; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; pointer-events: none; border-radius: 50%; opacity: 0.4; background: var(--color-link); animation: loaderAnim 0.7s linear infinite alternate forwards; }
 @keyframes loaderAnim {  to {
 opacity: 1;
 transform: scale3d(0.5, 0.5, 1);
}
}
a { text-decoration: none; color: var(--color-link); outline: none; }
a:hover, a:focus { color: var(--color-link-hover); outline: none; }
.hidden { position: absolute; overflow: hidden; width: 0; height: 0; pointer-events: none; }
.message { position: relative; z-index: 100; display: none; padding: 1em; text-align: center; color: var(--color-bg); background: var(--color-text); }
/* Icons */
.icon { display: block; width: 1.5em; height: 1.5em; margin: 0 auto; fill: currentColor; }
.content { position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto; min-height: 100vh; }
/* Header */
.codrops-header { position: relative; z-index: 100; display: flex; flex-direction: row; align-items: flex-start; align-items: center; width: 100%; padding: 0 0 2rem 0; }
.codrops-header__title { font-size: 1em; font-weight: bold; margin: 0; padding: 0; }
.info { margin: 0 0 0 1.25em; color: var(--color-info); }
.github { display: block; margin: 0 0 0 auto; }
/* Top Navigation Style */
.codrops-links { position: relative; display: flex; justify-content: center; margin: 0 1em 0 0; text-align: center; white-space: nowrap; }
.codrops-icon { display: inline-block; margin: 0.15em; padding: 0.25em; }
.grid__item { position: relative; display: flex; align-items: stretch; width: 100vw;}
.grid__item--bg { background-color: var(--item-bg); height: 100vw; }
.grid__item-content { width: 100%; padding: 8vw; display: flex; flex-direction: column; overflow: hidden; pointer-events: none; background: var(--item-bg); }
.grid__item--bg .grid__item-content { position: absolute; height: 100%; width: 100%; top: 0; left: 0; }
.grid__item-img { display: block;width:550px;height:450px;float:left;}
.grid__item-img canvas {width:550px;height:450px;float:left;}
.grid__item-img img {width:550px;height:450px;display:block;}
.grid__item-img img:nth-child(2) { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.3s; }
.grid__item:hover .grid__item-img img:nth-child(2) { opacity: 1; }
.js .grid__item-img img { display: none; }
.grid__item-title { font-weight:600;line-height:1;margin:2rem 0 0 0;}
.grid__item-title--small { font-size: 1.5rem; line-height: 1.25; margin-bottom: 1rem; }
.grid__item-meta { text-transform: uppercase; font-weight: 400; letter-spacing: 0.25rem;font-size:25px;color:#fff;}
.grid__item-subtitle { display: block; margin: auto 0 0 0; font-weight: 400;color:#fff;font-size:25px;}
.grid__item-subtitle span { display: block; }
.grid__item-text { font-size: 1rem; line-height: 1.75; margin: 2rem 0 0 0; color: var(--item-text); }
.grid__item-link { display: inline-block; color: currentColor; font-weight: 700; font-size: 0.95rem; position: relative; padding: 0 0 0.2rem; pointer-events: auto; color: var(--item-link); }
.grid__item-link:focus, .grid__item-link:hover { color: var(--item-link-hover); }
.grid__item-link::before { content: ''; position: absolute; background: currentColor; width: 80%; height: 1px; bottom: 0; transform-origin: 0% 50%; transform: scale3d(0, 1, 1); opacity: 0; transition: all 0.3s; transition-property: opacity, transform; }
.grid__item-link:hover::before { opacity: 1; transform: scale3d(1, 1, 1); }
.grid__item-link + .grid__item-link { margin: 0 0 0 3rem; }
.grid__item-text + .grid__item-link { white-space: nowrap; margin-top: 1rem; align-self: flex-start; margin-top: auto; }
.grid__item-nav { display: flex; }
/* Themes */


.theme-11 {  --item-bg: rgba(0,0,0,0.1);
 --item-link: #fff;
 --item-link-hover: #fff;
 --item-meta: #fff;
 --item-title: #fff;
 --item-subtitle: #fff;font-size:25px;
 --item-text: #fff;
}

.theme-4 {width:550px;float:left;}
 @media screen and (min-width: 85em) {
.grid__item-text {width:550px;height:450px;margin:0 25px;float:left;}
}
 @media screen and (min-width: 50em) {
.grid { display: grid; grid-template-columns: repeat(2, 50vmax); }
.grid__item {width:550px;height:450px;float:left;border-radius:4px;overflow:hidden;}
.grid__item-subtitle * { opacity: 0; transform: translate3d(100px, 0, 0); transition: all 0.5s cubic-bezier(0.2, 1, 0.7, 1); transition-property: transform, opacity; }
.grid__item:hover .grid__item-subtitle * { opacity: 1; transform: translate3d(0, 0, 0);}
.grid__item:hover .grid__item-subtitle span { transition-delay: 0.1s; }
.grid__item:hover .grid__item-subtitle .grid__item-link { transition-delay: 0s; }
.grid__item-title {font-size:50px;color:#fff;}
.grid__item-title--small {height:300px;font-size:25px;font-weight:lighter;border-bottom:1px solid #f0f0f0;text-align:center;}
.grid__item-text { margin-top: 2.5rem; }
}