.og-grid {
	list-style: none;
	padding: 20px 0;
	margin: 0 auto;
	text-align: left;
	width: 100%;
}
.og-grid li {
   display: inline-block;
   margin: 10px 15px 0 0;
   vertical-align: top;
   height: 250px;
}

@media screen and (max-width: 1123px) {
   .og-grid li {max-width: 22%;  overflow:hidden; padding-bottom: 5px;}
   .og-grid.og-grid {text-align: center;}
      
}
@media screen and (max-width: 900px) {
   .og-grid li {max-width: 30%;}
}


@media screen and (max-width: 780px) {
   .gstone-wrap h2  { text-align: center; }
   
   .og-grid li {max-width: 30%;  }
   
      
}

@media screen and (max-width: 600px) {
   .og-grid li {max-width: 45%;}
}

@media screen and (max-width: 400px) {
   .og-grid li { max-width: 100%; overflow: visible; padding-bottom: 0px; }
}

.og-grid li > a,
.og-grid li > a img {
	border: none;
	outline: none;
	display: block;
	position: relative;
}

.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: #000000;
	border-width: 15px;
	left: 50%;
	margin: -20px 0 0 -15px;
}


.og-expanded, .og-expander {
   
}

.og-expander {
	position: absolute;
	background: #000000;
	top: auto;
	left: 0;
	width: 100%;
	margin-top: 10px;
	text-align: left;
	height: 0;
	overflow: hidden;
	
}


.og-expander-inner {
   max-width:1400px; margin:0 auto;
	padding: 50px 40px;
	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: #FFFF99;

}

.og-close:hover::before {
   -webkit-transition: -webkit-transform 0.5s;
   -moz-transition: -moz-transform 0.5s;
   transition: transform 0.5s;
   -webkit-transform: rotate(405deg); 
   -moz-transform: rotate(405deg); 
   transform: rotate(405deg); 
}



.og-link-prev, .og-link-next { font-family: verdana, helvetica; font-size: 18px;  display:block; position:absolute; text-align:center; padding:30px 12px; top:50%; margin-top:-40px; background:#1d1d1d; color:#909090; cursor:pointer; left:0; }
.og-link-next { left:auto; right:0; }
.og-link-prev:hover, .og-link-next:hover { background:#2A2A2A; color:#FFFF99; }
.hidePrev .og-link-prev, .hideNext .og-link-next { display:none; }

.og-fullimg {
	width: 100%;
	text-align: center;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.og-details {	
	text-align: center; padding: 0px 100px; color:#b3b3b3; font-size:14px;
}



.og-fullimg img {
	display: inline-block;
	max-height: 120%;
	max-width: 100%;
}

.og-details h3 {
	font-weight: 300;
	font-size: 32px;
	padding: 0 0 10px;
	margin:0 0 10px 0;
}


.og-details a {
	color:#fad7a1; border-color:rgba(250,215,161,0.35);
}


.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;
	-o-animation: loader 0.5s infinite ease-in-out both;
	animation: loader 0.5s infinite ease-in-out both;
}

.og-description { display:none; }

@-webkit-keyframes loader {
   0% { -webkit-transform: rotate(0); }
   100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes loader {
   0% { -moz-transform: rotate(0); }
   100% { -moz-transform: rotate(360deg); }
}

@-o-keyframes loader {
   0% { -o-transform: rotate(0); }
   100% { -o-transform: rotate(360deg); }
}

@keyframes loader {
   0% { transform: rotate(0); }
   100% { transform: rotate(360deg); }
}

@media screen and (max-width: 830px) {

	.og-details h3 { font-size: 24px;  }
	.og-expander p { font-size: 13px; }
	.og-expander a { font-size: 12px; }
	.og-link-prev, .og-link-next { padding: 40px 8px;}

}

@media only screen and (max-width: 780px) {
   .og-details h3 { font-size: 20px; }
}


@media screen and (max-width: 650px) {

   .og-details h3 { font-size: 16px; }
	.og-fullimg img { max-width: 140%; max-height: 140%; }
	.og-link-prev, .og-link-next {display:none;}
	
}

@media screen and (max-width: 400px) {
   .og-details h3 { font-size: 16px; }
   .og-details { display:none;}
   
   .og-fullimg { overflow: hidden;}
   .og-grid li > a { pointer-events: none; }

.og-description {
    background: none repeat scroll 0 0 rgba(20, 20, 20, 0.85);
    color: #F9F9F9;
    display: block;
    font-size: 11px;
    margin-top: -43px;
    position: absolute;
    width: 243px;
}
   
}