#page-full-width { overflow-x: hidden}
#featured-hero { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat}

@media print, screen and (min-width: 40em) {

    #featured-hero { height: 30rem !important }
    
}

@media print, screen and (min-width: 40em) {

    #featured-hero.circuit-bassin-header { height: 50rem !important }
    
}

.page-full-width.breadcrumb { margin-top: 2rem !important; padding-top: 0 !important}
.page-full-width.breadcrumb+.page-full-width { margin-top: 2rem !important; padding-top: 0 !important}
.page-title { display: block; justify-content: center !important}
.form-circuit { margin-left: auto; margin-right: auto}
.form-circuit .fields { display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: center}
.form-circuit .fields .item { /*flex: 1 1 50%;*/margin: 1rem; max-width: 40rem; min-width: 20rem;}
.form-circuit .item label { font-size: 2.75rem}
header .form-circuit .item input { border: 0; border-bottom: 1px solid #fff; color: #fff; padding: 0.4rem 0; background-color: transparent; position: relative; font-size: 1.25rem; width: 100%;}
.form-circuit .wrapper-btn { display: flex; margin-top: 1rem; flex-flow: row nowrap; justify-content: center}
.form-circuit.form-circuit-light label { font-size: 1.5em; text-align: center; color: #101820;}
#page-full-width .presentation-sticky .main-content { margin-bottom: 0 !important}

@media print, screen and (min-width: 50em) {

    #page-full-width .presentation-sticky .main-content { margin-bottom: 4rem !important }
    
}

.presentation-sticky { margin-top: 10rem}
.presentation-sticky .bloc_texte_alterne { height: auto !important}
.page-full-width.suggestions { padding-top: 2rem !important; padding-bottom: .5rem !important; margin-top: 0 !important}
.suggestions { position: relative; background-color: #f5f5f5}
.suggestions::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100vw; background-color: #f5f5f5; transform: translateX(-100%)}
.suggestions::after { display: block !important; clear: none !important; content: ""; position: absolute;    top: 0; bottom: 0; right: 0; width: 100vw; background-color: #f5f5f5; transform: translateX(100%)}
.suggestions article { margin-bottom: 0!important;}

.page-full-width.circuit-result { max-width: initial !important; margin-top: 0 !important; margin-bottom: 1rem !important}

@media only screen and (min-width: 960px) {

    .page-full-width.circuit-result {padding-right: 0rem; padding-left: 0rem; }
    .page-full-width.circuit-result > .grid-2 { padding-right: 2rem; padding-left: 2rem;}
    
}

.circuit-result h2 { font-size: 1.35rem; margin: 2rem auto; padding: 1rem 2rem; background-color: #f9f9f9; font-family: 'Lato', "Droid Sans", "Helvetica Neue", sans-serif; font-weight: 500; }
.circuit-result .circuit-item h3 { font-size: 1.5em}
.circuit-result .circuit-item h3::before { display: none}
.circuit-result #map { max-height: 50rem; background-color: #f5f5f5}
.circuit-item .preview { position: relative; height: 13.125rem; width: 100%; background: #f5f5f5 no-repeat center center; background-size: cover}
.circuit-item .preview > img { height: 13.125rem; width: 100%; object-fit: cover;}
.circuit-item h3 { color: #0097c5; margin: 0; margin-top: 1rem; font-size: 1.5em}
.circuit-item h3::before { display: none}
.circuit-item p { margin: 0; font-size: 1rem;}
.circuit-item p span { text-transform: uppercase}
.single-map { width: 100%; height: 30rem; background-color: #f5f5f5}
.page-full-width.single-circuit { margin-bottom: 0rem !important}
.single-circuit { margin-bottom: 0 !important}
.single-circuit .circuit-content h2 { margin: 0; margin-bottom: 3rem; font-size: 5.4rem; color: #0097c5; line-height: 1}
.single-circuit .circuit-content p { margin: 0; margin-bottom: 3rem}

@media only screen and (min-width: 60em) {

    .single-circuit .circuit-content p { margin-bottom: 0 }
    
}

.single-circuit .circuit-content ul li { font-size: 20px}
.single-circuit .circuit-item { position: relative}
.single-circuit .circuit-item::before { content: ""; background-color: #515151; height: 4px; width: 7.5rem; display: block; margin-bottom: 3rem}
.single-circuit .circuit-item a { display: inline-block; margin: 1rem 0 0 0}
.page-full-width.single-circuit-img { margin-top: 0rem !important}
.single-circuit-img { position: relative; background-color: #f5f5f5}
.single-circuit-img::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100vw; background-color: #f5f5f5; transform: translateX(-100%)}
.single-circuit-img::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 100vw; background-color: #f5f5f5; transform: translateX(100%)}
.single-circuit-img figure { margin: 0}
.single-circuit-img figure:first-child { margin-bottom: 3rem}

@supports (object-fit: cover) {

    .single-circuit-img figure:first-child img { min-height: 100%; min-width: 100%; object-fit: cover }
    
}

.single-circuit-img .item-right figure { margin-bottom: 3rem}
.single-circuit-img .item-right figure:last-child { margin-bottom: 3rem}

@media only screen and (min-width: 60em) {

    .single-circuit-img .item-right figure:last-child { margin-bottom: 0 }
    
}

@supports (object-fit: cover) {

    .single-circuit-img .item-right figure img { min-height: 100%; min-width: 100%; object-fit: cover }
    
}

#pre-footer-hero .links-brochure { padding-left: 2rem !important; padding-right: 2rem !important}

[class*='grid'] { display: flex; flex-flow: row wrap}
[class*='grid']>* { flex: 1 1 100%}
[class='grid-1-2'] { justify-content: center}
[class='grid-1-2']>figure { flex-basis: auto; flex-grow: 1; max-height: 600px}

@media only screen and (min-width: 60em) {

    [class='grid-1-2']>*:nth-child(odd) { flex-grow: 1; flex-basis: calc(100% / 3) }
    
}

@media only screen and (min-width: 60em) {
    [class='grid-1-2']>*:nth-child(even) {
        flex-grow: 1;
        flex-basis: calc(2* 100% / 3)
    }
}

[class='grid-2'] { justify-content: space-between}

@media only screen and (min-width: 60em) {
    [class='grid-2']>* {
        margin-bottom: 1rem;
        flex-grow: 0;
        flex-basis: calc((100% - 2rem) / 2)
    }
}

@media only screen and (min-width: 60em) {
    [class='grid-2']>*.enlarge {
        flex-basis: 100%
    }
}

[class='grid-3'] { justify-content: space-between}

@media only screen and (min-width: 60em) {
    [class='grid-3']>* {
        margin-bottom: 3rem;
        flex-grow: 0;
        flex-basis: calc((100% - 6rem) / 3)
    }
}

@media only screen and (min-width: 60em) {
    [class='grid-3']>*.enlarge {
        flex-basis: 100%
    }
}