@font-face {
    font-family: 'robotolight';
    src: url('font/Roboto-Light-webfont.eot');
    src: url('font/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Roboto-Light-webfont.woff') format('woff'),
         url('font/Roboto-Light-webfont.ttf') format('truetype'),
         url('font/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotoregular';
    src: url('font/Roboto-Regular-webfont.eot');
    src: url('font/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Roboto-Regular-webfont.woff') format('woff'),
         url('font/Roboto-Regular-webfont.ttf') format('truetype'),
         url('font/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotothin';
    src: url('font/Roboto-Thin-webfont.eot');
    src: url('font/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Roboto-Thin-webfont.woff') format('woff'),
         url('font/Roboto-Thin-webfont.ttf') format('truetype'),
         url('font/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{
    background: url("img/bck.jpg") no-repeat top center;
    background-color: #123054;
    font-family: 'robotolight', Helvetica, "Helvetica Neue", Arial;
    font-size: 13px;
    color: #FFFFFF;
    width: 100%;
    margin: auto;
}
.body_wrapper{
    margin: auto;
    width: 100%;
}
h1, h2, h3, strong{
    font-weight: normal;
}
/*********************** HEADER ****************************/
header{
    background: #1c1c1c;
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 1;
    text-align: left;
}
/********************* NAVIGATION *************************/
.logo_w{
    max-width: 980px;
    margin: auto;
    padding: 0 10px 0 20px;
}
.logo_img{
    margin-top: 12px;
    float: left;
}
nav{
    line-height: 49px;
    margin: 0px;
    float: right;
    text-align: center;
}
nav ul, nav li{
    display: inline-block;
}
nav ul{
    margin: 0;
    padding-left: 10px;
}
nav ul a{
    font-family: 'robotolight', Helvetica, "Helvetica Neue", Arial;
    color: white;
    text-decoration: none;
}
.language li {
    font-size: 11px;
}
nav ul li{
    height: 49px;
    width: 65px;
}
nav ul li:hover{
    background: rgba(255, 255, 255, 0.1);
}
#current{
    font-family: 'robotoregular', Helvetica, 'Helvetica Neue',Arial;
    margin: 0;
    border-bottom: 2px solid white;
}
#current:hover{
    background: none;
}
/********************* CONTENT AREA ****************************/
.presentation_wrapper{
    background: #FFFFFF;    
    width: 100%;
    margin: auto;
    margin-top: 49px;
    padding-top: 10px;
}
.presentation{
    margin: 0 auto;
    width: 900px;
    padding: 0 30px 0 30px;
}
.presentation section{
    display: inline-block;
    vertical-align: top;
}
.separation{
    background: rgb(215, 215, 215);
    width: 100%;
    height: 1px;
    margin: 0;
}
/********************* TIPS ****************************/
.content_wrapper{
    margin: auto;
    max-width: 980px;
    padding: 10px 20px 0 30px;
}
.content_bckg{
    width: 100%;
    max-width: 750px;
    padding-bottom: 10px;
}
.content_bckg p{
    font-size: 1.7em;
    color: #eb9525;
    margin-top: 0;
}
.content_bckg ul{
    margin-left: 0px;
    padding-left: 15px;
}
.content_bckg li{
    list-style-type: none;
    margin-left: 0px;
    font-size: 1.2em;
    color: #336699;
}
.content_bckg a{
    text-decoration: none;
    color: #66ccff;
}
.content_bckg img{
    height: 80px;
    margin: 0 30px 0 30px;
}
.content_bckg h2{
    color: #eb9525;
    font-size: 1.2em;
    margin: 0;
    padding: 0;
}
.content_bckg .intro{
    margin-left: 0px;
    font-size: 1.2em;
    color: #336699;
}
.wiki_legal{
    font-size: 0.9em;
    font-family:'robotolight', Helvetica, "Helvetica Neue", Arial !important;   
    font-style: italic;
    font-weight: lighter;
}
.content_bckg span{
    font-family:'robotoregular', Helvetica, "Helvetica Neue", Arial;
}
.tags_wrapper{
    margin: 30px 0 50px 0;
}
.picto_wrapper{
    display: inline-block;
    text-align: center;
    margin: 0;
    vertical-align: top;
}
.picto_wrapper p{
    color: orange;
    font-size: 0.8em;
    margin: 0;
    margin-bottom: 30px;
}
.data_title{
    font-size: 25px;
    font-family: 'robotothin', Helvetica, "Helvetica Neue", Arial;
    color: #66ccff;
    margin: auto;
    padding: 40px 20px 0 30px;
    max-width: 980px;
}
.data_title h1{
    margin: 0;
    padding: 0;
}
/********************* CONTACT *************************/
.bckg_contact_us{
    margin: auto;
    width: 100%;
    padding-bottom: 30px;
    background: #15283A;
 }
.contact_title{
    font-size: 2.5em;
    color: #66ccff;
    margin: auto;
    padding: 10px 20px 0 30px;
    max-width: 980px;
}
.contact_title h1{
    margin: 0;
    padding: 0;
}
.contact_title p{
    width: 70%;
    margin-top: 10px;
    font-family: 'robotolight', Helvetica, 'Helvetica Neue', Arial;
    font-size: 0.6em;
    color: #336699;
}

/********************* FOOTER *************************/
footer{
    width: 100%;
    margin: auto;
    height: 50px;
    background-color: white;
    color: rgb(115, 115, 115);
    font-size: 0.9em;
}
footer div{
    padding-top: 2px;
    line-height: 25px;
    text-align: center;  
}
/********************* MEDIA QUERIES *************************/


@media all and (min-width:500px) and (max-width:698px){
    .presentation_wrapper{margin-top: 90px; padding-top: 10px;}
    header{background: #1c1c1c;}
    nav{display:block; width: 100%; text-align: center; margin: 0;}
    #coin_arrondi_g{position: absolute; left: 0; top: 99px;}
    #coin_arrondi_d{position: absolute; right: 0; top: 99px;}
    .logo_img{float:none; text-align: center;}
}

@media all and (max-width: 499px){
    .presentation_wrapper{margin-top: 90px; padding-top: 10px;}
    header{background: #1c1c1c;}
    nav{display:block; width: 100%; text-align: center; margin: 0;}
    #coin_arrondi_g{position: absolute; left: 0; top: 99px;}
    #coin_arrondi_d{position: absolute; right: 0; top: 99px;}
    .logo_img{float:none; text-align: center;}
    footer div{line-height: 15px;}
}