.button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0px;
  text-align:center; text-decoration: none;
  cursor:pointer;
}
.button:active {
  -webkit-transform: translate(0px, 1px);
          transform: translate(0px, 1px);
  box-shadow:inset 0px -1px 0px 0px rgba(0,0,0,0.15);
}

/* main button */
.main-more {
  width: 42%; 
  text-align: center; font-size: var(--font-size-15); font-weight: 300; color: var(--color-white);
  padding: 12px 0px;
  border: 1px solid var(--color-white); border-radius: 3px; background-color: rgba(0, 0, 0, .68);
}
.main-more:active {
  background-color: var(--color-white); border-color: var(--color-white);
  color: var(--color-black); font-weight: 500;
  transform: translate(0px, 0px);
  box-shadow:inset 0px 0px 0px 0px rgba(0,0,0,0.0);
}

.red {
  background-color: var(--color-red);
  color: var(--color-white);
}
.red:active {
  background-color: var(--color-black);
  color: var(--color-white);
}
.blue,.blue:focus {
    background-color: var(--color-blue);
    text-align: center;
    color: var(--color-white);
    font-size: var(--font-size-24);
    font-weight: 400
}

.blue:hover {
    background-color: var(--color-navy);
    color: var(--color-white)
}

.blue:active {
    background-color: var(--color-navy);
    color: var(--color-white)
}
.dark-red {
  background-color: var(--color-dark-red);
  color: var(--color-white);
}
.dark-red:active {
  background-color: var(--color-black);
  color: var(--color-white);
}
.dark-gray {
  background-color: #383838;
  color: var(--color-white);
}
.dark-gray:active {
  background-color: var(--color-black);
  color: var(--color-white);
}
.red:focus, .dark-red:focus, .dark-gray:focus {
  color: var(--color-white);
}
.more-life {
  border: 2px solid var(--color-blue);
  text-align: center; color: var(--color-navy);
  width: 200px; height: 38px; line-height: 38px;
}
.more-life:active {
  background-color: var(--color-blue);
  color: var(--color-white);
}


/*************************************** Trip */
.add {
  border: 2px solid var(--color-blue); background-color: var(--color-white);
  color: var(--color-blue);
}
.add:hover, .add:active {
  background-color: var(--color-blue);
  color: var(--color-white);
}
.prev {
  width: auto; height: 75px;
  font-size: var(--font-size-15); font-weight: 400;
  background-color: var(--color-deep-gray);
  color: var(--color-white);
}
.next {
  width: auto; height: 75px;
  font-size: var(--font-size-15); font-weight: 400;
  background-color: var(--color-point);
  color: var(--color-white);
}
.prev:hover, .next:hover, .prev:focus, .next:focus {
  color: var(--color-white);
}
.prev:active, .next:active {
  background-color: var(--color-navy);
  color: var(--color-white);
}
.delete {
  border: 1px solid var(--color-red); border-radius: 11px;
  width: auto; height: 22px; line-height: 22px;
  color: var(--color-red);
}
.delete:hover, .delete:active {
  background-color: var(--color-red);
  color: var(--color-white);
}
.info {
  width: 100%; height: 40px; line-height: 40px;
  border: 2px solid var(--color-sky); border-radius: 5px;
  font-style: var(--font-size-15); font-weight: 500;
  color: var(--color-blue);
}
.info:active, .info:hover {
  background-color: var(--color-sky);
  color: var(--color-white);
}



/****************************************************** radius */
.radius-3 {
  border-radius: 3px;
}
.radius-5 {
  border-radius: 5px;
}
.radius-10 {
  border-radius: 10px;
}