@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'nexa_rust_sansblack';
    src: url('fonts/nexa-rust.sans-black-webfont.woff2') format('woff2'),
         url('fonts/nexa-rust.sans-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Aleo';
    src: url('fonts/Aleo-Regular.woff2') format('woff2'),
        url('fonts/Aleo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aleo-SemiBold';
    src: url('fonts/Aleo-SemiBold.woff2') format('woff2'),
        url('fonts/Aleo-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Aleo-Medium';
    src: url('fonts/Aleo-Medium.woff2') format('woff2'),
        url('fonts/Aleo-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Josefin';
    src: url('fonts/JosefinSans-Regular.woff2') format('woff2'),
        url('fonts/JosefinSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Page Setup */

html,body
{
	overflow-x: hidden;
	background-color: #2C3E50;
}

hr {
	max-width: 100%;
}

#MobileProgramsContainer, #MobileMapContainer, #MobileInstructorContainer, #MobileContainer {
	display: none;
}

#MobileFreeClassText {
	display: none!important;
}

#BannerImage {
	display: block!important;
}
	
#MobileBannerImage {
	display: none!important;
}

#MobileFreeText {
	visibility: hidden!important;
}

#mobileHeroRibbon {
	visibility: hidden!important;
}



/* Navbar Setup*/

#navbar li:hover {
	background-color: #DBDBDB;
}

#navbar {
	position: fixed;
	top: 0;
	width: 100%;
	transition: top 0.4s!important;
	z-index: 999;
	font-family: Josefin;
	font-size: 0.9vw;
}

#navbar li {
	font-size: 0.9vw;
}

#logo {
	padding: 3%; 
	margin-left: 15%;
}

#TryClassNavDesktop:hover {
	transition: transform .05s;
	transform: scale(1.05);
}


/* This is the little blue arrow in the bottom right that returns you to the top, put here because it pertains to navigation*/
#StickyWarp {
	position: fixed;
	bottom: 0%;
	right: 0%;
	z-index: 999;
	opacity: 1;
	display: none;
}

/* This is the button that takes you to the sign up form, included here because it also pertains to page navigation*/

#FreeClassText {
	display: block!important;
}

#FreeClassText {
	opacity: 0.75; 
	z-index: 959; 
	position: absolute; 
	right: 5%; 
	top: 60%;
}

#FreeClassText:hover {
	transition: transform .05s!important;
	transform: scale(1.05)!important;
}




/* Hero Image section */

#HeroContainer h1 {
	color: white;
	font-size: 500%;
	margin-top: 7.5%;
}

#HeroContainer h3 {
	color: white;
	font-size: 300%;
	margin-top: 2%;
}

#HeroRow {
	text-align: center;
	position: absolute;
	top: 10%;
}

#HeroRow p {
	color: white;
	font-size: 180%;
	height: 30%;
	font-family: Josefin;
	position: relative;
}

#HeaderRow {
	color: white;
	font-family: Josefin;
	font-size: 400%;
	padding-top:13%;
}



/* The section pertains to the Programs Container, which on this page shows off Forms, Sparring, Weapons, Breaking in that order*/


#ProgramsContainer {
/*	background-color: #2C3E50;*/
	background-size: cover;
	overflow: visible;
	
}

#ProgramsContainer img {
	z-index: 50;
}

#ProgramsContainer video {
	z-index: 50;
}

#MissionStatementRow {
	color: white;
	font-family: Josefin;
	background-size: cover;
}

#TKDSpirit {
	font-family: Josefin;
	font-size: 350%;
	display: flex;
  	flex-direction: row;
	margin-left: 5%;
	margin-right: 5%;
}


/* This Before and After stuff is for the horizontal white line across the page on either side of the text*/

#TKDSpirit:before, #TKDSpirit:after{
	content: "";
/*  flex: 1 1;*/
	flex: 1 0;
	border-bottom: 0.2rem solid;
	margin: auto;
}

#TKDSpirit:before {
	margin-right: 2%;
}
#TKDSpirit:after {
	margin-left: 2%;
}

#TKDHeroText {
	font-family: Josefin!important;
	font-size: 5vw!important;
	display: flex!important;
  	flex-direction: row!important;
	margin-left: 5%!important;
	margin-right: 5%!important;
}

/* This Before and After stuff is for the horizontal white line across the page on either side of the text*/

#TKDHeroText:before, #TKDHeroText:after{
	content: ""!important;
