.piluleframe {
  width: 1380px;
  height: 930px;
}
.choice img {
  width: 100%;
}
html,
body {
  /* display: flex;
  justify-content: center;
  background-color: #000; */
  overflow: hidden;
}
/* :target */
#div2, #div3, #div4, #div5, #div6 {
	display: none;
}

#div1, #div2:target, #div3:target, #div4:target, #div5:target, #div6:target {
	display: block;
}
#div2:target ~ #div1, #div3:target ~ #div1, #div4:target ~ #div1, #div5:target ~ #div1, #div6:target ~ #div1 {
  display: none;
}

#bulle1:checked ~ #labelbulle1 {
  display: none;
}
#bulle1 ~ #labelbulle1, #div1 {
  position: absolute;
  width: 385px;
  height: 235px;
  top: 65px;
  left: 925px;
  cursor: pointer;
  background-color: #fff;
  border: 5px solid #000;
  font-family: "stanberryregular";
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  padding: 20px;
}
#bulle1 ~ #labelbulle1:after, #div1 a {
  position: absolute;
  content: "Suite";
  top: 225px;
  left: 350px;
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
  background-color: #4c5b30;
  padding: 5px;
}
#bulle1 ~ #labelbulle1:hover:after, #div1 a:hover {
  content: "Suite";
  background-color: #88955b;
}
#bulle2 ~ #labelbulle2,#div2 {
  display: none;
  animation: pulse 0.2s linear 1;
}
#bulle1:checked ~ #labelbulle2 {
  display: flex;
}
@-webkit-keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

#bulle2 ~ #labelbulle2,#div2 {
  position: absolute;
  width: 385px;
  height: 300px;
  top: 135px;
  left: 250px;
  cursor: pointer;
  background-color: #fff;
  border: 5px solid #000;
  font-family: "stanberryregular";
  font-size: 1.5rem;
  justify-content: center;
  text-decoration: none;
  align-items: center;
  padding: 20px;
}
#bulle2 ~ #labelbulle2:after, #div2 a {
  position: absolute;
  content: "Suite";
  top: 290px;
  left: 350px;
  text-decoration: none;
  font-size: 1.5rem;
  color: #fff;
  background-color: #4c5b30;
  padding: 5px;
}
#bulle2 ~ #labelbulle2:hover:after, #div2 a:hover {
  content: "Suite";
  background-color: #88955b;
}

#bulle2:checked ~ #labelbulle2 {
  display: none;
}
#bulle3 ~ #labelbulle3, #div3 {
  display: none;
  animation: pulse 0.2s linear 1;
}
#bulle2:checked ~ #labelbulle3 {
  display: flex;
}
#bulle3 ~ #labelbulle3, #div3 {
  position: absolute;
  width: 444px;
  height: 205px;
  top: 48px;
  left: 855px;
  cursor: pointer;
  background-color: #fff;
  border: 5px solid #000;
  font-family: "stanberryregular";
  font-size: 1.5rem;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
#bulle3 ~ #labelbulle3:after, #div3 a {
  position: absolute;
  content: "Suite";
  top: 195px;
  left: 410px;
  font-size: 1.5rem;
  color: #fff;
  background-color: #4c5b30;
  text-decoration: none;
  padding: 5px;
}
#bulle3 ~ #labelbulle3:hover:after, #div3 a:hover {
  content: "Suite";
  background-color: #88955b;
}

#bulle3:checked ~ #labelbulle3 {
  display: none;
}
#bulle4 ~ #labelbulle4, #div4 {
  display: none;
  animation: pulse 0.2s linear 1;
}
#bulle3:checked ~ #labelbulle4 {
  display: flex;
}
#bulle4 ~ #labelbulle4, #div4 {
  position: absolute;
  width: 444px;
  height: 120px;
  top: 580px;
  left: 185px;
  cursor: pointer;
  background-color: #fff;
  border: 5px solid #000;
  font-family: "stanberryregular";
  font-size: 1.5rem;
  justify-content: center;
  text-decoration: none;
  align-items: center;
  padding: 20px;
}
#bulle4 ~ #labelbulle4:after, #div4 a {
  position: absolute;
  content: "Suite";
  top: 111px;
  left: 410px;
  text-decoration: none;
  font-size: 1.5rem;
  color: #fff;
  background-color: #4c5b30;
  padding: 5px;
}
#bulle4 ~ #labelbulle4:hover:after, #div4 a:hover {
  content: "Suite";
  background-color: #88955b;
}

