@charset "utf-8";
/* CSS Document */
	.carouselbox {
      width: 450px;
      position: relative;
      margin: 1em;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 10px #ccc;
      overflow: hidden;
    }
    .content {
      margin: 0;
      padding: 0;
    }
    .content li {
      margin: 0;
      padding: 0;
      width: 100%;
      list-style: none;
      text-align: center;
      z-index: 2;
    }
    .active {
      height: 600px;
    }
    .active li {
      position: absolute;
      top: 600px;
    }
    .active li.current {
      top: 30px;
    }
    .buttons {
      display: none;
			
    }
	.prev:hover {
		  cursor: pointer;
	}
	.next:hover {
		 cursor: pointer;
	}


    
	.active .buttons {
      display: block;
      padding: 5px 0;
      background: #eee;
      text-align: center;
      z-index: 10;
      position: relative;
    }
    .carouselbox button {
      border: none;
      visibility: hidden;
    }
    .active button {
      visibility: visible;
    } 
    .offscreen {
      position: absolute;
      left: -2000px;
    }
.grid-container {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap 10px;

}
.grid-item {
	padding: 5px;
}

/*.item {
	height: 250px;
}*/

.flex {
	display: flex;
	align-items: center;
	justify-content: center;
}