/*  flex: 1 1;*/
	flex: 1 1!important;
	border-bottom: .15vw solid!important;
	margin: auto!important;
	margin-top: 3.3vw!important;
}

#TKDHeroText:before {
	margin-right: 2%!important;
}
#TKDHeroText:after {
	margin-left: 2%!important;
}






/*Instructor Container Styles, sandwiched between Waves Top and Waves Bottom, which are the top/bottom of said container*/

#WavesTop {
	position: relative;
	margin-top: -2%;
	z-index: 500;
}

#InstructorContainer {
/*	background-color: #C82A19;*/
	background-color: #ECF0F1;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #000!important;
	font-family: 'Josefin';
}

#OurInstructors {
	font-family: Josefin!important;
	font-size: 400%!important;
	display: flex!important;
  	flex-direction: row!important;
	margin-left: 5%!important;
	margin-right: 5%!important;
}


/* This Before and After stuff is for the horizontal white line across the page on either side of the text*/

#OurInstructors:before, #OurInstructors:after{
	content: ""!important;
/*  flex: 1 1;*/
	flex: 1 0!important;
	border-bottom: 0.2rem solid!important;
	margin: auto!important;
	margin-top: 2.5rem!important;
}

#OurInstructors:before {
	margin-right: 2%!important;
}
#OurInstructors:after {
	margin-left: 2%!important;
}



#WavesBottom {
	position: relative;
	margin-top: -2%;
	z-index: 500;
}




/* Bottom section of the Page, Maps and Forms*/


#GoogleMapLocation {
	margin: 0 auto;
	display: block;
}

#MapContainer {
	background-color: #2C3E50;
	background-size: cover;
	overflow: hidden;
}

#MapContainer h3,p {
	color: white;
}

#signupdiv {
	display: flex;
	justify-content: center;
	align-items: center;
}

#signupsubmit {
	margin-top: 2%;
}

#TheForm {
	background-color: #2C3E50!important;
	opacity: 0.9;
	height: 80%;
	border: none!important;
}

#MobileTheForm {
	background-color: #2C3E50!important;
	opacity: 0.9;
	height: 80%;
	border: none!important;
}

#form {
	margin-bottom: 20%;
}

#view1 {
	display: inherit!important;
}

#view2, #view3, #view4 {
	display: none!important;
}



/* Classes, in no particular order */

.nav-item {
	padding-right: 20%!important;
	color: black!important;
	font-size: 120%!important;
}

.navbar-brand {
	width:4%!important;
}

.navbar .nav-item .dropdown-menu{ display: none; }

.navbar .nav-item:hover .nav-link{  }

.navbar .nav-item:hover .dropdown-menu{ display: block; }

.navbar .nav-item .dropdown-menu{ margin-top:0; }


.container-fluid {
	padding-left: 0rem;
	padding-right: 0rem;
	overflow: hidden;
}

.mapclass {
	padding-left: 2%;
	margin-top: 5%;
	margin-bottom: 5%;
}

.signupform {
	width: 75%;
	height: 35vw!important;
}

.signup {
	margin: 1% auto 1% auto;
	align-items: flex-start;
	width: 30vw!important;
}

input {
	height: 2.5vw!important;
}

textarea {
	height: 12vw!important;
}

.tkdtextbuffer {
	font-size: 2.5vh;
	margin: auto;
	padding-left: 10%;
	padding-right: 10%;
}

.iframe-rwd  {
	position: relative;
	padding-bottom: 80%;
	height: 0;
	overflow: hidden;
}
.iframe-rwd iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}

.InstructorImage {
	margin: auto 1%;
}

.ImageDiv {
	margin: auto 1.5em;
	text-wrap: wrap;
}

.InstructorName {
    font-family: Josefin;
	font-size: 1.5vw;
	text-align: center;
	color: #000;
}

.AccoladesTextContainer {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: -5%;
	color: #000!important;
}

.Emoji {
	font-size: 150%;
	padding-right: 2%;
}

.Accolades {
    font-family: Selawik;
	font-size: 1vw;
	color: #000!important;
}

.Accolades, .Emoji {
		margin-top: 3%;
	}

.rightwhitesquare {
	background-color: #ECF0F1;
	width: 46.875vw;
	height: 100%;
	transform: translate(-2.5vw, 3.75vw);
}

