@font-face {
  font-family: 'MabryPro'; /*a name to be used later*/
  src: url("https://green-cola.oasisapp.gr/Fonts/NeoSansProGrk-Bold.otf") format("opentype"); /*URL to font*/
}
@font-face {
  font-family: TrumpGothicPro; /*a name to be used later*/
  src: url("https://green-cola.oasisapp.gr/Fonts/TrumpGothicPro-Bold.ttf"); /*URL to font*/
  
}


html{
  height: -webkit-fill-available;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  width: 100vw;
  overflow: hidden;
  font-family: MabryPro;
}

p{
  font-family: MabryPro;
  font-size: small;
}


#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100%;}
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar {
display: flex;
background-image: url('https://green-cola.oasisapp.gr/images/Enterapp_background.webp');
background-size: cover;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-position-x: center;
background-color: #197f3a;
flex-flow: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
}
#loading-content{
  position: absolute;
  transform: scale(1.5);;
}
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-light.png') no-repeat center;background-size: contain; filter: invert(1);}
#unity-progress-bar-empty {
  width: 100vw;
  height: 21px;
  background-color: #e0e0e0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 100;

}

#unity-progress-bar-full {
  height: 100%; /* Full height of the parent */
  width: 0; /* Start with 0 width */
  background-color: #4caf50; /* Green color for the full bar */
  transition: width 0.2s ease; /* Smooth transition effect */
}

#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

.competition-form{
  z-index: 1000;
  display: flex;
  width: 100vw;
  min-height: 100vh;
  justify-content: start;
  align-items: center;
  background-color: white;
  position: absolute;
  padding-top: 3vh;
  flex-flow: column;

}

.competition-form-row{
  max-width: 1000px;
  width: 90vw;
  flex-flow: row;
  display: flex;
  justify-content: space-between;

}

.register-form-field{
  width: 100%;
  display: flex;
  flex-flow: column;
  padding: 10px 0px;
}

.competition-form-col{
  max-width: 1000px;
  width: 90vw;
  flex-flow: column;
  display: flex;
  justify-content: space-between;
}

.register-bottom{
  justify-content: start;
display: flex;
align-items: center;
flex-flow: column;
}

.register-submit{
margin-bottom: 2%;
background-color: transparent;
width: 115px;
}

.input-field-desc {
  font-size: x-large;
  color: #3eae3e;
}

#close-competition-form{
  cursor: pointer;
}

.carousel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 62vw;
  height: 100vh;
  text-align: center;
}

.logos-img{
  width: 40vw;
height: fit-content;
position: relative;
top: 1%;
}

.carousel-text{
  display: flex;
  width: 100%;
  animation: animate-grow 3s;
}

.carousel-text .btn-primary{
  width: 15%;
}

.quote-text-holder{
  background-image: url('https://green-cola.oasisapp.gr/images/tambela_white.webp');
background-size: cover;
width: 70%;
background-repeat: no-repeat;
padding: 19px 0px;
display: flex;
justify-content: center;
background-position-y: center;
animation: jiggle 3s ease-in-out infinite;
}

.carousel-text p{
  font-size: 5vw;
padding: 0;
margin: 0;
border: none;
font-family: TrumpGothicPro;
transform: rotate(-5deg);


}
.carousel-buttons {
 /*  margin-top: 20px; */
 display: flex;
  width: 100%;
  justify-content: space-between;
}

.btn-disabled{
  pointer-events: none;
  color: gray;
  max-width:50vw;
  opacity: 0.6;
}

.disclaimer{
  pointer-events: none;
  color: white;
  max-width:50vw;
}


.btn-primary{
  background-color: transparent;
  border: none;
  font-family: TrumpGothicPro;
  font-size: large;
}

.btn-primary img{min-width: 25px;}

.btn-enter{
  width: 30vw;
margin: 2vh;
outline: none;
padding: 10px;
background-color: transparent;
border: none;
font-family: TrumpGothicPro;
font-size: large;
min-width: 70px;
max-width: 220px;
}

/*animations*/

/* jiggle */
@keyframes jiggle {
  0%, 30%, 100% {
      transform: translateX(0);
  }
  5% {
      transform: translateX(-5px);
  }
  10% {
      transform: translateX(5px);
  }
  15% {
      transform: translateX(-5px);
  }
}


/* Pop In */
.animate.pop {animation: animate-pop 1s linear; }

@keyframes animate-pop {
0% {
  opacity: 0;
  transform: scale(0.5, 0.5);
}
100% {
  opacity: 1;
  transform: scale(1, 1);
}
}

/* Grow In */
.animate.grow { animation: animate-grow 3s linear;  }

@keyframes animate-grow {
0% {
  opacity: 0;
  transform: scale(0, 0);
  visibility: hidden;
}
50% {
  opacity: 0;
  transform: scale(0, 0);
  visibility: hidden;
}

75% {
  opacity: 0;
  transform: scale(0, 0);
  visibility: hidden;
}
100% {
  opacity: 1;
  transform: scale(1, 1);
}
}


/* Slide In */
.animate.slide { animation: animate-slide 0.5s linear; }

@keyframes animate-slide {
0% {
  opacity: 0;
  transform: translate(-80px, 0px)
}
100% {
  opacity: 1;
  transform: translate(0, 0);
}
}

/* drop */
.animate.drop { animation: animate-drop 1s linear; }

@keyframes animate-drop {
0% {
  opacity: 0;
  transform: translate(0px, -100px)
}
100% {
  opacity: 1;
  transform: translate(0, 0);
}
}


/* Animation Delays */
.delay-1 {
  animation-delay: 1s !important;
}
.delay-2 {
  animation-delay: 1.5s !important;
}
.delay-3 {
  animation-delay: 0.8s !important;
}