*{
	padding: 0px;
	margin: 0px;
}

@font-face{
	font-family: Unna;
	src: url(../font/Unna-Regular.ttf);
	font-weight: 400;
}

@font-face{
	font-family: Unna;
	src: url(../font/Unna-Bold.ttf);
	font-weight: 700;
}

@font-face{
	font-family: Sail;
	src: url('../font/Sail-Regular.ttf');
	font-weight: 400;
}


body{
	padding-bottom: 80px;
	background-image: linear-gradient(90deg, #F6D3DB 0%, #ffdde3 100%);
	font-family: "Unna";
}

button,
input,
select{
	font-family: "Unna";
}

button,
input[type="submit"],
.checkbox{
	cursor: pointer;
	transition-duration: 0.1s;
	transition-timing-function: ease-in;
	transition-property: border;
}

#calendar::-webkit-scrollbar{
	width: 32px;
	background: transparent;
}

#calendar::-webkit-scrollbar-thumb{
	background: #333;
	border: 12px solid transparent;
	border-top-width: 0px;
	border-bottom-width: 0px;
	background-clip: padding-box;
}



/* 	
	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

	*	[header]

	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
*/
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
		top: 0px;
		left: 0px;
		z-index: 3;
	width: 100%;
	padding: 32px 240px;
	box-sizing: border-box;

	background: #F9D9DF;
}


	header ul{
		list-style: none;
	}

		header li{
			display: inline-block;
			margin-right: 32px;
		}

			header li:last-of-type{
				margin-right: 0px;
			}

			header li a{
				color: #222;
				font-size: 24px;
				text-decoration: none;
			}


	.btn-cta{
		display: block;
		width: 160px;
		position: relative;
		padding: 6px 0px;
		border: 3px solid #E81F2C;
		box-sizing: border-box;

		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .15);

		color: #E81F2C;
		font-size: 22px;
		font-weight: 400;
		text-align: center;
		text-decoration: none;
	}

		.btn-cta svg{
			position: absolute;
				top: 50%;
			filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, .15));
		}
		.btn-cta svg:first-of-type{
			left: 0px;
			transform: translate(-100%, -50%);
		}
		.btn-cta svg:last-of-type{
			right: 0px;
			transform: translate(100%, -50%)
		}



