/*
xs:    0-767px
sm:  768-991px
md:  992-1199px
lg: 1200
*/

@charset "UTF-8";

@font-face {
	font-family: 'Museo300';
	src: url('../fonts/museo300-regular-webfont.eot');
	src: local('☺'), url('../fonts/museo300-regular-webfont.woff') format('woff'), url('../fonts/museo300-regular-webfont.ttf') format('truetype'), url('../fonts/museo300-regular-webfont.svg#webfontjHH6wlPJ') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Museo100';
	src: url('../fonts/museo100-regular-webfont.eot');
	src: local('☺'), url('../fonts/museo100-regular-webfont.woff') format('woff'), url('../fonts/museo100-regular-webfont.ttf') format('truetype'), url('../fonts/museo100-regular-webfont.svg#webfontjHH6wlPJ') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'MarkerFeltNormal';
    src: url('../fonts/markerfeltnormal-webfont.eot');
    src: url('../fonts/markerfeltnormal-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/markerfeltnormal-webfont.woff') format('woff'),
         url('../fonts/markerfeltnormal-webfont.ttf') format('truetype'),
         url('../fonts/markerfeltnormal-webfont.svg#MarkerFeltNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

html {
  width: 100%;
  height: 100%;
}

html.notouch.noscroll { overflow: hidden;  }
html.notouch.noscroll body { overflow-y: auto; }

body {
  width: 100%;
  height: 100%; overflow-x: hidden; font-size: 18px; font-family: 'Trebuchet MS'; color: #3E3E3E; min-width: 320px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga", "kern";
}


a:hover,
a:active,
a:focus,
a:link,
a:visited {
  outline: 0;
  outline: 0 !important;
  outline-style:none;
  color: #A0004F;
}

a {
  text-decoration: none;
}

a.extern:hover {
  text-decoration: none;
  border-bottom: 1px solid #A0004F;
}
    
.navbar {  
  padding: 70px 0px 315px 0px;  
}

.navbar.backgroundanimated {  
  -webkit-transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}


img.Hidden { display: none; }
#facebookframe { border:none; overflow:hidden; width:396px; height:350px; margin-top: 20px; }
#facebookframe iframe { width: 100%; height: 350px; }

.navbar[data-slides="bg0"] { background: url(../pics/header_1_1_neu.jpg) no-repeat center 0px, url(../pics/body_2.png) no-repeat center 0px; }
.navbar[data-slides="bg1"] { background: url(../pics/header_1_2_neu.jpg) no-repeat center 0px, url(../pics/body_2.png) no-repeat center 0px; }
.navbar[data-slides="bg2"] { background: url(../pics/header_1_3_neu.jpg) no-repeat center 0px, url(../pics/body_2.png) no-repeat center 0px; }

.navbar-collapse { background: url(../pics/main-nav.png); margin-left: 280px; /*-webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; transition: all .6s ease-in-out; */ }

.navbar-header { background: url(../pics/body_2.png) no-repeat 0px 0px; position: relative; }

.navbar-inverse .navbar-toggle { border-color: #fff; background: #A0004F; }

.navbar-brand { position: absolute; top: -70px; border: 0px !important; }
.navbar-brand img { width: 270px; height: auto; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; transition: all .6s ease-in-out; }
.navbar-inverse { border-color: transparent; }
.navbar-inverse .navbar-nav > li > a { color: #fff; }


.top-nav-collapse {
  padding: 20px 0px;
  background-position: center -50px
}


.navbar .navbar-nav > li > a:active,
.navbar .navbar-nav > li > a:focus,
.navbar .navbar-nav > li > a:link,
.navbar .navbar-nav > li > a:visited { background: none; }

.navbar .navbar-nav > li > a { padding: 7px 10px; margin: 10px; font-family: Museo300; font-size: 18px; font-weight: bold;  }
.navbar .navbar-nav > li.active { background: url(../pics/main-nav-li.png) no-repeat 50% 100%; }
.navbar .navbar-nav > li.active > a,
.navbar .navbar-nav > li > a:hover { background: url(../pics/main-nav-bg.png); /*background-size: 100% auto; */ }


section { padding-top: 100px; overflow-x: hidden; }   
section#impressum { padding-top: 0px; }
section#impressum #impressumWrapper { display: none; padding-bottom: 20px; }
section#impressum h2 { font-size: 20px; }

img.left { float: left; margin: 10px 10px 10px 0px;}
.clearleft { clear: left; }
h2 { font-family: Museo100;
    font-size: 40px;
    line-height: 60px;
    border-bottom: 1px solid #D5D5D5;
    color: #7b7b7b;
    margin: 0 0 20px; 
    font-weight: bold; }
h3 { font-size: 20px; font-weight: bold; }
h4 { font-size: 18px; font-weight: bold; }
div#ueberuns video { width: 100%; max-width: 730px; height: auto; margin: 0px auto; }

ul#DojoKun,
ul#ShotoNijukun {
    list-style-type: decimal;
    padding-left: 30px;
}

ul#DojoKun li,
ul#ShotoNijukun li {
    padding-bottom: 10px;
}

ul#DojoKun audio { display: block; margin-top: 10px; }

ul#DojoKun li span,
ul#ShotoNijukun li span {
  display: block;
  font-size: small;
}
    
img.marginTop {
  margin-top: 30px;
  /*
  -webkit-box-shadow: 0px 22px 23px -12px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 22px 23px -12px rgba(0,0,0,0.3);
  box-shadow: 0px 22px 23px -12px rgba(0,0,0,0.3);
  */
}

img.img-responsive { min-width: 900px; height: auto; }
img[src$="pixel.gif"].trenner { height: 128px;  } 
img.trenner { float: right; }
 
div.extraBorder { margin-top: 20px; padding-top: 10px; border-top: 1px solid #D5D5D5; }
img.right { float: right; margin-left: 20px; } 
p.clear { clear: both; }
img.left { float: left; margin-right: 20px; margin-bottom: 20px; } 
span.price { float: right; }
.justify { text-align: justify; }
.noListItem { list-style: none; }
section.gray { background-color: #fff; }

div#Trainer { margin-top: 50px; }
div#Trainer	ul.polaroids { list-style-type: none; padding-left: 0px; }
div#Trainer	ul.polaroids a.polaroid { background: #eee; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px;
                             text-align: center; font-family: "MarkerFeltNormal", sans-serif; text-decoration: none; color: #333; font-size: 18px;
                             -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
                             -webkit-transform: rotate(-2deg);
                             -webkit-transition: -webkit-transform .15s linear;
                             -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
                             -moz-transform: rotate(-2deg);
                             -moz-transition: -moz-transform .15s linear;
                             box-shadow: 0 3px 6px rgba(0,0,0,.25);
                             transform: rotate(-2deg);
                             transition: transform .15s linear; }

div#Trainer	ul.polaroids li { max-width: 1100px; }
div#Trainer	ul.polaroids li.right a.polaroid { float: right; margin-right: 20px; }
div#Trainer	ul.polaroids li.left div.text { padding-left: 290px; padding-top: 50px; }
div#Trainer	ul.polaroids li.right div.text { float: right; padding-right: 50px; padding-top: 50px;  }

div#Trainer	ul.polaroids img { display: block; width: 200px; margin-bottom: 12px; }
div#Trainer	ul.polaroids a.polaroid:after { content: attr(title); }
div#Trainer	ul.polaroids a.nolink { cursor: default; }

div#Trainer	ul.polaroids li { display: block; clear: left; height: 270px; }
div#Trainer	ul.polaroids li:nth-child(even) a.polaroid { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg); transform: rotate(2deg); }
div#Trainer	ul.polaroids li:nth-child(3n) a.polaroid { -webkit-transform: none; position: relative; top: -5px;  -moz-transform: none; transform: none;}
div#Trainer	ul.polaroids li:nth-child(5n) a.polaroid { -webkit-transform: rotate(5deg); position: relative; right: 5px;  -moz-transform: rotate(5deg); transform: rotate(5deg); }
div#Trainer	ul.polaroids li:nth-child(8n) a.polaroid { position: relative; right: 5px; top: 8px; }
div#Trainer	ul.polaroids li:nth-child(11n) a.polaroid { position: relative; left: -5px; top: 3px; }
div#Trainer	ul.polaroids li a.polaroid:hover { -webkit-transform: scale(1.25);
                                               -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
                                               -moz-transform: scale(1.25);
                                               -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
                                               transform: scale(1.25);
                                               box-shadow: 0 3px 6px rgba(0,0,0,.5);
                                               position: relative; z-index: 5; 
                                               border: 0px; }
img.grayscale {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: gray;
  -webkit-filter: grayscale(1);
}

img.grayscale:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: none;
  -webkit-filter: grayscale(0); 
}


