/* -------- GENERAL -------- */
* {
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: Tahoma, Geneva, sans-serif;
	background: #202124;
}
a {
	color: black;
	text-decoration: none;
}
ul {
    list-style: inside;
}

/* -------- FLEXBOX -------- */
.flex {
	display: flex;
}
.column {
	flex-direction: column;
}
.space-between {
	justify-content: space-between;
}
.space-around {
	justify-content: space-around;
}
.j-flex-end {
	justify-content: flex-end;
}
.a-flex-end {
	align-items: flex-end;
}
.a-center {
	align-items: center;
}
.j-center {
	justify-content: center;
}

/* -------- TEXT -------- */
.salsa {
	font-family: Salsa, Tahoma, sans-serif;
}
.bold {
	font-weight: bold;
}
.h0 {
	font-size: 64px;
}
.h1 {
	font-size: 48px;
}
.h2 {
	font-size: 40px;
}
.h3 {
	font-size: 32px;
}
.h4 {
	font-size: 24px;
}
.h5 {
	font-size: 20px;
}
.h6 {
	font-size: 16px;
}
.t-right {
	text-align: right;
}
.t-center {
	text-align: center;
}
.white {
	color: white;
}
.white a {
	color: white;
}
.t-shadow {
	text-shadow: 0 0 16px black, 0 0 16px black;
}

/* -------- TOP ITEMS -------- */
#top {
	width: 100%;
	background: white;
}
#logo {
	padding-right: 24px;
}
#logo img {
	height: 144px;
}
#abovenav {
	padding: 12px 24px;
}
#abovenav-text {
	width: 100%;
}
#findus p {
	transition: .25s;
}
#findus p:hover {
	text-shadow: 2px 2px 4px gray;
}
#top-contact {
	padding-top: 8px;
}
.facebook {
	height: 32px;
}
.flickrtext {
	width: 64px;
	height: 20px;
}
.flickrdots {
	height: 34px;
	padding-left: 8px;
}
#nav {
	width: 100%;
	background-color: #dc0428;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	box-shadow: 0 8px 12px -8px black;
	z-index: 999;
}
#nav p {
	padding: 12px 24px 7px;
}
#menu a {
	transition: .25s;
}
#menu a:hover {
	background-color: maroon;
}
.active {
	border-bottom: 5px solid white;
	background-color: maroon;
}

/* -------- MID ITEMS -------- */
/* ---- ABOVE-THE-FOLD ---- */
#mid {
	width: 100%;
}
#above-the-fold {
	width: 100%;
}
#slides {
	position: absolute;
	z-index: -1;
}
#slide-gradient {
	position: absolute;
	height: 100%;
	width: 100%;
	background-image: linear-gradient(rgba(32,33,36,0), rgba(32,33,36,0), rgba(32,33,36,1)), linear-gradient(to right, rgba(32,33,36,0), rgba(32,33,36,0), rgba(32,33,36,1));
}
#slides img {
	height: auto;
	width: 100%;
}
#right {
	/*background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));*/
	padding: 48px;
}
#row1 {
	padding-bottom: 48px;
}
#row1 p {
	text-shadow: 0 0 8px black;
}
#row2 img {
	height: 32vh;
	transition: .25s;
}
#row2 img:hover {
	box-shadow: 0 0 16px white;
}
#right img {
	margin-left: 24px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#slide-controller {
	margin-bottom: 48px;
}
#slide-controller p {
	display:none;
}

