:root {
  /* Official colors - style guide */
  --afp-blue: #325aff;
  --afp-black: #000;
  --afp-white: #fff;
  
  /* sub main colors */
  --afp-pink: #FF6E6E;
  --afp-yellow: #FFD223;
  --afp-orange: #FFA050;
  --afp-turquoise: #7DFAAF;
  --afp-purple: #CD73FA;
  --afp-light-blue: #87EBFA;
  --afp-darker-white: #F5F5F7;
  
  /* secondary colors */
  --afp-secondary-grey-100: #9B9187;
  --afp-secondary-grey-80: #AFA79F;
  --afp-secondary-grey-60: #C3BDB7;
  --afp-secondary-grey-40: #D7D3CF;
  --afp-secondary-grey-20: #EBE9E7;
  --afp-secondary-grey-10: #F5F4F3;
  
  
  /* Additional colors - custom */
  --afp-light-green: #7DFAAF;
  --afp-darker-green: #65ce8f;
  --afp-lighter-bleu: #E8F8EB;
  --afp-darker-orange: #e06f12;
  --afp-darker-pink: #d96e6e;
  --afp-blue-darker: #2544bf;
  --extremely-light-gray: rgba(0, 0, 0, 0.1);
  /* Others */
  --max-height-landing-presentation-container: 1280px;
  --min-height-landing-presentation-container: min(
    var(--max-height-landing-presentation-container),
    min(100vh, 100vw)
  );
  }
  
/* BASE CSS */
html {
  font-family: 'Source Sans Pro', Arial, sans-serif;
}
/*
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  height: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
#main-container a {
  color: inherit !important;
  text-decoration: none !important;
}
#main-container {
  margin: auto;
  width: 100%;
  color: white;
}
.light-black-filter {
  min-height: var(--min-height-landing-presentation-container);
  background-color: rgba(0,0,0,0.1);
}
/* Landing Container */

#landing-container {
  min-height: var(--min-height-landing-presentation-container);    
  background-image: url("/communication/products/storytelling/neymar/neymar-bg-img1.jpg");
  background-size: cover;
  background-position-x: center ;
}
.black-filter {
  min-height: var(--min-height-landing-presentation-container);
  background-color: rgba(0,0,0,0.1);
  padding: 1rem;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  gap: 2rem;
}
#main-container .landing-button {
  background-color: var(--afp-pink);
  padding: 5px 35px;
  width: fit-content;
  width: -moz-fit-content;
  border-radius: 30px;
  font-size: 1.5rem !important;
  /* align-self: flex-start;
  position: absolute;
  right: 10px; */
  align-self: flex-end;
}
.landing-button:hover {
  background-color: var(--afp-darker-pink);
}
#main-container .h2-landing {
  font-size: 2.5rem !important;
  font-weight: 700;
}
@media screen and (max-width: 575px) {
  #main-container .landing-button {
      font-size: 1rem !important;
  }
}
@media screen and (min-width: 576px) {
  #main-container .h2-landing {
  font-size: 3rem !important;
  }
}
@media screen and (min-width: 1108px) {
  #main-container .h2-landing {
  font-size: 4rem !important;
  }
}
@media screen and (min-width: 1376px) {
  #main-container .h2-landing {
  font-size: 5rem !important;
  }
  
}
@media screen and (min-width: 1645px) {
  #main-container .h2-landing {
  font-size: 6rem !important;
  }
}
#main-container .arrow {
  cursor: pointer;
  align-self: center;
  font-size: 1.7rem !important;
  font-weight: 700;
  margin-bottom: 2rem;
}
.arrow svg {
  width: fit-content;
  width: -moz-fit-content;
  margin: auto;
  margin-top: 2rem;
}

