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


* {
    box-sizing: border-box;
}




body {
	background:#870F00;
		
		
}

.header{
	position:absolute;
	top:3%;
	width:100%;
	height:100%;
	z-index:-z;
	
	-webkit-animation: title 10s; 
    animation: title 10s;
	
}

@-webkit-keyframes title {
	0% { top:-20%; }
	70% {top:-20%; }
    100%  { top:3%; }
   
}
@keyframes title {
	0% { top:-20%; }
	70% {top:-20%; }
    100%  { top:3%; }
	
	}






.container{
	
	
	position:fixed;
	width:100%;
	height:100%;
	
	
	}

.button1{
	position:relative;
	width:240px;
	height:105px;
	right:392px;
	top:223px;
	z-index:2;
	
	
	-webkit-animation: button 10s; 
    animation: button 10s;
	
	
}


@-webkit-keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
   
}
@keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
	
	}

	
.button2{
	position:relative;
	width:240px;
	height:105px;
	right:392px;
	top:238px;
	z-index:2;
	
-webkit-animation: button 10s; 
    animation: button 10s;
	
	
}


@-webkit-keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
   
}
@keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
	
	}


.button3{
	position:relative;
	width:240px;
	height:105px;
	right:393px;
	top:254px;
	z-index:2;
	
	
	-webkit-animation: button 10s; 
    animation: button 10s;
	
	
}


@-webkit-keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
   
}
@keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
	
	}

.button4{
	position:relative;
	width:240px;
	height:105px;
	left:392px;
	top:-91px;
	z-index:2;
	
	
	-webkit-animation: button 10s; 
    animation: button 10s;
	
	
}


@-webkit-keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
   
}
@keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
	
	}

.button5{
	position:relative;
	width:240px;
	height:105px;
	left:392px;
	top:-76px;
	z-index:2;
	
	
	-webkit-animation: button 10s; 
    animation: button 10s;
	
	
}


@-webkit-keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
   
}
@keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
	
	}

.button6{
	position:relative;
	width:240px;
	height:105px;
	left:393px;
	top:-61px;
	z-index:2;
	
	
	-webkit-animation: button 10s; 
    animation: button 10s;
	
	
}


@-webkit-keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
   
}
@keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
	
	}


.panagia{

	position:absolute;
	top:25%;
	width:100%;
	height:100%;
	z-index:-4;



-webkit-animation: Panagia 10s; 
    animation: Panagia 10s;
	
	
}


@-webkit-keyframes Panagia {
	0% { top:100%;}
	
	70% { top:25%;  }
    100%  { top:25%; }
   
}
@keyframes Panagia {
	0% { top:100%;}

	70% { top:25%;  }
    100%  { top:25%; }
   
}





.left{
	position:absolute;
	width:100%;
	height:100%;
	left:237px;
	top:180px;
	z-index:-6;
	
	-webkit-animation: left 10s; 
    animation: left 10s;
}

@-webkit-keyframes left {
	0% { left:0%; visibility:hidden;}
	70% {left:0%; visibility:hidden;}
    100%  { left:237px; visibility:visible;}
   
}
@keyframes left {
	0% { left:0%; visibility:hidden;}
	70% {left:0%; visibility:hidden;}
    100%  { left:237px; visibility:visible;}
   
   
}




.right{
	position:absolute;
	width:100%;
	height:100%;
	right:237px;
	top:180px;
	z-index:-6;
	
	
-webkit-animation: right 10s; 
    animation: right 10s;
}

@-webkit-keyframes right {
	0% { right:0%; visibility:hidden;}
	70% {right:0%; visibility:hidden;}
    100%  {right:237px; visibility:visible; }
}
@keyframes right {
	0% { right:0%; visibility:hidden;}
	70% {right:0%; visibility:hidden;}
    100%  {right:237px; visibility:visible; }
}



.monastiri{
	position:absolute;
	width:100%;
	height:100%;
	top:70%;
	z-index:-1;
	
	
	}
	
.cover{
	position:absolute;
	width:100%;
	height:100%;
	top:90%;
	z-index:-2;
	
	}

.bottom{
	position:absolute;
	width:100%;
	height:100%;
	top:80%;
	z-index:-z;
	
	
	
	}
	
.audio {visibility:hidden;}
	
	
	
	
	
	/*--------------------------------------------TABLET--------------------------------------------------------------------------------------*/
	
	
	
	
	
	@media screen and (max-width: 1200px) {
		
		
		body {
	background:#870F00;
		
		
}

		
		
		
		
		
		
		
		
.header{
	position:absolute;
	top:3%;
	width:100%;
	height:100%;
	z-index:-z;
	
	-webkit-animation: title 10s; 
    animation: title 10s;
	
}

@-webkit-keyframes title {
	0% { top:-20%; }
	70% {top:-20%; }
    100%  { top:3%; }
   
}
@keyframes title {
	0% { top:-20%; }
	70% {top:-20%; }
    100%  { top:3%; }
	
	}






.container{
	
	
	position:fixed;
	width:100%;
	height:100%;
	

	overflow:initial;
	
	
	}

.button1{
	position:relative;
	width:240px;
	height:105px;
	right:332px;
	top:223px;
	z-index:2;
	
	
	-webkit-animation: button 10s; 
    animation: button 10s;
	
	
}


@-webkit-keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
   
}
@keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
	
	}

	
