body {
font-family: 'Open Sans', sans-serif;
color: #333; }

#contenu {	 width: 78%;   margin-left: 20%;  margin-top:15px; line-height:1.4em; font-size:1em;overflow:auto; padding-top: 15px; }
#video {	 width: 47%;}


audio{
width: 99%;
}

a {	        color: #203d54;}
a:link {	text-decoration: none;}
a:visited {	text-decoration: none;	color: #203d54;}
a:hover {	text-decoration: none;	color:#999;}

img {width: 47%; margin-bottom: -5px;}
audio {
   width: 47%; margin-top: -10px;}

h1 {font-size: 1.5em; line-height: 1em;margin-left: 25px; font-weight: 200;top: 20px; margin-bottom:  20px;margin-top: 23px;}
h2 {font-size: 1.4em;line-height: 1em;margin-bottom: 5px;margin-top: 10px;  display: inline-block;}
h3 {font-size: 1.5em;margin-bottom: 0px;margin-top: 15px;font-weight: 400; color: #203d54;}
h4 {font-size: 1.4em;line-height: 1em;margin-bottom: 0px;margin-top: 0px;  display: inline-block;}

ul {list-style: none; font-size: 1.2em; line-height: 1.3em; display: block; margin: 0px;}
li {list-style: none; margin: 0px;}


nav 
{ position: fixed;
    margin: -15px -8px;
    width: 15%;
    height: 100%;
    color: #203d54;
    font-weight: 600;
    
}
 
nav .main_pages 
{
    display: block;
    justify-content:flex;
    align-items: center;
}
 
nav .main_pages a 
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    height: 30px;
    text-decoration: none;
    color: #666;font-weight:400;
    
}

nav .main_pages ul 
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    height: 30px;
    text-decoration: none;
    color: #203d54;
    
}
 
nav a:hover 
{
    color: #999;
}

label, #toggle
{
    display: none;
}

    
    
@media (max-width: 1290px)
    
    {
#contenu {	 width: 65%;   margin-left: 30%;  margin-right: auto; margin-top:15px; line-height:150%; font-size:1em;overflow:auto; padding-top: 15px;}
iframe, object, embed, video {
   max-width: 100%; }
 
        img {width: 75%;}
        audio {
   width: 75%;}
#video {	 width: 75%;}        
}


@media (max-width: 820px){ 
h1 {font-size: 1.2em; line-height: 1.2em;margin-left: 25px; margin-bottom:  10px;margin-top: 0px;}
    ul {list-style: none; font-size: 1em; line-height: 0.8em; display: block; margin: 0px;}
nav .main_pages ul 
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    height: 25px;
    text-decoration: none;
    color: #666;
}
            img {width: 100%;}
        audio {
   width: 100%;}

}


@media (max-width: 640px) {
h1 {font-size: 1.2em; line-height: 1.2em;margin-left: 25px; margin-bottom:  10px;margin-top: 25px;}
body, element1, element2 {
   width: auto;
   margin: 0;
   padding: 0;}

img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
   max-width: 100%; }

img {
   height: auto; width: 100%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box; }

textarea, table, td, th, code, pre, samp {
   word-wrap: break-word;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;}
    
code, pre, samp {
   white-space: pre-wrap;}

element1, element2 {
   float: none;
   width: auto;}

.hide_mobile {
   display: none !important;}


#video {	 width: 100%;}
#contenu{
	margin: 0px auto;
	text-align:left;
	padding-left:2% ;
	padding-right:0px;
	padding-top:75px;
	width: 96%;
	margin-left:0px;
z-index: 1}


    nav
    {position:fixed;
        height: 25%;
        width: 100%;
        margin: 0px 0px;
        
        
    }
            audio {
   width: 100%;}
 
    nav .main_pages 
    {
        display: none;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.9);
        width: 100%;
    }
 
    nav .main_pages a {
        width: 100%;
        height: 20px;
        
        
    }
 
    label 
    { position: fixed;
        width: 100%;
        display: flex;
        justify-content: left;
        align-items: left;
        margin: 5px ;
        font-size: 40px;
        color: black;
        cursor: pointer;
    }
 
    #toggle:checked + .main_pages {
        display: flex;
    }
}