.card-wrapper {
	position: relative;
	max-width: 2000px;
	height: 407px; /* hide the scroll bar*/

	overflow-x: hidden;
	overflow-y: hidden;
    margin-top: 30px;
    margin-bottom: 30px;
}

.cards {
    height: 420px;
    /* hide the scroll bar background: #f3f3f3;*/
    box-sizing: border-box;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}	

.item {
	display: inline-block;
	height: 100%;
	box-sizing: border-box;
    vertical-align: top;
}

.c1{
    width: 408px;
}

.c2{
    width: 286px;
}

.item div{
    overflow: hidden;
}

.item div img {
    width: 100%;
}

.c-sm{
    float: left;
    width: 202px;  
    height: 133px;
    margin-bottom: 4px; 
    background-repeat: no-repeat;
    background-size: cover;
}

.smLeft{
    margin-right: 2px; 
}

.smRight{
    margin-left: 2px; 
}


.c-med{
    width: 408px;
    height: 276px;
    margin-bottom: 4px; 
    background-repeat: no-repeat;
    background-size: cover;
}

.c-lrg{
    width: 286px;
    height: 420px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
}


.paddles {
}
.paddle {
	position: absolute;
	top: 180px;

}
.left-paddle {
	left: 100px;;
}
.right-paddle {
	right: 100px;
}

@media (max-width: 768px) {

    .left-paddle {
	    left: 10px;
    }
    .right-paddle {
	    right: 10px;
    }
}
.hidden {
	display: none;
}

.moreInfoBox{
    background: rgba(0, 0, 0, 0.5);
    margin: 3%;
    width:93%;
    padding: 10px;
    color: #fff;
    white-space:normal;
    display: none;
}