@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* @font-face {
  font-family: "Secret-Grass";
  src: url("../fonts/Secret Grass.otf") format("otf");
  font-weight: normal;
  font-style: normal;
} */

@font-face {
  font-family: "Secret-Grass";
  src: url("../fonts/SecretGrass.eot");
  src: url("../fonts/SecretGrass.eot?#iefix") format("embedded-opentype"),
    url("../fonts/SecretGrass.woff2") format("woff2"),
    url("../fonts/SecretGrass.woff") format("woff"),
    url("../fonts/SecretGrass.ttf") format("truetype"),
    url("../fonts/SecretGrass.svg#SecretGrass") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Colors: */
  --unnamed-color-fa739d: #fa739d;
  --unnamed-color-4cc686: #4cc686;
  --color-btn: #edaf3b;
  --unnamed-color-ffffff: #ffffff;
  --color-text: #184572;
  --unnamed-color-3a8bdd: #3a8bdd;
  --unnamed-color-e3effc: #e3effc;
  --unnamed-color-D8EBFF: #d8ebff;

  --font-grass: "Secret-Grass";
}
.text-center {
  text-align: center !important;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  color: var(--color-text);
  overflow-x: hidden;
}
body p {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  line-height: normal;
}
body h2 {
  font-family: "Poppins", sans-serif;
  font-size: 50px;
}
body span.font2 {
  font-family: "Secret-Grass", sans-serif;
}
body h3 {
  font-family: "Poppins", sans-serif;
  font-size: 38px;
  font-style: normal;
}
/* body *{
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
} */

body img {
  max-width: 100%;
}
.hvr-grow {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  /*****************/
  background-color: var(--color-btn);
  color: var(--color-text);
  padding: 15px 25px 15px 25px;
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: "Poppins";
  font-weight: bold;
  letter-spacing: 0.28px;
  font-size: 20px;
  gap: 10px;
}
.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  color: var(--color-text);
}

.d-mobile {
  display: none;
}

.ncontainer {
  width: 1600px;
  max-width: 100%;
  margin: 0 auto;
  padding: 3% 30px;
}

.section .titre-section {
  text-align: center;
}

.section .titre-section h3 {
  font-size: 38px;
  font-family: "Poppins" !important;
  font-weight: bold;
  color: #184572 !important;
}

.section .titre-section span {
  font-size: 53px;
  font-family: "Secret-Grass";
  color: var(--unnamed-color-3a8bdd) !important;
}

.section .titre-section p {
  font-size: 19px;
  font-family: "Poppins" !important;
  font-weight: bold;
  color: #184572 !important;
}
/************************************************************************/

.section-slide {
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .sections-header {
    background-color: #fff;
    width: 100%;
    max-width: 100%;
    .rows {
      width: 1500px;
      max-width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      gap: 3%;
      .container-fluid {
        flex-direction: column;
      }
    }
    .w-300 {
      width: 100%;
      max-width: 100%;
      text-align: left;
    }
    .col-left {
      width: 13%;
      text-align: left;
    }

    .navbar {
      width: 88%;
      max-width: 100%;
      .navbar-collapse {
        width: 100%;
        max-width: 100%;
        justify-content: space-between;
      }

      .navbar-nav {
        width: 78%;
        max-width: 100%;
        justify-content: space-around;
      }

      .div-btn-nav {
        width: 22%;
        text-align: right;
      }
      .hvr-grow {
        padding: 15px 25px 15px 25px;
        font-size: 22px;
        justify-content: center;
        gap: 30px;
        width: 320px;
      }
      button.hvr-grow {
        color: var(--color-text);
        border: unset;
      }
    }

    .navbar-nav .form-check {
      min-height: 2.5rem;
      padding-left: 2.5em;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      span.prix {
        font-size: 25px;
        font-weight: bold;
        color: var(--color-text);
      }
    }

    .navbar-nav .form-check .form-check-input {
      margin-left: -2.5em;
    }
    .navbar-nav .form-check-input {
      width: 40px;
      max-width: 100%;
      height: 40px;
      background-color: var(--unnamed-color-e3effc);
      border-color: var(--unnamed-color-e3effc);
    }

    .navbar-nav .form-check-input:checked {
      background: var(--color-text);
      border: 10px var(--unnamed-color-e3effc) solid;
    }

    /****************************************/

    .li-input .form-text {
      background-color: var(--unnamed-color-e3effc);
      color: var(--color-text);
      width: 210px;
      max-width: 100%;
      display: block;
      text-align: center;
      padding: 0px 15px;
      font-size: 30px;
      position: relative;
      margin-top: unset;
    }
    .li-input input {
      width: 80%;
      max-width: 100%;
      font-size: 18px;
      background: transparent;
      border: unset;
      color: var(--color-text);
      z-index: 9;
      position: relative;
      outline: unset;
      font-weight: bold;
    }
    .li-input .form-text .span-placeholder {
      position: absolute;
      font-size: 18px;
      color: var(--color-text);
      top: 50%;
      left: 50%;
      z-index: 0;
      display: block;
      width: 100%;
      transform: translate(-50%, -50%);
      font-weight: bold;
    }

    .li-input:focus + .span-placeholder,
    .li-input:not(:focus):not(:placeholder-shown) + .span-placeholder {
      opacity: 0;
    }
  }

  .div-head {
    padding: 25px 15px;
    position: relative;
    z-index: 9;
  }
  .div-log {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .img-logo {
      width: 200px;
      max-width: 100%;
    }
  }
  .div-banner {
    background-image: url(../images/HEADER.png);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    position: relative;
    .div-sun {
      position: absolute;
      top: -156px;
      left: 46%;
      transform: translateX(-50%);
      img {
        animation: rotate-animation 20s infinite linear;
      }
    }
    .div-bird {
      position: absolute;
      top: -160px;
      right: 20px;
    }
    .div-niege {
      position: absolute;
      top: 50px;
      left: 34%;
      transform: translateX(-50%);
      z-index: 8;
      animation: UpDown 5s infinite linear;
      img {
      }
    }
  }
  .rows {
    width: 1600px;
    max-width: 100%;
    margin: 0 auto;
  }

  .row-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1600px;
    max-width: 100%;
    padding-bottom: 35px;
    position: relative;
    .div-caption {
      width: 600px;
      max-width: 100%;
      text-align: center;
      position: relative;
      z-index: 2;
      .img-woff {
        z-index: 3;
        position: relative;
        width: 70%;
      }
      .div-txt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        height: 230px;
        margin-top: -30px;
        z-index: 2;
        * {
          z-index: 2;
          font-size: 18px;
          text-align: center;
          text-decoration: underline;
        }
        .div-bg {
          position: absolute;
          width: 90%;
          max-width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          right: 0;
          z-index: 0;
          border: var(--unnamed-color-3a8bdd) 25px solid;
          border-radius: 50px;
          margin: 0 auto;
          background: #e9fffe;
        }
        img {
          width: 24%;
        }
        p {
          width: 50%;
        }
      }
    }
    .col-img {
      position: relative;
      z-index: 1;
      img {
        width: 80%;
        position: relative;
        z-index: 1;
      }
      &:before {
        content: "";
        position: absolute;
        right: 5%;
        top: 3%;
        background-image: url(../images/illus-dog.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 114px;
        height: 136px;
        z-index: 0;
      }
      &:after {
        content: "";
        position: absolute;
        left: -27%;
        top: 20%;
        background-image: url(../images/illus-dog2.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 400px;
        height: 211px;
        z-index: 0;
      }
    }

    .div-video {
      position: absolute;
      right: 35px;
      bottom: 15px;
      z-index: 9;
      .btn-video {
        background-color: #3a8bdd;
        color: #fff;
        width: 275px;
        justify-content: space-around;
      }
    }
  }
}

