/** Block video **/
#block-video {
  width: 817px;
  margin: 150px auto 15px auto;
}
#block-video .bg{
  margin: 0 auto;
  position: relative;
  width: 800px;
  height: 350px;
  background: url('../../../img/macbook.png') no-repeat;
  background-size: 100%;
}

#block-video .bg .test-effect{
  position: relative;
  width: 500px;
  height: 300px;
  background: var(--color-darkBlue);
}

[data-aos="video-animation"] {
background: var(--color-darkBlue);
height: 227px;
line-height: 120px;
text-align: center;
width: 700px;
color: #fff;
font-weight: 700;
margin: 0 auto;
top: 24px;
position: relative;
border-radius: 10px 10px 0 0;
  cursor: pointer;
  transform: perspective(200px) rotateX(-9.5deg);
  transition-property: transform,top,width,height;
  &.aos-animate {
      transform: rotateX(9.5deg);
      top: -100px;
      height: 441px;
      width: 827px;
      border-radius: 10px;
  }
}

.box-screen{
  position: relative;
  display: flex;
  align-items: center;
}
.box-screen .wrapper-video{
  display: none;
  width: 100%;
  position: absolute;
  top: -25px;
  overflow: hidden;
}

.box-screen.aos-init.aos-animate .wrapper-video.active{
  display: block;
  animation: fadeIn 1s;
}

.box-screen.aos-init.aos-animate .wrapper-video video{
  width: 100%;
  border-radius: 10px;
}

.box-screen.aos-init.aos-animate button.btn-player {
  display: none;
  position: absolute;
  color: transparent;
  bottom: 40px;
  left: 25px;
  opacity: 1;
  line-height: 36px;
  background-color: transparent;
  border:none;
}

.box-screen.aos-init.aos-animate button.btn-volume {
  display: none;
  position: absolute;
  color: transparent;
  bottom: 95px;
  left: 25px;
  opacity: 1;
  line-height: 36px;
  background-color: transparent;
  border:none;
}

.box-screen.aos-init.aos-animate button.btn-player.active, .box-screen.aos-init.aos-animate button.btn-volume.active{
  display: block;
}

.box-screen.aos-init.aos-animate .btn-player::after {
  font-family: "Font Awesome 6 Free";
  content: '\f04c';
  font-weight: 900;
  color: #fff;
  border-radius: 50%;
  background: var(--color-pink);
  width: 20px;
  height: 20px;
  padding: 10px 13px;
}

.box-screen.aos-init.aos-animate .btn-volume::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' width='20px' version='1.1' viewBox='0 0 512 512' style='margin:3px 0 0 0;'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='M0,206.254v99.491c0,20.663,16.752,37.418,37.414,37.418h69.667V168.844H37.414 C16.752,168.844,0,185.591,0,206.254z'/%3E%3Cpath d='M280.326,99.026c-3.768-2.31-8.464-2.5-12.403-0.494l-138.431,70.313v174.319l138.431,70.313 c3.94,1.996,8.635,1.806,12.403-0.503c3.764-2.31,6.059-6.416,6.059-10.826V109.86C286.386,105.441,284.09,101.335,280.326,99.026z '/%3E%3Cpath d='M408.522,162.666c-5.066-5.626-13.725-6.073-19.346-1.007c-5.618,5.057-6.068,13.715-1.007,19.341 c19.15,21.252,28.713,48.074,28.718,75c-0.005,26.936-9.567,53.756-28.713,74.998c-5.066,5.618-4.615,14.285,1.002,19.351 c5.617,5.056,14.28,4.61,19.341-1.007c23.842-26.451,35.775-59.944,35.765-93.342C444.291,222.61,432.358,189.107,408.522,162.666z '/%3E%3Cpath d='M458.88,117.33c-5.061-5.617-13.72-6.064-19.342-0.998c-5.622,5.056-6.073,13.715-1.007,19.341 c30.722,34.092,46.068,77.156,46.077,120.326c-0.01,43.168-15.355,86.232-46.077,120.334c-5.066,5.618-4.614,14.276,1.007,19.342 c5.622,5.066,14.28,4.62,19.346-1.008C494.289,355.367,512.01,305.631,512,256C512.01,206.368,494.289,156.631,458.88,117.33z'/%3E%3Cpath d='M338.764,207.032c-5.622,5.057-6.073,13.725-1.007,19.342c7.594,8.43,11.362,18.98,11.371,29.626 c-0.009,10.644-3.777,21.194-11.371,29.634c-5.066,5.618-4.614,14.276,1.007,19.341c5.622,5.066,14.28,4.609,19.341-1.007 c12.261-13.601,18.43-30.832,18.415-47.968c0.015-17.137-6.154-34.359-18.415-47.96 C353.044,202.414,344.382,201.967,338.764,207.032z'/%3E%3C/g%3E%3C/svg%3E");
  border-radius: 50%;
  background: var(--color-pink);
  padding: 8px;
}

