/* Classes on outer slideshow wrapper: either NONE or 'fraction' or 'fraction' + one of 'fraction1'...'fraction10'. fraction sets box-sizing: border-box, so that padding on the element is taken out ; either NONE or 'center' or 'right' */ .m-carousel { position: relative; overflow: hidden; -webkit-font-smoothing: antialiased; } .m-carousel.m-left { text-align: left; } .m-carousel.m-center { text-align: center; } .m-carousel.m-fluid > .m-carousel-inner > * { width: 100%; } .m-carousel.m-fluid.m-center > .m-carousel-inner > *:first-child { margin-left: 0%; } .m-carousel.m-fluid-2 > .m-carousel-inner > * { width: 50%; } .m-carousel.m-fluid-2.m-center > .m-carousel-inner > *:first-child { margin-left: 25%; } .m-carousel.m-fluid-3 > .m-carousel-inner > * { width: 33.333%; } .m-carousel.m-fluid-3.m-center > .m-carousel-inner > *:first-child { margin-left: 33.333%; } .m-carousel.m-fluid-4 > .m-carousel-inner > * { width: 25%; } .m-carousel.m-fluid-4.m-center > .m-carousel-inner > *:first-child { margin-left: 37.5%; } .m-carousel.m-fluid-5 > .m-carousel-inner > * { width: 20%; } .m-carousel.m-fluid-5.m-center > .m-carousel-inner > *:first-child { margin-left: 40%; } .m-carousel.m-fluid-6 > .m-carousel-inner > * { width: 16.667%; } .m-carousel.m-fluid-6.m-center > .m-carousel-inner > *:first-child { margin-left: 41.667%; } .m-carousel img { -ms-interpolation-mode: bicubic; } .m-carousel-inner { position: relative; white-space: nowrap; text-align: left; /* Removes inline-block gaps due to whitespace */ font-size: 0; /* Configure animations */ -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -ms-transition-property: -ms-transform; -o-transition-property: -o-transform; transition-property: transform; /* iOS like slide timings */ -webkit-transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); -moz-transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); -ms-transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); -o-transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .m-carousel-inner > * { display: inline-block; vertical-align: top; white-space: normal; /* We must reset the font-size here */ font-size: 16px; } .m-fluid > .m-carousel-inner > * { box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; } .m-center:not(.m-fluid) > .m-carousel-inner { display: inline-block; margin-right: -20000px !important; margin-left: 0 !important; } .m-center:not(.m-fluid) > .m-carousel-inner > * { position: relative; left: -20000px; } .m-center:not(.m-fluid) > .m-carousel-inner > *:first-child { float: left; margin-right: 20000px; left: 0; } .m-center:not(.m-fluid) > .m-carousel-inner > *:first-child:last-child { margin-right: 0; } .m-center:not(.m-fluid) > .m-carousel-inner > *:last-child { margin-right: -30000px; } .hide{display:none;} #overlay-mobile{ top:0; left:0; width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,0.8); cursor: pointer; z-index: 9000; } .item-caption{ font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif; font-size: 24px; color: #636363; /*background: #000;*/ padding: 20px 10px; text-align: center; } /* Classes on outer slideshow wrapper: either NONE or 'fraction' or 'fraction' + one of 'fraction1'...'fraction10'. fraction sets box-sizing: border-box, so that padding on the element is taken out ; either NONE or 'center' or 'right' */ .m-carousel { position: relative; overflow: hidden; -webkit-font-smoothing: antialiased; } .m-carousel.m-left { text-align: left; } .m-carousel.m-center { text-align: center; } .m-carousel.m-fluid > .m-carousel-inner > * { width: 100%; } .m-carousel.m-fluid.m-center > .m-carousel-inner > *:first-child { margin-left: 0%; } .m-carousel.m-fluid-2 > .m-carousel-inner > * { width: 50%; } .m-carousel.m-fluid-2.m-center > .m-carousel-inner > *:first-child { margin-left: 25%; } .m-carousel.m-fluid-3 > .m-carousel-inner > * { width: 33.333%; } .m-carousel.m-fluid-3.m-center > .m-carousel-inner > *:first-child { margin-left: 33.333%; } .m-carousel.m-fluid-4 > .m-carousel-inner > * { width: 25%; } .m-carousel.m-fluid-4.m-center > .m-carousel-inner > *:first-child { margin-left: 37.5%; } .m-carousel.m-fluid-5 > .m-carousel-inner > * { width: 20%; } .m-carousel.m-fluid-5.m-center > .m-carousel-inner > *:first-child { margin-left: 40%; } .m-carousel.m-fluid-6 > .m-carousel-inner > * { width: 16.667%; } .m-carousel.m-fluid-6.m-center > .m-carousel-inner > *:first-child { margin-left: 41.667%; } .m-carousel img { -ms-interpolation-mode: bicubic; } .m-carousel-inner { position: relative; white-space: nowrap; text-align: left; /* Removes inline-block gaps due to whitespace */ font-size: 0; /* Configure animations */ -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -ms-transition-property: -ms-transform; -o-transition-property: -o-transform; transition-property: transform; /* iOS like slide timings */ -webkit-transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); -moz-transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); -ms-transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); -o-transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .m-carousel-inner > * { display: inline-block; vertical-align: top; white-space: normal; /* We must reset the font-size here */ font-size: 16px; } .m-fluid > .m-carousel-inner > * { box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; } .m-center:not(.m-fluid) > .m-carousel-inner { display: inline-block; margin-right: -20000px !important; margin-left: 0 !important; } .m-center:not(.m-fluid) > .m-carousel-inner > * { position: relative; left: -20000px; } .m-center:not(.m-fluid) > .m-carousel-inner > *:first-child { float: left; margin-right: 20000px; left: 0; } .m-center:not(.m-fluid) > .m-carousel-inner > *:first-child:last-child { margin-right: 0; } .m-center:not(.m-fluid) > .m-carousel-inner > *:last-child { margin-right: -30000px; } /* Carousel control base styling */ .m-carousel-controls { padding-top: 10px; text-align: center; } .m-carousel-controls a { padding: 5px; -webkit-user-select: none; -moz-user-select: -moz-none; user-select: none; -webkit-user-drag: none; -moz-user-drag: -moz-none; user-drag: none; } /* Carousel controls: Bulleted */ .m-carousel-bulleted a { line-height: 0; text-decoration: none; text-indent: -999px; overflow: hidden; display: inline-block; padding: 6px; width: 0; height: 0; margin: 0 3px; color: #333; background-color: rgba(255,255,255,0.3); -webkit-transition: background-color 0.1s ease-in; -moz-transition: background-color 0.1s ease-in; -o-transition: background-color 0.1s ease-in; transition: background-color 0.1s ease-in; -webkit-box-shadow: inset rgba(0,0,0,0.25) 0 1px 2px; -moz-box-shadow: inset rgba(0,0,0,0.25) 0 1px 2px; box-shadow: inset rgba(0,0,0,0.25) 0 1px 2px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .m-carousel-bulleted a:hover, .m-carousel-bulleted a:focus { text-decoration: none; background-color: rgba(255,255,255,0.6); } .m-carousel-bulleted a.m-active { background-color: rgba(255,255,255,1); -webkit-box-shadow: rgba(0,0,0,0.25) 0 1px 2px; -moz-box-shadow: rgba(0,0,0,0.25) 0 1px 2px; box-shadow: rgba(0,0,0,0.25) 0 1px 2px; } /* Carousel controls: Pagination */ .m-carousel-pagination { padding-top: 10px; } .m-carousel-pagination a { text-decoration: none; display: inline-block; padding: 3px 10px; margin: 1px 0; color: #333; background-color: rgba(255,255,255,0.3); -webkit-transition: background-color 0.1s ease-in; -moz-transition: background-color 0.1s ease-in; -o-transition: background-color 0.1s ease-in; transition: background-color 0.1s ease-in; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .m-carousel-pagination a:hover, .m-carousel-pagination a:focus { text-decoration: none; background-color: rgba(255,255,255,0.6); } .m-carousel-pagination a.m-active { background-color: rgba(255,255,255,1); } /* Carousel controls: HUD */ .m-carousel-hud { padding-top: 0; } .m-carousel-hud a { z-index: 2; opacity: 0; display: block; position: absolute; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 0; padding: 0; text-decoration: none; text-indent: -999px; overflow: hidden; color: rgba(255, 255, 255, 0.8); background: rgba(0, 0, 0, 0.8); -webkit-transition: opacity 0.1s ease-in; -moz-transition: opacity 0.1s ease-in; -o-transition: opacity 0.1s ease-in; transition: opacity 0.1s ease-in; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; } .m-carousel:hover .m-carousel-hud a { opacity: 0.3; } .m-carousel .m-carousel-hud a:hover, .m-carousel .m-carousel-hud a:focus { opacity: 1; } .m-carousel-hud a:after { color: rgba(255,255,255,0.85); content: "\25c0"; font-size: 25px; font-weight: bold; text-indent: 0; text-align: center; display: block; position: absolute; top: 10px; left: 0; width: 47px; height: 50px; z-index: 9; } .m-carousel-hud .m-carousel-prev { left: 10px; } .m-carousel-hud .m-carousel-next { right: 10px; } .m-carousel-hud .m-carousel-next:after { left: auto; right: 0; content: "\25b6"; } /* extra bits */ /* captions */ .m-caption { margin: 0; padding: 10px; height: auto; text-align: center; } /* scaled slides */ .m-scaled .m-item { opacity: 0.7; -webkit-backface-visibility: hidden; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); /* Configure animations */ /* (0.5s would match the transition length between each, but fast swiping on a phone can result in odd timing. Half-length durations for each transform is a reasonable middle ground.) */ -webkit-transition: -webkit-transform cubic-bezier(0.33, 0.66, 0.66, 1) 0.25s, opacity ease-out 0.25s; -moz-transition-timing-function: -moz-transform cubic-bezier(0.33, 0.66, 0.66, 1) 0.25s, opacity ease-out 0.25s; -o-transition-timing-function: -o-transform cubic-bezier(0.33, 0.66, 0.66, 1) 0.25s, opacity ease-out 0.25s; transition-timing-function: transform cubic-bezier(0.33, 0.66, 0.66, 1) 0.25s, opacity ease-out 0.25s; } .m-scaled .m-active { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* Default Themes/Sytles for Slider */ .m-fluid .m-item { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-right: 20px; /*background: rgba(0, 0, 0, 0.25);*/ } /* Fluid Width Photo Carousel * .m-carousel.m-fluid.m-carousel-photos */ .m-carousel-photos { /*margin: 0 -10px;*/ /*padding: 0 10px;*/ } .m-carousel-photos .m-item > img { margin: 0 auto; display: block; padding: 0; cursor: pointer; /*max-width: none;*/ max-width: 80%; height: auto; max-height: 80%; } .m-carousel-photos .m-caption { background: rgba(0,0,0,0.7); bottom: 0; position: absolute; z-index: 9; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Inner Cards for Carousel */ .m-card-dark, .m-card-light { padding: 20px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(0,0,0,0.5) 0 5px 10px; -moz-box-shadow: rgba(0,0,0,0.5) 0 5px 10px; -o-box-shadow: rgba(0,0,0,0.5) 0 5px 10px; -ms-box-shadow: rgba(0,0,0,0.5) 0 5px 10px; box-shadow: rgba(0,0,0,0.5) 0 5px 10px; } .m-card-dark { background: rgba(0,0,0,0.5); color: #FFF; } .m-card-light { background: rgba(255,255,255,0.9); color: #000; } .m-card-dark .m-caption, .m-card-light .m-caption { margin: 0; padding: 10px 0 0 0; } .m-fade-out { -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%); } #mobile-close-button{ cursor: pointer; display: block; width: 62px; height: 62px; position: fixed; bottom: 20px; right: 20px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozMDExREQ0NDE0QjYxMUUzQURDQUZBNzNGQzNCMTM0QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozMDExREQ0NTE0QjYxMUUzQURDQUZBNzNGQzNCMTM0QyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjMwMTFERDQyMTRCNjExRTNBRENBRkE3M0ZDM0IxMzRDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjMwMTFERDQzMTRCNjExRTNBRENBRkE3M0ZDM0IxMzRDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+eZ6mhAAAAXNJREFUeNrs109Kw0AUBvDJ0KWIG2svIG5s1l2LeADP0YXLSlIMNFRP4wGkB3CddFHwAk3cSOtevzdtaZCqYfoSX2QefCGFmfTH/CPxkiRRqFPkAblEDpWMWiATZIC8tHA5Q56RIyWraMCukQukp3EZC0QWi2xjvZ5u6XWlBa3Jn+pAq4aUgzqogzrof4O+5nktffaCZvO5uun31TRNS/ehttSH+tYGPel01O0wVPejUSkstaG2gzA0fWud+vOuXwpbRHZ9/282029YLiTLrv8Oy4mk8vAp8sFxfEzTBLAY6KH5zYlkhW6wcRSZ++AuYkNWcOB72zuP98ktvtFcrUkaSUKulkFo1rCYEf26cbYbLDbLQQR0gyRYcU1yYzUXctcUc2J1VUhurBU0z7JSyF1Y25cS63OUXtmO2+3K++w99TZ/aIt0nyIO6qAO6qA80EUDnO8EnTQA+kTQAHkTjCRbQNAZ0kMekaUg4HJtItvsU4ABAHgqvWwLNLTGAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position: center; background-color: #000; z-index: 19991; } #mobile-gallery{ position: fixed; top: 0; left: 0; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); /*max-height: 95%;*/ z-index: 9001; } .m-item > img{ /*max-width: 80%;*/ } .no-scroll{ overflow: hidden; } #fancybox-xtdLightbox-effects { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; -webkit-perspective-origin:center; -moz-perspective-origin:center; position: absolute; z-index: 9999; top:0; } @-webkit-keyframes xtdLightbox-effect-13 { from { opacity: 0;} to { opacity: 1;} } @-webkit-keyframes xtdLightbox-effect-1 { from { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0;} to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1;} } /* xtdLightbox-effect 15: 3D Rotate in from left */ @-webkit-keyframes xtdLightbox-effect-2 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg); transform: translateZ(100px) translateX(-30%) rotateY(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } to { -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg); -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg); -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg); transform: translateZ(0px) translateX(0%) rotateY(0deg); opacity: 1; } } /* xtdLightbox-effect 14: 3D Rotate from bottom */ @-webkit-keyframes xtdLightbox-effect-3 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateY(100%) rotateX(90deg); -moz-transform: translateY(100%) rotateX(90deg); -ms-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; } to { -webkit-transform: translateY(0%) rotateX(0deg); -moz-transform: translateY(0%) rotateX(0deg); -ms-transform: translateY(0%) rotateX(0deg); transform: translateY(0%) rotateX(0deg); opacity: 1; } } @-webkit-keyframes xtdLightbox-effect-4 { from { -webkit-transform: translateX(20%); -moz-transform: translateX(20%); -ms-transform: translateX(20%); transform: translateX(20%); opacity: 0; -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); } to { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-webkit-keyframes xtdLightbox-effect-5 { from { -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } to { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes xtdLightbox-effect-6 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-70deg); -moz-transform: rotateY(-70deg); -ms-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; } to { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } } @-webkit-keyframes xtdLightbox-effect-7 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-70deg); -moz-transform: rotateX(-70deg); -ms-transform: rotateX(-70deg); transform: rotateX(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; } to { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } } @-webkit-keyframes xtdLightbox-effect-8 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-60deg); -moz-transform: rotateX(-60deg); -ms-transform: rotateX(-60deg); transform: rotateX(-60deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } to { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } } @-webkit-keyframes xtdLightbox-effect-9 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate(30%) translateZ(600px) rotate(10deg); -moz-transform: translate(30%) translateZ(600px) rotate(10deg); -ms-transform: translate(30%) translateZ(600px) rotate(10deg); transform: translate(30%) translateZ(600px) rotate(10deg); opacity: 0; } to { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: translate(0%) translateZ(0) rotate(0deg); -moz-transform: translate(0%) translateZ(0) rotate(0deg); -ms-transform: translate(0%) translateZ(0) rotate(0deg); transform: translate(0%) translateZ(0) rotate(0deg); opacity: 1; } } @-webkit-keyframes xtdLightbox-effect-10 { from { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes xtdLightbox-effect-11 { from { -webkit-transform: scale(0) rotate(720deg); -moz-transform: scale(0) rotate(720deg); -ms-transform: scale(0) rotate(720deg); transform: scale(0) rotate(720deg); opacity: 0; } to { -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } } @-webkit-keyframes xtdLightbox-effect-12 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(600px) rotateX(20deg); -moz-transform: translateZ(600px) rotateX(20deg); -ms-transform: translateZ(600px) rotateX(20deg); transform: translateZ(600px) rotateX(20deg); opacity: 0; } to { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: translateZ(0px) rotateX(0deg); -moz-transform: translateZ(0px) rotateX(0deg); -ms-transform: translateZ(0px) rotateX(0deg); transform: translateZ(0px) rotateX(0deg); opacity: 1; } } @-moz-keyframes xtdLightbox-effect-13 { from { opacity: 0;} to { opacity: 1;} } @-moz-keyframes xtdLightbox-effect-1 { from { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0;} to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1;} } /* xtdLightbox-effect 15: 3D Rotate in from left */ @-moz-keyframes xtdLightbox-effect-2 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg); transform: translateZ(100px) translateX(-30%) rotateY(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; } to { -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg); -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg); -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg); transform: translateZ(0px) translateX(0%) rotateY(0deg); opacity: 1; } } /* xtdLightbox-effect 14: 3D Rotate from bottom */ @-moz-keyframes xtdLightbox-effect-3 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateY(100%) rotateX(90deg); -moz-transform: translateY(100%) rotateX(90deg); -ms-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; } to { -webkit-transform: translateY(0%) rotateX(0deg); -moz-transform: translateY(0%) rotateX(0deg); -ms-transform: translateY(0%) rotateX(0deg); transform: translateY(0%) rotateX(0deg); opacity: 1; } } @-moz-keyframes xtdLightbox-effect-4 { from { -webkit-transform: translateX(20%); -moz-transform: translateX(20%); -ms-transform: translateX(20%); transform: translateX(20%); opacity: 0; -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); } to { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-moz-keyframes xtdLightbox-effect-5 { from { -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } to { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-moz-keyframes xtdLightbox-effect-6 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-70deg); -moz-transform: rotateY(-70deg); -ms-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; } to { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } } @-moz-keyframes xtdLightbox-effect-7 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-70deg); -moz-transform: rotateX(-70deg); -ms-transform: rotateX(-70deg); transform: rotateX(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; } to { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } } @-moz-keyframes xtdLightbox-effect-8 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-60deg); -moz-transform: rotateX(-60deg); -ms-transform: rotateX(-60deg); transform: rotateX(-60deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } to { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } } @-moz-keyframes xtdLightbox-effect-9 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate(30%) translateZ(600px) rotate(10deg); -moz-transform: translate(30%) translateZ(600px) rotate(10deg); -ms-transform: translate(30%) translateZ(600px) rotate(10deg); transform: translate(30%) translateZ(600px) rotate(10deg); opacity: 0; } to { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: translate(0%) translateZ(0) rotate(0deg); -moz-transform: translate(0%) translateZ(0) rotate(0deg); -ms-transform: translate(0%) translateZ(0) rotate(0deg); transform: translate(0%) translateZ(0) rotate(0deg); opacity: 1; } } @-moz-keyframes xtdLightbox-effect-10 { from { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } } @-moz-keyframes xtdLightbox-effect-11 { from { -webkit-transform: scale(0) rotate(720deg); -moz-transform: scale(0) rotate(720deg); -ms-transform: scale(0) rotate(720deg); transform: scale(0) rotate(720deg); opacity: 0; } to { -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } } @-moz-keyframes xtdLightbox-effect-12 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(600px) rotateX(20deg); -moz-transform: translateZ(600px) rotateX(20deg); -ms-transform: translateZ(600px) rotateX(20deg); transform: translateZ(600px) rotateX(20deg); opacity: 0; } to { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: translateZ(0px) rotateX(0deg); -moz-transform: translateZ(0px) rotateX(0deg); -ms-transform: translateZ(0px) rotateX(0deg); transform: translateZ(0px) rotateX(0deg); opacity: 1; } } @-ms-keyframes xtdLightbox-effect-13 { from { opacity: 0;} to { opacity: 1;} } @-ms-keyframes xtdLightbox-effect-1 { from { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0;} to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1;} } /* xtdLightbox-effect 15: 3D Rotate in from left */ @-ms-keyframes xtdLightbox-effect-2 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg); transform: translateZ(100px) translateX(-30%) rotateY(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; } to { -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg); -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg); -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg); transform: translateZ(0px) translateX(0%) rotateY(0deg); opacity: 1; } } /* xtdLightbox-effect 14: 3D Rotate from bottom */ @-ms-keyframes xtdLightbox-effect-3 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateY(100%) rotateX(90deg); -moz-transform: translateY(100%) rotateX(90deg); -ms-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; } to { -webkit-transform: translateY(0%) rotateX(0deg); -moz-transform: translateY(0%) rotateX(0deg); -ms-transform: translateY(0%) rotateX(0deg); transform: translateY(0%) rotateX(0deg); opacity: 1; } } @-ms-keyframes xtdLightbox-effect-4 { from { -webkit-transform: translateX(20%); -moz-transform: translateX(20%); -ms-transform: translateX(20%); transform: translateX(20%); opacity: 0; -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); } to { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-ms-keyframes xtdLightbox-effect-5 { from { -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } to { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-ms-keyframes xtdLightbox-effect-6 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-70deg); -moz-transform: rotateY(-70deg); -ms-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; } to { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } } @-ms-keyframes xtdLightbox-effect-7 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-70deg); -moz-transform: rotateX(-70deg); -ms-transform: rotateX(-70deg); transform: rotateX(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0; } to { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } } @-ms-keyframes xtdLightbox-effect-8 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-60deg); -moz-transform: rotateX(-60deg); -ms-transform: rotateX(-60deg); transform: rotateX(-60deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } to { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } } @-ms-keyframes xtdLightbox-effect-9 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate(30%) translateZ(600px) rotate(10deg); -moz-transform: translate(30%) translateZ(600px) rotate(10deg); -ms-transform: translate(30%) translateZ(600px) rotate(10deg); transform: translate(30%) translateZ(600px) rotate(10deg); opacity: 0; } to { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: translate(0%) translateZ(0) rotate(0deg); -moz-transform: translate(0%) translateZ(0) rotate(0deg); -ms-transform: translate(0%) translateZ(0) rotate(0deg); transform: translate(0%) translateZ(0) rotate(0deg); opacity: 1; } } @-ms-keyframes xtdLightbox-effect-10 { from { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } } @-ms-keyframes xtdLightbox-effect-11 { from { -webkit-transform: scale(0) rotate(720deg); -moz-transform: scale(0) rotate(720deg); -ms-transform: scale(0) rotate(720deg); transform: scale(0) rotate(720deg); opacity: 0; } to { -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } } @-ms-keyframes xtdLightbox-effect-12 { from { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(600px) rotateX(20deg); -moz-transform: translateZ(600px) rotateX(20deg); -ms-transform: translateZ(600px) rotateX(20deg); transform: translateZ(600px) rotateX(20deg); opacity: 0; } to { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-transform: translateZ(0px) rotateX(0deg); -moz-transform: translateZ(0px) rotateX(0deg); -ms-transform: translateZ(0px) rotateX(0deg); transform: translateZ(0px) rotateX(0deg); opacity: 1; } }