@charset "UTF-8";

* {
	position: relative;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
}



:root{
	--deg: 19deg;
	--skewslice: -71deg;
	--sliceWidth: 120px;
	--sliceHeight: 400px;
	--lirotate: 18deg;
	--orange-plus-width: 163px;
	--orange-rotate: 0.5deg;
	--orange-margin-left: -74px;

	
	--my-blue:
	rgba(30,110,150,1);
	--my-blue-lighter:
	rgba(140,180,200,1);
	--my-blue-gr:
	radial-gradient(circle, rgba(30,110,150,0) 46%, rgba(30,110,150,1) 46.4%, rgba(30,110,150,1) 59%, rgba(140,180,200,1) 59.4%, rgba(140,180,200,1) 66%, rgba(140,180,200,0) 66.4%);
	--my-blue-hov:
	radial-gradient(circle,   rgba(30,110,150,0) 44%,  rgba(30,110,150,1) 44.4%,  rgba(30,110,150,1) 68%,  rgba(30,110,150,0) 68.4%);
	--my-blue-sub:
	radial-gradient(circle, rgba(30,110,150,0) 60%, rgba(30,110,150,1) 60.4%, rgba(30,110,150,1)66%, rgba(30,110,150,0)66.4%);
	--my-blue-sub-hov:
	radial-gradient(circle, rgba(140,180,200,0) 60%, rgba(140,180,200,1) 60.4%, rgba(140,180,200,1) 66%, rgba(140,180,200,0) 66.4%);
	
	--my-blue-light:
	rgba(150,170,190,1);
	--my-blue-light-lighter:
	rgba(180,200,210,1);
	--my-blue-light-gr:
	radial-gradient(circle, rgba(150,170,190,0) 46%, rgba(150,170,190,1) 46.4%, rgba(150,170,190,1) 59%, rgba(180,200,210,1) 59.4%, rgba(180,200,210,1) 66%, rgba(180,200,210,0) 66.4%);
	--my-blue-light-hov:
	radial-gradient(circle, rgba(150,170,190,0) 44%,  rgba(150,170,190,1) 44.4%, rgba(150,170,190,1) 68%, rgba(150,170,190,0) 68.4%);
	--my-blue-light-sub:
	radial-gradient(circle, rgba(150,170,190,0) 60%,  rgba(150,170,190,1) 60.4%, rgba(150,170,190,1) 68%, rgba(150,170,190,0) 66.4%);
	--my-blue-light-sub-hov:
	radial-gradient(circle, rgba(180,200,210,0) 60%, rgba(180,200,210,1) 60.4%, rgba(180,200,210,1) 66%, rgba(180,200,210,0) 66.4%);

	--my-blue-dark:
	rgba(27,72,93,1);
	--my-blue-dark-lighter:
	rgba(141,164,174,1);
	--my-blue-dark-gr:
	radial-gradient(circle, rgba(27,72,93,0) 46%, rgba(27,72,93,1) 46.4%, rgba(27,72,93,1) 59%, rgba(141,164,174,1) 59.4%, rgba(141,164,174,1) 66%, rgba(141,164,174,0) 66.4%);
	--my-blue-dark-hov:
	radial-gradient(circle, rgba(27,72,93,0) 44%, rgba(27,72,93,1) 44.4%, rgba(27,72,93,1) 68%, rgba(27,72,93,0) 68.4%);
	--my-blue-dark-sub:
	radial-gradient(circle, rgba(27,72,93,0) 60%, rgba(27,72,93,1) 60.4%, rgba(27,72,93,1)66%, rgba(27,72,93,0)66.4%);
	--my-blue-dark-sub-hov:
	radial-gradient(circle, rgba(141,164,174,0) 60%, rgba(141,164,174,1) 60.4%, rgba(141,164,174,1) 66%, rgba(141,164,174,0) 66.4%);
	
	--my-blue-grey:
	rgba(80,110,120,1);
	--my-blue-grey-lighter:
	rgba(170,180,190,1);
	--my-blue-grey-gr:
	radial-gradient(circle, rgba(80,110,120,0) 46%, rgba(80,110,120,1) 46.4%, rgba(80,110,120,1) 59%, rgba(170,180,190,1) 59.4%, rgba(170,180,190,1) 66%, rgba(170,180,190,0) 66.4%);
	--my-blue-grey-hov:
	radial-gradient(circle,  rgba(80,110,120,0) 44%,  rgba(80,110,120,1) 44.4%,  rgba(80,110,120,1) 68%,  rgba(80,110,120,0) 68.4%);
	--my-blue-grey-sub:
	radial-gradient(circle, rgba(80,110,120,0) 60%, rgba(80,110,120,1) 60.4%, rgba(80,110,120,1)66%, rgba(80,110,120,0)66.4%);
	--my-blue-grey-sub-hov:
	radial-gradient(circle, rgba(170,180,190,0) 60%, rgba(170,180,190,1) 60.4%, rgba(170,180,190,1) 66%, rgba(170,180,190,0) 66.4%);

	--my-grey:
	rgb(140,140,140);
	--my-grey-lighter:
	rgba(210,210,210,1);
	--my-grey-gr:
	radial-gradient(circle,rgba(80,110,120,0) 46%, rgba(140,140,140,1) 46.4%, rgba(140,140,140,1) 59%, rgba(210,210,210,1) 59.4%, rgba(210,210,210,1) 66%, rgba(210,210,210,0) 66.4%);
	--my-grey-hov:
	radial-gradient(circle, rgba(140,140,140, 0) 44%, rgba(140,140,140, 1) 44.4%, rgba(140,140,140, 1) 68%, rgba(140,140,140, 0) 68.4%);
	--my-grey-sub:
	radial-gradient(circle, rgba(140,140,140, 0) 60%, rgba(140,140,140, 1) 60.4%, rgba(140,140,140, 1)66%, rgba(140,140,140, 0)66.4%);
	--my-grey-sub-hov:
	radial-gradient(circle,  rgba(210,210,210,0) 60%, rgba(210,210,210,1) 60.4%, rgba(210,210,210,1) 66%, rgba(210,210,210,0) 66.4%);
	
	--my-yellow:
	rgba(200,190,130,1);
	--my-yellow-lighter:
	rgba(200,200,160,1);
	--my-yellow-gr:
	radial-gradient(circle, rgba(200,190,130,0) 46%, rgba(200,190,130,1) 46.4%, rgba(200,190,130,1) 59%, rgba(200,200,160,1) 59.4%, rgba(200,200,160,1) 66%, rgba(200,200,160,0) 66.4%);
	--my-yellow-hov:
	radial-gradient(circle, rgba(200,190,130,0) 44%,  rgba(200,190,130,1) 44.4%, rgba(200,190,130,1) 68%, rgba(200,190,130,0) 68.4%);
	--my-yellow-sub:
	radial-gradient(circle, rgba(200,190,130,0) 60%,  rgba(200,190,130,1) 60.4%, rgba(200,190,130,1) 66%, rgba(200,190,130,0) 66.4%);
	--my-yellow-sub-hov:
	radial-gradient(circle, rgba(200,200,160,0) 60%, rgba(200,200,160,1) 60.4%, rgba(200,200,160,1) 66%, rgba(200,200,160,0) 66.4%);
	
	--my-orange:
	rgba(220,100,70,1);
	--my-orange-lighter:
	rgba(230,150,130,1);
	--my-orange-gr:
	radial-gradient(circle, rgba(220,100,70,0) 46%, rgba(220,100,70,1) 46.4%, rgba(220,100,70,1) 59%, rgba(230,150,130,1) 59.4%, rgba(230,150,130,1) 66%, rgba(230,150,130,0) 66.4%);
	--my-orange-hov:
	radial-gradient(circle,  rgba(220,100,70,0) 44%,   rgba(220,100,70,1) 44.4%,  rgba(220,100,70,1) 68%,  rgba(220,100,70,0) 68.4%);
	--my-orange-sub:
	radial-gradient(circle, rgba(220,100,70, 0) 60%, rgba(220,100,70, 1) 60.4%, rgba(220,100,70, 1)66%, rgba(220,100,70, 0)66.4%);
	--my-orange-sub-hov:
	radial-gradient(circle,  rgba(230,150,130,0) 60%, rgba(230,150,130,1) 60.4%, rgba(230,150,130,1) 66%, rgba(230,150,130,0) 66.4%);
}
@media only screen and (min-width:720px) {
	.orange{
		transform: rotate(var(--orange-rotate));
		margin-left: var(--orange-margin-left);
	}
	
	.orange .pizzaSlice{
		width: calc(var(--orange-plus-width) + 100px);
	}
}