/* 	
	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

	*	[Hero Section]

	+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
*/
#sec-hero{
	height: 100vh;
	padding-top: 144px;
	box-sizing: border-box;

	background-image: url('../media/img/hero.jpg');
	background-position: center bottom -128px;
	background-repeat: no-repeat;

	color: #222;
	text-align: center;
}

	#sec-hero h1{
		font-size: 128px;
		font-family: "Sail";
		font-weight: 400;
	}
		.highlighted-word{
			color: #E81F2C;
		}

	#sec-hero p{
		width: 640px;
		margin: 30px auto;

		font-size: 36px;
		font-weight: 400;
	}

	#sec-hero .btn-cta{
		display: inline-block;
		padding: 6px 30px;
		box-sizing: content-box;

		background: #F9D9DF;

		font-size: 32px;
	}
		#sec-hero .btn-cta svg{
			width: auto;
			height: 40px;
		}


	/* 	
		+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

		*	[Team Section]

		+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
	*/
	#sec-team{
		display: flex;
		justify-content: center;
		/*padding: 80px 320px;*/
		padding: 80px 320px;
	}

		#sec-team .col-1{
			width: 590px;
			margin-right: 20px;
			color: #222;
		}

			#sec-team .col-1 h2{
				font-size: 64px;
				font-weight: 400;
			}
			#sec-team .col-1 p{
				font-size: 24px;
				font-weight: 400;
			}


		#sec-team .col-2{
			flex-shrink: 0;

			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr;
			gap: 20px;

			width: 590px;
			height: 412px;
			padding: 20px;
			box-sizing: border-box;

			background: #FFF0F3;
		}

			#sec-team .member{
				display: flex;
				/*grid-template-columns: 1fr 1.5fr;*/
			}

				#sec-team .member-img-holder{
					width: 112px;
					flex-shrink: 0;
					background: #666;
					background-image: url('../media/img/member-sprite.jpg');
				}

				#sec-team .member:nth-child(1) .member-img-holder{
					background-position: 0px 0px;
				}
				#sec-team .member:nth-child(2) .member-img-holder{
					background-position: 112px 0px;
				}
				#sec-team .member:nth-child(3) .member-img-holder{
					background-position: 0px 176px;
				}
				#sec-team .member:nth-child(4) .member-img-holder{
					background-position: 112px 176px;
				}

				#sec-team .member img{
					display: block;
					width: 100%;
				}

				#sec-team .member-content{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					position: relative;
					padding: 0px 10px;

					color: #222;
					text-align: center;
				}

					#sec-team .member-content h2{
						margin-bottom: 8px;
						font-size: 26px;
						font-weight: 400;
					}

					#sec-team .member-content p{
						font-size: 15px;
						font-weight: 700;
						letter-spacing: 0.1em;
						text-transform: uppercase;
					}

					#sec-team .member-contact{
						display: flex;
						justify-content: center;
						align-items: center;
					}

						#sec-team .member-contact a{
							display: block;
						}
							#sec-team .member-contact a:first-of-type{
								margin-right: 20px;
							}
						#sec-team .member-contact svg{
							height: auto;
							fill: #E81F2C;
						}
							#sec-team .member-contact a:nth-of-type(1) svg{
								width: 24px;
							}
							#sec-team .member-contact a:nth-of-type(2) svg{
								width: 28px;
							}



	/* 	
		+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

		*	[Services Section]

		+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
	*/

	#sec-services{
		height: 680px;
		background-image: url('../media/img/daily-makeup.jpg');
		background-image: 
			linear-gradient(270deg, rgba(64, 45, 48, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%),
			url('../media/img/daily-makeup.jpg');
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-position: center center;		
	    overflow: hidden;
	}

		#service-slider{
			float: right;
			width: 640px;
			margin: 50px 120px 0px 0px;
		}

			#service-slider ul{
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				border-top-width: 	0px;
				border-left-width:	0px;
				border-right-width: 0px;

				border-bottom-width: 1px;
				border-style: solid;
				border-image: 
				  linear-gradient(
				    to right, 
				    #FFB2C1, 
				    rgba(255, 178, 193, 0)
				  ) 1;
				list-style: none;
			}
			
				#service-slider li{
					padding: 16px 32px;
					/*border: 1px solid #F9AEBC;*/
					color: rgba(249, 174, 188, .3);
					font-size: 24px;
					font-weight: 400;

					cursor: pointer;
					user-select: none;
				}

					#service-slider li:first-child{
						color: #F9AEBC;
					}

			#service-slider h2{
				margin: 20px 0px 10px;

				color: #F9AEBC;
				font-size: 80px;
				font-weight: 400;
			}

			#service-slider p{
				color: #fff;
				font-size: 24px;
			}



	/* 	
		+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

		*	[Latest Transformations Section]

		+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
	*/
	#sec-latest{
		padding: 80px 0px;
	}

		#sec-latest h2{
			color: #222;
			font-size: 64px;
			font-weight: 400;
			text-align: center;
		}
		#wr-latest-slider{
			position: relative;
			margin: 32px 0px;
		}
		#wr-latest-slider::after{
			position: absolute;
				top: 50%;
				left: 0px;
				transform: translate(0, -50%);
				z-index: 1;
			display: block;
			width: 100%;
			height: 24px;
			background: #FFF0F3;
			content: "";
		}

		#latest-slider{
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			position: relative;
				z-index: 2;

			width: 800px;
			margin: 0px auto;

			user-select: none;
		}

			#customer-active{
				display: flex;
				width: 320px;
				padding: 20px 30px;
				box-sizing: border-box;
				background: #FFF0F3;

				cursor: pointer;
			}

				#customer-active img{
					width: 100px;
					height: 100px;
					background-color: #333;
				}

				#customer-meta{
					display: flex;
					flex-direction: column;
					justify-content: center;
					flex-grow: 2;
					padding-left: 10px;
				}
					#customer-meta p{
						color: #222;
					}

					#customer-meta p:first-child{
						margin-bottom: 10px;
						font-size: 28px;
						font-weight: 400;
					}

					#customer-meta p:last-child{
						font-size: 20px;
						font-weight: 400;
					}


			.customer-tab{
				width: 100px;
				height: 100px;
				padding: 20px;
				border: 3px solid #FFF;
				background: #F8D7DD;
				box-sizing: border-box;
			
				cursor: pointer;
			}

				.customer-tab img{
					width: 100%;
					height: 100%;
					background-color: #333;
				}


		#latest-content{
			display: flex;
			justify-content: center;

			width: 800px;
			margin: 80px auto;
		}
			#latest-content .col-1{
				width: 50%;
				height: 420px;
				overflow: hidden;
			}
				
				#latest-content .col-1 img{
					width: auto;
					height: 100%;
					background-color: #333;
				}

			#latest-content .col-2{
				position: relative;
				width: 50%;
				padding-left: 20px;

				color: #222;
			}

				#latest-content h3{
					font-size: 48px;
					font-weight: 400;
				}

				#latest-content .col-2 > p{
					margin: 10px 0px;
					font-size: 20px;
					font-weight: 400;
				}

				#customer-quote{
					position: relative;
				}

					#customer-quote p{
						padding: 20px 48px;
						color: #BE576A;
						font-size: 28px;
						font-weight: 400;
						text-align: center;
					}

					.quote-ico{
						position: absolute;
						top: 0px;

						color: #BE576A;
						font-size: 96px;

						user-select: none;
					}

						.quote-ico:nth-child(1){
							left: 0px;
						}

						.quote-ico:nth-child(2){
							right: 0px;
						}

				#btn-next-latest{
					float: right;
					width: 100px;
					padding: 8px 0px;
					border: 3px solid #222;
					background: #F9D9DF;

					color: #222;
					font-size: 22px;
					font-weight: 400;
				}


	/* 	
		+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

		*	[CTA Section]

		+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
	*/
	#sec-cta{
		display: flex;
		/*height: 480px;*/
	}

		#sec-cta .col-1{
			width: 30%;
			padding: 80px 10px 0px 80px;
			box-sizing: border-box;
			background: #E81F2C;
			color: #fff;
		}

			#sec-cta .col-1 h2{
				margin-bottom: 10px;
				font-size: 64px;
				font-weight: 400;
			}

			#sec-cta .col-1 p{
				font-size: 28px;
				font-weight: 400;
			}

		#sec-cta .col-2{
			width: 70%;
			padding: 32px 0px;
			background: #222;

			color: #fff;
			text-align: center;
		}

			#sec-cta .col-2 h2{
				margin-bottom: 20px;
				font-size: 28px;
				font-weight: 700;
			}

			#sec-cta .col-2 > p{
				font-size: 24px;
				font-weight: 400;
			}

			#calendar{
				padding: 0px 192px;
			}

			#stage-1 #calendar{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
				margin-top: 20px;

				user-select: none;
			}

				#stage-1 #calendar > p{
					padding: 20px 0px;
					font-size: 24px;
					text-align: center;
				}

				#stage-1 #calendar .days-label{
					/*border: 1px solid #fff;*/
					font-weight: 700;
				}

				#stage-1 #calendar .btn-day{
					padding: 20px 0px;
					border: none;
					background: none;
					border: 1px solid transparent;
					color: #fff;
					font-size: 24px;
					font-weight: 400;
					cursor: pointer;
				}

					#stage-1 #calendar .btn-day:hover{
						border: 1px solid #E81F2C;
					}

					#stage-1 #calendar .btn-day:active{
						background: #111;
					}

					#stage-1 #calendar .btn-day:disabled{
						background: #333;
					}

					#stage-1 #calendar .blank-day{
						background: #222;
						cursor: default;
					}


					#stage-1 #calendar .passed-day{
						color: rgba(255, 255, 255, .2);
					}

						#stage-1 #calendar .blank-day:hover,
						#stage-1 #calendar .passed-day:hover{
							border-color: transparent;
						}
						#stage-1 #calendar .blank-day:active,
						#stage-1 #calendar .passed-day:active{
							background: #222;
						}

				#stage-2 h2{}
				
				#stage-2 #calendar{
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 20px;
					margin-top: 20px;
					height: 320px;
					overflow-y: scroll;
				}

					.btn-time{
						display: flex;
						align-items: center;
						padding: 16px 32px;
						border: 1px solid #555;
						background: #222;

						color: #fff;
						font-size: 24px;
						font-weight: 400;
					}

						.checkbox{
							flex-shrink: 0;
							display: block;
							width: 32px;
							height: 32px;
							margin-right: 40px;
							border: 1px solid #555;
							background: transparent;
						
						}

						.time-value{
							flex-grow: 1;
							text-align: left;
						}
					.btn-time:hover{
						border-color: #E81F2C;
					}
					.btn-time:hover .checkbox{
						border-color: #E81F2C;
					}
					.btn-time:active{
						background: #111;
					}

					.btn-time:disabled{
						color: rgba(255, 255, 255, .2);
						border-color: #2E2E2E;
					}
					.btn-time:disabled:hover{
						border-color: #2E2E2E;
					}

						.btn-time:disabled .checkbox{
							border-color: #2E2E2E;
						}					
						.btn-time:disabled:hover .checkbox{
							border-color: #2E2E2E;
						}

			#stage-3{
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

				#stage-3 form{
					width: 390px;
					margin: 0px auto;
					text-align: left;
				}

					#stage-3 label{
						display: block;
						width: 100%;
						margin: 15px 0px 5px;

						font-size: 18px;
						font-weight: 700;
					}

					#stage-3 input[type="text"]{
						display: block;
						width: 100%;
						padding: 15px 10px;
						border: 1px solid transparent;
						outline: none;
						box-sizing: border-box;
						background: #333;

						color: #F9D9DF;
						font-size: 18px;
						font-weight: 400;
					}

					#stage-3 input:focus{
						border-color: #E81F2C;
						color: #FFF;
					}

					#wr-input-birth{
						display: flex;
						justify-content: space-between;
					}
						#stage-3 select{
							width: 120px;
							padding: 10px 15px;
							border: none;
							outline: none;
							box-sizing: border-box;

							background-color: #333;
							background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBwb2ludHM9IjcuMDg2IDMuMTc0IDE3LjA4NiAxMy4xNzQgNy4wODYgMjMuMTc0IiB0cmFuc2Zvcm09InNjYWxlKDEgLTEpIHJvdGF0ZSgtODkgLTEuMzIgMCkiIHN0eWxlPSImIzEwOyAgICBzdHJva2U6ICNmZmY7JiMxMDsiLz4KPC9zdmc+');
							background-repeat: no-repeat;
							background-position: right center;
							background-origin: content-box;
							background-size: auto 16px;

							color: #F9D9DF;
							font-size: 18px;
							font-weight: 400;
							text-align: left;

							appearance: none;
						}
						#stage-3 select:nth-child(2){
							flex-basis: 128px;
						}
							#stage-3 option{
							}

				#stage-3 input[type="submit"]{
					float: right;
					width: 100px;
					padding: 5px 0px;
					margin-top: 20px;
					border: 2px solid #32BA7D;
					background: #222;

					color: #40ED9F;
					font-size: 22px;
				}


			#stage-4{}

				.confirmation-box{
					display: flex;
					gap: 20px;
					width: 390px;
					padding: 15px 20px 25px;
					margin: 24px auto;
					box-sizing: border-box;

					background: #333;
					box-shadow: 
					0px 4px 20px rgba(0, 0, 0, 0.1), 
					50px 20px 100px rgba(69, 255, 171, 0.05), 
					-50px -20px 100px rgba(69, 255, 171, 0.05);	

					text-align: left;
				}
					.confirmation-box svg{
						display: block;
						width: 64px;
						flex-shrink: 0;
					}
					.confirmation-box .content{
						width: 100%;
					}

					.confirmation-box h3{
						color: #40ED9F;
						font-size: 18px;
						font-weight: 400;
						letter-spacing: 0.1em;
						text-transform: uppercase;
					}

					.confirmation-box p{
						font-size: 24px;
						font-weight: 400;
					}

					#stage-4 .btn-cta{
						margin: 0px auto;
						background: #222;
					}



		#stage-1{display: block;}
		#stage-2{display: none;}
		#stage-3{display: none;}
		#stage-4{display: none;}





	/* 	
		+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

		*	[Footer Section]

		+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
	*/
	footer{
		width: 768px;
		padding: 40px 0px;
		margin: 0px auto;
		color: #222;
		font-size: 18px;
	}
		footer > p{
			margin-bottom: 40px;
			font-size: 64px;
			font-family: "Sail";
			text-align: center;
		}
		footer #wr-cols{
			display: flex;
			justify-content: space-between;			
		}

		footer .col{
		}

		footer h2{
			margin-bottom: 18px;
			font-size: 18px;
			font-weight: 700;
			text-transform: uppercase;
		}

			footer #wr-cols .content{}

			footer #wr-cols p{
				margin: 8px 0px;
			}

			footer #wr-cols ul{
				list-style: none;
			}

				footer #wr-cols li{
					margin: 8px 0px;
				}

					footer #wr-cols li a{
						color: #E81F2C;
						text-decoration: none;
					}