/* How To Use */
.how-container {
  width: 100%;
  height: 80vh;
  margin-bottom: 30px; 
}

.left-container {
  float: left;
  height: 80vh;
  width: 50%;
}

.right-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 80vh;
  background: #fff;
  width: 50%;
  float: left;
}

.left-content {
  width: 100%;
  height: 80vh;
}
.left-content1 {
  width: 100%;
  height: 80vh;
  padding-top: 127px;
}
.right-content {
  max-width: 70%;
}
.test{display: none;height: 100%;width: 100%;}

@media screen and (max-width: 999px) {
  .how-container {display: block; width: 100%; height: auto; text-align: center; margin: 0 auto 60px auto;}
  .test{display: block;height: 100%;width: 100%;}
  .left-container  {display: block; width: 100%; height: auto; float: none; text-align: center; margin: 15px auto 0px auto;}
  .right-container {display: block; width: 100%; height: auto; float: none; text-align: center; margin: 15px auto 0px auto;}
  .left-content {display: block; width: 100%; height: auto; float: none; text-align: center; margin: 15px auto 0px auto;}
  
  .left-content1 {display: block; width: 100%; height: auto; float: none; text-align: center; margin: 15px auto 0px auto; padding: 0px;}
  .right-content {display: block; width: 100%; height: auto; float: none; text-align: center; margin: 15px auto 0px auto; max-width: 90%;}
}
  



/* 

.col-text {
    height:20em;
  }
  .grid-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    flex-direction: row; 
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: space-around;
  }
  .col {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  .col-left {
    -webkit-box-ordinal-group:-1;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
  }
  .col-text{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .col-text2{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .col-text1{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .Aligner-item {
    width: 60%;
  }
  .Aligner-item h2{
    width: 80%;
    
    font-size: xx-large;
    padding-left: 120px;
  }
  .Aligne-item h2{
    width: 80%;
    text-align: center;
    font-size: xx-large;
    padding-left: 120px;
  }
  .col-image {
    background-attachment: fixed;
    
  }
  
  @media (max-width: 640px) {
    .grid-flex {
      height: 40em;
      display: -webkit-flex;
      -webkit-flex-direction: column;
      flex-direction: column; 
     }
     .col-image {
background-position: center;
      }
    .col {
      order:vertical;
    }
    .col-left {
      -webkit-box-ordinal-group:0;
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
    }
    .col-text div p {
      padding: 1em;
    }
    .Aligne-p{
        padding-left: 41px;
    }
    .Aligner-item {
      width: 90%;
      
    }
    .Aligner-item h2{
        width: 90%;
        padding-left: 85px;
      }
      .Aligne-item h2{
        width: 90%;
        text-align: center;
        padding-left: 59px;
      }
      .col-text1{
        display: flex;
        align-items: center;
        padding-bottom: 148px;
        padding-top: 189px;
        justify-content: center;
      }
      .col-text2{
        display: flex;
        align-items: center;
        padding-top: 55px ! important;
      }
  }    */