/* Arrows */

/* general styles for prev and next - both the same size both positioned half way down the container (note the top:50% is offset by half their height -  a negative margin top*/
.slick-prev,
.slick-next
{    
    z-index: 1;
    position: absolute;
    top: 50%;
    display: block;
    cursor: pointer;
	height:77px;
	width:64px;
	overflow:hidden;
	border:0px;
	margin-top:-33px;
	text-indent:100px; 
}
/* specific style ( what makes the prev and next different) */
.slick-prev { 
    background:url('../images/carousel/left.png');  
    left: -12px;
}
.slick-next {
    background:url('../images/carousel/right.png');
    right: -12px;
}
/* optional hover */
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
	opacity:0.8;
}


For the products section I think you might get away with a bit of futuristic stuff. The Joys of Flex! You should see on the products html I've added a class of .flexthis to the rows; you can then add this to the stylesheet:

@media (min-width:768px) {
	.flexthis {
	  display: -ms-flexbox;
	  display: -webkit-flex;
	  display: flex;
	}
}