.page-content{ overflow:unset; } .container-portfolio{ margin-bottom:100px; } .container-portfolio .data{ width:70%; } .entry-title{ font-size:1.3em; color:#000; font-weight:500; margin:20px 0 15px; line-height:1.3; } .sidebar{ width:27%; } .sidebar .info{ font-weight:500; background:var(--c-light); -webkit-transition:top .3s ease-out; transition:top .3s ease-out; border:1px solid #f0f0f0; padding:20px; color:var(--c-dark); font-size:1.1em; position:relative; } .sidebar .info:after{ content:''; position:absolute; display:block; width:100%; height:100%; right:0; bottom:0; background:url('../../img/service-sidebar-top.webp') no-repeat bottom right / auto; z-index:0; opacity:.6; } .sidebar .info .icons > *{ gap:10px; } .sidebar .info .icons > div{ display: flex; align-items:flex-start; gap: 7px; opacity: .8; -webkit-transition: all ease .5s; -moz-transition: all ease .5s; -ms-transition: all ease .5s; -o-transition: all ease .5s; transition: all ease .5s; } .sidebar .info .icons > *:before{ display:block; min-width:30px; height:30px; opacity:.5; } .label-object:before{ background-image:url('data:image/svg+xml;utf8,'); } .sidebar-consultation{ padding:25px; background:var(--c1); color:#000; align-items:center; gap:10px; margin:30px 0 0; position:-webkit-sticky; position:sticky; top:150px; } .sidebar-consultation:before{ content:''; position:absolute; display:block; width:100%; height:100%; top:0; right:0; background:url('../../img/service-sidebar-bottom.webp') no-repeat top right / auto; z-index:0; opacity:.6; } .sidebar-consultation .title{ font-weight:500; margin:0 0 15px; font-size:1.5em; text-align:center; } .sidebar-consultation .phone{ font-size:1.1em; } .sidebar-consultation .messengers{ justify-content:center; } .sidebar-consultation .messengers a{ width:30px; height:30px; } .sidebar-consultation .btn-dark:hover{ background:#fff; } .container-portfolio-top{ margin-bottom:20px; } .container-portfolio .data > *{ margin:0 0 30px; font-size:1.1em; } .container-portfolio .data .title{ font-weight:500; color:#000; margin:0 0 10px; } .requirements .list, .works .list{ margin:10px 0 0; } .requirements .list p, .features .list p{ display:flex; gap:10px; padding:5px 0; } .requirements .list p:before, .features .list p:before{ content:''; top:-3px; position:relative; display:block; min-width:30px; height:30px; border-radius:50%; background:var(--c1) url('data:image/svg+xml;utf8,') no-repeat center / 65%; } .features .list p:before{ background-color:#e9e9e9; } #portfolio-gallery{ z-index:1; } .portfolio-gallery{ background:var(--c-dark); color:rgb(255, 255, 255); } .portfolio-gallery:after{ content:''; position:absolute; display:block; content:url('../../img/process-scheme2.webp'); z-index:0; opacity:.3; bottom:-5px; right:0; transform: scaleY(-1); } .portfolio-content{ padding-top:50px; } .portfolio-content:after{ content:''; position:absolute; display:block; content:url('../../img/process-scheme1.webp'); z-index:0; opacity:.2; top:0; right:0; transform: scaleY(-1); } .portfolio-gallery .container{ width:100%; } .media-box-image img{ -webkit-transition: transform 0.6s ease-in-out; -moz-transition: transform 0.6s ease-in-out; -o-transition: transform 0.6s ease-in-out; -ms-transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -o-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } .media-box-image:hover img{ -webkit-transform: scale(1.2) translate(-20px); -moz-transform: scale(1.2) translate(-20px); -o-transform: scale(1.2) translate(-20px); -ms-transform: scale(1.2) translate(-20px); transform: scale(1.2) translate(-20px); } .wp-block-gallery.gallery-with-lightbox{ margin:15px 0 30px; } .wp-block-gallery.gallery-with-lightbox .wp-block-image{ width:32%; } .wp-block-gallery.gallery-with-lightbox .wp-block-image img{ width:100%; height:auto; } .wp-block-gallery.gallery-with-lightbox a{ border:1px solid #e9e9e9; display:inline-block; line-height:0; -webkit-transition:all ease .3s; -moz-transition:all ease .3s; -ms-transition:all ease .3s; -o-transition:all ease .3s; transition:all ease .3s; padding:5px; } .wp-block-gallery.gallery-with-lightbox a:hover{ border-color:var(--c1); } @media screen and (max-width:1024px){ .sidebar{ display:none; } .container-portfolio{ margin-bottom:20px; margin-top:40px; } .container-portfolio .data{ width:100%; } } @media screen and (max-width:500px){ .wp-block-gallery.gallery-with-lightbox{ flex-direction:column; } .wp-block-gallery.gallery-with-lightbox .wp-block-image{ width:100%; } .wp-block-gallery.gallery-with-lightbox .wp-block-image a{ display:table; margin:0 auto; } .entry-title{ font-size:1.2em; font-weight:600; } } body.compensate-for-scrollbar{overflow:hidden}.fancyboxMB-active{height:auto}.fancyboxMB-is-hidden{left:-9999px;margin:0;position:absolute!important;top:-9999px;visibility:hidden}.fancyboxMB-container{-webkit-backface-visibility:hidden;height:100%;left:0;outline:none;position:fixed;-webkit-tap-highlight-color:transparent;top:0;-ms-touch-action:manipulation;touch-action:manipulation;transform:translateZ(0);width:100%;z-index:99992}.fancyboxMB-container *{box-sizing:border-box}.fancyboxMB-bg,.fancyboxMB-inner,.fancyboxMB-outer,.fancyboxMB-stage{bottom:0;left:0;position:absolute;right:0;top:0}.fancyboxMB-outer{-webkit-overflow-scrolling:touch;overflow-y:auto}.fancyboxMB-bg{background:#1e1e1e;opacity:0;transition-duration:inherit;transition-property:opacity;transition-timing-function:cubic-bezier(.47,0,.74,.71)}.fancyboxMB-is-open .fancyboxMB-bg{opacity:.9;transition-timing-function:cubic-bezier(.22,.61,.36,1)}.fancyboxMB-caption,.fancyboxMB-infobar,.fancyboxMB-navigation .fancyboxMB-button,.fancyboxMB-toolbar{direction:ltr;opacity:0;position:absolute;transition:opacity .25s ease,visibility 0s ease .25s;visibility:hidden;z-index:99997}.fancyboxMB-show-caption .fancyboxMB-caption,.fancyboxMB-show-infobar .fancyboxMB-infobar,.fancyboxMB-show-nav .fancyboxMB-navigation .fancyboxMB-button,.fancyboxMB-show-toolbar .fancyboxMB-toolbar{opacity:1;transition:opacity .25s ease 0s,visibility 0s ease 0s;visibility:visible}.fancyboxMB-infobar{color:#ccc;font-size:13px;-webkit-font-smoothing:subpixel-antialiased;height:44px;left:0;line-height:44px;min-width:44px;mix-blend-mode:difference;padding:0 10px;pointer-events:none;top:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancyboxMB-toolbar{right:0;top:0}.fancyboxMB-stage{direction:ltr;overflow:visible;transform:translateZ(0);z-index:99994}.fancyboxMB-is-open .fancyboxMB-stage{overflow:hidden}.fancyboxMB-slide{-webkit-backface-visibility:hidden;display:none;height:100%;left:0;outline:none;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:absolute;text-align:center;top:0;transition-property:transform,opacity;white-space:normal;width:100%;z-index:99994}.fancyboxMB-slide:before{content:"";display:inline-block;font-size:0;height:100%;vertical-align:middle;width:0}.fancyboxMB-is-sliding .fancyboxMB-slide,.fancyboxMB-slide--current,.fancyboxMB-slide--next,.fancyboxMB-slide--previous{display:block}.fancyboxMB-slide--image{overflow:hidden;padding:44px 0}.fancyboxMB-slide--image:before{display:none}.fancyboxMB-slide--html{padding:6px}.fancyboxMB-content{background:#fff;display:inline-block;margin:0;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:relative;text-align:left;vertical-align:middle}.fancyboxMB-slide--image .fancyboxMB-content{animation-timing-function:cubic-bezier(.5,0,.14,1);-webkit-backface-visibility:hidden;background:transparent;background-repeat:no-repeat;background-size:100% 100%;left:0;max-width:none;overflow:visible;padding:0;position:absolute;top:0;transform-origin:top left;transition-property:transform,opacity;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:99995}.fancyboxMB-can-zoomOut .fancyboxMB-content{cursor:zoom-out}.fancyboxMB-can-zoomIn .fancyboxMB-content{cursor:zoom-in}.fancyboxMB-can-pan .fancyboxMB-content,.fancyboxMB-can-swipe .fancyboxMB-content{cursor:grab}.fancyboxMB-is-grabbing .fancyboxMB-content{cursor:grabbing}.fancyboxMB-container [data-selectable=true]{cursor:text}.fancyboxMB-image,.fancyboxMB-spaceball{background:transparent;border:0;height:100%;left:0;margin:0;max-height:none;max-width:none;padding:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.fancyboxMB-spaceball{z-index:1}.fancyboxMB-slide--iframe .fancyboxMB-content,.fancyboxMB-slide--map .fancyboxMB-content,.fancyboxMB-slide--pdf .fancyboxMB-content,.fancyboxMB-slide--video .fancyboxMB-content{height:100%;overflow:visible;padding:0;width:100%}.fancyboxMB-slide--video .fancyboxMB-content{background:#000}.fancyboxMB-slide--map .fancyboxMB-content{background:#e5e3df}.fancyboxMB-slide--iframe .fancyboxMB-content{background:#fff}.fancyboxMB-iframe,.fancyboxMB-video{background:transparent;border:0;display:block;height:100%;margin:0;overflow:hidden;padding:0;width:100%}.fancyboxMB-iframe{left:0;position:absolute;top:0}.fancyboxMB-error{background:#fff;cursor:default;max-width:400px;padding:40px;width:100%}.fancyboxMB-error p{color:#444;font-size:16px;line-height:20px;margin:0;padding:0}.fancyboxMB-button{background:rgba(30,30,30,.6);border:0;border-radius:0;box-shadow:none;cursor:pointer;display:inline-block;height:44px;margin:0;padding:10px;position:relative;transition:color .2s;vertical-align:top;visibility:inherit;width:44px}.fancyboxMB-button,.fancyboxMB-button:link,.fancyboxMB-button:visited{color:#ccc}.fancyboxMB-button:hover{color:#fff}.fancyboxMB-button:focus{outline:none}.fancyboxMB-button.fancyboxMB-focus{outline:1px dotted}.fancyboxMB-button[disabled],.fancyboxMB-button[disabled]:hover{color:#888;cursor:default;outline:none}.fancyboxMB-button div{height:100%}.fancyboxMB-button svg{display:block;height:100%;overflow:visible;position:relative;width:100%}.fancyboxMB-button svg path{fill:currentColor;stroke-width:0}.fancyboxMB-button--fsenter svg:nth-child(2),.fancyboxMB-button--fsexit svg:first-child,.fancyboxMB-button--pause svg:first-child,.fancyboxMB-button--play svg:nth-child(2){display:none}.fancyboxMB-progress{background:#ff5268;height:2px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;z-index:99998}.fancyboxMB-close-small{background:transparent;border:0;border-radius:0;color:#ccc;cursor:pointer;opacity:.8;padding:8px;position:absolute;right:-12px;top:-44px;z-index:401}.fancyboxMB-close-small:hover{color:#fff;opacity:1}.fancyboxMB-slide--html .fancyboxMB-close-small{color:currentColor;padding:10px;right:0;top:0}.fancyboxMB-slide--image.fancyboxMB-is-scaling .fancyboxMB-content{overflow:hidden}.fancyboxMB-is-scaling .fancyboxMB-close-small,.fancyboxMB-is-zoomable.fancyboxMB-can-pan .fancyboxMB-close-small{display:none}.fancyboxMB-navigation .fancyboxMB-button{background-clip:content-box;height:100px;opacity:0;position:absolute;top:calc(50% - 50px);width:70px}.fancyboxMB-navigation .fancyboxMB-button div{padding:7px}.fancyboxMB-navigation .fancyboxMB-button--arrow_left{left:0;left:env(safe-area-inset-left);padding:31px 26px 31px 6px}.fancyboxMB-navigation .fancyboxMB-button--arrow_right{padding:31px 6px 31px 26px;right:0;right:env(safe-area-inset-right)}.fancyboxMB-caption{background:linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.15) 65%,rgba(0,0,0,.075) 75.5%,rgba(0,0,0,.037) 82.85%,rgba(0,0,0,.019) 88%,transparent);bottom:0;color:#eee;font-size:14px;font-weight:400;left:0;line-height:1.5;padding:75px 44px 25px;pointer-events:none;right:0;text-align:center;z-index:99996}@supports (padding:max(0px)){.fancyboxMB-caption{padding:75px max(44px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) max(44px,env(safe-area-inset-left))}}.fancyboxMB-caption--separate{margin-top:-50px}.fancyboxMB-caption__body{max-height:50vh;overflow:auto;pointer-events:all}.fancyboxMB-caption a,.fancyboxMB-caption a:link,.fancyboxMB-caption a:visited{color:#ccc;text-decoration:none}.fancyboxMB-caption a:hover{color:#fff;text-decoration:underline}.fancyboxMB-loading{animation:a 1s linear infinite;background:transparent;border:4px solid #888;border-bottom-color:#fff;border-radius:50%;height:50px;left:50%;margin:-25px 0 0 -25px;opacity:.7;padding:0;position:absolute;top:50%;width:50px;z-index:99999}@keyframes a{to{transform:rotate(1turn)}}.fancyboxMB-animated{transition-timing-function:cubic-bezier(0,0,.25,1)}.fancyboxMB-fx-slide.fancyboxMB-slide--previous{opacity:0;transform:translate3d(-100%,0,0)}.fancyboxMB-fx-slide.fancyboxMB-slide--next{opacity:0;transform:translate3d(100%,0,0)}.fancyboxMB-fx-slide.fancyboxMB-slide--current{opacity:1;transform:translateZ(0)}.fancyboxMB-fx-fade.fancyboxMB-slide--next,.fancyboxMB-fx-fade.fancyboxMB-slide--previous{opacity:0;transition-timing-function:cubic-bezier(.19,1,.22,1)}.fancyboxMB-fx-fade.fancyboxMB-slide--current{opacity:1}.fancyboxMB-fx-zoom-in-out.fancyboxMB-slide--previous{opacity:0;transform:scale3d(1.5,1.5,1.5)}.fancyboxMB-fx-zoom-in-out.fancyboxMB-slide--next{opacity:0;transform:scale3d(.5,.5,.5)}.fancyboxMB-fx-zoom-in-out.fancyboxMB-slide--current{opacity:1;transform:scaleX(1)}.fancyboxMB-fx-rotate.fancyboxMB-slide--previous{opacity:0;transform:rotate(-1turn)}.fancyboxMB-fx-rotate.fancyboxMB-slide--next{opacity:0;transform:rotate(1turn)}.fancyboxMB-fx-rotate.fancyboxMB-slide--current{opacity:1;transform:rotate(0deg)}.fancyboxMB-fx-circular.fancyboxMB-slide--previous{opacity:0;transform:scale3d(0,0,0) translate3d(-100%,0,0)}.fancyboxMB-fx-circular.fancyboxMB-slide--next{opacity:0;transform:scale3d(0,0,0) translate3d(100%,0,0)}.fancyboxMB-fx-circular.fancyboxMB-slide--current{opacity:1;transform:scaleX(1) translateZ(0)}.fancyboxMB-fx-tube.fancyboxMB-slide--previous{transform:translate3d(-100%,0,0) scale(.1) skew(-10deg)}.fancyboxMB-fx-tube.fancyboxMB-slide--next{transform:translate3d(100%,0,0) scale(.1) skew(10deg)}.fancyboxMB-fx-tube.fancyboxMB-slide--current{transform:translateZ(0) scale(1)}@media (max-height:576px){.fancyboxMB-slide{padding-left:6px;padding-right:6px}.fancyboxMB-slide--image{padding:6px 0}.fancyboxMB-close-small{right:-6px}.fancyboxMB-slide--image .fancyboxMB-close-small{background:#4e4e4e;color:#f2f4f6;height:36px;opacity:1;padding:6px;right:0;top:0;width:36px}.fancyboxMB-caption{padding-left:12px;padding-right:12px}@supports (padding:max(0px)){.fancyboxMB-caption{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}}}.fancyboxMB-share{background:#f4f4f4;border-radius:3px;max-width:90%;padding:30px;text-align:center}.fancyboxMB-share h1{color:#222;font-size:35px;font-weight:700;margin:0 0 20px}.fancyboxMB-share p{margin:0;padding:0}.fancyboxMB-share__button{border:0;border-radius:3px;display:inline-block;font-size:14px;font-weight:700;line-height:40px;margin:0 5px 10px;min-width:130px;padding:0 15px;text-decoration:none;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.fancyboxMB-share__button:link,.fancyboxMB-share__button:visited{color:#fff}.fancyboxMB-share__button:hover{text-decoration:none}.fancyboxMB-share__button--fb{background:#3b5998}.fancyboxMB-share__button--fb:hover{background:#344e86}.fancyboxMB-share__button--pt{background:#bd081d}.fancyboxMB-share__button--pt:hover{background:#aa0719}.fancyboxMB-share__button--tw{background:#1da1f2}.fancyboxMB-share__button--tw:hover{background:#0d95e8}.fancyboxMB-share__button svg{height:25px;margin-right:7px;position:relative;top:-1px;vertical-align:middle;width:25px}.fancyboxMB-share__button svg path{fill:#fff}.fancyboxMB-share__input{background:transparent;border:0;border-bottom:1px solid #d7d7d7;border-radius:0;color:#5d5b5b;font-size:14px;margin:10px 0 0;outline:none;padding:10px 15px;width:100%}.fancyboxMB-thumbs{background:#ddd;bottom:0;display:none;margin:0;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;padding:2px 2px 4px;position:absolute;right:0;-webkit-tap-highlight-color:rgba(0,0,0,0);top:0;width:212px;z-index:99995}.fancyboxMB-thumbs-x{overflow-x:auto;overflow-y:hidden}.fancyboxMB-show-thumbs .fancyboxMB-thumbs{display:block}.fancyboxMB-show-thumbs .fancyboxMB-inner{right:212px}.fancyboxMB-thumbs__list{font-size:0;height:100%;list-style:none;margin:0;overflow-x:hidden;overflow-y:auto;padding:0;position:absolute;position:relative;white-space:nowrap;width:100%}.fancyboxMB-thumbs-x .fancyboxMB-thumbs__list{overflow:hidden}.fancyboxMB-thumbs-y .fancyboxMB-thumbs__list::-webkit-scrollbar{width:7px}.fancyboxMB-thumbs-y .fancyboxMB-thumbs__list::-webkit-scrollbar-track{background:#fff;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.fancyboxMB-thumbs-y .fancyboxMB-thumbs__list::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:10px}.fancyboxMB-thumbs__list a{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:rgba(0,0,0,.1);background-position:50%;background-repeat:no-repeat;background-size:cover;cursor:pointer;float:left;height:75px;margin:2px;max-height:calc(100% - 8px);max-width:calc(50% - 4px);outline:none;overflow:hidden;padding:0;position:relative;-webkit-tap-highlight-color:transparent;width:100px}.fancyboxMB-thumbs__list a:before{border:6px solid #ff5268;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:all .2s cubic-bezier(.25,.46,.45,.94);z-index:99991}.fancyboxMB-thumbs__list a:focus:before{opacity:.5}.fancyboxMB-thumbs__list a.fancyboxMB-thumbs-active:before{opacity:1}@media (max-width:576px){.fancyboxMB-thumbs{width:110px}.fancyboxMB-show-thumbs .fancyboxMB-inner{right:110px}.fancyboxMB-thumbs__list a{max-width:calc(100% - 10px)}} /* ======================================================= * * Media boxes * Version: 3.5 * 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] CHECKBOXES * [7] THUMBNAIL OVERLAY EFFECT * [8] FANCYBOX * [9] MAGNIFIC POPUP * [10] 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:'Montserrat', 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: 3px; -moz-border-radius: 3px; border-radius: 3px; /* -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); */ } .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; } /* [START] THIS IS NOT LONGER NEEDED, BUT I'M LEAVING IT HERE IN CASE SOMEBODY IS USING THE OLD WAY */ .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; } } /* [END] THIS IS NOT LONGER NEEDED, BUT I'M LEAVING IT HERE IN CASE SOMEBODY IS USING THE OLD WAY */ .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: 2px; -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: 50%; 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 10px 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: 38px; line-height: 38px; text-decoration: none; margin: 0px; padding: 0 15px; background-color: #fff; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-transition: border .1s; -moz-transition: border .1s; -o-transition: border .1s; -ms-transition: border .1s; transition: border .1s; } .media-boxes-filter>li a:hover{ text-decoration: none; border: 1px solid #dadada; } .media-boxes-filter>li a.selected{ background: #4d4c4d !important; color: #fff !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: 38px; line-height: 38px; 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: 38px; line-height: 38px; 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-sort{ display: inline-block; vertical-align: top; } .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:450px; margin:0 auto; margin-bottom: 5px; position: relative; display: inline-block; border: 1px solid #EBEBEB; } .media-boxes-drop-down-header{ font-size:1.2em; margin: 0 !important; display: block; height: 38px; line-height: 38px; padding: 0 15px !important; text-decoration: none; background-color: #fff; color: #444; cursor: pointer; vertical-align: top; } .fa.fa-sort-desc:before{ content:'\f107'; top:5px; position:relative; } .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-menu > li > a{ font-size:1em; display: block; margin: 0 !important; padding: 0px 15px !important; color: #444; background: #fff; height: 38px !important; line-height: 38px !important; border-top: 1px solid rgba(175,175,175,.16)!important; text-decoration: none; } .media-boxes-drop-down-menu > li > a:hover{ color: #000 !important; } .media-boxes-sort .media-boxes-drop-down-header .fa{ display: none; } .media-boxes-sort-order{ cursor: pointer; display: inline-block; width: 34px; height: 38px; line-height: 38px; color: #444; background: #fff; text-align: center; vertical-align: top; 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] CHECKBOXES * ====================================================================== */ .media-boxes-checkboxes{ display: block; margin-bottom: 5px; } /* Customize the label (the container) */ .media-boxes-checkboxes-label { display: inline-block; position: relative; margin-right: 20px; padding-left: 30px; margin-bottom: 5px; cursor: pointer; font-size: 14px; font-weight: normal; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .media-boxes-checkboxes-label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .media-boxes-checkboxes-checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #fff; border: 1px solid #EBEBEB; transition: background-color 0.3s ease; } /* On mouse-over, add a grey background color */ .media-boxes-checkboxes-label:hover input ~ .media-boxes-checkboxes-checkmark { background-color: #f5f6fa; } /* When the checkbox is checked, add a blue background */ .media-boxes-checkboxes-label input:checked ~ .media-boxes-checkboxes-checkmark { background-color: #2196F3; } /* Create the checkmark/indicator (hidden when not checked) */ .media-boxes-checkboxes-checkmark:after { content: ""; } /* Show the checkmark when checked */ .media-boxes-checkboxes-label input:checked ~ .media-boxes-checkboxes-checkmark:after { content: "\f00c"; } /* Style the checkmark/indicator */ .media-boxes-checkboxes-label .media-boxes-checkboxes-checkmark:after { display: block; font-family: FontAwesome; font-size: 11px; line-height: 19px; text-align: center; color: #fff; } /* ====================================================================== * [7] THUMBNAIL OVERLAY EFFECT * ====================================================================== */ .thumbnail-overlay{ background: black; /* fallback for IE8 */ background-color: rgba(34,34,34,.5); 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: 10px; display: table-cell !important; vertical-align: middle; /* FOR VERTICAL ALIGN */ text-align:center; /* FOR HORIZONTAL ALIGN */ } .thumbnail-overlay-title{ letter-spacing: 0px; font-weight: 600; font-size: 16px; color: #fff; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 2px; line-height: 28px; } .thumbnail-overlay i.fa, .media-box-play-button, .media-box-sound-button{ background: rgba(255,255,255,.3); color: #fff; 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,.4); cursor: pointer; } .mb-play-container{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url('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); } /* ====================================================================== * [8] FANCYBOX * ====================================================================== */ .fancyboxMB-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 */ } .fancyboxMB-thumbs{ background: rgba(255,255,255,.1); } /* ====================================================================== * [9] 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('icons/icon-arrow-left.png') 50% 50% no-repeat !important; } .mfp-arrow.mfp-arrow-right { background:url('icons/icon-arrow-right.png') 50% 50% no-repeat !important; } .mfp-close{ background:url('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('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; } /* ====================================================================== * [10] 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 */ /* fill-height instead of the width */ .media-box-image .media-box-fill-height[data-width][data-height] img{ top: 0 !important; left: -100% !important; right: -100% !important; bottom: 0 !important; min-width: 100% !important; width: auto !important; max-width: none !important; height: 100%; } .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); } /* 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: #4e4e4e; /*background-image: url('icons/loading-image.gif');*/ } .broken-image-here{ background-color: #BE3730; background-image: url('icons/broken-image.png'); } .broken-image-here:not([data-height]){ min-height: 150px; } /* LOADER ANIMATION */ .media-boxes-loading-animation, .media-boxes-loading-animation:after { border-radius: 50%; width: 36px; height: 36px; } .media-boxes-loading-animation { box-sizing: border-box; position: absolute; margin-top: -18px; margin-left: -18px; top: 50%; left: 50%; font-size: 6px; text-indent: -9999px; border-top: 6px solid rgba(255, 255, 255, 0.2); border-right: 6px solid rgba(255, 255, 255, 0.2); border-bottom: 6px solid rgba(255, 255, 255, 0.2); border-left: 6px solid #ffffff; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* ====================================================================== * [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; } /* hide no more entries button */ .media-boxes-no-more-entries{ display: none; } /* make your own style of the filter */ .filters-container{ margin:0 0 30px; background:#f2f2f2; padding: 20px 10px; } .custom-filter{ padding: 0 !important; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; align-content: stretch; line-height:1; font-size:.9em; } .custom-filter li{ list-style:none; text-align:center; } .custom-filter li a{ text-decoration: none; text-transform:uppercase; padding:5px 10px; } .custom-filter li a:hover{ -webkit-transition:all ease-in-out .3s; -moz-transition:all ound ease-in-out .3s; -ms-transition:all ease-in-out .3s; -o-transition:all ease-in-out .3s; transition:all ease-in-out .3s; background:var(--main-color) !important; color:#fff; } .custom-filter li a.selected{ background:var(--dark-color) !important; color:#fff; } /* Set the style of the thumbnail overlay items */ .media-box-title{ color:var(--bright-color); font-size:1.3em; margin-bottom: 5px; line-height:1.2; font-weight:400; font-family:'Montserrat', sans-serif; } .media-box-date{ font-size:1.1em; color:#fff; font-family:'Montserrat', sans-serif; } .media-box-text{ font-family:'Montserrat', sans-serif; } /* Remove box shadow and border-radius from the media boxes */ .media-box-container{ -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; box-shadow: none; } /* thumbnail overlay background */ .thumbnail-overlay{ background-color: rgba(0,0,0, .40); -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out; -o-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; } /* hover effect on the thumbnail-overlay */ .thumbnail-overlay:hover{ background-color: rgba(0,0,0, .5) !important; } /* hover effect on the image */ #grid .media-box-image img{ -webkit-transition: transform 0.6s ease-in-out; -moz-transition: transform 0.6s ease-in-out; -o-transition: transform 0.6s ease-in-out; -ms-transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -o-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } #grid .media-box-image:hover img{ -webkit-transform: scale(1.2) translate(-20px); -moz-transform: scale(1.2) translate(-20px); -o-transform: scale(1.2) translate(-20px); -ms-transform: scale(1.2) translate(-20px); transform: scale(1.2) translate(-20px); } /* Change alignment in grid 2 */ #grid2 .thumbnail-overlay>div.aligment>div.aligment{ vertical-align: bottom; padding-bottom: 40px; } .fancyboxMB-caption__body{ padding-bottom:10px; line-height:1.2; } .fancyboxMB-caption__body p{ padding-bottom:5px; color:var(--bright-color); font-size:1.2em; }