This repository has been archived on 2025-06-21. You can view files and clone it, but you cannot make any changes to it's state, such as pushing and creating new issues, pull requests or comments.
suitedesk/themes/zuitedesk/css/frontpage-cslider.css

1333 lines
21 KiB
CSS

.da-slider {
width: 100%;
min-width: 320px;
height: 520px;
position: relative;
margin:0 auto;
overflow: hidden;
background: transparent url(../images/frontpage/SliderLight.jpg) repeat-x 0% center;
background-size:auto 100%;
-webkit-transition: background-position 1s ease-out 0.3s;
-moz-transition: background-position 1s ease-out 0.3s;
-o-transition: background-position 1s ease-out 0.3s;
-ms-transition: background-position 1s ease-out 0.3s;
transition: background-position 1s ease-out 0.3s;
}
.da-slider .container {
margin-top: -30px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
.da-slide {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: left;
}
.da-slide-current {
z-index: 900;
}
.da-slider-fb .da-slide {
left: 100%;
display: none;
}
.da-slider-fb .da-slide.da-slide-current {
left: 0px;
display: block;
}
.da-slide h2, .da-slide h4, .da-slide p, .da-slide .da-link, .da-slide .da-img {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
left: 110%;
}
.da-slider-fb .da-slide h2, .da-slider-fb .da-slide h4, .da-slider-fb .da-slide p, .da-slider-fb .da-slide .da-link {
left: 10%;
opacity: 1;
display: block;
filter: alpha(opacity=100);
}
.da-slider-fb .da-slide .da-img {
left: 60%;
opacity: 1;
display: block;
filter: alpha(opacity=100);
}
.da-slide h2,
.da-slide h4 {
text-transform: uppercase;
white-space: nowrap;
z-index: 10;
}
.da-slide h2 {
color: #181a1c;
width: 50%;
top: 120px;
font-size: 38px;
text-transform: capitalize;
font-variant: small-caps;
font-weight: bold;
}
.da-slide h4 {
color: #556372;
width: 50%;
font-size: 22px;
top: 175px;
font-weight: normal;
}
.da-slide p {
width: 50%;
padding: 0;
top: 230px;
color: #003346;
height: 90px;
overflow: hidden;
font-weight: 400;
z-index: 5;
}
.da-slide .da-img {
width: 40%;
top: 80px;
height: 256px;
line-height: 360px;
left: 110%;
/*60%*/
}
.da-slide .da-link {
top: 340px;
margin: 0;
font-size: 18px;
text-align: center;
}
.da-dots {
width: 100%;
position: absolute;
text-align: center;
left: 0;
bottom: 20px;
z-index: 900;
-moz-user-select: none;
-webkit-user-select: none;
}
.da-dots span {
display: inline-block;
width: 50px;
height: 3px;
margin: 0 5px 0 0;
background: #fff;
cursor: pointer;
position: relative;
}
.da-dots span.da-dots-current {
background: #29383f;
}
.da-arrows {
-moz-user-select: none;
-webkit-user-select: none;
}
.da-arrows span {
position: absolute;
height: 100%;
width: 45px;
cursor: pointer;
z-index: 900;
opacity: 0;
}
.da-slider:hover .da-arrows span {
opacity: 1;
}
.da-arrows span:after {
content: '';
position: absolute;
}
.da-arrows span:hover:after {
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}
.da-arrows span:active:after {
box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
}
.da-arrows span.da-arrows-next:after {
background-position: top right;
}
.da-arrows span.da-arrows-prev {
left: 15px;
background: transparent url(../images/frontpage/Left.png) no-repeat center center;
}
.da-arrows span.da-arrows-next {
right: 15px;
background: transparent url(../images/frontpage/Right.png) no-repeat center center;
}
.da-slide-current h2, .da-slide-current h4, .da-slide-current p, .da-slide-current .da-link {
left: 10%;
opacity: 1;
}
.da-slide-current .da-img {
left: 60%;
opacity: 1;
}
/* Animation classes and animations */
/* Slide in from the right*/
.da-slide-fromright h2 {
-webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
-moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
-o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
-ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright h4 {
-webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
-moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
-o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
-ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright p {
-webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
-moz-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
-o-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
-ms-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .da-link {
-webkit-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
-moz-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
-o-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
-ms-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
}
.da-slide-fromright .da-img {
-webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
-moz-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
-o-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
-ms-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
}
@-webkit-keyframes fromRightAnim1 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-webkit-keyframes fromRightAnim2 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-webkit-keyframes fromRightAnim3 {
0% {
left: 110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-webkit-keyframes fromRightAnim4 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@-moz-keyframes fromRightAnim1 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-moz-keyframes fromRightAnim2 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-moz-keyframes fromRightAnim3 {
0% {
left: 110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-moz-keyframes fromRightAnim4 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@-o-keyframes fromRightAnim1 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-o-keyframes fromRightAnim2 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-o-keyframes fromRightAnim3 {
0% {
left: 110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-o-keyframes fromRightAnim4 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@-ms-keyframes fromRightAnim1 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-ms-keyframes fromRightAnim2 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-ms-keyframes fromRightAnim3 {
0% {
left: 110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-ms-keyframes fromRightAnim4 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@keyframes fromRightAnim1 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@keyframes fromRightAnim2 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@keyframes fromRightAnim3 {
0% {
left: 110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@keyframes fromRightAnim4 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
/* Slide in from the left*/
.da-slide-fromleft h2 {
-webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
-moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
-o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
-ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft h4 {
-webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
-moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
-o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
-ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft p {
-webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
-moz-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
-o-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
-ms-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .da-link {
-webkit-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
-moz-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
-o-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
-ms-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
}
.da-slide-fromleft .da-img {
-webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
-moz-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
-o-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
-ms-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
}
@-webkit-keyframes fromLeftAnim1 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-webkit-keyframes fromLeftAnim2 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-webkit-keyframes fromLeftAnim3 {
0% {
left: -110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-webkit-keyframes fromLeftAnim4 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@-moz-keyframes fromLeftAnim1 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-moz-keyframes fromLeftAnim2 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-moz-keyframes fromLeftAnim3 {
0% {
left: -110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-moz-keyframes fromLeftAnim4 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@-o-keyframes fromLeftAnim1 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-o-keyframes fromLeftAnim2 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-o-keyframes fromLeftAnim3 {
0% {
left: -110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-o-keyframes fromLeftAnim4 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@-ms-keyframes fromLeftAnim1 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-ms-keyframes fromLeftAnim2 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-ms-keyframes fromLeftAnim3 {
0% {
left: -110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-ms-keyframes fromLeftAnim4 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@keyframes fromLeftAnim1 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@keyframes fromLeftAnim2 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@keyframes fromLeftAnim3 {
0% {
left: -110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@keyframes fromLeftAnim4 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
/* Slide out to the right */
.da-slide-toright h2 {
-webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
-moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
-o-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
-ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
animation: toRightAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-toright h4 {
-webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
-moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
-o-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
-ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
animation: toRightAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-toright p {
-webkit-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
-moz-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
-o-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
-ms-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
animation: toRightAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toright .da-link {
-webkit-animation: toRightAnim3 0.4s ease-in-out both;
-moz-animation: toRightAnim3 0.4s ease-in-out both;
-o-animation: toRightAnim3 0.4s ease-in-out both;
-ms-animation: toRightAnim3 0.4s ease-in-out both;
animation: toRightAnim3 0.4s ease-in-out both;
}
.da-slide-toright .da-img {
-webkit-animation: toRightAnim4 0.6s ease-in-out both;
-moz-animation: toRightAnim4 0.6s ease-in-out both;
-o-animation: toRightAnim4 0.6s ease-in-out both;
-ms-animation: toRightAnim4 0.6s ease-in-out both;
animation: toRightAnim4 0.6s ease-in-out both;
}
@-webkit-keyframes toRightAnim1 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-webkit-keyframes toRightAnim2 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-webkit-keyframes toRightAnim3 {
0% {
left: 10%;
opacity: 1;
}
99% {
left: 10%;
opacity: 0;
}
100% {
left: 100%;
opacity: 0;
}
}
@-webkit-keyframes toRightAnim4 {
0% {
left: 60%;
opacity: 1;
}
30% {
left: 55%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-moz-keyframes toRightAnim1 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-moz-keyframes toRightAnim2 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-moz-keyframes toRightAnim3 {
0% {
left: 10%;
opacity: 1;
}
99% {
left: 10%;
opacity: 0;
}
100% {
left: 100%;
opacity: 0;
}
}
@-moz-keyframes toRightAnim4 {
0% {
left: 60%;
opacity: 1;
}
30% {
left: 55%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-o-keyframes toRightAnim1 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-o-keyframes toRightAnim2 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-o-keyframes toRightAnim3 {
0% {
left: 10%;
opacity: 1;
}
99% {
left: 10%;
opacity: 0;
}
100% {
left: 100%;
opacity: 0;
}
}
@-o-keyframes toRightAnim4 {
0% {
left: 60%;
opacity: 1;
}
30% {
left: 55%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-ms-keyframes toRightAnim1 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-ms-keyframes toRightAnim2 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-ms-keyframes toRightAnim3 {
0% {
left: 10%;
opacity: 1;
}
99% {
left: 10%;
opacity: 0;
}
100% {
left: 100%;
opacity: 0;
}
}
@-ms-keyframes toRightAnim4 {
0% {
left: 60%;
opacity: 1;
}
30% {
left: 55%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@keyframes toRightAnim1 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@keyframes toRightAnim2 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@keyframes toRightAnim3 {
0% {
left: 10%;
opacity: 1;
}
99% {
left: 10%;
opacity: 0;
}
100% {
left: 100%;
opacity: 0;
}
}
@keyframes toRightAnim4 {
0% {
left: 60%;
opacity: 1;
}
30% {
left: 55%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
/* Slide out to the left*/
.da-slide-toleft h2 {
-webkit-animation: toLeftAnim1 0.6s ease-in-out both;
-moz-animation: toLeftAnim1 0.6s ease-in-out both;
-o-animation: toLeftAnim1 0.6s ease-in-out both;
-ms-animation: toLeftAnim1 0.6s ease-in-out both;
animation: toLeftAnim1 0.6s ease-in-out both;
}
.da-slide-toleft p {
-webkit-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
-moz-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
-o-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
-ms-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toleft .da-link {
-webkit-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
-moz-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
-o-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
-ms-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
}
.da-slide-toleft .da-img {
-webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
-moz-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
-o-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
-ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
}
@-webkit-keyframes toLeftAnim1 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-webkit-keyframes toLeftAnim2 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-webkit-keyframes toLeftAnim3 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-webkit-keyframes toLeftAnim4 {
0% {
left: 60%;
opacity: 1;
}
70% {
left: 30%;
opacity: 0;
}
100% {
left: -50%;
opacity: 0;
}
}
@-moz-keyframes toLeftAnim1 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-moz-keyframes toLeftAnim2 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-moz-keyframes toLeftAnim3 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-moz-keyframes toLeftAnim4 {
0% {
left: 60%;
opacity: 1;
}
70% {
left: 30%;
opacity: 0;
}
100% {
left: -50%;
opacity: 0;
}
}
@-o-keyframes toLeftAnim1 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-o-keyframes toLeftAnim2 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-o-keyframes toLeftAnim3 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-o-keyframes toLeftAnim4 {
0% {
left: 60%;
opacity: 1;
}
70% {
left: 30%;
opacity: 0;
}
100% {
left: -50%;
opacity: 0;
}
}
@-ms-keyframes toLeftAnim1 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-ms-keyframes toLeftAnim2 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-ms-keyframes toLeftAnim3 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-ms-keyframes toLeftAnim4 {
0% {
left: 60%;
opacity: 1;
}
70% {
left: 30%;
opacity: 0;
}
100% {
left: -50%;
opacity: 0;
}
}
@keyframes toLeftAnim1 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@keyframes toLeftAnim2 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@keyframes toLeftAnim3 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@keyframes toLeftAnim4 {
0% {
left: 60%;
opacity: 1;
}
70% {
left: 30%;
opacity: 0;
}
100% {
left: -50%;
opacity: 0;
}
}
@media (max-width: 979px) {
.da-slide h2 {
font-size: 28px;
top: 40px;
}
.da-slide h4 {
font-size: 18px;
top: 80px;
}
.da-slide p {
font-size: 14px;
line-height: 16px;
top: 120px;
}
.da-slide .da-img {
top: 80px;
line-height: 100px;
}
.da-slide .da-img img {
width: 90%;
}
.da-slide .da-link {
top: 65%;
}
}
@media (max-width: 767px) {
.da-slide h2 {
font-size: 20px;
top: 40px;
}
.da-slide h4 {
font-size: 16px;
top: 80px;
}
.da-slide p {
display: none;
}
.da-slide .da-img {
top: 50px;
}
.da-slide .da-img img {
width: 75%;
}
.da-slide .da-link {
margin: 0;
font-size: 14px;
top: 150px;
}
.da-dots {
bottom: 10px;
}
}
@media (max-width: 480px) {
.da-slide h2 {
font-size: 16px;
top: 30px;
}
.da-slide h4 {
font-size: 14px;
top: 70px;
}
.da-slide .da-img {
display: none;
}
.da-slide .da-link {
margin: 0;
padding: 2px;
font-size: 12px;
top: 106px;
}
.da-dots {
bottom: 5px;
}
.da-arrows span {
display: none;
}
}