html, body {
    margin: 0;
    padding: 0;
    font-family: "akzidenz-grotesk", "Berthold Akzidenz Grotesk BE", sans-serif;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6{
	font-family: "klavika-web", "Klavika", sans-serif;
    font-weight: 300;
}

.button {
	background-color: #d20a0a; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

/* Header */
#navbar{
	background-color: rgba(0,0,0,0.8);
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
	background-color: rgba(0,0,0,0.8);
}

.navbar-default .navbar-nav > li > a
{
	line-height: 60px;
    color: #ffffff;
    font-size: 14px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > li > a:hover
{
	color: #ffffff;
	background-color: transparent;
	border-bottom: 3px solid red;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    color: white;
    background-color: transparent;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: rgba(0,0,0,0.8);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 3;
    color: #FFFFFF;
    white-space: nowrap;
    border-bottom: 3px solid rgba(0,0,0,0.8);
}

.dropdown-menu>li>a:hover {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 3;
    color: #FFFFFF;
    white-space: nowrap;
    border-bottom: 3px solid red;
    background-color: rgba(0,0,0,0.8);
}

@media (max-width: 767px) {
	.navbar-default .navbar-nav > li > a
	{
		text-align: center;
	}
	
	.navbar-default .navbar-nav .open .dropdown-menu>li>a {
    	color: #FFFFFF; 
    	line-height: 3;
	}
	
	.dropdown-menu>li>a:hover{
    	color: #FFFFFF; 
	}
}

/* Content */
.join, .motivation, .message, .register, .booking, .mission,.team
{
	background-color:#ffffff;
    color: #000000;
}

.services
{
	background-color:#000000;
    color: #ffffff;
}

.aboutus
{
	background-color:#EDEDED;
    color: #000000;
}

.container
{
	padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.content-wrapper
{
	position: relative;
	max-width: 1280px;
    margin: 0 auto;
    padding: 1.875rem 0.9375rem;
}

.centering-wrapper
{
	position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.module
{
	text-align: center;
}

.find-us
{
	background-color: #ffffff;
	padding: 15px;
	width: 35%;
	border:1px solid #cececf;
}

.title-large
{
	margin: 0;
    color: #fafbfd;
    line-height: 0.96;
    text-transform: uppercase;
	font-size: 9.25rem;
}

.title-highlight
{
	display: block;
    color: #d20a0a;
    text-transform: uppercase;
}

.subtitle
{
	margin: 0.9375rem 0 0 0;
    color: #c8c9ca;
    font-size: 2.125rem;
    line-height: 1.611;
    letter-spacing: 0.05rem;
}

.module-title-medium
{
	margin: 0;
    line-height: 0.96;
    text-transform: uppercase;
	font-size: 4.25rem;
}

.module-title-highlight
{
	display: block;
    color: #d20a0a;
    text-transform: uppercase;
	display: inline;
}

.module-subtitle
{
	margin: 0 auto;
    color: #19191e;
    font-size: 2.125rem;
    line-height: 1.611;
    letter-spacing: 0.05rem;
}

.module-text
{
	margin: 0 auto;
    color: #19191e;
    font-size: 2.125rem;
    line-height: 1.611;
    letter-spacing: 0.05rem;
}

/* === Services === */
.services-classes ul
{
	margin-top:20px;
}

.services-classes ul li
{
	display:inline-block;
	margin:0.5%;
}

.services-classes_link
{
	display:block;
	color: #fafbfd;
	background-color:#19191e;
	text-decoration: none;
	text-align:center;
	border-bottom: 3px solid #19191e;
}

.services-classes_link:hover
{
	border-bottom: 3px solid red;
	color: #fafbfd;
	text-decoration: none;
}

@media only screen and (min-width:300px){
	.services-classes_link > img
	{
		height:100px;
	}
}

@media only screen and (min-width:704px){
	.services-classes_link > img
	{
		height:150px;
	}
}

@media only screen and (min-width:1135px){
	.services-classes_link > img
	{
		height:200px;
	}
}

/* === Video === */
.video__background{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-color: #19191e;
	z-index:-1;
}

/* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
@media only screen and (min-width:400px){
    /* styles for browsers larger than 400px; */
	.team_CEO
	{
		display:none;
	}
	
	.image_intro{
    	height: 25px;
    }
}

@media only screen and (min-width:600px){
    /* styles for browsers larger than 600px; */
    .module__background--desktop{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: 50% 50%;
		background-size: cover;
		background-color: #19191e;
		z-index:-1;
	}
	
	.video__background{
		display:none;
	}
		
	.team_CEO
	{
		display:block;
		width:350px;
	}
	
	.team_CEO img
	{
		height:300px;
		width:300px;
		border-radius: 50%;
	}
}

@media only screen and (min-width:768px){	
	 /* styles for browsers larger than 768px; */	
	.image_intro{
    	height: 60px;
    }
}

@media only screen and (min-width:960px){
    /* styles for browsers larger than 960px; */	
	/*.container
	{
		width:1170px;
	}*/
	
	/*.module__background--desktop{
		display:none;
	}
	
	.video__background{
		display: block;
	}*/
		
	.team_CEO
	{
		display:block;
		width:650px;
	}
	
	.team_CEO img
	{
		height:500px;
		width:500px;
		border-radius: 50%;
	}
}

@media only screen and (min-width:1440px){
    /* styles for browsers larger than 1440px; */
}

@media only screen and (min-width:2000px){
    /* for sumo sized (mac) screens */
}

@media only screen and (max-device-width:480px){
    /* styles for mobile browsers smaller than 480px; (iPhone) */
    .module__background--desktop{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: 50% 50%;
		background-size: cover;
		background-color: #19191e;
		z-index:-1;
	}
		
	.team_CEO
	{
		width:350px;
	}
	
	.team_CEO img
	{
		height:300px;
		width:300px;
		border-radius: 50%;
	}
}

@media only screen and (device-width:768px){
    /* default iPad screens */
}

/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
    .team_CEO
	{
		width:350px;
	}
	
	.team_CEO img
	{
		height:300px;
		width:300px;
		border-radius: 50%;
	}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
    .team_CEO
	{
		width:350px;
	}
	
	.team_CEO img
	{
		height:300px;
		width:300px;
		border-radius: 50%;
	}
}

.team_list ul li
{
	display:inline-block;
	margin:0 15px;
}

.team_list img
{
	height:120px;
	width:120px;
	border-radius: 50%;
}

/* Footer */
#prefooter
{
	background-color: #373736;
    padding-top: 35px;
    padding-bottom: 36px;
    margin-top: 45px;
}

#prefooter div.row:first-child
{
	border-bottom: 1px solid #555555;
    padding-bottom: 34px;
    padding-top: 10px;
}

#prefooter .social ul li
{
	display:inline-block;
	margin:0 15px;
}

#prefooter .social ul li a i
{
	display: inline-block;
	height: 50px;
	width: 50px;
	background-color: #6F6F6E;
	line-height: 50px;
	color: #FFF;
	text-align: center;
	font-size: 18px;
	border-radius: 50px;
}

#prefooter .social ul li a i:hover, #prefooter .links ul li a:hover
{
	color: red;
}

#prefooter .links ul
{
	margin-top: 40px;
}

#prefooter .links ul li
{
	display:inline-block;
	margin:0 3%;
	font-size: 17px;
}

#prefooter .links ul li a
{
	text-decoration: none;
	color: #ffffff;
}

.footer
{
	background-color: #1D1D1F;
    margin-top: 0;
    border-top: 0;
    color: #999999;
    font-size: 13px;
    padding: 20px 0;
}