/* modal popup */
    
    .modal,
    .modal-box {
      z-index: 900;
    }

    .modal-sandbox {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: transparent;
    }

    .modal {
      display: none; 
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgb(0,0,0);
      background: rgba(0,0,0,.8);
     
    }

    .modal-box {
      position: relative;
      width: 80%;
      max-width: 920px;
      margin: 100px auto;
      animation-name: modalbox;
      animation-duration: .5s;
      animation-timing-function: ease-out;
      
    }

    .modal-header {
      padding: 20px 40px;
      background: #546E7A;
      color: #ffffff;
    }

    .modal-body {
      background: #fff;
      padding: 1em;
      overflow: auto;
    }

    .text-container{
      margin-top: 0.25%;
    }

    .modal-content-text{
        margin-bottom: 0px;
      }

    .modal-img-container{
      width: 100%;
      background-color: white;
    }

    .modal_img{
      width: 70%;
      max-width: 100%;
      height: auto;
      margin-left: 8%;
    }

.modal_img3{
      width: 90%;
      max-width: 100%;
      height: auto;
      margin-left: 5%;
    }


    /* Close Button */
    .close-modal {
      text-align: right;
      cursor: pointer;
    }

    .close-btn{
      padding: 10px 40px;
      border: 1px solid #333333;
      outline: none;
      color: #333333;
    }

    /* Animation */
    @-webkit-keyframes modalbox {
      0% {
        top: -250px; 
        opacity: 0;
      }
      100% {
        top: 0; 
        opacity: 1;
      }
    }

    @keyframes modalbox {
      0% {
        top: -250px; 
        opacity: 0;
      }
      100% {
        top: 0; 
        opacity: 1;
      }
    }

    /* Vendors */

    .modal-trigger, button {
      background: transparent;
      color: #111;
      text-decoration: none;
    }

    .modal-trigger {
      overflow: auto;
    }

    .img-vendor{
      width: 11%;
    }

.img-vendor3{
      width: 90%;
    }
   

    .img-vendor:hover{
      width: 12%;
    }

    .vendors-container{
        width: 100%; 
        height: 100%;
        padding-bottom: 1em;
    }
    
    .vendors-row{
        width: 100%; 
        height: 100%;
        margin-top: 5px;
        text-align: center
    }