* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		basic font sizing, nuts and bolts
		styled first for mobile phones, then larger screens using RWD	
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
html, body {
	font-family: Arial, Helvetica, sans-serif;
}
/* Screen size adjustments - mobile first */
  html { font-size: .8rem; }
/* Screen size adjustments - tablet */
@media only screen and (min-width: 640px) {
  html { font-size: .9rem; }
}
/* Screen size adjustments - desktop */
@media only screen and (min-width: 1025px) {
  html { font-size: 1rem; }
}
/* Modules will scale with document */
header {
  font-size: 1.125rem;
}
nav {
  font-size: 1.125rem;
}
main {
  font-size: 1rem;
}
aside, footer {
  font-size: 0.85rem;
}
/* Adjust headers relative to modules  */
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 2em;
}
h3 {
  font-size: 1.75em;
}
h4 {
  font-size: 1.5em;
}
h5 {
  font-size: 1.25em;
}
h6 {
	font-size: 1em;
}
/* shift checkboxes and radio buttons down to line up with text */
input[type=checkbox] {
	margin-top: .85em;
}
input[type=radio] {
/* margin-top: .25em;*/
	vertical-align: middle;
}
/* Single column for mobile phones - mobile first design */
[class*="col-"] {
	width: 100%;
  float: left;
  padding: .875rem;
}
/* clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* Set material-icon sizing */
.material-icons.md-24 { font-size: 1.5em;  }
.material-icons.md-36 { font-size: 2.25em;  }
.material-icons.md-48 { font-size: 3em;  }

/* Following block sets variables for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		color scheme
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
:root {
	--header-bg-color: #e6e6e6;
	--header-color: #f2f2f2; 

	--nav-bg-color: #808080; 
	--nav-color: #f2f2f2; 
	--nav-active-bg-color: #0044ff; 
	--nav-active-color: #f2f2f2;
	--nav-hover-bg-color: #b3b3b3;
	--nav-hover-color: #000000; 
	--nav-dropdown-bg-color: #e6e6e6;
	--nav-dropdown-color: #000000; 
	--nav-dropdown-hover-bg-color: #cccccc;
	--nav-dropdown-hover-color: #000000; 

	--covid-bg-color: #606060; 
	--covid-color: #f2f2f2; 

	--aside-left-bg-color: #e6e6e6; 
	--aside-left-color: #666666;
	
	--button-bg-color: #cccccc;
	--button-color: #333333; 
	--button-hover-bg-color: #a6a6a6;
	--button-hover-color: #000000; 

	--main-bg-color: #ffffff; 
	--main-color: #333333; 

	--days-bg-color: #e6e6e6; 
	--classes-bg-color: #f2f2f2; 

	--membership-body-bg-color: #f0f0f0; 
	--membership-art-bg-color: #2d242d; 
	--silver-art-bg-color: #a9b7c4; 

	--aside-right-bg-color: #0044FF; 
	--aside-right-color: #ffffff; 

	--footer-bg-color: #b3b3b3; 
	--footer-color: #000000;
	--footer-swim-lessons-bg-color: #d1f3fa; 
	--splash-n-swim-logo-color: #15b1d2;
  --footer-ikaika-ohana-red-color: #cd040c;
  --footer-ikaika-ohana-yellow-color: #fedc81;
  --footer-ikaika-ohana-green-color: #74a71a;

	--launch-special-color: #e80411; 
	--launch-special-bg-color: #c7c7c7; 
	--special-color: #6685f3; 
	--special-bg-color: #bcbac0;
		
	--form-background-color: #e6e6e6;
	--submit-bg-color: #b3b3b3; 
	--submit-hover-bg-color: #cccccc; 
	--submit-color: #ffffff; 
	--req-input-color: #ff0000; 

	--modal-fallback-bg-color: rgb(0,0,0);
	--modal-bg-color: rgba(0,0,0,0.4); 
	--modal-content-bg-color: #f2f2f2;
	--modal-close-color: #f2f2f2; 
	--modal-close-hover-bg-color: #b3b3b3;
	--modal-close-hover-color: #000000; 
	--modal-header-bg-color: #5cb85c; 
	--modal-header-color: #f2f2f2; 
	--modal-footer-bg-color: #5cb85c; 
	--modal-footer-color: #f2f2f2; 
	
	--logo-red-color: #ff0000;
	--logo-yellow-color: #fbf400;
	--logo-blue-color: #0044ff;
	--light-logo-blue-color: #ccdaff;
	
	--running-color: #b16fc9;
	--running-bg-color: #fceb9c;

}
/* Set some basic class characteristics for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		 global use
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
.acme-regular {
  font-family: "Acme", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.red {
	color: var(--logo-red-color);
}
.yellow {
	color: var(--logo-yellow-color);
}
.blue {
	color: var(--logo-blue-color);
}
.bold {
	font-weight: bold;
}
button:focus {
	outline: #000 none 0;
}
.button {
	font-size: 1.125rem;
  background-color: var(--button-bg-color);
  color: var(--button-color);
	display: inline-block;
  padding: 1rem 1rem;
	text-align: center;
  text-decoration: none;
  border: none;
}
/* Change the color of filters on hover */
.button:hover {
	background-color: var(--button-hover-bg-color);
  color: var(--button-hover-color);
  text-decoration: none;
}
.download {
	border: none;  
}
.download a {
  text-decoration: none;
  color: var(--button-color);
}
.indent {
	float: right;
	clear: left;
	width: 94%;
}
.right {
	float: right;
}
.left {
	float: left;
}
.pad1 {
	padding: 1rem;
}
.pad2 {
	padding: 2rem;
}
.pad3 {
	padding: 3rem;
}
.pad-l-10 {
	padding-left: 10%;
}
.blink {
  animation: blinker 2s step-start infinite;
}

