/**************************************************/
/* Load Google Fonts Locally*/
/**************************************************/

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

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

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

/**************************************************/
/* Wrapper + Formatting */
/**************************************************/
title {
	visibility:hidden;
}

div {
	background-color:#f2f2f2;
	font-family: 'Hind', sans-serif;
	opacity:0.9;
	padding:2%;
}

li {
	list-style-type:none;
}
/* Header */

h1 {
	text-align:center;

	color:black;
	opacity:0.9;
	font-family:Merriweather;

	margin-bottom:10vh;



}

h2 {
	font:bold 1.2em tahoma;
	text-align:center;
}

h3 {
	text-align:center;
}

/*Centering other things */

img, table {
	max-width:100%;
	margin: 0 auto;
	display:inline;
}

body {
	/*
	background-image: url("img/backgroundblur.jpg");
	background-position:top-center;
	background-repeat:no-repeat;*/



	background-image:url("img/tomFight.png");
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:white;
	padding:10px;
}

.main_content_formatting {
    padding-top:50px;
    margin-bottom:1%;
}
/**************************************************/
/* Link Styling */
/**************************************************/


a:link {
	color: black;
}

a:visited {
	color: black;
}
	    
a:active {
	color:black;
}

/**************************************************/
/* About */
/**************************************************/
#about {
	text-align:center;
}
#bottomDetails{
	color:black;
	font-size:1.2em;
	font-weight:bold;
}

	
/*
/**************************************************/
/* New Navbar */
/**************************************************/

#navbar {
	padding-bottom:0px;
	padding-top:0px;
	margin:0 auto;
	background-color:red;
	display:block;
	z-index:1;
	height:75px;
	position:relative;
	width:inherit;
}

#navbar ul {
    list-style-type: none;
    opacity:1;
	padding:0;
}

#navbar li {
	max-height:20px;
    float: left;
    font-size:1.4em;
    min-width:14.25%;

    padding-top:27.5px;
    padding-bottom:27.5px;

    font-family: 'Montserrat', sans-serif;
    text-align:center;
    background-color:transparent;

    /*Navbar smooth transitions */

    	    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

/**************************************************/
/* Temporary Testing Phase for Clickable Nav */
/**************************************************/

/* Dropdown Button */
.dropbtn, #menuButton {
    opacity:1;
    z-index:2;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
	cursor: pointer;
	    opacity:1;
}

/* The container <div> - needed to position the dropdown content */
/*Has no effect on the look of the menu at all, just makes a div appear*/
.dropdown {
	display:inline;
    position:absolute;
    background-color:transparent;
    width:100%;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    background-color:rgba(255,0,0,1);
    opacity:1;
}

/* Links inside the dropdown */
.dropdown-content a {
    font-size:3vh;
    text-decoration: none;
    display: block;
    z-index:6;
    padding-bottom:0.75vh;
    padding-top:0.75vh;
    opacity:1;
    text-align:center;
}

#myDropdown {
	position:absolute;
    left:0px;
	top:50px;
    margin:0;
    padding:0;
    width:100%;
	opacity:1;
	z-index:6;

}

.dropdown-content a:hover {background-color: white}

.show {display:block;}



/**********
Navigation
**********/

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

#navbar.active {
	color:#494949;
}


#mobile_nav {
    top:0px;
    left:0px;
	height:50px;
	list-style-type: none;
    background-color: red;
    z-index:1;
    position:fixed;
    padding:0px;
    margin:0px;
    width:100%;
    display:none;
 }

#menuButton {
    background-color:rgba(0,0,0,0);
    background-image:url("icons/squareMenuIconWhiteSmall.png");
    background-repeat:no-repeat;
    margin:0;
    padding:0;
    position:fixed;
    top:10px;
    left:10px;
    border-radius:5px;
    transition-duration:0.2s;
}

#menuButton img {
	height:30px;
}

#spartaLogoSmall {
	position:fixed;
	top:4px;
	background-color:rgba(0,0,0,0);
	border-radius:5px;
	height:40px;
	text-align:center;
	left:46.5vw;
	/*box-shadow: 0 0px 4px 0 rgba(255, 255, 255, 0.8), 0 3px 10px 0 rgba(255, 255, 255, 0.19);*/
}

#spartaTextMobile {
	position:fixed;
	height:30px;
	top:10px;
	right:10px;
	border-radius:2px;
}

 /**************************************************/
/* topSpacer (for when navbar scrolls) */
/**************************************************/

#topSpacer {
		
	position:relative;
	max-height:10px;
	width:90%;
	margin:0,  auto;
	padding:12px;
	background-color:transparent;
	display:none;


}

/**************************************************/
/*Images*/
/**************************************************/
#donthavetobegreat {
	
	display:block;

	opacity:1;
		text-align:center;
		background-color:rgba(0,0,0,0.3);

}


#donthavetobegreat img {
	text-align:center;
	box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.8), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
}

/**************************************************/
/*Header (Sparta Logo)*/
/**************************************************/
	