.box-screen.aos-init.aos-animate .btn-volume.muted::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' width='20px' version='1.1' viewBox='0 0 512 512' style='margin:3px 0 0 0;'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath class='st0' d='M0,204.883V307.12c0,21.22,17.212,38.437,38.442,38.437h71.582V166.446H38.442 C17.212,166.446,0,183.653,0,204.883z'/%3E%3Cpath class='st0' d='M288.033,94.716c-3.872-2.382-8.696-2.568-12.744-0.517l-142.237,72.246v179.112l142.237,72.246 c4.048,2.051,8.872,1.856,12.744-0.517c3.872-2.373,6.226-6.582,6.226-11.123V105.839 C294.259,101.298,291.905,97.089,288.033,94.716z'/%3E%3Cpath class='st0' d='M453.117,253.467l54.386-54.394c5.996-5.996,5.996-15.713,0-21.709c-5.996-5.996-15.713-5.996-21.709,0 l-54.386,54.385l-54.394-54.385c-5.997-5.996-15.713-5.996-21.709,0c-5.997,5.996-5.997,15.713,0,21.709l54.384,54.394 l-54.384,54.385c-5.997,5.996-5.997,15.713,0,21.709c5.996,5.996,15.712,5.996,21.709,0l54.394-54.386l54.386,54.386 c5.996,5.996,15.713,5.996,21.709,0c5.996-5.996,5.996-15.713,0-21.709L453.117,253.467z'/%3E%3C/g%3E%3C/svg%3E");
  border-radius: 50%;
  background: var(--color-pink);
  padding: 8px;
}

.box-screen.aos-init.aos-animate .btn-player.paused::after {
  font-family: "Font Awesome 6 Free";
  content: '\f04b';
  font-weight: 900;
  color: #fff;
  border-radius: 50%;
  background: var(--color-pink);
  width: 20px;
  height: 20px;
  padding: 10px 12px;
}

.box-screen .bloc-texte{
margin: 0 auto;
}

.box-screen .bloc-texte .img{
opacity: 1;
}

.box-screen .texte{
  text-align: center;
  font-family: Asap, 'sans-serif';
  font-size: 61px;
  font-weight: 700;
  line-height: 63px;
  max-width: 400px;
  text-align: center;
  margin: 0 auto;
  opacity: 1;
}

.box-screen p{
  color: var(--Blanc, #FFF);
  text-align: center;
  font-family: Asap, 'sans-serif';
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  opacity: 0.5;
  display: block;
}

#block-partners{
  color:  var(--color-darkBlue);
  font-family: Asap, 'sans-serif';
  text-align: center;
}

#block-partners .h2{
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 55px;
}

#block-partners .desc{
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

#block-partners .link a{
  color: var(--color-pink);
  font-family: Asap, 'sans-serif';
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}