@keyframes blinker {
  20% {
    opacity: 0;
  }
}
/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		login page
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
.login {
/*  	width: 400px; */
  	background-color: var(--aside-left-bg-color);
  	box-shadow: 0 0 .75rem 0 rgba(0, 0, 0, 0.3);
  	margin: 6rem auto;
}
.login h1 {
  	text-align: center;
  	color: var(--aside-left-color);
  	font-size: 1.5rem;
  	padding: 1.25rem 0 1.25rem 0;
  	border-bottom: 1px solid var(--button-bg-color);
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 1.25rem;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 3rem;
  	height: 3rem;
  	background-color: var(--button-bg-color);
  	color: var(--button-color);
}
.login form input[type=password], .login form input[type=text] {
  	width: 85%;
  	height: 3rem;
  	border: 1px solid var(--button-bg-color);
  	margin-bottom: 1.25rem;
  	padding: 0 1rem;
}
.login form input[type=submit] {
  	width: 100%;
  	padding: 1rem;
 		margin-top: 1.25rem;
  	background-color: var(--button-bg-color);
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: var(--button-color);
/*  	transition: background-color 0.2s; */
}
.login form input[type=submit]:hover {
		background-color: var(--button-hover-bg-color);
  	color: var(--button-hover-color);
/*  	transition: background-color 0.2s; */
}
/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		header module
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
header {
  background-color: var(--header-bg-color);
  color: var(--header-color);
}
/* Place logo at left side of header */
header #logo {
	float: left;
	padding: .5rem;
  border: none;
	cursor:pointer;
}
/* add text blurb to right of logo or below */
header h4 {
	float: right;
	padding: 1.5rem;
	color: var(--nav-active-bg-color);
}
/* Place shopping cart and join buttons at right and below header for phones */
header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
	float: right;
	clear: left;
}
header ul li {
  float:right;
}
header ul li a.material-icons {
	display: inline-block;
  background-color: inherit;
	color: var(--nav-active-bg-color);
	padding: .0556em 1rem;
	margin: 0 .5rem .5rem;
	cursor: pointer;
	border: none;  
}
header ul li a {
	display: inline-block;
  background-color: var(--nav-active-bg-color);
  color: var(--nav-active-color);
  padding: .3778em 1rem;
	margin: 0 .5rem .5rem;
	text-align: center;
  text-decoration: none;
	border: none;  
}
header #launch-grid {
	display: inline-grid;
	grid: auto auto auto auto / auto;
	padding: 2.5rem;
	justify-items: center;
	align-items: center;
}
header #launch-grid .item-1 {
	display: block;
	margin: 0 0 1rem;
	width: 10rem;
	height: auto;
}
header #launch-grid .item-2 {
	display: block;
	font-size: 2.9rem;
	margin: 0 auto 1rem;
	padding: 0 1.5rem;
  border-radius: 1rem;
  animation: launch-week 1s ease-in-out 0s infinite alternate;
}
@keyframes launch-week {
	from {background-color: var(--logo-blue-color); color: var(--logo-yellow-color);}
  to   {background-color: var(--logo-yellow-color); color: var(--logo-red-color);}
}
header #launch-grid .item-3, header #launch-grid .item-4 {
	display: block;
	margin: 0 auto 1rem;
	padding: 0 1rem;
  color: var(--footer-color);
}
header #launch-grid .item-5 {
	width: 6rem;
	background-color: var(--logo-yellow-color);
  color: var(--logo-blue-color);
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		nav module
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/

/* Add a dark grey background color to the top navigation */
.topnav {
  background-color: var(--nav-bg-color);
}
.topnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.topnav > ul, .topnav > ul > li {
	float: left;
}
/* Style the links inside the navigation bar */
.topnav a.home {
	display: block;
	padding: .0556em 1rem;
}
.topnav > ul > li > a {
  color: var(--nav-color);
  text-align: center;
  padding: .4968em 1rem;
  text-decoration: none;
}
/* Add an active class to highlight the current page in menu */
.topnav ul li a.active {
  background-color: var(--nav-active-bg-color);
  color: var(--nav-active-color);
}
/* dropdowns normally hidden */
.dropdown {
  position: relative;
  display: block;
}
/* style dropdown links */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--nav-dropdown-bg-color);
	min-width: 13rem;
  box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.2);
  z-index: 10;
}
.dropdown-content a {
	color: var(--nav-dropdown-color);
  text-align: left;
  padding: .3778em 1rem;
  text-decoration: none;
  display: block;
}
/* Change the color of links on hover */
header li:hover a:not(.active), .topnav > ul > li:hover > a:first-child:not(.active),
.topnav .search-container button:hover, .topnav .menu:hover {
	background-color: var(--nav-hover-bg-color);
  color: var(--nav-hover-color);
  text-decoration: none;
}
.dropdown-content a:hover {
	background-color: var(--nav-dropdown-hover-bg-color);
  color: var(--nav-dropdown-hover-color);
}
/* Show dropdown on hover */
.dropdown:hover > .dropdown-content {
  display: block;
}
/* Hide the search container and all links except for the first one ("home") for phones */
.topnav a:not(.home), .topnav .search-container {
	display: none;
}
/* Show the menu icon for phone screens */
.topnav .menu {
  float: right;
  display: block;
  color: var(--nav-color);
  padding: .0667em .75rem;
  cursor: pointer;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		nav.responsive 
		
	  The "responsive" class is added to the topnav with JavaScript when the user 
		clicks on the icon. This class makes the topnav look good on small screens 
		(display the links vertically instead of horizontally)
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
.topnav.clearfix.responsive, .topnav.clearfix.responsive .dropdown-content {
	position: relative;
}
.topnav.clearfix.responsive .menu {
  position: absolute;
  right: 0;
  top: 0;
}
.topnav.clearfix.responsive > ul, .topnav.clearfix.responsive > ul > li {
	float: none;
}
.topnav.clearfix.responsive a,
.topnav.clearfix.responsive .search-container {
  float: none;
  display: block;
  text-align: left;
  width: 100%;
  margin: 0;
  padding: .875rem;
  border: 1px solid var(--nav-hover-bg-color);
}
.topnav.clearfix.responsive .search-container button {
  float: left;
  display: block;
	padding: 0;
  border: none;
  cursor: pointer;
}
.topnav.clearfix.responsive .search-container input[type=text] {
  float: left;
  display: block;
  padding: 0.0889em .375em;
  margin: 0 .5rem;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		aside left/top module
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
aside.left {
	padding: 0;
}
aside.left > div.learn-more {
	background-color: var(--aside-right-bg-color);
  color: var(--aside-right-color);
  padding: 1rem;
  text-align: center;
}
aside.left > div.learn-more p {
  padding: .5rem;
  margin: 0;
}
aside.left > div.schedule {
  background-color: var(--aside-left-bg-color);
  color: var(--aside-left-color);
  padding: 1rem;
  text-align: center;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		main module
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
main {
  background-color: var(--main-bg-color);
  color: var(--main-color);
  padding: .875rem;
}

main > h1 {
	margin: .5rem 0;
}
main.landing-page > h1 {
	margin: .5rem 2rem;
}

main.class-descriptions img {
	width: 20%;
	heigth: auto;
	float: left;
	margin: 0 2% 0 0;
}
main.class-descriptions h4 {
	width: 20%;
	heigth: auto;
	float: left;
	margin: 0 2% 0 0;
}
#dotfit-logo {
	width: 25%;
	height: auto;
	margin-bottom: 1rem;
}
.trainer-brief {
	display: inline-block;
	padding: 2rem 3rem;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		aside right/bottom module
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
aside.right {
  background-color: var(--aside-right-bg-color);
  color: var(--aside-right-color);
  padding: 1rem;
  text-align: center;
}
aside.right p > b {
  font-size: 1.25em;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		footer module
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
footer {
  background-color: var(--footer-bg-color);
  color: var(--footer-color);
  text-align: center;
  padding: .875rem;
}
/* Set up event items */
#footer-special {
	margin: 1rem;
}
#footer-special a.button {
  background-color: var(--special-color);
  color: var(--special-bg-color);
}
#footer-special a.button:hover {
	background-color: var(--button-hover-bg-color);
  color: var(--button-hover-color);
  text-decoration: none;
}
#footer-swim-lessons {
  background-color: var(--footer-swim-lessons-bg-color);
  margin: 1rem;
  padding: 1rem;
}
#footer-swim-lessons h1 {
  color: var(--splash-n-swim-logo-color);
}
#footer-swim-lessons img {
display:block;
width: 95%;
height: auto;
margin: 0 auto 1rem;
}
#footer-swim-lessons .button {
  background-color: var(--splash-n-swim-logo-color);
  color: var(--aside-right-color);
}
#footer-ikaika-ohana {
  background-color: var(--footer-ikaika-ohana-yellow-color);
  margin: 1rem;
  padding: 1rem;
}
#footer-ikaika-ohana h1 {
  color: var(--footer-ikaika-ohana-red-color);
}
#footer-ikaika-ohana img {
display:block;
width: auto;
height: 24rem;
margin: 0 auto;
}
#footer-ikaika-ohana .button {
  background-color: var(--footer-ikaika-ohana-red-color);
  color: var(--footer-ikaika-ohana-yellow-color);
}
#footer-ikaika-ohana .button:hover {
  background-color: var(--footer-ikaika-ohana-green-color);
}
#footer-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  text-decoration: none;
}