.hidden {
    display: none!important;
}
.grey-circle{
	background-color: #bebebe;
	width: 64%;
	height: 128%;
	position: absolute;
	top: 36%;
	left: 18%;
	border-radius: 50%;
	box-shadow: 0px 0px 15px rgb(0 0 0 / 40%);
	align-items: center;
}
.grey-circle:hover{
				-webkit-transition: all .1s ease;
			-moz-transition: all .1s ease;
			transition: all .1s ease;
	transform: scale(0.95);
	box-shadow: 0px 0px 15px rgba(0,0,0,.0);
}

.info-button img:hover{
	transform: rotate(-180deg);
	-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;
}
.embeded-txt::after{
	content: "";
	height: 3px;
 	background: rgb(27,72,93);
	background: linear-gradient(90deg, rgba(27,72,93,1) 10%, rgba(140,140,140,1) 10%, rgba(140,140,140,1) 17%, rgba(80,110,120,1) 17%, rgba(27,72,93,1) 50%, rgba(220,100,70,1) 50%, rgba(220,100,70,1) 80%, rgba(200,190,130,1) 80%, rgba(200,190,130,1) 92%, rgba(150,170,190,1) 92%); 	display: block;
}

/*------------main menu lis--------------------*/

/*--submenu--*/



.subli:nth-child(2)  {transform: rotate( calc(var(--deg)));}
.subli:nth-child(3)  {transform: rotate( calc((var(--deg)*2)));}
.subli:nth-child(4)  {transform: rotate( calc((var(--deg)*3)));}
.subli:nth-child(5)  {transform: rotate( calc((var(--deg)*4)));}
.subli:nth-child(6)  {transform: rotate( calc((var(--deg)*5)));}
.subli:nth-child(7)  {transform: rotate( calc((var(--deg)*6)));}
.subli:nth-child(8)  {transform: rotate( calc((var(--deg)*7)));}
.subli:nth-child(9)  {transform: rotate( calc((var(--deg)*8)));}
.subli:nth-child(10) {transform: rotate( calc((var(--deg)*9)));}

.submenu-width-2 {transform: rotate( calc((-1*((var(--deg)*1)/2))  + (calc(var(--deg)/2))));}
.submenu-width-3 {transform: rotate( calc((-1*((var(--deg)*1.5)/2))  + (calc(var(--deg)/2))));}
.submenu-width-4 {transform: rotate( calc((-1*((var(--deg)*2)/2))  + (calc(var(--deg)/2))));}
.submenu-width-5 {transform: rotate( calc((-1*((var(--deg)*2.5)/2))  + (calc(var(--deg)/2))));}
.submenu-width-6 {transform: rotate( calc((-1*((var(--deg)*3)/2))  + (calc(var(--deg)/2))));}
.submenu-width-7 {transform: rotate( calc((-1*((var(--deg)*3.5)/2))  + (calc(var(--deg)/2))));}
.submenu-width-8 {transform: rotate( calc((-1*((var(--deg)*4)/2))  + (calc(var(--deg)/2))));}
.submenu-width-9 {transform: rotate( calc((-1*((var(--deg)*4.5)/2))  + (calc(var(--deg)/2))));}
.submenu-width-10{transform: rotate( calc((-1*((var(--deg)*5)/2)) + (calc(var(--deg)/2))));}



/*----- Εκθέτες / Εταιρίες -----*/
.orange .pizzaSlice .hover-this .skewedRing{
	background: var(--my-orange);	
	background: var(--my-orange-gr);
}


