html,
body
{
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
}

#info {
    width:100%;
    height:250px;
    background-color:#5a90db;
    background-attachment:fixed;
    position:fixed;
    border-bottom:1px solid #d8d8d8;
}


.creds {
    position:fixed;
    width:100%;
    height:50px;
    background-color:#e0e0e0;
    background-attachment:fixed;
    bottom:0px;
    z-index:99999999999;
    border-top:1px solid #d8d8d8;
}

.creds p {
    position:inherit;
    padding-top: 10px;
    right:20px;
    font-size:10px !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    font-style:normal;
}
/* TYPOGRAPHIE*/

h1
{
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin-left:100px;
    margin-top:50px;
    position:fixed;
    text-transform:uppercase;
    z-index:2;
}

.explications {
   height:130px !important;
    width:350px !important;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color:#000;
    position:fixed;
    margin-left:100px;
    margin-top:90px;
    margin-right:300px;
    z-index:2;

}
.explications2 {
   height:130px !important;
    width:350px !important;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color:#fff;
    position:fixed;
    margin-left:500px;
    margin-top:90px;
    margin-right:300px;
    z-index:2;

}

.nav {
    position:fixed;
    z-index:5;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    top:270px;
    left:120px;    
}

p {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;

    
}

/* MISE EN PAGE */


.son1 {
    margin-top: 330px;
    margin-left:150px;
    z-index:1;

}

audio {
    background-color:#000;
    margin-bottom:-8px;
    margin-left:15px;
    margin-right:30px;
}

.trad {
    margin-top: 400px;
    margin-left:195px;

    z-index:1;
    display:inline-grid;

}

.ptrad1 {
    float:left;
    width:350px;!important;
    padding-right:20px;
    margin-right:112px;
    height:230px !important;
    overflow:auto;

 

}

.ptrad2 {
    float:left;
    width:350px;!important;
    padding-right:20px;
    margin-right:120px;
    height:230px !important;
    overflow:auto;

 

}

.ptrad3 {
    float:left;
    width:350px;!important;
    padding-right:20px;
    margin-right:123px;
    height:230px !important;
    overflow:auto;

 

}

/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */
body
{
  overflow-x: hidden;
  background: url('../images/bg.jpg') repeat top left;
}



.nav a {
    text-decoration:none !important;
    color:#000;
    margin-right:5px;
}

.nav a:hover {
    text-decoration:underline!important;
    color:#000;
    margin-right:5px;
}


span
{
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight:600;
    color: #000;

}

.end {
    margin-right:90px;
}


.divaudio {
    width:400px;
    display:inline;
}






/**
  * important: keep position fixed, you can however use top:0 instead of bottom:0
  * if you want to make it stick to the top of the browser
  */
.scroll
{
  position: fixed;
  top: 0;
  left: 0;
}

/**
  * z-index ordering of the different layers, do this for your layers,
  * also assign absolute width (to prevent issues if the script gets executed before the images get loaded)
  */
.horizon
{
  z-index: 1;
  width: 9000px;
}

.middle
{
  width: 9000px;
}

.front
{
  z-index: 1000;
  width: 6000px;
}