#footer-menu a {
	color: var(--footer-color);}
#footer-menu a:link {
  text-decoration: none;
}
#footer-menu a:visited {
  text-decoration: none;
}
#footer-menu a:hover {
  text-decoration: underline;
}
#footer-menu a:active {
  text-decoration: underline;
}
#footer-menu ul {
  padding: 0 10% 0 10%;
}
#footer-menu li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
/* Set up social icons */
.social {
	display: inline-flex;
  list-style-type: none;
  justify-content: center;
  text-align: center;
  padding:0;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
main.landing-page {
	padding: 0;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page covid section
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
div.covid {
	padding: 1rem 2rem .5rem;
}
a.covid-button {
	float: right;
	margin: 1 rem 1.5rem;
}
.covid {
  padding: 2rem;
  background-color: var(--covid-bg-color);
  color: var(--covid-color);
}
.covid-grid {
	display: grid;
	grid: auto auto / 4fr 1fr;
	align-items: start;
}
.covid-grid h5 {
	margin: 0;
	padding: 1rem 3rem;
	justify-self: start;
}
.covid-grid a {
	margin: 1rem;
	justify-self: end;
}
#covid-graph {
	width: 100%;
	height: auto;
	margin: 0 0 1rem 0;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page free class special
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#free-class-special {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--special-color);
	color: black;
}
#free-class-special h1 {
  font-family: "Lilita One", sans-serif;
  font-weight: 400;
  font-style: normal;
	font-size: 7rem;
	color: var(--special-bg-color);
}
#free-class-special h3 {
  font-family: "Lilita One", sans-serif;
  font-weight: 400;
  font-style: normal;
	font-size: 3.5rem;
	color: var(--special-bg-color);
}
#free-class-special img {
  display: block;
  margin: 1rem auto 0;
	width: 85%;
	height: auto;
/* 	border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%; */
}
#free-class-special h1, #free-class-special h3, #free-class-special h5 {
	margin: 0 1rem 0.5rem 1rem;
}
#free-class-special p {
	margin: 0 1rem .5rem 1rem;
}
#free-class-special .item-1 > p {
  display: block;
  margin: 0 auto;
  width: 85%;
  text-align: left;
}
#free-class-special .item-2 {
	text-align: center;
}
#free-class-special div {
	margin: 1rem 0;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page top special
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#top-special, #footer-special {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--special-bg-color);
	color: black;
}
#top-special h1 {
	font-size: 6rem;
	color: var(--special-color);
}
#top-special h3 {
	font-size: 3.15rem;
	color: var(--special-color);
}
#footer-special h1 {
	font-size: 5rem;
	color: var(--special-color);
}
#footer-special h3 {
	font-size: 2.75rem;
	color: var(--special-color);
}
#top-special img, #footer-special img {
  display: block;
  margin: 1rem auto 0;
	width:85%;
	height: auto;
/* 	border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%; */
}
#top-special h1, #footer-special h1, #top-special h3, #footer-special h3, #top-special h5, #footer-special h5 {
	margin: 0 1rem 0.5rem 1rem;
}
#top-special p, #footer-special p {
	margin: 0 1rem .5rem 1rem;
}
#top-special .item-1 > p, #footer-special .item-1 > p {
  display: block;
  margin: 0 auto;
  width: 85%;
  text-align: left;
}
#top-special .item-2, #footer-special .item-2 {
	text-align: center;
}
#top-special div {
	margin: 1rem 0;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page top overlay
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#top-video {
	margin: 0;
}
div.top-button-container {
  background-color: var(--nav-bg-color);
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	text-align: center;
}
a.join-button {
	margin: 1.5rem;
  background-color: var(--aside-right-bg-color);
  color: var(--aside-right-color);
}
a.try-button {
	margin: 1.5rem;
  background-color: var(--aside-right-color);
  color: var(--aside-right-bg-color);
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page stakes section
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#stakes {
  margin-top: 2rem;
  padding: 2rem;
}
#cdc-quote {
  float: right;
  color: var(--logo-blue-color);
}
#cdc-dr {
  float: right;
  clear: right;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page value proposition section
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#value-proposition {
  padding: 2rem;
  background-color: var(--light-logo-blue-color);
}
#joining-benefits li {
	font-weight: bold;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page guide section
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#guide {
  margin-top: 1rem;
  padding: 2rem;
}
#guide .grid-container {
	display: grid;
	grid: auto auto auto / 1fr 6fr;
	justify-items: start;
	align-items: center;
}
#guide p {
	margin: 0;
	padding: 1rem 3rem;
	font-size: 1.25em;
	font-weight: bold;
}
#guide i {
	margin: 0;
	padding: 1rem 0;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page plan section
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#plan {
  margin-top: 1rem;
  padding: 2rem;
  background-color: var(--light-logo-blue-color);
}
#plan .grid-container {
	display: grid;
	grid: auto auto auto / 1fr 4fr;
	align-items: start;
}
#plan .grid-container h4 {
	margin: 0;
	padding: 1rem 0;
	justify-self: end;
  color: var(--logo-blue-color);
}
#plan .grid-container h5 {
	margin: 0;
	padding: 1rem 3rem;
	justify-self: start;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page photos section
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#photos {
  margin-top: 1rem;
  padding: 2rem;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page paragraph section
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#paragraph {
  margin-top: 1rem;
  padding: 2rem;
}
#paragraph p {
  padding: 0 2rem;
}
#paragraph div {
  float:right;
  padding: 0 2rem;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		contact form
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#contact-topper img {
	width: 100%;
	height: auto;
}
#contact-form i {
	margin: 1.5rem 0 0 0;
}
#comment {
	float: right;
	width: 90%;
}
#recaptcha-widget {
	float: right;
}
#comment-submit {
	float: right;
	margin-top: .5rem;
}
#contact-form a {
  color: var(--button-color);
  text-decoration: none;
}
/* Change the color of filters on hover */
#contact-form a:hover {
	background-color: var(--button-hover-bg-color);
  color: var(--button-hover-color);
  text-decoration: none;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		membership form topper
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#membership-topper {
  background-color: var(--membership-art-bg-color);
}
#membership-topper h3 {
	position: absolute;
	margin: 4rem 65% 0 2rem;
	z-index: 1;
	color: var(--main-bg-color);
}
#membership-topper img {
	float: right;
	width: 65%;
	height: auto;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		silver form topper
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#silver-topper {
  background-color: var(--silver-art-bg-color);
}
#silver-topper h3 {
	position: absolute;
	margin: 3rem 0 0 1rem;
	z-index: 1;
}
#silver-topper img {
	float: right;
	width: 65%;
	height: auto;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		multitab forms used in membership, member forms, trial
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
main.membership, main.member-forms, main.renewal {
  background-color: var(--membership-body-bg-color);
}
#multitab-form {
  background-color: var(--main-bg-color);
  margin: 1rem auto;
  padding: 1.5rem;
  width: 100%;
}

