.i-mail:after, .i-mail .mail-anim:after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 15px;
    height: 4px;
    border-bottom: 2px solid black;
    border-top: 2px solid black;
}

.i-mail:before, .i-mail .mail-anim:before {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 6px;
    background: black;
}

.i-success:after, .i-success .success-anim:after {
    content: "";
    position: absolute;
    bottom: 12px;
    left: 11px;
    width: 15px;
    height: 8px;
    border-bottom: 2px solid #e0b341;
    border-left: 2px solid #e0b341;
    transform: rotate(-45deg);
}

#nextRepeat, #registersubmitbuttonRepeat {
  animation: circle 6s linear infinite;
}

.registered-users svg {
  height: 1.5rem;
  width: auto;
}
.container2 {
    /*position: absolute;*/
    top: 50%;
    /*left: calc(50% - 240px);*/
    width: 540px;
}
@keyframes circle{
   100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}


.animation {
    width: 540px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.i-mail, .i-mail .mail-anim {
    width: 40px;
    height: 30px;
    border-radius: 5% 5%;
    border: 2px solid black;
    position: relative;
    animation: transformS 0.3s linear;
}
@keyframes transformS {
    50% {
        transform: scale(0.5, 0.5);
        opacity: 0.5;
    }
}
.i-mail .mail-anim {
    margin: -2px 0 0 -2px;
    animation: moveL 5.8s linear;
}
@keyframes moveL {
    100% {
        transform: translateX(220px) rotateY(90deg);
    }
}

.line {
    padding: 1px 210px;
    background-image: linear-gradient(to right, #000 30%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 15px 2px;
    background-repeat: repeat-x;
}

.i-success, .i-success .success-anim {
    width: 40px;
    height: 30px;
    border-radius: 5% 5%;
    border: 2px solid #e0b341;
    position: relative;
    animation: transformB 0.3s 1.4s linear forwards;
}
.i-success:after, .i-success .success-anim:after {
    animation: transformBA 0.3s 1.4s linear forwards;
}
@keyframes transformB {
    50% {
        transform: scale(1.5, 1.5);
        background: #e0b341;
    }
    100% {
        background: #e0b341;
    }
}
@keyframes transformBA {
    100% {
        border-bottom: 2px solid #fff;
        border-left: 2px solid #fff;
    }
}
.i-success .success-anim {
    margin: -2px 0 0 -2px;
    animation: moveR 2.8s 1s linear;
}
@keyframes moveR {
    0% {
        transform: translateX(-220px) rotateY(90deg);
    }
    50% {
        transform: translateX(0) rotateY(0);
    }
}

.message {
    text-align: center;
    margin-top: 10px;

}
.container2 {
    margin-top:50px;
}
#sign-in-container {
   /* min-width:600px; */
}
@media (max-width:992px) {
    .container2{
        width: 440px;
    }  
    #sign-in-container {
        min-width: 400px;
    }  
    .animation {
        width: 440px;
    }
    .line {
        padding: 1px 180px;
    }
}
@media (max-width:500px) {
    #sign-in-container {
        min-width: 340px;
    }
    .container2{
        width: 340px;
    }
    .animation {
        width: 340px;
    }
    .line {
        padding: 1px 120px;
    }  
}


.btn-download.w100,
.klio9 .btn-download {
  width:100%
}
.btn-download {
  background-color:#fff;
  -webkit-box-shadow:0 20px 40px 0 rgba(0,0,0,.11);
  box-shadow:0 20px 40px 0 rgba(0,0,0,.11);
  color:#1c1c1e;
  display:inline-block;
  font-family:PT Sans Narrow,Helvetica,Arial,sans-serf;
  font-size:1.2rem;
  font-weight:700;
  height:72px;
  line-height:20px;
  overflow:hidden;
  padding:15px 15px 15px 87px;
  position:relative;
  text-decoration:none
}
.btn-download:before {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='72' height='72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%231C1C1E' d='M0 0h72v72H0z'/%3E%3Cpath fill='%23FFF' d='M38.607 17h-15.5L37.5 36 22 55h15.5L53 36z'/%3E%3C/g%3E%3C/svg%3E");
  content:"";
  height:72px;
  left:0;
  padding:15px;
  position:absolute;
  top:0;
  width:72px
}
.btn-download span {
  display:inline-block;
  font-size:12px;
  font-weight:400
}
.btn-download:hover {
  background-color:#111112;
  color:#fff
}
.btn-download:hover:before {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='72' height='72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23dd7e2a' d='M0 0h72v72H0z'/%3E%3Cpath fill='%23FFF' d='M38.607 17h-15.5L37.5 36 22 55h15.5L53 36z'/%3E%3C/g%3E%3C/svg%3E")
}
.btn-download img {
  margin-top:-6px;
  padding-right:5px
}
.btn-arrow {
  background-color:#fff;
  border:1px solid #111112;
  color:#1c1c1e;
  display:inline-block;
  font-size:18px;
  font-weight:700;
  height:72px;
  line-height:20px;
  overflow:hidden;
  padding:25px 25px 25px 100px;
  position:relative;
  text-decoration:none
}
.btn-arrow:before {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='72' height='72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%231C1C1E' d='M0 0h72v72H0z'/%3E%3Cpath fill='%23FFF' d='M38.607 17h-15.5L37.5 36 22 55h15.5L53 36z'/%3E%3C/g%3E%3C/svg%3E");
  content:"";
  height:72px;
  left:0;
  padding:15px;
  position:absolute;
  top:0;
  width:72px
}
.btn-arrow:hover {
  background-color:#111112;
  border:transparent;
  color:#fff
}
.btn-arrow:hover:before {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='72' height='72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23dd7e2a' d='M0 0h72v72H0z'/%3E%3Cpath fill='%23FFF' d='M38.607 17h-15.5L37.5 36 22 55h15.5L53 36z'/%3E%3C/g%3E%3C/svg%3E")
}
.btn-arrow-small {
  background-color:#fff;
  border:1px solid #111112;
  color:#1c1c1e;
  display:inline-block;
  font-size:18px;
  font-weight:700;
  height:36px;
  line-height:20px;
  overflow:hidden;
  padding:6px 12px 6px 50px;
  position:relative;
  text-decoration:none
}
.btn-arrow-small:before {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%231C1C1E' d='M0 0h36v36H0z'/%3E%3Cpath fill='%23FFF' d='M19.303 8.5h-7.75L18.75 18 11 27.5h7.75L26.5 18z'/%3E%3C/g%3E%3C/svg%3E");
  background-position:50%;
  background-repeat:no-repeat;
  background-size:cover;
  content:"";
  height:36px;
  left:0;
  padding:15px;
  position:absolute;
  top:0;
  width:36px
}
.btn-arrow-small:hover {
  background-color:#111112;
  border:transparent;
  color:#fff
}
.btn-arrow-small:hover:before {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='72' height='72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23dd7e2a' d='M0 0h72v72H0z'/%3E%3Cpath fill='%23FFF' d='M38.607 17h-15.5L37.5 36 22 55h15.5L53 36z'/%3E%3C/g%3E%3C/svg%3E")
}

.hidden {
    display: none;
}