.orange:hover .pizzaSlice .hover-this .skewedRing, .orange:active .pizzaSlice .hover-this .skewedRing, .orange:focus .pizzaSlice .hover-this .skewedRing{
	background: var(--my-orange)!important;
	background: var(--my-orange-hov)!important;
}

.orange .submenu .subSlice a .slice-box .oneSlice .skewedRing{
	background: var(--my-orange-sub);
}

.orange .submenu .subSlice:hover a .slice-box .oneSlice .skewedRing, .orange .submenu .subSlice:active a .slice-box .oneSlice .skewedRing, .orange .submenu .subSlice:focus a .slice-box .oneSlice .skewedRing{
	background: var(--my-orange-sub-hov);
}


/*-- γενικά --*/

.slice:hover, .slice:active, .slice:focus {
	color: #fff;
}
.slice .submenu .subSlice span{
	color: #fff;
}
.slice .submenu .subSlice:hover span, .slice .submenu .subSlice:active span, .slice.submenu .subSlice:focus span{
	color: #000;
}
.slice:hover p, .slice:active p, .slice:focus p{
    visibility: visible;
}

.slice:hover span i, .slice:active span i, .slice:focus span i{
    top: -2px;
}
.slice:hover .submenu, .slice:active .submenu, .slice:focus .submenu{
    visibility: visible;
}
/*----- Πρώτο κομματάκι -----*/

.slice:nth-child(1) .skewedRing{
	background: var(--my-blue);
	background: var(--my-blue-gr);	}

.slice:nth-child(1):hover .pizzaSlice .skewedRing, .slice:nth-child(1):active .pizzaSlice .skewedRing, .slice:nth-child(1):focus .pizzaSlice .skewedRing{
	background: var(--my-blue);
	background: var(--my-blue-hov);	}

.slice:nth-child(1) .submenu .ss{
	background: var(--my-blue);
	background: var(--my-blue-sub);	}

.slice:nth-child(1) .subli:hover .ss, .slice:nth-child(1) .subli:active .ss, .slice:nth-child(1) .subli:focus .ss{
	background: var(--my-blue);
	background: var(--my-blue-sub-hov);	}


/*----- Δεύτερο κομματάκι  -----*/
.slice:nth-child(2) .skewedRing{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-gr);	}

.slice:nth-child(2):hover .pizzaSlice .skewedRing, .slice:nth-child(2):active .pizzaSlice .skewedRing, .slice:nth-child(2):focus .pizzaSlice .skewedRing{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-hov);	}

.slice:nth-child(2) .submenu .ss{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-sub);	}

.slice:nth-child(2) .subli:hover .ss, .slice:nth-child(2) .subli:active .ss, .slice:nth-child(2) .subli:focus .ss{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-sub-hov);	}



/*----- Τρίτο κομματάκι -----*/
.slice:nth-child(3) .skewedRing{
	background: var(--my-grey);
	background: var(--my-grey-gr);	}

.slice:nth-child(3):hover .pizzaSlice .skewedRing, .slice:nth-child(3):active .pizzaSlice .skewedRing, .slice:nth-child(3):focus .pizzaSlice .skewedRing{
	background: var(--my-grey);
	background: var(--my-grey-hov);	}

.slice:nth-child(3) .submenu .ss{
	background: var(--my-grey);
	background: var(--my-grey-sub);	}

.slice:nth-child(3) .subli:hover .ss, .slice:nth-child(3) .subli:active .ss, .slice:nth-child(3) .subli:focus .ss{
	background: var(--my-grey-lighter);
	background: var(--my-grey-sub-hov);	}


/*-----  Τέταρτο κομματάκι -----*/
.slice:nth-child(4) .skewedRing{
	background: var(--my-blue-grey);
	background: var(--my-blue-grey-gr);	}

.slice:nth-child(4):hover .pizzaSlice .skewedRing, .slice:nth-child(4):active .pizzaSlice .skewedRing, .slice:nth-child(4):focus .pizzaSlice .skewedRing{
	background: var(--my-blue-grey);
	background: var(--my-blue-grey-hov);	}

.slice:nth-child(4) .submenu .ss{
	background: var(--my-blue-grey);
    background: var(--my-blue-grey-sub);	}


.slice:nth-child(4) .subli:hover .ss, .slice:nth-child(4) .subli:active .ss, .slice:nth-child(4) .subli:focus .ss{
	background: var(--my-blue-grey-lighter);
	background: var(--my-blue-grey-sub-hov);
}

/*----- Πέμπτο κομματάκι -----*/
.slice:nth-child(5) .skewedRing{
	background: var(--my-blue);
	background: var(--my-blue-gr);	}

.slice:nth-child(5):hover .pizzaSlice .skewedRing, .slice:nth-child(5):active .pizzaSlice .skewedRing, .slice:nth-child(5):focus .pizzaSlice .skewedRing{
	background: var(--my-blue);
	background: var(--my-blue-hov);	}

.slice:nth-child(5) .submenu .ss{
	background: var(--my-blue);
	background: var(--my-blue-sub);	}


.slice:nth-child(5) .subli:hover .ss, .slice:nth-child(5) .subli:active .ss, .slice:nth-child(5) .subli:focus .ss{
	background: var(--my-blue);
	background: var(--my-blue-sub-hov);	}


/*----- Έκτο κομματάκι -----*/
.slice:nth-child(6) .skewedRing{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-gr);	}

.slice:nth-child(6):hover .pizzaSlice .skewedRing, .slice:nth-child(6):active .pizzaSlice .skewedRing, .slice:nth-child(6):focus .pizzaSlice .skewedRing{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-hov);	}

.slice:nth-child(6) .submenu .ss{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-sub);	}


.slice:nth-child(6) .subli:hover .ss, .slice:nth-child(6) .subli:active .ss, .slice:nth-child(6) .subli:focus .ss{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-sub-hov);	}



/*----- Έβδομο κομματάκι -----*/
.slice:nth-child(7) .skewedRing{
	background: var(--my-yellow);
	background: var(--my-yellow-gr);	}

