templates/shop-isle/assets/css/slider.css

   1 /* -------------------------------------------------------------------
   2 General Styles - FlexSlider
   3 ------------------------------------------------------------------- */
   4
   5 .hero-slider .flex-direction-nav a,
   6 .hero-slider .flex-control-nav > li > a {
   7         -webkit-transition: all 0.3s ease-in-out 0s;
   8         transition: all 0.3s ease-in-out 0s;
   9 }
  10
  11 .hero-slider .flex-direction-nav a {
  12         display: block;
  13         overflow: hidden;
  14         position: absolute;
  15         z-index: 10;
  16         top: 0;
  17         width: 50%;
  18         height: 100%;
  19         margin: 0;
  20         opacity: 0;
  21 }
  22
  23 .hero-slider .flex-direction-nav .flex-prev {
  24         left: 0;
  25         opacity: 0;
  26         cursor: grab;
  27         cursor: -webkit-grab;
  28         cursor: url(../images/prev-light.png) 40 40, url(../images/prev-light.cur) 40 40, e-resize;
  29         /* standard: note the different path for the .cur file */
  30         cursor: url(../images/prev-light.cur) 40 40, n-resize\9;
  31         /* IE 8 and below */
  32
  33         *cursor: url(../images/prev-light.cur) 40 40, n-resize;
  34         /* IE 7 and below */
  35         _cursor: url(../images/prev-light.cur) 40 40, n-resize;
  36         /* IE 6 */
  37 }
  38
  39 .hero-slider .flex-direction-nav .flex-next {
  40         right: 0;
  41         opacity: 0;
  42         cursor: grab;
  43         cursor: -webkit-grab;
  44         cursor: url(../images/next-light.png) 40 40, url(../images/next-light.cur) 40 40, e-resize;
  45         /* standard: note the different path for the .cur file */
  46         cursor: url(../images/next-light.cur) 40 40, n-resize\9;
  47         /* IE 8 and below */
  48
  49         *cursor: url(../images/next-light.cur) 40 40, n-resize;
  50         /* IE 7 and below */
  51         _cursor: url(../images/next-light.cur) 40 40, n-resize;
  52         /* IE 6 */
  53 }
  54
  55 .hero-slider .flex-direction-nav li .flex-disabled {
  56         cursor: default;
  57 }
  58
  59 .hero-slider .flex-control-nav {
  60         position: absolute;
  61         z-index: 11;
  62         bottom: 20px;
  63         left: 50%;
  64         width: auto;
  65         text-align: center;
  66         -webkit-transform: translateX(-50%);
  67         -ms-transform: translateX(-50%);
  68         transform: translateX(-50%);
  69 }
  70
  71 .hero-slider .flex-control-nav > li {
  72         display: inline-block;
  73         margin: 5px 3px;
  74 }
  75
  76 .hero-slider .flex-control-nav > li > a {
  77         display: block;
  78         width: 6px;
  79         height: 6px;
  80         border: 1px solid #fff;
  81         border-radius: 6px;
  82         background: transparent;
  83 }
  84
  85 .hero-slider .flex-control-nav > li > a:hover,
  86 .hero-slider .flex-control-nav > li > a.flex-active {
  87         background: #fff;
  88 }
  89
  90 .hero-slider .home-slider-overlay {
  91         display: none;
  92 }
  93
  94 #home .hero-slider {
  95         width: 100%;
  96         height: 100%;
  97 }
  98
  99 @media screen and (min-width: 768px) {
 100         #home .hero-slider {
 101                 position: fixed;
 102         }
 103
 104         .hero-slider .home-slider-overlay {
 105                 display: block;
 106                 position: absolute;
 107                 top: 0;
 108                 left: 0;
 109                 width: 100%;
 110                 height: 100%;
 111                 opacity: 0.3;
 112                 background: rgba(0,0,0,1);
 113         }
 114 }
 115
 116
 117 /* -------------------------------------------------------------------
 118 Hero Slider
 119 ------------------------------------------------------------------- */
 120
 121 .hero-slider {
 122         margin: 0!important;
 123 }
 124
 125 .hero-slider .slides > li {
 126         display: none;
 127         -webkit-backface-visibility: hidden;
 128 }
 129
 130 .hero-slider,
 131 .hero-slider .flex-viewport {
 132         width: 100%;
 133         height: 100% !important;
 134         margin: 0;
 135         padding: 0;
 136 }
 137
 138 .hero-slider .slides {
 139         height: 100% !important;
 140         -webkit-transition-delay: 1s;
 141         transition-delay: 1s;
 142 }
 143
 144 .hero-slider .flex-direction-nav a {
 145         width: 15%;
 146 }
 147
 148 .hero-slider .slides li {
 149         width: 100%;
 150         height: 100% !important;
 151         margin: 0;
 152         padding: 0;
 153         background-repeat: no-repeat;
 154         background-position: center center;
 155         background-size: cover;
 156 }
 157
 158 /* Caption */
 159 .hero-slider .hs-caption {
 160         display: table;
 161         position: relative;
 162         width: 70%;
 163         height: 100%;
 164         margin: 0 auto;
 165 }
 166
 167 .hero-slider .hs-caption {
 168         display: table;
 169         position: relative;
 170         width: 100%;
 171         height: 100%;
 172         margin: 0 auto;
 173 }
 174
 175 .hero-slider .caption-content {
 176         display: table-cell;
 177         text-align: center;
 178         vertical-align: middle;
 179 }
 180
 181
 182 /* -------------------------------------------------------------------
 183 General Styles - Owlcarousel
 184 ------------------------------------------------------------------- */
 185
 186 .owl-controls {
 187         margin-top: 40px;
 188 }
 189
 190 .owl-pagination div {
 191         display: inline-block;
 192 }
 193
 194 .owl-controls .owl-page span {
 195         display: block;
 196         width: 6px;
 197         height: 6px;
 198         margin: 0 3px 5px;
 199         border: 1px solid #111;
 200         border-radius: 6px;
 201         background: transparent;
 202         -webkit-transition: all 0.3s ease-in-out 0s;
 203         transition: all 0.3s ease-in-out 0s;
 204 }
 205
 206 .owl-controls .owl-page.active span,
 207 .owl-controls.clickable .owl-page:hover span {
 208         background: #111;
 209 }
 210
 211 .owl-controls .owl-buttons > div {
 212         display: inline-block;
 213         margin: 5px;
 214         color: #111;
 215         font-size: 14px;
 216 }