/* GRID FILTER */



#grid-filter {

	text-align: center;

	margin-top: 50px;

	background: url(../images/grid-filter-bg.png) repeat-x 0px 6px;

	font-size: 0px;

}



#grid-filter li {

	display: inline-block;

	margin: 0px;

	padding: 5px 15px;

	background-color: #f5f5f5;

}



#grid-filter li:first-child {padding-left: 15px;}

#grid-filter li:last-child {padding-right: 15px;}



#grid-filter li a {

	color: #909799;

	font-size: 16px;

}



#grid-filter li a.selected,

#grid-filter li a:hover {

	color: #ffc905;
	height: 200px;
	width: 200px;

	text-decoration: none;

}




/* GRID CONTENT */



.og-grid {

	list-style: none;
	
width: 100%;

	padding: 20px 0 50px;

	margin: 0 auto;

	text-align: center;

	font-size: 0;

}



.og-grid li {

	display: inline-block;

	margin: 10px 10px 0px 0px;

	vertical-align: top;

}







.og-grid li > a,

.og-grid li > a img {

	border: none;

	outline: none;

	display: block;

	position: relative;

	background: #e4e7e9;

}

.og-grid li.og-expanded > a::after {

	top: auto;

	content: " ";

	height: 400px;

	width: 0;

	position: absolute;

	pointer-events: none;

	border: solid transparent;

	border-bottom-color: #000;

	border-width: 20px;

	left: 50%;	

	margin: -30px 0 0 -20px;
	

}








/* THUMB HOVER EFFECT */



.og-grid li > a > div {

	padding: 0px 0px 0px;

	position: absolute;

	top: 0px;

	width: 100%;

	height:100%;

	background: #000;

	text-align: left;

	overflow:hidden;

	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

        filter: alpha(opacity=0);

    -khtml-opacity: 0;

      -moz-opacity: 0;

           opacity: 0;

    -webkit-transition: opacity .3s ease-in;

       -moz-transition: opacity .3s ease-in;

         -o-transition: opacity .3s ease-in;

            transition: opacity .3s ease-in;

}



.og-grid li > a:hover > div {

	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

        filter: alpha(opacity=100);

    -khtml-opacity: 1;

      -moz-opacity: 1;

           opacity: 1;

}



.og-grid li > a > div > div {

	position: absolute;

	top: 0px;

	width: 132px;

	-webkit-transition: top .3s ease-in;

       -moz-transition: top .3s ease-in;

         -o-transition: top .3s ease-in;

            transition: top .3s ease-in;

}



.og-grid li > a:hover > div > div {

	top: 15px;

}



.og-grid li > a > div > div h5::after {

	content: "";

	display: block;

	margin: 12px 0px;

	width: 60px;

	height: 1px;

	background-color: #e0e7e9;

	background-color: rgba(255,255,255,.4);

}



.og-grid li > a > div > div h5 {

	color: #fff;

	line-height: 16px;

	font-size: 14px;

	font-weight: normal;

	text-transform: uppercase;

}



.og-grid li > a > div > div p {

	color: #707779;

	color: rgba(0,0,0,.7);

	line-height: 18px;

	font-size: 12px;

}





/* THUMB PREVIEW */



.og-expander {

	position: absolute;

	background: #fff;

	top: auto;

	left: 0;

	width: 100%;

	margin-top: 10px;

	text-align: left;

	height: 650px;

	overflow:;

}



.og-expander-inner {

	padding: 0px 0px;

	height: 0px;
	width: 80%;

}



.og-close {

	position: absolute;

	width: 30px;

	height: 30px;

	top: 20px;

	right: 20px;

	cursor: pointer;

	z-index: 2;

}



.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: #000;

}



.og-fullimg,

.og-details {
        margin-top: 0px;
	float: left;
	width: 30%;
	line-height: 0px;
}

.rollback  {

background-color: #f5f5f5;
text-align: center;
padding: 5px;
height: 120px;
width: 132px;
}

.og-details {

	float: right;

	width: 70%;

	padding-left: 25px;

}



.og-fullimg img {

	display: inline-block;

	max-height: 100%;

	max-width: 100%;

}



.og-details h3 {

	padding: 20px 0 10px;

	margin-bottom: 10px;

	font-size: 16px;

	font-weight: normal;

	text-align: left; 

}



.og-details p {

	margin: 0px;

	line-height: 22px;

	font-size: 14px;

	color: #909799;

}



.og-details a {

	display: inline-block;

	margin: 30px 0px;

    padding: 8px 10px;

    background: transparent;

    color: #de5434;

    line-height: 16px;

    font-size: 14px;

    font-weight: 700;

    

    -moz-border-radius: 3px;

         border-radius: 3px;

    cursor: pointer;

    -webkit-transition: all 0.1s ease;

       -moz-transition: all 0.1s ease;

         -o-transition: all 0.1s ease;

            transition: all 0.1s ease;

}



.og-details a:hover {

	background: #000;

    color: #000;

    text-decoration: none;

}



.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 screen and (max-width: 830px) {



	.og-expander h3 { line-height: 32px; 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%; }