@import './bootstrap.min.css';
@import './all.min.css';



*{
margin: 0;
padding: 0;
box-sizing: border-box;}

:root{
  --bgcolor: #eff2f1 ;
  --firstcolor: #4059ad;
  --secondcolor: #97d8c4;
  --thirdcolor: #f4b942;
  --textcolor: #424242;
  --border-radius: 5px;
  
  
}

body{background-color: var(--bgcolor);}

.carousel-inner {
    
    width: 90%;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
   
}

.column {
    float: left;
    width: 10%;
    padding: 1rem;
    margin-right: auto;
    margin-left: auto;
  }
  
  /* Style the images inside the grid */
  .column img {
    max-width: 100%;
    height: 5rem;
    opacity: 0.8; 
    cursor: pointer;
    transition: all .3s;
  }
  
  .column img:hover {
    opacity: 1;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* The expanding image container */
  .container {
    position: relative;
    display: none;
  }
  
  /* Expanding image text */
  #imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
  }
  
  /* Closable button inside the expanded image */
  .closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 35px;
    cursor: pointer;
  }


/* responsive styles */


/* 
@media (max-width: 1399.98px) { ... }




  @media (max-width: 1199.98px) { ... }


  @media (max-width: 991.98px) { ... }


  @media (max-width: 767.98px) { ... }
   */

@media (max-width: 575.98px) { 
  
  .carousel-inner {
    height: 100%;
    margin-bottom: 2rem;  
   
}

.column {


  padding: .3rem;
  
}
.column img {
  height: 2rem;
}

}