.headimage {
	margin: 0 auto;
	background-color:black;
	height:200px;
	
}

#spartaMMALogo {
	margin: 0 auto;
	display:inline;
	position:relative;
	top:-10px;
	left:100px;
}

#headerSmall {
	display:none;
}

/**************************************************/
/*Header*/
/**************************************************/


#rioFightersLogo {


}

#redDragonsBJJLogo {


}

.headimage img {
	position:relative;
	top:-50px;
	left:-65px;
}

#hortegas_logo {
    
    height:110px;
    position:relative;
    right:10px;
    border-radius:2px;
}

/**************************************************/
/* Trainers Layout */
/**************************************************/
#trainers {
	opacity:0.9;
}



#trainers h2 {
	font-size:2em;
}

.trainerstext {
	max-width:70%;
	padding-right:300px;

}

.trainercutout {
	float:right;
	position:relative;

	opacity:1;
	z-index:2;
}

#adam, #dinko, #jorge, #alessandro #tomasz {
	bottom:175px;
}

#daniel {
    height:450px;
}

#daniel_mobile {
    width:170px;
    border: 2px solid silver;
}

#pedro_ref {
    background-color:azure;
    padding:10px;
    border:2px solid gold;
    text-align:center;
    transition-duration:0.2s;
}

#pedro_ref:hover {
    background-color:greenyellow;
    color:black;
    cursor:pointer;
}

#jorge {

	top:-175px;
}

#alessandro {
	top:-175px;
}

#tomasz {
	top:-150px;
}




.trainerstext ul li {
	list-style-position:outside;

}

.trainerMobile {

	display:none;



}
.galleryVideos {
	margin:0;
	padding:0;
	background-color:transparent;
	width:100%;
	height:500px;

	
}

.galleryVideo {
	margin:0;
	padding:0;
	width:49%;
	height:315px;
	display:inline;
	background-color:transparent;
	
}

/*double text layout*/
#doubleColumn{
	margin:0;
	padding:0;
	background-color:transparent;

	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    

}

/**************************************************/
/*Parallax*/
/**************************************************/


/*
#parallax {
	background-image: url("img/teamphoto.jpg");

	min-height: 300px;


    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
*/

#parallax2 {
	background-image: url("img/team2.png");

	min-height: 300px;

	/* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/**************************************************/
/*Social Icons*/
/**************************************************/

#social_icons {

	background-color:transparent;
	margin:0px;
	display:inline-block;

	position:absolute;

	top:60px;
	right:100px;

	z-index:1;



}

#social_icons {


}
#social_icons a {

	    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
}



/**************************************************/
/* Timetable */
/**************************************************/

.timetable {
	text-align:center;
	opacity:1;
	overflow-x:auto;
	min-width:92%;

	
}


#table {
	display:inline-table;
	opacity:0.9;
	min-width:92%;

}

td {
	min-width:140px;
	margin:0px;
	text-align:center;
	opacity:1;
		border-radius:10px;
		    -webkit-transition: color 0.2s, background-color 0.2s;
    transition: color 0.2s, background-color 0.2s;
}

/*interactive */

td:hover {

	

}

#bjj {
	border: 2px solid #f2f2f2;
	color:green;
	background-color:#96ffa5;
	background-image:url(/img/adam.png);
    height:75px;
}

#mma {
	border: 2px solid #f2f2f2;
	color:blue;
	background-color:#c0c6ff;
    height:75px;
}

#yoga {
	border: 2px solid #f2f2f2;
	color:#a800ff;
	background-color:#f1c0ff;
    height:75px;
}

#private_lessons {
	border: 2px solid #f2f2f2;
	background-color:rgb(255, 248, 232);
    height:75px;

}

#boxing {
	border: 2px solid #f2f2f2;
	color:red;
	background-color:#ffc0c0;
    height:75px;

}

#karate {
	border: 2px solid #f2f2f2;

	background-color:white;
	color:black;
    height:75px;
}

#open_mat {
    border: 2px solid #f2f2f2;

	background-color:rgb(255, 255, 170);
	color:black;
    height:75px;
}

#scrolltosee {
	display:none;
}


	/**************************************************/
/* Prices */
/**************************************************/

#prices p {

	text-align:center;
}

#free {
	font-size:1.3em;
	color:red;

}

#everyoneWelcome {
	font-size:1.1em;

}

#privateClass, #bottomDetails {
	display:block;
	background-color:silver;
	border-radius:10px;
	border-color:orange;
	border-width:5px;

}

/**************************************************/
/* Contact */
/**************************************************/

#map {
        height: 600px;
        width: 95%;
       }

#contact {
	text-align:center;
}

	/**************************************************/
/* Shop */
/**************************************************/


#shop {
	opacity:0.9;
	
}

#shopHeading {
	text-align:center;
	}

