1/*! Swipebox v1.3.0 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */ 2html.swipebox-html.swipebox-touch { 3 overflow: hidden !important; 4} 5 6#swipebox-overlay img { 7 border: none !important; 8} 9 10#swipebox-overlay { 11 width: 100%; 12 height: 100%; 13 position: fixed; 14 top: 0; 15 left: 0; 16 z-index: 99999 !important; 17 overflow: hidden; 18 -webkit-user-select: none; 19 -moz-user-select: none; 20 -ms-user-select: none; 21 user-select: none; 22} 23 24#swipebox-container { 25 position: relative; 26 width: 100%; 27 height: 100%; 28} 29 30#swipebox-slider { 31 -webkit-transition: -webkit-transform 0.4s ease; 32 transition: transform 0.4s ease; 33 height: 100%; 34 left: 0; 35 top: 0; 36 width: 100%; 37 white-space: nowrap; 38 position: absolute; 39 display: none; 40 cursor: pointer; 41} 42#swipebox-slider .slide { 43 height: 100%; 44 width: 100%; 45 line-height: 1px; 46 text-align: center; 47 display: inline-block; 48} 49#swipebox-slider .slide:before { 50 content: ""; 51 display: inline-block; 52 height: 50%; 53 width: 1px; 54 margin-right: -1px; 55} 56#swipebox-slider .slide img, 57#swipebox-slider .slide .swipebox-video-container, 58#swipebox-slider .slide .swipebox-inline-container { 59 display: inline-block; 60 max-height: 100%; 61 max-width: 100%; 62 margin: 0; 63 padding: 0; 64 width: auto; 65 height: auto; 66 vertical-align: middle; 67} 68#swipebox-slider .slide .swipebox-video-container { 69 background: none; 70 max-width: 1140px; 71 max-height: 100%; 72 width: 100%; 73 padding: 5%; 74 -webkit-box-sizing: border-box; 75 box-sizing: border-box; 76} 77#swipebox-slider .slide .swipebox-video-container .swipebox-video { 78 width: 100%; 79 height: 0; 80 padding-bottom: 56.25%; 81 overflow: hidden; 82 position: relative; 83} 84#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe { 85 width: 100% !important; 86 height: 100% !important; 87 position: absolute; 88 top: 0; 89 left: 0; 90} 91#swipebox-slider .slide-loading { 92 background: url(../img/loader.gif) no-repeat center center; 93} 94 95#swipebox-bottom-bar, 96#swipebox-top-bar { 97 -webkit-transition: 0.5s; 98 transition: 0.5s; 99 position: absolute; 100 left: 0; 101 z-index: 999; 102 min-height: 50px; 103 width: 100%; 104} 105 106#swipebox-bottom-bar { 107 bottom: -50px; 108} 109#swipebox-bottom-bar.visible-bars { 110 -webkit-transform: translate3d(0, -50px, 0); 111 transform: translate3d(0, -50px, 0); 112} 113 114#swipebox-top-bar { 115 bottom: 100%; 116} 117#swipebox-top-bar.visible-bars { 118 -webkit-transform: translate3d(0, 100%, 0); 119 transform: translate3d(0, 100%, 0); 120} 121 122#swipebox-title { 123 display: block; 124 width: 100%; 125 text-align: center; 126} 127 128#swipebox-prev, 129#swipebox-next, 130#swipebox-close { 131 background-image: url(../img/icons.png); 132 background-repeat: no-repeat; 133 border: none !important; 134 text-decoration: none !important; 135 cursor: pointer; 136 width: 50px; 137 height: 50px; 138 top: 0; 139} 140 141#swipebox-arrows { 142 display: block; 143 margin: 0 auto; 144 width: 100%; 145 height: 50px; 146} 147 148#swipebox-prev { 149 background-position: -32px 13px; 150 float: left; 151} 152 153#swipebox-next { 154 background-position: -78px 13px; 155 float: right; 156} 157 158#swipebox-close { 159 top: 0; 160 right: 0; 161 position: absolute; 162 z-index: 9999; 163 background-position: 15px 12px; 164} 165 166.swipebox-no-close-button #swipebox-close { 167 display: none; 168} 169 170#swipebox-prev.disabled, 171#swipebox-next.disabled { 172 opacity: 0.3; 173} 174 175.swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider { 176 -webkit-animation: rightSpring 0.3s; 177 animation: rightSpring 0.3s; 178} 179.swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider { 180 -webkit-animation: leftSpring 0.3s; 181 animation: leftSpring 0.3s; 182} 183 184.swipebox-touch #swipebox-container:before, .swipebox-touch #swipebox-container:after { 185 -webkit-backface-visibility: hidden; 186 backface-visibility: hidden; 187 -webkit-transition: all .3s ease; 188 transition: all .3s ease; 189 content: ' '; 190 position: absolute; 191 z-index: 999; 192 top: 0; 193 height: 100%; 194 width: 20px; 195 opacity: 0; 196} 197.swipebox-touch #swipebox-container:before { 198 left: 0; 199 -webkit-box-shadow: inset 10px 0px 10px -8px #656565; 200 box-shadow: inset 10px 0px 10px -8px #656565; 201} 202.swipebox-touch #swipebox-container:after { 203 right: 0; 204 -webkit-box-shadow: inset -10px 0px 10px -8px #656565; 205 box-shadow: inset -10px 0px 10px -8px #656565; 206} 207.swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before { 208 opacity: 1; 209} 210.swipebox-touch #swipebox-overlay.rightSpringTouch #swipebox-container:after { 211 opacity: 1; 212} 213 214@-webkit-keyframes rightSpring { 215 0% { 216 left: 0; 217 } 218 50% { 219 left: -30px; 220 } 221 100% { 222 left: 0; 223 } 224} 225 226@keyframes rightSpring { 227 0% { 228 left: 0; 229 } 230 50% { 231 left: -30px; 232 } 233 100% { 234 left: 0; 235 } 236} 237@-webkit-keyframes leftSpring { 238 0% { 239 left: 0; 240 } 241 50% { 242 left: 30px; 243 } 244 100% { 245 left: 0; 246 } 247} 248@keyframes leftSpring { 249 0% { 250 left: 0; 251 } 252 50% { 253 left: 30px; 254 } 255 100% { 256 left: 0; 257 } 258} 259@media screen and (min-width: 800px) { 260 #swipebox-close { 261 right: 10px; 262 } 263 264 #swipebox-arrows { 265 width: 92%; 266 max-width: 800px; 267 } 268} 269/* Skin 270--------------------------*/ 271#swipebox-overlay { 272 background: #0d0d0d; 273} 274 275#swipebox-bottom-bar, 276#swipebox-top-bar { 277 text-shadow: 1px 1px 1px black; 278 background: #000; 279 opacity: 0.95; 280} 281 282#swipebox-top-bar { 283 color: white !important; 284 font-size: 15px; 285 line-height: 43px; 286 font-family: Helvetica, Arial, sans-serif; 287} 288#swipebox-top-bar div.caption { 289 font-size: 13px; 290 line-height: 20px; 291} 292