#multitab-form select {
  padding: .625rem;
  width: 100%;
  font-size: 1em;
  border: 1px solid #aaaaaa;
  margin-bottom: 1rem;
}

#multitab-form input:not([type=radio], .assess-box) {
  padding: .625rem;
  width: 100%;
  font-size: 1em;
  border: 1px solid #aaaaaa;
  cursor: pointer;
}

#multitab-form input[type=radio] {
  float: left;
  display: block;
  width: 6%;
  margin: .25rem 0 0;
  cursor: pointer;
}

/* Mark input boxes that get an error on validation: */
#multitab-form input.invalid {
  background-color: #ffdddd;
}
#multitab-form .not-checked {
  background-color: #ffdddd;
  color: #228b22;
}

/* Style for price box */
#multitab-form .flex-container {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2rem;
}

#multitab-form .price-box {
	color: var(--logo-blue-color);
	width: 35%;
	padding: .75rem;
	border: 3px var(--logo-blue-color) solid;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

#multitab-form .price-box div {
	color: var(--main-color);
	width: 100%;
	height: 2.25rem;
	padding: .25rem;
	border: 2px var(--logo-blue-color) solid;
  display: flex;
  justify-content: center;
  align-self: baseline;
}
/* Style for assess box */
#multitab-form .assess-label {
	float: left;
  display: block;
  margin: 0 0 1rem;
	width: 68%;
}
#multitab-form .assess-units {
	float: right;
  display: block;
	width: 12%;
	font-size: .75rem;
	margin: 0 0 0 .5rem;
}
#multitab-form .assess-box {
	float: right;
  display: block;
  margin: 0;
	padding: .25rem;
	width: 12%;
	border: 2px solid lightgray;
	text-align: right;
}
#multitab-form .result {
	float: right;
  display: block;
  margin: 0;
	padding: .25rem 1.5rem .25rem .25rem;
	width: 10%;
	text-align: right;
}
#multitab-form p.declaration {
	display: block;
	width: 90%;
	float: right;
  margin: 0 0 1rem;
}
#multitab-form input[type=radio]:checked + p.declaration {
	color: var(--logo-blue-color);
}

/* Hide all steps by default: */
#multitab-form .tab {
  display: none;
}

/* Style the buttons */
#multitab-form button {
  background-color: var(--logo-blue-color);
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.25rem;
  font-size: 1.125em;
  cursor: pointer;
}

#multitab-form button:hover {
  opacity: 0.8;
}

#multitab-form #prevBtn {
  background-color: var(--footer-bg-color);
}

/* Make circles that indicate the steps of the form: */
#multitab-form .step-dots {
	text-align: center;
	margin-top: 2rem;
}

#multitab-form .step {
  height: 1em;
  width: 1em;
  margin: 0 0.15em;
  background-color: var(--footer-bg-color);
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.6;
}

