/* | ------------------------------------------ | Glide styles | ------------------------------------------ | Here are slider styles | */ *{ margin: 0; padding: 0; border: 0; list-style:none; } .xui-content .varietyTheme-movie .pic01 { width: 100%; height: 100%; text-align:right; font-size: 5em; color: #fff; text-transform: capitalize; vertical-align:middle; background:url(../images/vt_bg5_01.jpg) 50% 0 no-repeat;-moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-size:cover; } .xui-content .varietyTheme-movie .pic02 { width: 100%; height: 100%; text-align: right; font-size: 5em; color: #fff; text-transform: capitalize; vertical-align:middle; background:url(../images/vt_bg5_02.jpg) 50% 0 no-repeat;-moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-size:cover; } .xui-content .varietyTheme-movie .pic03 { width: 100%; height: 100%; text-align: right; font-size: 5em; color: #fff; text-transform: capitalize; vertical-align:middle; background:url(../images/vt_bg5_03.jpg) 50% 0 no-repeat;-moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-size:cover; } .xui-content .varietyTheme-sports .pic01 { width: 100%; height: 100%; text-align:left; font-size: 5em; color: #fff; text-transform: capitalize; vertical-align:middle; background:url(../images/vt_bg6_01.jpg) 50% 0 no-repeat;-moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-size:cover; } .xui-content .varietyTheme-sports .pic02 { width: 100%; height: 100%; text-align: left; font-size: 5em; color: #fff; text-transform: capitalize; vertical-align:middle; background:url(../images/vt_bg6_02.jpg) 50% 0 no-repeat;-moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-size:cover; } .xui-content .varietyTheme-sports .pic03 { width: 100%; height: 100%; text-align: left; font-size: 5em; color: #fff; text-transform: capitalize; vertical-align:middle; background:url(../images/vt_bg6_03.jpg) 50% 0 no-repeat;-moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-size:cover; } .slider01 { position: relative; width: 100%; height: 1080px; overflow: hidden; } .slider02 { position: relative; width: 100%; height: 1080px; overflow: hidden; } .slides { height: 100%; /* Simple clear fix */ overflow: hidden; /** * Prevent blinking issue * Not tested. Experimental. -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; */ /** * Here is CSS transitions * responsible for slider animation in modern broswers */ -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); } .slide { height: 100%; float: left; clear: none; } .slides .slide img{ max-width: 100%; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .slider-arrows {} .slider-arrow { position: absolute; display: block; margin-bottom: -20px; width: 60px; height: 60px; line-height: 60px; text-decoration: none; text-align: center; color: #fff; font-size: 2em; background-color: #333; background-color: rgba(50,50,50,.3); border-radius: 50%; } .slider-arrow--right { bottom: 50%; right: 30px; } .slider-arrow--left { bottom: 50%; left: 30px; } .slider-nav { position: absolute; bottom: 40px; } .slider-nav__item { width: 14px; height: 14px; float: left; clear: none; display: block; margin: 0 10px; background:rgba(255,255,255,0.40); border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ transition: all ease .3s; } .slider-nav__item:hover { background:rgba(255,255,255,1);transition: all ease .3s;} .slider-nav__item--current { background:rgba(255,255,255,1); }