@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Hind:wght@300;400;500;600;700&display=swap');

body {
  font: 1em 'Hind', sans-serif;
  color: #000;
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  overflow-x: hidden;
  position: relative;
}

.scrollup {
  width: 40px;
  height: 40px;
  opacity: 1;
  position: fixed;
  bottom: 20px;
  right: 0;
  display: none;
  text-indent: -9999px;
  background: url(graphics/icon_top.png) no-repeat;
  z-index: 999999999;
}

a {text-decoration: none;}
a:hover { text-decoration: none;}

ul {
	list-style: none;
	text-decoration: none;
}

.small {font-size: 90%!important;}
.smaller {font-size: 80%!important;}
.large {font-size: 110%!important;}
.larger {font-size: 120%!important;}
.largest {font-size: 135%!important;}

.gold {color:#ffb400;}
.gray {color:#676767;}
.black {color:#000;}
.white {color:#fff;}
.lt-gray {color:#999;}

.cursive {font-family: 'Comfortaa', sans-serif;}

.bar-gold {width:125px; border-top: 6px solid #ffb400;}
.bar-gray {width:125px; border-top: 6px solid #676767;}
.bar-black {width:125px; border-top: 6px solid #000;}
.bar-white {width:125px; border-top: 6px solid #fff;}

.divider {border-top:1px solid #ccc;}
.divider-gold {border-top:1px solid #ffb400;}

.gold-border {border-top: 10px solid #ffb400;}

.box-border {border: 5px solid #ffb400; overflow: hidden;}

.form-border {border: 2px solid #bbb; overflow: hidden;}

.dual-image-bg {
	width: 100%;
	height: 480px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
	position: relative;
	flex-direction: column;
	padding: 2rem;
	box-sizing: border-box;
}

.dual-image-bg .grey,
.dual-image-bg .grey-P {
	font-family: "Open Sans", sans-serif;
	color: #000;
}

.dual-image-bg:hover {
	opacity: 0.9;
}

.dual-image-bg a {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 1200px) {
	.dual-image-bg {height: 700px;}
}

@media (max-width: 768px) {
	.dual-image-bg {height: 600px; background-repeat: no-repeat;}
}

@media (max-width: 480px) {
	.dual-image-bg {height: 500px; background-repeat: no-repeat;}
}

.dual-image-section {width: 100%; height: 600px; object-fit: cover; display: block;}

@media (max-width: 1200px) {
	.dual-image-section {height: 500px;}
}

@media (max-width: 768px) {
	.dual-image-section {height: 400px;}
}

@media (max-width: 480px) {
	.dual-image-section {height: 400px;}
}

.real-ppl-image {
	max-width: 480px;
	width: 100%;
	padding-left: 10px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

@media (max-width: 1200px) {
	.real-ppl-image {max-width: 500px;}
}

@media (max-width: 768px) {
	.real-ppl-image {max-width: 100%; margin-bottom: 1rem;}
}

@media (max-width: 480px) {
	.real-ppl-image {max-width: 100%; margin-bottom: 1rem;}
}

.best-wax-section {
	padding-top: 0rem;
	padding-bottom: 0rem;
	align-items: flex-start !important;
	padding-top: 3rem;
}

@media (max-width: 992px) {
	.best-wax-section {
		min-height: 500px;
	}
}

@media (max-width: 768px) {
	.best-wax-section {
		padding-top: 1rem;
		padding-bottom: 1rem;
		background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('images/2026/metro_BG.webp');
		background-size: cover;
		background-position: center;
		min-height: 300px;
		min-height: auto;
		background-repeat: no-repeat;
		align-items: flex-start !important;
	}
	.over-img-subtitle {
		font-size: 28px;
		margin-right: 0;
		margin-left: 0;
		text-align: left;
		padding: 0 1rem;
	}
	.over-img-text {
		font-size: 24px;
		color: white;
		margin-right: 0;
		margin-left: 0;
		text-align: left;
		padding: 0 1rem;
	}
}

@media (max-width: 480px) {
	.best-wax-section {
		padding: 0.5rem 0.5rem;
		min-height: auto;
		background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('images/2026/metro_BG.webp');
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		align-items: flex-start !important;
		min-height: 300px;

	}
	.over-img-subtitle {
		font-size: 20px;
		margin-right: 0;
		margin-left: 0;
		margin-bottom: 0.5rem;
		text-align: left;
		padding: 0 0.75rem;
		line-height: 1.2em;
	}
	.over-img-text {
		font-size: 16px;
		color: white;
		margin-right: 0;
		margin-left: 0;
		text-align: left;
		padding: 0 0.75rem;
		line-height: 1.4em;
	}
}

h1 {
	font-family: 'Comfortaa', cursive;
	font-size: 2.5em;
	font-weight: 700;
	color:#676767;
	letter-spacing: -.5px;
	margin-bottom: -5px;
}
.h1-index {font-weight: bold!important; color:#000!important; letter-spacing: -.5px!important;}

h2 {
	font-family: 'Comfortaa', cursive;
	font-size: 1.5em;
	font-weight: 400;
	color:#000;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.h2-members {font-size: 3.65em!important; font-weight: 400!important; line-height: 1.15em;}

h3 {
	font-family: 'Comfortaa', cursive;
	font-size: 2em;
	font-weight: 800;
	color:#ffb400;
	letter-spacing: -1px;
	text-transform: uppercase;
	line-height: 1em;
}

h4 {
	font-family: 'Comfortaa', cursive;
	font-size: 1.25em;
	font-style: italic;
	color:#888;
	line-height: 1.35em;
}

h5 {
	font-family: 'Comfortaa', cursive;
	font-size: 1.15em;
	font-weight: 800;
	color:#000;
	letter-spacing: -1px;
	text-transform: uppercase;
	line-height: 1em;
}

h6 {
	font-family: 'Comfortaa', cursive;
	font-size: 1.25em!important;
	font-weight: 400;
	color:#000;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.gold-subtitle{
	font-family: "Open Sans", sans-serif;
	font-size: 30px;
	color:#fbbe2f;
	text-align: center;
	margin-bottom: 1.5rem; 
	padding: 0 1rem;
	font-weight: 500;
	line-height: 1.2em;
}
.over-img-subtitle {
	font-family: "Open Sans", sans-serif;
	color: #ffb400;
	font-size: 34px;
	font-weight: 500;
	text-align: right;
	padding: 0 1rem 0 8rem;
	margin-top: 80px;
	margin-bottom: 1.5rem;
	margin-left: auto;
	margin-right: 0;
}

@media (max-width: 768px) {
	.over-img-subtitle {font-size: 18px; margin-right: 0; text-align: left; margin-left: 0; padding: 0 1rem;}
}

@media (max-width: 480px) {
	.over-img-subtitle {font-size: 18px; margin-right: 0; margin-bottom: 1rem; margin-left: 0; padding: 0 1rem;}
}

.over-img-text {
	font-family: "Open Sans", sans-serif;
	font-size: 22px;
	font-weight: 500;
	text-align: right;
	padding: 0 1rem 0 8rem;
	margin-left: auto;
	margin-right: 0;
}

@media (max-width: 768px) {
	.over-img-text {font-size: 22px; margin-right: 0; text-align: left; padding: 0 1rem; margin-left: 0;}
}

@media (max-width: 480px) {
	.over-img-text {font-size: 18px; margin-right: 0; margin-top: 0.5rem; margin-left: 0; padding: 1rem 1rem 0 1rem;}
}
.listed{
	font-family: "Open Sans", sans-serif;
	font-size: 26px;
	font-weight: 450;
	color:#888;
	text-align: center;
	margin-top: 4rem;
	margin-bottom: 1rem;

}
.listed-P{
	font-family: "Open Sans", sans-serif;
	font-size: 24px;
	font-weight: 300;
	color:#888;
	text-align: left;
	margin-bottom: 1.5rem;
}
.center-P{
	font-family: "Open Sans", sans-serif;
	font-size: 24px;
	font-weight: 400;
	color:#888;
	text-align: center;
}
.grey{
	font-size: 34px;
	font-weight: 600;
	color:#000;
	text-align: center;
}
.grey-P{
	font-size: 24px;
	font-weight: 300;
	color:#000;
	text-align: center;
}

@media (max-width: 768px) {
	.grey {font-size: 22px;}
	.grey-P {font-size: 18px;}
	.center-P {font-size: 20px;}
}

@media (max-width: 480px) {
	.grey {font-size: 18px;}
	.grey-P {font-size: 18px;}
	.center-P {font-size: 20px;}
}
.form-header {font-size: .85rem!important;}

.header {
  background: #555;
  z-index: 999999;
  -webkit-box-shadow: 0px 1px 10px 2px rgba(0,0,0,0.15);
  box-shadow: 0px 1px 10px 2px rgba(0,0,0,0.15);
  border-top:5px solid #ffb400;
  clear: both;
  padding: 5px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background: #555;
  z-index: 10;
}

.sticky + .content {
  padding-top: 102px;
}

.offcanvas {background:#555; border-top: none!important;}
.offcanvas-header {border-top:5px solid #ffb400;}
.carousel {margin-top: 115px;}

.navbar-light .navbar-nav .nav-link {
  font-family: 'Comfortaa', cursive;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  padding: 8px 1rem !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.navbar-light .navbar-nav .nav-link:hover {color:#ffb400!important;}

.nav-link3 {
	font-family: 'Comfortaa', cursive;
	background:#ffb400;
	color:#555; 
	text-transform: uppercase;
	font-weight: bold!important;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border:2px solid #ffb400;
	border-radius: 30px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 1.75em;
}
.nav-link3:hover {color:#fff; background:#555; border:2px solid #ffb400; text-decoration:none;}
.book-now{
	font-size: 16px;
	background:#ffb400;
	color:#414141; 
	margin:30px auto 0!important;
	display: inline-block;
	text-align: center;
	font-weight: bold!important;
	letter-spacing: -.5px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border:2px solid #ffb400;
	border-radius: 30px;
	padding-left: 50px;
	padding-right: 50px;
	line-height: 1.75em;
}
.book-now:hover {color:#fff; background:#555; border:2px solid #ffb400; text-decoration:none;}

.book-now-narrow {
	padding: 8px 15px!important;
	margin: 30px auto 0!important;
	display: inline-block;
}
.navbar-toggler {border-color:#000!important; background-color:transparent!important; border:0!important; color:(0,0,0,1.0)!important;}
.navbar-light .navbar-toggler {outline: none;}

.navbar-brand {height:100%;}
.navbar-brand .metroMeowLogo{
	width: 120px!important;
}
.navbar-brand .metroTextLogo{
	width: 250px!important;
}

.navbar-brand.js-scrolling img {
	
	-webkit-transition: height 0.3s ease;
	-moz-transition: height 0.3s ease;
	-ms-transition: height 0.3s ease;
	-o-transition: height 0.3s ease;
	transition: height 0.3s ease;
}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {color:#aaa!important;}

.dropdown-menu {
	background-color: #676767!important;
	border-radius: 0!important;
	font-family: 'Comfortaa', cursive;
	font-size: .85em!important;
	font-weight: 400!important;
	text-transform: uppercase;
	letter-spacing: -.5px;
	line-height: 1.5em;
	top:100%!important;
	left:15%;
	border:0!important;
	text-align: left!important;
}
.dropdown-menu a {color: #fff!important; font-weight: 400; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.dropdown-menu a:hover {color: #ffb400!important; text-decoration: none;}
.dropdown-item {color:#ffb400!important; font-weight: 400!important; padding:.25rem 1.25rem .25rem .75rem!important; text-align: left!important;}
.dropdown-item:hover {background:#000!important;}

.content-index {
	min-height:300px;
	padding-left: 14rem !important;
	padding-right: 14rem !important;
}
.content {margin-top:135px; min-height:600px!important;}
.content a {color:#999999; text-decoration:none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.content a:hover {color:#ffb400; text-decoration:none;}
.btn-content {
	background-color:#000;
	font-family: 'Comfortaa', cursive;
	font-size:.9em;
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
	text-shadow: none!important;
	color:#ffb400!important;
	letter-spacing: 2px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border:2px solid #000;
	border-radius: 20px;
}
.btn-content:hover {
	background:#676767;
	color:#fff!important;
	cursor: pointer;
	border:2px solid #676767;
}
.btn-secondary{
	background-color:#676767;
	font-family: 'Comfortaa', cursive;
	font-size:.9em;
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
	text-shadow: none!important;
	color:#ffffff!important;
	letter-spacing: 2px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border:2px solid #676767;
	border-radius: 10px;
}
.btn-secondary:hover {
	background:#ffb400;
	color:#676767!important;
	cursor: pointer;
	border:2px solid #ffb400;
}
.footer {background:#555; color:#fff; font-size: .95em; font-weight: 400; line-height: 1.25em;}
.footer a {color:#ffb400; text-decoration:none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.footer a:hover {color:#fff; text-decoration:none;}
.footer-header {font-family: 'Comfortaa', cursive; font-size: 1.1em; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color:#ffb400;}
.footer-bar {width:215px; border-top:1px solid #222;}
.footer-hours {font-size: .875em;}
.footer-menu {font-size: 1em; line-height: 3.65em;}
.footer-menu a {color:#fff; text-decoration:none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.footer-menu a:hover {color:#ffb400; text-decoration:none; padding-left: 4px;}

.btn-footer {
	background-color:#ffb400;
	font-family: 'Montserrat', sans-serif;
	font-size:.9em;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	text-shadow: none!important;
	color:#000!important;
	letter-spacing: .5px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border:2px solid #ffb400;
	border-radius: 10px;
}
.btn-footer:hover {
	background:#222;
	color:#fff!important;
	cursor: pointer;
	border:2px solid #222;
}

.bg-anchor {background:#222; border-bottom:3px solid #ffb400; color:#999; font-size: .675em; font-weight: 400; letter-spacing: -.5px;}
.bg-anchor a {color:#999; text-decoration:underline; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.bg-anchor a:hover {color:#fff; text-decoration:underline;}

.anchor-L a {color:#888; text-decoration:underline; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.anchor-L a:hover {color:#fff; text-decoration:underline;}
.anchor-L ul {padding:0; margin:0; text-align:left!important;}
.anchor-L ul li {list-style-type:none; display:inline;}
.anchor-L ul li:before {content:'';}
.anchor-L ul li:after {content:'|'; color:#ffb400; font-weight: 900; margin:0 10px;}
.anchor-L ul li:last-child:after {content:'';}

.anchor-R a {color:#888; text-decoration:none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.anchor-R a:hover {color:#fff; text-decoration:none;}
.anchor-R ul {padding:0; margin:0; text-align:right!important;}
.anchor-R ul li {list-style-type:none; display:inline;}
.anchor-R ul li:before {content:'';}
.anchor-R ul li:after {content:'|'; color:#ffb400; font-weight: 900; margin:0 10px;}
.anchor-R ul li:last-child:after {content:'';}



.open-sans{
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.index-text {
	font-family: "Open Sans", sans-serif;
	color: #404040;
	font-size: 24px;
	line-height: 1.95em;
	font-weight: 400;
}

.hero-section {
	background-color: #a3a3a3;
	color: #2a2a2a;
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}

.hero-title {
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 48px;
	color:#fbba24;
	line-height: 1.2em;
	letter-spacing: .5px;
}

.hero-subtitle {
	font-family: "Open Sans", sans-serif;
	color: #444444;
	font-size: 22px;
	line-height: 1.4em;
}

.hero-side-text {
	font-family: "Open Sans", sans-serif;
	font-size: 22px;
	text-align: left;
	margin-bottom: 0.5rem;
	color:#494949;
	font-weight: 400;
}

.steps-list {
	font-size: 1.05em;
	font-weight: 500;
	line-height: 2em;
	letter-spacing: -.5px;
	margin-bottom: 0;
}

.steps-list li {
	margin-bottom: 1.5rem;
	line-height: 1.8em;
}

.steps-list li a.listed {
	font-size: inherit;
	text-align: inherit;
	color: inherit;
}

.steps-list u {
	text-decoration: underline;
}


.location-ankeny {width:22%; float:none; margin:0 1.5%; border-radius: 10px; background-image:url("images/index/location-boxes/ankeny.jpg"); font-family: 'Comfortaa', cursive; color:#ffb400; font-size: 1.15em; letter-spacing: 2px; text-transform: uppercase;}
.location-ankeny a {color:#ffb400; text-decoration:none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.location-ankeny a:hover {color:#fff; text-decoration:none;}

.location-dsm {width:22%; float:none; margin:0 1.5%; border-radius: 10px; background-image:url("images/index/location-boxes/dsm.jpg"); font-family: 'Comfortaa', cursive; color:#ffb400; font-size: 1.15em; letter-spacing: 2px; text-transform: uppercase;}
.location-dsm a {color:#ffb400; text-decoration:none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.location-dsm a:hover {color:#fff; text-decoration:none;}

.location-johnston {width:22%; float:none; margin:0 1.5%; border-radius: 10px; background-image:url("images/index/location-boxes/johnston.jpg"); font-family: 'Comfortaa', cursive; color:#ffb400; font-size: 1.15em; letter-spacing: 2px; text-transform: uppercase;}
.location-johnston a {color:#ffb400; text-decoration:none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.location-johnston a:hover {color:#fff; text-decoration:none;}

.location-wdm {width:22%; float:none; margin:0 1.5%; border-radius: 10px; background-image:url("images/index/location-boxes/wdm.jpg"); font-family: 'Comfortaa', cursive; color:#ffb400; font-size: 1.15em; letter-spacing: 2px; text-transform: uppercase;}
.location-wdm a {color:#ffb400; text-decoration:none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.location-wdm a:hover {color:#fff; text-decoration:none;}


.bg-services {background-color: #febf11;
background-image: url("data:image/svg+xml,%3Csvg width='48' height='64' viewBox='0 0 48 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 28v-4L36 12 24 24 12 12 0 24v4l4 4-4 4v4l12 12 12-12 12 12 12-12v-4l-4-4 4-4zM8 32l-6-6 10-10 10 10-6 6 6 6-10 10L2 38l6-6zm12 0l4-4 4 4-4 4-4-4zm12 0l-6-6 10-10 10 10-6 6 6 6-10 10-10-10 6-6zM0 16L10 6 4 0h4l4 4 4-4h4l-6 6 10 10L34 6l-6-6h4l4 4 4-4h4l-6 6 10 10v4L36 8 24 20 12 8 0 20v-4zm0 32l10 10-6 6h4l4-4 4 4h4l-6-6 10-10 10 10-6 6h4l4-4 4 4h4l-6-6 10-10v-4L36 56 24 44 12 56 0 44v4z' fill='%23e9a604' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");}
.services-container {font-family: "Open Sans", sans-serif; background:#fff; box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.50); -webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.50); -moz-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.50);}
.services-img {background-image:url("images/metro_LocallyOwned.webp"); background-size: cover; background-repeat: no-repeat; background-position: right; min-height: 440px; margin: -0.75rem -0.25rem -0.75rem 0;}

@media (max-width: 1200px) {
	.services-img {min-height: 440px; background-position: center; background-repeat: no-repeat;}
}

@media (max-width: 992px) {
	.services-img {min-height: 400px; background-position: center; background-repeat: no-repeat;}
}

@media (max-width: 768px) {
	.services-img {min-height: 360px; background-position: center; background-repeat: no-repeat; background-size: contain;}
}

@media (max-width: 576px) {
	.services-img {min-height: 360px; background-position: center; background-repeat: no-repeat; background-size: contain;}
}

@media (max-width: 480px) {
	.services-img {min-height: 360px; background-repeat: no-repeat; background-size: contain; background-position: center;}
}
.services-text {font-family: "Open Sans", sans-serif; font-size: 22px; font-weight: 400; line-height: 1.65em; letter-spacing: -.5px;}
.btn-services {
	background-color:#000;
	font-family: 'Comfortaa', cursive;
	font-size:.8em;
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
	text-shadow: none!important;
	color:#ffb400!important;
	letter-spacing: 1px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border:2px solid #000;
	border-radius: 20px;
}
.btn-services:hover {
	background:#676767;
	color:#fff!important;
	cursor: pointer;
	border:2px solid #676767;
}

.bg-faqs {background:#ddd;}
.faqs-text {font-size: 1.1em;}
.btn-faqs {
	background-color:#000;
	font-family: 'Comfortaa', cursive;
	font-size:.875em;
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
	text-shadow: none!important;
	color:#ffb400!important;
	letter-spacing: 1px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border:2px solid #000;
	border-radius: 20px;
}
.btn-faqs:hover {
	background:#676767;
	color:#fff!important;
	cursor: pointer;
	border:2px solid #676767;
}

.bg-book {background-image: url("graphics/bg-book.jpg"); color:#fff;}
.book-text {font-size: 1.35em; letter-spacing: -.5px; line-height: 1.35em;}
.btn-book {
	background-color:#ffb400;
	font-family: 'Comfortaa', cursive;
	font-size:.9em;
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
	text-shadow: none!important;
	color:#000!important;
	letter-spacing: 2px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border:2px solid #ffb400;
	border-radius: 20px;
}
.btn-book:hover {
	background:transparent;
	color:#fff!important;
	cursor: pointer;
	border:2px solid #ffb400;
}

.app-icon {font-size: 8em;}
.h2-app {font-size: 2em; text-transform: uppercase; color:#676767!important;}

.intro-text {font-size: 1.025em; font-weight: 600; line-height: 1.65em; letter-spacing: -.5px;}

.bg-video {background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='60' height='60' patternTransform='scale(2) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 7%, 1)'/><path d='M0 0v60H60V0H6.447zm5.727.72H17.76v9.782H10.8v7.556H.66V5.787zM19.2.72h10.02v9.782H19.2zm11.46 0H40.8v9.782H30.66zm11.58 0h11.902l5.198 5.199v12.14H49.2v-7.557h-6.96zm-30 11.222h5.52v6.116h-5.52zm6.96 0h10.02v12.391l-4.947 4.947H12.24v-9.782h6.96zm11.46 0H40.8v7.556h6.96v9.782H35.859l-5.199-5.199zm11.58 0h5.52v6.116h-5.52zM.66 19.498H10.8v9.782H.66zm48.54 0h10.14v9.782H49.2zM.66 30.72H10.8v9.782H.66zm11.58 0h11.902l5.078 5.079v12.26H19.2v-7.557h-6.96zm23.488 0H47.76v9.782H40.8v7.556H30.66v-12.27zm13.472 0h10.14v9.782H49.2zM.66 41.942H10.8v7.556h6.96v9.842H5.92L.66 54.081zm11.58 0h5.52v6.116h-5.52zm30 0h5.52v6.116h-5.52zm6.96 0h10.14v12.27l-5.127 5.128H42.24v-9.842h6.96zm-30 7.556h10.02v9.842H19.2zm11.46 0H40.8v9.842H30.66z'  stroke-width='1' stroke='none' fill='hsla(0, 0%, 13%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>"); background-attachment: fixed;}

.video-border {border:2px solid #ffb400;}


.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.yt-wrapper {
		overflow: hidden;
	}
.video-container-header {
    position: relative;
	padding-bottom: 56.25%;
	margin-top: 5%;
    
    overflow: hidden;
}

.video-container-header iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	pointer-events:none;
}

.carousel-testimonial {margin-top:20px!important;}
.testimonials-icon {font-size: 3.5em;}
.testimonials {font-size: 1.25em; color: #676767; font-weight: 700; line-height: 1.25em; letter-spacing: -.5px;}
.testimonials-name {font-family: 'Comfortaa', cursive; font-size: 1em; font-weight: 600; color: #999; margin-bottom: 20px;}

.modal-header {border-bottom:none!important;}
.modal-footer {border-top:none!important;}
.modal-content {margin-top:100px;}
.modal-body {font-size:1em; font-weight: 400; line-height: 1.25em; letter-spacing: -.5px;}
.btn-staff {
	background-color:#000;
	font-family: 'Comfortaa', cursive;
	font-size:.8em;
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
	text-shadow: none!important;
	color:#ffb400!important;
	letter-spacing: 1px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border:2px solid #000;
	border-radius: 20px;
}
.btn-staff:hover {
	background:#676767;
	color:#fff!important;
	cursor: pointer;
	border:2px solid #676767;
}

.h2-accordion {font-size: 1.2em!important; font-weight: bold;}
.accordion-button:not(.collapsed) {background-color: #fff; color:#999;}
.accordion-button:not(.collapsed)::after {background-image: url("graphics/angle-down.png")!important;}
.accordion-button:focus {z-index: 3; border-color: #ddd; outline: 0; box-shadow: 0 0 0 0.25rem rgb(1 1 1 / 0%);}

.btn-close:focus {z-index: 3; border-color: #ddd; outline: 0; box-shadow: 0 0 0 0.25rem rgb(1 1 1 / 0%);}

.services-text {letter-spacing: -.5px; font-size: 18px}
.badge {background:#676767; color:#ffb400; font-size: 1em!important; border-radius: 20px!important;}

.h2-lg {font-size: 140%; font-weight: bold;}
.h3-policies {font-size: 60%!important; color:#676767!important; letter-spacing: 0!important;}
.h4-faqs {font-size: 90%!important; font-weight: bold; letter-spacing: -.5px;}

.map-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
border:2px solid #ffb400;
}

.map-container iframe,
.map-container object,
.map-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.gtm-noscript-iframe {
	display: none;
	visibility: hidden;
}

.toggle-menu-icon {
	color: #ffb400;
}

.spacer-sm {
	height: 0.25rem;
}

.best-wax-section {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	width: 100vw;
	background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('images/2026/metro_BG.webp');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	padding: 5rem 2rem;
	min-height: 500px;
	display: flex;
	align-items: center;
	opacity: 0.9;
}

.real-ppl-section {
	background-color: #eaeaea;
}

.real-ppl-row {
	padding: 1rem;
}

.app-promo-text {
	letter-spacing: -1px;
	line-height: 1em;
}

.app-promo-subtext {
	font-weight: 400;
}

.dual-image-color {
	background-image: url('images/2026/metro_colorHeart.webp');
}

.dual-image-bw {
	background-image: url('images/2026/metro_bwHeart.webp');
}



#form {
        width:100%;
        float:left;
}


form{
        width: 100%;

        }

fieldset{
        border: 0;
        padding: 10px 0 ;
        clear: left;

        }

textarea, input, select{
        border: 1px solid #ccc;
        padding: 2%;
        width: 96%;
        }

label{
        font-weight: 500!important;
		font-size: 90%;
        }

textarea:focus, input:focus, select:focus{
        background: #eee;
        border: 1px solid #ffb400;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        outline: none;
}

input[type="submit"] {
	background-color:#222!important;
	color:#ffb400!important;
	font-family: 'Comfortaa', cursive;
	text-transform:uppercase;
	letter-spacing: -.5px;
	padding:15px!important;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border:2px solid #ea1c2d;
	border-radius: 5px;
}

input[type="submit"]:hover {
        background-color:#444!important;
		color:#888!important;
		cursor:pointer;
		border:2px solid #000;
		border-radius: 5px;
}

.submit {
	background-color:#222!important;
	color:#ffb400!important;
	font-family: 'Comfortaa', cursive;
	font-size:2.25em;
	text-transform:uppercase;
	letter-spacing: -.5px;
	padding:15px!important;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.submit:hover {
	background-color:#444!important;
	color:#888!important;
	cursor:pointer;
}

input {padding:7px!important;}


@media (min-width: 1700px) {
	.container-fluid.header-container {
		margin:1px 100px!important;
	  }
}
@media (max-width: 1450px) {
	
.navbar-light .navbar-nav .nav-link {padding: 15px 1rem !important;}
.h2-lg {font-size: 125%;}

.navbar-brand .metroMeowLogo{
		width: 100px!important;
	}
	.navbar-brand .metroTextLogo{
		width: 180px!important;
	}
	
}

@media (max-width: 1350px) {
	.app-icon {font-size: 6em;}
	.h2-app {font-size: 1.5em;}
	.h2-lg {font-size: 110%;}
		
		.navbar-brand .metroMeowLogo{
			width: 85px!important;
		}
		.navbar-brand .metroTextLogo{
			width: 120px!important;
		}
		
		
	}

@media (max-width: 1200px) {
	.app-icon {font-size: 6em;}
	.h2-app {font-size: 1.5em;}
	.h2-lg {font-size: 110%;}
	.video-container-header{
		margin-top: 9%;
	}
	.content-index {
		padding-left: 8rem !important;
		padding-right: 8rem !important;
	}
}

@media (max-width: 768px) {
	.footer {font-size: 1.1em;}
	.bg-anchor {line-height: 2em;}
	.bg-anchor ul {text-align: center!important;}
	.bg-anchor ul li {display:block;}
	.bg-anchor ul li:after {content:''; margin:0;}
	.location-ankeny {width:95%; float:none; margin:0 2.5%;}
	.location-dsm {width:95%; float:none; margin:20px 2.5%;}	
	.location-johnston {width:95%; float:none; margin:0 2.5%;}
	.location-wdm {width:95%; float:none; margin:0 2.5%;}
	.h2-app {font-size: 2em;}
	.app-icon {font-size: 4.25em;}
	.h2-lg {font-size: 105%;}
	.video-container-header {
		margin-top: 14%;
	}
	.content-index {
		padding-left: 2rem !important;
		padding-right: 2rem !important;
	}
	.navbar-brand .metroMeowLogo {
		width: 80px !important;
	}
	.navbar-brand .metroTextLogo {
		width: 150px !important;
	}
	.nav-link3 {
		font-size: 0.8em !important;
		margin: 20px 0 0 10px !important;
		padding: 12px 1rem !important;
		line-height: 3em !important;
	}
	.index-text {
		font-size: 16px !important;
		line-height: 1.7em !important;
	}
	.hero-title {
		font-size: 34px !important;
	}
	.hero-subtitle {
		font-size: 22px !important;
	}
	.hero-side-text {
		font-size: 22px !important;
	}
	.steps-list {
		font-size: 0.95em !important;
		line-height: 1.8em !important;
	}
	.steps-list li {
		margin-bottom: 1.2rem;
	}
	.gold-subtitle {
		font-size: 30px;
	}
	p[style*="text-align: left"] {
		font-size: 0.95em !important;
		line-height: 1.7em !important;
		padding-right: 1rem !important;
	}
	.services-container {
		padding: 2rem 1.5rem !important;
	}
	.services-text {
		font-size: 0.95em !important;
	}
	.faqs-text {
		font-size: 0.95em !important;
	}
	.book-text {
		font-size: 1.1em !important;
	}
	.largest {
		font-size: 100% !important;
	}
	.listed {
		font-size: 24px !important;
	}
	.listed-P {
		font-size: 20px !important;
	}
}

@media (max-width: 576px) {
	.navbar-brand img {width:100px;}
	.app-icon {font-size: 7.5em;}
	.h2-lg {font-size: 120%;}
	.video-container-header {
		margin-top: 18%;
	}
	.content-index {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}
	.navbar-brand .metroMeowLogo {
		width: 70px !important;
	}
	.navbar-brand .metroTextLogo {
		width: 120px !important;
	}
	.nav-link3 {
		font-size: 0.75em !important;
		margin: 15px 0 0 5px !important;
		padding: 10px 0.8rem !important;
		line-height: 2.8em !important;
	}
	.index-text {
		font-size: 16px !important;
		line-height: 1.6em !important;
	}
	.hero-title {
		font-size: 30px !important;
	}
	.hero-subtitle {
		font-size: 22px !important;
	}
	.hero-side-text {
		font-size: 22px !important;
	}
	.steps-list {
		font-size: 0.9em !important;
		line-height: 1.7em !important;
		padding-left: 1.2rem;
	}
	.steps-list li {
		margin-bottom: 1rem;
	}
	.gold-subtitle {
		font-size: 28px;
		margin-bottom: 1.5rem !important;
	}
	p[style*="text-align: left"] {
		font-size: 0.9em !important;
		line-height: 1.6em !important;
		padding-right: 0.5rem !important;
	}
	.services-container {
		box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.30) !important;
		-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.30) !important;
		-moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.30) !important;
		padding: 1.5rem 1rem !important;
	}
	.services-text {
		font-size: 0.9em !important;
	}
	.faqs-text {
		font-size: 0.9em !important;
	}
	.book-text {
		font-size: 1em !important;
	}
	h2 {
		font-size: 1.3em !important;
	}
	.listed {
		font-size: 22px !important;
	}
	.listed-P {
		font-size: 18px !important;
	}
}

@media (max-width: 480px) {
	.navbar-brand img {width:90px;}
	.app-icon {font-size: 6em;}
	.h2-lg {font-size: 110%;}
	.video-container-header {
		margin-top: 23%;
	}
	.content-index {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}
	.navbar-brand .metroMeowLogo {
		width: 60px !important;
	}
	.navbar-brand .metroTextLogo {
		width: 100px !important;
	}
	.nav-link3 {
		font-size: 0.7em !important;
		margin: 12px 0 0 0 !important;
		padding: 8px 0.8rem !important;
		line-height: 2.5em !important;
	}
	h2 {
		font-size: 1.15em !important;
	}
	.index-text {
		font-size: 16px !important;
		line-height: 1.5em !important;
	}
	.hero-title {
		font-size: 30px !important;
	}
	.hero-subtitle {
		font-size: 22px !important;
	}
	.hero-side-text {
		font-size: 22px !important;
	}
	.steps-list {
		font-size: 0.85em !important;
		line-height: 1.6em !important;
		padding-left: 1rem;
	}
	.steps-list li {
		margin-bottom: 0.8rem;
	}
	.gold-subtitle {
		font-size: 26px !important;
		margin-bottom: 1.2rem !important;
		padding-right: 1rem !important;
	}
	p[style*="text-align: left"] {
		font-size: 0.85em !important;
		line-height: 1.5em !important;
		padding-right: 0.5rem !important;
	}
	.btn-content, .btn-services, .btn-faqs, .btn-book {
		font-size: 0.7em !important;
		padding: 1.5rem 1rem !important;
	}
	.book-text {
		font-size: 20px !important;
	}
	.services-text {
		font-size: 20px !important;
	}
	.faqs-text {
		font-size: 0.85em !important;
	}
	.services-container {
		padding: 1rem !important;
	}
	.carousel {margin-top: 115px;}
	.float-lg-end {
		float: none !important;
		margin-top: 1rem;
	}
	.float-end {
		float: none !important;
		display: block !important;
		width: 100% !important;
		text-align: center !important;
	}
	.listed {
		font-size: 22px !important;
	}
	.listed-P {
		font-size: 18px !important;
	}
}
	.nav-link3 {
		font-size: 0.7em !important;
		margin: 12px 0 0 0 !important;
		padding: 8px 0.8rem !important;
		line-height: 2.5em !important;
	}
	h2 {
		font-size: 1.15em !important;
	}
	.index-text {
		font-size: 16px !important;
		line-height: 1.5em !important;
	}
	.hero-title {
		font-size: 30px !important;
	}
	.hero-subtitle {
		font-size: 22px !important;
	}
	.hero-side-text {
		font-size: 22px !important;
	}
	.steps-list {
		font-size: 0.85em !important;
		line-height: 1.6em !important;
		padding-left: 1rem;
	}
	.steps-list li {
		margin-bottom: 0.8rem;
	height: auto;
		margin-bottom: 0.25rem;
		display: block;
}
	.responsive-content-image {
		max-width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	img {
		max-width: 100%;
		height: auto;
		display: block;
	}
	.dual-image-section {
		height: 200px;
		width: 100%;
		object-fit: cover7em !important;
		padding: 1.5rem 1rem !important;
	}
	.book-text {
		font-size: 20px !important;
	}
	.services-text {
		font-size: 20px !important;
	}
	.faqs-text {
		font-size: 0.85em !important;
	}
	.services-container {
		padding: 1rem !important;
	}
	.carousel {margin-top: 115px;}
	.float-lg-end {
		float: none !important;
		margin-top: 1rem;
	}
	.float-end {
		float: none !important;
		display: block !important;
		width: 100% !important;
		text-align: center !important;
	}
	
	.responsive-hero-image {
		max-width: 100%;
		margin-bottom: 0.25rem;
	}
	.responsive-content-image {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	.dual-image-section {
		height: 200px;
	}


@media (max-width: 375px) {
	.carousel {margin-top: 105px;}
	.btn-content, .btn-services, .btn-faqs, .btn-book {letter-spacing: 0.5px; font-size: 0.65em !important; padding: 1rem 0.8rem !important;}
	.footer {font-size: 0.95em;}
	.h2-lg {font-size: 100%;}
	.accordion-button {font-size: 60%!important; letter-spacing: -.5px!important;}
	.video-container-header {
		margin-top: 31%;
	}
	.gold-subtitle {
		font-size: 20px !important;
		margin-bottom: 0.8rem !important;
	}
	p[style*="text-align: left"] {
		font-size: 0.8em !important;
		line-height: 1.5em !important;
		padding-right: 0.5rem !important;
	}
	.hero-title {
		font-size: 30px !important;
	}
	.hero-subtitle {
		font-size: 20px !important;
	}
	h2 {
		font-size: 1em !important;
	}
	.hero-side-text {
		font-size: 20px !important;
	}
	.services-text {
		font-size: 20px!important;
	}
	.largest {
		font-size: 90% !important;
	}
	.content-index {
		padding-left: 0.25rem !important;
		padding-right: 0.25rem !important;
	}
	.listed {
		font-size: 22px !important;
	}
	.listed-P {
		font-size: 18px !important;
	}
}


.best-wax-textbox {
	padding: 20px;
	max-width: 620px;
	max-height: 500px;
}
