*{

        padding:0em;
        margin:0em;
    font-family: arial, Helvetica, sans-serif;
       -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}



.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  background-color: #ffffff;
  padding: 0 0 0 0;
}

.grid-container_fr {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  background-color: #000000;
  padding: 0 0 0 0;
}

.segment {
    background:#fff;
        margin:0;
        padding: 2% 2% 2% 2%;
    margin:5%;


}
.segment_cover {
    background:#000;
        margin:0;
        padding: 2% 2% 2% 2%;
    margin:5%;


}

.segment_fr {
    background:#000;
        margin:0;
        padding: 2% 2% 2% 2%;
    margin:5%;


}

body{
        background:#eee;
    font-size:100%;
    margin:0em;
    padding:0em;
}

body_fr{
        background:#000;
    font-size:100%;
    margin:0em;
    padding:0em;
}

h1{
        font-size:2.5em;
    font-weight:100;
    margin:0em;
    padding:0 0.5em 0;

}



#escrima{
    color:#DC9829;
}
#hpt{
         color:#87bf61;
    letter-spacing: 0.06em;
}

#yoga{
         color:#00b3ff;
    letter-spacing: 0.06em;
}

h2{
        font-size:1.563em;
    font-weight:100;
    color:#2f2e2c;
    margin:0em;
    padding:0 0 0 2%;
    text-align:left;
}

h2.fr{
 padding:0 0 0 0;
}

p{
    line-height:1.25em;
    font-weight:100%;
    color:#2f2e2c;
    margin:0em;
    padding:0 0 0 2%;
    text-align:justify;
}



ul{
        margin:0px;
    padding:0px;
}


li{
        list-style:square;
    font-weight:100;
    color:#2f2e2c;
    margin:0em;
    line-height:1.25em;
    padding:0em;
        margin:0.313em 0em 0.313em 0em;
}

img{
        width:90%;
    height:auto;
    max-width:100%;
}

a {
        color: #DC9829;
    text-decoration:none;
}

a.neutral
{
         color: #444;
}

a.hover neutral{
         color:#111;
}

a:hover,
a:focus {
       color: #111;
}

a.button{
        background: #87BF61;
        font-weight: bold;
        /*box-shadow: 0 0 20px #4e4e4e inset, 0 2px 1px rgba(0,0,0,0.2);*/
        color: #ffffff;
        padding: 0.3em;
        border-radius: .3em;
        text-decoration: none;
}

a.button_e:hover,
a.button_e:focus {
        background: #111;
}

a.button_yoga:hover,
a.button_yoga:focus {
        background: #111;
}

a.button_e{
        background: #DC9829;
        font-weight: bold;
        /*box-shadow: 0 0 20px #4e4e4e inset, 0 2px 1px rgba(0,0,0,0.2);*/
        color: #ffffff;
        padding: 0.3em;
        border-radius: .3em;
        text-decoration: none;
}

a.button_yoga{
        background: #00b3ff;
        font-weight: bold;
        /*box-shadow: 0 0 20px #4e4e4e inset, 0 2px 1px rgba(0,0,0,0.2);*/
        color: #ffffff;
        padding: 0.3em;
        border-radius: .3em;
        text-decoration: none;
}

a.button:hover,
a.button:focus {
        background: #111;
}


#wrapper{

        width:90%;
        margin: 0 auto;
        position:relative;
        text-align:center;
    background-color:#eee;

}

#wrapper_fr{

    width:90%;
        margin: 0 auto;
        position:relative;
        text-align:center;
    background-color:#000;

}

#topinfo{
    padding:2% 0 2% 0;
        background-color:#fff;
    border-radius: 2em 2em 0 0;
    align:left;
}

#topinfo_fr{
    padding:2% 0 2% 0;
        background-color:#000;
    border-radius: 2em 2em 0 0;
    align:left;
}



#topinfo h1{
        text-align:left;
    padding:0 0 .5em 4%;
    font-weight:bold;
    line-height:120%;
}

#topinfo_fr h1{
        text-align:left;
    padding:0 0 .5em 4%;
    font-weight:bold;
    line-height:120%;
}

#topinfo h2{
        font-size:1.5em;
    padding: 0 0 .3em 4%;
     line-height:120%;

}

#topinfo_fr h2{
        font-size:1.5em;
    padding: 0 0 .3em 4%;
     line-height:120%;
     color:#fff;

}


#topinfo img{
        width:350px;
    display:block;
}

#topinfo_fr img{
        width:45%;
    display:block;
}


#topinfo p{
        font-size:1.3em;
    padding: .3em 10% 0 4%;
    font-style:italic;
    color:#808080;
    letter-spacing: 0.1em;
}

