.btncontainer {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
}

.desccontainer {
  position: relative;
  width: 100%;
  float: left;
  margin-top: 1em;
}

.desc {
  float: left;
  font-size: 11px;
  font-weight: 500;
  padding: 9px 0;
  letter-spacing: .25px;
  text-align: center;
  color: #dbdbdb; color: var(--nav-title-color);
  z-index: 2000;
  border-radius: 0;
  opacity: .5;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  font-family: "Roboto", sans-seif;
}

.desc.left {
  width: 50%;
  text-align: left;
  border-top: 1px solid #fff; border-top: 1px solid var(--nav-title-color);
  opacity: .25;
}

.desc.right {
  width: 50%;
  text-align: right;
  border-top: 1px solid #fff; border-top: 1px solid var(--nav-title-color);
  opacity: .25;
}

.desc.single {
  width: 100%;
  text-align: right;
  border-top: 1px solid #fff; border-top: 1px solid var(--nav-title-color);
  opacity: .25;
}

.desc:hover {
  cursor: pointer;
  opacity: 1;
}

.desc:hover a{
  opacity: 1;
}

.desc a {
  color: #999999;
}
.desc a:hover .desc{
    color: #7151ea;
}

.containercenter {
  margin: auto;
}

.thebutton-container {
  width: 100%;
  margin: auto;
  max-width: 1020px;
  opacity: 0;
      animation: fadeIn 1s ease forwards;
  -webkit-animation: fadeIn 1s ease forwards;
  animation-delay: .6s;
}
@media screen and (min-width: 1700px) {
  .thebutton-container {
    }
}


@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}



.thebutton-hero-content {
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 10px 0 10px 0;
  float: left;
  width: 95%;
  margin: 35px 2.5% 0 2.5%;
  position: relative;
}
@media screen and (min-width: 750px) {
  .thebutton-hero-content {
    width: calc(100% - 40px);
    margin: 100px 20px 0 20px;
  }
}
@media screen and (min-width: 1100px) {
  .thebutton-hero-content {
    margin: 100px 20px 20px 20px;
  }
}

.thebutton {
  float: left;
  width: 93%;
  margin: 2.5% 2.5% 3% 2.5%;
  position: relative;
}
@media screen and (min-width: 900px) {
  .thebutton {
  width: calc(50% - 30px);
  margin: 10px 15px 80px 15px;
  }
}
@media screen and (min-width: 1100px) {
  .thebutton {
  width: calc(50% - 40px);
  margin: 30px 20px 40px 20px;
  }
}



.box {
  overflow: hidden;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  width: 100%;
  margin: auto;
  height: 0;
  position: relative;
  padding-bottom: 80%;
  -webkit-box-shadow:   0 4px 8px rgba(0,0,0,.0);
  box-shadow:  0 4px 8px rgba(0,0,0,.0);
  border-radius: 0;
  overflow: hidden;
}



.boxcontainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}



.btncontainer {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
}