html {
  scroll-behavior: smooth;
}

body, html {
  height: 100%;
  /* font-size: 20px; */
  /* letter-spacing: 2px;
  line-height: 22px;
  font-weight: normal; */
}

.footer {
  z-index: 100;
  position: static;
  padding-bottom: 10px;
}

#btn-down{
  height: 50px;
  width: 50px;
  border-radius: 50%;
  position: fixed;
  bottom: 9%;
  left: 50%;
  transform: translate(-50%,50%);
  z-index: 90;
  border: #ffffff solid 2px;
  cursor:pointer;
  overflow: hidden;
}


#chevronHexa{
  position: absolute;
  border-radius: 50%;
  /* transform: translate(-25%,-50%); */
  animation: arrow-chevron 3s ease-in infinite;
}

#chevronHexaBis{
  position: absolute;
  animation: arrow-chevron2 3s ease-in infinite;
  opacity: 0;animation-delay: 1.5s;
}

p{
  margin: 0;
  padding: 0;
}

.logoContainer2 {
  background-color: #1D4851;
}

br {
  padding: 0;
  margin: 0;
}

.section {
  position: relative;
  z-index: 5;
}

.block-text p {
  line-height: 28px;
  font-weight: normal;
  font-family: 'rawlineregular';
  font-size: 17px;
  color: #494949;
}

.tiret {
  font-family: 'rawlinebold' !important;
  color: #1D4851 !important;
}


.container-bgimg {
  /* display: flex; */
  background-color: cornflowerblue;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

.bgimg-1,.bgimg-2,.bgimg-1-1  {
  position: relative;
  /* opacity: 0.65; */
  background-attachment: fixed;
  /* background-position: center; */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgimg-1 {
  z-index: 0;
  /* background-image: url("../images/landing_page/bg.jpg"), url("../images/landing_page/visuel_fem.webp"); */
  background-image: url("../images/landing_page/visuel_garcon.jpg");
  position: absolute;
  top: 0;
  left: 0;
  /* opacity: 0.65; */
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  -webkit-transition: -webkit-transform 2s ease-in-out;
}

.bgimg-1-1 {
  z-index: 1;
  background-image: url("../images/landing_page/visuel_fem.jpg");
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  -webkit-transition: -webkit-transform 2s ease-in-out;
}

.block-img-temp {
  z-index: 1;
  position: fixed;
  height: auto;
  width: 250px;
  top: 50%;
  left: 50%;
  transform: translateX(-120%) translateY(-105px);
}



.img-titre-temps {
  position: absolute;
  height: auto;
  width: auto;
}

.anim{
  -webkit-transform:translateX(0);
}

.anim-right{
  -webkit-transform:translateX(100%);
}

.posi-left {
  transform: translateX(-100%);
}

.bgimg-2 {
  z-index: 2;
  /*
  background-image: url("../images/landing_page/mapOccitanie.jpg");
  */
  background-color: #EDEDED;
  min-height: 100vh;
}

#mgSection3 {
  z-index: 2;
  background-image: url("../images/landing_page/visuel_fond_pro.webp");
  min-height: 100vh;
}

.block-img-1 {
  z-index: 2;
  padding: 0;
  position: fixed;
}

.img-titre {
  position: fixed;
  height: 15%;
  width: auto;
}



#img-titre1, #img-titre2 {
  height: 100%;
  width: 100%;
}

#block-img-titre1 {
  /*
  top: 22%;
  right: -22%;
  */
  top:0px;
  right: -30%;
  height: 15%;
  width: 800px;
  opacity: 0;
  -moz-transform: rotate(-19deg) /*translate(-48%, -90%)*/;
  -webkit-transform: rotate(-19deg) /*translate(-48%, -90%)*/;
  -o-transform: rotate(-19deg) /*translate(-48%, -90%)*/;
  -ms-transform: rotate(-19deg) /*translate(-48%, -90%)*/;
  transform: rotate(-19deg) /*translate(-48%, -90%)*/;
}

#img-titre-text {
  font-family: 'rawlinebold';
  position: relative;
  padding-right: 70px;
  color: #ffffff;
  font-size: 25px;
  font-weight: 900;
  top: 0;
  text-align: right;
  margin-bottom: 14px;
  -webkit-text-shadow: -3px 3px 2px rgba(0, 0, 0, 0.5);
  text-shadow: -3px 3px 2px rgba(0, 0, 0, 0.5);
}



