*{
	margin:0;
	padding:0;
}


a:hover{
	text-decoration:none;
}

#main{
	position:relative;
	margin: 0 auto;
    margin-bottom: 40px;
    width: 1250px;
	
}


#carousel{
	margin-top:60px;
	text-align:center;
	height:350px;
	
	
	/* Initially hidden */
	opacity:0;
	
	/* Will animate the transition */
	-moz-transition:0.4s opacity;
	-webkit-transition:0.4s opacity;
	transition:0.4s opacity;
}

#carousel.active{
	opacity:1;
}

#carousel li{
	display:none;
	list-style:none;
	width:330px;
	height:330px;
	margin: -20px 18px 0;
	position:relative;
	
	-moz-transition:0.4s all;
	-webkit-transition:0.4s all;
	transition:0.4s all;
}

#carousel li.visible{
	display:inline-block;
}

#carousel li a img{
	border:none;
}

#carousel li img{
	display:block;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	position:relative;
	z-index:10;
	
	width:100%;
	height:100%;
}

/* Creating the cradle below the thumbnails.
	Uses % so that it grows with the image. */

#carousel li:hover{
	/*height: 197px;
    margin-top: -152px;
    width: 222px;*/
	
	height: 350px;
    margin-top: -70px;
    width: 370px;
}

.arrow{
	background:url('../img/left.png') no-repeat;
	width:92px;
	height:81px;
	opacity:0.8;
	
	cursor:pointer;
	position:absolute;
	top:25%;
	left:-1%;
	
	
}

.arrow:hover{
	opacity:1;
}

.arrow.next{
	left:95%;
	background:url('../img/right.png') no-repeat;
}


@media (min-width: 1200px) and (max-width: 1350px) {
#carousel li {width: 228px;height: 220px;}
.arrow {background: url('../img/left.png') no-repeat;width: 50px;height: 50px;
background-size: 100% 100%;}
.arrow.next {
    left: 95%;
  
    background-size: 100% 100%;}
#main { width: 1000px;}
}
@media (min-width: 1px) and (max-width: 1200px) {
	#main { width: 1000px;}
	#carousel li {
width: 228px;height: 220px;}
.arrow { width: 50px; height: 50px;
   background-size: 100% 100%;}
   .arrow.next {
    left: 95%;
    
    background-size: 100% 100%;	}}