/* GENERAL */
#my404 { min-height: calc(100vh - 7rem); }
#my404 h1 { color: #00b5cc; }

main { padding: 0; margin: 0; display: flex; min-height: 100vh; flex-direction: column; justify-content: center; position: relative; width: 100%; z-index: 1; }
main > .container-lg { position: relative; z-index: 1; }
main section { padding: 0; }

.form-check-input { border: solid 1px #434040 !important; position: relative; top: -2px; }

.theme-btn { position: relative; background: transparent; color: #ffffff; font-size: 2.75rem; font-weight: 400; border: none; border-radius: 5rem; padding: 1rem; width: auto; max-width: 425px; margin: 0; }
.theme-btn::before { content: ''; position: absolute; inset: 0; padding: 2px; border-radius: inherit; z-index: -1; background: linear-gradient(90deg, var(--purple) 0%, var(--pink) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.theme-btn img.btn-chevron { position: relative; display: inline-block; width: 17px; line-height: 1; margin: 0; margin-left: 2rem; top: -3px; }



/* HOME */
#home { background: transparent url('../img/bgs/home-bg.jpg') no-repeat center; background-size: cover; align-items: flex-start; }
#home > .container-fluid, #confirmation > .container-fluid { margin: -15rem 0 0 0; padding: 0 7vw; }
#home h1, #confirmation h1 { font-size: 6rem; line-height: 1; }
#home #eyezen-logo { max-width: 450px; }

#essilor-footer { position: absolute; display: flex; flex-direction: column; width: 400px; right: 2rem; bottom: 1rem; }



/* SIGNUP */
#signup { background: transparent url('../img/bgs/signup-bg.jpg') no-repeat center; background-size: cover; }

#signupform { padding: 0 4rem; }
#signupform label { color: #eeeeee !important; font-size: 1.15rem; font-weight: 500; margin-bottom: .5rem; }
#signupform a { color: #ffffff; }

#signupform .form-control, #signupform .form-select { background: transparent; border: 2px solid transparent !important; color: #ffffff; position: relative; border-radius: 5rem !important; padding: 1rem; margin: 0; z-index: 0; height: 50px; background: linear-gradient(#000, #000) padding-box, linear-gradient(90deg, var(--purple), var(--pink)) border-box; }

#signupform .form-check-input { appearance: none; -webkit-appearance: none; cursor: pointer; height: 17px; width: 17px; padding: 0; border-radius: 0 !important; margin-right: .75rem; top: -2px; border: 1px solid transparent !important; color: #ffffff; position: relative; z-index: 0; background: linear-gradient(#000, #000) padding-box, linear-gradient(0deg, var(--purple), var(--pink)) border-box; }
#signupform .form-check-input:checked::after { content: ""; position: absolute; inset: 3px; background: #eeeeee; mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='white' d='M6.173 12.414L2.05 8.293l1.414-1.414 2.708 2.707 6.364-6.364 1.414 1.414z'/></svg>") center/contain no-repeat; }

#signupform .list-select { position: relative; display: block; }
#signupform .list-select::before { content: '▼'; position: absolute; z-index: 1; right: 1rem; top: 50%; transform: translateY(-50%); display: flex; vertical-align: -.125em; width: 2.5rem; height: 2.5rem; color: #eeeeee; font-size: 2.5rem; align-items: center; justify-content: center; }

#signupform button[type="submit"] { background-color: rgba(255, 143, 180, 0.25); font-size: 1.5rem; font-weight: 500; width: 100%; max-width: 250px; }
#signupform button[type="submit"] .btn-chevron { width: 15px; }



/* CONFIRMATION */
#confirmation { background: transparent url('../img/bgs/confirmation-bg.jpg') no-repeat center; background-size: cover; }



/* COMMON FOOTER */
#logo-essilor { position: absolute; bottom: 0; left: 3rem; width: 110px; z-index: 9; }
#disclaimer { position: absolute; z-index: 9; bottom: 1rem; width: 100%; max-width: 60%; text-align: start; left: 14rem; font-size: .8rem; font-weight: 400; }









@media only screen and (max-height: 600px) {
	#signup > .container-lg { transform: scale(80%); }
	#signup ~ #disclaimer { font-size: .5rem !important; }
	
	#confirmation > .container-fluid { margin-top: -11rem; }
	#confirmation + #logo-essilor { width: 80px !important; }
}


@media only screen and (max-width: 1200px){
	#home #eyezen-logo { max-width: 250px; }
	#home h1, #confirmation h1 { font-size: 3rem; }
	#home .theme-btn { font-size: 2rem; max-width: 300px; }
	
	#signup h1 { font-size: 2rem; }
	#signupform label { font-size: 1rem; }
	#signupform .mt-md-5 { margin-top: 1rem !important; }
	#signupform .form-control, #signupform .form-select { height: 40px; padding: .5rem 1rem; }
	#signup + #logo-essilor { width: 60px; }
	#signup ~ #disclaimer { margin: 0; left: 8rem !important; font-size: .6rem; }
	#signupform button[type="submit"] { max-width: 170px; font-size: 1.35rem; }
	#signupform button[type="submit"] .btn-chevron { width: 12px; }
	
	#essilor-footer { width: 290px; }
	#essilor-footer .fs-3 { font-size: 1.5rem !important; }
	#essilor-footer hr { margin: .5rem 0; }
	
	#home + #logo-essilor, #confirmation + #logo-essilor { width: 100px; }
	#home ~ #disclaimer, #confirmation ~ #disclaimer { font-size: .6rem; width: 50%; left: 12rem; }
}


@media only screen and (max-width: 1024px){
	#home > .container-fluid, #confirmation > .container-fluid { margin-top: -10rem; }
	
	#signup ~ #disclaimer { font-size: .5rem; }
	#signupform label, #signupform .form-control, #signupform .form-select { font-size: .9rem !important; }
	#signupform button[type="submit"] { max-width: 135px; font-size: 1rem; }
	
	#essilor-footer { width: 250px; }
	#essilor-footer .fs-3 { font-size: 1.25rem !important; }
	
	#logo-essilor { width: 80px; }
	#home ~ #disclaimer, #confirmation ~ #disclaimer { font-size: .5rem; width: 50%; left: 11rem; }
}


@media only screen and (max-width: 768px){
	#signup ~ #disclaimer { width: 100%; max-width: 80%; }
	
	#essilor-footer { bottom: 1rem; }
	#home ~ #disclaimer, #confirmation ~ #disclaimer { width: 40%; left: 11rem; margin: 0; bottom: 1rem; }
}


@media only screen and (max-width: 667px) {
	#home > .container-fluid, #confirmation > .container-fluid { margin-top: -7rem; }
	#home #eyezen-logo { max-width: 200px; }
	#home h1, #confirmation h1 { font-size: 2rem; }
	#home .theme-btn { font-size: 1.5rem; max-width: 200px; }
	#home .theme-btn img.btn-chevron { width: 10px; }
	
	#signup > .container-lg { margin-top: 2rem !important; transform: scale(.9); }
	#signupform { padding: 0; margin-bottom: 10rem; }
	
	#confirmation > .container-fluid { transform: scale(.75); padding: 0; }
	
	#essilor-footer { width: 220px; }
	#essilor-footer .fs-3 { font-size: 1rem !important; }
	#essilor-footer hr { margin: .35rem 0; }
	
	#home + #logo-essilor, #confirmation + #logo-essilor { width: 50px !important; left: 1rem; }
	#home ~ #disclaimer, #confirmation ~ #disclaimer { left: 5rem; font-size: .35rem; max-width: 70%; width: 50%; }
}


@media only screen and (max-width: 576px){	
	#home > .container-fluid, #confirmation > .container-fluid { margin-top: -10rem; }
	
	#signup > .container-lg { margin-top: 0 !important; }
	#signupform { padding: 0; margin-bottom: 15rem; }
	#signup ~ #disclaimer { font-size: .4rem; left: 6rem !important; max-width: 70%; }
	
	#confirmation > .container-fluid { margin-top: -15rem; transform: scale(1); padding: 0 7vw; }
	
	#logo-essilor { width: 50px !important; left: 1rem; }
	#essilor-footer { left: 50%; transform: translateX(-50%); bottom: 8rem; width: 80%; }
	#home ~ #disclaimer, #confirmation ~ #disclaimer { left: 5rem; font-size: .35rem; max-width: 100%; width: 70%; }
}


@media only screen and (max-width: 320px){
}