.button2{
	position:relative;
	width:240px;
	height:105px;
	right:332px;
	top:238px;
	z-index:2;
	
-webkit-animation: button 10s; 
    animation: button 10s;
	
	
}


@-webkit-keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
   
}
@keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
	
	}


.button3{
	position:relative;
	width:240px;
	height:105px;
	right:333px;
	top:254px;
	z-index:2;
	
	
	-webkit-animation: button 10s; 
    animation: button 10s;
	
	
}


@-webkit-keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
   
}
@keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
	
	}

.button4{
	position:relative;
	width:240px;
	height:105px;
	left:332px;
	top:-91px;
	z-index:2;
	
	
	-webkit-animation: button 10s; 
    animation: button 10s;
	
	
}


@-webkit-keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
   
}
@keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
	
	}

.button5{
	position:relative;
	width:240px;
	height:105px;
	left:332px;
	top:-76px;
	z-index:2;
	
	
	-webkit-animation: button 10s; 
    animation: button 10s;
	
	
}


@-webkit-keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
   
}
@keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
	
	}

.button6{
	position:relative;
	width:240px;
	height:105px;
	left:333px;
	top:-61px;
	z-index:2;
	
	
	-webkit-animation: button 10s; 
    animation: button 10s;
	
	
}


@-webkit-keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
   
}
@keyframes button {
	0% { visibility:hidden}
	
	99% { visibility:hidden}
    100%  { visibility:visible}
	
	}





.panagia{

	position:absolute;
	top:25%;
	width:100%;
	height:100%;
	z-index:-4;



-webkit-animation: Panagia 10s; 
    animation: Panagia 10s;
	
	
}


@-webkit-keyframes Panagia {
	0% { top:100%;}
	
	70% { top:25%;  }
    100%  { top:25%; }
   
}
@keyframes Panagia {
	0% { top:100%;}

	70% { top:25%;  }
    100%  { top:25%; }
   
}





.left{
	position:absolute;
	width:100%;
	height:100%;
	left:177px;
	top:180px;
	z-index:-6;
	
	-webkit-animation: left 10s; 
    animation: left 10s;
}

@-webkit-keyframes left {
	0% { left:0%; visibility:hidden;}
	70% {left:0%; visibility:hidden;}
    100%  { left:177px; visibility:visible;}
   
}
@keyframes left {
	0% { left:0%; visibility:hidden;}
	70% {left:0%; visibility:hidden;}
    100%  { left:177px; visibility:visible;}
   
   
}




.right{
	position:absolute;
	width:100%;
	height:100%;
	right:177px;
	top:180px;
	z-index:-6;
	
	
-webkit-animation: right 10s; 
    animation: right 10s;
}

@-webkit-keyframes right {
	0% { right:0%; visibility:hidden;}
	70% {right:0%; visibility:hidden;}
    100%  {right:177px; visibility:visible; }
}
@keyframes right {
	0% { right:0%; visibility:hidden;}
	70% {right:0%; visibility:hidden;}
    100%  {right:177px; visibility:visible; }
}



.monastiri{
	position:absolute;
	width:100%;
	height:100%;
	top:70%;
	z-index:-1;
	
	
	}
	
.cover{
	position:absolute;
	width:100%;
	height:100%;
	top:90%;
	z-index:-2;
	
	}

.bottom{
	position:absolute;
	width:100%;
	height:100%;
	top:80%;
	z-index:-z;
	
	
	
	}
	