.slice:nth-child(7):hover .pizzaSlice .skewedRing, .slice:nth-child(7):active .pizzaSlice .skewedRing, .slice:nth-child(7):focus .pizzaSlice .skewedRing{
	background: var(--my-yellow);
	background: var(--my-yellow-hov);	}

.slice:nth-child(7) .submenu .ss{
	background: var(--my-yellow);
	background: var(--my-yellow-sub);	}

.slice:nth-child(7) .subli:hover .ss, .slice:nth-child(7) .subli:active .ss, .slice:nth-child(7) .subli:focus .ss{
	background: var(--my-yellow-lighter);
	background: var(--my-yellow-sub-hov);	}


/*----- Όγδοο κομματάκι -----*/
.slice:nth-child(8) .skewedRing {
	background: var(--my-blue-light);
	background: var(--my-blue-light-gr);	}

.slice:nth-child(8):hover .pizzaSlice .skewedRing, .slice:nth-child(8):active .pizzaSlice .skewedRing, .slice:nth-child(8):focus .pizzaSlice .skewedRing{
	background: var(--my-blue-light);
	background: var(--my-blue-light-hov);	}

.slice:nth-child(8) .submenu .ss{
	background: var(--my-blue-light);
	background: var(--my-blue-light-sub);	}

.slice:nth-child(8) .subli:hover .ss, .slice:nth-child(8) .subli:active .ss, .slice:nth-child(8) .subli:focus .ss{
	background: var(--my-blue-light-lighter);	
	background: var(--my-blue-light-sub-hov);	}

/*----- Ένατο κομματάκι -----*/

.slice:nth-child(9) .skewedRing{
	background: var(--my-blue-grey);
	background: var(--my-blue-grey-gr);	}

.slice:nth-child(9):hover .pizzaSlice .skewedRing, .slice:nth-child(9):active .pizzaSlice .skewedRing, .slice:nth-child(9):focus .pizzaSlice .skewedRing{
	background: var(--my-blue-grey);
	background: var(--my-blue-grey-hov);	}

.slice:nth-child(9) .submenu .ss{
	background: var(--my-blue-grey);
    background: var(--my-blue-grey-sub);	}

.slice:nth-child(9) .subli:hover .ss, .slice:nth-child(9) .subli:active .ss, .slice:nth-child(9) .subli:focus .ss{
	background: var(--my-blue-grey-lighter);
	background: var(--my-blue-grey-sub-hov);	}


/*----- Δέκατο κομματάκι -----*/
.slice:nth-child(10) .skewedRing{
	background: var(--my-blue);
	background: var(--my-blue-gr);	}

.slice:nth-child(10):hover .pizzaSlice .skewedRing, .slice:nth-child(10):active .pizzaSlice .skewedRing, .slice:nth-child(10):focus .pizzaSlice .skewedRing{
	background: var(--my-blue);
	background: var(--my-blue-hov);	}

.slice:nth-child(10) .submenu .ss{
	background: var(--my-blue);
	background: var(--my-blue-sub);	}

.slice:nth-child(10) .subli:hover .ss, .slice:nth-child(10) .subli:active .ss, .slice:nth-child(10) .subli:focus .ss{
	background: var(--my-blue);
	background: var(--my-blue-sub-hov);	}


/*----- Ένδέκατο κομματάκι -----*/
.slice:nth-child(11) .skewedRing{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-gr);	}

.slice:nth-child(11):hover .pizzaSlice .skewedRing, .slice:nth-child(11):active .pizzaSlice .skewedRing, .slice:nth-child(11):focus .pizzaSlice .skewedRing{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-hov);	}

.slice:nth-child(11) .submenu .ss{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-sub);	}

.slice:nth-child(11) .subli:hover .ss, .slice:nth-child(11) .subli:active .ss, .slice:nth-child(11) .subli:focus .ss{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-sub-hov);	}

/*.subli:hover .rotateThis span,.subli:active .rotateThis span,.subli:focus .rotateThis span{	color: #000 !important;}*/


/*----- δωδέκατο κομματάκι -----*/
.slice:nth-child(12) .skewedRing{
	background: var(--my-grey);
	background: var(--my-grey-gr);	}

.slice:nth-child(12):hover .pizzaSlice .skewedRing, .slice:nth-child(12):active .pizzaSlice .skewedRing, .slice:nth-child(12):focus .pizzaSlice .skewedRing{
	background: var(--my-grey);
	background: var(--my-grey-hov);	}

.slice:nth-child(12) .submenu .ss{
	background: var(--my-grey);
	background: var(--my-grey-sub);	}

.slice:nth-child(12) .subli:hover .ss, .slice:nth-child(12) .subli:active .ss, .slice:nth-child(12) .subli:focus .ss{
	background: var(--my-grey-lighter);
	background: var(--my-grey-sub-hov);	}

/*----- δέκατο τρίτο κομματάκι -----*/
.slice:nth-child(13) .skewedRing{
	background: var(--my-blue-grey);
	background: var(--my-blue-grey-gr);	}

.slice:nth-child(13):hover .pizzaSlice .skewedRing, .slice:nth-child(13):active .pizzaSlice .skewedRing, .slice:nth-child(13):focus .pizzaSlice .skewedRing{
	background: var(--my-blue-grey);
	background: var(--my-blue-grey-hov);	}

.slice:nth-child(13) .submenu .ss{
	background: var(--my-blue-grey);
    background: var(--my-blue-grey-sub);	}

.slice:nth-child(13) .subli:hover .ss, .slice:nth-child(13) .subli:active .ss, .slice:nth-child(13) .subli:focus .ss{
	background: var(--my-blue-grey-lighter);
	background: var(--my-blue-grey-sub-hov);
}
/*----- δέκατο τέταρτο κομματάκι -----*/

.slice:nth-child(14) .skewedRing{
	background: var(--my-blue);
	background: var(--my-blue-gr);	}

