@charset "utf-8";
/* CSS Document */

html,
body {
	background-color: #007196;
	margin: 0;
	padding: 0;
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	overflow-x: hidden;
	/* overflow-y: hidden; */
	width: 100%;
	height: 100%;
}

#page {
	text-align: left;
	margin: 0 auto;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}


h2 {
	font-size: 1.7rem;
}

h3 {
	font-size: 1rem;
}



#icos {
	display: flex;
	position: relative;
	height: 8rem;
	margin-bottom: -2rem;
	padding-bottom: 0.5rem;
	justify-content: center;
	margin-top: -1rem;
	z-index: 999;
}

#moyseia {
	position: relative;
	top: 214px;
	/* left: 230px; */
	cursor: pointer;
}

#epik {
	position: relative;
	top: 220px;
	/* left: 735px; */
	cursor: pointer;
}

#lesvos {
	position: relative;
	top: 214px;
	/* left: 440px; */
	cursor: pointer;
}

#sylog {
	position: relative;
	top: 214px;
	/* left: 320px; */
	cursor: pointer;
}

#mid {
	display: flex;
	justify-content: center;
}

#text {
	position: relative;
	top: 200px;
	/* left: 464.5px; */
	font-size: 26px;
	color: white;
	font-weight: bold;
	-webkit-user-select: none;
	/* Chrome/Safari */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* IE10+ */
	cursor: default;
	user-select: none;
}







#context1 {
	position: relative;
	bottom: 390px;
	/* left: 100px; */
	right: 10%;
	visibility: hidden;
	text-align: center;
	display: flex;
	flex-flow: column;
}


#context_teriade {
	position: relative;
	visibility: hidden;
}

#context_lesvos {
	position: relative;
	/* bottom: 1090px;
	left: 100px; */
	visibility: hidden;
	display: flex;
	bottom: 80rem;
	flex-wrap: wrap;
	justify-content: center;
}

#context_diktyo {
	position: relative;
	/* bottom: 1675px;
	left: 220px; */
	font-size: 14px;
	color: white;
	text-align: left;
	cursor: default;
	visibility: hidden;
	/*! margin-bottom: ; */
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

#context_epik {
	position: relative;
	display: flex;
	/* justify-content: center; */
	flex-direction: column;
	font-size: 14px;
	color: white;
	cursor: default;
	visibility: hidden;
	bottom: 120rem;
	width: 42vw;
	text-align: center;
	margin: 0 auto;
}



#text_teriade {
	background-color: rgb(160, 160, 160);
	position: relative;
	/* 	left: 390px;
	bottom: 125%;
	font-size: 14px;
	/* text-align: left; */
	color: white;
	bottom: 520px;
	cursor: default;
	padding: 10px;
	margin-left: 40.4rem;
	width: 45ch;
	left: 23rem;
	margin: 0 auto;
	font-size: 80%;
	height: 13rem;
	overflow: auto;
}

#text_lesvos {
	position: relative;
	left: 1rem;
	bottom: 1rem;
	font-size: 14px;
	color: white;
	text-align: left;
	cursor: default;
	padding: 10px;
	width: 60ch;
}

#dix {
	position: relative;
	/* left: 238px;*/
	bottom: 95rem;
	font-weight: bold;
	font-size: 16px;
	cursor: default;
	-webkit-user-select: none;
	/* Chrome/Safari */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* IE10+ */
	user-select: none;
	text-decoration: underline;
	margin: 0 auto;
}

#dix_text {
	bottom: 94rem;
	position: relative;
	width: 82ch;
	white-space: pre-line;
	margin: 0 auto;


}

#epoik {
	position: relative;
	/* left: 387px; */
	bottom: 21px;
	font-weight: bold;
	font-size: 16px;
	cursor: default;
	-webkit-user-select: none;
	/* Chrome/Safari */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* IE10+ */
	user-select: none;
	text-decoration: underline;
}