#block-img-titre2 {
  /*
  left: -22%;
  bottom: -15%;
  */
  left: 0px;
  bottom: 0px;
  height: 15%;
  width: 625px;
  opacity: 0;
  -moz-transform: rotate(-19deg) /*translate(-26%, -4%)*/;
  -webkit-transform: rotate(-19deg) /*translate(-26%, -4%)*/;
  -o-transform: rotate(-19deg) /*translate(-26%, -4%)*/;
  -ms-transform: rotate(-19deg) /*translate(-26%, -4%)*/;
  transform: rotate(-19deg) /*translate(-26%, -4%)*/;
}


.caption span.border {
  /* background-color: #111; */
  color: #fff;
  padding: 18px;
  font-size: 11px;
}

h2, h3 {
  font-family: 'rawlineregular';
  text-align:center;
}

h2 {
  margin-top: 0;
  font-family: 'rawlinebold';
  font-size: 32px;
  color: #1D4851;
  text-align:center;
  font-weight:800;
  margin-bottom: 20px;
}

h3 {
  font-weight: 900;
  font-size: 20px;
}

#parIciBtn{
  /* opacity: 0; */
  position: fixed;
  right: 10%;
  top: 100px;
  height: auto;
  width: auto;
  background-color: #00A89B;
  color: white;
  padding: 4px;
  border-radius: 0.5rem;
  z-index: 10;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  border: 2px white solid;
  line-height: 18px;
  -webkit-transition: background-color 2s ease-in-out;
}

#pictoPro {
  width: 50px;
  height: 50px;
  padding: 0;
}

#pictoback {
  height: 100%;
  width: 100%;
}

.filter-green {
  position: absolute;
  z-index: -1;
  top: -4px;
  left: 0px;
  -webkit-filter: brightness(0) saturate(100%) invert(68%) sepia(20%) saturate(1349%) hue-rotate(126deg) brightness(89%) contrast(80%);
  -webkit-transition: -webkit-filter 2s ease-in-out;
}

.filter-pink {
  position: absolute;
  z-index: -1;
  top: -4px;
  left: 0px;
  -webkit-filter: brightness(0) saturate(100%) invert(71%) sepia(37%) saturate(6250%) hue-rotate(308deg) brightness(88%) contrast(88%);

}

.filter-grey {
  position: absolute;
  height: 100%;
  width: auto;
  z-index: -1;
  top: 0px;
  left: 0;
  -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(411%) hue-rotate(240deg) brightness(116%) contrast(77%);
}

.section {
  position: relative;
  width: 100%;
  background-color: #ffffff;
}

.triangle {
  position: absolute;
  top: -34px;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 35px 35px 35px;
  -webkit-transform:translateX(-50%) rotate(360deg);
  border-style: inset;
}

.t-bottom {
  top: auto;
  bottom: 0px;
}

.triangle.t-wight {
  border-color: transparent transparent #ffffff transparent;
}

.triangle.t-grey {
  border-color: transparent transparent #e8e8e8 transparent;
}

#section-img2-btn {
  position: fixed;
  left: 50%;
  /* bottom: 10%; */
  top: 280px;
  transform: translateX(-50%);
  background-image: url("../images/v_picto.svg");
  /* background-position: center; */
  background-position: 95% 50%;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  min-width: 270px;
  left: 50%;
}

#section2-btn,#section3-btn {
  position: relative;
  background-image: url("../images/v_picto.svg");
  z-index: 10;
  /* background-position: center; */
  background-position: 95% 50%;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  min-width: 150px;
  width: auto;
  margin-bottom: 40px;
}

a > span {
  width: auto;
  text-align: left;
  padding-left: 30px;
  padding-right: 20px;
  padding-top: 4px;
  padding-bottom: 6px;
}

a > span:first-child {
  padding-bottom: 0px;
  font-weight: bold;
}

a > span:last-child {
  padding-top: 0px;
  font-weight: normal;
}

#section1 {
  position: relative;
  height: 50px;
  /* width: 100%; */
  background-color: #1D4851;
  text-align:center;
  text-align: justify;
  position: relative;
  z-index: 1;
  padding: 10px;
}

.block-text {
  text-align: center;
  height: auto;
  width: 860px;
  text-align: justify;
  border-radius: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;

}

#section1-text, #section3-text, #btn1 {
  /* transform: translateX(-100%); */
  opacity: 0;
  /* transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; */
  transition: opacity 0.8s ease-in-out;
}

