body,
body * {
    max-width: 100vw;
    overflow-x: hidden;
}

@font-face {
    font-family: "Rise";
    src: local("Rise"),
      url("../typos/Rise.otf") format("opentype");
  }

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
}

#intro.page-accueil {
    height: 100vh;
}

.intro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
}

.image-accueil {
    background-image: url('../images/image-accueil.jpg');
    background-size: 100% 100%;
    background-position: center;
    width: 100vw;
    height: 100vh;
}

button {
    width: 10vw;
    height: 4.5vh;
    font-size: .7vw;
    border-radius: 50px;
}

button:not(.contour-blanc),
button:not(.contour-gris) {
    background-color: #3d3f4f;
    border: solid 1px #3d3f4f;
    color: #fff;
}

.contour-blanc {
    background-color: transparent;
    border: solid 3px #fff;
    color: #fff;
    position: absolute;
    left: calc(50% - 5vw);
    bottom: 10vh;
    font-weight: bold;
}

.contour-gris {
    background-color: transparent !important;
    border: solid 1px #3d3f4f;
    color: #3d3f4f !important;
}

.margin-left {
    display: block;
    margin-left: auto;
}

h1.center {
    position: absolute;
    margin: 0 auto;
    bottom: 20vh;
    left: 50%;
    transform: translate(-50%);
    width: 100vw;
    color: #fff;
}

.center {
    text-align: center;
    display: block;
    margin: auto;
}

.blanc {
    color: #fff;
}

.gris {
    color: #3d3f4f;
}

.rise {
    font-family: "Rise";
    font-size: 1.5vw;
}

.no-padding {
    padding: 0 !important;
}

.nav {
    height: 15vh;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 99;
}

.nav.nav-blanche {
    background-color: #fff;
    box-shadow: 0 -60px 80px #444444;
    position: fixed;
    top: 0;
}

.nav ul {
    display: flex;
    flex-direction: row;
    height: 100%;
    margin: 0;
}

.nav ul li {
    height: 100%;
    display: flex;
}

.nav ul li a {
    display: block;
    margin: auto 20px auto 20px;
    color: #fff !important;
}

.nav.nav-blanche ul li a,
#piste-verte-1 .nav ul li a {
    color: #6a6c7b !important;
}

.navigation {
    justify-content: end;
}

.logo,
.logo-footer {
    width: 7vw;
}

.logo-nom {
    width: 100%;
}

.nav.nav-blanche .logo,
.page-tronçon .nav .logo {
    content: url("../images/Logo.png");
}

.colLogo {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1,
h2,
h3,
h4,
p,
a,
span {
    line-height: normal;
}

h1,
h2,
h3 {
    color: #2f3037;
}

h1 {
    font-family: 'Righteous', sans-serif;
    font-size: 4.5vw;
    margin-bottom: 1vh;
    font-weight: 900;
}

h2, h2.center {
    font-family: 'Righteous', sans-serif;
    font-size: 3.5vw;
    margin-top: 2vh;
    margin-bottom: 2vh;
    font-weight: 400;
}

h3 {
    font-size: 2vw;
    margin-bottom: 1vh;
    font-family: 'Josefin-Sans', sans-serif;
    font-weight: 600;
}

h4 {
    color: #89bbc4;
    font-family: 'Poppins', sans-serif;
    font-size: 1vw;
    text-transform: uppercase;
    letter-spacing: .5vw;
    margin-bottom: 1vh;
    font-weight: 300;
}

p,
a {
    font-size: 1.3vw;
    margin-top: 0;
    margin-bottom: 1vh;
    font-weight: 300;
    font-family: 'Montserrat', sans-serif;
}

p:not(.blanc),
a:not(.blanc) {
    color: #6a6c7b;
}

a:hover {
    text-decoration: none;
}

b {
    font-family: inherit;
    font-weight: 700;
}

.section:not(#intro) {
    margin: 20vh 0 20vh 0;
}

.petite-section {
    margin: 5vh 0 5vh 0;
}

.ligneVide {
    height: 3vh;
}

.tronçon {
    padding: 0 25px;
}

.encadre-tronçon {
    width: 100%;
    height: 25vh;
    border-radius: 50px;
    background-size: 100%;
}

.encadre-tronçon img {
    width: 100%;
    height: auto;
}

.pictos-transports {
    margin-bottom: 1vh;
}

.picto-transport {
    width: 40px;
    height: auto;
    margin-right: 20px;
}

#encadre-tronçon-N1 {
    background-image: url("../images/Pistes/Piste-N1.png");
    background-position: center;
}

