body{
    -webkit-font-smoothing: antialiased;
    font-family: 'Rubik', sans-serif;
    background-color: black;
}
#wrapper {
    /*width: 5000px; height: 5000px;*/
    width:100%; height: 100%;
    overflow:hidden;
    position: absolute;
    left: 0px; top: 0px;
    margin: 0 0 0 0;
    background-size: 300px 300px;
    text-align: left;
}
#swap {
    font-family: 'Rubik', sans-serif;
    font-weight: normal;


    width:100%;

    height:100%;
    overflow:hidden;
    /*min-height: 20px;
    max-height: 20%;*/
    position: absolute;
    color:white;
    /*left: 200px; top: 0px;*/
    float: left;

    z-index:1000;
    position:fixed;


    /*margin : 1% 1% 0 1%;*/
    /*padding : 10px 10px 10px 10px;*/
    /*margin : 0 1% 0 1%;*/
    /*filter: alpha(opacity=50); /* For IE8 and earlier */
}

h1{

    font-size:2em;
}

h2{


}

span{
    box-sizing: border-box;

}

div.middle div.left div.right{
    /*padding:1em 1em 1em 1em;*/

}

  #header{

      font-size:1em;
      height:3em;
      background-color:black;
  }

.interaction{
    height:100%;

}
div.description{
    padding:1em 2em 1em 2em;
}
div.description p {
    max-width: 750px;
    line-height: 1.1em;
}
.infos{
    font-size:2em;

    padding-bottom:0.5em;


}

.title{

    padding-bottom:0.5em;


}

.middle{
    position: absolute;
   left: 25%;
    width:50%;

    overflow:scroll;
    height:100%;

}

.middleright{
    position: absolute;
    left: 25%;
    width:75%;
    overflow-x:hidden;
    overflow-y:auto;
    height:100%;
    /*padding-right: 25%;*/
    box-sizing: border-box;

}

.middle_a{
    position: absolute;
   left: 25%;
    width:25%;



}


.middle_b{
    position: absolute;
   left: 50%;
    width:25%;



}


.left{
    position: absolute;

    width:25%;
}

.right{
   position: absolute;
    left:75%;
    width:12%;
}


.rightx{
    position: absolute;
    left:87%;
    width:12%;
}

.progress{

    right:0px;
    width:100%;
    font-size:1em;
      height:0.2em;
    position: relative;
    transform: translateY(-100%);


}

.percent{
    position:absolute;
    font-size:1em;
      height:100%;
   width:100%;
    right:0px;
    background-color:white;

}


#moreText {
     position: relative;
    /*padding-top: */
    visibility:visible;
    display:block;
    height:80%;

    text-align: left;



    background-color:black;
    z-index:100;

}


#moreText.span {
    left:3em;

}

#loaderContainer {
    width:0%;
    bottom:0px;
    height:10px;
    position:fixed;
    background-color:white;
    z-index:100;

}

#loaderInfo {
    font-size:12px;
    color:white;
    bottom:1px;
    right:5px;
    height:12px;
    position:fixed;
    z-index:100;

}


.lien:link, .lien:visited {
    /*padding: 2em 1em 0em 0em;
    margin: 10em 0em 0em 0em;*/

    color: white;
    text-decoration: none;

}
.lien:hover {
    cursor: pointer;
    color: white;
    background : black;
}
.lien.top:link, a.top:visited{
    color: white;
}
.lien.top:hover{
    color: white;
    background : none;
    cursor: pointer;
}


a:link, a:visited {
    /*padding: 2em 1em 0em 0em;
    margin: 10em 0em 0em 0em;*/

    color: white;
    text-decoration: none;

}
a:hover {
    color: white;
    background : black;
}
a.top:link, a.top:visited{
    color: white;
}
a.top:hover{
    color: white;
    background : none;
}
span{

    color: white;
    text-decoration: none;


}
form {
    position: relative;
    float: left;
    margin : 0 auto;
    font-size : 0.8em;

    /*width  : 740px;
    height : 498px;
    margin : 0 auto;
    background: #FFF url(background.jpg);*/
}

#upload{
     margin-bottom : 10px;


}
.images_thumb{
    width: 60%;
    /*height: 40%;*/
}
#toggleUploader{
    width: 20%;

    /*height: 40%;*/
}

#container_uploader{
    position:absolute;
    top :50px;
    width : 20%;
    min-width : 200px;
    float: left;

    background-color : rgba(255,255,255, 0.9) ;
    display : none;
    margin : 1%;
    padding : 2%;
}
input[type=text] {
    padding:5px; border:2px solid #ccc;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
input[type=text]:focus {border-color:#333; }
input[type=submit]{
    /*padding:5px 15px;*/
    padding:2px 5px 2px 5px;
    background:rgba(255,255,255, 0);
    border:1.5 solid black;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
input[type=submit]:hover {
    /*padding:5px 15px;*/
   padding:2px 5px 2px 5px;
    background:black;
    border:1.5 solid black;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color:white;
}