#section1-text.active, #section3-text.active, #btn1.active {
  /* transform: translateX(0%); */
  opacity: 1;
}

#section-img2 {
  position: fixed;
  z-index: 0;
  top: 0;
  width: 100%;
  height: 100vh;
}

#section-img2-text {
  height: auto;
  position: relative;
  top: 110px;
}

.block-text p {
  text-align: center;
}

.btn.btn-section {
  background-color: #1D4851;
  max-height: 50px;
}

.btn.btn-section {
  position: absolute;
  top: auto;
  bottom: 100px;
}

#section2 {
  color: #777;
  background-color:white;
  width: 100%;
  text-align:center;
  padding: 30px;
  text-align: justify;
  /* min-height: 480px; */
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

#section3 {
  position:relative;
  color: #777;
  /* background-color: #e8e8e8 ; */
  background-image: url("../images/landing_page/visuel_fond_pro.webp");
  /* background-attachment: fixed; */
  /* background-position: center; */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align:center;
  /* text-align: justify; */
  height: calc(100vh);
  display: flex;
  justify-content: center;
  align-items: center;
}

#section3 #section3-text {
  height: auto;
  padding: 80px;
  background-color: white;
  padding-bottom: 0px;
  padding-top: 40px;
}

.c {
  font-weight: bold !important;
  font-family: 'rawlinebold' !important;
  color: #1D4851 !important;
}

#footer {
  width: 100%;
  background-color: #1D4851;
  text-align:center;
  text-align: justify;
  position: relative;
  height: 56px;
  top: 0;
  z-index: 2;
  font-size: 14px;
}

#logo {
  position: absolute;
  top: 0;
  margin-left: 15%;
  height: 200px;
  width: 300px;
  background-color: #511d1d;
  text-align:center;
  text-align: justify;
}

#occitanie {
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0;
  margin-right: 15%;
  width: auto;
  height: 100%;
  /* background-color: #FF6707; */
  display: flex;
  flex-direction: row;
  justify-items: center;
  justify-content: center;
}

#occitanie p{
  position: relative;
  top: 50%;
  transform: translateY(-15%);
  color:#ffffff;
}

#logo-occitanie {
  position: relative;
  top: 3px;
  width: 125px;
  height: 50px;
  margin-left: 10px;
}

#logo-occitanie img {
  width: 125px;
  height: 50px;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  /* .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  } */
}

@media screen and (max-device-width: 850px), screen and (max-device-height: 500px) {


  br.break, #btn-down {
    display: none;
  }


  #parIciBtn {
    position: absolute;
    top: auto;
    bottom: 50px;
    right: 50%;
    transform: translateX(50%);
    z-index: 2;
  }

  .container-bgimg {
    /* display: flex; */
    background-color: cornflowerblue;
    position: relative;
    min-height:auto;
    /* height: 600px; */
    height: 100vh;
  }

  .bgimg-1,.bgimg-2,.bgimg-1-1  {
    background-attachment:scroll;
    width: 100%;
    min-height:auto;
    /* height: 600px; */
    height: 100vh;
  }


  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 18px;
  }

  .block-text p {
    font-size: 16px;
  }

  #sec3 .triangle.triangle.t-grey {
    position: absolute;
    top: -32px;
    z-index: 5;
    /* border-color: transparent transparent #ffffff transparent; */
  }

  #section3, #section-img2 {
    height: auto;
    padding: 20px;
  }

  #section3 #section3-text {
    height: auto;
    width: 100%;
    padding: 20px;
  }

  #section-img2-text {
    height: auto;
    position: relative;
    top: 0%;
  }

  .logoContainer2 {
    background-color: #1D4851;
    top: 0;
    z-index: 50;
    height: 60px;
  }

  #occitanie p {
    display: none !important;
  }

  #occitanie {
    z-index: 1;
    margin-right: 10px;
    width: auto;
  }

  #section-img2 {
    position: relative;
    height: 100%;
  }

  #section-img2-btn {
    position: absolute;
    top: 80%;
  }

  .img-titre-temps {
    position: relative;
    height: 100%;
    width: 100%;
  }

  .block-img-temp {
    position: absolute;
    height: 260px;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-40px);
  }

  .block-img-1 {
    position: absolute;
  }

  #block-img-titre1, #block-img-titre2{
    height: 10%;
    width: 667px;
  }

  #block-img-titre1 {
    -moz-transform: rotate(-19deg) translate(-52%, -200%);
    -webkit-transform: rotate(-19deg) translate(-52%, -200%);
    -o-transform: rotate(-19deg) translate(-52%, -200%);
    -ms-transform: rotate(-19deg) translate(-52%, -200%);
    transform: rotate(-19deg) translate(-52%, -200%);
  }

  #block-img-titre2 {
    -moz-transform: rotate(-19deg) translate(48%, 310%);
    -webkit-transform: rotate(-19deg) translate(48%, 310%);
    -o-transform: rotate(-19deg) translate(48%, 310%);
    -ms-transform: rotate(-19deg) translate(48%, 310%);
    transform: rotate(-19deg) translate(48%, 310%);

  }

  #img-titre-text {
    width: 580px;
    font-size: 15px;
    margin-bottom: 6px;
  }

  .footer {

    position: relative !important;
    padding-top: 10px!important;
  }

  .container .row {
    display: flex;
    flex-direction: column !important;
  }

  .container .row .col{
    padding: 4px;
  }
}

