.da-slider{ width: 100%; min-width: 520px; height: 340px; position: relative; overflow: hidden; -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-slide{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; font-family:Arial; text-align: left; }
.da-slide ul li { margin-bottom:10px; }
.da-slide-current{ z-index: 800; }
.da-slider-fb .da-slide{ left: 100%; }
.da-slider-fb  .da-slide.da-slide-current{ left: 0px; }
.da-slide h2, .da-slide p, .da-slide ul, .da-slide .da-link, .da-slide .da-img{ position: absolute; opacity: 0; left: 110%; }
.da-img img { } .da-slider-fb .da-slide h2, .da-slider-fb .da-slide p, .da-slider-fb .da-slide ul, .da-slider-fb .da-slide .da-link{ left: 10%; opacity: 1; }
.da-slider-fb .da-slide .da-img{ left: 60%; opacity: 1; }
.da-slide h2{ color: #fff; width: auto; margin-left: 575px; top: 0; white-space: nowrap; z-index: 10; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); font-family: Arial; }
.title1 { margin-top:75px; font-size:34px } .title2 { font-weight: normal; margin-top:196px; font-size: 15px; /*background-image:url(../images/ban_white_dot.png); background-repeat:no-repeat;*/ }
.title3 { font-weight: normal; margin-top:224px; font-size: 15px; } .title4 { font-weight: normal; margin-top:252px; font-size: 15px; }
.title5 { margin-top:20px;font-size:34px }
.banUl {top:60px !important;}
.banUl li {font-size:12px;}
.da-slide ul{ width: 30%; top: 135px; color: #ffffff; font-size: 14px; line-height: 18px; height: auto; margin-left:578px; overflow: hidden; font-family: Arial; font-weight: 400; padding: 0 0 0 16px; }
.da-slide p{ width: 45%; top: 212px; color: #ffffff; font-size: 14px; line-height: 18px; height: 95px; margin-left:578px; overflow: hidden; font-family: Arial; font-weight: 400; }
.da-slide .da-img{ margin-left: -600px; margin-top: -63px; text-align: center; width: 657px; top: 70px; height: 326px; line-height: 320px; left: 110%; /*60%*/ }
.da-slide .da-link{ top: 270px; /*depends on p height*/ border-radius: 30px; box-shadow: 0px 1px 1px rgba(0,0,0,0.1); color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); border: 8px solid rgba(255,255,255,0.8); padding: 2px 20px 0px; font-size: 18px; line-height: 30px; width: 80px; text-align: center; background: rgba(255,255,255,0.2); }
.da-slide .da-link:hover{ background: rgba(255,255,255,0.3); }
.da-dots{ bottom: 10px; left: 0; margin-left: 784px; position: absolute; text-align: center; width: 312px; z-index: 900; -moz-user-select: none; -webkit-user-select: none; } .da-dots span{ display: inline-block; position: relative; width: 12px; height: 12px; background-image: url(../images/ban_white_dot.png); background-repeat:no-repeat; margin: 3px; cursor: pointer; }
.da-dots span.da-dots-current:after{ content: ''; width: 12px; height: 12px; position: absolute; margin: 0 0 0 -6px; background-image: url(../images/ban_dot.png); background-repeat:no-repeat; }
.da-arrows{ -moz-user-select: none; -webkit-user-select: none; }
.da-arrows span{ position: absolute; top: 42%; height: 30px; width: 30px; cursor: pointer; z-index: 900; -webkit-transition: opacity 0.4s ease-in-out-out 0.2s; -moz-transition: opacity 0.4s ease-in-out-out 0.2s; -o-transition: opacity 0.4s ease-in-out-out 0.2s; -ms-transition: opacity 0.4s ease-in-out-out 0.2s; transition: opacity 0.4s ease-in-out-out 0.2s; } .da-arrows span:after{ content: ''; position: absolute; width: 48px; height: 55px; top: 5px; left: 2px; background: transparent url(../images/arrows.png) no-repeat top left; }
.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: -5px; } .da-arrows span.da-arrows-next{ right: 15px; }
.da-slide-current h2, .da-slide-current p, .da-slide-current ul, .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 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 ul{ -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; }
.da-slide-fromright .da-Cont{ position: relative; z-index:99; }

@-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 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 ul{ -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 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 ul{ -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.9s ease-in-out both; -moz-animation: toLeftAnim1 0.9s ease-in-out both; -o-animation: toLeftAnim1 0.9s ease-in-out both; -ms-animation: toLeftAnim1 0.9s ease-in-out both; animation: toLeftAnim1 0.9s ease-in-out both; } .da-slide-toleft p{ -webkit-animation: toLeftAnim2 0.9s ease-in-out 0.6s both; -moz-animation: toLeftAnim2 0.6s ease-in-out 0.6s both; -o-animation: toLeftAnim2 0.9s ease-in-out 0.6s both; -ms-animation: toLeftAnim2 0.9s ease-in-out 0.6s both; animation: toLeftAnim2 0.9s ease-in-out 0.6s both; }
.da-slide-toleft ul{ -webkit-animation: toLeftAnim2 0.9s ease-in-out 0.6s both; -moz-animation: toLeftAnim2 0.9s ease-in-out 0.6s both; -o-animation: toLeftAnim2 0.9s ease-in-out 0.6s both; -ms-animation: toLeftAnim2 0.9s ease-in-out 0.6s both; animation: toLeftAnim2 0.9s ease-in-out 0.6s both; }
.da-slide-toleft .da-link{ -webkit-animation: toLeftAnim3 0.9s ease-in-out 0.9s both; -moz-animation: toLeftAnim3 0.9s ease-in-out 0.9s both; -o-animation: toLeftAnim3 0.9s ease-in-out 0.9s both; -ms-animation: toLeftAnim3 0.9s ease-in-out 0.9s both; animation: toLeftAnim3 0.9s ease-in-out 0.9s both; }
.da-slide-toleft .da-img{ -webkit-animation: toLeftAnim4 0.9s ease-in-out 0.8s both; -moz-animation: toLeftAnim4 0.9s ease-in-out 0.8s both; -o-animation: toLeftAnim4 0.9s ease-in-out 0.8s both; -ms-animation: toLeftAnim4 0.9s ease-in-out 0.8s both; animation: toLeftAnim4 0.9s ease-in-out 0.8s 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; } }