#multitab-form .step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
#multitab-form .step.finish {
  background-color: var(--logo-blue-color);
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		get active questionnaire
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#healthq  > div {
  margin: 0 0 .5rem;
}
#healthq label {
  float: left;
  display: block;
  margin: 0;
  padding-left: 1%;
  width: 6%;
	color: var(--logo-blue-color);
}
#healthq p {
  float: left;
  display: block;
  margin: 0;
	color: var(--logo-blue-color);
}
#healthq p.question {
	width: 4%;
}
#healthq p.question + p {
	width: 84%;
}
#healthq p.subquestion {
	width: 12%;
	padding-left: 8%;
}
#healthq p.subquestion + p {
	width: 76%;
}
#healthq p.answer {
	display: block;
	width: 70%;
	float: right;
	clear: left;
  margin: 1rem 0 1rem;
	color: var(--main-color);
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		day pass request form
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
.form-container input[type=text], .form-container input[type=date], .form-container input[type=email] {
  width: 100%;
  padding: .5em .25rem;
  border: 1px solid var(--nav-hover-bg-color);
  border-radius: .25rem;
}
.form-container label {
  float: right;
  padding: .5em .75em .5em 0;
  display: inline-block;
}
.form-container input[type=submit] {
	width: 100%;
  background-color: var(--submit-bg-color);
  color: var(--submit-color);
  padding: .75rem 1.25rem;
  border: none;
  border-radius: .25rem;
  cursor: pointer;
}
input[type=submit]:hover {
  background-color: var(--submit-hover-bg-color);
}
/* required input asterisk style */
.reqinput {
  color: var(--req-input-color);
}
.checkbox {
	float: left;
	width: 10%;
}
.checkbox-label {
	float: left;
	width: 90%;
}
.form-container {
  border-radius: .3125rem;
  background-color: var(--form-background-color);
  padding: 1.25rem;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		fitness classes page
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#classes-offered a {
	margin: 0 0 1rem;
}
.sixteen-nine-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	margin-bottom: 1rem;
}
/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
#not-member {
	display: flex;
	width: 100%;
	justify-content: space-around;
	align-items: center;
}
#not-member a {
	margin: 0 0 1rem;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		les mills virtual page
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
video {
  width: 100%;
  height: auto;
}
.les-mills-virtual-grid-container {
  background-color: var(--aside-left-bg-color);
  padding: 1rem;
  text-align: center;
  margin-bottom: 1rem;
}
.les-mills-virtual-grid-container h3 {
	margin: 1rem 2rem 1.5rem;
}
.les-mills-virtual-grid-container > h5 {
	margin: 0 2rem 2.5rem;
}
.les-mills-virtual-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(22em, 1fr));
/* 	justify-items: center; */
}
.les-mills-virtual-grid .flex-grid-item {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
}
.les-mills-virtual-grid .flex-grid-item img {
	width: 20em;
	height: auto;
	margin: 0 1rem .5rem;
}
.les-mills-virtual-grid .flex-grid-item p {
	margin: 0 2rem 2.5rem;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		les mills on demand page
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
.lmod-flex-container {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
}
.lmod-trial {
	text-align: center;
	padding: 2rem 1rem;
}
.lmod-trial a {
	color: #ffffff;
  background-color: var(--logo-blue-color);
  margin: 0 0 .5rem;
}
.lmod-where {
	padding: 2rem 1rem;
	text-align: center;
}
.lmod-where img {
	width: 80%;
	height: auto;
}
.lmod-where p {
	margin:0;
	padding: 0;
}
/* variety grid */
.lmod-variety-grid {
	display: grid;
	grid: auto auto auto auto/ 1fr 1fr 1fr;
	justify-items: center;
  background-color: var(--button-bg-color);
  padding: 0 .5rem;
}
.lmod-variety-grid .item-1 {
	grid-area: 1/1/2/4;
	align-self: center;
	margin: 1.5rem 0 .5rem;
}
.lmod-variety-grid .item-2 {
	grid-area: 2/1/3/4;
	align-self: center;
	text-align: center;
}
.lmod-variety-grid .item-3 {
	grid-area: 3/1/4/2;
	align-self: end;
	margin: 1.5rem 0 0;
}
.lmod-variety-grid .item-4 {
	grid-area: 4/1/5/2;
	align-self: start;
	margin: 0 0 1.5rem;
}
.lmod-variety-grid .item-5 {
	grid-area: 3/2/4/3;
	align-self: end;
	margin: 1.5rem 0 0;
}
.lmod-variety-grid .item-6 {
	grid-area: 4/2/5/3;
	align-self: start;
	margin: 0 0 1.5rem;
}
.lmod-variety-grid .item-7 {
	grid-area: 3/3/4/4;
	align-self: end;
	margin: 1.5rem 0 0;
}
.lmod-variety-grid .item-8 {
	grid-area: 4/3/5/4;
	align-self: start;
	text-align: center;
	margin: 0 0 1.5rem;
}
/* all levels grid */
.lmod-all-levels-grid {
	display: grid;
	grid: auto-flow / 9rem 1fr;
	justify-items: start;
	align-items: center;
  background-color: #000000;
  color: #ffffff;
  padding: 1rem;
  margin-bottom: 1rem;
}
.lmod-all-levels-grid .item-1 {
	grid-area: 1/1/2/3;
	justify-self: center;
	margin: .5rem 0 .5rem;
	padding: 2rem 1rem;
	text-align: center;
}
.lmod-all-levels-grid p {
	margin: 0;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		nutrition pages
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#nutrition-basics img {
  display: block;
  margin: 1rem auto 2rem auto;
	width: 100%;
	height: auto;
}
#nutrition-basics a img {
	width: 50%;
	cursor: pointer;
}
#supplementation img {
	display: block;
  margin: 1rem auto 1rem auto;
	width: 80%;
	height: auto;
}
#supplementation img.logo {
	width: 60%;
}
#supplementation img.stopwatch {
	width: 25%;
}
#supplementation ol li {
  margin: 0 0 0 2rem;
}
#supplementation ol li::marker {
  font-weight: bold;
  font-size: 2rem;
	font-family: 'Volkhov', serif;
  line-height: 1;
  color: var(--logo-red-color);
}
main.dotfit-page {
	padding: 0;
}
#why-dotfit {
	margin: 0;
	padding: 1rem;
	background-color: var(--light-logo-blue-color);
}
#dotfit-warning {
	margin: 0;
	padding: 2rem;
}
#dotfit-warning img {
	display: block;
	width: 60%;
	height: auto;
	margin: 0 auto;
}
#dotfit-trusted {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 2rem;
	background-color: var(--light-logo-blue-color);
}
#dotfit-trusted div {
	align-self: center;
	padding: 0 2rem;
}
#dotfit-trusted img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto 1rem auto;
	align-self: center;
}
#dotfit-teaser {
	padding: 2rem;
}
#dotfit-teaser h3 {
	text-align: center;
}
#dotfit-savings-steps {
	margin: 0 0 2rem 0;
	padding: 1rem;
	background-color: var(--light-logo-blue-color);
}
#dotfit-savings-steps img {
	display: block;
  margin: 1rem auto 2rem auto;
	width: 100%;
	height: auto;
}
#dotfit-savings-steps h3:last-of-type, #dotfit-savings-steps h3:nth-last-of-type(2) {
	text-align: center;
}
#dotfit-pitch h2, #dotfit-pitch h3, #dotfit-pitch h5 {
	text-align: center;
}
#dotfit-pitch div {
  	display: flex;
  	justify-content: center;
  	align-items: center;
}
#dotfit-pitch img {
	display: inline-block;
  margin: 1rem;
	height: 3.5rem;
	width: auto;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		cold fusion page
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#cold-fusion-video {
	margin: 0;
	padding: 1rem;
	background-color: var(--light-logo-blue-color);
}
#cold-fusion-video img {
	height: 10rem;
	width: auto;
}
#cold-fusion-video .flex-container {
	display: flex;
	align-items: center;
}
#cold-fusion-video h3 {
	margin-top: 2rem;
	text-align: center;
}
#cold-fusion-uses-grid {
  padding: 1rem 2rem;
	display: grid;
	grid: auto auto auto / 100%;
	justify-items: stretch;
	align-items: start;
}
#cold-fusion-uses-grid .grid-container {
	display: grid;
	grid-template: auto auto / 15% 10% 75%;
}
#cold-fusion-uses-grid .grid-container .item-1 {
	grid-area: 1/1/2/2;
	justify-self: end;
	align-self: center;
}
#cold-fusion-uses-grid .grid-container .item-2 {
	grid-area: 1/2/2/4;
	justify-self: start;
	align-self: end;
}
#cold-fusion-uses-grid .grid-container .item-3 {
	grid-area: 2/3/3/4;
	justify-self: stretch;
	align-self: start;
}
#cold-fusion-uses-grid span {
	padding: 0 1rem 0 0;
}
#cold-fusion-menu {
	margin: 0;
	padding: 2rem;
}
#cold-fusion-menu div.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#cold-fusion-menu ol {
  margin: 0 0 1rem 0;
}
#cold-fusion-menu ol li {
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--logo-blue-color);
}
#cold-fusion-menu div.flex-container img {
	display: block;
	height: 8rem;
}
#cold-fusion-menu > img {
	display: block;
	width: 100%;
	height: auto;
}
#cold-fusion-menu > img:last-of-type {
	margin-bottom: 2rem;
}
#cold-fusion-menu a {
  margin: 0 1rem 1rem 0;
  padding: 1rem 3rem;
  background-color: var(--nav-active-bg-color);
  color: var(--nav-active-color);
	text-align: center;
  text-decoration: none;
	border: none;  
}
#cold-fusion-menu a:hover {
	background-color: var(--nav-hover-bg-color);
  color: var(--nav-hover-color);
  text-decoration: none;
}
#cold-fusion-essentials {
	margin: 0;
	padding: 2rem;
	background-color: var(--light-logo-blue-color);
}
#cold-fusion-essentials .flex-container {
	display: flex;
	flex-direction: column;
}
#cold-fusion-essentials img, #cold-fusion-ultimate img {
  display: block;
  margin-left: auto;
  margin-right: auto;
	width: 35%;
}
#cold-fusion-ultimate {
	margin: 0;
	padding: 2rem;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		les mills story page
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#les-mills-discus {
	float: left;
	width: 30%;
	height: auto;
	margin-right: 1rem;
}
#phillip-mills-bodypump {
	float: right;
	width: 30%;
	height: auto;
	margin-left: 1rem;
}
#mills-family {
	float: left;
	width: 30%;
	height: auto;
	margin-right: 1rem;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		pool pages
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#pool img, #water-classes img:first-of-type {
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto 2rem auto;
}
#swim-lessons img  {
	display: block;
	width: 70%;
	height: auto;
	margin: 0 auto 2rem 1rem;
}
#water-classes img {
	display: block;
	width: 50%;
	height: auto;
	margin: 0 auto 2rem 1rem;
}
#lap-swimming img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto 2rem auto;
}
#swim-teams img {
	margin: 1rem 1rem 2rem 1rem;
	max-width: 40%;
	height: auto;
}
#youth-swim img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto 2rem auto;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		yoga pages
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#yoga-benefits img {
  display: block;
  margin: 1rem auto 2rem auto;
	width: 100%;
	height: auto;
}
#yoga-benefits img:last-of-type {
  display: block;
  margin: 1rem auto 2rem auto;
	width: 30%;
	height: auto;
}
#yoga-benefits ol {
	font-weight: bold;
}
#yoga-classes img:first-of-type {
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto 2rem auto;
}
#yoga-classes img {
	display: block;
	width: auto;
	height: 5rem;
	margin: 0 auto 2rem 1rem;
}
#yoga-community img {
	display: block;
	width: auto;
	height: 20rem;
	margin: 0 auto 2rem;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		launch special page
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#launch-schedule .grid-container, #presentation-schedule .grid-container {
	display: grid;
	grid: auto auto auto auto auto / 35% 65%;
	margin: 0 1rem 3rem;
	padding: 2.5rem;
	align-self: center;
	background-color: var(--launch-special-bg-color);
}
#launch-schedule .grid-container, #launch-schedule .launch-date, #presentation-schedule .grid-container, 
#presentation-schedule .launch-date  {
	color: var(--launch-special-color);
}
#heart-image img {
	width: 240px;
	height: auto;
}

