.mls_slider{ float: left; position: relative; overflow: hidden; } .mls_slides_front { width: 100%; height: 100%; float: left; perspective: 50em; -webkit-perspective: 50em; } .mls_slides_front > li { float: left; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute !important; top: 0; transition: opacity 1s ease 0s; -webkit-transition: opacity 1s ease 0s; visibility: hidden; width: 100%; background-position: center center; background-size: 100% auto; } .mls_nav > div.mls_prev:before { content: "\f104"; display: block; float: left; font-family: FontAwesome; font-size: 30px; line-height: 20px; min-width: 20px; text-align: center; } .mls_nav > div.mls_next:before { content: "\f105"; display: block; float: left; font-family: FontAwesome; font-size: 30px; line-height: 20px; min-width: 20px; text-align: center; } .ets_multilayerslider { display: block; overflow: hidden; position: relative; width: 100%; margin-bottom: 25px; } .mls_slides { float: left; position: relative; transform-origin: 0 0 0; width: 100%; } .msl_layer_front.active{ display: block; opacity: 1; visibility: visible; } .msl_layer_front { display: none; opacity: 0; visibility: hidden; } .mls_loading_icon{ display: none; } .loading .mls_loading_icon { background: none repeat scroll 0 0 #fff; bottom: 0; left: 0; padding: 10px; display: block; position: absolute; right: 0; text-align: center; top: 0; vertical-align: middle; z-index: 11; } .loading .mls_loading_icon img { border: 10px solid #FFFFFF; border-radius: 10px 10px 10px 10px; float: left; left: 50%; position: relative; top: 50%; background-color: #fff; transform: translate3d(-50%, -50%, 0px); -webkit-transform: translate3d(-50%, -50%, 0px); } .loading .mls_slider_running{ width: 0%; } .mls_moving_in .mls_slider_running { animation-fill-mode: both; animation-name: running; animation-timing-function: linear; } .mls_slider_running { height: 4px; left: 0; position: absolute; top: 0; transition: opacity 1s ease 0s; -webkit-transition: opacity 1s ease 0s; width: 100%; z-index: 1000; } .mls_slider:not(.mls_moving_in) .mls_slider_running { opacity: 0; } .mls_slides .mls_slides_front span { display: block; line-height: 100%; } @keyframes running{ 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes running{ 0% { width: 0%; } 100% { width: 100%; } } .mls_pagination { bottom: 10px; float: left; left: 50%; z-index: 10; position: absolute; transform: translateX(-50%); -webkit-transform: translateX(-50%); transform-origin: 0 100% 0; -webkit-transform-origin: 0 100% 0; } .mls_pag_button { background: #fff none repeat scroll 0 0; cursor: pointer; float: left; margin: 3px; padding: 3px 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; perspective: 50em; -webkit-perspective: 50em; } .mls_pag_button:not(.active) { background: #fff!important; } .mls_slide_front.active { opacity: 1; pointer-events: auto; visibility: visible; } .mls_pag_button.active{ background: #000; color: #fff; } .mls_nav > div { background-color: rgba(0, 0, 0, 0.6); color: #FFFFFF; cursor: pointer; font-size: 0; opacity: 0; padding: 15px 10px; position: relative; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; visibility: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; perspective: 50em; -webkit-perspective: 50em; margin-top: -25px; width: 50px; height: 50px; } .ets_multilayerslider:hover .mls_nav > div{ opacity: 1; visibility: visible; transform: translateX(0%) translatey(-50%); -webkit-transform: translateX(0%) translatey(-50%); margin-left: 0; margin-right: 0; } .mls_nav { height: 0; left: 0; position: absolute; top: 50%; width: 100%; } .mls_prev { float: left; transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; margin-left: -100px; } .mls_next { float: right; transform-origin: 100% 0 0; -webkit-transform-origin: 100% 0 0; margin-right: -100px; } .mls_layer_type_front_text p { font-size: inherit; color: inherit; font-weight: inherit; }