/* #line1 {
	margin-right: 20rem;
}

#line2 {
	margin-top: -28.5rem;
	font-size: 14px;
	cursor: default;
	margin-left: 20rem;
} */


#dots {
	display: flex;
	justify-content: center;
	position: relative;
	/* left: 530px; */
	top: 50px;
	visibility: hidden;
}

#dot {
	position: relative;
	/* right: 210px; */
	visibility: hidden;
	cursor: pointer;
	margin-right: 5rem;
	margin-left: -6rem;
}

#dot_act {
	position: relative;
	/* right: 190px; */
	margin-right: 5rem;
	visibility: hidden;
	cursor: pointer;
}

#dot2 {
	position: relative;
	/* right: 20px; */
	cursor: pointer;
	margin-right: 0.8rem;
}

#dot2_act {
	position: relative;
	/* left: 5px; */
	visibility: hidden;
	cursor: pointer;
	margin-right: -1.2rem;
}

#dot3 {
	position: relative;
	/* left: 230px; */
	cursor: pointer;
	margin-left: 5rem;
}


#dot3_act {
	position: relative;
	/* left: 208px; */
	cursor: pointer;
	visibility: hidden;
	margin-left: -1.2rem;
}




#right {
	position: relative;
	left: 325px;
	cursor: pointer;
}

#left {
	position: relative;
	right: 470px;
	cursor: pointer;
}



#social {
	position: relative;
	left: 562px;
	bottom: 2000px;
	visibility: hidden;
}


#fb {
	visibility: hidden;
}

#twee {
	position: relative;
	left: 8px;
	visibility: hidden;
}





#onom {
	position: relative;
	/* left: 318px; */
	top: 35px;
	cursor: default;
	font-size: 15px;
	color: white;
	font-weight: bold;
	visibility: hidden;
	margin-left: 5rem;
	margin-top: 1rem;
	display: flex;
	justify-content: center;
	margin-bottom: 5rem;
}

#onom_teriade {
	margin-left: 6rem;
	margin-top: 1rem;
	position: relative;
	visibility: hidden;
	/* left: 2px; */
}

#onom_oli {
	margin-top: 1rem;
	position: relative;
	/* left: 218px;
	bottom: 31.5px; */
	visibility: hidden;
}

#onom_byz {
	margin-right: 5rem;
	margin-top: 1rem;
	position: relative;
	/* left: 470px;
	bottom: 63.8px; */
	visibility: hidden;
}







#heads {
	position: relative;
	left: 412px;
	top: 406px;
	font-weight: bold;
	/* font-size: 16px; */
	letter-spacing: 4px;
	text-decoration: underline;
	cursor: default;
	-webkit-user-select: none;
	/* Chrome/Safari */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* IE10+ */
	user-select: none;
	margin-bottom: -4.5rem;
}

#head_teriade {
	position: relative;
	visibility: hidden;
	/* right: 1.7%; */
	margin-left: -8rem;
	bottom: 53px;
}

#head_oli {
	position: relative;
	visibility: hidden;
	/* right: 22px; */
	margin-left: -8rem;
	bottom: 110px;
}

#head_byz {
	position: relative;
	visibility: hidden;
	/* 	right: 22px; */
	bottom: 174px;
	margin-left: -8rem;
}



#eliaz {
	position: relative;
	visibility: hidden;
	/* left: 11.5px; */
	top: 265px;
	margin-left: -4rem;
}

#teriade {
	position: relative;
	margin-left: -4rem;
	top: -17.9rem;
}


#byznes {
	position: relative;
	visibility: hidden;
	/* left: 25.5px; */
	bottom: 15px;
	/* margin-left: -4rem; */
}



#molybos {
	position: relative;
	margin-right: 1rem;
	margin-bottom: 1rem;
}

#prokymaia {
	position: relative;
	margin-right: 1rem;
}

#therapon {
	position: relative;
}

#plokami {
	position: relative;
	margin-right: 1rem;
	margin-bottom: 1rem;
}