#launch-schedule h3, #presentation-schedule h3 {
	text-align: center;
}
#launch-schedule h4, #presentation-schedule h4 {
	margin: 0;
	padding: 0.5rem;
	justify-self: left;
}
#launch-schedule h5, #presentation-schedule h5 {
	margin: 0;
	padding: 0.5rem;
	justify-self: right;
	color: var(--footer-color);
}
#nuggets {
	margin-left: 1.5rem;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		search results pages
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
div.tab {
	display: none;
}
#search-header img, #search-previous-next img {
	height: 4.5rem;
	width: auto;
	vertical-align: top;
}
#search-header button, #search-previous-next button, #search-pagination button {
  background-color: inherit;
  border: none;
}
#search-box {
	height: 2.5rem;
	width: 25.5rem;
	margin: 1rem auto;
	border: 1px #000000 solid transparent;
	border-radius: 1.25rem;
	box-shadow: 0 2px 5px 1px rgba(64, 60, 67, 0.6);
}
#search-box input {
	width: 16.25rem;
	border: none;
	margin: 0.35rem 0 0.35rem 1rem;
	font-size: 1.15rem;
	vertical-align: top;
}
#search-box button {
	padding: 0.5rem;
	margin: 0 0.5rem;
}
#search-box span {
	font-size: 1.25rem;
  vertical-align: text-bottom;
}
a.search-url {
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}
a.search-title {
	font-size: 1.375rem;
	color: var(--logo-blue-color);
	text-decoration: none;
}
p.search-description {
	color: var(--nav-background-color);
	margin-bottom: 2rem;
}
#search-previous-next, #search-pagination {
	display: grid;
	grid: auto / 1fr auto 1fr;
	align-items: start;
	font-size: 1.15rem;
}
#search-previous-next .item-1, #search-pagination .item-1 {
	grid-area: 1/1/2/2;
	justify-self: end;
}
#search-previous-next .item-2, #search-pagination .item-2 {
	grid-area: 1/2/2/3;
	justify-self: center;
}
#search-previous-next .item-3, #search-pagination .item-3 {
	grid-area: 1/3/2/4;
	justify-self: start;
}
#search-pagination button {
	margin: 0.5rem;
	padding: 0.5rem;
}
#search-pagination button:not(.active, .search-previous, .search-next):hover  {
	color: var(--logo-blue-color);
	font-weight: bold;
	background-color: var(--button-bg-color);
}
#search-pagination button.active {
	font-weight: bold;
}
#legal.search {
	text-align: center;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		404 error page
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
main.error {
  background-color: var(--light-logo-blue-color);
}
#error-flex-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#error-code {
	display: flex;
	align-items: center;
	margin-right: 3rem;
}
#error-code h1 {
	margin: 0 1rem 0 0;
  color: var(--logo-blue-color);
	font-family: 'Leckerli One', cursive;
	font-size: 6rem;
}
#error-code img {
	width: 5rem;
	height: auto;
	margin: 0 1rem 0 0;
  color: var(--logo-blue-color);
}
#error-message {
	min-width: 60%;
}
#error-message h6 {
  color: var(--logo-blue-color);
}
#error-message hr {
  border-top: .5rem solid var(--logo-blue-color);
  border-radius: .5rem;
  margin: 1rem 0;
}
#error-message a {
  color: #ffffff;
  background-color: var(--logo-blue-color);
  margin-left: 2rem;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		medium screen (tablet) adjustments
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
@media only screen and (min-width: 640px) {
/* Move the links to right side of header */
	header ul {
		clear: none;
		margin: 3.75rem 1rem 0;
	}
/* Display nav links and hide menu button */
	.topnav a:not(.home) {
		display: block;
	}
	.topnav .menu {
	  display: none;
	}
/* Display the search box in nav bar */
/* Set styles for wide screen search box */
	.topnav .search-container {
	  float: right;
	  display: block;
	}
	.topnav input[type=text] {
	  padding: .375em .375rem;
	  margin: .48em 0;
	  font-size: .875rem;
	  border: none;
	}
	.topnav .search-container button {
	  float: right;
	  padding: .0558em .625rem;
	  margin-right: 1rem;
	  background: inherit;
	  border: none;
	  cursor: pointer;
	}
/* adjust styles for form conainers */
	.form-container [class*="col-"] {
	  float: left;
	  margin-bottom: .5rem;
	  padding: 0;
	}
	.form-container label, .form-container input[type=submit] {
	  float: right;
	}
	.form-container input[type=submit],
	#submit-button {
	  float: right;
	  width: auto;
	}
	#membership-form {
  width: 80%;
	}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page top-special section
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
	#top-special, free-class-special {
		display: grid;
		grid-template: 90% 10% / 55% 45%;
		justify-items: center;
	}
	#top-special .item-1, free-class-special .item-1 {
		grid-area: 1/1/3/2;
	}
	#top-special .item-2, free-class-special .item-2 {
		grid-area: 1/2/2/3;
	}
	#top-special .item-3, free-class-special .item-3 {
		grid-area: 2/2/3/3;
	}
	#top-special h1, free-class-special h1 {
		font-size: 4rem;
	}
	#top-special h3, free-class-special h3 {
		font-size: 2.75rem;
	}
	#top-special a > img, #footer-special a > img {
	width:50%;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page guide section
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
	#guide .grid-container {
		display: grid;
		grid: auto auto / auto-flow 1fr;
		justify-items: center;
		align-items: start;
	}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		nutrition page
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
	#nutrition-basics img {
		width: 80%;
	}
	#nutrition-basics a img {
		width: 30%;
	}
	#supplementation img {
		width: 50%;
	}
	#supplementation a img.logo {
		width: 30%;
	}
	#dotfit-trusted {
		flex-direction: row;
	}
	#dotfit-trusted img {
		width: 40%;
		height: auto;
	}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		pool pages
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#water-classes img {
	width: 35%;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		launch special page
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#launch-schedule, #presentation-schedule {
	margin: 0 25% 0 10%;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		search results pages
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
	#search-box {
		width: 42.5rem;
	}
	#search-box input {
		width: 33.25rem;
	}