.section-1 {
  padding: 3% 0px 3% 15px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75%;
    background-image: url(../images/FOND-s1.png);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    z-index: -1;
  }
  .rows {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 1715px;
    max-width: 100%;
    margin: 0 0 0 auto;
    margin-bottom: 22%;
    .col-left {
      width: 38%;
      max-width: 100%;
      display: block;
      &::before {
        content: "";
        position: absolute;
        bottom: -30%;
        right: 0;
        width: 116px;
        height: 113px;
        background-image: url(../images/soleil.png);
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;
        z-index: 3;
      }
      .div-title {
        span {
          display: block;

          &.font1 {
            font-size: 45px;
            font-weight: bold;
          }
          &.font2 {
            color: #3a8bdd;
            font-size: 75px;
          }
        }
      }
      .div-icons {
        display: flex;
        justify-content: space-between;
        margin-bottom: 25px;
        > div {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-direction: column;
          span {
            display: block;
            font-weight: 600;
          }
        }
      }
      p {
        font-size: 20px;
        margin-bottom: 8%;
      }
    }

    .col-right {
      width: 55%;
      max-width: 100%;
      .slide {
        background-image: url(../images/FOND3.png);
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;
        border-radius: 20px;
        padding: 15px 30px;
        width: 520px;
        max-width: 520px;
        margin-right: 35px;

        .d-block {
          display: block;
        }
        .d-mob {
          display: none;
        }
        &.slide2 {
          .div-txt2 {
            .div-bg {
              background-color: #cff5ea;
            }
          }
          .div-txt {
            background-color: #cff5ea;
            padding: 25px 30px 25px 30px;
          }
        }
        .div-title {
          display: flex;
          align-items: center;
          gap: 20px;
          margin-bottom: 15px;
          h2 {
            font-family: var(--font-grass);
          }
          img {
            margin-top: -15px;
          }
        }
        .div-txt {
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          background-color: var(--unnamed-color-D8EBFF);
          border-radius: 20px;
          padding: 25px 30px 25px 0px;
          gap: 20px;
          margin-bottom: 20px;
          img {
            margin-left: -18px;
          }
        }
        .div-txt2 {
          display: flex;
          justify-content: space-between;
          position: relative;
          gap: 20px;
          .div-bg {
            background-color: var(--unnamed-color-D8EBFF);
            border-radius: 20px;
            padding: 10px 25px;
            margin-bottom: unset;
            vertical-align: middle;
            display: flex;
            align-items: center;
            justify-self: center;
          }
        }
      }
    }
  }

  .rows2 {
    display: flex;
    align-items: center;
    width: 1545px;
    max-width: 100%;
    margin: 0 auto;
    .img-abs {
      position: absolute;
      bottom: 0;
      right: 0;
      height: auto;
      z-index: -1;
    }
    .div-title {
      width: 30%;
      h2 {
        line-height: 65px;
        span {
          display: block;
          font-family: var(--font-grass);
          color: var(--unnamed-color-3a8bdd);
          font-size: 120px;
        }
      }
    }
    .div-txt {
      width: 45%;
    }
    .img-abs1,
    .img-abs2 {
      display: none;
    }
  }
  .slick-prev,
  .slick-next {
    width: 60px;
    height: 60px;
    z-index: 9;
  }
  .slick-next {
    right: 40px;
  }
  .slick-prev {
    transform: rotate(-180deg) translate(0, 50%);
  }
  .slick-prev:before,
  .slick-next:before {
    font-family: unset;
    content: unset;
  }
  .slick-arrow.slick-disabled {
    display: none !important;
  }
}

