@import url("../fonts/Abel-Regular.ttf");

@font-face {
    font-family: Abel-Regular;
    src: url("../fonts/Abel-Regular.ttf");
    font-weight: 400;
}

.container {
	height: 100%;
	width: 970px;
	max-width: 100%;
}

.row {
    margin: 0;
}

#navi {
    background-color: #004f75;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: auto;
}

h1, h2, h3 {
    font-family: 'Abel-Regular', sans-serif;
}

h2 {
    margin: 10px 0;
    font-family: 'Abel-Regular', sans-serif;
}
.nav li{  float: left;}

.nav li > a {
    border: medium none;
    color: #ffffff;
  
    font-size: 19px;
    padding: 10px 10px;
    text-transform: uppercase;
    font-family: 'Abel-Regular', sans-serif;
}

.nav li.active a, .nav li a:hover, .nav li a:focus {
	color: #004f75;
	background-color: #ffffff;
	outline: none;
}

.navbar-toggle {
	position: absolute;
  top: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
	z-index: 1000;
}

.navbar-toggle .icon-bar {
  width: 50px;
}


.icon-bar {
	border: 1px solid white;
}

.navbar-collapse {
  border: none;
  box-shadow: none;
}

#navbar-collapse {
	margin: 0 auto;
	max-height: 500px;
	overflow-x: visible;
	overflow-y: visible; 
	text-align: center;
}

.menue2 {
    background-color: #004f75;
}

.nav2 {
    padding: 0;
}

.nav2 > li > a {
    color: #ffffff;
    font-family: 'Abel-Regular', sans-serif;
    padding: 15px;
    font-size: 18px;
    text-decoration: none;
}

.nav2 > li {
    list-style-type: none;
    display: inline-block;
    padding: 15px;
}

.nav2 li.active a, .nav2 li a:hover, .nav2 li a:focus {
	color: #004f75;
	background-color: #ffffff;
	outline: none;
}

.unterseiten {
    margin-top: 140px;
    overflow: hidden;
    margin-bottom: 30px;
}

.buchen a {  
    color: #004f75; 
    padding: 10px 10px 6px;  
    background-color: #fff; 
    width: 100%;
} 
.buchen a:hover {
    text-decoration: none;  
    color: #fff !important; 
    background-color: #c7183a !important;
}


.menue {
    padding: 20px 0 0;
}

.logo {
    background-color: #ffffff;
    text-align: center;
}

.logo img {
    max-width: 100%;
}

.pic {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
    height: 700px;
    width: 100%;
}

.circle {
    background-color: rgba(255, 255, 255, 0.5);
    border: 8px solid rgba(0, 79, 117, 0.9);
    border-radius: 160px;
    height: 45%;
    margin: auto;
    position: relative;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
  	-moz-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 35%;
}

.circle h1 {
    color: rgba(0, 79, 117, 0.7);
    font-size: 50px;
    font-weight: 600;
    margin-bottom: 0;
    padding: 100px 26px 26px;
    font-family: 'Abel-Regular', sans-serif;
}


#ueberuns_inhalt {
	padding: 20px 0 30px 0;
	text-align: center;
}

.carousel-inner .item img{
    min-width: 100%;
}

.carousel-indicators .active {
    background-color: #FFFFFF;
    height: 12px;
    margin: 0;
    width: 12px;
}

.carousel-indicators li {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    width: 10px;
}

.start {
    text-align: justify;
}

#angebot {
    background-color: #004f75;
    text-align: center;
    padding: 20px 0 40px 0;
}

#angebot p, #angebot h1 {
    color: #ffffff;
}

#angebot h2 {
    color: #ffffff;
}

.angebot1, .angebot2, .angebot3, .angebot4 {
    padding-top: 120px;
}

.angebot1 {
    background-image: url("../images/fitness.png");
    background-repeat: no-repeat;
    background-position: center -10px;
}

.angebot2 {
    background-image: url("../images/cardio.png");
    background-repeat: no-repeat;
    background-position: center -10px;
}

.angebot3 {
    background-image: url("../images/reha.png");
    background-repeat: no-repeat;
    background-position: center -10px;
}

.angebot4 {
    background-image: url("../images/squash.png");
    background-repeat: no-repeat;
    background-position: center -10px;
}

#studio {
    text-align: center;
    padding: 10px 0 30px 0;
}

#studio_fitness {
    height: 260px;
    margin-bottom: 10px;
    overflow: hidden;
    width: 970px;
}