/* Define midsize grid for tablets */
  .col-m-5 {width: 5%;}
  .col-m-10 {width: 10%;}
  .col-m-15 {width: 15%;}
  .col-m-20 {width: 20%;}
  .col-m-25 {width: 25%;}
  .col-m-30 {width: 30%;}
  .col-m-35 {width: 35%;}
  .col-m-40 {width: 40%;}
  .col-m-45 {width: 45%;}
  .col-m-50 {width: 50%;}
  .col-m-55 {width: 55%;}
  .col-m-60 {width: 60%;}
  .col-m-65 {width: 65%;}
  .col-m-70 {width: 70%;}
  .col-m-75 {width: 75%;}
  .col-m-80 {width: 80%;}
  .col-m-85 {width: 85%;}
  .col-m-90 {width: 90%;}
  .col-m-95 {width: 95%;}
  .col-m-100 {width: 100%;}

}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		large screen (desktop) adjustments
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
@media only screen and (min-width: 1024px) {
/* Define large grid for desktops */
  .col-5 {width: 5%;}
  .col-10 {width: 10%;}
  .col-15 {width: 15%;}
  .col-20 {width: 20%;}
  .col-25 {width: 25%;}
  .col-30 {width: 30%;}
  .col-35 {width: 35%;}
  .col-40 {width: 40%;}
  .col-45 {width: 45%;}
  .col-50 {width: 50%;}
  .col-55 {width: 55%;}
  .col-60 {width: 60%;}
  .col-65 {width: 65%;}
  .col-70 {width: 70%;}
  .col-75 {width: 75%;}
  .col-80 {width: 80%;}
  .col-85 {width: 85%;}
  .col-90 {width: 90%;}
  .col-95 {width: 95%;}
  .col-100 {width: 100%;}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		landing page top-special section
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#top-special h1, #footer-special h1, free-class-special h1 {
		font-size: 5.5rem;
}
#top-special h3, #footer-special h3, free-class-special h3 {
		font-size: 3rem;
}
/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		pool pages
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#water-classes img {
	width: 25%;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		launch special page
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
#launch-schedule, #presentation-schedule {
	margin: 0 40% 0 5%;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		search results pages
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
	#search-header {
		display: grid;
		grid: auto auto / 1fr auto 1fr;
		align-items: start;
	}
	#search-header .item-1 {
		grid-area: 1/1/2/2;
		justify-self: start;
	}
	#search-header .item-2 {
		grid-area: 1/3/2/4;
		justify-self: end;
	}
	#search-header .item-3 {
		grid-area: 1/2/2/3;
		justify-self: center;
	}
	#search-header .item-4 {
		grid-area: 2/1/3/4;
		justify-self: start;
	}
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		map directions
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/

#map {
  height: 26rem;
  margin: .75rem;
}

#directions-panel {
  height: 100%;
  margin: .75rem;
  overflow: auto;
}

#directions-panel select, #directions-panel input {
  font-size: 1rem;
}

#directions-panel select {
  width: 100%;
}

#directions-panel i {
  font-size: .8rem;
}