/* Section 1 */
#section-1 {
  min-height: var(--min-height-landing-presentation-container);
  
  background-image: url("/communication/products/storytelling/neymar/neymar-bg-img2.jpg");
  background-size: cover;
  /* background-position-y: 80%; */
  background-position-x: center ;
  position: relative;
}
.flex-div {
  padding: 0 1rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  min-height: var(--min-height-landing-presentation-container);
}
.flex-div > div {
  width: 46%;
}
.flex-b1 {
  display: flex;
  flex-direction: column;
}
#section-1 .flex-b1 {
  align-self: center;
}
.h3-title {
  display: flex;
  height: fit-content;
  height: -moz-fit-content;
  margin-top: 5rem;
}
#main-container .h3-title h3 {
  width: 100%;
  font-size: 3rem !important;
  font-weight: 700;
}
.align-right span::before {
  content: "";
  position: absolute;
  bottom:0;
  left: 0;
  right: 0;
  height: 2rem;
  border-top: 3px solid var(--afp-white);
}
.align-right span {
  margin-right: 2rem;
  position: relative;
  width: 100%;
}

.padding-bloc {
  padding: 1rem 2rem;
  align-self: center;
}
#main-container .bloc-text {
  background-color: rgba(0,0,0,0.5);
  padding: 2rem;
  height: fit-content;
  height: -moz-fit-content;
  font-size: 1.7rem !important;
  font-weight: 600;
}
.first-s {
  position: relative;
  top: 100px;
}
.separator {
  width: 7px;
  background-color: var(--afp-white);
  border: none;
  height: auto;
}


/* Section 2 */
#section-2 {
  min-height: var(--min-height-landing-presentation-container);

  background-image: url("/communication/products/storytelling/neymar/neymar-bg-img3.jpg");
  background-size: cover;
  background-position-y: 80%;
  background-position-x: center ;
}
.align-left span:after {
  content: "";
  position: absolute;
  bottom:0;
  left: 0;
  right: 0;
  height: 2rem;
  border-top: 3px solid var(--afp-white);
}
.align-left span {
  position: relative;
  width: 100%;
}

.auto-slider{
  position: relative;
  box-sizing: content-box;
  display: inline-block;
  margin: 2rem auto;
  overflow: hidden;
  width: 60%;

  box-shadow: -24px 21px 0px rgba(252, 163, 17, 0.8);
  filter: drop-shadow(rgba(0, 0, 0, 0.5) 7px -4px 4px);

}
div#slider { overflow: hidden; }
div#slider .img-b2 img { width: 33.33%; float: left; }
div#slider .img-b2 { 
position: relative;
width: 300%;
margin: 0;
left: 0;
text-align: left;
font-size: 0 !important;
animation: 9s sliding ease infinite; 
}
@keyframes sliding{
0%{left: 0%; }
33.32%{left: 0%;}
33.33%{left: -100%;}
66.65%{left: -100%;}
66.66%{left: -200%;}
99.99%{left: -200%;}
100%{left: 0%;}
}        
.remove-p-left {
  padding-left: 0;
}
.space-around {
  justify-content: space-around;
}

/* Section 3 */
#section-3 {
  min-height: var(--min-height-landing-presentation-container);

  background-image: url("/communication/products/storytelling/neymar/neymar-bg-img4.jpg");
  background-size: cover;
  /* background-position-y: 80%; */
  background-position-x: center ;
  position: relative;
}
.last-s {
  height: 121px;
}
/* .img-b3 img{
  width: 70%;
  margin: auto;
  box-shadow: 24px 24px 0px rgba(252, 163, 17, 0.8);
  position: relative;
  bottom: 4rem;
} */
.auto-slider2{
  position: relative;
  box-sizing: content-box;
  display: inline-block;
  margin: 0 auto;
  overflow: hidden;
  width: 70%;

  bottom: 4rem;

  box-shadow: 24px 24px 0px rgba(252, 163, 17, 0.8);
  filter: drop-shadow(rgba(0, 0, 0, 0.5) 7px -4px 4px);

}
div#slider { overflow: hidden; }
div#slider .img-b3 img { width: 25%; float: left; }
div#slider .img-b3 { 
position: relative;
width: 400%;
margin: 0;
left: 0;
text-align: left;
font-size: 0 !important;
animation: 12s sliding2 ease infinite; 
}
@keyframes sliding2{
0%{left: 0%; }
24.99%{left: 0%;}
25%{left: -100%;}
49.99%{left: -100%;}
50%{left: -200%;}
74.99%{left: -200%;}
75%{left: -300%;}
99.99%{left: -300%;}
100%{left: 0%;}
}        
.invisible {
  background-color: unset;
}

