.load-wrapp:last-child {
  margin-right: 0;
}


.letter-holder {
  left:55%;
  position: absolute;

}

.letter {
  float: left;
  font-size: 14px;
  color: rgb(172, 172, 172);
}


/* =Animate the stuff
------------------------ */

.load-6 .letter {
  animation-name: loadingF;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-direction: linear;
}

.l-1 {
  animation-delay: 0.48s;
}
.l-2 {
  animation-delay: 0.6s;
}
.l-3 {
  animation-delay: 0.72s;
}
.l-4 {
  animation-delay: 0.84s;
}
.l-5 {
  animation-delay: 0.96s;
}
.l-6 {
  animation-delay: 1.08s;
}
.l-7 {
  animation-delay: 1.2s;
}
.l-8 {
  animation-delay: 1.32s;
}
.l-9 {
  animation-delay: 1.44s;
}
.l-10 {
  animation-delay: 1.56s;
}


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


  
      .notification {
      display:flex;
      justify-content:center;
      align-items:center;
      padding:15px;
      background:rgba(201, 64, 64, 0.808);
      color:#fff;
      font-size:16px;
      font-weight:100;
      width:300px;
      position: fixed;
      right:0px;
      top:20px;
      transform:translateX(300px);
      transition: .2s cubic-bezier(0.250, 0.460, 0.450, 0.940);
      box-shadow: 0px 0px 3px 1px rgba(206, 64, 64, 0.5);
      }
      .notifications {
      display:flex;
      justify-content:center;
      align-items:center;
      padding:15px;
      background:rgba(126, 201, 64, 0.808);
      color:#fff;
      font-size:16px;
      font-weight:100;
      width:300px;
      position: fixed;
      right:0px;
      top:20px;
      transform:translateX(300px);
      transition: .2s cubic-bezier(0.250, 0.460, 0.450, 0.940);
      box-shadow: 0px 0px 3px 1px rgba(126, 201, 64, 0.808);
      }
      .pop {
      transform:none;
      }
      .notification svg {
      fill:#fff;
      margin-right:15px;
      }
      .popper {
      top:20px;
      right:20px;
      background:rgb(0, 0, 0);
      padding:15px 45px;
      border-radius:50px;
      font-family:"Raleway";
      box-shadow: 0px 0px 3px 1px rgb(0,0,0,.5);
      }
/* Snackbar css */
.snackbar {
visibility: hidden;
min-width: 250px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 14px;
transform: translateX(-50%);
}

.snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}

@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}

@-webkit-keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}

@keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}


.hidden {
position: absolute;
width: 0px;
height: 0px;
left: -999999px;
}

.action-button {
border: 1px solid black;
background: none;
padding: 8px;
cursor: pointer;
outline: 0;
border-radius: 6px;


}

.action-button.mode-upload {
color: #004085;
border-color: #b8daff;
background-color: #cce5ff;
}

.action-button.mode-remove {
color: #721c24;
border: 1px solid #f5c6cb;
background-color: #f8d7da;
}
body {
    background-color: transparent;
font-family: "Jost", sans-serif;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
padding: 20px;
}


.float{
position:absolute;
width:40px;
height:40px;
margin-right:10px;
margin-top:20px;
background-color:#516acc;
color:#FFF;
border-radius:40px;
text-align:center;
left:120px;
box-shadow: 2px 2px 3px rgba(151, 151, 151, 0.452);
}

.float1{
position:absolute;
width:40px;
height:40px;
margin-left:10px;
margin-top:20px;
background-color:#516acc;
color:#FFF;
border-radius:40px;
text-align:center;
right:120px;
box-shadow: 2px 2px 3px rgba(151, 151, 151, 0.452);
}

.my-float{
margin-top:14px;
}