/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 27.09.2015, 13:14:52
    Author     : bernd
*/
@font-face {
  font-family: 'league_spartanregular';
  src: url("../fonts/webfontkit-league-spartan/leaguespartan-bold-webfont.eot");
  src: url("../fonts/webfontkit-league-spartan/leaguespartan-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/webfontkit-league-spartan/leaguespartan-bold-webfont.woff2") format("woff2"), url("../fonts/webfontkit-league-spartan/leaguespartan-bold-webfont.woff") format("woff"), url("../fonts/webfontkit-league-spartan/leaguespartan-bold-webfont.ttf") format("truetype"), url("../fonts/webfontkit-league-spartan/leaguespartan-bold-webfont.svg#league_spartanregular") format("svg");
  font-weight: normal;
  font-style: normal; }
/*-----------------------variables--------------------------*/
/*---------------------------------------------------------*/
/*-----------------------global--------------------------*/
/*---------------------------------------------------------*/
* {
  box-sizing: border-box; }

html {
  height: 100%; }

body {
  min-height: 100vH;
  font-family: Arial,Helvetica,sans-serif;
  color: #555;
  line-height: 150%; }

a {
  color: #808080;
  font-weight: bold; }

.border, .borderRed, .borderGreen {
  border: 1px solid; }

.borderRed {
  border-color: red; }

.borderGreen {
  border-color: green; }

hr {
  width: 100%;
  box-shadow: rgba(100, 100, 100, 0.5) -2px 1px 6px;
  margin: 0.5em auto 1em auto; }

img {
  width: 100%;
  margin: 0; }

object {
  width: 100%; }

figure {
  line-height: 0;
  padding: 0; }

figcaption {
  text-align: center;
  line-height: 100%;
  padding-top: 0.2em; }

ul {
  padding: 0;
  margin: 0;
  list-style: none; }

#siteWrapper {
  margin: 0 auto;
  width: 100%;
  height: 100vH; }

.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px; }

.vidWrapper {
  position: relative;
  height: 0; }
  .vidWrapper.ratio5625 {
    padding-bottom: 56.25%; }
  .vidWrapper.ratio75 {
    padding-bottom: 75%; }
  .vidWrapper.ratio7971 {
    padding-bottom: 79.7169811321%; }
  .vidWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.videoGallery {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  margin-top: 2em;
  overflow: hidden;
  width: 50%; }
  .videoGallery .w {
    width: 50%; }
  .videoGallery .w:first-of-type {
    float: left; }
  .videoGallery .w:last-of-type {
    float: right; }

