/* Designed by LoKiem */
  .slider-fadein li{ animation: slider-fadein 2000ms; } @keyframes slider-fadein{ from { opacity: 0; } to { opacity: 1; } } .slider{ overflow: hidden; position: relative; margin: auto; cursor: move; visibility: hidden; user-select: none; } .slider>ul{ padding: 0; margin: 0; list-style-type: none; } .slider>ul>li{ display: none; } .slider>ul>li img{ width: 100%; max-height: 100% } .slider>.slider-basic{ overflow: hidden; width: 100%; position: relative; left: 0 } .slider>.slider-basic:after{ content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .slider>.slider-basic>li{ float: left; display: block !important; position: relative; overflow: hidden; }  .slider>i{ position: absolute; cursor: pointer; top:0; height: 100%; width:30px; color: #FFFFFF; opacity: .6 } .slider>i:hover{ color: #00ACED !important; } .slider:hover >i, .slider:hover >div{ opacity: 1 !important } .slider-btn-prev{left:0;} .slider-btn-next{right:0;} .slider>i:after{ position: absolute; top: 50%; font-size: 30px; transform: translate(0,-50%); font-family: FontAwesome; font-style: normal; } .slider-btn-prev:after{ left:5px; content: "\f104"; } .slider-btn-next:after{ right:5px; content: "\f105"; }  .slider>div{ position: absolute; cursor: pointer; left: 30px; right: 30px; bottom: 10px; padding: 5px; text-align: center; opacity: .6 } .slider>div>i{ display: inline-block; width: 15px; height: 15px; border-radius: 50%; margin: 2px; background-color: #FFFFFF; } .slider>div>i:hover, .slider>div>.slider-circle-actived{ background-color: #00ACED !important; } .slider>ul>.slider-actived{display: block;}