#encadre-tronçon-B5 {
    background-image: url("../images/Pistes/Piste-B5.png");
    background-position: center top;
}

#encadre-tronçon-V1 {
    background-image: url("../images/Pistes/Piste-V1.png");
    background-position: center bottom;
}

#encadre-tronçon-V17 {
    background-image: url("../images/Pistes/Piste-V17.png");
    background-position: center 60%;
}

.tool,
.toolInverse {
    text-decoration: none;
    position: relative;
    width: fit-content;
    margin-top: 1vw;
    margin-bottom: 0;
}

.tool:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.05vw;
    bottom: 0;
    left: 0;
    background-color: #6a6c7b;
    visibility: visible;
    transform-origin: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all .5s cubic-bezier(1, .25, 0, .75) 0s;
    transition: all .5s cubic-bezier(1, .25, 0, .75) 0s;
    -moz-transition: all .5s cubic-bezier(1, .25, 0, .75) 0s;
}

.nav:not(.nav-blanche) .tool::before,
.blanc.tool::before {
    background-color: #fff;
}


.tool:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    transform-origin: 0;
}

.toolInverse:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.05vw;
    bottom: 0;
    left: 0;
    background-color: #6a6c7b;
    visibility: visible;
    transform-origin: 0;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: all .5s cubic-bezier(1, .25, 0, .75) 0s;
    transition: all .5s cubic-bezier(1, .25, 0, .75) 0s;
    -moz-transition: all .5s cubic-bezier(1, .25, 0, .75) 0s;
}

.toolInverse:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: 0;
}

#footer {
    background-color: #2f3037;
}

#footer .lien-footer {
    margin-bottom: 0.5vh;
}

.semi-bold {
    font-weight: 500;
}

.padding50 {
    padding: 50px 0 50px 0;
}

hr {
    background-color: #fff;
    width: 100vw;
    margin-left: calc(8.333333% + 20px);
}

#carousel {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.slides {
    display: flex;
    width: 3200px;
    /* 4 images x 800px */
    height: 300px;
    position: relative;
    transition: transform 1s;
    overflow: visible;
}

.slide {
    width: 100%;
    height: 100%;
}

.slide img {
    width: 80%;
    height: auto;
}

.piste-noire-1 {
    background-image: url("../images/Pistes/Piste-N1.png");
    background-position: right top;
    background-size: 60%;
    background-repeat: no-repeat;
    min-height: 70vh;
    height: auto;
    padding-top: 25vh;
}

.piste-bleue-5 {
    background-image: url("../images/Pistes/Piste-B5.png");
    background-position: right top;
    background-size: 60%;
    background-repeat: no-repeat;
    min-height: 70vh;
    height: auto;
    padding-top: 25vh;
}

.piste-verte-1 {
    background-image: url("../images/Pistes/Piste-V1.png");
    background-position: right bottom;
    background-size: 60%;
    background-repeat: no-repeat;
    min-height: 70vh;
    height: auto;
    padding-top: 25vh;
}

.piste-verte-17 {
    background-image: url("../images/Pistes/Piste-V17.png");
    background-position: right top;
    background-size: 60%;
    background-repeat: no-repeat;
    min-height: 70vh;
    height: auto;
    padding-top: 25vh;
}

.uppercase {
    text-transform: uppercase;
}

.blue-text {
    color: #3d669a !important;
}

.green-text {
    color: #3b7257 !important;
}

.black-text {
    color: #101010 !important;
}

.tableau-classement .blue-text {
    font-size: .9vw;
}

