.spin-r
{
  animation: spin-right 1s linear 3;
  -webkit-animation: spin-right 1s linear 3;
}

@keyframes spin-right {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spin-l
{
  animation: spin-left 1s linear 3;
  -webkit-animation: spin-left 1s linear 3;
}

@keyframes spin-left {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

.spin-infinite-r
{
  -webkit-animation-name: spin-infinite-right;
    -webkit-animation-duration: 3000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin-infinite-right;
    -moz-animation-duration: 3000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin-infinite-right;
    -ms-animation-duration: 3000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin-infinite-right;
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin-infinite-right {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin-infinite-l
{
  -webkit-animation-name: spin-infinite-left;
    -webkit-animation-duration: 3000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin-infinite-left;
    -moz-animation-duration: 3000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin-infinite-left;
    -ms-animation-duration: 3000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin-infinite-left;
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin-infinite-left {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}

.spin-hover-r
{
	transition: transform .9s ease-in-out;
}

.spin-hover-r:hover {
  transform: rotate(360deg);
}

.spin-hover-l
{
	transition: transform .9s ease-in-out;
}

.spin-hover-l:hover {
  transform: rotate(360deg);
}

.spin-zoomin-hover-r{
  width: 80px;
  height: 80px;
  transition: width 2s, height 2s, transform 2s;
}

.spin-zoomin-hover-r:hover {
  width: 300px;
  height: 300px;
  transform: rotate(360deg);
}

.spin-zoomin-hover-l{
  width: 80px;
  height: 80px;
  transition: width 2s, height 2s, transform 2s;
}

.spin-zoomin-hover-l:hover {
  width: 300px;
  height: 300px;
  transform: rotate(-360deg);
}

.spin-zoomout-hover-r{
  width: 300px;
  height: 300px;
  transition: width 2s, height 2s, transform 2s;
}

.spin-zoomout-hover-r:hover {
  width: 80px;
  height: 80px;
  transform: rotate(360deg);
}

.spin-zoomout-hover-l{
  width: 300px;
  height: 300px;
  transition: width 2s, height 2s, transform 2s;
}

.spin-zoomout-hover-l:hover {
  width: 80px;
  height: 80px;
  transform: rotate(-360deg);
}


.slidein-left{
  animation-duration: 4s;
  animation-name: slidein-left;
}

@keyframes slidein-left {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: 0%;
  }
}

.slidein-right{
	position: absolute;
	right: 0%;
  animation-duration: 4s;
  animation-name: slidein-right;
}

@keyframes slidein-right {
 from {
	 right: 100%;
  }

  to {
	  right: 0%;
  }
}


.slidein-up{
  animation-duration: 3s;
  animation-name: slidein-up;
}

@keyframes slidein-up {
  from {
    margin-top: 100%;
  }

  to {
    margin-top: 0%;
  }
}


.slidein-down{
	position: absolute;
	bottom: 0%;
	left: 0%;
  animation-duration: 4s;
  animation-name: slidein-down;
}

@keyframes slidein-down {
 from {
    margin-bottom: 100%;
  }

  to {
    margin-bottom: 0%;
  }
}

.slidein-mid-left{
	position: absolute;
	right: 50%;
  animation-duration: 4s;
  animation-name: slidein-mid-left;
}

@keyframes slidein-mid-left {
  from {
    right: 0%;
  }

  to {
	  right: 50%;
  }
}

.slidein-mid-right{
	position: absolute;
	left: 50%;
  animation-duration: 4s;
  animation-name: slidein-mid-right;
}

@keyframes slidein-mid-right {
  from {
    left: 0%;
  }

  to {
	  left: 50%;
  }
}

.in-from-right{
	position: absolute;
	left: 6%;
  animation-duration: 2s;
  animation-name: in-from-right;
}

@keyframes in-from-right {
  from {
    left: 0%;
  }

  to {
	  left: 6%;
  }
}

.in-from-left{
	position: absolute;
	right: 6%;
  animation-duration: 2s;
  animation-name: in-from-left;
}

@keyframes in-from-left {
  from {
    right: 0%;
  }

  to {
	  right: 6%;
  }
}

.in-from-top{
	position: absolute;
	top: 20%;
  animation-duration: 2s;
  animation-name: in-from-top;
}

@keyframes in-from-top {
  from {
    top: 0%;
  }

  to {
	  top: 20%;
  }
}

.in-from-bottom{
	position: absolute;
	bottom: 20%;
  animation-duration: 2s;
  animation-name: in-from-bottom;
}

@keyframes in-from-bottom {
  from {
    bottom: 0%;
  }

  to {
	  bottom: 20%;
  }
}


/* letter box*/
.letter-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.hover-mail {
  position: absolute;
  height: 150px;
  width: 200px;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  transition: 0.4s;
}
.hover-mail .body {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 200px;
  border-color: transparent transparent #e95f55 transparent;
  z-index: 2;
}
.hover-mail .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 0.4s 0.4s, z-index 0.2s 0.4s;
  -moz-transform-origin: 50% 0%;
  -moz-transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
  transform-origin: 50% 0%;
  transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
  border-color: #cf4a43 transparent transparent transparent;
  z-index: 2;
}
.hover-mail .back-fold {
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 100px;
  background: #cf4a43;
  z-index: 0;
}
.hover-mail .left-fold {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 100px;
  border-color: transparent transparent transparent #e15349;
  z-index: 2;
}
.hover-mail .letter {
  left: 20px;
  bottom: 0px;
  position: absolute;
  width: 160px;
  height: 60px;
  background: white;
  z-index: 1;
  overflow: hidden;
  -webkit-transition: 0.4s 0.2s;
  -moz-transition: 0.4s 0.2s;
  transition: 0.4s 0.2s;
}
.hover-mail .letter .letter-border {
  height: 10px;
  width: 100%;
  background: repeating-linear-gradient(-45deg, #cb5a5e, #cb5a5e 8px, transparent 8px, transparent 18px);
}
.hover-mail .letter .letter-title {
  margin-top: 10px;
  margin-left: 5px;
  height: 10px;
  width: 40%;
  background: #cb5a5e;
}
.hover-mail .letter .letter-context {
  margin-top: 10px;
  margin-left: 5px;
  height: 10px;
  width: 20%;
  background: #cb5a5e;
}
.hover-mail .letter .letter-stamp {
  margin-top: 30px;
  margin-left: 120px;
  border-radius: 100%;
  height: 30px;
  width: 30px;
  background: #cb5a5e;
  opacity: 0.3;
}

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

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

.typewriter {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid gray; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .08em; /* Adjust as needed */
  animation: 
    typing 5.5s steps(30, end),
    blink-caret .8s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: gray }
}

/* crousel slider */
.slide-master {
  position: relative;
  width: 600px;
  height: 300px;
  margin: 0 auto;
  box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.25);
}

.slide-doc {
  overflow: hidden;
  position: relative;
  background: #222;
}
	
	#epdCarousel {
  width: 10000px;
  position: relative;
  top: 0; 
left: -450px;
}

.item {
  height: 300px;
  width: 500px;
  cursor: pointer;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item#b1 { background: #556270 }
.item#b2 { background: #4ECDC4 }
.item#b3 { background: #9CE462 }
.item#b4 { background: #FF6B6B }
.item#b5 { background: #C44D33 }

.slider-btn {
  cursor: pointer;
  position: absolute;
  bottom: 38%;
  font-size: 14pt;
}

#prevBtn { left: 0 }
#nextBtn { right: 0 }

.transition {
  transition: .7s;
}

/* blink */

.epd-blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* wave */
.epd-wave {
  height: 100px; /* height */
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
}

.epd-wv {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23003F7C'/%3E%3C/svg%3E");
  position: absolute;
  width: 200%;
  height: 100%;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
}

.epd-wv:nth-of-type(2) {
  bottom: 0;
  animation: wave 18s linear reverse infinite;
  opacity: 0.5;
}

.epd-wv:nth-of-type(3) {
  bottom: 0;
  animation: wave 20s -1s linear infinite;
  opacity: 0.5;
}

@keyframes wave {
    0% {transform: translateX(0);}
    50% {transform: translateX(-25%);}
    100% {transform: translateX(-50%);}
}

/* up-down */

.up-down {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
.up-down {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-30px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-30px); }
}