.slice:nth-child(14):hover .pizzaSlice .skewedRing, .slice:nth-child(14):active .pizzaSlice .skewedRing, .slice:nth-child(14):focus .pizzaSlice .skewedRing{
	background: var(--my-blue);
	background: var(--my-blue-hov);	}

.slice:nth-child(14) .submenu .ss{
	background: var(--my-blue);
	background: var(--my-blue-sub);	}

.slice:nth-child(14) .subli:hover .ss, .slice:nth-child(14) .subli:active .ss, .slice:nth-child(14) .subli:focus .ss{
	background: var(--my-blue);
	background: var(--my-blue-sub-hov);	}

/*----- Δέκατο πέμπτο κομματάκι -----*/
.slice:nth-child(15) .skewedRing{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-gr);	}

.slice:nth-child(15):hover .pizzaSlice .skewedRing, .slice:nth-child(15):active .pizzaSlice .skewedRing, .slice:nth-child(15):focus .pizzaSlice .skewedRing{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-hov);	}

.slice:nth-child(15) .submenu .ss{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-sub);	}

.slice:nth-child(15) .subli:hover .ss, .slice:nth-child(15) .subli:active .ss, .slice:nth-child(15) .subli:focus .ss{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-sub-hov);	}


/*----- Δέκατο έκτο κομματάκι -----*/

.slice:nth-child(16) .skewedRing{
	background: var(--my-yellow);
	background: var(--my-yellow-gr);	}

.slice:nth-child(16):hover .pizzaSlice .skewedRing, .slice:nth-child(16):active .pizzaSlice .skewedRing, .slice:nth-child(16):focus .pizzaSlice .skewedRing{
	background: var(--my-yellow);
	background: var(--my-yellow-hov);	}

.slice:nth-child(16) .submenu .ss{
	background: var(--my-yellow);
	background: var(--my-yellow-sub);	}

.slice:nth-child(16) .subli:hover .ss, .slice:nth-child(16) .subli:active .ss, .slice:nth-child(16) .subli:focus .ss{
	background: var(--my-yellow-lighter);
	background: var(--my-yellow-sub-hov);	}

/*----- Δέκατο έβδομο κομματάκι -----*/
.slice:nth-child(17) .skewedRing {
	background: var(--my-blue-light);
	background: var(--my-blue-light-gr);	}

.slice:nth-child(17):hover .pizzaSlice .skewedRing, .slice:nth-child(17):active .pizzaSlice .skewedRing, .slice:nth-child(17):focus .pizzaSlice .skewedRing{
	background: var(--my-blue-light);
	background: var(--my-blue-light-hov);	}

.slice:nth-child(17) .submenu .ss{
	background: var(--my-blue-light);
	background: var(--my-blue-light-sub);	}

.slice:nth-child(17) .subli:hover .ss, .slice:nth-child(17) .subli:active .ss, .slice:nth-child(17) .subli:focus .ss{
	background: var(--my-blue-light-lighter);	
	background: var(--my-blue-light-sub-hov);	}


/*-----  Δέκατο όγδοο κομματάκι -----*/
.slice:nth-child(18) .skewedRing{
	background: var(--my-blue-grey);
	background: var(--my-blue-grey-gr);	}

.slice:nth-child(18):hover .pizzaSlice .skewedRing, .slice:nth-child(18):active .pizzaSlice .skewedRing, .slice:nth-child(18):focus .pizzaSlice .skewedRing{
	background: var(--my-blue-grey);
	background: var(--my-blue-grey-hov);	}

.slice:nth-child(18) .submenu .ss{
	background: var(--my-blue-grey);
    background: var(--my-blue-grey-sub);	}

.slice:nth-child(18) .subli:hover .ss, .slice:nth-child(18) .subli:active .ss, .slice:nth-child(18) .subli:focus .ss{
	background: var(--my-blue-grey-lighter);
	background: var(--my-blue-grey-sub-hov);
}


/*----- δέκατο ένατο κομματάκι -----*/


.slice:nth-child(19) .skewedRing{
	background: var(--my-blue);
	background: var(--my-blue-gr);	}

.slice:nth-child(19):hover .pizzaSlice .skewedRing, .slice:nth-child(19):active .pizzaSlice .skewedRing, .slice:nth-child(19):focus .pizzaSlice .skewedRing{
	background: var(--my-blue);
	background: var(--my-blue-hov);	}

.slice:nth-child(19) .submenu .ss{
	background: var(--my-blue);
	background: var(--my-blue-sub);	}


.slice:nth-child(19) .subli:hover .ss, .slice:nth-child(19) .subli:active .ss, .slice:nth-child(19) .subli:focus .ss{
	background: var(--my-blue);
	background: var(--my-blue-sub-hov);	}


/*----- Εικοστό κομματάκι  -----*/
.slice:nth-child(20) .skewedRing{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-gr);	}

.slice:nth-child(20):hover .pizzaSlice .skewedRing, .slice:nth-child(20):active .pizzaSlice .skewedRing, .slice:nth-child(20):focus .pizzaSlice .skewedRing{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-hov);	}

.slice:nth-child(20) .submenu .ss{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-sub);	}

.slice:nth-child(20) .subli:hover .ss, .slice:nth-child(20) .subli:active .ss, .slice:nth-child(20) .subli:focus .ss{
	background: var(--my-blue-dark);
	background: var(--my-blue-dark-sub-hov);	}


/*.subli:hover .rotateThis span,.subli:active .rotateThis span,.subli:focus .rotateThis span{	color: #000 !important;}*/
/*------------end of main menu lis--------------------*/





.box {
    margin: 0;
    /* align-content: center; */
    display: flex;
    flex-direction: column;
    text-align: center;
}
.palette-wrapper{
	width: 100%;
    height: 430px;
    margin: auto;
    /* margin-top: 200px; */
	transition: all .3s ease 0.3s;

}

.mainMenu {
    width: 100%;
    height: 100%;

}
button {
    background-color: transparent;
    padding: 0;
    border-width: 0px;
	z-index: 5;
}

.info-button {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    overflow: hidden;
	width: 450px;
	height: 225px;
}