.leftwhitesquare {
	background-color: #ECF0F1;
	position: absolute;
	right: 0;
	width: 46.875vw;
	height: 100%;
	transform: translate(2vw, -3.75vw);
}

.rightImageshift {
	position: absolute;
	transform: translate(4.75vw, -0.4vw)!important;
	z-index: 900;
}

.leftImageshift {
	position: absolute;
	transform: translate(-2vw, -0.4vw)!important;
	z-index: 900;
}

.tkdimages {
	filter: drop-shadow(.35rem .35rem 1rem black);
	z-index: 250;
}


.rightHandText {
	color: #000;
	font-family: Josefin;
	text-indent: 8%;
	font-weight: 500;
	font-size: 1.6vw;
	padding-left: 6vw;
	padding-right: 3vw;
	transform: translate(0, 4vw);
}
.leftHandText {
	color: #000;
	font-family: Josefin;
	text-indent: 8%;
	font-weight: 500;
	font-size: 1.6vw;
	padding-left: 3vw;
	padding-right: 6vw;
	transform: translate(0, 4vw);
}




/*Media Queries*/

/* Smaller screen, but not Mobile */
@media screen
and (max-width: 1475px)
and (min-width: 1101px)
{	
	
/*	Page Setup */
		
	#view1, #view3, #view4 {
		display: none!important;
	}
	
	#view2 {
		display: inherit!important;
	}
	
	#MobileFreeText {
		visibility: hidden!important;
	}
	
	#MobileProgramsContainer, #MobileContainer {
		display: none!important;
	}
	
	#MobileFreeClassText {
		display: none!important;
	}
	
	#FreeClassText {
		display: block!important;
	}
	
/*	Hero Image section */
	
	#BannerImage {
	display: block!important;
	}
	
	#MobileBannerImage {
		display: none!important;
	}
	
	#mobileHeroRibbon {
	visibility: hidden!important;
	}
	
	
	
/*	Bottom section of Page, contains Map and Form*/
	
	#form {
		margin-bottom: 25%;
	}
	
/*	Classes, in no particular order */
	
	
	.tkdtextbuffer {
		font-size: 125%;
	}
	
	
}

/* smoller */
@media screen
and (max-width: 1101px)
and (min-width: 769px)
{
	
/*	Page setup */
	
	#view1, #view2, #view4 {
		display: none!important;
	}
	
	#view3 {
		display: inherit!important;
	}
	
	#MobileFreeText {
		visibility: hidden!important;
	}
	
	#MobileProgramsContainer, #MobileContainer {
		display: none!important;
	}
	
	#mobileHeroRibbon {
		visibility: hidden!important;
	}
	
	#MobileFreeClassText {
		display: none!important;
	}
	
	#FreeClassText {
		display: block!important;
	}

	
/* Hero Image Section*/
	
	#BannerImage {
		display: block!important;
	}
	
	#MobileBannerImage {
		display: none!important;
	}
	
/*	Bottom Section, Map and Form*/
	
	#form {
		margin-bottom: 45%;
	}
	
	
	
	.bannerstext {
		font-size: 175%;
	}
	
	.iframe-rwd  {
		padding-bottom: 100%;
	}
	
	.Emoji {
		font-size: 130%;
	}

	.Accolades {
		font-size: 90%;
	}
	
	.tkdtextbuffer {
		font-size: 100%;
	}
}

/* Mobile */
@media screen
and (max-width: 768px) 
{
	/*	Page setup, for mobile it's basically all display toggles */
	
	#view1, #view2, #view3 {
		display: none!important;
	}
	
	#FreeClassText {
		display: none!important;
	}
	
	#MobileFreeClassText {
		display: block!important;
		opacity: 0.75; 
		z-index: 959; 
		position: absolute; 
		right: 5%; 
		top: 70%;
	}
	
	#MobileContainer {
		display: block!important;
	}
	
	#mobileHeroRibbon {
	visibility: visible!important;
	}
	
	#view4 {
		display: inherit!important;
	}
	
	html, body {
		background-color: #2C3E50;
		overflow-x: hidden!important;
	}
	
	#HeaderRow, #ProgramsContainer, #MapContainer {
		display: none!important;
	}
	
	#MobileMapContainer {
		display: inline-block!important;
	}
	
	#BannerImage {
	display: none!important;
	}
	
	#MobileBannerImage {
		display: block!important;
	}
	
	#MapContainer {
		display: inline-block;
	}
	
	#GoogleMapLocation {
		display: none;
	}

	#GoogleMapLocationMobile {
		display: block;
	}
	
	#MobileMapContainer {
		display: inline-block!important;
		background-color: #FFF;
		background-size: cover;
		overflow-x: hidden;
	}
	
	#MobileMapContainer h3,p {
		color: white;
	}
	

	
	#navbar {
		display: none!important;
	}
	
	#nav2 {
		display: inherit!important;
		position: fixed;
		top: 0;
		width: 100%;
		transition: top 0.4s!important;
		z-index: 999;
		font-family: Josefin;
	}
	
	#TKDHeroText {
