* {
    margin: 0;
    padding: 0;
}

html, body{
    background: #262626;
    width:100%
    height:100%;
    margin: 0;
    padding: 0;   

/*    overflow-x: hidden; */
}

.container {
    max-width: 100rem;
/*
    margin: 0 0;
    padding: 0 2rem 2rem;
*/
}

.pics {
width: 200px !important;
}

.button-box{
    position: relative;
    transition: all 1s linear;    
    justify-content: center; 
}
.button-box ul{
    padding: 10px;
    list-style: none;
    display: inline-flex;   
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}
.button-box ul li{
    border: 1px solid black;
    color: #111111;
    padding: 5px 10px;
    background: #E8E8E8;
    margin: 5px 5px;    
    transition: all 0.4s linear;
    cursor: pointer;
    text-align: center;
    font-family: sans-serif;
    font-size: 18px;
    border-radius:10px;
    -webkit-border-radius:10px;   
    width: span; 
    justify-content: center;
    align-content: center;
  }    


@media screen and (max-width: 980px){
.button-box ul{
/*    margin-right: 50px;
    margin-left: 5px;
makes center */
}    
/*
    overflow:scroll;
    -webkit-overflow-scrolling:touch;
*/    
    .button-box ul li{
    display:inline-block; 
    padding: 2px 5px;     
    margin: 5px 5px;        
    }
    
    .box{/*
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;*/
    justify-content: center;
    }
    
    .box img{
    width: 100%;
    align-content: center;    
}


}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.nowrap{white-space: nowrap;}


.button-box ul li.active{
    background: #000;
    color: #fff;
}

.button-box ul li:hover{
     background: #000;
     color: #fff;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Compensate for excess margin on outer gallery flex items */
    margin: -1rem -1rem; 
}

.box{
 /*   width: 30%;
    height: 250px; */
    
        /* Minimum width of 24rem and grow to fit available space */
    flex: 1 0 24rem;
    /* Margin value should be half of grid-gap value as margins on flex items don't collapse */
    margin: 1rem 1rem;
    box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
    overflow: hidden; 
    /*
    width: 30%;
    height: 100%;
    margin-left: 15px;
    margin-bottom: 20px;
    cursor: pointer;
    box-shadow: 0px 10px 25px -20px rgba(255,255,255,1);
    overflow: hidden;
    transition: transform 400ms ease-out;   
    */
}

 .box img{
   /* width: 100%;
  /*  height: 100% */
    display: block;
    width: 100%;
    height: 100%; 

}
/*
.box:hover {
    transform: scale(1.2); 
}
*/