html { -ms-touch-action: manipulation; touch-action: manipulation; } #imagelightbox { -ms-touch-action: none; touch-action: none; -moz-box-shadow: rgba(0, 0, 0, 0.75) 0 0 50px; -webkit-box-shadow: rgba(0, 0, 0, 0.75) 0 0 50px; box-shadow: rgba(0, 0, 0, 0.75) 0 0 50px; cursor: pointer; position: fixed; z-index: 10000; } #imagelightbox-loading, #imagelightbox-loading div { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } #imagelightbox-loading { -moz-box-shadow: rgba(0, 0, 0, 0.75) 0 0 40px; -webkit-box-shadow: rgba(0, 0, 0, 0.75) 0 0 40px; box-shadow: rgba(0, 0, 0, 0.75) 0 0 40px; background: #444; background: rgba(0, 0, 0, 0.5); height: 20px; left: 50%; margin: -20px 0 0 -20px; padding: 10px; position: fixed; top: 50%; width: 20px; z-index: 10003; } #imagelightbox-loading div { -moz-animation: imagelightbox-loading .5s ease infinite; -o-animation: imagelightbox-loading .5s ease infinite; -webkit-animation: imagelightbox-loading .5s ease infinite; animation: imagelightbox-loading .5s ease infinite; background-color: #fff; height: 20px; width: 20px; } @-webkit-keyframes imagelightbox-loading { 0% { opacity: .5; -webkit-transform: scale(0.75); } 50% { opacity: 1; -webkit-transform: scale(1); } 100% { opacity: .5; -webkit-transform: scale(0.75); } } @-moz-keyframes imagelightbox-loading { 0% { opacity: .5; -moz-transform: scale(0.75); } 50% { opacity: 1; -moz-transform: scale(1); } 100% { opacity: .5; -moz-transform: scale(0.75); } } @-o-keyframes imagelightbox-loading { 0% { opacity: .5; -o-transform: scale(0.75); } 50% { opacity: 1; -o-transform: scale(1); } 100% { opacity: .5; -o-transform: scale(0.75); } } @keyframes imagelightbox-loading { 0% { opacity: .5; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: .5; transform: scale(0.75); } } #imagelightbox-overlay { background: #fff; background: rgba(255, 255, 255, 0.9); bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 9998; } #imagelightbox-close { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: #666; height: 40px; position: fixed; right: 40px; text-align: left; text-indent: -9999px; top: 40px; -moz-transition: color .3s ease; -ms-transition: color .3s ease; -o-transition: color .3s ease; -webkit-transition: color .3s ease; transition: color .3s ease; width: 40px; z-index: 10002; } #imagelightbox-close:hover { background-color: #111; } #imagelightbox-close:before, #imagelightbox-close:after { background-color: #fff; bottom: 20%; content: ''; left: 50%; margin-left: -1px; position: absolute; top: 20%; width: 2px; } #imagelightbox-close:before { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } #imagelightbox-close:after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #imagelightbox-caption { background-color: #666; bottom: 0; color: #fff; left: 0; padding: 10px; position: fixed; right: 0; text-align: center; z-index: 10001; } #imagelightbox-nav { -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #444; background-color: rgba(0, 0, 0, 0.5); bottom: 60px; left: 50%; padding: 5px 2px 1px; position: fixed; z-index: 10001; } #imagelightbox-nav a { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #fff; display: inline-block; height: 20px; margin: 0 5px; width: 20px; } #imagelightbox-nav .active { background-color: #fff; } #imagelightbox-loading, #imagelightbox-overlay, #imagelightbox-close, #imagelightbox-caption, #imagelightbox-nav { -moz-animation: fade-in .25s linear; -o-animation: fade-in .25s linear; -webkit-animation: fade-in .25s linear; animation: fade-in .25s linear; } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @media only screen and (max-width: 660px) { #imagelightbox-close { right: 20px; top: 20px; } #imagelightbox-nav { bottom: 20px; } } /*# sourceMappingURL=touch-imagelightbox.css.map */