.section-2 {
  padding: 3% 0px 3% 15px;
  position: relative;
  .div-filier {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 253px;
    z-index: 0;
  }
  .rows {
    width: 1715px;
    max-width: 100%;
    margin: 0 0 0 auto;
    position: relative;
    z-index: 2;
    .div-title {
      text-align: center;
      h2 {
        font-family: var(--font-grass);
        color: var(--unnamed-color-3a8bdd);
        position: relative;
        width: fit-content;
        margin: 0 auto;
        &:before {
          content: "";
          position: absolute;
          top: 40px;
          left: -90px;
          transform: translateY(-50%);
          width: 70px;
          height: 75px;
          background-image: url(../images/fleche.png);
          background-size: contain;
          background-repeat: no-repeat;
        }

        &:after {
          content: "";
          position: absolute;
          top: 40px;
          right: -90px;
          transform: translateY(-50%);
          width: 70px;
          height: 75px;
          background-image: url(../images/fleche-right.png);
          background-size: contain;
          background-repeat: no-repeat;
        }
      }
    }
    .div-slide {
      .slick-track {
        display: flex;
        align-items: center;
        padding-top: 3%;
      }
      .item {
        .div-content {
          width: 410px;
          max-width: 100%;
          margin: 0 auto;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
        }
        img {
          margin-bottom: 30px;
        }
        .div-txt {
          text-align: left;
          h3 {
            font-size: 35px;
            font-family: var(--font-grass);
            color: var(--unnamed-color-3a8bdd);
          }
        }
        &.item1 {
          img {
            transform: rotate(-10deg);
          }
        }
        &.item2 {
          img {
            transform: rotate(8deg);
          }
        }
        &.item3 {
          img {
            transform: rotate(-12deg);
          }
        }
        &.item4 {
          img {
            transform: rotate(8deg);
          }
        }
      }
    }
  }

  .slick-prev,
  .slick-next {
    width: 60px;
    height: 60px;
    z-index: 9;
  }
  .slick-next {
    right: 40px;
  }
  .slick-prev {
    left: 40px;
  }
  .slick-prev {
    transform: rotate(-180deg) translate(0, 50%);
  }
  .slick-prev:before,
  .slick-next:before {
    font-family: unset;
    content: unset;
  }
  .slick-arrow.slick-disabled {
    display: none !important;
  }
}

.section-3 {
  background-size: cover;
  background-repeat: no-repeat;
  padding: 3% 0px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: #e3f7f1;
    width: 100%;
    height: 70%;
    z-index: 0;
  }
  .section-rows {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      background-image: url(../images/FOND-bg3.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: bottom left;
      width: 100%;
      height: 90%;
      z-index: -1;
    }
    .left-col {
      z-index: 3;
      position: relative;
    }
    .right-col {
      .div-chienbef {
        position: absolute;
        width: 680px;
        max-width: 100%;
        height: 450px;
        right: 16%;
        z-index: 1;
      }
    }
  }
  .rows {
    width: 1630px;
    max-width: 100%;
    margin: 0 auto;

    background: #e3f7f1;

    .div-title {
      padding: 0px 15px;
      position: relative;
      h2 {
        font-weight: bold;
        font-size: 40px;
      }
    }
  }
  .div-gestion {
    padding: 0px 15px;
    margin-bottom: 35px;
  }

  .card-gestion {
    background-color: rgb(255 255 255 / 70%);
    display: flex;
    justify-content: space-between;
    border-radius: 88px;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    z-index: 2;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    overflow: hidden;
    cursor: pointer;
    margin: 30px 0px;
    padding-right: 25px;
    &:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transform-origin: 0 50%;
      transform-origin: 0 50%;
      -webkit-transition-property: transform;
      transition-property: transform;
      -webkit-transition-duration: 1s;
      transition-duration: 1s;
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
      border-radius: 50px;
    }
    /* &:hover {
      box-shadow: 0px 0px 30px rgb(205 50 123 / 80%);
    } */

    .div-desc {
      padding-left: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 45%;
      max-width: 100%;
    }

    .div-don > span {
      display: block;
    }
    .div-don .prix {
      font-size: 32px;
      font-weight: bold;
      color: #fff;
      font-family: "Poppins", sans-serif;
    }
    .s-description {
      color: #fff;
    }

    .div-btn {
      max-height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 31%;
      max-width: 100%;
      .hvr-grow {
        padding: 20px 25px 20px 25px;
      }
    }

    .div-offer {
      display: flex;
      width: 25%;
      max-width: 100%;
      .div-don {
        text-align: center;
        background: var(--color-text);
        width: 325px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
      }
      img {
        width: 51px;
        max-width: 100%;
      }
    }
  }
}