.itemBox {
	
	min-width:220px;
	width:26.5%;

	padding-top:50px;

	text-align:center;

	display:inline-block;
	background-color:#e4e4e4;
	margin:1% auto;
	margin-right:1.25%;
	margin-left:1.25%;
	border-radius:5px;
	border-color:black;
}

.itemBox img {
	box-shadow:5px 5px 5px black;
}

/**************************************************/
/* Qualifications Bar */
/**************************************************/
#qBar {
	padding:0;
	text-align:center;
}

#qBarMed, #qBarSmall {
	display:none;
}

/**************************************************/
/* Sparta Fight Series Header */
/**************************************************/

#full-screen-header-all-sizes {
	background-color:rgba(256,0,0,0.5);
	opacity:1;
	text-align:center;
}

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: white;
  text-align: center;
  font-size: 28px;
  padding: 20px;

  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;

}

.button:hover span:after {
  opacity: 1;
  right: 0;

}

.full-width-container {
	width:94%;
	background-color:white;
}

#tickets-text {
	color:white;
}

/**************************************************/
/* view.php */
/**************************************************/

div .container {
    background-color:silver;
    width:100%;
}

.button_1_p {
    padding:5px 10px 5px 10px;
    margin:0px 0px 0px 0px;
    z-index:-1;
    font-size:1.5em;
}

.button_1 {
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    color:black;
    border:2px solid red;
    transition-duration:0.2s;
    position:fixed;
    bottom:20px;
    left:50px;
    color:black;
    border-radius:4px;
    font-family:montserrat;
    opacity:1;
}

.button_1:hover {
    background-color:red;
    cursor:pointer;
}

.button_1 a {
    text-decoration: none;
}

.round_edge {
   border-radius:5px;
}

.see_info {
   height:50px;
}

.see_info_container {
   width:95%;
   height:50px;
   background-color:silver;
   left:0px;
}

.fullscreen_stats {
   max-height:calc(100vw - 20px);
   max-width:100vw;
}

#back_bar {
   width:100%;
   height:20px;
}

/**************************************************/
/* Media Queries */
/**************************************************/

	/*Navbar Changing Text*/

#navbar_mobile {
	visibility:hidden;
}

@media (max-width:1000px) {

	#donthavetobegreat {
	
	display:block;

	opacity:1;
		text-align:center;
		background-color:#f2f2f2;

	}


	body {
	
	/*
	background-image: url("img/backgroundblur.jpg");
	background-position:top-center;
	background-repeat:no-repeat;*/



	background-image:none;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:rgba(50,50,50,1);
	padding:10px;




	}
	#parallax2 {
	    background-attachment: scroll;
	    width:94.25%;
	    height:55vh;
        display:none;
	}
	#social_icons {
	visibility:hidden;
	}
	#spartaMMALogo {
		display:block;
		left:0px;
	}
	#mobile_nav {
		display:block;
	}
	#navbar {
		display:none;
	}
	.trainercutout {
		display:block;
		margin: 0 auto;
	}
	.trainerstext {
		max-width:inherit;
			padding-right:0px;
	}
	#adam, #dinko, #jorge, #alessandro, #tomasz, #daniel {
			display:none;

	}
	.trainerMobile {
		display:block;
		max-width:100%;
		margin: 0 auto;
		text-align:center;
		
	}
	#map {
		width:100%;
	}
	#qBarMed {
		display:initial;
	}
	#qBarLarge{
		display:none;
	}
	#topSpacer {
		display:inline-block;
	}

	.headimage {
		height:240px;
	}
	#spartaMMALogo {
		top:30px;
	}
   
   .see_info {
    text-align:center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height:40px;
    position:relative;
    left:5px;
   }

   .see_info_container {
    background-color:transparent;
   }
   
}
.galleryVideo {
	margin:0;
	padding:0;
	width:99%;
	height:315px;
	display:inline;
	background-color:transparent;
}

/*Shop Items Line Drop 1 */
@media (max-width:910px) {
	.itemBox {
		width:42.5%;

	}
}

	/*Shop Items Line Drop 2 */
@media (max-width:565px) {
	.itemBox {
	width:93%;
	font-size:1.5em;
	}
	#qBarMed{
		display:none;
	}
	#qBarSmall{
		display:initial;
	}

}

@media (max-width:1050px) {
	#scrolltosee {
		display:initial;
	}

@media (max-width:775px) {
	.classes {
		height:90vh;
	}

}

/*the next one, no idea where it's from. but it was missing */
}
/*
@media (min-width:1000px) {
	#headimage{
		margin-top:70px;
		padding:0;
		top:0;
	}
	#navbar {
		background-size:50px;

	} /*


/* Double column text layout for trainers*/
@media (max-width:650px) {
	#doubleColumn{

	-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
    

}


}


/**************************************************/
/* Scroll Anchors */
/**************************************************/


/**************************************************/
/* Footer Styling */
/**************************************************/

#branding {
	background-color:black;
	color:white;

	text-align:center;

}

#branding a:link {
	color: white;
}

#branding a:visited {
	color: white;
}
	    
#branding a:active {
	color:white;
}