/* général */

html, body {
  height: 100%;
  margin: 0;
  background-color: #000000;
  
    
}

/* accueil */
.menu-blanc {
  padding-top: 0rem;
}

li {
  display: block;
}

#desktop-img-titre-evenement {
display:none;
}

#mobile-img-titre-evenement {
position:absolute;
display:block;
margin-right:2em; 
margin-left:0; 
right:0; 
left:1.5em; 
padding:0em;
bottom:0;
margin-bottom:4em;
width:85%;
}
    
#desktop-img-titre-forum {
display:none;
}

#mobile-img-titre-forum {
position:absolute;
display:block;
margin-right:2em; 
margin-left:0; 
right:0; 
left:1.5em; 
padding:0em;
bottom:0;
margin-bottom:4em;
width:85%;
}

#desktop-img-titre-livre {
display:none;
}

#mobile-img-titre-livre {
position:absolute;
display:block;
margin-right:2em; 
margin-left:0; 
right:0; 
left:0; 
padding:0em;
bottom:0;
margin-bottom:4em;
}

#desktop-img-titre-film {
display:none;
}

#mobile-img-titre-film {
position:absolute;
display:block;
margin-right:10%; 
margin-left:auto; 
right:0; 
left:0; 
bottom:0;
margin-bottom:4em;
width:100%;
}

.block-evenement {
  height: 100%;
  background-image: url("./titre-evenement-mobile.jpg");
  background-color: black;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  padding: 1rem;
}

.block-film {
  height: 100%;
  background-image: linear-gradient(#009fe3, #ffed00);
  background-color: black;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  padding: 1rem;
}


.block-livre {
  height: 100%;
  background-image: linear-gradient(#ffed00, #ff0000);
  background-color: black;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  padding: 2rem;
}

.block-film {
  height: 100%;
  background-image: linear-gradient(#ff0000, #009fe3);
  background-color: black;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  padding: 2rem;
}


#page-wrap { 
  background-color: black;
  display:inline-block;
  max-width: 100%; 
}

#programme {
  background-color: black; /* navigateurs ne supportant pas les dégradés */
  background-image: linear-gradient(#ffed00, #ff0000);
  padding: 2rem;
  height: auto;
  overflow: hidden;
}

#inscriptions {
  background-color: black; 
  padding: 2rem;
  height: auto;
  overflow: hidden;
}

#infos {
  background-color: noir; /* navigateurs ne supportant pas les dégradés */
  padding: 2rem;
  height: auto;
  overflow: hidden;
}

#partenaires {
  background-color: black; 
  padding: 2rem;
  min-height:100%;
  height: auto;
  overflow: hidden;
}

#corps-film {
  background-color: yellow; /* navigateurs ne supportant pas les dégradés */
  background-image: linear-gradient(#009fe3, #ffed00);
  padding: 2rem;
  height: auto;
  overflow: hidden;
}

#corps-livre {
  background-color: yellow; /* navigateurs ne supportant pas les dégradés */
  background-image: linear-gradient(#ff0000, #009fe3);
  padding: 2rem;
  height: auto;   
  overflow: hidden;
}

#colonnes-footer
{
    float:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    padding-bottom:4%;
    width:45%;
    padding-right:1%;
}

#desktop-img-forum-droite {
   padding:0%;
   margin:0%;
   width:100%;
   padding-bottom:5%;
}

#desktop-img-forum-gauche {
   padding:0%;
   margin:0%;
   width:100%;
   padding-bottom:5%;
}

#desktop-img-forum-droite-bas {
   padding:0%;
   margin:0%;
   width:100%;
   padding-bottom:5%;
}

#desktop-img-forum-gauche-bas {
   padding:0%;
   margin:0%;
   width:100%;
   padding-bottom:5%;
}

#colonnes-footer
{
    float:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    padding-bottom:4%;
    width:100%;
    padding-right:1%;
}


