/* CSS Document */
/*.wide-container {height:50vh; width:100%; position:relative}
#slides {width:100%; height:100%; display:flex; overflow:hidden}
#slides > div {position:relative; width:100%; height:100%; flex-shrink: 0; animation: slider 20s infinite ease-in-out}
#slides > div img {object-fit:cover; object-position:center center; width:100%; height:100%}

.activite {bottom:0; z-index:1; color:#FFF; font-size:24px; width:250px; text-align:center}
.activite, .activite div {position:absolute; right:0; border-left:25px solid transparent; height:0}
.activite div {width:100%; top:0}
.activite {border-bottom:50px solid #f5bfb5}
.activite > div {border-bottom:50px solid #e69381}
.activite > div > div {border-bottom:50px solid #b52505}
.activite span {display:block;padding-top:7px}*/

.section .page {max-width:1200px; margin:0 auto; padding:50px 0}
.page-association h1 {font-family:'RobotoCondensed-Light', Arial, Helvetica, sans-serif; font-size:48px; line-height:48px; color:#b52505; text-transform: uppercase}
.page-association h1 {text-align:center}
.page-association {margin-top:0}
.page-association h2, .page-association h3 {color:#b52505}
.page-association h2 {font-size:36px; line-height:40px}
.page-association p {margin-top:15px; text-align:justify}
.page-association p:first-of-type {margin-top:0}
.page-association > div, .page-association h2, .page-association h3 {margin-top:30px}
.page-association .col {display:grid}
.page-association .col2 {grid-template-columns: auto 25%; column-gap: 50px}
.page-association .image {width:100%; height:100%; position:relative; overflow:hidden}
.page-association .image img {position:absolute; object-fit:contain; object-position: right top; height:100%; width:100%}


.bureau h3, .bureau p, .permanence h3 {margin-top:0}
.bureau, .membre {display:grid; column-gap: 25px; grid-row-gap: 25px}
.bureau.col2 {grid-template-columns: 1fr 1fr}
.membre {grid-template-columns: 100px auto}
.bureau.col3 {grid-template-columns: 1fr 1fr 1fr}
.membre > div:nth-of-type(2) {display:flex; align-items: center}
.membre > div:nth-of-type(1) {width:100px}
.membre > div:nth-of-type(1) {position:relative; display:block; width:100px; height:100px; background-color:#e69381; border-radius:50%; overflow:hidden}
.membre > div:nth-of-type(1):after {content:""; display:block; padding-bottom:100%}
.membre > div:nth-of-type(1) img {object-fit:cover; object-position: center center; width:100%; height:100%; position:absolute}
.permanence {display:grid; grid-template-columns: 1fr 1fr; column-gap: 25px; padding:25px; border:1px solid #E8E8E8}
.svg {background-image: url("../imgs/bureau-cosk.svg"); background-repeat:no-repeat; background-size:cover}

@media screen and (max-width:359px) {
.section {padding:0 20px}
.page-association h2 {font-size:30px; line-height:30px}
}
@media screen and (min-width:360px) and (max-width:639px) {
.section {padding:0 30px}
.page-association h2 {font-size:30px; line-height:30px}
}
@media screen and (max-width:639px) {
.page-association h1 {font-size:32px; line-height:32px}
.page-association .col2 {grid-template-columns: 1fr}
.page-association .image {margin-top:25px}
.page-association .image:after {content:""; display:block; padding-bottom:100%}
.page-association .image img {object-position: center top; height:100%; width:100%}
.permanence {grid-template-columns: 1fr; grid-row-gap: 25px}
}
@media screen and (max-width:767px) {
.bureau.col1, .bureau.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-association h1 {font-size:36px; line-height:36px}
.page-association .col2 {grid-template-columns: auto 40%}
}
@media screen and (max-width:899px) {

}
@media screen and (min-width:800px) {
.section {padding:0 50px}
}

@media screen and (min-width:768px) and (max-width:1239px) {
.bureau.col3 {grid-template-columns: 1fr 1fr}

}