.book {
  padding: 0 10%; }
  .book .author {
    font-weight: 900;
    color: #666; }
  .book .title {
    font-style: italic;
    font-size: 105%; }
  .book .descr {
    display: block; }

.email {
  font-style: italic;
  color: #222; }

.clickImage img {
  transition: all 1s linear; }

.clickImage + figcaption {
  font-size: 60%;
  font-style: italic; }

.clickImage:focus img {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 20%;
  width: 60%;
  height: auto; }

strong {
  color: #505050;
  font-weight: bolder; }

/*-----------------------Header--------------------------*/
/*---------------------------------------------------------*/
header {
  background: #aaa; }
  header hgroup {
    position: relative; }
  header h1 {
    margin: 0;
    padding: 0.5em 0 0.7em 0;
    font-family: league_spartanregular,Arial,Helvetica,sans-serif;
    font-size: 180%;
    line-height: 100%;
    text-align: center;
    color: #FBCB11;
    font-weight: 900;
    text-shadow: 1px 1px 0 #eee, 1.5px 2px 0 #e9e9e9, 2px 3px 0 #ddd, 2.5px 4px 0 #d9d9d9, 3px 5px 0 #ccc, -1px 6px 1px rgba(0, 0, 0, 0.1), -1.5px 0 5px rgba(0, 0, 0, 0.1), -2px 1px 3px rgba(0, 0, 0, 0.3), -2.5px 3px 5px rgba(0, 0, 0, 0.2), -3px 5px 10px rgba(0, 0, 0, 0.25), -3.5px 10px 10px rgba(0, 0, 0, 0.2), -4px 20px 20px rgba(0, 0, 0, 0.15); }
  header h2 {
    z-index: 400;
    border: 1px solid black;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(18%, 175%);
    transform-origin: center;
    color: black;
    text-shadow: white 0px 0px 10px;
    margin-top: 0.2em;
    font-size: 80%;
    line-height: 100%;
    text-align: center;
    padding: .1em .3em; }

/*-----------------------main--------------------------*/
/*---------------------------------------------------------*/
#main {
  position: relative;
  padding: 2.5em .5% 0; }

/*-----------------------article---------------------------*/
/*---------------------------------------------------------*/
article {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 2em; }
  article > h3 {
    text-align: center;
    color: #777; }

.articleH {
  text-align: center;
  margin-top: 0.7em;
  margin-bottom: 0;
  line-height: 110%;
  font-size: 180%;
  color: #777; }

section {
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto; }
  section h2 {
    margin-bottom: 1em;
    text-align: center;
    color: #777; }
  section h3 {
    margin: 1em 0;
    text-align: center; }
  section p {
    margin: 0.5em 0; }
  section p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    font-size: 90%;
    text-align: justify; }
  section ul {
    margin-bottom: 1em; }
  section figure {
    background: rgba(255, 255, 255, 0);
    margin: 0 auto 2em auto; }
  section object {
    display: block;
    margin: 0 auto; }
  section img {
    max-width: 500px;
    display: block;
    margin: 0 auto; }

/*-----------------------aside-----------------------------*/
/*---------------------------------------------------------*/
#mainNav {
  color: #555; }
#mainNav a {
  display: block;
  padding-left: 10%;
  color: #333; }
#mainNav li {
  background: rgba(120, 120, 120, 0.9); }
#mainNav li:nth-child(2n) {
  background: rgba(170, 170, 170, 0.9); }
#mainNav .layer1 a {
  color: #FBCB11; }
#mainNav .layer2 {
  padding-left: 10%; }
  #mainNav .layer2 a {
    color: #d9d9d9; }

nav {
  position: absolute;
  top: 2.5em;
  left: 0;
  margin-left: -100%;
  z-index: 10;
  font-size: 100%;
  min-width: 280px;
  width: 30%;
  max-width: 350px;
  transition-property: margin-left;
  transition-duration: 1s;
  transition-delay: 0; }

nav ul {
  width: 100%; }
  nav ul li {
    padding: 1%;
    font-size: 120%; }
  nav ul a {
    font-weight: normal; }

/*-----------------------gallery--------------------------*/
/*---------------------------------------------------------*/
.gallery {
  width: 100%;
  text-align: center; }

.gallery li {
  display: block;
  margin: 0 auto;
  line-height: 0;
  max-width: 400px; }

.gallery img {
  border: 0.3em solid white; }

#gallHint {
  text-align: center;
  font-size: 75%; }

/*-----------------------VideoGalleryLinks-----------------*/
/*---------------------------------------------------------*/
.VideoGalleryLinks {
  overflow: hidden;
  width: 100%; }
  .VideoGalleryLinks:last-of-type {
    margin-bottom: 4%; }
  .VideoGalleryLinks .wrap {
    width: 50%;
    margin: .3em auto; }
  .VideoGalleryLinks a {
    display: block; }

/*-----------------------menuchecker------------------------*/
/*---------------------------------------------------------*/
#labelbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2.5em;
  background: #e6e6e6; }

label[for='menuchecker'] {
  width: 50%;
  height: 2.5em;
  background: #e6e6e6;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100; }
label[for='menuchecker'] img {
  width: 32px;
  position: absolute;
  top: 0.3em;
  left: 1em; }
label[for='menuchecker'] span {
  position: absolute;
  top: 0.6em;
  left: 3.5em; }

#menuchecker {
  display: none; }

#menuchecker:checked + nav {
  margin-left: 0px; }

/*-----------------------Lightbox_Gallery---------------------*/
/*---------------------------------------------------------*/
.thumbGallery h2.articleH + h3 {
  text-align: center; }

.lightbox-galerie {
  overflow: hidden;
  background: #808080;
  box-shadow: 2px 1px 3px rgba(9, 9, 9, 0.5); }
  .lightbox-galerie a {
    display: block;
    background: #808080; }
  .lightbox-galerie li {
    display: block;
    width: 50%;
    float: left; }
  .lightbox-galerie li .thumbnail {
    max-width: 180px;
    display: block;
    margin: 2px auto; }

/*-----------------------home--------------------------*/
/*---------------------------------------------------------*/
.home #logo {
  max-width: 150px;
  margin: 0;
  padding: 1.5em 1em 0 0;
  float: left; }
.home #gallHint {
  margin: 0 auto;
  padding: 0; }
.home div.gallery {
  max-width: 950px;
  margin: 0 auto; }

/*-----------------------capoeira--------------------------*/
/*---------------------------------------------------------*/
.capoeira hr {
  margin-bottom: 2em; }
.capoeira figure {
  max-width: 200px;
  float: left;
  margin: .4em 1em 0 0; }
.capoeira #standalone {
  float: none;
  margin: 1em auto; }

/*-----------------------rugendas--------------------------*/
/*---------------------------------------------------------*/
.rugendas #firstPic {
  max-width: 200px;
  margin: 1em auto; }
.rugendas .leftC {
  width: 100%;
  float: left; }
.rugendas .leftC figure {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px; }
.rugendas .leftC figure img {
  margin: 0;
  width: 50%; }
.rugendas .leftC figure img:first-of-type {
  float: left; }

/*-----------------------instruments--------------------------*/
/*---------------------------------------------------------*/
.instruments img {
  max-width: 250px;
  box-shadow: rgba(150, 150, 150, 0.5) -2px 2px 4px; }