#footer-forum {
  background-color: black; /* navigateurs ne supportant pas les dégradés */
  background-image: linear-gradient(#ffed00, #7ad3db);
  padding: 2rem;
  overflow: hidden;
  height: auto;  
  max-height:35%;
}

#footer-livre-film {
  background-color: black;
  padding: 2rem;
  overflow: hidden;
  height: auto;  
  max-height:35%;
}

/* ancres */

#one, #two, #three, #four, #five {
  background-color: black;
  display:inline-block;
  min-width: 100%;
  height: 0px;
  outline: none;  
}



#fleches {
  max-width: 8000%; 
  margin:0 auto;
  text-align:center;    
}

#fleche-film-livre { 
  max-width: 8000%; 
}

.fleche-film-livre-bas {
    display:none; 
}

.fleche-film-livre-bas-mobile {
    clear:left;
    bottom: 0px;
    height: 25px;
    display: block;  
    left:0;
    right:0;
    margin-left: auto; 
    margin-right: auto; 
}

.fleche-forum-bas-mobile {
    clear:left;
    bottom: 0px;
    height: 25px;
    display: block;  
    left:0;
    right:0;
    margin-top:2em;
    margin-left: auto; 
    margin-right: auto; 
}

.fleche-forum-bas {
    display:none; 
}

.fleches {
  width: 1.5em;
  padding-top:25px;
  margin-bottom:25px;
}

.fleche-film-livre {
    position: absolute;
    bottom: 25px;
    width: 25px;
    height:25px;
    display: inline-block; 
    left:0;
    right:0;
    margin-left: auto; 
    margin-right: auto; 
    
}

/* 4 colonnes */

section
{
    clear:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
   -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    padding-bottom:4%;
}

#deuxcolonnesgauche
{
    clear:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    padding-bottom:4%;
    width:100%;
}

#unecolonnegauche
{
    clear:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    padding-bottom:4%;
    width:100%;
}


#deuxcolonnesdroite
{
    clear:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    padding-bottom:4%;
    width:100%;
}

#colonnesimple
{
    float:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    padding-bottom:4%;
    width:100%;
    padding-left:1%;
}

#section1
{
    background-color: black;
    padding: 2rem;
}

#section2
{
  display:none;
  
}


.sectiontitre {
    display:none;
}

#mobile-legendegauche
{
    display:inline;
    clear:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    margin-top:-0.5%;
    width:100%;
}

#desktop-legendegauche
{
    display:none;
}


#mobile-legendedroite
{
    display:inline;
    clear:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    margin-top:-0.5%;
    width:100%;
}

#desktop-legendedroite
{
    display:none;
}

/* partie programme forum */
    
#titres-programme{
    background: none;  
    width: 70%;
    position: relative;
    left: 2.5%;  
    min-width: 45%;   
    margin-top:10%;
}

.lien-menu-noir {
     text-decoration: none;
     text-align: right;
     background-color: none;
     display:block;
     float:right;
     clear:right;
     line-height: 1.5;
     padding-top:5px;
     outline: none;   
     font: 0.9em 'Roboto', sans-serif;
     font-weight: bold;    
     background-color: transparent;
     color:#000000;
}

.lien-menu-blanc {
     text-decoration: none;
     text-align: right;
     background-color: none;
     display:block;
     float:right;
     clear:right;
     line-height: 1.5;
     padding-top:5px;
     outline: none;   
     font: 1.05em 'Roboto', sans-serif;
     font-weight: medium;    
     background-color: transparent;
     color:#ffffff;
}

.lien-menu-noir-actif {
     text-decoration: none;
     border-bottom: 2px solid black;
     text-align: right;
     background-color: none;
     display:block;
     float:right;
     clear:right;
     line-height: 1.5;
     padding-top:5px;
     outline: none;   
     font: 0.9em 'Roboto', sans-serif;
     font-weight: bold;    
     background-color: transparent;
     color:#000000;
}