.audio {visibility:hidden;}


	
	}
	
	
	
	@media screen and (max-width: 940px) {
	
	
	
	/*----------------------------------------------------------BUTTONS ONLY------------------------*/
	
	
		
			
			body {
	background:url(background940.png);
		
		
}
		
		
		
		
		
.header{
	position:relative;
	top:0%;
	width:100%;
	height:100%;
	z-index:-z;
	
	margin-bottom:3em;
	
	
	
	
	-webkit-animation: none; 
    animation: none;
	
	
	
}








.container{
	
	
	position:absolute;

	overflow:hidden;
	
	width:99%;
	height:100%;
	
	
	}

.button1{
	position:absolute;
	width:40%;
	height:40%;
	
	text-align:left;
	
	
	top:11em;
	
	
	
	z-index:2;
	
margin:2em 4em 2em 2em;
	
	
	-webkit-animation: none; 
    animation: none;
	
	
}



	
.button2{
	position:absolute;
	width:40%;
	height:40%;
	
	
	
	
	text-align:left;
	
	top:21em;
	
	
	
	z-index:2;
	

margin:2em 4em 2em 2em;
	
-webkit-animation: none; 
    animation: none;
	
	
}





.button3{
	position:absolute;
	width:40%;
	height:40%;
	
	text-align:left;
	
	
	
	top:31em;
	
	
	
	z-index:2;
	
margin:2em 4em 2em 2em;
	
	
	-webkit-animation: none; 
    animation: none;
	
	
}




.button4{
	position:absolute;
	width:40%;
	height:40%;
	
	text-align:right;
	
	
	top:11em;
	
	
	
	
	z-index:2;
	
margin:2em 2em 2em 4em;	
	
	-webkit-animation: none; 
    animation: none;
	
	
}




.button5{
	position:absolute;
	width:40%;
	height:40%;
	
	text-align:right;
	
	
	top:21em;
	

	
	
	z-index:2;
	
	margin:2em 2em 2em 4em;	
	
	
	-webkit-animation: none; 
    animation: none;
	
	
}




.button6{
	position:absolute;
	width:40%;
	height:40%;
	
	text-align:right;
	
	
	top:31em;
	
	
	
	z-index:2;
	
	margin:2em 2em 2em 4em;	
	
	-webkit-animation: none; 
    animation: none;
	
	
}








.panagia{
	
	position:absolute;
	top:10%;
	width:30%;
	height:30%;
	z-index:-4;

	visibility:hidden;


-webkit-animation: none; 
    animation: none;
	
	
}







.left{
	position:absolute;
	width:30%;
	height:30%;
	left:0px;
	top:0px;
	z-index:-6;
	visibility:hidden;
	
	
	-webkit-animation: none; 
    animation: none;
}





.right{
	position:absolute;
	width:30%;
	height:30%;
	right:0px;
	top:0px;
	z-index:-6;
	
	
	visibility:hidden;
	
-webkit-animation: none; 
    animation: none;
}





.monastiri{
	position:absolute;
	width:30%;
	height:30%;
	top:10%;
	z-index:-1;
	
	visibility:hidden;
	
	
	}
	
.cover{
	position:absolute;
	width:10%;
	height:10%;
	top:10%;
	z-index:-2;
	
	
	
		visibility:hidden;
	
	
	
	}

.bottom{
	position:absolute;
	width:100%;
	height:100%;
	top:none;
	z-index:-z;
	
	visibility:hidden;
	
	
	
	}
	
.audio {visibility:hidden;}
		
		
	
	
	
	
	
	
	
	
	
	
	
	}
	
	
	
	
	
	
	
	
	
	@media screen and (max-width: 800px) {
	
	
	
	/*----------------------------------------------------------(continue)BUTTONS ONLY------------------------*/
	
	
		
			
			body {
	background:url(background940.png);
		
		
}
		
		
		
		
		
.header{
	position:relative;
	top:0%;
	width:100%;
	height:100%;
	z-index:-z;
	
	margin-bottom:3em;
	
	
	
	
	-webkit-animation: none; 
    animation: none;
	
	
	
}








.container{
	
	
	position:absolute;

	overflow:hidden;
	
	width:98%;
	height:100%;
	
	
	}

.button1{
	position:absolute;
	width:40%;
	height:40%;
	
	text-align:left;
	
	
	top:11em;
	
	
	
	z-index:2;
	
margin:2em;
	
	
	-webkit-animation: none; 
    animation: none;
	
	
}



	
.button2{
	position:absolute;
	width:40%;
	height:40%;
	
	
	
	
	text-align:left;
	
	top:21em;
	
	
	
	z-index:2;
	

margin:2em;
	
-webkit-animation: none; 
    animation: none;
	
	
}





.button3{
	position:absolute;
	width:40%;
	height:40%;
	
	text-align:left;
	
	
	
	top:31em;
	
	
	
	z-index:2;
	
margin:2em;
	
	
	-webkit-animation: none; 
    animation: none;
	
	
}




.button4{
	position:absolute;
	width:40%;
	height:40%;
	
	text-align:right;
	
	
	top:11em;
	
	
	
	
	z-index:2;
	
margin:2em;	
	
	-webkit-animation: none; 
    animation: none;
	
	
}




.button5{
	position:absolute;
	width:40%;
	height:40%;
	
	text-align:right;
	
	
	top:21em;
	

	
	
	z-index:2;
	
	margin:2em;
	
	
	-webkit-animation: none; 
    animation: none;
	
	
}




.button6{
	position:absolute;
	width:40%;
	height:40%;
	
	text-align:right;
	
	
	top:31em;
	
	
	
	z-index:2;
	
	margin:2em;
	
	-webkit-animation: none; 
    animation: none;
	
	
}








.panagia{
	
	position:absolute;
	top:10%;
	width:30%;
	height:30%;
	z-index:-4;

	visibility:hidden;


-webkit-animation: none; 
    animation: none;
	
	
}







.left{
	position:absolute;
	width:30%;
	height:30%;
	left:0px;
	top:0px;
	z-index:-6;
	visibility:hidden;
	
	
	-webkit-animation: none; 
    animation: none;
}





.right{
	position:absolute;
	width:30%;
	height:30%;
	right:0px;
	top:0px;
	z-index:-6;
	
	
	visibility:hidden;
	
-webkit-animation: none; 
    animation: none;
}





.monastiri{
	position:absolute;
	width:30%;
	height:30%;
	top:10%;
	z-index:-1;
	
	visibility:hidden;
	
	
	}
	
.cover{
	position:absolute;
	width:10%;
	height:10%;
	top:10%;
	z-index:-2;
	
	
	
		visibility:hidden;
	
	
	
	}

.bottom{
	position:absolute;
	width:100%;
	height:100%;
	top:none;
	z-index:-z;
	
	visibility:hidden;
	
	
	
	}
	
.audio {visibility:hidden;}
		
		
	
	
	
	
	
	
	
	
	
	
	
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

        /*-----------------------------------------------------------mobile------------------------*/

	@media screen and (max-width: 640px) {
		
		
		
			
			body {
	background:url(backgroundMOBILE.png);
		
		
}
		
		
		
		
		
.header{
	position:relative;
	top:0%;
	width:100%;
	height:100%;
	z-index:-z;
	
	margin-bottom:3em;
	
	visibility:hidden;
	
	
	-webkit-animation: none; 
    animation: none;
	
	
	
}








.container{
	
	
	position:relative;

	overflow:hidden;
	
	
	
	
	}

.button1{
	position:relative;
	width:100%;
	height:100%;
	
	right:0em;
	top:0px;
	
	z-index:2;
	
margin:1em 0em 1em 1em;


text-align:inherit;
	
	
	text-align:none;
	
	-webkit-animation: none; 
    animation: none;
	
	
}



	
.button2{
	position:relative;
	width:100%;
	height:100%;
	
	right:0em;
	top:0px;
	
	z-index:2;
	
	
	text-align:inherit;

margin:1em 0em 1em 1em;
	
-webkit-animation: none; 
    animation: none;
	
	
}





.button3{
	position:relative;
	width:100%;
	height:100%;
	
	right:0em;
	top:0px;
	
	z-index:2;
	
margin:1em 0em 1em 1em;
	
	
	
	
	text-align:inherit;
	
	-webkit-animation: none; 
    animation: none;
	
	
}




.button4{
	position:relative;
	width:100%;
	height:100%;
	
	left:0em;
	top:0px;
	
	
	text-align:inherit;
	
	z-index:2;
	
margin:1em 1em 1em 0em;
	
	
	-webkit-animation: none; 
    animation: none;
	
	
}




.button5{
	position:relative;
	width:100%;
	height:100%;
	
	left:0em;
	top:0px;
	
	
	
	text-align:inherit;
	
	z-index:2;
	
	margin:1em 1em 1em 0em;
	
	
	-webkit-animation: none; 
    animation: none;
	
	
}




.button6{
	position:relative;
	width:100%;
	height:100%;
	
	left:0em;
	top:0px;
	
	
	text-align:inherit;
	
	z-index:2;
	
	margin:1em 1em 1em 0em;
	
	-webkit-animation: none; 
    animation: none;
	
	
}








.panagia{
	
	position:absolute;
	top:10%;
	width:30%;
	height:30%;
	z-index:-4;

	visibility:hidden;


-webkit-animation: none; 
    animation: none;
	
	
}







.left{
	position:absolute;
	width:30%;
	height:30%;
	left:0px;
	top:0px;
	z-index:-6;
	visibility:hidden;
	
	
	-webkit-animation: none; 
    animation: none;
}





.right{
	position:absolute;
	width:30%;
	height:30%;
	right:0px;
	top:0px;
	z-index:-6;
	
	
	visibility:hidden;
	
-webkit-animation: none; 
    animation: none;
}





.monastiri{
	position:absolute;
	width:30%;
	height:30%;
	top:10%;
	z-index:-1;
	
	visibility:hidden;
	
	
	}
	
.cover{
	position:absolute;
	width:10%;
	height:10%;
	top:10%;
	z-index:-2;
	
	
	
		visibility:hidden;
	
	
	
	}

.bottom{
	position:absolute;
	width:100%;
	height:100%;
	top:none;
	z-index:-z;
	
	visibility:hidden;
	
	
	
	}
	
.audio {visibility:hidden;}
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	}