css/venobox/venobox.css

0001 /* ------ venobox.css --------*/
0002 .vbox-overlay *, .vbox-overlay *:before, .vbox-overlay *:after{
0003     -webkit-backface-visibility: hidden;
0004     -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
0005 body{
0006     -webkit-overflow-scrolling:touch;
0007 }
0008 /* ------- overlay: change here background color and opacity ----- */
0009 .vbox-overlay{
0010     background: #181818;
0011     background: rgba(0,0,0,0.85);
0012     width: 100%;
0013     height: auto;
0014     position: absolute;
0015     top: 0;
0016     left: 0;
0017     z-index: 999;
0018     overflow: hidden;
0019     opacity: 0;
0020     transition: opacity .25s ease-in-out;
0021     -moz-transition: opacity .25s ease-in-out;
0022     -webkit-transition: opacity .25s ease-in-out;
0023 }
0024 .relativo{
0025     float: left;
0026     width: 100%;
0027     height: 100%;
0028     display: block;
0029     position: relative;
0030 }
0031 /* ----- preloader - choose between CIRCLE, IOS, DOTS, QUADS ----- */
0032
0033 /* circle preloader */
0034 .vbox-preloader{
0035     position:fixed;
0036     width:32px;
0037     height:32px;
0038     left:50%;
0039     top:50%;
0040     margin-left:-16px;
0041     margin-top:-16px;
0042     background-image: url(preload-circle.png);
0043     text-indent: -100px;
0044     overflow: hidden;
0045     -webkit-animation: playload 1.4s steps(18) infinite;
0046        -moz-animation: playload 1.4s steps(18) infinite;
0047         -ms-animation: playload 1.4s steps(18) infinite;
0048          -o-animation: playload 1.4s steps(18) infinite;
0049             animation: playload 1.4s steps(18) infinite;
0050 }
0051 @-webkit-keyframes playload {
0052    from { background-position:    0px; }
0053      to { background-position: -576px; }
0054 }
0055 @-moz-keyframes playload {
0056    from { background-position:    0px; }
0057      to { background-position: -576px; }
0058 }
0059 @-ms-keyframes playload {
0060    from { background-position:    0px; }
0061      to { background-position: -576px; }
0062 }
0063 @-o-keyframes playload {
0064    from { background-position:    0px; }
0065      to { background-position: -576px; }
0066 }
0067 @keyframes playload {
0068    from { background-position:    0px; }
0069      to { background-position: -576px; }
0070 }
0071 /* IOS preloader */
0072 /*
0073 .vbox-preloader{
0074     position:fixed;
0075     width:32px;
0076     height:32px;
0077     left:50%;
0078     top:50%;
0079     margin-left:-16px;
0080     margin-top:-16px;
0081     background-image: url(preload-ios.png);
0082     text-indent: -100px;
0083     overflow: hidden;
0084     -webkit-animation: playload 1.4s steps(12) infinite;
0085        -moz-animation: playload 1.4s steps(12) infinite;
0086         -ms-animation: playload 1.4s steps(12) infinite;
0087          -o-animation: playload 1.4s steps(12) infinite;
0088             animation: playload 1.4s steps(12) infinite;
0089 }
0090
0091 @-webkit-keyframes playload {
0092    from { background-position:    0px; }
0093      to { background-position: -384px; }
0094 }
0095 @-moz-keyframes playload {
0096    from { background-position:    0px; }
0097      to { background-position: -384px; }
0098 }
0099 @-ms-keyframes playload {
0100    from { background-position:    0px; }
0101      to { background-position: -384px; }
0102 }
0103 @-o-keyframes playload {
0104    from { background-position:    0px; }
0105      to { background-position: -384px; }
0106 }
0107 @keyframes playload {
0108    from { background-position:    0px; }
0109      to { background-position: -384px; }
0110 }
0111 */
0112 /* dots preloader */
0113 /*
0114 .vbox-preloader{
0115     position:fixed;
0116     width:32px;
0117     height:11px;
0118     left:50%;
0119     top:50%;
0120     margin-left:-16px;
0121     margin-top:-16px;
0122     background-image: url(preload-dots.png);
0123     text-indent: -100px;
0124     overflow: hidden;
0125     -webkit-animation: playload 1.4s steps(24) infinite;
0126        -moz-animation: playload 1.4s steps(24) infinite;
0127         -ms-animation: playload 1.4s steps(24) infinite;
0128          -o-animation: playload 1.4s steps(24) infinite;
0129             animation: playload 1.4s steps(24) infinite;
0130 }
0131
0132 @-webkit-keyframes playload {
0133    from { background-position:    0px; }
0134      to { background-position: -768px; }
0135 }
0136 @-moz-keyframes playload {
0137    from { background-position:    0px; }
0138      to { background-position: -768px; }
0139 }
0140 @-ms-keyframes playload {
0141    from { background-position:    0px; }
0142      to { background-position: -768px; }
0143 }
0144 @-o-keyframes playload {
0145    from { background-position:    0px; }
0146      to { background-position: -768px; }
0147 }
0148 @keyframes playload {
0149    from { background-position:    0px; }
0150      to { background-position: -768px; }
0151 }
0152 */
0153 /* quads preloader */
0154 /*
0155 .vbox-preloader{
0156     position:fixed;
0157     width:32px;
0158     height:10px;
0159     left:50%;
0160     top:50%;
0161     margin-left:-16px;
0162     margin-top:-16px;
0163     background-image: url(preload-quads.png);
0164     text-indent: -100px;
0165     overflow: hidden;
0166     -webkit-animation: playload 1.4s steps(12) infinite;
0167        -moz-animation: playload 1.4s steps(12) infinite;
0168         -ms-animation: playload 1.4s steps(12) infinite;
0169          -o-animation: playload 1.4s steps(12) infinite;
0170             animation: playload 1.4s steps(12) infinite;
0171 }
0172 @-webkit-keyframes playload {
0173    from { background-position:    0px; }
0174      to { background-position: -384px; }
0175 }
0176 @-moz-keyframes playload {
0177    from { background-position:    0px; }
0178      to { background-position: -384px; }
0179 }
0180 @-ms-keyframes playload {
0181    from { background-position:    0px; }
0182      to { background-position: -384px; }
0183 }
0184 @-o-keyframes playload {
0185    from { background-position:    0px; }
0186      to { background-position: -384px; }
0187 }
0188 @keyframes playload {
0189    from { background-position:    0px; }
0190      to { background-position: -384px; }
0191 }
0192 */
0193 /* ----- navigation ----- */
0194 .vbox-close{
0195     cursor: pointer;
0196     position: fixed;
0197     top: -1px;
0198     right: 0;
0199     width: 46px;
0200     height: 40px;
0201     padding: 10px 20px 10px 0;
0202     display: block;
0203     background: url(close.gif) no-repeat #161617;
0204     background-position:10px center;
0205     color: #fff;
0206     text-indent: -100px;
0207     overflow: hidden;
0208 }
0209 .vbox-next, .vbox-prev{
0210     box-sizing: content-box;
0211     cursor: pointer;
0212     position: fixed;
0213     top: 50%;
0214     color: #fff;
0215     width: 30px;
0216     height: 170px;
0217     margin-top: -85px;
0218     text-indent: -100px;
0219     border: solid transparent; /* Using border instead of padding to keep bg image in place */
0220     overflow: hidden;
0221 }
0222 .vbox-prev{
0223     left: 0;
0224     border-width: 0 30px 0 10px;
0225     background: url(prev.gif) center center no-repeat;
0226 }
0227 .vbox-next{
0228     right: 0;
0229     border-width: 0 10px 0 30px;
0230     background: url(next.gif) center center no-repeat;
0231 }
0232
0233 .vbox-title{
0234     width: 100%;
0235     height: 40px;
0236     float: left;
0237     text-align: center;
0238     line-height: 28px;
0239     font-size: 12px;
0240     color: #fff;
0241     padding: 6px 40px;
0242     overflow: hidden;
0243     background: #161617;
0244     position: fixed;
0245     display: none;
0246     top: -1px;
0247     left: 0;
0248
0249 }
0250 .vbox-num{
0251     cursor: pointer;
0252     position: fixed;
0253     top: -1px;
0254     left: 0;
0255     height: 40px;
0256     display: block;
0257     color: #fff;
0258     overflow: hidden;
0259     line-height: 28px;
0260     font-size: 12px;
0261     padding: 6px 10px;
0262     background: #161617;
0263     display: none;
0264 }
0265 /* ------- inline window ------ */
0266 .vbox-inline{
0267     width: 420px;
0268     height: 315px;
0269     padding: 10px;
0270     background: #fff;
0271     text-align: left;
0272     margin: 0 auto;
0273     overflow: auto;
0274 }
0275
0276 /* ------- Video & iFrames window ------ */
0277 .venoframe{
0278     border: none;
0279     width: 960px;
0280     height: 720px;
0281 }
0282 @media (max-width: 992px) {
0283     .venoframe{
0284         width: 640px;
0285         height: 480px;
0286     }
0287 }
0288 @media (max-width: 767px) {
0289     .venoframe{
0290         width: 420px;
0291         height: 315px;
0292     }
0293 }
0294 @media (max-width: 460px) {
0295     .vbox-inline{
0296         width: 100%;
0297     }
0298
0299     .venoframe{
0300         width: 100%;
0301         height: 260px;
0302     }
0303 }
0304
0305 /* ------- PLease do NOT edit this! (or do it at your own risk) ------ */
0306 .vbox-container{
0307     position: relative;
0308     background: #000;
0309     width: 98%;
0310     max-width: 1024px;
0311     margin: 0 auto;
0312 }
0313 .vbox-content{
0314     text-align: center;
0315     float: left;
0316     width: 100%;
0317     position: relative;
0318     overflow: hidden;
0319 }
0320 .vbox-container img{
0321     max-width: 100%;
0322     height: auto;
0323 }
0324 .vwrap{
0325     opacity: 1;
0326     transition: opacity .25s ease-in-out;
0327     -moz-transition: opacity .25s ease-in-out;
0328     -webkit-transition: opacity .25s ease-in-out;
0329     width: 100%;
0330     min-height: 100%;
0331     height: auto;
0332     float: left;
0333     position: relative;
0334     margin: 0;
0335     padding: 0;
0336     left: 0;
0337     overflow: hidden;
0338     z-index: 1;
0339 }