/* ------------- 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; } .csslider { display: inline-block; position: relative; height: 360px; width: 100%; } .csslider, .csslider *, .csslider *:after, .csslider *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider > .cs_anchor { display: none; } .csslider > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; height: 360px; overflow: hidden; white-space: nowrap; } .csslider > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider > ul > .slide.img img { width: 100%; } .csslider > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider > 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); } .csslider .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider > ul > li.img, .csslider > .cs_arrowprev, .csslider > .cs_arrownext, .csslider > .cs_bullets, .csslider > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider > .cs_arrowprev, .csslider > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider > .cs_arrowprev > label, .csslider > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider > .cs_arrowprev { left: 0; } .csslider > .cs_arrownext { right: 0; } .csslider > .slide:checked ~ .cs_arrowprev > label, .csslider > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider > #cs_slide1_0:checked ~ .cs_arrowprev > label.num2, .csslider > #cs_pause1_0:checked ~ .cs_arrowprev > label.num2, .csslider > #cs_slide1_0:checked ~ .cs_arrownext > label.num1, .csslider > #cs_pause1_0:checked ~ .cs_arrownext > label.num1, .csslider > #cs_slide1_1:checked ~ .cs_arrowprev > label.num0, .csslider > #cs_pause1_1:checked ~ .cs_arrowprev > label.num0, .csslider > #cs_slide1_1:checked ~ .cs_arrownext > label.num2, .csslider > #cs_pause1_1:checked ~ .cs_arrownext > label.num2, .csslider > #cs_slide1_2:checked ~ .cs_arrowprev > label.num1, .csslider > #cs_pause1_2:checked ~ .cs_arrowprev > label.num1, .csslider > #cs_slide1_2:checked ~ .cs_arrownext > label.num0, .csslider > #cs_pause1_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider > #cs_play1:checked ~ .cs_arrowprev > label.num2, .csslider > #cs_play1:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow 24000ms infinite -2000ms; animation: arrow 24000ms infinite -2000ms; } .csslider > #cs_play1:checked ~ .cs_arrowprev > label.num0, .csslider > #cs_play1:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow 24000ms infinite 6000ms; animation: arrow 24000ms infinite 6000ms; } .csslider > #cs_play1:checked ~ .cs_arrowprev > label.num1, .csslider > #cs_play1:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow 24000ms infinite 14000ms; animation: arrow 24000ms infinite 14000ms; } .csslider > .slide:checked ~ .cs_arrowprev > label, .csslider > .slide:checked ~ .cs_arrownext > label, .csslider > .pause:checked ~ .cs_arrowprev > label, .csslider > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -32px; top: -48px; } .csslider > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider > .cs_description { z-index: 3; } .csslider > .cs_description a, .csslider > .cs_description a:visited, .csslider > .cs_description a:active { color: inherit; } .csslider > .cs_description a:hover { text-decoration: none; } .csslider > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider > .cs_description > label > span { vertical-align: top; } .csslider > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider > #cs_play1:checked ~ .cs_play_pause > .cs_pause, .csslider > .slide:checked ~ .cs_play_pause > .cs_play, .csslider > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider > #cs_play1:checked ~ .cs_play_pause > .cs_play, .csslider > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 24000ms infinite -2000ms; animation: pauseChange 24000ms infinite -2000ms; } .csslider > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 24000ms infinite 6000ms; animation: pauseChange 24000ms infinite 6000ms; } .csslider > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 24000ms infinite 14000ms; animation: pauseChange 24000ms infinite 14000ms; } .csslider > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider > ul > .slide.num0 { left: 0%; } .csslider > ul > .slide.num1 { left: 100%; } .csslider > ul > .slide.num2 { left: 200%; } .csslider > #cs_slide1_0:checked ~ ul > .slide, .csslider > #cs_pause1_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider > #cs_slide1_1:checked ~ ul > .slide, .csslider > #cs_pause1_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider > #cs_slide1_2:checked ~ ul > .slide, .csslider > #cs_pause1_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide1 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes slide1 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes slide1-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } @keyframes slide1-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } .csslider > #cs_play1:checked ~ ul > .slide { -webkit-animation: slide1 24000ms infinite; animation: slide1 24000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider > #cs_play1:checked ~ ul > .slide { animation: slide1-ie 24000ms infinite; } } .csslider > #cs_play1:checked ~ ul > .slide, .csslider > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider > .cs_arrowprev, .csslider > .cs_arrownext, .csslider > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider:hover > .cs_arrowprev, .csslider:hover > .cs_arrownext, .csslider:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider > .cs_arrowprev > label, .csslider > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider > .cs_arrowprev > label, .csslider > .cs_arrownext > label, .csslider > .cs_arrowprev > label span:after, .csslider > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider > .cs_arrowprev > label span, .csslider > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider > .cs_arrowprev > label span:after, .csslider > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider > .cs_arrownext > label span:after { line-height: 29px; } .csslider > .cs_arrowprev > label span:after { content: '\e800'; } .csslider > .cs_arrownext > label span:after { content: '\e801'; } .csslider > .cs_arrowprev:hover > label, .csslider > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow .7s infinite ease-in-out; animation: nextArrow .7s infinite ease-in-out; } .csslider > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow .7s infinite ease-in-out; animation: prevArrow .7s infinite ease-in-out; } @keyframes nextArrow { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider > .cs_play_pause > label, .csslider > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider > .cs_play_pause > label span:after { line-height: 28px; } .csslider > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause .7s infinite ease-in-out; animation: playPause .7s infinite ease-in-out; } @-webkit-keyframes playPause { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider > .cs_bullets > label { border-radius: 66%; margin: 0 5px; padding: 6px; background: #454545; } .csslider > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider > .cs_bullets > label:hover > .cs_point, .csslider > #cs_slide1_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider > #cs_pause1_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider > #cs_slide1_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider > #cs_pause1_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider > #cs_slide1_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider > #cs_pause1_2:checked ~ .cs_bullets > label.num2 > .cs_point { background: #EEEEEE; } @keyframes bullet { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-webkit-keyframes bullet { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } .csslider > #cs_play1:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider > #cs_pause1:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet 24000ms infinite -2000ms; animation: bullet 24000ms infinite -2000ms; } .csslider > #cs_play1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider > #cs_pause1:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet 24000ms infinite 6000ms; animation: bullet 24000ms infinite 6000ms; } .csslider > #cs_play1:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider > #cs_pause1:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet 24000ms infinite 14000ms; animation: bullet 24000ms infinite 14000ms; } .csslider > #cs_play1:checked ~ .cs_bullets > label > .cs_point, .csslider > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider > #cs_slide1_0:checked ~ .cs_description > .num0 > .cs_title, .csslider > #cs_slide1_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider > #cs_pause1_0:checked ~ .cs_description > .num0 > .cs_title, .csslider > #cs_pause1_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider > #cs_slide1_1:checked ~ .cs_description > .num1 > .cs_title, .csslider > #cs_slide1_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider > #cs_pause1_1:checked ~ .cs_description > .num1 > .cs_title, .csslider > #cs_pause1_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider > #cs_slide1_2:checked ~ .cs_description > .num2 > .cs_title, .csslider > #cs_slide1_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider > #cs_pause1_2:checked ~ .cs_description > .num2 > .cs_title, .csslider > #cs_pause1_2:checked ~ .cs_description > .num2 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider > #cs_slide1_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider > #cs_pause1_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider > #cs_slide1_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider > #cs_pause1_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider > #cs_slide1_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider > #cs_pause1_2:checked ~ .cs_description > .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_title { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_descr { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } .csslider > #cs_play1:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title 24000ms infinite -1400ms ease; animation: cs_title 24000ms infinite -1400ms ease; } .csslider > #cs_play1:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title 24000ms infinite 6600ms ease; animation: cs_title 24000ms infinite 6600ms ease; } .csslider > #cs_play1:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title 24000ms infinite 14600ms ease; animation: cs_title 24000ms infinite 14600ms ease; } .csslider > #cs_play1:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr 24000ms infinite -1150ms ease; animation: cs_descr 24000ms infinite -1150ms ease; } .csslider > #cs_play1:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr 24000ms infinite 6850ms ease; animation: cs_descr 24000ms infinite 6850ms ease; } .csslider > #cs_play1:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr 24000ms infinite 14850ms ease; animation: cs_descr 24000ms infinite 14850ms ease; } @-webkit-keyframes cs_title_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider > #cs_play1:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text 24000ms infinite -1250ms ease; animation: cs_title_text 24000ms infinite -1250ms ease; } .csslider > #cs_play1:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text 24000ms infinite 6750ms ease; animation: cs_title_text 24000ms infinite 6750ms ease; } .csslider > #cs_play1:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text 24000ms infinite 14750ms ease; animation: cs_title_text 24000ms infinite 14750ms ease; } .csslider > #cs_play1:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text 24000ms infinite -1000ms ease; animation: cs_descr_text 24000ms infinite -1000ms ease; } .csslider > #cs_play1:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text 24000ms infinite 7000ms ease; animation: cs_descr_text 24000ms infinite 7000ms ease; } .csslider > #cs_play1:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text 24000ms infinite 15000ms ease; animation: cs_descr_text 24000ms infinite 15000ms ease; } .csslider > #cs_play1:checked ~ .cs_description > label > .cs_title, .csslider > #cs_play1:checked ~ .cs_description > label > .cs_descr, .csslider > #cs_play1:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider > #cs_play1:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider > .pause:checked ~ .cs_description > label > .cs_title, .csslider > .pause:checked ~ .cs_description > label > .cs_descr, .csslider > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider > .cs_description, .csslider > .cs_bullets { display: none; } } @media only screen and (max-width: 480px) { .csslider, .csslider > ul { height: auto; } } /* ------------- 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 ------------- */ /* ------------- General Arrows ------------- */ .csslider1 > .cs_arrowprev, .csslider1 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider1 > .cs_arrowprev > label, .csslider1 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider1 > .cs_arrowprev { left: 0; } .csslider1 > .cs_arrownext { right: 0; } .csslider1 > .slide:checked ~ .cs_arrowprev > label, .csslider1 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider1 > #cs_slide1_0:checked ~ .cs_arrowprev > label.num2, .csslider1 > #cs_pause1_0:checked ~ .cs_arrowprev > label.num2, .csslider1 > #cs_slide1_0:checked ~ .cs_arrownext > label.num1, .csslider1 > #cs_pause1_0:checked ~ .cs_arrownext > label.num1, .csslider1 > #cs_slide1_1:checked ~ .cs_arrowprev > label.num0, .csslider1 > #cs_pause1_1:checked ~ .cs_arrowprev > label.num0, .csslider1 > #cs_slide1_1:checked ~ .cs_arrownext > label.num2, .csslider1 > #cs_pause1_1:checked ~ .cs_arrownext > label.num2, .csslider1 > #cs_slide1_2:checked ~ .cs_arrowprev > label.num1, .csslider1 > #cs_pause1_2:checked ~ .cs_arrowprev > label.num1, .csslider1 > #cs_slide1_2:checked ~ .cs_arrownext > label.num0, .csslider1 > #cs_pause1_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow1 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow1 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num2, .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow1 24000ms infinite -2000ms; animation: arrow1 24000ms infinite -2000ms; } .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num0, .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow1 24000ms infinite 6000ms; animation: arrow1 24000ms infinite 6000ms; } .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num1, .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow1 24000ms infinite 14000ms; animation: arrow1 24000ms infinite 14000ms; } .csslider1 > .slide:checked ~ .cs_arrowprev > label, .csslider1 > .slide:checked ~ .cs_arrownext > label, .csslider1 > .pause:checked ~ .cs_arrowprev > label, .csslider1 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider1 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider1 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider1 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider1 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider1 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider1 > .cs_description { z-index: 3; } .csslider1 > .cs_description a, .csslider1 > .cs_description a:visited, .csslider1 > .cs_description a:active { color: inherit; } .csslider1 > .cs_description a:hover { text-decoration: none; } .csslider1 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider1 > .cs_description > label > span { vertical-align: top; } .csslider1 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider1 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider1 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause, .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider1 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_play, .csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange1 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange1 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange1 24000ms infinite -2000ms; animation: pauseChange1 24000ms infinite -2000ms; } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange1 24000ms infinite 6000ms; animation: pauseChange1 24000ms infinite 6000ms; } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange1 24000ms infinite 14000ms; animation: pauseChange1 24000ms infinite 14000ms; } .csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider1 > ul > .slide.num0 { left: 0%; } .csslider1 > ul > .slide.num1 { left: 100%; } .csslider1 > ul > .slide.num2 { left: 200%; } .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 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide1 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes slide1 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes slide1-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } @keyframes slide1-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } .csslider1 > #cs_play1:checked ~ ul > .slide { -webkit-animation: slide1 24000ms infinite; animation: slide1 24000ms 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 24000ms 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 ------------- */ /* ------------- Template Arrows ------------- */ .csslider1 > .cs_arrowprev > label, .csslider1 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider1 > .cs_arrowprev > label, .csslider1 > .cs_arrownext > label, .csslider1 > .cs_arrowprev > label span:after, .csslider1 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider1 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider1 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider1 > .cs_arrowprev > label span, .csslider1 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider1 > .cs_arrowprev > label span:after, .csslider1 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider1 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider1 > .cs_arrownext > label span:after { line-height: 29px; } .csslider1 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider1 > .cs_arrownext > label span:after { content: '\e801'; } .csslider1 > .cs_arrowprev:hover > label, .csslider1 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider1 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow1 .7s infinite ease-in-out; animation: nextArrow1 .7s infinite ease-in-out; } .csslider1 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow1 .7s infinite ease-in-out; animation: prevArrow1 .7s infinite ease-in-out; } @keyframes nextArrow1 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow1 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow1 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow1 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider1 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider1 > .cs_play_pause > label, .csslider1 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider1 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider1 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider1 > .cs_play_pause > label span:after { line-height: 28px; } .csslider1 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider1 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider1 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider1 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause1 .7s infinite ease-in-out; animation: playPause1 .7s infinite ease-in-out; } @-webkit-keyframes playPause1 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause1 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider1 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider1 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider1 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider1 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider1 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider1 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider1 > .cs_bullets > label:hover > .cs_point, .csslider1 > #cs_slide1_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider1 > #cs_pause1_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider1 > #cs_slide1_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider1 > #cs_pause1_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider1 > #cs_slide1_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider1 > #cs_pause1_2:checked ~ .cs_bullets > label.num2 > .cs_point { background: #3A4A5A; } @keyframes bullet1 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-webkit-keyframes bullet1 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet1 24000ms infinite -2000ms; animation: bullet1 24000ms infinite -2000ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet1 24000ms infinite 6000ms; animation: bullet1 24000ms infinite 6000ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet1 24000ms infinite 14000ms; animation: bullet1 24000ms infinite 14000ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label > .cs_point, .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider1 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider1 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider1 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 > .cs_title, .csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider1 > #cs_pause1_0:checked ~ .cs_description > .num0 > .cs_title, .csslider1 > #cs_pause1_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 > .cs_title, .csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider1 > #cs_pause1_1:checked ~ .cs_description > .num1 > .cs_title, .csslider1 > #cs_pause1_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 > .cs_title, .csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider1 > #cs_pause1_2:checked ~ .cs_description > .num2 > .cs_title, .csslider1 > #cs_pause1_2:checked ~ .cs_description > .num2 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider1 > #cs_pause1_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider1 > #cs_pause1_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider1 > #cs_pause1_2:checked ~ .cs_description > .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider1 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider1 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider1 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider1 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title1 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_title1 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr1 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_descr1 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } .csslider1 > #cs_play1:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title1 24000ms infinite -1400ms ease; animation: cs_title1 24000ms infinite -1400ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title1 24000ms infinite 6600ms ease; animation: cs_title1 24000ms infinite 6600ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title1 24000ms infinite 14600ms ease; animation: cs_title1 24000ms infinite 14600ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr1 24000ms infinite -1150ms ease; animation: cs_descr1 24000ms infinite -1150ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr1 24000ms infinite 6850ms ease; animation: cs_descr1 24000ms infinite 6850ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr1 24000ms infinite 14850ms ease; animation: cs_descr1 24000ms infinite 14850ms ease; } @-webkit-keyframes cs_title_text1 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text1 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text1 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text1 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider1 > #cs_play1:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text1 24000ms infinite -1250ms ease; animation: cs_title_text1 24000ms infinite -1250ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text1 24000ms infinite 6750ms ease; animation: cs_title_text1 24000ms infinite 6750ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text1 24000ms infinite 14750ms ease; animation: cs_title_text1 24000ms infinite 14750ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text1 24000ms infinite -1000ms ease; animation: cs_descr_text1 24000ms infinite -1000ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text1 24000ms infinite 7000ms ease; animation: cs_descr_text1 24000ms infinite 7000ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text1 24000ms infinite 15000ms ease; animation: cs_descr_text1 24000ms infinite 15000ms ease; } .csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_title, .csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_descr, .csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider1 > .pause:checked ~ .cs_description > label > .cs_title, .csslider1 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider1 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider1 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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; } } /* ------------- 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; } .csslider2 { display: inline-block; position: relative; height: 360px; width: 100%; } .csslider2, .csslider2 *, .csslider2 *:after, .csslider2 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider2 > .cs_anchor { display: none; } .csslider2 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; height: 360px; overflow: hidden; white-space: nowrap; } .csslider2 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider2 > ul > .slide.img img { width: 100%; } .csslider2 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider2 > 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); } .csslider2 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider2 > ul > li.img, .csslider2 > .cs_arrowprev, .csslider2 > .cs_arrownext, .csslider2 > .cs_bullets, .csslider2 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider2 > .cs_arrowprev, .csslider2 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider2 > .cs_arrowprev > label, .csslider2 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider2 > .cs_arrowprev { left: 0; } .csslider2 > .cs_arrownext { right: 0; } .csslider2 > .slide:checked ~ .cs_arrowprev > label, .csslider2 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider2 > #cs_slide2_0:checked ~ .cs_arrowprev > label.num2, .csslider2 > #cs_pause2_0:checked ~ .cs_arrowprev > label.num2, .csslider2 > #cs_slide2_0:checked ~ .cs_arrownext > label.num1, .csslider2 > #cs_pause2_0:checked ~ .cs_arrownext > label.num1, .csslider2 > #cs_slide2_1:checked ~ .cs_arrowprev > label.num0, .csslider2 > #cs_pause2_1:checked ~ .cs_arrowprev > label.num0, .csslider2 > #cs_slide2_1:checked ~ .cs_arrownext > label.num2, .csslider2 > #cs_pause2_1:checked ~ .cs_arrownext > label.num2, .csslider2 > #cs_slide2_2:checked ~ .cs_arrowprev > label.num1, .csslider2 > #cs_pause2_2:checked ~ .cs_arrowprev > label.num1, .csslider2 > #cs_slide2_2:checked ~ .cs_arrownext > label.num0, .csslider2 > #cs_pause2_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow2 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow2 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider2 > #cs_play2:checked ~ .cs_arrowprev > label.num2, .csslider2 > #cs_play2:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow2 24000ms infinite -2000ms; animation: arrow2 24000ms infinite -2000ms; } .csslider2 > #cs_play2:checked ~ .cs_arrowprev > label.num0, .csslider2 > #cs_play2:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow2 24000ms infinite 6000ms; animation: arrow2 24000ms infinite 6000ms; } .csslider2 > #cs_play2:checked ~ .cs_arrowprev > label.num1, .csslider2 > #cs_play2:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow2 24000ms infinite 14000ms; animation: arrow2 24000ms infinite 14000ms; } .csslider2 > .slide:checked ~ .cs_arrowprev > label, .csslider2 > .slide:checked ~ .cs_arrownext > label, .csslider2 > .pause:checked ~ .cs_arrowprev > label, .csslider2 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider2 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider2 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider2 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider2 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider2 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider2 > .cs_description { z-index: 3; } .csslider2 > .cs_description a, .csslider2 > .cs_description a:visited, .csslider2 > .cs_description a:active { color: inherit; } .csslider2 > .cs_description a:hover { text-decoration: none; } .csslider2 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider2 > .cs_description > label > span { vertical-align: top; } .csslider2 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider2 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider2 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider2 > #cs_play2:checked ~ .cs_play_pause > .cs_pause, .csslider2 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider2 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider2 > #cs_play2:checked ~ .cs_play_pause > .cs_play, .csslider2 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider2 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange2 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange2 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider2 > #cs_play2:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange2 24000ms infinite -2000ms; animation: pauseChange2 24000ms infinite -2000ms; } .csslider2 > #cs_play2:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange2 24000ms infinite 6000ms; animation: pauseChange2 24000ms infinite 6000ms; } .csslider2 > #cs_play2:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange2 24000ms infinite 14000ms; animation: pauseChange2 24000ms infinite 14000ms; } .csslider2 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider2 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider2 > ul > .slide.num0 { left: 0%; } .csslider2 > ul > .slide.num1 { left: 100%; } .csslider2 > ul > .slide.num2 { left: 200%; } .csslider2 > #cs_slide2_0:checked ~ ul > .slide, .csslider2 > #cs_pause2_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider2 > #cs_slide2_1:checked ~ ul > .slide, .csslider2 > #cs_pause2_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider2 > #cs_slide2_2:checked ~ ul > .slide, .csslider2 > #cs_pause2_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider2 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide2 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes slide2 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes slide2-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } @keyframes slide2-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } .csslider2 > #cs_play2:checked ~ ul > .slide { -webkit-animation: slide2 24000ms infinite; animation: slide2 24000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider2 > #cs_play2:checked ~ ul > .slide { animation: slide2-ie 24000ms infinite; } } .csslider2 > #cs_play2:checked ~ ul > .slide, .csslider2 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider2 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider2 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider2 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider2 > .cs_arrowprev, .csslider2 > .cs_arrownext, .csslider2 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider2:hover > .cs_arrowprev, .csslider2:hover > .cs_arrownext, .csslider2:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider2 > .cs_arrowprev > label, .csslider2 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider2 > .cs_arrowprev > label, .csslider2 > .cs_arrownext > label, .csslider2 > .cs_arrowprev > label span:after, .csslider2 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider2 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider2 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider2 > .cs_arrowprev > label span, .csslider2 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider2 > .cs_arrowprev > label span:after, .csslider2 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider2 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider2 > .cs_arrownext > label span:after { line-height: 29px; } .csslider2 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider2 > .cs_arrownext > label span:after { content: '\e801'; } .csslider2 > .cs_arrowprev:hover > label, .csslider2 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider2 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow2 .7s infinite ease-in-out; animation: nextArrow2 .7s infinite ease-in-out; } .csslider2 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow2 .7s infinite ease-in-out; animation: prevArrow2 .7s infinite ease-in-out; } @keyframes nextArrow2 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow2 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow2 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow2 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider2 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider2 > .cs_play_pause > label, .csslider2 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider2 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider2 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider2 > .cs_play_pause > label span:after { line-height: 28px; } .csslider2 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider2 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider2 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider2 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause2 .7s infinite ease-in-out; animation: playPause2 .7s infinite ease-in-out; } @-webkit-keyframes playPause2 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause2 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider2 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider2 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider2 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider2 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider2 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider2 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider2 > .cs_bullets > label:hover > .cs_point, .csslider2 > #cs_slide2_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider2 > #cs_pause2_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider2 > #cs_slide2_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider2 > #cs_pause2_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider2 > #cs_slide2_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider2 > #cs_pause2_2:checked ~ .cs_bullets > label.num2 > .cs_point { background: #3A4A5A; } @keyframes bullet2 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-webkit-keyframes bullet2 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } .csslider2 > #cs_play2:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider2 > #cs_pause2:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet2 24000ms infinite -2000ms; animation: bullet2 24000ms infinite -2000ms; } .csslider2 > #cs_play2:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider2 > #cs_pause2:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet2 24000ms infinite 6000ms; animation: bullet2 24000ms infinite 6000ms; } .csslider2 > #cs_play2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider2 > #cs_pause2:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet2 24000ms infinite 14000ms; animation: bullet2 24000ms infinite 14000ms; } .csslider2 > #cs_play2:checked ~ .cs_bullets > label > .cs_point, .csslider2 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider2 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider2 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider2 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider2 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider2 > #cs_slide2_0:checked ~ .cs_description > .num0 > .cs_title, .csslider2 > #cs_slide2_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider2 > #cs_pause2_0:checked ~ .cs_description > .num0 > .cs_title, .csslider2 > #cs_pause2_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider2 > #cs_slide2_1:checked ~ .cs_description > .num1 > .cs_title, .csslider2 > #cs_slide2_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider2 > #cs_pause2_1:checked ~ .cs_description > .num1 > .cs_title, .csslider2 > #cs_pause2_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider2 > #cs_slide2_2:checked ~ .cs_description > .num2 > .cs_title, .csslider2 > #cs_slide2_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider2 > #cs_pause2_2:checked ~ .cs_description > .num2 > .cs_title, .csslider2 > #cs_pause2_2:checked ~ .cs_description > .num2 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider2 > #cs_slide2_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider2 > #cs_pause2_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider2 > #cs_slide2_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider2 > #cs_pause2_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider2 > #cs_slide2_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider2 > #cs_pause2_2:checked ~ .cs_description > .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider2 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider2 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider2 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider2 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title2 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_title2 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr2 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_descr2 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } .csslider2 > #cs_play2:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title2 24000ms infinite -1400ms ease; animation: cs_title2 24000ms infinite -1400ms ease; } .csslider2 > #cs_play2:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title2 24000ms infinite 6600ms ease; animation: cs_title2 24000ms infinite 6600ms ease; } .csslider2 > #cs_play2:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title2 24000ms infinite 14600ms ease; animation: cs_title2 24000ms infinite 14600ms ease; } .csslider2 > #cs_play2:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr2 24000ms infinite -1150ms ease; animation: cs_descr2 24000ms infinite -1150ms ease; } .csslider2 > #cs_play2:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr2 24000ms infinite 6850ms ease; animation: cs_descr2 24000ms infinite 6850ms ease; } .csslider2 > #cs_play2:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr2 24000ms infinite 14850ms ease; animation: cs_descr2 24000ms infinite 14850ms ease; } @-webkit-keyframes cs_title_text2 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text2 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text2 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text2 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider2 > #cs_play2:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text2 24000ms infinite -1250ms ease; animation: cs_title_text2 24000ms infinite -1250ms ease; } .csslider2 > #cs_play2:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text2 24000ms infinite 6750ms ease; animation: cs_title_text2 24000ms infinite 6750ms ease; } .csslider2 > #cs_play2:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text2 24000ms infinite 14750ms ease; animation: cs_title_text2 24000ms infinite 14750ms ease; } .csslider2 > #cs_play2:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text2 24000ms infinite -1000ms ease; animation: cs_descr_text2 24000ms infinite -1000ms ease; } .csslider2 > #cs_play2:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text2 24000ms infinite 7000ms ease; animation: cs_descr_text2 24000ms infinite 7000ms ease; } .csslider2 > #cs_play2:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text2 24000ms infinite 15000ms ease; animation: cs_descr_text2 24000ms infinite 15000ms ease; } .csslider2 > #cs_play2:checked ~ .cs_description > label > .cs_title, .csslider2 > #cs_play2:checked ~ .cs_description > label > .cs_descr, .csslider2 > #cs_play2:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider2 > #cs_play2:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider2 > .pause:checked ~ .cs_description > label > .cs_title, .csslider2 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider2 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider2 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider2 > .cs_description, .csslider2 > .cs_bullets { display: none; } } @media only screen and (max-width: 640px) { .csslider2, .csslider2 > ul { height: auto; } } /* ------------- 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; } .csslider3 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider3, .csslider3 *, .csslider3 *:after, .csslider3 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider3 > .cs_anchor { display: none; } .csslider3 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider3 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider3 > ul > .slide.img img { width: 100%; } .csslider3 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider3 > 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); } .csslider3 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider3 > ul > li.img, .csslider3 > .cs_arrowprev, .csslider3 > .cs_arrownext, .csslider3 > .cs_bullets, .csslider3 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider3 > .cs_arrowprev, .csslider3 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider3 > .cs_arrowprev > label, .csslider3 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider3 > .cs_arrowprev { left: 0; } .csslider3 > .cs_arrownext { right: 0; } .csslider3 > .slide:checked ~ .cs_arrowprev > label, .csslider3 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider3 > #cs_slide3_0:checked ~ .cs_arrowprev > label.num2, .csslider3 > #cs_pause3_0:checked ~ .cs_arrowprev > label.num2, .csslider3 > #cs_slide3_0:checked ~ .cs_arrownext > label.num1, .csslider3 > #cs_pause3_0:checked ~ .cs_arrownext > label.num1, .csslider3 > #cs_slide3_1:checked ~ .cs_arrowprev > label.num0, .csslider3 > #cs_pause3_1:checked ~ .cs_arrowprev > label.num0, .csslider3 > #cs_slide3_1:checked ~ .cs_arrownext > label.num2, .csslider3 > #cs_pause3_1:checked ~ .cs_arrownext > label.num2, .csslider3 > #cs_slide3_2:checked ~ .cs_arrowprev > label.num1, .csslider3 > #cs_pause3_2:checked ~ .cs_arrowprev > label.num1, .csslider3 > #cs_slide3_2:checked ~ .cs_arrownext > label.num0, .csslider3 > #cs_pause3_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow3 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow3 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider3 > #cs_play3:checked ~ .cs_arrowprev > label.num2, .csslider3 > #cs_play3:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow3 24000ms infinite -2000ms; animation: arrow3 24000ms infinite -2000ms; } .csslider3 > #cs_play3:checked ~ .cs_arrowprev > label.num0, .csslider3 > #cs_play3:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow3 24000ms infinite 6000ms; animation: arrow3 24000ms infinite 6000ms; } .csslider3 > #cs_play3:checked ~ .cs_arrowprev > label.num1, .csslider3 > #cs_play3:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow3 24000ms infinite 14000ms; animation: arrow3 24000ms infinite 14000ms; } .csslider3 > .slide:checked ~ .cs_arrowprev > label, .csslider3 > .slide:checked ~ .cs_arrownext > label, .csslider3 > .pause:checked ~ .cs_arrowprev > label, .csslider3 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider3 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider3 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider3 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider3 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider3 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider3 > .cs_description { z-index: 3; } .csslider3 > .cs_description a, .csslider3 > .cs_description a:visited, .csslider3 > .cs_description a:active { color: inherit; } .csslider3 > .cs_description a:hover { text-decoration: none; } .csslider3 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider3 > .cs_description > label > span { vertical-align: top; } .csslider3 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider3 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider3 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider3 > #cs_play3:checked ~ .cs_play_pause > .cs_pause, .csslider3 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider3 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider3 > #cs_play3:checked ~ .cs_play_pause > .cs_play, .csslider3 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider3 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange3 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange3 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider3 > #cs_play3:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange3 24000ms infinite -2000ms; animation: pauseChange3 24000ms infinite -2000ms; } .csslider3 > #cs_play3:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange3 24000ms infinite 6000ms; animation: pauseChange3 24000ms infinite 6000ms; } .csslider3 > #cs_play3:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange3 24000ms infinite 14000ms; animation: pauseChange3 24000ms infinite 14000ms; } .csslider3 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider3 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider3 > ul > .slide.num0 { left: 0%; } .csslider3 > ul > .slide.num1 { left: 100%; } .csslider3 > ul > .slide.num2 { left: 200%; } .csslider3 > #cs_slide3_0:checked ~ ul > .slide, .csslider3 > #cs_pause3_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider3 > #cs_slide3_1:checked ~ ul > .slide, .csslider3 > #cs_pause3_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider3 > #cs_slide3_2:checked ~ ul > .slide, .csslider3 > #cs_pause3_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider3 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide3 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes slide3 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes slide3-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } @keyframes slide3-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } .csslider3 > #cs_play3:checked ~ ul > .slide { -webkit-animation: slide3 24000ms infinite; animation: slide3 24000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider3 > #cs_play3:checked ~ ul > .slide { animation: slide3-ie 24000ms infinite; } } .csslider3 > #cs_play3:checked ~ ul > .slide, .csslider3 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider3 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider3 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider3 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider3 > .cs_arrowprev, .csslider3 > .cs_arrownext, .csslider3 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider3:hover > .cs_arrowprev, .csslider3:hover > .cs_arrownext, .csslider3:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider3 > .cs_arrowprev > label, .csslider3 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider3 > .cs_arrowprev > label, .csslider3 > .cs_arrownext > label, .csslider3 > .cs_arrowprev > label span:after, .csslider3 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider3 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider3 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider3 > .cs_arrowprev > label span, .csslider3 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider3 > .cs_arrowprev > label span:after, .csslider3 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider3 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider3 > .cs_arrownext > label span:after { line-height: 29px; } .csslider3 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider3 > .cs_arrownext > label span:after { content: '\e801'; } .csslider3 > .cs_arrowprev:hover > label, .csslider3 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider3 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow3 .7s infinite ease-in-out; animation: nextArrow3 .7s infinite ease-in-out; } .csslider3 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow3 .7s infinite ease-in-out; animation: prevArrow3 .7s infinite ease-in-out; } @keyframes nextArrow3 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow3 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow3 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow3 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider3 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider3 > .cs_play_pause > label, .csslider3 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider3 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider3 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider3 > .cs_play_pause > label span:after { line-height: 28px; } .csslider3 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider3 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider3 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider3 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause3 .7s infinite ease-in-out; animation: playPause3 .7s infinite ease-in-out; } @-webkit-keyframes playPause3 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause3 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider3 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider3 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider3 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider3 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider3 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider3 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider3 > .cs_bullets > label:hover > .cs_point, .csslider3 > #cs_slide3_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider3 > #cs_pause3_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider3 > #cs_slide3_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider3 > #cs_pause3_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider3 > #cs_slide3_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider3 > #cs_pause3_2:checked ~ .cs_bullets > label.num2 > .cs_point { background: #3A4A5A; } @keyframes bullet3 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-webkit-keyframes bullet3 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } .csslider3 > #cs_play3:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider3 > #cs_pause3:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet3 24000ms infinite -2000ms; animation: bullet3 24000ms infinite -2000ms; } .csslider3 > #cs_play3:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider3 > #cs_pause3:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet3 24000ms infinite 6000ms; animation: bullet3 24000ms infinite 6000ms; } .csslider3 > #cs_play3:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider3 > #cs_pause3:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet3 24000ms infinite 14000ms; animation: bullet3 24000ms infinite 14000ms; } .csslider3 > #cs_play3:checked ~ .cs_bullets > label > .cs_point, .csslider3 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider3 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider3 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider3 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider3 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider3 > #cs_slide3_0:checked ~ .cs_description > .num0 > .cs_title, .csslider3 > #cs_slide3_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider3 > #cs_pause3_0:checked ~ .cs_description > .num0 > .cs_title, .csslider3 > #cs_pause3_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider3 > #cs_slide3_1:checked ~ .cs_description > .num1 > .cs_title, .csslider3 > #cs_slide3_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider3 > #cs_pause3_1:checked ~ .cs_description > .num1 > .cs_title, .csslider3 > #cs_pause3_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider3 > #cs_slide3_2:checked ~ .cs_description > .num2 > .cs_title, .csslider3 > #cs_slide3_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider3 > #cs_pause3_2:checked ~ .cs_description > .num2 > .cs_title, .csslider3 > #cs_pause3_2:checked ~ .cs_description > .num2 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider3 > #cs_slide3_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider3 > #cs_pause3_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider3 > #cs_slide3_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider3 > #cs_pause3_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider3 > #cs_slide3_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider3 > #cs_pause3_2:checked ~ .cs_description > .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider3 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider3 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider3 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider3 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title3 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_title3 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr3 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_descr3 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } .csslider3 > #cs_play3:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title3 24000ms infinite -1400ms ease; animation: cs_title3 24000ms infinite -1400ms ease; } .csslider3 > #cs_play3:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title3 24000ms infinite 6600ms ease; animation: cs_title3 24000ms infinite 6600ms ease; } .csslider3 > #cs_play3:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title3 24000ms infinite 14600ms ease; animation: cs_title3 24000ms infinite 14600ms ease; } .csslider3 > #cs_play3:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr3 24000ms infinite -1150ms ease; animation: cs_descr3 24000ms infinite -1150ms ease; } .csslider3 > #cs_play3:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr3 24000ms infinite 6850ms ease; animation: cs_descr3 24000ms infinite 6850ms ease; } .csslider3 > #cs_play3:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr3 24000ms infinite 14850ms ease; animation: cs_descr3 24000ms infinite 14850ms ease; } @-webkit-keyframes cs_title_text3 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text3 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text3 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text3 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider3 > #cs_play3:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text3 24000ms infinite -1250ms ease; animation: cs_title_text3 24000ms infinite -1250ms ease; } .csslider3 > #cs_play3:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text3 24000ms infinite 6750ms ease; animation: cs_title_text3 24000ms infinite 6750ms ease; } .csslider3 > #cs_play3:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text3 24000ms infinite 14750ms ease; animation: cs_title_text3 24000ms infinite 14750ms ease; } .csslider3 > #cs_play3:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text3 24000ms infinite -1000ms ease; animation: cs_descr_text3 24000ms infinite -1000ms ease; } .csslider3 > #cs_play3:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text3 24000ms infinite 7000ms ease; animation: cs_descr_text3 24000ms infinite 7000ms ease; } .csslider3 > #cs_play3:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text3 24000ms infinite 15000ms ease; animation: cs_descr_text3 24000ms infinite 15000ms ease; } .csslider3 > #cs_play3:checked ~ .cs_description > label > .cs_title, .csslider3 > #cs_play3:checked ~ .cs_description > label > .cs_descr, .csslider3 > #cs_play3:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider3 > #cs_play3:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider3 > .pause:checked ~ .cs_description > label > .cs_title, .csslider3 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider3 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider3 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider3 > .cs_description, .csslider3 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider4 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider4, .csslider4 *, .csslider4 *:after, .csslider4 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider4 > .cs_anchor { display: none; } .csslider4 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider4 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider4 > ul > .slide.img img { width: 100%; } .csslider4 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider4 > 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); } .csslider4 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider4 > ul > li.img, .csslider4 > .cs_arrowprev, .csslider4 > .cs_arrownext, .csslider4 > .cs_bullets, .csslider4 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider4 > .cs_arrowprev, .csslider4 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider4 > .cs_arrowprev > label, .csslider4 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider4 > .cs_arrowprev { left: 0; } .csslider4 > .cs_arrownext { right: 0; } .csslider4 > .slide:checked ~ .cs_arrowprev > label, .csslider4 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider4 > #cs_slide4_0:checked ~ .cs_arrowprev > label.num1, .csslider4 > #cs_pause4_0:checked ~ .cs_arrowprev > label.num1, .csslider4 > #cs_slide4_0:checked ~ .cs_arrownext > label.num1, .csslider4 > #cs_pause4_0:checked ~ .cs_arrownext > label.num1, .csslider4 > #cs_slide4_1:checked ~ .cs_arrowprev > label.num0, .csslider4 > #cs_pause4_1:checked ~ .cs_arrowprev > label.num0, .csslider4 > #cs_slide4_1:checked ~ .cs_arrownext > label.num0, .csslider4 > #cs_pause4_1:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow4 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow4 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider4 > #cs_play4:checked ~ .cs_arrowprev > label.num1, .csslider4 > #cs_play4:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow4 16000ms infinite -2000ms; animation: arrow4 16000ms infinite -2000ms; } .csslider4 > #cs_play4:checked ~ .cs_arrowprev > label.num0, .csslider4 > #cs_play4:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow4 16000ms infinite 6000ms; animation: arrow4 16000ms infinite 6000ms; } .csslider4 > .slide:checked ~ .cs_arrowprev > label, .csslider4 > .slide:checked ~ .cs_arrownext > label, .csslider4 > .pause:checked ~ .cs_arrowprev > label, .csslider4 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider4 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider4 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider4 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider4 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider4 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider4 > .cs_description { z-index: 3; } .csslider4 > .cs_description a, .csslider4 > .cs_description a:visited, .csslider4 > .cs_description a:active { color: inherit; } .csslider4 > .cs_description a:hover { text-decoration: none; } .csslider4 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider4 > .cs_description > label > span { vertical-align: top; } .csslider4 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider4 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider4 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider4 > #cs_play4:checked ~ .cs_play_pause > .cs_pause, .csslider4 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider4 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider4 > #cs_play4:checked ~ .cs_play_pause > .cs_play, .csslider4 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider4 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange4 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange4 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider4 > #cs_play4:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange4 16000ms infinite -2000ms; animation: pauseChange4 16000ms infinite -2000ms; } .csslider4 > #cs_play4:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange4 16000ms infinite 6000ms; animation: pauseChange4 16000ms infinite 6000ms; } .csslider4 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider4 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider4 > ul > .slide.num0 { left: 0%; } .csslider4 > ul > .slide.num1 { left: 100%; } .csslider4 > #cs_slide4_0:checked ~ ul > .slide, .csslider4 > #cs_pause4_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider4 > #cs_slide4_1:checked ~ ul > .slide, .csslider4 > #cs_pause4_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider4 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide4 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slide4 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes slide4-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } @keyframes slide4-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } .csslider4 > #cs_play4:checked ~ ul > .slide { -webkit-animation: slide4 16000ms infinite; animation: slide4 16000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider4 > #cs_play4:checked ~ ul > .slide { animation: slide4-ie 16000ms infinite; } } .csslider4 > #cs_play4:checked ~ ul > .slide, .csslider4 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider4 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider4 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider4 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider4 > .cs_arrowprev, .csslider4 > .cs_arrownext, .csslider4 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider4:hover > .cs_arrowprev, .csslider4:hover > .cs_arrownext, .csslider4:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider4 > .cs_arrowprev > label, .csslider4 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider4 > .cs_arrowprev > label, .csslider4 > .cs_arrownext > label, .csslider4 > .cs_arrowprev > label span:after, .csslider4 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider4 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider4 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider4 > .cs_arrowprev > label span, .csslider4 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider4 > .cs_arrowprev > label span:after, .csslider4 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider4 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider4 > .cs_arrownext > label span:after { line-height: 29px; } .csslider4 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider4 > .cs_arrownext > label span:after { content: '\e801'; } .csslider4 > .cs_arrowprev:hover > label, .csslider4 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider4 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow4 .7s infinite ease-in-out; animation: nextArrow4 .7s infinite ease-in-out; } .csslider4 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow4 .7s infinite ease-in-out; animation: prevArrow4 .7s infinite ease-in-out; } @keyframes nextArrow4 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow4 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow4 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow4 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider4 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider4 > .cs_play_pause > label, .csslider4 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider4 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider4 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider4 > .cs_play_pause > label span:after { line-height: 28px; } .csslider4 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider4 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider4 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider4 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause4 .7s infinite ease-in-out; animation: playPause4 .7s infinite ease-in-out; } @-webkit-keyframes playPause4 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause4 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider4 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider4 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider4 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider4 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider4 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider4 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider4 > .cs_bullets > label:hover > .cs_point, .csslider4 > #cs_slide4_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider4 > #cs_pause4_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider4 > #cs_slide4_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider4 > #cs_pause4_1:checked ~ .cs_bullets > label.num1 > .cs_point { background: #3A4A5A; } @keyframes bullet4 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } @-webkit-keyframes bullet4 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } .csslider4 > #cs_play4:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider4 > #cs_pause4:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet4 16000ms infinite -2000ms; animation: bullet4 16000ms infinite -2000ms; } .csslider4 > #cs_play4:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider4 > #cs_pause4:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet4 16000ms infinite 6000ms; animation: bullet4 16000ms infinite 6000ms; } .csslider4 > #cs_play4:checked ~ .cs_bullets > label > .cs_point, .csslider4 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider4 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider4 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider4 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider4 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider4 > #cs_slide4_0:checked ~ .cs_description > .num0 > .cs_title, .csslider4 > #cs_slide4_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider4 > #cs_pause4_0:checked ~ .cs_description > .num0 > .cs_title, .csslider4 > #cs_pause4_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider4 > #cs_slide4_1:checked ~ .cs_description > .num1 > .cs_title, .csslider4 > #cs_slide4_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider4 > #cs_pause4_1:checked ~ .cs_description > .num1 > .cs_title, .csslider4 > #cs_pause4_1:checked ~ .cs_description > .num1 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider4 > #cs_slide4_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider4 > #cs_pause4_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider4 > #cs_slide4_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider4 > #cs_pause4_1:checked ~ .cs_description > .num1 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider4 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider4 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider4 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider4 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title4 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_title4 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr4 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_descr4 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } .csslider4 > #cs_play4:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title4 16000ms infinite -1400ms ease; animation: cs_title4 16000ms infinite -1400ms ease; } .csslider4 > #cs_play4:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title4 16000ms infinite 6600ms ease; animation: cs_title4 16000ms infinite 6600ms ease; } .csslider4 > #cs_play4:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr4 16000ms infinite -1150ms ease; animation: cs_descr4 16000ms infinite -1150ms ease; } .csslider4 > #cs_play4:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr4 16000ms infinite 6850ms ease; animation: cs_descr4 16000ms infinite 6850ms ease; } @-webkit-keyframes cs_title_text4 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text4 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text4 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text4 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider4 > #cs_play4:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text4 16000ms infinite -1250ms ease; animation: cs_title_text4 16000ms infinite -1250ms ease; } .csslider4 > #cs_play4:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text4 16000ms infinite 6750ms ease; animation: cs_title_text4 16000ms infinite 6750ms ease; } .csslider4 > #cs_play4:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text4 16000ms infinite -1000ms ease; animation: cs_descr_text4 16000ms infinite -1000ms ease; } .csslider4 > #cs_play4:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text4 16000ms infinite 7000ms ease; animation: cs_descr_text4 16000ms infinite 7000ms ease; } .csslider4 > #cs_play4:checked ~ .cs_description > label > .cs_title, .csslider4 > #cs_play4:checked ~ .cs_description > label > .cs_descr, .csslider4 > #cs_play4:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider4 > #cs_play4:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider4 > .pause:checked ~ .cs_description > label > .cs_title, .csslider4 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider4 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider4 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider4 > .cs_description, .csslider4 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider5 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider5, .csslider5 *, .csslider5 *:after, .csslider5 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider5 > .cs_anchor { display: none; } .csslider5 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider5 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider5 > ul > .slide.img img { width: 100%; } .csslider5 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider5 > 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); } .csslider5 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider5 > ul > li.img, .csslider5 > .cs_arrowprev, .csslider5 > .cs_arrownext, .csslider5 > .cs_bullets, .csslider5 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider5 > .cs_arrowprev, .csslider5 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider5 > .cs_arrowprev > label, .csslider5 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider5 > .cs_arrowprev { left: 0; } .csslider5 > .cs_arrownext { right: 0; } .csslider5 > .slide:checked ~ .cs_arrowprev > label, .csslider5 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider5 > #cs_slide5_0:checked ~ .cs_arrowprev > label.num2, .csslider5 > #cs_pause5_0:checked ~ .cs_arrowprev > label.num2, .csslider5 > #cs_slide5_0:checked ~ .cs_arrownext > label.num1, .csslider5 > #cs_pause5_0:checked ~ .cs_arrownext > label.num1, .csslider5 > #cs_slide5_1:checked ~ .cs_arrowprev > label.num0, .csslider5 > #cs_pause5_1:checked ~ .cs_arrowprev > label.num0, .csslider5 > #cs_slide5_1:checked ~ .cs_arrownext > label.num2, .csslider5 > #cs_pause5_1:checked ~ .cs_arrownext > label.num2, .csslider5 > #cs_slide5_2:checked ~ .cs_arrowprev > label.num1, .csslider5 > #cs_pause5_2:checked ~ .cs_arrowprev > label.num1, .csslider5 > #cs_slide5_2:checked ~ .cs_arrownext > label.num0, .csslider5 > #cs_pause5_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow5 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow5 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider5 > #cs_play5:checked ~ .cs_arrowprev > label.num2, .csslider5 > #cs_play5:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow5 24000ms infinite -2000ms; animation: arrow5 24000ms infinite -2000ms; } .csslider5 > #cs_play5:checked ~ .cs_arrowprev > label.num0, .csslider5 > #cs_play5:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow5 24000ms infinite 6000ms; animation: arrow5 24000ms infinite 6000ms; } .csslider5 > #cs_play5:checked ~ .cs_arrowprev > label.num1, .csslider5 > #cs_play5:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow5 24000ms infinite 14000ms; animation: arrow5 24000ms infinite 14000ms; } .csslider5 > .slide:checked ~ .cs_arrowprev > label, .csslider5 > .slide:checked ~ .cs_arrownext > label, .csslider5 > .pause:checked ~ .cs_arrowprev > label, .csslider5 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider5 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider5 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider5 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider5 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider5 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider5 > .cs_description { z-index: 3; } .csslider5 > .cs_description a, .csslider5 > .cs_description a:visited, .csslider5 > .cs_description a:active { color: inherit; } .csslider5 > .cs_description a:hover { text-decoration: none; } .csslider5 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider5 > .cs_description > label > span { vertical-align: top; } .csslider5 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider5 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider5 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider5 > #cs_play5:checked ~ .cs_play_pause > .cs_pause, .csslider5 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider5 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider5 > #cs_play5:checked ~ .cs_play_pause > .cs_play, .csslider5 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider5 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange5 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange5 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider5 > #cs_play5:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange5 24000ms infinite -2000ms; animation: pauseChange5 24000ms infinite -2000ms; } .csslider5 > #cs_play5:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange5 24000ms infinite 6000ms; animation: pauseChange5 24000ms infinite 6000ms; } .csslider5 > #cs_play5:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange5 24000ms infinite 14000ms; animation: pauseChange5 24000ms infinite 14000ms; } .csslider5 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider5 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider5 > ul > .slide.num0 { left: 0%; } .csslider5 > ul > .slide.num1 { left: 100%; } .csslider5 > ul > .slide.num2 { left: 200%; } .csslider5 > #cs_slide5_0:checked ~ ul > .slide, .csslider5 > #cs_pause5_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider5 > #cs_slide5_1:checked ~ ul > .slide, .csslider5 > #cs_pause5_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider5 > #cs_slide5_2:checked ~ ul > .slide, .csslider5 > #cs_pause5_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider5 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide5 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes slide5 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes slide5-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } @keyframes slide5-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } .csslider5 > #cs_play5:checked ~ ul > .slide { -webkit-animation: slide5 24000ms infinite; animation: slide5 24000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider5 > #cs_play5:checked ~ ul > .slide { animation: slide5-ie 24000ms infinite; } } .csslider5 > #cs_play5:checked ~ ul > .slide, .csslider5 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider5 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider5 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider5 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider5 > .cs_arrowprev, .csslider5 > .cs_arrownext, .csslider5 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider5:hover > .cs_arrowprev, .csslider5:hover > .cs_arrownext, .csslider5:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider5 > .cs_arrowprev > label, .csslider5 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider5 > .cs_arrowprev > label, .csslider5 > .cs_arrownext > label, .csslider5 > .cs_arrowprev > label span:after, .csslider5 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider5 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider5 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider5 > .cs_arrowprev > label span, .csslider5 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider5 > .cs_arrowprev > label span:after, .csslider5 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider5 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider5 > .cs_arrownext > label span:after { line-height: 29px; } .csslider5 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider5 > .cs_arrownext > label span:after { content: '\e801'; } .csslider5 > .cs_arrowprev:hover > label, .csslider5 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider5 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow5 .7s infinite ease-in-out; animation: nextArrow5 .7s infinite ease-in-out; } .csslider5 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow5 .7s infinite ease-in-out; animation: prevArrow5 .7s infinite ease-in-out; } @keyframes nextArrow5 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow5 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow5 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow5 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider5 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider5 > .cs_play_pause > label, .csslider5 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider5 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider5 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider5 > .cs_play_pause > label span:after { line-height: 28px; } .csslider5 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider5 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider5 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider5 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause5 .7s infinite ease-in-out; animation: playPause5 .7s infinite ease-in-out; } @-webkit-keyframes playPause5 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause5 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider5 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider5 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider5 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider5 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider5 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider5 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider5 > .cs_bullets > label:hover > .cs_point, .csslider5 > #cs_slide5_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider5 > #cs_pause5_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider5 > #cs_slide5_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider5 > #cs_pause5_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider5 > #cs_slide5_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider5 > #cs_pause5_2:checked ~ .cs_bullets > label.num2 > .cs_point { background: #3A4A5A; } @keyframes bullet5 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-webkit-keyframes bullet5 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } .csslider5 > #cs_play5:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider5 > #cs_pause5:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet5 24000ms infinite -2000ms; animation: bullet5 24000ms infinite -2000ms; } .csslider5 > #cs_play5:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider5 > #cs_pause5:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet5 24000ms infinite 6000ms; animation: bullet5 24000ms infinite 6000ms; } .csslider5 > #cs_play5:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider5 > #cs_pause5:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet5 24000ms infinite 14000ms; animation: bullet5 24000ms infinite 14000ms; } .csslider5 > #cs_play5:checked ~ .cs_bullets > label > .cs_point, .csslider5 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider5 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider5 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider5 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider5 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider5 > #cs_slide5_0:checked ~ .cs_description > .num0 > .cs_title, .csslider5 > #cs_slide5_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider5 > #cs_pause5_0:checked ~ .cs_description > .num0 > .cs_title, .csslider5 > #cs_pause5_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider5 > #cs_slide5_1:checked ~ .cs_description > .num1 > .cs_title, .csslider5 > #cs_slide5_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider5 > #cs_pause5_1:checked ~ .cs_description > .num1 > .cs_title, .csslider5 > #cs_pause5_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider5 > #cs_slide5_2:checked ~ .cs_description > .num2 > .cs_title, .csslider5 > #cs_slide5_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider5 > #cs_pause5_2:checked ~ .cs_description > .num2 > .cs_title, .csslider5 > #cs_pause5_2:checked ~ .cs_description > .num2 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider5 > #cs_slide5_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider5 > #cs_pause5_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider5 > #cs_slide5_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider5 > #cs_pause5_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider5 > #cs_slide5_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider5 > #cs_pause5_2:checked ~ .cs_description > .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider5 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider5 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider5 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider5 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title5 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_title5 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr5 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_descr5 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } .csslider5 > #cs_play5:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title5 24000ms infinite -1400ms ease; animation: cs_title5 24000ms infinite -1400ms ease; } .csslider5 > #cs_play5:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title5 24000ms infinite 6600ms ease; animation: cs_title5 24000ms infinite 6600ms ease; } .csslider5 > #cs_play5:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title5 24000ms infinite 14600ms ease; animation: cs_title5 24000ms infinite 14600ms ease; } .csslider5 > #cs_play5:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr5 24000ms infinite -1150ms ease; animation: cs_descr5 24000ms infinite -1150ms ease; } .csslider5 > #cs_play5:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr5 24000ms infinite 6850ms ease; animation: cs_descr5 24000ms infinite 6850ms ease; } .csslider5 > #cs_play5:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr5 24000ms infinite 14850ms ease; animation: cs_descr5 24000ms infinite 14850ms ease; } @-webkit-keyframes cs_title_text5 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text5 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text5 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text5 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider5 > #cs_play5:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text5 24000ms infinite -1250ms ease; animation: cs_title_text5 24000ms infinite -1250ms ease; } .csslider5 > #cs_play5:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text5 24000ms infinite 6750ms ease; animation: cs_title_text5 24000ms infinite 6750ms ease; } .csslider5 > #cs_play5:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text5 24000ms infinite 14750ms ease; animation: cs_title_text5 24000ms infinite 14750ms ease; } .csslider5 > #cs_play5:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text5 24000ms infinite -1000ms ease; animation: cs_descr_text5 24000ms infinite -1000ms ease; } .csslider5 > #cs_play5:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text5 24000ms infinite 7000ms ease; animation: cs_descr_text5 24000ms infinite 7000ms ease; } .csslider5 > #cs_play5:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text5 24000ms infinite 15000ms ease; animation: cs_descr_text5 24000ms infinite 15000ms ease; } .csslider5 > #cs_play5:checked ~ .cs_description > label > .cs_title, .csslider5 > #cs_play5:checked ~ .cs_description > label > .cs_descr, .csslider5 > #cs_play5:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider5 > #cs_play5:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider5 > .pause:checked ~ .cs_description > label > .cs_title, .csslider5 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider5 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider5 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider5 > .cs_description, .csslider5 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider6 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider6, .csslider6 *, .csslider6 *:after, .csslider6 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider6 > .cs_anchor { display: none; } .csslider6 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider6 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider6 > ul > .slide.img img { width: 100%; } .csslider6 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider6 > 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); } .csslider6 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider6 > ul > li.img, .csslider6 > .cs_arrowprev, .csslider6 > .cs_arrownext, .csslider6 > .cs_bullets, .csslider6 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider6 > .cs_arrowprev, .csslider6 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider6 > .cs_arrowprev > label, .csslider6 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider6 > .cs_arrowprev { left: 0; } .csslider6 > .cs_arrownext { right: 0; } .csslider6 > .slide:checked ~ .cs_arrowprev > label, .csslider6 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider6 > #cs_slide6_0:checked ~ .cs_arrowprev > label.num5, .csslider6 > #cs_pause6_0:checked ~ .cs_arrowprev > label.num5, .csslider6 > #cs_slide6_0:checked ~ .cs_arrownext > label.num1, .csslider6 > #cs_pause6_0:checked ~ .cs_arrownext > label.num1, .csslider6 > #cs_slide6_1:checked ~ .cs_arrowprev > label.num0, .csslider6 > #cs_pause6_1:checked ~ .cs_arrowprev > label.num0, .csslider6 > #cs_slide6_1:checked ~ .cs_arrownext > label.num2, .csslider6 > #cs_pause6_1:checked ~ .cs_arrownext > label.num2, .csslider6 > #cs_slide6_2:checked ~ .cs_arrowprev > label.num1, .csslider6 > #cs_pause6_2:checked ~ .cs_arrowprev > label.num1, .csslider6 > #cs_slide6_2:checked ~ .cs_arrownext > label.num3, .csslider6 > #cs_pause6_2:checked ~ .cs_arrownext > label.num3, .csslider6 > #cs_slide6_3:checked ~ .cs_arrowprev > label.num2, .csslider6 > #cs_pause6_3:checked ~ .cs_arrowprev > label.num2, .csslider6 > #cs_slide6_3:checked ~ .cs_arrownext > label.num4, .csslider6 > #cs_pause6_3:checked ~ .cs_arrownext > label.num4, .csslider6 > #cs_slide6_4:checked ~ .cs_arrowprev > label.num3, .csslider6 > #cs_pause6_4:checked ~ .cs_arrowprev > label.num3, .csslider6 > #cs_slide6_4:checked ~ .cs_arrownext > label.num5, .csslider6 > #cs_pause6_4:checked ~ .cs_arrownext > label.num5, .csslider6 > #cs_slide6_5:checked ~ .cs_arrowprev > label.num4, .csslider6 > #cs_pause6_5:checked ~ .cs_arrowprev > label.num4, .csslider6 > #cs_slide6_5:checked ~ .cs_arrownext > label.num0, .csslider6 > #cs_pause6_5:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow6 { 0%, 16.656666666666666% { opacity: 1; z-index: 5; } 16.666666666666668%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow6 { 0%, 16.656666666666666% { opacity: 1; z-index: 5; } 16.666666666666668%, 100% { opacity: 0; z-index: -1; } } .csslider6 > #cs_play6:checked ~ .cs_arrowprev > label.num5, .csslider6 > #cs_play6:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow6 48000ms infinite -2000ms; animation: arrow6 48000ms infinite -2000ms; } .csslider6 > #cs_play6:checked ~ .cs_arrowprev > label.num0, .csslider6 > #cs_play6:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow6 48000ms infinite 6000ms; animation: arrow6 48000ms infinite 6000ms; } .csslider6 > #cs_play6:checked ~ .cs_arrowprev > label.num1, .csslider6 > #cs_play6:checked ~ .cs_arrownext > label.num3 { -webkit-animation: arrow6 48000ms infinite 14000ms; animation: arrow6 48000ms infinite 14000ms; } .csslider6 > #cs_play6:checked ~ .cs_arrowprev > label.num2, .csslider6 > #cs_play6:checked ~ .cs_arrownext > label.num4 { -webkit-animation: arrow6 48000ms infinite 22000ms; animation: arrow6 48000ms infinite 22000ms; } .csslider6 > #cs_play6:checked ~ .cs_arrowprev > label.num3, .csslider6 > #cs_play6:checked ~ .cs_arrownext > label.num5 { -webkit-animation: arrow6 48000ms infinite 30000ms; animation: arrow6 48000ms infinite 30000ms; } .csslider6 > #cs_play6:checked ~ .cs_arrowprev > label.num4, .csslider6 > #cs_play6:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow6 48000ms infinite 38000ms; animation: arrow6 48000ms infinite 38000ms; } .csslider6 > .slide:checked ~ .cs_arrowprev > label, .csslider6 > .slide:checked ~ .cs_arrownext > label, .csslider6 > .pause:checked ~ .cs_arrowprev > label, .csslider6 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider6 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider6 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider6 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider6 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider6 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider6 > .cs_description { z-index: 3; } .csslider6 > .cs_description a, .csslider6 > .cs_description a:visited, .csslider6 > .cs_description a:active { color: inherit; } .csslider6 > .cs_description a:hover { text-decoration: none; } .csslider6 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider6 > .cs_description > label > span { vertical-align: top; } .csslider6 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider6 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider6 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider6 > #cs_play6:checked ~ .cs_play_pause > .cs_pause, .csslider6 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider6 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider6 > #cs_play6:checked ~ .cs_play_pause > .cs_play, .csslider6 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider6 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange6 { 0%, 16.656666666666666% { opacity: 1; z-index: 5; } 16.666666666666668%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange6 { 0%, 16.656666666666666% { opacity: 1; z-index: 5; } 16.666666666666668%, 100% { opacity: 0; z-index: -1; } } .csslider6 > #cs_play6:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange6 48000ms infinite -2000ms; animation: pauseChange6 48000ms infinite -2000ms; } .csslider6 > #cs_play6:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange6 48000ms infinite 6000ms; animation: pauseChange6 48000ms infinite 6000ms; } .csslider6 > #cs_play6:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange6 48000ms infinite 14000ms; animation: pauseChange6 48000ms infinite 14000ms; } .csslider6 > #cs_play6:checked ~ .cs_play_pause > .cs_pause.num3 { opacity: 0; z-index: -1; -webkit-animation: pauseChange6 48000ms infinite 22000ms; animation: pauseChange6 48000ms infinite 22000ms; } .csslider6 > #cs_play6:checked ~ .cs_play_pause > .cs_pause.num4 { opacity: 0; z-index: -1; -webkit-animation: pauseChange6 48000ms infinite 30000ms; animation: pauseChange6 48000ms infinite 30000ms; } .csslider6 > #cs_play6:checked ~ .cs_play_pause > .cs_pause.num5 { opacity: 0; z-index: -1; -webkit-animation: pauseChange6 48000ms infinite 38000ms; animation: pauseChange6 48000ms infinite 38000ms; } .csslider6 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider6 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider6 > ul > .slide.num0 { left: 0%; } .csslider6 > ul > .slide.num1 { left: 100%; } .csslider6 > ul > .slide.num2 { left: 200%; } .csslider6 > ul > .slide.num3 { left: 300%; } .csslider6 > ul > .slide.num4 { left: 400%; } .csslider6 > ul > .slide.num5 { left: 500%; } .csslider6 > #cs_slide6_0:checked ~ ul > .slide, .csslider6 > #cs_pause6_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider6 > #cs_slide6_1:checked ~ ul > .slide, .csslider6 > #cs_pause6_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider6 > #cs_slide6_2:checked ~ ul > .slide, .csslider6 > #cs_pause6_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider6 > #cs_slide6_3:checked ~ ul > .slide, .csslider6 > #cs_pause6_3:checked ~ ul > .slide { -webkit-transform: translateX(-300%); transform: translateX(-300%); } .csslider6 > #cs_slide6_4:checked ~ ul > .slide, .csslider6 > #cs_pause6_4:checked ~ ul > .slide { -webkit-transform: translateX(-400%); transform: translateX(-400%); } .csslider6 > #cs_slide6_5:checked ~ ul > .slide, .csslider6 > #cs_pause6_5:checked ~ ul > .slide { -webkit-transform: translateX(-500%); transform: translateX(-500%); } .csslider6 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide6 { 0%, 12.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 16.666666666666668%, 29.166666666666668% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 33.333333333333336%, 45.833333333333336% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 50%, 62.50000000000001% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } 66.66666666666667%, 79.16666666666667% { -webkit-transform: translateX(-400%); transform: translateX(-400%); } 83.33333333333334%, 95.83333333333333% { -webkit-transform: translateX(-500%); transform: translateX(-500%); } } @keyframes slide6 { 0%, 12.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 16.666666666666668%, 29.166666666666668% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 33.333333333333336%, 45.833333333333336% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 50%, 62.50000000000001% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } 66.66666666666667%, 79.16666666666667% { -webkit-transform: translateX(-400%); transform: translateX(-400%); } 83.33333333333334%, 95.83333333333333% { -webkit-transform: translateX(-500%); transform: translateX(-500%); } } @-webkit-keyframes slide6-ie { 0%, 12.5% { margin-left: 0%; } 16.666666666666668%, 29.166666666666668% { margin-left: -100%; } 33.333333333333336%, 45.833333333333336% { margin-left: -200%; } 50%, 62.50000000000001% { margin-left: -300%; } 66.66666666666667%, 79.16666666666667% { margin-left: -400%; } 83.33333333333334%, 95.83333333333333% { margin-left: -500%; } } @keyframes slide6-ie { 0%, 12.5% { margin-left: 0%; } 16.666666666666668%, 29.166666666666668% { margin-left: -100%; } 33.333333333333336%, 45.833333333333336% { margin-left: -200%; } 50%, 62.50000000000001% { margin-left: -300%; } 66.66666666666667%, 79.16666666666667% { margin-left: -400%; } 83.33333333333334%, 95.83333333333333% { margin-left: -500%; } } .csslider6 > #cs_play6:checked ~ ul > .slide { -webkit-animation: slide6 48000ms infinite; animation: slide6 48000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider6 > #cs_play6:checked ~ ul > .slide { animation: slide6-ie 48000ms infinite; } } .csslider6 > #cs_play6:checked ~ ul > .slide, .csslider6 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider6 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider6 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider6 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider6 > .cs_arrowprev, .csslider6 > .cs_arrownext, .csslider6 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider6:hover > .cs_arrowprev, .csslider6:hover > .cs_arrownext, .csslider6:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider6 > .cs_arrowprev > label, .csslider6 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider6 > .cs_arrowprev > label, .csslider6 > .cs_arrownext > label, .csslider6 > .cs_arrowprev > label span:after, .csslider6 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider6 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider6 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider6 > .cs_arrowprev > label span, .csslider6 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider6 > .cs_arrowprev > label span:after, .csslider6 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider6 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider6 > .cs_arrownext > label span:after { line-height: 29px; } .csslider6 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider6 > .cs_arrownext > label span:after { content: '\e801'; } .csslider6 > .cs_arrowprev:hover > label, .csslider6 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider6 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow6 .7s infinite ease-in-out; animation: nextArrow6 .7s infinite ease-in-out; } .csslider6 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow6 .7s infinite ease-in-out; animation: prevArrow6 .7s infinite ease-in-out; } @keyframes nextArrow6 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow6 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow6 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow6 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider6 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider6 > .cs_play_pause > label, .csslider6 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider6 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider6 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider6 > .cs_play_pause > label span:after { line-height: 28px; } .csslider6 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider6 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider6 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider6 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause6 .7s infinite ease-in-out; animation: playPause6 .7s infinite ease-in-out; } @-webkit-keyframes playPause6 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause6 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider6 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider6 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider6 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider6 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider6 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider6 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider6 > .cs_bullets > label:hover > .cs_point, .csslider6 > #cs_slide6_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider6 > #cs_pause6_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider6 > #cs_slide6_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider6 > #cs_pause6_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider6 > #cs_slide6_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider6 > #cs_pause6_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider6 > #cs_slide6_3:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider6 > #cs_pause6_3:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider6 > #cs_slide6_4:checked ~ .cs_bullets > label.num4 > .cs_point, .csslider6 > #cs_pause6_4:checked ~ .cs_bullets > label.num4 > .cs_point, .csslider6 > #cs_slide6_5:checked ~ .cs_bullets > label.num5 > .cs_point, .csslider6 > #cs_pause6_5:checked ~ .cs_bullets > label.num5 > .cs_point { background: #3A4A5A; } @keyframes bullet6 { 0%, 16.656666666666666% { background: #3A4A5A; } 16.666666666666668%, 100% { background: transparent; } } @-webkit-keyframes bullet6 { 0%, 16.656666666666666% { background: #3A4A5A; } 16.666666666666668%, 100% { background: transparent; } } .csslider6 > #cs_play6:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider6 > #cs_pause6:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet6 48000ms infinite -2000ms; animation: bullet6 48000ms infinite -2000ms; } .csslider6 > #cs_play6:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider6 > #cs_pause6:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet6 48000ms infinite 6000ms; animation: bullet6 48000ms infinite 6000ms; } .csslider6 > #cs_play6:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider6 > #cs_pause6:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet6 48000ms infinite 14000ms; animation: bullet6 48000ms infinite 14000ms; } .csslider6 > #cs_play6:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider6 > #cs_pause6:checked ~ .cs_bullets > label.num3 > .cs_point { -webkit-animation: bullet6 48000ms infinite 22000ms; animation: bullet6 48000ms infinite 22000ms; } .csslider6 > #cs_play6:checked ~ .cs_bullets > label.num4 > .cs_point, .csslider6 > #cs_pause6:checked ~ .cs_bullets > label.num4 > .cs_point { -webkit-animation: bullet6 48000ms infinite 30000ms; animation: bullet6 48000ms infinite 30000ms; } .csslider6 > #cs_play6:checked ~ .cs_bullets > label.num5 > .cs_point, .csslider6 > #cs_pause6:checked ~ .cs_bullets > label.num5 > .cs_point { -webkit-animation: bullet6 48000ms infinite 38000ms; animation: bullet6 48000ms infinite 38000ms; } .csslider6 > #cs_play6:checked ~ .cs_bullets > label > .cs_point, .csslider6 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider6 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider6 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider6 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider6 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider6 > #cs_slide6_0:checked ~ .cs_description > .num0 > .cs_title, .csslider6 > #cs_slide6_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider6 > #cs_pause6_0:checked ~ .cs_description > .num0 > .cs_title, .csslider6 > #cs_pause6_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider6 > #cs_slide6_1:checked ~ .cs_description > .num1 > .cs_title, .csslider6 > #cs_slide6_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider6 > #cs_pause6_1:checked ~ .cs_description > .num1 > .cs_title, .csslider6 > #cs_pause6_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider6 > #cs_slide6_2:checked ~ .cs_description > .num2 > .cs_title, .csslider6 > #cs_slide6_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider6 > #cs_pause6_2:checked ~ .cs_description > .num2 > .cs_title, .csslider6 > #cs_pause6_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider6 > #cs_slide6_3:checked ~ .cs_description > .num3 > .cs_title, .csslider6 > #cs_slide6_3:checked ~ .cs_description > .num3 > .cs_descr, .csslider6 > #cs_pause6_3:checked ~ .cs_description > .num3 > .cs_title, .csslider6 > #cs_pause6_3:checked ~ .cs_description > .num3 > .cs_descr, .csslider6 > #cs_slide6_4:checked ~ .cs_description > .num4 > .cs_title, .csslider6 > #cs_slide6_4:checked ~ .cs_description > .num4 > .cs_descr, .csslider6 > #cs_pause6_4:checked ~ .cs_description > .num4 > .cs_title, .csslider6 > #cs_pause6_4:checked ~ .cs_description > .num4 > .cs_descr, .csslider6 > #cs_slide6_5:checked ~ .cs_description > .num5 > .cs_title, .csslider6 > #cs_slide6_5:checked ~ .cs_description > .num5 > .cs_descr, .csslider6 > #cs_pause6_5:checked ~ .cs_description > .num5 > .cs_title, .csslider6 > #cs_pause6_5:checked ~ .cs_description > .num5 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider6 > #cs_slide6_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider6 > #cs_pause6_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider6 > #cs_slide6_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider6 > #cs_pause6_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider6 > #cs_slide6_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider6 > #cs_pause6_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider6 > #cs_slide6_3:checked ~ .cs_description > .num3 .cs_wrapper, .csslider6 > #cs_pause6_3:checked ~ .cs_description > .num3 .cs_wrapper, .csslider6 > #cs_slide6_4:checked ~ .cs_description > .num4 .cs_wrapper, .csslider6 > #cs_pause6_4:checked ~ .cs_description > .num4 .cs_wrapper, .csslider6 > #cs_slide6_5:checked ~ .cs_description > .num5 .cs_wrapper, .csslider6 > #cs_pause6_5:checked ~ .cs_description > .num5 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider6 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider6 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider6 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider6 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title6 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 17.66625%, 100% { z-index: 0; } } @keyframes cs_title6 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 17.66625%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr6 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 17.66625%, 100% { z-index: 0; } } @keyframes cs_descr6 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 17.66625%, 100% { z-index: 0; } } .csslider6 > #cs_play6:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title6 48000ms infinite -1400ms ease; animation: cs_title6 48000ms infinite -1400ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title6 48000ms infinite 6600ms ease; animation: cs_title6 48000ms infinite 6600ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title6 48000ms infinite 14600ms ease; animation: cs_title6 48000ms infinite 14600ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num3 > .cs_title { -webkit-animation: cs_title6 48000ms infinite 22600ms ease; animation: cs_title6 48000ms infinite 22600ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num4 > .cs_title { -webkit-animation: cs_title6 48000ms infinite 30600ms ease; animation: cs_title6 48000ms infinite 30600ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num5 > .cs_title { -webkit-animation: cs_title6 48000ms infinite 38600ms ease; animation: cs_title6 48000ms infinite 38600ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr6 48000ms infinite -1150ms ease; animation: cs_descr6 48000ms infinite -1150ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr6 48000ms infinite 6850ms ease; animation: cs_descr6 48000ms infinite 6850ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr6 48000ms infinite 14850ms ease; animation: cs_descr6 48000ms infinite 14850ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num3 > .cs_descr { -webkit-animation: cs_descr6 48000ms infinite 22850ms ease; animation: cs_descr6 48000ms infinite 22850ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num4 > .cs_descr { -webkit-animation: cs_descr6 48000ms infinite 30850ms ease; animation: cs_descr6 48000ms infinite 30850ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num5 > .cs_descr { -webkit-animation: cs_descr6 48000ms infinite 38850ms ease; animation: cs_descr6 48000ms infinite 38850ms ease; } @-webkit-keyframes cs_title_text6 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text6 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text6 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text6 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider6 > #cs_play6:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text6 48000ms infinite -1250ms ease; animation: cs_title_text6 48000ms infinite -1250ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text6 48000ms infinite 6750ms ease; animation: cs_title_text6 48000ms infinite 6750ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text6 48000ms infinite 14750ms ease; animation: cs_title_text6 48000ms infinite 14750ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num3 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text6 48000ms infinite 22750ms ease; animation: cs_title_text6 48000ms infinite 22750ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num4 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text6 48000ms infinite 30750ms ease; animation: cs_title_text6 48000ms infinite 30750ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num5 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text6 48000ms infinite 38750ms ease; animation: cs_title_text6 48000ms infinite 38750ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text6 48000ms infinite -1000ms ease; animation: cs_descr_text6 48000ms infinite -1000ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text6 48000ms infinite 7000ms ease; animation: cs_descr_text6 48000ms infinite 7000ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text6 48000ms infinite 15000ms ease; animation: cs_descr_text6 48000ms infinite 15000ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num3 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text6 48000ms infinite 23000ms ease; animation: cs_descr_text6 48000ms infinite 23000ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num4 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text6 48000ms infinite 31000ms ease; animation: cs_descr_text6 48000ms infinite 31000ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > .num5 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text6 48000ms infinite 39000ms ease; animation: cs_descr_text6 48000ms infinite 39000ms ease; } .csslider6 > #cs_play6:checked ~ .cs_description > label > .cs_title, .csslider6 > #cs_play6:checked ~ .cs_description > label > .cs_descr, .csslider6 > #cs_play6:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider6 > #cs_play6:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider6 > .pause:checked ~ .cs_description > label > .cs_title, .csslider6 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider6 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider6 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider6 > .cs_description, .csslider6 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider7 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider7, .csslider7 *, .csslider7 *:after, .csslider7 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider7 > .cs_anchor { display: none; } .csslider7 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider7 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider7 > ul > .slide.img img { width: 100%; } .csslider7 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider7 > 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); } .csslider7 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider7 > ul > li.img, .csslider7 > .cs_arrowprev, .csslider7 > .cs_arrownext, .csslider7 > .cs_bullets, .csslider7 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider7 > .cs_arrowprev, .csslider7 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider7 > .cs_arrowprev > label, .csslider7 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider7 > .cs_arrowprev { left: 0; } .csslider7 > .cs_arrownext { right: 0; } .csslider7 > .slide:checked ~ .cs_arrowprev > label, .csslider7 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider7 > #cs_slide7_0:checked ~ .cs_arrowprev > label.num1, .csslider7 > #cs_pause7_0:checked ~ .cs_arrowprev > label.num1, .csslider7 > #cs_slide7_0:checked ~ .cs_arrownext > label.num1, .csslider7 > #cs_pause7_0:checked ~ .cs_arrownext > label.num1, .csslider7 > #cs_slide7_1:checked ~ .cs_arrowprev > label.num0, .csslider7 > #cs_pause7_1:checked ~ .cs_arrowprev > label.num0, .csslider7 > #cs_slide7_1:checked ~ .cs_arrownext > label.num0, .csslider7 > #cs_pause7_1:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow7 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow7 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider7 > #cs_play7:checked ~ .cs_arrowprev > label.num1, .csslider7 > #cs_play7:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow7 16000ms infinite -2000ms; animation: arrow7 16000ms infinite -2000ms; } .csslider7 > #cs_play7:checked ~ .cs_arrowprev > label.num0, .csslider7 > #cs_play7:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow7 16000ms infinite 6000ms; animation: arrow7 16000ms infinite 6000ms; } .csslider7 > .slide:checked ~ .cs_arrowprev > label, .csslider7 > .slide:checked ~ .cs_arrownext > label, .csslider7 > .pause:checked ~ .cs_arrowprev > label, .csslider7 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider7 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider7 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider7 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider7 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider7 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider7 > .cs_description { z-index: 3; } .csslider7 > .cs_description a, .csslider7 > .cs_description a:visited, .csslider7 > .cs_description a:active { color: inherit; } .csslider7 > .cs_description a:hover { text-decoration: none; } .csslider7 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider7 > .cs_description > label > span { vertical-align: top; } .csslider7 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider7 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider7 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider7 > #cs_play7:checked ~ .cs_play_pause > .cs_pause, .csslider7 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider7 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider7 > #cs_play7:checked ~ .cs_play_pause > .cs_play, .csslider7 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider7 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange7 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange7 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider7 > #cs_play7:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange7 16000ms infinite -2000ms; animation: pauseChange7 16000ms infinite -2000ms; } .csslider7 > #cs_play7:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange7 16000ms infinite 6000ms; animation: pauseChange7 16000ms infinite 6000ms; } .csslider7 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider7 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider7 > ul > .slide.num0 { left: 0%; } .csslider7 > ul > .slide.num1 { left: 100%; } .csslider7 > #cs_slide7_0:checked ~ ul > .slide, .csslider7 > #cs_pause7_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider7 > #cs_slide7_1:checked ~ ul > .slide, .csslider7 > #cs_pause7_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider7 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide7 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slide7 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes slide7-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } @keyframes slide7-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } .csslider7 > #cs_play7:checked ~ ul > .slide { -webkit-animation: slide7 16000ms infinite; animation: slide7 16000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider7 > #cs_play7:checked ~ ul > .slide { animation: slide7-ie 16000ms infinite; } } .csslider7 > #cs_play7:checked ~ ul > .slide, .csslider7 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider7 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider7 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider7 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider7 > .cs_arrowprev, .csslider7 > .cs_arrownext, .csslider7 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider7:hover > .cs_arrowprev, .csslider7:hover > .cs_arrownext, .csslider7:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider7 > .cs_arrowprev > label, .csslider7 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider7 > .cs_arrowprev > label, .csslider7 > .cs_arrownext > label, .csslider7 > .cs_arrowprev > label span:after, .csslider7 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider7 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider7 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider7 > .cs_arrowprev > label span, .csslider7 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider7 > .cs_arrowprev > label span:after, .csslider7 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider7 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider7 > .cs_arrownext > label span:after { line-height: 29px; } .csslider7 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider7 > .cs_arrownext > label span:after { content: '\e801'; } .csslider7 > .cs_arrowprev:hover > label, .csslider7 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider7 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow7 .7s infinite ease-in-out; animation: nextArrow7 .7s infinite ease-in-out; } .csslider7 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow7 .7s infinite ease-in-out; animation: prevArrow7 .7s infinite ease-in-out; } @keyframes nextArrow7 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow7 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow7 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow7 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider7 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider7 > .cs_play_pause > label, .csslider7 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider7 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider7 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider7 > .cs_play_pause > label span:after { line-height: 28px; } .csslider7 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider7 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider7 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider7 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause7 .7s infinite ease-in-out; animation: playPause7 .7s infinite ease-in-out; } @-webkit-keyframes playPause7 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause7 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider7 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider7 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider7 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider7 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider7 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider7 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider7 > .cs_bullets > label:hover > .cs_point, .csslider7 > #cs_slide7_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider7 > #cs_pause7_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider7 > #cs_slide7_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider7 > #cs_pause7_1:checked ~ .cs_bullets > label.num1 > .cs_point { background: #3A4A5A; } @keyframes bullet7 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } @-webkit-keyframes bullet7 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } .csslider7 > #cs_play7:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider7 > #cs_pause7:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet7 16000ms infinite -2000ms; animation: bullet7 16000ms infinite -2000ms; } .csslider7 > #cs_play7:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider7 > #cs_pause7:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet7 16000ms infinite 6000ms; animation: bullet7 16000ms infinite 6000ms; } .csslider7 > #cs_play7:checked ~ .cs_bullets > label > .cs_point, .csslider7 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider7 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider7 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider7 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider7 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider7 > #cs_slide7_0:checked ~ .cs_description > .num0 > .cs_title, .csslider7 > #cs_slide7_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider7 > #cs_pause7_0:checked ~ .cs_description > .num0 > .cs_title, .csslider7 > #cs_pause7_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider7 > #cs_slide7_1:checked ~ .cs_description > .num1 > .cs_title, .csslider7 > #cs_slide7_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider7 > #cs_pause7_1:checked ~ .cs_description > .num1 > .cs_title, .csslider7 > #cs_pause7_1:checked ~ .cs_description > .num1 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider7 > #cs_slide7_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider7 > #cs_pause7_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider7 > #cs_slide7_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider7 > #cs_pause7_1:checked ~ .cs_description > .num1 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider7 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider7 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider7 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider7 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title7 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_title7 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr7 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_descr7 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } .csslider7 > #cs_play7:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title7 16000ms infinite -1400ms ease; animation: cs_title7 16000ms infinite -1400ms ease; } .csslider7 > #cs_play7:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title7 16000ms infinite 6600ms ease; animation: cs_title7 16000ms infinite 6600ms ease; } .csslider7 > #cs_play7:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr7 16000ms infinite -1150ms ease; animation: cs_descr7 16000ms infinite -1150ms ease; } .csslider7 > #cs_play7:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr7 16000ms infinite 6850ms ease; animation: cs_descr7 16000ms infinite 6850ms ease; } @-webkit-keyframes cs_title_text7 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text7 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text7 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text7 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider7 > #cs_play7:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text7 16000ms infinite -1250ms ease; animation: cs_title_text7 16000ms infinite -1250ms ease; } .csslider7 > #cs_play7:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text7 16000ms infinite 6750ms ease; animation: cs_title_text7 16000ms infinite 6750ms ease; } .csslider7 > #cs_play7:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text7 16000ms infinite -1000ms ease; animation: cs_descr_text7 16000ms infinite -1000ms ease; } .csslider7 > #cs_play7:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text7 16000ms infinite 7000ms ease; animation: cs_descr_text7 16000ms infinite 7000ms ease; } .csslider7 > #cs_play7:checked ~ .cs_description > label > .cs_title, .csslider7 > #cs_play7:checked ~ .cs_description > label > .cs_descr, .csslider7 > #cs_play7:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider7 > #cs_play7:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider7 > .pause:checked ~ .cs_description > label > .cs_title, .csslider7 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider7 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider7 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider7 > .cs_description, .csslider7 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider8 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider8, .csslider8 *, .csslider8 *:after, .csslider8 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider8 > .cs_anchor { display: none; } .csslider8 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider8 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider8 > ul > .slide.img img { width: 100%; } .csslider8 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider8 > 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); } .csslider8 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider8 > ul > li.img, .csslider8 > .cs_arrowprev, .csslider8 > .cs_arrownext, .csslider8 > .cs_bullets, .csslider8 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider8 > .cs_arrowprev, .csslider8 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider8 > .cs_arrowprev > label, .csslider8 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider8 > .cs_arrowprev { left: 0; } .csslider8 > .cs_arrownext { right: 0; } .csslider8 > .slide:checked ~ .cs_arrowprev > label, .csslider8 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider8 > #cs_slide8_0:checked ~ .cs_arrowprev > label.num2, .csslider8 > #cs_pause8_0:checked ~ .cs_arrowprev > label.num2, .csslider8 > #cs_slide8_0:checked ~ .cs_arrownext > label.num1, .csslider8 > #cs_pause8_0:checked ~ .cs_arrownext > label.num1, .csslider8 > #cs_slide8_1:checked ~ .cs_arrowprev > label.num0, .csslider8 > #cs_pause8_1:checked ~ .cs_arrowprev > label.num0, .csslider8 > #cs_slide8_1:checked ~ .cs_arrownext > label.num2, .csslider8 > #cs_pause8_1:checked ~ .cs_arrownext > label.num2, .csslider8 > #cs_slide8_2:checked ~ .cs_arrowprev > label.num1, .csslider8 > #cs_pause8_2:checked ~ .cs_arrowprev > label.num1, .csslider8 > #cs_slide8_2:checked ~ .cs_arrownext > label.num0, .csslider8 > #cs_pause8_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow8 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow8 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider8 > #cs_play8:checked ~ .cs_arrowprev > label.num2, .csslider8 > #cs_play8:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow8 24000ms infinite -2000ms; animation: arrow8 24000ms infinite -2000ms; } .csslider8 > #cs_play8:checked ~ .cs_arrowprev > label.num0, .csslider8 > #cs_play8:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow8 24000ms infinite 6000ms; animation: arrow8 24000ms infinite 6000ms; } .csslider8 > #cs_play8:checked ~ .cs_arrowprev > label.num1, .csslider8 > #cs_play8:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow8 24000ms infinite 14000ms; animation: arrow8 24000ms infinite 14000ms; } .csslider8 > .slide:checked ~ .cs_arrowprev > label, .csslider8 > .slide:checked ~ .cs_arrownext > label, .csslider8 > .pause:checked ~ .cs_arrowprev > label, .csslider8 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider8 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider8 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider8 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider8 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider8 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider8 > .cs_description { z-index: 3; } .csslider8 > .cs_description a, .csslider8 > .cs_description a:visited, .csslider8 > .cs_description a:active { color: inherit; } .csslider8 > .cs_description a:hover { text-decoration: none; } .csslider8 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider8 > .cs_description > label > span { vertical-align: top; } .csslider8 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider8 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider8 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider8 > #cs_play8:checked ~ .cs_play_pause > .cs_pause, .csslider8 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider8 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider8 > #cs_play8:checked ~ .cs_play_pause > .cs_play, .csslider8 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider8 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange8 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange8 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider8 > #cs_play8:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange8 24000ms infinite -2000ms; animation: pauseChange8 24000ms infinite -2000ms; } .csslider8 > #cs_play8:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange8 24000ms infinite 6000ms; animation: pauseChange8 24000ms infinite 6000ms; } .csslider8 > #cs_play8:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange8 24000ms infinite 14000ms; animation: pauseChange8 24000ms infinite 14000ms; } .csslider8 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider8 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider8 > ul > .slide.num0 { left: 0%; } .csslider8 > ul > .slide.num1 { left: 100%; } .csslider8 > ul > .slide.num2 { left: 200%; } .csslider8 > #cs_slide8_0:checked ~ ul > .slide, .csslider8 > #cs_pause8_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider8 > #cs_slide8_1:checked ~ ul > .slide, .csslider8 > #cs_pause8_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider8 > #cs_slide8_2:checked ~ ul > .slide, .csslider8 > #cs_pause8_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider8 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide8 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes slide8 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes slide8-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } @keyframes slide8-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } .csslider8 > #cs_play8:checked ~ ul > .slide { -webkit-animation: slide8 24000ms infinite; animation: slide8 24000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider8 > #cs_play8:checked ~ ul > .slide { animation: slide8-ie 24000ms infinite; } } .csslider8 > #cs_play8:checked ~ ul > .slide, .csslider8 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider8 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider8 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider8 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider8 > .cs_arrowprev, .csslider8 > .cs_arrownext, .csslider8 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider8:hover > .cs_arrowprev, .csslider8:hover > .cs_arrownext, .csslider8:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider8 > .cs_arrowprev > label, .csslider8 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider8 > .cs_arrowprev > label, .csslider8 > .cs_arrownext > label, .csslider8 > .cs_arrowprev > label span:after, .csslider8 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider8 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider8 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider8 > .cs_arrowprev > label span, .csslider8 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider8 > .cs_arrowprev > label span:after, .csslider8 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider8 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider8 > .cs_arrownext > label span:after { line-height: 29px; } .csslider8 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider8 > .cs_arrownext > label span:after { content: '\e801'; } .csslider8 > .cs_arrowprev:hover > label, .csslider8 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider8 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow8 .7s infinite ease-in-out; animation: nextArrow8 .7s infinite ease-in-out; } .csslider8 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow8 .7s infinite ease-in-out; animation: prevArrow8 .7s infinite ease-in-out; } @keyframes nextArrow8 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow8 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow8 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow8 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider8 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider8 > .cs_play_pause > label, .csslider8 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider8 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider8 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider8 > .cs_play_pause > label span:after { line-height: 28px; } .csslider8 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider8 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider8 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider8 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause8 .7s infinite ease-in-out; animation: playPause8 .7s infinite ease-in-out; } @-webkit-keyframes playPause8 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause8 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider8 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider8 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider8 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider8 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider8 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider8 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider8 > .cs_bullets > label:hover > .cs_point, .csslider8 > #cs_slide8_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider8 > #cs_pause8_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider8 > #cs_slide8_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider8 > #cs_pause8_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider8 > #cs_slide8_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider8 > #cs_pause8_2:checked ~ .cs_bullets > label.num2 > .cs_point { background: #3A4A5A; } @keyframes bullet8 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-webkit-keyframes bullet8 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } .csslider8 > #cs_play8:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider8 > #cs_pause8:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet8 24000ms infinite -2000ms; animation: bullet8 24000ms infinite -2000ms; } .csslider8 > #cs_play8:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider8 > #cs_pause8:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet8 24000ms infinite 6000ms; animation: bullet8 24000ms infinite 6000ms; } .csslider8 > #cs_play8:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider8 > #cs_pause8:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet8 24000ms infinite 14000ms; animation: bullet8 24000ms infinite 14000ms; } .csslider8 > #cs_play8:checked ~ .cs_bullets > label > .cs_point, .csslider8 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider8 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider8 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider8 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider8 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider8 > #cs_slide8_0:checked ~ .cs_description > .num0 > .cs_title, .csslider8 > #cs_slide8_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider8 > #cs_pause8_0:checked ~ .cs_description > .num0 > .cs_title, .csslider8 > #cs_pause8_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider8 > #cs_slide8_1:checked ~ .cs_description > .num1 > .cs_title, .csslider8 > #cs_slide8_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider8 > #cs_pause8_1:checked ~ .cs_description > .num1 > .cs_title, .csslider8 > #cs_pause8_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider8 > #cs_slide8_2:checked ~ .cs_description > .num2 > .cs_title, .csslider8 > #cs_slide8_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider8 > #cs_pause8_2:checked ~ .cs_description > .num2 > .cs_title, .csslider8 > #cs_pause8_2:checked ~ .cs_description > .num2 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider8 > #cs_slide8_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider8 > #cs_pause8_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider8 > #cs_slide8_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider8 > #cs_pause8_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider8 > #cs_slide8_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider8 > #cs_pause8_2:checked ~ .cs_description > .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider8 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider8 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider8 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider8 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title8 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_title8 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr8 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_descr8 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } .csslider8 > #cs_play8:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title8 24000ms infinite -1400ms ease; animation: cs_title8 24000ms infinite -1400ms ease; } .csslider8 > #cs_play8:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title8 24000ms infinite 6600ms ease; animation: cs_title8 24000ms infinite 6600ms ease; } .csslider8 > #cs_play8:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title8 24000ms infinite 14600ms ease; animation: cs_title8 24000ms infinite 14600ms ease; } .csslider8 > #cs_play8:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr8 24000ms infinite -1150ms ease; animation: cs_descr8 24000ms infinite -1150ms ease; } .csslider8 > #cs_play8:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr8 24000ms infinite 6850ms ease; animation: cs_descr8 24000ms infinite 6850ms ease; } .csslider8 > #cs_play8:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr8 24000ms infinite 14850ms ease; animation: cs_descr8 24000ms infinite 14850ms ease; } @-webkit-keyframes cs_title_text8 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text8 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text8 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text8 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider8 > #cs_play8:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text8 24000ms infinite -1250ms ease; animation: cs_title_text8 24000ms infinite -1250ms ease; } .csslider8 > #cs_play8:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text8 24000ms infinite 6750ms ease; animation: cs_title_text8 24000ms infinite 6750ms ease; } .csslider8 > #cs_play8:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text8 24000ms infinite 14750ms ease; animation: cs_title_text8 24000ms infinite 14750ms ease; } .csslider8 > #cs_play8:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text8 24000ms infinite -1000ms ease; animation: cs_descr_text8 24000ms infinite -1000ms ease; } .csslider8 > #cs_play8:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text8 24000ms infinite 7000ms ease; animation: cs_descr_text8 24000ms infinite 7000ms ease; } .csslider8 > #cs_play8:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text8 24000ms infinite 15000ms ease; animation: cs_descr_text8 24000ms infinite 15000ms ease; } .csslider8 > #cs_play8:checked ~ .cs_description > label > .cs_title, .csslider8 > #cs_play8:checked ~ .cs_description > label > .cs_descr, .csslider8 > #cs_play8:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider8 > #cs_play8:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider8 > .pause:checked ~ .cs_description > label > .cs_title, .csslider8 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider8 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider8 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider8 > .cs_description, .csslider8 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider9 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider9, .csslider9 *, .csslider9 *:after, .csslider9 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider9 > .cs_anchor { display: none; } .csslider9 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider9 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider9 > ul > .slide.img img { width: 100%; } .csslider9 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider9 > 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); } .csslider9 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider9 > ul > li.img, .csslider9 > .cs_arrowprev, .csslider9 > .cs_arrownext, .csslider9 > .cs_bullets, .csslider9 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider9 > .cs_arrowprev, .csslider9 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider9 > .cs_arrowprev > label, .csslider9 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider9 > .cs_arrowprev { left: 0; } .csslider9 > .cs_arrownext { right: 0; } .csslider9 > .slide:checked ~ .cs_arrowprev > label, .csslider9 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider9 > #cs_slide9_0:checked ~ .cs_arrowprev > label.num0, .csslider9 > #cs_pause9_0:checked ~ .cs_arrowprev > label.num0, .csslider9 > #cs_slide9_0:checked ~ .cs_arrownext > label.num0, .csslider9 > #cs_pause9_0:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow9 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow9 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider9 > #cs_play9:checked ~ .cs_arrowprev > label.num0, .csslider9 > #cs_play9:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow9 8000ms infinite -2000ms; animation: arrow9 8000ms infinite -2000ms; } .csslider9 > .slide:checked ~ .cs_arrowprev > label, .csslider9 > .slide:checked ~ .cs_arrownext > label, .csslider9 > .pause:checked ~ .cs_arrowprev > label, .csslider9 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider9 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider9 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider9 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider9 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider9 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider9 > .cs_description { z-index: 3; } .csslider9 > .cs_description a, .csslider9 > .cs_description a:visited, .csslider9 > .cs_description a:active { color: inherit; } .csslider9 > .cs_description a:hover { text-decoration: none; } .csslider9 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider9 > .cs_description > label > span { vertical-align: top; } .csslider9 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider9 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider9 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider9 > #cs_play9:checked ~ .cs_play_pause > .cs_pause, .csslider9 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider9 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider9 > #cs_play9:checked ~ .cs_play_pause > .cs_play, .csslider9 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider9 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange9 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange9 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider9 > #cs_play9:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange9 8000ms infinite -2000ms; animation: pauseChange9 8000ms infinite -2000ms; } .csslider9 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider9 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider9 > ul > .slide.num0 { left: 0%; } .csslider9 > #cs_slide9_0:checked ~ ul > .slide, .csslider9 > #cs_pause9_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider9 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide9 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slide9 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slide9-ie { 0%, 75% { margin-left: 0%; } } @keyframes slide9-ie { 0%, 75% { margin-left: 0%; } } .csslider9 > #cs_play9:checked ~ ul > .slide { -webkit-animation: slide9 8000ms infinite; animation: slide9 8000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider9 > #cs_play9:checked ~ ul > .slide { animation: slide9-ie 8000ms infinite; } } .csslider9 > #cs_play9:checked ~ ul > .slide, .csslider9 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider9 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider9 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider9 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider9 > .cs_arrowprev, .csslider9 > .cs_arrownext, .csslider9 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider9:hover > .cs_arrowprev, .csslider9:hover > .cs_arrownext, .csslider9:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider9 > .cs_arrowprev > label, .csslider9 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider9 > .cs_arrowprev > label, .csslider9 > .cs_arrownext > label, .csslider9 > .cs_arrowprev > label span:after, .csslider9 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider9 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider9 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider9 > .cs_arrowprev > label span, .csslider9 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider9 > .cs_arrowprev > label span:after, .csslider9 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider9 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider9 > .cs_arrownext > label span:after { line-height: 29px; } .csslider9 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider9 > .cs_arrownext > label span:after { content: '\e801'; } .csslider9 > .cs_arrowprev:hover > label, .csslider9 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider9 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow9 .7s infinite ease-in-out; animation: nextArrow9 .7s infinite ease-in-out; } .csslider9 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow9 .7s infinite ease-in-out; animation: prevArrow9 .7s infinite ease-in-out; } @keyframes nextArrow9 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow9 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow9 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow9 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider9 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider9 > .cs_play_pause > label, .csslider9 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider9 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider9 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider9 > .cs_play_pause > label span:after { line-height: 28px; } .csslider9 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider9 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider9 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider9 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause9 .7s infinite ease-in-out; animation: playPause9 .7s infinite ease-in-out; } @-webkit-keyframes playPause9 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause9 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider9 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider9 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider9 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider9 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider9 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider9 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider9 > .cs_bullets > label:hover > .cs_point, .csslider9 > #cs_slide9_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider9 > #cs_pause9_0:checked ~ .cs_bullets > label.num0 > .cs_point { background: #3A4A5A; } @keyframes bullet9 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } @-webkit-keyframes bullet9 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } .csslider9 > #cs_play9:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider9 > #cs_pause9:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet9 8000ms infinite -2000ms; animation: bullet9 8000ms infinite -2000ms; } .csslider9 > #cs_play9:checked ~ .cs_bullets > label > .cs_point, .csslider9 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider9 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider9 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider9 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider9 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider9 > #cs_slide9_0:checked ~ .cs_description > .num0 > .cs_title, .csslider9 > #cs_slide9_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider9 > #cs_pause9_0:checked ~ .cs_description > .num0 > .cs_title, .csslider9 > #cs_pause9_0:checked ~ .cs_description > .num0 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider9 > #cs_slide9_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider9 > #cs_pause9_0:checked ~ .cs_description > .num0 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider9 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider9 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider9 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider9 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title9 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_title9 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr9 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_descr9 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } .csslider9 > #cs_play9:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title9 8000ms infinite -1400ms ease; animation: cs_title9 8000ms infinite -1400ms ease; } .csslider9 > #cs_play9:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr9 8000ms infinite -1150ms ease; animation: cs_descr9 8000ms infinite -1150ms ease; } @-webkit-keyframes cs_title_text9 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text9 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text9 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text9 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider9 > #cs_play9:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text9 8000ms infinite -1250ms ease; animation: cs_title_text9 8000ms infinite -1250ms ease; } .csslider9 > #cs_play9:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text9 8000ms infinite -1000ms ease; animation: cs_descr_text9 8000ms infinite -1000ms ease; } .csslider9 > #cs_play9:checked ~ .cs_description > label > .cs_title, .csslider9 > #cs_play9:checked ~ .cs_description > label > .cs_descr, .csslider9 > #cs_play9:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider9 > #cs_play9:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider9 > .pause:checked ~ .cs_description > label > .cs_title, .csslider9 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider9 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider9 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider9 > .cs_description, .csslider9 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider10 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider10, .csslider10 *, .csslider10 *:after, .csslider10 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider10 > .cs_anchor { display: none; } .csslider10 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider10 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider10 > ul > .slide.img img { width: 100%; } .csslider10 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider10 > 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); } .csslider10 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider10 > ul > li.img, .csslider10 > .cs_arrowprev, .csslider10 > .cs_arrownext, .csslider10 > .cs_bullets, .csslider10 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider10 > .cs_arrowprev, .csslider10 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider10 > .cs_arrowprev > label, .csslider10 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider10 > .cs_arrowprev { left: 0; } .csslider10 > .cs_arrownext { right: 0; } .csslider10 > .slide:checked ~ .cs_arrowprev > label, .csslider10 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider10 > #cs_slide10_0:checked ~ .cs_arrowprev > label.num2, .csslider10 > #cs_pause10_0:checked ~ .cs_arrowprev > label.num2, .csslider10 > #cs_slide10_0:checked ~ .cs_arrownext > label.num1, .csslider10 > #cs_pause10_0:checked ~ .cs_arrownext > label.num1, .csslider10 > #cs_slide10_1:checked ~ .cs_arrowprev > label.num0, .csslider10 > #cs_pause10_1:checked ~ .cs_arrowprev > label.num0, .csslider10 > #cs_slide10_1:checked ~ .cs_arrownext > label.num2, .csslider10 > #cs_pause10_1:checked ~ .cs_arrownext > label.num2, .csslider10 > #cs_slide10_2:checked ~ .cs_arrowprev > label.num1, .csslider10 > #cs_pause10_2:checked ~ .cs_arrowprev > label.num1, .csslider10 > #cs_slide10_2:checked ~ .cs_arrownext > label.num0, .csslider10 > #cs_pause10_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow10 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow10 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider10 > #cs_play10:checked ~ .cs_arrowprev > label.num2, .csslider10 > #cs_play10:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow10 24000ms infinite -2000ms; animation: arrow10 24000ms infinite -2000ms; } .csslider10 > #cs_play10:checked ~ .cs_arrowprev > label.num0, .csslider10 > #cs_play10:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow10 24000ms infinite 6000ms; animation: arrow10 24000ms infinite 6000ms; } .csslider10 > #cs_play10:checked ~ .cs_arrowprev > label.num1, .csslider10 > #cs_play10:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow10 24000ms infinite 14000ms; animation: arrow10 24000ms infinite 14000ms; } .csslider10 > .slide:checked ~ .cs_arrowprev > label, .csslider10 > .slide:checked ~ .cs_arrownext > label, .csslider10 > .pause:checked ~ .cs_arrowprev > label, .csslider10 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider10 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider10 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider10 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider10 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider10 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider10 > .cs_description { z-index: 3; } .csslider10 > .cs_description a, .csslider10 > .cs_description a:visited, .csslider10 > .cs_description a:active { color: inherit; } .csslider10 > .cs_description a:hover { text-decoration: none; } .csslider10 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider10 > .cs_description > label > span { vertical-align: top; } .csslider10 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider10 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider10 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider10 > #cs_play10:checked ~ .cs_play_pause > .cs_pause, .csslider10 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider10 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider10 > #cs_play10:checked ~ .cs_play_pause > .cs_play, .csslider10 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider10 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange10 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange10 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider10 > #cs_play10:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange10 24000ms infinite -2000ms; animation: pauseChange10 24000ms infinite -2000ms; } .csslider10 > #cs_play10:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange10 24000ms infinite 6000ms; animation: pauseChange10 24000ms infinite 6000ms; } .csslider10 > #cs_play10:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange10 24000ms infinite 14000ms; animation: pauseChange10 24000ms infinite 14000ms; } .csslider10 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider10 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider10 > ul > .slide.num0 { left: 0%; } .csslider10 > ul > .slide.num1 { left: 100%; } .csslider10 > ul > .slide.num2 { left: 200%; } .csslider10 > #cs_slide10_0:checked ~ ul > .slide, .csslider10 > #cs_pause10_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider10 > #cs_slide10_1:checked ~ ul > .slide, .csslider10 > #cs_pause10_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider10 > #cs_slide10_2:checked ~ ul > .slide, .csslider10 > #cs_pause10_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider10 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide10 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes slide10 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes slide10-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } @keyframes slide10-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } .csslider10 > #cs_play10:checked ~ ul > .slide { -webkit-animation: slide10 24000ms infinite; animation: slide10 24000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider10 > #cs_play10:checked ~ ul > .slide { animation: slide10-ie 24000ms infinite; } } .csslider10 > #cs_play10:checked ~ ul > .slide, .csslider10 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider10 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider10 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider10 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider10 > .cs_arrowprev, .csslider10 > .cs_arrownext, .csslider10 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider10:hover > .cs_arrowprev, .csslider10:hover > .cs_arrownext, .csslider10:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider10 > .cs_arrowprev > label, .csslider10 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider10 > .cs_arrowprev > label, .csslider10 > .cs_arrownext > label, .csslider10 > .cs_arrowprev > label span:after, .csslider10 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider10 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider10 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider10 > .cs_arrowprev > label span, .csslider10 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider10 > .cs_arrowprev > label span:after, .csslider10 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider10 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider10 > .cs_arrownext > label span:after { line-height: 29px; } .csslider10 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider10 > .cs_arrownext > label span:after { content: '\e801'; } .csslider10 > .cs_arrowprev:hover > label, .csslider10 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider10 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow10 .7s infinite ease-in-out; animation: nextArrow10 .7s infinite ease-in-out; } .csslider10 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow10 .7s infinite ease-in-out; animation: prevArrow10 .7s infinite ease-in-out; } @keyframes nextArrow10 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow10 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow10 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow10 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider10 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider10 > .cs_play_pause > label, .csslider10 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider10 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider10 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider10 > .cs_play_pause > label span:after { line-height: 28px; } .csslider10 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider10 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider10 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider10 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause10 .7s infinite ease-in-out; animation: playPause10 .7s infinite ease-in-out; } @-webkit-keyframes playPause10 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause10 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider10 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider10 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider10 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider10 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider10 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider10 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider10 > .cs_bullets > label:hover > .cs_point, .csslider10 > #cs_slide10_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider10 > #cs_pause10_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider10 > #cs_slide10_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider10 > #cs_pause10_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider10 > #cs_slide10_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider10 > #cs_pause10_2:checked ~ .cs_bullets > label.num2 > .cs_point { background: #3A4A5A; } @keyframes bullet10 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-webkit-keyframes bullet10 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } .csslider10 > #cs_play10:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider10 > #cs_pause10:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet10 24000ms infinite -2000ms; animation: bullet10 24000ms infinite -2000ms; } .csslider10 > #cs_play10:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider10 > #cs_pause10:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet10 24000ms infinite 6000ms; animation: bullet10 24000ms infinite 6000ms; } .csslider10 > #cs_play10:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider10 > #cs_pause10:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet10 24000ms infinite 14000ms; animation: bullet10 24000ms infinite 14000ms; } .csslider10 > #cs_play10:checked ~ .cs_bullets > label > .cs_point, .csslider10 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider10 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider10 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider10 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider10 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider10 > #cs_slide10_0:checked ~ .cs_description > .num0 > .cs_title, .csslider10 > #cs_slide10_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider10 > #cs_pause10_0:checked ~ .cs_description > .num0 > .cs_title, .csslider10 > #cs_pause10_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider10 > #cs_slide10_1:checked ~ .cs_description > .num1 > .cs_title, .csslider10 > #cs_slide10_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider10 > #cs_pause10_1:checked ~ .cs_description > .num1 > .cs_title, .csslider10 > #cs_pause10_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider10 > #cs_slide10_2:checked ~ .cs_description > .num2 > .cs_title, .csslider10 > #cs_slide10_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider10 > #cs_pause10_2:checked ~ .cs_description > .num2 > .cs_title, .csslider10 > #cs_pause10_2:checked ~ .cs_description > .num2 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider10 > #cs_slide10_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider10 > #cs_pause10_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider10 > #cs_slide10_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider10 > #cs_pause10_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider10 > #cs_slide10_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider10 > #cs_pause10_2:checked ~ .cs_description > .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider10 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider10 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider10 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider10 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title10 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_title10 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr10 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_descr10 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } .csslider10 > #cs_play10:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title10 24000ms infinite -1400ms ease; animation: cs_title10 24000ms infinite -1400ms ease; } .csslider10 > #cs_play10:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title10 24000ms infinite 6600ms ease; animation: cs_title10 24000ms infinite 6600ms ease; } .csslider10 > #cs_play10:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title10 24000ms infinite 14600ms ease; animation: cs_title10 24000ms infinite 14600ms ease; } .csslider10 > #cs_play10:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr10 24000ms infinite -1150ms ease; animation: cs_descr10 24000ms infinite -1150ms ease; } .csslider10 > #cs_play10:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr10 24000ms infinite 6850ms ease; animation: cs_descr10 24000ms infinite 6850ms ease; } .csslider10 > #cs_play10:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr10 24000ms infinite 14850ms ease; animation: cs_descr10 24000ms infinite 14850ms ease; } @-webkit-keyframes cs_title_text10 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text10 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text10 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text10 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider10 > #cs_play10:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text10 24000ms infinite -1250ms ease; animation: cs_title_text10 24000ms infinite -1250ms ease; } .csslider10 > #cs_play10:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text10 24000ms infinite 6750ms ease; animation: cs_title_text10 24000ms infinite 6750ms ease; } .csslider10 > #cs_play10:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text10 24000ms infinite 14750ms ease; animation: cs_title_text10 24000ms infinite 14750ms ease; } .csslider10 > #cs_play10:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text10 24000ms infinite -1000ms ease; animation: cs_descr_text10 24000ms infinite -1000ms ease; } .csslider10 > #cs_play10:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text10 24000ms infinite 7000ms ease; animation: cs_descr_text10 24000ms infinite 7000ms ease; } .csslider10 > #cs_play10:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text10 24000ms infinite 15000ms ease; animation: cs_descr_text10 24000ms infinite 15000ms ease; } .csslider10 > #cs_play10:checked ~ .cs_description > label > .cs_title, .csslider10 > #cs_play10:checked ~ .cs_description > label > .cs_descr, .csslider10 > #cs_play10:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider10 > #cs_play10:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider10 > .pause:checked ~ .cs_description > label > .cs_title, .csslider10 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider10 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider10 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider10 > .cs_description, .csslider10 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider11 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider11, .csslider11 *, .csslider11 *:after, .csslider11 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider11 > .cs_anchor { display: none; } .csslider11 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider11 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider11 > ul > .slide.img img { width: 100%; } .csslider11 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider11 > 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); } .csslider11 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider11 > ul > li.img, .csslider11 > .cs_arrowprev, .csslider11 > .cs_arrownext, .csslider11 > .cs_bullets, .csslider11 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider11 > .cs_arrowprev, .csslider11 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider11 > .cs_arrowprev > label, .csslider11 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider11 > .cs_arrowprev { left: 0; } .csslider11 > .cs_arrownext { right: 0; } .csslider11 > .slide:checked ~ .cs_arrowprev > label, .csslider11 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider11 > #cs_slide11_0:checked ~ .cs_arrowprev > label.num7, .csslider11 > #cs_pause11_0:checked ~ .cs_arrowprev > label.num7, .csslider11 > #cs_slide11_0:checked ~ .cs_arrownext > label.num1, .csslider11 > #cs_pause11_0:checked ~ .cs_arrownext > label.num1, .csslider11 > #cs_slide11_1:checked ~ .cs_arrowprev > label.num0, .csslider11 > #cs_pause11_1:checked ~ .cs_arrowprev > label.num0, .csslider11 > #cs_slide11_1:checked ~ .cs_arrownext > label.num2, .csslider11 > #cs_pause11_1:checked ~ .cs_arrownext > label.num2, .csslider11 > #cs_slide11_2:checked ~ .cs_arrowprev > label.num1, .csslider11 > #cs_pause11_2:checked ~ .cs_arrowprev > label.num1, .csslider11 > #cs_slide11_2:checked ~ .cs_arrownext > label.num3, .csslider11 > #cs_pause11_2:checked ~ .cs_arrownext > label.num3, .csslider11 > #cs_slide11_3:checked ~ .cs_arrowprev > label.num2, .csslider11 > #cs_pause11_3:checked ~ .cs_arrowprev > label.num2, .csslider11 > #cs_slide11_3:checked ~ .cs_arrownext > label.num4, .csslider11 > #cs_pause11_3:checked ~ .cs_arrownext > label.num4, .csslider11 > #cs_slide11_4:checked ~ .cs_arrowprev > label.num3, .csslider11 > #cs_pause11_4:checked ~ .cs_arrowprev > label.num3, .csslider11 > #cs_slide11_4:checked ~ .cs_arrownext > label.num5, .csslider11 > #cs_pause11_4:checked ~ .cs_arrownext > label.num5, .csslider11 > #cs_slide11_5:checked ~ .cs_arrowprev > label.num4, .csslider11 > #cs_pause11_5:checked ~ .cs_arrowprev > label.num4, .csslider11 > #cs_slide11_5:checked ~ .cs_arrownext > label.num6, .csslider11 > #cs_pause11_5:checked ~ .cs_arrownext > label.num6, .csslider11 > #cs_slide11_6:checked ~ .cs_arrowprev > label.num5, .csslider11 > #cs_pause11_6:checked ~ .cs_arrowprev > label.num5, .csslider11 > #cs_slide11_6:checked ~ .cs_arrownext > label.num7, .csslider11 > #cs_pause11_6:checked ~ .cs_arrownext > label.num7, .csslider11 > #cs_slide11_7:checked ~ .cs_arrowprev > label.num6, .csslider11 > #cs_pause11_7:checked ~ .cs_arrowprev > label.num6, .csslider11 > #cs_slide11_7:checked ~ .cs_arrownext > label.num0, .csslider11 > #cs_pause11_7:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow11 { 0%, 12.49% { opacity: 1; z-index: 5; } 12.5%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow11 { 0%, 12.49% { opacity: 1; z-index: 5; } 12.5%, 100% { opacity: 0; z-index: -1; } } .csslider11 > #cs_play11:checked ~ .cs_arrowprev > label.num7, .csslider11 > #cs_play11:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow11 64000ms infinite -2000ms; animation: arrow11 64000ms infinite -2000ms; } .csslider11 > #cs_play11:checked ~ .cs_arrowprev > label.num0, .csslider11 > #cs_play11:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow11 64000ms infinite 6000ms; animation: arrow11 64000ms infinite 6000ms; } .csslider11 > #cs_play11:checked ~ .cs_arrowprev > label.num1, .csslider11 > #cs_play11:checked ~ .cs_arrownext > label.num3 { -webkit-animation: arrow11 64000ms infinite 14000ms; animation: arrow11 64000ms infinite 14000ms; } .csslider11 > #cs_play11:checked ~ .cs_arrowprev > label.num2, .csslider11 > #cs_play11:checked ~ .cs_arrownext > label.num4 { -webkit-animation: arrow11 64000ms infinite 22000ms; animation: arrow11 64000ms infinite 22000ms; } .csslider11 > #cs_play11:checked ~ .cs_arrowprev > label.num3, .csslider11 > #cs_play11:checked ~ .cs_arrownext > label.num5 { -webkit-animation: arrow11 64000ms infinite 30000ms; animation: arrow11 64000ms infinite 30000ms; } .csslider11 > #cs_play11:checked ~ .cs_arrowprev > label.num4, .csslider11 > #cs_play11:checked ~ .cs_arrownext > label.num6 { -webkit-animation: arrow11 64000ms infinite 38000ms; animation: arrow11 64000ms infinite 38000ms; } .csslider11 > #cs_play11:checked ~ .cs_arrowprev > label.num5, .csslider11 > #cs_play11:checked ~ .cs_arrownext > label.num7 { -webkit-animation: arrow11 64000ms infinite 46000ms; animation: arrow11 64000ms infinite 46000ms; } .csslider11 > #cs_play11:checked ~ .cs_arrowprev > label.num6, .csslider11 > #cs_play11:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow11 64000ms infinite 54000ms; animation: arrow11 64000ms infinite 54000ms; } .csslider11 > .slide:checked ~ .cs_arrowprev > label, .csslider11 > .slide:checked ~ .cs_arrownext > label, .csslider11 > .pause:checked ~ .cs_arrowprev > label, .csslider11 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider11 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider11 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider11 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider11 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider11 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider11 > .cs_description { z-index: 3; } .csslider11 > .cs_description a, .csslider11 > .cs_description a:visited, .csslider11 > .cs_description a:active { color: inherit; } .csslider11 > .cs_description a:hover { text-decoration: none; } .csslider11 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider11 > .cs_description > label > span { vertical-align: top; } .csslider11 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider11 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider11 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider11 > #cs_play11:checked ~ .cs_play_pause > .cs_pause, .csslider11 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider11 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider11 > #cs_play11:checked ~ .cs_play_pause > .cs_play, .csslider11 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider11 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange11 { 0%, 12.49% { opacity: 1; z-index: 5; } 12.5%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange11 { 0%, 12.49% { opacity: 1; z-index: 5; } 12.5%, 100% { opacity: 0; z-index: -1; } } .csslider11 > #cs_play11:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange11 64000ms infinite -2000ms; animation: pauseChange11 64000ms infinite -2000ms; } .csslider11 > #cs_play11:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange11 64000ms infinite 6000ms; animation: pauseChange11 64000ms infinite 6000ms; } .csslider11 > #cs_play11:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange11 64000ms infinite 14000ms; animation: pauseChange11 64000ms infinite 14000ms; } .csslider11 > #cs_play11:checked ~ .cs_play_pause > .cs_pause.num3 { opacity: 0; z-index: -1; -webkit-animation: pauseChange11 64000ms infinite 22000ms; animation: pauseChange11 64000ms infinite 22000ms; } .csslider11 > #cs_play11:checked ~ .cs_play_pause > .cs_pause.num4 { opacity: 0; z-index: -1; -webkit-animation: pauseChange11 64000ms infinite 30000ms; animation: pauseChange11 64000ms infinite 30000ms; } .csslider11 > #cs_play11:checked ~ .cs_play_pause > .cs_pause.num5 { opacity: 0; z-index: -1; -webkit-animation: pauseChange11 64000ms infinite 38000ms; animation: pauseChange11 64000ms infinite 38000ms; } .csslider11 > #cs_play11:checked ~ .cs_play_pause > .cs_pause.num6 { opacity: 0; z-index: -1; -webkit-animation: pauseChange11 64000ms infinite 46000ms; animation: pauseChange11 64000ms infinite 46000ms; } .csslider11 > #cs_play11:checked ~ .cs_play_pause > .cs_pause.num7 { opacity: 0; z-index: -1; -webkit-animation: pauseChange11 64000ms infinite 54000ms; animation: pauseChange11 64000ms infinite 54000ms; } .csslider11 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider11 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider11 > ul > .slide.num0 { left: 0%; } .csslider11 > ul > .slide.num1 { left: 100%; } .csslider11 > ul > .slide.num2 { left: 200%; } .csslider11 > ul > .slide.num3 { left: 300%; } .csslider11 > ul > .slide.num4 { left: 400%; } .csslider11 > ul > .slide.num5 { left: 500%; } .csslider11 > ul > .slide.num6 { left: 600%; } .csslider11 > ul > .slide.num7 { left: 700%; } .csslider11 > #cs_slide11_0:checked ~ ul > .slide, .csslider11 > #cs_pause11_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider11 > #cs_slide11_1:checked ~ ul > .slide, .csslider11 > #cs_pause11_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider11 > #cs_slide11_2:checked ~ ul > .slide, .csslider11 > #cs_pause11_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider11 > #cs_slide11_3:checked ~ ul > .slide, .csslider11 > #cs_pause11_3:checked ~ ul > .slide { -webkit-transform: translateX(-300%); transform: translateX(-300%); } .csslider11 > #cs_slide11_4:checked ~ ul > .slide, .csslider11 > #cs_pause11_4:checked ~ ul > .slide { -webkit-transform: translateX(-400%); transform: translateX(-400%); } .csslider11 > #cs_slide11_5:checked ~ ul > .slide, .csslider11 > #cs_pause11_5:checked ~ ul > .slide { -webkit-transform: translateX(-500%); transform: translateX(-500%); } .csslider11 > #cs_slide11_6:checked ~ ul > .slide, .csslider11 > #cs_pause11_6:checked ~ ul > .slide { -webkit-transform: translateX(-600%); transform: translateX(-600%); } .csslider11 > #cs_slide11_7:checked ~ ul > .slide, .csslider11 > #cs_pause11_7:checked ~ ul > .slide { -webkit-transform: translateX(-700%); transform: translateX(-700%); } .csslider11 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide11 { 0%, 9.375% { -webkit-transform: translateX(0%); transform: translateX(0%); } 12.5%, 21.875% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 25%, 34.375% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 37.5%, 46.875% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } 50%, 59.375% { -webkit-transform: translateX(-400%); transform: translateX(-400%); } 62.5%, 71.875% { -webkit-transform: translateX(-500%); transform: translateX(-500%); } 75%, 84.375% { -webkit-transform: translateX(-600%); transform: translateX(-600%); } 87.5%, 96.875% { -webkit-transform: translateX(-700%); transform: translateX(-700%); } } @keyframes slide11 { 0%, 9.375% { -webkit-transform: translateX(0%); transform: translateX(0%); } 12.5%, 21.875% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 25%, 34.375% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 37.5%, 46.875% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } 50%, 59.375% { -webkit-transform: translateX(-400%); transform: translateX(-400%); } 62.5%, 71.875% { -webkit-transform: translateX(-500%); transform: translateX(-500%); } 75%, 84.375% { -webkit-transform: translateX(-600%); transform: translateX(-600%); } 87.5%, 96.875% { -webkit-transform: translateX(-700%); transform: translateX(-700%); } } @-webkit-keyframes slide11-ie { 0%, 9.375% { margin-left: 0%; } 12.5%, 21.875% { margin-left: -100%; } 25%, 34.375% { margin-left: -200%; } 37.5%, 46.875% { margin-left: -300%; } 50%, 59.375% { margin-left: -400%; } 62.5%, 71.875% { margin-left: -500%; } 75%, 84.375% { margin-left: -600%; } 87.5%, 96.875% { margin-left: -700%; } } @keyframes slide11-ie { 0%, 9.375% { margin-left: 0%; } 12.5%, 21.875% { margin-left: -100%; } 25%, 34.375% { margin-left: -200%; } 37.5%, 46.875% { margin-left: -300%; } 50%, 59.375% { margin-left: -400%; } 62.5%, 71.875% { margin-left: -500%; } 75%, 84.375% { margin-left: -600%; } 87.5%, 96.875% { margin-left: -700%; } } .csslider11 > #cs_play11:checked ~ ul > .slide { -webkit-animation: slide11 64000ms infinite; animation: slide11 64000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider11 > #cs_play11:checked ~ ul > .slide { animation: slide11-ie 64000ms infinite; } } .csslider11 > #cs_play11:checked ~ ul > .slide, .csslider11 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider11 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider11 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider11 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider11 > .cs_arrowprev, .csslider11 > .cs_arrownext, .csslider11 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider11:hover > .cs_arrowprev, .csslider11:hover > .cs_arrownext, .csslider11:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider11 > .cs_arrowprev > label, .csslider11 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider11 > .cs_arrowprev > label, .csslider11 > .cs_arrownext > label, .csslider11 > .cs_arrowprev > label span:after, .csslider11 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider11 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider11 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider11 > .cs_arrowprev > label span, .csslider11 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider11 > .cs_arrowprev > label span:after, .csslider11 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider11 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider11 > .cs_arrownext > label span:after { line-height: 29px; } .csslider11 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider11 > .cs_arrownext > label span:after { content: '\e801'; } .csslider11 > .cs_arrowprev:hover > label, .csslider11 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider11 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow11 .7s infinite ease-in-out; animation: nextArrow11 .7s infinite ease-in-out; } .csslider11 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow11 .7s infinite ease-in-out; animation: prevArrow11 .7s infinite ease-in-out; } @keyframes nextArrow11 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow11 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow11 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow11 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider11 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider11 > .cs_play_pause > label, .csslider11 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider11 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider11 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider11 > .cs_play_pause > label span:after { line-height: 28px; } .csslider11 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider11 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider11 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider11 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause11 .7s infinite ease-in-out; animation: playPause11 .7s infinite ease-in-out; } @-webkit-keyframes playPause11 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause11 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider11 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider11 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider11 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider11 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider11 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider11 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider11 > .cs_bullets > label:hover > .cs_point, .csslider11 > #cs_slide11_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider11 > #cs_pause11_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider11 > #cs_slide11_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider11 > #cs_pause11_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider11 > #cs_slide11_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider11 > #cs_pause11_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider11 > #cs_slide11_3:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider11 > #cs_pause11_3:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider11 > #cs_slide11_4:checked ~ .cs_bullets > label.num4 > .cs_point, .csslider11 > #cs_pause11_4:checked ~ .cs_bullets > label.num4 > .cs_point, .csslider11 > #cs_slide11_5:checked ~ .cs_bullets > label.num5 > .cs_point, .csslider11 > #cs_pause11_5:checked ~ .cs_bullets > label.num5 > .cs_point, .csslider11 > #cs_slide11_6:checked ~ .cs_bullets > label.num6 > .cs_point, .csslider11 > #cs_pause11_6:checked ~ .cs_bullets > label.num6 > .cs_point, .csslider11 > #cs_slide11_7:checked ~ .cs_bullets > label.num7 > .cs_point, .csslider11 > #cs_pause11_7:checked ~ .cs_bullets > label.num7 > .cs_point { background: #3A4A5A; } @keyframes bullet11 { 0%, 12.49% { background: #3A4A5A; } 12.5%, 100% { background: transparent; } } @-webkit-keyframes bullet11 { 0%, 12.49% { background: #3A4A5A; } 12.5%, 100% { background: transparent; } } .csslider11 > #cs_play11:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider11 > #cs_pause11:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet11 64000ms infinite -2000ms; animation: bullet11 64000ms infinite -2000ms; } .csslider11 > #cs_play11:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider11 > #cs_pause11:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet11 64000ms infinite 6000ms; animation: bullet11 64000ms infinite 6000ms; } .csslider11 > #cs_play11:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider11 > #cs_pause11:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet11 64000ms infinite 14000ms; animation: bullet11 64000ms infinite 14000ms; } .csslider11 > #cs_play11:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider11 > #cs_pause11:checked ~ .cs_bullets > label.num3 > .cs_point { -webkit-animation: bullet11 64000ms infinite 22000ms; animation: bullet11 64000ms infinite 22000ms; } .csslider11 > #cs_play11:checked ~ .cs_bullets > label.num4 > .cs_point, .csslider11 > #cs_pause11:checked ~ .cs_bullets > label.num4 > .cs_point { -webkit-animation: bullet11 64000ms infinite 30000ms; animation: bullet11 64000ms infinite 30000ms; } .csslider11 > #cs_play11:checked ~ .cs_bullets > label.num5 > .cs_point, .csslider11 > #cs_pause11:checked ~ .cs_bullets > label.num5 > .cs_point { -webkit-animation: bullet11 64000ms infinite 38000ms; animation: bullet11 64000ms infinite 38000ms; } .csslider11 > #cs_play11:checked ~ .cs_bullets > label.num6 > .cs_point, .csslider11 > #cs_pause11:checked ~ .cs_bullets > label.num6 > .cs_point { -webkit-animation: bullet11 64000ms infinite 46000ms; animation: bullet11 64000ms infinite 46000ms; } .csslider11 > #cs_play11:checked ~ .cs_bullets > label.num7 > .cs_point, .csslider11 > #cs_pause11:checked ~ .cs_bullets > label.num7 > .cs_point { -webkit-animation: bullet11 64000ms infinite 54000ms; animation: bullet11 64000ms infinite 54000ms; } .csslider11 > #cs_play11:checked ~ .cs_bullets > label > .cs_point, .csslider11 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider11 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider11 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider11 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider11 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider11 > #cs_slide11_0:checked ~ .cs_description > .num0 > .cs_title, .csslider11 > #cs_slide11_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider11 > #cs_pause11_0:checked ~ .cs_description > .num0 > .cs_title, .csslider11 > #cs_pause11_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider11 > #cs_slide11_1:checked ~ .cs_description > .num1 > .cs_title, .csslider11 > #cs_slide11_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider11 > #cs_pause11_1:checked ~ .cs_description > .num1 > .cs_title, .csslider11 > #cs_pause11_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider11 > #cs_slide11_2:checked ~ .cs_description > .num2 > .cs_title, .csslider11 > #cs_slide11_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider11 > #cs_pause11_2:checked ~ .cs_description > .num2 > .cs_title, .csslider11 > #cs_pause11_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider11 > #cs_slide11_3:checked ~ .cs_description > .num3 > .cs_title, .csslider11 > #cs_slide11_3:checked ~ .cs_description > .num3 > .cs_descr, .csslider11 > #cs_pause11_3:checked ~ .cs_description > .num3 > .cs_title, .csslider11 > #cs_pause11_3:checked ~ .cs_description > .num3 > .cs_descr, .csslider11 > #cs_slide11_4:checked ~ .cs_description > .num4 > .cs_title, .csslider11 > #cs_slide11_4:checked ~ .cs_description > .num4 > .cs_descr, .csslider11 > #cs_pause11_4:checked ~ .cs_description > .num4 > .cs_title, .csslider11 > #cs_pause11_4:checked ~ .cs_description > .num4 > .cs_descr, .csslider11 > #cs_slide11_5:checked ~ .cs_description > .num5 > .cs_title, .csslider11 > #cs_slide11_5:checked ~ .cs_description > .num5 > .cs_descr, .csslider11 > #cs_pause11_5:checked ~ .cs_description > .num5 > .cs_title, .csslider11 > #cs_pause11_5:checked ~ .cs_description > .num5 > .cs_descr, .csslider11 > #cs_slide11_6:checked ~ .cs_description > .num6 > .cs_title, .csslider11 > #cs_slide11_6:checked ~ .cs_description > .num6 > .cs_descr, .csslider11 > #cs_pause11_6:checked ~ .cs_description > .num6 > .cs_title, .csslider11 > #cs_pause11_6:checked ~ .cs_description > .num6 > .cs_descr, .csslider11 > #cs_slide11_7:checked ~ .cs_description > .num7 > .cs_title, .csslider11 > #cs_slide11_7:checked ~ .cs_description > .num7 > .cs_descr, .csslider11 > #cs_pause11_7:checked ~ .cs_description > .num7 > .cs_title, .csslider11 > #cs_pause11_7:checked ~ .cs_description > .num7 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider11 > #cs_slide11_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider11 > #cs_pause11_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider11 > #cs_slide11_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider11 > #cs_pause11_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider11 > #cs_slide11_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider11 > #cs_pause11_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider11 > #cs_slide11_3:checked ~ .cs_description > .num3 .cs_wrapper, .csslider11 > #cs_pause11_3:checked ~ .cs_description > .num3 .cs_wrapper, .csslider11 > #cs_slide11_4:checked ~ .cs_description > .num4 .cs_wrapper, .csslider11 > #cs_pause11_4:checked ~ .cs_description > .num4 .cs_wrapper, .csslider11 > #cs_slide11_5:checked ~ .cs_description > .num5 .cs_wrapper, .csslider11 > #cs_pause11_5:checked ~ .cs_description > .num5 .cs_wrapper, .csslider11 > #cs_slide11_6:checked ~ .cs_description > .num6 .cs_wrapper, .csslider11 > #cs_pause11_6:checked ~ .cs_description > .num6 .cs_wrapper, .csslider11 > #cs_slide11_7:checked ~ .cs_description > .num7 .cs_wrapper, .csslider11 > #cs_pause11_7:checked ~ .cs_description > .num7 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider11 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider11 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider11 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider11 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title11 { 0.51953125%, 11.97046875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.7421875%, 11.7478125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 13.2421875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 13.2521875%, 100% { z-index: 0; } } @keyframes cs_title11 { 0.51953125%, 11.97046875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.7421875%, 11.7478125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 13.2421875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 13.2521875%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr11 { 0.51953125%, 11.97046875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.7421875%, 11.7478125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 13.2421875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 13.2521875%, 100% { z-index: 0; } } @keyframes cs_descr11 { 0.51953125%, 11.97046875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.7421875%, 11.7478125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 13.2421875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 13.2521875%, 100% { z-index: 0; } } .csslider11 > #cs_play11:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title11 64000ms infinite -1400ms ease; animation: cs_title11 64000ms infinite -1400ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title11 64000ms infinite 6600ms ease; animation: cs_title11 64000ms infinite 6600ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title11 64000ms infinite 14600ms ease; animation: cs_title11 64000ms infinite 14600ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num3 > .cs_title { -webkit-animation: cs_title11 64000ms infinite 22600ms ease; animation: cs_title11 64000ms infinite 22600ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num4 > .cs_title { -webkit-animation: cs_title11 64000ms infinite 30600ms ease; animation: cs_title11 64000ms infinite 30600ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num5 > .cs_title { -webkit-animation: cs_title11 64000ms infinite 38600ms ease; animation: cs_title11 64000ms infinite 38600ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num6 > .cs_title { -webkit-animation: cs_title11 64000ms infinite 46600ms ease; animation: cs_title11 64000ms infinite 46600ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num7 > .cs_title { -webkit-animation: cs_title11 64000ms infinite 54600ms ease; animation: cs_title11 64000ms infinite 54600ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr11 64000ms infinite -1150ms ease; animation: cs_descr11 64000ms infinite -1150ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr11 64000ms infinite 6850ms ease; animation: cs_descr11 64000ms infinite 6850ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr11 64000ms infinite 14850ms ease; animation: cs_descr11 64000ms infinite 14850ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num3 > .cs_descr { -webkit-animation: cs_descr11 64000ms infinite 22850ms ease; animation: cs_descr11 64000ms infinite 22850ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num4 > .cs_descr { -webkit-animation: cs_descr11 64000ms infinite 30850ms ease; animation: cs_descr11 64000ms infinite 30850ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num5 > .cs_descr { -webkit-animation: cs_descr11 64000ms infinite 38850ms ease; animation: cs_descr11 64000ms infinite 38850ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num6 > .cs_descr { -webkit-animation: cs_descr11 64000ms infinite 46850ms ease; animation: cs_descr11 64000ms infinite 46850ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num7 > .cs_descr { -webkit-animation: cs_descr11 64000ms infinite 54850ms ease; animation: cs_descr11 64000ms infinite 54850ms ease; } @-webkit-keyframes cs_title_text11 { 0.51953125%, 11.97046875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.7421875%, 11.7478125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 13.2421875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text11 { 0.51953125%, 11.97046875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.7421875%, 11.7478125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 13.2421875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text11 { 0.51953125%, 11.97046875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.7421875%, 11.7478125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 13.2421875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text11 { 0.51953125%, 11.97046875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.7421875%, 11.7478125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 13.2421875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider11 > #cs_play11:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text11 64000ms infinite -1250ms ease; animation: cs_title_text11 64000ms infinite -1250ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text11 64000ms infinite 6750ms ease; animation: cs_title_text11 64000ms infinite 6750ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text11 64000ms infinite 14750ms ease; animation: cs_title_text11 64000ms infinite 14750ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num3 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text11 64000ms infinite 22750ms ease; animation: cs_title_text11 64000ms infinite 22750ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num4 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text11 64000ms infinite 30750ms ease; animation: cs_title_text11 64000ms infinite 30750ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num5 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text11 64000ms infinite 38750ms ease; animation: cs_title_text11 64000ms infinite 38750ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num6 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text11 64000ms infinite 46750ms ease; animation: cs_title_text11 64000ms infinite 46750ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num7 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text11 64000ms infinite 54750ms ease; animation: cs_title_text11 64000ms infinite 54750ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text11 64000ms infinite -1000ms ease; animation: cs_descr_text11 64000ms infinite -1000ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text11 64000ms infinite 7000ms ease; animation: cs_descr_text11 64000ms infinite 7000ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text11 64000ms infinite 15000ms ease; animation: cs_descr_text11 64000ms infinite 15000ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num3 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text11 64000ms infinite 23000ms ease; animation: cs_descr_text11 64000ms infinite 23000ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num4 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text11 64000ms infinite 31000ms ease; animation: cs_descr_text11 64000ms infinite 31000ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num5 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text11 64000ms infinite 39000ms ease; animation: cs_descr_text11 64000ms infinite 39000ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num6 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text11 64000ms infinite 47000ms ease; animation: cs_descr_text11 64000ms infinite 47000ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > .num7 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text11 64000ms infinite 55000ms ease; animation: cs_descr_text11 64000ms infinite 55000ms ease; } .csslider11 > #cs_play11:checked ~ .cs_description > label > .cs_title, .csslider11 > #cs_play11:checked ~ .cs_description > label > .cs_descr, .csslider11 > #cs_play11:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider11 > #cs_play11:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider11 > .pause:checked ~ .cs_description > label > .cs_title, .csslider11 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider11 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider11 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider11 > .cs_description, .csslider11 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider12 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider12, .csslider12 *, .csslider12 *:after, .csslider12 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider12 > .cs_anchor { display: none; } .csslider12 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider12 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider12 > ul > .slide.img img { width: 100%; } .csslider12 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider12 > 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); } .csslider12 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider12 > ul > li.img, .csslider12 > .cs_arrowprev, .csslider12 > .cs_arrownext, .csslider12 > .cs_bullets, .csslider12 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider12 > .cs_arrowprev, .csslider12 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider12 > .cs_arrowprev > label, .csslider12 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider12 > .cs_arrowprev { left: 0; } .csslider12 > .cs_arrownext { right: 0; } .csslider12 > .slide:checked ~ .cs_arrowprev > label, .csslider12 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider12 > #cs_slide12_0:checked ~ .cs_arrowprev > label.num3, .csslider12 > #cs_pause12_0:checked ~ .cs_arrowprev > label.num3, .csslider12 > #cs_slide12_0:checked ~ .cs_arrownext > label.num1, .csslider12 > #cs_pause12_0:checked ~ .cs_arrownext > label.num1, .csslider12 > #cs_slide12_1:checked ~ .cs_arrowprev > label.num0, .csslider12 > #cs_pause12_1:checked ~ .cs_arrowprev > label.num0, .csslider12 > #cs_slide12_1:checked ~ .cs_arrownext > label.num2, .csslider12 > #cs_pause12_1:checked ~ .cs_arrownext > label.num2, .csslider12 > #cs_slide12_2:checked ~ .cs_arrowprev > label.num1, .csslider12 > #cs_pause12_2:checked ~ .cs_arrowprev > label.num1, .csslider12 > #cs_slide12_2:checked ~ .cs_arrownext > label.num3, .csslider12 > #cs_pause12_2:checked ~ .cs_arrownext > label.num3, .csslider12 > #cs_slide12_3:checked ~ .cs_arrowprev > label.num2, .csslider12 > #cs_pause12_3:checked ~ .cs_arrowprev > label.num2, .csslider12 > #cs_slide12_3:checked ~ .cs_arrownext > label.num0, .csslider12 > #cs_pause12_3:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow12 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow12 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } .csslider12 > #cs_play12:checked ~ .cs_arrowprev > label.num3, .csslider12 > #cs_play12:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow12 32000ms infinite -2000ms; animation: arrow12 32000ms infinite -2000ms; } .csslider12 > #cs_play12:checked ~ .cs_arrowprev > label.num0, .csslider12 > #cs_play12:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow12 32000ms infinite 6000ms; animation: arrow12 32000ms infinite 6000ms; } .csslider12 > #cs_play12:checked ~ .cs_arrowprev > label.num1, .csslider12 > #cs_play12:checked ~ .cs_arrownext > label.num3 { -webkit-animation: arrow12 32000ms infinite 14000ms; animation: arrow12 32000ms infinite 14000ms; } .csslider12 > #cs_play12:checked ~ .cs_arrowprev > label.num2, .csslider12 > #cs_play12:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow12 32000ms infinite 22000ms; animation: arrow12 32000ms infinite 22000ms; } .csslider12 > .slide:checked ~ .cs_arrowprev > label, .csslider12 > .slide:checked ~ .cs_arrownext > label, .csslider12 > .pause:checked ~ .cs_arrowprev > label, .csslider12 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider12 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider12 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider12 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider12 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider12 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider12 > .cs_description { z-index: 3; } .csslider12 > .cs_description a, .csslider12 > .cs_description a:visited, .csslider12 > .cs_description a:active { color: inherit; } .csslider12 > .cs_description a:hover { text-decoration: none; } .csslider12 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider12 > .cs_description > label > span { vertical-align: top; } .csslider12 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider12 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider12 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider12 > #cs_play12:checked ~ .cs_play_pause > .cs_pause, .csslider12 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider12 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider12 > #cs_play12:checked ~ .cs_play_pause > .cs_play, .csslider12 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider12 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange12 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange12 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } .csslider12 > #cs_play12:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange12 32000ms infinite -2000ms; animation: pauseChange12 32000ms infinite -2000ms; } .csslider12 > #cs_play12:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange12 32000ms infinite 6000ms; animation: pauseChange12 32000ms infinite 6000ms; } .csslider12 > #cs_play12:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange12 32000ms infinite 14000ms; animation: pauseChange12 32000ms infinite 14000ms; } .csslider12 > #cs_play12:checked ~ .cs_play_pause > .cs_pause.num3 { opacity: 0; z-index: -1; -webkit-animation: pauseChange12 32000ms infinite 22000ms; animation: pauseChange12 32000ms infinite 22000ms; } .csslider12 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider12 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider12 > ul > .slide.num0 { left: 0%; } .csslider12 > ul > .slide.num1 { left: 100%; } .csslider12 > ul > .slide.num2 { left: 200%; } .csslider12 > ul > .slide.num3 { left: 300%; } .csslider12 > #cs_slide12_0:checked ~ ul > .slide, .csslider12 > #cs_pause12_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider12 > #cs_slide12_1:checked ~ ul > .slide, .csslider12 > #cs_pause12_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider12 > #cs_slide12_2:checked ~ ul > .slide, .csslider12 > #cs_pause12_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider12 > #cs_slide12_3:checked ~ ul > .slide, .csslider12 > #cs_pause12_3:checked ~ ul > .slide { -webkit-transform: translateX(-300%); transform: translateX(-300%); } .csslider12 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide12 { 0%, 18.75% { -webkit-transform: translateX(0%); transform: translateX(0%); } 25%, 43.75% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 50%, 68.75% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 75%, 93.75% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } } @keyframes slide12 { 0%, 18.75% { -webkit-transform: translateX(0%); transform: translateX(0%); } 25%, 43.75% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 50%, 68.75% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 75%, 93.75% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } } @-webkit-keyframes slide12-ie { 0%, 18.75% { margin-left: 0%; } 25%, 43.75% { margin-left: -100%; } 50%, 68.75% { margin-left: -200%; } 75%, 93.75% { margin-left: -300%; } } @keyframes slide12-ie { 0%, 18.75% { margin-left: 0%; } 25%, 43.75% { margin-left: -100%; } 50%, 68.75% { margin-left: -200%; } 75%, 93.75% { margin-left: -300%; } } .csslider12 > #cs_play12:checked ~ ul > .slide { -webkit-animation: slide12 32000ms infinite; animation: slide12 32000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider12 > #cs_play12:checked ~ ul > .slide { animation: slide12-ie 32000ms infinite; } } .csslider12 > #cs_play12:checked ~ ul > .slide, .csslider12 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider12 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider12 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider12 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider12 > .cs_arrowprev, .csslider12 > .cs_arrownext, .csslider12 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider12:hover > .cs_arrowprev, .csslider12:hover > .cs_arrownext, .csslider12:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider12 > .cs_arrowprev > label, .csslider12 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider12 > .cs_arrowprev > label, .csslider12 > .cs_arrownext > label, .csslider12 > .cs_arrowprev > label span:after, .csslider12 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider12 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider12 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider12 > .cs_arrowprev > label span, .csslider12 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider12 > .cs_arrowprev > label span:after, .csslider12 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider12 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider12 > .cs_arrownext > label span:after { line-height: 29px; } .csslider12 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider12 > .cs_arrownext > label span:after { content: '\e801'; } .csslider12 > .cs_arrowprev:hover > label, .csslider12 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider12 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow12 .7s infinite ease-in-out; animation: nextArrow12 .7s infinite ease-in-out; } .csslider12 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow12 .7s infinite ease-in-out; animation: prevArrow12 .7s infinite ease-in-out; } @keyframes nextArrow12 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow12 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow12 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow12 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider12 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider12 > .cs_play_pause > label, .csslider12 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider12 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider12 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider12 > .cs_play_pause > label span:after { line-height: 28px; } .csslider12 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider12 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider12 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider12 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause12 .7s infinite ease-in-out; animation: playPause12 .7s infinite ease-in-out; } @-webkit-keyframes playPause12 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause12 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider12 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider12 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider12 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider12 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider12 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider12 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider12 > .cs_bullets > label:hover > .cs_point, .csslider12 > #cs_slide12_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider12 > #cs_pause12_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider12 > #cs_slide12_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider12 > #cs_pause12_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider12 > #cs_slide12_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider12 > #cs_pause12_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider12 > #cs_slide12_3:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider12 > #cs_pause12_3:checked ~ .cs_bullets > label.num3 > .cs_point { background: #3A4A5A; } @keyframes bullet12 { 0%, 24.99% { background: #3A4A5A; } 25%, 100% { background: transparent; } } @-webkit-keyframes bullet12 { 0%, 24.99% { background: #3A4A5A; } 25%, 100% { background: transparent; } } .csslider12 > #cs_play12:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider12 > #cs_pause12:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet12 32000ms infinite -2000ms; animation: bullet12 32000ms infinite -2000ms; } .csslider12 > #cs_play12:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider12 > #cs_pause12:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet12 32000ms infinite 6000ms; animation: bullet12 32000ms infinite 6000ms; } .csslider12 > #cs_play12:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider12 > #cs_pause12:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet12 32000ms infinite 14000ms; animation: bullet12 32000ms infinite 14000ms; } .csslider12 > #cs_play12:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider12 > #cs_pause12:checked ~ .cs_bullets > label.num3 > .cs_point { -webkit-animation: bullet12 32000ms infinite 22000ms; animation: bullet12 32000ms infinite 22000ms; } .csslider12 > #cs_play12:checked ~ .cs_bullets > label > .cs_point, .csslider12 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider12 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider12 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider12 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider12 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider12 > #cs_slide12_0:checked ~ .cs_description > .num0 > .cs_title, .csslider12 > #cs_slide12_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider12 > #cs_pause12_0:checked ~ .cs_description > .num0 > .cs_title, .csslider12 > #cs_pause12_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider12 > #cs_slide12_1:checked ~ .cs_description > .num1 > .cs_title, .csslider12 > #cs_slide12_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider12 > #cs_pause12_1:checked ~ .cs_description > .num1 > .cs_title, .csslider12 > #cs_pause12_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider12 > #cs_slide12_2:checked ~ .cs_description > .num2 > .cs_title, .csslider12 > #cs_slide12_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider12 > #cs_pause12_2:checked ~ .cs_description > .num2 > .cs_title, .csslider12 > #cs_pause12_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider12 > #cs_slide12_3:checked ~ .cs_description > .num3 > .cs_title, .csslider12 > #cs_slide12_3:checked ~ .cs_description > .num3 > .cs_descr, .csslider12 > #cs_pause12_3:checked ~ .cs_description > .num3 > .cs_title, .csslider12 > #cs_pause12_3:checked ~ .cs_description > .num3 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider12 > #cs_slide12_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider12 > #cs_pause12_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider12 > #cs_slide12_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider12 > #cs_pause12_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider12 > #cs_slide12_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider12 > #cs_pause12_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider12 > #cs_slide12_3:checked ~ .cs_description > .num3 .cs_wrapper, .csslider12 > #cs_pause12_3:checked ~ .cs_description > .num3 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider12 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider12 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider12 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider12 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title12 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 26.494375%, 100% { z-index: 0; } } @keyframes cs_title12 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 26.494375%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr12 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 26.494375%, 100% { z-index: 0; } } @keyframes cs_descr12 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 26.494375%, 100% { z-index: 0; } } .csslider12 > #cs_play12:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title12 32000ms infinite -1400ms ease; animation: cs_title12 32000ms infinite -1400ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title12 32000ms infinite 6600ms ease; animation: cs_title12 32000ms infinite 6600ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title12 32000ms infinite 14600ms ease; animation: cs_title12 32000ms infinite 14600ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num3 > .cs_title { -webkit-animation: cs_title12 32000ms infinite 22600ms ease; animation: cs_title12 32000ms infinite 22600ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr12 32000ms infinite -1150ms ease; animation: cs_descr12 32000ms infinite -1150ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr12 32000ms infinite 6850ms ease; animation: cs_descr12 32000ms infinite 6850ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr12 32000ms infinite 14850ms ease; animation: cs_descr12 32000ms infinite 14850ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num3 > .cs_descr { -webkit-animation: cs_descr12 32000ms infinite 22850ms ease; animation: cs_descr12 32000ms infinite 22850ms ease; } @-webkit-keyframes cs_title_text12 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text12 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text12 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text12 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider12 > #cs_play12:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text12 32000ms infinite -1250ms ease; animation: cs_title_text12 32000ms infinite -1250ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text12 32000ms infinite 6750ms ease; animation: cs_title_text12 32000ms infinite 6750ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text12 32000ms infinite 14750ms ease; animation: cs_title_text12 32000ms infinite 14750ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num3 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text12 32000ms infinite 22750ms ease; animation: cs_title_text12 32000ms infinite 22750ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text12 32000ms infinite -1000ms ease; animation: cs_descr_text12 32000ms infinite -1000ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text12 32000ms infinite 7000ms ease; animation: cs_descr_text12 32000ms infinite 7000ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text12 32000ms infinite 15000ms ease; animation: cs_descr_text12 32000ms infinite 15000ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > .num3 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text12 32000ms infinite 23000ms ease; animation: cs_descr_text12 32000ms infinite 23000ms ease; } .csslider12 > #cs_play12:checked ~ .cs_description > label > .cs_title, .csslider12 > #cs_play12:checked ~ .cs_description > label > .cs_descr, .csslider12 > #cs_play12:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider12 > #cs_play12:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider12 > .pause:checked ~ .cs_description > label > .cs_title, .csslider12 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider12 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider12 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider12 > .cs_description, .csslider12 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider13 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider13, .csslider13 *, .csslider13 *:after, .csslider13 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider13 > .cs_anchor { display: none; } .csslider13 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider13 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider13 > ul > .slide.img img { width: 100%; } .csslider13 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider13 > 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); } .csslider13 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider13 > ul > li.img, .csslider13 > .cs_arrowprev, .csslider13 > .cs_arrownext, .csslider13 > .cs_bullets, .csslider13 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider13 > .cs_arrowprev, .csslider13 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider13 > .cs_arrowprev > label, .csslider13 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider13 > .cs_arrowprev { left: 0; } .csslider13 > .cs_arrownext { right: 0; } .csslider13 > .slide:checked ~ .cs_arrowprev > label, .csslider13 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider13 > #cs_slide13_0:checked ~ .cs_arrowprev > label.num0, .csslider13 > #cs_pause13_0:checked ~ .cs_arrowprev > label.num0, .csslider13 > #cs_slide13_0:checked ~ .cs_arrownext > label.num0, .csslider13 > #cs_pause13_0:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow13 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow13 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider13 > #cs_play13:checked ~ .cs_arrowprev > label.num0, .csslider13 > #cs_play13:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow13 8000ms infinite -2000ms; animation: arrow13 8000ms infinite -2000ms; } .csslider13 > .slide:checked ~ .cs_arrowprev > label, .csslider13 > .slide:checked ~ .cs_arrownext > label, .csslider13 > .pause:checked ~ .cs_arrowprev > label, .csslider13 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider13 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider13 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider13 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider13 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider13 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider13 > .cs_description { z-index: 3; } .csslider13 > .cs_description a, .csslider13 > .cs_description a:visited, .csslider13 > .cs_description a:active { color: inherit; } .csslider13 > .cs_description a:hover { text-decoration: none; } .csslider13 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider13 > .cs_description > label > span { vertical-align: top; } .csslider13 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider13 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider13 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider13 > #cs_play13:checked ~ .cs_play_pause > .cs_pause, .csslider13 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider13 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider13 > #cs_play13:checked ~ .cs_play_pause > .cs_play, .csslider13 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider13 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange13 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange13 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider13 > #cs_play13:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange13 8000ms infinite -2000ms; animation: pauseChange13 8000ms infinite -2000ms; } .csslider13 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider13 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider13 > ul > .slide.num0 { left: 0%; } .csslider13 > #cs_slide13_0:checked ~ ul > .slide, .csslider13 > #cs_pause13_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider13 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide13 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slide13 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slide13-ie { 0%, 75% { margin-left: 0%; } } @keyframes slide13-ie { 0%, 75% { margin-left: 0%; } } .csslider13 > #cs_play13:checked ~ ul > .slide { -webkit-animation: slide13 8000ms infinite; animation: slide13 8000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider13 > #cs_play13:checked ~ ul > .slide { animation: slide13-ie 8000ms infinite; } } .csslider13 > #cs_play13:checked ~ ul > .slide, .csslider13 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider13 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider13 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider13 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider13 > .cs_arrowprev, .csslider13 > .cs_arrownext, .csslider13 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider13:hover > .cs_arrowprev, .csslider13:hover > .cs_arrownext, .csslider13:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider13 > .cs_arrowprev > label, .csslider13 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider13 > .cs_arrowprev > label, .csslider13 > .cs_arrownext > label, .csslider13 > .cs_arrowprev > label span:after, .csslider13 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider13 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider13 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider13 > .cs_arrowprev > label span, .csslider13 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider13 > .cs_arrowprev > label span:after, .csslider13 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider13 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider13 > .cs_arrownext > label span:after { line-height: 29px; } .csslider13 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider13 > .cs_arrownext > label span:after { content: '\e801'; } .csslider13 > .cs_arrowprev:hover > label, .csslider13 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider13 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow13 .7s infinite ease-in-out; animation: nextArrow13 .7s infinite ease-in-out; } .csslider13 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow13 .7s infinite ease-in-out; animation: prevArrow13 .7s infinite ease-in-out; } @keyframes nextArrow13 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow13 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow13 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow13 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider13 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider13 > .cs_play_pause > label, .csslider13 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider13 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider13 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider13 > .cs_play_pause > label span:after { line-height: 28px; } .csslider13 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider13 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider13 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider13 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause13 .7s infinite ease-in-out; animation: playPause13 .7s infinite ease-in-out; } @-webkit-keyframes playPause13 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause13 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider13 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider13 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider13 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider13 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider13 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider13 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider13 > .cs_bullets > label:hover > .cs_point, .csslider13 > #cs_slide13_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider13 > #cs_pause13_0:checked ~ .cs_bullets > label.num0 > .cs_point { background: #3A4A5A; } @keyframes bullet13 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } @-webkit-keyframes bullet13 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } .csslider13 > #cs_play13:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider13 > #cs_pause13:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet13 8000ms infinite -2000ms; animation: bullet13 8000ms infinite -2000ms; } .csslider13 > #cs_play13:checked ~ .cs_bullets > label > .cs_point, .csslider13 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider13 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider13 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider13 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider13 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider13 > #cs_slide13_0:checked ~ .cs_description > .num0 > .cs_title, .csslider13 > #cs_slide13_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider13 > #cs_pause13_0:checked ~ .cs_description > .num0 > .cs_title, .csslider13 > #cs_pause13_0:checked ~ .cs_description > .num0 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider13 > #cs_slide13_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider13 > #cs_pause13_0:checked ~ .cs_description > .num0 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider13 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider13 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider13 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider13 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title13 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_title13 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr13 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_descr13 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } .csslider13 > #cs_play13:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title13 8000ms infinite -1400ms ease; animation: cs_title13 8000ms infinite -1400ms ease; } .csslider13 > #cs_play13:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr13 8000ms infinite -1150ms ease; animation: cs_descr13 8000ms infinite -1150ms ease; } @-webkit-keyframes cs_title_text13 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text13 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text13 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text13 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider13 > #cs_play13:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text13 8000ms infinite -1250ms ease; animation: cs_title_text13 8000ms infinite -1250ms ease; } .csslider13 > #cs_play13:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text13 8000ms infinite -1000ms ease; animation: cs_descr_text13 8000ms infinite -1000ms ease; } .csslider13 > #cs_play13:checked ~ .cs_description > label > .cs_title, .csslider13 > #cs_play13:checked ~ .cs_description > label > .cs_descr, .csslider13 > #cs_play13:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider13 > #cs_play13:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider13 > .pause:checked ~ .cs_description > label > .cs_title, .csslider13 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider13 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider13 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider13 > .cs_description, .csslider13 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider14 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider14, .csslider14 *, .csslider14 *:after, .csslider14 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider14 > .cs_anchor { display: none; } .csslider14 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider14 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider14 > ul > .slide.img img { width: 100%; } .csslider14 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider14 > 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); } .csslider14 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider14 > ul > li.img, .csslider14 > .cs_arrowprev, .csslider14 > .cs_arrownext, .csslider14 > .cs_bullets, .csslider14 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider14 > .cs_arrowprev, .csslider14 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider14 > .cs_arrowprev > label, .csslider14 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider14 > .cs_arrowprev { left: 0; } .csslider14 > .cs_arrownext { right: 0; } .csslider14 > .slide:checked ~ .cs_arrowprev > label, .csslider14 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider14 > #cs_slide14_0:checked ~ .cs_arrowprev > label.num2, .csslider14 > #cs_pause14_0:checked ~ .cs_arrowprev > label.num2, .csslider14 > #cs_slide14_0:checked ~ .cs_arrownext > label.num1, .csslider14 > #cs_pause14_0:checked ~ .cs_arrownext > label.num1, .csslider14 > #cs_slide14_1:checked ~ .cs_arrowprev > label.num0, .csslider14 > #cs_pause14_1:checked ~ .cs_arrowprev > label.num0, .csslider14 > #cs_slide14_1:checked ~ .cs_arrownext > label.num2, .csslider14 > #cs_pause14_1:checked ~ .cs_arrownext > label.num2, .csslider14 > #cs_slide14_2:checked ~ .cs_arrowprev > label.num1, .csslider14 > #cs_pause14_2:checked ~ .cs_arrowprev > label.num1, .csslider14 > #cs_slide14_2:checked ~ .cs_arrownext > label.num0, .csslider14 > #cs_pause14_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow14 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow14 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider14 > #cs_play14:checked ~ .cs_arrowprev > label.num2, .csslider14 > #cs_play14:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow14 24000ms infinite -2000ms; animation: arrow14 24000ms infinite -2000ms; } .csslider14 > #cs_play14:checked ~ .cs_arrowprev > label.num0, .csslider14 > #cs_play14:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow14 24000ms infinite 6000ms; animation: arrow14 24000ms infinite 6000ms; } .csslider14 > #cs_play14:checked ~ .cs_arrowprev > label.num1, .csslider14 > #cs_play14:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow14 24000ms infinite 14000ms; animation: arrow14 24000ms infinite 14000ms; } .csslider14 > .slide:checked ~ .cs_arrowprev > label, .csslider14 > .slide:checked ~ .cs_arrownext > label, .csslider14 > .pause:checked ~ .cs_arrowprev > label, .csslider14 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider14 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider14 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider14 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider14 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider14 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider14 > .cs_description { z-index: 3; } .csslider14 > .cs_description a, .csslider14 > .cs_description a:visited, .csslider14 > .cs_description a:active { color: inherit; } .csslider14 > .cs_description a:hover { text-decoration: none; } .csslider14 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider14 > .cs_description > label > span { vertical-align: top; } .csslider14 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider14 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider14 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider14 > #cs_play14:checked ~ .cs_play_pause > .cs_pause, .csslider14 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider14 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider14 > #cs_play14:checked ~ .cs_play_pause > .cs_play, .csslider14 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider14 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange14 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange14 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider14 > #cs_play14:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange14 24000ms infinite -2000ms; animation: pauseChange14 24000ms infinite -2000ms; } .csslider14 > #cs_play14:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange14 24000ms infinite 6000ms; animation: pauseChange14 24000ms infinite 6000ms; } .csslider14 > #cs_play14:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange14 24000ms infinite 14000ms; animation: pauseChange14 24000ms infinite 14000ms; } .csslider14 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider14 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider14 > ul > .slide.num0 { left: 0%; } .csslider14 > ul > .slide.num1 { left: 100%; } .csslider14 > ul > .slide.num2 { left: 200%; } .csslider14 > #cs_slide14_0:checked ~ ul > .slide, .csslider14 > #cs_pause14_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider14 > #cs_slide14_1:checked ~ ul > .slide, .csslider14 > #cs_pause14_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider14 > #cs_slide14_2:checked ~ ul > .slide, .csslider14 > #cs_pause14_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider14 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide14 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes slide14 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes slide14-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } @keyframes slide14-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } .csslider14 > #cs_play14:checked ~ ul > .slide { -webkit-animation: slide14 24000ms infinite; animation: slide14 24000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider14 > #cs_play14:checked ~ ul > .slide { animation: slide14-ie 24000ms infinite; } } .csslider14 > #cs_play14:checked ~ ul > .slide, .csslider14 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider14 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider14 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider14 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider14 > .cs_arrowprev, .csslider14 > .cs_arrownext, .csslider14 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider14:hover > .cs_arrowprev, .csslider14:hover > .cs_arrownext, .csslider14:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider14 > .cs_arrowprev > label, .csslider14 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider14 > .cs_arrowprev > label, .csslider14 > .cs_arrownext > label, .csslider14 > .cs_arrowprev > label span:after, .csslider14 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider14 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider14 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider14 > .cs_arrowprev > label span, .csslider14 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider14 > .cs_arrowprev > label span:after, .csslider14 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider14 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider14 > .cs_arrownext > label span:after { line-height: 29px; } .csslider14 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider14 > .cs_arrownext > label span:after { content: '\e801'; } .csslider14 > .cs_arrowprev:hover > label, .csslider14 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider14 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow14 .7s infinite ease-in-out; animation: nextArrow14 .7s infinite ease-in-out; } .csslider14 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow14 .7s infinite ease-in-out; animation: prevArrow14 .7s infinite ease-in-out; } @keyframes nextArrow14 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow14 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow14 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow14 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider14 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider14 > .cs_play_pause > label, .csslider14 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider14 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider14 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider14 > .cs_play_pause > label span:after { line-height: 28px; } .csslider14 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider14 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider14 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider14 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause14 .7s infinite ease-in-out; animation: playPause14 .7s infinite ease-in-out; } @-webkit-keyframes playPause14 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause14 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider14 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider14 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider14 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider14 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider14 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider14 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider14 > .cs_bullets > label:hover > .cs_point, .csslider14 > #cs_slide14_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider14 > #cs_pause14_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider14 > #cs_slide14_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider14 > #cs_pause14_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider14 > #cs_slide14_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider14 > #cs_pause14_2:checked ~ .cs_bullets > label.num2 > .cs_point { background: #3A4A5A; } @keyframes bullet14 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-webkit-keyframes bullet14 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } .csslider14 > #cs_play14:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider14 > #cs_pause14:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet14 24000ms infinite -2000ms; animation: bullet14 24000ms infinite -2000ms; } .csslider14 > #cs_play14:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider14 > #cs_pause14:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet14 24000ms infinite 6000ms; animation: bullet14 24000ms infinite 6000ms; } .csslider14 > #cs_play14:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider14 > #cs_pause14:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet14 24000ms infinite 14000ms; animation: bullet14 24000ms infinite 14000ms; } .csslider14 > #cs_play14:checked ~ .cs_bullets > label > .cs_point, .csslider14 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider14 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider14 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider14 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider14 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider14 > #cs_slide14_0:checked ~ .cs_description > .num0 > .cs_title, .csslider14 > #cs_slide14_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider14 > #cs_pause14_0:checked ~ .cs_description > .num0 > .cs_title, .csslider14 > #cs_pause14_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider14 > #cs_slide14_1:checked ~ .cs_description > .num1 > .cs_title, .csslider14 > #cs_slide14_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider14 > #cs_pause14_1:checked ~ .cs_description > .num1 > .cs_title, .csslider14 > #cs_pause14_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider14 > #cs_slide14_2:checked ~ .cs_description > .num2 > .cs_title, .csslider14 > #cs_slide14_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider14 > #cs_pause14_2:checked ~ .cs_description > .num2 > .cs_title, .csslider14 > #cs_pause14_2:checked ~ .cs_description > .num2 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider14 > #cs_slide14_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider14 > #cs_pause14_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider14 > #cs_slide14_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider14 > #cs_pause14_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider14 > #cs_slide14_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider14 > #cs_pause14_2:checked ~ .cs_description > .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider14 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider14 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider14 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider14 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title14 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_title14 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr14 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_descr14 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } .csslider14 > #cs_play14:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title14 24000ms infinite -1400ms ease; animation: cs_title14 24000ms infinite -1400ms ease; } .csslider14 > #cs_play14:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title14 24000ms infinite 6600ms ease; animation: cs_title14 24000ms infinite 6600ms ease; } .csslider14 > #cs_play14:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title14 24000ms infinite 14600ms ease; animation: cs_title14 24000ms infinite 14600ms ease; } .csslider14 > #cs_play14:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr14 24000ms infinite -1150ms ease; animation: cs_descr14 24000ms infinite -1150ms ease; } .csslider14 > #cs_play14:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr14 24000ms infinite 6850ms ease; animation: cs_descr14 24000ms infinite 6850ms ease; } .csslider14 > #cs_play14:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr14 24000ms infinite 14850ms ease; animation: cs_descr14 24000ms infinite 14850ms ease; } @-webkit-keyframes cs_title_text14 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text14 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text14 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text14 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider14 > #cs_play14:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text14 24000ms infinite -1250ms ease; animation: cs_title_text14 24000ms infinite -1250ms ease; } .csslider14 > #cs_play14:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text14 24000ms infinite 6750ms ease; animation: cs_title_text14 24000ms infinite 6750ms ease; } .csslider14 > #cs_play14:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text14 24000ms infinite 14750ms ease; animation: cs_title_text14 24000ms infinite 14750ms ease; } .csslider14 > #cs_play14:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text14 24000ms infinite -1000ms ease; animation: cs_descr_text14 24000ms infinite -1000ms ease; } .csslider14 > #cs_play14:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text14 24000ms infinite 7000ms ease; animation: cs_descr_text14 24000ms infinite 7000ms ease; } .csslider14 > #cs_play14:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text14 24000ms infinite 15000ms ease; animation: cs_descr_text14 24000ms infinite 15000ms ease; } .csslider14 > #cs_play14:checked ~ .cs_description > label > .cs_title, .csslider14 > #cs_play14:checked ~ .cs_description > label > .cs_descr, .csslider14 > #cs_play14:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider14 > #cs_play14:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider14 > .pause:checked ~ .cs_description > label > .cs_title, .csslider14 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider14 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider14 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider14 > .cs_description, .csslider14 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider15 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider15, .csslider15 *, .csslider15 *:after, .csslider15 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider15 > .cs_anchor { display: none; } .csslider15 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider15 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider15 > ul > .slide.img img { width: 100%; } .csslider15 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider15 > 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); } .csslider15 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider15 > ul > li.img, .csslider15 > .cs_arrowprev, .csslider15 > .cs_arrownext, .csslider15 > .cs_bullets, .csslider15 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider15 > .cs_arrowprev, .csslider15 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider15 > .cs_arrowprev > label, .csslider15 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider15 > .cs_arrowprev { left: 0; } .csslider15 > .cs_arrownext { right: 0; } .csslider15 > .slide:checked ~ .cs_arrowprev > label, .csslider15 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider15 > #cs_slide15_0:checked ~ .cs_arrowprev > label.num1, .csslider15 > #cs_pause15_0:checked ~ .cs_arrowprev > label.num1, .csslider15 > #cs_slide15_0:checked ~ .cs_arrownext > label.num1, .csslider15 > #cs_pause15_0:checked ~ .cs_arrownext > label.num1, .csslider15 > #cs_slide15_1:checked ~ .cs_arrowprev > label.num0, .csslider15 > #cs_pause15_1:checked ~ .cs_arrowprev > label.num0, .csslider15 > #cs_slide15_1:checked ~ .cs_arrownext > label.num0, .csslider15 > #cs_pause15_1:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow15 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow15 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider15 > #cs_play15:checked ~ .cs_arrowprev > label.num1, .csslider15 > #cs_play15:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow15 16000ms infinite -2000ms; animation: arrow15 16000ms infinite -2000ms; } .csslider15 > #cs_play15:checked ~ .cs_arrowprev > label.num0, .csslider15 > #cs_play15:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow15 16000ms infinite 6000ms; animation: arrow15 16000ms infinite 6000ms; } .csslider15 > .slide:checked ~ .cs_arrowprev > label, .csslider15 > .slide:checked ~ .cs_arrownext > label, .csslider15 > .pause:checked ~ .cs_arrowprev > label, .csslider15 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider15 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider15 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider15 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider15 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider15 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider15 > .cs_description { z-index: 3; } .csslider15 > .cs_description a, .csslider15 > .cs_description a:visited, .csslider15 > .cs_description a:active { color: inherit; } .csslider15 > .cs_description a:hover { text-decoration: none; } .csslider15 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider15 > .cs_description > label > span { vertical-align: top; } .csslider15 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider15 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider15 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider15 > #cs_play15:checked ~ .cs_play_pause > .cs_pause, .csslider15 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider15 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider15 > #cs_play15:checked ~ .cs_play_pause > .cs_play, .csslider15 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider15 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange15 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange15 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider15 > #cs_play15:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange15 16000ms infinite -2000ms; animation: pauseChange15 16000ms infinite -2000ms; } .csslider15 > #cs_play15:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange15 16000ms infinite 6000ms; animation: pauseChange15 16000ms infinite 6000ms; } .csslider15 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider15 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider15 > ul > .slide.num0 { left: 0%; } .csslider15 > ul > .slide.num1 { left: 100%; } .csslider15 > #cs_slide15_0:checked ~ ul > .slide, .csslider15 > #cs_pause15_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider15 > #cs_slide15_1:checked ~ ul > .slide, .csslider15 > #cs_pause15_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider15 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide15 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slide15 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes slide15-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } @keyframes slide15-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } .csslider15 > #cs_play15:checked ~ ul > .slide { -webkit-animation: slide15 16000ms infinite; animation: slide15 16000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider15 > #cs_play15:checked ~ ul > .slide { animation: slide15-ie 16000ms infinite; } } .csslider15 > #cs_play15:checked ~ ul > .slide, .csslider15 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider15 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider15 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider15 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider15 > .cs_arrowprev, .csslider15 > .cs_arrownext, .csslider15 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider15:hover > .cs_arrowprev, .csslider15:hover > .cs_arrownext, .csslider15:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider15 > .cs_arrowprev > label, .csslider15 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider15 > .cs_arrowprev > label, .csslider15 > .cs_arrownext > label, .csslider15 > .cs_arrowprev > label span:after, .csslider15 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider15 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider15 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider15 > .cs_arrowprev > label span, .csslider15 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider15 > .cs_arrowprev > label span:after, .csslider15 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider15 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider15 > .cs_arrownext > label span:after { line-height: 29px; } .csslider15 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider15 > .cs_arrownext > label span:after { content: '\e801'; } .csslider15 > .cs_arrowprev:hover > label, .csslider15 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider15 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow15 .7s infinite ease-in-out; animation: nextArrow15 .7s infinite ease-in-out; } .csslider15 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow15 .7s infinite ease-in-out; animation: prevArrow15 .7s infinite ease-in-out; } @keyframes nextArrow15 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow15 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow15 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow15 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider15 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider15 > .cs_play_pause > label, .csslider15 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider15 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider15 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider15 > .cs_play_pause > label span:after { line-height: 28px; } .csslider15 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider15 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider15 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider15 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause15 .7s infinite ease-in-out; animation: playPause15 .7s infinite ease-in-out; } @-webkit-keyframes playPause15 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause15 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider15 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider15 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider15 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider15 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider15 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider15 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider15 > .cs_bullets > label:hover > .cs_point, .csslider15 > #cs_slide15_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider15 > #cs_pause15_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider15 > #cs_slide15_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider15 > #cs_pause15_1:checked ~ .cs_bullets > label.num1 > .cs_point { background: #3A4A5A; } @keyframes bullet15 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } @-webkit-keyframes bullet15 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } .csslider15 > #cs_play15:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider15 > #cs_pause15:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet15 16000ms infinite -2000ms; animation: bullet15 16000ms infinite -2000ms; } .csslider15 > #cs_play15:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider15 > #cs_pause15:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet15 16000ms infinite 6000ms; animation: bullet15 16000ms infinite 6000ms; } .csslider15 > #cs_play15:checked ~ .cs_bullets > label > .cs_point, .csslider15 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider15 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider15 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider15 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider15 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider15 > #cs_slide15_0:checked ~ .cs_description > .num0 > .cs_title, .csslider15 > #cs_slide15_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider15 > #cs_pause15_0:checked ~ .cs_description > .num0 > .cs_title, .csslider15 > #cs_pause15_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider15 > #cs_slide15_1:checked ~ .cs_description > .num1 > .cs_title, .csslider15 > #cs_slide15_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider15 > #cs_pause15_1:checked ~ .cs_description > .num1 > .cs_title, .csslider15 > #cs_pause15_1:checked ~ .cs_description > .num1 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider15 > #cs_slide15_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider15 > #cs_pause15_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider15 > #cs_slide15_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider15 > #cs_pause15_1:checked ~ .cs_description > .num1 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider15 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider15 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider15 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider15 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title15 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_title15 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr15 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_descr15 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } .csslider15 > #cs_play15:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title15 16000ms infinite -1400ms ease; animation: cs_title15 16000ms infinite -1400ms ease; } .csslider15 > #cs_play15:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title15 16000ms infinite 6600ms ease; animation: cs_title15 16000ms infinite 6600ms ease; } .csslider15 > #cs_play15:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr15 16000ms infinite -1150ms ease; animation: cs_descr15 16000ms infinite -1150ms ease; } .csslider15 > #cs_play15:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr15 16000ms infinite 6850ms ease; animation: cs_descr15 16000ms infinite 6850ms ease; } @-webkit-keyframes cs_title_text15 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text15 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text15 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text15 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider15 > #cs_play15:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text15 16000ms infinite -1250ms ease; animation: cs_title_text15 16000ms infinite -1250ms ease; } .csslider15 > #cs_play15:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text15 16000ms infinite 6750ms ease; animation: cs_title_text15 16000ms infinite 6750ms ease; } .csslider15 > #cs_play15:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text15 16000ms infinite -1000ms ease; animation: cs_descr_text15 16000ms infinite -1000ms ease; } .csslider15 > #cs_play15:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text15 16000ms infinite 7000ms ease; animation: cs_descr_text15 16000ms infinite 7000ms ease; } .csslider15 > #cs_play15:checked ~ .cs_description > label > .cs_title, .csslider15 > #cs_play15:checked ~ .cs_description > label > .cs_descr, .csslider15 > #cs_play15:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider15 > #cs_play15:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider15 > .pause:checked ~ .cs_description > label > .cs_title, .csslider15 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider15 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider15 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider15 > .cs_description, .csslider15 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider16 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider16, .csslider16 *, .csslider16 *:after, .csslider16 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider16 > .cs_anchor { display: none; } .csslider16 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider16 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider16 > ul > .slide.img img { width: 100%; } .csslider16 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider16 > 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); } .csslider16 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider16 > ul > li.img, .csslider16 > .cs_arrowprev, .csslider16 > .cs_arrownext, .csslider16 > .cs_bullets, .csslider16 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider16 > .cs_arrowprev, .csslider16 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider16 > .cs_arrowprev > label, .csslider16 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider16 > .cs_arrowprev { left: 0; } .csslider16 > .cs_arrownext { right: 0; } .csslider16 > .slide:checked ~ .cs_arrowprev > label, .csslider16 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider16 > #cs_slide16_0:checked ~ .cs_arrowprev > label.num1, .csslider16 > #cs_pause16_0:checked ~ .cs_arrowprev > label.num1, .csslider16 > #cs_slide16_0:checked ~ .cs_arrownext > label.num1, .csslider16 > #cs_pause16_0:checked ~ .cs_arrownext > label.num1, .csslider16 > #cs_slide16_1:checked ~ .cs_arrowprev > label.num0, .csslider16 > #cs_pause16_1:checked ~ .cs_arrowprev > label.num0, .csslider16 > #cs_slide16_1:checked ~ .cs_arrownext > label.num0, .csslider16 > #cs_pause16_1:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow16 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow16 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider16 > #cs_play16:checked ~ .cs_arrowprev > label.num1, .csslider16 > #cs_play16:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow16 16000ms infinite -2000ms; animation: arrow16 16000ms infinite -2000ms; } .csslider16 > #cs_play16:checked ~ .cs_arrowprev > label.num0, .csslider16 > #cs_play16:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow16 16000ms infinite 6000ms; animation: arrow16 16000ms infinite 6000ms; } .csslider16 > .slide:checked ~ .cs_arrowprev > label, .csslider16 > .slide:checked ~ .cs_arrownext > label, .csslider16 > .pause:checked ~ .cs_arrowprev > label, .csslider16 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider16 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider16 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider16 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider16 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider16 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider16 > .cs_description { z-index: 3; } .csslider16 > .cs_description a, .csslider16 > .cs_description a:visited, .csslider16 > .cs_description a:active { color: inherit; } .csslider16 > .cs_description a:hover { text-decoration: none; } .csslider16 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider16 > .cs_description > label > span { vertical-align: top; } .csslider16 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider16 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider16 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider16 > #cs_play16:checked ~ .cs_play_pause > .cs_pause, .csslider16 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider16 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider16 > #cs_play16:checked ~ .cs_play_pause > .cs_play, .csslider16 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider16 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange16 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange16 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider16 > #cs_play16:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange16 16000ms infinite -2000ms; animation: pauseChange16 16000ms infinite -2000ms; } .csslider16 > #cs_play16:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange16 16000ms infinite 6000ms; animation: pauseChange16 16000ms infinite 6000ms; } .csslider16 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider16 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider16 > ul > .slide.num0 { left: 0%; } .csslider16 > ul > .slide.num1 { left: 100%; } .csslider16 > #cs_slide16_0:checked ~ ul > .slide, .csslider16 > #cs_pause16_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider16 > #cs_slide16_1:checked ~ ul > .slide, .csslider16 > #cs_pause16_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider16 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide16 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slide16 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes slide16-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } @keyframes slide16-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } .csslider16 > #cs_play16:checked ~ ul > .slide { -webkit-animation: slide16 16000ms infinite; animation: slide16 16000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider16 > #cs_play16:checked ~ ul > .slide { animation: slide16-ie 16000ms infinite; } } .csslider16 > #cs_play16:checked ~ ul > .slide, .csslider16 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider16 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider16 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider16 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider16 > .cs_arrowprev, .csslider16 > .cs_arrownext, .csslider16 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider16:hover > .cs_arrowprev, .csslider16:hover > .cs_arrownext, .csslider16:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider16 > .cs_arrowprev > label, .csslider16 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider16 > .cs_arrowprev > label, .csslider16 > .cs_arrownext > label, .csslider16 > .cs_arrowprev > label span:after, .csslider16 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider16 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider16 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider16 > .cs_arrowprev > label span, .csslider16 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider16 > .cs_arrowprev > label span:after, .csslider16 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider16 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider16 > .cs_arrownext > label span:after { line-height: 29px; } .csslider16 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider16 > .cs_arrownext > label span:after { content: '\e801'; } .csslider16 > .cs_arrowprev:hover > label, .csslider16 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider16 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow16 .7s infinite ease-in-out; animation: nextArrow16 .7s infinite ease-in-out; } .csslider16 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow16 .7s infinite ease-in-out; animation: prevArrow16 .7s infinite ease-in-out; } @keyframes nextArrow16 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow16 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow16 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow16 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider16 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider16 > .cs_play_pause > label, .csslider16 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider16 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider16 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider16 > .cs_play_pause > label span:after { line-height: 28px; } .csslider16 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider16 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider16 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider16 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause16 .7s infinite ease-in-out; animation: playPause16 .7s infinite ease-in-out; } @-webkit-keyframes playPause16 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause16 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider16 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider16 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider16 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider16 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider16 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider16 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider16 > .cs_bullets > label:hover > .cs_point, .csslider16 > #cs_slide16_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider16 > #cs_pause16_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider16 > #cs_slide16_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider16 > #cs_pause16_1:checked ~ .cs_bullets > label.num1 > .cs_point { background: #3A4A5A; } @keyframes bullet16 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } @-webkit-keyframes bullet16 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } .csslider16 > #cs_play16:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider16 > #cs_pause16:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet16 16000ms infinite -2000ms; animation: bullet16 16000ms infinite -2000ms; } .csslider16 > #cs_play16:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider16 > #cs_pause16:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet16 16000ms infinite 6000ms; animation: bullet16 16000ms infinite 6000ms; } .csslider16 > #cs_play16:checked ~ .cs_bullets > label > .cs_point, .csslider16 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider16 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider16 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider16 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider16 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider16 > #cs_slide16_0:checked ~ .cs_description > .num0 > .cs_title, .csslider16 > #cs_slide16_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider16 > #cs_pause16_0:checked ~ .cs_description > .num0 > .cs_title, .csslider16 > #cs_pause16_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider16 > #cs_slide16_1:checked ~ .cs_description > .num1 > .cs_title, .csslider16 > #cs_slide16_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider16 > #cs_pause16_1:checked ~ .cs_description > .num1 > .cs_title, .csslider16 > #cs_pause16_1:checked ~ .cs_description > .num1 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider16 > #cs_slide16_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider16 > #cs_pause16_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider16 > #cs_slide16_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider16 > #cs_pause16_1:checked ~ .cs_description > .num1 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider16 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider16 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider16 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider16 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title16 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_title16 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr16 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_descr16 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } .csslider16 > #cs_play16:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title16 16000ms infinite -1400ms ease; animation: cs_title16 16000ms infinite -1400ms ease; } .csslider16 > #cs_play16:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title16 16000ms infinite 6600ms ease; animation: cs_title16 16000ms infinite 6600ms ease; } .csslider16 > #cs_play16:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr16 16000ms infinite -1150ms ease; animation: cs_descr16 16000ms infinite -1150ms ease; } .csslider16 > #cs_play16:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr16 16000ms infinite 6850ms ease; animation: cs_descr16 16000ms infinite 6850ms ease; } @-webkit-keyframes cs_title_text16 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text16 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text16 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text16 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider16 > #cs_play16:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text16 16000ms infinite -1250ms ease; animation: cs_title_text16 16000ms infinite -1250ms ease; } .csslider16 > #cs_play16:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text16 16000ms infinite 6750ms ease; animation: cs_title_text16 16000ms infinite 6750ms ease; } .csslider16 > #cs_play16:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text16 16000ms infinite -1000ms ease; animation: cs_descr_text16 16000ms infinite -1000ms ease; } .csslider16 > #cs_play16:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text16 16000ms infinite 7000ms ease; animation: cs_descr_text16 16000ms infinite 7000ms ease; } .csslider16 > #cs_play16:checked ~ .cs_description > label > .cs_title, .csslider16 > #cs_play16:checked ~ .cs_description > label > .cs_descr, .csslider16 > #cs_play16:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider16 > #cs_play16:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider16 > .pause:checked ~ .cs_description > label > .cs_title, .csslider16 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider16 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider16 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider16 > .cs_description, .csslider16 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider17 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider17, .csslider17 *, .csslider17 *:after, .csslider17 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider17 > .cs_anchor { display: none; } .csslider17 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider17 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider17 > ul > .slide.img img { width: 100%; } .csslider17 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider17 > 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); } .csslider17 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider17 > ul > li.img, .csslider17 > .cs_arrowprev, .csslider17 > .cs_arrownext, .csslider17 > .cs_bullets, .csslider17 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider17 > .cs_arrowprev, .csslider17 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider17 > .cs_arrowprev > label, .csslider17 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider17 > .cs_arrowprev { left: 0; } .csslider17 > .cs_arrownext { right: 0; } .csslider17 > .slide:checked ~ .cs_arrowprev > label, .csslider17 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider17 > #cs_slide17_0:checked ~ .cs_arrowprev > label.num0, .csslider17 > #cs_pause17_0:checked ~ .cs_arrowprev > label.num0, .csslider17 > #cs_slide17_0:checked ~ .cs_arrownext > label.num0, .csslider17 > #cs_pause17_0:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow17 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow17 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider17 > #cs_play17:checked ~ .cs_arrowprev > label.num0, .csslider17 > #cs_play17:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow17 8000ms infinite -2000ms; animation: arrow17 8000ms infinite -2000ms; } .csslider17 > .slide:checked ~ .cs_arrowprev > label, .csslider17 > .slide:checked ~ .cs_arrownext > label, .csslider17 > .pause:checked ~ .cs_arrowprev > label, .csslider17 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider17 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider17 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider17 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider17 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider17 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider17 > .cs_description { z-index: 3; } .csslider17 > .cs_description a, .csslider17 > .cs_description a:visited, .csslider17 > .cs_description a:active { color: inherit; } .csslider17 > .cs_description a:hover { text-decoration: none; } .csslider17 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider17 > .cs_description > label > span { vertical-align: top; } .csslider17 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider17 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider17 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider17 > #cs_play17:checked ~ .cs_play_pause > .cs_pause, .csslider17 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider17 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider17 > #cs_play17:checked ~ .cs_play_pause > .cs_play, .csslider17 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider17 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange17 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange17 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider17 > #cs_play17:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange17 8000ms infinite -2000ms; animation: pauseChange17 8000ms infinite -2000ms; } .csslider17 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider17 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider17 > ul > .slide.num0 { left: 0%; } .csslider17 > #cs_slide17_0:checked ~ ul > .slide, .csslider17 > #cs_pause17_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider17 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide17 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slide17 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slide17-ie { 0%, 75% { margin-left: 0%; } } @keyframes slide17-ie { 0%, 75% { margin-left: 0%; } } .csslider17 > #cs_play17:checked ~ ul > .slide { -webkit-animation: slide17 8000ms infinite; animation: slide17 8000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider17 > #cs_play17:checked ~ ul > .slide { animation: slide17-ie 8000ms infinite; } } .csslider17 > #cs_play17:checked ~ ul > .slide, .csslider17 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider17 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider17 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider17 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider17 > .cs_arrowprev, .csslider17 > .cs_arrownext, .csslider17 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider17:hover > .cs_arrowprev, .csslider17:hover > .cs_arrownext, .csslider17:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider17 > .cs_arrowprev > label, .csslider17 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider17 > .cs_arrowprev > label, .csslider17 > .cs_arrownext > label, .csslider17 > .cs_arrowprev > label span:after, .csslider17 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider17 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider17 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider17 > .cs_arrowprev > label span, .csslider17 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider17 > .cs_arrowprev > label span:after, .csslider17 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider17 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider17 > .cs_arrownext > label span:after { line-height: 29px; } .csslider17 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider17 > .cs_arrownext > label span:after { content: '\e801'; } .csslider17 > .cs_arrowprev:hover > label, .csslider17 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider17 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow17 .7s infinite ease-in-out; animation: nextArrow17 .7s infinite ease-in-out; } .csslider17 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow17 .7s infinite ease-in-out; animation: prevArrow17 .7s infinite ease-in-out; } @keyframes nextArrow17 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow17 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow17 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow17 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider17 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider17 > .cs_play_pause > label, .csslider17 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider17 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider17 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider17 > .cs_play_pause > label span:after { line-height: 28px; } .csslider17 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider17 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider17 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider17 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause17 .7s infinite ease-in-out; animation: playPause17 .7s infinite ease-in-out; } @-webkit-keyframes playPause17 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause17 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider17 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider17 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider17 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider17 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider17 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider17 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider17 > .cs_bullets > label:hover > .cs_point, .csslider17 > #cs_slide17_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider17 > #cs_pause17_0:checked ~ .cs_bullets > label.num0 > .cs_point { background: #3A4A5A; } @keyframes bullet17 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } @-webkit-keyframes bullet17 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } .csslider17 > #cs_play17:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider17 > #cs_pause17:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet17 8000ms infinite -2000ms; animation: bullet17 8000ms infinite -2000ms; } .csslider17 > #cs_play17:checked ~ .cs_bullets > label > .cs_point, .csslider17 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider17 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider17 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider17 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider17 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider17 > #cs_slide17_0:checked ~ .cs_description > .num0 > .cs_title, .csslider17 > #cs_slide17_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider17 > #cs_pause17_0:checked ~ .cs_description > .num0 > .cs_title, .csslider17 > #cs_pause17_0:checked ~ .cs_description > .num0 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider17 > #cs_slide17_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider17 > #cs_pause17_0:checked ~ .cs_description > .num0 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider17 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider17 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider17 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider17 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title17 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_title17 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr17 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_descr17 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } .csslider17 > #cs_play17:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title17 8000ms infinite -1400ms ease; animation: cs_title17 8000ms infinite -1400ms ease; } .csslider17 > #cs_play17:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr17 8000ms infinite -1150ms ease; animation: cs_descr17 8000ms infinite -1150ms ease; } @-webkit-keyframes cs_title_text17 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text17 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text17 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text17 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider17 > #cs_play17:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text17 8000ms infinite -1250ms ease; animation: cs_title_text17 8000ms infinite -1250ms ease; } .csslider17 > #cs_play17:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text17 8000ms infinite -1000ms ease; animation: cs_descr_text17 8000ms infinite -1000ms ease; } .csslider17 > #cs_play17:checked ~ .cs_description > label > .cs_title, .csslider17 > #cs_play17:checked ~ .cs_description > label > .cs_descr, .csslider17 > #cs_play17:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider17 > #cs_play17:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider17 > .pause:checked ~ .cs_description > label > .cs_title, .csslider17 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider17 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider17 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider17 > .cs_description, .csslider17 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider18 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider18, .csslider18 *, .csslider18 *:after, .csslider18 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider18 > .cs_anchor { display: none; } .csslider18 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider18 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider18 > ul > .slide.img img { width: 100%; } .csslider18 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider18 > 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); } .csslider18 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider18 > ul > li.img, .csslider18 > .cs_arrowprev, .csslider18 > .cs_arrownext, .csslider18 > .cs_bullets, .csslider18 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider18 > .cs_arrowprev, .csslider18 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider18 > .cs_arrowprev > label, .csslider18 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider18 > .cs_arrowprev { left: 0; } .csslider18 > .cs_arrownext { right: 0; } .csslider18 > .slide:checked ~ .cs_arrowprev > label, .csslider18 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider18 > #cs_slide18_0:checked ~ .cs_arrowprev > label.num0, .csslider18 > #cs_pause18_0:checked ~ .cs_arrowprev > label.num0, .csslider18 > #cs_slide18_0:checked ~ .cs_arrownext > label.num0, .csslider18 > #cs_pause18_0:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow18 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow18 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider18 > #cs_play18:checked ~ .cs_arrowprev > label.num0, .csslider18 > #cs_play18:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow18 8000ms infinite -2000ms; animation: arrow18 8000ms infinite -2000ms; } .csslider18 > .slide:checked ~ .cs_arrowprev > label, .csslider18 > .slide:checked ~ .cs_arrownext > label, .csslider18 > .pause:checked ~ .cs_arrowprev > label, .csslider18 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider18 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider18 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider18 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider18 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider18 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider18 > .cs_description { z-index: 3; } .csslider18 > .cs_description a, .csslider18 > .cs_description a:visited, .csslider18 > .cs_description a:active { color: inherit; } .csslider18 > .cs_description a:hover { text-decoration: none; } .csslider18 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider18 > .cs_description > label > span { vertical-align: top; } .csslider18 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider18 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider18 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider18 > #cs_play18:checked ~ .cs_play_pause > .cs_pause, .csslider18 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider18 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider18 > #cs_play18:checked ~ .cs_play_pause > .cs_play, .csslider18 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider18 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange18 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange18 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider18 > #cs_play18:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange18 8000ms infinite -2000ms; animation: pauseChange18 8000ms infinite -2000ms; } .csslider18 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider18 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider18 > ul > .slide.num0 { left: 0%; } .csslider18 > #cs_slide18_0:checked ~ ul > .slide, .csslider18 > #cs_pause18_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider18 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide18 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slide18 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slide18-ie { 0%, 75% { margin-left: 0%; } } @keyframes slide18-ie { 0%, 75% { margin-left: 0%; } } .csslider18 > #cs_play18:checked ~ ul > .slide { -webkit-animation: slide18 8000ms infinite; animation: slide18 8000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider18 > #cs_play18:checked ~ ul > .slide { animation: slide18-ie 8000ms infinite; } } .csslider18 > #cs_play18:checked ~ ul > .slide, .csslider18 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider18 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider18 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider18 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider18 > .cs_arrowprev, .csslider18 > .cs_arrownext, .csslider18 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider18:hover > .cs_arrowprev, .csslider18:hover > .cs_arrownext, .csslider18:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider18 > .cs_arrowprev > label, .csslider18 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider18 > .cs_arrowprev > label, .csslider18 > .cs_arrownext > label, .csslider18 > .cs_arrowprev > label span:after, .csslider18 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider18 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider18 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider18 > .cs_arrowprev > label span, .csslider18 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider18 > .cs_arrowprev > label span:after, .csslider18 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider18 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider18 > .cs_arrownext > label span:after { line-height: 29px; } .csslider18 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider18 > .cs_arrownext > label span:after { content: '\e801'; } .csslider18 > .cs_arrowprev:hover > label, .csslider18 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider18 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow18 .7s infinite ease-in-out; animation: nextArrow18 .7s infinite ease-in-out; } .csslider18 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow18 .7s infinite ease-in-out; animation: prevArrow18 .7s infinite ease-in-out; } @keyframes nextArrow18 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow18 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow18 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow18 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider18 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider18 > .cs_play_pause > label, .csslider18 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider18 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider18 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider18 > .cs_play_pause > label span:after { line-height: 28px; } .csslider18 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider18 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider18 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider18 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause18 .7s infinite ease-in-out; animation: playPause18 .7s infinite ease-in-out; } @-webkit-keyframes playPause18 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause18 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider18 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider18 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider18 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider18 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider18 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider18 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider18 > .cs_bullets > label:hover > .cs_point, .csslider18 > #cs_slide18_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider18 > #cs_pause18_0:checked ~ .cs_bullets > label.num0 > .cs_point { background: #3A4A5A; } @keyframes bullet18 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } @-webkit-keyframes bullet18 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } .csslider18 > #cs_play18:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider18 > #cs_pause18:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet18 8000ms infinite -2000ms; animation: bullet18 8000ms infinite -2000ms; } .csslider18 > #cs_play18:checked ~ .cs_bullets > label > .cs_point, .csslider18 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider18 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider18 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider18 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider18 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider18 > #cs_slide18_0:checked ~ .cs_description > .num0 > .cs_title, .csslider18 > #cs_slide18_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider18 > #cs_pause18_0:checked ~ .cs_description > .num0 > .cs_title, .csslider18 > #cs_pause18_0:checked ~ .cs_description > .num0 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider18 > #cs_slide18_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider18 > #cs_pause18_0:checked ~ .cs_description > .num0 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider18 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider18 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider18 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider18 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title18 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_title18 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr18 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_descr18 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } .csslider18 > #cs_play18:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title18 8000ms infinite -1400ms ease; animation: cs_title18 8000ms infinite -1400ms ease; } .csslider18 > #cs_play18:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr18 8000ms infinite -1150ms ease; animation: cs_descr18 8000ms infinite -1150ms ease; } @-webkit-keyframes cs_title_text18 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text18 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text18 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text18 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider18 > #cs_play18:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text18 8000ms infinite -1250ms ease; animation: cs_title_text18 8000ms infinite -1250ms ease; } .csslider18 > #cs_play18:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text18 8000ms infinite -1000ms ease; animation: cs_descr_text18 8000ms infinite -1000ms ease; } .csslider18 > #cs_play18:checked ~ .cs_description > label > .cs_title, .csslider18 > #cs_play18:checked ~ .cs_description > label > .cs_descr, .csslider18 > #cs_play18:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider18 > #cs_play18:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider18 > .pause:checked ~ .cs_description > label > .cs_title, .csslider18 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider18 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider18 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider18 > .cs_description, .csslider18 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider19 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider19, .csslider19 *, .csslider19 *:after, .csslider19 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider19 > .cs_anchor { display: none; } .csslider19 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider19 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider19 > ul > .slide.img img { width: 100%; } .csslider19 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider19 > 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); } .csslider19 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider19 > ul > li.img, .csslider19 > .cs_arrowprev, .csslider19 > .cs_arrownext, .csslider19 > .cs_bullets, .csslider19 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider19 > .cs_arrowprev, .csslider19 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider19 > .cs_arrowprev > label, .csslider19 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider19 > .cs_arrowprev { left: 0; } .csslider19 > .cs_arrownext { right: 0; } .csslider19 > .slide:checked ~ .cs_arrowprev > label, .csslider19 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider19 > #cs_slide19_0:checked ~ .cs_arrowprev > label.num1, .csslider19 > #cs_pause19_0:checked ~ .cs_arrowprev > label.num1, .csslider19 > #cs_slide19_0:checked ~ .cs_arrownext > label.num1, .csslider19 > #cs_pause19_0:checked ~ .cs_arrownext > label.num1, .csslider19 > #cs_slide19_1:checked ~ .cs_arrowprev > label.num0, .csslider19 > #cs_pause19_1:checked ~ .cs_arrowprev > label.num0, .csslider19 > #cs_slide19_1:checked ~ .cs_arrownext > label.num0, .csslider19 > #cs_pause19_1:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow19 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow19 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider19 > #cs_play19:checked ~ .cs_arrowprev > label.num1, .csslider19 > #cs_play19:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow19 16000ms infinite -2000ms; animation: arrow19 16000ms infinite -2000ms; } .csslider19 > #cs_play19:checked ~ .cs_arrowprev > label.num0, .csslider19 > #cs_play19:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow19 16000ms infinite 6000ms; animation: arrow19 16000ms infinite 6000ms; } .csslider19 > .slide:checked ~ .cs_arrowprev > label, .csslider19 > .slide:checked ~ .cs_arrownext > label, .csslider19 > .pause:checked ~ .cs_arrowprev > label, .csslider19 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider19 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider19 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider19 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider19 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider19 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider19 > .cs_description { z-index: 3; } .csslider19 > .cs_description a, .csslider19 > .cs_description a:visited, .csslider19 > .cs_description a:active { color: inherit; } .csslider19 > .cs_description a:hover { text-decoration: none; } .csslider19 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider19 > .cs_description > label > span { vertical-align: top; } .csslider19 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider19 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider19 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider19 > #cs_play19:checked ~ .cs_play_pause > .cs_pause, .csslider19 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider19 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider19 > #cs_play19:checked ~ .cs_play_pause > .cs_play, .csslider19 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider19 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange19 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange19 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider19 > #cs_play19:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange19 16000ms infinite -2000ms; animation: pauseChange19 16000ms infinite -2000ms; } .csslider19 > #cs_play19:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange19 16000ms infinite 6000ms; animation: pauseChange19 16000ms infinite 6000ms; } .csslider19 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider19 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider19 > ul > .slide.num0 { left: 0%; } .csslider19 > ul > .slide.num1 { left: 100%; } .csslider19 > #cs_slide19_0:checked ~ ul > .slide, .csslider19 > #cs_pause19_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider19 > #cs_slide19_1:checked ~ ul > .slide, .csslider19 > #cs_pause19_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider19 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide19 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slide19 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes slide19-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } @keyframes slide19-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } .csslider19 > #cs_play19:checked ~ ul > .slide { -webkit-animation: slide19 16000ms infinite; animation: slide19 16000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider19 > #cs_play19:checked ~ ul > .slide { animation: slide19-ie 16000ms infinite; } } .csslider19 > #cs_play19:checked ~ ul > .slide, .csslider19 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider19 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider19 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider19 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider19 > .cs_arrowprev, .csslider19 > .cs_arrownext, .csslider19 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider19:hover > .cs_arrowprev, .csslider19:hover > .cs_arrownext, .csslider19:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider19 > .cs_arrowprev > label, .csslider19 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider19 > .cs_arrowprev > label, .csslider19 > .cs_arrownext > label, .csslider19 > .cs_arrowprev > label span:after, .csslider19 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider19 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider19 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider19 > .cs_arrowprev > label span, .csslider19 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider19 > .cs_arrowprev > label span:after, .csslider19 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider19 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider19 > .cs_arrownext > label span:after { line-height: 29px; } .csslider19 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider19 > .cs_arrownext > label span:after { content: '\e801'; } .csslider19 > .cs_arrowprev:hover > label, .csslider19 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider19 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow19 .7s infinite ease-in-out; animation: nextArrow19 .7s infinite ease-in-out; } .csslider19 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow19 .7s infinite ease-in-out; animation: prevArrow19 .7s infinite ease-in-out; } @keyframes nextArrow19 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow19 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow19 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow19 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider19 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider19 > .cs_play_pause > label, .csslider19 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider19 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider19 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider19 > .cs_play_pause > label span:after { line-height: 28px; } .csslider19 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider19 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider19 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider19 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause19 .7s infinite ease-in-out; animation: playPause19 .7s infinite ease-in-out; } @-webkit-keyframes playPause19 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause19 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider19 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider19 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider19 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider19 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider19 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider19 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider19 > .cs_bullets > label:hover > .cs_point, .csslider19 > #cs_slide19_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider19 > #cs_pause19_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider19 > #cs_slide19_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider19 > #cs_pause19_1:checked ~ .cs_bullets > label.num1 > .cs_point { background: #3A4A5A; } @keyframes bullet19 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } @-webkit-keyframes bullet19 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } .csslider19 > #cs_play19:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider19 > #cs_pause19:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet19 16000ms infinite -2000ms; animation: bullet19 16000ms infinite -2000ms; } .csslider19 > #cs_play19:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider19 > #cs_pause19:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet19 16000ms infinite 6000ms; animation: bullet19 16000ms infinite 6000ms; } .csslider19 > #cs_play19:checked ~ .cs_bullets > label > .cs_point, .csslider19 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider19 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider19 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider19 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider19 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider19 > #cs_slide19_0:checked ~ .cs_description > .num0 > .cs_title, .csslider19 > #cs_slide19_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider19 > #cs_pause19_0:checked ~ .cs_description > .num0 > .cs_title, .csslider19 > #cs_pause19_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider19 > #cs_slide19_1:checked ~ .cs_description > .num1 > .cs_title, .csslider19 > #cs_slide19_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider19 > #cs_pause19_1:checked ~ .cs_description > .num1 > .cs_title, .csslider19 > #cs_pause19_1:checked ~ .cs_description > .num1 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider19 > #cs_slide19_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider19 > #cs_pause19_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider19 > #cs_slide19_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider19 > #cs_pause19_1:checked ~ .cs_description > .num1 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider19 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider19 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider19 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider19 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title19 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_title19 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr19 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_descr19 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } .csslider19 > #cs_play19:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title19 16000ms infinite -1400ms ease; animation: cs_title19 16000ms infinite -1400ms ease; } .csslider19 > #cs_play19:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title19 16000ms infinite 6600ms ease; animation: cs_title19 16000ms infinite 6600ms ease; } .csslider19 > #cs_play19:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr19 16000ms infinite -1150ms ease; animation: cs_descr19 16000ms infinite -1150ms ease; } .csslider19 > #cs_play19:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr19 16000ms infinite 6850ms ease; animation: cs_descr19 16000ms infinite 6850ms ease; } @-webkit-keyframes cs_title_text19 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text19 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text19 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text19 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider19 > #cs_play19:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text19 16000ms infinite -1250ms ease; animation: cs_title_text19 16000ms infinite -1250ms ease; } .csslider19 > #cs_play19:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text19 16000ms infinite 6750ms ease; animation: cs_title_text19 16000ms infinite 6750ms ease; } .csslider19 > #cs_play19:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text19 16000ms infinite -1000ms ease; animation: cs_descr_text19 16000ms infinite -1000ms ease; } .csslider19 > #cs_play19:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text19 16000ms infinite 7000ms ease; animation: cs_descr_text19 16000ms infinite 7000ms ease; } .csslider19 > #cs_play19:checked ~ .cs_description > label > .cs_title, .csslider19 > #cs_play19:checked ~ .cs_description > label > .cs_descr, .csslider19 > #cs_play19:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider19 > #cs_play19:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider19 > .pause:checked ~ .cs_description > label > .cs_title, .csslider19 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider19 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider19 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider19 > .cs_description, .csslider19 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider20 { display: inline-block; position: relative; height: 600px; width: 100%; } .csslider20, .csslider20 *, .csslider20 *:after, .csslider20 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider20 > .cs_anchor { display: none; } .csslider20 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; height: 600px; overflow: hidden; white-space: nowrap; } .csslider20 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider20 > ul > .slide.img img { width: 100%; } .csslider20 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider20 > 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); } .csslider20 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider20 > ul > li.img, .csslider20 > .cs_arrowprev, .csslider20 > .cs_arrownext, .csslider20 > .cs_bullets, .csslider20 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider20 > .cs_arrowprev, .csslider20 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider20 > .cs_arrowprev > label, .csslider20 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider20 > .cs_arrowprev { left: 0; } .csslider20 > .cs_arrownext { right: 0; } .csslider20 > .slide:checked ~ .cs_arrowprev > label, .csslider20 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider20 > #cs_slide20_0:checked ~ .cs_arrowprev > label.num12, .csslider20 > #cs_pause20_0:checked ~ .cs_arrowprev > label.num12, .csslider20 > #cs_slide20_0:checked ~ .cs_arrownext > label.num1, .csslider20 > #cs_pause20_0:checked ~ .cs_arrownext > label.num1, .csslider20 > #cs_slide20_1:checked ~ .cs_arrowprev > label.num0, .csslider20 > #cs_pause20_1:checked ~ .cs_arrowprev > label.num0, .csslider20 > #cs_slide20_1:checked ~ .cs_arrownext > label.num2, .csslider20 > #cs_pause20_1:checked ~ .cs_arrownext > label.num2, .csslider20 > #cs_slide20_2:checked ~ .cs_arrowprev > label.num1, .csslider20 > #cs_pause20_2:checked ~ .cs_arrowprev > label.num1, .csslider20 > #cs_slide20_2:checked ~ .cs_arrownext > label.num3, .csslider20 > #cs_pause20_2:checked ~ .cs_arrownext > label.num3, .csslider20 > #cs_slide20_3:checked ~ .cs_arrowprev > label.num2, .csslider20 > #cs_pause20_3:checked ~ .cs_arrowprev > label.num2, .csslider20 > #cs_slide20_3:checked ~ .cs_arrownext > label.num4, .csslider20 > #cs_pause20_3:checked ~ .cs_arrownext > label.num4, .csslider20 > #cs_slide20_4:checked ~ .cs_arrowprev > label.num3, .csslider20 > #cs_pause20_4:checked ~ .cs_arrowprev > label.num3, .csslider20 > #cs_slide20_4:checked ~ .cs_arrownext > label.num5, .csslider20 > #cs_pause20_4:checked ~ .cs_arrownext > label.num5, .csslider20 > #cs_slide20_5:checked ~ .cs_arrowprev > label.num4, .csslider20 > #cs_pause20_5:checked ~ .cs_arrowprev > label.num4, .csslider20 > #cs_slide20_5:checked ~ .cs_arrownext > label.num6, .csslider20 > #cs_pause20_5:checked ~ .cs_arrownext > label.num6, .csslider20 > #cs_slide20_6:checked ~ .cs_arrowprev > label.num5, .csslider20 > #cs_pause20_6:checked ~ .cs_arrowprev > label.num5, .csslider20 > #cs_slide20_6:checked ~ .cs_arrownext > label.num7, .csslider20 > #cs_pause20_6:checked ~ .cs_arrownext > label.num7, .csslider20 > #cs_slide20_7:checked ~ .cs_arrowprev > label.num6, .csslider20 > #cs_pause20_7:checked ~ .cs_arrowprev > label.num6, .csslider20 > #cs_slide20_7:checked ~ .cs_arrownext > label.num8, .csslider20 > #cs_pause20_7:checked ~ .cs_arrownext > label.num8, .csslider20 > #cs_slide20_8:checked ~ .cs_arrowprev > label.num7, .csslider20 > #cs_pause20_8:checked ~ .cs_arrowprev > label.num7, .csslider20 > #cs_slide20_8:checked ~ .cs_arrownext > label.num9, .csslider20 > #cs_pause20_8:checked ~ .cs_arrownext > label.num9, .csslider20 > #cs_slide20_9:checked ~ .cs_arrowprev > label.num8, .csslider20 > #cs_pause20_9:checked ~ .cs_arrowprev > label.num8, .csslider20 > #cs_slide20_9:checked ~ .cs_arrownext > label.num10, .csslider20 > #cs_pause20_9:checked ~ .cs_arrownext > label.num10, .csslider20 > #cs_slide20_10:checked ~ .cs_arrowprev > label.num9, .csslider20 > #cs_pause20_10:checked ~ .cs_arrowprev > label.num9, .csslider20 > #cs_slide20_10:checked ~ .cs_arrownext > label.num11, .csslider20 > #cs_pause20_10:checked ~ .cs_arrownext > label.num11, .csslider20 > #cs_slide20_11:checked ~ .cs_arrowprev > label.num10, .csslider20 > #cs_pause20_11:checked ~ .cs_arrowprev > label.num10, .csslider20 > #cs_slide20_11:checked ~ .cs_arrownext > label.num12, .csslider20 > #cs_pause20_11:checked ~ .cs_arrownext > label.num12, .csslider20 > #cs_slide20_12:checked ~ .cs_arrowprev > label.num11, .csslider20 > #cs_pause20_12:checked ~ .cs_arrowprev > label.num11, .csslider20 > #cs_slide20_12:checked ~ .cs_arrownext > label.num0, .csslider20 > #cs_pause20_12:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow20 { 0%, 7.682307692307693% { opacity: 1; z-index: 5; } 7.6923076923076925%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow20 { 0%, 7.682307692307693% { opacity: 1; z-index: 5; } 7.6923076923076925%, 100% { opacity: 0; z-index: -1; } } .csslider20 > #cs_play20:checked ~ .cs_arrowprev > label.num12, .csslider20 > #cs_play20:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow20 104000ms infinite -2000ms; animation: arrow20 104000ms infinite -2000ms; } .csslider20 > #cs_play20:checked ~ .cs_arrowprev > label.num0, .csslider20 > #cs_play20:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow20 104000ms infinite 6000ms; animation: arrow20 104000ms infinite 6000ms; } .csslider20 > #cs_play20:checked ~ .cs_arrowprev > label.num1, .csslider20 > #cs_play20:checked ~ .cs_arrownext > label.num3 { -webkit-animation: arrow20 104000ms infinite 14000ms; animation: arrow20 104000ms infinite 14000ms; } .csslider20 > #cs_play20:checked ~ .cs_arrowprev > label.num2, .csslider20 > #cs_play20:checked ~ .cs_arrownext > label.num4 { -webkit-animation: arrow20 104000ms infinite 22000ms; animation: arrow20 104000ms infinite 22000ms; } .csslider20 > #cs_play20:checked ~ .cs_arrowprev > label.num3, .csslider20 > #cs_play20:checked ~ .cs_arrownext > label.num5 { -webkit-animation: arrow20 104000ms infinite 30000ms; animation: arrow20 104000ms infinite 30000ms; } .csslider20 > #cs_play20:checked ~ .cs_arrowprev > label.num4, .csslider20 > #cs_play20:checked ~ .cs_arrownext > label.num6 { -webkit-animation: arrow20 104000ms infinite 38000ms; animation: arrow20 104000ms infinite 38000ms; } .csslider20 > #cs_play20:checked ~ .cs_arrowprev > label.num5, .csslider20 > #cs_play20:checked ~ .cs_arrownext > label.num7 { -webkit-animation: arrow20 104000ms infinite 46000ms; animation: arrow20 104000ms infinite 46000ms; } .csslider20 > #cs_play20:checked ~ .cs_arrowprev > label.num6, .csslider20 > #cs_play20:checked ~ .cs_arrownext > label.num8 { -webkit-animation: arrow20 104000ms infinite 54000ms; animation: arrow20 104000ms infinite 54000ms; } .csslider20 > #cs_play20:checked ~ .cs_arrowprev > label.num7, .csslider20 > #cs_play20:checked ~ .cs_arrownext > label.num9 { -webkit-animation: arrow20 104000ms infinite 62000ms; animation: arrow20 104000ms infinite 62000ms; } .csslider20 > #cs_play20:checked ~ .cs_arrowprev > label.num8, .csslider20 > #cs_play20:checked ~ .cs_arrownext > label.num10 { -webkit-animation: arrow20 104000ms infinite 70000ms; animation: arrow20 104000ms infinite 70000ms; } .csslider20 > #cs_play20:checked ~ .cs_arrowprev > label.num9, .csslider20 > #cs_play20:checked ~ .cs_arrownext > label.num11 { -webkit-animation: arrow20 104000ms infinite 78000ms; animation: arrow20 104000ms infinite 78000ms; } .csslider20 > #cs_play20:checked ~ .cs_arrowprev > label.num10, .csslider20 > #cs_play20:checked ~ .cs_arrownext > label.num12 { -webkit-animation: arrow20 104000ms infinite 86000ms; animation: arrow20 104000ms infinite 86000ms; } .csslider20 > #cs_play20:checked ~ .cs_arrowprev > label.num11, .csslider20 > #cs_play20:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow20 104000ms infinite 94000ms; animation: arrow20 104000ms infinite 94000ms; } .csslider20 > .slide:checked ~ .cs_arrowprev > label, .csslider20 > .slide:checked ~ .cs_arrownext > label, .csslider20 > .pause:checked ~ .cs_arrowprev > label, .csslider20 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider20 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider20 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider20 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider20 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -40px; top: -48px; } .csslider20 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider20 > .cs_description { z-index: 3; } .csslider20 > .cs_description a, .csslider20 > .cs_description a:visited, .csslider20 > .cs_description a:active { color: inherit; } .csslider20 > .cs_description a:hover { text-decoration: none; } .csslider20 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider20 > .cs_description > label > span { vertical-align: top; } .csslider20 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider20 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider20 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause, .csslider20 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider20 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_play, .csslider20 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider20 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange20 { 0%, 7.682307692307693% { opacity: 1; z-index: 5; } 7.6923076923076925%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange20 { 0%, 7.682307692307693% { opacity: 1; z-index: 5; } 7.6923076923076925%, 100% { opacity: 0; z-index: -1; } } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange20 104000ms infinite -2000ms; animation: pauseChange20 104000ms infinite -2000ms; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange20 104000ms infinite 6000ms; animation: pauseChange20 104000ms infinite 6000ms; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange20 104000ms infinite 14000ms; animation: pauseChange20 104000ms infinite 14000ms; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause.num3 { opacity: 0; z-index: -1; -webkit-animation: pauseChange20 104000ms infinite 22000ms; animation: pauseChange20 104000ms infinite 22000ms; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause.num4 { opacity: 0; z-index: -1; -webkit-animation: pauseChange20 104000ms infinite 30000ms; animation: pauseChange20 104000ms infinite 30000ms; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause.num5 { opacity: 0; z-index: -1; -webkit-animation: pauseChange20 104000ms infinite 38000ms; animation: pauseChange20 104000ms infinite 38000ms; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause.num6 { opacity: 0; z-index: -1; -webkit-animation: pauseChange20 104000ms infinite 46000ms; animation: pauseChange20 104000ms infinite 46000ms; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause.num7 { opacity: 0; z-index: -1; -webkit-animation: pauseChange20 104000ms infinite 54000ms; animation: pauseChange20 104000ms infinite 54000ms; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause.num8 { opacity: 0; z-index: -1; -webkit-animation: pauseChange20 104000ms infinite 62000ms; animation: pauseChange20 104000ms infinite 62000ms; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause.num9 { opacity: 0; z-index: -1; -webkit-animation: pauseChange20 104000ms infinite 70000ms; animation: pauseChange20 104000ms infinite 70000ms; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause.num10 { opacity: 0; z-index: -1; -webkit-animation: pauseChange20 104000ms infinite 78000ms; animation: pauseChange20 104000ms infinite 78000ms; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause.num11 { opacity: 0; z-index: -1; -webkit-animation: pauseChange20 104000ms infinite 86000ms; animation: pauseChange20 104000ms infinite 86000ms; } .csslider20 > #cs_play20:checked ~ .cs_play_pause > .cs_pause.num12 { opacity: 0; z-index: -1; -webkit-animation: pauseChange20 104000ms infinite 94000ms; animation: pauseChange20 104000ms infinite 94000ms; } .csslider20 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider20 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider20 > ul > .slide.num0 { left: 0%; } .csslider20 > ul > .slide.num1 { left: 100%; } .csslider20 > ul > .slide.num2 { left: 200%; } .csslider20 > ul > .slide.num3 { left: 300%; } .csslider20 > ul > .slide.num4 { left: 400%; } .csslider20 > ul > .slide.num5 { left: 500%; } .csslider20 > ul > .slide.num6 { left: 600%; } .csslider20 > ul > .slide.num7 { left: 700%; } .csslider20 > ul > .slide.num8 { left: 800%; } .csslider20 > ul > .slide.num9 { left: 900%; } .csslider20 > ul > .slide.num10 { left: 1000%; } .csslider20 > ul > .slide.num11 { left: 1100%; } .csslider20 > ul > .slide.num12 { left: 1200%; } .csslider20 > #cs_slide20_0:checked ~ ul > .slide, .csslider20 > #cs_pause20_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider20 > #cs_slide20_1:checked ~ ul > .slide, .csslider20 > #cs_pause20_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider20 > #cs_slide20_2:checked ~ ul > .slide, .csslider20 > #cs_pause20_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider20 > #cs_slide20_3:checked ~ ul > .slide, .csslider20 > #cs_pause20_3:checked ~ ul > .slide { -webkit-transform: translateX(-300%); transform: translateX(-300%); } .csslider20 > #cs_slide20_4:checked ~ ul > .slide, .csslider20 > #cs_pause20_4:checked ~ ul > .slide { -webkit-transform: translateX(-400%); transform: translateX(-400%); } .csslider20 > #cs_slide20_5:checked ~ ul > .slide, .csslider20 > #cs_pause20_5:checked ~ ul > .slide { -webkit-transform: translateX(-500%); transform: translateX(-500%); } .csslider20 > #cs_slide20_6:checked ~ ul > .slide, .csslider20 > #cs_pause20_6:checked ~ ul > .slide { -webkit-transform: translateX(-600%); transform: translateX(-600%); } .csslider20 > #cs_slide20_7:checked ~ ul > .slide, .csslider20 > #cs_pause20_7:checked ~ ul > .slide { -webkit-transform: translateX(-700%); transform: translateX(-700%); } .csslider20 > #cs_slide20_8:checked ~ ul > .slide, .csslider20 > #cs_pause20_8:checked ~ ul > .slide { -webkit-transform: translateX(-800%); transform: translateX(-800%); } .csslider20 > #cs_slide20_9:checked ~ ul > .slide, .csslider20 > #cs_pause20_9:checked ~ ul > .slide { -webkit-transform: translateX(-900%); transform: translateX(-900%); } .csslider20 > #cs_slide20_10:checked ~ ul > .slide, .csslider20 > #cs_pause20_10:checked ~ ul > .slide { -webkit-transform: translateX(-1000%); transform: translateX(-1000%); } .csslider20 > #cs_slide20_11:checked ~ ul > .slide, .csslider20 > #cs_pause20_11:checked ~ ul > .slide { -webkit-transform: translateX(-1100%); transform: translateX(-1100%); } .csslider20 > #cs_slide20_12:checked ~ ul > .slide, .csslider20 > #cs_pause20_12:checked ~ ul > .slide { -webkit-transform: translateX(-1200%); transform: translateX(-1200%); } .csslider20 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide20 { 0%, 5.769230769230769% { -webkit-transform: translateX(0%); transform: translateX(0%); } 7.6923076923076925%, 13.461538461538462% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 15.384615384615385%, 21.153846153846153% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 23.076923076923077%, 28.846153846153847% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } 30.76923076923077%, 36.53846153846154% { -webkit-transform: translateX(-400%); transform: translateX(-400%); } 38.46153846153846%, 44.23076923076923% { -webkit-transform: translateX(-500%); transform: translateX(-500%); } 46.15384615384615%, 51.92307692307693% { -webkit-transform: translateX(-600%); transform: translateX(-600%); } 53.84615384615385%, 59.61538461538462% { -webkit-transform: translateX(-700%); transform: translateX(-700%); } 61.53846153846154%, 67.3076923076923% { -webkit-transform: translateX(-800%); transform: translateX(-800%); } 69.23076923076923%, 75% { -webkit-transform: translateX(-900%); transform: translateX(-900%); } 76.92307692307692%, 82.6923076923077% { -webkit-transform: translateX(-1000%); transform: translateX(-1000%); } 84.61538461538461%, 90.38461538461539% { -webkit-transform: translateX(-1100%); transform: translateX(-1100%); } 92.3076923076923%, 98.07692307692308% { -webkit-transform: translateX(-1200%); transform: translateX(-1200%); } } @keyframes slide20 { 0%, 5.769230769230769% { -webkit-transform: translateX(0%); transform: translateX(0%); } 7.6923076923076925%, 13.461538461538462% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 15.384615384615385%, 21.153846153846153% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 23.076923076923077%, 28.846153846153847% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } 30.76923076923077%, 36.53846153846154% { -webkit-transform: translateX(-400%); transform: translateX(-400%); } 38.46153846153846%, 44.23076923076923% { -webkit-transform: translateX(-500%); transform: translateX(-500%); } 46.15384615384615%, 51.92307692307693% { -webkit-transform: translateX(-600%); transform: translateX(-600%); } 53.84615384615385%, 59.61538461538462% { -webkit-transform: translateX(-700%); transform: translateX(-700%); } 61.53846153846154%, 67.3076923076923% { -webkit-transform: translateX(-800%); transform: translateX(-800%); } 69.23076923076923%, 75% { -webkit-transform: translateX(-900%); transform: translateX(-900%); } 76.92307692307692%, 82.6923076923077% { -webkit-transform: translateX(-1000%); transform: translateX(-1000%); } 84.61538461538461%, 90.38461538461539% { -webkit-transform: translateX(-1100%); transform: translateX(-1100%); } 92.3076923076923%, 98.07692307692308% { -webkit-transform: translateX(-1200%); transform: translateX(-1200%); } } @-webkit-keyframes slide20-ie { 0%, 5.769230769230769% { margin-left: 0%; } 7.6923076923076925%, 13.461538461538462% { margin-left: -100%; } 15.384615384615385%, 21.153846153846153% { margin-left: -200%; } 23.076923076923077%, 28.846153846153847% { margin-left: -300%; } 30.76923076923077%, 36.53846153846154% { margin-left: -400%; } 38.46153846153846%, 44.23076923076923% { margin-left: -500%; } 46.15384615384615%, 51.92307692307693% { margin-left: -600%; } 53.84615384615385%, 59.61538461538462% { margin-left: -700%; } 61.53846153846154%, 67.3076923076923% { margin-left: -800%; } 69.23076923076923%, 75% { margin-left: -900%; } 76.92307692307692%, 82.6923076923077% { margin-left: -1000%; } 84.61538461538461%, 90.38461538461539% { margin-left: -1100%; } 92.3076923076923%, 98.07692307692308% { margin-left: -1200%; } } @keyframes slide20-ie { 0%, 5.769230769230769% { margin-left: 0%; } 7.6923076923076925%, 13.461538461538462% { margin-left: -100%; } 15.384615384615385%, 21.153846153846153% { margin-left: -200%; } 23.076923076923077%, 28.846153846153847% { margin-left: -300%; } 30.76923076923077%, 36.53846153846154% { margin-left: -400%; } 38.46153846153846%, 44.23076923076923% { margin-left: -500%; } 46.15384615384615%, 51.92307692307693% { margin-left: -600%; } 53.84615384615385%, 59.61538461538462% { margin-left: -700%; } 61.53846153846154%, 67.3076923076923% { margin-left: -800%; } 69.23076923076923%, 75% { margin-left: -900%; } 76.92307692307692%, 82.6923076923077% { margin-left: -1000%; } 84.61538461538461%, 90.38461538461539% { margin-left: -1100%; } 92.3076923076923%, 98.07692307692308% { margin-left: -1200%; } } .csslider20 > #cs_play20:checked ~ ul > .slide { -webkit-animation: slide20 104000ms infinite; animation: slide20 104000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider20 > #cs_play20:checked ~ ul > .slide { animation: slide20-ie 104000ms infinite; } } .csslider20 > #cs_play20:checked ~ ul > .slide, .csslider20 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider20 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider20 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider20 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider20 > .cs_arrowprev, .csslider20 > .cs_arrownext, .csslider20 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider20:hover > .cs_arrowprev, .csslider20:hover > .cs_arrownext, .csslider20:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider20 > .cs_arrowprev > label, .csslider20 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider20 > .cs_arrowprev > label, .csslider20 > .cs_arrownext > label, .csslider20 > .cs_arrowprev > label span:after, .csslider20 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider20 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider20 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider20 > .cs_arrowprev > label span, .csslider20 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider20 > .cs_arrowprev > label span:after, .csslider20 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider20 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider20 > .cs_arrownext > label span:after { line-height: 29px; } .csslider20 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider20 > .cs_arrownext > label span:after { content: '\e801'; } .csslider20 > .cs_arrowprev:hover > label, .csslider20 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider20 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow20 .7s infinite ease-in-out; animation: nextArrow20 .7s infinite ease-in-out; } .csslider20 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow20 .7s infinite ease-in-out; animation: prevArrow20 .7s infinite ease-in-out; } @keyframes nextArrow20 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow20 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow20 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow20 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider20 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider20 > .cs_play_pause > label, .csslider20 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider20 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider20 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider20 > .cs_play_pause > label span:after { line-height: 28px; } .csslider20 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider20 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider20 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider20 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause20 .7s infinite ease-in-out; animation: playPause20 .7s infinite ease-in-out; } @-webkit-keyframes playPause20 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause20 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider20 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider20 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider20 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider20 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider20 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider20 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider20 > .cs_bullets > label:hover > .cs_point, .csslider20 > #cs_slide20_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider20 > #cs_pause20_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider20 > #cs_slide20_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider20 > #cs_pause20_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider20 > #cs_slide20_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider20 > #cs_pause20_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider20 > #cs_slide20_3:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider20 > #cs_pause20_3:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider20 > #cs_slide20_4:checked ~ .cs_bullets > label.num4 > .cs_point, .csslider20 > #cs_pause20_4:checked ~ .cs_bullets > label.num4 > .cs_point, .csslider20 > #cs_slide20_5:checked ~ .cs_bullets > label.num5 > .cs_point, .csslider20 > #cs_pause20_5:checked ~ .cs_bullets > label.num5 > .cs_point, .csslider20 > #cs_slide20_6:checked ~ .cs_bullets > label.num6 > .cs_point, .csslider20 > #cs_pause20_6:checked ~ .cs_bullets > label.num6 > .cs_point, .csslider20 > #cs_slide20_7:checked ~ .cs_bullets > label.num7 > .cs_point, .csslider20 > #cs_pause20_7:checked ~ .cs_bullets > label.num7 > .cs_point, .csslider20 > #cs_slide20_8:checked ~ .cs_bullets > label.num8 > .cs_point, .csslider20 > #cs_pause20_8:checked ~ .cs_bullets > label.num8 > .cs_point, .csslider20 > #cs_slide20_9:checked ~ .cs_bullets > label.num9 > .cs_point, .csslider20 > #cs_pause20_9:checked ~ .cs_bullets > label.num9 > .cs_point, .csslider20 > #cs_slide20_10:checked ~ .cs_bullets > label.num10 > .cs_point, .csslider20 > #cs_pause20_10:checked ~ .cs_bullets > label.num10 > .cs_point, .csslider20 > #cs_slide20_11:checked ~ .cs_bullets > label.num11 > .cs_point, .csslider20 > #cs_pause20_11:checked ~ .cs_bullets > label.num11 > .cs_point, .csslider20 > #cs_slide20_12:checked ~ .cs_bullets > label.num12 > .cs_point, .csslider20 > #cs_pause20_12:checked ~ .cs_bullets > label.num12 > .cs_point { background: #3A4A5A; } @keyframes bullet20 { 0%, 7.682307692307693% { background: #3A4A5A; } 7.6923076923076925%, 100% { background: transparent; } } @-webkit-keyframes bullet20 { 0%, 7.682307692307693% { background: #3A4A5A; } 7.6923076923076925%, 100% { background: transparent; } } .csslider20 > #cs_play20:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider20 > #cs_pause20:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet20 104000ms infinite -2000ms; animation: bullet20 104000ms infinite -2000ms; } .csslider20 > #cs_play20:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider20 > #cs_pause20:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet20 104000ms infinite 6000ms; animation: bullet20 104000ms infinite 6000ms; } .csslider20 > #cs_play20:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider20 > #cs_pause20:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet20 104000ms infinite 14000ms; animation: bullet20 104000ms infinite 14000ms; } .csslider20 > #cs_play20:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider20 > #cs_pause20:checked ~ .cs_bullets > label.num3 > .cs_point { -webkit-animation: bullet20 104000ms infinite 22000ms; animation: bullet20 104000ms infinite 22000ms; } .csslider20 > #cs_play20:checked ~ .cs_bullets > label.num4 > .cs_point, .csslider20 > #cs_pause20:checked ~ .cs_bullets > label.num4 > .cs_point { -webkit-animation: bullet20 104000ms infinite 30000ms; animation: bullet20 104000ms infinite 30000ms; } .csslider20 > #cs_play20:checked ~ .cs_bullets > label.num5 > .cs_point, .csslider20 > #cs_pause20:checked ~ .cs_bullets > label.num5 > .cs_point { -webkit-animation: bullet20 104000ms infinite 38000ms; animation: bullet20 104000ms infinite 38000ms; } .csslider20 > #cs_play20:checked ~ .cs_bullets > label.num6 > .cs_point, .csslider20 > #cs_pause20:checked ~ .cs_bullets > label.num6 > .cs_point { -webkit-animation: bullet20 104000ms infinite 46000ms; animation: bullet20 104000ms infinite 46000ms; } .csslider20 > #cs_play20:checked ~ .cs_bullets > label.num7 > .cs_point, .csslider20 > #cs_pause20:checked ~ .cs_bullets > label.num7 > .cs_point { -webkit-animation: bullet20 104000ms infinite 54000ms; animation: bullet20 104000ms infinite 54000ms; } .csslider20 > #cs_play20:checked ~ .cs_bullets > label.num8 > .cs_point, .csslider20 > #cs_pause20:checked ~ .cs_bullets > label.num8 > .cs_point { -webkit-animation: bullet20 104000ms infinite 62000ms; animation: bullet20 104000ms infinite 62000ms; } .csslider20 > #cs_play20:checked ~ .cs_bullets > label.num9 > .cs_point, .csslider20 > #cs_pause20:checked ~ .cs_bullets > label.num9 > .cs_point { -webkit-animation: bullet20 104000ms infinite 70000ms; animation: bullet20 104000ms infinite 70000ms; } .csslider20 > #cs_play20:checked ~ .cs_bullets > label.num10 > .cs_point, .csslider20 > #cs_pause20:checked ~ .cs_bullets > label.num10 > .cs_point { -webkit-animation: bullet20 104000ms infinite 78000ms; animation: bullet20 104000ms infinite 78000ms; } .csslider20 > #cs_play20:checked ~ .cs_bullets > label.num11 > .cs_point, .csslider20 > #cs_pause20:checked ~ .cs_bullets > label.num11 > .cs_point { -webkit-animation: bullet20 104000ms infinite 86000ms; animation: bullet20 104000ms infinite 86000ms; } .csslider20 > #cs_play20:checked ~ .cs_bullets > label.num12 > .cs_point, .csslider20 > #cs_pause20:checked ~ .cs_bullets > label.num12 > .cs_point { -webkit-animation: bullet20 104000ms infinite 94000ms; animation: bullet20 104000ms infinite 94000ms; } .csslider20 > #cs_play20:checked ~ .cs_bullets > label > .cs_point, .csslider20 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider20 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider20 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider20 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider20 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider20 > #cs_slide20_0:checked ~ .cs_description > .num0 > .cs_title, .csslider20 > #cs_slide20_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider20 > #cs_pause20_0:checked ~ .cs_description > .num0 > .cs_title, .csslider20 > #cs_pause20_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider20 > #cs_slide20_1:checked ~ .cs_description > .num1 > .cs_title, .csslider20 > #cs_slide20_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider20 > #cs_pause20_1:checked ~ .cs_description > .num1 > .cs_title, .csslider20 > #cs_pause20_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider20 > #cs_slide20_2:checked ~ .cs_description > .num2 > .cs_title, .csslider20 > #cs_slide20_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider20 > #cs_pause20_2:checked ~ .cs_description > .num2 > .cs_title, .csslider20 > #cs_pause20_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider20 > #cs_slide20_3:checked ~ .cs_description > .num3 > .cs_title, .csslider20 > #cs_slide20_3:checked ~ .cs_description > .num3 > .cs_descr, .csslider20 > #cs_pause20_3:checked ~ .cs_description > .num3 > .cs_title, .csslider20 > #cs_pause20_3:checked ~ .cs_description > .num3 > .cs_descr, .csslider20 > #cs_slide20_4:checked ~ .cs_description > .num4 > .cs_title, .csslider20 > #cs_slide20_4:checked ~ .cs_description > .num4 > .cs_descr, .csslider20 > #cs_pause20_4:checked ~ .cs_description > .num4 > .cs_title, .csslider20 > #cs_pause20_4:checked ~ .cs_description > .num4 > .cs_descr, .csslider20 > #cs_slide20_5:checked ~ .cs_description > .num5 > .cs_title, .csslider20 > #cs_slide20_5:checked ~ .cs_description > .num5 > .cs_descr, .csslider20 > #cs_pause20_5:checked ~ .cs_description > .num5 > .cs_title, .csslider20 > #cs_pause20_5:checked ~ .cs_description > .num5 > .cs_descr, .csslider20 > #cs_slide20_6:checked ~ .cs_description > .num6 > .cs_title, .csslider20 > #cs_slide20_6:checked ~ .cs_description > .num6 > .cs_descr, .csslider20 > #cs_pause20_6:checked ~ .cs_description > .num6 > .cs_title, .csslider20 > #cs_pause20_6:checked ~ .cs_description > .num6 > .cs_descr, .csslider20 > #cs_slide20_7:checked ~ .cs_description > .num7 > .cs_title, .csslider20 > #cs_slide20_7:checked ~ .cs_description > .num7 > .cs_descr, .csslider20 > #cs_pause20_7:checked ~ .cs_description > .num7 > .cs_title, .csslider20 > #cs_pause20_7:checked ~ .cs_description > .num7 > .cs_descr, .csslider20 > #cs_slide20_8:checked ~ .cs_description > .num8 > .cs_title, .csslider20 > #cs_slide20_8:checked ~ .cs_description > .num8 > .cs_descr, .csslider20 > #cs_pause20_8:checked ~ .cs_description > .num8 > .cs_title, .csslider20 > #cs_pause20_8:checked ~ .cs_description > .num8 > .cs_descr, .csslider20 > #cs_slide20_9:checked ~ .cs_description > .num9 > .cs_title, .csslider20 > #cs_slide20_9:checked ~ .cs_description > .num9 > .cs_descr, .csslider20 > #cs_pause20_9:checked ~ .cs_description > .num9 > .cs_title, .csslider20 > #cs_pause20_9:checked ~ .cs_description > .num9 > .cs_descr, .csslider20 > #cs_slide20_10:checked ~ .cs_description > .num10 > .cs_title, .csslider20 > #cs_slide20_10:checked ~ .cs_description > .num10 > .cs_descr, .csslider20 > #cs_pause20_10:checked ~ .cs_description > .num10 > .cs_title, .csslider20 > #cs_pause20_10:checked ~ .cs_description > .num10 > .cs_descr, .csslider20 > #cs_slide20_11:checked ~ .cs_description > .num11 > .cs_title, .csslider20 > #cs_slide20_11:checked ~ .cs_description > .num11 > .cs_descr, .csslider20 > #cs_pause20_11:checked ~ .cs_description > .num11 > .cs_title, .csslider20 > #cs_pause20_11:checked ~ .cs_description > .num11 > .cs_descr, .csslider20 > #cs_slide20_12:checked ~ .cs_description > .num12 > .cs_title, .csslider20 > #cs_slide20_12:checked ~ .cs_description > .num12 > .cs_descr, .csslider20 > #cs_pause20_12:checked ~ .cs_description > .num12 > .cs_title, .csslider20 > #cs_pause20_12:checked ~ .cs_description > .num12 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider20 > #cs_slide20_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider20 > #cs_pause20_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider20 > #cs_slide20_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider20 > #cs_pause20_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider20 > #cs_slide20_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider20 > #cs_pause20_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider20 > #cs_slide20_3:checked ~ .cs_description > .num3 .cs_wrapper, .csslider20 > #cs_pause20_3:checked ~ .cs_description > .num3 .cs_wrapper, .csslider20 > #cs_slide20_4:checked ~ .cs_description > .num4 .cs_wrapper, .csslider20 > #cs_pause20_4:checked ~ .cs_description > .num4 .cs_wrapper, .csslider20 > #cs_slide20_5:checked ~ .cs_description > .num5 .cs_wrapper, .csslider20 > #cs_pause20_5:checked ~ .cs_description > .num5 .cs_wrapper, .csslider20 > #cs_slide20_6:checked ~ .cs_description > .num6 .cs_wrapper, .csslider20 > #cs_pause20_6:checked ~ .cs_description > .num6 .cs_wrapper, .csslider20 > #cs_slide20_7:checked ~ .cs_description > .num7 .cs_wrapper, .csslider20 > #cs_pause20_7:checked ~ .cs_description > .num7 .cs_wrapper, .csslider20 > #cs_slide20_8:checked ~ .cs_description > .num8 .cs_wrapper, .csslider20 > #cs_pause20_8:checked ~ .cs_description > .num8 .cs_wrapper, .csslider20 > #cs_slide20_9:checked ~ .cs_description > .num9 .cs_wrapper, .csslider20 > #cs_pause20_9:checked ~ .cs_description > .num9 .cs_wrapper, .csslider20 > #cs_slide20_10:checked ~ .cs_description > .num10 .cs_wrapper, .csslider20 > #cs_pause20_10:checked ~ .cs_description > .num10 .cs_wrapper, .csslider20 > #cs_slide20_11:checked ~ .cs_description > .num11 .cs_wrapper, .csslider20 > #cs_pause20_11:checked ~ .cs_description > .num11 .cs_wrapper, .csslider20 > #cs_slide20_12:checked ~ .cs_description > .num12 .cs_wrapper, .csslider20 > #cs_pause20_12:checked ~ .cs_description > .num12 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider20 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider20 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider20 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider20 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title20 { 0.31971153846153844%, 7.362596153846154% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.4567307692307692%, 7.225576923076924% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 8.149038461538462% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 8.159038461538461%, 100% { z-index: 0; } } @keyframes cs_title20 { 0.31971153846153844%, 7.362596153846154% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.4567307692307692%, 7.225576923076924% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 8.149038461538462% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 8.159038461538461%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr20 { 0.31971153846153844%, 7.362596153846154% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.4567307692307692%, 7.225576923076924% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 8.149038461538462% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 8.159038461538461%, 100% { z-index: 0; } } @keyframes cs_descr20 { 0.31971153846153844%, 7.362596153846154% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.4567307692307692%, 7.225576923076924% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 8.149038461538462% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 8.159038461538461%, 100% { z-index: 0; } } .csslider20 > #cs_play20:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title20 104000ms infinite -1400ms ease; animation: cs_title20 104000ms infinite -1400ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title20 104000ms infinite 6600ms ease; animation: cs_title20 104000ms infinite 6600ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title20 104000ms infinite 14600ms ease; animation: cs_title20 104000ms infinite 14600ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num3 > .cs_title { -webkit-animation: cs_title20 104000ms infinite 22600ms ease; animation: cs_title20 104000ms infinite 22600ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num4 > .cs_title { -webkit-animation: cs_title20 104000ms infinite 30600ms ease; animation: cs_title20 104000ms infinite 30600ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num5 > .cs_title { -webkit-animation: cs_title20 104000ms infinite 38600ms ease; animation: cs_title20 104000ms infinite 38600ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num6 > .cs_title { -webkit-animation: cs_title20 104000ms infinite 46600ms ease; animation: cs_title20 104000ms infinite 46600ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num7 > .cs_title { -webkit-animation: cs_title20 104000ms infinite 54600ms ease; animation: cs_title20 104000ms infinite 54600ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num8 > .cs_title { -webkit-animation: cs_title20 104000ms infinite 62600ms ease; animation: cs_title20 104000ms infinite 62600ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num9 > .cs_title { -webkit-animation: cs_title20 104000ms infinite 70600ms ease; animation: cs_title20 104000ms infinite 70600ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num10 > .cs_title { -webkit-animation: cs_title20 104000ms infinite 78600ms ease; animation: cs_title20 104000ms infinite 78600ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num11 > .cs_title { -webkit-animation: cs_title20 104000ms infinite 86600ms ease; animation: cs_title20 104000ms infinite 86600ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num12 > .cs_title { -webkit-animation: cs_title20 104000ms infinite 94600ms ease; animation: cs_title20 104000ms infinite 94600ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr20 104000ms infinite -1150ms ease; animation: cs_descr20 104000ms infinite -1150ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr20 104000ms infinite 6850ms ease; animation: cs_descr20 104000ms infinite 6850ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr20 104000ms infinite 14850ms ease; animation: cs_descr20 104000ms infinite 14850ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num3 > .cs_descr { -webkit-animation: cs_descr20 104000ms infinite 22850ms ease; animation: cs_descr20 104000ms infinite 22850ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num4 > .cs_descr { -webkit-animation: cs_descr20 104000ms infinite 30850ms ease; animation: cs_descr20 104000ms infinite 30850ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num5 > .cs_descr { -webkit-animation: cs_descr20 104000ms infinite 38850ms ease; animation: cs_descr20 104000ms infinite 38850ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num6 > .cs_descr { -webkit-animation: cs_descr20 104000ms infinite 46850ms ease; animation: cs_descr20 104000ms infinite 46850ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num7 > .cs_descr { -webkit-animation: cs_descr20 104000ms infinite 54850ms ease; animation: cs_descr20 104000ms infinite 54850ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num8 > .cs_descr { -webkit-animation: cs_descr20 104000ms infinite 62850ms ease; animation: cs_descr20 104000ms infinite 62850ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num9 > .cs_descr { -webkit-animation: cs_descr20 104000ms infinite 70850ms ease; animation: cs_descr20 104000ms infinite 70850ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num10 > .cs_descr { -webkit-animation: cs_descr20 104000ms infinite 78850ms ease; animation: cs_descr20 104000ms infinite 78850ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num11 > .cs_descr { -webkit-animation: cs_descr20 104000ms infinite 86850ms ease; animation: cs_descr20 104000ms infinite 86850ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num12 > .cs_descr { -webkit-animation: cs_descr20 104000ms infinite 94850ms ease; animation: cs_descr20 104000ms infinite 94850ms ease; } @-webkit-keyframes cs_title_text20 { 0.31971153846153844%, 7.362596153846154% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.4567307692307692%, 7.225576923076924% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 8.149038461538462% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text20 { 0.31971153846153844%, 7.362596153846154% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.4567307692307692%, 7.225576923076924% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 8.149038461538462% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text20 { 0.31971153846153844%, 7.362596153846154% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.4567307692307692%, 7.225576923076924% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 8.149038461538462% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text20 { 0.31971153846153844%, 7.362596153846154% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.4567307692307692%, 7.225576923076924% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 8.149038461538462% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider20 > #cs_play20:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text20 104000ms infinite -1250ms ease; animation: cs_title_text20 104000ms infinite -1250ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text20 104000ms infinite 6750ms ease; animation: cs_title_text20 104000ms infinite 6750ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text20 104000ms infinite 14750ms ease; animation: cs_title_text20 104000ms infinite 14750ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num3 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text20 104000ms infinite 22750ms ease; animation: cs_title_text20 104000ms infinite 22750ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num4 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text20 104000ms infinite 30750ms ease; animation: cs_title_text20 104000ms infinite 30750ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num5 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text20 104000ms infinite 38750ms ease; animation: cs_title_text20 104000ms infinite 38750ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num6 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text20 104000ms infinite 46750ms ease; animation: cs_title_text20 104000ms infinite 46750ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num7 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text20 104000ms infinite 54750ms ease; animation: cs_title_text20 104000ms infinite 54750ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num8 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text20 104000ms infinite 62750ms ease; animation: cs_title_text20 104000ms infinite 62750ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num9 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text20 104000ms infinite 70750ms ease; animation: cs_title_text20 104000ms infinite 70750ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num10 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text20 104000ms infinite 78750ms ease; animation: cs_title_text20 104000ms infinite 78750ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num11 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text20 104000ms infinite 86750ms ease; animation: cs_title_text20 104000ms infinite 86750ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num12 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text20 104000ms infinite 94750ms ease; animation: cs_title_text20 104000ms infinite 94750ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text20 104000ms infinite -1000ms ease; animation: cs_descr_text20 104000ms infinite -1000ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text20 104000ms infinite 7000ms ease; animation: cs_descr_text20 104000ms infinite 7000ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text20 104000ms infinite 15000ms ease; animation: cs_descr_text20 104000ms infinite 15000ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num3 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text20 104000ms infinite 23000ms ease; animation: cs_descr_text20 104000ms infinite 23000ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num4 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text20 104000ms infinite 31000ms ease; animation: cs_descr_text20 104000ms infinite 31000ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num5 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text20 104000ms infinite 39000ms ease; animation: cs_descr_text20 104000ms infinite 39000ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num6 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text20 104000ms infinite 47000ms ease; animation: cs_descr_text20 104000ms infinite 47000ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num7 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text20 104000ms infinite 55000ms ease; animation: cs_descr_text20 104000ms infinite 55000ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num8 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text20 104000ms infinite 63000ms ease; animation: cs_descr_text20 104000ms infinite 63000ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num9 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text20 104000ms infinite 71000ms ease; animation: cs_descr_text20 104000ms infinite 71000ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num10 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text20 104000ms infinite 79000ms ease; animation: cs_descr_text20 104000ms infinite 79000ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num11 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text20 104000ms infinite 87000ms ease; animation: cs_descr_text20 104000ms infinite 87000ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > .num12 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text20 104000ms infinite 95000ms ease; animation: cs_descr_text20 104000ms infinite 95000ms ease; } .csslider20 > #cs_play20:checked ~ .cs_description > label > .cs_title, .csslider20 > #cs_play20:checked ~ .cs_description > label > .cs_descr, .csslider20 > #cs_play20:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider20 > #cs_play20:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider20 > .pause:checked ~ .cs_description > label > .cs_title, .csslider20 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider20 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider20 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider20 > .cs_description, .csslider20 > .cs_bullets { display: none; } } @media only screen and (max-width: 1000px) { .csslider20, .csslider20 > ul { height: auto; } } /* ------------- 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; } .csslider21 { display: inline-block; position: relative; height: 342px; width: 100%; } .csslider21, .csslider21 *, .csslider21 *:after, .csslider21 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider21 > .cs_anchor { display: none; } .csslider21 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; height: 342px; overflow: hidden; white-space: nowrap; } .csslider21 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider21 > ul > .slide.img img { width: 100%; } .csslider21 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider21 > 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); } .csslider21 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider21 > ul > li.img, .csslider21 > .cs_arrowprev, .csslider21 > .cs_arrownext, .csslider21 > .cs_bullets, .csslider21 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider21 > .cs_arrowprev, .csslider21 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider21 > .cs_arrowprev > label, .csslider21 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider21 > .cs_arrowprev { left: 0; } .csslider21 > .cs_arrownext { right: 0; } .csslider21 > .slide:checked ~ .cs_arrowprev > label, .csslider21 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider21 > #cs_slide21_0:checked ~ .cs_arrowprev > label.num5, .csslider21 > #cs_pause21_0:checked ~ .cs_arrowprev > label.num5, .csslider21 > #cs_slide21_0:checked ~ .cs_arrownext > label.num1, .csslider21 > #cs_pause21_0:checked ~ .cs_arrownext > label.num1, .csslider21 > #cs_slide21_1:checked ~ .cs_arrowprev > label.num0, .csslider21 > #cs_pause21_1:checked ~ .cs_arrowprev > label.num0, .csslider21 > #cs_slide21_1:checked ~ .cs_arrownext > label.num2, .csslider21 > #cs_pause21_1:checked ~ .cs_arrownext > label.num2, .csslider21 > #cs_slide21_2:checked ~ .cs_arrowprev > label.num1, .csslider21 > #cs_pause21_2:checked ~ .cs_arrowprev > label.num1, .csslider21 > #cs_slide21_2:checked ~ .cs_arrownext > label.num3, .csslider21 > #cs_pause21_2:checked ~ .cs_arrownext > label.num3, .csslider21 > #cs_slide21_3:checked ~ .cs_arrowprev > label.num2, .csslider21 > #cs_pause21_3:checked ~ .cs_arrowprev > label.num2, .csslider21 > #cs_slide21_3:checked ~ .cs_arrownext > label.num4, .csslider21 > #cs_pause21_3:checked ~ .cs_arrownext > label.num4, .csslider21 > #cs_slide21_4:checked ~ .cs_arrowprev > label.num3, .csslider21 > #cs_pause21_4:checked ~ .cs_arrowprev > label.num3, .csslider21 > #cs_slide21_4:checked ~ .cs_arrownext > label.num5, .csslider21 > #cs_pause21_4:checked ~ .cs_arrownext > label.num5, .csslider21 > #cs_slide21_5:checked ~ .cs_arrowprev > label.num4, .csslider21 > #cs_pause21_5:checked ~ .cs_arrowprev > label.num4, .csslider21 > #cs_slide21_5:checked ~ .cs_arrownext > label.num0, .csslider21 > #cs_pause21_5:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow21 { 0%, 16.656666666666666% { opacity: 1; z-index: 5; } 16.666666666666668%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow21 { 0%, 16.656666666666666% { opacity: 1; z-index: 5; } 16.666666666666668%, 100% { opacity: 0; z-index: -1; } } .csslider21 > #cs_play21:checked ~ .cs_arrowprev > label.num5, .csslider21 > #cs_play21:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow21 48000ms infinite -2000ms; animation: arrow21 48000ms infinite -2000ms; } .csslider21 > #cs_play21:checked ~ .cs_arrowprev > label.num0, .csslider21 > #cs_play21:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow21 48000ms infinite 6000ms; animation: arrow21 48000ms infinite 6000ms; } .csslider21 > #cs_play21:checked ~ .cs_arrowprev > label.num1, .csslider21 > #cs_play21:checked ~ .cs_arrownext > label.num3 { -webkit-animation: arrow21 48000ms infinite 14000ms; animation: arrow21 48000ms infinite 14000ms; } .csslider21 > #cs_play21:checked ~ .cs_arrowprev > label.num2, .csslider21 > #cs_play21:checked ~ .cs_arrownext > label.num4 { -webkit-animation: arrow21 48000ms infinite 22000ms; animation: arrow21 48000ms infinite 22000ms; } .csslider21 > #cs_play21:checked ~ .cs_arrowprev > label.num3, .csslider21 > #cs_play21:checked ~ .cs_arrownext > label.num5 { -webkit-animation: arrow21 48000ms infinite 30000ms; animation: arrow21 48000ms infinite 30000ms; } .csslider21 > #cs_play21:checked ~ .cs_arrowprev > label.num4, .csslider21 > #cs_play21:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow21 48000ms infinite 38000ms; animation: arrow21 48000ms infinite 38000ms; } .csslider21 > .slide:checked ~ .cs_arrowprev > label, .csslider21 > .slide:checked ~ .cs_arrownext > label, .csslider21 > .pause:checked ~ .cs_arrowprev > label, .csslider21 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider21 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider21 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider21 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider21 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -80px; top: -48px; } .csslider21 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider21 > .cs_description { z-index: 3; } .csslider21 > .cs_description a, .csslider21 > .cs_description a:visited, .csslider21 > .cs_description a:active { color: inherit; } .csslider21 > .cs_description a:hover { text-decoration: none; } .csslider21 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider21 > .cs_description > label > span { vertical-align: top; } .csslider21 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider21 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider21 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider21 > #cs_play21:checked ~ .cs_play_pause > .cs_pause, .csslider21 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider21 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider21 > #cs_play21:checked ~ .cs_play_pause > .cs_play, .csslider21 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider21 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange21 { 0%, 16.656666666666666% { opacity: 1; z-index: 5; } 16.666666666666668%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange21 { 0%, 16.656666666666666% { opacity: 1; z-index: 5; } 16.666666666666668%, 100% { opacity: 0; z-index: -1; } } .csslider21 > #cs_play21:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange21 48000ms infinite -2000ms; animation: pauseChange21 48000ms infinite -2000ms; } .csslider21 > #cs_play21:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange21 48000ms infinite 6000ms; animation: pauseChange21 48000ms infinite 6000ms; } .csslider21 > #cs_play21:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange21 48000ms infinite 14000ms; animation: pauseChange21 48000ms infinite 14000ms; } .csslider21 > #cs_play21:checked ~ .cs_play_pause > .cs_pause.num3 { opacity: 0; z-index: -1; -webkit-animation: pauseChange21 48000ms infinite 22000ms; animation: pauseChange21 48000ms infinite 22000ms; } .csslider21 > #cs_play21:checked ~ .cs_play_pause > .cs_pause.num4 { opacity: 0; z-index: -1; -webkit-animation: pauseChange21 48000ms infinite 30000ms; animation: pauseChange21 48000ms infinite 30000ms; } .csslider21 > #cs_play21:checked ~ .cs_play_pause > .cs_pause.num5 { opacity: 0; z-index: -1; -webkit-animation: pauseChange21 48000ms infinite 38000ms; animation: pauseChange21 48000ms infinite 38000ms; } .csslider21 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider21 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider21 > ul > .slide.num0 { left: 0%; } .csslider21 > ul > .slide.num1 { left: 100%; } .csslider21 > ul > .slide.num2 { left: 200%; } .csslider21 > ul > .slide.num3 { left: 300%; } .csslider21 > ul > .slide.num4 { left: 400%; } .csslider21 > ul > .slide.num5 { left: 500%; } .csslider21 > #cs_slide21_0:checked ~ ul > .slide, .csslider21 > #cs_pause21_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider21 > #cs_slide21_1:checked ~ ul > .slide, .csslider21 > #cs_pause21_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider21 > #cs_slide21_2:checked ~ ul > .slide, .csslider21 > #cs_pause21_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider21 > #cs_slide21_3:checked ~ ul > .slide, .csslider21 > #cs_pause21_3:checked ~ ul > .slide { -webkit-transform: translateX(-300%); transform: translateX(-300%); } .csslider21 > #cs_slide21_4:checked ~ ul > .slide, .csslider21 > #cs_pause21_4:checked ~ ul > .slide { -webkit-transform: translateX(-400%); transform: translateX(-400%); } .csslider21 > #cs_slide21_5:checked ~ ul > .slide, .csslider21 > #cs_pause21_5:checked ~ ul > .slide { -webkit-transform: translateX(-500%); transform: translateX(-500%); } .csslider21 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide21 { 0%, 12.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 16.666666666666668%, 29.166666666666668% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 33.333333333333336%, 45.833333333333336% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 50%, 62.50000000000001% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } 66.66666666666667%, 79.16666666666667% { -webkit-transform: translateX(-400%); transform: translateX(-400%); } 83.33333333333334%, 95.83333333333333% { -webkit-transform: translateX(-500%); transform: translateX(-500%); } } @keyframes slide21 { 0%, 12.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 16.666666666666668%, 29.166666666666668% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 33.333333333333336%, 45.833333333333336% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 50%, 62.50000000000001% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } 66.66666666666667%, 79.16666666666667% { -webkit-transform: translateX(-400%); transform: translateX(-400%); } 83.33333333333334%, 95.83333333333333% { -webkit-transform: translateX(-500%); transform: translateX(-500%); } } @-webkit-keyframes slide21-ie { 0%, 12.5% { margin-left: 0%; } 16.666666666666668%, 29.166666666666668% { margin-left: -100%; } 33.333333333333336%, 45.833333333333336% { margin-left: -200%; } 50%, 62.50000000000001% { margin-left: -300%; } 66.66666666666667%, 79.16666666666667% { margin-left: -400%; } 83.33333333333334%, 95.83333333333333% { margin-left: -500%; } } @keyframes slide21-ie { 0%, 12.5% { margin-left: 0%; } 16.666666666666668%, 29.166666666666668% { margin-left: -100%; } 33.333333333333336%, 45.833333333333336% { margin-left: -200%; } 50%, 62.50000000000001% { margin-left: -300%; } 66.66666666666667%, 79.16666666666667% { margin-left: -400%; } 83.33333333333334%, 95.83333333333333% { margin-left: -500%; } } .csslider21 > #cs_play21:checked ~ ul > .slide { -webkit-animation: slide21 48000ms infinite; animation: slide21 48000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider21 > #cs_play21:checked ~ ul > .slide { animation: slide21-ie 48000ms infinite; } } .csslider21 > #cs_play21:checked ~ ul > .slide, .csslider21 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider21 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider21 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider21 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider21 > .cs_arrowprev, .csslider21 > .cs_arrownext, .csslider21 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider21:hover > .cs_arrowprev, .csslider21:hover > .cs_arrownext, .csslider21:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider21 > .cs_arrowprev > label, .csslider21 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider21 > .cs_arrowprev > label, .csslider21 > .cs_arrownext > label, .csslider21 > .cs_arrowprev > label span:after, .csslider21 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider21 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider21 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider21 > .cs_arrowprev > label span, .csslider21 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider21 > .cs_arrowprev > label span:after, .csslider21 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider21 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider21 > .cs_arrownext > label span:after { line-height: 29px; } .csslider21 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider21 > .cs_arrownext > label span:after { content: '\e801'; } .csslider21 > .cs_arrowprev:hover > label, .csslider21 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider21 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow21 .7s infinite ease-in-out; animation: nextArrow21 .7s infinite ease-in-out; } .csslider21 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow21 .7s infinite ease-in-out; animation: prevArrow21 .7s infinite ease-in-out; } @keyframes nextArrow21 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow21 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow21 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow21 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider21 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider21 > .cs_play_pause > label, .csslider21 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider21 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider21 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider21 > .cs_play_pause > label span:after { line-height: 28px; } .csslider21 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider21 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider21 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider21 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause21 .7s infinite ease-in-out; animation: playPause21 .7s infinite ease-in-out; } @-webkit-keyframes playPause21 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause21 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider21 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider21 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider21 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider21 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider21 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider21 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider21 > .cs_bullets > label:hover > .cs_point, .csslider21 > #cs_slide21_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider21 > #cs_pause21_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider21 > #cs_slide21_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider21 > #cs_pause21_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider21 > #cs_slide21_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider21 > #cs_pause21_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider21 > #cs_slide21_3:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider21 > #cs_pause21_3:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider21 > #cs_slide21_4:checked ~ .cs_bullets > label.num4 > .cs_point, .csslider21 > #cs_pause21_4:checked ~ .cs_bullets > label.num4 > .cs_point, .csslider21 > #cs_slide21_5:checked ~ .cs_bullets > label.num5 > .cs_point, .csslider21 > #cs_pause21_5:checked ~ .cs_bullets > label.num5 > .cs_point { background: #3A4A5A; } @keyframes bullet21 { 0%, 16.656666666666666% { background: #3A4A5A; } 16.666666666666668%, 100% { background: transparent; } } @-webkit-keyframes bullet21 { 0%, 16.656666666666666% { background: #3A4A5A; } 16.666666666666668%, 100% { background: transparent; } } .csslider21 > #cs_play21:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider21 > #cs_pause21:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet21 48000ms infinite -2000ms; animation: bullet21 48000ms infinite -2000ms; } .csslider21 > #cs_play21:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider21 > #cs_pause21:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet21 48000ms infinite 6000ms; animation: bullet21 48000ms infinite 6000ms; } .csslider21 > #cs_play21:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider21 > #cs_pause21:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet21 48000ms infinite 14000ms; animation: bullet21 48000ms infinite 14000ms; } .csslider21 > #cs_play21:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider21 > #cs_pause21:checked ~ .cs_bullets > label.num3 > .cs_point { -webkit-animation: bullet21 48000ms infinite 22000ms; animation: bullet21 48000ms infinite 22000ms; } .csslider21 > #cs_play21:checked ~ .cs_bullets > label.num4 > .cs_point, .csslider21 > #cs_pause21:checked ~ .cs_bullets > label.num4 > .cs_point { -webkit-animation: bullet21 48000ms infinite 30000ms; animation: bullet21 48000ms infinite 30000ms; } .csslider21 > #cs_play21:checked ~ .cs_bullets > label.num5 > .cs_point, .csslider21 > #cs_pause21:checked ~ .cs_bullets > label.num5 > .cs_point { -webkit-animation: bullet21 48000ms infinite 38000ms; animation: bullet21 48000ms infinite 38000ms; } .csslider21 > #cs_play21:checked ~ .cs_bullets > label > .cs_point, .csslider21 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider21 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider21 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider21 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider21 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider21 > #cs_slide21_0:checked ~ .cs_description > .num0 > .cs_title, .csslider21 > #cs_slide21_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider21 > #cs_pause21_0:checked ~ .cs_description > .num0 > .cs_title, .csslider21 > #cs_pause21_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider21 > #cs_slide21_1:checked ~ .cs_description > .num1 > .cs_title, .csslider21 > #cs_slide21_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider21 > #cs_pause21_1:checked ~ .cs_description > .num1 > .cs_title, .csslider21 > #cs_pause21_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider21 > #cs_slide21_2:checked ~ .cs_description > .num2 > .cs_title, .csslider21 > #cs_slide21_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider21 > #cs_pause21_2:checked ~ .cs_description > .num2 > .cs_title, .csslider21 > #cs_pause21_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider21 > #cs_slide21_3:checked ~ .cs_description > .num3 > .cs_title, .csslider21 > #cs_slide21_3:checked ~ .cs_description > .num3 > .cs_descr, .csslider21 > #cs_pause21_3:checked ~ .cs_description > .num3 > .cs_title, .csslider21 > #cs_pause21_3:checked ~ .cs_description > .num3 > .cs_descr, .csslider21 > #cs_slide21_4:checked ~ .cs_description > .num4 > .cs_title, .csslider21 > #cs_slide21_4:checked ~ .cs_description > .num4 > .cs_descr, .csslider21 > #cs_pause21_4:checked ~ .cs_description > .num4 > .cs_title, .csslider21 > #cs_pause21_4:checked ~ .cs_description > .num4 > .cs_descr, .csslider21 > #cs_slide21_5:checked ~ .cs_description > .num5 > .cs_title, .csslider21 > #cs_slide21_5:checked ~ .cs_description > .num5 > .cs_descr, .csslider21 > #cs_pause21_5:checked ~ .cs_description > .num5 > .cs_title, .csslider21 > #cs_pause21_5:checked ~ .cs_description > .num5 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider21 > #cs_slide21_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider21 > #cs_pause21_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider21 > #cs_slide21_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider21 > #cs_pause21_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider21 > #cs_slide21_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider21 > #cs_pause21_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider21 > #cs_slide21_3:checked ~ .cs_description > .num3 .cs_wrapper, .csslider21 > #cs_pause21_3:checked ~ .cs_description > .num3 .cs_wrapper, .csslider21 > #cs_slide21_4:checked ~ .cs_description > .num4 .cs_wrapper, .csslider21 > #cs_pause21_4:checked ~ .cs_description > .num4 .cs_wrapper, .csslider21 > #cs_slide21_5:checked ~ .cs_description > .num5 .cs_wrapper, .csslider21 > #cs_pause21_5:checked ~ .cs_description > .num5 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider21 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider21 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider21 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider21 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title21 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 17.66625%, 100% { z-index: 0; } } @keyframes cs_title21 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 17.66625%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr21 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 17.66625%, 100% { z-index: 0; } } @keyframes cs_descr21 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 17.66625%, 100% { z-index: 0; } } .csslider21 > #cs_play21:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title21 48000ms infinite -1400ms ease; animation: cs_title21 48000ms infinite -1400ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title21 48000ms infinite 6600ms ease; animation: cs_title21 48000ms infinite 6600ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title21 48000ms infinite 14600ms ease; animation: cs_title21 48000ms infinite 14600ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num3 > .cs_title { -webkit-animation: cs_title21 48000ms infinite 22600ms ease; animation: cs_title21 48000ms infinite 22600ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num4 > .cs_title { -webkit-animation: cs_title21 48000ms infinite 30600ms ease; animation: cs_title21 48000ms infinite 30600ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num5 > .cs_title { -webkit-animation: cs_title21 48000ms infinite 38600ms ease; animation: cs_title21 48000ms infinite 38600ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr21 48000ms infinite -1150ms ease; animation: cs_descr21 48000ms infinite -1150ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr21 48000ms infinite 6850ms ease; animation: cs_descr21 48000ms infinite 6850ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr21 48000ms infinite 14850ms ease; animation: cs_descr21 48000ms infinite 14850ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num3 > .cs_descr { -webkit-animation: cs_descr21 48000ms infinite 22850ms ease; animation: cs_descr21 48000ms infinite 22850ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num4 > .cs_descr { -webkit-animation: cs_descr21 48000ms infinite 30850ms ease; animation: cs_descr21 48000ms infinite 30850ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num5 > .cs_descr { -webkit-animation: cs_descr21 48000ms infinite 38850ms ease; animation: cs_descr21 48000ms infinite 38850ms ease; } @-webkit-keyframes cs_title_text21 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text21 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text21 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text21 { 0.6927083333333334%, 15.963958333333334% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 0.9895833333333334%, 15.667083333333334% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 17.65625% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider21 > #cs_play21:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text21 48000ms infinite -1250ms ease; animation: cs_title_text21 48000ms infinite -1250ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text21 48000ms infinite 6750ms ease; animation: cs_title_text21 48000ms infinite 6750ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text21 48000ms infinite 14750ms ease; animation: cs_title_text21 48000ms infinite 14750ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num3 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text21 48000ms infinite 22750ms ease; animation: cs_title_text21 48000ms infinite 22750ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num4 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text21 48000ms infinite 30750ms ease; animation: cs_title_text21 48000ms infinite 30750ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num5 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text21 48000ms infinite 38750ms ease; animation: cs_title_text21 48000ms infinite 38750ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text21 48000ms infinite -1000ms ease; animation: cs_descr_text21 48000ms infinite -1000ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text21 48000ms infinite 7000ms ease; animation: cs_descr_text21 48000ms infinite 7000ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text21 48000ms infinite 15000ms ease; animation: cs_descr_text21 48000ms infinite 15000ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num3 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text21 48000ms infinite 23000ms ease; animation: cs_descr_text21 48000ms infinite 23000ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num4 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text21 48000ms infinite 31000ms ease; animation: cs_descr_text21 48000ms infinite 31000ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > .num5 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text21 48000ms infinite 39000ms ease; animation: cs_descr_text21 48000ms infinite 39000ms ease; } .csslider21 > #cs_play21:checked ~ .cs_description > label > .cs_title, .csslider21 > #cs_play21:checked ~ .cs_description > label > .cs_descr, .csslider21 > #cs_play21:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider21 > #cs_play21:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider21 > .pause:checked ~ .cs_description > label > .cs_title, .csslider21 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider21 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider21 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider21 > .cs_description, .csslider21 > .cs_bullets { display: none; } } @media only screen and (max-width: 1000px) { .csslider21, .csslider21 > ul { height: auto; } } /* ------------- 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; } .csslider22 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider22, .csslider22 *, .csslider22 *:after, .csslider22 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider22 > .cs_anchor { display: none; } .csslider22 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider22 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider22 > ul > .slide.img img { width: 100%; } .csslider22 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider22 > 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); } .csslider22 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider22 > ul > li.img, .csslider22 > .cs_arrowprev, .csslider22 > .cs_arrownext, .csslider22 > .cs_bullets, .csslider22 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider22 > .cs_arrowprev, .csslider22 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider22 > .cs_arrowprev > label, .csslider22 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider22 > .cs_arrowprev { left: 0; } .csslider22 > .cs_arrownext { right: 0; } .csslider22 > .slide:checked ~ .cs_arrowprev > label, .csslider22 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider22 > #cs_slide22_0:checked ~ .cs_arrowprev > label.num0, .csslider22 > #cs_pause22_0:checked ~ .cs_arrowprev > label.num0, .csslider22 > #cs_slide22_0:checked ~ .cs_arrownext > label.num0, .csslider22 > #cs_pause22_0:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow22 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow22 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider22 > #cs_play22:checked ~ .cs_arrowprev > label.num0, .csslider22 > #cs_play22:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow22 8000ms infinite -2000ms; animation: arrow22 8000ms infinite -2000ms; } .csslider22 > .slide:checked ~ .cs_arrowprev > label, .csslider22 > .slide:checked ~ .cs_arrownext > label, .csslider22 > .pause:checked ~ .cs_arrowprev > label, .csslider22 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider22 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider22 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider22 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider22 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider22 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider22 > .cs_description { z-index: 3; } .csslider22 > .cs_description a, .csslider22 > .cs_description a:visited, .csslider22 > .cs_description a:active { color: inherit; } .csslider22 > .cs_description a:hover { text-decoration: none; } .csslider22 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider22 > .cs_description > label > span { vertical-align: top; } .csslider22 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider22 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider22 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider22 > #cs_play22:checked ~ .cs_play_pause > .cs_pause, .csslider22 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider22 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider22 > #cs_play22:checked ~ .cs_play_pause > .cs_play, .csslider22 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider22 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange22 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange22 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider22 > #cs_play22:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange22 8000ms infinite -2000ms; animation: pauseChange22 8000ms infinite -2000ms; } .csslider22 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider22 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider22 > ul > .slide.num0 { left: 0%; } .csslider22 > #cs_slide22_0:checked ~ ul > .slide, .csslider22 > #cs_pause22_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider22 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide22 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slide22 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slide22-ie { 0%, 75% { margin-left: 0%; } } @keyframes slide22-ie { 0%, 75% { margin-left: 0%; } } .csslider22 > #cs_play22:checked ~ ul > .slide { -webkit-animation: slide22 8000ms infinite; animation: slide22 8000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider22 > #cs_play22:checked ~ ul > .slide { animation: slide22-ie 8000ms infinite; } } .csslider22 > #cs_play22:checked ~ ul > .slide, .csslider22 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider22 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider22 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider22 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider22 > .cs_arrowprev, .csslider22 > .cs_arrownext, .csslider22 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider22:hover > .cs_arrowprev, .csslider22:hover > .cs_arrownext, .csslider22:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider22 > .cs_arrowprev > label, .csslider22 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider22 > .cs_arrowprev > label, .csslider22 > .cs_arrownext > label, .csslider22 > .cs_arrowprev > label span:after, .csslider22 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider22 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider22 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider22 > .cs_arrowprev > label span, .csslider22 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider22 > .cs_arrowprev > label span:after, .csslider22 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider22 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider22 > .cs_arrownext > label span:after { line-height: 29px; } .csslider22 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider22 > .cs_arrownext > label span:after { content: '\e801'; } .csslider22 > .cs_arrowprev:hover > label, .csslider22 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider22 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow22 .7s infinite ease-in-out; animation: nextArrow22 .7s infinite ease-in-out; } .csslider22 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow22 .7s infinite ease-in-out; animation: prevArrow22 .7s infinite ease-in-out; } @keyframes nextArrow22 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow22 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow22 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow22 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider22 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider22 > .cs_play_pause > label, .csslider22 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider22 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider22 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider22 > .cs_play_pause > label span:after { line-height: 28px; } .csslider22 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider22 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider22 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider22 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause22 .7s infinite ease-in-out; animation: playPause22 .7s infinite ease-in-out; } @-webkit-keyframes playPause22 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause22 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider22 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider22 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider22 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider22 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider22 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider22 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider22 > .cs_bullets > label:hover > .cs_point, .csslider22 > #cs_slide22_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider22 > #cs_pause22_0:checked ~ .cs_bullets > label.num0 > .cs_point { background: #3A4A5A; } @keyframes bullet22 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } @-webkit-keyframes bullet22 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } .csslider22 > #cs_play22:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider22 > #cs_pause22:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet22 8000ms infinite -2000ms; animation: bullet22 8000ms infinite -2000ms; } .csslider22 > #cs_play22:checked ~ .cs_bullets > label > .cs_point, .csslider22 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider22 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider22 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider22 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider22 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider22 > #cs_slide22_0:checked ~ .cs_description > .num0 > .cs_title, .csslider22 > #cs_slide22_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider22 > #cs_pause22_0:checked ~ .cs_description > .num0 > .cs_title, .csslider22 > #cs_pause22_0:checked ~ .cs_description > .num0 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider22 > #cs_slide22_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider22 > #cs_pause22_0:checked ~ .cs_description > .num0 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider22 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider22 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider22 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider22 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title22 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_title22 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr22 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_descr22 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } .csslider22 > #cs_play22:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title22 8000ms infinite -1400ms ease; animation: cs_title22 8000ms infinite -1400ms ease; } .csslider22 > #cs_play22:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr22 8000ms infinite -1150ms ease; animation: cs_descr22 8000ms infinite -1150ms ease; } @-webkit-keyframes cs_title_text22 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text22 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text22 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text22 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider22 > #cs_play22:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text22 8000ms infinite -1250ms ease; animation: cs_title_text22 8000ms infinite -1250ms ease; } .csslider22 > #cs_play22:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text22 8000ms infinite -1000ms ease; animation: cs_descr_text22 8000ms infinite -1000ms ease; } .csslider22 > #cs_play22:checked ~ .cs_description > label > .cs_title, .csslider22 > #cs_play22:checked ~ .cs_description > label > .cs_descr, .csslider22 > #cs_play22:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider22 > #cs_play22:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider22 > .pause:checked ~ .cs_description > label > .cs_title, .csslider22 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider22 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider22 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider22 > .cs_description, .csslider22 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider23 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider23, .csslider23 *, .csslider23 *:after, .csslider23 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider23 > .cs_anchor { display: none; } .csslider23 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider23 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider23 > ul > .slide.img img { width: 100%; } .csslider23 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider23 > 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); } .csslider23 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider23 > ul > li.img, .csslider23 > .cs_arrowprev, .csslider23 > .cs_arrownext, .csslider23 > .cs_bullets, .csslider23 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider23 > .cs_arrowprev, .csslider23 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider23 > .cs_arrowprev > label, .csslider23 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider23 > .cs_arrowprev { left: 0; } .csslider23 > .cs_arrownext { right: 0; } .csslider23 > .slide:checked ~ .cs_arrowprev > label, .csslider23 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider23 > #cs_slide23_0:checked ~ .cs_arrowprev > label.num1, .csslider23 > #cs_pause23_0:checked ~ .cs_arrowprev > label.num1, .csslider23 > #cs_slide23_0:checked ~ .cs_arrownext > label.num1, .csslider23 > #cs_pause23_0:checked ~ .cs_arrownext > label.num1, .csslider23 > #cs_slide23_1:checked ~ .cs_arrowprev > label.num0, .csslider23 > #cs_pause23_1:checked ~ .cs_arrowprev > label.num0, .csslider23 > #cs_slide23_1:checked ~ .cs_arrownext > label.num0, .csslider23 > #cs_pause23_1:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow23 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow23 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider23 > #cs_play23:checked ~ .cs_arrowprev > label.num1, .csslider23 > #cs_play23:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow23 16000ms infinite -2000ms; animation: arrow23 16000ms infinite -2000ms; } .csslider23 > #cs_play23:checked ~ .cs_arrowprev > label.num0, .csslider23 > #cs_play23:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow23 16000ms infinite 6000ms; animation: arrow23 16000ms infinite 6000ms; } .csslider23 > .slide:checked ~ .cs_arrowprev > label, .csslider23 > .slide:checked ~ .cs_arrownext > label, .csslider23 > .pause:checked ~ .cs_arrowprev > label, .csslider23 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider23 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider23 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider23 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider23 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider23 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider23 > .cs_description { z-index: 3; } .csslider23 > .cs_description a, .csslider23 > .cs_description a:visited, .csslider23 > .cs_description a:active { color: inherit; } .csslider23 > .cs_description a:hover { text-decoration: none; } .csslider23 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider23 > .cs_description > label > span { vertical-align: top; } .csslider23 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider23 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider23 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider23 > #cs_play23:checked ~ .cs_play_pause > .cs_pause, .csslider23 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider23 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider23 > #cs_play23:checked ~ .cs_play_pause > .cs_play, .csslider23 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider23 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange23 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange23 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider23 > #cs_play23:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange23 16000ms infinite -2000ms; animation: pauseChange23 16000ms infinite -2000ms; } .csslider23 > #cs_play23:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange23 16000ms infinite 6000ms; animation: pauseChange23 16000ms infinite 6000ms; } .csslider23 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider23 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider23 > ul > .slide.num0 { left: 0%; } .csslider23 > ul > .slide.num1 { left: 100%; } .csslider23 > #cs_slide23_0:checked ~ ul > .slide, .csslider23 > #cs_pause23_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider23 > #cs_slide23_1:checked ~ ul > .slide, .csslider23 > #cs_pause23_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider23 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide23 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slide23 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes slide23-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } @keyframes slide23-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } .csslider23 > #cs_play23:checked ~ ul > .slide { -webkit-animation: slide23 16000ms infinite; animation: slide23 16000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider23 > #cs_play23:checked ~ ul > .slide { animation: slide23-ie 16000ms infinite; } } .csslider23 > #cs_play23:checked ~ ul > .slide, .csslider23 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider23 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider23 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider23 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider23 > .cs_arrowprev, .csslider23 > .cs_arrownext, .csslider23 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider23:hover > .cs_arrowprev, .csslider23:hover > .cs_arrownext, .csslider23:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider23 > .cs_arrowprev > label, .csslider23 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider23 > .cs_arrowprev > label, .csslider23 > .cs_arrownext > label, .csslider23 > .cs_arrowprev > label span:after, .csslider23 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider23 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider23 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider23 > .cs_arrowprev > label span, .csslider23 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider23 > .cs_arrowprev > label span:after, .csslider23 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider23 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider23 > .cs_arrownext > label span:after { line-height: 29px; } .csslider23 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider23 > .cs_arrownext > label span:after { content: '\e801'; } .csslider23 > .cs_arrowprev:hover > label, .csslider23 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider23 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow23 .7s infinite ease-in-out; animation: nextArrow23 .7s infinite ease-in-out; } .csslider23 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow23 .7s infinite ease-in-out; animation: prevArrow23 .7s infinite ease-in-out; } @keyframes nextArrow23 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow23 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow23 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow23 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider23 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider23 > .cs_play_pause > label, .csslider23 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider23 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider23 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider23 > .cs_play_pause > label span:after { line-height: 28px; } .csslider23 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider23 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider23 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider23 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause23 .7s infinite ease-in-out; animation: playPause23 .7s infinite ease-in-out; } @-webkit-keyframes playPause23 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause23 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider23 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider23 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider23 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider23 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider23 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider23 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider23 > .cs_bullets > label:hover > .cs_point, .csslider23 > #cs_slide23_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider23 > #cs_pause23_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider23 > #cs_slide23_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider23 > #cs_pause23_1:checked ~ .cs_bullets > label.num1 > .cs_point { background: #3A4A5A; } @keyframes bullet23 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } @-webkit-keyframes bullet23 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } .csslider23 > #cs_play23:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider23 > #cs_pause23:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet23 16000ms infinite -2000ms; animation: bullet23 16000ms infinite -2000ms; } .csslider23 > #cs_play23:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider23 > #cs_pause23:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet23 16000ms infinite 6000ms; animation: bullet23 16000ms infinite 6000ms; } .csslider23 > #cs_play23:checked ~ .cs_bullets > label > .cs_point, .csslider23 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider23 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider23 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider23 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider23 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider23 > #cs_slide23_0:checked ~ .cs_description > .num0 > .cs_title, .csslider23 > #cs_slide23_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider23 > #cs_pause23_0:checked ~ .cs_description > .num0 > .cs_title, .csslider23 > #cs_pause23_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider23 > #cs_slide23_1:checked ~ .cs_description > .num1 > .cs_title, .csslider23 > #cs_slide23_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider23 > #cs_pause23_1:checked ~ .cs_description > .num1 > .cs_title, .csslider23 > #cs_pause23_1:checked ~ .cs_description > .num1 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider23 > #cs_slide23_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider23 > #cs_pause23_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider23 > #cs_slide23_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider23 > #cs_pause23_1:checked ~ .cs_description > .num1 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider23 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider23 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider23 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider23 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title23 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_title23 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr23 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_descr23 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } .csslider23 > #cs_play23:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title23 16000ms infinite -1400ms ease; animation: cs_title23 16000ms infinite -1400ms ease; } .csslider23 > #cs_play23:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title23 16000ms infinite 6600ms ease; animation: cs_title23 16000ms infinite 6600ms ease; } .csslider23 > #cs_play23:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr23 16000ms infinite -1150ms ease; animation: cs_descr23 16000ms infinite -1150ms ease; } .csslider23 > #cs_play23:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr23 16000ms infinite 6850ms ease; animation: cs_descr23 16000ms infinite 6850ms ease; } @-webkit-keyframes cs_title_text23 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text23 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text23 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text23 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider23 > #cs_play23:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text23 16000ms infinite -1250ms ease; animation: cs_title_text23 16000ms infinite -1250ms ease; } .csslider23 > #cs_play23:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text23 16000ms infinite 6750ms ease; animation: cs_title_text23 16000ms infinite 6750ms ease; } .csslider23 > #cs_play23:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text23 16000ms infinite -1000ms ease; animation: cs_descr_text23 16000ms infinite -1000ms ease; } .csslider23 > #cs_play23:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text23 16000ms infinite 7000ms ease; animation: cs_descr_text23 16000ms infinite 7000ms ease; } .csslider23 > #cs_play23:checked ~ .cs_description > label > .cs_title, .csslider23 > #cs_play23:checked ~ .cs_description > label > .cs_descr, .csslider23 > #cs_play23:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider23 > #cs_play23:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider23 > .pause:checked ~ .cs_description > label > .cs_title, .csslider23 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider23 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider23 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider23 > .cs_description, .csslider23 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider24 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider24, .csslider24 *, .csslider24 *:after, .csslider24 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider24 > .cs_anchor { display: none; } .csslider24 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider24 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider24 > ul > .slide.img img { width: 100%; } .csslider24 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider24 > 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); } .csslider24 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider24 > ul > li.img, .csslider24 > .cs_arrowprev, .csslider24 > .cs_arrownext, .csslider24 > .cs_bullets, .csslider24 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider24 > .cs_arrowprev, .csslider24 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider24 > .cs_arrowprev > label, .csslider24 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider24 > .cs_arrowprev { left: 0; } .csslider24 > .cs_arrownext { right: 0; } .csslider24 > .slide:checked ~ .cs_arrowprev > label, .csslider24 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider24 > #cs_slide24_0:checked ~ .cs_arrowprev > label.num0, .csslider24 > #cs_pause24_0:checked ~ .cs_arrowprev > label.num0, .csslider24 > #cs_slide24_0:checked ~ .cs_arrownext > label.num0, .csslider24 > #cs_pause24_0:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow24 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow24 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider24 > #cs_play24:checked ~ .cs_arrowprev > label.num0, .csslider24 > #cs_play24:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow24 8000ms infinite -2000ms; animation: arrow24 8000ms infinite -2000ms; } .csslider24 > .slide:checked ~ .cs_arrowprev > label, .csslider24 > .slide:checked ~ .cs_arrownext > label, .csslider24 > .pause:checked ~ .cs_arrowprev > label, .csslider24 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider24 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider24 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider24 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider24 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider24 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider24 > .cs_description { z-index: 3; } .csslider24 > .cs_description a, .csslider24 > .cs_description a:visited, .csslider24 > .cs_description a:active { color: inherit; } .csslider24 > .cs_description a:hover { text-decoration: none; } .csslider24 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider24 > .cs_description > label > span { vertical-align: top; } .csslider24 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider24 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider24 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider24 > #cs_play24:checked ~ .cs_play_pause > .cs_pause, .csslider24 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider24 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider24 > #cs_play24:checked ~ .cs_play_pause > .cs_play, .csslider24 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider24 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange24 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange24 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider24 > #cs_play24:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange24 8000ms infinite -2000ms; animation: pauseChange24 8000ms infinite -2000ms; } .csslider24 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider24 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider24 > ul > .slide.num0 { left: 0%; } .csslider24 > #cs_slide24_0:checked ~ ul > .slide, .csslider24 > #cs_pause24_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider24 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide24 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slide24 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slide24-ie { 0%, 75% { margin-left: 0%; } } @keyframes slide24-ie { 0%, 75% { margin-left: 0%; } } .csslider24 > #cs_play24:checked ~ ul > .slide { -webkit-animation: slide24 8000ms infinite; animation: slide24 8000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider24 > #cs_play24:checked ~ ul > .slide { animation: slide24-ie 8000ms infinite; } } .csslider24 > #cs_play24:checked ~ ul > .slide, .csslider24 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider24 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider24 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider24 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider24 > .cs_arrowprev, .csslider24 > .cs_arrownext, .csslider24 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider24:hover > .cs_arrowprev, .csslider24:hover > .cs_arrownext, .csslider24:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider24 > .cs_arrowprev > label, .csslider24 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider24 > .cs_arrowprev > label, .csslider24 > .cs_arrownext > label, .csslider24 > .cs_arrowprev > label span:after, .csslider24 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider24 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider24 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider24 > .cs_arrowprev > label span, .csslider24 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider24 > .cs_arrowprev > label span:after, .csslider24 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider24 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider24 > .cs_arrownext > label span:after { line-height: 29px; } .csslider24 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider24 > .cs_arrownext > label span:after { content: '\e801'; } .csslider24 > .cs_arrowprev:hover > label, .csslider24 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider24 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow24 .7s infinite ease-in-out; animation: nextArrow24 .7s infinite ease-in-out; } .csslider24 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow24 .7s infinite ease-in-out; animation: prevArrow24 .7s infinite ease-in-out; } @keyframes nextArrow24 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow24 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow24 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow24 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider24 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider24 > .cs_play_pause > label, .csslider24 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider24 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider24 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider24 > .cs_play_pause > label span:after { line-height: 28px; } .csslider24 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider24 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider24 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider24 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause24 .7s infinite ease-in-out; animation: playPause24 .7s infinite ease-in-out; } @-webkit-keyframes playPause24 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause24 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider24 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider24 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider24 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider24 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider24 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider24 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider24 > .cs_bullets > label:hover > .cs_point, .csslider24 > #cs_slide24_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider24 > #cs_pause24_0:checked ~ .cs_bullets > label.num0 > .cs_point { background: #3A4A5A; } @keyframes bullet24 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } @-webkit-keyframes bullet24 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } .csslider24 > #cs_play24:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider24 > #cs_pause24:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet24 8000ms infinite -2000ms; animation: bullet24 8000ms infinite -2000ms; } .csslider24 > #cs_play24:checked ~ .cs_bullets > label > .cs_point, .csslider24 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider24 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider24 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider24 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider24 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider24 > #cs_slide24_0:checked ~ .cs_description > .num0 > .cs_title, .csslider24 > #cs_slide24_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider24 > #cs_pause24_0:checked ~ .cs_description > .num0 > .cs_title, .csslider24 > #cs_pause24_0:checked ~ .cs_description > .num0 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider24 > #cs_slide24_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider24 > #cs_pause24_0:checked ~ .cs_description > .num0 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider24 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider24 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider24 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider24 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title24 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_title24 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr24 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_descr24 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } .csslider24 > #cs_play24:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title24 8000ms infinite -1400ms ease; animation: cs_title24 8000ms infinite -1400ms ease; } .csslider24 > #cs_play24:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr24 8000ms infinite -1150ms ease; animation: cs_descr24 8000ms infinite -1150ms ease; } @-webkit-keyframes cs_title_text24 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text24 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text24 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text24 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider24 > #cs_play24:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text24 8000ms infinite -1250ms ease; animation: cs_title_text24 8000ms infinite -1250ms ease; } .csslider24 > #cs_play24:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text24 8000ms infinite -1000ms ease; animation: cs_descr_text24 8000ms infinite -1000ms ease; } .csslider24 > #cs_play24:checked ~ .cs_description > label > .cs_title, .csslider24 > #cs_play24:checked ~ .cs_description > label > .cs_descr, .csslider24 > #cs_play24:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider24 > #cs_play24:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider24 > .pause:checked ~ .cs_description > label > .cs_title, .csslider24 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider24 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider24 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider24 > .cs_description, .csslider24 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider25 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider25, .csslider25 *, .csslider25 *:after, .csslider25 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider25 > .cs_anchor { display: none; } .csslider25 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider25 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider25 > ul > .slide.img img { width: 100%; } .csslider25 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider25 > 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); } .csslider25 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider25 > ul > li.img, .csslider25 > .cs_arrowprev, .csslider25 > .cs_arrownext, .csslider25 > .cs_bullets, .csslider25 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider25 > .cs_arrowprev, .csslider25 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider25 > .cs_arrowprev > label, .csslider25 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider25 > .cs_arrowprev { left: 0; } .csslider25 > .cs_arrownext { right: 0; } .csslider25 > .slide:checked ~ .cs_arrowprev > label, .csslider25 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider25 > #cs_slide25_0:checked ~ .cs_arrowprev > label.num2, .csslider25 > #cs_pause25_0:checked ~ .cs_arrowprev > label.num2, .csslider25 > #cs_slide25_0:checked ~ .cs_arrownext > label.num1, .csslider25 > #cs_pause25_0:checked ~ .cs_arrownext > label.num1, .csslider25 > #cs_slide25_1:checked ~ .cs_arrowprev > label.num0, .csslider25 > #cs_pause25_1:checked ~ .cs_arrowprev > label.num0, .csslider25 > #cs_slide25_1:checked ~ .cs_arrownext > label.num2, .csslider25 > #cs_pause25_1:checked ~ .cs_arrownext > label.num2, .csslider25 > #cs_slide25_2:checked ~ .cs_arrowprev > label.num1, .csslider25 > #cs_pause25_2:checked ~ .cs_arrowprev > label.num1, .csslider25 > #cs_slide25_2:checked ~ .cs_arrownext > label.num0, .csslider25 > #cs_pause25_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow25 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow25 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider25 > #cs_play25:checked ~ .cs_arrowprev > label.num2, .csslider25 > #cs_play25:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow25 24000ms infinite -2000ms; animation: arrow25 24000ms infinite -2000ms; } .csslider25 > #cs_play25:checked ~ .cs_arrowprev > label.num0, .csslider25 > #cs_play25:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow25 24000ms infinite 6000ms; animation: arrow25 24000ms infinite 6000ms; } .csslider25 > #cs_play25:checked ~ .cs_arrowprev > label.num1, .csslider25 > #cs_play25:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow25 24000ms infinite 14000ms; animation: arrow25 24000ms infinite 14000ms; } .csslider25 > .slide:checked ~ .cs_arrowprev > label, .csslider25 > .slide:checked ~ .cs_arrownext > label, .csslider25 > .pause:checked ~ .cs_arrowprev > label, .csslider25 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider25 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider25 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider25 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider25 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider25 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider25 > .cs_description { z-index: 3; } .csslider25 > .cs_description a, .csslider25 > .cs_description a:visited, .csslider25 > .cs_description a:active { color: inherit; } .csslider25 > .cs_description a:hover { text-decoration: none; } .csslider25 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider25 > .cs_description > label > span { vertical-align: top; } .csslider25 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider25 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider25 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider25 > #cs_play25:checked ~ .cs_play_pause > .cs_pause, .csslider25 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider25 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider25 > #cs_play25:checked ~ .cs_play_pause > .cs_play, .csslider25 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider25 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange25 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange25 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider25 > #cs_play25:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange25 24000ms infinite -2000ms; animation: pauseChange25 24000ms infinite -2000ms; } .csslider25 > #cs_play25:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange25 24000ms infinite 6000ms; animation: pauseChange25 24000ms infinite 6000ms; } .csslider25 > #cs_play25:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange25 24000ms infinite 14000ms; animation: pauseChange25 24000ms infinite 14000ms; } .csslider25 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider25 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider25 > ul > .slide.num0 { left: 0%; } .csslider25 > ul > .slide.num1 { left: 100%; } .csslider25 > ul > .slide.num2 { left: 200%; } .csslider25 > #cs_slide25_0:checked ~ ul > .slide, .csslider25 > #cs_pause25_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider25 > #cs_slide25_1:checked ~ ul > .slide, .csslider25 > #cs_pause25_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider25 > #cs_slide25_2:checked ~ ul > .slide, .csslider25 > #cs_pause25_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider25 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide25 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes slide25 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes slide25-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } @keyframes slide25-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } .csslider25 > #cs_play25:checked ~ ul > .slide { -webkit-animation: slide25 24000ms infinite; animation: slide25 24000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider25 > #cs_play25:checked ~ ul > .slide { animation: slide25-ie 24000ms infinite; } } .csslider25 > #cs_play25:checked ~ ul > .slide, .csslider25 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider25 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider25 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider25 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider25 > .cs_arrowprev, .csslider25 > .cs_arrownext, .csslider25 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider25:hover > .cs_arrowprev, .csslider25:hover > .cs_arrownext, .csslider25:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider25 > .cs_arrowprev > label, .csslider25 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider25 > .cs_arrowprev > label, .csslider25 > .cs_arrownext > label, .csslider25 > .cs_arrowprev > label span:after, .csslider25 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider25 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider25 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider25 > .cs_arrowprev > label span, .csslider25 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider25 > .cs_arrowprev > label span:after, .csslider25 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider25 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider25 > .cs_arrownext > label span:after { line-height: 29px; } .csslider25 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider25 > .cs_arrownext > label span:after { content: '\e801'; } .csslider25 > .cs_arrowprev:hover > label, .csslider25 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider25 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow25 .7s infinite ease-in-out; animation: nextArrow25 .7s infinite ease-in-out; } .csslider25 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow25 .7s infinite ease-in-out; animation: prevArrow25 .7s infinite ease-in-out; } @keyframes nextArrow25 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow25 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow25 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow25 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider25 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider25 > .cs_play_pause > label, .csslider25 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider25 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider25 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider25 > .cs_play_pause > label span:after { line-height: 28px; } .csslider25 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider25 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider25 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider25 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause25 .7s infinite ease-in-out; animation: playPause25 .7s infinite ease-in-out; } @-webkit-keyframes playPause25 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause25 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider25 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider25 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider25 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider25 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider25 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider25 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider25 > .cs_bullets > label:hover > .cs_point, .csslider25 > #cs_slide25_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider25 > #cs_pause25_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider25 > #cs_slide25_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider25 > #cs_pause25_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider25 > #cs_slide25_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider25 > #cs_pause25_2:checked ~ .cs_bullets > label.num2 > .cs_point { background: #3A4A5A; } @keyframes bullet25 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-webkit-keyframes bullet25 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } .csslider25 > #cs_play25:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider25 > #cs_pause25:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet25 24000ms infinite -2000ms; animation: bullet25 24000ms infinite -2000ms; } .csslider25 > #cs_play25:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider25 > #cs_pause25:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet25 24000ms infinite 6000ms; animation: bullet25 24000ms infinite 6000ms; } .csslider25 > #cs_play25:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider25 > #cs_pause25:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet25 24000ms infinite 14000ms; animation: bullet25 24000ms infinite 14000ms; } .csslider25 > #cs_play25:checked ~ .cs_bullets > label > .cs_point, .csslider25 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider25 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider25 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider25 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider25 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider25 > #cs_slide25_0:checked ~ .cs_description > .num0 > .cs_title, .csslider25 > #cs_slide25_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider25 > #cs_pause25_0:checked ~ .cs_description > .num0 > .cs_title, .csslider25 > #cs_pause25_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider25 > #cs_slide25_1:checked ~ .cs_description > .num1 > .cs_title, .csslider25 > #cs_slide25_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider25 > #cs_pause25_1:checked ~ .cs_description > .num1 > .cs_title, .csslider25 > #cs_pause25_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider25 > #cs_slide25_2:checked ~ .cs_description > .num2 > .cs_title, .csslider25 > #cs_slide25_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider25 > #cs_pause25_2:checked ~ .cs_description > .num2 > .cs_title, .csslider25 > #cs_pause25_2:checked ~ .cs_description > .num2 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider25 > #cs_slide25_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider25 > #cs_pause25_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider25 > #cs_slide25_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider25 > #cs_pause25_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider25 > #cs_slide25_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider25 > #cs_pause25_2:checked ~ .cs_description > .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider25 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider25 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider25 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider25 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title25 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_title25 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr25 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_descr25 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } .csslider25 > #cs_play25:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title25 24000ms infinite -1400ms ease; animation: cs_title25 24000ms infinite -1400ms ease; } .csslider25 > #cs_play25:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title25 24000ms infinite 6600ms ease; animation: cs_title25 24000ms infinite 6600ms ease; } .csslider25 > #cs_play25:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title25 24000ms infinite 14600ms ease; animation: cs_title25 24000ms infinite 14600ms ease; } .csslider25 > #cs_play25:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr25 24000ms infinite -1150ms ease; animation: cs_descr25 24000ms infinite -1150ms ease; } .csslider25 > #cs_play25:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr25 24000ms infinite 6850ms ease; animation: cs_descr25 24000ms infinite 6850ms ease; } .csslider25 > #cs_play25:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr25 24000ms infinite 14850ms ease; animation: cs_descr25 24000ms infinite 14850ms ease; } @-webkit-keyframes cs_title_text25 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text25 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text25 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text25 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider25 > #cs_play25:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text25 24000ms infinite -1250ms ease; animation: cs_title_text25 24000ms infinite -1250ms ease; } .csslider25 > #cs_play25:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text25 24000ms infinite 6750ms ease; animation: cs_title_text25 24000ms infinite 6750ms ease; } .csslider25 > #cs_play25:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text25 24000ms infinite 14750ms ease; animation: cs_title_text25 24000ms infinite 14750ms ease; } .csslider25 > #cs_play25:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text25 24000ms infinite -1000ms ease; animation: cs_descr_text25 24000ms infinite -1000ms ease; } .csslider25 > #cs_play25:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text25 24000ms infinite 7000ms ease; animation: cs_descr_text25 24000ms infinite 7000ms ease; } .csslider25 > #cs_play25:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text25 24000ms infinite 15000ms ease; animation: cs_descr_text25 24000ms infinite 15000ms ease; } .csslider25 > #cs_play25:checked ~ .cs_description > label > .cs_title, .csslider25 > #cs_play25:checked ~ .cs_description > label > .cs_descr, .csslider25 > #cs_play25:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider25 > #cs_play25:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider25 > .pause:checked ~ .cs_description > label > .cs_title, .csslider25 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider25 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider25 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider25 > .cs_description, .csslider25 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider26 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider26, .csslider26 *, .csslider26 *:after, .csslider26 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider26 > .cs_anchor { display: none; } .csslider26 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider26 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider26 > ul > .slide.img img { width: 100%; } .csslider26 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider26 > 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); } .csslider26 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider26 > ul > li.img, .csslider26 > .cs_arrowprev, .csslider26 > .cs_arrownext, .csslider26 > .cs_bullets, .csslider26 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider26 > .cs_arrowprev, .csslider26 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider26 > .cs_arrowprev > label, .csslider26 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider26 > .cs_arrowprev { left: 0; } .csslider26 > .cs_arrownext { right: 0; } .csslider26 > .slide:checked ~ .cs_arrowprev > label, .csslider26 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider26 > #cs_slide26_0:checked ~ .cs_arrowprev > label.num0, .csslider26 > #cs_pause26_0:checked ~ .cs_arrowprev > label.num0, .csslider26 > #cs_slide26_0:checked ~ .cs_arrownext > label.num0, .csslider26 > #cs_pause26_0:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow26 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow26 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider26 > #cs_play26:checked ~ .cs_arrowprev > label.num0, .csslider26 > #cs_play26:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow26 8000ms infinite -2000ms; animation: arrow26 8000ms infinite -2000ms; } .csslider26 > .slide:checked ~ .cs_arrowprev > label, .csslider26 > .slide:checked ~ .cs_arrownext > label, .csslider26 > .pause:checked ~ .cs_arrowprev > label, .csslider26 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider26 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider26 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider26 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider26 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider26 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider26 > .cs_description { z-index: 3; } .csslider26 > .cs_description a, .csslider26 > .cs_description a:visited, .csslider26 > .cs_description a:active { color: inherit; } .csslider26 > .cs_description a:hover { text-decoration: none; } .csslider26 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider26 > .cs_description > label > span { vertical-align: top; } .csslider26 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider26 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider26 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider26 > #cs_play26:checked ~ .cs_play_pause > .cs_pause, .csslider26 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider26 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider26 > #cs_play26:checked ~ .cs_play_pause > .cs_play, .csslider26 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider26 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange26 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange26 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider26 > #cs_play26:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange26 8000ms infinite -2000ms; animation: pauseChange26 8000ms infinite -2000ms; } .csslider26 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider26 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider26 > ul > .slide.num0 { left: 0%; } .csslider26 > #cs_slide26_0:checked ~ ul > .slide, .csslider26 > #cs_pause26_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider26 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide26 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slide26 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slide26-ie { 0%, 75% { margin-left: 0%; } } @keyframes slide26-ie { 0%, 75% { margin-left: 0%; } } .csslider26 > #cs_play26:checked ~ ul > .slide { -webkit-animation: slide26 8000ms infinite; animation: slide26 8000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider26 > #cs_play26:checked ~ ul > .slide { animation: slide26-ie 8000ms infinite; } } .csslider26 > #cs_play26:checked ~ ul > .slide, .csslider26 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider26 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider26 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider26 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider26 > .cs_arrowprev, .csslider26 > .cs_arrownext, .csslider26 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider26:hover > .cs_arrowprev, .csslider26:hover > .cs_arrownext, .csslider26:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider26 > .cs_arrowprev > label, .csslider26 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider26 > .cs_arrowprev > label, .csslider26 > .cs_arrownext > label, .csslider26 > .cs_arrowprev > label span:after, .csslider26 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider26 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider26 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider26 > .cs_arrowprev > label span, .csslider26 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider26 > .cs_arrowprev > label span:after, .csslider26 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider26 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider26 > .cs_arrownext > label span:after { line-height: 29px; } .csslider26 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider26 > .cs_arrownext > label span:after { content: '\e801'; } .csslider26 > .cs_arrowprev:hover > label, .csslider26 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider26 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow26 .7s infinite ease-in-out; animation: nextArrow26 .7s infinite ease-in-out; } .csslider26 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow26 .7s infinite ease-in-out; animation: prevArrow26 .7s infinite ease-in-out; } @keyframes nextArrow26 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow26 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow26 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow26 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider26 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider26 > .cs_play_pause > label, .csslider26 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider26 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider26 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider26 > .cs_play_pause > label span:after { line-height: 28px; } .csslider26 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider26 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider26 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider26 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause26 .7s infinite ease-in-out; animation: playPause26 .7s infinite ease-in-out; } @-webkit-keyframes playPause26 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause26 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider26 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider26 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider26 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider26 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider26 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider26 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider26 > .cs_bullets > label:hover > .cs_point, .csslider26 > #cs_slide26_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider26 > #cs_pause26_0:checked ~ .cs_bullets > label.num0 > .cs_point { background: #3A4A5A; } @keyframes bullet26 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } @-webkit-keyframes bullet26 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } .csslider26 > #cs_play26:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider26 > #cs_pause26:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet26 8000ms infinite -2000ms; animation: bullet26 8000ms infinite -2000ms; } .csslider26 > #cs_play26:checked ~ .cs_bullets > label > .cs_point, .csslider26 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider26 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider26 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider26 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider26 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider26 > #cs_slide26_0:checked ~ .cs_description > .num0 > .cs_title, .csslider26 > #cs_slide26_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider26 > #cs_pause26_0:checked ~ .cs_description > .num0 > .cs_title, .csslider26 > #cs_pause26_0:checked ~ .cs_description > .num0 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider26 > #cs_slide26_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider26 > #cs_pause26_0:checked ~ .cs_description > .num0 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider26 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider26 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider26 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider26 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title26 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_title26 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr26 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_descr26 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } .csslider26 > #cs_play26:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title26 8000ms infinite -1400ms ease; animation: cs_title26 8000ms infinite -1400ms ease; } .csslider26 > #cs_play26:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr26 8000ms infinite -1150ms ease; animation: cs_descr26 8000ms infinite -1150ms ease; } @-webkit-keyframes cs_title_text26 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text26 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text26 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text26 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider26 > #cs_play26:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text26 8000ms infinite -1250ms ease; animation: cs_title_text26 8000ms infinite -1250ms ease; } .csslider26 > #cs_play26:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text26 8000ms infinite -1000ms ease; animation: cs_descr_text26 8000ms infinite -1000ms ease; } .csslider26 > #cs_play26:checked ~ .cs_description > label > .cs_title, .csslider26 > #cs_play26:checked ~ .cs_description > label > .cs_descr, .csslider26 > #cs_play26:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider26 > #cs_play26:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider26 > .pause:checked ~ .cs_description > label > .cs_title, .csslider26 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider26 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider26 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider26 > .cs_description, .csslider26 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider27 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider27, .csslider27 *, .csslider27 *:after, .csslider27 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider27 > .cs_anchor { display: none; } .csslider27 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider27 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider27 > ul > .slide.img img { width: 100%; } .csslider27 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider27 > 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); } .csslider27 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider27 > ul > li.img, .csslider27 > .cs_arrowprev, .csslider27 > .cs_arrownext, .csslider27 > .cs_bullets, .csslider27 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider27 > .cs_arrowprev, .csslider27 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider27 > .cs_arrowprev > label, .csslider27 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider27 > .cs_arrowprev { left: 0; } .csslider27 > .cs_arrownext { right: 0; } .csslider27 > .slide:checked ~ .cs_arrowprev > label, .csslider27 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider27 > #cs_slide27_0:checked ~ .cs_arrowprev > label.num0, .csslider27 > #cs_pause27_0:checked ~ .cs_arrowprev > label.num0, .csslider27 > #cs_slide27_0:checked ~ .cs_arrownext > label.num0, .csslider27 > #cs_pause27_0:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow27 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow27 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider27 > #cs_play27:checked ~ .cs_arrowprev > label.num0, .csslider27 > #cs_play27:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow27 8000ms infinite -2000ms; animation: arrow27 8000ms infinite -2000ms; } .csslider27 > .slide:checked ~ .cs_arrowprev > label, .csslider27 > .slide:checked ~ .cs_arrownext > label, .csslider27 > .pause:checked ~ .cs_arrowprev > label, .csslider27 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider27 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider27 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider27 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider27 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider27 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider27 > .cs_description { z-index: 3; } .csslider27 > .cs_description a, .csslider27 > .cs_description a:visited, .csslider27 > .cs_description a:active { color: inherit; } .csslider27 > .cs_description a:hover { text-decoration: none; } .csslider27 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider27 > .cs_description > label > span { vertical-align: top; } .csslider27 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider27 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider27 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider27 > #cs_play27:checked ~ .cs_play_pause > .cs_pause, .csslider27 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider27 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider27 > #cs_play27:checked ~ .cs_play_pause > .cs_play, .csslider27 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider27 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange27 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange27 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider27 > #cs_play27:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange27 8000ms infinite -2000ms; animation: pauseChange27 8000ms infinite -2000ms; } .csslider27 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider27 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider27 > ul > .slide.num0 { left: 0%; } .csslider27 > #cs_slide27_0:checked ~ ul > .slide, .csslider27 > #cs_pause27_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider27 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide27 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slide27 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slide27-ie { 0%, 75% { margin-left: 0%; } } @keyframes slide27-ie { 0%, 75% { margin-left: 0%; } } .csslider27 > #cs_play27:checked ~ ul > .slide { -webkit-animation: slide27 8000ms infinite; animation: slide27 8000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider27 > #cs_play27:checked ~ ul > .slide { animation: slide27-ie 8000ms infinite; } } .csslider27 > #cs_play27:checked ~ ul > .slide, .csslider27 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider27 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider27 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider27 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider27 > .cs_arrowprev, .csslider27 > .cs_arrownext, .csslider27 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider27:hover > .cs_arrowprev, .csslider27:hover > .cs_arrownext, .csslider27:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider27 > .cs_arrowprev > label, .csslider27 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider27 > .cs_arrowprev > label, .csslider27 > .cs_arrownext > label, .csslider27 > .cs_arrowprev > label span:after, .csslider27 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider27 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider27 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider27 > .cs_arrowprev > label span, .csslider27 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider27 > .cs_arrowprev > label span:after, .csslider27 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider27 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider27 > .cs_arrownext > label span:after { line-height: 29px; } .csslider27 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider27 > .cs_arrownext > label span:after { content: '\e801'; } .csslider27 > .cs_arrowprev:hover > label, .csslider27 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider27 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow27 .7s infinite ease-in-out; animation: nextArrow27 .7s infinite ease-in-out; } .csslider27 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow27 .7s infinite ease-in-out; animation: prevArrow27 .7s infinite ease-in-out; } @keyframes nextArrow27 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow27 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow27 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow27 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider27 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider27 > .cs_play_pause > label, .csslider27 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider27 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider27 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider27 > .cs_play_pause > label span:after { line-height: 28px; } .csslider27 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider27 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider27 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider27 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause27 .7s infinite ease-in-out; animation: playPause27 .7s infinite ease-in-out; } @-webkit-keyframes playPause27 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause27 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider27 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider27 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider27 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider27 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider27 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider27 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider27 > .cs_bullets > label:hover > .cs_point, .csslider27 > #cs_slide27_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider27 > #cs_pause27_0:checked ~ .cs_bullets > label.num0 > .cs_point { background: #3A4A5A; } @keyframes bullet27 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } @-webkit-keyframes bullet27 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } .csslider27 > #cs_play27:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider27 > #cs_pause27:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet27 8000ms infinite -2000ms; animation: bullet27 8000ms infinite -2000ms; } .csslider27 > #cs_play27:checked ~ .cs_bullets > label > .cs_point, .csslider27 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider27 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider27 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider27 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider27 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider27 > #cs_slide27_0:checked ~ .cs_description > .num0 > .cs_title, .csslider27 > #cs_slide27_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider27 > #cs_pause27_0:checked ~ .cs_description > .num0 > .cs_title, .csslider27 > #cs_pause27_0:checked ~ .cs_description > .num0 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider27 > #cs_slide27_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider27 > #cs_pause27_0:checked ~ .cs_description > .num0 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider27 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider27 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider27 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider27 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title27 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_title27 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr27 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_descr27 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } .csslider27 > #cs_play27:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title27 8000ms infinite -1400ms ease; animation: cs_title27 8000ms infinite -1400ms ease; } .csslider27 > #cs_play27:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr27 8000ms infinite -1150ms ease; animation: cs_descr27 8000ms infinite -1150ms ease; } @-webkit-keyframes cs_title_text27 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text27 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text27 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text27 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider27 > #cs_play27:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text27 8000ms infinite -1250ms ease; animation: cs_title_text27 8000ms infinite -1250ms ease; } .csslider27 > #cs_play27:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text27 8000ms infinite -1000ms ease; animation: cs_descr_text27 8000ms infinite -1000ms ease; } .csslider27 > #cs_play27:checked ~ .cs_description > label > .cs_title, .csslider27 > #cs_play27:checked ~ .cs_description > label > .cs_descr, .csslider27 > #cs_play27:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider27 > #cs_play27:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider27 > .pause:checked ~ .cs_description > label > .cs_title, .csslider27 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider27 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider27 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider27 > .cs_description, .csslider27 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider28 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider28, .csslider28 *, .csslider28 *:after, .csslider28 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider28 > .cs_anchor { display: none; } .csslider28 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider28 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider28 > ul > .slide.img img { width: 100%; } .csslider28 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider28 > 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); } .csslider28 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider28 > ul > li.img, .csslider28 > .cs_arrowprev, .csslider28 > .cs_arrownext, .csslider28 > .cs_bullets, .csslider28 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider28 > .cs_arrowprev, .csslider28 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider28 > .cs_arrowprev > label, .csslider28 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider28 > .cs_arrowprev { left: 0; } .csslider28 > .cs_arrownext { right: 0; } .csslider28 > .slide:checked ~ .cs_arrowprev > label, .csslider28 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider28 > #cs_slide28_0:checked ~ .cs_arrowprev > label.num3, .csslider28 > #cs_pause28_0:checked ~ .cs_arrowprev > label.num3, .csslider28 > #cs_slide28_0:checked ~ .cs_arrownext > label.num1, .csslider28 > #cs_pause28_0:checked ~ .cs_arrownext > label.num1, .csslider28 > #cs_slide28_1:checked ~ .cs_arrowprev > label.num0, .csslider28 > #cs_pause28_1:checked ~ .cs_arrowprev > label.num0, .csslider28 > #cs_slide28_1:checked ~ .cs_arrownext > label.num2, .csslider28 > #cs_pause28_1:checked ~ .cs_arrownext > label.num2, .csslider28 > #cs_slide28_2:checked ~ .cs_arrowprev > label.num1, .csslider28 > #cs_pause28_2:checked ~ .cs_arrowprev > label.num1, .csslider28 > #cs_slide28_2:checked ~ .cs_arrownext > label.num3, .csslider28 > #cs_pause28_2:checked ~ .cs_arrownext > label.num3, .csslider28 > #cs_slide28_3:checked ~ .cs_arrowprev > label.num2, .csslider28 > #cs_pause28_3:checked ~ .cs_arrowprev > label.num2, .csslider28 > #cs_slide28_3:checked ~ .cs_arrownext > label.num0, .csslider28 > #cs_pause28_3:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow28 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow28 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } .csslider28 > #cs_play28:checked ~ .cs_arrowprev > label.num3, .csslider28 > #cs_play28:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow28 32000ms infinite -2000ms; animation: arrow28 32000ms infinite -2000ms; } .csslider28 > #cs_play28:checked ~ .cs_arrowprev > label.num0, .csslider28 > #cs_play28:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow28 32000ms infinite 6000ms; animation: arrow28 32000ms infinite 6000ms; } .csslider28 > #cs_play28:checked ~ .cs_arrowprev > label.num1, .csslider28 > #cs_play28:checked ~ .cs_arrownext > label.num3 { -webkit-animation: arrow28 32000ms infinite 14000ms; animation: arrow28 32000ms infinite 14000ms; } .csslider28 > #cs_play28:checked ~ .cs_arrowprev > label.num2, .csslider28 > #cs_play28:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow28 32000ms infinite 22000ms; animation: arrow28 32000ms infinite 22000ms; } .csslider28 > .slide:checked ~ .cs_arrowprev > label, .csslider28 > .slide:checked ~ .cs_arrownext > label, .csslider28 > .pause:checked ~ .cs_arrowprev > label, .csslider28 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider28 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider28 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider28 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider28 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider28 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider28 > .cs_description { z-index: 3; } .csslider28 > .cs_description a, .csslider28 > .cs_description a:visited, .csslider28 > .cs_description a:active { color: inherit; } .csslider28 > .cs_description a:hover { text-decoration: none; } .csslider28 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider28 > .cs_description > label > span { vertical-align: top; } .csslider28 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider28 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider28 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider28 > #cs_play28:checked ~ .cs_play_pause > .cs_pause, .csslider28 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider28 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider28 > #cs_play28:checked ~ .cs_play_pause > .cs_play, .csslider28 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider28 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange28 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange28 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } .csslider28 > #cs_play28:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange28 32000ms infinite -2000ms; animation: pauseChange28 32000ms infinite -2000ms; } .csslider28 > #cs_play28:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange28 32000ms infinite 6000ms; animation: pauseChange28 32000ms infinite 6000ms; } .csslider28 > #cs_play28:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange28 32000ms infinite 14000ms; animation: pauseChange28 32000ms infinite 14000ms; } .csslider28 > #cs_play28:checked ~ .cs_play_pause > .cs_pause.num3 { opacity: 0; z-index: -1; -webkit-animation: pauseChange28 32000ms infinite 22000ms; animation: pauseChange28 32000ms infinite 22000ms; } .csslider28 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider28 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider28 > ul > .slide.num0 { left: 0%; } .csslider28 > ul > .slide.num1 { left: 100%; } .csslider28 > ul > .slide.num2 { left: 200%; } .csslider28 > ul > .slide.num3 { left: 300%; } .csslider28 > #cs_slide28_0:checked ~ ul > .slide, .csslider28 > #cs_pause28_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider28 > #cs_slide28_1:checked ~ ul > .slide, .csslider28 > #cs_pause28_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider28 > #cs_slide28_2:checked ~ ul > .slide, .csslider28 > #cs_pause28_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider28 > #cs_slide28_3:checked ~ ul > .slide, .csslider28 > #cs_pause28_3:checked ~ ul > .slide { -webkit-transform: translateX(-300%); transform: translateX(-300%); } .csslider28 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide28 { 0%, 18.75% { -webkit-transform: translateX(0%); transform: translateX(0%); } 25%, 43.75% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 50%, 68.75% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 75%, 93.75% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } } @keyframes slide28 { 0%, 18.75% { -webkit-transform: translateX(0%); transform: translateX(0%); } 25%, 43.75% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 50%, 68.75% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 75%, 93.75% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } } @-webkit-keyframes slide28-ie { 0%, 18.75% { margin-left: 0%; } 25%, 43.75% { margin-left: -100%; } 50%, 68.75% { margin-left: -200%; } 75%, 93.75% { margin-left: -300%; } } @keyframes slide28-ie { 0%, 18.75% { margin-left: 0%; } 25%, 43.75% { margin-left: -100%; } 50%, 68.75% { margin-left: -200%; } 75%, 93.75% { margin-left: -300%; } } .csslider28 > #cs_play28:checked ~ ul > .slide { -webkit-animation: slide28 32000ms infinite; animation: slide28 32000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider28 > #cs_play28:checked ~ ul > .slide { animation: slide28-ie 32000ms infinite; } } .csslider28 > #cs_play28:checked ~ ul > .slide, .csslider28 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider28 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider28 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider28 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider28 > .cs_arrowprev, .csslider28 > .cs_arrownext, .csslider28 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider28:hover > .cs_arrowprev, .csslider28:hover > .cs_arrownext, .csslider28:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider28 > .cs_arrowprev > label, .csslider28 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider28 > .cs_arrowprev > label, .csslider28 > .cs_arrownext > label, .csslider28 > .cs_arrowprev > label span:after, .csslider28 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider28 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider28 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider28 > .cs_arrowprev > label span, .csslider28 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider28 > .cs_arrowprev > label span:after, .csslider28 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider28 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider28 > .cs_arrownext > label span:after { line-height: 29px; } .csslider28 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider28 > .cs_arrownext > label span:after { content: '\e801'; } .csslider28 > .cs_arrowprev:hover > label, .csslider28 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider28 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow28 .7s infinite ease-in-out; animation: nextArrow28 .7s infinite ease-in-out; } .csslider28 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow28 .7s infinite ease-in-out; animation: prevArrow28 .7s infinite ease-in-out; } @keyframes nextArrow28 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow28 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow28 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow28 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider28 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider28 > .cs_play_pause > label, .csslider28 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider28 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider28 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider28 > .cs_play_pause > label span:after { line-height: 28px; } .csslider28 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider28 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider28 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider28 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause28 .7s infinite ease-in-out; animation: playPause28 .7s infinite ease-in-out; } @-webkit-keyframes playPause28 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause28 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider28 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider28 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider28 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider28 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider28 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider28 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider28 > .cs_bullets > label:hover > .cs_point, .csslider28 > #cs_slide28_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider28 > #cs_pause28_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider28 > #cs_slide28_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider28 > #cs_pause28_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider28 > #cs_slide28_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider28 > #cs_pause28_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider28 > #cs_slide28_3:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider28 > #cs_pause28_3:checked ~ .cs_bullets > label.num3 > .cs_point { background: #3A4A5A; } @keyframes bullet28 { 0%, 24.99% { background: #3A4A5A; } 25%, 100% { background: transparent; } } @-webkit-keyframes bullet28 { 0%, 24.99% { background: #3A4A5A; } 25%, 100% { background: transparent; } } .csslider28 > #cs_play28:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider28 > #cs_pause28:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet28 32000ms infinite -2000ms; animation: bullet28 32000ms infinite -2000ms; } .csslider28 > #cs_play28:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider28 > #cs_pause28:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet28 32000ms infinite 6000ms; animation: bullet28 32000ms infinite 6000ms; } .csslider28 > #cs_play28:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider28 > #cs_pause28:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet28 32000ms infinite 14000ms; animation: bullet28 32000ms infinite 14000ms; } .csslider28 > #cs_play28:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider28 > #cs_pause28:checked ~ .cs_bullets > label.num3 > .cs_point { -webkit-animation: bullet28 32000ms infinite 22000ms; animation: bullet28 32000ms infinite 22000ms; } .csslider28 > #cs_play28:checked ~ .cs_bullets > label > .cs_point, .csslider28 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider28 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider28 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider28 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider28 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider28 > #cs_slide28_0:checked ~ .cs_description > .num0 > .cs_title, .csslider28 > #cs_slide28_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider28 > #cs_pause28_0:checked ~ .cs_description > .num0 > .cs_title, .csslider28 > #cs_pause28_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider28 > #cs_slide28_1:checked ~ .cs_description > .num1 > .cs_title, .csslider28 > #cs_slide28_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider28 > #cs_pause28_1:checked ~ .cs_description > .num1 > .cs_title, .csslider28 > #cs_pause28_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider28 > #cs_slide28_2:checked ~ .cs_description > .num2 > .cs_title, .csslider28 > #cs_slide28_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider28 > #cs_pause28_2:checked ~ .cs_description > .num2 > .cs_title, .csslider28 > #cs_pause28_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider28 > #cs_slide28_3:checked ~ .cs_description > .num3 > .cs_title, .csslider28 > #cs_slide28_3:checked ~ .cs_description > .num3 > .cs_descr, .csslider28 > #cs_pause28_3:checked ~ .cs_description > .num3 > .cs_title, .csslider28 > #cs_pause28_3:checked ~ .cs_description > .num3 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider28 > #cs_slide28_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider28 > #cs_pause28_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider28 > #cs_slide28_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider28 > #cs_pause28_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider28 > #cs_slide28_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider28 > #cs_pause28_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider28 > #cs_slide28_3:checked ~ .cs_description > .num3 .cs_wrapper, .csslider28 > #cs_pause28_3:checked ~ .cs_description > .num3 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider28 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider28 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider28 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider28 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title28 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 26.494375%, 100% { z-index: 0; } } @keyframes cs_title28 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 26.494375%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr28 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 26.494375%, 100% { z-index: 0; } } @keyframes cs_descr28 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 26.494375%, 100% { z-index: 0; } } .csslider28 > #cs_play28:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title28 32000ms infinite -1400ms ease; animation: cs_title28 32000ms infinite -1400ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title28 32000ms infinite 6600ms ease; animation: cs_title28 32000ms infinite 6600ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title28 32000ms infinite 14600ms ease; animation: cs_title28 32000ms infinite 14600ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num3 > .cs_title { -webkit-animation: cs_title28 32000ms infinite 22600ms ease; animation: cs_title28 32000ms infinite 22600ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr28 32000ms infinite -1150ms ease; animation: cs_descr28 32000ms infinite -1150ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr28 32000ms infinite 6850ms ease; animation: cs_descr28 32000ms infinite 6850ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr28 32000ms infinite 14850ms ease; animation: cs_descr28 32000ms infinite 14850ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num3 > .cs_descr { -webkit-animation: cs_descr28 32000ms infinite 22850ms ease; animation: cs_descr28 32000ms infinite 22850ms ease; } @-webkit-keyframes cs_title_text28 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text28 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text28 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text28 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider28 > #cs_play28:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text28 32000ms infinite -1250ms ease; animation: cs_title_text28 32000ms infinite -1250ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text28 32000ms infinite 6750ms ease; animation: cs_title_text28 32000ms infinite 6750ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text28 32000ms infinite 14750ms ease; animation: cs_title_text28 32000ms infinite 14750ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num3 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text28 32000ms infinite 22750ms ease; animation: cs_title_text28 32000ms infinite 22750ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text28 32000ms infinite -1000ms ease; animation: cs_descr_text28 32000ms infinite -1000ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text28 32000ms infinite 7000ms ease; animation: cs_descr_text28 32000ms infinite 7000ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text28 32000ms infinite 15000ms ease; animation: cs_descr_text28 32000ms infinite 15000ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > .num3 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text28 32000ms infinite 23000ms ease; animation: cs_descr_text28 32000ms infinite 23000ms ease; } .csslider28 > #cs_play28:checked ~ .cs_description > label > .cs_title, .csslider28 > #cs_play28:checked ~ .cs_description > label > .cs_descr, .csslider28 > #cs_play28:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider28 > #cs_play28:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider28 > .pause:checked ~ .cs_description > label > .cs_title, .csslider28 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider28 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider28 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider28 > .cs_description, .csslider28 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider29 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider29, .csslider29 *, .csslider29 *:after, .csslider29 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider29 > .cs_anchor { display: none; } .csslider29 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider29 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider29 > ul > .slide.img img { width: 100%; } .csslider29 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider29 > 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); } .csslider29 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider29 > ul > li.img, .csslider29 > .cs_arrowprev, .csslider29 > .cs_arrownext, .csslider29 > .cs_bullets, .csslider29 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider29 > .cs_arrowprev, .csslider29 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider29 > .cs_arrowprev > label, .csslider29 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider29 > .cs_arrowprev { left: 0; } .csslider29 > .cs_arrownext { right: 0; } .csslider29 > .slide:checked ~ .cs_arrowprev > label, .csslider29 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider29 > #cs_slide29_0:checked ~ .cs_arrowprev > label.num2, .csslider29 > #cs_pause29_0:checked ~ .cs_arrowprev > label.num2, .csslider29 > #cs_slide29_0:checked ~ .cs_arrownext > label.num1, .csslider29 > #cs_pause29_0:checked ~ .cs_arrownext > label.num1, .csslider29 > #cs_slide29_1:checked ~ .cs_arrowprev > label.num0, .csslider29 > #cs_pause29_1:checked ~ .cs_arrowprev > label.num0, .csslider29 > #cs_slide29_1:checked ~ .cs_arrownext > label.num2, .csslider29 > #cs_pause29_1:checked ~ .cs_arrownext > label.num2, .csslider29 > #cs_slide29_2:checked ~ .cs_arrowprev > label.num1, .csslider29 > #cs_pause29_2:checked ~ .cs_arrowprev > label.num1, .csslider29 > #cs_slide29_2:checked ~ .cs_arrownext > label.num0, .csslider29 > #cs_pause29_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow29 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow29 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider29 > #cs_play29:checked ~ .cs_arrowprev > label.num2, .csslider29 > #cs_play29:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow29 24000ms infinite -2000ms; animation: arrow29 24000ms infinite -2000ms; } .csslider29 > #cs_play29:checked ~ .cs_arrowprev > label.num0, .csslider29 > #cs_play29:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow29 24000ms infinite 6000ms; animation: arrow29 24000ms infinite 6000ms; } .csslider29 > #cs_play29:checked ~ .cs_arrowprev > label.num1, .csslider29 > #cs_play29:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow29 24000ms infinite 14000ms; animation: arrow29 24000ms infinite 14000ms; } .csslider29 > .slide:checked ~ .cs_arrowprev > label, .csslider29 > .slide:checked ~ .cs_arrownext > label, .csslider29 > .pause:checked ~ .cs_arrowprev > label, .csslider29 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider29 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider29 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider29 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider29 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider29 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider29 > .cs_description { z-index: 3; } .csslider29 > .cs_description a, .csslider29 > .cs_description a:visited, .csslider29 > .cs_description a:active { color: inherit; } .csslider29 > .cs_description a:hover { text-decoration: none; } .csslider29 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider29 > .cs_description > label > span { vertical-align: top; } .csslider29 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider29 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider29 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider29 > #cs_play29:checked ~ .cs_play_pause > .cs_pause, .csslider29 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider29 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider29 > #cs_play29:checked ~ .cs_play_pause > .cs_play, .csslider29 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider29 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange29 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange29 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider29 > #cs_play29:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange29 24000ms infinite -2000ms; animation: pauseChange29 24000ms infinite -2000ms; } .csslider29 > #cs_play29:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange29 24000ms infinite 6000ms; animation: pauseChange29 24000ms infinite 6000ms; } .csslider29 > #cs_play29:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange29 24000ms infinite 14000ms; animation: pauseChange29 24000ms infinite 14000ms; } .csslider29 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider29 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider29 > ul > .slide.num0 { left: 0%; } .csslider29 > ul > .slide.num1 { left: 100%; } .csslider29 > ul > .slide.num2 { left: 200%; } .csslider29 > #cs_slide29_0:checked ~ ul > .slide, .csslider29 > #cs_pause29_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider29 > #cs_slide29_1:checked ~ ul > .slide, .csslider29 > #cs_pause29_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider29 > #cs_slide29_2:checked ~ ul > .slide, .csslider29 > #cs_pause29_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider29 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide29 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes slide29 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes slide29-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } @keyframes slide29-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } .csslider29 > #cs_play29:checked ~ ul > .slide { -webkit-animation: slide29 24000ms infinite; animation: slide29 24000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider29 > #cs_play29:checked ~ ul > .slide { animation: slide29-ie 24000ms infinite; } } .csslider29 > #cs_play29:checked ~ ul > .slide, .csslider29 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider29 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider29 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider29 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider29 > .cs_arrowprev, .csslider29 > .cs_arrownext, .csslider29 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider29:hover > .cs_arrowprev, .csslider29:hover > .cs_arrownext, .csslider29:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider29 > .cs_arrowprev > label, .csslider29 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider29 > .cs_arrowprev > label, .csslider29 > .cs_arrownext > label, .csslider29 > .cs_arrowprev > label span:after, .csslider29 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider29 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider29 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider29 > .cs_arrowprev > label span, .csslider29 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider29 > .cs_arrowprev > label span:after, .csslider29 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider29 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider29 > .cs_arrownext > label span:after { line-height: 29px; } .csslider29 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider29 > .cs_arrownext > label span:after { content: '\e801'; } .csslider29 > .cs_arrowprev:hover > label, .csslider29 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider29 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow29 .7s infinite ease-in-out; animation: nextArrow29 .7s infinite ease-in-out; } .csslider29 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow29 .7s infinite ease-in-out; animation: prevArrow29 .7s infinite ease-in-out; } @keyframes nextArrow29 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow29 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow29 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow29 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider29 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider29 > .cs_play_pause > label, .csslider29 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider29 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider29 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider29 > .cs_play_pause > label span:after { line-height: 28px; } .csslider29 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider29 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider29 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider29 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause29 .7s infinite ease-in-out; animation: playPause29 .7s infinite ease-in-out; } @-webkit-keyframes playPause29 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause29 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider29 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider29 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider29 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider29 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider29 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider29 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider29 > .cs_bullets > label:hover > .cs_point, .csslider29 > #cs_slide29_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider29 > #cs_pause29_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider29 > #cs_slide29_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider29 > #cs_pause29_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider29 > #cs_slide29_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider29 > #cs_pause29_2:checked ~ .cs_bullets > label.num2 > .cs_point { background: #3A4A5A; } @keyframes bullet29 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-webkit-keyframes bullet29 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } .csslider29 > #cs_play29:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider29 > #cs_pause29:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet29 24000ms infinite -2000ms; animation: bullet29 24000ms infinite -2000ms; } .csslider29 > #cs_play29:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider29 > #cs_pause29:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet29 24000ms infinite 6000ms; animation: bullet29 24000ms infinite 6000ms; } .csslider29 > #cs_play29:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider29 > #cs_pause29:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet29 24000ms infinite 14000ms; animation: bullet29 24000ms infinite 14000ms; } .csslider29 > #cs_play29:checked ~ .cs_bullets > label > .cs_point, .csslider29 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider29 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider29 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider29 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider29 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider29 > #cs_slide29_0:checked ~ .cs_description > .num0 > .cs_title, .csslider29 > #cs_slide29_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider29 > #cs_pause29_0:checked ~ .cs_description > .num0 > .cs_title, .csslider29 > #cs_pause29_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider29 > #cs_slide29_1:checked ~ .cs_description > .num1 > .cs_title, .csslider29 > #cs_slide29_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider29 > #cs_pause29_1:checked ~ .cs_description > .num1 > .cs_title, .csslider29 > #cs_pause29_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider29 > #cs_slide29_2:checked ~ .cs_description > .num2 > .cs_title, .csslider29 > #cs_slide29_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider29 > #cs_pause29_2:checked ~ .cs_description > .num2 > .cs_title, .csslider29 > #cs_pause29_2:checked ~ .cs_description > .num2 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider29 > #cs_slide29_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider29 > #cs_pause29_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider29 > #cs_slide29_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider29 > #cs_pause29_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider29 > #cs_slide29_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider29 > #cs_pause29_2:checked ~ .cs_description > .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider29 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider29 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider29 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider29 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title29 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_title29 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr29 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_descr29 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } .csslider29 > #cs_play29:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title29 24000ms infinite -1400ms ease; animation: cs_title29 24000ms infinite -1400ms ease; } .csslider29 > #cs_play29:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title29 24000ms infinite 6600ms ease; animation: cs_title29 24000ms infinite 6600ms ease; } .csslider29 > #cs_play29:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title29 24000ms infinite 14600ms ease; animation: cs_title29 24000ms infinite 14600ms ease; } .csslider29 > #cs_play29:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr29 24000ms infinite -1150ms ease; animation: cs_descr29 24000ms infinite -1150ms ease; } .csslider29 > #cs_play29:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr29 24000ms infinite 6850ms ease; animation: cs_descr29 24000ms infinite 6850ms ease; } .csslider29 > #cs_play29:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr29 24000ms infinite 14850ms ease; animation: cs_descr29 24000ms infinite 14850ms ease; } @-webkit-keyframes cs_title_text29 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text29 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text29 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text29 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider29 > #cs_play29:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text29 24000ms infinite -1250ms ease; animation: cs_title_text29 24000ms infinite -1250ms ease; } .csslider29 > #cs_play29:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text29 24000ms infinite 6750ms ease; animation: cs_title_text29 24000ms infinite 6750ms ease; } .csslider29 > #cs_play29:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text29 24000ms infinite 14750ms ease; animation: cs_title_text29 24000ms infinite 14750ms ease; } .csslider29 > #cs_play29:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text29 24000ms infinite -1000ms ease; animation: cs_descr_text29 24000ms infinite -1000ms ease; } .csslider29 > #cs_play29:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text29 24000ms infinite 7000ms ease; animation: cs_descr_text29 24000ms infinite 7000ms ease; } .csslider29 > #cs_play29:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text29 24000ms infinite 15000ms ease; animation: cs_descr_text29 24000ms infinite 15000ms ease; } .csslider29 > #cs_play29:checked ~ .cs_description > label > .cs_title, .csslider29 > #cs_play29:checked ~ .cs_description > label > .cs_descr, .csslider29 > #cs_play29:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider29 > #cs_play29:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider29 > .pause:checked ~ .cs_description > label > .cs_title, .csslider29 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider29 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider29 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider29 > .cs_description, .csslider29 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider30 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider30, .csslider30 *, .csslider30 *:after, .csslider30 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider30 > .cs_anchor { display: none; } .csslider30 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider30 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider30 > ul > .slide.img img { width: 100%; } .csslider30 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider30 > 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); } .csslider30 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider30 > ul > li.img, .csslider30 > .cs_arrowprev, .csslider30 > .cs_arrownext, .csslider30 > .cs_bullets, .csslider30 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider30 > .cs_arrowprev, .csslider30 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider30 > .cs_arrowprev > label, .csslider30 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider30 > .cs_arrowprev { left: 0; } .csslider30 > .cs_arrownext { right: 0; } .csslider30 > .slide:checked ~ .cs_arrowprev > label, .csslider30 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider30 > #cs_slide30_0:checked ~ .cs_arrowprev > label.num1, .csslider30 > #cs_pause30_0:checked ~ .cs_arrowprev > label.num1, .csslider30 > #cs_slide30_0:checked ~ .cs_arrownext > label.num1, .csslider30 > #cs_pause30_0:checked ~ .cs_arrownext > label.num1, .csslider30 > #cs_slide30_1:checked ~ .cs_arrowprev > label.num0, .csslider30 > #cs_pause30_1:checked ~ .cs_arrowprev > label.num0, .csslider30 > #cs_slide30_1:checked ~ .cs_arrownext > label.num0, .csslider30 > #cs_pause30_1:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow30 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow30 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider30 > #cs_play30:checked ~ .cs_arrowprev > label.num1, .csslider30 > #cs_play30:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow30 16000ms infinite -2000ms; animation: arrow30 16000ms infinite -2000ms; } .csslider30 > #cs_play30:checked ~ .cs_arrowprev > label.num0, .csslider30 > #cs_play30:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow30 16000ms infinite 6000ms; animation: arrow30 16000ms infinite 6000ms; } .csslider30 > .slide:checked ~ .cs_arrowprev > label, .csslider30 > .slide:checked ~ .cs_arrownext > label, .csslider30 > .pause:checked ~ .cs_arrowprev > label, .csslider30 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider30 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider30 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider30 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider30 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider30 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider30 > .cs_description { z-index: 3; } .csslider30 > .cs_description a, .csslider30 > .cs_description a:visited, .csslider30 > .cs_description a:active { color: inherit; } .csslider30 > .cs_description a:hover { text-decoration: none; } .csslider30 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider30 > .cs_description > label > span { vertical-align: top; } .csslider30 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider30 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider30 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider30 > #cs_play30:checked ~ .cs_play_pause > .cs_pause, .csslider30 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider30 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider30 > #cs_play30:checked ~ .cs_play_pause > .cs_play, .csslider30 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider30 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange30 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange30 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider30 > #cs_play30:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange30 16000ms infinite -2000ms; animation: pauseChange30 16000ms infinite -2000ms; } .csslider30 > #cs_play30:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange30 16000ms infinite 6000ms; animation: pauseChange30 16000ms infinite 6000ms; } .csslider30 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider30 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider30 > ul > .slide.num0 { left: 0%; } .csslider30 > ul > .slide.num1 { left: 100%; } .csslider30 > #cs_slide30_0:checked ~ ul > .slide, .csslider30 > #cs_pause30_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider30 > #cs_slide30_1:checked ~ ul > .slide, .csslider30 > #cs_pause30_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider30 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide30 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slide30 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes slide30-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } @keyframes slide30-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } .csslider30 > #cs_play30:checked ~ ul > .slide { -webkit-animation: slide30 16000ms infinite; animation: slide30 16000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider30 > #cs_play30:checked ~ ul > .slide { animation: slide30-ie 16000ms infinite; } } .csslider30 > #cs_play30:checked ~ ul > .slide, .csslider30 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider30 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider30 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider30 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider30 > .cs_arrowprev, .csslider30 > .cs_arrownext, .csslider30 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider30:hover > .cs_arrowprev, .csslider30:hover > .cs_arrownext, .csslider30:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider30 > .cs_arrowprev > label, .csslider30 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider30 > .cs_arrowprev > label, .csslider30 > .cs_arrownext > label, .csslider30 > .cs_arrowprev > label span:after, .csslider30 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider30 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider30 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider30 > .cs_arrowprev > label span, .csslider30 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider30 > .cs_arrowprev > label span:after, .csslider30 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider30 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider30 > .cs_arrownext > label span:after { line-height: 29px; } .csslider30 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider30 > .cs_arrownext > label span:after { content: '\e801'; } .csslider30 > .cs_arrowprev:hover > label, .csslider30 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider30 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow30 .7s infinite ease-in-out; animation: nextArrow30 .7s infinite ease-in-out; } .csslider30 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow30 .7s infinite ease-in-out; animation: prevArrow30 .7s infinite ease-in-out; } @keyframes nextArrow30 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow30 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow30 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow30 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider30 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider30 > .cs_play_pause > label, .csslider30 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider30 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider30 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider30 > .cs_play_pause > label span:after { line-height: 28px; } .csslider30 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider30 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider30 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider30 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause30 .7s infinite ease-in-out; animation: playPause30 .7s infinite ease-in-out; } @-webkit-keyframes playPause30 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause30 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider30 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider30 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider30 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider30 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider30 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider30 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider30 > .cs_bullets > label:hover > .cs_point, .csslider30 > #cs_slide30_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider30 > #cs_pause30_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider30 > #cs_slide30_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider30 > #cs_pause30_1:checked ~ .cs_bullets > label.num1 > .cs_point { background: #3A4A5A; } @keyframes bullet30 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } @-webkit-keyframes bullet30 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } .csslider30 > #cs_play30:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider30 > #cs_pause30:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet30 16000ms infinite -2000ms; animation: bullet30 16000ms infinite -2000ms; } .csslider30 > #cs_play30:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider30 > #cs_pause30:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet30 16000ms infinite 6000ms; animation: bullet30 16000ms infinite 6000ms; } .csslider30 > #cs_play30:checked ~ .cs_bullets > label > .cs_point, .csslider30 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider30 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider30 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider30 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider30 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider30 > #cs_slide30_0:checked ~ .cs_description > .num0 > .cs_title, .csslider30 > #cs_slide30_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider30 > #cs_pause30_0:checked ~ .cs_description > .num0 > .cs_title, .csslider30 > #cs_pause30_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider30 > #cs_slide30_1:checked ~ .cs_description > .num1 > .cs_title, .csslider30 > #cs_slide30_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider30 > #cs_pause30_1:checked ~ .cs_description > .num1 > .cs_title, .csslider30 > #cs_pause30_1:checked ~ .cs_description > .num1 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider30 > #cs_slide30_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider30 > #cs_pause30_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider30 > #cs_slide30_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider30 > #cs_pause30_1:checked ~ .cs_description > .num1 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider30 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider30 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider30 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider30 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title30 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_title30 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr30 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_descr30 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } .csslider30 > #cs_play30:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title30 16000ms infinite -1400ms ease; animation: cs_title30 16000ms infinite -1400ms ease; } .csslider30 > #cs_play30:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title30 16000ms infinite 6600ms ease; animation: cs_title30 16000ms infinite 6600ms ease; } .csslider30 > #cs_play30:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr30 16000ms infinite -1150ms ease; animation: cs_descr30 16000ms infinite -1150ms ease; } .csslider30 > #cs_play30:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr30 16000ms infinite 6850ms ease; animation: cs_descr30 16000ms infinite 6850ms ease; } @-webkit-keyframes cs_title_text30 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text30 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text30 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text30 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider30 > #cs_play30:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text30 16000ms infinite -1250ms ease; animation: cs_title_text30 16000ms infinite -1250ms ease; } .csslider30 > #cs_play30:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text30 16000ms infinite 6750ms ease; animation: cs_title_text30 16000ms infinite 6750ms ease; } .csslider30 > #cs_play30:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text30 16000ms infinite -1000ms ease; animation: cs_descr_text30 16000ms infinite -1000ms ease; } .csslider30 > #cs_play30:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text30 16000ms infinite 7000ms ease; animation: cs_descr_text30 16000ms infinite 7000ms ease; } .csslider30 > #cs_play30:checked ~ .cs_description > label > .cs_title, .csslider30 > #cs_play30:checked ~ .cs_description > label > .cs_descr, .csslider30 > #cs_play30:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider30 > #cs_play30:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider30 > .pause:checked ~ .cs_description > label > .cs_title, .csslider30 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider30 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider30 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider30 > .cs_description, .csslider30 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider31 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider31, .csslider31 *, .csslider31 *:after, .csslider31 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider31 > .cs_anchor { display: none; } .csslider31 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider31 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider31 > ul > .slide.img img { width: 100%; } .csslider31 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider31 > 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); } .csslider31 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider31 > ul > li.img, .csslider31 > .cs_arrowprev, .csslider31 > .cs_arrownext, .csslider31 > .cs_bullets, .csslider31 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider31 > .cs_arrowprev, .csslider31 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider31 > .cs_arrowprev > label, .csslider31 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider31 > .cs_arrowprev { left: 0; } .csslider31 > .cs_arrownext { right: 0; } .csslider31 > .slide:checked ~ .cs_arrowprev > label, .csslider31 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider31 > #cs_slide31_0:checked ~ .cs_arrowprev > label.num0, .csslider31 > #cs_pause31_0:checked ~ .cs_arrowprev > label.num0, .csslider31 > #cs_slide31_0:checked ~ .cs_arrownext > label.num0, .csslider31 > #cs_pause31_0:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow31 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow31 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider31 > #cs_play31:checked ~ .cs_arrowprev > label.num0, .csslider31 > #cs_play31:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow31 8000ms infinite -2000ms; animation: arrow31 8000ms infinite -2000ms; } .csslider31 > .slide:checked ~ .cs_arrowprev > label, .csslider31 > .slide:checked ~ .cs_arrownext > label, .csslider31 > .pause:checked ~ .cs_arrowprev > label, .csslider31 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider31 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider31 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider31 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider31 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider31 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider31 > .cs_description { z-index: 3; } .csslider31 > .cs_description a, .csslider31 > .cs_description a:visited, .csslider31 > .cs_description a:active { color: inherit; } .csslider31 > .cs_description a:hover { text-decoration: none; } .csslider31 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider31 > .cs_description > label > span { vertical-align: top; } .csslider31 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider31 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider31 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider31 > #cs_play31:checked ~ .cs_play_pause > .cs_pause, .csslider31 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider31 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider31 > #cs_play31:checked ~ .cs_play_pause > .cs_play, .csslider31 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider31 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange31 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange31 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider31 > #cs_play31:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange31 8000ms infinite -2000ms; animation: pauseChange31 8000ms infinite -2000ms; } .csslider31 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider31 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider31 > ul > .slide.num0 { left: 0%; } .csslider31 > #cs_slide31_0:checked ~ ul > .slide, .csslider31 > #cs_pause31_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider31 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide31 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slide31 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slide31-ie { 0%, 75% { margin-left: 0%; } } @keyframes slide31-ie { 0%, 75% { margin-left: 0%; } } .csslider31 > #cs_play31:checked ~ ul > .slide { -webkit-animation: slide31 8000ms infinite; animation: slide31 8000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider31 > #cs_play31:checked ~ ul > .slide { animation: slide31-ie 8000ms infinite; } } .csslider31 > #cs_play31:checked ~ ul > .slide, .csslider31 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider31 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider31 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider31 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider31 > .cs_arrowprev, .csslider31 > .cs_arrownext, .csslider31 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider31:hover > .cs_arrowprev, .csslider31:hover > .cs_arrownext, .csslider31:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider31 > .cs_arrowprev > label, .csslider31 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider31 > .cs_arrowprev > label, .csslider31 > .cs_arrownext > label, .csslider31 > .cs_arrowprev > label span:after, .csslider31 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider31 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider31 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider31 > .cs_arrowprev > label span, .csslider31 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider31 > .cs_arrowprev > label span:after, .csslider31 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider31 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider31 > .cs_arrownext > label span:after { line-height: 29px; } .csslider31 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider31 > .cs_arrownext > label span:after { content: '\e801'; } .csslider31 > .cs_arrowprev:hover > label, .csslider31 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider31 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow31 .7s infinite ease-in-out; animation: nextArrow31 .7s infinite ease-in-out; } .csslider31 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow31 .7s infinite ease-in-out; animation: prevArrow31 .7s infinite ease-in-out; } @keyframes nextArrow31 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow31 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow31 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow31 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider31 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider31 > .cs_play_pause > label, .csslider31 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider31 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider31 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider31 > .cs_play_pause > label span:after { line-height: 28px; } .csslider31 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider31 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider31 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider31 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause31 .7s infinite ease-in-out; animation: playPause31 .7s infinite ease-in-out; } @-webkit-keyframes playPause31 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause31 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider31 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider31 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider31 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider31 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider31 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider31 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider31 > .cs_bullets > label:hover > .cs_point, .csslider31 > #cs_slide31_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider31 > #cs_pause31_0:checked ~ .cs_bullets > label.num0 > .cs_point { background: #3A4A5A; } @keyframes bullet31 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } @-webkit-keyframes bullet31 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } .csslider31 > #cs_play31:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider31 > #cs_pause31:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet31 8000ms infinite -2000ms; animation: bullet31 8000ms infinite -2000ms; } .csslider31 > #cs_play31:checked ~ .cs_bullets > label > .cs_point, .csslider31 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider31 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider31 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider31 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider31 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider31 > #cs_slide31_0:checked ~ .cs_description > .num0 > .cs_title, .csslider31 > #cs_slide31_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider31 > #cs_pause31_0:checked ~ .cs_description > .num0 > .cs_title, .csslider31 > #cs_pause31_0:checked ~ .cs_description > .num0 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider31 > #cs_slide31_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider31 > #cs_pause31_0:checked ~ .cs_description > .num0 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider31 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider31 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider31 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider31 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title31 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_title31 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr31 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_descr31 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } .csslider31 > #cs_play31:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title31 8000ms infinite -1400ms ease; animation: cs_title31 8000ms infinite -1400ms ease; } .csslider31 > #cs_play31:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr31 8000ms infinite -1150ms ease; animation: cs_descr31 8000ms infinite -1150ms ease; } @-webkit-keyframes cs_title_text31 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text31 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text31 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text31 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider31 > #cs_play31:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text31 8000ms infinite -1250ms ease; animation: cs_title_text31 8000ms infinite -1250ms ease; } .csslider31 > #cs_play31:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text31 8000ms infinite -1000ms ease; animation: cs_descr_text31 8000ms infinite -1000ms ease; } .csslider31 > #cs_play31:checked ~ .cs_description > label > .cs_title, .csslider31 > #cs_play31:checked ~ .cs_description > label > .cs_descr, .csslider31 > #cs_play31:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider31 > #cs_play31:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider31 > .pause:checked ~ .cs_description > label > .cs_title, .csslider31 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider31 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider31 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider31 > .cs_description, .csslider31 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider32 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider32, .csslider32 *, .csslider32 *:after, .csslider32 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider32 > .cs_anchor { display: none; } .csslider32 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider32 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider32 > ul > .slide.img img { width: 100%; } .csslider32 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider32 > 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); } .csslider32 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider32 > ul > li.img, .csslider32 > .cs_arrowprev, .csslider32 > .cs_arrownext, .csslider32 > .cs_bullets, .csslider32 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider32 > .cs_arrowprev, .csslider32 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider32 > .cs_arrowprev > label, .csslider32 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider32 > .cs_arrowprev { left: 0; } .csslider32 > .cs_arrownext { right: 0; } .csslider32 > .slide:checked ~ .cs_arrowprev > label, .csslider32 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider32 > #cs_slide32_0:checked ~ .cs_arrowprev > label.num0, .csslider32 > #cs_pause32_0:checked ~ .cs_arrowprev > label.num0, .csslider32 > #cs_slide32_0:checked ~ .cs_arrownext > label.num0, .csslider32 > #cs_pause32_0:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow32 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow32 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider32 > #cs_play32:checked ~ .cs_arrowprev > label.num0, .csslider32 > #cs_play32:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow32 8000ms infinite -2000ms; animation: arrow32 8000ms infinite -2000ms; } .csslider32 > .slide:checked ~ .cs_arrowprev > label, .csslider32 > .slide:checked ~ .cs_arrownext > label, .csslider32 > .pause:checked ~ .cs_arrowprev > label, .csslider32 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider32 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider32 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider32 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider32 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider32 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider32 > .cs_description { z-index: 3; } .csslider32 > .cs_description a, .csslider32 > .cs_description a:visited, .csslider32 > .cs_description a:active { color: inherit; } .csslider32 > .cs_description a:hover { text-decoration: none; } .csslider32 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider32 > .cs_description > label > span { vertical-align: top; } .csslider32 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider32 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider32 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider32 > #cs_play32:checked ~ .cs_play_pause > .cs_pause, .csslider32 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider32 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider32 > #cs_play32:checked ~ .cs_play_pause > .cs_play, .csslider32 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider32 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange32 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange32 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider32 > #cs_play32:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange32 8000ms infinite -2000ms; animation: pauseChange32 8000ms infinite -2000ms; } .csslider32 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider32 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider32 > ul > .slide.num0 { left: 0%; } .csslider32 > #cs_slide32_0:checked ~ ul > .slide, .csslider32 > #cs_pause32_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider32 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide32 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slide32 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slide32-ie { 0%, 75% { margin-left: 0%; } } @keyframes slide32-ie { 0%, 75% { margin-left: 0%; } } .csslider32 > #cs_play32:checked ~ ul > .slide { -webkit-animation: slide32 8000ms infinite; animation: slide32 8000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider32 > #cs_play32:checked ~ ul > .slide { animation: slide32-ie 8000ms infinite; } } .csslider32 > #cs_play32:checked ~ ul > .slide, .csslider32 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider32 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider32 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider32 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider32 > .cs_arrowprev, .csslider32 > .cs_arrownext, .csslider32 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider32:hover > .cs_arrowprev, .csslider32:hover > .cs_arrownext, .csslider32:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider32 > .cs_arrowprev > label, .csslider32 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider32 > .cs_arrowprev > label, .csslider32 > .cs_arrownext > label, .csslider32 > .cs_arrowprev > label span:after, .csslider32 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider32 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider32 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider32 > .cs_arrowprev > label span, .csslider32 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider32 > .cs_arrowprev > label span:after, .csslider32 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider32 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider32 > .cs_arrownext > label span:after { line-height: 29px; } .csslider32 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider32 > .cs_arrownext > label span:after { content: '\e801'; } .csslider32 > .cs_arrowprev:hover > label, .csslider32 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider32 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow32 .7s infinite ease-in-out; animation: nextArrow32 .7s infinite ease-in-out; } .csslider32 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow32 .7s infinite ease-in-out; animation: prevArrow32 .7s infinite ease-in-out; } @keyframes nextArrow32 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow32 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow32 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow32 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider32 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider32 > .cs_play_pause > label, .csslider32 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider32 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider32 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider32 > .cs_play_pause > label span:after { line-height: 28px; } .csslider32 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider32 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider32 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider32 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause32 .7s infinite ease-in-out; animation: playPause32 .7s infinite ease-in-out; } @-webkit-keyframes playPause32 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause32 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider32 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider32 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider32 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider32 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider32 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider32 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider32 > .cs_bullets > label:hover > .cs_point, .csslider32 > #cs_slide32_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider32 > #cs_pause32_0:checked ~ .cs_bullets > label.num0 > .cs_point { background: #3A4A5A; } @keyframes bullet32 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } @-webkit-keyframes bullet32 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } .csslider32 > #cs_play32:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider32 > #cs_pause32:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet32 8000ms infinite -2000ms; animation: bullet32 8000ms infinite -2000ms; } .csslider32 > #cs_play32:checked ~ .cs_bullets > label > .cs_point, .csslider32 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider32 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider32 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider32 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider32 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider32 > #cs_slide32_0:checked ~ .cs_description > .num0 > .cs_title, .csslider32 > #cs_slide32_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider32 > #cs_pause32_0:checked ~ .cs_description > .num0 > .cs_title, .csslider32 > #cs_pause32_0:checked ~ .cs_description > .num0 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider32 > #cs_slide32_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider32 > #cs_pause32_0:checked ~ .cs_description > .num0 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider32 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider32 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider32 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider32 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title32 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_title32 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr32 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_descr32 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } .csslider32 > #cs_play32:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title32 8000ms infinite -1400ms ease; animation: cs_title32 8000ms infinite -1400ms ease; } .csslider32 > #cs_play32:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr32 8000ms infinite -1150ms ease; animation: cs_descr32 8000ms infinite -1150ms ease; } @-webkit-keyframes cs_title_text32 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text32 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text32 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text32 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider32 > #cs_play32:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text32 8000ms infinite -1250ms ease; animation: cs_title_text32 8000ms infinite -1250ms ease; } .csslider32 > #cs_play32:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text32 8000ms infinite -1000ms ease; animation: cs_descr_text32 8000ms infinite -1000ms ease; } .csslider32 > #cs_play32:checked ~ .cs_description > label > .cs_title, .csslider32 > #cs_play32:checked ~ .cs_description > label > .cs_descr, .csslider32 > #cs_play32:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider32 > #cs_play32:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider32 > .pause:checked ~ .cs_description > label > .cs_title, .csslider32 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider32 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider32 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider32 > .cs_description, .csslider32 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider33 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider33, .csslider33 *, .csslider33 *:after, .csslider33 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider33 > .cs_anchor { display: none; } .csslider33 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider33 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider33 > ul > .slide.img img { width: 100%; } .csslider33 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider33 > 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); } .csslider33 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider33 > ul > li.img, .csslider33 > .cs_arrowprev, .csslider33 > .cs_arrownext, .csslider33 > .cs_bullets, .csslider33 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider33 > .cs_arrowprev, .csslider33 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider33 > .cs_arrowprev > label, .csslider33 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider33 > .cs_arrowprev { left: 0; } .csslider33 > .cs_arrownext { right: 0; } .csslider33 > .slide:checked ~ .cs_arrowprev > label, .csslider33 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider33 > #cs_slide33_0:checked ~ .cs_arrowprev > label.num0, .csslider33 > #cs_pause33_0:checked ~ .cs_arrowprev > label.num0, .csslider33 > #cs_slide33_0:checked ~ .cs_arrownext > label.num0, .csslider33 > #cs_pause33_0:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow33 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow33 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider33 > #cs_play33:checked ~ .cs_arrowprev > label.num0, .csslider33 > #cs_play33:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow33 8000ms infinite -2000ms; animation: arrow33 8000ms infinite -2000ms; } .csslider33 > .slide:checked ~ .cs_arrowprev > label, .csslider33 > .slide:checked ~ .cs_arrownext > label, .csslider33 > .pause:checked ~ .cs_arrowprev > label, .csslider33 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider33 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider33 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider33 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider33 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider33 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider33 > .cs_description { z-index: 3; } .csslider33 > .cs_description a, .csslider33 > .cs_description a:visited, .csslider33 > .cs_description a:active { color: inherit; } .csslider33 > .cs_description a:hover { text-decoration: none; } .csslider33 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider33 > .cs_description > label > span { vertical-align: top; } .csslider33 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider33 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider33 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider33 > #cs_play33:checked ~ .cs_play_pause > .cs_pause, .csslider33 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider33 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider33 > #cs_play33:checked ~ .cs_play_pause > .cs_play, .csslider33 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider33 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange33 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange33 { 0%, 99.99% { opacity: 1; z-index: 5; } 100%, 100% { opacity: 0; z-index: -1; } } .csslider33 > #cs_play33:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange33 8000ms infinite -2000ms; animation: pauseChange33 8000ms infinite -2000ms; } .csslider33 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider33 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider33 > ul > .slide.num0 { left: 0%; } .csslider33 > #cs_slide33_0:checked ~ ul > .slide, .csslider33 > #cs_pause33_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider33 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide33 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slide33 { 0%, 75% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slide33-ie { 0%, 75% { margin-left: 0%; } } @keyframes slide33-ie { 0%, 75% { margin-left: 0%; } } .csslider33 > #cs_play33:checked ~ ul > .slide { -webkit-animation: slide33 8000ms infinite; animation: slide33 8000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider33 > #cs_play33:checked ~ ul > .slide { animation: slide33-ie 8000ms infinite; } } .csslider33 > #cs_play33:checked ~ ul > .slide, .csslider33 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider33 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider33 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider33 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider33 > .cs_arrowprev, .csslider33 > .cs_arrownext, .csslider33 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider33:hover > .cs_arrowprev, .csslider33:hover > .cs_arrownext, .csslider33:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider33 > .cs_arrowprev > label, .csslider33 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider33 > .cs_arrowprev > label, .csslider33 > .cs_arrownext > label, .csslider33 > .cs_arrowprev > label span:after, .csslider33 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider33 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider33 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider33 > .cs_arrowprev > label span, .csslider33 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider33 > .cs_arrowprev > label span:after, .csslider33 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider33 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider33 > .cs_arrownext > label span:after { line-height: 29px; } .csslider33 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider33 > .cs_arrownext > label span:after { content: '\e801'; } .csslider33 > .cs_arrowprev:hover > label, .csslider33 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider33 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow33 .7s infinite ease-in-out; animation: nextArrow33 .7s infinite ease-in-out; } .csslider33 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow33 .7s infinite ease-in-out; animation: prevArrow33 .7s infinite ease-in-out; } @keyframes nextArrow33 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow33 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow33 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow33 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider33 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider33 > .cs_play_pause > label, .csslider33 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider33 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider33 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider33 > .cs_play_pause > label span:after { line-height: 28px; } .csslider33 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider33 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider33 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider33 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause33 .7s infinite ease-in-out; animation: playPause33 .7s infinite ease-in-out; } @-webkit-keyframes playPause33 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause33 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider33 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider33 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider33 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider33 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider33 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider33 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider33 > .cs_bullets > label:hover > .cs_point, .csslider33 > #cs_slide33_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider33 > #cs_pause33_0:checked ~ .cs_bullets > label.num0 > .cs_point { background: #3A4A5A; } @keyframes bullet33 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } @-webkit-keyframes bullet33 { 0%, 99.99% { background: #3A4A5A; } 100%, 100% { background: transparent; } } .csslider33 > #cs_play33:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider33 > #cs_pause33:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet33 8000ms infinite -2000ms; animation: bullet33 8000ms infinite -2000ms; } .csslider33 > #cs_play33:checked ~ .cs_bullets > label > .cs_point, .csslider33 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider33 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider33 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider33 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider33 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider33 > #cs_slide33_0:checked ~ .cs_description > .num0 > .cs_title, .csslider33 > #cs_slide33_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider33 > #cs_pause33_0:checked ~ .cs_description > .num0 > .cs_title, .csslider33 > #cs_pause33_0:checked ~ .cs_description > .num0 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider33 > #cs_slide33_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider33 > #cs_pause33_0:checked ~ .cs_description > .num0 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider33 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider33 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider33 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider33 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title33 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_title33 { 4.15625%, 95.83375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 105.9475%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr33 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } @keyframes cs_descr33 { 4.15625%, 95.83375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 105.9475%, 100% { z-index: 0; } } .csslider33 > #cs_play33:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title33 8000ms infinite -1400ms ease; animation: cs_title33 8000ms infinite -1400ms ease; } .csslider33 > #cs_play33:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr33 8000ms infinite -1150ms ease; animation: cs_descr33 8000ms infinite -1150ms ease; } @-webkit-keyframes cs_title_text33 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text33 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text33 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text33 { 4.15625%, 95.83375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 5.9375%, 94.0525% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 105.9375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider33 > #cs_play33:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text33 8000ms infinite -1250ms ease; animation: cs_title_text33 8000ms infinite -1250ms ease; } .csslider33 > #cs_play33:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text33 8000ms infinite -1000ms ease; animation: cs_descr_text33 8000ms infinite -1000ms ease; } .csslider33 > #cs_play33:checked ~ .cs_description > label > .cs_title, .csslider33 > #cs_play33:checked ~ .cs_description > label > .cs_descr, .csslider33 > #cs_play33:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider33 > #cs_play33:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider33 > .pause:checked ~ .cs_description > label > .cs_title, .csslider33 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider33 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider33 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider33 > .cs_description, .csslider33 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider34 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider34, .csslider34 *, .csslider34 *:after, .csslider34 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider34 > .cs_anchor { display: none; } .csslider34 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider34 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider34 > ul > .slide.img img { width: 100%; } .csslider34 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider34 > 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); } .csslider34 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider34 > ul > li.img, .csslider34 > .cs_arrowprev, .csslider34 > .cs_arrownext, .csslider34 > .cs_bullets, .csslider34 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider34 > .cs_arrowprev, .csslider34 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider34 > .cs_arrowprev > label, .csslider34 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider34 > .cs_arrowprev { left: 0; } .csslider34 > .cs_arrownext { right: 0; } .csslider34 > .slide:checked ~ .cs_arrowprev > label, .csslider34 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider34 > #cs_slide34_0:checked ~ .cs_arrowprev > label.num1, .csslider34 > #cs_pause34_0:checked ~ .cs_arrowprev > label.num1, .csslider34 > #cs_slide34_0:checked ~ .cs_arrownext > label.num1, .csslider34 > #cs_pause34_0:checked ~ .cs_arrownext > label.num1, .csslider34 > #cs_slide34_1:checked ~ .cs_arrowprev > label.num0, .csslider34 > #cs_pause34_1:checked ~ .cs_arrowprev > label.num0, .csslider34 > #cs_slide34_1:checked ~ .cs_arrownext > label.num0, .csslider34 > #cs_pause34_1:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow34 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow34 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider34 > #cs_play34:checked ~ .cs_arrowprev > label.num1, .csslider34 > #cs_play34:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow34 16000ms infinite -2000ms; animation: arrow34 16000ms infinite -2000ms; } .csslider34 > #cs_play34:checked ~ .cs_arrowprev > label.num0, .csslider34 > #cs_play34:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow34 16000ms infinite 6000ms; animation: arrow34 16000ms infinite 6000ms; } .csslider34 > .slide:checked ~ .cs_arrowprev > label, .csslider34 > .slide:checked ~ .cs_arrownext > label, .csslider34 > .pause:checked ~ .cs_arrowprev > label, .csslider34 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider34 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider34 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider34 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider34 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider34 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider34 > .cs_description { z-index: 3; } .csslider34 > .cs_description a, .csslider34 > .cs_description a:visited, .csslider34 > .cs_description a:active { color: inherit; } .csslider34 > .cs_description a:hover { text-decoration: none; } .csslider34 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider34 > .cs_description > label > span { vertical-align: top; } .csslider34 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider34 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider34 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider34 > #cs_play34:checked ~ .cs_play_pause > .cs_pause, .csslider34 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider34 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider34 > #cs_play34:checked ~ .cs_play_pause > .cs_play, .csslider34 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider34 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange34 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange34 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider34 > #cs_play34:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange34 16000ms infinite -2000ms; animation: pauseChange34 16000ms infinite -2000ms; } .csslider34 > #cs_play34:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange34 16000ms infinite 6000ms; animation: pauseChange34 16000ms infinite 6000ms; } .csslider34 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider34 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider34 > ul > .slide.num0 { left: 0%; } .csslider34 > ul > .slide.num1 { left: 100%; } .csslider34 > #cs_slide34_0:checked ~ ul > .slide, .csslider34 > #cs_pause34_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider34 > #cs_slide34_1:checked ~ ul > .slide, .csslider34 > #cs_pause34_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider34 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide34 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slide34 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes slide34-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } @keyframes slide34-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } .csslider34 > #cs_play34:checked ~ ul > .slide { -webkit-animation: slide34 16000ms infinite; animation: slide34 16000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider34 > #cs_play34:checked ~ ul > .slide { animation: slide34-ie 16000ms infinite; } } .csslider34 > #cs_play34:checked ~ ul > .slide, .csslider34 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider34 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider34 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider34 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider34 > .cs_arrowprev, .csslider34 > .cs_arrownext, .csslider34 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider34:hover > .cs_arrowprev, .csslider34:hover > .cs_arrownext, .csslider34:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider34 > .cs_arrowprev > label, .csslider34 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider34 > .cs_arrowprev > label, .csslider34 > .cs_arrownext > label, .csslider34 > .cs_arrowprev > label span:after, .csslider34 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider34 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider34 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider34 > .cs_arrowprev > label span, .csslider34 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider34 > .cs_arrowprev > label span:after, .csslider34 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider34 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider34 > .cs_arrownext > label span:after { line-height: 29px; } .csslider34 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider34 > .cs_arrownext > label span:after { content: '\e801'; } .csslider34 > .cs_arrowprev:hover > label, .csslider34 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider34 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow34 .7s infinite ease-in-out; animation: nextArrow34 .7s infinite ease-in-out; } .csslider34 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow34 .7s infinite ease-in-out; animation: prevArrow34 .7s infinite ease-in-out; } @keyframes nextArrow34 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow34 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow34 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow34 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider34 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider34 > .cs_play_pause > label, .csslider34 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider34 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider34 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider34 > .cs_play_pause > label span:after { line-height: 28px; } .csslider34 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider34 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider34 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider34 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause34 .7s infinite ease-in-out; animation: playPause34 .7s infinite ease-in-out; } @-webkit-keyframes playPause34 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause34 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider34 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider34 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider34 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider34 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider34 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider34 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider34 > .cs_bullets > label:hover > .cs_point, .csslider34 > #cs_slide34_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider34 > #cs_pause34_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider34 > #cs_slide34_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider34 > #cs_pause34_1:checked ~ .cs_bullets > label.num1 > .cs_point { background: #3A4A5A; } @keyframes bullet34 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } @-webkit-keyframes bullet34 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } .csslider34 > #cs_play34:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider34 > #cs_pause34:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet34 16000ms infinite -2000ms; animation: bullet34 16000ms infinite -2000ms; } .csslider34 > #cs_play34:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider34 > #cs_pause34:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet34 16000ms infinite 6000ms; animation: bullet34 16000ms infinite 6000ms; } .csslider34 > #cs_play34:checked ~ .cs_bullets > label > .cs_point, .csslider34 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider34 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider34 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider34 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider34 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider34 > #cs_slide34_0:checked ~ .cs_description > .num0 > .cs_title, .csslider34 > #cs_slide34_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider34 > #cs_pause34_0:checked ~ .cs_description > .num0 > .cs_title, .csslider34 > #cs_pause34_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider34 > #cs_slide34_1:checked ~ .cs_description > .num1 > .cs_title, .csslider34 > #cs_slide34_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider34 > #cs_pause34_1:checked ~ .cs_description > .num1 > .cs_title, .csslider34 > #cs_pause34_1:checked ~ .cs_description > .num1 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider34 > #cs_slide34_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider34 > #cs_pause34_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider34 > #cs_slide34_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider34 > #cs_pause34_1:checked ~ .cs_description > .num1 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider34 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider34 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider34 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider34 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title34 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_title34 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr34 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_descr34 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } .csslider34 > #cs_play34:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title34 16000ms infinite -1400ms ease; animation: cs_title34 16000ms infinite -1400ms ease; } .csslider34 > #cs_play34:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title34 16000ms infinite 6600ms ease; animation: cs_title34 16000ms infinite 6600ms ease; } .csslider34 > #cs_play34:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr34 16000ms infinite -1150ms ease; animation: cs_descr34 16000ms infinite -1150ms ease; } .csslider34 > #cs_play34:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr34 16000ms infinite 6850ms ease; animation: cs_descr34 16000ms infinite 6850ms ease; } @-webkit-keyframes cs_title_text34 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text34 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text34 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text34 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider34 > #cs_play34:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text34 16000ms infinite -1250ms ease; animation: cs_title_text34 16000ms infinite -1250ms ease; } .csslider34 > #cs_play34:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text34 16000ms infinite 6750ms ease; animation: cs_title_text34 16000ms infinite 6750ms ease; } .csslider34 > #cs_play34:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text34 16000ms infinite -1000ms ease; animation: cs_descr_text34 16000ms infinite -1000ms ease; } .csslider34 > #cs_play34:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text34 16000ms infinite 7000ms ease; animation: cs_descr_text34 16000ms infinite 7000ms ease; } .csslider34 > #cs_play34:checked ~ .cs_description > label > .cs_title, .csslider34 > #cs_play34:checked ~ .cs_description > label > .cs_descr, .csslider34 > #cs_play34:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider34 > #cs_play34:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider34 > .pause:checked ~ .cs_description > label > .cs_title, .csslider34 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider34 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider34 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider34 > .cs_description, .csslider34 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider35 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider35, .csslider35 *, .csslider35 *:after, .csslider35 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider35 > .cs_anchor { display: none; } .csslider35 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider35 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider35 > ul > .slide.img img { width: 100%; } .csslider35 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider35 > 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); } .csslider35 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider35 > ul > li.img, .csslider35 > .cs_arrowprev, .csslider35 > .cs_arrownext, .csslider35 > .cs_bullets, .csslider35 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider35 > .cs_arrowprev, .csslider35 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider35 > .cs_arrowprev > label, .csslider35 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider35 > .cs_arrowprev { left: 0; } .csslider35 > .cs_arrownext { right: 0; } .csslider35 > .slide:checked ~ .cs_arrowprev > label, .csslider35 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider35 > #cs_slide35_0:checked ~ .cs_arrowprev > label.num2, .csslider35 > #cs_pause35_0:checked ~ .cs_arrowprev > label.num2, .csslider35 > #cs_slide35_0:checked ~ .cs_arrownext > label.num1, .csslider35 > #cs_pause35_0:checked ~ .cs_arrownext > label.num1, .csslider35 > #cs_slide35_1:checked ~ .cs_arrowprev > label.num0, .csslider35 > #cs_pause35_1:checked ~ .cs_arrowprev > label.num0, .csslider35 > #cs_slide35_1:checked ~ .cs_arrownext > label.num2, .csslider35 > #cs_pause35_1:checked ~ .cs_arrownext > label.num2, .csslider35 > #cs_slide35_2:checked ~ .cs_arrowprev > label.num1, .csslider35 > #cs_pause35_2:checked ~ .cs_arrowprev > label.num1, .csslider35 > #cs_slide35_2:checked ~ .cs_arrownext > label.num0, .csslider35 > #cs_pause35_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow35 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow35 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider35 > #cs_play35:checked ~ .cs_arrowprev > label.num2, .csslider35 > #cs_play35:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow35 24000ms infinite -2000ms; animation: arrow35 24000ms infinite -2000ms; } .csslider35 > #cs_play35:checked ~ .cs_arrowprev > label.num0, .csslider35 > #cs_play35:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow35 24000ms infinite 6000ms; animation: arrow35 24000ms infinite 6000ms; } .csslider35 > #cs_play35:checked ~ .cs_arrowprev > label.num1, .csslider35 > #cs_play35:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow35 24000ms infinite 14000ms; animation: arrow35 24000ms infinite 14000ms; } .csslider35 > .slide:checked ~ .cs_arrowprev > label, .csslider35 > .slide:checked ~ .cs_arrownext > label, .csslider35 > .pause:checked ~ .cs_arrowprev > label, .csslider35 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider35 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider35 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider35 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider35 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider35 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider35 > .cs_description { z-index: 3; } .csslider35 > .cs_description a, .csslider35 > .cs_description a:visited, .csslider35 > .cs_description a:active { color: inherit; } .csslider35 > .cs_description a:hover { text-decoration: none; } .csslider35 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider35 > .cs_description > label > span { vertical-align: top; } .csslider35 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider35 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider35 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider35 > #cs_play35:checked ~ .cs_play_pause > .cs_pause, .csslider35 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider35 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider35 > #cs_play35:checked ~ .cs_play_pause > .cs_play, .csslider35 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider35 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange35 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange35 { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider35 > #cs_play35:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange35 24000ms infinite -2000ms; animation: pauseChange35 24000ms infinite -2000ms; } .csslider35 > #cs_play35:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange35 24000ms infinite 6000ms; animation: pauseChange35 24000ms infinite 6000ms; } .csslider35 > #cs_play35:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange35 24000ms infinite 14000ms; animation: pauseChange35 24000ms infinite 14000ms; } .csslider35 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider35 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider35 > ul > .slide.num0 { left: 0%; } .csslider35 > ul > .slide.num1 { left: 100%; } .csslider35 > ul > .slide.num2 { left: 200%; } .csslider35 > #cs_slide35_0:checked ~ ul > .slide, .csslider35 > #cs_pause35_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider35 > #cs_slide35_1:checked ~ ul > .slide, .csslider35 > #cs_pause35_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider35 > #cs_slide35_2:checked ~ ul > .slide, .csslider35 > #cs_pause35_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider35 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide35 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes slide35 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes slide35-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } @keyframes slide35-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } .csslider35 > #cs_play35:checked ~ ul > .slide { -webkit-animation: slide35 24000ms infinite; animation: slide35 24000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider35 > #cs_play35:checked ~ ul > .slide { animation: slide35-ie 24000ms infinite; } } .csslider35 > #cs_play35:checked ~ ul > .slide, .csslider35 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider35 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider35 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider35 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider35 > .cs_arrowprev, .csslider35 > .cs_arrownext, .csslider35 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider35:hover > .cs_arrowprev, .csslider35:hover > .cs_arrownext, .csslider35:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider35 > .cs_arrowprev > label, .csslider35 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider35 > .cs_arrowprev > label, .csslider35 > .cs_arrownext > label, .csslider35 > .cs_arrowprev > label span:after, .csslider35 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider35 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider35 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider35 > .cs_arrowprev > label span, .csslider35 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider35 > .cs_arrowprev > label span:after, .csslider35 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider35 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider35 > .cs_arrownext > label span:after { line-height: 29px; } .csslider35 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider35 > .cs_arrownext > label span:after { content: '\e801'; } .csslider35 > .cs_arrowprev:hover > label, .csslider35 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider35 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow35 .7s infinite ease-in-out; animation: nextArrow35 .7s infinite ease-in-out; } .csslider35 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow35 .7s infinite ease-in-out; animation: prevArrow35 .7s infinite ease-in-out; } @keyframes nextArrow35 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow35 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow35 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow35 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider35 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider35 > .cs_play_pause > label, .csslider35 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider35 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider35 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider35 > .cs_play_pause > label span:after { line-height: 28px; } .csslider35 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider35 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider35 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider35 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause35 .7s infinite ease-in-out; animation: playPause35 .7s infinite ease-in-out; } @-webkit-keyframes playPause35 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause35 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider35 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider35 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider35 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider35 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider35 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider35 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider35 > .cs_bullets > label:hover > .cs_point, .csslider35 > #cs_slide35_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider35 > #cs_pause35_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider35 > #cs_slide35_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider35 > #cs_pause35_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider35 > #cs_slide35_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider35 > #cs_pause35_2:checked ~ .cs_bullets > label.num2 > .cs_point { background: #3A4A5A; } @keyframes bullet35 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-webkit-keyframes bullet35 { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } .csslider35 > #cs_play35:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider35 > #cs_pause35:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet35 24000ms infinite -2000ms; animation: bullet35 24000ms infinite -2000ms; } .csslider35 > #cs_play35:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider35 > #cs_pause35:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet35 24000ms infinite 6000ms; animation: bullet35 24000ms infinite 6000ms; } .csslider35 > #cs_play35:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider35 > #cs_pause35:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet35 24000ms infinite 14000ms; animation: bullet35 24000ms infinite 14000ms; } .csslider35 > #cs_play35:checked ~ .cs_bullets > label > .cs_point, .csslider35 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider35 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider35 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider35 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider35 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider35 > #cs_slide35_0:checked ~ .cs_description > .num0 > .cs_title, .csslider35 > #cs_slide35_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider35 > #cs_pause35_0:checked ~ .cs_description > .num0 > .cs_title, .csslider35 > #cs_pause35_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider35 > #cs_slide35_1:checked ~ .cs_description > .num1 > .cs_title, .csslider35 > #cs_slide35_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider35 > #cs_pause35_1:checked ~ .cs_description > .num1 > .cs_title, .csslider35 > #cs_pause35_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider35 > #cs_slide35_2:checked ~ .cs_description > .num2 > .cs_title, .csslider35 > #cs_slide35_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider35 > #cs_pause35_2:checked ~ .cs_description > .num2 > .cs_title, .csslider35 > #cs_pause35_2:checked ~ .cs_description > .num2 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider35 > #cs_slide35_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider35 > #cs_pause35_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider35 > #cs_slide35_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider35 > #cs_pause35_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider35 > #cs_slide35_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider35 > #cs_pause35_2:checked ~ .cs_description > .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider35 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider35 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider35 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider35 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title35 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_title35 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr35 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_descr35 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } .csslider35 > #cs_play35:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title35 24000ms infinite -1400ms ease; animation: cs_title35 24000ms infinite -1400ms ease; } .csslider35 > #cs_play35:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title35 24000ms infinite 6600ms ease; animation: cs_title35 24000ms infinite 6600ms ease; } .csslider35 > #cs_play35:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title35 24000ms infinite 14600ms ease; animation: cs_title35 24000ms infinite 14600ms ease; } .csslider35 > #cs_play35:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr35 24000ms infinite -1150ms ease; animation: cs_descr35 24000ms infinite -1150ms ease; } .csslider35 > #cs_play35:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr35 24000ms infinite 6850ms ease; animation: cs_descr35 24000ms infinite 6850ms ease; } .csslider35 > #cs_play35:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr35 24000ms infinite 14850ms ease; animation: cs_descr35 24000ms infinite 14850ms ease; } @-webkit-keyframes cs_title_text35 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text35 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text35 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text35 { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider35 > #cs_play35:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text35 24000ms infinite -1250ms ease; animation: cs_title_text35 24000ms infinite -1250ms ease; } .csslider35 > #cs_play35:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text35 24000ms infinite 6750ms ease; animation: cs_title_text35 24000ms infinite 6750ms ease; } .csslider35 > #cs_play35:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text35 24000ms infinite 14750ms ease; animation: cs_title_text35 24000ms infinite 14750ms ease; } .csslider35 > #cs_play35:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text35 24000ms infinite -1000ms ease; animation: cs_descr_text35 24000ms infinite -1000ms ease; } .csslider35 > #cs_play35:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text35 24000ms infinite 7000ms ease; animation: cs_descr_text35 24000ms infinite 7000ms ease; } .csslider35 > #cs_play35:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text35 24000ms infinite 15000ms ease; animation: cs_descr_text35 24000ms infinite 15000ms ease; } .csslider35 > #cs_play35:checked ~ .cs_description > label > .cs_title, .csslider35 > #cs_play35:checked ~ .cs_description > label > .cs_descr, .csslider35 > #cs_play35:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider35 > #cs_play35:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider35 > .pause:checked ~ .cs_description > label > .cs_title, .csslider35 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider35 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider35 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider35 > .cs_description, .csslider35 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider36 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider36, .csslider36 *, .csslider36 *:after, .csslider36 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider36 > .cs_anchor { display: none; } .csslider36 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider36 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider36 > ul > .slide.img img { width: 100%; } .csslider36 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider36 > 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); } .csslider36 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider36 > ul > li.img, .csslider36 > .cs_arrowprev, .csslider36 > .cs_arrownext, .csslider36 > .cs_bullets, .csslider36 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider36 > .cs_arrowprev, .csslider36 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider36 > .cs_arrowprev > label, .csslider36 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider36 > .cs_arrowprev { left: 0; } .csslider36 > .cs_arrownext { right: 0; } .csslider36 > .slide:checked ~ .cs_arrowprev > label, .csslider36 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider36 > #cs_slide36_0:checked ~ .cs_arrowprev > label.num1, .csslider36 > #cs_pause36_0:checked ~ .cs_arrowprev > label.num1, .csslider36 > #cs_slide36_0:checked ~ .cs_arrownext > label.num1, .csslider36 > #cs_pause36_0:checked ~ .cs_arrownext > label.num1, .csslider36 > #cs_slide36_1:checked ~ .cs_arrowprev > label.num0, .csslider36 > #cs_pause36_1:checked ~ .cs_arrowprev > label.num0, .csslider36 > #cs_slide36_1:checked ~ .cs_arrownext > label.num0, .csslider36 > #cs_pause36_1:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow36 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow36 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider36 > #cs_play36:checked ~ .cs_arrowprev > label.num1, .csslider36 > #cs_play36:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow36 16000ms infinite -2000ms; animation: arrow36 16000ms infinite -2000ms; } .csslider36 > #cs_play36:checked ~ .cs_arrowprev > label.num0, .csslider36 > #cs_play36:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow36 16000ms infinite 6000ms; animation: arrow36 16000ms infinite 6000ms; } .csslider36 > .slide:checked ~ .cs_arrowprev > label, .csslider36 > .slide:checked ~ .cs_arrownext > label, .csslider36 > .pause:checked ~ .cs_arrowprev > label, .csslider36 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider36 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider36 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider36 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider36 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider36 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider36 > .cs_description { z-index: 3; } .csslider36 > .cs_description a, .csslider36 > .cs_description a:visited, .csslider36 > .cs_description a:active { color: inherit; } .csslider36 > .cs_description a:hover { text-decoration: none; } .csslider36 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider36 > .cs_description > label > span { vertical-align: top; } .csslider36 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider36 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider36 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider36 > #cs_play36:checked ~ .cs_play_pause > .cs_pause, .csslider36 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider36 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider36 > #cs_play36:checked ~ .cs_play_pause > .cs_play, .csslider36 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider36 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange36 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange36 { 0%, 49.99% { opacity: 1; z-index: 5; } 50%, 100% { opacity: 0; z-index: -1; } } .csslider36 > #cs_play36:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange36 16000ms infinite -2000ms; animation: pauseChange36 16000ms infinite -2000ms; } .csslider36 > #cs_play36:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange36 16000ms infinite 6000ms; animation: pauseChange36 16000ms infinite 6000ms; } .csslider36 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider36 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider36 > ul > .slide.num0 { left: 0%; } .csslider36 > ul > .slide.num1 { left: 100%; } .csslider36 > #cs_slide36_0:checked ~ ul > .slide, .csslider36 > #cs_pause36_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider36 > #cs_slide36_1:checked ~ ul > .slide, .csslider36 > #cs_pause36_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider36 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide36 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slide36 { 0%, 37.5% { -webkit-transform: translateX(0%); transform: translateX(0%); } 50%, 87.5% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes slide36-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } @keyframes slide36-ie { 0%, 37.5% { margin-left: 0%; } 50%, 87.5% { margin-left: -100%; } } .csslider36 > #cs_play36:checked ~ ul > .slide { -webkit-animation: slide36 16000ms infinite; animation: slide36 16000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider36 > #cs_play36:checked ~ ul > .slide { animation: slide36-ie 16000ms infinite; } } .csslider36 > #cs_play36:checked ~ ul > .slide, .csslider36 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider36 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider36 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider36 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider36 > .cs_arrowprev, .csslider36 > .cs_arrownext, .csslider36 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider36:hover > .cs_arrowprev, .csslider36:hover > .cs_arrownext, .csslider36:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider36 > .cs_arrowprev > label, .csslider36 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider36 > .cs_arrowprev > label, .csslider36 > .cs_arrownext > label, .csslider36 > .cs_arrowprev > label span:after, .csslider36 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider36 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider36 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider36 > .cs_arrowprev > label span, .csslider36 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider36 > .cs_arrowprev > label span:after, .csslider36 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider36 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider36 > .cs_arrownext > label span:after { line-height: 29px; } .csslider36 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider36 > .cs_arrownext > label span:after { content: '\e801'; } .csslider36 > .cs_arrowprev:hover > label, .csslider36 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider36 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow36 .7s infinite ease-in-out; animation: nextArrow36 .7s infinite ease-in-out; } .csslider36 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow36 .7s infinite ease-in-out; animation: prevArrow36 .7s infinite ease-in-out; } @keyframes nextArrow36 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow36 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow36 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow36 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider36 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider36 > .cs_play_pause > label, .csslider36 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider36 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider36 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider36 > .cs_play_pause > label span:after { line-height: 28px; } .csslider36 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider36 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider36 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider36 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause36 .7s infinite ease-in-out; animation: playPause36 .7s infinite ease-in-out; } @-webkit-keyframes playPause36 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause36 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider36 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider36 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider36 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider36 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider36 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider36 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider36 > .cs_bullets > label:hover > .cs_point, .csslider36 > #cs_slide36_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider36 > #cs_pause36_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider36 > #cs_slide36_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider36 > #cs_pause36_1:checked ~ .cs_bullets > label.num1 > .cs_point { background: #3A4A5A; } @keyframes bullet36 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } @-webkit-keyframes bullet36 { 0%, 49.99% { background: #3A4A5A; } 50%, 100% { background: transparent; } } .csslider36 > #cs_play36:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider36 > #cs_pause36:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet36 16000ms infinite -2000ms; animation: bullet36 16000ms infinite -2000ms; } .csslider36 > #cs_play36:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider36 > #cs_pause36:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet36 16000ms infinite 6000ms; animation: bullet36 16000ms infinite 6000ms; } .csslider36 > #cs_play36:checked ~ .cs_bullets > label > .cs_point, .csslider36 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider36 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider36 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider36 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider36 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider36 > #cs_slide36_0:checked ~ .cs_description > .num0 > .cs_title, .csslider36 > #cs_slide36_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider36 > #cs_pause36_0:checked ~ .cs_description > .num0 > .cs_title, .csslider36 > #cs_pause36_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider36 > #cs_slide36_1:checked ~ .cs_description > .num1 > .cs_title, .csslider36 > #cs_slide36_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider36 > #cs_pause36_1:checked ~ .cs_description > .num1 > .cs_title, .csslider36 > #cs_pause36_1:checked ~ .cs_description > .num1 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider36 > #cs_slide36_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider36 > #cs_pause36_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider36 > #cs_slide36_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider36 > #cs_pause36_1:checked ~ .cs_description > .num1 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider36 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider36 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider36 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider36 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title36 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_title36 { 2.078125%, 47.911875% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 52.97875%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr36 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } @keyframes cs_descr36 { 2.078125%, 47.911875% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 52.97875%, 100% { z-index: 0; } } .csslider36 > #cs_play36:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title36 16000ms infinite -1400ms ease; animation: cs_title36 16000ms infinite -1400ms ease; } .csslider36 > #cs_play36:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title36 16000ms infinite 6600ms ease; animation: cs_title36 16000ms infinite 6600ms ease; } .csslider36 > #cs_play36:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr36 16000ms infinite -1150ms ease; animation: cs_descr36 16000ms infinite -1150ms ease; } .csslider36 > #cs_play36:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr36 16000ms infinite 6850ms ease; animation: cs_descr36 16000ms infinite 6850ms ease; } @-webkit-keyframes cs_title_text36 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text36 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text36 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text36 { 2.078125%, 47.911875% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 2.96875%, 47.02125% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 52.96875% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider36 > #cs_play36:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text36 16000ms infinite -1250ms ease; animation: cs_title_text36 16000ms infinite -1250ms ease; } .csslider36 > #cs_play36:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text36 16000ms infinite 6750ms ease; animation: cs_title_text36 16000ms infinite 6750ms ease; } .csslider36 > #cs_play36:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text36 16000ms infinite -1000ms ease; animation: cs_descr_text36 16000ms infinite -1000ms ease; } .csslider36 > #cs_play36:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text36 16000ms infinite 7000ms ease; animation: cs_descr_text36 16000ms infinite 7000ms ease; } .csslider36 > #cs_play36:checked ~ .cs_description > label > .cs_title, .csslider36 > #cs_play36:checked ~ .cs_description > label > .cs_descr, .csslider36 > #cs_play36:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider36 > #cs_play36:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider36 > .pause:checked ~ .cs_description > label > .cs_title, .csslider36 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider36 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider36 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider36 > .cs_description, .csslider36 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider37 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider37, .csslider37 *, .csslider37 *:after, .csslider37 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider37 > .cs_anchor { display: none; } .csslider37 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider37 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider37 > ul > .slide.img img { width: 100%; } .csslider37 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider37 > 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); } .csslider37 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider37 > ul > li.img, .csslider37 > .cs_arrowprev, .csslider37 > .cs_arrownext, .csslider37 > .cs_bullets, .csslider37 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider37 > .cs_arrowprev, .csslider37 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider37 > .cs_arrowprev > label, .csslider37 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider37 > .cs_arrowprev { left: 0; } .csslider37 > .cs_arrownext { right: 0; } .csslider37 > .slide:checked ~ .cs_arrowprev > label, .csslider37 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider37 > #cs_slide37_0:checked ~ .cs_arrowprev > label.num3, .csslider37 > #cs_pause37_0:checked ~ .cs_arrowprev > label.num3, .csslider37 > #cs_slide37_0:checked ~ .cs_arrownext > label.num1, .csslider37 > #cs_pause37_0:checked ~ .cs_arrownext > label.num1, .csslider37 > #cs_slide37_1:checked ~ .cs_arrowprev > label.num0, .csslider37 > #cs_pause37_1:checked ~ .cs_arrowprev > label.num0, .csslider37 > #cs_slide37_1:checked ~ .cs_arrownext > label.num2, .csslider37 > #cs_pause37_1:checked ~ .cs_arrownext > label.num2, .csslider37 > #cs_slide37_2:checked ~ .cs_arrowprev > label.num1, .csslider37 > #cs_pause37_2:checked ~ .cs_arrowprev > label.num1, .csslider37 > #cs_slide37_2:checked ~ .cs_arrownext > label.num3, .csslider37 > #cs_pause37_2:checked ~ .cs_arrownext > label.num3, .csslider37 > #cs_slide37_3:checked ~ .cs_arrowprev > label.num2, .csslider37 > #cs_pause37_3:checked ~ .cs_arrowprev > label.num2, .csslider37 > #cs_slide37_3:checked ~ .cs_arrownext > label.num0, .csslider37 > #cs_pause37_3:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow37 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow37 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } .csslider37 > #cs_play37:checked ~ .cs_arrowprev > label.num3, .csslider37 > #cs_play37:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow37 32000ms infinite -2000ms; animation: arrow37 32000ms infinite -2000ms; } .csslider37 > #cs_play37:checked ~ .cs_arrowprev > label.num0, .csslider37 > #cs_play37:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow37 32000ms infinite 6000ms; animation: arrow37 32000ms infinite 6000ms; } .csslider37 > #cs_play37:checked ~ .cs_arrowprev > label.num1, .csslider37 > #cs_play37:checked ~ .cs_arrownext > label.num3 { -webkit-animation: arrow37 32000ms infinite 14000ms; animation: arrow37 32000ms infinite 14000ms; } .csslider37 > #cs_play37:checked ~ .cs_arrowprev > label.num2, .csslider37 > #cs_play37:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow37 32000ms infinite 22000ms; animation: arrow37 32000ms infinite 22000ms; } .csslider37 > .slide:checked ~ .cs_arrowprev > label, .csslider37 > .slide:checked ~ .cs_arrownext > label, .csslider37 > .pause:checked ~ .cs_arrowprev > label, .csslider37 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider37 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider37 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider37 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider37 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider37 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider37 > .cs_description { z-index: 3; } .csslider37 > .cs_description a, .csslider37 > .cs_description a:visited, .csslider37 > .cs_description a:active { color: inherit; } .csslider37 > .cs_description a:hover { text-decoration: none; } .csslider37 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider37 > .cs_description > label > span { vertical-align: top; } .csslider37 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider37 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider37 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider37 > #cs_play37:checked ~ .cs_play_pause > .cs_pause, .csslider37 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider37 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider37 > #cs_play37:checked ~ .cs_play_pause > .cs_play, .csslider37 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider37 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange37 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange37 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } .csslider37 > #cs_play37:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange37 32000ms infinite -2000ms; animation: pauseChange37 32000ms infinite -2000ms; } .csslider37 > #cs_play37:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange37 32000ms infinite 6000ms; animation: pauseChange37 32000ms infinite 6000ms; } .csslider37 > #cs_play37:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange37 32000ms infinite 14000ms; animation: pauseChange37 32000ms infinite 14000ms; } .csslider37 > #cs_play37:checked ~ .cs_play_pause > .cs_pause.num3 { opacity: 0; z-index: -1; -webkit-animation: pauseChange37 32000ms infinite 22000ms; animation: pauseChange37 32000ms infinite 22000ms; } .csslider37 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider37 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider37 > ul > .slide.num0 { left: 0%; } .csslider37 > ul > .slide.num1 { left: 100%; } .csslider37 > ul > .slide.num2 { left: 200%; } .csslider37 > ul > .slide.num3 { left: 300%; } .csslider37 > #cs_slide37_0:checked ~ ul > .slide, .csslider37 > #cs_pause37_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider37 > #cs_slide37_1:checked ~ ul > .slide, .csslider37 > #cs_pause37_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider37 > #cs_slide37_2:checked ~ ul > .slide, .csslider37 > #cs_pause37_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider37 > #cs_slide37_3:checked ~ ul > .slide, .csslider37 > #cs_pause37_3:checked ~ ul > .slide { -webkit-transform: translateX(-300%); transform: translateX(-300%); } .csslider37 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide37 { 0%, 18.75% { -webkit-transform: translateX(0%); transform: translateX(0%); } 25%, 43.75% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 50%, 68.75% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 75%, 93.75% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } } @keyframes slide37 { 0%, 18.75% { -webkit-transform: translateX(0%); transform: translateX(0%); } 25%, 43.75% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 50%, 68.75% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 75%, 93.75% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } } @-webkit-keyframes slide37-ie { 0%, 18.75% { margin-left: 0%; } 25%, 43.75% { margin-left: -100%; } 50%, 68.75% { margin-left: -200%; } 75%, 93.75% { margin-left: -300%; } } @keyframes slide37-ie { 0%, 18.75% { margin-left: 0%; } 25%, 43.75% { margin-left: -100%; } 50%, 68.75% { margin-left: -200%; } 75%, 93.75% { margin-left: -300%; } } .csslider37 > #cs_play37:checked ~ ul > .slide { -webkit-animation: slide37 32000ms infinite; animation: slide37 32000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider37 > #cs_play37:checked ~ ul > .slide { animation: slide37-ie 32000ms infinite; } } .csslider37 > #cs_play37:checked ~ ul > .slide, .csslider37 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider37 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider37 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider37 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider37 > .cs_arrowprev, .csslider37 > .cs_arrownext, .csslider37 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider37:hover > .cs_arrowprev, .csslider37:hover > .cs_arrownext, .csslider37:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider37 > .cs_arrowprev > label, .csslider37 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider37 > .cs_arrowprev > label, .csslider37 > .cs_arrownext > label, .csslider37 > .cs_arrowprev > label span:after, .csslider37 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider37 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider37 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider37 > .cs_arrowprev > label span, .csslider37 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider37 > .cs_arrowprev > label span:after, .csslider37 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider37 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider37 > .cs_arrownext > label span:after { line-height: 29px; } .csslider37 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider37 > .cs_arrownext > label span:after { content: '\e801'; } .csslider37 > .cs_arrowprev:hover > label, .csslider37 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider37 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow37 .7s infinite ease-in-out; animation: nextArrow37 .7s infinite ease-in-out; } .csslider37 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow37 .7s infinite ease-in-out; animation: prevArrow37 .7s infinite ease-in-out; } @keyframes nextArrow37 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow37 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow37 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow37 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider37 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider37 > .cs_play_pause > label, .csslider37 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider37 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider37 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider37 > .cs_play_pause > label span:after { line-height: 28px; } .csslider37 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider37 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider37 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider37 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause37 .7s infinite ease-in-out; animation: playPause37 .7s infinite ease-in-out; } @-webkit-keyframes playPause37 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause37 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider37 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider37 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider37 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider37 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider37 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider37 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider37 > .cs_bullets > label:hover > .cs_point, .csslider37 > #cs_slide37_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider37 > #cs_pause37_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider37 > #cs_slide37_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider37 > #cs_pause37_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider37 > #cs_slide37_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider37 > #cs_pause37_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider37 > #cs_slide37_3:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider37 > #cs_pause37_3:checked ~ .cs_bullets > label.num3 > .cs_point { background: #3A4A5A; } @keyframes bullet37 { 0%, 24.99% { background: #3A4A5A; } 25%, 100% { background: transparent; } } @-webkit-keyframes bullet37 { 0%, 24.99% { background: #3A4A5A; } 25%, 100% { background: transparent; } } .csslider37 > #cs_play37:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider37 > #cs_pause37:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet37 32000ms infinite -2000ms; animation: bullet37 32000ms infinite -2000ms; } .csslider37 > #cs_play37:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider37 > #cs_pause37:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet37 32000ms infinite 6000ms; animation: bullet37 32000ms infinite 6000ms; } .csslider37 > #cs_play37:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider37 > #cs_pause37:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet37 32000ms infinite 14000ms; animation: bullet37 32000ms infinite 14000ms; } .csslider37 > #cs_play37:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider37 > #cs_pause37:checked ~ .cs_bullets > label.num3 > .cs_point { -webkit-animation: bullet37 32000ms infinite 22000ms; animation: bullet37 32000ms infinite 22000ms; } .csslider37 > #cs_play37:checked ~ .cs_bullets > label > .cs_point, .csslider37 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider37 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider37 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider37 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider37 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider37 > #cs_slide37_0:checked ~ .cs_description > .num0 > .cs_title, .csslider37 > #cs_slide37_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider37 > #cs_pause37_0:checked ~ .cs_description > .num0 > .cs_title, .csslider37 > #cs_pause37_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider37 > #cs_slide37_1:checked ~ .cs_description > .num1 > .cs_title, .csslider37 > #cs_slide37_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider37 > #cs_pause37_1:checked ~ .cs_description > .num1 > .cs_title, .csslider37 > #cs_pause37_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider37 > #cs_slide37_2:checked ~ .cs_description > .num2 > .cs_title, .csslider37 > #cs_slide37_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider37 > #cs_pause37_2:checked ~ .cs_description > .num2 > .cs_title, .csslider37 > #cs_pause37_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider37 > #cs_slide37_3:checked ~ .cs_description > .num3 > .cs_title, .csslider37 > #cs_slide37_3:checked ~ .cs_description > .num3 > .cs_descr, .csslider37 > #cs_pause37_3:checked ~ .cs_description > .num3 > .cs_title, .csslider37 > #cs_pause37_3:checked ~ .cs_description > .num3 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider37 > #cs_slide37_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider37 > #cs_pause37_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider37 > #cs_slide37_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider37 > #cs_pause37_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider37 > #cs_slide37_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider37 > #cs_pause37_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider37 > #cs_slide37_3:checked ~ .cs_description > .num3 .cs_wrapper, .csslider37 > #cs_pause37_3:checked ~ .cs_description > .num3 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider37 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider37 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider37 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider37 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title37 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 26.494375%, 100% { z-index: 0; } } @keyframes cs_title37 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 26.494375%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr37 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 26.494375%, 100% { z-index: 0; } } @keyframes cs_descr37 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 26.494375%, 100% { z-index: 0; } } .csslider37 > #cs_play37:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title37 32000ms infinite -1400ms ease; animation: cs_title37 32000ms infinite -1400ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title37 32000ms infinite 6600ms ease; animation: cs_title37 32000ms infinite 6600ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title37 32000ms infinite 14600ms ease; animation: cs_title37 32000ms infinite 14600ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num3 > .cs_title { -webkit-animation: cs_title37 32000ms infinite 22600ms ease; animation: cs_title37 32000ms infinite 22600ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr37 32000ms infinite -1150ms ease; animation: cs_descr37 32000ms infinite -1150ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr37 32000ms infinite 6850ms ease; animation: cs_descr37 32000ms infinite 6850ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr37 32000ms infinite 14850ms ease; animation: cs_descr37 32000ms infinite 14850ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num3 > .cs_descr { -webkit-animation: cs_descr37 32000ms infinite 22850ms ease; animation: cs_descr37 32000ms infinite 22850ms ease; } @-webkit-keyframes cs_title_text37 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text37 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text37 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text37 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider37 > #cs_play37:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text37 32000ms infinite -1250ms ease; animation: cs_title_text37 32000ms infinite -1250ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text37 32000ms infinite 6750ms ease; animation: cs_title_text37 32000ms infinite 6750ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text37 32000ms infinite 14750ms ease; animation: cs_title_text37 32000ms infinite 14750ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num3 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text37 32000ms infinite 22750ms ease; animation: cs_title_text37 32000ms infinite 22750ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text37 32000ms infinite -1000ms ease; animation: cs_descr_text37 32000ms infinite -1000ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text37 32000ms infinite 7000ms ease; animation: cs_descr_text37 32000ms infinite 7000ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text37 32000ms infinite 15000ms ease; animation: cs_descr_text37 32000ms infinite 15000ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > .num3 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text37 32000ms infinite 23000ms ease; animation: cs_descr_text37 32000ms infinite 23000ms ease; } .csslider37 > #cs_play37:checked ~ .cs_description > label > .cs_title, .csslider37 > #cs_play37:checked ~ .cs_description > label > .cs_descr, .csslider37 > #cs_play37:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider37 > #cs_play37:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider37 > .pause:checked ~ .cs_description > label > .cs_title, .csslider37 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider37 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider37 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider37 > .cs_description, .csslider37 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider38 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider38, .csslider38 *, .csslider38 *:after, .csslider38 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider38 > .cs_anchor { display: none; } .csslider38 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider38 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider38 > ul > .slide.img img { width: 100%; } .csslider38 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider38 > 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); } .csslider38 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider38 > ul > li.img, .csslider38 > .cs_arrowprev, .csslider38 > .cs_arrownext, .csslider38 > .cs_bullets, .csslider38 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider38 > .cs_arrowprev, .csslider38 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider38 > .cs_arrowprev > label, .csslider38 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider38 > .cs_arrowprev { left: 0; } .csslider38 > .cs_arrownext { right: 0; } .csslider38 > .slide:checked ~ .cs_arrowprev > label, .csslider38 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider38 > #cs_slide38_0:checked ~ .cs_arrowprev > label.num3, .csslider38 > #cs_pause38_0:checked ~ .cs_arrowprev > label.num3, .csslider38 > #cs_slide38_0:checked ~ .cs_arrownext > label.num1, .csslider38 > #cs_pause38_0:checked ~ .cs_arrownext > label.num1, .csslider38 > #cs_slide38_1:checked ~ .cs_arrowprev > label.num0, .csslider38 > #cs_pause38_1:checked ~ .cs_arrowprev > label.num0, .csslider38 > #cs_slide38_1:checked ~ .cs_arrownext > label.num2, .csslider38 > #cs_pause38_1:checked ~ .cs_arrownext > label.num2, .csslider38 > #cs_slide38_2:checked ~ .cs_arrowprev > label.num1, .csslider38 > #cs_pause38_2:checked ~ .cs_arrowprev > label.num1, .csslider38 > #cs_slide38_2:checked ~ .cs_arrownext > label.num3, .csslider38 > #cs_pause38_2:checked ~ .cs_arrownext > label.num3, .csslider38 > #cs_slide38_3:checked ~ .cs_arrowprev > label.num2, .csslider38 > #cs_pause38_3:checked ~ .cs_arrowprev > label.num2, .csslider38 > #cs_slide38_3:checked ~ .cs_arrownext > label.num0, .csslider38 > #cs_pause38_3:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow38 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow38 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } .csslider38 > #cs_play38:checked ~ .cs_arrowprev > label.num3, .csslider38 > #cs_play38:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow38 32000ms infinite -2000ms; animation: arrow38 32000ms infinite -2000ms; } .csslider38 > #cs_play38:checked ~ .cs_arrowprev > label.num0, .csslider38 > #cs_play38:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow38 32000ms infinite 6000ms; animation: arrow38 32000ms infinite 6000ms; } .csslider38 > #cs_play38:checked ~ .cs_arrowprev > label.num1, .csslider38 > #cs_play38:checked ~ .cs_arrownext > label.num3 { -webkit-animation: arrow38 32000ms infinite 14000ms; animation: arrow38 32000ms infinite 14000ms; } .csslider38 > #cs_play38:checked ~ .cs_arrowprev > label.num2, .csslider38 > #cs_play38:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow38 32000ms infinite 22000ms; animation: arrow38 32000ms infinite 22000ms; } .csslider38 > .slide:checked ~ .cs_arrowprev > label, .csslider38 > .slide:checked ~ .cs_arrownext > label, .csslider38 > .pause:checked ~ .cs_arrowprev > label, .csslider38 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider38 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider38 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider38 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider38 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider38 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider38 > .cs_description { z-index: 3; } .csslider38 > .cs_description a, .csslider38 > .cs_description a:visited, .csslider38 > .cs_description a:active { color: inherit; } .csslider38 > .cs_description a:hover { text-decoration: none; } .csslider38 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider38 > .cs_description > label > span { vertical-align: top; } .csslider38 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider38 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider38 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider38 > #cs_play38:checked ~ .cs_play_pause > .cs_pause, .csslider38 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider38 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider38 > #cs_play38:checked ~ .cs_play_pause > .cs_play, .csslider38 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider38 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange38 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange38 { 0%, 24.99% { opacity: 1; z-index: 5; } 25%, 100% { opacity: 0; z-index: -1; } } .csslider38 > #cs_play38:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange38 32000ms infinite -2000ms; animation: pauseChange38 32000ms infinite -2000ms; } .csslider38 > #cs_play38:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange38 32000ms infinite 6000ms; animation: pauseChange38 32000ms infinite 6000ms; } .csslider38 > #cs_play38:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange38 32000ms infinite 14000ms; animation: pauseChange38 32000ms infinite 14000ms; } .csslider38 > #cs_play38:checked ~ .cs_play_pause > .cs_pause.num3 { opacity: 0; z-index: -1; -webkit-animation: pauseChange38 32000ms infinite 22000ms; animation: pauseChange38 32000ms infinite 22000ms; } .csslider38 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider38 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider38 > ul > .slide.num0 { left: 0%; } .csslider38 > ul > .slide.num1 { left: 100%; } .csslider38 > ul > .slide.num2 { left: 200%; } .csslider38 > ul > .slide.num3 { left: 300%; } .csslider38 > #cs_slide38_0:checked ~ ul > .slide, .csslider38 > #cs_pause38_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider38 > #cs_slide38_1:checked ~ ul > .slide, .csslider38 > #cs_pause38_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider38 > #cs_slide38_2:checked ~ ul > .slide, .csslider38 > #cs_pause38_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider38 > #cs_slide38_3:checked ~ ul > .slide, .csslider38 > #cs_pause38_3:checked ~ ul > .slide { -webkit-transform: translateX(-300%); transform: translateX(-300%); } .csslider38 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide38 { 0%, 18.75% { -webkit-transform: translateX(0%); transform: translateX(0%); } 25%, 43.75% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 50%, 68.75% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 75%, 93.75% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } } @keyframes slide38 { 0%, 18.75% { -webkit-transform: translateX(0%); transform: translateX(0%); } 25%, 43.75% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 50%, 68.75% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } 75%, 93.75% { -webkit-transform: translateX(-300%); transform: translateX(-300%); } } @-webkit-keyframes slide38-ie { 0%, 18.75% { margin-left: 0%; } 25%, 43.75% { margin-left: -100%; } 50%, 68.75% { margin-left: -200%; } 75%, 93.75% { margin-left: -300%; } } @keyframes slide38-ie { 0%, 18.75% { margin-left: 0%; } 25%, 43.75% { margin-left: -100%; } 50%, 68.75% { margin-left: -200%; } 75%, 93.75% { margin-left: -300%; } } .csslider38 > #cs_play38:checked ~ ul > .slide { -webkit-animation: slide38 32000ms infinite; animation: slide38 32000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider38 > #cs_play38:checked ~ ul > .slide { animation: slide38-ie 32000ms infinite; } } .csslider38 > #cs_play38:checked ~ ul > .slide, .csslider38 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider38 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider38 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider38 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider38 > .cs_arrowprev, .csslider38 > .cs_arrownext, .csslider38 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider38:hover > .cs_arrowprev, .csslider38:hover > .cs_arrownext, .csslider38:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider38 > .cs_arrowprev > label, .csslider38 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider38 > .cs_arrowprev > label, .csslider38 > .cs_arrownext > label, .csslider38 > .cs_arrowprev > label span:after, .csslider38 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider38 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider38 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider38 > .cs_arrowprev > label span, .csslider38 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider38 > .cs_arrowprev > label span:after, .csslider38 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider38 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider38 > .cs_arrownext > label span:after { line-height: 29px; } .csslider38 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider38 > .cs_arrownext > label span:after { content: '\e801'; } .csslider38 > .cs_arrowprev:hover > label, .csslider38 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider38 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow38 .7s infinite ease-in-out; animation: nextArrow38 .7s infinite ease-in-out; } .csslider38 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow38 .7s infinite ease-in-out; animation: prevArrow38 .7s infinite ease-in-out; } @keyframes nextArrow38 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow38 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow38 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow38 { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider38 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider38 > .cs_play_pause > label, .csslider38 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider38 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider38 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider38 > .cs_play_pause > label span:after { line-height: 28px; } .csslider38 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider38 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider38 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider38 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause38 .7s infinite ease-in-out; animation: playPause38 .7s infinite ease-in-out; } @-webkit-keyframes playPause38 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause38 { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider38 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider38 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider38 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider38 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider38 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider38 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider38 > .cs_bullets > label:hover > .cs_point, .csslider38 > #cs_slide38_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider38 > #cs_pause38_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider38 > #cs_slide38_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider38 > #cs_pause38_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider38 > #cs_slide38_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider38 > #cs_pause38_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider38 > #cs_slide38_3:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider38 > #cs_pause38_3:checked ~ .cs_bullets > label.num3 > .cs_point { background: #3A4A5A; } @keyframes bullet38 { 0%, 24.99% { background: #3A4A5A; } 25%, 100% { background: transparent; } } @-webkit-keyframes bullet38 { 0%, 24.99% { background: #3A4A5A; } 25%, 100% { background: transparent; } } .csslider38 > #cs_play38:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider38 > #cs_pause38:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet38 32000ms infinite -2000ms; animation: bullet38 32000ms infinite -2000ms; } .csslider38 > #cs_play38:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider38 > #cs_pause38:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet38 32000ms infinite 6000ms; animation: bullet38 32000ms infinite 6000ms; } .csslider38 > #cs_play38:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider38 > #cs_pause38:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet38 32000ms infinite 14000ms; animation: bullet38 32000ms infinite 14000ms; } .csslider38 > #cs_play38:checked ~ .cs_bullets > label.num3 > .cs_point, .csslider38 > #cs_pause38:checked ~ .cs_bullets > label.num3 > .cs_point { -webkit-animation: bullet38 32000ms infinite 22000ms; animation: bullet38 32000ms infinite 22000ms; } .csslider38 > #cs_play38:checked ~ .cs_bullets > label > .cs_point, .csslider38 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider38 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider38 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider38 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider38 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider38 > #cs_slide38_0:checked ~ .cs_description > .num0 > .cs_title, .csslider38 > #cs_slide38_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider38 > #cs_pause38_0:checked ~ .cs_description > .num0 > .cs_title, .csslider38 > #cs_pause38_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider38 > #cs_slide38_1:checked ~ .cs_description > .num1 > .cs_title, .csslider38 > #cs_slide38_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider38 > #cs_pause38_1:checked ~ .cs_description > .num1 > .cs_title, .csslider38 > #cs_pause38_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider38 > #cs_slide38_2:checked ~ .cs_description > .num2 > .cs_title, .csslider38 > #cs_slide38_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider38 > #cs_pause38_2:checked ~ .cs_description > .num2 > .cs_title, .csslider38 > #cs_pause38_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider38 > #cs_slide38_3:checked ~ .cs_description > .num3 > .cs_title, .csslider38 > #cs_slide38_3:checked ~ .cs_description > .num3 > .cs_descr, .csslider38 > #cs_pause38_3:checked ~ .cs_description > .num3 > .cs_title, .csslider38 > #cs_pause38_3:checked ~ .cs_description > .num3 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider38 > #cs_slide38_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider38 > #cs_pause38_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider38 > #cs_slide38_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider38 > #cs_pause38_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider38 > #cs_slide38_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider38 > #cs_pause38_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider38 > #cs_slide38_3:checked ~ .cs_description > .num3 .cs_wrapper, .csslider38 > #cs_pause38_3:checked ~ .cs_description > .num3 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider38 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider38 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider38 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider38 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title38 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 26.494375%, 100% { z-index: 0; } } @keyframes cs_title38 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 26.494375%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr38 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 26.494375%, 100% { z-index: 0; } } @keyframes cs_descr38 { 1.0390625%, 23.9509375% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 26.494375%, 100% { z-index: 0; } } .csslider38 > #cs_play38:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title38 32000ms infinite -1400ms ease; animation: cs_title38 32000ms infinite -1400ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title38 32000ms infinite 6600ms ease; animation: cs_title38 32000ms infinite 6600ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title38 32000ms infinite 14600ms ease; animation: cs_title38 32000ms infinite 14600ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num3 > .cs_title { -webkit-animation: cs_title38 32000ms infinite 22600ms ease; animation: cs_title38 32000ms infinite 22600ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr38 32000ms infinite -1150ms ease; animation: cs_descr38 32000ms infinite -1150ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr38 32000ms infinite 6850ms ease; animation: cs_descr38 32000ms infinite 6850ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr38 32000ms infinite 14850ms ease; animation: cs_descr38 32000ms infinite 14850ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num3 > .cs_descr { -webkit-animation: cs_descr38 32000ms infinite 22850ms ease; animation: cs_descr38 32000ms infinite 22850ms ease; } @-webkit-keyframes cs_title_text38 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text38 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text38 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text38 { 1.0390625%, 23.9509375% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.484375%, 23.505625% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 26.484375% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider38 > #cs_play38:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text38 32000ms infinite -1250ms ease; animation: cs_title_text38 32000ms infinite -1250ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text38 32000ms infinite 6750ms ease; animation: cs_title_text38 32000ms infinite 6750ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text38 32000ms infinite 14750ms ease; animation: cs_title_text38 32000ms infinite 14750ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num3 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text38 32000ms infinite 22750ms ease; animation: cs_title_text38 32000ms infinite 22750ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text38 32000ms infinite -1000ms ease; animation: cs_descr_text38 32000ms infinite -1000ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text38 32000ms infinite 7000ms ease; animation: cs_descr_text38 32000ms infinite 7000ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text38 32000ms infinite 15000ms ease; animation: cs_descr_text38 32000ms infinite 15000ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > .num3 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text38 32000ms infinite 23000ms ease; animation: cs_descr_text38 32000ms infinite 23000ms ease; } .csslider38 > #cs_play38:checked ~ .cs_description > label > .cs_title, .csslider38 > #cs_play38:checked ~ .cs_description > label > .cs_descr, .csslider38 > #cs_play38:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider38 > #cs_play38:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider38 > .pause:checked ~ .cs_description > label > .cs_title, .csslider38 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider38 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider38 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider38 > .cs_description, .csslider38 > .cs_bullets { display: none; } } /* ------------- 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; } .csslider39 { display: inline-block; position: relative; max-width: 640px; width: 100%; } .csslider39, .csslider39 *, .csslider39 *:after, .csslider39 *:before { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider39 > .cs_anchor { display: none; } .csslider39 > ul { position: relative; z-index: 1; font-size: 0; line-height: 0; margin: 0 auto; padding: 0; overflow: hidden; white-space: nowrap; } .csslider39 > ul > .cs_skeleton { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .csslider39 > ul > .slide.img img { width: 100%; } .csslider39 > ul > .slide.img a { font-size: 0pt; color: transparent; } .csslider39 > 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); } .csslider39 .cs_engine{ position: absolute; top: -9999px; left: -9999px; font-size: 0pt; opacity: 0; filter: alpha(opacity=0); } .csslider39 > ul > li.img, .csslider39 > .cs_arrowprev, .csslider39 > .cs_arrownext, .csslider39 > .cs_bullets, .csslider39 > .cs_play_pause { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ------------- /General Styles ------------- */ /* ------------- General Arrows ------------- */ .csslider39 > .cs_arrowprev, .csslider39 > .cs_arrownext { position: absolute; top: 50%; z-index: 5; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .csslider39 > .cs_arrowprev > label, .csslider39 > .cs_arrownext > label { position: absolute; text-decoration: none; cursor: pointer; opacity: 0; z-index: -1; } .csslider39 > .cs_arrowprev { left: 0; } .csslider39 > .cs_arrownext { right: 0; } .csslider39 > .slide:checked ~ .cs_arrowprev > label, .csslider39 > .slide:checked ~ .cs_arrownext > label { opacity: 0; z-index: -1; } .csslider39 > #cs_slide39_0:checked ~ .cs_arrowprev > label.num2, .csslider39 > #cs_pause39_0:checked ~ .cs_arrowprev > label.num2, .csslider39 > #cs_slide39_0:checked ~ .cs_arrownext > label.num1, .csslider39 > #cs_pause39_0:checked ~ .cs_arrownext > label.num1, .csslider39 > #cs_slide39_1:checked ~ .cs_arrowprev > label.num0, .csslider39 > #cs_pause39_1:checked ~ .cs_arrowprev > label.num0, .csslider39 > #cs_slide39_1:checked ~ .cs_arrownext > label.num2, .csslider39 > #cs_pause39_1:checked ~ .cs_arrownext > label.num2, .csslider39 > #cs_slide39_2:checked ~ .cs_arrowprev > label.num1, .csslider39 > #cs_pause39_2:checked ~ .cs_arrowprev > label.num1, .csslider39 > #cs_slide39_2:checked ~ .cs_arrownext > label.num0, .csslider39 > #cs_pause39_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-webkit-keyframes arrow { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes arrow { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider39 > #cs_play39:checked ~ .cs_arrowprev > label.num2, .csslider39 > #cs_play39:checked ~ .cs_arrownext > label.num1 { -webkit-animation: arrow 24000ms infinite -2000ms; animation: arrow 24000ms infinite -2000ms; } .csslider39 > #cs_play39:checked ~ .cs_arrowprev > label.num0, .csslider39 > #cs_play39:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow 24000ms infinite 6000ms; animation: arrow 24000ms infinite 6000ms; } .csslider39 > #cs_play39:checked ~ .cs_arrowprev > label.num1, .csslider39 > #cs_play39:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow 24000ms infinite 14000ms; animation: arrow 24000ms infinite 14000ms; } .csslider39 > .slide:checked ~ .cs_arrowprev > label, .csslider39 > .slide:checked ~ .cs_arrownext > label, .csslider39 > .pause:checked ~ .cs_arrowprev > label, .csslider39 > .pause:checked ~ .cs_arrownext > label { -webkit-animation: none; animation: none; } /* ------------- /General Arrows ------------- */ /* ------------- General Bullets ------------- */ .csslider39 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .csslider39 > .cs_bullets > div { margin-left: -50%; width: 100%; } .csslider39 > .cs_bullets > label { position: relative; display: inline-block; cursor: pointer; } .csslider39 > .cs_bullets > label > .cs_thumb { visibility: hidden; position: absolute; opacity: 0; z-index: 1; line-height: 0; left: -42.5px; top: -48px; } .csslider39 > .cs_bullets > label > .cs_thumb > img { max-width: none; } /* ------------- /General Bullets ------------- */ /* ------------- General Description ------------- */ .csslider39 > .cs_description { z-index: 3; } .csslider39 > .cs_description a, .csslider39 > .cs_description a:visited, .csslider39 > .cs_description a:active { color: inherit; } .csslider39 > .cs_description a:hover { text-decoration: none; } .csslider39 > .cs_description > label { position: absolute; word-wrap: break-word; white-space: normal; text-align: left; max-width: 50%; left: 0; } .csslider39 > .cs_description > label > span { vertical-align: top; } .csslider39 > .cs_description > label span { display: inline-block; } /* ------------- /General Description ------------- */ /* ------------- General Play Pause ------------- */ .csslider39 > .cs_play_pause { position: absolute; top: 50%; left: 50%; z-index: 5; } .csslider39 > .cs_play_pause > label { position: absolute; cursor: pointer; } .csslider39 > #cs_play39:checked ~ .cs_play_pause > .cs_pause, .csslider39 > .slide:checked ~ .cs_play_pause > .cs_play, .csslider39 > .pause:checked ~ .cs_play_pause > .cs_play { display: block; z-index: 5; } .csslider39 > #cs_play39:checked ~ .cs_play_pause > .cs_play, .csslider39 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider39 > .pause:checked ~ .cs_play_pause > .cs_pause { display: none; z-index: -1; } @-webkit-keyframes pauseChange { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider39 > #cs_play39:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 24000ms infinite -2000ms; animation: pauseChange 24000ms infinite -2000ms; } .csslider39 > #cs_play39:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 24000ms infinite 6000ms; animation: pauseChange 24000ms infinite 6000ms; } .csslider39 > #cs_play39:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 24000ms infinite 14000ms; animation: pauseChange 24000ms infinite 14000ms; } .csslider39 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider39 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- /General Play Pause ------------- */ /* ------------- Effect ------------- */ .csslider39 > ul > .slide.num0 { left: 0%; } .csslider39 > ul > .slide.num1 { left: 100%; } .csslider39 > ul > .slide.num2 { left: 200%; } .csslider39 > #cs_slide39_0:checked ~ ul > .slide, .csslider39 > #cs_pause39_0:checked ~ ul > .slide { -webkit-transform: translateX(0%); transform: translateX(0%); } .csslider39 > #cs_slide39_1:checked ~ ul > .slide, .csslider39 > #cs_pause39_1:checked ~ ul > .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .csslider39 > #cs_slide39_2:checked ~ ul > .slide, .csslider39 > #cs_pause39_2:checked ~ ul > .slide { -webkit-transform: translateX(-200%); transform: translateX(-200%); } .csslider39 > ul > .slide { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 2000ms; transition: -webkit-transform 2000ms, transform 2000ms; -webkit-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide39 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes slide39 { 0%, 25% { -webkit-transform: translateX(0%); transform: translateX(0%); } 33.333333333333336%, 58.333333333333336% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 66.66666666666667%, 91.66666666666667% { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @-webkit-keyframes slide39-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } @keyframes slide39-ie { 0%, 25% { margin-left: 0%; } 33.333333333333336%, 58.333333333333336% { margin-left: -100%; } 66.66666666666667%, 91.66666666666667% { margin-left: -200%; } } .csslider39 > #cs_play39:checked ~ ul > .slide { -webkit-animation: slide39 24000ms infinite; animation: slide39 24000ms infinite; } /* IE 10+ hack - cant animate translate :( */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .csslider39 > #cs_play39:checked ~ ul > .slide { animation: slide39-ie 24000ms infinite; } } .csslider39 > #cs_play39:checked ~ ul > .slide, .csslider39 > .pause:checked ~ ul > .slide { -webkit-transition: none; transition: none; } /* ------------- /Effect ------------- */ /* ------------- Template Show on hover ------------- */ .csslider39 > .cs_play_pause { -webkit-transition: .4s all 0s ease; transition: .4s all 0s ease; } .csslider39 > .cs_arrowprev { -webkit-transition: .4s all .15s ease; transition: .4s all .15s ease; } .csslider39 > .cs_arrownext { -webkit-transition: .4s all .3s ease; transition: .4s all .3s ease; } .csslider39 > .cs_arrowprev, .csslider39 > .cs_arrownext, .csslider39 > .cs_play_pause { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } .csslider39:hover > .cs_arrowprev, .csslider39:hover > .cs_arrownext, .csslider39:hover > .cs_play_pause { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } /* ------------- /Template Show on hover ------------- */ /* ------------- Template Arrows ------------- */ .csslider39 > .cs_arrowprev > label, .csslider39 > .cs_arrownext > label { padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider39 > .cs_arrowprev > label, .csslider39 > .cs_arrownext > label, .csslider39 > .cs_arrowprev > label span:after, .csslider39 > .cs_arrownext > label span:after { -webkit-transition: background-color 0.4s, color 0.4s; transition: background-color 0.4s, color 0.4s; } .csslider39 > .cs_arrowprev { margin-left: 2px; left: 45px; } .csslider39 > .cs_arrownext { margin-right: 2px; right: 45px; } .csslider39 > .cs_arrowprev > label span, .csslider39 > .cs_arrownext > label span { display: block; color: #3A4A5A; } .csslider39 > .cs_arrowprev > label span:after, .csslider39 > .cs_arrownext > label span:after { display: block; font: 21px "cs-ctrl-basic"; line-height: 23px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider39 > .cs_arrowprev > label span:after { line-height: 29px; } _:-ms-input-placeholder, :root .csslider39 > .cs_arrownext > label span:after { line-height: 29px; } .csslider39 > .cs_arrowprev > label span:after { content: '\e800'; } .csslider39 > .cs_arrownext > label span:after { content: '\e801'; } .csslider39 > .cs_arrowprev:hover > label, .csslider39 > .cs_arrownext:hover > label { background-color: #e5f6fe; } .csslider39 > .cs_arrownext:hover > label span { color: #000; -webkit-animation: nextArrow .7s infinite ease-in-out; animation: nextArrow .7s infinite ease-in-out; } .csslider39 > .cs_arrowprev:hover > label span { color: #000; -webkit-animation: prevArrow .7s infinite ease-in-out; animation: prevArrow .7s infinite ease-in-out; } @keyframes nextArrow { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes nextArrow { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(2px); transform: translateX(2px); } 75% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes prevArrow { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes prevArrow { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 25% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 75% { -webkit-transform: translateX(2px); transform: translateX(2px); } } /* ------------- /Template Arrows ------------- */ /* ------------- Template Play Pause ------------- */ .csslider39 > .cs_play_pause > label{ text-decoration: none; padding: 17px; height: 23px; width: 23px; margin-top: -28px; margin-left: -28px; background-color: #CBECFD; border-radius: 50%; } .csslider39 > .cs_play_pause > label, .csslider39 > .cs_play_pause > label span:after { -webkit-transition: background-color 0.4s ease, color 0.4s ease; transition: background-color 0.4s ease, color 0.4s ease; } .csslider39 > .cs_play_pause > label span { display: block; color: #3A4A5A; } .csslider39 > .cs_play_pause > label span:after{ display: block; font: 15px "cs-ctrl-basic"; line-height: 25px; text-align: center; } /* IE10+ hack */ _:-ms-input-placeholder, :root .csslider39 > .cs_play_pause > label span:after { line-height: 28px; } .csslider39 > .cs_play_pause > .cs_play span:after { content: '\e802'; } .csslider39 > .cs_play_pause > .cs_pause span:after { content: '\e803'; } .csslider39 > .cs_play_pause:hover > label { background-color: #e5f6fe; } .csslider39 > .cs_play_pause:hover > label span { color: #000; -wibkit-animation: playPause .7s infinite ease-in-out; animation: playPause .7s infinite ease-in-out; } @-webkit-keyframes playPause { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @keyframes playPause { 0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 25% { -webkit-transform: translateY(2px); transform: translateY(2px); } 75% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } /* ------------- /Template Play Pause ------------- */ /* ------------- Template Bullets ------------- */ .csslider39 > .cs_bullets { bottom: 5px; margin-bottom: 5px; } .csslider39 > .cs_bullets > label { border-radius: 50%; margin: 0 5px; padding: 9px; background: #CBECFD; } .csslider39 > .cs_bullets > label > .cs_thumb { border: 3px solid #CBECFD; margin-top: -150%; margin-left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .csslider39 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -4px; bottom: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #CBECFD; } .csslider39 > .cs_bullets > label:hover > .cs_thumb { margin-top: -12px; opacity: 1; visibility: visible; } .csslider39 > .cs_bullets > label > .cs_point { position: absolute; left: 50%; top: 50%; margin-left: -2px; margin-top: -2px; background: transparent; border-radius: 50%; padding: 2px; } .csslider39 > .cs_bullets > label:hover > .cs_point, .csslider39 > #cs_slide39_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider39 > #cs_pause39_0:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider39 > #cs_slide39_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider39 > #cs_pause39_1:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider39 > #cs_slide39_2:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider39 > #cs_pause39_2:checked ~ .cs_bullets > label.num2 > .cs_point { background: #3A4A5A; } @keyframes bullet { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } @-webkit-keyframes bullet { 0%, 33.32333333333334% { background: #3A4A5A; } 33.333333333333336%, 100% { background: transparent; } } .csslider39 > #cs_play39:checked ~ .cs_bullets > label.num0 > .cs_point, .csslider39 > #cs_pause39:checked ~ .cs_bullets > label.num0 > .cs_point { -webkit-animation: bullet 24000ms infinite -2000ms; animation: bullet 24000ms infinite -2000ms; } .csslider39 > #cs_play39:checked ~ .cs_bullets > label.num1 > .cs_point, .csslider39 > #cs_pause39:checked ~ .cs_bullets > label.num1 > .cs_point { -webkit-animation: bullet 24000ms infinite 6000ms; animation: bullet 24000ms infinite 6000ms; } .csslider39 > #cs_play39:checked ~ .cs_bullets > label.num2 > .cs_point, .csslider39 > #cs_pause39:checked ~ .cs_bullets > label.num2 > .cs_point { -webkit-animation: bullet 24000ms infinite 14000ms; animation: bullet 24000ms infinite 14000ms; } .csslider39 > #cs_play39:checked ~ .cs_bullets > label > .cs_point, .csslider39 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; transition: none; } .csslider39 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider39 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; animation: none; } /* ------------- Template /Bullets ------------- */ /* ------------- Template Description ------------- */ .csslider39 > .cs_description > label { font-family: "Open Sans Condensed",sans-serif; font-size: 20px; line-height: normal; bottom: 50px; top: auto; left: 10px; } .csslider39 > .cs_description > label > span { color: #3A4A5A; position: relative; padding: 13px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .csslider39 > #cs_slide39_0:checked ~ .cs_description > .num0 > .cs_title, .csslider39 > #cs_slide39_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider39 > #cs_pause39_0:checked ~ .cs_description > .num0 > .cs_title, .csslider39 > #cs_pause39_0:checked ~ .cs_description > .num0 > .cs_descr, .csslider39 > #cs_slide39_1:checked ~ .cs_description > .num1 > .cs_title, .csslider39 > #cs_slide39_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider39 > #cs_pause39_1:checked ~ .cs_description > .num1 > .cs_title, .csslider39 > #cs_pause39_1:checked ~ .cs_description > .num1 > .cs_descr, .csslider39 > #cs_slide39_2:checked ~ .cs_description > .num2 > .cs_title, .csslider39 > #cs_slide39_2:checked ~ .cs_description > .num2 > .cs_descr, .csslider39 > #cs_pause39_2:checked ~ .cs_description > .num2 > .cs_title, .csslider39 > #cs_pause39_2:checked ~ .cs_description > .num2 > .cs_descr { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .csslider39 > #cs_slide39_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider39 > #cs_pause39_0:checked ~ .cs_description > .num0 .cs_wrapper, .csslider39 > #cs_slide39_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider39 > #cs_pause39_1:checked ~ .cs_description > .num1 .cs_wrapper, .csslider39 > #cs_slide39_2:checked ~ .cs_description > .num2 .cs_wrapper, .csslider39 > #cs_pause39_2:checked ~ .cs_description > .num2 .cs_wrapper { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .csslider39 > .cs_description > label > .cs_title { background-color: #CBECFD; margin: -5px 10px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider39 > .cs_description > label > .cs_descr { background-color: #e5f6fe; text-align: left; font-size: 0.8em; margin: -5px 20px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider39 > .cs_description > label > .cs_title > .cs_wrapper { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } .csslider39 > .cs_description > label > .cs_descr > .cs_wrapper { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: 950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); } @-webkit-keyframes cs_title { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_title { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 2; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 2; visibility: hidden; -webkit-transform: translateY(-100px); transform: translateY(-100px); } 35.3225%, 100% { z-index: 0; } } @-webkit-keyframes cs_descr { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } @keyframes cs_descr { 1.3854166666666667%, 31.937916666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; z-index: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; z-index: 1; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); } 35.3225%, 100% { z-index: 0; } } .csslider39 > #cs_play39:checked ~ .cs_description > .num0 > .cs_title { -webkit-animation: cs_title 24000ms infinite -1400ms ease; animation: cs_title 24000ms infinite -1400ms ease; } .csslider39 > #cs_play39:checked ~ .cs_description > .num1 > .cs_title { -webkit-animation: cs_title 24000ms infinite 6600ms ease; animation: cs_title 24000ms infinite 6600ms ease; } .csslider39 > #cs_play39:checked ~ .cs_description > .num2 > .cs_title { -webkit-animation: cs_title 24000ms infinite 14600ms ease; animation: cs_title 24000ms infinite 14600ms ease; } .csslider39 > #cs_play39:checked ~ .cs_description > .num0 > .cs_descr { -webkit-animation: cs_descr 24000ms infinite -1150ms ease; animation: cs_descr 24000ms infinite -1150ms ease; } .csslider39 > #cs_play39:checked ~ .cs_description > .num1 > .cs_descr { -webkit-animation: cs_descr 24000ms infinite 6850ms ease; animation: cs_descr 24000ms infinite 6850ms ease; } .csslider39 > #cs_play39:checked ~ .cs_description > .num2 > .cs_descr { -webkit-animation: cs_descr 24000ms infinite 14850ms ease; animation: cs_descr 24000ms infinite 14850ms ease; } @-webkit-keyframes cs_title_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @keyframes cs_title_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(10px); transform: translateY(10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); } } @-webkit-keyframes cs_descr_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes cs_descr_text { 1.3854166666666667%, 31.937916666666666% { opacity: 1; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 1.9791666666666667%, 31.344166666666666% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 35.3125% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } } .csslider39 > #cs_play39:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text 24000ms infinite -1250ms ease; animation: cs_title_text 24000ms infinite -1250ms ease; } .csslider39 > #cs_play39:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text 24000ms infinite 6750ms ease; animation: cs_title_text 24000ms infinite 6750ms ease; } .csslider39 > #cs_play39:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper { -webkit-animation: cs_title_text 24000ms infinite 14750ms ease; animation: cs_title_text 24000ms infinite 14750ms ease; } .csslider39 > #cs_play39:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text 24000ms infinite -1000ms ease; animation: cs_descr_text 24000ms infinite -1000ms ease; } .csslider39 > #cs_play39:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text 24000ms infinite 7000ms ease; animation: cs_descr_text 24000ms infinite 7000ms ease; } .csslider39 > #cs_play39:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper { -webkit-animation: cs_descr_text 24000ms infinite 15000ms ease; animation: cs_descr_text 24000ms infinite 15000ms ease; } .csslider39 > #cs_play39:checked ~ .cs_description > label > .cs_title, .csslider39 > #cs_play39:checked ~ .cs_description > label > .cs_descr, .csslider39 > #cs_play39:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider39 > #cs_play39:checked ~ .cs_description > label > .cs_descr > .cs_wrapper, .csslider39 > .pause:checked ~ .cs_description > label > .cs_title, .csslider39 > .pause:checked ~ .cs_description > label > .cs_descr, .csslider39 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper, .csslider39 > .pause:checked ~ .cs_description > label > .cs_descr > .cs_wrapper { -webkit-transition: none; transition: none; } /* ------------- /Template Description ------------- */ /* 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) { .csslider39 > .cs_description, .csslider39 > .cs_bullets { display: none; } }