@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;
}


html,body
{
	overflow-x: hidden;
}

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

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

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

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

#StickyWarp {
	position: fixed;
	bottom: 0%;
	right: 0%;
	z-index: 999;
	opacity: 1;
	display: none;
}

#StickyWarp:hover {
	
}

#HeroContainer {
/*	height: 100vh;*/
}

#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;
}

#WelcomeText {
	z-index: 100;
	margin-top: 10%;
}

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

#ProgramsContainer {
	background-color: #2C3E50;
	background-size: cover;
	overflow: visible;
/*	border-bottom: solid 2px white;*/
}

#ProgramsContainer img {
	z-index: 50;
	position: relative;
/*	top: -10%;*/
/*	filter: drop-shadow(.35rem .35rem 1rem black);*/
}

#ProgramsContainer img ~ .banners {
	filter: none;
	pointer-events: none;
}

#ProgramsContainer img:hover ~ .banners {
	transition: transform .05s;
	transform: scale(1.05);
}

#ProgramsContainer img:hover ~ .bannerstext {
	pointer-events: none;
	transition: transform .05s;
	transform: scale(1.05);
}

#Taekwondo {
	left: 1.75%;
}

#Hapkido {
	right: 1.75%;
}

#Gongkwon {
	right: 1.75%;
}

#Kickboxing {
	left: 1.75%;
}

#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%;
}

#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: 400%!important;
	display: flex!important;
  	flex-direction: row!important;
	margin-left: 5%!important;
	margin-right: 5%!important;
}

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

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

#InstructorContainer {
	background-color: #E74C3C;
/*	background-image: url("assets/Waves.svg");*/
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: white;
	font-family: 'Josefin';
}

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

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

#MasterMike {
	position: relative; 
	z-index: 50; 
	margin-top: 35%;
	width: 350px;
	height: 500px;
}

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

#MapContainer {
	background-color: #FFF;
	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: rgba(44,62,80,0.95)!important;
	height: 80%;
}

#form {
	margin-bottom: 20%;
}

#GoogleMapLocationSmall {
	display: none;
}

#GoogleMapLocationSmaller {
	display: none;
}

#GoogleMapLocationMobile {
	display: none;
}

#BannerImage {
		display: block!important;
	}

	#MobileBannerImage {
		display: none!important;
	}

.banners {
	pointer-events: none;
}

.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; }

.MSP {
	font-size: 225%;
}

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

.mapclass {
	padding-left: 2%;
}

.signupform {
	height: 100%;
	width: 75%;
}

.signup {
	margin: 1% auto 1% auto;
	align-items: flex-start;
}

.textbuffer {
	font-size: 140%;
	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%;
}

/*Media Queries*/

/* Smaller screen, but not Mobile */
@media screen
and (max-width: 1475px)
and (min-width: 1101px)
{	
	
	html {
		font-size: 85%;
	}
	
	#form {
		margin-bottom: 25%;
	}
	
	#MasterMike {
		margin-top: 45%;
		width: 250px;
		height: 400px;
	}
	
	#TempConstructionText {
		margin-top: -32%!important;
	}
	
	#BannerImage {
		display: block!important;
	}

	#MobileBannerImage {
		display: none!important;
	}
	
	.bannerstext {
		font-size: 200%;
	}
}

/* smoller */
@media screen
and (max-width: 1101px)
and (min-width: 801px)
{
	
	
	html {
		font-size: 75%;
	}
	
	#form {
		margin-bottom: 45%;
	}
	
	#MasterMike {
		margin-top: 85%;
		width: 150px;
		height: 200px;
	}
	
	#TempConstructionText {
		margin-top: -28%!important;
	}
	
	#BannerImage {
		display: block!important;
	}

	#MobileBannerImage {
		display: none!important;
	}
	
	.bannerstext {
		font-size: 175%;
	}
	
	.iframe-rwd  {
		padding-bottom: 100%;
	}
}

/* Mobile */
@media screen
and (max-width: 800px) 
{

	#navbar {
		font-size: 75%;
	}
	
	#LogoImage {
		margin: auto 1.5%;
		width: 10%!important;
	}
	
	html, body {
		background-color: #2C3E50;
		overflow: visible;
	}
	
	#StickyWarp, #HeaderRow, #ProgramsContainer, #MapContainer, #InstructorContainer {
		display: none!important;
	}
	
	#MobileMapContainer {
		display: inline-block!important;
	}
	
	#BannerImage {
	display: none!important;
	}
	
	#WIPImage {
		width: 80%!important;
		margin-top: 30%!important;
	}
	
	#MobileBannerImage {
		display: block!important;
	}
	
	#TKDHeroText {
		display: none!important;
	}
	
	#HeroRow {
		height: 100%;
	}
	
	#MobileTKDSpirit {
		font-size: 250%;
	}
	
	#MapContainer {
		display: inline-block;
	}
	
	#GoogleMapLocation {
		display: none;
	}

	#GoogleMapLocationMobile {
		display: block;
	}
	
	#MobileMapContainer {
		background-color: #FFF;
		background-size: cover;
		overflow: hidden;
	}

	#MobileMapContainer h3,p {
		color: white;
	}

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

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

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

	#form {
		margin-bottom: 10%;
	}
	
	#view1, #view2, #view3 {
	display: none!important;
	}
	
	#view4 {
		display: inherit!important;
	}
	
	#FreeClassText {
		display: none!important;
	}
	
	#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;
	}
	
	
	.navbar-collapse { height: 100vh!important; }
	.nav-item { margin-left: 4%!important; }
	
	.MSP {
		font-size: 150%;
	}
}