@import url('https://fonts.googleapis.com/css?family=Alegreya:400,700,800,900|Cardo&subset=greek-ext');
	@font-face {
	    font-family: 'gfs_theokritosregular';
	    src: url('theokritos/gfstheokritos-webfont.woff2') format('woff2'),
	         url('theokritos/gfstheokritos-webfont.woff') format('woff');
	    font-weight: normal;
	    font-style: normal;
	}
	html {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	*, *:before, *:after {
		-webkit-box-sizing: inherit;
		-moz-box-sizing: inherit;
		box-sizing: inherit;
	}
	body {
		background: url(img/page-background.jpg) left top no-repeat #3c1839;
		padding: 0;
		margin: 0;
		font-family: Alegreya;
		height: 120vh;
	}

	#video {
		display: none;
	}
	#container {
		color:white;
		text-align: center;
	}
	.showvideo #container {
		display: none;
	}
	#body {
		display: flex;
		align-items:flex-start;
	}
	#paragraphs {
		width: 75%;
		overflow: hidden;
		max-width: 900px;
		margin: 0 auto;
		padding-bottom:50px;
		padding-top: 50px;
		padding-left: 20px;
		font-size: 20px;
	}
	#paragraphs div {
		opacity: 0;
		text-align: justify;
	}
	.gre #paragraph1 span {
		font-size: 0;
		background: url('letter/111.png') left top no-repeat;
		background-size: cover;
		display: inline-block;
		float: left;
		width: 85px;
		margin-right: 10px;
		height: 100px;
	}

	.eng #paragraph1  span {
		font-size: 0;
		background: url('letter/111.png') left top no-repeat;
		background-size: cover;
		display: inline-block;
		float: left;
		width: 85px;
		margin-right: 10px;
		height: 100px;
				
	  background-image:unset!important;
	  font-size: 90px;
	  width: 70px;
	  height: 80px;
	  font-family: 'gfs_theokritosregular'; 
	      margin-top: -10px;

	}

	#paragraph1 {
		animation: movetextparagraph1 5s  2s 1 forwards;
	}
	#paragraph2 {
		animation: movetextparagraph2 5s  4s 1 forwards;
	}
	#paragraph3 {
		animation: movetextparagraph3 5s  6s 1 forwards;
	}
	#paragraph4 {
		animation: movetextparagraph4 5s  8s 1 forwards;
	}
	#gallery {
		position: relative;
		width: 25%;
		margin-left: 40px;
		margin-right: 20px;
	}

	#gallery > div {
		opacity: 1;
		position:absolute;
		top: 40px;
		left:0;
	}

	#gallery > div { 
    opacity:0; 
    animation-name: fadeimages; 
    animation-duration: 9s; 
    animation-iteration-count: infinite; 
    position:absolute; 
    left:0; 
    right:0; 
    background: #3c1839;
    min-height: 700px;
}

#gallery > div .lez { 
	font-size: 12px;
}

	#gallery #image1 {
		animation-delay: 0s; 
	}
	#gallery #image2 {
		animation-delay: 3s; 
	}

	#gallery #image3 {
		animation-delay: 6s; 
	}

	#gallery #image4 {
		animation-delay: 9s; 
	}

	#gallery #image5 {
		animation-delay: 12s; 
	}

	#gallery #image6 {
		animation-delay: 15s; 
	}

	#gallery #image7 {
		animation-delay: 18s; 
	}

	#gallery #image8 {
		animation-delay: 21s; 
	}

	#gallery #image9 {
		animation-delay: 24s; 
	}

	#gallery #image10 {
		animation-delay: 27s; 
	}

	#gallery #image11 {
		animation-delay: 30s; 
	}

	#gallery #image12 {
		animation-delay: 33s; 
	}

	#gallery #image13 {
		animation-delay: 36s; 
	}

	#gallery #image14 {
		animation-delay: 39s; 
	}

	#gallery #image15 {
		animation-delay: 42s; 
	}

.vimeo-wrapper {
	display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}
.showvideo .vimeo-wrapper {
	display: block
	}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

	
	#button {
		opacity: 0;
		display: inline-block;
		border-radius: 3px;
		padding: 10px 20px;
		background: #61305d;
		text-align: center;
		margin: 0 auto;
		box-shadow: 0 8px 20px rgba(0,0,0,0.5);
		cursor: pointer;
		animation: reveal_button 8s  9s 1 forwards;
	}
	

	@keyframes movetextparagraph1 {
		0% 		{margin-bottom:500px;opacity: 0;}
		100% 	{margin-bottom:10px; opacity:  1;}
	}
	@keyframes movetextparagraph2 {
		0% 		{margin-bottom:500px;opacity: 0;}
		100% 	{margin-bottom:10px; opacity:  1;}
	}
	@keyframes movetextparagraph3 {
		0% 		{margin-bottom:500px;opacity: 0;}
		100% 	{margin-bottom:10px; opacity:  1;}
	}
	@keyframes movetextparagraph4 {
		0% 		{margin-bottom:500px;opacity: 0;}
		100% 	{margin-bottom:10px; opacity:  1;}
	}
	@keyframes reveal_button {
		0% 		{opacity: 0;}
		100% 	{opacity:  1;}
	}

	@keyframes image1 {
		0% 		{opacity: 1}
		100% 	{opacity: 0}
	}
	@keyframes image2 {
		0% 		{opacity: 1}
		100% 	{opacity: 0}
	}

@keyframes fadeimages {
  0%   			{ opacity: 0; }
  11.11%   	{ opacity: 1; }
  33.33%  	{ opacity: 1; }
  44.44%  	{ opacity: 0; }
  100% 		{ opacity: 0; }
}

@keyframes logo {
  0%   			{ opacity: 0;}
  10%   		{ opacity: 0.5;top:30px;padding-left: 40px;}
  50% 			{ opacity: 0.2; top:60px;padding-left: 80px;}
  100% 		{ opacity: 0.05; top:90px;padding-left: 60px;}
}

.closex {
	display: none;
	position:absolute;
	right: 0;
	top: 0;
	background:#3c1839;
	width: 50px;
	height: 50px;
	text-align: center;
	color:white;
	z-index: 5000;
	cursor: pointer;
}

.closex:before {
	content: "X";
	font-size: 40px;
	line-height: 50px;
}

.showvideo .closex {
	display: inline-block;
}