#studio_fitness .frame-k {
    border-left: 10px solid #fff;
    box-sizing: border-box;
    float: left;
    height: 100%;
    overflow: hidden;
    transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
  	-moz-transform: skewX(-20deg);
  	-ms-transform: skewX(-20deg);
    max-width: 360px;
}


.frame-k img {
    margin-left: -33px;
    transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
  	-moz-transform: skewX(20deg);
  	-ms-transform: skewX(20deg);
    max-width: 145%;
}

#studio_fitness > div:first-child {margin-left: -63px;}
#studio_fitness > div:last-child {margin-right: -63px;}


#studio_squash {
    height: 260px;
    margin-bottom: 20px;
    overflow: hidden;
    width: 970px;
}

#studio_squash .frame-k1 {
    border-right: 10px solid #fff;
    box-sizing: border-box;
    float: right;
    height: 100%;
    overflow: hidden;
    transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
  	-moz-transform: skewX(20deg);
  	-ms-transform: skewX(20deg);
    max-width: 365px;
}


.frame-k1 img {
    margin-left: -85px;
    transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
  	-moz-transform: skewX(-20deg);
  	-ms-transform: skewX(-20deg);
    max-width: 145%;
}

#studio_squash > div:first-child {margin-right: -63px;}
#studio_squash > div:last-child {margin-left: -63px;}

.fitness_pic {
	background-image: url(../images/fitness9.jpg);
}

.fitness_ueberuns {
	background-image: url(../images/fitness.jpg);
}
#fitness_inhalt {
    padding: 20px 0 30px 0;
}


#fitness_functional {
    height: 260px;
    margin: 20px 0;
    overflow: hidden;
    width: 970px;
}

#fitness_functional .frame-k2 {
    border-right: 10px solid #fff;
    box-sizing: border-box;
    float: right;
    padding: 0;
    height: 100%;
    max-width: 540px;
    overflow: hidden;
    transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
  	-moz-transform: skewX(20deg);
  	-ms-transform: skewX(20deg);
}


.frame-k2 img {
    margin-left: -85px;
    transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
  	-moz-transform: skewX(-20deg);
  	-ms-transform: skewX(-20deg);
    max-width: 145%;
}

#fitness_functional > div:first-child {margin-right: -63px;}
#fitness_functional > div:last-child {margin-left: -63px;}

.functional {
text-align: right;
    float: right;
padding: 15px;
    max-width: 400px;
}

.training {
padding: 15px;
    max-width: 400px;
}

.fit1 {
    display: none;
}

.fit1 img, .massage1 img, .sauna1 img  {
    max-width: 100%;
}

.kurse_pic {
	background-image: url(../images/3.jpg);
}

.kurse_frauenkurse {
	background-image: url(../images/frauenkurse.jpg);
}

.kurse_ems {
	background-image: url(../images/ems.jpg);
}

.kurse_kinder {
	background-image: url(../images/kinderkurse.jpg);
}

.kurse_shogun {
	background-image: url(../images/shogun.jpg);
}

.kurse_kampfsport {
	background-image: url(../images/kampfsport.jpg);
}

.kurse_lifekinetik {
	background-image: url(../images/lifekinetik.jpg);
}

#kurse_inhalt {
    text-align: center;
    padding: 30px 0 30px 0;
}

.kurse img {
   max-width: 100%;
}

.krav_maga_pic {
	background-image: url(../images/kravmega.jpg);
}

#krav_maga_inhalt {
    text-align: center;
    padding: 30px 0 30px 0;
}

.krav_maga img {
    max-width: 100%;
}

.krav_maga {
    margin: 10px 0;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video {
    position: relative;
    padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    margin-top: 30px;
}

.kungfu_pic {
	background-image: url(../images/10.jpg);
}

#kungfu_inhalt {
    text-align: center;
    padding: 30px 0 30px 0;
}

.kungfu img {
    max-width: 100%;
}

.reha_pic {
	background-image: url(../images/4.jpg);
}

#reha_inhalt {
    padding: 20px 0 30px 0;
}


#reha_massage {
    height: 260px;
    margin: 20px 0;
    overflow: hidden;
    width: 970px;
}

#reha_massage .frame-k5 {
    border-right: 10px solid #fff;
    box-sizing: border-box;
    float: right;
    height: 100%;
    max-width: 540px;
    overflow: hidden;
    transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
  	-moz-transform: skewX(20deg);
  	-ms-transform: skewX(20deg);
}