#bulle4:checked ~ #labelbulle4 {
  display: none;
}
#bulle5 ~ #labelbulle5, #div5 {
  display: none;
  animation: pulse 0.2s linear 1;
}
#bulle4:checked ~ #labelbulle5 {
  display: flex;
}
#bulle5 ~ #labelbulle5, #div5 {
  position: absolute;
  width: 335px;
  height: 180px;
  top: 485px;
  left: 970px;
  cursor: pointer;
  background-color: #fff;
  border: 5px solid #000;
  font-family: "stanberryregular";
  font-size: 1.5rem;
  justify-content: center;
  text-decoration: none;
  align-items: center;
  padding: 20px;
}
#bulle5 ~ #labelbulle5:after, #div5 a {
  position: absolute;
  content: "Fin";
  top: 171px;
  left: 324px;
  font-size: 1.5rem;
  color: #fff;
  background-color: #4c5b30;
  text-decoration: none;
  padding: 5px;
}
#bulle5 ~ #labelbulle5:hover:after, #div5 a:hover {
  content: "Fin";
  background-color: #88955b;
}

#bulle5:checked ~ #labelbulle5 {
  display: none;
}

.wrapper {
  width: 68px;
  height: 25px;
  position: relative;
  border-radius: 40px;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.rotateblue {
  transform: rotate3d(2, 25, 8, 40deg);
}
.rotatered {
  transform: rotate3d(2, 9, 6, -45deg);
}

.wrapper:after {
  clear: both;
  display: table;
  content: "";
}

.wrapper:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 30px;
  width: 80%;
  height: 30%;
  background: linear-gradient(
    25deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.15)
  );
  left: 50%;
  margin-left: -40%;
  top: 18%;
  z-index: 9999;
}

.leftblue {
  float: left;
  height: 100%;
  width: 50.7%;
  background: linear-gradient(#2eb0fe, #00609f);
  border-radius: 40px 0 0 40px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 5px 0 #0080f2, inset 0 -10px 15px #024399;
}
.wrapper:hover .leftblue {
  float: left;
  height: 100%;
  width: 50.7%;
  background: linear-gradient(#38b2fd, #0276c4);
  border-radius: 40px 0 0 40px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 5px 0 #108efc, inset 0 -10px 15px #0e5dc4;
}

.rightblue {
  float: right;
  height: 100%;
  width: 49.3%;
  border-radius: 0 40px 40px 0;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-left: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 5px 0 #0080f2, inset 0 -10px 15px #024399;
  background: linear-gradient(#2eb0fe, #00609f);
}
.wrapper:hover .rightblue {
  float: right;
  height: 100%;
  width: 49.3%;
  border-radius: 0 40px 40px 0;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-left: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 5px 0 #108efc, inset 0 -10px 15px #0e5dc4;
  background: linear-gradient(#38b2fd, #0276c4);
}
.leftred {
  float: left;
  height: 100%;
  width: 50.7%;
  background: linear-gradient(#f71b04, #c0180a);
  border-radius: 40px 0 0 40px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 5px 0 #c11b15, inset 0 -10px 15px #6d1011;
}
.rightred {
  float: right;
  height: 100%;
  width: 49.3%;
  border-radius: 0 40px 40px 0;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-left: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 5px 0 #c11b15, inset 0 -10px 15px #6d1011;
  background: linear-gradient(#f71b04, #c0180a);
}
.wrapper:hover .leftred {
  float: left;
  height: 100%;
  width: 50.7%;
  background: linear-gradient(#ff2a13, #ec2614);
  border-radius: 40px 0 0 40px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 5px 0 #e42c26, inset 0 -10px 15px #961719;
}
.wrapper:hover .rightred {
  float: right;
  height: 100%;
  width: 49.3%;
  border-radius: 0 40px 40px 0;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-left: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 5px 0 #e42c26, inset 0 -10px 15px #961719;
  background: linear-gradient(#ff2a13, #ec2614);
}
.pillred {
  position: absolute;
  top: 865px;
  left: 767px;
}
.pillblue {
  position: absolute;
  top: 820px;
  left: 741px;
}
.rightred,
.rightblue,
.leftred,
.leftblue {
  box-sizing: border-box;
}