@import "demo.css";
.mi-slider{position:relative;margin-top:30px;height:490px}
.mi-slider ul{list-style-type:none;position:absolute;width:100%;left:41px;bottom:140px;overflow:hidden;text-align:center;pointer-events:none}
.no-js .mi-slider ul{position:relative;left:auto;bottom:auto;margin:0;overflow:visible}
.mi-slider ul.mi-current{pointer-events:auto}
.mi-slider ul li{display:inline-block;padding:20px;width:20%;max-width:300px;-webkit-transform:translateX(600%);transform:translateX(600%);-webkit-transition:opacity .2s linear;transition:opacity .2s linear}
.no-js .mi-slider ul li{-webkit-transform:translateX(0);transform:translateX(0)}
.mi-slider ul li a,.mi-slider ul li img{display:block;margin:0 auto}
.mi-slider ul li a{outline:none;cursor:pointer}
.mi-slider ul li img{max-width:100%;border:none}
.mi-slider ul li h4{display:inline-block;font-family:'Lato',sans-serif;text-transform:capitalize;font-size:12px;padding:20px 10px 0;color:#FFF}
.mi-slider ul li:hover{opacity:.7}
.mi-slider nav{position:relative;top:400px;text-align:center;max-width:800px;margin:0 auto;border-top:5px solid #333}
.no-js nav{display:none}
.mi-slider nav a{display:inline-block;font-family:'Oswald',sans-serif;padding:40px 30px 30px 34px;position:relative;color:#FFF;outline:none;-webkit-transition:color .2s linear;transition:color .2s linear}
.mi-slider nav a:hover,.mi-slider nav a.mi-selected{color:#4C4C4C}
.mi-slider nav a.mi-selected:after,.mi-slider nav a.mi-selected:before{content:'';position:absolute;top:-5px;border:solid transparent;height:0;width:0;position:absolute;pointer-events:none}
.mi-slider nav a.mi-selected:after{border-color:transparent;border-top-color:#fff;border-width:20px;left:50%;margin-left:-20px}
.mi-slider nav a.mi-selected:before{border-color:transparent;border-top-color:#333;border-width:27px;left:50%;margin-left:-27px}
.mi-slider ul:first-child li,.no-js .mi-slider ul li{-webkit-animation:scaleUp 350ms ease-in-out both;animation:scaleUp 350ms ease-in-out both}
@-webkit-keyframes scaleUp {
0%{-webkit-transform:translateX(0) scale(0)}
100%{-webkit-transform:translateX(0) scale(1)}
}
@keyframes scaleUp {
0%{-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}
100%{-webkit-transform:translateX(0) scale(1);transform:translateX(0) scale(1)}
}
.mi-slider ul:first-child li:first-child{-webkit-animation-delay:90ms;animation-delay:90ms}
.mi-slider ul:first-child li:nth-child(2){-webkit-animation-delay:180ms;animation-delay:180ms}
.mi-slider ul:first-child li:nth-child(3){-webkit-animation-delay:270ms;animation-delay:270ms}
.mi-slider ul:first-child li:nth-child(4){-webkit-animation-delay:360ms;animation-delay:360ms}
.mi-slider ul.mi-moveFromRight li{-webkit-animation:moveFromRight 350ms ease-in-out both;animation:moveFromRight 350ms ease-in-out both}
.mi-slider ul.mi-moveFromLeft li{-webkit-animation:moveFromLeft 350ms ease-in-out both;animation:moveFromLeft 350ms ease-in-out both}
.mi-slider ul.mi-moveToRight li{-webkit-animation:moveToRight 350ms ease-in-out both;animation:moveToRight 350ms ease-in-out both}
.mi-slider ul.mi-moveToLeft li{-webkit-animation:moveToLeft 350ms ease-in-out both;animation:moveToLeft 350ms ease-in-out both}
.mi-slider ul.mi-moveToLeft li:first-child,.mi-slider ul.mi-moveFromRight li:first-child,.mi-slider ul.mi-moveToRight li:nth-child(4),.mi-slider ul.mi-moveFromLeft li:nth-child(4){-webkit-animation-delay:0;animation-delay:0}
.mi-slider ul.mi-moveToLeft li:nth-child(2),.mi-slider ul.mi-moveFromRight li:nth-child(2),.mi-slider ul.mi-moveToRight li:nth-child(3),.mi-slider ul.mi-moveFromLeft li:nth-child(3){-webkit-animation-delay:90ms;animation-delay:90ms}
.mi-slider ul.mi-moveToLeft li:nth-child(3),.mi-slider ul.mi-moveFromRight li:nth-child(3),.mi-slider ul.mi-moveToRight li:nth-child(2),.mi-slider ul.mi-moveFromLeft li:nth-child(2){-webkit-animation-delay:180ms;animation-delay:180ms}
.mi-slider ul.mi-moveToLeft li:nth-child(4),.mi-slider ul.mi-moveFromRight li:nth-child(4),.mi-slider ul.mi-moveToRight li:first-child,.mi-slider ul.mi-moveFromLeft li:first-child{-webkit-animation-delay:270ms;animation-delay:270ms}
@-webkit-keyframes moveFromRight {
0%{-webkit-transform:translateX(600%)}
100%{-webkit-transform:translateX(0%)}
}
@-webkit-keyframes moveFromLeft {
0%{-webkit-transform:translateX(-600%)}
100%{-webkit-transform:translateX(0%)}
}
@-webkit-keyframes moveToRight {
0%{-webkit-transform:translateX(0%)}
100%{-webkit-transform:translateX(600%)}
}
@-webkit-keyframes moveToLeft {
0%{-webkit-transform:translateX(0%)}
100%{-webkit-transform:translateX(-600%)}
}
@keyframes moveFromRight {
0%{-webkit-transform:translateX(600%);transform:translateX(600%)}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes moveFromLeft {
0%{-webkit-transform:translateX(-600%);transform:translateX(-600%)}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes moveToRight {
0%{-webkit-transform:translateX(0%);transform:translateX(0%)}
100%{-webkit-transform:translateX(600%);transform:translateX(600%)}
}
@keyframes moveToLeft {
0%{-webkit-transform:translateX(0%);transform:translateX(0%)}
100%{-webkit-transform:translateX(-600%);transform:translateX(-600%)}
}
.mi-slider{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
@media screen and (max-width: 910px) {
.mi-slider nav{max-width:90%}
.mi-slider nav a{font-size:12px;padding:40px 10px 30px 14px}
}
@media screen and (max-width: 740px) {
.mi-slider{height:300px}
.mi-slider nav{top:220px}
}
@media screen and (max-width: 490px) {
.mi-slider{text-align:center;height:auto}
.mi-slider ul{position:relative;display:inline;bottom:auto;pointer-events:auto}
.mi-slider ul li{-webkit-animation:none!important;animation:none!important;-webkit-transform:translateX(0)!important;transform:translateX(0)!important;padding:10px 3px;min-width:140px}
.mi-slider nav{display:none}
}