.imgmove {
  -webkit-animation: mover 1s infinite alternate;
  animation: mover 1s infinite alternate;
}

@-webkit-keyframes mover {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-20px);
  }
}

@keyframes mover {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-10px);
  }
}


#more {
  display: none;
}



.letter-image {
  /* position: absolute; */
  position: relative;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.animated-mail {
  position: absolute;
  height: 150px;
  width: 200px;
  -webkit-transition: .4s;
  -moz-transition: .4s;
  transition: .4s;

  .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;

  }

  .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: #cf4a43 transparent transparent transparent;
    z-index: 2;

  }

  .back-fold {
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 100px;
    background: #cf4a43;
    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 #e15349;
    z-index: 2;
  }

  .letter {
    /* left: 20px;
    bottom: 0px;
    position: absolute;
    width: 160px;
    height: 60px;
    background: white;
    z-index: 1;
    overflow: hidden;
    -webkit-transition: .4s .2s;
    -moz-transition: .4s .2s;
    transition: .4s .2s; */

    bottom: 0px;
    position: absolute;
    width: 199px;
    height: 60px;
    background: white;
    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: #cb5a5e;
    }

    .letter-context {
      margin-top: 10px;
      margin-left: 5px;
      height: 10px;
      width: 20%;
      background: #cb5a5e;
    }

    .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: .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);
  }

  .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;
  }

  .animated-mail .letter {
    height: 225px;
  }

  .shadow {
    width: 250px;
  }
}

.buttonNew {
  margin-bottom: 3px;
  left: 0px;
  font-size: 10px;

  width: 100%;
  background: black;
  color: white;
  font-weight: 600;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}



.IMGICON {
  margin-left: 11%;
  position: absolute;
  left: 9px;
  top: 56%;
  z-index: 3;
}

.IMGICON1 {
  position: absolute;
  left: 52px;
  top: 48%;
  width: 114px;
  height: 60px;
  z-index: 3;
}

.IMGICON2 {
  position: absolute;
  left: 49px;
top: 47%;
width: 109px;
height: 80px;
z-index: 3;

}


button {

  background-color: transparent;
  border: none;
  color: black;
  font-weight: 600;
  text-align: center;
  font-size: 14px;
  /* padding: 0px; */
  transition: all 0.5s;
  cursor: pointer;
  /* margin: 36px; */
  /* top: 78%; */
}

button {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.ribbon {
  width: 74px;
  font-weight: 600;
  font-size: 14px;
  padding: 6px;
  position: absolute;
  right: -24px;
  top: 35px;
  text-align: center;
  border-radius: 25px;
  transform: rotate(33deg);
  background-color: #ff9800;
  color: white;
  z-index: 3;
}

.ribbons {
  width: 74px;

  position: relative;
  right: -140px;
  top: 62px;

  transform: rotate(33deg);

  color: white;
  z-index: 3;
}




/* Parent Container */
.content_img {

  width: 200px;
  height: 200px;

  margin-right: 10px;
}

/* Child Text Container */
.content_img div {
  position: absolute;
  bottom: 0;
  right: 0;
  background: black;
  color: white;
  margin-bottom: 5px;
  font-family: sans-serif;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: visibility 0s, opacity 0.5s linear;
  transition: visibility 0s, opacity 0.5s linear;
}

/* Hover on Parent Container */
.content_img:hover {
  cursor: pointer;
}

.content_img:hover div {
  width: 150px;
  padding: 8px 15px;
  visibility: visible;
  opacity: 0.7;
}

.portfimg {
  /* width: 200px;
  height: 200px; */
  margin-right: 20px;
}
.portfimg1 {
  /* width: 200px;
  height: 200px; */
  margin-right: 20px;
}


.btn-round {
  border: none;
  padding: 5px;
  width: 100px;
  color: white;
  position: absolute;
  top: 56%;
  right: 27%;
  background-color: red;
}

.portfBtn {
  background: red;
  color: white;
  width: 70px;
  border-radius: 40px;
  font-size: 13px;;
  padding: 2px;
  margin-top: 10px;
  font-family: myfontPara;
}

.button-overlay {
  position: relative;
  display: inline-block;
}

.button-overlay button {
  color: white;
  position: absolute;
  top: 84%;
  border-radius: 50px;
  left: 55%;
  background-color: black;
  transform: translate(0%, -53%);
  padding: 7px;
}


.blogbtn {
  border-color: red;
  color: white;
  background-color: red;
  border-radius: 0px;
}

.ribbon1 {
  animation: wiggle 2s linear infinite;
}

/* Keyframes */
@keyframes wiggle {

  0%,
  7% {
    transform: rotateZ(0);
  }

  15% {
    transform: rotateZ(-15deg);
  }

  20% {
    transform: rotateZ(10deg);
  }

  25% {
    transform: rotateZ(-10deg);
  }

  30% {
    transform: rotateZ(6deg);
  }

  35% {
    transform: rotateZ(-4deg);
  }

  40%,
  100% {
    transform: rotateZ(0);
  }
}

.ribbon1 {
  /* background: black;
    width: 27px;
    height: 37px; */
    border-radius: 55px;
    position: absolute;
    right: -3%;
    top: 17%;
    transform: rotate(20deg);
    z-index: 3;
}


/* .ribbon2 {
  animation: wiggle 2s linear infinite;
} */

/* Keyframes */
@keyframes wiggle {

  0%,
  7% {
    transform: rotateZ(0);
  }

  15% {
    transform: rotateZ(-15deg);
  }

  20% {
    transform: rotateZ(10deg);
  }

  25% {
    transform: rotateZ(-10deg);
  }

  30% {
    transform: rotateZ(6deg);
  }

  35% {
    transform: rotateZ(-4deg);
  }

  40%,
  100% {
    transform: rotateZ(0);
  }
}

/* .ribbon2 {
  
  width: 42px;
  height: 52px;
  border-radius: 55px;
  position: absolute;
  right: 2%;
  top: 78%;
  transform: rotate(20deg);
  z-index: 3;
} */
.ribbon2 {
  border-radius: 55px;
  position: absolute;
  right: 5%;
  top: 76%;
  transform: rotate(358deg);
  z-index: 3;
}

.ribbon3 {
  animation: wiggle 2s linear infinite;
}

/* Keyframes */
@keyframes wiggle {

  0%,
  7% {
    transform: rotateZ(0);
  }

  15% {
    transform: rotateZ(-15deg);
  }

  20% {
    transform: rotateZ(10deg);
  }

  25% {
    transform: rotateZ(-10deg);
  }

  30% {
    transform: rotateZ(6deg);
  }

  35% {
    transform: rotateZ(-4deg);
  }

  40%,
  100% {
    transform: rotateZ(0);
  }
}

.ribbon3 {
  /* background: black; */
  width: 42px;
  height: 52px;
  border-radius: 55px;
  position: absolute;
  /* right: 14%;
  top: 70%; */
  transform: rotate(20deg);
  z-index: 3;
}