.frame-k5 img {
    left: 0;
    margin-left: -80px;
    max-width: 145%;
    position: relative;
    top: 0;
    transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
  	-moz-transform: skewX(-20deg);
  	-ms-transform: skewX(-20deg);
}

#reha_massage > div:first-child {margin-right: -63px;}
#reha_massage > div:last-child {margin-left: -63px;}

.reha_bild {
    margin-top: -100px;
}

.massage1 {
    display: none;
}

.squash_pic {
	background-image: url(../images/squash3.jpg);
}

#squash_inhalt {
    text-align: center;
    padding: 30px 0 30px 0;
}

.squash img {
    max-width: 100%;
}




.squashbuchen_pic {
	background-image: url(../images/squash4.jpg);
}

#squashbuchen_inhalt {
    text-align: center;
    padding: 30px 0 30px 0;
}

.squashbuchen img {
    max-width: 100%;
}




.cardio img {
    max-width: 100%;
}

.wellness_pic {
	background-image: url(../images/6.jpg);
}

#wellness_inhalt {
    padding: 20px 0 30px 0;
}


#spa {
    height: 260px;
    margin: 20px 0;
    overflow: hidden;
    width: 970px;
}

#spa .frame-k3 {
    border-right: 10px solid #fff;
    box-sizing: border-box;
    float: right;
    height: 100%;
    max-width: 540px;
    overflow: hidden;
    transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
  	-moz-transform: skewX(20deg);
  	-ms-transform: skewX(20deg);
}

.frame-k3 img {
    left: 0;
    margin-left: -70px;
    max-width: 145%;
    position: relative;
    top: -130px;
    transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
  	-moz-transform: skewX(-20deg);
  	-ms-transform: skewX(-20deg);
}


#spa > div:first-child {margin-right: -63px;}
#spa > div:last-child {margin-left: -63px;}

.sauna1 {
    display: none;
}

.bistro_pic {
	background-image: url(../images/7.jpg);
}

#bistro_inhalt {
    text-align: center;
    padding: 30px 0 30px 0;
}

#bistro_speisen {
    height: 260px;
    margin: 20px 0;
    overflow: hidden;
    width: 970px;
}

#bistro_speisen .frame-k4 {
    border-right: 10px solid #fff;
    box-sizing: border-box;
    float: right;
    height: 100%;
    max-width: 540px;
    overflow: hidden;
    transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
  	-moz-transform: skewX(20deg);
  	-ms-transform: skewX(20deg);
}

.frame-k4 img {
    left: 0;
    margin-left: -60px;
    max-width: 145%;
    position: relative;
    top: -100px;
    transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
  	-moz-transform: skewX(-20deg);
  	-ms-transform: skewX(-20deg);
}


#bistro_speisen > div:first-child {margin-right: -63px;}
#bistro_speisen > div:last-child {margin-left: -63px;}


.kontakt_pic {
	background-image: url(../images/8.jpg);
}

#kontakt_inhalt {
    text-align: center;
    padding: 30px 0 0;
}

.kontaktdaten {
    text-align: left;
}

#footer {
    background-color: #004f75;
    min-height: 150px;
}

.copyright p {
    float: left;
    margin-top: 40px;
    color: #ffffff;
}

.imp {
	    margin-top: 40px;
}

.imp a {

    color: #ffffff;
}

.KPF {
    margin-top: 40px;
}

.KPF a {
    color: #ffffff;
    font-size: 15px;
    text-transform: uppercase;
}



.impressum {
    padding-top: 80px;
}


@media (max-width: 481px) {

    .logo img {
    max-width: 20% !important;
}
    
    .nav2 > li {
    display: block;
}
    
    
    .circle {
        width: 80% !important;
        height: 33%!important;
    }
    
    .circle h1 {
        padding-top: 60px!important;
    }
    
    #footer {
        height: auto;
    }

    .massage {
        display: none;
    }
    
    .massage1 {
        display: block;
    }
    
    .sauna {
        display: none;
    }
    
    .sauna1 {
        display: block;
    }
    
    .fit {
        display: none;
    }
    
    .fit1 {
        display: block;
    }
    
    

}




@media (max-width: 601px){
    
    
    .circle {
        width: 53%;
    }
    
    .menue {
    padding-top: 50px !important;
}
    
    .nav li > a {
        float: none;
    }
    
}
    


