/*vízszintes*/
#carousel1 { width: 100%; overflow: hidden; height: 220px; }
#carousel1 .viewport { float: left; width: 90%; height: 220px; overflow: hidden; position: relative;  }
#carousel1 .buttons { display: block; width: 40px; height: 40px; margin: 87px 10px 0 0; float: left; }
#carousel1 .buttons:hover { border: none; }
#carousel1 .prev { background: url('arrowPrev.png') no-repeat 0 0; }
#carousel1 .prev:hover { border: none; }
#carousel1 .next { margin: 87px 0 0 10px; background: url('arrowNext.png') no-repeat 0 0; }
#carousel1 .next:hover { border: none; }
#carousel1 .disable { visibility: hidden; }
#carousel1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; left: 0; top: 0; }
#carousel1 .overview li { float: left; margin: 0 0 0 0; padding: 0px; width: 348px; text-align:center; }
#carousel1 .overview li img { box-shadow: 0px 0px 18px rgba(0,0,0,0.8); }

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

/*függőleges*/
#carousel2 { overflow:hidden; padding: 0; margin: 0; width: 244px; }
#carousel2 .viewport { width: 244px; height: 130px; overflow: hidden; position: relative; }
#carousel2 .buttons { display: block; width: 26px; height: 16px; margin: 0 0 5px 100px; overflow: hidden; position: relative; }
#carousel2 .next { background: url(arrowNext2.jpg) no-repeat 0 0; margin: 5px 0 0 109px; }
#carousel2 .next:hover { border: none; }
#carousel2 .prev { background: url(arrowPrev2.jpg) no-repeat 0 0; margin: 0 0 5px 109px; }
#carousel2 .prev:hover { border: none; }
#carousel2 .disable { visibility: hidden; }
#carousel2 .overview { list-style: none; position: absolute; width: 240px; left: 0 top: 0; padding: 0; margin: 0; }
#carousel2 .overview li { float: left; width: 240px; height: 125px; margin: 0 0 10px 0; padding: 1px; border: 1px solid #dcdcdc; }