@media print {
  #map {
    height: 500px;
    margin: 0;
  }
  #directions-panel {
    float: none;
    width: auto;
  }
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		modal (pop-up overlay)
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 6rem; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: var(--modal-fallback-bg-color); /* Fallback color */
    background-color: var(--modal-bg-color); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
    position: relative;
    background-color: var(--modal-content-bg-color);
    margin: auto;
    padding: 0;
    border: 1px solid #808080;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-18rem; opacity:0} 
    to {top:0; opacity:1}
}
@keyframes animatetop {
    from {top:-18rem; opacity:0}
    to {top:0; opacity:1}
}
/* The Close Button */
.close-modal {
  float:right;
	display: block;
  color: var(--modal-close-color);
  padding: .625rem;
	margin: .5rem;
	cursor:pointer;
	border: none;  
}
.close-modal:hover,
.close-modal:focus {
	background-color: var(--modal-close-hover-bg-color);
  color: var(--modal-close-hover-color);
  text-decoration: none;
  cursor: pointer;
}
.modal-header {
  padding: .125rem 1rem;
  background-color: var(--modal-header-bg-color);
  color: var(--modal-header-color);
}
.modal-body {
  padding: .125rem 1rem;
}
.modal-footer {
  padding: .125rem 1rem;
  background-color: var(--modal-footer-bg-color);
  color: var(--modal-footer-color);
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		class schedule carousel
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
.jcarousel-wrapper {
  position: relative;
}

/* carousel filter button style */
.jcarousel-wrapper h5 {
	display: block;
	float: left;
  margin-right: 1%;
}
.jcarousel-wrapper button {
	display: block;
	float: left;
	width: 15%;
  padding: .25rem;
  margin: 0 1% 1rem 0;
  font-size: 1.125rem;
  background-color: var(--button-bg-color);
  color: var(--button-color);
  text-decoration: none;
  border: none;
}
/* Change the color of links on hover */
.jcarousel-wrapper button:hover {
	background-color: var(--button-hover-bg-color);
  color: var(--button-hover-color);
  text-decoration: none;
  border: none;
}
/* Change the color of active filter */
.jcarousel-wrapper button.active {
	background-color: var(--nav-active-bg-color);
  color: var(--nav-active-color);
}

.class-carousel {
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  border: 10px solid #fff;
  width: 88%;
  height: 400px;
  -webkit-border-radius: 5px;
  	-moz-border-radius: 5px;
      border-radius: 5px;
  -webkit-box-shadow: 0 0 2px #999;
  	-moz-box-shadow: 0 0 2px #999;
      box-shadow: 0 0 2px #999;
}

.class-carousel > ul {
  width: 10000em;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.class-carousel > ul > li {
  float: left;
}

.class-listing, .class-listing ul {
  width: 200px;
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.class-listing li > ul > li {
  border: 1px solid #000;
  margin: 10px;
	background-color: var(--classes-bg-color);
	-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.class-listing > li:first-child {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: var(--days-bg-color);
  border: 2px solid #000;
  margin: 10px;
  z-index: 1;
}

/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
  position: absolute;
  top: 100px;
  width: 30px;
  height: 30px;
  text-align: center;
  background: #4E443C;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 1px #000;
  font: 24px/27px Arial, sans-serif;
  -webkit-border-radius: 30px;
		-moz-border-radius: 30px;
	    border-radius: 30px;
  -webkit-box-shadow: 0 0 2px #999;
		-moz-box-shadow: 0 0 2px #999;
	    box-shadow: 0 0 2px #999;
}

.jcarousel-control-prev {
  left: -5px;
}

.jcarousel-control-next {
  right: -5px;
}

.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
  display: block;
}

.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
  opacity: .5;
  cursor: default;
}

/* carousel content style */

.class-divs p {
	padding: .1em .5em;
	margin: 0;
}
.times {
	font-size: 0.75em;
}
.title {
	font-size: 1.15em;
	font-weight: bold;
}
.instructor {
	font-size: 0.85em;
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		picture viewing carousel
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/
.jcarousel-picview-wrapper {
    width: 80%;
    margin: 1.25rem auto 3rem auto;
    position: relative;
    border: .75rem solid #fff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

.jcarousel-picview {
    position: relative;
    overflow: hidden;
}

.jcarousel-picview ul {
    width: 10000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel-picview li {
    float: left;
}

.jcarousel-picview img {
    display: block;
    max-width: 100%;
    height: auto !important;
}


/** Carousel Controls **/

.jcarousel-picview-control-prev,
.jcarousel-picview-control-next {
    position: absolute;
    top: 50%;
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    background: var(--button-bg-color);
    color: var(--button-color);
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 2rem/2.25rem Arial, sans-serif;
    -webkit-border-radius: 2.5rem;
       -moz-border-radius: 2.5rem;
            border-radius: 2.5rem;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}
.jcarousel-picview-control-prev:hover,
.jcarousel-picview-control-next:hover {
    background: var(--button-hover-bg-color);
    color: var(--button-hover-color);
    text-decoration: none;
}

.jcarousel-picview-control-prev {
    left: -16%;
}

.jcarousel-picview-control-next {
    right: -16%;
}

.jcarousel-picview-control-prev:hover span,
.jcarousel-picview-control-next:hover span {
    display: block;
}

.jcarousel-picview-control-prev.inactive,
.jcarousel-picview-control-next.inactive {
    opacity: .5;
    cursor: default;
}

/** Carousel Pagination **/

.jcarousel-picview-pagination {
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin: 0;
}

.jcarousel-picview-pagination a {
    text-decoration: none;
    display: inline-block;
    
    font-size: 1rem;
    min-width: 1.5rem;
    
    background: var(--button-bg-color);
    color: var(--button-color);
    border-radius: .75rem;
    text-align: center;
    
    margin-right: 0.8rem;
    
    opacity: .75;
}

.jcarousel-picview-pagination a.active {
    background: var(--button-hover-bg-color);
    color: var(--button-hover-color);
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}

/* Following block sets styling for
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
		connected stage/navigation carousel
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** 
*/

/** Stage container **/

.connected-carousels .stage {
    margin: 1.25rem 0;
    position: relative;
}

/** Navigation container **/

.connected-carousels .navigation {
    width: 260px;
    margin: 20px auto;
    position: relative;
}

/** Shared carousel styles **/

.connected-carousels .carousel {
    overflow: hidden;
    position: relative;
}

.connected-carousels .carousel ul {
    width: 10000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.connected-carousels .carousel li {
    float: left;
}

/** Stage carousel specific styles **/

.connected-carousels .carousel-stage {
    max-width: 1044px;
    margin: auto;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}
.connected-carousels .carousel-stage img {
    display: block;
    max-width: 100%;
    height: auto !important;
}

/** Navigation carousel specific styles **/

.connected-carousels .carousel-navigation {
    height: 80px;
    width: 260px;
    background: #fff;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

.connected-carousels .carousel-navigation li {
    cursor: pointer;
}

.connected-carousels .carousel-navigation li img {
    height: 60px;
    width: 60px;
    display: block;
    border: 5px solid #fff;
}

.connected-carousels .carousel-navigation li.active img {
    border-color: #ccc;
}

/** Stage carousel controls **/

.connected-carousels .prev-stage,
.connected-carousels .next-stage {
    display: block;
    position: absolute;
    top: 0;
    width: 49%;
    height: 100%;
    color: #fff;
}

.connected-carousels .prev-stage {
    left: 0;
}

.connected-carousels .next-stage {
    right: 0;
}

.connected-carousels .prev-stage.inactive,
.connected-carousels .next-stage.inactive {
    display: none;
}

.connected-carousels .prev-stage span,
.connected-carousels .next-stage span {
    display: none;
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

.connected-carousels .prev-stage span {
    left: 20px;
}

.connected-carousels .next-stage span {
    right: 20px;
}

.connected-carousels .prev-stage:hover span,
.connected-carousels .next-stage:hover span {
    display: block;
}

/** Navigation carousel controls **/

.connected-carousels .prev-navigation,
.connected-carousels .next-navigation {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 16px/29px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

.connected-carousels .prev-navigation {
    left: -15px;
    top: 22px;
    text-indent: 6px;
}

.connected-carousels .next-navigation {
    right: -15px;
    top: 22px;
    text-indent: 20px;
}

.connected-carousels .prev-navigation.inactive,
.connected-carousels .next-navigation.inactive {
    opacity: .5;
    cursor: default;
}