.lien-menu-blanc-actif {
     text-decoration: none;
     border-bottom: 2px solid #ffffff;
     text-align: right;
     background-color: none;
     display:block;
     float:right;
     clear:right;
     line-height: 1.5;
     padding-top:5px;
     outline: none;   
     font: 1.4em 'Roboto', sans-serif;
     font-weight: medium;    
     background-color: transparent;
     color:#ffffff;
}

a, label {
  text-decoration: none;
  color: #000000;
  font-weight: medium;
}


.lien-menu-blanc: hover {
     text-decoration: none;
     border-bottom: 2px solid #ffffff;
     text-align: right;
     background-color: none;
     display:block;
     float:right;
     clear:right;
     line-height: 1.5;
     padding-top:5px;
     outline: none;   
     font: 1.4em 'Roboto', sans-serif;
     font-weight: bold;    
     background-color: transparent;
     color:#ffffff;
}

.menu a {
  display: block;
  padding-top: 0px;       
  padding-bottom: 10px;      
}

.menu2 a {
  display: block;
  padding-top: 0px;       
  padding-bottom: 10px;      
}

.menu3 a {
  display: block;
  padding-top: 0px;       
  padding-bottom: 10px;     
}

.menu4 a {
  display: block;
  padding-top: 0px;       
  padding-bottom: 10px;      
}

.menu5 a {
  display: block;
  padding-top: 0px;       
  padding-bottom: 10px;     
}

.menu6 a {
  display: block;
  padding-top: 0px;       
  padding-bottom: 10px;       
}

.drop-down a {
  min-width: 90px;
}

.drop-down-menu {
  display: block; 
  border-bottom-style: solid;  
  border-width : 1px;
  border-bottom-color: #000000; 
  line-height: 1;
  outline: none;   
  font: 0.9em 'Roboto', sans-serif;
  font-weight: medium;    
  color: #000000;
  text-align: left; 
} 
    
.menu-title {
  cursor: pointer;
  line-height: 1;
  outline: none;   
  font: 0.9em 'Roboto', sans-serif;
  font-weight: medium;    
  color: #000000;
  text-align: left;           
}

.menu-title {
  display:block;
  padding: 10px 0px;
}

.activate {
  display: none;
  position: absolute;
  cursor: pointer;
  width: 65%;
  height: 40px;
  margin: 0 0 0 0;
  opacity: 0;
}
    
.last {
  border-bottom-style: solid;  
  border-width : 1px;
  border-bottom-color: #000000;  
  width:100%;
  display:inline-block;
  line-height: 1;
  outline: none;   
  font: 0.9em 'Roboto', sans-serif;
  font-weight: medium;    
  color: #000000;
  text-align: left;  
}    

.invisible{
  opacity: 0;
}

.menu a, .drop-down-menu {
  background: none;     
}

.menu a:hover, .drop-down-menu:hover {
  background: none;  
}
    
.drop-down a {
  background: none;
}

.drop-down a:hover {
  background: none;
}

.menu  {    
  background: none;  
  width: 95%;
  position: relative;
  left: 2.5%;
}

.menu3  {  
  background: none;  
  width: 95%;
  position: relative;
  left: 2.5%;
}

.menu2  {    
  background: none;  
  width: 95%;
  position: relative;
  left: 2.5%;  
}

.menu4  {   
  background: none;  
  width: 95%;
  position: relative;
  left: 2.5%;
}

.menu5  {   
  background: none;  
  width: 95%;
  position: relative;
  left: 2.5%;
}

.menu6  {   
  background: none;  
  width: 95%;
  position: relative;
  left: 2.5%;
}

:checked ~ .menu-title {
  background: none;
}

.drop-down {
  max-height: 0;
  overflow: hidden;  
}

.drop-down a {
  background: none;
}

.activate:checked ~ .drop-down {
  max-height: 400px;        
}

.last {
  border-style:hidden;    
}    