@media (max-width: 801px){
    
    #ueberuns {
    padding-top: 150px;
}
    
    .angebot3 {
        float: right;
    }
    
    .logo {
        height: 100px;
    }
    
    .logo img {
    max-width: 14%;
}
    
    .menue {
    padding: 10px 0 0;
}
    
    .nav li > a {
        padding: 8px;
    }
    
    .circle {
        width: 43%;
    }
    
    #studio_fitness, #studio_squash, #fitness_functional, #reha_massage, #spa, #bistro_speisen {
        width: 100%;
        height: auto;
    }
    
    #studio_fitness .frame-k {
        transform: skewX(0);
        -webkit-transform: skewX(0);
  	     -moz-transform: skewX(0);
  	     -ms-transform: skewX(0);
        max-width: 33.3%;
        padding: 5px;
        border: none;
    }
    
        .frame-k img {
         transform: skewX(0);
        -webkit-transform: skewX(0);
  	     -moz-transform: skewX(0);
  	     -ms-transform: skewX(0);
        margin: 0;
        max-width: 100%;
    }
    
#studio_fitness > div:first-child {margin: 0;}
#studio_fitness > div:last-child {margin: 0;}
    
    
#studio_squash .frame-k1 {
        transform: skewX(0);
        -webkit-transform: skewX(0);
  	     -moz-transform: skewX(0);
  	     -ms-transform: skewX(0);
        max-width: 33.3%;
        padding: 5px;
        border: none;
    }
    
        .frame-k1 img {
          transform: skewX(0);
        -webkit-transform: skewX(0);
  	     -moz-transform: skewX(0);
  	     -ms-transform: skewX(0);
        margin: 0;
        max-width: 100%;
    }
    
    
#studio_squash > div:first-child {margin: 0;}
#studio_squash > div:last-child {margin: 0;}
    


#fitness_functional .frame-k2 {
    transform: skewX(0);
        -webkit-transform: skewX(0);
  	     -moz-transform: skewX(0);
  	     -ms-transform: skewX(0);
        max-width: 50%;
        padding: 5px;
        border: none;
}


.frame-k2 img {
     transform: skewX(0);
        -webkit-transform: skewX(0);
  	     -moz-transform: skewX(0);
  	     -ms-transform: skewX(0);
        margin: 0;
        max-width: 100%;
}

#fitness_functional > div:first-child {margin: 0;}
#fitness_functional > div:last-child {margin: 0;}

    
#reha_massage .frame-k5 {
    transform: skewX(0);
        -webkit-transform: skewX(0);
  	     -moz-transform: skewX(0);
  	     -ms-transform: skewX(0);
        max-width: 50%;
        padding: 5px;
        border: none;
}

.frame-k5 img {
     transform: skewX(0);
        -webkit-transform: skewX(0);
  	     -moz-transform: skewX(0);
  	     -ms-transform: skewX(0);
        margin: 0;
        max-width: 100%;
}
    
#reha_massage > div:first-child {margin: 0;}
#reha_massage > div:last-child {margin: 0;}

.cardio img {
  max-width: 100%;
    }
    
#spa .frame-k3 {
    transform: skewX(0);
        -webkit-transform: skewX(0);
  	     -moz-transform: skewX(0);
  	     -ms-transform: skewX(0);
        max-width: 50%;
        padding: 5px;
        border: none;
}
    
.frame-k3 img {
    transform: skewX(0);
        -webkit-transform: skewX(0);
  	     -moz-transform: skewX(0);
  	     -ms-transform: skewX(0);
        margin: 0;
    top: 0;
        max-width: 100%;
}
    
#spa > div:first-child {margin: 0;}
#spa > div:last-child {margin: 0;}
    
#bistro_speisen .frame-k4 {
    transform: skewX(0);
        -webkit-transform: skewX(0);
  	     -moz-transform: skewX(0);
  	     -ms-transform: skewX(0);
        max-width: 50%;
        padding: 5px;
        border: none;
}

.frame-k4 img {
    transform: skewX(0);
        -webkit-transform: skewX(0);
  	     -moz-transform: skewX(0);
  	     -ms-transform: skewX(0);
    top: 0;
        margin: 0;
        max-width: 100%;
}


#bistro_speisen > div:first-child {margin: 0;}
#bistro_speisen > div:last-child {margin: 0;}
    
    .pic {
    background-attachment: local;
}