/*		display: none!important;*/
		font-size: 250%!important;
		top: 25%;
		margin-left: 0%!important;
		margin-right: 0%!important;
	}
	
	#TKDHeroText:before, #TKDHeroText:after{

	flex: 0 0!important;
	border-bottom: none!important;
}
	
	#MobileFreeText {
		visibility: visible!important;
	}
	
	#MobileProgramsContainer {
		display: inherit!important;
	}
	
	
	
/*	Navbar */
	
	
	#LogoImage {
		margin: auto 1.5%;
		width: 10%!important;
	}
	
	#StickyWarp {
		width: 10%!important;
		height: auto!important;
	}
	
	#MobileNavToggler {
		margin-right: 8%;
		width: 5vh;
		height: 5vh;
		padding: 5px;
	}
	
	#TogglerIcon {
		display: block;
		margin: 0;
	  	position: absolute;
	  	top: 50%;
	  	left: 50%;
	  	transform: translate(-50%, -50%);
	}
	
	#nav2 {
		padding: 0!important;
	}
	
	
/*	Hero Image */
	
	#HeroContainer {
		margin-top: 10%;
	}
	
	#HeroRow {
		height: 100%;
	}

	
	
/* Instructor Section */
	
	#InstructorContainer {
		overflow-x: hidden!important;
	}
	
	#OurInstructors {
		font-size: 250%!important;
	}
	
	#OurInstructors:before, #OurInstructors:after{
		flex: 0 0!important;
		border-bottom: none!important;
	}
	
/*	Bottom section with map and form */

	#signupdiv {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#signupsubmit {
		margin-top: 2%;
		margin-bottom: 25%;
	}

	#MobileTheForm {
		background-color: rgba(44,62,80,0.95)!important;
		height: 85%;
		width: 95%;
	}

	#form {
		margin-bottom: 10%;
	}
	

/* Classes, again in no particular order */
	
/*	.navbar-nav { display: flex!important; flex-flow: row nowrap!important;}*/
	.navbar-collapse { height: 100vh!important; }
	.nav-item { margin-left: 4%!important; }
	
	.InstructorName {
		margin-top: 4%;
	}
	
	.mobiletextbuffer {
		font-size: 2vh;
		margin: 10% auto;
		padding-left: 10%;
		padding-right: 10%;
	}
	
	.PullTabText {
		color: white;
		font-size: 140%;
		font-family: Josefin;
		writing-mode: vertical-rl;
		text-orientation: mixed;
	}
	
	.dropdown-menu {	
		min-width: 5vw!important;
    	width: 30vw !important;
	}
	.dropdown-menu a {
		white-space: normal!important;
		font-size: 90%!important;
		margin-bottom: -5%!important;
		margin-top: -5%!important;
	}
	
	.AccoladesTextContainer {
		margin-top: 1%;
	}
	
	.Accolades, .Emoji {
		margin-top: -4%;
	}
	
	.mapclass {
		padding-left: 2%;
		margin-top: 5%;
		margin-bottom: 0%;
	}

	.signupform {
		width: 90%;
		height: 110vw!important;
	}

	.signup {
		margin: 2% auto 2% auto;
		align-items: flex-start;
		width: 80vw!important;
	}
	
	input {
		height: 10vw!important;
	}
	
	textarea {
		height: 30vw!important;
	}
	
	.copyright1 {
		height: 5vw!important;
	}
	
	.copyright2 {
		height: 5vw!important;
	}
	
	.copyright3 {
		font-size: 3vw!important;
		line-height: 3vh!important;
	}
	
	#MobileMapContainer {
		background-color: #2C3E50!important;
	}
	
	.mobiletext {
		font-size: 5.5vw; 
		color:#000; 
		margin-left: 8.5%; 
		margin-right: 8.5%; 
		font-family: Josefin;
		font-weight: 500;
	}
	
}