/* CSS Document */

.section .page {max-width:1200px; margin:0 auto; padding:50px 0}
.page-agenda h1 {font-family:'RobotoCondensed-Light', Arial, Helvetica, sans-serif; font-size:48px; line-height:48px; color:#b52505; text-transform: uppercase}
.page-agenda h1 {text-align:center}
.page-agenda {margin-top:0; z-index:1}
.page-agenda h2, .page-agenda h3 {color:#b52505}
.page-agenda h2 {font-size:36px; line-height:40px}
.page-agenda p {margin-top:15px}
.page-agenda > div, .page-agenda h2, .page-agenda h3 {margin-top:30px}

.page-agenda .col {column-gap:40px; grid-row-gap:40px}
.page-agenda > p {text-align: center}

.bloc-agenda {background:#FFF; position:relative; padding:5px; z-index:0}
.bloc-agenda:before, .bloc-agenda:after {content:""; display:block; width:25px; height:25px; /*width:100px; height:100px;*/ background:#f5bfb5; position:absolute; transition:all 0.25s ease-out}
.bloc-agenda:before {left:0; top:0; z-index:-1}
.bloc-agenda:after {right:0; bottom:0; z-index:-2}
/*.bloc-agenda:before {left:10px; top:10px; z-index:-1}
.bloc-agenda:after {right:10px; bottom:10px; z-index:-2}
.bloc-agenda:hover:before {left:0; top:0}
.bloc-agenda:hover:after {right:0; bottom:0}*/
.bloc-agenda .image {width:100%; overflow:hidden; position:relative; border:5px solid #FFF; background:#FFF}
.bloc-agenda .image:after {content:""; display:block; padding-bottom:75%}
.bloc-agenda img {width:100%; height:100%; object-fit:cover; object-position:center center; position:absolute; transition:all 1s ease-in-out;}
.bloc-agenda:hover img {transform:scale(1.25, 1.25)}
.bloc-agenda .texte {padding:10px 20px}

.bloc-agenda .date {width:110px}
.bloc-agenda .date, .bloc-agenda .date div {border-right:10px solid transparent; height:0}
.bloc-agenda .date {border-bottom:20px solid #f5bfb5; position:relative}
.bloc-agenda .date > div {border-bottom:20px solid #e69381}
.bloc-agenda .date span {display:block; padding-left:7px; color:#FFF; font-size:14px; position:absolute}

.bloc-agenda .texte:before {content:""; position:absolute; top:5px; left:5px; display:block; width:calc(100% - 10px); height:calc(100% - 10px); background:#FFF; z-index:-1}
.bloc-agenda .texte p {text-align:justify}
.bloc-agenda a {color:#b52505}
.bloc-agenda a:hover {text-decoration:underline}
.bloc-agenda h2 {margin-top:10px; font-size:24px; line-height:24px; text-transform: uppercase}
.bloc-agenda .texte li {list-style-type: disc; margin-left:15px}

#nav {margin:0 auto; padding-top:30px; position:relative}
#nav ul {text-align:center}
#nav li {display:inline-block; position:relative}
#nav a {display:block; position:relative}
#nav a:hover {color:#b52505}
a.prec {padding-right:15px}
a.suiv {padding-left:15px}
a.prec:before, a.prec:after, a.suiv:after, a.suiv:before {position:absolute; top:0; display:block}
a.prec:after, a.suiv:before {width:15px; display:block}
a.prec:before {left:-22px; content:"←"}
a.prec:after {content:"|"; right:0}
a.suiv:after {right: -22px; content:"→"}
a.suiv:before {content:"|"; left:0}





@media screen and (max-width:359px) {
.section {padding:0 20px}
.page-agenda h2 {font-size:30px; line-height:30px}
}
@media screen and (min-width:360px) and (max-width:639px) {
.section {padding:0 30px}
.page-agenda h2 {font-size:30px; line-height:30px}
}
@media screen and (max-width:639px) {
.page-agenda h1 {font-size:32px; line-height:32px}
.page-agenda .col {grid-row-gap:25px}
.bloc-agenda.anim:before {left:0; top:0}
.bloc-agenda.anim:after {right:0; bottom:0}	
.bloc-agenda.anim img {transform:scale(1.25, 1.25)}
}
@media screen and (max-width:640px) {
.page-agenda .col3 {grid-template-columns:1fr}
}
@media screen and (min-width:640px) and (max-width:799px) {
.section {padding:0 40px}
}

@media screen and (min-width:640px) and (max-width:899px) {
.page-agenda h1 {font-size:36px; line-height:36px}
.page-agenda .col {grid-row-gap:25px}
.bloc-agenda {display:grid; grid-template-columns: 1fr 2fr}
.bloc-agenda.no-col {grid-template-columns:1fr}
.bloc-agenda .image:after {padding-bottom:100%}
}

@media screen and (max-width:899px) {
.page-agenda .col3 {grid-template-columns:1fr}
}
@media screen and (min-width:800px) {
.section {padding:0 50px}
}
@media screen and (min-width:800px) and (max-width:1199px) {
.page-agenda .col {column-gap:30px; grid-row-gap:30px}
}
@media screen and (min-width:900px) and (max-width:1199px) {
.page-agenda .col3 {grid-template-columns: repeat(2, 1fr)}
}
}

@media screen and (min-width:1200px) {
.page-agenda .col {column-gap:40px; grid-row-gap:40px}
}