#colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; -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); } #cboxLoadedContent { /* max-width: 95% !important; max-height: 95% !important; width: auto !important; height: auto !important; */ width: 95%; height: 95%; } #cboxContent { /* display: flex; align-items: center; justify-content: center; */ width: 100% !important; height: 100% !important; overflow: auto; } #cboxWrapper, #colorbox { max-width: none; /* width: 100% !important; height: 100% !important; */ -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px; -ms-border-bottom-right-radius: 15px; -o-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px; -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; -ms-border-top-left-radius: 15px; -o-border-top-left-radius: 15px; border-top-left-radius: 15px; } /*#colorbox{left:0px !important; right:0px !important; top: 0px !important; bottom:0px !important;}*/ #cboxOverlay { position: fixed; width: 100%; height: 100%; color: #14191d; background-color: rgba(20,25,29,.8); -webkit-backdrop-filter: saturate(100%) blur(10px); -moz-backdrop-filter: saturate(100%) blur(10px); -ms-backdrop-filter: saturate(100%) blur(10px); -o-backdrop-filter: saturate(100%) blur(10px); backdrop-filter: saturate(100%) blur(10px); } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; /* max-width: 100% !important; max-height: 100% !important; */ position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #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; -ms-interpolation-mode:bicubic;} .cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;} #colorbox, #cboxContent, #cboxLoadedContent{-webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;} #cboxLoadingOverlay, #cboxOverlay { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-animation: zoomIn .35s ease-in; -moz-animation: zoomIn .35s ease-in; -ms-animation: zoomIn .35s ease-in; -o-animation: zoomIn .35s ease-in; animation: zoomIn .35s ease-in; } #colorbox, #cboxLoadedContent{ -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-animation: fadeinUp .65s ease-in; -moz-animation: fadeinUp .65s ease-in; -ms-animation: fadeinUp .65s ease-in; -o-animation: fadeinUp .65s ease-in; animation: fadeinUp .65s ease-in; } button#cboxClose{ -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-animation: fadeinUp .65s ease-in; -moz-animation: fadeinUp .65s ease-in; -ms-animation: fadeinUp .65s ease-in; -o-animation: fadeinUp .65s ease-in; animation: fadeinUp .65s ease-in; } @-webkit-keyframes slide { 0% {transform: translateX(100%);} 100% {transform: translateX(0%);} } @-moz-keyframes slide { 0% {transform: translateX(100%);} 100% {transform: translateX(0%);} } @-ms-keyframes slide { 0% {transform: translateX(100%);} 100% {transform: translateX(0%);} } @-o-keyframes slide { 0% {transform: translateX(100%);} 100% {transform: translateX(0%);} } @keyframes slide { 0% {transform: translateX(100%);} 100% {transform: translateX(0%);} } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 5% {-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { opacity: 1; } } @-moz-keyframes zoomIn { 0% { opacity: 0; -moz-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 5% {-moz-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { opacity: 1; } } @-ms-keyframes zoomIn { 0% { opacity: 0; -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 5% {-ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { opacity: 1; } } @-o-keyframes zoomIn { 0% { opacity: 0; -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 5% {-o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 5% {-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; -moz-animation-name: zoomIn; -ms-animation-name: zoomIn; -o-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .fadein { -webkit-animation-name: fadein; -moz-animation-name: fadein; -ms-animation-name: fadein; -o-animation-name: fadein; animation-name: fadein; } @-webkit-keyframes fadeinUp { 0% { opacity: 0; margin-top: 100px; } 60% {opacity: 1; } 100% { margin-top: 0px; } } @-moz-keyframes fadeinUp { 0% { opacity: 0; margin-top: 100px; } 60% {opacity: 1; } 100% { margin-top: 0px; } } @-ms-keyframes fadeinUp { 0% { opacity: 0; margin-top: 100px; } 60% {opacity: 1; } 100% { margin-top: 0px; } } @-o-keyframes fadeinUp { 0% { opacity: 0; margin-top: 100px; } 60% {opacity: 1; } 100% { margin-top: 0px; } } @keyframes fadeinUp { 0% { opacity: 0; margin-top: 100px; } 60% {opacity: 1; } 100% { margin-top: 0px; } } .fadeinUp { -webkit-animation-name: fadeinUp; -moz-animation-name: fadeinUp; -ms-animation-name: fadeinUp; -o-animation-name: fadeinUp; animation-name: fadeinUp; } /*#cboxLoadingGraphic, #cboxLoadingOverlay{display:none !important;visibility: hidden !important} */ a.iframe.cboxElement { display: grid; outline: none; } #colorbox{outline:0; /* top:0; left:0; bottom: 0; right:0; */ } #cboxTopCenter{height:0px;} #cboxBottomCenter{height:0px;} #cboxContent{background:rgba(0,0,0,0); overflow:hidden;} .cboxIframe{background:rgba(0,0,0,0);} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{margin-bottom:0px; height: 100% !important;} #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494; display: none !important;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494; display: none !important;} #cboxLoadingOverlay{background: rgba(0,0,0,0);} #cboxLoadingGraphic { background-repeat: no-repeat; background-position: center center; position: absolute; background-size: 100px 100px; width: 100px; height: 100px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; display: none; } #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} /* Fixing problem for IE7 and IE8 replacing a PNG's alpha transparency with a black fill 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); } /* custom fancybox-close button - replaced in jquery-fancybox.js class="fancybox-close" with "close_button" at lines: 223, 861, 1786, 2372 */ #cboxClose { width: 50px; height: 50px; position: fixed; top:20px; right:20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; z-index: 99999; /*background: rgba(255,255,255,.8);*/ background: #31227b; /* border-radius: 999px; */ -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px; -ms-border-bottom-right-radius: 15px; -o-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px; -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; -ms-border-top-left-radius: 15px; -o-border-top-left-radius: 15px; border-top-left-radius: 15px; overflow: hidden; outline: none; border-color: transparent; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } #cboxClose:hover{ cursor:pointer; background: #5d41ce; } #cboxClose, #cboxCole:hover{ -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: all; transition-duration: 0.35s; transition-delay: 0s; } #cboxClose::before, #cboxClose::after { content: "'"; color: transparent; position: absolute; height: 5px; width: 50%; z-index: 999999; border-radius: 999px; background-color: rgb(240,240,240); -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #cboxClose::before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #cboxClose::after { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } #cboxClose:hover::before{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); background-color: #ebebeb; } #cboxClose:hover::after{ -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); background-color: #ebebeb; } #cboxClose::-webkit-scrollbar, #cboxClose::-webkit-scrollbar:before, #cboxClose::-webkit-scrollbar:after { display: none; } #cboxClose::-webkit-scrollbar { display: none; } @media screen and (max-width:800px){ #cboxClose { width: 50px; height: 50px; } } @media screen and (max-width:205px) { #cboxClose { width: 45px; height: 45px; } #cboxClose::before, #cboxClose::after { height: 4px; } } @media screen and (max-width:175px) { #cboxClose { width: 40px; height: 40px; } }