/* ---- CARDS ---- */
#cards-container {
	width: 70%;
	min-width: 1112px;
	background: #e2a032; /*#A98A6B*/
	padding: 24px;
	margin-bottom: 128px;
	border-radius: 16px;
}
#cards-container .h1 {
	margin: 24px;
	transition: .25s;
}
#cards-container .h1:hover {
	text-shadow: 2px 2px 4px gray;
}
#cards {
	width: 1112px;
	flex-wrap: wrap;
}
.card {
	width: 256px;
	height: 384px;
	padding: 8px;
	margin: 24px;
	border-radius: 16px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	transition: .5s;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: Salsa, Tahoma, sans-serif;
	text-align: center;
	color: white;
	text-shadow: 0 0 16px black, 0 0 16px black;
}
.card:hover {
	width: 384px;
}
#tiger-cubs {
	background-image: url("images/tiger-cubs.jpg");
	background-position: 55% 100%;
	background-size: auto 100%;
}
#little-tigers {
	background-image: url("images/little-tigers.jpg");
	background-position: 30% 100%;
	background-size: auto 100%;
}
#children {
	background-image: url("images/children.jpg");
	background-position: 35% 50%;
	background-size: auto 125%;
}
#teens-adults {
	background-image: url("images/teens-adults.jpg");
	background-position: 45% 100%;
	background-size: auto 100%;
}
#sparring {
	background-image: url("images/sparring.jpg");
	background-position: center;
	background-size: auto 100%;
}
#private-lessons {
	background-image: url("images/private-lessons.jpg");
	background-position: 45% 100%;
	background-size: auto 100%;
}
/* ---- GENERAL PAGES ---- */
#page-body {
	margin: 96px 15% 128px;
	background: slategray;
	border-radius: 16px;
	padding: 96px;
	box-sizing: border-box;
	width: 80%;
}
#page-header {
    background: #202124;
    border-radius: 16px;
    padding: 48px;
    margin: 0 auto;
}
#page-menu p {
    margin: 16px 20px 0;
    cursor: pointer;
    transition: .25s;
}
#page-menu p:hover {
    text-shadow: 0 0 16px white;
}
#page-subtitle {
    margin: 32px 20%;
}
#page-subtitle p {
    margin-bottom: 16px;
}
#page-subtitle a {
    font-weight: bold;
    transition: .3s;
}
#page-subtitle a:hover {
    text-shadow: 2px 2px 8px black;
}
.section-test {
    border-radius: 16px;
    margin-top: 128px;
    padding: 96px 10%;
}
.section-small {
    margin-top: 96px;
}
.section-body {
    margin-top: 24px;
}
.section-img-test {
    width: 48%;
    height: 0;
    padding-top: 48%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 16px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.events-img {
    width: 48%;
    max-width: 500px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 16px;
}
.section-text-test {
    width: 48%;
}
.section-text-test p {
    margin-bottom: 16px;
}
.section-text-test i {
    font-size: 18px;
}
.schedule {
	max-height: 80vh;
	max-width: 100%;
	border-radius: 16px;
}
.schedule-buttons {
	margin: 36px 0;
	width: 100%;
	flex-flow: row nowrap;
	justify-content: space-around;
}
.button {
	padding: 16px 24px;
	border: 0;
	border-radius: 28px;
	cursor: pointer;
	transition: .3s;
}
.button:hover {
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2), 0 0 20px 0 rgba(0, 0, 0, 0.19);
}
.pdf-button {
	background: #dc0428;
}
.jpg-button {
	background: #0470aa;
}
.map {
    max-width: 100%;
    width: 2000px;
    height: 600px;
	border-radius: 16px;
	border: none;
}
.section-form {
	background: lightgray;
	padding: 24px;
	margin-top: 96px;
    border-radius: 16px;
    max-width: 100%;
    width: 2000px;
    box-sizing: border-box;
}

/* ---- BACKGROUNDS ---- */
.F2E2CE {
    background: #F2E2CE;
}
.D9D6D2 {
    background: #D9D6D2;
}
.BFAEB1 {
    background: #BFAEB1;
}
.A98A6B {
    background: #A98A6B;
}
.cub-bkgd {
    background: #ff9910;
}
.pwe-bkgd {
    background: #F2EA72;
}
.chd-bkgd {
    background: #C6F2C4;
}
.adt-bkgd {
    background: #c5d9f1;
}
.blk-bkgd {
    background: #f3f3f3;
}
.spr-bkgd {
    background: plum;
}
.pvt-bkgd {
    background: pink;
}
.bda-bkgd {
    background: #BED95B;
}
.trn-bkgd {
    background: #D9C5C1;
}
.cmp-bkgd {
    background: #F2E205;
}
.bud-bkgd {
    background: #F2F2F2;
}
.eve-bkgd {
    background: #C6B5D5;
}
.spl-bkgd {
    background: #F2A81D;
}
#school-bkgd {
    background-image: url("images/school.jpg");
}
#kim-bkgd {
    background-image: url("images/kim.jpg");
    background-position: center top;
}
#tkd-bkgd {
    background-image: url("images/tkd.jpg");
}
#tiger-cubs-bkgd {
    background-image: url("images/tiger-cubs.jpg");
}
#little-tigers-bkgd {
    background-image: url("images/little-tigers.jpg");
}
#children-bkgd {
    background-image: url("images/children.jpg");
}
#teens-adults-bkgd {
    background-image: url("images/teens-adults.jpg");
}
#black-belts-bkgd {
    background-image: url("images/black-belts.jpg");
}
#sparring-bkgd {
    background-image: url("images/sparring.jpg");
}
#private-lessons-bkgd {
    background-image: url("images/private-lessons.jpg");
}