.instruments #tip {
  color: #aaa;
  text-align: center; }

/*-----------------------songtext--------------------------*/
/*---------------------------------------------------------*/
.songtext #logo {
  max-width: 250px; }
.songtext a {
  display: inline; }
.songtext #pdfLogo {
  max-width: 3em; }

/*-----------------------training--------------------------*/
/*---------------------------------------------------------*/
.training article ul {
  text-align: center; }
.training time {
  display: block;
  text-align: center; }
.training li[itemprop="addressLocality"] {
  display: inline-block; }
.training li[itemprop="postalCode"] {
  display: inline-block; }

/*-----------------------methods--------------------------*/
/*---------------------------------------------------------*/
.methods section > hr {
  margin: 1em auto; }
.methods section > hr:nth-of-type(1) {
  margin: 1em auto 3em auto; }
.methods figure {
  max-width: 33%; }

/*-----------------------workshop--------------------------*/
/*---------------------------------------------------------*/
.workshop figure {
  margin-top: 2em; }

/*-----------------------show--------------------------*/
/*---------------------------------------------------------*/
.show .videoGallery {
  width: 60%; }
.show section {
  width: 100%; }

/*-----------------------media--------------------------*/
/*---------------------------------------------------------*/
.media #basics {
  margin-top: 2em;
  text-align: center; }
.media #basics a img {
  max-width: 3em; }

/*-----------------------basics--------------------------*/
/*---------------------------------------------------------*/
/*-----------------------presse--------------------------*/
/*---------------------------------------------------------*/
/*-----------------------links--------------------------*/
/*---------------------------------------------------------*/
.links hr {
  margin-bottom: 2em; }
.links #VVerz {
  max-width: 250px; }

/*-----------------------impressum--------------------------*/
/*---------------------------------------------------------*/
.impressum #main article ul li {
  text-align: center; }
.impressum #main article ul li[itemprop="name"] {
  font-size: 150%; }
.impressum #main article ul li[itemprop="postalCode"] {
  display: inline-block; }
.impressum #main article ul li[itemprop="addressLocality"] {
  display: inline-block; }

/*-----------------------mediaQueries------------------------*/
/*---------------------------------------------------------*/
@media only screen and (min-width: 25em) {
  .rugendas #firstPic {
    float: left;
    margin: .4em 1em .6em 0; } }
@media only screen and (min-width: 31.25em) {
  .videoGallery .vidwrapwrap {
    width: 49%; } }
@media only screen and (min-width: 34.375em) {
  header h1 {
    font-size: 220%;
    letter-spacing: 3px; }
  header h2 {
    font-size: 120%; }

  .basics div.gallery li, .media div.gallery li, .home div.gallery li {
    display: inline-block;
    max-width: 30%; }

  .VideoGalleryLinks {
    width: 100%;
    display: block;
    margin-right: auto;
    margin-left: auto; }
    .VideoGalleryLinks .wrap {
      width: 30%;
      float: left; }
    .VideoGalleryLinks .wrap:nth-of-type(2) {
      margin-left: 5%;
      margin-right: 5%; } }
@media only screen and (min-width: 40.625em) {
  .lightbox-galerie li {
    width: 33%; }
  .lightbox-galerie li .thumbnail {
    max-width: 150px; }

  .rugendas #firstFigure {
    width: 100%; }
    .rugendas #firstFigure img {
      width: 50%;
      display: inline-block; }
  .rugendas .leftC {
    margin: .4em 1em 0 0;
    width: 50%; }
    .rugendas .leftC figure {
      margin-left: 0;
      margin-right: 0; } }
@media only screen and (min-width: 50em) {
  .lightbox-galerie li {
    width: 25%; }
  .lightbox-galerie li .thumbnail {
    max-width: 150px; }

  .rugendas #firstFigure {
    width: 85%; } }
@media only screen and (min-width: 61.25em) {
  header h1 {
    font-size: 230%; }

  .VideoGalleryLinks .wrap:nth-of-type(2) {
    margin-left: 0;
    margin-right: 5%; }
  .VideoGalleryLinks .wrap {
    width: 25%;
    margin-left: 0;
    margin-right: 5%; }
  .VideoGalleryLinks .wrap:first-of-type {
    margin-left: 7.5%; } }
@media only screen and (min-width: 68.75em) {
  .rugendas #firstFigure {
    width: 80%; } }
@media only screen and (min-width: 80.0625em) {
  home article {
    float: none;
    width: 100%; }
    home article section {
      max-width: 60%;
      margin: 0 auto; }
    home article p {
      font-size: 105%; }

  div.gallery {
    display: block;
    vertical-align: initial;
    margin: 0 auto;
    padding: 0;
    float: none;
    width: 100%; }

  .rugendas #firstFigure {
    width: 75%; } }
@media only screen and (min-width: 87.5em) {
  .rugendas #firstFigure {
    width: 70%; } }

/*# sourceMappingURL=style.css.map */