#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: 90% !important; */ -webkit-border-radius: 22px; -moz-border-radius: 22px; -ms-border-radius: 22px; -o-border-radius: 22px; border-radius: 22px; /* overflow: hidden; */ } #cboxOverlay { position: fixed; width: 100%; height: 100%; background-color: rgba(24, 32, 47, .65); -webkit-backdrop-filter: saturate(100%) blur(12px); -moz-backdrop-filter: saturate(100%) blur(12px); -ms-backdrop-filter: saturate(100%) blur(12px); -o-backdrop-filter: saturate(100%) blur(12px); backdrop-filter: saturate(100%) blur(12px); } #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; /* max-width: 100% !important; max-height: 100% !important; min-width: 100% !important; min-height: 100% !important; width: 100% !important; height: 100%; */ position: fixed; width: 100%; height: 100%; /* left:0px; right:0px; top:0px; bottom:0px; */ top: 0px; left: 0px; bottom: 0px; right: 0px; /* 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; -ms-box-sizing: content-box; -o-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: fadein .35s; -moz-animation: fadein .35s; -ms-animation: fadein .35s; -o-animation: fadein .35s; animation: fadein .35s; } #cboxLoadedContent{ -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-animation: zoomIn .75s; -moz-animation: zoomIn .75s; -ms-animation: zoomIn .75s; -o-animation: zoomIn .75s; animation: zoomIn .75s; } #cboxClose{ -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; -webkit-animation: fadein .5s; -moz-animation: fadein .5s; -ms-animation: fadein .5s; -o-animation: fadein .5s; animation: fadein .5s; } @-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%);} } .slide { -webkit-animation-name: slide; -moz-animation-name: slide; -ms-animation-name: slide; -o-animation-name: slide; animation-name: slide; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } 100% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-moz-keyframes zoomIn { from { opacity: 0; -moz-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } 100% { opacity: 1; -moz-transform: scale(1, 1); transform: scale(1, 1); } } @-ms-keyframes zoomIn { from { opacity: 0; -ms-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } 100% { opacity: 1; -ms-transform: scale(1, 1); transform: scale(1, 1); } } @-o-keyframes zoomIn { from { opacity: 0; -o-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } 100% { opacity: 1; -o-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } 100% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } .zoomIn { -webkit-animation-name: zoomIn; -moz-animation-name: zoomIn; -ms-animation-name: zoomIn; -o-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes slideInUp { 0% { opacity: 1; top: 20%; min-width: 100% !important; } 100% { opacity: 1; top: 0; } } @-moz-keyframes slideInUp { 0% { opacity: 1; top: 20%; min-width: 100% !important; } 100% { opacity: 1; top: 0; } } @-ms-keyframes slideInUp { 0% { opacity: 1; top: 20%; min-width: 100% !important; } 100% { opacity: 1; top: 0; } } @-o-keyframes slideInUp { 0% { opacity: 1; top: 20%; min-width: 100% !important; } 100% { opacity: 1; top: 0; } } @keyframes slideInUp { 0% { opacity: 1; top: 20%; min-width: 100% !important; } 100% { opacity: 1; top: 0; } } .slideInUp { -webkit-animation-name: slideInUp; -moz-animation-name: slideInUp; -ms-animation-name: slideInUp; -o-animation-name: slideInUp; animation-name: slideInUp; } @-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; } } 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 close button */ #cboxClose { width: 55px; height: 55px; position: fixed; bottom:20px; left:50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: flex; justify-content: center; align-items: center; z-index: 99999; /*background: rgba(255,255,255,.8);*/ /* background: #3305d9; */ background-color: rgba(51, 5, 217, .75); -webkit-backdrop-filter: saturate(100%) blur(12px); -moz-backdrop-filter: saturate(100%) blur(12px); -ms-backdrop-filter: saturate(100%) blur(12px); -o-backdrop-filter: saturate(100%) blur(12px); backdrop-filter: saturate(100%) blur(12px); -webkit-border-radius: 999px; -moz-border-radius: 999px; -ms-border-radius: 999px; -o-border-radius: 999px; border-radius: 999px; 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-color: rgba(51,5,217,1); } #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; /* margin-top: -2.5px; margin-left: -15px; */ height: 5px; width: 50%; z-index: 999999; -webkit-border-radius: 999px; -moz-border-radius: 999px; -ms-border-radius: 999px; -o-border-radius: 999px; border-radius: 999px; background-color: #f5f5f5; -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); opacity: 1; } #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(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); background-color: #f5f5f5; } #cboxClose:hover::after{ -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); background-color: #f5f5f5; } #cboxClose:hover::before{ -webkit-transition: opacity .4s linear, transform 0.25s; -moz-transition: opacity .4s linear, transform 0.25s; -ms-transition: opacity .4s linear, transform 0.25s; -o-transition: opacity .4s linear, transform 0.25s; transition: opacity .4s linear, transform 0.25s; opacity: 0; } #cboxClose::-webkit-scrollbar, #cboxClose::-webkit-scrollbar:before, #cboxClose::-webkit-scrollbar:after { display: none; } #cboxClose::-webkit-scrollbar { display: none; } @media screen and (max-width:1080px) { #cboxWrapper, #colorbox { -webkit-border-radius: 21px; -moz-border-radius: 21px; -ms-border-radius: 21px; -o-border-radius: 21px; border-radius: 21px; } } @media screen and (max-width:800px) { /* #cboxLoadedContent{ transition-delay: 0s; -webkit-animation: zoomIn .5s; -moz-animation: zoomIn .5s; -ms-animation: zoomIn .5s; -o-animation: zoomIn .5s; animation: zoomIn .5s; } */ #cboxClose { width: 50px; height: 50px; } /* #cboxClose::before, #cboxClose::after { width:25px; margin-left: -12px; } */ } @media screen and (max-width:750px) { #cboxWrapper, #colorbox { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; } } @media screen and (max-width:480px){ #cboxClose { bottom:10px; right:10px; } } @media screen and (max-width:263px){ #cboxWrapper, #colorbox { -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; } } @media screen and (max-width:250px){ #cboxClose { width: 45px; height: 45px; } } @media screen and (max-width:200px) { #cboxClose { width: 40px; height: 40px; } #cboxClose::before, #cboxClose::after { height: 4px; } } @media screen and (max-width:180px) { #cboxClose { width: 35px; height: 35px; } #cboxClose::before, #cboxClose::after { height: 3px; } } html.noScrollSimple { overflow:hidden; touch-action: none; }