/*Brendan Hukill 4/16/2021 */

/* reset browser styles */
* {
  box-sizing: border-box; 
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol { 
	padding-left: 1.4em;
	list-style: decimal;
}
ul {
	padding-left: 1.4em;
	list-style: square;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
/* end reset browser styles */

.clear:after {  /* allows header content to drop down */
  content: " ";
  display: table;
  clear: both;
}

body {	
	margin: 0 auto;	
	background: linear-gradient(to bottom, #fff, #000); /*transition from white to black*/
	background: -webkit-linear-gradient(to bottom, #fff, #000); /*transition from white to black*/
	font-family: "Calibri", "sans-serif";	/*set font to Calibri, or the generic sans-serif font*/
}

.pageWrapper {
	max-width: 1200px; /* allows nav bar to spread all the way across on large desktop screens */
	margin: 0 auto;
	background-image: linear-gradient(to right, #fff, #C9E4FF); /*set background transition from white to sky blue*/
}

/* Home Page Button Styling */

.Main a {
	color: #cd1318; /*set color to company red*/
	text-decoration: none;
}

.Main a:hover {	
	color: #C9E4FF; /*set hover color to company blue*/
	text-decoration: underline;
}

.Main a:active {	
	color: #fff; /*set click color to white*/
	text-decoration: none;
}

img 	{	
	font-size: 10px; 
	margin: 0 auto 0 auto;
	max-width: 100%; /*adjust logo to size of screen*/
	min-width: 1.5em;
}

h1, h2, h3, p { 
	color: #000;
	font-family: Verdana, sans-serif; 
	padding: 0;
	margin: 0 auto 0 auto;
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
	max-width: 750px;
	position: relative;
	margin: auto;
}

.mySlides {
	margin: auto;
	width: 50%;
}

.mySlides {
	display: inline-block;
	margin-left: auto;
    margin-right: auto;
	margin-top: 80px;
}

.slideShowText {
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -75%);
	padding: 0 0.5em;
	background: rgba(205, 19, 24, 0.8); /*set color to company red*/
	border-radius: 4px;
	font-size: 2em;
}

/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);
}

/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.active, .dot:hover {
	background-color: #717171;
}

/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}

@-webkit-keyframes fade {
	from {opacity: .4} 
	to {opacity: 1}
}

@keyframes fade {
	from {opacity: .4} 
	to {opacity: 1}
}
 
/*End of slideshow formatting*/
 
tbody td { 	
	color: #000;
	font-size: 1em;
	height: 2em;
	max-width: 100%;
}

.Video {
	margin-top: 80px;
	background-color: #C9E4FF; /*set background color to company blue*/
}

.videowrapper	{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0px;
}

.videowrapper iframe {
	position: absolute; /*position: absolute requires position: relative in the .videowrapper container to work properly*/
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	height: 100%;
	width: 100%;
}

/* End of Home Page Button Styling */

/* GetFit & BeWell Page Styling */

.overlay {
	position: relative;
	text-align: center;
	color: #fff; /*set color to company red*/
	width: auto;
	z-index: 0;
}

.centeredSection {
	position: absolute;
	top: 48%;
	left: 50%;
	transform: translate(-50%, -48%);
	background: rgba(205, 19, 24, 0.8); /*set color to company red*/
	border-radius: 4px;
	font-size: 2em;
}

@media (max-width: 599.98px) {
.centeredSection {
	font-size: 1.25em;
}
}

@media (max-width: 349.98px) {
.centeredSection {
	padding: 0 2px;
}
}

@media (min-width: 350px) and (max-width: 399.98px) {
.centeredSection {
	padding: 0 3px;
}
}

@media (min-width: 400px) and (max-width: 599.98px) {
.centeredSection {
	padding: 0 5px;
}
}

@media (min-width: 600px) {
.centeredSection {
	padding: 0 0.5em;
}
}

/* End of GetFit & BeWell Page Styling */

/* TrainingBrand & AboutUs Page Styling */

#TrainingBrand, #AboutUs {	
	width: 100%;
	font-size: 1.5em;
	padding: 0 5%;
}

#TrainingBrand p, #AboutUs p {	
	font-size: 0.75em;
}

#TrainingBrand h2, #AboutUs h2, #TrainingBrand p, #AboutUs p {	
	margin-bottom: 20px;
}

@media (max-width: 1040.98px) {
#TrainingBrand, #AboutUs {	
	margin-top: -30px;
}
}

@media (min-width: 1041px) {
#TrainingBrand, #AboutUs {	
	margin-top: -10px;
}

#TrainingBrand h2, #AboutUs h2 {	
	margin-bottom: 30px;
}

footer {	
	margin-top: 40px;
}
}

/* End TrainingBrand Styling */

/* Contact Us Form styling */

* {box-sizing: border-box;}

#Form {
	border-radius: 5px;
	background-color: #000; /*set background color to black*/
	padding: 20px 20px 0px 20px;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

.subform {
	padding-bottom: 10px;
	margin-bottom: 17px;
}

#location, #subject {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin-top: 6px;
	margin-bottom: 16px;
	resize: vertical;
}

