#carousel1 { width: 100%; clear:both; }
#carousel1 .viewport { float: left; width: 100%; height: 280px; overflow: hidden; position: relative; }
#carousel1 .buttons { display: inline-block; font-size:40px; line-height:50px; background:#457203; color:#FFFFFF; padding:14px 14px; padding-top:0; width:50px; height:50px; border-radius:100%; text-decoration: none; }
#carousel1 .buttons:hover { text-decoration: none; background:#FFFFFF; color:#406F03; }
#carousel1 .prev:hover { border: none; }
#carousel1 .next { margin-left: 20px; }
#carousel1 .next:hover { border: none; }
#carousel1 .disable { visibility: hidden; }
#carousel1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; left: 0; top: 0; width:2500px !important; }
#carousel1 .overview li { float: left; margin: 0; padding: 0px; border: 0px solid #dcdcdc; text-align:center; }

#carousel2 { width: 100%; clear:both; }
#carousel2 .viewport { float: left; width: 100%; height: 280px; overflow: hidden; position: relative; }
#carousel2 .buttons { display: inline-block; font-size:42px; line-height:1.1em; background:#457203; color:#FFFFFF; padding:12px 14px; padding-top:0; width:50px; height:50px; border-radius:100%; text-decoration: none; }
#carousel2 .buttons:hover { text-decoration: none; background:#FFFFFF; color:#406F03; }
#carousel2 .prev:hover { border: none; }
#carousel2 .next { margin-left: 20px; }
#carousel2 .next:hover { border: none; }
#carousel2 .disable { visibility: hidden; }
#carousel2 .overview { list-style: none; position: absolute; padding: 0; margin: 0; left: 0; top: 0; width:2500px !important; }
#carousel2 .overview li { float: left; margin: 0; padding: 0px; border: 0px solid #dcdcdc; text-align:center; }

@media only screen
and (min-width: 0px)
and (max-width: 700px) {
#carousel1 .viewport { width: 80%; }
}