@import url('https://fonts.googleapis.com/css2?family=Chewy&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Titan+One&display=swap');


.font-1{font-family:'Montserrat' !important ;}.font-2{font-family: 'Chewy', cursive !important}
body{
    box-sizing: border-box;
    margin: unset;
    overflow-x: hidden;
}
img{max-width: 100%;}
body h1{
    font-size: 71px;
    font-family: 'Chewy', cursive;
    position: relative;color: #E84D1F;display: inline-block;
}

body h2{
  font-size: 35px;
  font-family: 'Montserrat';font-weight: bold;
  position: relative;color: #fff;display: inline-block;
}
body p{
    font-family:'Montserrat';
    color: #656565;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
body section{
  padding-top: 179px;
}
.section-home{
    background:  #FAB6B4 url('../images/bg-home.png');    background-size: cover;
    background-position: top center;overflow: hidden;
}
.header{max-width: 100%;
  width: 1644px;
  margin: 0 auto;
  position: fixed;
  padding: 0px 15px;
  right: 0;
  left: 0;
  top: 0;z-index: 99;}
.div-nav{display: flex;align-items: flex-start;justify-content: space-between;}
.div-nav a{
padding: 0px 10px 16px 10px;
    background: #fff;
    border-bottom-left-radius: 41px;
    border-bottom-right-radius: 41px;
}
.logo-mobile, .dis-mobile{display: none;}
.btn-header{
    background-color: #5FACA6;
    font-size : 20px ;
    font-family:'Montserrat', sans-serif;
    font-weight: bolder;display: flex;
    align-items: center;
    justify-content: space-around;color: #fff;
    border-radius: 35px;
    border: unset;
    padding: 4px 49px;
    gap: 30px;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;    margin-top: 3%;
}
.btn-header img{width : 45px}
.btn-headerp img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }
.btn-header:hover img, .btn-header:focus img, .btn-header:active img {
    -webkit-animation-name: hvr-icon-pop;
    animation-name: hvr-icon-pop;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}
