@charset "UTF-8";
/* kodikas gia animation */

.reveal {
  position: relative;
  opacity: 0;
}
.reveal.active {
  opacity: 1;
}
.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}
.active.fade-left {
  animation: fade-left 1s ease-in;
}
.active.fade-right {
  animation: fade-right 1s ease-in;
}
@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.fadeTo{
  animation: fadeIn linear 6s;
}
.fadeInUp {
  animation: fadeInUp 2s ease-in-out; }
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInLeft {
  animation: fadeInLeft 2s ease-in-out;}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-300px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInRight {
  animation: fadeInRight 2s ease-in-out;}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(300px);
  }
  to {
    opacity: 1;
  }
}
.fade-in-text {
  padding: 30px 5px!important;
  line-height:normal!important;
  color: white;
  animation: fadeIn linear 1s;
  -webkit-animation: fadeIn linear 1s;
  -moz-animation: fadeIn linear 1s;
  -o-animation: fadeIn linear 1s;
  -ms-animation: fadeIn linear 1s;
  text-shadow: 0px 1px 0px black, 1px 2px 0px rgb(0 0 0 / 40%)
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
div.flip-text {
  color:var(--color1);
  font-size:80%;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

.flip{
  height:31px;
  overflow:hidden;
}

.flip > div > div {
  color:var(--color1);
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

.flip div:first-child {
  animation: show 5s linear infinite;
}

.flip div div {
  background:var(--color1);
}
.flip div:first-child div {
  background:var(--color1);
}
.flip div:last-child div {
  background:var(--color1);
}
@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

.active.fadeopacity{
   opacity: 0;
   animation: fadeImg 1s ease-in-out forwards;
   animation-delay: 1s;
}

.fadeopacity{
   opacity: 0;
   animation: fadeImg 1s ease-in-out forwards;
   animation-delay: 1s;
}

@keyframes fadeImg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.showCont{
 animation: showDisc 1s cubic-bezier(.74, .06, .4, .92) forwards;
}

.active.showCont2{
 animation: showDisc2 1s cubic-bezier(.74, .06, .4, .92) forwards;
}

@keyframes showDisc2 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes showDisc {
  0% {
    width: 0px;
  }
  100% {
    width: 500px;
  }
}
.fadeopacitybellow{
 animation: fadeBellow 1s cubic-bezier(.74, .06, .4, .92) forwards;
 animation-delay: 1s;
}

@keyframes fadeBellow {
  0% {
    opacity: 0;
    bottom: -25px;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}

.letter-image {
	position: relative;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	-webkit-transform: translate(-50%, -2%);
	-moz-transform: translate(-50%, -2%);
	transform: translate(-50%, -2%);
	cursor: pointer;
}

/*animated mail image
<div class="letter-image">
	<div class="animated-mail">
		<div class="back-fold"></div>
		<div class="letter">
			<div class="letter-border"></div>
			<div class="letter-title"></div>
			<div class="letter-context"></div>
			<div class="letter-stamp">
				<div class="letter-stamp-inner"></div>
			</div>
		</div>
		<div class="top-fold"></div>
		<div class="letter-body"></div>
		<div class="left-fold"></div>
	</div>
	<div class="shadow"></div>
</div>
*/

.animated-mail {
	position: relative;
	height: 150px;
	width: 200px;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	transition: .4s;
}
	
.letter-body {
		position: absolute;
		bottom: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 100px 200px;
		border-color: transparent transparent var(--color1) transparent;
		z-index: 2;
}
	
.top-fold {
		position: absolute;
		top: 50px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 50px 100px 0 100px;
		-webkit-transform-origin: 50% 0%;
		-webkit-transition: transform .4s .4s, z-index .2s .4s;
		-moz-transform-origin: 50% 0%;
		-moz-transition: transform .4s .4s, z-index .2s .4s;
		transform-origin: 50% 0%;
		transition: transform .4s .4s, z-index .2s .4s;
		border-color: var(--color1) transparent transparent transparent;
		z-index: 2;
}
	
.back-fold {
		position: absolute;
		bottom: 0;
		width: 200px;
		height: 100px;
		background: var(--color1);
		z-index: 0;
}
	
.left-fold {
		position: absolute;
		bottom: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 50px 0 50px 100px;
		border-color: transparent transparent transparent var(--color1);
		z-index: 2;
}
	
.letter {
		left: 20px;
		bottom: 0px;
		position: absolute;
		width: 160px;
		height: 60px;
		background: var(--color4);
		z-index: 1;
		overflow: hidden;
		-webkit-transition: .4s .2s;
		-moz-transition: .4s .2s;
		transition: .4s .2s;
}
		
.letter-border {
			height: 10px;
			width: 100%;
      background: repeating-linear-gradient(
        -45deg,
        #cb5a5e,
        #cb5a5e 8px,
        transparent 8px,
        transparent 18px
      );
}
		
.letter-title {
			margin-top: 10px;
			margin-left: 5px;
			height: 10px;
			width: 40%;
			background: var(--color1);
}
.letter-context {
			margin-top: 10px;
			margin-left: 5px;
			height: 10px;
			width: 20%;
			background: var(--color1);
}
		
.letter-stamp {
			margin-top: 30px;
			margin-left: 120px;
			border-radius: 100%;
			height: 30px;
			width: 30px;
			background: var(--color1);
			opacity: 0.3;
}

.shadow {
	position: absolute;
	top: 200px;
	left: 50%;
	width: 400px;
	height: 30px;
	transition: .4s;
	transform: translateX(-50%);
	-webkit-transition: .4s;
	-webkit-transform: translateX(-50%);
	-moz-transition: .4s;
	-moz-transform: translateX(-50%);
	
	border-radius: 100%;
	background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.0));
}

.letter-image:hover .animated-mail  {
			transform: translateY(50px);
			-webkit-transform: translateY(50px);
			-moz-transform: translateY(50px);
}
		
.letter-image:hover .animated-mail .top-fold {
			transition: transform .4s, z-index .2s;
			transform: rotateX(180deg);
			-webkit-transition: transform .4s, z-index .2s;
			-webkit-transform: rotateX(180deg);
			-moz-transition: transform .4s, z-index .2s;
			-moz-transform: rotateX(180deg);
			z-index: 0;
}
		
.letter-image:hover .animated-mail .letter {
			height: 180px;
}
		
.shadow {
			width: 250px;
}

/* kodikas gia animation */