/* -------- BOT ITEMS -------- */
#to-top {
	position: fixed;
	bottom: 0;
	right: 0;
	margin: 0 64px 64px 0;
	padding: 12px 12px 10px 12px;
	background: white;
	border-radius: 100%;
	box-shadow: 0 0 8px 0;
	z-index: 998;
	cursor: pointer;
	transition: .4s;
}
#to-top:hover {
	background: black;
	color: white;
	box-shadow: 0 0 0 0;
}
#to-top i {
	font-size: 28px;
}
#above-footer {
	background: #0470aa;
}
#trial {
	height: 51px;
	width: 100%;
	box-shadow: 0 -8px 12px -8px black;
	position: sticky;
	position: -webkit-sticky;
	bottom: 0;
	z-index: 997;
}
#trial-top {
	width: 100%;
	cursor: pointer;
	background: #0470aa;
	transition: .3s;
}
#trial-top:hover {
	text-shadow: 0 0 8px black, 0 0 4px black;
	background: rgba(4, 112, 170, .9);
}
#trial-top i {
	font-size: 36px;
	padding: 8px 24px;
}
#trial-bot {
	width: 100%;
	box-sizing: border-box;
}
#trial-left, #trial-right {
	width: 50%;
	box-sizing: border-box;
}
#trial-left {
	margin-right: 48px;
}
#trial-left p {
	margin: 16px 0;
}
#trial-left .h4 {
	margin-bottom: 24px;
}
#trial-right {
	background: silver;
	border-radius: 16px;
	padding: 16px;
}
.form-section {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}
label {
	width: 120px;
	flex-shrink: 0;
}
input, select, textarea {
	padding: 12px;
	width: 100%;
	border: 0;
	border-radius: 16px;
}
.form-button {
    background: white;
	padding: 16px 24px;
	border: 0;
	border-radius: 28px;
	cursor: pointer;
	transition: .3s;
}
.form-button:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background: black;
	color: white;
}
#trial-line-container {
	width: 100%;
	background: #0470aa;
	margin: 24px 0;
}
#trial-line {
	width: 50%;
	height: 2px;
	background: white;
}
#footer {
	width: 100%;
	background: #0470aa;
	padding: 24px;
	box-sizing: border-box;
}
#footer a {
	transition: .25s;
}
#footer a:hover {
	text-shadow: 2px 2px 4px black;
}
#footer-right {
	width: 169.867px;
}
#footer-line {
	height: 129px;
	width: 2px;
	background: white;
	margin: 0 24px;
}
.logobkgd {
	background: white;
	border-radius: 12px 4px;
}
#footer-bot p {
	padding-bottom: 4px;
}
#footer i {
	font-size: 19px;
}

/* -------- MOBILE -------- */
#nav-mobile-header {
	display: none;
	padding: 12px 24px;
}
#nav-mobile-header img {
	height: 48px;
	padding: 8px 0 8px 12px;
}
#nav-mobile-header div {
	background: /*rgba(255, 165, 0, 1)*/ white;
	border-radius: 2px;
	color: black;
}
#nav-mobile-header i {
	font-size: 36px;
	padding: 8px;
	cursor: pointer;
	transition: 1s;
}
#nav-mobile-logo a {
	height: 64px;
}
#nav-mobile-footer {
	display: none;
}
#menu {
	z-index: 1000;
}
.hide-nav {
	height: 53px;
}

@media screen and (max-width: 1200px) {
#page-body {
    width: calc(100% - 48px);
}
.tablet-column {
    flex-direction: column;
}
.hide-mobile {
	display: none;
}

