/*
Theme Name : OutSide Bike
Text Domain: OutSide Bike
Author: eO10Design
Author URI: https://www.eo10Design.com/
Description : Thème pour le site outside-bike.com
Version : 1.0
*/

body {
    margin:0;
    padding:0;
    background-color: #8cb7bf;
    font-family: 'Barlow', sans-serif;
}

/* ----------------COULEURS */

.bleuVert {color:#8cb7bf;}
.bleuFonce{color:#4d838f;}
.bleuFonce{color:#1b1828;}
.beige {color:#b38460;}
.blanc {color:white;}
.noir {color:#000;}
.marron {color:#3f2d1f;}
.grisGoboat {color:#44535f;}

.bgBleuVert {background-color: #8cb7bf;}
.bgBeige {background-color: #b38460;}
.bgbleuFonce {background-color:#1b1828;}
.bgBeige {color:#ceb9a5;}

.bgMarron{background-color:#3f2d1f;}
.bgMarronOp{background-color:rgba(65,45,31,0.5);}


/* ----------------TEXTES */

h1{
    color:#FFF;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 60pt;
    opacity: 0.2;
}

h2{
    font-size: 40pt;
    font-weight: 800;
    text-transform: uppercase;
}

h4{
    font-size: 20pt;
    font-weight: 500;
    text-transform: uppercase;
}

h5, .titreH5 {
    font-size: 16pt;
    font-weight: 700;
    text-transform: uppercase;
}

h6,.titreH6 {
    font-size: 12pt;
    line-height: 15pt;
    font-weight: 400;
    text-transform: uppercase;
}

h6 span {
    font-weight: 700;
}

.attention p {
    font-size: 13pt;
    line-height: 16pt;
    font-weight: 400;
    text-transform: none;
}

p {
    font-size: 12pt;
    line-height: 14pt;
    color: #FFF;
    font-weight: 100;
}

p span {
    font-weight: 500;
}

a {
    color:#FFF;
    text-decoration: none;
}

.borderText {
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    color: #000;
    mix-blend-mode: screen;
}

.txtRight {
    text-align: right;
}
.txtLeft {
    text-align: left;
}
.txtCenter {
    text-align: center!important;
}

.bordureArrondie {
    border: 1px #FFF solid;
    padding:30px;
    border-radius: 20px;
    text-align: justify;
    color:#FFF;
}

.container {
    width:80%;
}

/* ----------------REVEAL SCROLL */

.reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
  }

.reveal.active{
    transform: translateY(0);
    opacity: 1;
  }

.revealRight{
    position: relative;
    transform: translateX(-150px);
    opacity: 0;
    transition: 1s all ease;
  }

.revealRight.active{
    transform: translateY(0);
    opacity: 1;
  }



/* ----------------MENU */

header {
    position:fixed;
    z-index: 999;
    width:100%;
    height:70px;
    /* background-color: rgba(140,183,191,0.5);
    background: rgb(140,183,191); */
    background: linear-gradient(90deg, rgba(65,45,31,0.9) 0%, rgba(65,45,31,0.5) 50%, rgba(65,45,31,0.9) 100%);
}

.menuGlob {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.menuResponsive,.menuBurger {
    transition: all 1s;
    display: none;
}

.logoMenu {
    width:100px;
    margin:10px;
}

.logoMenu img {
    width:100%;
}

.menu ul {
    display: flex;
    align-items: center;
}

li {
    margin:0 15px;
    padding:5px;
    text-align: center;
    font-weight:400;
}

li a {
    text-decoration: none;
    font-size: 14pt;
    text-transform: uppercase;
}

li a span {
    font-weight:100;
    font-size: 10pt;
}

.attention {
    background-color: #ceb9a5;
    font-size:15pt;
    color:#1b1828;
    text-transform: uppercase;
    border-radius:5px;
    padding:20px;
    transition: all ease 1s;
}

.reserver {
    background-color: #dd931b;
    font-size:15pt;
    color:#FFF;
    text-transform: uppercase;
    border-radius:5px;
    padding:20px;
    transition: all ease 1s;
}

.reserver.petit {
    font-size:10pt;
    padding:10px;
}

.reserver:hover {
    background-color: rgba(255,255,255,0.3);
    cursor: pointer;
}

.btnPlus,.btnPlusResp {
    position: relative;
    z-index: 20;
    height:40px;
    margin:0 10px;
    transition: all ease 1s;
}

.btnPlusResp {
    display: none;
    margin-top: 10px;
}

.btnPlus:hover {
    transform: translate(20px);
    cursor: pointer;
}

.easyloisirs_module {
    text-transform: uppercase;
    color: #FFF!important;
    background-color: none!important;
}

/* --------------------------SECTIONS */

section {
    height:100vh;
    /* padding-top:70px; */
}

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

.row {
    /* background-color: aquamarine; */
    display: flex;
    justify-content: center;
    /* align-items:center; */
}

.flecheSuite {
    position: relative;
    z-index: 50;
    /* bottom:50px; */
    text-align: center;
    /* background-color: aqua; */
}

.flecheSuite a {
    font-size: 50px;
    color:#FFF;
    transition: all 0.5s;
}

.flecheSuite a:hover {
    color:#3f2d1f;
    font-size: 55px;
}

.flecheSuiteRelative {
    position: relative;
    z-index: 50;
    text-align: center;
    margin-top:20px;
}

.flecheSuiteRelative a {
    font-size: 50px;
    color:#FFF;
    transition: all 0.5s;
}

.flecheSuiteRelative a:hover {
    color:#dd931b;
    font-size: 55px;
}

/* --------------------------TITRE SECTIONS */

.titreSection {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 30px;
    margin-top:10px;
}


.sousTitreSection {
    position: absolute;
    z-index: 0;
}


.bord-gauche {
    border-left: 25px #FFF solid;
    height:100vh;
}
.bord-gauche-plus {
    border-left: 25px #FFF solid;
    height:100%;
}

.bord-droit {
    border-right: 25px #FFF solid;
    height:100vh;
}



.boiteInfos {
    color:#FFF;
    border-radius: 0.5em 0 0.5em 0;
    background-color: rgba(255,255,255,0.3);
    padding: 1em;
    border:#FFF solid 1px;
}

.boiteTarifs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:#FFF;
    border-radius: 0.5em 0 0.5em 0;
    background-color: rgba(255,255,255,0.3);
    width:40%;
    height:90%;
    padding: 0.5em 1em;
    border:#FFF solid 1px;
    margin:2em;
}

.boiteTarifs img {
    width:100%;
}


/* ----------------INTRO */

#background-video {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    }

.intro {
    height:100vh;
    /* background-image: url("images/veyrier.jpg");
    background-size: cover;
    background-position: center top; */
    display: flex;
    align-items: center;
}

.logo {
    background-color: #3f2d1f;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width:300px;
    height:300px;
    padding:30px;
}

.logo img {
    width:100%;
}

.texte {
    width:50%;
    color:#FFF;
}
.ligne {
 border-bottom : rgba(255,255,255,0.3) solid 1px;
}
.imgPart img{
    width:90%;
}

.imgPetit {
    width:50%;
}

.arrondi {
    border-radius: 50%;
}

/* ----------------PRESENTATION */
.presentation {
    position: relative;
    z-index: 5;
    background-color: #8cb7bf;
    background-image: url("images/bgeau.png");
    background-blend-mode:overlay;
    background-size: cover;
    background-position: center center;
    display: flex;
}
.presentation p {
    color:#1e353a;
    font-size: 14pt;
    line-height: 16pt;
    font-weight: 500;
    text-align: justify;
}
.rond {
        background-color: #4d838f;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width:300px;
        height:300px;
        padding:30px;
}
.rond h2 {
    font-size: 50pt;
    text-align: center;
}

/* ----------------VELOS ET TARIFS */
.velos {
    position: relative;
    z-index: 5;
    background-color: #b38460;
    background-image: url("images/bgRoute.jpg");
    background-size: cover;
    background-position: center center;
    display: flex;
}

.velosPlus {
    position: relative;
    height:100%;
    margin:0;
    z-index: 5;

    display: flex;
}

.bgRoute {
    width:100%;
    min-height: 100vh;
    background-image: url("images/bgRoute.jpg");
    background-size: cover;
    background-position: center center;
}


.colImage {
    background-image: url("images/photoRoute.png");
    background-repeat: no-repeat;
    background-position: bottom 50% right -10%;
    background-size: 700px;
}

/* .colImageBleue {
    background-image: url("images/photoEauBleue.png");
    background-repeat: no-repeat;
    background-position: bottom 50% right -10%;
    background-size: 700px;
} */
/* ----------------ITINERAIRE */
.itineraire {
    position: relative;
    z-index: 4;
    /* background-color: #1b1828; */
    background : linear-gradient(90deg, rgba(27, 24, 40, 1) 0%,rgba(62, 58, 99, 1) 100%);
    /* background-image: url("images/bgLueur.png"); */
    background-blend-mode:overlay;
    background-size: cover;
    background-position: center center;
}
/* .colImageBis {
    background-image: url("images/photoEauBleu.png");
    background-repeat: no-repeat;
    background-position: bottom left -20%;
    background-size: 700px;
} */

.itinerairePlus {
    position: relative;
    min-height:100vh;
    z-index: 4;
    /* background-color: #1b1828; */
    background : linear-gradient(90deg, rgba(27, 24, 40, 1) 0%,rgba(62, 58, 99, 1) 100%);
    /* background-image: url("images/bgLueur.png"); */
}

/* ----------------BON PLANS */
.bonPlan {
    position: relative;
    /* background-color: #dfbea1; */
    background: linear-gradient(90deg, rgba(157, 127, 89, 1) 0%,rgba(253, 218, 178, 1) 100%);
    /* background-image: url("images/bgBois.png");
    background-blend-mode:overlay;
    background-size: cover;
    background-position: center center; */
    z-index: 2;
}

.bonPlanPlus {
    position: relative;
    min-height:100vh;

    /* background-color: #dfbea1; */
    background: linear-gradient(90deg, rgba(157, 127, 89, 1) 0%,rgba(253, 218, 178, 1) 100%);
    /* background-image: url("images/bgBois.png");
    background-blend-mode:overlay;
    background-size: cover;
    background-position: center center; */
    z-index: 2;
}

/* ----------------FOOTER */

.contact {
        background: linear-gradient(180deg, rgba(65,45,31,0.9) 0%, rgba(65,45,31,0.5) 50%);
    height: 100vh;
}

.introFooter {
    position: relative;
    display: flex;
    justify-content: center;

    top:40px;
}

.logoFooter {
    background-color: #402e20;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width:150px;
    height:150px;
    padding:10px;
    margin:20px;
}

.logoFooter img {
    width:100%;
}

footer {
    /* height:100vh; */
    width:100%;
    /* background-color: rgba(17, 33, 36, 0.5); */
    background: linear-gradient(0deg, rgba(17, 33, 36, 0.5) 0%,rgba(17, 33, 36, 0) 100%);

    display: flex;
    align-items: center;
    justify-content: space-around;
}

.carteFooter {
    border-radius: 10px;
}

.carte {
    /* background-color: blueviolet; */
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

footer nav {
    /* background-color: #44535f; */
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

footer nav ul li {
    text-align: left;
    padding: 10px 0 ;
}

.footer {
    border-top:#FFF solid 1px;
    border-bottom:#FFF solid 1px;
    padding:20px 0;
}

.colFooter {
    /* background-color: #08282e; */
    padding:10px;
}

.infoFooter {
    /* display: flex;
    justify-content: space-between; */
    padding:10px;
    width:100%;
}

.infoFooter p {
    font-weight: 100;
    font-size: 12pt;
}