*,
*:after,
*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;}
.clearfix:before,
.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
.main > p{text-align:center;padding:50px 20px;}
.codrops-top{line-height:24px;font-size:11px;background:#fff;background:rgba(255, 255, 255, 0.5);text-transform:uppercase;z-index:9999;position:relative;box-shadow:1px 0px 2px rgba(0,0,0,0.2);}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#333;display:inline-block;}
.codrops-top a:hover{background:rgba(255,255,255,0.8);color:#000;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
.og-grid{list-style:none;padding:20px 0;margin:0 auto;text-align:center;width:100%;}
.og-grid li{display:inline-block;margin:40px 5px 0 5px;vertical-align:top;height:120px;}
.og-grid li > a,
.og-grid li > a img{border:none;outline:none;display:block;position:relative;width:100px;}
.og-grid li.og-expanded > a::after{top:auto;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-bottom-color:#f7f7f7;border-width:15px;left:50%;margin:-20px 0 0 -15px;}
.og-expander{position:absolute;background:#f7f7f7;top:auto;left:0;width:100%;margin-top:10px;text-align:left;height:0;overflow:hidden;}
.og-expander-inner{padding:50px 30px;height:100%;}
.og-close{position:absolute;width:40px;height:40px;top:20px;right:20px;cursor:pointer;}
.og-close::before,
.og-close::after{content:'';position:absolute;width:100%;top:50%;height:1px;background:#888;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);}
.og-close::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);}
.og-close:hover::before,
.og-close:hover::after{background:#333;}
.og-fullimg,
.og-details{width:50%;float:left;height:100%;overflow:hidden;position:relative;}
.og-details{padding:0 40px 0 20px;}
.og-fullimg{text-align:center;}
.og-fullimg img{display:inline-block;max-height:100%;max-width:100%;}
.og-details h3{font-weight:300;padding:0px 0 10px;margin-bottom:10px;}
.og-details p{font-weight:300;line-height:22px;color:#1f1f1f;}
.og-details a{display:inline-block;margin:2px;}
.og-details img{margin-bottom:0px;}
.og-loading{width:20px;height:20px;border-radius:50%;background:#ddd;box-shadow:0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;-webkit-animation:loader 0.5s infinite ease-in-out both;-moz-animation:loader 0.5s infinite ease-in-out both;animation:loader 0.5s infinite ease-in-out both;}
@-webkit-keyframes loader{0%{background:#ddd;}
33%{background:#ccc;box-shadow:0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;}
66%{background:#ccc;box-shadow:0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;}
}
@-moz-keyframes loader{0%{background:#ddd;}
33%{background:#ccc;box-shadow:0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;}
66%{background:#ccc;box-shadow:0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;}
}
@keyframes loader{0%{background:#ddd;}
33%{background:#ccc;box-shadow:0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;}
66%{background:#ccc;box-shadow:0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;}
}
@media screen and (max-width:830px){.og-expander h3{font-size:32px;}
.og-expander p{font-size:13px;}
.og-expander a{font-size:12px;}
}
@media screen and (max-width:650px){.og-fullimg{display:none;}
.og-details{float:none;width:100%;}
.og-details h3{padding:0px;font-size:18px;line-height:1em;}
.og-expander-inner{padding:10px;}
}