/* 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; }


#logo-varilux { position: absolute; top: 3rem; left: 3rem; width: 350px; z-index: 9; }
#logo-essilor { position: absolute; bottom: 0; left: 3rem; width: 110px; z-index: 9; }


/* HOME */
#home { background: transparent url('../img/bgs/home-bg.jpg') no-repeat center center; background-size: cover; }
#home .display-1 { font-size: 8rem; line-height: 1; }



/* SIGNUP */
#signup { background: #ffffff url('../img/bgs/signup-img-left.jpg') no-repeat left center; background-size: 50% 100%; color: #000000; }

#signupform { padding: 0 4rem; }
#signupform label { color: #434040; font-size: 1.25rem; font-weight: 500; }
#signupform label#zip-label { margin-bottom: 26px; }
#signupform input.form-control { border-bottom: solid #434040 1px !important; height: 40px; font-size: 1.15rem; padding: .15rem 0; }

#sesonrial-exps-container { display: flex; align-items: center; justify-content: space-between; }
#sesonrial-exps-container .form-group { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; cursor: pointer; margin: 0 1rem; padding: 1rem; }
#sesonrial-exps-container .form-group.active { background-color: #e3e3e3; cursor: default; }
#sesonrial-exps-container .form-group.disabled { cursor: not-allowed; pointer-events: none; }
#sesonrial-exps-container .form-group img { height: 60px; width: auto; margin-bottom: 2rem; }
#sesonrial-exps-container .form-group label { text-align: center; }

#label-info-popup { position: relative; display: flex; width: 15px; height: 15px; border: solid 1px #000000; border-radius: 50%; align-items: center; justify-content: center; line-height: 1; margin-left: .5rem; cursor: pointer; }

#lightbox { position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; }
#closeLightbx { position: absolute; z-index: 9; right: 3rem; top: 3rem; font-size: 3rem; }
#lightbox img { width: 100%; max-width: 500px; position: relative; margin: 0 auto; }


#confirmation { background: transparent url('../img/bgs/confirmation-bg.jpg') no-repeat center center; background-size: cover; justify-content: end; }
#confirmation-text { margin-bottom: 8rem; }
#confirmation .display-1 { font-size: 6rem; line-height: 1; }



#disclaimer { position: absolute; z-index: 9; bottom: 1rem; width: 745px; text-align: start; left: 14rem; font-size: .5rem; }









@media only screen and (max-height: 600px) {
	#home .display-1 { font-size: 4.5rem; }
	#home p.fs-2 { font-size: 1.5rem !important; }
}



@media only screen and (max-width: 1200px){
	#disclaimer { width: 30%; bottom: 0; }
	
	#signup { padding: 3rem 0; }
	#signupform label, #signupform label.form-check-label { font-size: 1rem !important; }
	#sesonrial-exps-container .form-group img { height: 30px; }
	#sesonrial-exps-container .form-group label { font-size: .7rem !important; }
	
	#confirmation { justify-content: center; }
	#confirmation-text { margin-bottom: 0; margin-top: 2rem; }
	#confirmation .display-1 { font-size: 4.5rem; }
	#confirmation p.fs-3 { font-size: 1.5rem !important; }
	
	#logo-varilux { width: 250px; }
	#logo-essilor { width: 80px; }
}



@media only screen and (max-width: 1024px){
	#home .display-1 { font-size: 4.5rem; }
	#home p.fs-2 { font-size: 1.5rem !important; }
	
	#signupform { padding: 0 1rem; }
	#signupform label, #signupform label.form-check-label { font-size: .85rem !important; }
	#sesonrial-exps-container .form-group label { font-size: .6rem !important; }
	
	#disclaimer { left: 10rem; }
}



@media only screen and (max-width: 768px){
	#logo-varilux { width: 160px; left: 1rem; top: 1rem; }
	
	#signup { background-size: cover; background-position: center; padding-top: 5rem; }
	#signupform { background-color: rgba(255,255,255,.85); padding: 2rem; margin-bottom: 3rem; }
	#sesonrial-exps-container .form-group label, #signupform input.form-control { font-size: 1rem !important; }
	#signupform label#zip-label { margin-bottom: 16px; }
	
	#logo-essilor { width: 40px; left: 1rem; }
	#disclaimer { left: 5rem; width: 85%; bottom: -8px; font-size: .45rem; }
}

@media only screen and (max-width: 667px) {
	#logo-varilux { width: 125px; left: 1rem; top: 1rem; }
	
	#home .display-1 { font-size: 3rem; }
	#home p.fs-2 { font-size: 1rem !important; }
	
	#signupform { width: 90%; left: 50%; transform: translateX(-50%); position: relative; }
	#sesonrial-exps-container .form-group label { font-size: .85rem !important; }
	
	#confirmation .display-1 { font-size: 2rem; }
	#confirmation p.fs-3 { font-size: 1rem !important; }
	
	#logo-essilor { left: 1rem; width: 40px; }
	#disclaimer { left: 50%; transform: translateX(-40%); width: 85%; bottom: 0rem; font-size: .35rem; }
}



@media only screen and (max-width: 576px){
	p { font-size: .9rem; }
	.form-text { font-size: .75rem; }
	
	#signupform { left: 0; transform: none; width: 100%; }
	#signupform label#zip-label { margin-bottom: 0; }
	#sesonrial-exps-container .form-group { padding: 1rem 0; }
	#signupform .form-group label, #signupform label.form-check-label, #signupform label.form-check-label a { font-size: .75rem !important; }
	#sesonrial-exps-container .form-group img { height: 25px; }
	#sesonrial-exps-container .form-group label { font-size: .5rem !important; }
	#closeLightbx { position: absolute; z-index: 9; right: 2rem; top: 2rem; font-size: 2rem; }
	
	#logo-essilor { left: 1rem; width: 30px; }
	#disclaimer { left: 50%; transform: translateX(-40%); width: 70%; bottom: 0rem; font-size: .35rem; }
	
}



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