.div-titleBar{margin-bottom: 30px;padding: 0px 15px;position: relative;z-index: 2;}
.div-title{text-align: center;max-width: 900px;margin: 0 auto;position: relative;z-index: 9;}
.div-title .h1-title{text-transform: uppercase;}
.div-title .h1-before::before{content: '';position: absolute;left: 0;top: 10px;background-color: #fff;width: 100%;height: 47px;z-index: -1;}
.div-title .img-title{margin-top: -20px;}
span.soustitle{font-size: 27px;font-family: 'Titan One', cursive;color: #E84D1F;margin-bottom: 20px;}
p.p-txt{font-size: 28px;color: #e84d1f;font-weight: bold;}
.btn-parti{
    background-color: #5FACA6;
    font-size : 20px ;
    font-family:'Montserrat', sans-serif;
    font-weight: bolder;display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff !important;
    border-radius: 35px;
    border: unset;
    padding: 15px 43px;
    gap: 15px;
    width: fit-content;
    margin: 0 auto;text-decoration: unset;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;cursor: pointer;}

.btn-parti img{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);width : 45px
}
.btn-parti:hover{
  background-color: #E84D1F;
}
.btn-parti:hover img, .btn-parti:focus img, .btn-parti:active img {
    -webkit-animation-name: hvr-icon-wobble-horizontal;
    animation-name: hvr-icon-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}


.div-content{position: relative;padding: 120px 15px 3% 15px;}
.div-content .div-before{content: '';
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../images/bg-content.png);
    width: 100%;
    height: 100%;
    background-size: cover;background-position: top center;z-index: 1;}
.div-content .div-after{content: '';
    position: absolute;
    left: 0;
    top: -115%;
    background-image: url(../images/golden-retriever-dog-sitting-floor-isolated_detouré_.png);
    width: 490px;
    height: 662px;
    background-size: cover;
    z-index: 0;}
.p-content{
    max-width: 100%;
    width: 812px;
    margin: 0 auto;
    text-align: center;position: relative;z-index: 3;}
.p-content p{font-size: 18px;color: #656565;font-weight: 500;}



.img-float{position: absolute;top: 135px;right: 85px;z-index: 2;}


.div-footer{
    background: #fff;padding: 10px 15px;position: relative;
}
.div-footer .d-flex{
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    width: 1660px;
    margin: 0 auto;
    z-index: 3;
    position: relative;
}
.menufooter ul{
    list-style: none;
    padding-left: unset;
    display: flex;
    margin: unset;
    align-items: center;
    gap: 15px;
}
.logo-footer{display: none;}




/* The Modal (background) */
body .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    right: 0;
    width: 100%; /* Full width */
    max-width: 100%;
    margin: 0 auto;
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    z-index: 999;
  }
body .modaleDis{
  display: block;
}
.form-field.error input[type="email"]{
  margin-bottom: unset;
}
.form-field small{
  font-size: 15px;
  color: #e84d1f;
  font-family: 'Montserrat' !important;
  font-weight: bold;
}
  /* Modal Content */
  body .modal-content {
    position: relative;
    background: #5FACA6 url('../images/bg-modale.png') no-repeat top center;
    margin: auto;
    padding: 8% 20px 2% 20px;
    border:unset;
    border-radius: 13px;
    width: 812px;
    max-width: 100%;
    box-shadow: 0px 20px 20px rgb(0 0 0 / 47%);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
  }
  
  /* Add Animation */
  @-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
  }
  
  @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }
  
  /* The Close Button */
  .close {
    position: absolute;
    right: 25px;
    top: 25px;
    cursor: pointer;
  }
  
  body .modal-header {
    padding: 2px 16px;
    color: white;
    display: block;
    border : unset
  }
  .modal-header span{color: #fff;font-size: 28px;font-weight: bold;}.modal-header p{color: #fff;font-size: 45px;font-weight: bold;line-height: 50px;}
  .modal-header p> span{color: #E84D1F;font-weight: 300;font-size: 45px;}

  body .modal-body {padding: 2px 16px;border : unset;margin-bottom: 10px;}
  .div-form input[type="text"], .div-form input[type="email"], .div-form input[type="tel"] {
    display: block;
    margin: 20px auto;
    font-size: 18px;
    font-family: 'Montserrat';
    padding: 12px 28px;
    width: 318px;
    max-width: 100%;
    border-radius: 28px;
    border: unset;
    color: #656565;font-weight: 500;
}
.btn-submit{
    margin: 20px auto;
    font-size: 20px;
    font-weight: bolder;
    font-family: 'Montserrat';
    padding: 12px 28px;
    width: 318px;
    max-width: 100%;
    border-radius: 28px;
    border: unset;
    background-color: #E84D1F;
    color: #fff;
    display: flex;align-items: center;justify-content: space-around;
}
body .modal-footer {
padding: 2px 16px;
color: white;border : unset
}
body .modal-footer p{
    color: #fff;font-size: 16px;text-align: center;
}



/**********************************section Q1 ******************************/

.section-Q1{background:  #FAB6B4 url('../images/bg-q1.png');    background-size: cover;background-position: top center;overflow: hidden;}

.div-Q1 .div-title .h1-title {margin-bottom: 8%;}

.div-animal{display: flex;flex-wrap: wrap;gap: 40px;width: 590px;margin: 0 auto;max-width: 100%;}

.div-animal .btn-parti{flex : 1 0 260px;}

.div-animal .btn-autre{max-width: 260px;margin: 0 auto;}

.section-Q1 .div-content .div-after{ 
  content: '';
  position: absolute;
  left: 0;
  top: -275%;
  background-image: url(../images/dog-q1.png);
  width: 490px;
  height: 662px;
  background-size: cover;
  z-index: 0;}

.div-gender{
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  width: 646px;
  margin: 0 auto;
  max-width: 100%;
}

.btn-gender{
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #5faca6;
  border-radius: 52px;
  padding: 43px 15px;
  gap: 22px;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  color: #fff !important;
  font-weight: bolder;
  text-decoration: unset;
  flex: 1 0 303px;justify-content: space-between;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);border : unset
}
.btn-gender:hover{background-color: #E84D1F;}

.btn-gender img {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.btn-gender:hover img, .btn-gender:focus img, .btn-gender:active img {
  -webkit-animation-name: hvr-icon-up;
  animation-name: hvr-icon-up;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}






/************************************section Q2***********************************/

.section-Q2{background:  #FAB6B4 url('../images/bg-Q2.png');    background-size: cover;background-position: top center;overflow: hidden;}
.section-Q2 .div-content .div-after{
  content: '';
  position: absolute;
  left: 0;
  top: -275%;
  background-image: url(../images/dog-Q2.png);
  width: 490px;
  height: 662px;
  background-size: cover;
  z-index: 0;}


/************************************section Q3***********************************/

.section-Q3{background:  #FAB6B4 url('../images/bg-q3.png');background-size: cover;background-position: top center;overflow: hidden;}
.section-Q3 .div-titleBar{margin-bottom: 4%;}
.section-Q3 .div-content .div-after{
  content: '';
  position: absolute;
  left: 0;
  top: -275%;
  background-image: url(../images/dog-Q3.png);
  width: 655px;
  height: 651px;
  background-size: cover;
  z-index: 0;}


.section-Q3 .div-content .div-before{top : 5px}

.section-Q3 .div-animal .btn-autre {max-width: 360px;}



/************************************section Q4***********************************/
.section-Q4{background:  #FAB6B4 url('../images/bg-Q4.png');background-size: cover;background-position: top center;overflow: hidden;}

.section-Q4 .div-titleBar {margin-bottom: 10%;}

.div-select{width: 462px;max-width: 100%;
  height: 73px;
  background-color: #fff;
  margin: 0 auto 40px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 37px;}
.section-Q4 .div-select{padding: 0px 12px;}
.div-select select{font-size: 20px;
  border: unset;
  color: #747474;
  font-weight: 500;outline: none;background-color: #fff;max-width: 100%;font-family: 'Montserrat', sans-serif;}

.section-Q4 .div-content .div-after{
  content: '';
  position: absolute;
  left: 0;
  top: -275%;
  background-image: url(../images/dog-Q4.png);
  width: 655px;
  height: 651px;
  background-size: cover;
  z-index: 0;}

/************************************section Q5***********************************/
.section-Q5{background:  #FAB6B4 url('../images/bg-Q5.png');background-size: cover;background-position: top center;overflow: hidden;}
.section-Q5 .div-title {max-width: 965px;}
.section-Q5 .div-content .div-after{
  content: '';
  position: absolute;
  left: 0;
  top: -275%;
  background-image: url(../images/dog-Q5.png);
  width: 655px;
  height: 651px;
  background-size: cover;
  z-index: 0;}

.bg-noir{background-color: #000;}.bg-marron {background-color: #462C20;}.bg-fauve {background-color: #B9891E;}
.bg-sable{background-color: #E6D5C3;color : #000 !important}.bg-blanc {background-color: #fff;color : #000 !important}.bg-bleue {background-color: #868686;}

/************************************section Q6***********************************/
.section-Q6{background:  #FAB6B4 url('../images/bg-Q6.png');background-size: cover;background-position: top center;overflow: hidden;}

.section-Q6 .div-content .div-after{
  content: '';
    position: absolute;
    left: 0;
    top: -230%;
    background-image: url(../images/dog-Q6.png);
    width: 672px;
    height: 589px;
    background-size: cover;
    z-index: 0;
}

.section-Q6 .div-select{
  flex : 1 0 286px;
  height: unset;
  padding: 15px 10px;
  margin-bottom: unset;width: 200px;
}
.section-Q6 .div-animal .btn-autre {max-width: 545px;}
.section-Q6 .btn-parti.bg-blanc{color: #747474 !important;}
.div-caption p{
  color: #5C5C5C;font-size: 18px;font-weight: 400;
}

/************************************section reponse***********************************/

.section-reponse{background:  #E84D1F url('../images/reponse.png');background-size: cover;background-position: top center;overflow: hidden;}
.div-name span{display: block;}
span.span-name{font-size: 135px;color: #fff;text-transform: uppercase;font-family: 'Chewy', cursive;}
span.span-adj{font-size: 25px;font-family: 'Montserrat';font-style: italic;color: #fff;}
.section-reponse .btn-partage {background-color: #425381;}
.section-reponse .div-caption p{
  font-size: 25px;
  font-family: 'Montserrat';
  color: #fff;
  font-weight: bold;
}
.div-caption button{margin : 0 auto;}
.div-name{position: relative;}
.div-popup{
  position: absolute;
    right: 0;
    top: -55px;
}
.div-popup span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(11deg);
  width: 88%;
  font-size: 18px;
  font-family: 'Montserrat';
  font-weight: bold;
  color: #fff;
}

.section-reponse .div-title .h2-title img{width : 30px}

.menufooter a, .div-copy-right  span{font-size: 16px;font-family: 'Montserrat';color: #3E4847;font-weight: 500;text-decoration: unset;}
.menufooter li a:hover{text-decoration: underline;color: #3E4847}


@media (max-width: 1440px) {
  body section{padding-top: 112px;}
    .logo-desktop{width : 12vw;image-rendering: -webkit-optimize-contrast;}
    .btn-header{font-size: 16px;}
    body h1 {font-size: 58px;}
    .img-title{width: 400px;display: block;margin: -20px auto 0 auto;}
    span.soustitle {
      font-size: 24px;}
    p.p-txt {font-size: 25px;}
    .btn-parti{font-size: 18px;padding: 10px 35px;}
    .div-content .div-after {
      width: 385px;
      height: 520px;top: -100%;}
    .div-content {padding: 105px 15px 15px 15px;}
    .p-content p {font-size: 16px;}

    .section-Q6 .div-content .div-after{width: 448px;height: 380px;}

    /************************modale*******************/
    body .modal{padding-top: 5px;height: 95vh;}
    body .modal-content {padding: 2% 20px 2% 20px;width: 700px;}
    .modal-header span{font-size: 24px;}
    .modal-header p {font-size: 33px;line-height: 35px;margin-bottom: unset;}.modal-header p> span{font-size: 33px;line-height: 35px;}
}

@media (max-width: 1280px) {
  body section{padding-top: 100px;}
  body h1 {font-size: 45px;}body h2 {font-size: 28px;}
  .img-title {width: 345px;}
  .div-titleBar {margin-bottom: 15px;}
  span.soustitle {font-size: 20px;margin-bottom: 15px;}
  p.p-txt {font-size: 20px;max-width: 600px;margin: 0 auto 15px auto;}
  .div-content {padding: 80px 15px 15px 15px;}

  .btn-parti {padding: 5px 35px;}
  /*********************Q1*********************/
  .div-Q1 .div-title .h1-title, .div-title .h1-title.mb-5 {margin-bottom: 15px !important;}
  .div-Q1 .div-title .h1-title br{display: none;}
  .div-animal{gap: 12px;width: 540px}

  /*******************Q2***********************/
  .div-gender{gap: 20px;}
  .btn-gender img{width : 5vw}
  .btn-gender {padding: 15px;gap: 15px;border-radius: 30px;justify-content: flex-end;}
  .section-Q2 .div-content .div-after {top: -333%;width: 330px;height: 445px;}

  /*******************Q3************************/
  .section-Q3 .div-titleBar {margin-bottom: 15px;}
  .section-Q3 .div-content .div-after {width: 427px;height: 422px;}


  /***************Q4*********************/
  .section-Q4 .div-titleBar {margin-bottom: 6%;}

  /***************Q6*******************/
  .section-Q6 .div-select {width: 260px;}

  /********************reponse********************/
  .div-name.mb-4{margin-bottom: 1rem !important;}
  span.span-name {font-size: 100px;line-height: 100px;}
  span.span-adj {font-size: 22px;}
  .section-reponse .div-caption p {font-size: 20px;}
  .div-popup {position: absolute;right: 14%;top: -43px;width: 200px;}
  .div-popup span{font-size: 14px;}
  /************************modale*******************/
  body .modal-content {padding: 15px;}
  .modal-header span{font-size: 20px;}
  .modal-header p, .modal-header p> span{font-size: 25px;line-height: 25px;}
  .div-form input[type="text"],.div-form input[type="email"],.div-form input[type="tel"], .btn-submit {
    margin: 10px auto;
    font-size: 15px;
    padding: 12px 28px;
    width: 300px;
  }
  body .modal-footer p{font-size: 12px;}
  .close {right: 18px;top: 12px;}
  .close img{width : 20px}
}


@media (max-width: 1025px) {
  body section{padding-top: 80px;}
    .div-content .div-after{
        content: '';
        position: absolute;
        left: 0;
        top: -60%;
        background-image: url(../images/golden-retriever-dog-sitting-floor-isolated_detouré_.png);
        width: 300px;
        height: 405px;
        background-size: cover;
        z-index: 0;
        opacity: .5;
    }
}
@media (max-width: 429px) {
  body section {
    padding-top: 130px;
}
        body h1{
            font-size: 51px;
        }
        body h2 {
          font-size: 25px;
        }
        body p{
            font-size: 14px;
        }
        .section-home, .section-Q1, .section-Q2, .section-Q3, .section-Q4, .section-Q5, .section-Q6, .section-reponse{background: #FAB6B4 url(../images/bg-mobile.png);background-size: contain;background-repeat: no-repeat;}
        .header{margin-bottom: 65px;}
        .div-nav{gap : 10px}
        .div-nav button {
          font-size: 16px;
          padding: 5px 15px;
          gap: 10px;
      }
        .logo-mobile{display: block;width : 80px;image-rendering: -webkit-optimize-contrast;}.logo-desktop, .div-popup{display: none;}body .div-popup.dis-mobile{display: block;top : -30%;right: 0;}
        .div-titleBar {margin-bottom: 55%;}
        span.soustitle{font-size: 19px;}
        p.p-txt{font-size: 22px;}
        .div-content{padding-top:70px ;}

        .div-content .div-after{
        left: 0;
        top: -45%;
        background-image: url(../images/Composant_m.png);
        height: 288px;
        width: 428px;
        opacity: 1;
        }
        .div-content .img-float{display: none;}

        .div-footer{display: flex;gap: 15px;}
        .div-footer .d-flex{flex-direction: column;align-items: flex-start;}
        .logo-footer{display: block;width: 120px;}
        .logo-footer img{max-width: 120px;}


        body .modal{
            padding-top: unset ;
        }
        body .modal-content {
            background: #5FACA6 url('../images/bg-modale-m.png') no-repeat top center;padding-top: 35px;}
        .modal-header p, .modal-header p> span{font-size: 35px;line-height: normal;}.modal-header span{font-size: 25px;}

    /********************section Q1******************/
      .section-Q1 .div-animal, .section-Q3 .div-animal, .section-Q5 .div-animal{
        width: 254px;
      }
      .section-Q1 .div-content .div-after{
        top: -258%;
        background-image: url(../images/bg-q1mobile.png);
        height: 282px;
        width: 428px;
      }

    /*****************section Q2*********************/
    .section-Q2 .div-gender{
      width: 303px;
    }
    .section-Q2  .div-titleBar {
      margin-bottom: 70%;
    }
    .section-Q2 .btn-parti{padding: 15px;}
    .section-Q2 .div-content .div-after{
      top: -345%;
      background-image: url(../images/dog-Q2mobile.png);
      height: 326px;
      width: 428px;opacity: 1;
    }
    .div-gender{gap: unset;}
    .btn-gender{margin-bottom: 20px;}
    /*****************section Q3*********************/

    .section-Q3 .div-content .div-after{
      top: -345%;
      background-image: url(../images/dog-q3mobile.png);
      height: 326px;
      width: 428px;opacity: 1;
    }
    .section-Q3 .div-titleBar{margin-bottom: 75%;}
    .btn-gender img{width : 10vw}


    /*****************section Q4*********************/
    .section-Q4 .div-content .div-after{
      top: -515px;
      background-image: url(../images/dog-Q4mobile.png);
      height: 551px;
      width: 428px;opacity: 1;
    }
    .section-Q4 .div-titleBar{margin-bottom: 551px;}

    /*****************section Q5*********************/
    .section-Q5 .div-content .div-after{
      top: -180px;
      background-image: url(../images/dog-Q5mobile.png);
      height: 224px;
      width: 428px;opacity: 1;
    }

    .section-Q5 .div-gender{
      width: 303px;
    }
    /*****************section Q6*********************/
    .section-Q6 .div-content .div-after{
      top: -250px;
      background-image: url(../images/dog-Q6mobile.png);
      height: 289px;
      width: 428px;opacity: 1;
    }
    .section-Q6 .div-animal{
      width: 330px;
    }
    .section-Q6 .div-animal .btn-parti {
      flex: 6 0 330px;
    }
    .section-Q6 .div-titleBar {
      margin-bottom: 60%;
    }
    .section-Q6 .div-gender{
      width: 303px;
    }
    /*****************section reponse*********************/
    .section-reponse{background-color: #E84D1F;position: relative;}
    .section-reponse .div-titleBar{max-width: 354px;margin: 30% auto 95% auto;padding: 0px;}
    .section-reponse:before{
      content: '';
      position: absolute;
      top: 100px;
      left: 0;
      background-image: url(../images/bg-repmobile.png);
      height: 100%;
      width: 428px;
    }
    span.span-name{font-size: 65px;}
    span.span-adj, .section-reponse .div-caption p{font-size: 20px;}
    .section-reponse .btn-parti,.section-reponse .div-caption button{padding: 15px 20px;}
    .section-reponse .h2-title br{display: none;}

}



@media (max-width: 424px) {
   
    .div-content .div-after{top: -55%;}
    .menufooter a, .div-copy-right span{font-size : 13px}
}


@keyframes hvr-icon-wobble-horizontal {
    16.65% {
      -webkit-transform: translateX(6px);
      transform: translateX(6px);
    }
    33.3% {
      -webkit-transform: translateX(-5px);
      transform: translateX(-5px);
    }
    49.95% {
      -webkit-transform: translateX(4px);
      transform: translateX(4px);
    }
    66.6% {
      -webkit-transform: translateX(-2px);
      transform: translateX(-2px);
    }
    83.25% {
      -webkit-transform: translateX(1px);
      transform: translateX(1px);
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
/* Icon Pop */
@-webkit-keyframes hvr-icon-pop {
    50% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
    }
  }
  @keyframes hvr-icon-pop {
    50% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
    }
  }
/* Icon Up */
@-webkit-keyframes hvr-icon-up {
  0%,
	50%,
	100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25%,
	75% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
@keyframes hvr-icon-up {
  0%,
	50%,
	100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25%,
	75% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}




@keyframes slideInFromLeft {
  0% {
    transform: scale(.6);
    opacity: 0;
  }
  100% {
    transform: translateZ(0) scale(1);
    opacity: 1;
  }

}

.slide-opt {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
}