.tableau-classement {
    border: solid 7px #2f3037;
    background-color: #fff;
    margin-bottom: 10vh;
}

.tableau-classement .col-lg-1,
.tableau-classement .col-lg-9 {
    border-right: solid 7px #2f3037;
}

.tableau-presentation-bleu {
    border: solid 7px #3d669a;
    background-color: #fff;
}

.tableau-presentation-vert {
    border: solid 7px #3b7257;
    background-color: #fff;
}

.tableau-presentation-noir {
    border: solid 7px #101010;
    background-color: #fff;
}

.tableau-presentation-bleu .col-lg-3:first-child,
.tableau-presentation-bleu .col-lg-6 {
    border-right: solid 7px #3d669a;
}

.tableau-presentation-vert .col-lg-3:first-child,
.tableau-presentation-vert .col-lg-6 {
    border-right: solid 7px #3b7257;
}

.tableau-presentation-noir .col-lg-3:first-child,
.tableau-presentation-noir .col-lg-6 {
    border-right: solid 7px #101010;
}

.tableau-presentation p {
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.align-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-tronçons .align-center {
    padding-left: 50px;
}

.no-margin-bottom {
    margin-bottom: 0;
}

.no-margin-top {
    margin-top: 0;
}

.modal-blanche {
    background-color: #fff;
    border-radius: 50px;
    width: 70vw;
    position: fixed;
    top: -100vh;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: top 0s, opacity .5s ease-in-out;
    z-index: 99;
}

.modal-blanche.active {
    top: 50%;
    opacity: 1;
}

.btn-tableau-dispo-tronçons:hover,
.croix:hover {
    cursor: pointer;
}

.tableau-dispo-tronçons {
    display: flex;
    margin: auto;
    padding: 3vw;
}

.tableau-dispo-tronçons p {
    margin-top: 2vh;
    margin-bottom: 2vh;
}

/* .tableau-dispo-tronçons .row:not(:last-child) {
    border-bottom: solid 4px #2f3037;
}

.tableau-dispo-tronçons .row .col-lg-6:first-child,
.tableau-dispo-tronçons .row .col-lg-5 {
    border-right: solid 4px #2f3037;
} */

.pastille-verte {
    width: 50px;
    height: 50px;
    background-color: #3b7257;
    border-radius: 50%;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.pastille-rouge {
    width: 50px;
    height: 50px;
    background-color: #a12b35;
    border-radius: 50%;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.croix {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 1.5vw;
    right: 1.5vw;
}

.voile-body {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    top: -100vh;
    left: 0;
    z-index: 50;
    transition: top 0s, opacity .5s ease-in-out;
}

.voile-body.active {
    top: 0;
    opacity: 1;
}

body.no-scroll {
    overflow: hidden;
}

.carousel2 {
    position: relative;
    width: 90%;
}

.carousel2-slides {
    display: flex;
    overflow-x: hidden;
}

.carousel2-slides img {
    width: 0;
    transform: translateX(100%);
    transition: transform .5s ease-in-out;
    border-radius: 50px;
}

.carousel2-slides img.active2 {
    width: 100%;
    transform: translateX(0);

}

.carousel2-dots {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.dot2 {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.dot2.active2 {
    background-color: #717171;
}

#partenaires-tronçon img {
    height: 15vh;
    width: auto;
    display: block;
    margin: 0 auto;
}

.campings-finistere-bel-air:hover {
    content: url("../images/Partenaires/campings-finistere-bel-air.png");
}

.penn-ar-bed-plovan:hover {
    content: url("../images/Partenaires/penn-Ar-Bed-Plovan.png");
}

.les-enfants-de-la-cote:hover {
    content: url("../images/Partenaires/les-enfants-de-la-cote.png");
}

.paddle-en-finistere:hover {
    content: url("../images/Partenaires/paddle-en-finistere.png");
}

.logo-partenaire {
    filter: grayscale(1);
}

.logo-partenaire:hover {
    filter: none;
    transition: filter .5s ease-in-out;
}

@media(min-width: 1366px) {
    .no-desktop {
        display: none;
    }
}