#controls-filter ul {margin-left:236px;}
#controls-filter li {float:left; margin-right:-1px; padding:8px 12px; border:1px solid #f3dc1d; border-radius:0; font:bold 13px helvetica; color:#000; background-color:#fff; color:#000; text-decoration:none; cursor: pointer;}
#controls-filter li:first-child {border-top-left-radius:.5em; border-bottom-left-radius:.5em;}
#controls-filter li:last-child {margin-left:-1px; border-top-right-radius:.5em; border-bottom-right-radius:.5em;}
#controls-filter li:active, #controls-filter li.active {background-color:#f3dc1d !important; color:#000; text-shadow:none; cursor:default;}
#controls-filter li:down {background-color:#43acd9; color:#fff; text-shadow:none;}
#controls-filter li:hover {background-color:#f4eebd; color:#000; text-shadow:none; -webkit-transition:background 0.3s linear; -moz-transition:background 0.3s linear; -ms-transition:background 0.3s linear; -o-transition:background 0.3s linear; transition:background 0.3s linear;}
#controls-price ul {float:right; width:100px;}
#Grid {width:693px; text-align:justify; font-size:0.1px;}
#Grid:after {content:''; display:inline-block; width:100%;}
#Grid .mix {display:none; opacity:0; width:231px; height:231px; vertical-align:top; background:#fff; color:#545454; font-size:13px; text-align:center; line-height:15px;}
#Grid .gap {display:inline-block; width:231px;}
#menucontainer {display:block; float:right;}
#editmenu {display: block; margin: 2px 30px 0 0; width: 28px; height: 26px; padding:4px 0 0 2px; font:normal 18px helvetica; color:#000; text-align: center; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #dedede; cursor: pointer;}
#editmenu:hover {background-color:#f0f0f0; -webkit-transition:background 0.3s linear; -moz-transition:background 0.3s linear; -ms-transition:background 0.3s linear; -o-transition:background 0.3s linear; transition:background 0.3s linear;}
#editmenu:active {background-color: #404040; color:#fff;}
.tool-container {background-color: #000; border-radius: 3px; -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); box-shadow: 0 0 5px rgba(0,0,0,0.3); position: absolute;}
.tool-top .tool-item, .tool-bottom .tool-item {float: left; border-right: 1px solid #333;}
.tool-item {height: 100%; display: block; padding:12px; text-align: center; font:normal 12px helvetica; color:#fff;}
.tool-item:first-child {border-left: none;}
.tool-item:last-child {border-right: none; border-bottom: none;}
.tool-item.selected, .tool-item:hover  {background: #545454; color: #fff; text-decoration:none;}
.tool-item.selected, .tool-item:active  {background: #999; color: #000; text-decoration:none;}
.tool-top .tool-item:last-child:hover, .tool-bottom .tool-item:last-child:hover {border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
.tool-top  .tool-item:first-child:hover, .tool-bottom  .tool-item:first-child:hover {border-top-left-radius: 3px; border-bottom-left-radius: 3px;}
.tool-left .tool-item:last-child:hover, .tool-right .tool-item:last-child:hover {border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}
.tool-left .tool-item:first-child:hover, .tool-right .tool-item:first-child:hover {border-top-right-radius: 3px; border-top-left-radius: 3px;}
.tool-container .arrow {width:0; height:0; position: absolute; border-width:7px; border-style:solid;}
.tool-container.tool-top .arrow {border-color: #000 transparent transparent; left: 50%; bottom: -14px; margin-left: -7px;}
.tool-container.tool-bottom .arrow {border-color: transparent transparent #000; left: 50%; top: -14px; margin-left: -7px;}
.tool-container.tool-left .arrow {border-color: transparent transparent transparent #000; top: 50%; right: -14px; margin-top: -7px;}
.tool-container.tool-right .arrow {border-color: transparent #000 transparent transparent; top: 50%; left: -14px; margin-top: -7px;}
li.mix {postion:relative;}
li.mix h2.product-sub-title, li.mix .icon-info {display:none;}
@media all {li.mix:hover .icon-info {display:inline; position:absolute; right:10px; bottom:10px; width:15px; height:15px; background:url(http://valetmag.com/gr/daily/personal_shopper/features/2013/gift_guide/general/icon-info.png)no-repeat; background-size:15px 15px;}}
@media only screen and (-webkit-device-pixel-ratio: 2) {li.mix:hover .icon-info {display:inline; position:absolute; right:10px; bottom:10px; width:15px; height:15px; background:url(http://valetmag.com/gr/daily/personal_shopper/features/2013/gift_guide/general/icon-info.png)no-repeat; background-size:15px 15px;}}
li.mix:hover h2.product-sub-title {display:inline; position:absolute; left:0; right:0; bottom:10px; font:normal 12px helvetica; color:#000; text-transform:none; text-align:center; z-index:1001;}

.og-grid *,
.og-grid *:after,
.og-grid *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}								
								
.og-grid {
	list-style: none;
	padding: 0;
	margin-left:-20px;
	text-align: center;
	width: 100%;
}

.og-grid li {
	float:left;
	display: inline-block;
	margin: 0;
	padding: 0;
	vertical-align: top;
	width: 231px;
	height: 231px;
}

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

.og-grid li > a img:hover {
	opacity: .8;
    -webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

.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: 8px;
	width: 964px;
	margin-top: 10px;
	text-align: left;
	overflow: hidden;
	z-index:1001;
}

.og-expander-inner {
	padding: 35px;
	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 {
	float: left;
	width: 500px;
	height: 500px;
	margin: -35px 50px -35px -35px;
	overflow: hidden;
	position: relative;
}

.og-details {
	float:left;
	width:360px;
}

.og-fullimg {
	text-align: center;
}

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

.og-details p.product-who {
	float:left;
	width:50px;
	height:50px;
	margin:48px 15px 0 0;
	padding-top:12px;
	background:#000;
	border-radius:60px;
	font:normal 12px helvetica;
	text-align:center;
	text-transform:uppercase;
	color:#fff;
	overflow:hidden;
}

.og-details p.product-title {
	font:normal 35px georgia;
	color:#000;
	line-height:48px;
	margin:50px 0 16px 0;
	padding:0 0 0 0;
}
	
.og-details p.product-description {
	font:normal 15px helvetica;
	color:#545454;
	line-height:22px;
	margin-bottom:15px;
}

.og-details p.product-price {
	float:left;
	padding:4px 10px;
	border:solid 1px #709a00;
	font:normal 14px helvetica;
	color:#709a00;
	border-radius:8px;
}

.og-details a.product-link {
	float:left; 
	width:360px;
	height:35px;
	margin-top:-30px;
	z-index:1002;
	background:none;
	text-decoration:none;
	opacity:1.0,
}

.og-details a.product-link:hover {
	background:#dedede;
	text-decoration:none;
	opacity:.3;
	-webkit-transition:background 0.1s linear;
	-moz-transition:background 0.1s linear;
	-ms-transition:background 0.1s linear;
	-o-transition:background 0.1s linear;
	transition:background 0.1s linear;
}

.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%; }
	
}