.wrap {width:100%;position:relative;padding:1em 0 0;}
.wrap > header {width:90%;max-width:1240px;margin:0 auto;position:relative;padding:0 30px 50px 30px;}
.wrap > header {padding:60px 30px 50px;text-align:center;}
.wrap > header h1 {font-size:34px;line-height:38px;margin:0 auto;font-weight:700;color:#333;}
.wrap > header h1 span {display:block;font-size:20px;font-weight:300;}
.main > p {text-align:center;padding:50px 20px;}
/* Header Style */.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:15px 0;vertical-align:top;height:auto;float:left;max-widht:100%;padding:0px 1%;}
.og-grid li > a,.og-grid li > a img {border:none;outline:none;display:block;position:relative;width: 100%;height: auto;max-width:26em;}
.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:#ddd;border-width:15px;left:50%;margin:-20px 0 0 -15px;}
.og-expander {position:absolute;background:#ddd;top:auto;left:0;width:97.5%;margin:10px 15px 0;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;font-size:52px;padding:40px 0 10px;margin-bottom:10px;}
.og-details p {font-weight:400;font-size:16px;line-height:22px;color:#999;}
.og-details a {font-weight:700;font-size:16px;color:#333;text-transform:uppercase;letter-spacing:2px;padding:10px 20px;border:3px solid #333;display:inline-block;margin:30px 0 0;outline:none;text-decoration:none;}
.og-details a::before {content:'\2192';display:inline-block;margin-right:10px;}
.og-details a:hover {border-color:#8FBF00;color:#FFF;background-color:#8FBF00;}
.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;}
}
/*--responsive---*/@media(max-width:1024px) {.og-grid li {width:31%;height:202px;}
.og-grid {padding:20px 0 0;}
.fold_wrap{width:100%;}
}
@media(max-width:768px) {.og-grid li {width:45%  !important;height:auto;}
.og-details {padding:0 0px 0 20px;}
.fold_wrap{width:100% !important;}
.pic_auto{background-size:100% !important;}
.fold_wrap li{height:60vw !important;width:100% !important;}
.fold_wrap{height:auto !important;}
}
@media(max-width:640px) {.og-grid li {width:46%;height:auto;padding:0px 8px;}
.og-grid {padding:6px 0 0;}
.og-details h3 {padding:0px 0 0px;}
.og-details a {margin:10px 0 0;}
.og-expander {margin:10px 8px 0px;}
}
/*---component--*/@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%;}
}
@media(max-width:480px) {.og-grid li {width:100%;height:auto;padding:0px 8px;margin:8px 0;}
}
@media(max-width:320px) {.og-grid li {width:100%;height:auto;padding:0px 4px;}
.wrap {padding:0.5em 0 0;}
.og-expander-inner {padding:43px 15px;}
.og-expander {margin:10px 4px 0px;}
.og-expander h3 {font-size:28px;}
}