/*
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.
*/
/* 
    MAIN MENU STYLESHEET
    © 2015 T.BAÄR All rights reserved
    <link href="/nolang/css/main.css" rel="stylesheet" type="text/css" media="all">

*/
/*The right side section *//* Generated by Font Squirrel (https://www.fontsquirrel.com) on June 6, 2016 */

@font-face {
    font-family: 'kazmann_sansregular';
    src: url('/nolang/v3/kazmann_sans-webfont.woff2') format('woff2'),
         url('/nolang/v3/kazmann_sans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@media (min-width: 801px){
#r-content {        
    margin: 0px;
    padding: 0px;
    background-color: transparent;
    left: 10%;
    display:block;
    position: absolute;
    bottom: 0px;
    height: 100%;
    top: 0px;
    overflow: hidden;
    width: 90%;

}

/*Facebook button (French)*/
#social {           
    margin-bottom: 15px;
    position: absolute;
    width: 267px;
    height: 100px;
    bottom: 15px;
}
.loader {
    width: 100%;
    height: 100%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 200000;
    background-color: black;
    background-position: center center;
    background-size: 15% auto;
    background-repeat: no-repeat;
    position: absolute;
}

#backworld {
                width: 100%;
                height: 100%;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                position: absolute;
}
            
            #helloworld {
                width: 100%;
                height: 100%;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                background: url("/nolang/v3/wallshow.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
            }
            #aboutworld {
                width: 100%;
                height: 100%;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                background: url("/nolang/v3/wallabout.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
            }
            #r-margin {
                width: 10px;
                height: 100%;
                position: absolute;
                z-index: 10000;
                left: 0px;
                top: 0px;
                bottom: 0px;
                background: url("/nolang/v3/border.png") repeat-y;
            }
            #r-thumb {
                width: calc(70% - 15px);
                height: 100%;
                left: 15px;
                top: 0px;
                bottom: 0px;
                position: absolute;
                display: table-cell;
                vertical-align: middle;
                max-height: 100%;
            }
            #r-info {
                width: 30%;
                height: 100%;
                top: 0px;
                bottom: 0px;
                right: 0px;
                position: absolute;
                background-color: rgba(0, 0, 0, 0.5);

            }
            #t-thumb {
                -ms-transform: rotate(-7deg); /* IE 9 */
                -webkit-transform: rotate(-7deg);
                transform: rotate(-7deg);
                width: 80%;
                height: auto;
                margin: 0 auto;
                margin-top: 5%;
                bottom: 5%;
                display: block;
                max-height: 80%;
                max-width: 80%;
                  table-layout: fixed; 
                  z-index: 500;
            }
            
            .r-thumbnail {
                width: 40%;
                height: auto;
                -webkit-border-radius: 15%;
-moz-border-radius: 15%;
border-radius: 15%;
box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7); 
            }
            .r-description {
                top: 5%;
                bottom: 5%;
                left: 5%;
                right: 5%;
                font-family: 'kazmann_sansregular';
                color: white;
                font-size: 28px;
                text-shadow: #000000 2px 2px, #000000 -2px 2px, #000000 -2px -2px, #000000 2px -2px;
                text-align: center;
            }
            .r-copyright {
                bottom: 0px;
                position: absolute;
                width: 100%;
                left: 0px;
                right: 0px;
            }
            #r-descr_default {
                visibility: visible;
                position: absolute;
            }
            #r-descr_1, #r-descr_2, #r-descr_3, #r-descr_4, #r-descr_5, #r-descr_6 {
                visibility: hidden;
                position: absolute;

            }
            .ret {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  background: #000000;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.ret:hover {
  background: #ffde00;
  text-decoration: none;
  color: black;
  text-shadow: none;
}
#r-info a:link , #r-info a:visited{
  text-decoration: none;
  color: white;
  text-shadow: none;
}
#r-info a:active, #r-info a:hover{
    text-decoration: none;
  color: black;
  text-shadow: none;
}

}

/*
MOBILE EDITION
*/
@media (max-width: 800px) {
    body {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
        overflow: hidden;
        margin-top: 0;
        margin-left: 0;
        margin: 0;
    }
    .loader {
    width: 100%;
    height: 100%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 200000;
    background-color: black;
    background-position: center center;
    background-size: 45% auto;
    background-repeat: no-repeat;
    position: absolute;
}
    #r-content {        
    margin: 0px;
    padding: 0px;
    background-color: transparent;
    left: 0;
    display:block;
    position: fixed;
    bottom: 0px;
    height: calc(100% - 60px);
    top: 60px;
    overflow: hidden;
    width: 100%;
    }
    #backworld {
                width: 100%;
                height: 100%;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                position: fixed;
}
            
            #helloworld {
                width: 100%;
                height: 100%;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                background: url("/nolang/v3/wallshow.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: fixed;
            }
            #aboutworld {
                width: 100%;
                height: 100%;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                background: url("/nolang/v3/wallabout.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: fixed;
            }
            #r-margin {
                display: none;
            }
            #r-thumb {
                width: 100%;
                height: 100%;
                left: 10%;
                top: 0px;
                bottom: 0px;
                position: absolute;
                display: table-cell;
                vertical-align: middle;
                max-height: 100%;
            }
            #t-thumb {
                -ms-transform: rotate(-7deg); /* IE 9 */
                -webkit-transform: rotate(-7deg);
                transform: rotate(-7deg);
                width: 100%;
                height: auto;
                margin: 0 auto;
                margin-top: 5%;
                bottom: 5%;
                display: block;
                max-height: 100%;
                max-width: 100%;
                  table-layout: fixed; 
                  z-index: 500;
            }
            .r-thumbnail {
                width: 40%;
                height: auto;
                -webkit-border-radius: 15%;
-moz-border-radius: 15%;
border-radius: 15%;
box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7); 
            }

#r-descr_1, #r-descr_2, #r-descr_3, #r-descr_4, #r-descr_5, #r-descr_6 {display: none}
#r-info {
    width: 100%;
                height: 40%;
                left: 0px;
                bottom: 0px;
                right: 0px;
                position: fixed;
                background-color: rgba(0, 0, 0, 0.5);
                font-family: arial, sans-serif;
                color: white;
                font-size: 15px;
                text-shadow: #000000 2px 2px, #000000 -2px 2px, #000000 -2px -2px, #000000 2px -2px;
                text-align: center;
                overflow-y: scroll;
                z-index: 100;
}
#r-descr_default {
    position: absolute;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    overflow-y: scroll;
}
.ret {
    display: none;
}
.retx {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  background: #1691d0;
  padding: 10px 20px 10px 20px;
  font-family: arial, sans-serif;
  text-decoration: none;
  color: white;
  top: 10px;
  right: 10px;
  position: fixed;
  z-index: 400;
}
.retx:visited , .retx:link {
    text-decoration: none;
    color: white;
}

}