@keyframe pula {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(4);
  }
}
body {
  background-image: url(images/91-917746_wooden-table-top-view-hd\ \(1\).jpg);
}

* {
  box-sizing: border-box;
}

p{
  color: white;
  font-weight: 500;
}

p:hover{
  color: cyan;
  background-size: 50px;
  font-weight: 500;
  -webkit-transition:.25s ease-out;
  transition:.25s ease-out;
}

a {
  text-decoration: none;
  color:inherit
}

h1 {
  text-align: center;
  font-family: sans-serif;
  font-size: 2em;
  margin: 20px 0;
  color: white;
}
h1 small {
  font-family: serif;
  font-size: 0.4em;
  display: block;
  color: #6AB1AD;
}

.container {
  left: 100px;
  max-width: 1500px;
  margin: 0 auto auto auto;
  height: 520px;
  position: relative;
  text-align: center;
  padding: 50px;
}

.trash {
  position: relative;
  bottom: -60px;
  left: 200px;
  opacity: 0;
  transition: opacity 300ms, bottom 300ms cubic-bezier(0.305, 0.015, 0.35, 1.385);
}
.trash .lines {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 200ms cubic-bezier(0.305, 0.015, 0.35, 1.385);
}
.trash .lines#one {
  transition-delay: 300ms;
}
.trash .lines#two {
  transition-delay: 400ms;
}
.trash .lines#three {
  transition-delay: 500ms;
}
.trash.active {
  opacity: 1;
  bottom: 20px;
}
.trash.active .lines {
  transform: scaleY(1);
}
.trash.opened .cover {
  transform: rotateZ(0) translateY(0) translateX(0);
}
.trash .cover {
  transform: rotateZ(35deg) translateY(-14px) translateX(19px);
  transition: transform 300ms cubic-bezier(0.305, 0.015, 0.35, 1.39);
}

.btn-action {
  background-color: white;
  display: inline-block;
  width: 130px;
  height: 130px;
  line-height: 130px;
  border-radius: 10px;
  margin: 5px;
  text-decoration: none;
  text-align: center;
  color: #6AB1AD;
  transition: background-color 300ms;
  font-size: 1.4em;
  font-weight: bold;
}
.btn-action:hover {
  background-color: #6AB1AD;
}
.btn-action.del:hover {
  background-color: #eee;
}
.btn-action.open {
  background-color: #040484;
}
.btn-action.open:hover {
  background-color: #509894;
}

img {
  width: 130px;
}

.roda {
  transform: rotate(270deg);
  transition: all 300ms;
}

.deletavel {
  background-color: #add4d2 !important;
  animation-name: pula;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}