.section-4 {
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0px 0px 3% 0px;
  position: relative;
  background: #e3f7f1;
  .rows {
    width: 1630px;
    max-width: 100%;
    margin: 0 auto;
    .col-rows {
      width: 1300px;
      max-width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .col-left {
      width: 53%;
      padding: 0px 15px;
      position: relative;
      p {
        font-size: 20px;
      }
    }
    .div-right {
      width: 40%;
    }
  }
}
/********************************************************************/

/* section-5*/
.section-rows {
  padding-top: 50px;
  position: relative;
  z-index: 2;
  padding-bottom: 110px;
}

.section-rows::before {
  content: "";
  position: absolute;
  width: 100%;
  max-width: 100%;
  height: 320px;
  background-image: url(../images/bef-sect-5.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  bottom: 0;
  z-index: 1;
}

.section-rows .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.section-rows .content .left-col,
.section-rows .content .right-col {
  width: 49%;
}

.section-rows .content .left-col .titre {
  width: 80%;
  h3 {
    font-weight: bold;
  }
}

.section-rows .content .left-col .text {
  width: 80%;
}

.section-rows .content .left-col .text p {
  font-size: 16px;
  font-family: "Poppins";
  color: #184572;
}

.section-rows .content .left-col .titre h3 span {
  font-size: 53px;
  font-family: "Secret-Grass";
  color: var(--unnamed-color-3a8bdd) !important;
}

.section-rows .content .right-col .light-div {
  display: flex;
  justify-content: end;
  position: relative;
}

/* .section-rows .content .right-col .light-div::after{
  content: '';
  position: absolute;
  width: 70%;
  max-width: 100%;
  height: 310px;
  background-image: url(../images/bef-chien.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  bottom: -84px;
  left: -4%;
  z-index: 1;
} */

.section-rows .content .right-col .blue-box {
  width: 420px;
  max-width: 100%;
  background-image: url(../images/img-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 15px 35px 20px 55px;
  position: relative;
  z-index: 2;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-rows .content .right-col .blue-box::before {
  content: "";
  position: absolute;
  width: 68px;
  max-width: 100%;
  height: 110px;
  background-image: url(../images/light.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  top: -18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

/* .section-rows .content .right-col .blue-box::after {
  content: "";
  position: absolute;
  width: 100%;
  max-width: 100%;
  height: 310px;
  background-image: url(../images/bef-chien.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  bottom: -87px;
  left: -79%;
  z-index: 1;
} */

.section-rows .content .right-col .blue-box .text span,
.section-rows .content .right-col .blue-box .text p {
  font-size: 16px;
  font-family: "Poppins";
  color: #184572;
}

.section-rows .content .right-col .blue-box .text span {
  background-color: #3a8bdd;
  color: #fff;
  font-weight: bold;
  padding: 2px;
}

/**slider**/
.section.section-6 {
  padding: 3% 15px;
  .div-btn {
    text-align: center;
  }
}
.section.section-6 .slider-items {
  margin-top: 70px;
  margin-bottom: 70px;
  width: 90%;
  max-width: 100%;
  margin-left: auto;
}

.section.section-6 .slick-list {
  padding-top: 100px;
}

.section.section-6 .carte-container {
  background-color: #3a8bdd;
  padding: 15px;
  border-radius: 20px;
  position: relative;
}

.section.section-6 .carte-container::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px dashed #fff;
  border-radius: 16px;
  pointer-events: none;
}

.section.section-6 .carte-contenu {
  background-color: #e3effc;
  padding: 10px 10px 10px 10px;
  border-radius: 12px;
  position: relative;
  z-index: 1;
  min-height: 315px;
}

.section.section-6 .carte-contenu .image {
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: -95px;
  margin-bottom: 20px;
}

.section.section-6 .carte-contenu .image img {
  width: 160px;
}

.section.section-6 .carte-contenu h5 {
  font-size: 22px;
  font-family: "Poppins";
  font-weight: bold;
  color: #184572;
  text-align: center;
}

.section.section-6 .carte-contenu p {
  font-size: 13px;
  color: #184572;
  margin-bottom: 8px;
  font-family: "Poppins";
}

.section.section-6 .carte-contenu .auteur {
  color: #184572;
  margin: unset;
}

.section.section-6 .carte-container.item-1,
.section.section-6 .carte-container.item-2,
.section.section-6 .carte-container.item-3,
.section.section-6 .carte-container.item-4 {
  margin-right: 10px;
}

.section.section-6 .carte-container.item-2 {
  background-color: #4cc686;
  padding: 15px;
  border-radius: 20px;
  position: relative;
}

.section.section-6 .carte-container.item-2 .carte-contenu {
  background-color: #d1f2e8;
}

.section.section-6 .carte-container.item-2::after {
  background-image: url(../images/item-2.png);
}

.section.section-6 .carte-container.item-3 {
  background-color: #edaf3b;
  padding: 15px;
  border-radius: 20px;
  position: relative;
}

.section.section-6 .carte-container.item-3 .carte-contenu {
  background-color: #ffebca;
}

.section.section-6 .carte-container.item-3::after {
  background-image: url(../images/item-3.png);
}

.section.section-6 .carte-container.item-4 {
  background-color: #fa739d;
  padding: 15px;
  border-radius: 20px;
  position: relative;
}

.section.section-6 .carte-container.item-4 .carte-contenu {
  background-color: #ffedf3;
}

.section.section-6 .carte-container.item-3::after {
  background-image: url(../images/item-3.png);
}

.section.section-6 .slick-next:before {
  content: url(../images/slide-right.png) !important;
  line-height: 0 !important;
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%)
    hue-rotate(295deg) brightness(104%) contrast(102%);
  opacity: unset;
}

.section.section-6 .slick-next {
  background-color: #3a8bdd;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50px;
  right: 7%;
  top: 46%;
  z-index: 11;
}

.section.section-6 .slick-prev:before {
  content: url(../images/slide-left.png) !important;
  line-height: 0 !important;
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%)
    hue-rotate(295deg) brightness(104%) contrast(102%);
  opacity: unset;
}

.section.section-6 .slick-prev {
  background-color: #3a8bdd;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50px;
  right: 7%;
  top: 46%;
  z-index: 11;
}

.section.section-6 .slick-arrow.slick-disabled {
  display: none !important;
}

.section.section-6 .my-btn {
  display: flex;
  justify-content: center;
}

.my-btn a {
  color: #184572;
  font-family: "Poppins";
  font-weight: bold;
  display: flex;
  background-color: #edaf3b;
  justify-content: center;
  gap: 15px;
  align-items: center;
  text-decoration: none;
  border-radius: 35px;
  font-size: 16px;
  width: fit-content;
  transition: 0.5s ease all;
  padding: 10px 30px 10px 20px;
}

.my-btn a img {
  width: 40px;
}

.my-btn {
  a {
    color: #184572;
    font-family: "Poppins";
    font-weight: bold;
    display: flex;
    background-color: #edaf3b;
    justify-content: center;
    gap: 15px;
    align-items: center;
    text-decoration: none;
    border-radius: 35px;
    font-size: 16px;
    width: fit-content;
    transition: 0.5s ease all;
    padding: 10px 30px 10px 20px;

    img {
      width: 40px;
    }
  }
}

section {
  &.section-7 {
    background-color: #e3effc;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      width: 72%;
      max-width: 100%;
      height: 223px;
      background-image: url(../images/Illus.png);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      bottom: 0;
      left: 0;
      z-index: 11;
    }

    .content {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      .left-col,
      .right-col {
        width: 45%;
        max-width: 100%;
      }

      .left-col {
        .titre {
          h3 {
            font-size: 38px;
            font-family: "Poppins" !important;
            font-weight: bold;
            color: #184572 !important;

            span {
              font-size: 53px;
              font-family: "Secret-Grass";
              color: var(--unnamed-color-3a8bdd) !important;
            }
          }
        }
      }

      .text {
        p {
          font-size: 16px;
          font-family: "Poppins";
          color: #184572;
        }
      }

      .right-col {
        img {
          width: 630px;
          z-index: 3;
          position: relative;
        }
      }
    }
  }

  &.section-8 {
    .content {
      display: flex;
      justify-content: space-between;

      .left-col,
      .right-col {
        width: 49%;
      }

      .right-col {
        .items {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          flex-wrap: wrap;
          row-gap: 20px;

          .item {
            width: 30%;
            max-width: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
            row-gap: 10px;

            .image {
              img {
                width: 100px;
              }
            }

            h4 {
              font-size: 26px;
              font-family: "Poppins";
              font-weight: bold;
              margin: unset;
              color: #184572;
            }

            p {
              font-size: 14px;
              color: #184572;
              font-family: "Poppins";
            }
          }
        }
      }

      .left-col {
        display: flex;
        flex-direction: column;
        row-gap: 30px;
        h3 {
          font-weight: bold;
        }
        .text {
          width: 70%;

          p {
            font-size: 16px;
            font-family: "Poppins";
            color: #184572;
          }
        }
      }
    }

    .my-btn.mob {
      display: none;
    }
  }
}

.section-footer {
  background-color: #184572;
  padding: 32px 0 24px;
  position: relative;
  .ncontainer {
    padding: 0px 15px;
  }
  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .footer-logo {
    width: 115px;
  }

  .left-footer {
    display: flex;
    align-items: center;
    width: 20%;

    .footer-text {
      font-weight: bold;
      font-size: 1rem;
    }

    .footer-subtext {
      font-size: 0.8rem;
      color: #87d7e1;
    }
  }

  .center-footer,
  .right-footer {
    display: flex;
    align-items: center;
  }

  .footer-link {
    font-family: "Poppins";
    color: #ffffff;
    text-decoration: none;
    margin: 0 0.5rem;
    font-size: 16px;
    line-height: 25px;

    &:hover {
      color: #0499b8;
      text-decoration: underline;
    }
  }

  .separator {
    color: #ffffff;
    margin: 0 0.5rem;
  }

  .footer-line {
    width: 100%;
    height: 1px;
    background-color: #024760;
    margin: 30px 0 17px;
  }

  .copyright {
    display: flex;
    justify-content: end;

    p {
      font-family: "Poppins";
      text-align: right;
      font-size: 12px;
      line-height: 18px;
      color: #ffffff;
      margin-bottom: unset;
    }

    .logo-mindme {
      margin-right: 7px;
    }

    a {
      outline: none;
      text-decoration: none;
    }
  }
}

/*****************************************************************/

@media (max-width: 1600px) {
  .section-slide {
    .sections-header {
      padding: 0px 15px;
      .rows {
        gap: unset;
        .col-left {
          width: 15%;
        }
      }
      .navbar {
        .navbar-nav {
          width: 70%;
        }
        .div-btn-nav {
          width: 30%;
        }

        .hvr-grow {
          font-size: 18px;
          width: 280px;
        }
      }
    }
  }
}

@media (max-width: 1440px) {
  body h2 {
    font-size: 40px;
  }

  .section-slide {
    .div-banner {
      .div-sun {
        top: -80px;
        img {
          width: 300px;
        }
      }
      .div-bird {
        top: -80px;
        img {
          width: 900px;
        }
      }
      .div-niege {
        top: 50px;
        img {
          width: 170px;
        }
      }
    }
    .div-head {
      padding: 15px 15px 25px 15px;
      .hvr-grow {
        font-size: 16px;
        width: 220px;
        padding: 10px 25px 10px 25px;
        gap: 10px;
      }
    }
    .div-log {
      .img-logo {
        width: 160px;
      }
    }
    .row-caption {
      .div-caption {
        width: 545px;
        .img-woff {
          width: 60%;
        }
        .div-txt {
          height: 195px;
          margin-top: -25px;
          .div-bg {
            width: 85%;
            border: var(--unnamed-color-3a8bdd) 15px solid;
          }
          img {
            width: 20%;
          }
          p {
            width: 60%;
            font-size: 16px;
          }
        }
      }
      .col-img {
        text-align: center;
        img {
          width: 70%;
        }
      }

      .btn-video.hvr-grow {
        font-size: 16px;
        width: 220px;
        padding: 10px 25px 10px 25px;
        gap: 10px;
      }
    }
  }

  .section-1 {
    &::before {
      height: 75%;
    }
    .rows {
      margin-bottom: 20%;
      .col-left {
        .div-title {
          span {
            &.font1 {
              font-size: 40px;
            }
            &.font2 {
              font-size: 60px;
            }
          }
        }
        p {
          font-size: 18px;
        }
      }

      .col-right {
        .slide {
          padding: 15px 20px;
          .div-title {
            img {
              width: 63px;
            }
          }
          .div-txt {
            padding: 20px 20px 20px 0px;
            img {
              width: 20%;
            }
          }
        }
      }
    }
  }

  .section-3 {
    .rows {
      .div-title {
        h2 {
          font-size: 30px;
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  body h2 {
    font-size: 35px;
  }
  .section-slide {
    .sections-header {
      .navbar {
        .hvr-grow {
          font-size: 16px;
          width: 220px;
          padding: 10px 25px 10px 25px;
          gap: 10px;
        }
      }
      .navbar-nav .form-check-input {
        width: 30px;
        height: 30px;
      }
      .navbar-nav .form-check {
        span.prix {
          font-size: 20px;
        }
      }
      .li-input .form-text {
        width: 180px;
        padding: 0px 10px;
        font-size: 30px;
      }

      .li-input input,
      .li-input .form-text .span-placeholder {
        font-size: 16px;
      }
    }
  }

  .section-1 {
    &::before {
      height: 78%;
    }
    .rows {
      margin-bottom: 25%;
    }
    .rows2 {
      .div-title {
        h2 {
          line-height: 55px;
          font-size: 35px;
          span {
            font-size: 100px;
          }
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .section-1 {
    .rows2 {
      .div-title {
        width: 35%;
      }
      .div-txt {
        width: 45%;
      }
      .img-abs {
        margin-right: -5%;
      }
    }
  }

  .section-3 {
    .card-gestion {
      .div-offer {
        width: 30%;
        img {
          width: 45px;
        }
      }
      .div-desc {
        width: 45%;
        img {
          width: 100px;
        }
        p {
          font-size: 14px;
        }
      }
      .div-btn {
        width: 25%;
        > .hvr-grow {
          font-size: 16px;
        }
      }
      .div-don .prix {
        font-size: 28px;
      }
      .div-don > span {
        font-size: 14px;
      }
    }
  }
}

@media (max-width: 992px) {
  .section-slide {
    .sections-header {
      padding: unset;
      .rows {
        .col-left {
          display: none;
        }
      }
      .navbar {
        width: 100%;
        ul {
          flex-wrap: wrap;
          flex-direction: row;
          margin: 0 auto;
          justify-content: center;
          gap: 15px;
          padding: 15px;
          .nav-item {
            width: 200px;
          }
        }
        .nav-item.li-input {
          display: none;
        }
        .div-btn-nav {
          width: 100%;
          padding: 15px 15px;
          text-align: center;
        }
      }
      .navbar-collapse {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #ffff;
        z-index: 9;
      }
      .w-300 {
        display: none;
      }
    }
  }
}

@media (max-width: 800px) {
  body h2 {
    font-size: 25px;
  }
  .section-slide {
    .div-log {
      .img-logo {
        width: 115px;
      }
      .div-btn {
        display: none;
      }
    }
    .div-banner {
      .div-sun {
        img {
          width: 200px;
        }
      }
      .div-bird {
        img {
          width: 555px;
        }
      }
      .div-niege {
        img {
          width: 115px;
        }
      }
    }
    .row-caption {
      .div-caption {
        .div-txt {
          p {
            font-size: 14px;
            margin-bottom: unset;
          }
        }
      }
    }
  }
  .section-1 {
    padding: 3% 0px 3% 15px;
    .rows {
      flex-direction: column;
      margin-bottom: 10%;
      gap: 30px;
      .col-left {
        width: 100%;
        padding-right: 15px;
      }
      .col-right {
        width: 100%;
      }
    }
    .rows2 {
      flex-direction: column;
      .div-title {
        width: 100%;
        text-align: center;
        .div-btn {
          display: none;
        }
      }
      .div-txt {
        width: 100%;
        text-align: center;
      }
      .img-abs {
        display: none;
      }
    }
  }

  .section-3 {
    .card-gestion {
      flex-direction: column;
      border-radius: 20px;
      padding-right: unset;
      padding-bottom: 30px;
      .div-offer {
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .div-don {
          width: 100%;
          padding: 15px 15px 30px 15px;
        }
        img {
          width: 45px;
          transform: rotate(90deg);
          margin-top: -6%;
        }
      }
      .div-desc {
        width: 100%;
        padding: 15px 20px;
        img {
          width: 130px;
        }
        p {
          font-size: 16px;
        }
      }
      .div-btn {
        width: 100%;
        justify-content: center;
        > .hvr-grow {
          font-size: 18px;
        }
      }
      .div-don .prix {
        font-size: 40px;
      }
      .div-don > span {
        font-size: 16px;
      }
    }
  }

  .section-4 {
    .rows {
      .col-rows {
        flex-direction: column;
      }
      .col-left {
        width: 100%;
        p {
          font-size: 16px;
        }
      }

      .div-right {
        width: 100%;
      }
    }
  }
}

@media (max-width: 490px) {
  body h2 {
    font-size: 35px;
  }
  .d-desktop {
    display: none;
  }
  .d-mobile {
    display: block;
  }

  .section-slide {
    .div-banner {
      background-image: url(../images/sable.png);
    }
    .row-caption {
      flex-direction: column-reverse;
      .col-img {
        &:before {
          content: unset;
        }

        &:after {
          content: unset;
        }
      }
      .div-video {
        position: relative;
        right: unset;
        bottom: unset;
        padding-top: 30px;
      }
    }
  }

  .section-1 {
    padding: 3% 15px 3% 15px;
    .rows {
      .col-left {
        padding-right: unset;

        .div-title {
          span {
            text-align: center;
            &.font1 {
              font-size: 30px;
            }
            &.font2 {
              font-size: 40px;
            }
          }
        }
        .div-icons {
          justify-content: space-around;
          flex-wrap: wrap;
        }
        .div-btn {
          text-align: center;
        }
      }
      .col-right {
        margin-bottom: 100px;
        .slide {
          margin-right: unset;
          max-width: unset;
          p {
            font-size: 14px;
          }
          &.slide1 {
            .div-txt2 {
              .d-block {
                display: none !important;
              }
              .d-mob {
                display: block;
              }
            }
          }
        }
      }
    }
    .rows2 {
      flex-direction: column;
      .div-title {
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
        .div-btn {
          display: none;
        }
      }
      .div-txt {
        width: 100%;
        text-align: center;
      }
      .img-abs {
        display: none;
      }

      .img-abs1,
      .img-abs2 {
        display: block;
        margin: 15px 0px;
      }
      .img-abs1 {
        margin-bottom: 25%;
      }
    }

    .slick-arrow.slick-disabled {
      display: block !important;
    }

    .slick-next,
    .slick-prev {
      width: 50px !important;
      height: 50px !important;
      top: unset;
      bottom: -20%;
    }

    .slick-next {
      right: 34%;
    }

    .slick-prev {
      left: 34%;
      right: unset;
    }
  }
  .section-2 {
    .div-slide {
      margin-bottom: 100px;
    }

    .slick-arrow.slick-disabled {
      display: block !important;
    }

    .slick-next,
    .slick-prev {
      width: 50px !important;
      height: 50px !important;
      top: unset;
      bottom: -10%;
    }

    .slick-next {
      right: 34%;
    }

    .slick-prev {
      left: 34%;
      right: unset;
    }
  }
  .section-3 {
    .card-gestion {
      .div-offer {
        .div-don {
          padding: 15px 15px 30px 15px;
        }
        img {
          width: 28px;
          margin-top: -5%;
        }
      }

      .div-desc {
        img {
          width: 90px;
        }
      }
    }
  }
}

/************************************************************************/
/******************************Responsive********************************/
/******************************Responsive********************************/

@media only screen and (max-width: 1450px) {
  .ncontainer {
    /* width: 1230px; */
    max-width: 100%;
  }

  .section-rows {
    &::before {
      height: 240px;
    }
    padding-bottom: 80px;

    .content .right-col .blue-box::after {
      width: 100%;
      max-width: 100%;
      height: 290px;
      bottom: -84px;
      left: -77%;
      z-index: 1;
    }
  }

  .section {
    .titre-section {
      h3 {
        font-size: 35px;
      }
      p {
        font-size: 17px;
      }
      span {
        font-size: 50px;
      }
    }

    &.section-6 {
      .slider-items {
        width: 91%;
      }

      .carte-contenu {
        background-color: #e3effc;
        padding: 10px 10px 10px 10px;
        border-radius: 12px;
        position: relative;
        z-index: 1;
        min-height: 336px;
      }

      .slider-items {
        margin-top: 50px;
      }
    }

    &.section-7 {
      .content {
        .left-col,
        .right-col {
          width: 49%;
          max-width: 100%;
        }

        .left-col .titre h3 {
          font-size: 35px;

          span {
            font-size: 50px;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 1300px) {
  .section-3 {
    .section-rows {
      .right-col {
        .div-chienbef {
          width: 595px;
          height: 380px;
          right: 18%;
        }
      }
    }
  }
  .section {
    &.section-6 {
      .slider-items {
        width: calc(100% - 30px);
        max-width: 100%;
      }
      .slider-items {
        margin-top: 30px;
      }
    }

    &.section-7 {
      background-color: #e3effc;
      padding: 30px 0 64px 0;
      position: relative;

      &::before {
        width: 75%;
        max-width: 100%;
        height: 195px;
      }
    }
  }
}

@media only screen and (max-width: 1100px) {
  .section-rows {
    &::before {
      height: 180px;
    }
    padding-bottom: 50px;

    .content {
      .left-col .titre {
        width: 100%;
      }

      .right-col {
        .blue-box {
          width: 360px;
          max-width: 100%;
          padding: 51px 31px 18px 50px;

          &::after {
            width: 100%;
            max-width: 100%;
            height: 210px;
            bottom: -55px;
            left: -72%;
            z-index: 1;
          }

          &::before {
            width: 58px;
            max-width: 100%;
            height: 100px;
            top: -17%;
          }
        }
      }
    }
  }
  .section {
    .titre-section {
      h3 {
        font-size: 33px;
      }
      span {
        font-size: 48px;
      }
      p {
        font-size: 16px;
      }
    }

    &.section-6 {
      .carte-contenu .image img {
        width: 150px;
      }
      .carte-contenu {
        min-height: 315px;
      }
    }
    .content .left-col .titre h3 {
      font-size: 29px;
    }

    &.section-7 {
      padding: 30px 0;

      .content .left-col .titre h3 span {
        font-size: 44px;
      }

      .content .text p {
        font-size: 15px;
      }

      &::before {
        height: 125px;
      }
    }

    &.section-8 {
      .content {
        .right-col .items .item h4 {
          font-size: 23px;
        }
        .right-col .items .item {
          width: 32%;
        }
        .left-col .text {
          width: 80%;
        }
      }
    }
  }
}

@media only screen and (max-width: 800px) {
  .ncontainer {
    padding: 0 15px;
  }
  .section-3 {
    .section-rows {
      padding-top: unset;

      &::before {
        content: unset;
      }
      &::after {
        top: 0;
        bottom: unset;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
        height: 100%;
      }

      .content {
        flex-direction: column;

        .left-col,
        .right-col {
          width: 100%;
        }

        .right-col {
          display: flex;
          flex-direction: column-reverse;
          justify-content: center;
          align-items: center;
          .div-chienbef {
            position: relative;
            right: unset;
            margin-top: -65px;
            z-index: 9;
          }
          .light-div {
            justify-content: center;
          }

          .blue-box::after {
            width: 100%;
            max-width: 100%;
            height: 274px;
            bottom: -67%;
            left: 50%;
            z-index: 1;
            transform: translateX(-50%);
          }

          .blue-box::before {
            content: unset;
          }
        }
      }
    }
  }

  .section {
    padding: 3% 0px;

    &.section-6 .slider-items {
      width: calc(100% - 15px);
      max-width: 100%;
    }

    &.section-7 {
      .content {
        flex-direction: column;
        row-gap: 20px;
        padding-bottom: 70px;

        .left-col,
        .right-col {
          width: 100%;
          max-width: 100%;
        }

        .right-col .image {
          text-align: center;
        }
      }

      &::before {
        width: 100%;
        max-width: 100%;
      }
    }

    &.section-8 {
      .content {
        flex-direction: column;
        row-gap: 20px;

        .left-col,
        .right-col {
          width: 100%;
        }
      }

      .my-btn.desk {
        display: none;
      }

      .my-btn.mob {
        display: flex;
        justify-content: center;
      }

      .content .right-col .items {
        margin-bottom: 30px;
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  .section-footer {
    .content {
      flex-direction: column;
      gap: 35px;
      margin-bottom: 30px;
    }

    .copyright {
      justify-content: center;
      flex-direction: column;
      gap: 20px;

      p {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 7px;
      }

      .logo-mindme {
        width: 70px;
        text-align: center;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .left-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30%;
    }
  }
}

@media only screen and (max-width: 500px) {
  .section {
    margin-bottom: 30px !important;
  }
  .section-3 {
    .section-rows {
      .content {
        .left-col .titre h3 {
          text-align: left;
        }

        .left-col .text {
          width: 100%;
        }

        .right-col {
          .div-chienbef {
            width: 595px;
            height: 260px;
            margin-top: -40px;
          }
          .blue-box {
            background-size: contain;
            width: 100%;
            min-height: 330px;
            padding: 40px 47px 20px 71px;

            .text {
              span,
              p {
                font-size: 16px;
                text-align: center;
              }

              .titre-box {
                text-align: center;
              }
              span {
                display: inline-block;
                padding: 3px;
                color: #fff;
              }
            }

            &::after {
              width: 100%;
              max-width: 100%;
              height: 210px;
              bottom: -44%;
            }
          }

          .light-div {
            justify-content: center;
          }
        }
      }
    }
  }

  .section {
    .titre-section {
      padding: 0 15px;

      h3 {
        font-size: 28px;
      }
      span {
        font-size: 43px;
      }
    }

    &.section-6 {
      .slider-items {
        width: 100%;
        max-width: 100%;
        margin-bottom: 110px;
      }

      .carte-container.item-1,
      .carte-container.item-2,
      .carte-container.item-3,
      .carte-container.item-4 {
        margin: 0 15px;
      }

      .carte-container {
        width: 100%;
        margin-right: 15px;
      }

      .slick-list {
        padding-top: 80px;
      }

      .slick-arrow.slick-disabled {
        display: block !important;
      }

      .slick-next,
      .slick-prev {
        width: 50px !important;
        height: 50px !important;
        top: unset;
        bottom: -25%;
      }

      .slick-next {
        right: 34%;
      }

      .slick-prev {
        left: 34%;
        right: unset;
      }
    }

    .content .left-col .titre h3 {
      text-align: center;
    }

    &.section-7 {
      .content .left-col .titre h3 span {
        font-size: 40px;
      }

      .content {
        padding-bottom: 40%;
      }

      &::before {
        width: 100%;
        max-width: 100%;
        height: 205px;
        background-image: url(../images/illus-mob.png);
      }
    }

    &.section-8 {
      .content {
        .left-col .text {
          width: 100%;
        }

        .left-col .titre h3 {
          text-align: left;
        }

        .right-col .items .item {
          width: 45%;
        }

        .left-col {
          row-gap: 20px;
        }
      }
    }
  }
}

@media only screen and (max-width: 400px) {
  .section-rows .content .right-col .blue-box .text span,
  .section-rows .content .right-col .blue-box .text p {
    font-size: 16px;
  }
}

/************************************************************************/

@keyframes rotate-animation {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.up-down {
  animation: up-down linear 4s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: up-down linear 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: up-down linear 4s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: up-down linear 4s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: up-down linear 4s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes up-down {
  0% {
    transform: translate(1px, 20px);
  }
  24% {
    transform: translate(1px, 30px);
  }
  50% {
    transform: translate(1px, 12px);
  }
  74% {
    transform: translate(1px, 22px);
  }
  100% {
    transform: translate(1px, 22px);
  }
}

@-moz-keyframes up-down {
  0% {
    -moz-transform: translate(1px, 20px);
  }
  24% {
    -moz-transform: translate(1px, 30px);
  }
  50% {
    -moz-transform: translate(1px, 12px);
  }
  74% {
    -moz-transform: translate(1px, 22px);
  }
  100% {
    -moz-transform: translate(1px, 22px);
  }
}

@-webkit-keyframes up-down {
  0% {
    -webkit-transform: translate(1px, 20px);
  }
  24% {
    -webkit-transform: translate(1px, 30px);
  }
  50% {
    -webkit-transform: translate(1px, 12px);
  }
  74% {
    -webkit-transform: translate(1px, 22px);
  }
  100% {
    -webkit-transform: translate(1px, 22px);
  }
}

@-o-keyframes up-down {
  0% {
    -o-transform: translate(1px, 20px);
  }
  24% {
    -o-transform: translate(1px, 30px);
  }
  50% {
    -o-transform: translate(1px, 12px);
  }
  74% {
    -o-transform: translate(1px, 22px);
  }
  100% {
    -o-transform: translate(1px, 22px);
  }
}

@-ms-keyframes up-down {
  0% {
    -ms-transform: translate(1px, 20px);
  }
  24% {
    -ms-transform: translate(1px, 30px);
  }
  50% {
    -ms-transform: translate(1px, 12px);
  }
  74% {
    -ms-transform: translate(1px, 22px);
  }
  100% {
    -ms-transform: translate(1px, 22px);
  }
}

/* Video Modal
-----------------------------------------*/
.video-modal,
.video-modal .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
}

.video-modal {
  overflow: hidden;
  position: fixed;
  opacity: 0;
  -webkit-transform: translate(500%, 0%);
  transform: translate(500%, 0%);
  -webkit-transition: -webkit-transform 0s linear 0s;
  transition: -webkit-transform 0s linear 0s;
  transition: transform 0s linear 0s;
  transition: transform 0s linear 0s, -webkit-transform 0s linear 0s;
  /* using flexbox for vertical centering */
  /* Flexbox display */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* Vertical alignment */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.video-modal .overlay {
  z-index: 0;
  background: rgba(13, 1, 61, 0.82);
  /* overlay color */
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-out 0.05s;
  transition: opacity 0.2s ease-out 0.05s;
}

.video-modal-content {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  margin: 0 auto;
  overflow-y: visible;
  background: #000;
  width: calc(100% - 12em);
  height: 0;
  padding-top: calc((100% - 12em) * 0.5625);
  /* 16:9 calc */
}

/* Scaling to fit within the current Viewport size:
   When viewport aspect ratio is greater than 16:9
   work off the height instead of the width for calc */
@media (min-aspect-ratio: 16 / 9) {
  .video-modal-content {
    width: 0;
    height: calc(100vh - 10em);
    padding-top: 0;
    padding-left: calc((100vh - 10em) * 1.7778);
    /* 16:9 calc */
  }
}

/* Mobile Layout Tweaks - side margins reduced */
@media (max-width: 640px) {
  .video-modal-content {
    width: calc(100% - 1em);
    padding-top: calc((100% - 1em) * 0.5625);
    /* 16:9 calc */
  }
}

/* modal close button */
.close-video-modal {
  display: block;
  position: absolute;
  left: 0;
  top: -40px;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

/* set the iframe element to stretch to fit its parent element */
iframe#youtube {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: #000;
  -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
}

iframe#youtube-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: #000;
  -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
}

/* show the modal: 
   add class to the body to reveal */
.show-video-modal .video-modal {
  opacity: 1;
  transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
}

.show-video-modal .video-modal .overlay {
  opacity: 1;
}

.show-video-modal .video-modal-content {
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
}