@media only screen and (max-width:720px) {

.mainMenu{
	visibility: visible!important;
}

.mainmenuanimate{	animation-name: resize;	animation-duration: 0s;	animation-delay: 0s;  }
@keyframes resize {	0% {transform: scale(1);		margin-top: 0%;}  }

.frstSliceF{animation: oner 0s forwards !important;}
@keyframes oner {0% {transform: rotate(9deg);}  }

.sndSliceF{	animation: twor 0s forwards !important;  }
@keyframes twor {	0%  {transform: rotate(-83deg);}  }

.thrdSliceF{	animation: thrr 0s forwards !important;  }
@keyframes thrr {	0% {transform: rotate(-66deg);}  }

.frthSliceF{	animation: four 0s forwards !important;  }
@keyframes four {	0% {transform: rotate(-49deg);}  }

.ffthSliceF{	animation: fivr 0s forwards !important;  }
@keyframes fivr {	0% {transform: rotate(-32deg);}  }

.sxthSliceF{	animation: sixr 0s forwards !important;  }
@keyframes sixr {	0% {transform: rotate(-15deg);}  }

.svnthSliceF{	animation: sevr 0s forwards !important;  }
@keyframes sevr {	0%  {transform: rotate(31deg);}  }

.ghtSliceF{	animation: eigr 0s forwards !important;  }
@keyframes eigr {	0% {transform: rotate(48deg);}  }

.nnthtSliceF{	animation: ninr 0s forwards !important;  }
@keyframes ninr {	0% {transform: rotate(65deg);}  }

.tnthSliceF{	animation: tenr 0s forwards !important;  }
@keyframes tenr {	0% {transform: rotate(82deg);}  }
}


/*--speech bubble --*/
@import "compass/css3";

body {
  background: #f5f5f5;
}

blockquote,
p {
  margin: 0;
  padding: 0;
}

.l-quote {
    position: absolute;
    width: 300px;
    padding: 15px 25px 20px;
    color: #fff;
	background: #7f9e3d;
    background: linear-gradient(160deg, #7f9e3d 0%, #467958 100%);
    z-index: 10;
    top: 55%;
	transform: scale(0.7);
	right: 30%;
}
#bubble{
	display: block;
	-webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    transition: all .1s ease;
}
.quote::after {
    content: "";
    position: absolute;
    top: 99%;
    right: 100px;
    border-width: 30px 30px 0 0;
    border-style: solid;
    border-color: #467958 transparent;
  }


blockquote {
  font: italic 26px / 1.3 'Lora', serif;
}

.slice {
    position: absolute;
    /* margin-right: -18%; */
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    bottom: 0PX;
    left: calc(50% - ((var(--sliceWidth)/2)));
    font-size: 10pt;
	cursor: pointer;
}




.slice-box {
    position: absolute;
    bottom: 0%;
    height: 370px;
    /*background-color: rgba(88,88,88,.3); */
    left: 100%;
    transform: translateX(-50%);
}


.oneSlice{
	overflow: hidden;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    transition: all .1s ease;
    -webkit-transform: rotate( -80.5deg) skew(var(--skewslice)) ;
    -moz-transform: rotate( -80.5deg) skew(var(--skewslice));
    -ms-transform: rotate( -80.5deg) skew(var(--skewslice));
    transform: rotate( -80.5deg) skew(var(--skewslice));
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    transform-origin: 0% 100%;
    width: var(--sliceWidth);
    position: absolute;
    height: var(--sliceWidth);
    left: 50%;
    bottom: 0px;
	pointer-events: none; 
	/*background-color: rgba(180,150,180,.3);*/
}


.skewedRing {
	display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #000;
    text-align: center;
    text-decoration: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
}
.ss {
    transform: skew(calc(-1*(var(--skewslice))));
}
.rotateThis{
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 9px 0px 0px;
	transform-origin: 50% 100%;
	line-height: 1;
	font-size: 8pt;
	display: flex;
	justify-content: center;
}
.catitle {
    height: 40px;
    display: flex;
    align-content: end;
    align-items: center;
}
.subtext {
    display: flex;
    align-items: center;
    height: 35px;
}
.green, .red {
    position: absolute;
    right: -20;
    left: 100%;
   }
    
.pizzaSlice{
	clip-path: polygon( 0% 0%, 50% 100%, 100% 0);
	width: var(--sliceWidth);
	height: var(--sliceHeight);
	display: flex;
	justify-content: center;
	/*background-color: rgba(200,200,200,0.3);*/
}

.pizzaSlice span {
    padding-top: 25px;
    line-height: 1;
	display: inline-block;
}


.hover-this{
	position: absolute;
	width: calc(var(--sliceHeight)*2);
	height: calc(var(--sliceHeight)*2);
	/*background-color: rgba(0, 0, 0, 0.1);*/
	border-radius: 50%;
}
#mainmenuanimate {
    /*background-color: rgba(100,100,100,.3);*/
    transform-origin: bottom;
  }

  /*-- Πόσο θα περιστραφεί το ul "mainmenu" --*/
.mainmenu-width-2 {transform: rotate( 33deg);}
.mainmenu-width-3 {transform: rotate( 0deg);}
.mainmenu-width-4 {transform: rotate( 20deg);}
.mainmenu-width-5 {transform: rotate( 0deg);}
.mainmenu-width-6 {transform: rotate( 13.3deg);}
.mainmenu-width-7 {transform: rotate( 0deg);}
.mainmenu-width-8 {transform: rotate( 11deg);}
.mainmenu-width-9 {transform: rotate( 0deg); }
.mainmenu-width-10{transform: rotate( 9deg);}
.mainmenu-width-11{transform: rotate( 0deg);}
.mainmenu-width-12{transform: rotate( 9deg);}
.mainmenu-width-13{transform: rotate( 0deg);}
.mainmenu-width-14{transform: rotate( 9deg);}
.mainmenu-width-15{transform: rotate( 0deg);}
.mainmenu-width-16{transform: rotate( 9deg);}
.mainmenu-width-17{transform: rotate( 0deg);}
.mainmenu-width-18{transform: rotate( 0deg);}
.mainmenu-width-19{transform: rotate( 0deg);}
.mainmenu-width-20{transform: rotate( 0deg);}


