body { font-family: 'Helvetica', Arial, Sans-Serif; color: #404040; margin: 0; padding: 0; }
.container { width: 960px; margin: 20px auto 0; background: #FFF; /*border:1px solid #E5E5E5;*/ overflow: hidden; }
.content-container { /*height:600px;*/ }
h2 { font-size: 20px; line-height: 24px; color: #d42e12; margin: 0 0 10px; }
h3 { font-family: Roboto, 'Helvetica', Arial, Sans-Serif; margin: 5px 0 10px; padding: 0; font-size: 14px; line-height: 16px; text-align: center; text-transform: uppercase; font-weight: bold; }
p { font-family: Arial, helvetica, sans-serif; font-size: 14px; line-height: 20px; float: left; margin: 0 0 10px; }
.printer-container p { width: 100%; font-size: 12px; line-height: 16px !important; padding: 5px 0 5px 0; margin: 0; }
.printer-container p.footnote { font-size: 11px; font-style: italic; text-align: center; margin-top: 5px; color: #595959; }
.printer-container span { float: right; }
img { width: 98%; margin: 0 auto; float: left; }


/* -- Slider styles -- */
.slider-nav { width: 45%; margin: 0 0 0 6%; float: left; cursor: pointer; }
.slider-nav img { margin: 10px auto 0; }
.slider-for { width: 45%; float: right; }
.slick-slide { width: 100%; height: 100%; margin-top: 50px; position: relative; }
.dots-container { width: 100%; padding: 0; margin: 0; display: block; float: left; }
.slick-dots { position: relative; bottom: 0; }
.slick-dots li { margin: 0 5px 0px; }
.slick-dots li button { font-size: 14px; line-height: 0; display: block; width: 40px; height: 40px; padding: 5px; cursor: pointer; color: #000; border: 1px solid #E5E5E5; outline: none; background: #fff; }
li.slick-active button { background: #DD1D21; color: #fff; border: none; }
.slick-dots li button:before { content: normal; }

/* -- Printer Animation -- */
.printer-mask { width: 400px; height: 50px; background: #fff; display: block; position: absolute; top: 520px; left: 20px; z-index: 4; }
.printer-container { width: 400px; height: 540px; margin: 20px auto 0; position: relative; background: #FFF; overflow: hidden; }
.printer-container hr { width: 100%; height: 1px; border: 0 none; border-top: 1px #595959 dashed; float: left; margin: 0; padding: 0; }
.printer-front { width: 300px; height: 300px; position: absolute; top: 248px; left: 20px; z-index: 3; }
.printer-back { width: 300px; height: 300px; position: absolute; top: 248px; left: 20px; z-index: 1; }


.printer-container .printer-paper-slide1 { width: 127px; height: 300px; padding: 20px; background: #FFF; position: absolute; z-index: 2; }
.slick-active .printer-container .printer-paper-slide1 { width: 127px; height: 300px; padding: 10px; background: #FFF; border: 1px solid #E5E5E5; position: absolute; z-index: 2; top: 310px; left: 92px; -webkit-animation: paperMove1 1s 1s steps(20, end) forwards; animation: paperMove1 1s 1s steps(20, end) forwards; }

@-webkit-keyframes paperMove1 {
	0% { -webkit-transform:translate(0,0px); }
	100% { -webkit-transform:translate(0,-60px); }
}

@keyframes paperMove1 {
	0% { transform:translate(0,0px); }
	100% { transform:translate(0,-60px); }
}


.printer-container .printer-paper-slide2 { width: 127px; height: 300px; padding: 10px; background: #FFF; border: 1px solid #E5E5E5; position: absolute; z-index: 2; }
.slick-active .printer-container .printer-paper-slide2 { width: 127px; height: 300px; padding: 10px; background: #FFF; position: absolute; z-index: 2; top: 250px; left: 92px; -webkit-transform: translate(0px, 0px);  transform: translate(0px, 0px); -webkit-animation: paperMove2 1s 1s steps(20, end) forwards; animation: paperMove2 1s 1s steps(20, end) forwards; }

@-webkit-keyframes paperMove2 {
	0% { -webkit-transform:translate(0px,0px); }
	100% { -webkit-transform:translate(0px,-35px); }
}

@keyframes paperMove2 {
	0% { transform:translate(0px,0px); }
	100% { transform:translate(0px,-35px); }
}



.printer-container .printer-paper-slide3 { width: 127px; height: 300px; padding: 10px; background: #FFF; border: 1px solid #E5E5E5; position: absolute; z-index: 2; }
.slick-active .printer-container .printer-paper-slide3 { width: 127px; height: 300px; padding: 10px; background: #FFF; position: absolute; z-index: 2; top: 215px; left: 92px; -webkit-transform: translate(0px, 0px);  transform: translate(0px, 0px); -webkit-animation: paperMove3 1s 1s steps(20, end) forwards;  animation: paperMove3 1s 1s steps(20, end) forwards; }

@-webkit-keyframes paperMove3 {
	0% { -webkit-transform:translate(0px,0px); }
	100% { -webkit-transform:translate(0px,-30px); }
}

@keyframes paperMove3 {
	0% { transform:translate(0px,0px); }
	100% { transform:translate(0px,-30px); }
}

.printer-container .printer-paper-slide4 { width: 127px; height: 300px; padding: 10px; background: #FFF; border: 1px solid #E5E5E5; position: absolute; z-index: 2; }
.slick-active .printer-container .printer-paper-slide4 { width: 127px; height: 300px; padding: 10px; background: #FFF; position: absolute; z-index: 2; top: 185px; left: 92px; -webkit-transform: translate(0px, 0px);  transform: translate(0px, 0px); -webkit-animation: paperMove4 1s 1s steps(20, end) forwards; animation: paperMove4 1s 1s steps(20, end) forwards; }

@-webkit-keyframes paperMove4 {
	0% { -webkit-transform:translate(0px,0px); }
	100% { -webkit-transform:translate(0px,-45px); }
}

@keyframes paperMove4 {
	0% { transform:translate(0px,0px); }
	100% { transform:translate(0px,-45px); }
}
.printer-container .printer-paper-slide5 { width: 127px; height: 300px; padding: 10px; background: #FFF; border: 1px solid #E5E5E5; position: absolute; z-index: 2; }
.slick-active .printer-container .printer-paper-slide5 { width: 127px; height: 300px; padding: 10px; background: #FFF; position: absolute; z-index: 2; top: 140px; left: 92px; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-animation: paperMove5 1s 1s steps(20, end) forwards; animation: paperMove5 1s 1s steps(20, end) forwards; }

@-webkit-keyframes paperMove5 {
	0% { -webkit-transform:translate(0px,0px); }
	100% { -webkit-transform:translate(0px,-40px); }
}

@keyframes paperMove5 {
	0% { transform:translate(0px,0px); }
	100% { transform:translate(0px,-40px); }
}

.printer-container .printer-paper-slide6 { width: 127px; height: 350px; padding: 10px; background: #FFF; border: 1px solid #E5E5E5; position: absolute; z-index: 2; }
.slick-active .printer-container .printer-paper-slide6 { width: 127px; height: 350px; padding: 10px; background: #FFF; position: absolute; z-index: 2; top: 100px; left: 92px; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-animation: paperMove6 1s 1s steps(30, end) forwards; animation: paperMove6 1s 1s steps(30, end) forwards; }

@-webkit-keyframes paperMove6 {
	0% { -webkit-transform:translate(0px,0px); }
	100% { -webkit-transform:translate(0px,-50px); }
}
@keyframes paperMove6 {
	0% { transform:translate(0px,0px); }
	100% { transform:translate(0px,-50px); }
}

/* -- Responsive --- */
@media only screen and  (max-width:800px) {
	
.container { width: 100%; margin: 0; padding: 20px 0; background: #FFF; /*border: 1px solid #E5E5E5; */ overflow: hidden; }
.content-container { height: auto !important; }

p { font-family: Arial, helvetica, sans-serif; font-size: 14px; line-height: 18px; float: left; margin: 0 0 10px; }

#printer_box { display: none; }

.slider-nav { width: 90%; margin: 25px 5% 0; float: none; cursor: pointer; }
.slider-nav img { /*display:none;*/ }

.slider-for { width: 90%; margin: 0 5%; float: none; }
.slick-slide { margin-top: 0; }
.slick-dots { margin: 0; }

}