/* Label Styling */

.subform .label  {
	color:#fff;
	padding-right: 10px;
}

/* Text Field Styling */

.subform input[type="text"], .subform textarea {
	border-radius: 5px;
	border: none;
	color: rgb(255,255,255);
	font-size: 1em;
	box-shadow: inset 0 0 10px rgb(255,255,255,.5);
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
}

.subform input[type="text"]:focus, .subform textarea:focus {
	background-color: white;
	color: black;
	font-size: 1em;
}

/* Button Styling */

.subform input[type=submit]	{
	background: rgb(229,48,45); /*set background color to red*/
	background: linear-gradient(to-bottom, rgba(229,48,45,.1)) 40%, rgba(229,48,45,.5);
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-top: 0px;
	padding: 0 25px;
	font-size: 1em;
}

.subform input[type=submit]:hover {
	background: #87ceeb; /*set background to dark blue*/
	color: #FFF; /*set color to white*/
	box-shadow: none;
}

.subform input[type=submit]:active {
	background: -webkit-linear-gradient(to right, #87ceeb, rgb(0,102,153)); /*set background transition from medium blue to dark blue*/
	background: linear-gradient(to right, #87ceeb, rgb(0,102,153)); /*set background transition from sky blue to dark blue*/
	color: #e5302d; /*set color to company red*/
	transform: scale(1.25);
	box-shadow: none;
}

.buttonPlacer {
	text-align: center;
}

@media (min-width: 801px) {
#Form {
	width: 65%;
}
}

/* End Contact Us Form Styling */
/* End AboutUs Styling */

/* Default footer with smaller font-size*/

footer { 	
	background-color: rgb(0,102,153); /*set color to dark company blue, darker shade */
	margin-right: 0 auto 0 auto; /*center content within id="outer-wrapper"*/
	padding-top: 10px;
	padding-bottom: 5px; /*add 10px of padding around the #content, and footer areas within the container*/
	font-size: 1em;	/*reduce the font size in the footer*/
	font-weight: bold;
	text-align: center; /*center the text in the footer*/
	color: #fff;
}

/* Newsletter Sign Up Styling */

.signup label {
	width: 100%;
	color: white;
	font-size: 25px;
}

.signup input[type="email"] {
	border-radius: 4px 0 0 4px;
	border-width: 2px;
	color: black;
	border-bottom-color: #add8e6; /*set color to mainNav blue */
	padding: 7px 10px 8px 10px;
	-webkit-flex: 1;
	flex: 1;
}

.signup ::placeholder {
	color: grey;
}

.signup input[type="submit"] {
	margin-left: -7px;
	border-radius: 0 4px 4px 0;
	padding: 0 10px 0 10px;
	color: #fff;
	background-color: #000;
	border-width: 2px;
	-webkit-flex: 1;
	flex: 1;
}

.signup input[type="submit"]:hover {
	color: #000; /*changed default color to dark company blue */
	background-color: #fff;
	border-color: #006699; /*changed default border color to dark company blue */
	-webkit-flex: 1;
	flex: 1;
}

.signup input[type="submit"]:active {
	color: #000; /*changed default color to dark company blue */
	background-color: #add8e6; /* change background of button color to sky blue */
	border-color: #cd1318; /*changed default border color to red */
	-webkit-flex: 1;
	flex: 1;
}

@media (max-width: 667.98px) {
.signup input[type="email"] {
	height: 40px;
}

.signup input[type="submit"] {
	height: 40px;
}
}

/* End Newsletter Sign Up Styling */

/* Styling to make icons smaller */
/* BeWell icons */

#calendar {	max-height: 10em;
}

#catalog {	max-height: 10em;
}

/*Footer icons*/

#map {	max-height: 3em;
}
#facebook {	max-height: 3em;
}
#twitter {	max-height: 3.2em;
}
#email 	 {	max-height: 3.2em;
}
#phone {	max-height: 3em;
}
#arrowUp {	max-height: 3em;
}

.icons {
    margin-top: -30px;
}

/* Copyright styling */

.copyright {
	-webkit-flex: 1 1 500px;
	flex: 1 1 500px;
	text-align: center;
	text-decoration: none;
	color: black;
    margin-top: -10px;
	margin-bottom: 20px;
}

.copyright a {
	text-decoration: none;
	color: black;
}

.copyright a:hover {
	text-decoration: none;
	color: white;
}

.copyright a:active {
	text-decoration: none;
	color: #87ceeb; /*change color to sky blue */
}

/* Media query for mobile layout */ 

@media (max-width: 455.98px) {
.slideShowText {
	font-size: 1.25em;
}
}

@media (max-width: 480px) {
.mySlides {
	display: inline-block;
	width: 100%;
	margin-top: 0px;
}

.Video {
	margin-top: 0px;
}

.descriptions div {
	-webkit-flex: 1 1 250px;
	flex: 1 1 250px;
	margin: none;
	border-radius: none;
	padding: none;
	background: none;
	border: none;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column;
	flex-flow: column;
}

#facebook {	max-height: 3em;
}
#twitter {	max-height: 3.2em;
}
#email 	 {	max-height: 3.2em;
}
#arrowUp {	max-height: 3em;
}
}