@media (max-width:720px ) {
	#mainmenuanimate {
    transform: rotate( 0deg);
   }
   	.submenu{
		transform: rotate( 0deg);
	}
	.slice {
    transform: rotate( 0deg) !important;
	}

	.hover-this {
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.pizzaSlice {
		width: 100%;
		height: 440px;
	    clip-path: none;
	    padding-bottom: 40px;
	}
	.pizzaSlice span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    bottom: 10px;
}

	.palette {
	    padding-bottom: 20px;
	}
	.catitle {
	    color: white;
	}

	.pizzaSlice .hover-this:hover span p{
		visibility:visible;
	}
	.pizzaSlice.hover-this:hover span i.bi.bi-linkedin, .pizzaSlice .hover-this:hover span i.bi.bi-display, .pizzaSlice .hover-this:hover span i.bi.bi-shop-window, .pizzaSlice .hover-this:hover span i.bi.bi-file-earmark-person {
	    top: -2px;
	}

	.pizzaSlice .hover-this:hover span i{
		top: 0em;	
	}
	.subli{
	    transform: rotate( 0deg)!important;
	}
	.rotateThis {
	    padding: 0px;

	}
	.hover-this span br {
	    display: none;
	}
	.catitle {
	    height: 0px;
	    margin-bottom: 20px;
	}

	.oneSlice{
	    transform: rotate( 0deg);
	}
	.ss {
	    display: none;
	}

	.orange .pizzaSlice .hover-this .skewedRing{
	background: var(--my-orange)!important;
	}

	.orange .pizzaSlice .hover-this:hover .skewedRing, .orange .pizzaSlice .hover-this:active .skewedRing, .orange .pizzaSlice .hover-this:focus .skewedRing{
		background: var(--my-orange)!important;
	}

	.orange{
				background: var(--my-orange)!important;

	}
	.slice:nth-child(1) {
	    background-color: var(--my-blue);
	}
	.slice:nth-child(2) {
	    background-color: var(--my-blue-dark);
	}
	.slice:nth-child(3) {
	    background-color: var(--my-grey);
	}
	.slice:nth-child(4) {
	    background-color: var(--my-blue-grey);
	}
	.slice:nth-child(5) {
	    background-color: var(--my-blue);
	}
	.slice:nth-child(6) {
	    background-color: var(--my-blue-dark);
	}
	.slice:nth-child(7) {
	    background-color: var(--my-yellow);
	}
	.slice:nth-child(8) {
	    background-color: var(--my-blue-light);
	}
	.slice:nth-child(9) {
	    background-color: var(--my-blue-grey);
	}
	.slice:nth-child(10) {
	    background-color: var(--my-blue-dark);
	}
	.slice:nth-child(11) {
	    background-color: var(--my-grey);
	}
	.slice:nth-child(12) {
	    background-color: var(--my-blue-grey);
	}
		.slice:nth-child(13) {
	    background-color: var(--my-blue);
	}
		.slice:nth-child(14) {
	    background-color: var(--my-blue-dark);
	}
		.slice:nth-child(15) {
	    background-color: var(--my-yellow);
	}
		.slice:nth-child(16) {
	    background-color: var(--my-blue-light);
	}
		.slice:nth-child(17) {
	    background-color: var(--my-blue-grey);
	}
		.slice:nth-child(18) {
	    background-color: var(--my-blue-dark);
	}	
		.slice:nth-child(19) {
	    background-color: var(--my-grey);
	}	
		.slice:nth-child(20) {
	    background-color: var(--my-blue-grey);
	}



}
/*-- Στην περιπτωση πουέχουμε περισσότερα από 12 δράσεις και οθόνη μεγαλύτερη από 720px --*/
@media (min-width:720px ) {
	.btn-morethan{
		transform: translateX(50%) rotate(180deg);
		transform-origin: 0% 100%;
	}

	.infodesk-morethan{
		transform: translateX(50%) rotate(180deg);
		transform-origin: 0%;
		left: 50%;
	}
	.data-morethan {
	    position: absolute;
		top: 215px;
		left: 50%;
	    z-index: 4;
	    transform: translateX(-50%);
	    color: white;
	}
	
	.data-morethan a{
	    color: white;
	}
	.festivalLogo-morethan{
		background-image: url(../assets/img/images.png);

	}
	.quote-morethan{
		top: 90%;
		right: 30%;
	}

	.xtr-pb-20{
		padding-bottom: 450px;
	}
	.xtr-pb-19{
		padding-bottom: 440px;
	}
	.xtr-pb-18{
		padding-bottom: 435px;
	}
	.xtr-pb-17{
		padding-bottom: 435px;
	}
	.xtr-pb-16{
		padding-bottom: 360px;
	}
	.xtr-pb-15{
		padding-bottom: 310px;
	}
	.xtr-pb-14{
		padding-bottom: 290px;
	}
	.xtr-pb-13{
		padding-bottom: 290px;
	}
	.xtr-pb-12{
		padding-bottom: 65px;
	}
}




.showvisibility{visibility: visible!important;}
.mainMenu{visibility: hidden;}
.mainmenuanimate{	animation-name: resize;	animation-duration: 3s;	animation-delay: -1s;  }
@keyframes resize {	0% {transform: scale(0.1);		margin-top: 100%;}	50% {transform: scale(1);		margin-top: 0%;}  }