#topinfo_fr p{
        font-size:1.3em;
    padding: .3em 10% 0 4%;
    font-style:italic;
    color:#fff;
    letter-spacing: 0.1em;
}



.segment img{
        border-radius: 1em 1em 0 0;
    max-width:100%;
    padding: 0 0 1em 0;
    margin:0em;
    width:100%;

}

.segment_fr img{
        border-radius: 1em 1em 0 0;
    max-width:100%;
    padding: 0 0 1em 0;
    margin:0em;
    width:100%;

}

.segment h2{
        text-align: left;
    padding:0em;
    margin:0em;
font-weight: bold;




}

.segment p{

        text-align:justify;
    padding:.5em 0 .5% 0;
    margin:0em;
        line-height: 1.6;
    letter-spacing: 0.01em;

}

.segment_fr p{

        text-align:justify;
    padding:.5em 0 .5% 0;
    margin:0em;
        line-height: 1.6;
    letter-spacing: 0.01em;

}

.segment li{
        display:block;
    text-align:left;
    line-height: 1.6;
}


/* navi escrima*/
#navi{
        position:relative;
        background-color:#eee;
        padding:3em 0 .5em 0;
}

#navi img{
        position: absolute;
        bottom:1em;
        right:0;
        width:60px;
}

#navi li{

        display:inline;
        color:#333;
        padding:0 2em 0 2em;
}

#navi ul li a{
        color:#454040;
    font-size:1.125em;
    line-height:2.5em;
    padding:0.5em 0.4em 0.3em 0.2em;
}



#navi ul li a:hover{
        background:#DC9829;
    color:#fff;
}

#navi ul li a.active{

    border-bottom:0.188em solid #DC9829;
}
/* navi hpt*/
#navi_hpt{
        position:relative;
        background-color:#eee;
        padding:3em 0 .5em 0;
}

#navi_hpt img{
        position: absolute;
        bottom:1em;
        right:0;
        width:60px;
}

#navi_hpt li{

        display:inline;
        color:#333;
        padding:0 2em 0 2em;
}

#navi_hpt ul li a{
        color:#454040;
    font-size:1.125em;
    line-height:2.5em;
    padding:0.5em 0.4em 0.3em 0.2em;
}



#navi_hpt ul li a:hover{
        background:#87bf61;
    color:#fff;
}

#navi_hpt ul li a.active{

    border-bottom:0.188em solid #87bf61;
}

/* navi yoga*/
#navi_yoga{
        position:relative;
        background-color:#eee;
        padding:3em 0 .5em 0;
}

#navi_yoga img{
        position: absolute;
        bottom:1em;
        right:0;
        width:60px;
}

#navi_yoga li{

        display:inline;
        color:#333;
        padding:0 2em 0 2em;
}

#navi_yoga ul li a{
        color:#454040;
    font-size:1.125em;
    line-height:2.5em;
    padding:0.5em 0.4em 0.3em 0.2em;
}



#navi_yoga ul li a:hover{
        background:#00b3ff;
    color:#fff;
}

#navi_yoga ul li a.active{

    border-bottom:0.188em solid #00b3ff;
}
/* navi ende*/

#footer{
        clear:both;
        background:#eee;
    padding:1em 0 1em 0;
    margin:0 0 1em 0;
}

#footer_fr{
        clear:both;
        background:#000;
    padding:1em 0 1em 0;
    margin:0 0 1em 0;
}
#footer p{
        padding:0 0 0 2%;
    text-align:left;
    font-size:0.86em;
    font-style:italic;
    font-weight:bold;
    color:#777;
}


@media (max-width: 900px){
    .grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
  background-color: #ffffff;
  padding: 0 0 0 0;
  font-size:90%;
}

 .grid-container_fr {
  display: grid;
  grid-template-columns: 50% 50%;
  background-color: #000000;
  padding: 0 0 0 0;
  font-size:90%;
}

        #navi li{
                display:block;
                text-align:left;
        padding:0 0 0 2%;
        }

    #navi_hpt li{
                display:block;
                text-align:left;
        padding:0 0 0 2%;
        }

    #navi_yoga li{
                display:block;
                text-align:left;
        padding:0 0 0 2%;
        }

    #topinfo{
    font-size:85%;
    }
}


        @media (max-width: 600px){
   .grid-container {
  display: grid;
  grid-template-columns: auto;
  background-color: #ffffff;
  padding: 0 0 0 0;
  font-size:90%;
}

 .grid-container_fr {
  display: grid;
  grid-template-columns: auto;
  background-color: #000000;
  padding: 0 0 0 0;
  font-size:90%;
}

    #topinfo{
    font-size:90%;
    }

    #topinfo_fr{
    font-size:69%;
    }


 }