@charset "utf-8";
/* CSS Document @ thezyme.gr */

@font-face {
  font-family: 'Alkes-Regular';
  src: url('/sys/webFonts/Alkes-Regular.woff2') format('woff2'), url('/sys/webFonts/Alkes-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Alkes-Black';
  src: url('/sys/webFonts/Alkes-Black.woff2') format('woff2'), url('/sys/webFonts/Alkes-Black.woff') format('woff');
}
@font-face {
  font-family: 'Alkes-Thin';
  src: url('/sys/webFonts/Alkes-Thin.woff2') format('woff2'), url('/sys/webFonts/Alkes-Thin.woff') format('woff');
}
@font-face {
  font-family: 'Alkes-RegularItalic';
  src: url('/sys/webFonts/Alkes-RegularItalic.woff2') format('woff2'), url('/sys/webFonts/Alkes-RegularItalic.woff') format('woff');
}
@font-face {
  font-family: 'Alkes-Bold';
  src: url('/sys/webFonts/Alkes-Bold.woff2') format('woff2'), url('/sys/webFonts/Alkes-Bold.woff') format('woff');
}

html {display:block; position:relative; margin:0; height:100%; font-family: "Alkes-Regular", Georgia, "Times New Roman", Times, serif; font-size:13px; text-align:center;}
body { margin:120px 0 0 0; padding:0 10px; text-align:center; background-color:#fff; font-size: 16px; color: #000; font-family: "Alkes-Regular", Georgia, "Times New Roman", Times, serif; font-style:normal; font-weight: normal; -webkit-font-smoothing: antialiased;}
a, img{color:#000; border:none; outline: none; text-decoration:none; -webkit-transition: all 500ms ease; transition: all 500ms ease;}
a:hover, h3:hover, a.on {color:#f60;}
a.on div {font-family:"Alkes-NormalItalic", Georgia, "Times New Roman", Times, serif;  font-weight:normal; font-style: italic; font-size:14px;}
a.on div h2 {font-family:"Alkes-Bold", Georgia, "Times New Roman", Times, serif;  font-weight:normal; font-style:normal; font-size:16px; margin-bottom:5px;}
div {position: relative; overflow: hidden;}
* b, * strong {font-family:"Alkes-Bold", Georgia, "Times New Roman", Times, serif;  font-weight:normal; font-style:normal;}
* i {font-family:"Alkes-RegularItalic", Georgia, "Times New Roman", Times, serif; font-weight: normal; font-style:italic;}

/* headers */
h1{font-size:16px; margin:0; padding:0; font-weight:normal;}
h2{margin:0; padding:0; font-size:11px; font-weight:bold;}
h3{display: block; float: left; clear: both; margin:0 0 5px 0; padding:0; font-size:12px; font-family:"Alkes-Black", Georgia, "Times New Roman", Times, serif; font-weight:800; font-style:normal; cursor: pointer;}
h4{font-size:35px; margin:10px 0; font-weight:normal;}
h5{font-size:22px; margin:2px 0; font-family:"Alkes-Black", Georgia, "Times New Roman", Times, serif; font-weight:normal; font-style:normal;}
h6{display:block; height:20px; padding:0; font-family:"Alkes-RegularItalic", Georgia, "Times New Roman", Times, serif; font-size: 14px; color:#999; margin: 5px 0 15px 0; font-weight: normal; font-style:italic; overflow:visible; line-height:0.9em;}

#dvProject h4{font-size:56px; font-family:"Alkes-RegularItalic", Georgia, "Times New Roman", Times, serif; font-weight:normal; font-style:italic;}

.mPath{color:#f60; margin-bottom:5px;}
.mPath a{display: block; float: left; background: url(img/arrowSmall_L.png) no-repeat 0 50%; padding-left:10px; color: #f60;}
.mPath a:hover{ color:#000; background-image:url(img/arrowSmall_L_hover.png);}
.mPath div{float: left;}
.mPath a{margin-right: 20px;}
.mPath>div.sp, #breadcrumb>div.sp{margin:0 0 0 -12px;}


/******* GENERAL ****/

#more {display: none; -webkit-transition: all 500ms ease; transition: all 500ms ease;}
button#myBtn {border: none; background-color: #f60; border-radius: 6px; color: #fff; float: right; cursor:pointer; width:90px; font-family: "Alkes-RegularItalic", Georgia, "Times New Roman", Times, serif; font-style:normal; -webkit-transition: all 500ms ease; transition: all 500ms ease;}
button#myBtn:hover {font-family: "Alkes-Bold", Georgia, "Times New Roman", Times, serif; font-style:normal;}
	
/* blogItems in latest and archive */

#blogItems a{display: block; float: left; color:#000; text-decoration:none;}
#blogItems a:hover {color:#f60;}
#blogItems a>img { display:block; float:left; aspect-ratio: 150 / 95; width: calc(50% - 12px); margin: 5px 12px 0 0;}
#blogItems a div {display:block; float:left; width: 50%;}


#blogItems div+div  {display:flex; width: 100%; max-width: 1000px; flex-direction: row; flex-wrap: wrap;}
img#bLogo {display: block; margin-top: 110px;}


#newClients {display: flex; width: 100%; max-width: 1000px; flex-direction: row; flex-wrap: wrap; text-align:left;}
#oneI {font-size:16px; border-bottom:#666 1px dashed;}
#letter     {display:block; float:left; width:calc(30% - 10px); margin:0 10px 0 0; font-size:52px; height: 75px; line-height: 1em; overflow:visible;}
#contLetter {display:block; float:left; width:70%; font-size:17px; margin-bottom:20px;}
#contLetter p {margin:0 0 10px 0; padding:0; line-height:1.2em;}
#contLetter p.art {color:#0cf;}

/*********************************************** ARCHIVE **********************************************/
/* view modes */
div#viewModes>div{width:15px; height: 16px; cursor:pointer; float: left;}   
div#viewModes>div+div{margin-left: 3px;}
#modeList{background: url(img/list_mode.png) no-repeat;}            
#modeList:hover, #modeList.on{background-image:url(img/list_mode_hover.png);}
#modeThumbs{background: url(img/thumbs_mode.png) no-repeat;}   
#modeThumbs:hover, #modeThumbs.on{background-image:url(img/thumbs_mode_hover.png);}

div#projects{ width:100%; max-width:1000px; min-height:200px; z-index:500; margin-bottom: 25px;}
div#projects>a{display:block; position:relative; overflow:hidden; float:left; aspect-ratio: 1 / 1;}
div#projects>a>b{position:absolute; display:none; left:0; bottom:0; width:100%; height:50%; background-color:#000;}
div#projects>a>div{left:0; bottom:0; width:100%; font-size:14px; word-break: break-word; width:calc(100% - 12px);}
div#projects img{ width:100%; height:100%;}



/* Thumbs Mode */
div.projectThumbs>a>div{position:absolute; display:none; padding:2px 6px; height:42%; color:#fff; background-color: transparent; line-height: 1.2em;}
div.projectThumbs>a>div>b{display: none;}

/* List Mode */
din#logCont {display:flex; width:100%;}
div.projectList>a>div{position:relative; display:block; height:117px; padding:6px; font-family:"Alkes-Regular", Georgia, "Times New Roman", Times, serif; color:#000;}
div.projectList h2{font-size:16px; line-height:1em; margin:0 0 6px 0; font-family:"Alkes-Black", Georgia, "Times New Roman", Times, serif; font-style: normal; font-weight: normal;}
div.projectList>a>div>b{display: block; font-weight: normal;}
div.projectList>a>img{position:absolute; display:none; left:0; top:0; height:200px; width:200px; padding:0; }	
div.projectList>a.vis>img{display:block; opacity:1; filter:alpha(opacity=100); }
	
#Main {width: 100%; max-width:1000px; margin:0 auto; text-align:left; background-color:#ffffff; padding:0 0px 0 0px;}
#mainText{ font-family:"Alkes-Regular", Georgia, "Times New Roman", Times, serif; font-weight:normal; font-style:normal; line-height:1.4em; }
#footer {margin-top: 20px; border-bottom: 18px solid #000; padding-bottom: 20px;}
#mainText>div>div>div>a, #mainText>div>div>div>p>a, #footer a, #more a {color:#000; text-decoration:none; background:url(img/velos-R.svg) no-repeat; padding-left:14px; background-position:0 50%; background-size:auto 55%; padding-right:10px;  -webkit-transition: all 500ms ease; transition: all 500ms ease;}
#mainText>div>div>div>a:hover, #mainText>div>div>div>p>a:hover, #footer a:hover, #more a:hover {color:#f60; text-decoration:none; background-image:url(img/velos-Rh.svg); padding:0 24px;}
#mainText a#gotop{color:#000; text-decoration:none; background-image:url(img/linkArrow_T.png); background-repeat:no-repeat; padding-left:15px; background-position:0 50%; padding-right:10px; }
#mainText a#gotop:hover {color:#f60; text-decoration:none; background-image:url(img/linkArrow_T_hover.png); background-repeat:no-repeat;}

.homeText{border-top: 9px solid #000; padding-top:20px;}
.homeText>div{margin-bottom: 5px; font-size:28px; line-height:1.5em;}
.homeText>div>h1{display: none;}
.homeText>div+div, .colapsed>div{font-size:17px; line-height:1.4em;}
.homeText>div+div>h1{display: block;	font-size:20px; margin-bottom:8px; font-family: "Alkes-Bold", Georgia, "Times New Roman", Times, serif; font-weight:normal;}
.homeText>div>div{padding-bottom: 0px; clear: both;}
.colapsed>div>h1{display:block; font-size:20px; __margin-bottom:8px; background:url(img/velos-R.svg) no-repeat; background-position:0; background-size:14px; padding:0 16px; cursor: pointer; float: left; clear: both; font-family: "Alkes-Bold", Georgia, "Times New Roman", Times, serif; font-weight:normal; -webkit-transition: all 500ms ease; transition: all 500ms ease;}
.colapsed>div>h1:hover {color:#f60; background:url(img/velos-Rh.svg) no-repeat; background-position:0; background-size:14px; padding:0 28px;}
.colapsed>div>div{display: none;}


#news p{margin:0; padding:0; font-size:17px;}
#news p a, #more a  {margin-bottom: -5px; display: block; font-family:"Alkes-RegularItalic", Georgia, "Times New Roman", Times, serif;}
.prologos { font-size:20px; line-height:1.5em; }

#mHolder {top:0; height:80px; width: calc(100% - 20px); max-width:1000px; margin-bottom:20px; __background:#fff; z-index:800; overflow:visible; position:fixed;}
#dvNav {position:absolute; display:none; overflow:hidden; top:0px; left:0; width:100%; border-bottom:2px #000 dashed; background:#fff; z-index:918; opacity:0.95; filter:alpha(opacity=95); padding: 0 0 20px 0;}

div.mCol em{color:#999; font-family:"Alkes-RegularItalic", Georgia, "Times New Roman", Times, serif; display:block; clear:both;}
div.mCol h3{font-size:14px; -webkit-transition: all 500ms ease; transition: all 500ms ease;}
div.mCol>div{font-family:"Alkes-Black",Georgia,"Times New Roman",Times,serif; font-size:14px; font-style:normal; font-weight:800;}
div.mCol>div+div{margin-top:15px;}
div.mCol a{display:block; float:left; clear:both;  margin:0 0 8px 0;}
div.mCol>a{margin:0 0 5px 0; font-family:"Alkes-Black",Georgia,"Times New Roman",Times,serif; font-size:14px; font-style:normal; font-weight:800; } 
div.mCol>a+a{margin: 0 0 18px 0; }
div.mCol>div>a+em+a, div.mCol>div>a+a{font-family:"Alkes-Regular", Georgia, "Times New Roman", Times, serif; font-weight: normal; margin:0 0 6px 0;}

/*
#logoX {position:absolute;top:28px;left:0;display:block;z-index:901;font-weight:normal;font-size:26px; opacity:1;}
Test #logo>img:hover {content: src='sys/img/logoH.svg');}
*/
#logo {position:fixed; top:20px; display:block; z-index:750; pointer-events: none; mix-blend-mode:difference; transition:all 1500ms ease-in; width: calc(100% - 20px); max-width:1000px;}
#logo img {width:100%;}
#selectO {position:absolute; cursor: pointer; top:46px; right:0; z-index:920; font-size:18px; color:#000; padding-left:24px; background-image:url(img/plus.svg); background-repeat:no-repeat; background-position:0 60%; -webkit-transition: all 500ms ease; transition: all 500ms ease;}
#selectO:hover {color:#f60; background-image:url(img/plush.svg);}
.sOpen {background-image:url(img/plusO.svg);}
.sOpen:hover {background-image:url(img/plusOh.svg);}
#lang {position:absolute; top:16px; right:0px; z-index:919; font-size:20px; color:#000; }
#lang a {color:#000; text-decoration:none;}
#lang a:hover, #lang a:active, #lang a.on{color:#f60;}

#toHome {position:absolute; top:16px; right:172px; z-index:912; font-size:20px; color:#000; }
#toHome a {color:#000; text-decoration:none; background-image:url(img/velosL.svg); background-repeat:no-repeat; background-position:0 50%; padding-left: 20px;}
#toHome a:hover {color:#f60; background-image:url(img/velosLh.svg); padding-left: 30px;}
.disYes {display:block;}
.disNo {display:none;}

/* ---------------------- scrolling images ---------------------- */ 
/*div#slides{position: absolute; left: 0; width: 50000px;}*/
#slides div img {width:100%; max-width:1000px;}
#hello {margin-bottom:25px;}

/* image navigator */
#sliderNav{position:absolute; top:455px; right:300px; width:100px; display:block; z-index:255; padding-top:10px;}
#sliderNav>div{float:left; width:48px; height:48px; background: url(img/prev0.png) no-repeat; cursor: pointer;} #sliderNav>div+div{background-image:url(img/next0.png);}
#sliderNav>div:hover{background-image:url(img/prev1.png);}        #sliderNav>div+div:hover{background-image:url(img/next1.png);}  
#sliderNav>div.on{background-image:url(img/nextEnd0.png);}        #sliderNav>div+div.on{background-image:url(img/prevEnd0.png);}	
#sliderNav>div.on:hover {background-image:url(img/nextEnd1.png);}	#sliderNav>div+div.on:hover {background-image:url(img/prevEnd1.png);}

#titleLatestBg {position:absolute; bottom:0px; left:0px; width:100%; height:90px; display:block; z-index:224; background-color:#fff;}
.opacity1 {opacity:0; filter:alpha(opacity=0);} 
.opacity2 {opacity:0; filter:alpha(opacity=0);}
#titleLatest {position:absolute; bottom:0px; left:0px; width:99%; display:block; padding-left:1%; z-index:225;}
#title2 {float:left; padding-right:10px; color:#000;	font-family:"Alkes-Black", Georgia, "Times New Roman", Times, serif; font-weight:800; font-style:normal;}
#title2 a {color:#000; text-decoration:none; border:0;}
#title2 a:hover {color:#ff6600; text-decoration:none; border:0;}
#plain2 {float:left; color:#000;}
#plain3 {margin: 44px 2px 0 0; float:right; padding-right:0px;}
#plain3 a{color:#000; text-decoration:none; background-image:url(img/velos-R.svg); background-repeat:no-repeat; padding:0 10px; background-position:0 50%;}
#plain3 a:hover {color:#f60; text-decoration:none; background-image:url(img/velos-Rh.svg); background-repeat:no-repeat; padding:0 20px; }



/* ---------------------- Project Page ---------------------- */
.plain {font-family:"Alkes-Thin",Georgia,"Times New Roman",Times,serif; font-size:16px; margin:0 0 20px 0;}
.plain a {background:url(img/velos-R.svg) no-repeat 0 50%; padding: 0 14px; -webkit-transition: all 500ms ease; transition: all 500ms ease;}
.plain a:hover {background-image:url(img/velos-Rh.svg); padding:0 24px;}	
#blogList div.plain a { background:url(img/velos-R.svg) no-repeat 0 50%; padding: 0 0 0 14px; -webkit-transition: all 500ms ease; transition: all 500ms ease;}
#blogList div.plain a:hover {background-image:url(img/velos-Rh.svg); padding:0 0 0 24px;}	
#blogList div.plain img {width:100%; height:auto;}

/* ---------------------- Blog Page (and blog links in other pages) ---------------------- */
.titleArchive {font-size:35px; margin:10px 0 35px 0; overflow: visible;}
.socialMedia {margin-left:5px; cursor: pointer; float:right;}
.socialMedia:hover {opacity:0.50; filter:alpha(opacity=50);}
#socialDiv {display: none;}


/* ---------------------- animation 3 slides for 4 sec ---------------------- */
#imgo {position: relative; z-index: 55; width:100%; max-width:1000px; margin:0px;}
#imgo img {color: transparent; opacity: 0; z-index: 0; width: 100%; animation: imgoEx 12s linear infinite 0s; backface-visibility: hidden;}
#imgo img:not(:first-child) {position: absolute; top: 0px; left: 0px;}
#imgo img:nth-child(1) {animation-delay: 0s;}
#imgo img:nth-child(2) {animation-delay: 4s;}
#imgo img:nth-child(3) {animation-delay: 8s;}

@keyframes imgoEx {  
  0% 	{opacity: 0; animation-timing-function: ease-in;}
  8% 	{opacity: 1;}
  33% {opacity: 1; animation-timing-function: ease-out;}
  41% {opacity: 0;}
  100%{opacity: 0;}
}


/* ---------------------- animation 4 slides for 4 sec ---------------------- */
#imgo4 {position: relative; z-index: 55; width:100%; max-width:1000px; margin:0px;}
#imgo4 img {color: transparent; opacity: 0; z-index: 0; width: 100%; backface-visibility: hidden;}
#imgo4 img:not(:first-child) {position: absolute; top: 0px; left: 0px; animation-timing-function: ease-in-out;}
#imgo4 img:nth-child(1) {animation: xfade 12s -0s infinite;}
#imgo4 img:nth-child(2) {animation: xfade 12s -3s infinite;}
#imgo4 img:nth-child(3) {animation: xfade 12s -6s infinite;}
#imgo4 img:nth-child(4) {animation: xfade 12s -9s infinite;}

@keyframes xfade {
  0%  {opacity: 0;}
  8%  {opacity: 1;}
  33% {opacity: 1;}
  41% {opacity: 0;}
  100%{opacity: 0;}
}

/* ---------------------- responsive ---------------------- */


#dvNav>div {width:100%; margin-top:85px; display:flex; flex-wrap:wrap; overflow-y:auto;}
div.mCol {width:132px; display:block; padding:0 0 0 10px; margin-bottom:30px;}  /*border-left:1px #999 dashed; line-height:1.4em;*/ 
#plain3  {position: absolute; right: 0; overflow: visible;}
#mPathPrin {width:100%; max-width:1000px; margin:85px 0 5px 0; height:25px; -webkit-transition: all 500ms ease; transition: all 500ms ease;}
/*
#blogItems a{width:33%; max-width:303px;}
width: calc(100% - 20px);
*/ 

/*0-400 shows: 2 */ 
@media (min-width: 1px) {
	#title2  {font-size:20px; margin:0px 0;}
	#plain2  {font-size:12px; margin:0 0 24px 0;}
	#plain3  {font-size:12px; bottom:8px;}
	div#projects>a{width: 50% !important; max-width: 200px;}
	#blogItems a{width:100%; margin-right:0px; margin-bottom:30px; font-size:14px;}
	#oneI {width:100%; margin:0 0 20px 0; font-size:14px;}
	#dvProject h4{font-size:36px;}
	.homeText>div {font-size:20px;)
}

/* 400-500 shows: 2 */ 
@media (min-width: 400px) {
	#title2  {font-size:24px; margin:3px 0;}
	#plain2  {font-size:13px; margin:0 0 23px 0;}
	#plain3  {font-size:13px; bottom:11px;}
	div#projects>a{width: 50% !important; max-width: 250px; margin-right:0px;}
	#dvProject h4{font-size:38px;}
	.homeText>div {font-size:22px;)
}

/* 500-600 shows: 3 */ 
@media (min-width: 500px) {
	#title2  {font-size:28px; margin:6px 0;}
	#plain2  {font-size:15px; margin:0 0 21px 0;}
	#plain3  {font-size:15px; bottom:14px;}
	div#projects>a{width: 33.33% !important; max-width: 200px;}
	#blogItems a{width: calc(50% - 15px); margin-right:15px;  font-size:15px;}
	#oneI {width:calc(50% - 15px); margin:0 15px 15px 0; font-size:15px;}
	#dvProject h4{font-size:41px;}
	.homeText>div {font-size:24px;)
}

/* 600-700 shows: 3 */  
@media (min-width: 600px) {
	#title2  {font-size:33px; margin:9px 0;}
	#plain2  {font-size:17px; margin:0 0 18px 0;}
	#plain3  {font-size:15px; bottom:17px;}
	div#projects>a{width: 33.33% !important; max-width: 250px;}
	#dvProject h4{font-size:44px;}
	.homeText>div {font-size:26px;)
}

/* 700-800 shows: 4 */  
@media (min-width: 700px) {
	#title2  {font-size:36px; margin:12px 0;}
	#plain2  {font-size:18px; margin:0 0 18px 0;}
	#plain3  {font-size:16px; bottom:20px;}
	div#projects>a{width: 25% !important; max-width: 200px;}
	#dvProject h4{font-size:48px;}
	.homeText>div {font-size:28px;)
}

/* 800-900 shows: 5 */ 
@media (min-width: 800px) {
	#title2  {font-size:39px; margin:15px 0;}
	#plain2  {font-size:19px; margin:0 0 18px 0;}
	#plain3  {font-size:17px; bottom:23px;}
	div#projects>a{width: 20% !important; max-width: 250px;}
	#blogItems a{width: calc(33.3% - 20px); margin-right:20px;  font-size:16px;}
	#oneI {width:calc(33.3% - 20px); margin:0 20px 20px 0; font-size:16px;}
	#dvProject h4{font-size:52px;}
	.homeText>div {font-size:29px;)
} 

/* 900-max1000px shows: 6 */  
@media (min-width: 900px) {
	#title2  {font-size:42px; margin:18px 0;}
	#plain2  {font-size:20px; margin:0 0 18px 0;}
	#plain3  {font-size:18px; bottom:25px;} 
	div#projects>a{width: 16.66% !important; max-width: 200px;}
	#dvProject h4{font-size:56px;}
	.homeText>div {font-size:30px;)
}