.frstSliceA{transform: rotate(var(--orange-rotate));}
.secondSliceA{transform: rotate(calc((var(--lirotate) * -1) - 10deg));}
.thirdSliceA{transform: rotate(calc((var(--lirotate) * 1) + 10deg));}
.forthSliceA{transform: rotate(calc((var(--lirotate) * -2) - 10deg));}
.fifthSliceA{transform: rotate(calc((var(--lirotate) * 2) + 10deg));}
.sixthSliceA{transform: rotate(calc((var(--lirotate) * -3) - 10deg));}
.sevthSliceA{transform: rotate(calc((var(--lirotate) * 3) + 10deg));}
.eighthSliceA{transform: rotate(calc((var(--lirotate) * -4) - 10deg));}
.ninthSliceA{transform: rotate(calc((var(--lirotate) * 4) + 10deg));}
.tenthSliceA{transform: rotate(calc((var(--lirotate) * -5) - 10deg));}
.eleventhSliceA{transform: rotate(calc((var(--lirotate) * 5) + 10deg));}
.twelfthSliceA{transform: rotate(calc((var(--lirotate) * -6) - 10deg));}
.thirteenthSliceA{transform: rotate(calc((var(--lirotate) * 6) + 10deg));}
.fourteenthSliceA{transform: rotate(calc((var(--lirotate) * -7) - 10deg));}
.fivteenthSliceA{transform: rotate(calc((var(--lirotate) * 7) + 10deg));}
.sixteenthSliceA{transform: rotate(calc((var(--lirotate) * -8) - 10deg));}
.seventeenthSliceA{transform: rotate(calc((var(--lirotate) * 8) + 10deg));}
.eighteenthSliceA{transform: rotate(calc((var(--lirotate) * -9) - 10deg));}
.nineteenthSliceA{transform: rotate(calc((var(--lirotate) * 9) + 10deg));}
.twentiethSliceA{transform: rotate(calc((var(--lirotate) * -10) - 10deg));}


.frstSliceA{animation: oner 1.5s forwards !important;}
@keyframes oner {	0% {transform: rotate(var(--orange-rotate));}	40% {transform: rotate(var(--orange-rotate));}	100% {transform: rotate(var(--orange-rotate));}  }

.secondSliceA{	animation: twor 1.5s forwards !important;  }
@keyframes twor {	0% {transform: rotate(0deg);}	39% {transform: rotate(0deg);}	46% {transform: rotate(-27deg);}  }

.thirdSliceA{	animation: threer 1.5s forwards !important;  }
@keyframes threer {	0% {transform: rotate(0deg);}	39% {transform: rotate(0deg);}	46% {transform: rotate(-27deg);}  }

.forthSliceA{	animation: fourr 1.5s forwards !important;  }
@keyframes fourr {	0% {transform: rotate(0deg);}	40% {transform: rotate(0deg);}	52% {transform: rotate(-44deg);}  }

.fifthSliceA{	animation: fiver 1.5s forwards !important;  }
@keyframes fiver {	0% {transform: rotate(0deg);}	40% {transform: rotate(0deg);}	52% {transform: rotate(44deg);}  }

.sixthSliceA{	animation: sixr 1.5s forwards !important;  }
@keyframes sixr {	0% {transform: rotate(0deg);}	45% {transform: rotate(0deg);}	58% {transform: rotate(-61deg);}  }

.seventhSliceA{	animation: sevenr 1.5s forwards !important;  }
@keyframes sevenr {	0% {transform: rotate(0deg);}	45% {transform: rotate(0deg);}	58% {transform: rotate(61deg);}  }

.eighthSliceA{	animation: eightr 1.5s forwards !important;  }
@keyframes eightr {	0% {transform: rotate(0deg);}	55% {transform: rotate(0deg);}	64% {transform: rotate(-78deg);}  }

.ninthSliceA{	animation: niner 1.5s forwards !important;  }
@keyframes niner {	0% {transform: rotate(0deg);}	55% {transform: rotate(0deg);}	64% {transform: rotate(78deg);}  }

.tenthSliceA{	animation: tenr 1.5s forwards !important;  }
@keyframes tenr {	0% {transform: rotate(0deg);}	60% {transform: rotate(0deg);}	70% {transform: rotate(-95deg);}  }

.eleventhSliceA{	animation: elevenr 1.5s forwards !important;  }
@keyframes elevenr {	0% {transform: rotate(0deg);}	60% {transform: rotate(0deg);}	70% {transform: rotate(95deg);}  }

.twelfthSliceA{	animation: twelver 1.5s forwards !important;  }
@keyframes twelver {	0% {transform: rotate(0deg);}	65% {transform: rotate(0deg);}	76% {transform: rotate(-112deg);}  }

.thirteenthSliceA{	animation: thirteenr 1.5s forwards !important;  }
@keyframes thirteenr {	0% {transform: rotate(0deg);}	65% {transform: rotate(0deg);}	76% {transform: rotate(112deg);}  }

.fourteenthSliceA{	animation: fourteenr 1.5s forwards !important;  }
@keyframes fourteenr {	0% {transform: rotate(0deg);}	70% {transform: rotate(0deg);}	82% {transform: rotate(-129deg);}  }

.fivteenthSliceA{	animation: fifteenr 1.5s forwards !important;  }
@keyframes fifteenr {	0% {transform: rotate(0deg);}	70% {transform: rotate(0deg);}	82% {transform: rotate(129deg);}  }

.sixteenthSliceA{	animation: sixteenr 1.5s forwards !important;  }
@keyframes sixteenr {	0% {transform: rotate(0deg);}	80% {transform: rotate(0deg);}	88% {transform: rotate(-146deg);}  }

.seventeenthSliceA{	animation: seventeenr 1.5s forwards !important;  }
@keyframes seventeenr {	0% {transform: rotate(0deg);}	80% {transform: rotate(0deg);}	88% {transform: rotate(146deg);}  }

.eighteenthSliceA{	animation: eighteenr 1.5s forwards !important;  }
@keyframes eighteenr {	0% {transform: rotate(0deg);}	85% {transform: rotate(0deg);}	94% {transform: rotate(-163deg);}  }

.nineteenthSliceA{	animation: nineteenr 1.5s forwards !important;  }
@keyframes nineteenr {	0% {transform: rotate(0deg);}	85% {transform: rotate(0deg);}	94% {transform: rotate(163deg);}  }

.twentiethSliceA{	animation: twentyr 1.5s forwards !important;  }
@keyframes twentyr {	0% {transform: rotate(0deg);}	93% {transform: rotate(0deg);}	99% {transform: rotate(-180deg);}  }