@media screen and (min-width: 800px) and (max-width: 849.99px) {
  :root{
    --width-img-titre: 600px;
    --height-img-titre: 150px;
  }


  #block-img-titre1, #block-img-titre2{
    width: var(--width-img-titre);;
    left: 50%;
  }

  #img-titre-text {
    width: var(--width-img-titre);
    font-size: 2.2rem;
    padding-right: 0;
  }

  #block-img-titre1 {
    -moz-transform: rotate(-19deg) translateX(-340px) translateY(-135px);
    -webkit-transform: rotate(-19deg) translateX(-340px) translateY(-135px);
    -o-transform: rotate(-19deg) translateX(-340px) translateY(-135px);
    -ms-transform: rotate(-19deg) translateX(-340px) translateY(-135px);
    transform: rotate(-19deg) translateX(-340px) translateY(-115px);
  }

  #block-img-titre2 {
    -moz-transform: rotate(-19deg) translate(-260px,-10px);
    -webkit-transform: rotate(-19deg) translate(-260px,-10px);
    -o-transform: rotate(-19deg) translate(-260px,-10px);
    -ms-transform: rotate(-19deg) translate(-260px,-10px);
    transform: rotate(-19deg) translate(-250px,0px);
  }

  #img-titre1, #img-titre2 {
    height: var(--height-img-titre);
    width: var(--width-img-titre);
  }

  #parIciBtn {
    z-index: 3;
    top: 100px;
    right: 125px;
    bottom: initial;
  }

  #section3, #section-img2 {
    height: 100vh;
  }
}

@media screen and (min-width: 600px) and (max-width: 799.99px) {
  :root{
    --width-img-titre: 600px;
    --height-img-titre: 150px;
  }


  #block-img-titre1, #block-img-titre2{
    width: var(--width-img-titre);;
    left: 50%;
  }

  #img-titre-text {
    width: var(--width-img-titre);
    font-size: 2.2rem;
    padding-right: 0;
  }

  #block-img-titre1 {
    -moz-transform: rotate(-19deg) translateX(-340px) translateY(-135px);
    -webkit-transform: rotate(-19deg) translateX(-340px) translateY(-135px);
    -o-transform: rotate(-19deg) translateX(-340px) translateY(-135px);
    -ms-transform: rotate(-19deg) translateX(-340px) translateY(-135px);
    transform: rotate(-19deg) translateX(-340px) translateY(-135px);
  }

  #block-img-titre2 {
    -moz-transform: rotate(-19deg) translate(-260px,-10px);
    -webkit-transform: rotate(-19deg) translate(-260px,-10px);
    -o-transform: rotate(-19deg) translate(-260px,-10px);
    -ms-transform: rotate(-19deg) translate(-260px,-10px);
    transform: rotate(-19deg) translate(-260px,-10px);
  }

  #img-titre1, #img-titre2 {
    height: var(--height-img-titre);
    width: var(--width-img-titre);
  }

  #parIciBtn {
    z-index: 3;
    display: none;
  }

  #section3, #section-img2 {
    height: 100vh;
  }
}