#block-video h2 {
  color: var(--color-darkBlue);
  font-size: 48px;
  font-family: Asap, 'sans-serif';
  font-weight: 700;
  line-height: 70px;
  margin-bottom: 150px;
  text-align: center;
}

 /*** RESPONSIVE ***/

@media screen and (min-width: 992px) {
  #block-partners .logos{
    margin-left: 5%;
  }

  #block-partners .logos{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

}


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

  #block-partners  {
    padding: 0 15px;
  }

  #block-partners .h2 {
    font-size: 32px;
    line-height: 34px;
  }

  #block-partners .desc {
    font-size: 14px;
    text-align: left;
    line-height: normal;
  }

  #block-partners .link a {
    font-size: 14px;
    line-height: normal;
  }

  .slick-arrow-prev,.slick-arrow-next{
    bottom: 25%;
  }
}

@media screen and (max-width: 991.98px) {
  .logos img {
    width: 60%;
  }

  #block-partners .link {
    margin-top: 30px;
  }

  #block-video h2 {
    font-size: 32px;
    text-align: left;
    line-height: normal;
  }

  .slider-nav{
      display: none !important;
  }

  #block-video {
    width: auto;
    margin: 50px auto 25px auto;
    padding: 0 15px;
  }

  #block-video .bg {
    width: auto;
    height: auto;
    background:#09212F;
    border-radius: 5px;
  }

  #block-video .box-screen{
    display: block;
    padding: 0;
  }

  #block-video .box-screen .texte {
    font-size: 24px;
    line-height: 25px;
    max-width: 178px;
    padding: 20px 0 0 0;
  }

  #block-video .box-screen p {
    font-size: 8.1px;
    font-weight: 400;
    line-height: 9px;
    padding: 0 0 20px 0;
  }

  #block-video .box-screen .img {
    padding: 0;
    position: relative;
    top: -12px;
    margin: 0 0 -12px 0;
  }

  #block-video .box-screen img {
    width: 45px;
    height: auto;
  }

  .box-screen #videoPlayer{
    width: 100%;
  }

  .wrapper-video.active{
    display: block;
    position: relative;
    top: 0;
  }

  .box-screen button.btn-player{
    display: none;
    position: absolute;
    color: transparent;
    bottom: 25px;
    left: 15px;
    opacity: 1;
    background-color: transparent;
    border: none;
  }

  .box-screen button.btn-volume{
    display: none;
    position: absolute;
    color: transparent;
    bottom: 80px;
    left: 15px;
    opacity: 1;
    background-color: transparent;
    border: none;
  }

  .box-screen button.btn-player.active, .box-screen button.btn-volume.active{
    display: block;
  }

  .box-screen .btn-player::after {
    font-family: "Font Awesome 6 Free";
    content: '\f04c';
    font-weight: 900;
    color: #fff;
    border-radius: 50%;
    background: var(--color-pink);
    width: 20px;
    height: 20px;
    padding: 10px 13px;
  }

  .box-screen .btn-player.paused::after {
    font-family: "Font Awesome 6 Free";
    content: '\f04b';
    font-weight: 900;
    color: #fff;
    border-radius: 50%;
    background: var(--color-pink);
    width: 20px;
    height: 20px;
    padding: 10px 12px;
  }

  .box-screen .btn-volume::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' width='20px' version='1.1' viewBox='0 0 512 512' style='margin:3px 0 0 0;'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='M0,206.254v99.491c0,20.663,16.752,37.418,37.414,37.418h69.667V168.844H37.414 C16.752,168.844,0,185.591,0,206.254z'/%3E%3Cpath d='M280.326,99.026c-3.768-2.31-8.464-2.5-12.403-0.494l-138.431,70.313v174.319l138.431,70.313 c3.94,1.996,8.635,1.806,12.403-0.503c3.764-2.31,6.059-6.416,6.059-10.826V109.86C286.386,105.441,284.09,101.335,280.326,99.026z '/%3E%3Cpath d='M408.522,162.666c-5.066-5.626-13.725-6.073-19.346-1.007c-5.618,5.057-6.068,13.715-1.007,19.341 c19.15,21.252,28.713,48.074,28.718,75c-0.005,26.936-9.567,53.756-28.713,74.998c-5.066,5.618-4.615,14.285,1.002,19.351 c5.617,5.056,14.28,4.61,19.341-1.007c23.842-26.451,35.775-59.944,35.765-93.342C444.291,222.61,432.358,189.107,408.522,162.666z '/%3E%3Cpath d='M458.88,117.33c-5.061-5.617-13.72-6.064-19.342-0.998c-5.622,5.056-6.073,13.715-1.007,19.341 c30.722,34.092,46.068,77.156,46.077,120.326c-0.01,43.168-15.355,86.232-46.077,120.334c-5.066,5.618-4.614,14.276,1.007,19.342 c5.622,5.066,14.28,4.62,19.346-1.008C494.289,355.367,512.01,305.631,512,256C512.01,206.368,494.289,156.631,458.88,117.33z'/%3E%3Cpath d='M338.764,207.032c-5.622,5.057-6.073,13.725-1.007,19.342c7.594,8.43,11.362,18.98,11.371,29.626 c-0.009,10.644-3.777,21.194-11.371,29.634c-5.066,5.618-4.614,14.276,1.007,19.341c5.622,5.066,14.28,4.609,19.341-1.007 c12.261-13.601,18.43-30.832,18.415-47.968c0.015-17.137-6.154-34.359-18.415-47.96 C353.044,202.414,344.382,201.967,338.764,207.032z'/%3E%3C/g%3E%3C/svg%3E");
    border-radius: 50%;
    background: var(--color-pink);
    padding: 8px;
  }

  .box-screen .btn-volume.muted::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' width='20px' version='1.1' viewBox='0 0 512 512' style='margin:3px 0 0 0;'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath class='st0' d='M0,204.883V307.12c0,21.22,17.212,38.437,38.442,38.437h71.582V166.446H38.442 C17.212,166.446,0,183.653,0,204.883z'/%3E%3Cpath class='st0' d='M288.033,94.716c-3.872-2.382-8.696-2.568-12.744-0.517l-142.237,72.246v179.112l142.237,72.246 c4.048,2.051,8.872,1.856,12.744-0.517c3.872-2.373,6.226-6.582,6.226-11.123V105.839 C294.259,101.298,291.905,97.089,288.033,94.716z'/%3E%3Cpath class='st0' d='M453.117,253.467l54.386-54.394c5.996-5.996,5.996-15.713,0-21.709c-5.996-5.996-15.713-5.996-21.709,0 l-54.386,54.385l-54.394-54.385c-5.997-5.996-15.713-5.996-21.709,0c-5.997,5.996-5.997,15.713,0,21.709l54.384,54.394 l-54.384,54.385c-5.997,5.996-5.997,15.713,0,21.709c5.996,5.996,15.712,5.996,21.709,0l54.394-54.386l54.386,54.386 c5.996,5.996,15.713,5.996,21.709,0c5.996-5.996,5.996-15.713,0-21.709L453.117,253.467z'/%3E%3C/g%3E%3C/svg%3E");
    border-radius: 50%;
    background: var(--color-pink);
    padding: 8px;
  }
}


@media screen and (min-width: 575px) and (max-width: 991.98px){
  #block-video .box-screen .texte {
    font-size: 36px;
    line-height: 38px;
    max-width: 360px;
    padding: 80px 0 0 0;
  }

  #block-video .box-screen img {
    width: 80px;
    top: -5px;
    position: relative;
  }
  #block-video .box-screen p {
    font-size: 18px;
    line-height: 18px;
    padding: 0 0 80px 0;
  }
}