@media (min-width: 480px) and (max-width: 800px) {
.mySlides {
	display: inline-block;
	width: 75%;
	margin-top: 25px;
}

/* Next & previous buttons */
.prev, .next {
  color: rgb(0,102,153,.9); /*set color to dark company blue, darker shade */
}

.Video {
	margin-top: 25px;
}

.descriptions div {
	-webkit-flex: 1 1 250px;
	flex: 1 1 250px;
	margin: 10px;
	border-radius: 5px;
	padding: 10px 10px 0 10px;
	background: rgba(255,255,255,.5);
	border: 5px solid rgb(0,102,153,.9); /*set border color to dark company blue, darker shade */
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column;
	flex-flow: column;
	}
}

@media (max-width: 527.98px) {
#logo {
	width: 252px;
	height: 78px;
	/* fixing the image dimensions for mobile this way allows the image resolution
	to be maintained, while resolving the search bar padding issue */
	padding-bottom: 10px;
}
}

@media (min-width: 801px) {
#button-primary:hover  {
	-webkit-transform: scale(1); /* kills the scale hover effect for primary button */
	-ms-transform: scale(1); /* kills the scale hover effect for primary button */
	transform: scale(1); /* kills the scale hover effect for primary button */
}

.mySlides {
	display: inline-block;
	width: 75%;
	margin-top: 25px;
}

/* Next & previous buttons */
.prev, .next {
	color: rgb(0,102,153,.9); /*set color to dark company blue, darker shade */
}

.Video {
	margin-top: 25px;
}
}

@media (max-width: 290.98px) {
.signup {
	padding-left: 30px;
	padding-right: 30px;
}
}

@media (min-width: 291px) and (max-width: 324.98px) {
.signup {
	padding-left: 55px;
	padding-right: 55px;
}
}

@media (min-width: 325px) and (max-width: 354.98px) {
.signup {
	padding-left: 75px;
	padding-right: 75px;
}
}

@media (min-width: 355px) and (max-width: 375.98px) {
.signup {
	padding-left: 80px;
	padding-right: 80px;
}
}

@media (min-width: 376px) and (max-width: 455.98px) {
.signup {
	padding-left: 100px;
	padding-right: 100px;
}
}

@media (max-width: 256px) {
.signup input[type="email"], 
.signup input[type="submit"] {
	border-radius: 4px;
}
}

@media (max-width: 455.98px) {
.signup input[type="email"], 
.signup input[type="submit"] {
	border-radius: 4px;
}
}

/* Media queries for tablet layouts */

@media (max-width: 1075px) {
/* Style specifies a horizontal display for navigation links */
.mobileLogo {
	visibility: visible;
	padding-top: 20px;
	margin-right: auto;
	margin-left: auto;
	width: 80%;
	display: -webkit-flex;
	display: flex;
}

header {
	background-color: #000;
}
}

/* End of Media queries for tablet layouts */ 

/* Media queries for desktop layouts */

@media (min-width: 1041px) {
header {
	visibility: visible;
	padding: 100px 0 200px 0;
	background-image: url(../Images/header_logo_removed.jpg);
	background-size: cover;
	height: 500px;
}

.mobileLogo {
	position: absolute;
	z-index: 100;
	padding: 10px;
	width: 209px;
	top: 25px;
}

.animate__animated {
	animation-delay: 1s;
}
}

@media (min-width: 1041px) and (max-width: 1233.99px) {
.mobileLogo {
	left: 800px;
}
}

@media (min-width: 1234px) and (max-width: 1499.99px) {
.mobileLogo {
	left: 850px;
}
}

@media (min-width: 1500px) and (max-width: 1699.99px) {
.mobileLogo {
	left: 950px;
}
}

@media (min-width: 1700px) and (max-width: 1899.99px) {
.mobileLogo {
	left: 1050px;
}
}

@media (min-width: 1900px) and (max-width: 2099.99px) {
.mobileLogo {
	left: 1150px;
}
}

@media (min-width: 2100px) and (max-width: 2299.99px) {
.mobileLogo {
	left: 1250px;
}
}

@media (min-width: 2300px) and (max-width: 2499.99px) {
.mobileLogo {
	left: 1350px;
}
}

@media (min-width: 2500px) and (max-width: 2699.99px) {
.mobileLogo {
	left: 1450px;
}
}

@media (min-width: 2700px) and (max-width: 2899.99px) {
.mobileLogo {
	left: 1550px;
}
}

@media (min-width: 2900px) and (max-width: 3099.99px){
.mobileLogo {
	left: 1650px;
}
}

@media (min-width: 3100px) and (max-width: 3499.99px) {
.mobileLogo {
	left: 1750px;
}
}

@media (min-width: 3500px) and (max-width: 3999.99px) {
.mobileLogo {
	left: 2000px;
}
}

@media (min-width: 4000px) {
.mobileLogo {
	left: 2200px;
}
}