/* ---- HEADER ---- */
.active {
	border-bottom: 0;
}
#nav {
	flex-direction: column;
}
#menu {
	position: fixed;
	display: block;	
	top: 88px;
	width: 100%;
	background: #dc0428;
	overflow: hidden;
	box-shadow: 0 8px 12px -8px black;
	transition: .5s;
}
#menu a:hover {
	background-color: #dc0428;
}
.hide-nav {
	height: 0px;
}
.show-nav {
	height: 483.5px;
}
#nav-mobile-header {
	display: flex;
}
.menu-display {
	display: block;
}
#nav-mobile-footer {
	display: flex;
	font-family: Tahoma, Geneva, sans-serif;
}
#contact-hide-nav {
	flex-direction: column;
}
/* ---- HOME ---- */
#slide-gradient {
	background-image: linear-gradient(rgba(32,33,36,0), rgba(32,33,36,0), rgba(32,33,36,1));
}
#right {
	padding: 40% 24px 48px;
}
#right .h0 {
	font-size: 40px;
}
#right .h4 {
	font-size: 16px;
}
#row2 img {
	height: auto;
	width: 40vw;
	max-width: 200px;
}
#cards-container {
	width: 100%;
	min-width: 100%;
	padding: 24px 0;
	border-radius: 0;
	margin-bottom: 0;
	overflow: hidden;
}
#cards {
	width: 100vw;
}
/* ---- GENERAL ---- */
#page-body {
    margin: 96px 24px;
    padding: 96px 36px;
}
.section-test {
    padding: 40px;
}
} /* 1200px */

@media screen and (max-width: 992px) {
/* ---- HEADER ---- */
.mobile-column {
    flex-direction: column;
}
#nav-mobile-header p {
	display: none;
}
#nav-mobile-header img {
	padding-right: 12px;
}

/* ---- HOME ---- */
#right {
	width: 100%;
	padding: 40% 0 24px;
}
#row1 {
	padding: 0 24px 48px 24px;
}
#row2 {
	width: 100%;
	justify-content: space-around;
}
#row2 img {
	margin: 0;
}

/* ---- GENERAL ---- */
#page-body {
    margin: 24px;
    padding: 48px 12px 12px;
}
#page-subtitle {
    margin: 32px 12px;
}
.section-test {
    margin-top: 96px;
    padding: 28px;
}
.section-img-test, .events-img, .section-text-test {
    width: 100%;
}
.section-img-test {
    margin-bottom: 24px;
    padding-top: 100%;
}
.events-img {
    margin-bottom: 24px;
}
.schedule-buttons {
    justify-content: space-between;
}

/* ---- FOOTER ---- */
#to-top {
	margin: 0 32px 64px 0;
}
#trial-top p {
	font-size: 22px;
	font-family: Salsa, Tahoma, sans-serif; 
}
.hide-trial {
	display: none;
}
#trial-bot {
	flex-direction: column;
}
#trial-left, #trial-right {
	width: 100%;
}
#trial-left {
	margin: 0 0 24px 0;
}
#footer-bot, #footer-center {
	flex-direction: column;
	align-items: center;
}
#footer-center p {
	text-align: center;
}
#footer-line {
	display: none;
}
#footer-bot div {
	margin: 8px 0;
}
} /* 992px */

/* For the old page formats */
.temp-margin {
    padding: 0 15%;
}
.page-header {
	margin: 2em 0;
}
.page-header p {
	font-size: 2.5em;
	font-weight: bold;
}
.page-subtitle {
	margin: 2em 0;
	font-size: 1.5em;
}
.section {
	margin: 4em 0;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}
.form-group {
	margin: 1em 0;
}
.form-group input, .form-group select, .form-group textarea {
	margin-top: .5em;
	width: 100%;
	padding: .5em 0;
}
.section-form .submit {
	padding: .5em 1em;
	background: yellowgreen;
	transition: .2s;
}
.section-form .submit:hover {
	opacity: .8;
}
.flexbox {
	display: flex;
}
.section-text {
	width: 45%;
	margin: 0 4em;
}
.section p {
	margin: 1em 0;
}
.p-sized-text {
	font-size: 1.2em;
}
.section-img {
	width: 45%;
}
.section-img img {
	max-height: 80vh;
	max-width: 100%;
	/*border: solid 5px white;*/
	border-radius: 1em;
}
@media screen and (max-width: 992px) {
.content {
	width: 100%;
	box-sizing: border-box;
	padding: 0 2em;
}
.section {
	flex-direction: column;
}
.section-form {
	width: 100%;
	box-sizing: border-box;
}
.column-reverse {
	flex-direction: column-reverse;
}
.section-img {
	width: 100%;
}
.section-text {
	width: 100%;
}
.temp-margin {
	padding: 0 24px;
}
}