.drop-down, .menu a, .drop-down-menu {
  -webkit-transform: translateZ(0);  
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

/* texte*/

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

.h1-noir {
line-height: 1.1;
outline: none;   
font: 2em 'Roboto', sans-serif;
font-weight: bold;    
padding: 0px;
color: #000000;
text-align: center;    
}

.h2-blanc {
clear:right;
line-height: 1.1;
outline: none;   
font: 2em 'Roboto', sans-serif;
font-weight: bold;    
padding: 30px;
color: #ffffff;
text-align: center;    
}

.h2-noir {
clear:right;
line-height: 1.2;
outline: none;   
font: 2em 'Roboto', sans-serif;
font-weight: bold;    
padding: 30px;
color: #000000;
text-align: center;    
}

.bouton-pdf { 
float:left;
font: 1em 'Roboto', sans-serif;
font-weight: normal;    
color: #000000;
text-align: center; 
margin-left:40%;
margin-top:-20px;
margin-bottom:2em;
width:10%;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
border-left:1px solid #000000;
border-right:1px solid #000000;
padding: 0.5em 1em 0.5em 1em;
}

p, ul, h1 { 
margin: 0 0 1rem 0;
outline: none;    
}

.grand-texte-blanc {
line-height: 0.5;
outline: none;   
font: 1.05em 'Roboto', sans-serif;
font-weight: medium;    
padding: 1em;
color: #ffffff;
text-align: center;   
}

.grand-texte-noir {
line-height: 1.2;
outline: none;   
font: 2em 'Roboto', sans-serif;
font-weight: bold;    
padding: 2em;
color: #000000;
text-align: center;      
}

.petit-texte-noir {
line-height: 1;
outline: none;   
font: 0.8em 'Roboto', sans-serif;
font-weight: medium;    
color: #000000;
text-align: left;      
}

.petit-texte-noir-mobile {
display:inline-block;
line-height: 1;
outline: none;   
font: 0.8em 'Roboto', sans-serif;
font-weight: medium;    
color: #000000;
text-align: left;      
}

.petit-texte-noir-gras-mobile {
display:inline-block;
line-height: 1;
outline: none;   
font: 0.8em 'Roboto', sans-serif;
font-weight: bold;    
color: #000000;
text-align: left;      
}

.petit-texte-blanc {
line-height: 1;
outline: none;   
font: 0.8em 'Roboto', sans-serif;
font-weight: medium;    
color: #ffffff;
text-align: left;      
}

.petit-texte-blanc-legendes {
line-height: 1;
outline: none;   
font: 0.7em 'Roboto', sans-serif;
font-weight: thin;    
color: #ffffff;
text-align: left;      
}

.logopartenaires1 {
 display:block;
 float:left;
 padding: 1rem;
 left:auto;
 right:auto;
 width:20%; 
}

.logopartenaires2 {
 display:block;
 float:left;
 padding: 1rem;
 left:auto;
 right:auto;
 width:18%; 
}

.logopartenaires3 {
 display:block;
 float:left;
 padding: 1rem;
 left:auto;
 right:auto;
 width:20%; 
}

.logopartenaires4 {
 display:block;
 float:left;
 padding: 1rem;
 left:auto;
 right:auto;
 width:20%; 
}

.logopartenaires5 {
 display:block;
 float:left;
 padding: 1rem;
 left:auto;
 right:auto;
 width:40%; 
}

.logo-footer-0 {
 display:block;
 float:left;
 padding: 1rem;
 left:auto;
 right:auto;
 width:20%; 
}

.logo-footer-02 {
 float:left;
 padding: 2rem;
 left:auto;
 right:auto;
 margin-top:-5%;
 width:10%; 
}


.logo-footer-1 {
 clear:left;
 padding: 0.5rem;
 left:auto;
 right:auto;
 margin-top:-3%;
 width:2%; 
}

.logo-footer-2 {
 float:left;
 padding: 0.5rem;
 left:auto;
 right:auto;
 margin-top:-3%;
 width:5%; 
}

.logo-footer-3 {
 float:left;
 padding: 0.5rem;
 left:auto;
 right:auto;
 margin-top:-3%;
 width:%; 
}