:root
{
	--color-FLEX-logo-start: #E71D2A;
	--color-FLEX-logo-end: #000;
}

body {
    background: #fff;
    overflow: hidden;
    animation: color-change-2x .2s ease 6.8s both;
}
@keyframes color-change-2x {
  0% {    background: #FFFFFF;  }
  100% {  background: #E71D2A;  }
}


#Page_Footer::before, #Page_Footer::after {
  z-index: 10;
}

.frontLogo {
    width: fit-content;
    height: fit-content;
    min-width: 500px;
    min-height: 200px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    z-index: 1;
    animation: fade-out 1s ease-out 5s both;
}
@keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

/* ------------------------------ FrontLine -------------------------------------- */
.front_line {
    width: fit-content;
    height: fit-content;
    min-width: 892px;
    min-height: 339px;
    top: 0;
    bottom: -67px;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    z-index: 2;
    background: url(/_customers/images/ui/CocaCola/Vector.png);
    background-repeat: no-repeat;
    animation: slide-out-trBox 2.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3s both;
}
@keyframes slide-out-trBox {
    0% {
      transform: translateY(0) translateX(0);
      opacity: 1;
    }
    100% {
      transform: translateY(-1000px) translateX(1000px);
      opacity: 1;
    }
  }
  
/* ------------------------------ FrontLine -------------------------------------- */

/* -------------------------------------------------- BALL ANIMATE --------------- */
.frontBall {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}

.frontBall div {
  background: var(--theme-color);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  border-radius: 50px;
  width: 20px;
  height: 20px;
}


:root {
  --animation-duration: .5s;
  --animation-delay: 5s;
}

@keyframes slide-out-top {
  0% {
    transform: translateY(0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-1000px) scale(17);
    opacity: 0;
  }
}

@keyframes slide-out-left {
  0% {
    transform: translateX(0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-1000px) scale(12);
    opacity: 0;
  }
}

@keyframes slide-out-right {
  0% {
    transform: translateX(0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translateX(1000px) scale(16);
    opacity: 0;
  }
}

@keyframes slide-out-bottom {
  0% {
    transform: translateY(0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translateY(1000px) scale(18);
    opacity: 0;
  }
}

@keyframes slide-in-fwd-center {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(100);
    opacity: 1;
  }
}

@keyframes slide-out-tr {
  0% {
    transform: translateY(0) translateX(0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-1000px) translateX(1000px) scale(15);
    opacity: 0;
  }
}

@keyframes slide-out-br {
  0% {
    transform: translateY(0) translateX(0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translateY(1000px) translateX(1000px) scale(13);
    opacity: 0;
  }
}

@keyframes slide-out-bl {
  0% {
    transform: translateY(0) translateX(0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translateY(1000px) translateX(-1000px) scale(14);
    opacity: 0;
  }
}

@keyframes slide-out-tl {
  0% {
    transform: translateY(0) translateX(0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-1000px) translateX(-1000px) scale(16);
    opacity: 0;
  }
}

.frontBall div:nth-child(1) {  /* --------------- TOP ---------------------- */
  animation: slide-out-top cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation-duration: var(--animation-duration);
  animation-delay: calc(var(--animation-delay) + 0.2s);   
} 

.frontBall div:nth-child(2) {  /* --------------- LEFT ---------------------- */
  animation: slide-out-left cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation-duration: var(--animation-duration);
  animation-delay: calc(var(--animation-delay) + 0.4s);   
}

.frontBall div:nth-child(3) { /* --------------- RIGHT ---------------------- */
  animation: slide-out-right cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation-duration: var(--animation-duration);
  animation-delay: calc(var(--animation-delay) + 0.6s);   
}

.frontBall div:nth-child(4) { /* --------------- BOTTOM ---------------------- */
  animation: slide-out-bottom cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation-duration: var(--animation-duration);
  animation-delay: calc(var(--animation-delay) + 0.8s);   
}

.frontBall div:nth-child(5) {  /* -------------------- MIDDLE ---------------------- */
  animation: slide-in-fwd-center cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-duration: calc(var(--animation-duration));
  animation-delay: calc(var(--animation-delay) + 1s);
}

.frontBall div:nth-child(6) { /* --------------- 2 ---------------------- */
  animation: slide-out-tr cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation-duration: var(--animation-duration);
  animation-delay: calc(var(--animation-delay) + 0.25s);   
}

.frontBall div:nth-child(7) { /* --------------- 4 ---------------------- */
  animation: slide-out-br cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation-duration: var(--animation-duration);
  animation-delay: calc(var(--animation-delay) + 0.30s);   
}

.frontBall div:nth-child(8) { /* --------------- 6 ---------------------- */
  animation: slide-out-bl cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation-duration: var(--animation-duration);
  animation-delay: calc(var(--animation-delay) + 0.40s);   
}

.frontBall div:nth-child(9) { /* --------------- 8 ---------------------- */
  animation: slide-out-tl cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation-duration: var(--animation-duration);
  animation-delay: calc(var(--animation-delay) + 0.50s);   
}


/* -------------------------------------------------- BALL ANIMATE --------------- */

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.frontBottle {
  background: url(/_customers/images/ui/CocaCola/bottle.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 225px;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: fade-in .5s ease-out 7s both;
  display: none;
}
.botLine {
  background: url(/_customers/images/ui/CocaCola/botLine.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -25%;
  left: 0;
  right: 0;
  margin: auto;
  animation: fade-in .5s ease-out 7s both;
  z-index: 2;
}

/* LOGIN FORM */
form {
  display: grid;
  padding: 110px 40px 40px 40px;
  position: fixed;
  right: 0;
  left: 0;
  bottom: 30%;
  margin: auto;
  min-height: 240px;
  max-height: 360px;
  height: min-content;
  min-width: 400px;
  width: fit-content;
  color: #000;
  font-family: var(--font-family-medium);
  background: url(/_customers/images/ui/CocaCola/LOGO.svg) ;
  background-repeat: no-repeat;
  background-position: center top 0px;
  background-size: 260px;
  border-radius: 16px;
  z-index: 10;
  animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 6.2s both;
}

@keyframes scale-in-ver-center {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes formAni {
0% {	opacity: 0; 	}
100% {	opacity: 1; 	}
}

form div {
font-size: 12px;
text-align: left;
grid-area: 6 / 1 / 9 / 2;
margin-top: 15px;
color: #fff;
font-style: var(--font-family-regular);
padding: 20px;
letter-spacing: 1px;
}

input {
padding: 10px 20px;
color: #000;
background: #fff;
border: none;
border-bottom: 1px solid #adadad;	
outline: none;
margin-top: 10px;
width: 400px;
height: 40px;
border-radius: 0px;
}

input[name="email"] {
grid-area: 2 / 1 / 3 / 2;
}

input[name="password"] {
grid-area: 3 / 1 / 4 / 2;	
}

input[name="code"] {
grid-area: 4 / 1 / 5 / 2;
}

input[name="code"]::placeholder {
color: #ccc;
}

::placeholder {
color: #000;
font-family: var(--font-family-regular);
font-size: 14px;
font-weight: 400;
}

button {
border: none;
color: #fff;
cursor:pointer;
font-style: var(--font-family-medium);
font-weight: 600;
font-size: 15px;
letter-spacing: .5px;
text-transform: uppercase;
outline: none;
display: block;
margin-top: 10px;
height: 40px;
width: 195px;
border-radius: 3px;
}

button.login-only.login {
background: #000;
cursor: pointer;
display: block;
grid-area: 4 / 1 / 6 / 2;
font-family: var(--font-family-medium);
}

button.login-only.login:hover {
background: transparent;
border: 2px solid #000;
transition: 0.3s;
}

button.login-only.register {
background: #FFF;
margin-left: 205px;
border: unset;
color: #000;
cursor: pointer;
display: block;
grid-area: 4 / 1 / 6 / 2;
font-family: var(--font-family-medium);
}

button.login-only.register:hover {
background: transparent;
color: #fff;
transition: 0.3s;
border: 2px solid #fff;
}

button.forgot::after {
content:"";
position: absolute;
display: none;
background: #ddd;
width: 55%;
height: .8px;
right: 20px;
bottom: 40px;
}

button.login-only.forgot {
background: none;
color: #03252C;
width: 50%;
text-align: left;
font-weight: 500;
line-height: 20px;
cursor: pointer;
font-size: 12px;
grid-area: 5 / 1 / 8 / 2;
margin-top: 40px;
height: 20px;
text-transform: uppercase;
padding: 0;
font-family: var(--font-family-regular);
}

button.login-only.forgot:hover {
color: #E71D2A;
transition: 0.3s;
}

button.register-only.register {
background: #000;
color: #fff;
grid-area: 5 / 1 / 7 / 2;
}

button.register-only.register:hover {
background: transparent;
border: 2px solid #000;
color: #fff;
transition: 0.3s;
}

button.register-only.cancel {
background: #fff;
border: 2px solid var(--theme-color);
color: var(--theme-color);
margin-left: 205px;
grid-area: 5 / 1 / 7 / 2;
}

button.register-only.cancel:hover {
background: var(--theme-color);
border: 2px solid #fff;
color: #fff;
transition: 0.3s;
}
/* LOGIN FORM -------------------------------------------------------------- */