.slider2 {
   position: absolute;
   overflow: hidden;
   height: 500px;
   width: 500px;
   left: 0;
   top: 75%;
   border-radius: 50%;
   z-index: 1;
   box-shadow: 1px 1px 10px 1px rgb(0, 0, 0);
}

.border-tabs{
  position: absolute;
  width: 425px;
  height: 425px;
  border-radius: 50%;
  left: 50%;
   top: 50%;
  border: 1px dashed #fff;
  transform: translateX(-50%) translateY(-50%);
}

.slide2 {
   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: opacity 0.4s ease-in-out;
   background: rgba(255, 255, 255, 0.368);
}

.slide2.current2 {
   opacity: 1;
}

.slide2 .content2 {
   position: absolute;
   bottom: -500px;
   opacity: 0;
   left: 75px;
   width: 300px;
   height: 300px;
   background-color: rgba(255, 255, 255, 0.494);
   color: #333;
   padding: 25px;
   border-radius: 50%;
   text-align: center;
}
.slide2 .content2 h1 {
  position: relative;
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 5px !important;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
  color: rgb(97, 97, 97);
}
.slide2 .content2 p{
  margin: 0;
  word-wrap: break-word;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-bottom: 8px;
}
.slide2 .content2 hr{
   border-bottom: 1px solid black;
   padding: 0;
   margin: 0;
   margin-bottom: 10px;
}

.slide2.current2 .content2 {
   transform: translatey(-80px);
   bottom: 0;
   opacity: 1;
   transition: all 0.7s ease-in-out 0.3s;
   z-index: 20;
}

.buttons2 button#next2 {
   position: absolute;
   top: 19%;
   left: 395px;
}

.buttons2 button#prev2 {
   position: absolute;
   top: 19%;
   left: 45px;
}

.buttons2 button {
   background-color: transparent;
   color: rgb(255, 255, 255);
   padding: 0;
   cursor: pointer;
   border-radius: 50%;
   outline: none;
   z-index: 0;
   width: 60px;
   height: 60px;
   opacity: 1;
   background-color: red;
   cursor: unset;
   display: none;
}



div.circle-div{
  position: absolute;
  left: 75px;
  width: 300px;
  height: 300px;
  background-color: rgba(188, 24, 24, 0);
  color: #333;
  padding: 25px;
  border-radius: 50%;
  text-align: center;
  z-index: 2001;
  bottom: 80px;
}
/* div.slide2 a{
  position: relative;
  width: 60px;
  height: 60px;
  background-color: red;
  z-index: 9;
  opacity: 1;
  top: -500px;
  left: 50%;
  cursor: pointer;
} */

div.circle-div img{
  width: 60px;
  height: 60px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0;
  position: absolute;
  border-radius: 50%;
  top: -65px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #ffffff;
  opacity: .8;
  cursor: pointer;    
  box-shadow: 1px 1px 10px 1px rgb(0, 0, 0);
}

div.circle-div img:hover{
   opacity: 1;
}

div.circle-div-2 a img{
  width: 58px;
  height: 58px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0;
  position: absolute;
  border-radius: 50%;
  top: 97px;
  left: 15%;
  transform: translateX(-50%);
  opacity: .8;
  cursor: pointer;    
  box-shadow: 1px 1px 10px 1px rgb(0, 0, 0);
  opacity: .5;
  border: 2px solid #fff;
  z-index: 2001;
}
div.circle-div-2 a:last-of-type img{
  width: 58px;
  height: 58px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0;
  position: absolute;
  border-radius: 50%;
  top: 97px;
  left: 85%;
  transform: translateX(-50%);
  opacity: .8;
  cursor: pointer;    
  box-shadow: 1px 1px 10px 1px rgb(0, 0, 0);
  opacity: .5;
  border: 2px solid #fff;
}
div.circle-div-2 a img:hover, div.circle-div-2 a:last-of-type img:hover{
  opacity: 1;
}
.slide2.current2 div.circle-div img{
  animation: circletop .5s linear;
}
.slide2.current2 div.circle-div-2 a img{
  animation: circle1 .5s linear;
}
.slide2.current2 div.circle-div-2 a:last-of-type img{
  animation: circle2 .5s linear;
}

@keyframes circle1 {
  0%
  {
     top: 5px;
     left: 50%;
  }
  33%
  {
     top: 19px;
     left: 35%;
  }
  66%
  {
     top: 49px;
     left: 25%;
  }
  100%
  {
     top: 97px;
     left: 15%;
  }
}
@keyframes circle2 {
  0%
  {
  top: 233px;
  left: 95%;
  }
  50%
  {
  top: 153px;
  left: 90%;
  }
  100%
  {
     top: 97px;
     left: 85%;
  }
}
@keyframes circletop {
  0%
  {
     top: 45px;
     left: 105%;
  }
  50%
  {
  top: -35px;
  left: 80%;
  }
  100%
  {
     top: -65px;
     left: 50%;
  }
}


@media(max-height: 1000px) {
  .buttons2 button{
     width: 70px;
     height: 70px;
  }
}
@media(max-height: 870px) {
  .slider2{
     top: 74%;
  }
}
@media(max-height: 780px) {
  .slider2{
     top: 72%;
  }
}
@media(max-height: 680px) {
  .slider2{
     top: 70%;
  }
}
@media(max-height: 550px) {
  .slider2{
     top: 55%;
  }
}
@media(max-height: 470px) {
  .slider2{
     top: 45%;
  }
}
@media(max-height: 400px) {
  .slider2{
     top: 40%;
  }
}



@media(max-width: 1200px) {
  .slider2{
     scale: .9;
  }

}
@media(max-width: 1000px) {
  .slider2{
     scale: .8;
     left: -5%;
  }
}
@media(max-width: 900px) {
  .slider2{
     scale: .6;
     left: -12%;
  }
}
@media(max-width: 650px) {
  .slider2{
     left: 50%;
     scale: .5;
     transform: translateX(-100%);
  }

}

@media(max-width: 340px) {
  .slider2{
   left: 33%;
     scale: .4;
  }
}
@media(max-width: 300px) {
  .slider2{
   left: 20%;
     scale: .35;
  }
}

/* @keyframes circletop {
  0%
  {
     top: 45px;
     left: 105%;
  }
  25%
  {
     top: 0px;
     left: 95%;
  }
  50%
  {
     top: -20px;
     left: 85%;
  }
  75%
  {
     top: -40px;
     left: 80%;
  }
  100%
  {
     top: -65px;
     left: 50%;
  }
} */