/* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;} .cboxIframe{width:100%; height:100%; display:block; border:0;} #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:url(../images/colorbox/overlay.png) repeat 0 0;} #colorbox{} #cboxTopLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -101px 0;} #cboxTopRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -130px 0;} #cboxBottomLeft{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -101px -29px;} #cboxBottomRight{width:21px; height:21px; background:url(../images/colorbox/controls.png) no-repeat -130px -29px;} #cboxMiddleLeft{width:21px; background:url(../images/colorbox/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(../images/colorbox/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(../images/colorbox/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(../images/colorbox/border.png) 0 -29px repeat-x;} #cboxContent{background:#fff; overflow:hidden;} .cboxIframe{background:#fff;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{margin-bottom:28px;} #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../images/colorbox/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;} #cboxPrevious:hover{background-position:-75px -25px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(../images/colorbox/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} #cboxNext:hover{background-position:-50px -25px;} #cboxLoadingOverlay{background:url(../images/colorbox/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) no-repeat center center;} #cboxClose{position:absolute; bottom:0; right:0; background:url(../images/colorbox/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;} #cboxClose:hover{background-position:-25px -25px;} /* The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9. See: http://jacklmoore.com/notes/ie-transparency-problems/ */ .cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); } /* The following provides PNG transparency support for IE6 Feel free to remove this and the /ie6/ directory if you have dropped IE6 support. */ .cboxIE6 #cboxTopLeft{background:url(../images/colorbox/ie6/borderTopLeft.png);} .cboxIE6 #cboxTopCenter{background:url(../images/colorbox/ie6/borderTopCenter.png);} .cboxIE6 #cboxTopRight{background:url(../images/colorbox/ie6/borderTopRight.png);} .cboxIE6 #cboxBottomLeft{background:url(../images/colorbox/ie6/borderBottomLeft.png);} .cboxIE6 #cboxBottomCenter{background:url(../images/colorbox/ie6/borderBottomCenter.png);} .cboxIE6 #cboxBottomRight{background:url(../images/colorbox/ie6/borderBottomRight.png);} .cboxIE6 #cboxMiddleLeft{background:url(../images/colorbox/ie6/borderMiddleLeft.png);} .cboxIE6 #cboxMiddleRight{background:url(../images/colorbox/ie6/borderMiddleRight.png);} .cboxIE6 #cboxTopLeft, .cboxIE6 #cboxTopCenter, .cboxIE6 #cboxTopRight, .cboxIE6 #cboxBottomLeft, .cboxIE6 #cboxBottomCenter, .cboxIE6 #cboxBottomRight, .cboxIE6 #cboxMiddleLeft, .cboxIE6 #cboxMiddleRight { _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')"); } /*! * 3. Justified Gallery - v3.2.0 * http://miromannino.com/projects/justified-gallery/ * Copyright (c) 2014 Miro Mannino * Licensed under the MIT license. */ @-webkit-keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@-moz-keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@-o-keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@-webkit-keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}@-moz-keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}@-o-keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}@keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}.justified-gallery{width:100%;position:relative;overflow:hidden}.justified-gallery>a,.justified-gallery>div{position:absolute;display:inline-block;overflow:hidden;opacity:0;filter:alpha(opacity=0)}.justified-gallery>a>img,.justified-gallery>div>img{position:absolute;top:50%;left:50%;margin:0;padding:0;border:0}.justified-gallery>a>.caption,.justified-gallery>div>.caption{display:none;position:absolute;bottom:0;padding:5px;background-color:#000;left:0;right:0;margin:0;color:#fff;font-size:12px;font-weight:300;font-family:sans-serif}.justified-gallery>a>.caption.caption-visible,.justified-gallery>div>.caption.caption-visible{display:initial;opacity:.7;filter:alpha(opacity=70);-webkit-animation:justified-gallery-show-caption-animation 500ms 0 ease;-moz-animation:justified-gallery-show-caption-animation 500ms 0 ease;-ms-animation:justified-gallery-show-caption-animation 500ms 0 ease}.justified-gallery>.entry-visible{opacity:1;filter:alpha(opacity=1);-webkit-animation:justified-gallery-show-entry-animation 300ms 0 ease;-moz-animation:justified-gallery-show-entry-animation 300ms 0 ease;-ms-animation:justified-gallery-show-entry-animation 300ms 0 ease}.justified-gallery>.spinner{position:absolute;bottom:0;margin-left:-24px;padding:10px 0;left:50%;opacity:initial;filter:initial;overflow:initial}.justified-gallery>.spinner>span{display:inline-block;opacity:0;filter:alpha(opacity=0);width:8px;height:8px;margin:0 4px;background-color:#000;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px} /* * 4. Gallery - Photobox */ /* Normilizes box-sizing */ #pbOverlay *, #pbOverlay *:before, #pbOverlay *:after { -moz-box-sizing: content-box; box-sizing: content-box; } #pbOverlay.show{ opacity:1; pointer-events:auto; } #pbOverlay{ opacity:0; overflow:hidden; width:100%; height:100%; position:fixed; z-index:9999; left:0; top:0; text-align:center; pointer-events:none; -moz-user-select:none; background:rgba(0,0,0,0.90); /* background:radial-gradient(rgba(0,0,0,.6) 0%, rgba(0,0,0,.9) 100%); */ -webkit-transform:translate3d(0px, 0px, 0px); -ms-transition:opacity 300ms ease; transition:opacity 300ms ease; } #pbOverlay.msie{ background-color:rgba(0,0,0,.6); } .msie.pbLoading .pbWrapper{ background:url('../images/loading.gif') no-repeat center center; } @keyframes pbLoaderFrames{ 50%{ height:5px; } } @-webkit-keyframes pbLoaderFrames{ 50%{ height:5px; } } .pbLoader{ display:none; width:100px; height:100px; position:absolute; z-index:999; top:0; left:0; right:0; bottom:0; margin:auto; text-align:center; border-radius:100%; box-shadow:15px 32px 60px -20px #FFF inset, 1px 1px 3px 1px #FFF inset, 0 0 20px; transition:0.3s; } .thumbs .pbLoader{ -webkit-transform:translateY(-50px); transform:translateY(-50px); } .pbLoading:not(.msie):not(.error) .pbLoader{ display:block; } .pbLoader b{ display:inline-block; vertical-align:middle; margin:0 2px; width:8px; height:60px; border-radius:5px; background:rgba(255,255,255,0.8); box-shadow:0 0 10px rgba(0,0,0,0.5); -webkit-animation:.9s pbLoaderFrames infinite linear; animation:.9s pbLoaderFrames infinite linear; } .pbLoader b:nth-child(2){ -webkit-animation-delay:.3s; animation-delay:.3s; } .pbLoader b:nth-child(3){ -webkit-animation-delay:.6s; animation-delay:.6s; } .mobile.pbLoading .pbLoader{ transform:none; transition:0s; } .pbWrapper:after, #pbCaption .pbThumbs ul:after, #pbOverlay .prevNext:after, #pbOverlay .pbLoader:before{ content:""; display:inline-block; height:100%; margin-right:-0.25em; vertical-align:middle; } /* Animation when image was not loaded */ @keyframes deadImage{ 50%{ text-shadow:0 0 25px rgba(255,255,255,.5); transform:scale(0.85); } } @-webkit-keyframes deadImage{ 50%{ text-shadow:0 0 25px rgba(255,255,255,.5); -webkit-transform:scale(0.85); } } .pbWrapper{ -moz-box-sizing:border-box; box-sizing:border-box; transform:rotate(0deg); vertical-align:middle; height:100%; perspective:1200px; -webkit-perspective:1200px; position:relative; transition:0.2s; } .video > .pbWrapper{ z-index:11; display:inline-block; } /*#pbOverlay.error .pbWrapper{ display:inline-block; width:100%; }*/ .pbLoading .pbWrapper{ display:inline-block\9; width:100%; } /* ie8+9 hack */ .pbWrapper:before{ content:'\2716'; color:transparent; text-shadow:0 2px 35px rgba(255,255,255,0); font-size:0; vertical-align:middle; cursor:default; transition:text-shadow .7s ease-out; } .error .pbWrapper:before{ font-size:22em; text-shadow:0 0 0 #FFF; -webkit-animation:2s 1s deadImage infinite linear; animation:2s 1s deadImage infinite linear; } .thumbs .pbWrapper{ padding:0; margin:0; } .error .pbWrapperr img{ width:0; } .pbWrapper > div{ display:none; width:624px; height:351px; vertical-align:middle; border-radius:5px; background:rgba(0,0,0,0.5); } .video > .pbWrapper > div{ display:inline-block; } #pbOverlay iframe, #pbOverlay embed, #pbOverlay object{ display:block; width:100%; height:100%; opacity:1; transition:0.5s; } .pbWrapper .hide iframe{ opacity:0; } .pbWrapper > div, .pbWrapper > img{ -ms-transition:.3s .5s ease-out; transition:.8s .5s cubic-bezier(0.1, 0.87, 0.48, 1); -webkit-transform:none; -ms-transform:none; transform:none; -webkit-backface-visibility:hidden; box-shadow:0 0 20px #000; } /* FOR MOBILE */ .mobile.show .pbWrapper > div, .mobile.show .pbWrapper > img{ transition:30ms; } .pbWrapper > *, .hide .pbWrapper > .prepare{ opacity:1; vertical-align:middle; transform:scale(0) rotateX(80deg); -webkit-transform:scale(0) rotateX(80deg); -ms-transform:scale(0) rotateX(80deg); border-radius:6px; border:none; max-height:95%; max-width:100%; } .on .pbWrapper > *{ transition-delay:0s; -ms-transition-delay:0s; } .pbWrapper .zoomable{ -ms-transition:0s; -webkit-transition:0s; transition:0s; position:relative; z-index:9; } .hide .pbWrapper > *{ -webkit-transform:scale(1.2); transform:scale(1.2); transform:none\9; opacity:0; -ms-transition:.4s ease-in; transition:.4s ease-in; } /*-- close button --*/ #pbCloseBtn, #pbAutoplayBtn{ position:absolute; top:-50px; right:-50px; z-index:999; display:block; padding:0 0 20px 20px; text-align:center; cursor:pointer; color:#FFF; transition:.3s .3s ease-out; } .hide #pbCloseBtn{ top:-50px; right:-50px; } .on #pbCloseBtn{ top:-2px; right:-2px; } #pbCloseBtn:before{ content:'\00D7'; font:bold 1em/1 arial; } #pbCloseBtn:before, #pbAutoplayBtn:before{ display:inline-block; height:35px; width:35px; padding:8px 8px 12px 12px; font-size:2em; opacity:0.8; vertical-align:middle; background:rgba(255,255,255,0.2); border-radius:0 0 0 70px; transition:0.1s ease-out; } #pbCloseBtn:hover:before{ padding:15px 10px 24px 24px; background:rgba(255,100,100,.4); } /*-- autoplay controller --*/ #pbAutoplayBtn{ display:none; right:auto; left:-50px; padding:0; width:50px; height:50px; font-size:13px; } .hasAutoplay #pbAutoplayBtn{ display:block; } #pbAutoplayBtn:hover{ width:60px; height:60px; } .on #pbAutoplayBtn{ top:0px; left:0px; transition:.1s ease-out; } #pbAutoplayBtn:before{ content:'\2016'; width:100%; height:100%; border-radius:0 0 70px 0; font-weight:bold; padding:0; text-indent:-6px; line-height:1.6; } #pbAutoplayBtn:active:before{ text-shadow:0 0 3px #FFF, 0 0 6px #FFF; } #pbAutoplayBtn.play:before{ content:'\25BA'; } #pbAutoplayBtn .pbProgress{ display:none\9; width:100%; height:100%; overflow:hidden; position:absolute; padding:6px; top:0; left:0; opacity:0.2; transform:rotateZ(0deg); -webkit-transform:rotateZ(0deg); -ms-transform:rotateZ(0deg); -webkit-transform-origin:0 0; -ms-transform-origin:0 0; transform-origin:0 0; -webkit-transition:0.3s; -ms-transition:0.3s; transition:0.3s; } .mobile #pbAutoplayBtn .pbProgress{ -webkit-transition:0s; -ms-transition:0s; transition:0s; } #pbAutoplayBtn.playing .pbProgress{ -webkit-transform:rotateZ(90deg); -ms-transform:rotateZ(90deg); transform:rotateZ(90deg); } #pbAutoplayBtn .pbProgress:before{ content:''; position:absolute; right:0; bottom:0; width:200%; height:200%; border-radius:50%; box-shadow:0 0 0 8px #FFF inset; } #pbCaption, .hide #pbCaption{ position:absolute; z-index:999; margin-bottom:5px; bottom:-120px; width:100%; overflow:hidden; transition:.4s; } .show.on #pbCaption{ bottom:0; transition-delay:.5s; } #pbOverlay.thumbs #pbCaption label{ display:block; } #pbCaption label{ display:none; position:relative; z-index:1; top:-5px; float:right; width:60px; margin-right:10px; color:#FFF; opacity:0.3; transition:0.2s; cursor:pointer; } #pbCaption label:after{ background:#FFF; box-shadow:12px 0 #FFF, -12px 0 #FFF; content:""; display:inline-block; height:0; padding:10px 5px; text-align:right; vertical-align:top; width:0; } #pbCaption label:hover{ opacity:1; } #pbCaption .title, #pbCaption .counter{ display:inline-block; color:#FFF; margin:0 6px; } #pbCaption .counter{ display:none; opacity:.55; } .hasCounter #pbCaption .counter{ display:inline-block; } .pbCaptionText{ transition:.3s; opacity:0.9; font-weight:bold; font-size:.9em; text-shadow:1px 1px 1px rgba(0,0,0,.5); padding-left:60px; } /* padding-left from