@media screen and (max-width: 699.99px) {

  :root{
    --width-img-titre: 380px;
    --height-img-titre: 100px;
  }


  #block-img-titre1, #block-img-titre2{
    width: auto;
    left: 50%;
  }

  #img-titre-text {
    width: var(--width-img-titre);
    padding-right: 0;
  }

  #block-img-titre1 {
    -moz-transform: rotate(-19deg) translateX(-200px) translateY(-60px);
    -webkit-transform: rotate(-19deg) translateX(-200px) translateY(-60px);
    -o-transform: rotate(-19deg) translateX(-200px) translateY(-60px);
    -ms-transform: rotate(-19deg) translateX(-200px) translateY(-60px);
    transform: rotate(-19deg) translateX(-200px) translateY(-60px);
  }

  #block-img-titre2 {
    -moz-transform: rotate(-19deg) translate(-210px,79%);
    -webkit-transform: rotate(-19deg) translate(-210px,79%);
    -o-transform: rotate(-19deg) translate(-210px,79%);
    -ms-transform: rotate(-19deg) translate(-210px,79%);
    transform: rotate(-19deg) translate(-210px,79%);
  }

  #img-titre1, #img-titre2 {
    height: var(--height-img-titre);
    width: var(--width-img-titre);
  }

  #parIciBtn {
    z-index: 3;
    display: none;
  }

  #section3, #section-img2 {
    height: 100vh;
  }

}

@media screen and (max-width: 376px) {

  :root{
    --width-img-titre: 350px;
    --height-img-titre: 100px;
  }


  #block-img-titre1, #block-img-titre2{
    width: auto;
    left: 50%;
  }

  #img-titre-text {
    width: var(--width-img-titre);
    padding-right: 0;
    margin: 0;
    margin-bottom: -8px
  }

  #block-img-titre1 {
    -moz-transform: rotate(-19deg) translateX(-52%) translateY(-70px);
    -webkit-transform: rotate(-19deg) translateX(-52%) translateY(-70px);
    -o-transform: rotate(-19deg) translateX(-52%) translateY(-70px);
    -ms-transform: rotate(-19deg) translateX(-52%) translateY(-70px);
    transform: rotate(-19deg) translateX(-52%) translateY(-70px);
  }

  #block-img-titre2 {
    -moz-transform: rotate(-19deg) translate(-210px,79%);
    -webkit-transform: rotate(-19deg) translate(-210px,79%);
    -o-transform: rotate(-19deg) translate(-210px,79%);
    -ms-transform: rotate(-19deg) translate(-210px,79%);
    transform: rotate(-19deg) translate(-180px,79%);
  }

  #img-titre1, #img-titre2 {
    height: var(--height-img-titre);
    width: var(--width-img-titre);
  }

  #section3, #section-img2 {
    height: auto;
  }

}

@-webkit-keyframes arrow-chevron{
  0%{-webkit-transform: translateY(0px);transform: translateY(0px);}
  50%{-webkit-transform: translateY(-3px);transform: translateY(-3px);}
  55%{-webkit-transform: translateY(0px);transform: translateY(0px);}
  100%{-webkit-transform: translateY(0px);transform: translateY(0px);}
}

@keyframes arrow-chevron{
  0%{-webkit-transform: translateY(0px);transform: translateY(0px);}
  50%{-webkit-transform: translateY(-3px);transform: translateY(-3px);}
  55%{-webkit-transform: translateY(0px);transform: translateY(0px);}
  100%{-webkit-transform: translateY(0px);transform: translateY(0px);}
}

@-webkit-keyframes arrow-chevron2{
  0%{-webkit-transform: translateY(0px);transform: translateY(0px);opacity: 0}
  25%{-webkit-transform: translateY(2.5px);transform: translateY(2.5px);opacity: 0.32}
  50%{-webkit-transform: translateY(5px);transform: translateY(5px);opacity: 0.75}
  75%{-webkit-transform: translateY(7.5px);transform: translateY(7.5px);opacity: 0.32}
  100%{-webkit-transform: translateY(10px);transform: translateY(10px);opacity: 0}
}
@keyframes arrow-chevron2{
  0%{-webkit-transform: translateY(0px);transform: translateY(0px);opacity: 0}
  4.25%{-webkit-transform: translateY(2.5px);transform: translateY(2.5px);opacity: 0.25}
  10.5%{-webkit-transform: translateY(5px);transform: translateY(5px);opacity: 0.5}
  16.75%{-webkit-transform: translateY(7.5px);transform: translateY(7.5px);opacity: 0.25}
  23%{-webkit-transform: translateY(10px);transform: translateY(10px);opacity: 0}
}