html { background-color: #EEE; color: #111; height:99%; } body { font-family: sans-serif; margin: 0; height:99%; } header h1 { padding: 1.34rem; margin: auto; color: #111111; min-height:80px; } h2 { color: #111111; } header { text-align: center; width:100%; background-color: #ffe751; } #logos { text-align:right; } .logo-bdc, .logo-fdc { width:150px; display:inline-block; } header #logos{ margin: 5px; float: left; height:100%; } header #logos a { display:inline-block; height:100%; } header #logos img { height:100%; } h4{ color: #ffe751; } li h4{ color: #111111; } nav { float:left; width: 15%; border: 1px solid #666; border-left: 0; background-color: #222; color: #EEE; } nav h3 { margin: 10px 0 10px 5px; } main { width:100%; overflow: hidden; min-height: 70%; display:inline-block; } #main { width: calc(85% - 20px); display: block; margin-left: calc(15% + 20px); } h2 { text-align: center; } ul { list-style: none; } a, a:visited { color: #333333; text-decoration: underline; cursor: pointer; } ul.event_program li { background-color:#000; } nav li a, nav li a:visited { color: white; } ul.event_program li.incontournable{ background-color: #74AED0; } ul.event_program li.jeune-public{ background-color: #d12f21; } ul.event_program li.ami-du-court{ background-color: #14a27c; } /* ul.event_program li.mouvement{ background-color: #6f4d9f; } ul.event_program li.unitaire{ background-color: #ea148b; } ul.event_program li.talents{ background-color: #ffe751; };*/ ul.event_program li.ici-et-maintenant{ background-color: #f7b667; } ul.event_program li.art-et-essai{ background-color: #b3a2c7; } ul.event_program li.comedie{ background-color: #f7a500; } ul.event_program li.exclusifs-cinemas{ background-color: #000000; } li.talents > a{ color: #111111; } .event_program > li > span { text-decoration: none; padding: 7px 10px; text-transform: uppercase; font-weight: 600; font-size: 18px; display: inline-block; width: calc(100% - 20px); } .event_program { display: flex; flex-direction: column; } .event_program > li { position: relative; min-height: 30px; } .event_program, .event_program ul{ padding: 0; margin-bottom: 5px; margin-top: 0; } .event_program ul { display: none; position: absolute; background-color: #111111; border: 1px solid #666; top: 0; left: 100%; width: 75%; } .event_program > li:hover ul, .event_program > li:focus ul, .event_program > li:active ul { display: block; } .event_program > li:hover ul li, .event_program > li:focus ul li, .event_program > li:active ul li{ border-bottom: 1px solid #666; padding: 7px 5px; } .event_list{ display: flex; padding: 0; flex-wrap: wrap; } .event_item{ flex: 0 0 20%; max-width: 20%; border: 1px solid #363636; box-shadow: 0 6px 8px -5px rgba(255,255,255, .15); margin: 10px 5px; padding: 10px; border-radius: 5px; } .event_item a { display: block; width: 100%; height: 100%; } .event_item .title { font-size: 1.4em; font-weight: bold; display: block; text-align: center; margin-bottom: 5px; } .event_item .author { font-size: 0.8em; display: block; text-align: right; margin-top: 3px; } .event_item .location { } .event_item .start { } footer { font-size: 0.65rem; margin-top: 10px; text-align: right; margin-right: 5px; } footer span { display: block; } footer a, footer a:visited { text-decoration: underline; color: #111; } .day_list li{ position: relative; } @media screen and (max-width: 640px) { nav { width: 100%; position: relative; } #main { margin: 0; width: 100%; } main ul { margin: 0; padding: 0; } main ul .day_item { padding: 0 10px; } .event_list { display: block; } .event_item { margin: 10px auto; max-width: 100%; } .event_program ul { position: relative; width: 100%; margin: 0; border-bottom: 0; left: 0; } } a.unfliter{ display:block; color: #888; border: 1px solid #888; } a.unfilter:visited { color: #888; } .more { display: none; }