.wrapper {
margin: auto;
margin-top: 80px;
}

.tab-wrapper {
text-align: center;
display: block;
margin: auto;
max-width: 500px;
}

.tabs {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}

.tab-link {
margin: 0 1%;
list-style: none;
padding: 0px 14px;
color: #fff;
cursor: pointer;
font-weight: 700;
transition: all ease 0.5s;
border-bottom: solid 3px rgba(255, 255, 255, 0);
letter-spacing: 1px;
}

.tab-link:hover {
border-color: var(--Secondary-Color);
}

.tab-link.active {

background-color:var(--Secondary-Color);
}

.content-wrapper {
padding: 40px 5px;
}

.tab-content {
display: none;
text-align: center;
color: #888;
font-weight: 300;
font-size: 15px;
opacity: 0;
transform: translateY(15px);
animation: fadeIn 0.5s ease 1 forwards;
}

.tab-content.active {
display: block;
}

@keyframes fadeIn {
    100% {
        opacity: 1;
        transform: none;
    }
}


.hidden {
display: none;
}

.masterBox {
position:relative;
width: 100%;
margin: 0 auto;
}

.containerBox {
overflow:hidden;
width: 100%;
height: 383px;
}

.listBox li{
width:25%; /*Change this depending the number of "li" that you want to have per page. For example; if you want 4 "li" per page the width will be 25% because you have to complete the 100% (25*4 = 100)*/
float:left;
}

.listBox {
    width: 2000px;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.content {
height: 100%;
display: flex;
position: relative;
align-items: center;
justify-content: center;
cursor: pointer;
}

.content img {
width: 100%;
-webkit-box-shadow: 0px 0px 7.5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 7.5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 7.5px 0px rgba(0,0,0,0.75);
}

.content p {
color: #fff;
font-size: 2rem;
position: absolute;
background: rgba(0,0,0,.5);
padding: .5rem; 
}

.arrow{
position:absolute;
font-size:1rem;
color: #111;
cursor:pointer;
bottom: -20px;
color:#fff;
font-style:normal;
font-weight:600;
background-color:transparent;
padding:0 10px;
transition:background-color 0.4s ease-in-out;
}

.arrow:hover{
background-color:var(--Secondary-Color);
}

.arrow.back{
right: 196px;
}

.arrow.forward{
right: 100px;
}

.infoBox li {
width: 100%;
margin: 0 auto;
position: relative;
}

.infoBox li img {
max-height: 30rem;
display: block;
margin: 0 auto;
-webkit-box-shadow: 0px 0px 7.5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 7.5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 7.5px 0px rgba(0,0,0,0.75);
}
.show-container{
    transition: transform 0.2s ease-in-out;

}
.show-container:hover{
    transform:scale(1.1);
    z-index: 9999;
}
.show-container span{
    position:absolute;
    top: 90%;
    width:100%;
    left:0;
    transition:top 0.4s ease-in-out;
    background-color:#d4204099;
    min-height:72px;
}

.show-container span h2{
    margin-bottom:5px;margin-top:5px;line-height:1;
    color:#fff;
}
.show-container span p{
    margin-bottom:5px;margin-top:0px;line-height:1;
    color:#fff;
}
.show-container:hover span{
    top:80%;
}
.show-container{
    height: 350px;
    width: 257px;
    margin: auto;
    background-size: cover;
    position:relative;
    overflow:hidden;
}