@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@800&display=swap');

@import url("https://use.typekit.net/jvl6ifv.css");

:root
{
	--color-FLEX-logo-start: #fff;
	--color-FLEX-logo-end: #fff;

	--form-font: "brandon-grotesque", sans-serif;
    --color: #441d1f;
}
@font-face
{
	font-family: "brandon-grotesque", sans-serif;
	src: url(./fonts/BrandonGrotesque-Regular.otf) format('otf');
}

.js-loading *,
.js-loading *:before,
.js-loading *:after
{
	animation-play-state: paused !important;
}

/* ------------------- FORM STYLE START HERE! -------------- */
body {
	background: #151D31;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

body::after {
	display: none;
}

body::before {
	display: none;
}

/* FORM START */
form {
	display: grid;
	padding: 80px 20px 50px 20px;
	background: url(/_customers/images/ui/MillerInternational/logo2.png) #151D31;
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: 20px;
	background-size: 60%;	
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;	
	top: 0; 
	margin: auto;
	min-height: 240px;
	max-height: 300px;
	height: min-content;
	min-width: 390px;
	width: fit-content;
	color: #000;
	border-radius: 4px;
	font-family: var(--font-kelson-normal);
	
	z-index: 3;
	animation: formAni 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 4.5s both;
}

@keyframes formAni {
	0% {
		opacity: 0;
		transform: scaleY(0.4);
    	transform-origin: 0% 100%;
	}
	100% {
		opacity: 1;
		transform: scaleY(1);
    	transform-origin: 0% 100%;
	}
}

form div {
	font-size: 12px;
	text-align: left;
	grid-area: 6 / 1 / 9 / 2;
	margin-top: 50px;
	color: #ffffff;
	background: #000000b5;
	font-style: normal;
	padding: 15px 20px;
	letter-spacing: 1px;
	border-radius: 6px;
}

input {
	padding: 10px 20px;
	color: #333;
	background: #fff;
	border: 1px solid #adadad;
	font-size: 18px;
	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: #888888;
	font-family: var(--form-font);
	font-size: 14px;
	font-weight: 400;
}

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

button.login-only.login {
	background: #E48900;
	color: #fff;	
	cursor: pointer;
    display: block;
	grid-area: 4 / 1 / 6 / 2;
}

button.login-only.login:hover {
	background: #ca2d06;
	transition: 0.3s;
}

button.login-only.register {
	background: #136BBC;
	margin-left: 205px;
	cursor: pointer;
	display: block;
	grid-area: 4 / 1 / 6 / 2;
}

button.login-only.register:hover {
	background: #0ba57c;
	transition: 0.3s;
}

button.login-only.forgot {
	background: none;
	color: #ffffff;
	width: 50%;
	text-align: left;
	font-weight: 400;
	line-height: 65px;
	cursor: pointer;
	font-size: 13px;
	grid-area: 5 / 1 / 8 / 2;
	margin-top: 15px;
	height: 20px;
}

button.login-only.forgot:hover {
	color: #000000;
	font-weight: 400;
	transition: 0.3s;
}

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

button.register-only.register:hover {
	background: #15BEF0;
	color: #fff;
	transition: 0.3s;
}

button.register-only.cancel {
	background: #136BBC;
	margin-left: 205px;
	grid-area: 5 / 1 / 7 / 2;
}

button.register-only.cancel:hover {
	background: #383838;
	transition: 0.3s;
}
/* FORM END */

/* Box */
.main_Box {
	width: 100%;
	position: relative;
	display: flex;
	animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 4s both;
}
@keyframes fade-in {
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
  }
  
.main_left_box {
	width: 400px;
	min-width: 400px;
	height: 100vh;
	background: url(/_customers/images/ui/MillerInternational/img/left_side.jpg) #00245e;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	position: fixed;
	z-index: 2;
}
.main_right_box {
	width: 100%;
	height: 100vh;
	right: 0px;
	position: fixed;
	background: #ccc;
	background: url(/_customers/images/ui/MillerInternational/Ladies-1.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
/* image slider start */ 
 
  .slide{
	/* positioning all slides normal position to full size of slider and in view */
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 80%;
	z-index: 1;
	background: url('/_customers/images/ui/MillerInternational/img/bodyBg.jpg');
  
	animation: 30s linear infinite sliderAnimation;
	animation-delay: 3s;	  
	/*border: 20px solid #1d1e22;  thought it looked good */
	/*box-sizing: border-box;  to keep total width at 100% */  
	box-shadow: unset; /* inset shadow on the slides */  
	display: flex;  /* to position the text inside*/
  }
  
  .slide:nth-of-type(1){
	background: no-repeat center/cover url('/_customers/images/ui/MillerInternational/img/img-2.jpg');
	/* positioning for the text inside 
	justify-content: flex-end;
	align-items: flex-start;*/
	animation-delay: -3s;
  }
  .slide:nth-of-type(2){
	background: no-repeat center/cover url('/_customers/images/ui/MillerInternational/img/img-3.jpg');
	/* 12s - 9s = 3s... Will start after 3s */
	animation-delay: -6s;
  }
  .slide:nth-of-type(3){
	background: no-repeat center/cover url('/_customers/images/ui/MillerInternational/img/img-4.jpg');
	/* 12s - 9s = 3s... Will start after 3s */
	animation-delay: -9s;
  }
  .slide:nth-of-type(4){
	background: no-repeat bottom/cover url('/_customers/images/ui/MillerInternational/img/img-5.jpg');
	/* 12s - 9s = 3s... Will start after 3s */
	animation-delay: -12s;
  }
  .slide:nth-of-type(5){
	background: no-repeat center/cover url('/_customers/images/ui/MillerInternational/img/img-6.jpg');
	/* 12s - 9s = 3s... Will start after 3s */
	animation-delay: -15s;
  }
  .slide:nth-of-type(6){
	background: no-repeat center/cover url('/_customers/images/ui/MillerInternational/img/img-7.jpg');
	/* 12s - 9s = 3s... Will start after 3s */
	animation-delay: -18s;
  }
  .slide:nth-of-type(7){
	background: no-repeat center/cover url('/_customers/images/ui/MillerInternational/img/img-12.jpg');
	/* 12s - 9s = 3s... Will start after 3s */
	animation-delay: -21s;
  }
 
  .slide:nth-of-type(8){
	background: no-repeat center/cover url('/_customers/images/ui/MillerInternational/img/img-1.jpg');
	/* 12s - 9s = 3s... Will start after 3s */
	animation-delay: -24s;
  } 
  .slide:last-of-type{
	background: no-repeat top/cover url('/_customers/images/ui/MillerInternational/img/img-2.jpg');
	animation-delay: -27s;
  
  }
  
  @keyframes sliderAnimation{
	/* 4 slides, 20% in place and 5% transition time = 100% */
	0%{transform: translateX(0); opacity: 1;} /* starts in view */
	20%{transform: translateX(0); opacity: 1;} /* stays in view */
	25%{transform: translateX(-100%); opacity: 1;} /* slides out left */
	70%{transform: translateX(-100%); opacity: 0;} /* Doesn't matter at what percent: changes to transparent so can't see it travel back across to the right. */
	71%{transform: translateX(100%); opacity: 0;} /* Doesn't matter at what percent: moves off right */
	95%{transform: translateX(100%); opacity: 1;} /* Becomes transparent and Ready to slide on from the right */
  }
  
  @keyframes fadeIn{
	from{opacity: 0;}
  }
/* image slider end */
/* FRONT LOGO 1 */

.front_logoImg {    
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation: .5s logoMain-ani ease-in-out 3s forwards;
}

@keyframes logoMain-ani {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1);        
	}
}

.front_logoImg img {
    width: 70%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation: 2s frontLogo ease-in-out 2s both;
}
@keyframes frontLogo {
    0%   {  opacity: 0;
            filter: blur(16px);   }

    100% {  opacity: 1;
        filter: blur(0px);   }
}
/* front LOGO */
.front_logo {
	color: #FFF;
	font-family: 'Roboto Slab', serif;
	font-size: 8rem;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-transform: uppercase;
	text-align: center;
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /* width: fit-content;
    height: fit-content; */
	animation: slide-in-bck-center 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.front_logo svg {
	width: 100%; height: 100%;
}
svg text {
	animation: stroke 4s infinite alternate both;
	animation-delay: 3s;
	stroke-width: 2;
	stroke: #FFFFFF;
	font-size: 100px;
}
@keyframes stroke {
	0%   {
		fill: rgba(255,255,255,0); stroke: rgba(255,255,255,1);
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
	70%  {fill: rgba(255,255,255,0); stroke: rgba(255,255,255,1); }
	80%  {fill: rgba(255,255,255,0); stroke: rgba(255,255,255,1); stroke-width: 3; }
	100% {
		fill: rgba(255,255,255,1); stroke: rgba(255,255,255,0);
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}
/* @keyframes slide-in-bck-center {
	0% {
	  transform: translateZ(6000px);
	  opacity: 0;
	}
	50% {
	  transform: translateZ(0);
	  opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
   */