* { margin:0; padding:0; }
html { background:#222222; background: url(./Images/Back.jpg); background-repeat: no-repeat center fixed; font-family:trebuchet ms, candara, sans-serif; font-size:62.5%; }
body {font-family:trebuchet ms, candara, sans-serif; font-size:1.1em; color:#515b69; }
a { color:#515b69; transition: 0.5s ease;}
a:hover { color:#ff8c00; }
h2, p { margin-bottom:1em; }
pre { font-family:trebuchet ms, candara, sans-serif; }
td { color: #222222; font-size: 12px; font-style: normal; }

input[type=text].stoker, select.stoker, textarea.stoker, input[type="password"].stoker { background-color: #f7f7f7; margin: 2px; border:solid 1px #BFBDBD; color: #777; height: 40px; padding-left:10px;}
select.error, textarea.error, input.error {color:red; background-color: #fff0f0; margin: 2px; height: 40px; padding-left:10px; border:dashed 1px red;}
select.normal, textarea.normal, input.normal {margin: 2px; height: 40px; padding-left:10px;}
select.normalsm, textarea.normalsm, input.normalsm {margin: 2px; height: 25px; padding-left:10px;}

@media screen { #rightcont {width:calc(100% - 40px); padding:20px;float:left;} #leftcont{width:100%;float:left;} }
@media screen and (orientation:landscape) { #leftcont{width:45%;float:left;} #rightcont {width:calc(55% - 40px);float:right;} }
.view_container img { width: auto; height : auto; max-height: 100%; max-width: 100%; }
.thumb_container {overflow: hidden; float:left; width:24%; padding:0.5%;}
.price { font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size:22px; color:#900100; }
.itemleft { font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; margin-top:10px; font-size: 14px; visibility: hidden;}
.cartviewer {font-size: 20px;margin-top:-3px;}
.showcase {display:flex; flex-direction: row; flex-wrap: wrap; align-items:center; justify-content:flex-start;}
.cat_descr { background: black; color:white; font-weight:bold; margin: 0 4.5% 10px 1.5%; padding: 5px; }
.cat_mobile { margin: -5px 4.5% 1% 1.5%; padding-bottom:15px; }
.filters_drop { border: 0px solid; font-size: 12px; color: #777; }
.filtersH { margin-left:10px;}
.filterdiv {cursor:pointer;font-weight:bold;}

.hover,.hover ul {color: #ddd; padding: 0; margin: 0; list-style: none;}
.hover a {color: #ddd; display: inline; text-decoration: none; }
.hover a:hover {color: #1c9dda; text-decoration: none;}
.hover li {color: #334; float: left; }
.hover li ul {text-align: justify; position: absolute; background: #30373d; margin-top: 5px; margin-left: -90px; border: 1px solid #9a9a9a; padding: 10px; width: 180px; left: -9999px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius:2px; opacity: 0; transition: opacity 0.5s;}
.hover li :after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;	border-color: rgba(49, 51, 87, 0); border-bottom-color: #30373d; border-width: 5px; margin-left: -5px; }/* Βελάκι πάνω από το παράθυρο */
.hover li:hover ul {left: auto; visibility: visible; opacity: 0.95;} 
.hover li ul li a {color: #eee; text-decoration: none; display: block;}
.hover li ul li a:hover {color: #1c9dda;}

.radioclick {display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; list-style-type:none; padding:0; }
.radioclick li { margin:2px; }
.radioclick label, .radioclick input {display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; min-width:64px; height:50px; padding:0 5px;}
.radioclick input[type="radio"] { display: none; }
.radioclick input[type="radio"]:checked + label { transition: background-color 0.5s ease; background:black; color:white; }
.radioclick label { border:1px solid #ccc; cursor:pointer; z-index:90; }
.radioclick label:hover { background:#ddd; }
.radiohelptitle { float:left; padding:4px 10px; background-color: white; border: 1px solid #d2dadd; position:relative; bottom: -12px; left:24px; }
.radiohelpsize { float:right; padding:4px; background-color: white; border: 1px solid #d2dadd; position:relative; top:-32px; right:24px; font-size: 10px; margin-bottom:-20px; }

.scrollingwindow { height: 18vw; overflow:auto; }
.checkoutbutton  {font-family:trebuchet ms, candara, sans-serif; font-size: 14px; width: 120px; padding:5px; background-color: #1b3f27; color: #fff; transition: background-color 0.5s ease; border:solid 1px #444;}
.checkoutbutton:hover { font-size: 14px; width: 120px; padding:5px; background-color: #fff; color: #000; border:solid 1px #444;}
.button {font-family:trebuchet ms, candara, sans-serif; font-size: 14px; width: 120px; padding:5px; background-color: #000; color: #fff; transition: background-color 0.5s ease; border:solid 1px #444;}
.button:hover { font-size: 14px; width: 120px; padding:5px; background-color: #fff; color: #000; border:solid 1px #444;}
.fltrbutton { cursor: pointer;background-color: white; color: #777; transition: background-color 0.5s ease; border:solid 1px #BFBDBD;}
.fltrbutton:hover { background-color: #000; color: #fff; border:solid 1px red;}
.fltrbuttoninv { cursor: pointer;background-color: #000; color: #fff; transition: background-color 0.5s ease; border:solid 1px red;}
.fltrbuttoninv:hover { background-color: white; color: #777; border:solid 1px #BFBDBD;}
.fltrchck { padding-bottom:4px;font-size:14px; line-height: 102%; cursor: pointer; transition: color 0.4s ease;}
.fltrchck:hover { color: red;}

.buttonround {font-weight:bold; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; color:white; border:solid 2px white; position:absolute; margin-top:10px; right:-10px; border-radius: 50%; width: 14px; padding-bottom:4px; padding-left:6px; background-color:black;}
.buttonround:hover {background-color:red;}
#SawNewsletter {opacity: 0; visibility:none; width: 50%; height: 50%; position: absolute; top:0; bottom: 0; left: 0; right: 0; -webkit-transition: opacity .4s ease-in; -moz-transition: opacity .4s ease-in; -o-transition: opacity .4s ease-in;
    -ms-transition: opacity .4s ease-in; transition: opacity .4s ease-in; margin: auto; z-index:11; }

#sidebar { margin:20px 10px 10px 10px; height:100%; padding: 10px; box-shadow: 0 0 8px #444; -moz-box-shadow: 0 0 8px #444; -webkit-box-shadow: 0 0 8px #444; background:#fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:6px;}
#content { float: right; width: 100%; background:#f3f3f3; margin:20px 0px 20px 0px; box-shadow: 0 0 8px #444; -moz-box-shadow: 0 0 8px #444; }
#content_show { min-width : 720px; max-width : 100%; opacity:0.95; background:#f3f3f3; margin:20px 0px 20px 0px; box-shadow: 0 0 8px #444; -moz-box-shadow: 0 0 8px #444; -webkit-box-shadow: 0 0 8px #444; }
#stroker { padding:20px; background: #fff; }
#perigrafi { font-family:trebuchet ms, candara, sans-serif; text-align:justify; white-space: pre-line; font-style: normal;}
#wrapperstart { width: 80%; margin: auto; }
@media only screen and (min-width: 1280px) { 
	#wrapperstart { width: 80%; }
}
@media only screen and (max-width: 1280px) { 
	#wrapperstart { width: 100%;}
}
@media only screen and (min-width: 1280px) { 
	#wrapper { width: 80%; margin:10px 10% 20px auto; min-height: 300px; min-width: 720px; overflow: hidden;}
}
@media only screen and (max-width: 1280px) { 
	#wrapper { width: 95%; margin-left:3%; min-height: 300px; overflow: hidden;}
}
#wrappercenter { width: 90%; margin:10px 5% 10px auto; min-height: 300px; min-width: 720px; overflow: hidden;}
#wrappershow { margin:20px auto 20px auto; padding: 10px 30px 10px 30px; }

.ArSel { display:flex; flex-direction: row; align-items:center; justify-content:center; margin: 10px 0;}
.clear { clear:both; }
.sales { position:absolute; z-index:3; padding:15px; color : white; text-align: center;}
.salestext {position: absolute; width: 100%; left:10%; top: 30%;}
.cart_item { float: left; z-index:2; position:relative; padding: 10px; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; margin:0px 0px 20px 1.2%; background:#fff; overflow: hidden;}
.cart_item_small { float: left; z-index:2; position:relative; padding: 10px; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; margin:0px 0px 20px 1.2%; background:#fff; overflow: hidden; width: 21%;}
.svginv { filter: invert(100%); -webkit-filter: invert(100%); opacity:0.8; }
@media only screen and (min-width: 1280px) { 
	.centerlogo {width: 220px;} 
	.cart_item {width: 21%;} 
	.mobiletext {font-size : 16px;}
	#loginclass {font-size : 16px;}
	#hiddenlogo {left:20px; }
	.sales {width: 200px;}
	.salestext { font-size: 32px;}
}
@media only screen and (min-width: 800px) and (max-width: 1279px) {
	.centerlogo {width: 160px;} 
	.cart_item {width: 45%;} 
	.mobiletext {font-size : 13px;}
	#loginclass {font-size : 13px;}
	#hiddenlogo {left:0px;}
	.sales {width: 120px;}
	.salestext { font-size: 20px;}
}
@media only screen and (max-width: 800px) {
	.centerlogo {width: 80px;} 
	.cart_item {width: 45%;} 
	.mobiletext {font-size : 10px;}
	#loginclass {font-size : 10px;}
	#hiddenlogo {left:0px;}
	.sales {width: 80px;}
	.salestext { font-size: 14px;}
}
.cart_item strong { color:#400; }
.cart_container { z-index:-1; position:absolute; bottom:0; }
.cart_container img { width: 100%; height : auto; max-height: 100%; max-width: 100%; }
.cartitemrow {float:left; position:relative; width:calc(100% - 20px); height:170px; margin:0 0px 20px 20px; background:#fff; }

.jItem{ margin:0 20px 20px 0; background:#fff; padding:20px;box-shadow: 0 0 8px #444; -moz-box-shadow: 0 0 8px #444; -webkit-box-shadow: 0 0 8px #444; }
.jItem h2{ margin:20px; }
.jItem button { margin:15px; padding:5px;}

.jShow{ margin:0 20px 20px 0; padding-top:10px; border:solid 2px #d2dadd; background:#fff; padding:20px; }

.EditItem{ margin:0 20px 20px 0; padding-top:10px; border:solid 1px #d2dadd; background:#fff; width:100%; padding:20px; }
.EditItem h2{ margin:20px; }
.EditItem table {border:dotted 1px #d2dadd;}
.EditItem button { margin:15px; padding:5px;}

.fileUpload { position: relative; overflow: hidden; margin: 10px;}
.fileUpload input.upload { position: absolute;	top: 0;	right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0);}

.toprow {font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; text-align: center; height: 30px; background-color: #eee;}
.bottomrow {font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; text-align: center; height: 50px; color:#900100; font-size:14px; background-color: #eee;}

#pix{ position: relative; opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}
#pixsmall{ position: relative; opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}
#pix:hover{ -webkit-transform: scale(1.3,1.3); -moz-transform:scale(1.3,1.3); opacity: 1; -webkit-opacity: 1; -moz-opacity: 1;}
#pixsmall:hover{ -webkit-transform:scale(1.1,1.1); transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); opacity: 1; -webkit-opacity: 1; -moz-opacity: 1;}
#anima{opacity: 0.1; -webkit-opacity: 0.1; -moz-opacity: 0.1; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}
#anima:hover{ opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}
.faded{ -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.85; -webkit-opacity: 0.85; -moz-opacity: 0.85; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}
.faded:hover{ -webkit-filter: grayscale(0%); filter: grayscale(0%); opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}

button.brand_button {transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;font-family:trebuchet ms, candara, sans-serif; border:none; background:none; color:#555; font-size:14px; cursor:pointer; text-align: left; font-weight: normal; margin-bottom: -18px;}
button.brand_button:hover {color:orange;cursor:pointer;transform: scale(1.1); -webkit-transform:scale(1.1); }
button.brand_simple {font-family:trebuchet ms, candara, sans-serif; border:none; background:none; color:grey; font-size:14px; cursor:pointer; font-weight: normal;}

a.WinStyle3:link,
a.WinStyle3:active,
a.WinStyle3:visited {color: #fff; font-size: 14px; text-decoration: none; font-weight: bold; }
a.WinStyle3:hover {color: #f0f4f5; }

a.p_Style:link,
a.p_Style:active,
a.p_Style:visited {color: #515b69; background: #fff; font-size: 14px; padding: 5px; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:6px; margin:0 1px;}
a.p_Style:hover {color: #fff; background: #515b69; font-size: 14px; padding: 5px; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:6px;  box-shadow: 0 0 8px #444; -moz-box-shadow: 0 0 8px #444; -webkit-box-shadow: 0 0 8px #444; margin:0 1px;}

a.c_Style:link,
a.c_Style:active,
a.c_Style:visited {color: #515b69; background: #fff; font-family:trebuchet ms, candara, sans-serif; font-size: 14px; padding: 2px 5px 2px 5px; text-decoration: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px;}
a.c_Style:hover {color: #fff; background: red; font-family:trebuchet ms, candara, sans-serif; font-size: 14px; padding: 2px 5px 2px 5px; text-decoration: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px; }

.prices { font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif; }

.whitelinks:link,
.whitelinks:active,
.whitelinks:visited {color: white; text-decoration: none; transition: 0.5s ease;}
.whitelinks:hover {color: orange;}

#p_Style:link,
#p_Style:active,
#p_Style:visited {color: #515b69; font-size: 12px; padding: 5px; text-decoration: none; transition: 0.5s ease;}
#p_Style:hover {color: #fff; font-size: 12px; padding: 5px; text-decoration: none; }

.f_Style:link,
.f_Style:active,
.f_Style:visited {color: #111; font-size: 14px; padding: 5px; text-decoration: none; transition: 0.5s ease;}
.f_Style:hover {color: #fff; font-size: 14px; padding: 5px; text-decoration: none; }

#button2:link,
#button2:active,
#button2 { color: #515b69; background: #fff; font-size: 12px; padding: 5px;  margin:5px; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:6px;}
#button2:hover {color: #fff; background: #515b69; font-size: 12px; padding: 5px;  margin:5px; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:6px;  box-shadow: 0 0 8px #444; -moz-box-shadow: 0 0 8px #444; -webkit-box-shadow: 0 0 8px #444;}

.button2:link,
.button2:active,
.button2 { color: #515b69; background: #fff; font-size: 12px; padding: 5px;  margin:5px; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:6px;}
.button2:hover {color: #fff; background: #515b69; font-size: 12px; padding: 5px;  margin:5px; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:6px;  box-shadow: 0 0 8px #444; -moz-box-shadow: 0 0 8px #444; -webkit-box-shadow: 0 0 8px #444;}

a.Pg_Style:link,
a.Pg_Style:active,
a.Pg_Style:visited {color: #cccccc; background: #515b69;font-size: 14px; padding: 5px; text-decoration: none; font-weight: bold; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:6px; margin:0 1px;}
a.Pg_Style:hover {color: #515b69; background: #fff; font-size: 14px; padding: 5px; text-decoration: none; font-weight: bold; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:6px; margin:0 1px;}
	
a.Pi_Style:link, 
a.Pi_Style:active, 
a.Pi_Style:visited {color: #515b69; text-decoration: none; font-family:trebuchet ms, candara, sans-serif;}
a.Pi_Style:hover {color: #d35b38; text-decoration: none; }

#Pi_Style:link, 
#Pi_Style:active, 
#Pi_Style:visited {color: #515b69; background: #fff; text-decoration: none;}
#Pi_Style:hover {color: #d35b38; background: #fff; text-decoration: none;}

#tablecheckout { color: #346; padding:2px; margin:2px; background-color: white;}

a.chkout:link,
a.chkout:active, 
a.chkout:visited {color: #aaa; font-size: 16px; padding: 5px; text-decoration: none; font-weight: bold;}
a.chkout:hover {color: #346B95; font-size: 16px; padding: 5px; text-decoration: none; font-weight: bold;}

.icons{ opacity: 0.75; -webkit-opacity: 0.75; -moz-opacity: 0.75; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}
.icons:hover { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}

.TopHeaderBar { height:30px; background:black; display:flex; flex-direction: row; justify-content:flex-start; align-items:center;}
.TopHeaderBarM { height:60px; background:black; display:flex; flex-direction: row; justify-content:flex-start; align-items:center;}
.TopHeaderLeft { flex: 0 1 auto; margin-left: auto; }
.social{opacity: 0.8; -webkit-opacity: 0.8; -moz-opacity: 0.8; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; }
.social:hover{ opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; }
.socialicons { color:white; font-size:18px; margin-left:5px;}

.footer {display:flex; flex-direction: row; flex-wrap: wrap; align-items:center; justify-content:flex-start; width: 100%; background: #9eac88; border-top: solid 2px #d2dadd; }
.footerItm { padding: 10px; width:220px; }
.footerTxt { padding: 5px; color: #111; font-size: 12px;}
.footerHdrTxt { font-size:18px; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; padding-left:5px;font-weight: bold;padding-bottom: 5px; color: #333; }
.footersocial{font-size:34px; padding:5px; opacity: 0.8; -webkit-opacity: 0.8; -moz-opacity: 0.8; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; }
.footersocial:hover{ font-size:34px; padding:5px;  opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; }
.footersocialImg {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.8; 
	transition: opacity 0.5s ease;
}
.footersocialImg:hover {
	opacity: 1;
	transition: opacity 0.5s ease;
}
.footerscol {color:white;}
.footerln {line-height: 150%;}

.SearchItem {display:flex; flex-direction: row; align-items:center; justify-content:center;}
.searchbar {flex: 0 1 auto;margin-left: auto; padding:10px; background-color:white; margin-right:10px; border-radius: 20px; width:400px;}
.searchbarstring { margin-top:4px; margin-left:4px; border:0px; width:330px; outline:none; }
.searchlookglass { background:#c50000; padding:5px 10px 5px 10px; height:26px; border-radius: 0px 12px 12px 0px; }
.fixed-autocoplete {position: fixed; top: 200px; left:0; background-color: #fff; padding: 10px; width: 100%; height: 80%;}

.searchbarM {flex: 0 1 auto;margin-left: auto; padding:5px; background-color:white; margin-right:10px; border-radius: 20px; width:270px;}
.searchbarstringM { margin-top:-5px; margin-left:12px; border:0px; width:200px; outline:none; }

.jLogin, .jLogin ul {color: #fff; padding: 0; margin: 0; list-style: none; z-index:101;}
.jLogin a {color: #fff; display: inline; text-decoration: none; }
.jLogin a:hover {color: #fff; text-decoration: none;}
.jLogin li {float: left; padding: 8px 8px 8px 8px; } /* καθορίζουμε πόσο πλατιά πιάνει το ποντίκι για να ανοίξει το παράθυρο */
.jLogin li ul {position: absolute; background: #fff; margin-top: 5px; margin-left: 0px; border: 1px solid #9a9a9a; padding: 10px; width: 250px; left: -9999px; box-shadow: 0 0 8px #444; -moz-box-shadow: 0 0 8px #444; -webkit-box-shadow: 0 0 8px #444; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius:2px; opacity: 0; transition: opacity 0.5s;} /* second-level lists */
.jLogin li:hover ul {left: auto; visibility: visible; opacity: 1.00; transition: opacity 0.5s;} /* nest list under hovered list items */
.jLogin li ul li a {color: #888; text-decoration: none; display: block;}
.jLogin li ul li a:hover {color: #f5931e;}

/* show more-less μενου*/
#more1, #more2, #more3 {position: relative;padding: 10px; overflow: hidden;}
.readmore {text-align: right; }
.readmore a {color: #999; text-decoration:none; }
.readmore a:hover {color: red;}

.blinking { color:red; animation: blinker 1s linear infinite; }
@keyframes blinker {0% { opacity: 1.0; } 25% { opacity: 1.0; } 30% { opacity: 0.0; } 55% { opacity: 0.0; } 60% { opacity: 1.0; } 100% { opacity: 1.0; } }
.greytext { font-size: 8pt; color:#666; }

/* ================================================== Check out ========================================================*/
.paycart {padding:20px; min-height:180px; background:white; width:calc(100% -40);}
.paylabel {padding:20px; min-height:180px; background:white; width:calc(100% -40);}
#trap {display:none; font-size: 14px; color:#15477c; padding:5px; text-align:justify;}
/* ================================================== Flyout Menu ======================================================*/
.Menu {color: #0d528f; height: 50px; background-color: #f6f6f6;}
.Menu-fixed { position: fixed; min-width: 960px; top: 0px; z-index:100;-webkit-box-shadow: 3px 8px 32px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 8px 32px -1px rgba(0,0,0,0.75); box-shadow: 3px 8px 32px -1px rgba(0,0,0,0.75);}

/* top level */
.cssmenu { position:relative; z-index:100; height: 60px; list-style: none; padding: 0; } 
.cssmenu ul { list-style-type: none; }
.cssmenu li { padding: 0; float: left; height: 36px;  /* position: relative; να το βάλω αν θέλω να ξεκινάει κάτω από τη λέξη*/ z-index:5; }
.cssmenu li:hover, .cssmenu li.onhover { border-top:200; }
.cssmenu a { text-align:center; min-width:70px; transition: background-color 0.5s ease; padding: 0 30px; line-height: 36px; /* keep this value the same as the height of .cssmenu li */ color: #555; font-family:trebuchet ms, candara, sans-serif; font-size: 17px; padding: 10px; text-decoration: none; display: inline-block; outline: 0; position: relative; }
.cssmenu li:hover a, .cssmenu li.onhover a { background-color: white; opacity : 0.90; color: #a26218; z-index: 9; }

/* Used to align a top-level item to the right */        
.cssmenu li.menuRight { float: right; margin-right: 0px; }
/* for the top-level separators */
.cssmenu li.separator { font-size:0; overflow:hidden; border-left:1px solid #aaa; height:50px; margin-top:0px; z-index:4; }
/* sub level */
.cssmenu .drop { position: absolute; max-height: 70vh; overflow-y: auto; z-index:5; left: -9999px; background: white; text-align: left; padding: 20px; top:55px; color:#234; width : 110%; margin-left:-10%; }
.cssmenu .drop a { padding-left: 0px; padding-right: 0px; line-height: 40px; font-size: 14px; display: inline; text-align: left; position: static; z-index: 0; }
.cssmenu li .drop {transition: opacity 0.5s ease; opacity: 0; }
.cssmenu li:hover .drop, .cssmenu li.onhover .drop {transition: opacity 0.5s ease; opacity: 1; left: -1px;/*Use this property to change offset of the dropdown*/ }
.cssmenu li:hover .dropToLeft, .cssmenu li.onhover .dropToLeft { left: auto; right: -1px; }
.cssmenu li:hover .dropToLeft2, .cssmenu li.onhover .dropToLeft2 { left: auto; right: -60px; }
/* Elements within the drop down sub-menu */
.cssmenu div.drop div div {padding: 6px 20px; } .menuTemplate1 li:hover .drop a, .menuTemplate1 li.onhover .drop a {background: none; background-image:none; padding:0 0;}
.cssmenu div.drop div a { line-height: 24px; color:#555; background:none; }
.cssmenu div.drop div a:hover {text-decoration:none; cursor:pointer; color: #fca029; }
.cssmenu div.left {min-width:30%; float:left; margin-left: 18px;}
/* Hide all elements below <li> when hovered with .no-backdrop */
.cssmenu li.no-backdrop:hover > .decor3_2 {
	position: fixed;
	top:-2000px;
}
.cssmenu li.no-backdrop:hover .decor3_2,
.cssmenu li.no-backdrop.onhover .decor3_2 {
	display: block !important;
	background-color: initial;
	opacity: initial;
	color: initial;
	height: 100%;
}
/* for submenu. */
.decor3_2 { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0px 8px 14px #123; -webkit-box-shadow: 0px 8px 14px #123; box-shadow: 0px 8px 14px #123; }
.decor3_2line { padding-top:0px; margin-bottom:5px; padding-bottom:0px; border-bottom: 1px solid #ccc;}

/* ============================================ Flyout Menu Mobile ==================================================*/
@media only screen and (min-width: 1280px) {
	html, body, div, span, applet, object, iframe, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, a, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
	{ margin: 0; padding: 0; border: 0;  font-size: 100%; font: inherit; }
	article, aside, details, figcaption, figure, footer, header, hgroup, section { display: block }
	body { font-family:trebuchet ms, candara, sans-serif; font-size:90%;}
}

#hidden_mob_menu { display:flex; flex-direction: row; flex-wrap: wrap; align-items:center; justify-content:center; }
.MenuFMob { width:100%; background-color: #000; border-bottom:solid 2px grey;top: 0px; left: 0px; height: 200px;}
.MobileWrapperMenu { width: 100%; height: 200px; margin: 0 auto; overflow: hidden; position: fixed; }

/* Επιρεάζει τα χρώματα */
label > span { float: right; -webkit-transition: -webkit-transform .65s ease; transition: transform .65s ease; }

.sort-top a { color: #212b39; text-decoration: none; font-family: Calibri; font-weight: bold; padding:5px; }
.sort-top a:hover { color: #000; text-decoration: none; font-family: Calibri; font-weight: bold; padding:5px;}
.sort-top { -moz-filter: invert(0%); -webkit-filter: invert(0%); filter: invert(0%); opacity:0.30; transition: 0.5s ease; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px; }
.sort-top:hover { -moz-filter: invert(100%); -webkit-filter: invert(100%); filter: invert(100%); opacity: 1; background-color: #00ffff; transition: 0.5s ease; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px; }

/* ================================================== Cart Window =======================================================*/
 #jcart { position: fixed; top: 0; right: -300px; background-color: white; height: 100%; width: 300px; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5); z-index: 1000; transition: background-color 0.3s; overflow-y: auto; overflow-x: hidden; }
#joverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; display: none; pointer-events: auto; }
.jcart { margin:0 20px 20px 0; padding-top:20px; border:dashed 2px #66cc66; float:left; background:#fff; text-align:center;}
.jcart ul { margin:0; list-style:none; padding:0 20px; text-align:left; }
.jcart fieldset { border:0; }
.jcart strong { color:#000066; }
.jcart .button { margin:20px; padding:5px; }

#jcartChkout { background-color: white; }
#jcartChkout table { width:100%; border:0; }
#jcartChkout th { background:#efefef;} 
#jcartChkout th, #jcartChkout td { padding:5px; border:0; vertical-align:middle; text-align:left; font-weight:normal; }
#jcartChkout { text-align:center; }

#login { position: fixed; top: 0; right: -300px; background-color: white; color: black; height: 100%; width: 300px; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5); z-index: 1001; transition: background-color 0.3s; overflow-y: auto; overflow-x: hidden; }
.login { font-family:trebuchet ms, candara, sans-serif; font-size: 14px; padding-top:20px; color:black; text-align:center; }
.login ul { margin:0; list-style:none; text-align:left; }
.login fieldset { border:0; }
.login strong { color:#000066; }
.login a {color:#888;}
.login a:hover {color:#f5931e;}
@supports (-moz-appearance: none) {
	.logininside { margin-top: -20px; }
}
.logintoprow {padding:5px; text-align: center; background-color: #eee;}
#lgoverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; display: none; pointer-events: auto; }
.loginB { color: white; padding: 10px; font-size: 16px; font-weight: bold; background:#304d36; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius:20px; width:80%; border: none; }
.loginB:hover { background:#506d56; }
.loginB:disabled { background: #999 !important; color: #eee !important; cursor: not-allowed !important; opacity: 0.6 !important; }

/* ================================================= RangeSlider =============================================================*/
.irs { position: relative; display: block; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none;
        -ms-user-select: none; user-select: none; }
.irs-line { position: relative; display: block; overflow: hidden; outline: none !important; }
.irs-line-left, .irs-line-mid, .irs-line-right { position: absolute; display: block; top: 0; }
.irs-line-left { left: 0; width: 11%; }
.irs-line-mid { left: 9%; width: 82%; }
.irs-line-right { right: 0; width: 11%; }
.irs-bar { position: absolute; display: block; left: 0; width: 0; }
.irs-bar-edge { position: absolute; display: block; top: 0; left: 0; }
.irs-shadow { position: absolute; display: none; left: 0; width: 0; }
.irs-slider { position: absolute; display: block; cursor: default; z-index: 1; }
.irs-slider.single { }
.irs-slider.from { }
.irs-slider.to { }
.irs-slider.type_last { z-index: 2; }
.irs-min { position: absolute; display: block; left: 0; cursor: default; }
.irs-max { position: absolute; display: block; right: 0; cursor: default; }
.irs-from, .irs-to, .irs-single { position: absolute; display: block; top: 0; left: 0; cursor: default; white-space: nowrap; }
.irs-grid { position: absolute; display: none; bottom: 0; left: 0; width: 100%; height: 20px; }
.irs-with-grid .irs-grid { display: block; }
.irs-grid-pol { position: absolute; top: 0; left: 0; width: 1px; height: 8px; background: #000; }
.irs-grid-pol.small { height: 4px; }
.irs-grid-text { position: absolute; bottom: 0; left: 0; white-space: nowrap; text-align: center; font-size: 9px; line-height: 9px; padding: 0 3px; color: #000; }
.irs-disable-mask { position: absolute; display: block; top: 0; left: -1%; width: 102%; height: 100%; cursor: default; background: rgba(0,0,0,0.0);
    z-index: 2; }
.irs-disabled { opacity: 0.4; }
.lt-ie9 .irs-disabled { filter: alpha(opacity=40); }
.irs-hidden-input { position: absolute !important; display: block !important; top: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; padding: 0 !important; margin: 0 !important; outline: none !important; z-index: -9999 !important; background: none !important; border-style: solid !important; border-color: transparent !important; }

/* ================================================= Star system =========================================================*/

div.stars { display: inline-block; }
input.starf { display: none; }
label.starf { float: right; padding: 2px; font-size: 15px; color: #ccc; }
input.starf:checked ~ label.starf:before { content: '\f005'; color: orange; }
input.starf-5:checked ~ label.starf:before { color: orange; text-shadow: 0 0 20px white; }
input.starf-1:checked ~ label.starf:before { color: red; }
label.starf:before { content: '\f005'; font-family: FontAwesome; }

.bar { height: 10px; margin-bottom:3px; width: 200px; background: #ddd; border-radius: 8px; }
.percentage { height: 10px; background: #aaa;  border-radius: 8px 0 0 8px; }

/* ================================================= Skin details =========================================================*/
.irs-line-mid,
.irs-line-left,
.irs-line-right,
.irs-bar,
.irs-bar-edge,
.irs-slider { background: url(Images/skin-nice.png) repeat-x; }
.irs { height: 40px; }
.irs-with-grid { height: 60px; }
.irs-line { height: 8px; top: 25px; }
.irs-line-left { height: 8px; background-position: 0 -30px; }
.irs-line-mid { height: 8px; background-position: 0 0; }
.irs-line-right { height: 8px; background-position: 100% -30px; }
.irs-bar { height: 8px; top: 25px; background-position: 0 -60px; }
.irs-bar-edge { top: 25px; height: 8px; width: 11px; background-position: 0 -90px; }
.irs-shadow { height: 1px; top: 34px; background: #000; opacity: 0.15; }
.lt-ie9 .irs-shadow { filter: alpha(opacity=15); }
.irs-slider { width: 22px; height: 22px; top: 17px; background-position: 0 -120px; }
.irs-slider.state_hover, .irs-slider:hover { background-position: 0 -150px; }
.irs-min, .irs-max { color: #999; font-size: 10px; line-height: 1.333; text-shadow: none; top: 0; padding: 1px 3px; background: white; -moz-border-radius: 3px; border-radius: 3px; }
.lt-ie9 .irs-min, .lt-ie9 .irs-max { background: #ccc; }
.irs-from, .irs-to, .irs-single { color: #fff; font-size: 10px; line-height: 1.333; text-shadow: none; padding: 1px 5px; background: rgba(0,0,0,0.5);
    -moz-border-radius: 3px; border-radius: 3px; }
.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single { background: #999; }
.irs-grid-pol { background: #99a4ac; }
.irs-grid-text { color: #99a4ac; }
.irs-disabled {  }

.vitrina{ opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; transition: 1s ease; -webkit-transition: 1s ease; -moz-transition: 1s ease;}
.vitrina:hover{ opacity: 0.8; -webkit-opacity: 0.8; -moz-opacity: 0.8; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}
.pixgal{ position: relative; opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease;}
.pixgal:hover{ -webkit-transform:scale(1.05,1.05); transform:scale(1.05,1.05); -moz-transform:scale(1.05,1.05); opacity: 1; -webkit-opacity: 1; -moz-opacity: 1;}
.vitrina_contn { float: left; position:relative; overflow: hidden; }
.vitrina_pictr { width: auto; height : auto; width: 100%;}
.vitrina_title { font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; z-index:1; position: absolute; left: 50%; transform: translate(-50%,-50%); text-decoration: none; color:black;}
.vitrina_text { font-family: "trebuchet ms", "candara", sans-serif; z-index:1; text-decoration: none; text-align: justify; margin: 20px;}
@media only screen and (max-width: 1280px) { .vitrina_text {zoom:1.4;} }

#fader {-webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s;}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-o-keyframes fadein { from { opacity: 0; } to  { opacity: 1; } }

/* youtube scaler */
.video-container { position:relative; padding-bottom:56.25%;  height:0; overflow:hidden; }
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }
.sliderfromleft { overflow: hidden; right: -85px; position: absolute; transition: right 0.5s ease; }
.sliderfromleft:hover {	right: 0px; }

/* μενού φίλτρων PC και Mobile */
@media only screen and (max-width: 1280px) {
	.filters { zoom:1.2; font-size:12px; margin: auto; width: 90.5%; background-color: #eaeaea; margin-left: 4%;}
	.filters div { margin-left: 0px; }
	.filters ul { list-style-type: none; margin: 0; padding: 0;}
	.filters li { margin-left:10px; padding-top:8px;}
	.filters ul ul { margin-left:-10px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
	.filters ul ul li:hover {background-color: #ddd;}
	.filters ul ul ul li {margin-left: 0px; background-color: #f3f3f3; padding-bottom: 25px;}
	.filters ul ul ul li:hover {background-color: #f3f3f3;}
	.filters input[type=checkbox] {display: none;}
	.filters input[type=checkbox] ~ ul {
		margin-top:4px;
		max-height: 0px;
		opacity: 0;
		overflow: hidden;
		white-space:nowrap;
		-webkit-transition:all .2s ease;
		-moz-transition:all .2s ease;
		-o-transition:all .2s ease;
		transition:all .2s ease;
	}
	.filters input[type=checkbox]:checked ~ ul { max-height: 100%; opacity: 1; }
	.filters input[type=checkbox] + label:before {
		transform-origin 55% 50%;
		right:calc(8% - 10px);
		content: '';
		transform: rotate(135deg);
		border: solid grey;
		border-width: 0 3px 3px 0;
		display: inline-block;
		padding: 3px;
		-webkit-transition:all .2s ease;
		-moz-transition:all .2s ease;
		-o-transition:all .2s ease;
		transition:all .2s ease;
		position: absolute;
		margin-top: 1px;
	}
	.filters input[type=checkbox]:checked + label:before { border: solid #ccc; border-width: 0 3px 3px 0; transform: rotate(45deg); }
}
@media only screen and (min-width: 1281px) {
	.filters { font-size:12px; position:relative; float: left; margin: 20px; width: 220px;}
	.filters ul { list-style-type: none; margin: 0; padding-top: 5px; }
	.filters li { min-width:230px; max-width:230px;}
	.filters ul ul ul li { padding-bottom: 25px; }
	.filters input[type=checkbox] { display: none; }
	.filters input[type=checkbox]:checked ~ ul {
		margin-top:4px;
		max-height: 0px;
		opacity: 0;
		overflow: hidden;
		white-space:nowrap;
		-webkit-transition:all .2s ease;
		-moz-transition:all .2s ease;
		-o-transition:all .2s ease;
		transition:all .2s ease;
	}
	.filters input[type=checkbox] ~ ul { max-height: 1000px; opacity: 1; }
	.filters input[type=checkbox] + label:before {
		transform-origin 55% 50%;
		margin-left:217px;
		content: '';
		transform: rotate(45deg);
		border: solid #ccc;
		border-width: 0 3px 3px 0;
		display: inline-block;
		padding: 3px;
		-webkit-transition:all .2s ease;
		-moz-transition:all .2s ease;
		-o-transition:all .2s ease;
		transition:all .2s ease;
		position: absolute;
		margin-top: 1px;
	}
	.filters input[type=checkbox]:checked + label:before { border: solid grey; border-width: 0 3px 3px 0; transform: rotate(135deg); }
 }

::placeholder { color: #bbb; opacity: 1; }
:-ms-input-placeholder { color: #bbb; }
::-ms-input-placeholder { color: #bbb; }
/* back animated button */
.btn-class{
	display: inline-block; border:1px solid #949494; border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; vertical-align: middle; width: 10px; height: 12px; padding: 5px 5px; box-shadow: inset 0 1px 0 0 #E0E0E0,inset 0 -1px 0 0 #6B7782,0 0 0 1px #CCD4EB,0 2px 4px 0 #D4D4D4; -moz-box-shadow: inset 0 1px 0 0 #E0E0E0,inset 0 -1px 0 0 #6B7782,0 0 0 1px #CCD4EB,0 2px 4px 0 #D4D4D4;
	-webkit-box-shadow: inset 0 1px 0 0 #E0E0E0,inset 0 -1px 0 0 #6B7782,0 0 0 1px #CCD4EB,0 2px 4px 0 #D4D4D4;	background-color: #FCFCFC;
}
.btn-class:before {	transform-origin 55% 50%; margin-left:2px; content: '';	transform: rotate(135deg); border: solid #120087; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; -webkit-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; transition:all .2s ease; position: absolute; margin-top: 1px; display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0) rotate(135deg); transform: perspective(1px) translateZ(0) rotate(135deg); box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.btn-class:hover, .btn-class:active { border:1px solid #960000;	color: #3d729a;	box-shadow: inset 0 1px 0 0 #FFBCBA,inset 0 -1px 0 0 #E3776B,inset 0 0 0 1px #FCB8B8; -moz-box-shadow: inset 0 1px 0 0 #FFBCBA,inset 0 -1px 0 0 #E3776B,inset 0 0 0 1px #FCB8B8; -webkit-box-shadow: inset 0 1px 0 0 #FFBCBA,inset 0 -1px 0 0 #E3776B,inset 0 0 0 1px #FCB8B8; background-color: #F2F2F2;
}
.btn-class:hover::before { transform-origin 55% 50%; margin-left:2px; content: ''; border: solid #A32E45; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; -webkit-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; transition:all .2s ease; position: absolute; margin-top: 1px; transform: rotate(135deg); -webkit-animation-name: hvr-wobble-horizontal; animation-name: hvr-wobble-horizontal; -webkit-animation-duration: 1s;	animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;
}
/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
	16.65% {-webkit-transform: translateX(5px) rotate(135deg); transform: translateX(5px) rotate(135deg);}
	33.3% {-webkit-transform: translateX(-4px) rotate(135deg); transform: translateX(-4px) rotate(135deg);}
	49.95% {-webkit-transform: translateX(3px) rotate(135deg); transform: translateX(3px) rotate(135deg);}
	66.6% {-webkit-transform: translateX(-2px) rotate(135deg); transform: translateX(-2px) rotate(135deg);}
	83.25% {-webkit-transform: translateX(1px) rotate(135deg); transform: translateX(1px) rotate(135deg);}
	100% {-webkit-transform: translateX(0) rotate(135deg); transform: translateX(0) rotate(135deg);}
}
@keyframes hvr-wobble-horizontal {
	16.65% {-webkit-transform: translateX(5px) rotate(135deg); transform: translateX(5px) rotate(135deg);}
	33.3% {-webkit-transform: translateX(-4px) rotate(135deg); transform: translateX(-4px) rotate(135deg);}
	49.95% {-webkit-transform: translateX(3px) rotate(135deg); transform: translateX(3px) rotate(135deg);}
	66.6% {-webkit-transform: translateX(-2px) rotate(135deg); transform: translateX(-2px) rotate(135deg);}
	83.25% {-webkit-transform: translateX(1px) rotate(135deg); transform: translateX(1px) rotate(135deg);}
	100% {-webkit-transform: translateX(0) rotate(135deg); transform: translateX(0) rotate(135deg);}
}
.textpreview p { margin-bottom: 0; }
.textpreview li {margin-left: 1em; }

.whiteboxed { border:solid 1px #aaa;padding:15px; background: #fafafa; margin-top:10px; }
.containerbut { display: block; position: relative; padding-left: 35px; margin-right: 12px;	cursor: pointer; font-size: 16px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.containerbut input { position: absolute; opacity: 0; cursor: pointer; }
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #ddd; border-radius: 20%; }
.containerbut:hover { color: orange; }
.containerbut:hover input ~ .checkmark { background-color: orange; }
.containerbut input:checked ~ .checkmark { background-color: orange; }
.checkmark:after { content: ""; position: absolute; display: none; }
.containerbut input:checked ~ .checkmark:after { display: block; }
.containerbut .checkmark:after { top: 9px;	left: 9px; width: 8px; height: 8px; border-radius: 20%; background: white; }

.progresscontainer { display:flex; padding-top:10px; justify-content:center; width:100%;}
.progressbar li { min-width:220px; list-style-type:none; width:50%; float:left; font-size:12px; position:relative; text-align:center;color:#bbb; }
.progressbar li:before { width:15px; height:15px; content:" "; line-height:15px; border:6px solid #bbb; display:block; text-align:center; margin:0 auto 10px auto; border-radius:50%; background-color: white;}
.progressbar li:after { width:calc(100% - 26px); height:6px; content:''; position:absolute; background-color: #bbb; top:10px; left:-50%; margin-left:13px;}
.progressbar li:first-child:after { content: none; }
.progressbar li.active { color:green; }
.progressbar li.active:before { border-color:#55b776; }
.progressbar li.active:after { background-color:#55b776; }