*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
}
@font-face {
  font-family:'tiempos';
  src:url('https://events-greenpack.ro/wp-content/uploads/avia_fonts/type_fonts/tiempos/tiemposheadline-black.ttf') format('truetype');
  font-style:normal;
  font-weight:900;
  font-display:auto
}
@font-face {
  font-family:'tiempos';
  src:url('https://events-greenpack.ro/wp-content/uploads/avia_fonts/type_fonts/tiempos/tiemposheadline-blackitalic.ttf') format('truetype');
  font-style:italic;
  font-weight:900;
  font-display:auto
}
@font-face {
  font-family:'tiempos';
  src:url('https://events-greenpack.ro/wp-content/uploads/avia_fonts/type_fonts/tiempos/tiemposheadline-bold.ttf') format('truetype');
  font-style:normal;
  font-weight:700;
  font-display:auto
}
@font-face {
  font-family:'tiempos';
  src:url('https://events-greenpack.ro/wp-content/uploads/avia_fonts/type_fonts/tiempos/tiemposheadline-bolditalic.ttf') format('truetype');
  font-style:italic;
  font-weight:700;
  font-display:auto
}
@font-face {
  font-family:'tiempos';
  src:url('https://events-greenpack.ro/wp-content/uploads/avia_fonts/type_fonts/tiempos/tiemposheadline-light.ttf') format('truetype');
  font-style:normal;
  font-weight:300;
  font-display:auto
}
@font-face {
  font-family:'tiempos';
  src:url('https://events-greenpack.ro/wp-content/uploads/avia_fonts/type_fonts/tiempos/tiemposheadline-lightitalic.ttf') format('truetype');
  font-style:italic;
  font-weight:300;
  font-display:auto
}
@font-face {
  font-family:'tiempos';
  src:url('https://events-greenpack.ro/wp-content/uploads/avia_fonts/type_fonts/tiempos/tiemposheadline-medium.ttf') format('truetype');
  font-style:normal;
  font-weight:500;
  font-display:auto
}
@font-face {
  font-family:'tiempos';
  src:url('https://events-greenpack.ro/wp-content/uploads/avia_fonts/type_fonts/tiempos/tiemposheadline-mediumitalic.ttf') format('truetype');
  font-style:italic;
  font-weight:500;
  font-display:auto
}
@font-face {
  font-family:'tiempos';
  src:url('https://events-greenpack.ro/wp-content/uploads/avia_fonts/type_fonts/tiempos/tiemposheadline-regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:auto
}
@font-face {
  font-family:'tiempos';
  src:url('https://events-greenpack.ro/wp-content/uploads/avia_fonts/type_fonts/tiempos/tiemposheadline-regularitalic.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:auto
}
@font-face {
  font-family:'tiempos';
  src:url('https://events-greenpack.ro/wp-content/uploads/avia_fonts/type_fonts/tiempos/tiemposheadline-semibold.ttf') format('truetype');
  font-style:normal;
  font-weight:600;
  font-display:auto
}
@font-face {
  font-family:'tiempos';
  src:url('https://events-greenpack.ro/wp-content/uploads/avia_fonts/type_fonts/tiempos/tiemposheadline-semibolditalic.ttf') format('truetype');
  font-style:italic;
  font-weight:600;
  font-display:auto
}
body{
  font-family: 'tiempos','HelveticaNeue','Helvetica Neue','Helvetica-Neue',Helvetica,Arial,sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background: #7bb515;
  background-size: cover;
  color: #fff;
  font-size: 25px;
  background: #003a3e url(https://events-greenpack.ro/wp-content/uploads/2025/03/bg-with-logo.png) top left no-repeat fixed;
  background-size: auto;
}
.mainbox{
  position: relative;
  width: 850px;
  height: 850px;
}
.mainbox:before{
    position: absolute;
    content: '';
    width: 74px;
    height: 48px;
    background: url(./arrow-left.png) no-repeat;
    background-size: 74px;
    right: -100px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}
.box{
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
  border: 10px solid #333;
  overflow: hidden;
  transition: all ease 5s;
}
span{
  width: 50%;
  height: 50%;
  display: inline-block;
  position: absolute;
}

.span1{
  clip-path: polygon(0 92%, 100% 50%, 0 8%);
  top: 120px;
  left: 0;
  background-color: transparent;
}
.span2{
  clip-path: polygon(100% 92%, 0 50%, 100% 8%);
  top: 120px;
  right: 0;
  background-color: transparent;
}
.span3{
  clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
  bottom: 0;
  left: 120px;
  background-color: transparent;
}
.span4{
  clip-path: polygon(50% 100%, 92% 0, 8% 0);
  top: 0;
  left: 120px;
  background-color: transparent;
}

/*EXTRAS*/
.box1 .span3 b{
  transform: translate(-50%, -50%) rotate(-270deg);
}
.box1 .span1 b,
.box2 .span1 b{
  transform: translate(-50%, -50%) rotate(185deg);
}
.box2 .span3 b{
  transform: translate(-50%, -50%) rotate(90deg);
}
.box1 .span4 b,
.box2 .span4 b{
  transform: translate(-50%, -50%) rotate(-85deg);
}


.box2{
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  background: url(./wheel.png);
  background-position-x: center;
  background-position-y: center;
}
span b{
  width: 65px;
  height: 65px;
  line-height: 65px;
  border-radius: 50%;
  font-size: 26px;
  text-align: center;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 3px 3px 0 #717171;
}
.spin{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 0px solid #fff;
  background-color: transparent;
  color: #212121;
  box-shadow: 0;
  font-weight: bold;
  font-size: 22px;
  cursor: pointer;
}
.spin:active{
  width: 70px;
  height: 70px;
  font-size: 20px;
}
button.spin:before {
    content: url(./button-click-spin.png);
    background-size: 25px;
    background-repeat: no-repeat;
    float: left;
    position: absolute;
    left: -485px;
    top: -35px;
}

.refresh {
    position: absolute;
    top: 30px;
    right: 45px;
}
.refresh a {
  background: #4aa946;
  padding: 10px 30px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-family: Arial;
  font-size: 20px;
  border-radius: 50px;
}
.message {
    display: block;
    position: fixed;
    left: 40px;
    bottom: 50px;
}
.message span {
    display: block;
    width: max-content;
    height: 100%;
    position: relative;
    background: #149773;
    padding: 10px 20px;
    text-align: center;
    margin: 0 auto;
}
.message p {
    margin-top: 35px;
    text-align: center;
    line-height: 30px;
}
.mainbox.animate:before{
  animation: animateArrow 0.7s ease infinite;
}
@keyframes animateArrow{
  50%{
    right: -40px;
  }
}