.email_box {
  position: relative;
}

.mail_base {
  /*position: absolute;*/
  /*height: 100px;*/
  /*width: 150px;*/
  background: #59ABE3;
  top: 49%;
  right: 2%;
  /*transform: translate(-50%, -50%);*/
  /*box-shadow: 5px 6px 10px -5px #000000;*/
}

.flex-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.mail_left {
  background: #3892D0;
  width: 15px;
  height: 20px;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.mail_right {
  background: #3892D0;
  width: 15px;
  height: 20px;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.mail_top {
  background: #1978B8;
  width: 30px;
  height: 15px;
  position: absolute;
  top: 0%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.mail_top_shadow {
  width: 30px;
  height: 15px;
  position: absolute;
  top: 1.5%;
  left: 2%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #205377;
}

.notification_circle {
  background: #FF5151;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 10%;
  right: -10%;
  right: -28%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1.5px 2px 10px -1px #000000;
  /*animation: 0.6s notice-me cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;*/
}

@keyframes notice-me {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(-100%);
  }
}
.notification_num {
  color: white;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
}

@media screen and (max-width: 1023px) {
  .sm-no {
    display: none;
  }
  .notification_circle {
    animation: 0.6s notice-me cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
  }
  .email_box {
    position: initial;
  }
  .mail_base {
    position: absolute;
    top: 38%;
    right: 8%;
    border: 1px solid #9E9E9E;
    background: #dddddd;
  }
}
@media screen and (max-width: 850px) {
  .mail_base {
    right: 11%;
  }
}
@media screen and (max-width: 680px) {
  .mail_base {
    right: 13%;
  }
}
@media screen and (max-width: 580px) {
  .mail_base {
    right: 16%;
  }
}
@media screen and (max-width: 460px) {
  .mail_base {
    right: 18%;
  }
}
@media screen and (max-width: 430px) {
  .mail_base {
    right: 22%;
  }
}
@media screen and (max-width: 414px) {
  .mail_base {
    right: 24%;
  }
}
@media screen and (min-width: 1024px)  {
  .sm-in {
    display: none;
  }
  .email_box {
    margin-right: 10px;
  }
  .mail_top {
    background: #074055;
  }
  .mail_base {
    background: #bdbdbd;
  }
  .mail_left,
  .mail_right {
    background: #fff;
  }
}
.mail_top {
    background: #074055;
  }
  .mail_left,
  .mail_right {
    background: #fff;
  }