@charset "UTF-8";.fancybox-enabled{overflow:hidden}.fancybox-enabled body{overflow:visible;height:100%}.fancybox-is-hidden{position:absolute;top:-9999px;left:-9999px;visibility:hidden}.fancybox-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99993;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fancybox-container~.fancybox-container{z-index:99992}.fancybox-bg,.fancybox-inner,.fancybox-outer{position:absolute;top:0;right:0;bottom:0;left:0}.fancybox-outer{overflow-y:auto;-webkit-overflow-scrolling:touch}.fancybox-bg{background:#1e1e1e;opacity:.87;transition-duration:inherit;transition-property:opacity;transition-timing-function:cubic-bezier(.22,.61,.36,1)}.fancybox-is-closing .fancybox-bg,.fancybox-is-hidden .fancybox-bg{opacity:0;transition-timing-function:cubic-bezier(.47,0,.74,.71)}.fancybox-infobar,.fancybox-toolbar{position:absolute;top:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;direction:ltr;z-index:99997;opacity:0;-webkit-transform:translate3d(0,-9999px,0);transform:translate3d(0,-9999px,0);transition:opacity .25s,-webkit-transform 0s linear .25s;transition:opacity .25s,transform 0s linear .25s;transition:opacity .25s,transform 0s linear .25s,-webkit-transform 0s linear .25s}.fancybox-infobar{left:50%;margin-left:-79px}.fancybox-show-infobar .fancybox-infobar,.fancybox-show-toolbar .fancybox-toolbar{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0);transition:opacity .25s,-webkit-transform 0s;transition:opacity .25s,transform 0s;transition:opacity .25s,transform 0s,-webkit-transform 0s}.fancybox-infobar__body{display:inline-block;width:70px;line-height:44px;font-size:13px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;text-align:center;color:#ddd;background-color:rgba(30,30,30,.7);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:subpixel-antialiased}.fancybox-toolbar{right:0}.fancybox-stage{overflow:hidden;direction:ltr;bottom:0;right:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-tap-highlight-color:transparent}.fancybox-slide,.fancybox-stage{position:absolute;top:0;left:0;padding:0;margin:0;z-index:99994}.fancybox-slide{width:100%;height:100%;overflow:auto;outline:none;white-space:normal;box-sizing:border-box;text-align:center;-webkit-overflow-scrolling:touch;display:none;transition-duration:inherit}.fancybox-slide:before{content:"";display:inline-block;vertical-align:middle;height:100%;width:0}.fancybox-is-sliding .fancybox-slide,.fancybox-slide--current,.fancybox-slide--next,.fancybox-slide--previous{display:block}.fancybox-slide--image{overflow:visible}.fancybox-slide--image:before{display:none}.fancybox-slide--video .fancybox-iframe-wrap,.fancybox-slide--video iframe{background:transparent}.fancybox-slide--next{z-index:99995}.fancybox-slide>*{display:inline-block;position:relative;padding:24px;margin:44px 0;border-width:0;vertical-align:middle;text-align:left;background-color:#fff;overflow:auto;box-sizing:border-box}.fancybox-slide .fancybox-image-wrap{position:absolute;top:0;left:0;margin:0;padding:0;border:0;z-index:99995;background:transparent;cursor:default;overflow:visible;-webkit-transform-origin:top left;transform-origin:top left;background-size:100% 100%;background-repeat:no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fancybox-can-zoomOut .fancybox-image-wrap{cursor:zoom-out}.fancybox-can-zoomIn .fancybox-image-wrap{cursor:zoom-in}.fancybox-can-drag .fancybox-image-wrap{cursor:-webkit-grab;cursor:grab}.fancybox-is-dragging .fancybox-image-wrap{cursor:-webkit-grabbing;cursor:grabbing}.fancybox-image,.fancybox-spaceball{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;max-width:none;max-height:none}.fancybox-spaceball{z-index:1}.fancybox-slide .fancybox-iframe-wrap{display:inline-block;position:relative;margin:44px auto;padding:0;border:0;width:80%;height:calc(100% - 88px);vertical-align:middle;line-height:normal;text-align:left;white-space:normal;outline:none;font-size:16px;font-family:Arial,sans-serif;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch}.fancybox-iframe{display:block;padding:0;border:0;height:100%}.fancybox-error,.fancybox-iframe{margin:0;width:100%;background:#fff}.fancybox-error{padding:40px;max-width:380px;cursor:default}.fancybox-error p{margin:0;padding:0;color:#444;font:16px/20px Helvetica Neue,Helvetica,Arial,sans-serif}.fancybox-close-small{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:0;outline:none;background:transparent;z-index:10;cursor:pointer}.fancybox-close-small:after{content:"×";position:absolute;top:5px;right:5px;width:30px;height:30px;font:20px/30px Arial,Helvetica Neue,Helvetica,sans-serif;color:#888;font-weight:300;text-align:center;border-radius:50%;border-width:0;background:#fff;transition:background .25s;box-sizing:border-box;z-index:2}.fancybox-close-small:focus:after{outline:1px dotted #888}.fancybox-slide--video .fancybox-close-small{top:-36px;right:-36px;background:transparent}.fancybox-close-small:hover:after{color:#555;background:#eee}.fancybox-caption-wrap{position:absolute;bottom:0;left:0;right:0;padding:60px 30px 0;z-index:99995;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.1) 20%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.8));opacity:0;transition:opacity .25s;pointer-events:none}.fancybox-show-caption .fancybox-caption-wrap{opacity:1}.fancybox-caption{padding:30px 0;border-top:1px solid hsla(0,0%,100%,.4);font-size:14px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:#fff;line-height:20px;-webkit-text-size-adjust:none}.fancybox-caption a,.fancybox-caption button{pointer-events:all}.fancybox-caption a{color:#fff;text-decoration:underline}.fancybox-button{display:inline-block;position:relative;margin:0;padding:0;border:0;width:44px;height:44px;line-height:44px;text-align:center;background:transparent;color:#ddd;border-radius:0;cursor:pointer;vertical-align:top;outline:none}.fancybox-button[disabled]{cursor:default;pinter-events:none}.fancybox-button,.fancybox-infobar__body{background:rgba(30,30,30,.6)}.fancybox-button:hover:not([disabled]){color:#fff;background:rgba(0,0,0,.8)}.fancybox-button:after,.fancybox-button:before{content:"";pointer-events:none;position:absolute;background-color:currentColor;color:currentColor;opacity:.9;box-sizing:border-box;display:inline-block}.fancybox-button[disabled]:after,.fancybox-button[disabled]:before{opacity:.3}.fancybox-button--left:after,.fancybox-button--right:after{top:18px;width:6px;height:6px;background:transparent;border-top:2px solid currentColor;border-right:2px solid currentColor}.fancybox-button--left:after{left:20px;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.fancybox-button--right:after{right:20px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.fancybox-button--left{border-bottom-left-radius:5px}.fancybox-button--right{border-bottom-right-radius:5px}.fancybox-button--close:after,.fancybox-button--close:before{content:"";display:inline-block;position:absolute;height:2px;width:16px;top:calc(50% - 1px);left:calc(50% - 8px)}.fancybox-button--close:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.fancybox-button--close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.fancybox-arrow{position:absolute;top:50%;margin:-50px 0 0;height:100px;width:54px;padding:0;border:0;outline:none;background:none;cursor:pointer;z-index:99995;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;transition:opacity .25s}.fancybox-arrow:after{content:"";position:absolute;top:28px;width:44px;height:44px;background-color:rgba(30,30,30,.8);background-image:url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgNGwtMS40MSAxLjQxTDE2LjE3IDExSDR2MmgxMi4xN2wtNS41OCA1LjU5TDEyIDIwbDgtOHoiLz48L3N2Zz4=);background-repeat:no-repeat;background-position:50%;background-size:24px 24px}.fancybox-arrow--right{right:0}.fancybox-arrow--right:after{left:0}.fancybox-arrow--left{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fancybox-arrow--left:after{left:0}.fancybox-show-nav .fancybox-arrow{opacity:.6;pointer-events:all}.fancybox-show-nav .fancybox-arrow[disabled]{opacity:.3}.fancybox-loading{border:6px solid hsla(0,0%,39%,.4);border-top:6px solid hsla(0,0%,100%,.6);border-radius:100%;height:50px;width:50px;-webkit-animation:a .8s infinite linear;animation:a .8s infinite linear;background:transparent;position:absolute;top:50%;left:50%;margin-top:-25px;margin-left:-25px;z-index:99999}@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fancybox-animated{transition-timing-function:cubic-bezier(0,0,.25,1)}.fancybox-fx-slide.fancybox-slide--previous{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);opacity:0}.fancybox-fx-slide.fancybox-slide--next{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}.fancybox-fx-slide.fancybox-slide--current{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}.fancybox-fx-fade.fancybox-slide--next,.fancybox-fx-fade.fancybox-slide--previous{opacity:0;transition-timing-function:cubic-bezier(.19,1,.22,1)}.fancybox-fx-fade.fancybox-slide--current{opacity:1}.fancybox-fx-zoom-in-out.fancybox-slide--previous{-webkit-transform:scale3d(1.5,1.5,1.5);transform:scale3d(1.5,1.5,1.5);opacity:0}.fancybox-fx-zoom-in-out.fancybox-slide--next{-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5);opacity:0}.fancybox-fx-zoom-in-out.fancybox-slide--current{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1}.fancybox-fx-rotate.fancybox-slide--previous{-webkit-transform:rotate(-1turn);transform:rotate(-1turn);opacity:0}.fancybox-fx-rotate.fancybox-slide--next{-webkit-transform:rotate(1turn);transform:rotate(1turn);opacity:0}.fancybox-fx-rotate.fancybox-slide--current{-webkit-transform:rotate(0deg);transform:rotate(0deg);opacity:1}.fancybox-fx-circular.fancybox-slide--previous{-webkit-transform:scale3d(0,0,0) translate3d(-100%,0,0);transform:scale3d(0,0,0) translate3d(-100%,0,0);opacity:0}.fancybox-fx-circular.fancybox-slide--next{-webkit-transform:scale3d(0,0,0) translate3d(100%,0,0);transform:scale3d(0,0,0) translate3d(100%,0,0);opacity:0}.fancybox-fx-circular.fancybox-slide--current{-webkit-transform:scaleX(1) translateZ(0);transform:scaleX(1) translateZ(0);opacity:1}.fancybox-fx-tube.fancybox-slide--previous{-webkit-transform:translate3d(-100%,0,0) scale(.1) skew(-10deg);transform:translate3d(-100%,0,0) scale(.1) skew(-10deg)}.fancybox-fx-tube.fancybox-slide--next{-webkit-transform:translate3d(100%,0,0) scale(.1) skew(10deg);transform:translate3d(100%,0,0) scale(.1) skew(10deg)}.fancybox-fx-tube.fancybox-slide--current{-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}@media (max-width:800px){.fancybox-infobar{left:0;margin-left:0}.fancybox-button--left,.fancybox-button--right{display:none!important}.fancybox-caption{padding:20px 0;margin:0}}.fancybox-button--fullscreen:before{width:15px;height:11px;left:calc(50% - 7px);top:calc(50% - 6px);border:2px solid;background:none}.fancybox-button--pause:before,.fancybox-button--play:before{top:calc(50% - 6px);left:calc(50% - 4px);background:transparent}.fancybox-button--play:before{width:0;height:0;border-top:6px inset transparent;border-bottom:6px inset transparent;border-left:10px solid;border-radius:1px}.fancybox-button--pause:before{width:7px;height:11px;border-style:solid;border-width:0 2px}.fancybox-button--thumbs span{font-size:23px}.fancybox-button--thumbs:before{width:3px;height:3px;top:calc(50% - 2px);left:calc(50% - 2px);box-shadow:0 -4px 0,-4px -4px 0,4px -4px 0,inset 0 0 0 32px,-4px 0 0,4px 0 0,0 4px 0,-4px 4px 0,4px 4px 0}.fancybox-thumbs{position:absolute;top:0;right:0;bottom:0;left:auto;width:220px;margin:0;padding:5px 5px 0 0;background:#fff;z-index:99996;word-break:normal;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;box-sizing:border-box;z-index:99995;display:none}.fancybox-show-thumbs .fancybox-thumbs{display:block}.fancybox-show-thumbs .fancybox-inner{right:220px}.fancybox-thumbs>ul{list-style:none;position:absolute;position:relative;width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;font-size:0}.fancybox-thumbs>ul>li{float:left;overflow:hidden;max-width:50%;padding:0;margin:0;width:105px;height:75px;position:relative;cursor:pointer;outline:none;border:5px solid transparent;border-top-width:0;border-right-width:0;-webkit-tap-highlight-color:transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box}li.fancybox-thumbs-loading{background:rgba(0,0,0,.1)}.fancybox-thumbs>ul>li>img{position:absolute;top:0;left:0;min-width:100%;min-height:100%;max-width:none;max-height:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancybox-thumbs>ul>li:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:2px;border:4px solid #4ea7f9;z-index:99991;opacity:0;transition:all .2s cubic-bezier(.25,.46,.45,.94)}.fancybox-thumbs>ul>li.fancybox-thumbs-active:before{opacity:1}@media (max-width:800px){.fancybox-show-thumbs .fancybox-thumbs{display:none}.fancybox-show-thumbs .fancybox-inner{right:0}.fancybox-toolbar .fancybox-button--thumbs{display:none}} /* ======================================================= * * Media boxes * Version: 3.3 * By castlecode * * Contact: http://codecanyon.net/user/castlecode * Created: March 11, 2014 * * Copyright (c) 2013, castlecode. All rights reserved. * Available only in http://codecanyon.net/ * * --------------------------------- * CONTENTS * --------------------------------- * * (1) GRAPHIC STYLE (Play around in this section) * * [1] MEDIA BOX CONTENT * [2] LOAD MORE * [3] FILTER BAR * [4] SEARCH FILTER * [5] DROP DOWN MENU * [6] THUMBNAIL OVERLAY EFFECT * [7] FANCYBOX * [8] MAGNIFIC POPUP * [9] SOCIAL FOR MAGNIFIC POPUP * * (2) NEEDED STYLE (Don't play here) * * [1] SETUP * [2] MEDIA BOX THUMBNAIL * [3] MEDIA BOX CONTENT * [4] THUMBNAIL OVERLAY EFFECT * [5] MAGNIFIC POPUP * * ======================================================= */ /* //This is optional, but you need it for a full width gallery body{ margin:0; min-height: 1000px; overflow-y: scroll; } */ /* //This is for preventing that the content of your page shifts to the right when magnific popup is activated html { margin-right: 0 !important; overflow: visible !important; } */ /* ******************************************************************** (1) GRAPHIC STYLE (Play around in this section) ********************************************************************* */ /* GLOBAL FONT */ .mfp-container, .media-box, .media-boxes-load-more-button, .media-boxes-filter, .media-boxes-drop-down-menu > li > a, .media-boxes-drop-down-header, .media-boxes-search{ /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/ font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; } /* ====================================================================== * [1] MEDIA BOX CONTENT * ====================================================================== */ .media-box{ font-size: 13px; } .media-box iframe{ display: block; margin: 0 !important; } .media-box-container{ -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; /* -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15); -o-box-shadow: 0 1px 2px rgba(0,0,0,0.15); -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.15); box-shadow: 0 1px 2px rgba(0,0,0,0.15); */ margin-bottom:0px; } .media-box-content{ padding: 20px; position: relative; background: white; color: rgb(51, 51, 51); line-height: 17px; } .thumbnail-overlay-animated{ position: relative; opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .thumbnail-overlay-animated[data-from="top"]{ top: -20px; } .thumbnail-overlay-animated[data-from="bottom"]{ top: 20px; } .thumbnail-overlay-animated[data-from="left"]{ left: -20px; } .thumbnail-overlay-animated[data-from="right"]{ left: 20px; } /* desktop */ @media only screen and (min-width: 768px) { .thumbnail-overlay:hover .thumbnail-overlay-animated{ opacity: 1; left: 0; top: 0; } } /* mobile */ @media only screen and (max-width: 768px) { .media-box-image:hover .thumbnail-overlay-animated{ opacity: 1; left: 0; top: 0; } } .thumbnail-overlay-button{ display: inline-block; font-size: 13px; background: rgba(255, 255, 255, .3); color: #fff; padding: 10px 14px; margin: 3px 0; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } .thumbnail-overlay-button:hover{ background: rgba(255, 255, 255, .4); } .thumbnail-overlay-caption{ display: inline-block; color: white; font-size: 11px; background: rgba(255,255,255,.2); padding: 4px 6px; margin: 3px 0; } .media-box-title{ letter-spacing: 0px; line-height: normal; font-weight: 600; /*color: rgb(51, 51, 51);*/ font-size: 18px; } .media-box-title small{ font-size: 12px; display: block; margin-top: 5px; } .media-box-year{ color: gray; font-size: 11px; margin-bottom: 3px; } .media-box-author{ font-size: 11px; margin: 3px 0 0px 0 !important; } .media-box-categories{ font-size: 11px; line-height: 15px; color: #e54e53; margin-top: 5px; } .media-box-categories span{ color: #333333; font-weight: 600; } .media-box-date{ font-size: 11px; line-height: 15px; color: #e54e53; margin-top: 5px; } .media-box-date span{ color: #333333; font-weight: 600; } .media-box-big-icon{ margin-bottom: 12px; } .media-box-big-icon .fa{ font-size: 55px !important; color: white !important; -webkit-transform: scale(1) !important; -moz-transform: scale(1) !important; -ms-transform: scale(1) !important; -o-transform: scale(1) !important; transform: scale(1) !important; } .media-box-text{ color: rgb(119, 119, 119); font-size: 14px; line-height: 26.6px; margin: 13px 0px 13px 0 !important; } .media-box-quote{ padding: 30px; background: #e54e53; color: #fff; font-size: 14px; line-height: 28px; } .media-box-quote span{ display: block; margin-top: 20px; font-size: 13px; } .media-box-subscribe{ padding: 30px; background: #2C393F; color: #fff; font-size: 14px; line-height: 28px; } .media-box-subscribe p{ color: #fff; } .media-box-subscribe input{ border-radius: 0px; border: 0; margin-top: 10px; margin-bottom: 15px; } .media-box-subscribe .btn{ border: 0; color: #fff; background: #86979F; border-radius: 0px; -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15); -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15); min-width: 120px; font-size: 12px; padding: 12px; } .media-box-view-image{ margin: 12px 0 0 0; } .media-box-more a, .media-box-view-image a{ text-decoration: none !important; color: inherit; padding: 0; margin: 0; color: #e54e53; font-weight: 600; font-size: 11px; } .media-box-more a:hover, .media-box-view-image a:hover{ color: #333333; } a.media-box-read-more-link{ background: #e54e53; color: #fff; padding: 0 4px; } a.media-box-read-more-link:hover{ background: #333333; text-decoration: none; } .media-box-footer{ background: #e4e4e4; padding: 20px; } .media-box-social-buttons{ text-align: center; } .media-box-social-buttons i{ font-size: 15px; color: #C7C7C7; margin: 0 7px; -webkit-transition: color .1s; -moz-transition: color .1s; -o-transition: color .1s; -ms-transition: color .1s; transition: color .1s; } .media-box-social-buttons i:hover{ color: #333; } .media-box-play-button{ background: rgba(28, 186, 200, 1) !important; color: #fff !important; padding-left: 3px; } .media-box-sound-button{ background: rgba(28, 186, 200, 1) !important; color: #fff !important; padding-left: 1px; } .media-box-logo{ text-align: center; font-size: 80px; padding: 30px 0; color: rgba(255,255,255,.7); -webkit-transition: color .1s; -moz-transition: color .1s; -o-transition: color .1s; -ms-transition: color .1s; transition: color .1s; } .media-box-logo:hover{ color: rgba(255,255,255,1); } .media-box-price{ font-size: 16px; color: #e54e53; margin-top: 10px; } .media-box-price del{ font-size: 12px; color: #A4A4A4; } .media-box-sale{ color: #fff; background: #e54e53; width: 45px; height: 45px; line-height: 45px; border-radius: 0; text-align: center; position: absolute; font-weight: 100; font-size: 12px; top: -10px; right: 10px; z-index: 99; } /* ====================================================================== * [2] LOAD MORE * ====================================================================== */ .media-boxes-load-more-button{ cursor: pointer; width: 150px; text-align: center; color: white; background-color: #333333; font-size: 14px !important; height: 15px; padding: 10px 15px 10px 15px; margin: 0px auto; line-height: 15px; -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important; } .media-boxes-no-more-entries{ filter: alpha(opacity=20); opacity: 0.2; } /* ====================================================================== * [3] FILTER BAR * ====================================================================== */ .filters-container{ margin-bottom: 15px; } .filters-container:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; } .media-boxes-filter{ font-size: 0px; list-style: none; margin: 0; padding: 0px; text-align: left; display: inline-block; } .media-boxes-filter>li{ display: inline-block; margin: 0 5px 5px 0; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .media-boxes-filter>li:last-child{ margin-right: 0 !important; } .media-boxes-filter>li a{ -webkit-box-sizing: content-box !important; /* Safari/Chrome, other WebKit */ -moz-box-sizing: content-box !important; /* Firefox, other Gecko */ box-sizing: content-box !important; /* Opera/IE 8+ */ vertical-align: top; border: 1px solid #EBEBEB; display: block; cursor: pointer; color: #444444; font-size: 13px; height: 34px; line-height: 33px; text-decoration: none; margin: 0px; padding: 0 15px; background-color: #fff; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-transition: background-color .1s; -moz-transition: background-color .1s; -o-transition: background-color .1s; -ms-transition: background-color .1s; transition: background-color .1s; } .media-boxes-filter>li a:hover{ text-decoration: none; background: #333333; color: #fff; } .media-boxes-filter>li a.selected{ background: #e54e53 !important; color: #fff !important; -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15) !important; -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15) !important; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15) !important; } /* ====================================================================== * [4] SEARCH FILTER * ====================================================================== */ .media-boxes-search{ margin-bottom: 5px; display: inline-block; border: 1px solid #EBEBEB; } .media-boxes-search .media-boxes-icon, .media-boxes-search .media-boxes-clear{ display: inline-block; font-size: 13px; height: 34px; line-height: 34px; width: 34px; text-align: center; background: #fff; margin-right: -4px; color: #444444; } .media-boxes-search .media-boxes-clear{ margin-right: -1px; cursor: pointer; } .media-boxes-search input[type=text]{ vertical-align: top; height: 34px; line-height: 34px; min-width: 150px; max-width: 170px; margin: 0 !important; margin-right: -4px !important; padding: 0 10px 0 0 !important; font-size: 13px; box-shadow: none !important; border: none !important; background-color: #fff; color: #444444; outline: 0; -webkit-appearance: none; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } .media-boxes-search input::-webkit-input-placeholder { /* Chrome */ color: #444444; font-weight: 300; } .media-boxes-search input:-ms-input-placeholder { /* IE 10+ */ color: #444444; font-weight: 300; } .media-boxes-search input::-moz-placeholder { /* Firefox 19+ */ color: #444444; font-weight: 300; } .media-boxes-search input:-moz-placeholder { /* Firefox 4 - 18 */ color: #444444; font-weight: 300; } /* ====================================================================== * [5] DROP DOWN MENU * ====================================================================== */ .media-boxes-drop-down, .media-boxes-drop-down-header, .media-boxes-drop-down-menu, .media-boxes-drop-down-menu > li > a{ -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .media-boxes-drop-down{ width: 150px; margin: 0; margin-bottom: 5px; position: relative; display: inline-block; border: 1px solid #EBEBEB; } .media-boxes-drop-down-header{ background-color: white; cursor: pointer; } .media-boxes-drop-down-header .fa{ float: right; height: 34px; line-height: 31px; } .media-boxes-drop-down-menu{ margin: 0 !important; padding: 0 !important; z-index: 99999; position: absolute; width: 100%; display: none; border: 0 !important; -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1); -moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1); box-shadow: 0 5px 20px 0 rgba(0,0,0,.1); } .media-boxes-drop-down-menu > li { list-style: none; margin: 0 !important; padding: 0 !important; } .media-boxes-drop-down-header{ font-size: 12px; margin: 0 !important; display: block; height: 34px; line-height: 34px; padding: 0 15px !important; text-decoration: none; background-color: #fff; color: #444444; } .media-boxes-drop-down-menu > li > a{ font-size: 12px; display: block; margin: 0 !important; padding: 10px 15px !important; color: #444444; background: #fff; height: auto !important; line-height: normal !important; border-top: 1px solid rgba(175,175,175,.16)!important; text-decoration: none; } .media-boxes-drop-down-menu > li > a:hover{ background: #e54e53 !important; color: #fff !important; } .media-boxes-drop-down-menu > li.selected > a, .media-boxes-drop-down-menu > li > a.selected{ /* */ } .media-boxes-sort{ display: inline-block; vertical-align: top; } .media-boxes-sort .media-boxes-drop-down-header .fa{ display: none; } .media-boxes-sort-order{ cursor: pointer; vertical-align: top; display: inline-block; width: 34px; height: 34px; line-height: 33px; color: #444444; background: #fff; text-align: center; border: 1px solid #EBEBEB; -webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important; } .media-boxes-sort-order>span{ display: none; } .media-boxes-sort-order>span.selected{ display: inline-block; } /* ====================================================================== * [6] THUMBNAIL OVERLAY EFFECT * ====================================================================== */ .thumbnail-overlay{ background: black; /* fallback for IE8 */ background-color: rgba(229, 78, 83, 1); color: #333333; } /* The style for centering the caption (vertically and horizontally) */ .thumbnail-overlay>div.aligment{ height: 100%; width: 100%; display: table !important; } .thumbnail-overlay>div.aligment>div.aligment{ padding: 0px; display: table-cell !important; vertical-align: middle; /* FOR VERTICAL ALIGN */ text-align:center; /* FOR HORIZONTAL ALIGN */ } .overlay-title{ font-weight: 500; font-size: 16px; display: block; line-height: 16px; margin-bottom: 5px; } .overlay-description{ font-size: 12px; display: block; line-height: 16px; } .thumbnail-overlay i.fa, .media-box-play-button, .media-box-sound-button{ background: #fff; color: #e54e53; text-align: center; display: inline-block; margin: 3px; height: 50px; width: 50px; line-height: 50px; font-size: 15px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ -webkit-border-radius: 50%; /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -moz-border-radius: 50%; /* Firefox 1-3.6 */ border-radius: 50%; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ -webkit-transition: all .05s linear; -moz-transition: all .05s linear; -o-transition: all .05s linear; -ms-transition: all .05s linear; transition: all .05s linear; } .media-box-play-button, .media-box-sound-button{ font-size: 15px; height: 50px; width: 50px; line-height: 50px; } .thumbnail-overlay i.fa:hover{ background: rgba(255,255,255,.3); color: #fff; cursor: pointer; } .mb-play-container{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url('css/icons/blank.gif'); /* IE hack, since IE doesn't recognize the hover state in places where there's nothing */ } .mb-play-container .fa{ border: 2px solid #fff; padding: 14px 15px 13px 17px; font-size: 19px; color: #fff; text-align: center; width: 50px; height: 50px; -webkit-border-radius: 50%; /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -moz-border-radius: 50%; /* Firefox 1-3.6 */ border-radius: 50%; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; -webkit-transition: background-color .2s, -webkit-transform .2s; -moz-transition: background-color .2s, -moz-transform .2s; -o-transition: background-color .2s, -o-transform .2s; -ms-transition: background-color .2s, -ms-transform .2s; transition: background-color .2s, transform .2s; } .mb-play-container:hover .fa{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } /* ====================================================================== * [7] FANCYBOX * ====================================================================== */ .fancybox-caption { padding: 0 !important; height: 44px !important; text-align: center; border-top: 0; display:flex; align-items: center; /* Vertical center alignment */ justify-content: center; /* Horizontal center alignment */ } .fancybox-thumbs{ background: rgba(255,255,255,.1); } /* ====================================================================== * [8] MAGNIFIC POPUP * ====================================================================== */ .mb-open-popup{ cursor: pointer; } .mfp-arrow.mfp-arrow:before, .mfp-arrow.mfp-arrow:after { border:none !important; } .mfp-arrow.mfp-arrow-left { background:url('css/icons/icon-arrow-left.png') 50% 50% no-repeat !important; } .mfp-arrow.mfp-arrow-right { background:url('css/icons/icon-arrow-right.png') 50% 50% no-repeat !important; } .mfp-close{ background:url('css/icons/icon-close.png') right no-repeat !important; } /* Just some example in how to add a loder image (gif) to the popup .mfp-preloader { width: 24px; height: 24px; margin: auto; color: transparent; background-image: url('css/icons/loading-image.gif'); } */ .iframe-on-grid{ cursor: pointer; } .iframe-on-grid-container, .iframe-on-grid-container iframe{ position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: 100%; border: none; background: #000; display: none; } .iframe-on-grid-container{ display: block; } .mfp-hide{ display: none; } /* ====================================================================== * [9] SOCIAL FOR MAGNIFIC POPUP * ====================================================================== */ .media-boxes-social-container{ float: right; margin-right: 10px; font-size: 18px; } .media-boxes-social-container>*{ margin-right: 5px; } /* * * * * * BRIDGE (Unless you know what you are doing don't scroll down) ========> * * * * */ /* ******************************************************************** (2) NEEDED STYLE (Don't play here) ********************************************************************* */ /* ====================================================================== * [1] SETUP * ====================================================================== */ .media-box { /* Box-model */ display: none; /* hidden by default, the plugin will take care of showing it */ float: left; } .media-box, .media-box-hidden{ /* hardware acceleration */ -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } .media-box-hidden, .not-loaded-before-search{ display: none; /* hide the hidden boxes */ } .media-boxes-container{ margin-right: 0 !important; margin-bottom: 0 !important; } .media-box-loaded{ display: block; /* class to show the boxes once the plugin has been initialized */ } [onclick]{ cursor: pointer; } [hide_if_empty]{ display: none !important; } /* ====================================================================== * [2] MEDIA BOX THUMBNAIL * ====================================================================== */ .media-box-image{ position: relative; overflow: hidden; width: 100%; } /* Hack to center the image */ .media-box-image div[data-width][data-height]{ position: relative; overflow: hidden; } .media-box-image div[data-width][data-height] img{ position: absolute; top:-100%; left:0; right: 0; bottom:-100%; margin: auto; } /* End Hack */ .media-box .media-box-image img{ width: 100%; max-width: 100%; display: block; } .media-box img{ max-width: 100%; -webkit-transform: translate3D(0, 0, 0); -moz-transform: translate3D(0, 0, 0); -ms-transform: translate3D(0, 0, 0); -o-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); } /* Invert position */ .media-box .media-box-fill-height[data-width][data-height] img{ top: 0 !important; left: -100% !important; right: -100% !important; bottom: 0 !important; width: auto !important; max-width: none !important; height: 100%; } /* Loading and broken thumbnail effects */ .media-box-image div[data-thumbnail], .media-box-image div[data-popup]{ background-position: center center; background-repeat: no-repeat; } .image-with-dimensions{ background-color: black; background-image: url('css/icons/loading-image.gif'); } .broken-image-here{ background-color: #BE3730; background-image: url('css/icons/broken-image.png'); } .broken-image-here:not([data-height]){ min-height: 150px; } /* ====================================================================== * [3] MEDIA BOX CONTENT * ====================================================================== */ .media-box-container{ overflow: hidden; position:relative; z-index:1; } .media-box-container:hover{ z-index: 2; /* bring the hover media box to the front */ } /* ====================================================================== * [4] THUMBNAIL OVERLAY EFFECT * ====================================================================== */ .thumbnail-overlay{ position: absolute; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ width: 100%; } /* REVEAL EFFECT */ .position-reveal-effect .media-box-thumbnail-container{ z-index: 2; position: absolute; width: 100%; top: 0; left: 0; } .position-reveal-effect .thumbnail-overlay{ z-index: 1; position: absolute; left: 0; } .overlay-always-visible{ display: block !important; zoom: 1 !important; filter: alpha(opacity=100) !important; opacity: 1 !important; } .overlay-text-left>.aligment>.aligment{ text-align: left !important; } .overlay-text-right>.aligment>.aligment{ text-align: right !important; } /* ====================================================================== * [5] MAGNIFIC POPUP * ====================================================================== */ .mfp-arrow:focus { opacity: 0.65; filter: alpha(opacity=65); } .mfp-arrow:hover { opacity: 1 !important; filter: alpha(opacity=100) !important; } /* at start */ .my-mfp-slide-bottom .mfp-figure { opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-slide-bottom.mfp-ready .mfp-figure { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-slide-bottom.mfp-removing .mfp-figure { opacity: 0; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* Dark overlay, start state */ .my-mfp-slide-bottom.mfp-bg { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } /* animate in */ .my-mfp-slide-bottom.mfp-ready.mfp-bg { opacity: 0.8; } /* animate out */ .my-mfp-slide-bottom.mfp-removing.mfp-bg { opacity: 0; }