/* ------------- General ------------- */ @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic); @font-face { font-family: "cs-ctrl-basic"; src: url("cs-ctrl-basic.eot"); src: url("cs-ctrl-basic.eot#iefix") format("embedded-opentype"), url("cs-ctrl-basic.woff") format("woff"), url("cs-ctrl-basic.ttf") format("truetype"), url("cs-ctrl-basic.svg#basic") format("svg"); font-weight: normal; font-style: normal; } .csslider1 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider1, .csslider1 *, .csslider1 *:after, .csslider1 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider1 > .cs_anchor { display: none; } .csslider1 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider1 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider1 > ul > .slide.img img { width: 100%; } .csslider1 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider1 > ul > .slide { position: relative; display: inline-block; width: 100%; height: 100%; overflow: hidden; font-size: 15px; font-size: initial; line-height: normal; white-space: normal; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .csslider1 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider1 > ul > li.img, .csslider1 > .cs_arrowprev, .csslider1 > .cs_arrownext, .csslider1 > .cs_bullets, .csslider1 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- Effect ------------- */ .csslider1 > ul > .slide.num0 { left: 0%; } .csslider1 > ul > .slide.num1 { left: 100%; } .csslider1 > ul > .slide.num2 { left: 200%; } .csslider1 > ul > .slide.num3 { left: 300%; } .csslider1 > ul > .slide.num4 { left: 400%; } .csslider1 > ul > .slide.num5 { left: 500%; } .csslider1 > ul > .slide.num6 { left: 600%; } .csslider1 > ul > .slide.num7 { left: 700%; } .csslider1 > ul > .slide.num8 { left: 800%; } .csslider1 > ul > .slide.num9 { left: 900%; } .csslider1 > ul > .slide.num10 { left: 1000%; } .csslider1 > ul > .slide.num11 { left: 1100%; } .csslider1 > ul > .slide.num12 { left: 1200%; } .csslider1 > ul > .slide.num13 { left: 1300%; } .csslider1 > ul > .slide.num14 { left: 1400%; } .csslider1 > ul > .slide.num15 { left: 1500%; } .csslider1 > ul > .slide.num16 { left: 1600%; } .csslider1 > ul > .slide.num17 { left: 1700%; } .csslider1 > ul > .slide.num18 { left: 1800%; } .csslider1 > ul > .slide.num19 { left: 1900%; } .csslider1 > ul > .slide.num20 { left: 2000%; } .csslider1 > ul > .slide.num21 { left: 2100%; } .csslider1 > ul > .slide.num22 { left: 2200%; } .csslider1 > ul > .slide.num23 { left: 2300%; } .csslider1 > ul > .slide.num24 { left: 2400%; } .csslider1 > ul > .slide.num25 { left: 2500%; } .csslider1 > ul > .slide.num26 { left: 2600%; } .csslider1 > ul > .slide.num27 { left: 2700%; } .csslider1 > ul > .slide.num28 { left: 2800%; } .csslider1 > ul > .slide.num29 { left: 2900%; } .csslider1 > ul > .slide.num30 { left: 3000%; } .csslider1 > ul > .slide.num31 { left: 3100%; } .csslider1 > ul > .slide.num32 { left: 3200%; } .csslider1 > ul > .slide.num33 { left: 3300%; } .csslider1 > ul > .slide.num34 { left: 3400%; } .csslider1 > #cs_slide1_0:checked ~ ul > .slide, .csslider1 > #cs_pause1_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider1 > #cs_slide1_1:checked ~ ul > .slide, .csslider1 > #cs_pause1_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider1 > #cs_slide1_2:checked ~ ul > .slide, .csslider1 > #cs_pause1_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider1 > #cs_slide1_3:checked ~ ul > .slide, .csslider1 > #cs_pause1_3:checked ~ ul > .slide { -webkit-transform: translateX(-300%); transform: translateX(-300%); } .csslider1 > #cs_slide1_4:checked ~ ul > .slide, .csslider1 > #cs_pause1_4:checked ~ ul > .slide { -webkit-transform: translateX(-400%); transform: translateX(-400%); } .csslider1 > #cs_slide1_5:checked ~ ul > .slide, .csslider1 > #cs_pause1_5:checked ~ ul > .slide { -webkit-transform: translateX(-500%); transform: translateX(-500%); } .csslider1 > #cs_slide1_6:checked ~ ul > .slide, .csslider1 > #cs_pause1_6:checked ~ ul > .slide { -webkit-transform: translateX(-600%); transform: translateX(-600%); } .csslider1 > #cs_slide1_7:checked ~ ul > .slide, .csslider1 > #cs_pause1_7:checked ~ ul > .slide { -webkit-transform: translateX(-700%); transform: translateX(-700%); } .csslider1 > #cs_slide1_8:checked ~ ul > .slide, .csslider1 > #cs_pause1_8:checked ~ ul > .slide { -webkit-transform: translateX(-800%); transform: translateX(-800%); } .csslider1 > #cs_slide1_9:checked ~ ul > .slide, .csslider1 > #cs_pause1_9:checked ~ ul > .slide { -webkit-transform: translateX(-900%); transform: translateX(-900%); } .csslider1 > #cs_slide1_10:checked ~ ul > .slide, .csslider1 > #cs_pause1_10:checked ~ ul > .slide { -webkit-transform: translateX(-1000%); transform: translateX(-1000%); } .csslider1 > #cs_slide1_11:checked ~ ul > .slide, .csslider1 > #cs_pause1_11:checked ~ ul > .slide { -webkit-transform: translateX(-1100%); transform: translateX(-1100%); } .csslider1 > #cs_slide1_12:checked ~ ul > .slide, .csslider1 > #cs_pause1_12:checked ~ ul > .slide { -webkit-transform: translateX(-1200%); transform: translateX(-1200%); } .csslider1 > #cs_slide1_13:checked ~ ul > .slide, .csslider1 > #cs_pause1_13:checked ~ ul > .slide { -webkit-transform: translateX(-1300%); transform: translateX(-1300%); } .csslider1 > #cs_slide1_14:checked ~ ul > .slide, .csslider1 > #cs_pause1_14:checked ~ ul > .slide { -webkit-transform: translateX(-1400%); transform: translateX(-1400%); } .csslider1 > #cs_slide1_15:checked ~ ul > .slide, .csslider1 > #cs_pause1_15:checked ~ ul > .slide { -webkit-transform: translateX(-1500%); transform: translateX(-1500%); } .csslider1 > #cs_slide1_16:checked ~ ul > .slide, .csslider1 > #cs_pause1_16:checked ~ ul > .slide { -webkit-transform: translateX(-1600%); transform: translateX(-1600%); } .csslider1 > #cs_slide1_17:checked ~ ul > .slide, .csslider1 > #cs_pause1_17:checked ~ ul > .slide { -webkit-transform: translateX(-1700%); transform: translateX(-1700%); } .csslider1 > #cs_slide1_18:checked ~ ul > .slide, .csslider1 > #cs_pause1_18:checked ~ ul > .slide { -webkit-transform: translateX(-1800%); transform: translateX(-1800%); } .csslider1 > #cs_slide1_19:checked ~ ul > .slide, .csslider1 > #cs_pause1_19:checked ~ ul > .slide { -webkit-transform: translateX(-1900%); transform: translateX(-1900%); } .csslider1 > #cs_slide1_20:checked ~ ul > .slide, .csslider1 > #cs_pause1_20:checked ~ ul > .slide { -webkit-transform: translateX(-2000%); transform: translateX(-2000%); } .csslider1 > #cs_slide1_21:checked ~ ul > .slide, .csslider1 > #cs_pause1_21:checked ~ ul > .slide { -webkit-transform: translateX(-2100%); transform: translateX(-2100%); } .csslider1 > #cs_slide1_22:checked ~ ul > .slide, .csslider1 > #cs_pause1_22:checked ~ ul > .slide { -webkit-transform: translateX(-2200%); transform: translateX(-2200%); } .csslider1 > #cs_slide1_23:checked ~ ul > .slide, .csslider1 > #cs_pause1_23:checked ~ ul > .slide { -webkit-transform: translateX(-2300%); transform: translateX(-2300%); } .csslider1 > #cs_slide1_24:checked ~ ul > .slide, .csslider1 > #cs_pause1_24:checked ~ ul > .slide { -webkit-transform: translateX(-2400%); transform: translateX(-2400%); } .csslider1 > #cs_slide1_25:checked ~ ul > .slide, .csslider1 > #cs_pause1_25:checked ~ ul > .slide { -webkit-transform: translateX(-2500%); transform: translateX(-2500%); } .csslider1 > #cs_slide1_26:checked ~ ul > .slide, .csslider1 > #cs_pause1_26:checked ~ ul > .slide { -webkit-transform: translateX(-2600%); transform: translateX(-2600%); } .csslider1 > #cs_slide1_27:checked ~ ul > .slide, .csslider1 > #cs_pause1_27:checked ~ ul > .slide { -webkit-transform: translateX(-2700%); transform: translateX(-2700%); } .csslider1 > #cs_slide1_28:checked ~ ul > .slide, .csslider1 > #cs_pause1_28:checked ~ ul > .slide { -webkit-transform: translateX(-2800%); transform: translateX(-2800%); } .csslider1 > #cs_slide1_29:checked ~ ul > .slide, .csslider1 > #cs_pause1_29:checked ~ ul > .slide { -webkit-transform: translateX(-2900%); transform: translateX(-2900%); } .csslider1 > #cs_slide1_30:checked ~ ul > .slide, .csslider1 > #cs_pause1_30:checked ~ ul > .slide { -webkit-transform: translateX(-3000%); transform: translateX(-3000%); } .csslider1 > #cs_slide1_31:checked ~ ul > .slide, .csslider1 > #cs_pause1_31:checked ~ ul > .slide { -webkit-transform: translateX(-3100%); transform: translateX(-3100%); } .csslider1 > #cs_slide1_32:checked ~ ul > .slide, .csslider1 > #cs_pause1_32:checked ~ ul > .slide { -webkit-transform: translateX(-3200%); transform: translateX(-3200%); } .csslider1 > #cs_slide1_33:checked ~ ul > .slide, .csslider1 > #cs_pause1_33:checked ~ ul > .slide { -webkit-transform: translateX(-3300%); transform: translateX(-3300%); } .csslider1 > #cs_slide1_34:checked ~ ul > .slide, .csslider1 > #cs_pause1_34:checked ~ ul > .slide { -webkit-transform: translateX(-3400%); transform: translateX(-3400%); } .csslider1 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 1000ms; transition: -webkit-transform 1000ms, transform 1000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide1 { 0%, 2.2857142857142856% { -webkit-transform: translateX(0%); transform: translateX(0%); } 2.857142857142857%, 5.142857142857143% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 5.714285714285714%, 8% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 8.571428571428571%, 10.857142857142858% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } 11.428571428571429%, 13.714285714285715% { -webkit-transform: translateX(-400%); transform: translateX(-400%); } 14.285714285714286%, 16.57142857142857% { -webkit-transform: translateX(-500%); transform: translateX(-500%); } 17.142857142857142%, 19.428571428571427% { -webkit-transform: translateX(-600%); transform: translateX(-600%); } 20%, 22.285714285714285% { -webkit-transform: translateX(-700%); transform: translateX(-700%); } 22.857142857142858%, 25.142857142857142% { -webkit-transform: translateX(-800%); transform: translateX(-800%); } 25.714285714285715%, 28% { -webkit-transform: translateX(-900%); transform: translateX(-900%); } 28.571428571428573%, 30.857142857142858% { -webkit-transform: translateX(-1000%); transform: translateX(-1000%); } 31.42857142857143%, 33.714285714285715% { -webkit-transform: translateX(-1100%); transform: translateX(-1100%); } 34.285714285714285%, 36.57142857142858% { -webkit-transform: translateX(-1200%); transform: translateX(-1200%); } 37.142857142857146%, 39.42857142857143% { -webkit-transform: translateX(-1300%); transform: translateX(-1300%); } 40%, 42.28571428571429% { -webkit-transform: translateX(-1400%); transform: translateX(-1400%); } 42.85714285714286%, 45.142857142857146% { -webkit-transform: translateX(-1500%); transform: translateX(-1500%); } 45.714285714285715%, 48% { -webkit-transform: translateX(-1600%); transform: translateX(-1600%); } 48.57142857142857%, 50.85714285714286% { -webkit-transform: translateX(-1700%); transform: translateX(-1700%); } 51.42857142857143%, 53.714285714285715% { -webkit-transform: translateX(-1800%); transform: translateX(-1800%); } 54.285714285714285%, 56.57142857142858% { -webkit-transform: translateX(-1900%); transform: translateX(-1900%); } 57.142857142857146%, 59.42857142857143% { -webkit-transform: translateX(-2000%); transform: translateX(-2000%); } 60%, 62.28571428571429% { -webkit-transform: translateX(-2100%); transform: translateX(-2100%); } 62.85714285714286%, 65.14285714285715% { -webkit-transform: translateX(-2200%); transform: translateX(-2200%); } 65.71428571428572%, 68% { -webkit-transform: translateX(-2300%); transform: translateX(-2300%); } 68.57142857142857%, 70.85714285714286% { -webkit-transform: translateX(-2400%); transform: translateX(-2400%); } 71.42857142857143%, 73.71428571428572% { -webkit-transform: translateX(-2500%); transform: translateX(-2500%); } 74.28571428571429%, 76.57142857142857% { -webkit-transform: translateX(-2600%); transform: translateX(-2600%); } 77.14285714285714%, 79.42857142857143% { -webkit-transform: translateX(-2700%); transform: translateX(-2700%); } 80%, 82.28571428571429% { -webkit-transform: translateX(-2800%); transform: translateX(-2800%); } 82.85714285714286%, 85.14285714285715% { -webkit-transform: translateX(-2900%); transform: translateX(-2900%); } 85.71428571428572%, 88% { -webkit-transform: translateX(-3000%); transform: translateX(-3000%); } 88.57142857142857%, 90.85714285714286% { -webkit-transform: translateX(-3100%); transform: translateX(-3100%); } 91.42857142857143%, 93.71428571428572% { -webkit-transform: translateX(-3200%); transform: translateX(-3200%); } 94.28571428571429%, 96.57142857142857% { -webkit-transform: translateX(-3300%); transform: translateX(-3300%); } 97.14285714285714%, 99.42857142857143% { -webkit-transform: translateX(-3400%); transform: translateX(-3400%); } } @keyframes slide1 { 0%, 2.2857142857142856% { -webkit-transform: translateX(0%); transform: translateX(0%); } 2.857142857142857%, 5.142857142857143% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 5.714285714285714%, 8% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 8.571428571428571%, 10.857142857142858% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } 11.428571428571429%, 13.714285714285715% { -webkit-transform: translateX(-400%); transform: translateX(-400%); } 14.285714285714286%, 16.57142857142857% { -webkit-transform: translateX(-500%); transform: translateX(-500%); } 17.142857142857142%, 19.428571428571427% { -webkit-transform: translateX(-600%); transform: translateX(-600%); } 20%, 22.285714285714285% { -webkit-transform: translateX(-700%); transform: translateX(-700%); } 22.857142857142858%, 25.142857142857142% { -webkit-transform: translateX(-800%); transform: translateX(-800%); } 25.714285714285715%, 28% { -webkit-transform: translateX(-900%); transform: translateX(-900%); } 28.571428571428573%, 30.857142857142858% { -webkit-transform: translateX(-1000%); transform: translateX(-1000%); } 31.42857142857143%, 33.714285714285715% { -webkit-transform: translateX(-1100%); transform: translateX(-1100%); } 34.285714285714285%, 36.57142857142858% { -webkit-transform: translateX(-1200%); transform: translateX(-1200%); } 37.142857142857146%, 39.42857142857143% { -webkit-transform: translateX(-1300%); transform: translateX(-1300%); } 40%, 42.28571428571429% { -webkit-transform: translateX(-1400%); transform: translateX(-1400%); } 42.85714285714286%, 45.142857142857146% { -webkit-transform: translateX(-1500%); transform: translateX(-1500%); } 45.714285714285715%, 48% { -webkit-transform: translateX(-1600%); transform: translateX(-1600%); } 48.57142857142857%, 50.85714285714286% { -webkit-transform: translateX(-1700%); transform: translateX(-1700%); } 51.42857142857143%, 53.714285714285715% { -webkit-transform: translateX(-1800%); transform: translateX(-1800%); } 54.285714285714285%, 56.57142857142858% { -webkit-transform: translateX(-1900%); transform: translateX(-1900%); } 57.142857142857146%, 59.42857142857143% { -webkit-transform: translateX(-2000%); transform: translateX(-2000%); } 60%, 62.28571428571429% { -webkit-transform: translateX(-2100%); transform: translateX(-2100%); } 62.85714285714286%, 65.14285714285715% { -webkit-transform: translateX(-2200%); transform: translateX(-2200%); } 65.71428571428572%, 68% { -webkit-transform: translateX(-2300%); transform: translateX(-2300%); } 68.57142857142857%, 70.85714285714286% { -webkit-transform: translateX(-2400%); transform: translateX(-2400%); } 71.42857142857143%, 73.71428571428572% { -webkit-transform: translateX(-2500%); transform: translateX(-2500%); } 74.28571428571429%, 76.57142857142857% { -webkit-transform: translateX(-2600%); transform: translateX(-2600%); } 77.14285714285714%, 79.42857142857143% { -webkit-transform: translateX(-2700%); transform: translateX(-2700%); } 80%, 82.28571428571429% { -webkit-transform: translateX(-2800%); transform: translateX(-2800%); } 82.85714285714286%, 85.14285714285715% { -webkit-transform: translateX(-2900%); transform: translateX(-2900%); } 85.71428571428572%, 88% { -webkit-transform: translateX(-3000%); transform: translateX(-3000%); } 88.57142857142857%, 90.85714285714286% { -webkit-transform: translateX(-3100%); transform: translateX(-3100%); } 91.42857142857143%, 93.71428571428572% { -webkit-transform: translateX(-3200%); transform: translateX(-3200%); } 94.28571428571429%, 96.57142857142857% { -webkit-transform: translateX(-3300%); transform: translateX(-3300%); } 97.14285714285714%, 99.42857142857143% { -webkit-transform: translateX(-3400%); transform: translateX(-3400%); } } @-webkit-keyframes slide1-ie { 0%, 2.2857142857142856% { margin-left: 0%; } 2.857142857142857%, 5.142857142857143% { margin-left: -100%; } 5.714285714285714%, 8% { margin-left: -200%; } 8.571428571428571%, 10.857142857142858% { margin-left: -300%; } 11.428571428571429%, 13.714285714285715% { margin-left: -400%; } 14.285714285714286%, 16.57142857142857% { margin-left: -500%; } 17.142857142857142%, 19.428571428571427% { margin-left: -600%; } 20%, 22.285714285714285% { margin-left: -700%; } 22.857142857142858%, 25.142857142857142% { margin-left: -800%; } 25.714285714285715%, 28% { margin-left: -900%; } 28.571428571428573%, 30.857142857142858% { margin-left: -1000%; } 31.42857142857143%, 33.714285714285715% { margin-left: -1100%; } 34.285714285714285%, 36.57142857142858% { margin-left: -1200%; } 37.142857142857146%, 39.42857142857143% { margin-left: -1300%; } 40%, 42.28571428571429% { margin-left: -1400%; } 42.85714285714286%, 45.142857142857146% { margin-left: -1500%; } 45.714285714285715%, 48% { margin-left: -1600%; } 48.57142857142857%, 50.85714285714286% { margin-left: -1700%; } 51.42857142857143%, 53.714285714285715% { margin-left: -1800%; } 54.285714285714285%, 56.57142857142858% { margin-left: -1900%; } 57.142857142857146%, 59.42857142857143% { margin-left: -2000%; } 60%, 62.28571428571429% { margin-left: -2100%; } 62.85714285714286%, 65.14285714285715% { margin-left: -2200%; } 65.71428571428572%, 68% { margin-left: -2300%; } 68.57142857142857%, 70.85714285714286% { margin-left: -2400%; } 71.42857142857143%, 73.71428571428572% { margin-left: -2500%; } 74.28571428571429%, 76.57142857142857% { margin-left: -2600%; } 77.14285714285714%, 79.42857142857143% { margin-left: -2700%; } 80%, 82.28571428571429% { margin-left: -2800%; } 82.85714285714286%, 85.14285714285715% { margin-left: -2900%; } 85.71428571428572%, 88% { margin-left: -3000%; } 88.57142857142857%, 90.85714285714286% { margin-left: -3100%; } 91.42857142857143%, 93.71428571428572% { margin-left: -3200%; } 94.28571428571429%, 96.57142857142857% { margin-left: -3300%; } 97.14285714285714%, 99.42857142857143% { margin-left: -3400%; } } @keyframes slide1-ie { 0%, 2.2857142857142856% { margin-left: 0%; } 2.857142857142857%, 5.142857142857143% { margin-left: -100%; } 5.714285714285714%, 8% { margin-left: -200%; } 8.571428571428571%, 10.857142857142858% { margin-left: -300%; } 11.428571428571429%, 13.714285714285715% { margin-left: -400%; } 14.285714285714286%, 16.57142857142857% { margin-left: -500%; } 17.142857142857142%, 19.428571428571427% { margin-left: -600%; } 20%, 22.285714285714285% { margin-left: -700%; } 22.857142857142858%, 25.142857142857142% { margin-left: -800%; } 25.714285714285715%, 28% { margin-left: -900%; } 28.571428571428573%, 30.857142857142858% { margin-left: -1000%; } 31.42857142857143%, 33.714285714285715% { margin-left: -1100%; } 34.285714285714285%, 36.57142857142858% { margin-left: -1200%; } 37.142857142857146%, 39.42857142857143% { margin-left: -1300%; } 40%, 42.28571428571429% { margin-left: -1400%; } 42.85714285714286%, 45.142857142857146% { margin-left: -1500%; } 45.714285714285715%, 48% { margin-left: -1600%; } 48.57142857142857%, 50.85714285714286% { margin-left: -1700%; } 51.42857142857143%, 53.714285714285715% { margin-left: -1800%; } 54.285714285714285%, 56.57142857142858% { margin-left: -1900%; } 57.142857142857146%, 59.42857142857143% { margin-left: -2000%; } 60%, 62.28571428571429% { margin-left: -2100%; } 62.85714285714286%, 65.14285714285715% { margin-left: -2200%; } 65.71428571428572%, 68% { margin-left: -2300%; } 68.57142857142857%, 70.85714285714286% { margin-left: -2400%; } 71.42857142857143%, 73.71428571428572% { margin-left: -2500%; } 74.28571428571429%, 76.57142857142857% { margin-left: -2600%; } 77.14285714285714%, 79.42857142857143% { margin-left: -2700%; } 80%, 82.28571428571429% { margin-left: -2800%; } 82.85714285714286%, 85.14285714285715% { margin-left: -2900%; } 85.71428571428572%, 88% { margin-left: -3000%; } 88.57142857142857%, 90.85714285714286% { margin-left: -3100%; } 91.42857142857143%, 93.71428571428572% { margin-left: -3200%; } 94.28571428571429%, 96.57142857142857% { margin-left: -3300%; } 97.14285714285714%, 99.42857142857143% { margin-left: -3400%; } } .csslider1 > #cs_play1:checked ~ ul > .slide { -webkit-animation: slide1 175000ms infinite; animation: slide1 175000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider1 > #cs_play1:checked ~ ul > .slide { animation: slide1-ie 175000ms infinite; } } .csslider1 > #cs_play1:checked ~ ul > .slide, .csslider1 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider1 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider1 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider1 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider1 > .cs_arrowprev, .csslider1 > .cs_arrownext, .csslider1 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider1:hover > .cs_arrowprev, .csslider1:hover > .cs_arrownext, .csslider1:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* hide description & bullets on mobile devices */ @media only screen and (max-width: 480px), only screen and (-webkit-max-device-pixel-ratio: 2) and (max-width: 480px), only screen and ( max--moz-device-pixel-ratio: 2) and (max-width: 480px), only screen and ( -o-max-device-pixel-ratio: 2/1) and (max-width: 480px), only screen and ( max-device-pixel-ratio: 2) and (max-width: 480px), only screen and ( max-resolution: 192dpi) and (max-width: 480px), only screen and ( max-resolution: 2dppx) and (max-width: 480px) { .csslider1 > .cs_description, .csslider1 > .cs_bullets { display: none; } }