.flex-container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .flex-item-l-event-detail {
    flex: 60%;
  }
  
  .flex-item-r-event-detail {
    flex: 40%;
  }

  
  /* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
    .flex-item-r-event-detail, .flex-item-l-event-detail{
      flex: 100%;
    }
  }
  


  .flex-container {
    display: flex;
    flex-wrap: wrap; 
  }
  
  .flex-item-top-left {
    flex: 75%;
  }
  
  .flex-item-top-right {
    flex: 25%;
  }
  
  .flex-item-bottom-left {
    flex: 25%;
    margin-bottom:-20px;
  }
  
  .flex-item-bottom-middle-left {
    flex: 25%;
    margin-bottom:-20px;
  }
  
  .flex-item-bottom-middle-right {
    flex: 19%;
    margin-bottom:-20px;
  }
  
  .flex-item-bottom-right {
    flex: 31%;
    margin-bottom:-20px;
  }

    
  /* Responsive layout - makes a one column layout instead of a two-column layout */
  @media (max-width: 800px) {
    .flex-item-top-right, .flex-item-top-left {
      flex: 100%;
    }
  }
  
  /* Responsive layout - makes a one column layout instead of a two-column layout */
  @media (max-width: 800px) {
    .flex-item-right, .flex-item-left {
      flex: 100%;
    }
  }
  
  @media (max-width: 800px) {
    .flex-item-bottom-right, .flex-item-bottom-left, .flex-item-bottom-middle-left, .flex-item-bottom-middle-right {
      flex: 100%;
    }
  }


  .flex-item-problem-bottom-left {
    flex: 29%;

    
  }
  
  .flex-item-problem-bottom-middle {
    flex: 47%;
    margin-bottom: 10px;
    
  }
  
  .flex-item-problem-bottom-right {
    flex: 24%;

    
  }
  
  @media (max-width: 800px) {
    .flex-item-probelm-bottom-right, .flex-item-problem-bottom-left, .flex-item-problem-bottom-middle  {
      flex: 100%;
    }
  }

  .flex-item-problem-left {
    flex: 75%;
  }
  
  .flex-item-problem-right {
    flex: 25%;
  }

    /* Responsive layout - makes a one column layout instead of a two-column layout */
    @media (max-width: 800px) {
      .flex-item-problem-right, .flex-item-problem-left {
        flex: 100%;
      }
    }
    

    /* Projects List Page */
    .flex-item-project-top-left {
      flex: 75%;
    }
    
    .flex-item-project-top-right {
      flex: 25%;
      
    }
    

      
  /* Responsive layout - makes a one column layout instead of a two-column layout */
  @media (max-width: 800px) {
    .flex-item-project-top-right, .flex-item-project-top-left {
      flex: 100%;
    }
  }

    .flex-item-project-bottom-left {
      flex: 25%;
   
    }
    
    .flex-item-project-bottom-middle-left {
      flex: 30%;
    }
    
    .flex-item-project-bottom-middle-right {
      flex: 21%;
    }
    
    .flex-item-project-bottom-right {
      flex: 24%;
    }
    @media (max-width: 800px) {
      .flex-item-project-bottom-right, .flex-item-project-bottom-left, .flex-item-project-bottom-middle-left, .flex-item-project-bottom-middle-right {
        flex: 100%;
      }
    }