/* Section 4 form */
#section-4 {
  padding: 2rem 1rem;
  background-color: rgb(34, 34, 34);
  color: var(--afp-white);
}
#main-container .h2-b4 {
  font-size: 3rem !important;
  margin-bottom: 2rem;
  font-weight: 400;
  text-align: center;
}


/* Responsive adaptation */
@media screen and (max-width:1400px) {
  #main-container .h3-title, #section-3 .h3-title h3 {
      font-size: 2rem !important;
  }
  #main-container .bloc-text {
      font-size: 1.5rem !important;
  }

  .first-s {
    top: 63px;
  }
  
  #section-3 .video {
      bottom: 2%;
  }
}

hr {
  opacity: unset;
  margin: unset !important;
}

@media screen and (min-width:1401px) {
  .first-s {
      top: 63px;
  }
}

@media screen and (max-width:992px) {
  #main-container .bloc-text {
      font-size: 2rem !important;
      margin-bottom: 1rem;
  }
  .first-s {
      top: 68px;
  }
  .h3-title {
      order: -1;
  }
  #main-container .h3-title h3 {
      font-size: 2rem !important;
  }
  .align-left span::before {
      content: "";
      position: absolute;
      bottom:0;
      left: 0;
      right: 0;
      height: 2rem;
      border-top: 5px solid var(--afp-white);
    }
  .align-left span {
      margin-right: 1rem;
      position: relative;
  }
  .align-left span::after {
      display: none;
  }
  .padding-bloc, .h3-title h3 {
      order: 2;
  }
  .separator {
      order: -1;
      position: absolute;
      height: 83vh;
      left: 1rem;
      width: 4px;
  }
  .flex-div {
      flex-wrap: wrap;
      justify-content: flex-start;
  }
  .flex-div > div {
      width: 100%;
  }
  #main-container .padding-bloc {
      padding-left: 1rem;
      padding-right: 0;
  }
  .align-right span::before, .align-left span::before {
      border-top: 3px solid var(--afp-white);
  }
  .auto-slider2 {
      bottom: 0;
      margin: 2rem auto;
  }
  .last-s {
      height: 96px;
  }
}

@media screen and (max-width:767px) {
  #main-container .bloc-text {
      font-size: 1rem !important;
      padding: 1rem;
  }
  #main-container .h3-title, #section-3 .h3-title h3 {
      font-size: 1.5rem !important;
  }
  .first-s {
      top: 54px;
  }
  .auto-slider {
      width: 90%;
      margin: 2rem;
  }
  .auto-slider2 {
      width: 90%;
  }
}

/* remove drupal title */
.node-type-afp-produit .panel-pane.pane-entity-view.pane-node .line.mb1.bgblue.line.relative.mb2.pt1.pb2.pa0m, .info_social.mb2, #breadcrumb.line.hidem {
  display: none;
}
#main-container .img_margin {
  margin: 0 !important;
}
.panel-pane.pane-entity-view.pane-node .article_content.line.linemam.textcontent.mb2 {
  padding: 0;
}
html body.page-node div.article_content #main-container .arrow p {
  font-size: inherit ! important;
}
.textcontent #main-container {
  line-height: initial !important;
}
#navbar-administration.navbar-oriented .navbar-tray-vertical>.navbar-lining:before {
  display: none;
}