@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,600italic,700,700italic&subset=latin,greek,greek-ext);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, 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;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}


#elm {width:100%;margin:0 auto;}
#elm p {padding:0 0 0 0;margin:0 0 0 0;font-size:12px;line-height:22px;color:#fff;}
#elm p strong {font-weight:700;}
#elm h2 {font-size:24px;background:none;padding:10px 0 10px 0;font-weight:700;border:none;}
#elm h3 {font-size:22px;background:none;padding:10px 0 10px 0;font-weight:700;border:none;}
#elm h4 {font-size:20px;background:none;padding:10px 0 10px 0;font-weight:700;border:none;}
#elm h5 {font-size:18px;background:none;padding:10px 0 10px 0;font-weight:700;border:none;}
#elm {margin-top:20px;}
#elm p a {color:#ED1C24;}
#elm p a:hover {color:#000;}

h2 {font-size:24px;color:#fff;padding:0px 0 10px 0;border-bottom:2px solid #fff;font-weight:400;margin-bottom:10px;}
h4 {font-size:34px;color:#000;padding:10px 0;font-weight:700;}
h5 {font-size:18px;color:#000;padding:10px 0;font-weight:700;}

a {text-decoration:none;}
strong {font-weight:700;}

html, body { background:#252525;font-family: 'Open Sans', sans-serif!important;	PADDING:0 0 0 0;	margin:0 0 0 0;	height:100%; width:100%;  }
.wrap      { margin: 0px; padding: 0px; padding-right:200px;  background: #fff;  }
.innerwrap {width:930px;margin:0 auto;}
.main      { margin: 0 -200px 0 auto; width: 100%; float:right;background: #252525;color:#fff;  }
.sidebar   { width: 200px; position:fixed;top:0;left:0; height:100%; background: #000;color:#fff; }
.clear {clear:both}
#top {background:#363636;padding:10px 0 10px 0;}
#heading {height:300px;width:100%;overflow:hidden;position:relative;}
#headingtext {position:absolute;top:36%;left:0;width:100%;}
#headingtext p {text-align:center;font-size:18px;font-weight:700;color:#fff;width:660px;margin:0 auto;font-style: italic;line-height:26px;text-shadow: 0px -1px 1px rgba(0, 0, 0, 1);}
#social {width:101px;float:right;}
#lng {font-size:12px;color:#fff;width:50px;float:right;padding-top:8px;margin-left:15px;}
#lng a {font-size:12px;color:#878787;}
#lng a:hover {font-size:12px;color:#fff;}
#fb {display:block;width:27px;height:27px;float:left;background:url(../img/fb.png) no-repeat 0 0;margin-right:10px;}
#fb:hover {display:block;width:27px;height:27px;float:left;background:url(../img/fb.png) no-repeat 0 -27px;margin-right:10px;}

#tw {display:block;width:27px;height:27px;float:left;background:url(../img/tw.png) no-repeat 0 0;margin-right:10px;}
#tw:hover {display:block;width:27px;height:27px;float:left;background:url(../img/tw.png) no-repeat 0 -27px;margin-right:10px;}

#gg {display:block;width:27px;height:27px;float:left;background:url(../img/gg.png) no-repeat 0 0;}
#gg:hover {display:block;width:27px;height:27px;float:left;background:url(../img/gg.png) no-repeat 0 -27px;}

#logo {width:130px;height:115px;margin:61px 0 50px 15px;}
#men {padding-left:30px;}
#men a {display:block;font-size:12px;color:#fff;width:100%;padding:7px 0 7px 0;}
#men a:hover {display:block;font-size:12px;color:#ccc;width:100%;}
#men a.anameno {display:block;font-size:12px;color:#686868;width:100%;}
.line {width:29px;height:5px;background:url(../img/line.png) no-repeat 0 0;margin-bottom:11px;}
#men p {color:#fff;font-size:12px;line-height:20px;}

#botstuff {position:absolute;bottom:25px;left:10px;}
#copy {font-size:11px;color:#fff;margin-bottom:12px;}
#sign {font-size:11px;color:#fff;}
#sign a {color:#fff;}
#sign a:hover {color:#878787;}

#content {background:#363636;padding:40px 0 40px 0;}
#contentfront {background:#363636;padding:40px 0 0px 0;}
#contentmesa {background:#363636;padding:0px 0 0px 0;}

#eshop {background:#252525;padding:25px 0 40px 0;width:100%;}
#eshoplabel {max-width:956px;margin:0 auto;background:url(../img/eshoplabel.jpg) no-repeat 0 0;padding:45px 0;}


#enter {font-size:18px;color:#fff;border:1px solid #fff;padding:10px 50px 12px 25px;background:url(../img/lnk.png) no-repeat 80px 7px;float:right;margin-top:20px;margin-right:45px;}
#enter:hover {background:#878787 url(../img/lnk.png) no-repeat 80px 7px;border:1px solid #666;color:#000;}


#bioleft {width:130px;float:left;}
#bioleft img {margin-top:40px;}
#bioright {width:800px;float:left;padding:10px 0 10px 0;}

#contleft {width:260px;float:left;}
#contright {width:640px;float:left;padding:0px 0 10px 0;}

#hotel {width:100%;padding:25px 0 25px;text-align:center;}
#hotel:hover {background:#252525}
#commercial {width:100%;padding:25px 0 25px;text-align:center;}
#commercial:hover {background:#252525}
#house {width:100%;padding:25px 0 25px;text-align:center;}
#house:hover {background:#252525}

#epikefalida {width:100%;padding:25px 0 25px;text-align:center;}
#periexomeno {width:100%;padding:0px 0 0px 0;}


.row {width:100%;text-align:center;display:block;}
.innerwrapdumm {width:100%;padding:25px 0 25px 0;}


.innerwrap2 {width:960px;margin:0 auto;}
.innerwrapshow {width:960px;margin:0 auto;}
.imglist {width:95%;float:left;margin:0px 20px 0px 0;height:186px;overflow:hidden;}

.imglistshow {width:30%;float:left;margin:0px 20px 0px 0;height:186px;overflow:hidden;}
.imglistshow img {width:100%;}

div.imglistshow{
	position:relative; /* important(so we can absolutely position the description div */ 
}

div.imglist{
	position:relative; /* important(so we can absolutely position the description div */ 
}

div.description{
	position:absolute; /* absolute position (so we can position it where we want)*/
	bottom:0px; /* position will be on bottom */
	left:0px;
	display:none; /* hide it */
	/* styling bellow */
	background-color:black;
	font-family: 'Open Sans';
	font-size:15px;
	color:white;
	width:100%;
}
div.description_content{
	padding:15px 0 15px 15px;
	font-size:14px;
	text-align:left;
}
div.description_content a {color:#fff;}
div.description_content a:hover {color:#ccc;}



.currentt {background:url(../img/graybullet.png) no-repeat 7px 10px;padding:10px;font-size:10px;color:#000;color:#999999;}
.paginate {background:url(../img/whitebullet.png) no-repeat 7px 10px;padding:10px;font-size:10px;color:#fff;color:#fff;}
.paginate:hover {background:url(../img/graybullet.png) no-repeat 7px 10px;padding:10px;font-size:10px;color:#000;color:#999999;}
.prev2 {display:none;}
.inactiveprev2 {display:none;}
.next2 {display:none;}
.inactivenext2 {display:none;}
#ipinakida {float:left;width:350px;font-size:18px;color:#fff;margin-left:45px;}
#showLeft {display:none;}
#logomob {display:none;}


@media only screen and (min-width: 831px) and (max-width: 1217px)
{
.main      { margin: 0 -200px 0 auto; width: 100%; float:right;background: #252525;color:#fff;  }

#heading {width:100%!important;margin:0 auto;}
.innerwrap {width:530px!important;margin:0 auto;}
.innerwrap2 {width:560px!important;margin:0 auto;}

#eshop {background:#252525;padding:25px 0 40px 0;width:100%;}
#eshoplabel {margin:0 auto;background:url(../img/eshoplabel.jpg) no-repeat 0 0;padding:45px;}

#bioleft {width:130px;float:left;}
#bioleft img {margin-top:40px;}
#bioright {width:370px;float:left;padding:10px 0 10px 0;}
#headingtext p {text-align:center;font-size:18px;font-weight:700;color:#fff;width:560px;margin:0 auto;font-style: italic;line-height:26px;text-shadow: 0px -1px 1px rgba(0, 0, 0, 1);}

#contleft {width:150px;float:left;}
#contright {width:350px;float:left;padding:0px 0 10px 0;}

}


@media only screen and (min-width: 632px) and (max-width: 830px)
{
.main      { margin: 0 -200px 0 auto; width: 100%; float:right;background: #252525;color:#fff;  }

#heading {width:100%!important;margin:0 auto;}
.innerwrap {width:330px!important;margin:0 auto;}
.innerwrap2 {width:360px!important;margin:0 auto;}

#eshop {background:#252525;padding:25px 0 40px 0;width:100%;}
#eshoplabel {margin:0 auto;background:url(../img/eshoplabel.jpg) repeat 0 0;padding:45px;}

#bioleft {width:130px;float:left;}
#bioleft img {margin-top:40px;}
#bioright {width:370px;float:left;padding:10px 0 10px 0;}
#headingtext p {text-align:center;font-size:15px;font-weight:700;color:#fff;width:260px;margin:0 auto;font-style: italic;line-height:22px;text-shadow: 0px -1px 1px rgba(0, 0, 0, 1);}
#headingtext {position:absolute;top:9%;left:0;width:100%;}
#contleft {width:150px;float:none;}
#contright {width:350px;float:none;padding:40px 0 10px 0;}
#enter {font-size:18px;color:#fff;border:1px solid #fff;padding:10px 50px 12px 25px;background:url(../img/lnk.png) no-repeat 80px 7px;float:none;margin-top:50px;}
#enter:hover {background:#878787 url(../img/lnk.png) no-repeat 80px 7px;border:1px solid #666;color:#000;}
#ipinakida {float:none!important;width:350px;font-size:18px;color:#fff;margin-bottom:30px;}
}

@media only screen and (min-width: 270px) and (max-width: 631px)
{
.wrap      { margin: 0px; padding: 0px; padding-right:0px;  background: #363636;  }
.main      { margin: 0 0px 0 auto; width: 100%; float:none;background: #252525;color:#fff;  }

.sidebar   { display:none; }
#social {width:101px;float:none;margin:0 auto 0 auto;}
#lng {font-size:12px;color:#fff;width:50px;float:none;margin:0 auto 20px auto;padding-top:8px;}

#logomob {display:block;width:100px;margin:0 auto 20px auto;text-align:center;}
#logomob img {width:100%;}
#heading {width:100%!important;margin:0 auto;}
.innerwrap {width:330px!important;margin:0 auto;}
.innerwrap2 {width:360px!important;margin:0 auto;}

#eshop {background:#252525;padding:25px 0 40px 0;width:100%;}
#eshoplabel {margin:0 auto;background:url(../img/eshoplabel.jpg) repeat 0 0;padding:45px;}

#bioleft {width:130px;float:left;}
#bioleft img {margin-top:40px;}
#bioright {width:370px;float:left;padding:10px 0 10px 0;}
#headingtext p {text-align:center;font-size:15px;font-weight:700;color:#fff;width:260px;margin:0 auto;font-style: italic;line-height:22px;text-shadow: 0px -1px 1px rgba(0, 0, 0, 1);}
#headingtext {position:absolute;top:9%;left:0;width:100%;}
#contleft {width:150px;float:none;}
#contright {width:350px;float:none;padding:40px 0 10px 0;}
#enter {font-size:18px;color:#fff;border:1px solid #fff;padding:10px 50px 12px 25px;background:url(../img/lnk.png) no-repeat 80px 7px;float:none;margin-top:50px;}
#enter:hover {background:#878787 url(../img/lnk.png) no-repeat 80px 7px;border:1px solid #666;color:#000;}
#ipinakida {float:none!important;width:350px;font-size:18px;color:#fff;margin-bottom:30px;}
#men {padding-top:30px;}
#showLeft{
	border: none;
	background: #000;
	color: #fff;
	padding: 7px 10px;
	display: block;
	cursor: pointer;
	margin: 10px 0;
	font-size: 11px;
	width:70px;
	float:right;
}

#showLeft:hover {
	background: #258ecd;
}

#showLeft.active {
	background: #0d77b6;
}

#showLeft.disabled {
	background: #aaa;
	pointer-events: none;
}









}




@media only screen and (min-width: 1000px) and (max-width: 1217px)
{
.innerwrapshow {width:800px!important;margin:0 auto;}
.imglistshow {width:30%;float:left;margin:0px 20px 0px 0;height:150px;overflow:hidden;}
.imglistshow img {width:100%;}
}

@media only screen and (min-width: 832px) and (max-width: 999px)
{
.innerwrapshow {width:600px!important;margin:0 auto;}
.imglistshow {width:30%;float:left;margin:0px 20px 0px 0;height:110px;overflow:hidden;}
.imglistshow img {width:100%;}
}

@media only screen and (min-width: 700px) and (max-width: 831px)
{
.innerwrapshow {width:450px!important;margin:0 auto;}
.imglistshow {width:30%;float:left;margin:0px 10px 0px 0;height:110px;overflow:hidden;}
.imglistshow img {width:100%;}
}


@media only screen and (min-width: 600px) and (max-width: 699px)
{
.innerwrapshow {width:400px!important;margin:0 auto;}
.imglistshow {width:90%;float:none;margin:0px auto 20px auto;height:180px;overflow:hidden;}
.imglistshow img {width:100%;}
}



@media only screen and (min-width: 270px) and (max-width: 599px)
{
.innerwrapshow {width:280px!important;margin:0 auto;}
.imglistshow {width:90%;float:none;margin:0px auto 20px auto;height:140px;overflow:hidden;}
.imglistshow img {width:100%;}
}