/*header styles*/
@media only screen and (min-width: 1200px) {
	.header .top-menu-container ul li a{
	 	color: #fff;
	}
	.scrolled .top-menu-container ul li a,
	.scrolled{
		color: #000;
	}
}
/* begin hero*/
.hero{
	position: relative;
	height: 100vh;
	/* min-height: 820px; /* height it needs to function */
	min-height: 900px;
	max-height: 1200px;
	background-color: #ff0033;
}

.hero{
	/* --title-size: 22px;
	--gap-size: 12px; */
	--bg-color: #fff;
	--color: #000;
	/* --offset: calc(var(--title-size) / 6.4);
	--spread: calc(var(--title-size) / 9.1); */
	--mg-bottom: calc(50px - var(--gap-size));
}
.hero .container{
	height: 100%;
}
.hero .container [class*="col-"]{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.hero .content-container{
	padding-top: calc(var(--header-height));
	/* position: absolute;
	top: 50%;
	transform: translateY(-50%); */
}

.hero .content-container .subtitle{
	/* margin-top: 50px; */
}
.hero .content-container .subtitle ul{
	/* width: 80%; */
}
.hero .content-container .subtitle ul li{
	margin: 5px 0px;
	list-style-type: none;
	float: left;
	color: #fff;
	background-color: #000;
	font-size: 20px;
	font-weight: 400;
	padding: 7px;
}
.hero .content-container .subtitle ul li::before{
	font-family: 'font awesome 5 free';
	content: "\f00c";
	padding-right: 8px;
	color: #1ED760;
	font-weight: 900;
}


.hero .button-container{
	margin-top: 50px;
}
/*
.hero .button-container a{
	color: #fff;
	text-decoration: none;
	font-size: 20px;
}
.hero .button-container .price-button{
	display: inline-block;
	background-color: #000;
	color: #fff;
	padding: 15px;
	border-radius: 2px;
}
.hero .button-container .price-button:hover{
	color: #000;
	background-color: #fff;
}
.hero .button-container .order-button{
	display: inline-block;
	padding: 15px 0;
	margin-left: 25px;
	border-bottom: 2px solid #fff;
	padding-bottom: 13px;
}
.hero .button-container .order-button:hover{
	border-color: #000;
	color: #000;
}
.hero .button-container .order-button::after{
	content: " >";
} */
.hero .image-container{
	position: relative;
	width: 100%;
	height: 100%;
}
.hero .woman-image{
	position: absolute;
	/* height: 100%; */
	max-width: 100%;
	bottom: 0;
	/* margin: 0 5%; */
}


.hero .media-references{
	position: absolute;
	max-width: 100%;
	bottom: 50px;
	right: 20px;
	border-right: 2px solid #fff;
	padding-right: 20px;
}
.hero .media-references a{
	text-decoration: none;
}
.hero .media-references .socials-container{
	padding-bottom: 0;
}
.hero .media-references .socials{
	float: right;
}
.hero .media-references .socials a{
	color: #fff;
	font-size: 32px;
	margin-left: 5px;
}

.hero {
  --kiyoh-shape: 70px;
}
.hero .kiyoh-card{
	position: relative;
	/* height: 80px; */
	/* padding: 10px; */
	text-align: right;
	/* padding-left: 85px; */
	/* border-radius: 5px;
	box-shadow: 0 0 10px 0px #777;
	background-color: #ccc;
	opacity: 0.5; */

}
.hero .kiyoh-card .rating-text{
	color: #fff;
	font-size: 16px;
	line-height: 30px;
}
.hero .kiyoh-card .star-rating{
	margin: none;
}
.hero .kiyoh-shape{
	position: absolute;
	top: 0;
	left: 0;
	filter: drop-shadow(2px 2px 2px #000);
	/* width: 70px;
	height: 70px;
	font-size: 70px; */
}

@media only screen and (max-width: 1000px) {
	.hero{
		min-height: 500px;
		height: 100vh;
	}
	.hero .content-container{
		position: relative;
		/* top: 150px; */
		padding-top: calc(var(--header-height));
		/* left: 25px; */
		/* width: calc(100vw - 25px - 25px); */
		/* min-width: auto; */
		/* max-width: 500px; */
	}
	.hero{
		--title-size: 48px;
		--gap-size: 8px;
		--bg-color: #fff;
		--color: #000;
		--offset: calc(var(--title-size) / 6.4);
		--spread: calc(var(--title-size) / 9.1);
		--mg-bottom: 30px;
	}
	.hero .content-container .subtitle{
		margin-top: 50px;
	}
	.hero .content-container .subtitle ul{
		width: 100%;
	}
	.hero .content-container .subtitle ul li{
		margin: 5px 0px;
		list-style-type: none;
		float: left;
		color: #fff;
		background-color: #000;
		font-weight: 400;
		font-size: 15px;
		padding: 7px;
	}
	.hero .content-container .subtitle ul li::before{
		content: "✓";
		padding-right: 5px;
		color: lightgreen;
		font-weight: 900;
	}

	.hero .button-container{
		margin-top: 0px;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 10;
	}
	.hero .button-container .order-button,
	.hero .button-container .price-button{
		display: inline-block;
		margin:0;
		border: 0;
		padding: 20px;
		width: 50%;
		text-align: center;
		float: left;
	}
	.hero .button-container .price-button{
		background-color: #5719B4;
	}
	.hero .button-container .order-button{
		background-color: #FF0033;
	}
	/*
	.hero .image-container{
		display: block;
		z-index: 1;
		width: auto;
		top: 0;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		max-width: 600px;
		width: 100%;
	}
	*/

}
/* end hero */

.quote{
	font-family: Georgia, serif;
	font-size: 48px;
	color: #C8C8C8;
	text-align: center;
	line-height: normal
}
.quote::before{content: '“';}
.quote::after{content: '”';}


.desc-container{
	padding: 50px 0;
}
.desc-container p{
	margin-bottom: 20px;
}
/*
.video-container{
	height: 600px;
	background: #f2003a;
	text-align: center;
}
.video-container .container{
	height: 100%;
}
.video-container iframe{
	height: 100%;
	width: 100%;
}
*/
.video-container{
	/* background: #f2003a; */
	/* background-color: #ff0033; */
	background-color: #fff;
}
.video-container .container{
  position: relative;
  display: block;
  overflow: hidden;
}

.video-container .container::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 12px;
}
.instruction-container{
	padding: 50px 0;
	border-radius: 2px;
}
.instruction-container{
	/* --title-size: 64px;
	--gap-size: 8px; */
	--bg-color: #000;
	--color: #fff;
	/* --offset: calc(var(--title-size) / 6.4);
	--spread: calc(var(--title-size) / 9.1);
	--mg-bottom: 0; */
}
.instruction-container .subtitle{
	margin-top: 25px;
}
.instruction-container ol{
	padding: 20px;
	border-radius: 2px;
	background-color: #eee;
}
.instruction-container ol li{
	margin-left: 20px;
	margin-bottom: 10px;
}


@media only screen and (max-width: 1000px) {
	.instruction-container,
	.desc-container{
		padding-top: 0;
		padding-bottom: 0;
	}
	/* .instruction-container .title{
		font-size: 32px;
		font-weight: 600;
	} */
}