.col-text {
    height:20em;
    
    color: aliceblue;
  }
  .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;
  }
  .Aligner-item {
    width: 60%;
  }
  .col-image {
    background-size: cover;
    background-position:center center;
    -webkit-filter: sepia(100%);
      filter: sepia(100%);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
  }
  .col-image:hover {
    -webkit-filter: sepia(0);
      filter: sepia(0);
    
  }
  .col-image1 {
    background-size: cover;
    background-position:center center;
    -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
   
  }
  .col-image1:hover {
    -webkit-filter: grayscale(0);
      filter: grayscale(0);
     
    
  }
  
  
  @media (max-width: 640px) {
    .grid-flex {
      height: 40em;
      display: -webkit-flex;
      -webkit-flex-direction: column;
      flex-direction: column; 
      overflow: hidden;
     }
    .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;
     
  
    }
    .Aligner-item {
      width: 90%;
    }
  }
  
  /* .csrp1{
    color: cornflowerblue;
    transform: translateX(-100%);
      
      animation: slide-in-anim 0.8s ease-out forwards;
  }
  .csrp2{
    color: aliceblue;
    transform: translateX(-100%);
      
      animation: slide-in-anim 0.8s ease-out forwards;
  }
  .csrh1{
    font-size:50px;
    transform: translateX(-100%);
      
      animation: slide-in-anim 0.8s ease-out forwards;
  }
  @keyframes slide-in-anim {
      20% {
          opacity: 0;
      }
      60% {
          transform: translateX(-45%);
      }
      75% {
          transform: translateX(-52%);
      }
      100% {
          opacity: 1;
          transform: translateX(-20%);
      }
  }
  
  
  
  .csrp3{
    color: cornflowerblue;
    transform: translateX(100%);
      
      animation: slide-left-anim 0.8s ease-out forwards;
  }
  .csrp4{
    color: black;
    transform: translateX(100%);
      
      animation: slide-left-anim 0.8s ease-out forwards;
  }
  
  .csrh2{
    font-size:50px;
    color:black;
    transform: translateX(100%);
      
      animation: slide-left-anim 0.8s ease-out forwards;
  }
  
  @keyframes slide-left-anim {
  20% {
    opacity: 0;
  }
  60% {
    transform: translateX(35%);
  }
  75% {
    transform: translateX(42%);
  }
  100% {
    opacity: 1;
    transform: translateX(25%);
  }
  }
   */
  
  /* .csrp3{
    color: cornflowerblue;
    transform: translateX(100%);
      
      animation: slide-in-anim 1.5s ease-out forwards;
  }
  .csrp4{
    color: black;
    transform: translateX(100%);
      
      animation: slide-in-anim 1.5s ease-out forwards;
  }
  
  .csrh2{
    font-size:50px;
    color:black;
    transform: translateX(100%);
      
      animation: slide-in-anim 1.5s ease-out forwards;
  }
  
   @keyframes slide-in-anim {
      20% {
          opacity: 0;
      }
      60% {
          transform: translateX(35%);
      }
      75% {
          transform: translateX(42%);
      }
      100% {
          opacity: 1;
          transform: translateX(25%);
      }
  } */
  
  
  @-webkit-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
  }
  @-moz-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
  }
  @keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-90px);
        -moz-transform: translatex(-90px);
        -o-transform: translatex(-90px);
        transform: translatex(-90px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
  }
  .in-left {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-duration:1s;
    animation-delay: 1s;
    color:white;
    font-size:50px;
  }
  
  .csrp1 {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-duration:1s;
    animation-delay: 1s;
    color:cornflowerblue;
    
  }
  
  .csrp2 {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-duration:1s;
    animation-delay: 1s;
    color:aliceblue;
    
  }
  
  
  
  
  
  @-webkit-keyframes fadeInRight {
    from {
        opacity:0;
        -webkit-transform: translatex(10px);
        -moz-transform: translatex(10px);
        -o-transform: translatex(10px);
        transform: translatex(10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
  }
  @-moz-keyframes fadeInRight {
    from {
        opacity:0;
        -webkit-transform: translatex(10px);
        -moz-transform: translatex(10px);
        -o-transform: translatex(10px);
        transform: translatex(10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
  }
  @keyframes fadeInRight {
    from {
        opacity:0;
        -webkit-transform: translatex(90px);
        -moz-transform: translatex(90px);
        -o-transform: translatex(90px);
        transform: translatex(90px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
  }
  .in-right {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-duration:2s;
    animation-delay: 2s;
    color:black;
    font-size:50px;
  }
  
  .csrp3 {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-duration:2s;
    animation-delay: 2s;
    color:cornflowerblue;
    
  }
  
  .csrp4 {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-duration:2s;
    animation-delay: 2s;
    color:black;
    
  }