div.galerie img {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: gray;
  -webkit-filter: grayscale(1);
  position: absolute;
  bottom: 5px;
  left: 0px; 
}

div.galerie img:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: none;
  -webkit-filter: grayscale(0); 
}

div.galerie a {
  position: relative;
  display: block;
  width: 100px;
  height: 80px;
  float: left;
  margin: 0 0 20px 20px;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
  background: url(../pics/schatten.png) no-repeat bottom center;
}

div.galerie a:hover { border: 0px; }

footer { text-align: center; }
footer p { font-size: 16px; margin-top: 10px; display: inline-block; line-height: 30px; padding-right: 10px; margin-right: 10px; border-right: 1px solid #D5D5D5; }
footer p:last-child { border-right: 0px;  padding-right: 60px; background: url(../pics/dkv_logo.jpg) no-repeat top right; }

div.imageWrapper { width: 100%; overflow: hidden; height: 100px; position: relative; }
div.imageWrapper img { position: absolute; right: 0px; }


div.pswp__bg { opacity: 0.8 !important; }
p.list { padding-left: 30px; position: relative; }
p.list:before { content: '»'; font-size: 30px; position: absolute; margin-left: -25px; margin-top: -10px; }

/*li.ferientraining { opacity: 0.6; }*/


/* Mitgliederbereich */

body#mitglieder header { background: url(../pics/body_grey.png); height: 90px; }
body#mitglieder header img { width: 80px; height: 80px; margin: 5px 30px 5px 10px; display: block; float: left; }
body#mitglieder header nav { background: rgba(0,0,0,.3); display: block; float: left; margin-top: 15px; width: 200px; }
body#mitglieder header nav a { display: block; float: left; background: url(../pics/main-nav-bg.png) repeat; color: #fff; padding: 7px 10px;    margin: 10px;    font-family: Museo300;    font-size: 18px;    font-weight: bold; }
body#mitglieder section { padding: 10px; }
body#mitglieder section h2 { font-size: 22px; }
body#mitglieder section h2 input[type="date"] { border: 0px; outline: 0px; width: 180px; padding: 0px; margin: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; }
body#mitglieder section ol { padding-left: 30px; }
body#mitglieder section ol li { max-width: 400px; }
body#mitglieder section ol li a { float: right; }
body#mitglieder div#updated,
body#mitglieder div#updatedError { font-size: 30px; line-height: 40px; text-align: center; padding: 10px 10px 20px 10px;}
body#mitglieder div#updated span { color: green; font-size: 100px; margin: 20px 0 40px 0; display: block; }
body#mitglieder div#updatedError span { font-size: 60px; margin: 20px 0 40px 0; display: block; color: green; }
body#mitglieder #qrcode { padding: 5px; width: 220px; margin-right: 20px; border: 1px solid #D5D5D5; width: 180px; font-size: 14px; }
body#mitglieder #qudownload { border: 1px solid #A0004F; color: #A0004F; background: #fff; cursor: pointer; }

@media screen and (max-width:400px) { 
  section { font-size: 16px; padding-top: 90px; }
  body#mitglieder section { font-size: 18px; }
  h2#titel { margin-bottom: 0px; }
}


@media screen and (max-width:420px) { 
  #facebookframe { width: 90%; }
  img.trenner { margin-right: -50%; }
}


@media screen and (max-width:599px) { 
  div#Trainer ul.polaroids li { height: auto; padding-top: 30px; }
  div#Trainer ul.polaroids li:first-of-type { padding-top: 0px; }
  div#Trainer ul.polaroids li img { display: block; float: none; clear: both;  }
  div#Trainer ul.polaroids li.left div.text { display: block; float: none; clear: left; padding-left: 20px; padding-top: 0px; }
  div#Trainer ul.polaroids li.right div.text { display: block; float: none; clear: both; padding-left: 20px; padding-top: 0px; }
  div#Trainer ul.polaroids li.right a.polaroid { float: left; }
  h2#titel { font-size: 22px; line-height: 28px; padding-bottom: 10px;  }
}


@media screen and (max-width:767px) { 
  section { padding-top: 110px; }
    	
 .navbar { padding: 20px 0px; }
 .navbar-header { background: none;  }
 .navbar-header button { border-color: #fff; }
 .navbar-collapse { width: 100%; max-width: 200px; margin-left: auto; margin-right: 0x; }
 .navbar-brand { top: -30px; margin-left: -20px; }
 .navbar-brand img { width: 80px; height: auto; -webkit-transition: none; -moz-transition: none; transition: none; }
  
 .navbar[data-slides="bg0"] { background: url(../pics/header_1_1_neu.jpg) no-repeat center 0px / cover, url(../pics/body_2.png) no-repeat center 0px / cover; }
 .navbar[data-slides="bg1"] { background: url(../pics/header_1_2_neu.jpg) no-repeat center 0px / cover, url(../pics/body_2.png) no-repeat center 0px / cover; }
 .navbar[data-slides="bg2"] { background: url(../pics/header_1_3_neu.jpg) no-repeat center 0px / cover, url(../pics/body_2.png) no-repeat center 0px / cover; }
 
 img[src$="pixel.gif"].trenner { height: 100px;  } 
  
}  


@media screen and (min-width: 768px) { 
  .top-nav-collapse .navbar-brand img { width: 80px; height: auto; margin-top: 40px; margin-left: 20px; /* -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; transition: all .6s ease-in-out; */}
  .top-nav-collapse .navbar-collapse { margin-left: 150px; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; transition: all .6s ease-in-out; }
}


@media screen and (min-width: 768px) and (max-width:900px) { 
.navbar[data-slides="bg0"] { background: url(../pics/header_1_1_neu.jpg) no-repeat center 0px / contain, url(../pics/body_2.png) no-repeat center 0px / cover; }
.navbar[data-slides="bg1"] { background: url(../pics/header_1_2_neu.jpg) no-repeat center 0px / contain, url(../pics/body_2.png) no-repeat center 0px / cover; }
.navbar[data-slides="bg2"] { background: url(../pics/header_1_3_neu.jpg) no-repeat center 0px / contain, url(../pics/body_2.png) no-repeat center 0px / cover; }

 .navbar-brand img { width: 200px; height: auto; }
 .navbar-collapse { margin-left: 220px; }
 .navbar .navbar-nav > li > a { font-size: 17px; margin: 10px 0px; padding: 7px 7px; margin-left: 8px; }
 .navbar { padding-bottom: 180px; }
 .top-nav-collapse.navbar { padding-bottom: 20px; }
 .top-nav-collapse .navbar-collapse { margin-left: 100px; }
 .top-nav-collapse .navbar-brand img { margin-left: 0px; }
 
 section { padding-top: 120px; }
 section:first-of-type { padding-top: 320px; }
 
 div#Trainer ul.polaroids li { height: 400px; }
 h2#titel { font-size: 38px; }
}


@media screen and (min-width: 901px) and (max-width:1280px) { 
 .navbar-brand img { width: 220px; height: auto; }
 .navbar-collapse { margin-left: 240px; }
 .navbar .navbar-nav > li > a { font-size: 18px; } 
}

@media screen and (min-width: 901px) { 
  section:first-of-type { padding-top: 470px; }
}

@media screen and (min-width: 992px) { 
 div.extraBorder.hideBorderOnDesktop { border: 0px; }
}

 
@media screen and (min-width: 1024px) { 
  img[src$="pixel.gif"].trenner { height: 144px;  } 
}


@media screen and (min-width: 1024px) and (max-width: 1024px) { 
  h2#titel { font-size: 30px; }
}


@media screen and (min-width: 1280px) and (max-width: 1280px) { 
  h2#titel { font-size: 38px; }
}

@media screen and (min-width: 1280px) { 
  img[src$="pixel.gif"].trenner { height: 181px;  } 
}

@media screen and (min-width: 1440px) { 
  img[src$="pixel.gif"].trenner { height: 204px;  } 
}

@media screen and (min-width: 1680px) { 
  img[src$="pixel.gif"].trenner { height: 238px;  } 
}

@media screen and (min-width: 1920px) { 
  img[src$="pixel.gif"].trenner { height: 275px;  } 
}