.outer-circle {
  width: 350px;
  height: 350px;
  border-radius: 160px;
  background-color: transparent;
  position: relative;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg); /* spin 360 grade*/
  }
}

.inner-circle {
  width: 260px;
  height: 260px;
  border-radius: 130px;
  background-color: lightblue;
  position: absolute;
  top: 55px;
  left: 30px;
  z-index: 99;
  background-image: url("http://detasat.ieftine.biz/images/cursanti/8.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 5px solid;
  border: 5px solid var(--colorthree);
  position: relative;
  /*animation: spin 150s linear infinite;*/
  /*animation: rotate 25s ease-in-out infinite;*/
}

/*
.inner-circle::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-image: url("http://detasat.ieftine.biz/images/logo.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100px;
  background-color: var(--white);
  border-radius: 50%;
  border: 1px solid var(--redlogo);
  position: absolute;
  left: -20px;
  top: 0px;
}

*/

.inner-circle-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: var(--colorthree);
  border-radius: 50%;
  border: 1px solid var(--white);
  position: absolute;
  z-index: 201;
}
.inner-circle-buttons:hover {
  background-color: red;
  cursor: pointer;
  z-index: 201;
}

.inner-circle-left {
  left: -20px;
  top: calc(50% - 20px);
  z-index: 201;
}

.inner-circle-right {
  right: -20px;
  top: calc(50% - 20px);
  z-index: 201;
}

.inner-circle-buttons a {
  color: var(--white);
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  display: block;
  z-index: 201;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(25deg);
  }
  75% {
    transform: rotate(-25deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/*
.petal {
  width: 100px;
  height: 60px;
  border-top-left-radius: 20px 140px;
  border-top-right-radius: 20px 140px;
  position: absolute;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  transition: transform 0.5s ease-in-out;
  z-index: 90;
}

*/

.petal {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  transition: transform 0.5s ease-in-out;
  z-index: 90;
}

.petal:hover {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: scale(1.6);
  z-index: 101;
}

.petal-1 {
  top: -5px;
  left: 80px;
  /*height: 70px;*/
  transform: rotate(-10deg);
  background-image: url("http://detasat.ieftine.biz/images/cursanti/8.jpg");
}

.petal-1:hover {
  border: 2px solid var(--colorthree);
  z-index: 99;
}

.petal-2 {
  top: 30px;
  left: 250px;
  /*height: 80px;*/
  transform: rotate(45deg);
  background-image: url("http://detasat.ieftine.biz/images/cursanti/9.jpg");
}

.petal-2:hover {
  border: 2px solid var(--colorthree);
  z-index: 99;
}

.petal-3 {
  bottom: 60px;
  left: 295px;
  /*height: 80px;*/
  transform: rotate(110deg);
  background-image: url("http://detasat.ieftine.biz/images/cursanti/10.jpg");
}

.petal-3:hover {
  border: 2px solid var(--colorthree);
  z-index: 99;
}

.petal-4 {
  bottom: 60px;
  left: -30px;
  transform: rotate(245deg);
  background-color: var(--white);
  background-image: url("http://detasat.ieftine.biz/images/cursanti/11.jpg");
}

.petal-4:hover {
  border: 2px solid var(--colorthree);
  z-index: 99;
}

.petal-5 {
  bottom: 0px;
  left: 20px;
  transform: rotate(245deg);
  background-color: var(--white);
  background-image: url("http://detasat.ieftine.biz/images/cursanti/5.jpg");
}

.petal-5:hover {
  border: 2px solid var(--colorthree);
  z-index: 99;
}

.petal-6 {
  bottom: -40px;
  left: 105px;
  transform: rotate(245deg);
  background-color: var(--white);
  background-image: url("http://detasat.ieftine.biz/images/cursanti/6.jpg");
}

.petal-6:hover {
  border: 2px solid var(--colorthree);
  z-index: 99;
}

.petal-7 {
  bottom: 210px;
  left: 295px;
  transform: rotate(245deg);
  background-color: var(--white);
  background-image: url("http://detasat.ieftine.biz/images/cursanti/7.jpg");
}

.petal-7:hover {
  border: 2px solid var(--colorthree);
  z-index: 99;
}