/** * Swiper 11.0.5 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2023 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 22, 2023 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} @charset "UTF-8"; /***************************/ /***************************/ /********** STYLE **********/ /***************************/ /***************************/ * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } html { font-size:100%; } html, input, textarea, select, button { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-size-adjust:100%; } h1, h2, h3, h4, h5, h6, ul, ol, p, a, span, b, strong, blockquote, label, div, table, input, textarea, button, select { margin:0; padding:0; font-weight:normal; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { text-transform:uppercase; } p { font-size:inherit; line-height:inherit; color:inherit; text-shadow:inherit; } b, strong, del, i, em { font-weight:normal; font-size:inherit; line-height:inherit; } /********** HR **********/ hr { width:100%; border:0; border-bottom:solid .0625rem rgb(255,255,255); } hr.blank { border:0 !important; } /********** LIST + INLINE **********/ .list > * { display:block; } .inline { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; } .inline > * { display:inline-block; vertical-align:middle; } /********** IFRAME **********/ .iframe-container { display:block; width:100%; } iframe { max-width:100%; border:none; } /********** SVG **********/ svg { display:block; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; backface-visibility:hidden; } /********** IMG **********/ figure { display:block; height:auto; max-width:100%; margin:0; border:0; } img { display:block; height:auto; width:100%; /*max-width:100%;*/ margin:0 auto; border:0; } .img-responsive { max-width:none; width:100%; } /********** @MEDIA **********/ @media screen and (max-device-width:320px) { body { -webkit-text-size-adjust:none; } } /* body.onload { opacity:0; } */ body.onload main { opacity:0; } /****************************/ /****************************/ /********** CUSTOM **********/ /****************************/ /****************************/ .hidden { position:absolute; font-size:0 !important; padding:0 !important; } .disabled { opacity:.5; pointer-events:none; } .centered { text-align:center; } .is-last { margin-left:auto !important; } .copyright { font-size:.625rem; text-transform:none; } /********** GENERIC / CASTING **********/ .generic + *, .casting + * { clear:both; } .generic, .casting { display:-webkit-inline-box; display:-webkit-inline-flex; display:-moz-inline-box; display:-ms-inline-flexbox; display:inline-flex; font-size:.75rem; color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgba(29,29,30,.9); padding:1rem; text-transform:uppercase; margin-top:0; } .generic > *, .casting > * { display:inline-block; margin:0; } .generic > * + *, .casting > * + * { margin-left:.625rem; } /********** FOCUS **********/ .focus .infos { z-index:10; margin:0; font-size:.875rem; padding:1.25rem; color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(29,29,30); } .focus .infos > *{ font-size:inherit; background:none; padding:0; } .focus .infos > * + * { margin-top:.25rem; } .focus .infos > h2 { font-size:1rem; } .focus .infos > h2 + *{ margin-top:.5rem; } /********** LOGOS **********/ .logo { max-width:10rem; } /********************************/ /********************************/ /********** SHORTCODES **********/ /********************************/ /********************************/ .transport-container .columns > li > * + * { margin-top:1em; } .transport-container .columns > li > * + h3 { margin-top:2em; } .transport { display:inline-block; font-weight:700; text-align:center; height:2em; width:2em; padding:.5em; } .transport.bus { padding:.25em 1em; height:1.5em; width:3em; -webkit-border-radius:.25em; -moz-border-radius:.25em; border-radius:.25em; } .transport.metro, .transport.rer { -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; } .google-map-container { position:relative; display:block; height:0; padding:50% 0 0 0; width:100%; } .google-map-container iframe { position:absolute; z-index:10; top:0; left:0; height:100%; width:100%; border:0; -webkit-filter:grayscale(1); filter:grayscale(1); } /******************************/ /******************************/ /********** ARTICLES **********/ /******************************/ /******************************/ /********** AVATAR **********/ .avatar { position:relative; display:block; height:0; width:100%; padding:0; padding-top:100%; background:rgb(255,255,255); } .avatar:before { content:""; font-family:'icomoon'; position:absolute; z-index:1; 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%); } .avatar:after { content:""; position:absolute; z-index:0; top:0; right:0; bottom:0; left:0; background:rgb(29,29,30); opacity:.25; } .avatar img { position:absolute; z-index:10; top:0; left:0; height:100%; width:100%; margin:0; object-fit:cover; } .avatar .empty { position:relative; display:block; height:0; width:100%; padding:0; padding-top:100%; } /********** AUTHORS **********/ .grid.authors .item .more-link { height:0; padding-top:100%; } .author { font-size:.75rem; background:rgb(255,255,255); } .author.short { max-width:10rem; } .author .title { color:rgb(29,29,30); font-size:inherit; text-shadow:none; background:none; padding:0; padding:1rem; margin:0; } /*****************************************/ /*****************************************/ /********** MOVIE PROGRAMMATION **********/ /*****************************************/ /*****************************************/ /********** PROGRAMMATION TITLE **********/ .programmation-title { display:-webkit-inline-box; display:-webkit-inline-flex; display:-moz-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; padding:1rem; color:rgb(29,29,30); text-shadow:none; background:rgb(255,255,255); text-transform: uppercase; } .programmation-title:before { content:""; display:inline-block; vertical-align:middle; height:.5em; width:.5em; margin-right:.5em; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; } .programmation-title.R:before { background:rgb(224,0,26); } .programmation-title.B:before { background:rgb(0,147,206); } .programmation-title + * { margin-top:0; } /********** MOVIE-TIMETABLE **********/ .movie-timetable { display:-webkit-inline-box; display:-webkit-inline-flex; display:-moz-inline-box; display:-ms-inline-flexbox; display:inline-flex; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-pack:start; -webkit-justify-content:flex-start; -moz-box-pack:start; -ms-flex-pack:start; justify-content:flex-start; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; } .movie-timetable .day { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:start; -webkit-align-items:flex-start; -moz-box-align:start; -ms-flex-align:start; align-items:flex-start; margin:0; padding:1rem; color:rgba(29,29,30,.66); text-shadow:none; background:rgb(255,255,255); } .movie-timetable .day.active { color:rgb(29,29,30); text-shadow:none; } .movie-timetable .day-title { font-size:inherit; white-space:nowrap; margin-bottom:.5rem; } .movie-timetable ul { display:-webkit-inline-box; display:-webkit-inline-flex; display:-moz-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; margin-top:0; margin:-.25rem; } .movie-timetable ul > * { display:block; margin:.25rem; } /********** IN TOOLTIP **********/ .tooltip .titles + .movie-programmation { padding-top:1.25rem; margin-top:1.25rem; border-top:solid .0625rem; } .tooltip .programmation-title { color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:none; padding:0; } .tooltip .movie-timetable { margin-left:-1rem; margin-right:-1rem; } .tooltip .movie-timetable .day { color:rgba(255,255,255,.66); text-shadow:none; background:none; } .tooltip .movie-timetable .day.active { color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); } .tooltip .movie-timetable + * { margin-top:1rem; } /********** @MEDIA **********/ @media (min-width:0px) { .movie-timetable { font-size:.75rem; } .movie-timetable .day { -webkit-flex-basis:-webkit-calc(100% / 4); -ms-flex-preferred-size:calc(100% / 4); flex-basis:-moz-calc(100% / 4); flex-basis:calc(100% / 4); } /* in tooltip */ .tooltip .movie-timetable .day { -webkit-flex-basis:auto; -ms-flex-preferred-size:auto; flex-basis:auto; } } @media (min-width:1000px) { .movie-timetable { font-size:.875rem; } .movie-timetable .day { -webkit-flex-basis:-webkit-calc(100% / 7); -ms-flex-preferred-size:calc(100% / 7); flex-basis:-moz-calc(100% / 7); flex-basis:calc(100% / 7); } } /****************************/ /****************************/ /********** TITLES **********/ /****************************/ /****************************/ /* .title .titles .titles-link */ /********** TITLE **********/ .title { display:inline-block; color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(29,29,30); border:0; } .title + .title, .title + br + .title { margin-top:0; } /********** TITLES **********/ .titles { position:relative; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:start; -webkit-align-items:flex-start; -moz-box-align:start; -ms-flex-align:start; align-items:flex-start; } .titles > * { display:inline-block; text-transform:uppercase; padding:1.25rem; color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(29,29,30); } .titles > * + * { margin-top:0; } /********** MOVIE **********/ .titles .movie-title { font-size:1.25em; } .titles .director { font-size:1em; } /********** IN TOOLTIP **********/ .tooltip .titles > * + * { margin-top:.25rem; } /********** TITLES-LINK **********/ .titles .titles-link { margin:0; } .titles .buttons.titles-link { width:auto; background:none; padding:0; } .titles .buttons.titles-link a { margin:0; } /********** COLORS **********/ .title.R, .titles.R > * { background:rgb(224,0,26); } .title.B, .titles.B > * { background:rgb(0,147,206); } /********** @MEDIA **********/ @media (min-width:0px) { .title, .titles > * { padding:1.25rem; } } @media (min-width:1000px) { .title, .titles > * { padding:1.25rem; } } /*********************************/ /*********************************/ /********** VIDEOPLAYER **********/ /*********************************/ /*********************************/ /* .videoplayer == default .videoplayer.youtube == for youtube video .videoplayer.vimeo == for vimeo video /!\ not tested yet .videoplayer video == html5 player /!\ not working yet > data-background == for background image / if none youtube default > id == video id .videoplayer-container == for overlay max-width 1024px */ /********** VIDEOPLAYER **********/ .videoplayer { position:relative; -webkit-background-size:cover !important; -moz-background-size:cover !important; -o-background-size:cover !important; background-size:cover !important; background-position:center center !important; min-height:2rem; width:100%; padding:56.25% 0 0 0 !important; background:rgb(4,4,15); } .videoplayer iframe { position:absolute; top:0; left:0; width:100%; height:100%; } /********** VIDEOPLAYER-CONTAINER **********/ .videoplayer-container { display:block; max-width:64rem; margin-right:auto; margin-left:auto; } /********** if async videoplayer **********/ .videoplayer.youtube, .videoplayer.vimeo { cursor:pointer; } .videoplayer.youtube:before, .videoplayer.vimeo:before { display:none; } .videoplayer.loaded { display:block; padding:0 !important; } .videoplayer.link { padding:56.25% 0 0 0; } .videoplayer .play { position:absolute; z-index:30; top:50%; left:50%; display:block; font-family:'icomoon'; text-shadow:0 0 0.125rem rgb(29,29,30); -webkit-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%) translateY(-50%); -o-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); } .videoplayer .play:hover { -webkit-transform:translateX(-50%) translateY(-50%) scale(.8); -moz-transform:translateX(-50%) translateY(-50%) scale(.8); -ms-transform:translateX(-50%) translateY(-50%) scale(.8); -o-transform:translateX(-50%) translateY(-50%) scale(.8); transform:translateX(-50%) translateY(-50%) scale(.8); } .videoplayer .play:before { display:block; font-family:"icomoon"; color:inherit; font-size:inherit; line-height:inherit; } /********** HTML5 VIDEO **********/ video { display:block; height:auto; width:100%; } .videoplayer.chrome video::-internal-media-controls-download-button { display:none; } .videoplayer.chrome video::-webkit-media-controls-enclosure { overflow:hidden; } .videoplayer.chrome video::-webkit-media-controls-panel { width:-webkit-calc(100% + 32px); width:calc(100% + 32px); margin-left:auto; } /********** DEFAULT / MOVIE **********/ .videoplayer-container { background:rgb(255,255,255); position:relative; display:block; width:100%; } .videoplayer-container:before { content:""; font-family:'icomoon'; position:absolute; z-index:1; 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%); } .videoplayer-container:after { content:""; position:absolute; z-index:0; top:0; right:0; bottom:0; left:0; background:rgb(29,29,30); opacity:.25; } .videoplayer-container > * { position:relative; z-index:10; display:block; height:auto; width:100%; margin:0; } /********** VIDEO BACKGROUND **********/ video.background { position:fixed; z-index:-1; top:50%; left:50%; min-height:100%; min-width:100%; height:auto; width:auto; -webkit-background-size:cover !important; -moz-background-size:cover !important; -o-background-size:cover !important; background-size:cover !important; background-repeat:no-repeat !important; background-position:center left !important; -webkit-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); -o-transform:translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); } /********** @MEDIA **********/ @media (min-width:0px) { .videoplayer-container { padding:.5rem; } .videoplayer-container:after { margin:.5rem; } .videoplayer .play { font-size:1rem; line-height:1rem; } } @media (min-width:1000px) { .videoplayer-container { padding:.625rem; } .videoplayer-container:after { margin:.625rem; } .videoplayer .play { font-size:1.5rem; line-height:1.5rem; } } /**************************************/ /********** GLOBAL > VIDEOJS **********/ /**************************************/ /* OUT ? */ .video-js iframe { float:left; height:394px; width:700px; padding:10px; } .video-js { min-height:394px; width:700px; padding:10px; margin-top:20px; background:rgb(255,255,255); background:rgba(255,255,255,.9); } .video-js { position: relative; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-js:-moz-full-screen { position: absolute; } body.vjs-full-window { padding: 0; margin: 0; height: 100%; overflow-y: auto; } .video-js.vjs-fullscreen { position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important; position: absolute; } .video-js:-webkit-full-screen { width: 100% !important; height: 100% !important; } .video-js.vjs-fullscreen.vjs-user-inactive { cursor: none; } .vjs-poster { background-repeat: no-repeat; background-position: 50% 50%; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; cursor: pointer; height: 100%; margin: 0; padding: 0; position: relative; width: 100%; } .vjs-poster img { display: block; margin: 0 auto; max-height: 100%; padding: 0; width: 100%; } .video-js.vjs-using-native-controls .vjs-poster { display: none; } .video-js .vjs-text-track-display { text-align: center; position: absolute; bottom: 4em; left: 1em; right: 1em; } .video-js .vjs-text-track { display: none; font-size: 1.4em; text-align: center; margin-bottom: 0.1em; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } .video-js .vjs-subtitles { color: #ffffff; } .video-js .vjs-captions { color: #ffcc66; } .vjs-tt-cue { display: block; } .vjs-default-skin .vjs-hidden { display: none; } .vjs-lock-showing { display: block !important; opacity: 1; visibility: visible; } /*******************************/ /*******************************/ /********** IMG / SVG **********/ /*******************************/ /*******************************/ /********** IMG **********/ img.full { display:block; height:auto; width:100%; margin:0 auto; } /********** IMG WITHIN TEXT **********/ .alignleft { float:left; margin:0 1rem 0 0; } .alignright { float:right; margin:0 0 0 1rem; } .aligncenter { display:block; } .alignleft:after, .alignright:after, .aligncenter:after { content:""; display:block; clear:both; } /********** SVG **********/ figure > svg { display:block; width:100%; margin:0 auto; } /********** BACKGROUND **********/ .background-container { position:absolute; z-index:-1; top:0; left:-100%; right:-100%; height:100%; width:auto; overflow:hidden; padding:0 !important; margin:0 !important; } .background { position:absolute; z-index:-1; top:0; left:0; height:100%; width:100%; margin:0 !important; padding:0 !important; max-width:none; -webkit-background-size:cover !important; -moz-background-size:cover !important; -o-background-size:cover !important; background-size:cover !important; background-repeat:no-repeat !important; background-position:center center !important; pointer-events: none; } .background.contain { -webkit-background-size:contain !important; -moz-background-size:contain !important; -o-background-size:contain !important; background-size:contain !important; background-position:left !important; } .bg-top-left { background-position:top left !important; } .bg-top-center { background-position:top center !important; } .bg-top-right { background-position:top right !important; } .bg-center-left { background-position:center left !important; } .bg-center-right { background-position:center right !important; } .bg-bottom-left { background-position:bottom left !important; } .bg-bottom-center { background-position:bottom center !important; } .bg-bottom-right { background-position:bottom right !important; } /*****************************/ /*****************************/ /********** POSTERS **********/ /*****************************/ /*****************************/ /* default ratio = 160 x 120 px / 4:3 */ /********** DEFAULT / MOVIE **********/ .poster { position:relative; display:block; width:100%; background:rgb(255,255,255); } .poster:before { content:""; font-family:'icomoon'; position:absolute; z-index:1; 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%); } .poster:after { content:""; position:absolute; z-index:0; top:0; right:0; bottom:0; left:0; background:rgb(29,29,30); opacity:.25; } .poster img { position:relative; z-index:10; display:block; height:auto; width:100%; margin:0; } .poster .empty { position:relative; display:block; height:0; width:100%; padding:0; padding-top:-webkit-calc((160 / 120) * 100%); padding-top:-moz-calc((160 / 120) * 100%); padding-top:calc((160 / 120) * 100%); } /********** INFOS **********/ .poster .infos { position:absolute; z-index:100; top:0; left:0; margin:1rem; } /********** EVENT **********/ /* event ratio = 640 x 320 px / 2:1 */ /* .grid.events .poster, .poster.event { padding:0; } .grid.events .poster:after, .poster.event:after { margin:0; } .grid.events .poster .empty, .poster.event .empty { padding-top:-webkit-calc((320 / 640) * 100%); padding-top:-moz-calc((320 / 640) * 100%); padding-top:calc((320 / 640) * 100%); } */ .grid.events .poster, .poster.event { padding:0; height:0; padding-top:50%; } .grid.events .poster > *, .poster.event > * { position:absolute; top:0; left:0; height:100%; width:100%; -o-object-fit:cover; object-fit:cover; } .grid.events .poster:after, .poster.event:after { margin:0; } .grid.events .poster .empty, .poster.event .empty { padding-top:50%; } /********** @MEDIA **********/ @media (min-width:0px) { .poster { padding:.5rem; } .poster:after { margin:.5rem; } } @media (min-width:760px) { .poster { padding:.625rem; } .poster:after { margin:.625rem; } } /********************************/ /********************************/ /********** RESPONSIVE **********/ /********************************/ /********************************/ /********** @MEDIA **********/ @media (min-width:1000px) { .only-mobile { visibility:hidden; display:none !important; } } @media (max-width:1000px) { .only-desktop { visibility:hidden; display:none !important; } } /********** ONLY FOR SPECIFIC DEVICES **********/ body:not(.mobile) .for-mobile, body.mobile .for-desktop { visibility:hidden; display:none !important; } /*****************************/ /*****************************/ /********** COLUMNS **********/ /*****************************/ /*****************************/ /* default : 1 | 1 | 1 ... .columns.reversed .columns.centered .columns.has-gutter .columns > .has-gutter */ .columns { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-moz-flex; display:-webkit-flex; display:flex; } .columns > * { list-style-type:none; padding:0; } .columns.centered > * { text-align:center; } /********** @MEDIA **********/ @media (min-width:0px) { .columns { -webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; -webkit-box-orient:vertical; -webkit-box-direction:normal; flex-direction:column; margin:-1rem; } .columns > * { margin:1rem; } .columns.has-gutter > *:not(:last-child) { border-bottom:solid .0625rem; padding-bottom:1rem; margin-bottom:0; } .columns.reversed { -webkit-flex-direction:column-reverse; -moz-flex-direction:column-reverse; -ms-flex-direction:column-reverse; -webkit-box-orient:vertical; -webkit-box-direction:reverse; flex-direction:column-reverse; } } @media (min-width:760px) { .columns { -webkit-flex-direction:row; -moz-flex-direction:row; -ms-flex-direction:row; -webkit-box-orient:horizontal; -webkit-box-direction:normal; flex-direction:row; margin:-2rem; } .columns > * { -webkit-box-flex:1; -webkit-flex-grow:1; -moz-box-flex:1; -ms-flex-positive:1; flex-grow:1; -webkit-flex-basis:0; -ms-flex-preferred-size:0; flex-basis:0; /* same width */ margin:2rem; } .columns.has-gutter > *:not(:last-child) { border-right:solid .0625rem; padding-right:2rem; margin-right:0; border-bottom:none; padding-bottom:0; margin-bottom:2rem; } .columns > *.has-gutter { border-left:solid .0625rem; padding-left:2rem; } .columns.reversed { -webkit-flex-direction:row-reverse; -moz-flex-direction:row-reverse; -ms-flex-direction:row-reverse; -webkit-box-orient:horizontal; -webkit-box-direction:reverse; flex-direction:row-reverse; } } /********************************/ /********************************/ /********** COLUMNIZER **********/ /********************************/ /********************************/ /* data-columns= 2 / 3 / 4 2 == default */ .columnizer * + * { padding:0; margin:1rem 0 0 0; } .columnizer p + p { padding:0; margin:0 0 1rem 0; } .columnizer p:not(:last-child) { margin-bottom:1rem; } .columnizer .break { -webkit-column-break-before:always; -moz-column-break-before:always; break-before:always; padding-top:0; } /********** @MEDIA **********/ @media (min-width:760px) { .columnizer { -webkit-column-count:2; -moz-column-count:2; -ms-column-count:2; column-count:2; -webkit-column-gap:2rem; -moz-column-gap:2rem; -ms-column-gap:2rem; column-gap:2rem; } } @media (min-width:1000px) { .columnizer[data-columns="3"] { -webkit-column-count:3; -moz-column-count:3; -ms-column-count:3; column-count:3; } .columnizer[data-columns="4"] { -webkit-column-count:4; -moz-column-count:4; -ms-column-count:4; column-count:4; } } /*****************************/ /*****************************/ /********** UL / OL **********/ /*****************************/ /*****************************/ ul, ol { list-style-position:inside; } li { list-style-type: disc; } /********** OL **********/ ol { margin:0; list-style-type:none; } ol li { position:relative; display:block; counter-increment:step-counter; padding:.5rem 0 .5rem 2.5rem !important; } ol li:before { position:absolute; z-index:10; top:50%; left:0; content:counter(step-counter); display:inline-block; text-align:center; color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(62,79,97); font-size:.75rem; line-height:.75rem; height:.75rem; width:.75rem; padding:.5rem; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; } /********** BULLET LIST **********/ .bullet li, .columns .bullet li { position:relative; display:block; width:auto !important; padding:.25rem 0 .25rem 1.25rem; } .bullet li:before, .columns .bullet li:before { position:absolute; top:50%; color:rgb(201,228,71); background:rgb(201,228,71); margin:-.25rem 0 0 -1.25rem; content:""; display:block; height:.5rem; width:.5rem; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; } /*****************************/ /*****************************/ /********** ANCHORS **********/ /*****************************/ /*****************************/ /* default inline buttons / button .more-link */ /********** DEFAULT INLINE **********/ a { position:relative; font-size:inherit; line-height:inherit; color:inherit; outline:0; text-decoration:none; } p a { border-bottom:solid .0625rem; } p a:hover { color:rgb(233,242,147); text-shadow:none; } /********** WITH ICONS **********/ a [class^="icon-"] + span, a [class*=" icon-"] + span { margin:0 0 0 .5rem; } a span { display:inline-block; font-family:inherit; font-size:inherit; line-height:inherit; color:inherit; text-shadow:inherit; } /********** WITH LABELS **********/ a .label, button .label { position:absolute !important; font-size:0 !important; font-weight:inherit; } /********** MORE-LINK **********/ .more-link { position:absolute; z-index:10; top:0; left:0; height:100%; width:100%; font-size:0; line-height:0; margin:0; } /********** BUTTONS **********/ .buttons { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; width:-webkit-calc(100% + 1rem); width:-moz-calc(100% + 1rem); width:calc(100% + 1rem); margin:-.5rem; } .buttons > * { text-align:center; margin:.5rem; } /********** DEFAULT **********/ .buttons > *, .button { position:relative; display:inline-block; text-transform:uppercase; padding:1rem; color:rgb(29,29,30); text-shadow:none; background:rgb(255,255,255); border:0; } .buttons a.active, .button.active, .buttons a:hover, .button:hover { color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(29,29,30); } .buttons a.active, .button.active { pointer-events:none; } /********** MIN **********/ .buttons.min a { margin:0; } /********** @MEDIA **********/ @media (min-width:0px) { .buttons > a, .button { font-size:.75rem; line-height:.75rem; padding:.75rem; } } @media (min-width:760px) { .buttons > a, .button { font-size:.75rem; line-height:.75rem; padding:.75rem; } } /********** BEHAVIOURS **********/ :focus { outline-color:transparent; outline-style:none; } /* ::-moz-selection { background:rgb(255,255,153); } ::selection { background:rgb(255,255,153); } */ /*******************************/ /*******************************/ /********** STRUCTURE **********/ /*******************************/ /*******************************/ html, body { margin:0; padding:0; border:0; height:100%; width:100%; } /* body { -webkit-overflow-scrolling:touch; overflow-x:hidden; color:rgb(29,29,30); text-shadow:none; background:rgb(197,198,199); background: -moz-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(197,198,199,1) 100%); background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(197,198,199,1) 100%); background: -o-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(197,198,199,1) 100%); background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(197,198,199,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#c5c6c7",GradientType=1); } */ body:not(.wp-admin) { -webkit-overflow-scrolling:touch; overflow-x:hidden; color:rgb(29,29,30); text-shadow:none; background:rgb(197,198,199); background: -moz-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(197,198,199,1) 100%); background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(197,198,199,1) 100%); background: -o-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(197,198,199,1) 100%); background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(197,198,199,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#c5c6c7",GradientType=1); } #wrapper { position:relative; min-height:100%; } header, footer { position:-webkit-sticky; position:sticky; z-index:1100; width:100%; } header { top:0; } footer { bottom:0; } main { position:relative; display:block; width:-webkit-calc(100% - 2.5rem); width:-moz-calc(100% - 2.5rem); width:calc(100% - 2.5rem); max-width:70rem; margin:0 auto; margin-bottom:7.5rem; color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); -webkit-align-self:center; -ms-flex-item-align:center; -ms-grid-row-align:center; align-self:center; margin:0 1.25rem; } main[data-color='rgb(255,255,255)'] { color:rgb(29,20,30); text-shadow:none; } main[data-tint="dark"] { color:rgb(29,29,30); text-shadow:0 0 0 rgb(29,29,30); } main > *:not(nav) { margin:0 auto; } section { position:relative; display:block; width:100%; padding:1.25rem; min-height:100%; } /********** FOOTER AT BOTTOM **********/ html, body { height:100%; } #wrapper { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; } #wrapper main { -webkit-box-flex:1; -webkit-flex-grow:1; -moz-box-flex:1; -ms-flex-positive:1; flex-grow:1; } /****************************/ /****************************/ /********** HEADER **********/ /****************************/ /****************************/ header { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:start; -webkit-align-items:flex-start; -moz-box-align:start; -ms-flex-align:start; align-items:flex-start; padding:0; } header:after { content:""; position:absolute; z-index:-1; top:0; left:0; height:100%; width:100%; background:rgba(255,255,255,.9); opacity:0; } /********** HEADER INDEX **********/ header .index { display:inline-block; } header .index svg { height:100%; } header .index svg .text { fill:rgb(29,29,30); } header .heading { position:relative; z-index:100; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between; -moz-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; width:100%; margin:0; background:rgb(255,255,255); } /********** @MEDIA **********/ @media (min-width:0px) { header .index { height:1.5rem; margin:1.25rem 0; } header .index.alt { height:.5rem; margin:1.25rem 1rem 1.25rem auto; } header .heading { padding:0 1.25rem; } } @media (min-width:360px) { header .index { height:2rem; } header .index.alt { height:.75rem; } } @media (min-width:1000px) { header .heading { padding:0; } header .index { margin:1.25rem; } header .index.alt { margin:1.25rem 1.25rem 1.25rem auto; } } @media (min-width:1200px) { header .index { height:2.5rem; } header .index.alt { height:1rem; } } /****************************/ /****************************/ /********** FOOTER **********/ /****************************/ /****************************/ /********** TODAY **********/ #today { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; margin:0; font-size:.75rem; text-transform:uppercase; white-space:nowrap; } #today #day { display:block; } #today #time { margin-left:.5em; } /********** @MEDIA **********/ @media (min-width:1000px) { body #today { padding:0 1.25rem; } footer .buttons.min a .label { position:relative !important; font-size:.75rem !important; line-height:.75rem; } } /******************************/ /******************************/ /********** GRAPHICS **********/ /******************************/ /******************************/ /********** SILOUHETTES **********/ .audrey, .marilyn { position:fixed; z-index:-2; top:50%; left:0; position:absolute; height:80vh; height:80%; max-width:20rem; -webkit-transform:translate(-80%,-50%); -moz-transform:translate(-80%,-50%); -ms-transform:translate(-80%,-50%); -o-transform:translate(-80%,-50%); transform:translate(-80%,-50%); } .audrey svg, .marilyn svg { position:relative; display:block; height:100%; width:100%; } .audrey svg { fill:rgb(0,147,206); } .marilyn svg { fill:rgb(224,0,26); } /********** SHAPE **********/ .shapeSVG { position:absolute !important; z-index:-1; top:50% !important; left:50% !important; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); height:100%; width:100%; overflow:visible !important; } .shapeSVG path, .shapeSVG polygon { height:100%; width:100%; } /********** @MEDIA **********/ /* shapeSVG add to width = #shape margin + border */ @media (min-width:0px) { body #shape { margin:2.5rem 1.25rem !important; } .frame { border:solid .625rem rgb(29,29,30); } .shapeSVG { height:-webkit-calc(100% + 1.25rem); height:-moz-calc(100% + 1.25rem); height:calc(100% + 1.25rem); width:-webkit-calc(100% + 1.25rem); width:-moz-calc(100% + 1.25rem); width:calc(100% + 1.25rem); } } @media (min-width:760px) { body #shape { margin:5rem 1.25rem !important; } .frame { border:solid 1.25rem rgb(29,29,30); } .shapeSVG { height:-webkit-calc(100% + 2.5rem); height:-moz-calc(100% + 2.5rem); height:calc(100% + 2.5rem); width:-webkit-calc(100% + 2.5rem); width:-moz-calc(100% + 2.5rem); width:calc(100% + 2.5rem); } } /******************************/ /******************************/ /********** SPLITTED **********/ /******************************/ /******************************/ /* .splitted .splitted.has-gutter .splitted.vertical-centered .splitted.selection-guest (specific to single-selection.php) */ .splitted { width:100%; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -webkit-justify-content:center; -moz-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:start; -webkit-align-items:flex-start; -moz-box-align:start; -ms-flex-align:start; align-items:flex-start; } /********** SPLITTED VERTICAL-CENTERED **********/ /* in single-institution */ .splitted.vertical-centered { -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; } /********** SPLITTED IMAGE **********/ /* in content */ .splitted .image { max-width:23rem; } /********** @MEDIA **********/ @media (min-width:0px) { .splitted { -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; } .splitted > * { margin:0; width:100%; } .splitted > :last-child { margin:1rem 0 0 0; } /* has-gutter */ .splitted.has-gutter > :last-child { border-top:solid .0625rem; margin-top:1rem; } } @media (min-width:760px) { .splitted { -webkit-box-orient:horizontal; -webkit-box-direction:normal; -webkit-flex-direction:row; -moz-box-orient:horizontal; -moz-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .splitted.reversed { -webkit-box-orient:horizontal; -webkit-box-direction:reverse; -webkit-flex-direction:row-reverse; -moz-box-orient:horizontal; -moz-box-direction:reverse; -ms-flex-direction:row-reverse; flex-direction:row-reverse; } .splitted > :first-child { width:60%; margin:0 1rem 0 0; } .splitted > :last-child { width:40%; margin:0 0 0 1rem; } .splitted.reversed > :first-child { margin:0 0 0 1rem; } .splitted.reversed > :last-child { margin:0 1rem 0 0; } .splitted.inverted > :first-child { width:40%; } .splitted.inverted > :last-child { width:60%; } .splitted.large > :first-child { width:80%; } .splitted.large > :last-child { width:20%; } .splitted.inverted.large > :first-child { width:20%; } .splitted.inverted.large > :last-child { width:80%; } .splitted.in-half > :first-child, .splitted.in-half > :last-child { width:50%; } /* has-gutter */ .splitted.has-gutter > :last-child { border-top:none; border-left:solid .0625rem; margin-top:0; } } /*********************************/ /*********************************/ /********** COLLAPSIBLE **********/ /*********************************/ /*********************************/ /* .collapsible .collapsible-toggle */ /********** DEFAULT **********/ .collapsible { display:block; visibility:hidden; overflow:hidden; max-height:0; opacity:0; margin:0 !important; } .collapsible.active { visibility:visible; overflow:visible; max-height:100rem; opacity:1; } /********** COLLAPSIBLE-TOGGLE **********/ .collapsible-toggle { color:inherit; text-shadow:inherit; font-size:.625em; padding:.625em; } .collapsible-toggle.button { background:none; border:solid .125rem; } /********** @MEDIA **********/ @media (min-width:0px) { .collapsible + .collapsible-toggle { margin-top:1rem; } } @charset "UTF-8"; /* ICONS */ input { position:relative; } .input-container { width:100%; } /* icon on input-container */ .input-container[class^="icon-"]:before, .input-container[class*=" icon-"]:before { font-family:"icomoon"; position:absolute; z-index:10; top:50%; left:0; font-size:.75rem; line-height:.75rem; padding:1rem; color:rgb(31,31,40); text-shadow:none; opacity:.5; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); } .input-container[class^="icon-"] input, .input-container[class*=" icon-"] input { padding-left:2.75rem !important; } .overlay:not(.blue) input, .overlay:not(.blue) textarea, .overlay:not(.blue) button, .overlay:not(.blue) select { background:rgb(241,246,250); } .overlay:not(.blue) input[type=submit], .overlay:not(.blue) button { color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(187,98,79); } .overlay:not(.blue) input[type=submit]:hover, .overlay:not(.blue) button:hover { color:rgb(187,98,79); text-shadow:none; background:rgb(241,246,250); } /**************************/ /**************************/ /********** FORM **********/ /**************************/ /**************************/ fieldset { border:none; margin:0; padding:0; } form { text-align:left; margin-left:auto; margin-right:auto; } form.full { max-width:none; width:100%; } input { position:relative; } input, textarea, button, select { display:inline-block; vertical-align:middle; font-size:.875rem; line-height:1rem; border:0; color:rgb(62,79,97); text-shadow:none; background:rgb(255,255,255); } textarea { width:100%; resize:none; min-height:6rem; padding:1rem !important; } input[type=hidden] { position:absolute; font-size:0 !important; padding:0 !important; } form input, form textarea, form button, form select, input.full, textarea.full, button.full, select.full { width:100%; } select, input[type=submit], button { cursor:pointer; } /********** BROWSERS **********/ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } ::-webkit-input-placeholder { color:inherit; opacity:.5; } :-moz-placeholder { color:inherit; opacity:.5; } ::-moz-placeholder { color:inherit; opacity:.5; } :-ms-input-placeholder { color:inherit; opacity:.5; } input, textarea, button { -webkit-appearance:none; -moz-appearance:none; } /********** CHROME AUTOFILL **********/ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active { -webkit-text-fill-color:rgb(62,79,97) !important; -webkit-box-shadow: 0 0 0px 1000px white inset; background-color: transparent; } /********** COLORS **********/ /* cf. colors.css */ .modal input, .modal textarea, .modal button, .modal select { background:rgb(241,246,250); } /********** @MEDIA **********/ @media (min-width:0px) { input, textarea, button, select { padding:1rem !important; } } /**************************************/ /**************************************/ /********** CHECKBOX / RADIO **********/ /**************************************/ /**************************************/ input[type="radio"], input[type="checkbox"] { cursor:pointer; } input[type="checkbox"] { width:auto; padding:.5rem !important; } input[type="radio"] { width:auto; padding:.5rem !important; border:solid .125rem rgb(255,255,255); -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; } input[type="radio"]:checked { background:rgb(125,159,195); } input[type="checkbox"] + label, input[type="radio"] + label { vertical-align:middle; padding:0; margin:0 0 0 1em; } /********** RADIOS **********/ ul.radios.inline { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; margin:-1rem; } * + ul.radios.inline { margin-top:0; } ul.radios > li { display:block; } ul.radios.inline > li + li { margin:0 0 0 .5rem; } ul.radios.inline.centered { -webkit-box-pack:center; -webkit-justify-content:center; -moz-box-pack:center; -ms-flex-pack:center; justify-content:center; } /********** RADIO **********/ .radio-container { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; } ul.radios > li > * + .collapsible.active { margin:.5rem 0; } /***************************/ /***************************/ /********** LABEL **********/ /***************************/ /***************************/ label { display:inline-block; } /****************************/ /****************************/ /********** INPUTS **********/ /****************************/ /****************************/ .inputs { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; } .inputs > * { display:inline-block; vertical-align:middle; margin:0; padding:0; } /*************************************/ /*************************************/ /********** SUBMIT / BUTTON **********/ /*************************************/ /*************************************/ /* button == default cf. .button.alias button.button == cf. .button default */ input[type=submit], button { color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); border:none; background:rgb(187,98,79); } input[type=submit]:hover, button:hover { color:rgb(187,98,79); text-shadow:0 0 0 rgb(187,98,79); border:none; background:rgb(255,255,255); } /********** BUTTON **********/ input[type=submit].button, button.button { position:relative; display:inline-block; display:block; width:auto; margin-left:auto; margin-right:auto; font-size:.75rem; line-height:.75rem; padding:.75rem !important; } input[type=submit].button:hover, button.button:hover { color:rgb(187,98,79); text-shadow:none; } /********** CHECK **********/ /* cf. login */ button.check { font-size:0; margin:0 0 0 1rem; padding:0 !important; } button.check:before { font-family:'icomoon'; display:inline-block; font-size:1rem; line-height:1rem; } /********** LOGIN-CONNECT **********/ /* cf. login */ .buttons.login-connect .icon-facebook, .buttons.login-connect .icon-google { padding:0; } .buttons.login-connect .icon-facebook:before, .buttons.login-connect .icon-google:before { margin:1rem; } .buttons.login-connect .icon-facebook { color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(59,89,152); } .buttons.login-connect .icon-google { color:rgb(21,21,30); text-shadow:none; background:rgb(255,255,255); } .buttons.login-connect .icon-facebook:hover, .buttons.login-connect .icon-google:hover { color:rgb(21,21,30); text-shadow:none; background:rgb(238,238,238) !important; } /********** COLORS **********/ /* cf. colors.css */ .modal input[type=submit], .modal button { color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); border:none; background:rgb(187,98,79); } .modal input[type=submit]:hover, .modal button:hover { color:rgb(187,98,79); text-shadow:0 0 0 rgb(187,98,79); border:none; background:rgb(241,246,250); } /********** @MEDIA **********/ @media (min-width:0px) { button.check { height:3rem; width:3rem !important; } button.check:before { padding:1rem; } } /*************************************/ /*************************************/ /********** INPUT CONTAINER **********/ /*************************************/ /*************************************/ .input-container { position:relative; display:inline-block; width:100%; padding:0; font-size:0; line-height:0; letter-spacing:0; } .input-container input { margin:0; width:100%; padding:.5rem 2.5rem .5rem 1rem; } .input-container button { position:absolute; top:50%; right:0; font-size:.875rem; line-height:.875rem; height:100%; padding:.5rem 0; text-align:center; margin:0; border:0; color:rgb(65,65,65); text-shadow:none; background:none; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .input-container button [class^="icon-"], .input-container button [class*=" icon-"] { display:block; } .input-container .infobutton { position:absolute; z-index:10; top:50%; right:.5rem; margin:-.75rem 0 0 0; } /********** ICONS **********/ /* icon on input-container */ .input-container[class^="icon-"]:before, .input-container[class*=" icon-"]:before { font-family:"icomoon"; position:absolute; z-index:10; top:50%; left:0; font-size:.75rem; line-height:.75rem; padding:1rem; color:rgb(31,31,40); text-shadow:none; opacity:.5; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .input-container[class^="icon-"] input, .input-container[class*=" icon-"] input { padding-left:2.75rem !important; } /********** EDITABLE **********/ .input-container.editable { background:none !important; } .input-container.editable:before { content:""; position:absolute; top:0; left:0; height:100%; width:100%; border:solid .0625rem rgb(255,255,255); } .editable .edit:before { font-family:'icomoon'; } /********** HAS-BUTTON **********/ .input-container.has-button { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; background:rgb(255,255,255); } .input-container.has-button input { background:none; } .input-container.has-button input[type=submit], .input-container.has-button button { position:relative; top:auto; display:block; height:auto; width:auto; font-size:.75rem; line-height:.75rem; white-space:nowrap; padding:.75rem !important; margin:.5rem; color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(217,46,65); -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none; } .input-container.has-button input[type=submit]:hover, .input-container.has-button button:hover { color:rgb(217,46,65); text-shadow:0 0 0 rgb(217,46,65); background:rgb(255,255,255); } /********** @MEDIA **********/ @media (min-width:0px) { .input-container button { width:3rem; } } @charset "UTF-8"; /***************************/ /***************************/ /********** ICONS **********/ /***************************/ /***************************/ @font-face { font-family:'icomoon'; src:url(/v3/content/themes/filmo_3-2/assets/css/../fonts/icomoon.eot); src:url(/v3/content/themes/filmo_3-2/assets/css/../fonts/icomoon.eot#iefix) format('embedded-opentype'), url(/v3/content/themes/filmo_3-2/assets/css/../fonts/icomoon.woff) format('woff'), url(/v3/content/themes/filmo_3-2/assets/css/../fonts/icomoon.ttf) format('truetype'), url(/v3/content/themes/filmo_3-2/assets/css/../fonts/icomoon.svg#fontello) format('svg'); font-weight:normal; font-style:normal; } /********** ICONS **********/ .icon-allocine:before { content: "\e900"; } .icon-blank:before { content: "\e901"; } .icon-calendar:before { content: "\e902"; } .icon-check:before { content: "\e903"; } .icon-clock:before { content: "\e904"; } .icon-close:before { content: "\e905"; } .icon-comment:before { content: "\e906"; } .icon-down:before { content: "\e907"; } .icon-download:before { content: "\e908"; } .icon-exit:before { content: "\e909"; } .icon-expand:before { content: "\e90a"; } .icon-facebook:before { content: "\e90b"; } .icon-favorite:before { content: "\e90c"; } .icon-file:before { content: "\e90d"; } .icon-filmo:before { content: "\e90e"; } .icon-instagram:before { content: "\e90f"; } .icon-left:before { content: "\e910"; } .icon-less:before { content: "\e911"; } .icon-location:before { content: "\e912"; } .icon-lock:before { content: "\e913"; } .icon-mail:before { content: "\e914"; } .icon-more:before { content: "\e915"; } .icon-notification:before { content: "\e916"; } .icon-parameters:before { content: "\e917"; } .icon-pause:before { content: "\e918"; } .icon-phone:before { content: "\e919"; } .icon-play:before { content: "\e91a"; } .icon-refresh:before { content: "\e91b"; } .icon-right:before { content: "\e91c"; } .icon-search:before { content: "\e91d"; } .icon-share:before { content: "\e91e"; } .icon-twitter:before { content: "\e91f"; } .icon-unlock:before { content: "\e920"; } .icon-up:before { content: "\e921"; } .icon-youtube:before { content: "\e922"; } .icon-see:before { content: "\e923"; } /********************************/ /********************************/ /********** ICON CLASS **********/ /********************************/ /********************************/ [class^="icon-"]:before, [class*=" icon-"]:before { font-family:"icomoon"; font-style:normal; font-weight:normal; speak:none; display:inline-block; text-decoration:inherit; text-shadow:none !important; font-variant:normal; text-transform:none; font-size:inherit; line-height:inherit; color:inherit; } button[class^="icon-"]:before, button[class*=" icon-"]:before, a[class^="icon-"]:before, a[class*=" icon-"]:before { margin-right:1em; } .collapsible-toggle { -webkit-box-pack:left; -webkit-justify-content:left; -moz-box-pack:left; -ms-flex-pack:left; justify-content:left; } /* icon-blank */ .coming-soon .session-status.OFF:after, .coming-soon .session.last .session-status:after { content: "\e901"; } /* icon-clock */ .coming-soon .session-status:after, .coming-soon .session-status.ON:after { content: "\e904"; } /* icon-close */ a.reduce:after, a.close:after, a.overlay-close:after, a.tooltip-close:after { content: "\e905"; } /* icon-exit */ .coming-soon .session-status.soon:after { content: "\e909"; } /* icon-filmo */ .slide-bg:before, .poster:before, .avatar:before { content: "\e90e"; } /* icon-see */ .swiper-container .more-link:after, .grid .more-link:after { content: "\e923"; } /* icon-left */ a.back:before, a.previous:before { content: "\e910"; } /* icon-right */ #overlay-introduction .skip.overlay-close:after, a.next:after { content: "\e91c"; } /***************************/ /***************************/ /********** FONTS **********/ /***************************/ /***************************/ /* import == in head usage == font-family: 'Open Sans Condensed', sans-serif; */ /*********************************/ /*********************************/ /********** FONT FAMILY **********/ /*********************************/ /*********************************/ body { font-family: 'Roboto Condensed', sans-serif; font-weight:300; } /* #today #time { font-weight:100; } */ .coming-soon .session-soon span, .coming-soon .session-time, .grid.programmation .films a span, .grid.programmation .tooltip span { font-weight:700; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .titles > *, #primary a, #secondary a, #today #day, #cinema a, b, strong, #front .infos > * { font-weight:700; } .buttons > *, .button { font-weight:700; } /*******************************/ /*******************************/ /********** FONT SIZE **********/ /*******************************/ /*******************************/ body { letter-spacing:.025em; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height:1em; } small { font-size:.75em; } /********** @MEDIA **********/ @media (min-width:0px) { body { font-size:.875rem; } h1, h1 { font-size:1rem; } h2, h2 { font-size:.875rem; } h3, h4, h5, h6, .h3, .h4, .h5, .h6 { font-size:.75rem; } .excerpt { font-size:inherit; } } @media (min-width:760px) { body { font-size:1rem; } h1, .h1 { font-size:1.25rem; } h2, .h2 { font-size:1rem; } h3, h4, h5, h6, .h3, .h4, .h5, .h6 { font-size:.875rem; } } /*************************************/ /*************************************/ /********** CONTENT SPACING **********/ /*************************************/ /*************************************/ /********** DEFAULT **********/ h1.hidden + *:not(.grid), h2.hidden + *:not(.grid) { margin:0; } /********** FORM **********/ label.hidden + * { margin:0; padding:0; } * + label.hidden { position:relative; } /********** @MEDIA **********/ /* some are in others .css => ex. * + .grid */ @media (min-width:0px) { /* default style */ h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *, .titles + *, .title + *, .excerpt + * { margin-top:1rem; } ul > li + li, ol > li + li { margin-top:.25rem; } p + *, pre + *, blockquote + *, hr + *, ul + *, ol + *, figure + *, img + *, svg + * { margin-top:1rem; } /* custom style */ .movie-programmation + *, * + .movie-programmation, .grid-wrapper + *, * + .grid-wrapper, .grid + *, * + .grid, .swiper-container + *, .columns + *, .columnizer + *, .videoplayer + *, nav + *, .buttons + *, .button + *, * + .buttons, * + hr, * + .videoplayer, * + .button { margin-top:1rem; } * + .blocks-gallery-grid, * + .wp-block-gallery, * + .collapsible.active { margin-top:1rem !important; } /* default form */ form + *, label + *, input + *, select + *, button + *, textarea + *, * + label, * + input, * + select, * + button, * + textarea { margin-top:1rem; } /* custom form */ .radios + *, .inputs + *, .input-container + *, .select-container + * { margin-top:1rem; } * + .forms-builder-group, * + .input-container, * + .select-container { margin-top:1rem; } } @media (min-width:1000px) { /* default style */ h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *, .titles + *, .title + *, .excerpt + * { margin-top:2rem; } * + h1, * + h2, * + h3, * + h4, * + h5, * + h6, * + .titles, * + .title { margin-top:3rem; } /* custom style */ .movie-programmation + *, * + .movie-programmation, .grid-wrapper + *, * + .grid-wrapper, .grid + *, .swiper-container + *, .columns + *, nav + *, .videoplayer + *, .buttons + *, .button + * { margin-top:2rem; } * + hr, * + .grid, * + .videoplayer, * + .button { margin-top:2rem; } } @charset "UTF-8"; /* section section.full section.focus section.has-aside section.splitted (== has-aside ???) section.collapsible */ /* body.onload header { opacity: 0; transform: translate3d(0,-100%,0); } */ /*****************************/ /*****************************/ /********** CONTENT **********/ /*****************************/ /*****************************/ #content > section { padding:0; } /********** @MEDIA **********/ @media (min-width:0px) { #content { padding:1rem; margin-top:-1.25rem; } #content > h1:not(.hidden), #content > .titles:not(.hidden) { margin-top:1.25rem; } #content > section { padding-top:1.25rem; } } @media (min-width:1000px) { #content { padding:2rem; margin-top:-2rem; } #content > h1:not(.hidden), #content > .titles:not(.hidden) { margin-top:2rem; } #content > section { padding-top:2rem; } } @media (min-width:1200px) { #content { padding:4rem; margin-top:-4rem; } #content > h1:not(.hidden), #content > .titles:not(.hidden) { margin-top:4rem; } #content > section { padding-top:4rem; } } /*****************************/ /*****************************/ /********** SECTION **********/ /*****************************/ /*****************************/ section { position:relative; clear:both; margin:0 auto; -webkit-background-size:cover !important; -moz-background-size:cover !important; -o-background-size:cover !important; background-size:cover !important; background-position:center center !important; max-width:1200px; } section > * { z-index:1; } /********** MAIN SECTION **********/ main section:first-child, main section:not(.focus):first-child + section.focus { margin-top:0 !important; } /********** SECTION FULL **********/ section.full { padding:0 !important; max-width:none; } section.full > section { padding-left:0; padding-right:0; } section.full > section:first-child { padding-top:0; } section.full > section:last-child { padding-bottom:0; } /********** SECTION HAS-BACKGROUND **********/ section.is-background { height:0; padding-top:-webkit-calc(100% / 3) !important; padding-top:-moz-calc(100% / 3) !important; padding-top:calc(100% / 3) !important; } /********** SECTION SHORT **********/ section.short { padding:1rem 0; } /********** SECTION BLOCK **********/ section.block { overflow:hidden; } section.short.block { padding:1rem; } /********** @MEDIA **********/ @media (min-width:0px) { section { padding:1rem; } } @media (min-width:1000px) { section { padding:2rem; } } @media (min-width:1200px) { section { padding:4rem; } } /***********************************/ /***********************************/ /********** SECTION FOCUS **********/ /***********************************/ /***********************************/ /* section.focus img ratio == 1920 x 768 px == 100% / 40% img ratio == 1600 x 575 px == 100% / 35.9375% */ /********** FOCUS CONTENT **********/ section.focus .infos { -webkit-align-self:center; -ms-flex-item-align:center; -ms-grid-row-align:center; align-self:center; } section.focus .splitted + .background { opacity:.25; } /********** @MEDIA **********/ @media (min-width:0px) { /* default */ section.focus:before { padding:75% 0 0 0; } /* focus infos */ section.focus .infos { width:100%; padding:1rem; } section.focus .title { font-size:1.5rem; line-height:1.5rem; } /* front */ section.focus.front .infos > a + a { margin:.5rem 0 0 0; } } @media (min-width:760px) { /* default */ section.focus:before { padding:30% 0 0 0; } section.focus .infos > a + a { margin:2rem 0 0 0; } /* focus infos */ section.focus .infos { width:auto; padding:2rem; } /* front */ section.focus.front:before { padding:40% 0 0 0; } section.focus.front .infos > a + a { margin:2rem 0 0 0; } } @media (min-width:1200px) { /* focus infos */ section.focus .title { font-size:2.5rem; line-height:2.5rem; } } @media (min-width:1400px) { /* focus infos */ section.focus .infos { padding:4rem; } /* focus.front */ section.focus.front .title { font-size:3rem; line-height:3rem; } section.focus.front .infos { padding:4rem 8rem; } } @charset "UTF-8"; .results-filters, .results-title { position:sticky; top:136px; left:0; } .buttons.list { flex-direction: column; align-items: flex-start; } /**********************************/ /**********************************/ /********** DISTRIBUTION **********/ /**********************************/ /**********************************/ body.distribution #primary, body.distribution #cinema > *:not(#today) { display:none; } /*************************/ /*************************/ /********** NAV **********/ /*************************/ /*************************/ nav a { display:inline-block; } /********** CENTERED **********/ nav.centered { -webkit-box-pack:center; -webkit-justify-content:center; -moz-box-pack:center; -ms-flex-pack:center; justify-content:center; } /********** INLINE **********/ nav.inline { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; width:-webkit-calc(100% + 1rem); width:-moz-calc(100% + 1rem); width:calc(100% + 1rem); margin:-.5rem; } nav.inline > * { margin:.5rem; width:auto; } nav.inline > nav { padding:0; } /********** @MEDIA **********/ @media (min-width:0px) { * + nav.inline { margin-top:-webkit-calc(1rem - .5rem); margin-top:-moz-calc(1rem - .5rem); margin-top:calc(1rem - .5rem); } } @media (min-width:1000px) { * + nav.inline { margin-top:-webkit-calc(2rem - .5rem); margin-top:-moz-calc(2rem - .5rem); margin-top:calc(2rem - .5rem); } } /*****************************/ /*****************************/ /********** PRIMARY **********/ /*****************************/ /*****************************/ /********** DEFAULT **********/ #primary { position:fixed; z-index:1000; top:50%; left:0; padding:1.25rem; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:start; -webkit-align-items:flex-start; -moz-box-align:start; -ms-flex-align:start; align-items:flex-start; text-align:left; overflow:auto; -webkit-overflow-scrolling:touch; } #primary a { position:relative; z-index:10; display:inline-block; white-space:nowrap; text-transform:uppercase; text-align:center; padding:2em; color:rgb(29,29,30); text-shadow:none; background:rgb(255,255,255); } #primary a:after { content:""; position:absolute; z-index:-1; top:0; left:0; height:100%; width:100%; background:transparent; } #primary a.active, #primary a:hover { color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); } #primary a.active:after, #primary a:hover:after { background:rgb(29,29,30); } /********** EXPAND **********/ .primary-expand { position:relative; z-index:1100; display:inline-block; padding:.75rem; margin:0; color:rgb(29,29,30); text-shadow:none; background:rgba(255,255,255,.9); } .primary-expand:hover { position:relative; z-index:1100; display:inline-block; margin:0; color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgba(29,30,30,.9); } .primary-expand .label { position:relative !important; font-size:0; line-height:0; margin:.46875rem auto; } .primary-expand .label:before { margin-top:-.375rem; } .primary-expand .label:after { margin-top:.375rem; } .primary-expand .label:before, .primary-expand .label:after { position: absolute; content:''; } .primary-expand .label, .primary-expand .label:before, .primary-expand .label:after { width:1rem; } .primary-expand .label, .primary-expand .label:before, .primary-expand .label:after { display:block; height:.0625rem; } .primary-expand.expanded .label:before { margin-top:0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); width:1.3525rem; margin-left:-.17625rem; } .primary-expand.expanded .label:after { margin-top:0; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); width:1.3525rem; margin-left:-.17625rem; } .primary-expand .label, .primary-expand .label:before, .primary-expand .label:after { background:rgb(29,29,30); } .primary-expand:hover .label, .primary-expand:hover .label:before, .primary-expand:hover .label:after { background:rgb(255,255,255); } .primary-expand.expanded .label { background:transparent !important; } /********** @MEDIA **********/ @media (min-width:0px) { #primary a { font-size:.75rem; line-height:.75rem; padding:1.25rem; } } @media (min-width:1000px) { #primary { position:relative; top:auto; left:auto; right:auto; bottom:auto; padding:0; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -webkit-flex-direction:row; -moz-box-orient:horizontal; -moz-box-direction:normal; -ms-flex-direction:row; flex-direction:row; overflow:visible; -webkit-box-pack:center; -webkit-justify-content:center; -moz-box-pack:center; -ms-flex-pack:center; justify-content:center; } #primary a { padding:2rem 1.5rem; } /* primary-expand */ .primary-expand { display:none !important; } } @media (min-width:1200px) { #primary a { line-height:1rem; } } @media (min-width:1400px) { #primary a { font-size:.875rem; padding:2rem; } } /*************************/ /*************************/ /********** TOP **********/ /*************************/ /*************************/ /* in footer */ #cinema { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between; -moz-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; width:100%; margin:0; background:rgb(197,198,199); } /* buttons */ #cinema .buttons.min { margin:0 0 0 .5rem; width:auto; gap:.5rem; } #cinema .buttons.min a { color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(29,29,30); margin: 0; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack:center; -webkit-justify-content:center; -moz-box-pack:center; -ms-flex-pack:center; justify-content:center; } #cinema .buttons.min a [class^="icon-"]:before, #cinema .buttons.min a [class*=" icon-"]:before { font-size: 1.5em; line-height: 1em; } #cinema .buttons.min a:hover, #cinema .buttons.min a.active { color:rgb(29,29,30); text-shadow:none; background:rgb(255,255,255); } /********** @MEDIA **********/ @media (min-width:0px) { #cinema { -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; padding:.625rem; } #cinema .coming-soon-container { -webkit-box-flex:1; -webkit-flex-grow:1; -moz-box-flex:1; -ms-flex-positive:1; flex-grow:1; -webkit-flex-basis:100%; -ms-flex-preferred-size:100%; flex-basis:100%; margin:-.125rem; } #cinema > #today { -webkit-box-ordinal-group:3; -webkit-order:2; -moz-box-ordinal-group:3; -ms-flex-order:2; order:2; margin-top:.625rem; } #cinema > .buttons.min { -webkit-box-ordinal-group:4; -webkit-order:3; -moz-box-ordinal-group:4; -ms-flex-order:3; order:3; margin-top:.625rem; } #cinema .buttons.min a { font-size: .75rem; height:2.5rem; width:2.5rem; } #cinema .coming-soon-container { -webkit-box-ordinal-group:2; -webkit-order:1; -moz-box-ordinal-group:2; -ms-flex-order:1; order:1; } body.distribution #cinema > #today { margin-bottom:.625rem; } } @media (min-width:1000px) { #cinema { -webkit-flex-wrap:unset; -ms-flex-wrap:unset; flex-wrap:unset; padding:.5rem; } #cinema .coming-soon-container { -webkit-box-flex:1; -webkit-flex-grow:1; -moz-box-flex:1; -ms-flex-positive:1; flex-grow:1; -webkit-flex-basis:auto; -ms-flex-preferred-size:auto; flex-basis:auto; margin:-.25rem; } #cinema > #today { -webkit-box-ordinal-group:2; -webkit-order:1; -moz-box-ordinal-group:2; -ms-flex-order:1; order:1; margin-top:0; } #cinema > .buttons.min { -webkit-box-ordinal-group:4; -webkit-order:3; -moz-box-ordinal-group:4; -ms-flex-order:3; order:3; margin-top:0; } #cinema .buttons.min a { font-size: .875rem; } #cinema .coming-soon-container { -webkit-box-ordinal-group:3; -webkit-order:2; -moz-box-ordinal-group:3; -ms-flex-order:2; order:2; } #cinema * + .coming-soon-container { margin-top:-.25rem; } body.distribution #cinema > #today { margin-top:.75rem; margin-bottom:.75rem; } } @media (min-width:1200px) { #cinema .buttons.min a { height:auto; width:auto; padding: 0.375rem 0.75rem; } #cinema .buttons.min .label { position:relative !important; font-size: 1em !important; line-height: 1em; padding:.5em; } } /*********************************/ /*********************************/ /********** COMING SOON **********/ /*********************************/ /*********************************/ /********** DEFAULT **********/ /* not fixed if header is sticky */ .coming-soon-container { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; opacity:1; color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); text-transform:uppercase; white-space:nowrap; } /********** SESSION **********/ .coming-soon { position:relative; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-flex:1; -webkit-flex-grow:1; -moz-box-flex:1; -ms-flex-positive:1; flex-grow:1; -webkit-flex-basis:0; -ms-flex-preferred-size:0; flex-basis:0; overflow:hidden; background:rgb(29,29,30); } .coming-soon.red { background:rgb(224,0,26); } .coming-soon.blue { background:rgb(0,147,206); } /********** SESSION **********/ .coming-soon .session { position:relative; display:none; /*height:2.375rem;*/ /* same height as buttons.min */ height: 2.5rem; width:100%; /*padding:1em 1em 1em 3em;*/ padding:.75em 1em .75em 3em; } .coming-soon .session:hover { background:rgb(29,29,30); } .coming-soon .session.active { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-pack:center; -webkit-justify-content:center; -moz-box-pack:center; -ms-flex-pack:center; justify-content:center; } .coming-soon .session-container { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; } .coming-soon .session .title { padding:0; width:100%; background:none; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; margin:0; } .coming-soon .session .session-time { display:-webkit-inline-box; display:-webkit-inline-flex; display:-moz-inline-box; display:-ms-inline-flexbox; display:inline-flex; padding-left:.25em; } .coming-soon .session .session-time > * { display:inline-block; font-weight:inherit; } /********** STATUS **********/ .coming-soon .session-status { position:absolute; z-index:10; top:50%; left:1rem; height:1rem; width:1rem; font-size:1rem; line-height:1rem; margin:0; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } .coming-soon .session-status:after { font-family:'icomoon'; } /********** BUTTON **********/ .coming-soon-container > .button { height:4rem; margin:.25rem; } .coming-soon-container > .button:before { font-size:1.25rem; line-height:1.25rem; text-align:center; padding:.5rem; position:relative; 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%); } /********** @MEDIA **********/ @media (min-width:0px) { .coming-soon { margin:.125rem; } .coming-soon .session .title { font-size:.75rem; } .coming-soon .session.last .title, .coming-soon .session .session-soon, .coming-soon .session .session-time { font-size:.655rem; } .coming-soon .session-status { left:1rem; height:.75rem; width:.75rem; font-size:.75rem; line-height:.75rem; } } @media (min-width:1000px) { .coming-soon-container { position:relative; left:auto; bottom:auto; right:auto; margin:-.25rem; margin-left:auto; } .coming-soon-container + * { margin-left:.5rem; } .coming-soon { margin:.25rem; } .coming-soon .session .title { font-size:.875rem; } .coming-soon .session.last .title, .coming-soon .session .session-soon, .coming-soon .session .session-time { font-size:.75rem; } .coming-soon .session-status { left:1rem; height:1rem; width:1rem; font-size:1rem; line-height:1rem; } } /********************************/ /********************************/ /********** CONTEXTUAL **********/ /********************************/ /********************************/ /* in header = contextual nav for sections in footer = actions for page */ nav.contextual { position:fixed; bottom:0; right:0; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-pack:end; -webkit-justify-content:flex-end; -moz-box-pack:end; -ms-flex-pack:end; justify-content:flex-end; margin:1.25rem; pointer-events:none; } nav.contextual a { pointer-events:auto; margin:0; } nav.contextual a:before { font-family:'icomoon'; } /********** HEADER **********/ header nav.contextual { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:start; -webkit-align-items:flex-start; -moz-box-align:start; -ms-flex-align:start; align-items:flex-start; -webkit-box-pack:center; -webkit-justify-content:center; -moz-box-pack:center; -ms-flex-pack:center; justify-content:center; position:fixed; top:50%; left:0; right:auto; height:100%; width:auto; -webkit-transform:translate(0,-50%); -moz-transform:translate(0,-50%); -ms-transform:translate(0,-50%); -o-transform:translate(0,-50%); transform:translate(0,-50%); } /********** FOOTER **********/ footer nav.contextual { position:fixed; bottom:0; right:0; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-pack:end; -webkit-justify-content:flex-end; -moz-box-pack:end; -ms-flex-pack:end; justify-content:flex-end; } /********** @MEDIA **********/ @media (min-width:0px) { footer nav.contextual { margin:.5rem; } footer nav.contextual a { font-size:.625rem; line-height:.625rem; padding:.625rem; } } @media (min-width:760px) { footer nav.contextual { margin:1.25rem; } footer nav.contextual a { font-size:.75rem; line-height:.75rem; padding:.75rem; } } /******************************/ /******************************/ /********** EXPANDED **********/ /******************************/ /******************************/ /********** @MEDIA **********/ @media (min-width:0px) { body.expanded { overflow:hidden; } body.expanded main { -webkit-filter:blur(.25rem); filter:blur(.25rem); opacity:.25; pointer-events:none; } body.expanded .shapeSVG { opacity:.25; } /* primary */ #primary { -webkit-transform:translate(-100%,-50%); -moz-transform:translate(-100%,-50%); -ms-transform:translate(-100%,-50%); -o-transform:translate(-100%,-50%); transform:translate(-100%,-50%); } body.expanded #primary { -webkit-transform:translate(0,-50%); -moz-transform:translate(0,-50%); -ms-transform:translate(0,-50%); -o-transform:translate(0,-50%); transform:translate(0,-50%); } /* footer */ footer nav.contextual { -webkit-transform:translate(0%,200%); -moz-transform:translate(0%,200%); -ms-transform:translate(0%,200%); -o-transform:translate(0%,200%); transform:translate(0%,200%); } body.expanded footer nav.contextual { -webkit-transform:translate(0,0%); -moz-transform:translate(0,0%); -ms-transform:translate(0,0%); -o-transform:translate(0,0%); transform:translate(0,0%); } } @media (min-width:1000px) { body.expanded { overflow:auto; } body.expanded main { -webkit-filter:none; filter:none; opacity:1; pointer-events:auto; } body.expanded .shapeSVG { opacity:1; } /* primary */ #primary, body.expanded #primary { -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none; } /* footer */ footer nav.contextual, body.expanded footer nav.contextual { -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none; } } /****************************/ /****************************/ /********** SOCIAL **********/ /****************************/ /****************************/ nav.sharebar, nav.socialbar { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-moz-flex; display:-webkit-flex; display:flex; -webkit-box-align:center; -moz-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; white-space:nowrap; } nav.sharebar > *, nav.socialbar > * { display:inline-block; vertical-align:middle; padding:.5rem; } nav.sharebar > a { font-size:0; line-height:0; } nav.sharebar > a:before { font-family:'icomoon'; display:block; font-size:1rem; line-height:1rem; width:1rem; } /********** ICONS **********/ /* cf. fonts.css */ /**************************/ /**************************/ /********** TABS **********/ /**************************/ /**************************/ /* .nav-tabs > span .nav-tabs.large ul.tabs > .tab data-tabs == #tabs */ /********** NAV **********/ .nav-tabs { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; } .nav-tabs a { text-transform:uppercase; white-space:nowrap; /* for user page */ margin:0; } .nav-tabs a > * { opacity:.5; } .nav-tabs a:hover > *, .nav-tabs a.active > * { opacity:1; } /********** TABS **********/ .tabs { display:block; overflow:hidden; } .tabs:after { content:""; display:block; clear:both; } .tabs > * { display:block; float:left; width:100%; margin-left:-9999rem; height:0; opacity:0; } .tabs > .active { margin-left:0; height:100%; opacity:1; } .tabs > li + li { margin:0; } @charset "UTF-8"; /* .grid [default] ==> based on grid movies items .grid.list .grid.movies .grid.events .grid.posts .grid.programmation .grid.collection .grid.table == WIP */ /************************************/ /************************************/ /********** GRID / DEFAULT **********/ /************************************/ /************************************/ .grid { position:relative; } .grid .items, .grid .items .item, .grid .items .item-content { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; } .grid .items { -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; } .grid .item { position:relative; height:auto; /* same height row */ } .grid .item.empty { opacity:.33; } .grid .item.not { opacity:.5; } .grid .item-content { -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; display:block; height:100%; width:100%; margin:0; background:rgb(255,255,255); } /********** GRID ARCHIVE **********/ .grid.archive .item.archived { opacity:.33; } /********** GRID ITEM-CONTENT **********/ .grid .items .item-content img { width:100%; max-width:none; } /********** GRID INFOS **********/ .grid .items .item-content .infos { position:relative; font-size:.75rem; padding:1rem; margin:0; width:100%; color:rgb(29,29,30); text-shadow:none; } .grid .items .item-content .infos > * { font-size:inherit; margin:0; padding:0; } .grid .items .item-content .infos > * + * { margin-top:.25rem; } .grid.events .items .item-content .infos .event-title { font-size:.875rem; } .grid.events .items .item-content .infos .event-title + * { margin-top:.5rem; } /********** GRID MORE LINK **********/ .grid .item .more-link { z-index:20; } .grid .item .more-link:hover { color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgba(29,30,30,.9); } .grid .item .more-link:after { font-family:'icomoon'; position:absolute; 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%); font-size:1rem; line-height:1rem; opacity:0; } .grid .item .more-link:hover:after { opacity:1; } /********************************/ /********************************/ /********** GRID TABLE **********/ /********************************/ /********************************/ .grid.table .items .item { -webkit-box-flex:1; -webkit-flex-grow:1; -moz-box-flex:1; -ms-flex-positive:1; flex-grow:1; } .grid.table .items .item .item-content { padding:1.25rem; } .grid.table .items .item .item-content > * { padding:0; } .grid.table .items .item .item-content figure { max-width:6rem; padding-bottom:1.25rem; } .grid.table .items .item .item-content .infos { text-align:center; } /*************************************/ /*************************************/ /********** GRID COLLECTION **********/ /*************************************/ /*************************************/ .grid.list.collection .items .item { width:100%; } .grid.list.collection .item-content { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -webkit-flex-direction:row; -moz-box-orient:horizontal; -moz-box-direction:normal; -ms-flex-direction:row; flex-direction:row; padding:2.5rem 2.5rem 2.5rem .5rem; } .grid.list.collection .item-content > * { -webkit-box-flex:3; -webkit-flex-grow:3; -moz-box-flex:3; -ms-flex-positive:3; flex-grow:3; -webkit-flex-basis:0; -ms-flex-preferred-size:0; flex-basis:0; -webkit-flex-basis:87.5%; -ms-flex-preferred-size:87.5%; flex-basis:87.5%; } .grid.list.collection .item-content .poster { z-index:10; -webkit-box-flex:1; -webkit-flex-grow:1; -moz-box-flex:1; -ms-flex-positive:1; flex-grow:1; -webkit-flex-basis:12.5%; -ms-flex-preferred-size:12.5%; flex-basis:12.5%; } .grid.list.collection .item-content .titles { padding-bottom:0; margin-bottom:0; border-bottom:none; } .grid.list.collection .tooltip { pointer-events:auto; padding:0; margin-left:.5rem; } /*********************************/ /*********************************/ /********** GRID MOVIES **********/ /*********************************/ /*********************************/ /* poster ratio : 160 x 120 */ .grid.movies { position:static; } .grid.movies .items { margin:-.0625rem; } .grid.movies .item { position:relative; display:inline-block; margin:.0625rem; overflow:visible; } /********** GRID LIST **********/ .grid.movies.list { margin:0; } .grid.movies.list .item { width:100%; } .grid.movies.list .item-content { display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -webkit-flex-direction:row; -moz-box-orient:horizontal; -moz-box-direction:normal; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; } /*********************************/ /*********************************/ /********** GRID EVENTS **********/ /*********************************/ /*********************************/ /* poster ratio : 160 x 120 */ /* .grid.events { position:static; } */ .grid.events .items { margin:-.0625rem; } .grid.events .item { position:relative; display:inline-block; margin:.0625rem; overflow:visible; } /********** GRID LIST EVENTS **********/ .grid.list.events .item .more-link { height:0; padding-top:-webkit-calc((320 / 640) * 100%); padding-top:-moz-calc((320 / 640) * 100%); padding-top:calc((320 / 640) * 100%); } /********** @MEDIA **********/ @media (max-width:640px) { .grid.events.swiperable .items { flex-wrap: nowrap; } } /********************************/ /********************************/ /********** GRID POSTS **********/ /********************************/ /********************************/ /* extension of .grid.events */ .grid.posts .item .poster:after { margin:0; } .grid.posts .item .more-link { height:0; padding-top:-webkit-calc((320 / 640) * 100%); padding-top:-moz-calc((320 / 640) * 100%); padding-top:calc((320 / 640) * 100%); } .grid.posts .item .infos .date { display:block; } /****************************************/ /****************************************/ /********** GRID PROGRAMMATION **********/ /****************************************/ /****************************************/ /********** SEGMENTS **********/ .grid.programmation.R .day .segment { background:rgba(224,0,26,.45); } .grid.programmation.R .day.active .segment { background:rgba(224,0,26,.9); } .grid.programmation.B .day .segment { background:rgba(0,147,206,.45); } .grid.programmation.B .day.active .segment { background:rgba(0,147,206,.9); } /********** TIMELINE **********/ .timeline { position:absolute; top:0; left:0; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; height:100%; width:100%; } .timeline .day, .timeline .hour, .timeline .segment { display:block; margin:0; } .timeline .day { position:relative; height:100%; width:-webkit-calc(100% / 7 - .25rem); width:-moz-calc(100% / 7 - .25rem); width:calc(100% / 7 - .25rem); text-align:center; margin:0 .125rem; } .timeline .day ul, .timeline .hour ul { height:100%; margin:0; } .timeline .hour, .timeline .segment { position:relative; width:100%; } .timeline .hour { height:-webkit-calc(100% / 14); height:-moz-calc(100% / 14); height:calc(100% / 14); } .timeline .segment { height:-webkit-calc(100% / 12); height:-moz-calc(100% / 12); height:calc(100% / 12); } .timeline .hour:before, .timeline .segment:before { content:""; position:absolute; z-index:10; top:0; left:0; height:.0625rem; width:100%; } .timeline .hour:before { background:rgba(255,255,255,.9); } .timeline .hours .hour:before { left:50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); width:50%; background:rgba(29,30,30,.9); } .timeline .segment:before { background:rgba(255,255,255,.5); } .timeline .hours { position:absolute; top:0; left:-2.5%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); display:block; height:100%; } .timeline .hours ul { height:100%; } .timeline .hour h4 { padding-top:.5rem; } .timeline .day-title { position:absolute; z-index:20; top:-2.5%; left:0; width:100%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } /********** FILMS **********/ .grid.programmation .films { position:absolute; z-index:20; top:0; left:0; height:100%; width:100%; margin:0; pointer-events:none; } .grid.programmation .films a { position:absolute; top:0; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-pack:center; -webkit-justify-content:center; -moz-box-pack:center; -ms-flex-pack:center; justify-content:center; width:-webkit-calc(100% / 7 - .25rem); width:-moz-calc(100% / 7 - .25rem); width:calc(100% / 7 - .25rem); padding:.5rem; margin:0 .125rem; text-align:center; color:rgb(29,29,30); background:rgb(255,255,255); pointer-events:auto; } .grid.programmation .films a > * { font-size:inherit; } .grid.programmation .films a.event { color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(29,29,30); } .grid.programmation .films a > * { margin:0; } /********** GRID WRAPPER **********/ /* for scrolling in mobile */ .grid-wrapper { width:100%; overflow-x:auto; } .grid.programmation { position:relative; height:0; width:100%; min-width:59.5rem; /* 952px */ } .grid.programmation .timeline, .grid.programmation .films { margin-left:5%; width:95%; } .grid.programmation .timeline .hours { position:-webkit-sticky; position:sticky; z-index:200; left:0; width:5%; margin-left:-5%; background:rgb(255,255,255); -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none; } .grid.programmation .timeline .hour { text-align:center; } /********** @MEDIA **********/ @media (min-width:0px) { .grid.programmation { padding-top:200%; margin:10% 0 0 0; } .grid.programmation .films a, .timeline .day-title, .timeline .hour h4 { font-size:.625rem; } } @media (min-width:480px) { .grid.programmation { padding-top:150%; margin:7.5% 0 0 0; } } @media (min-width:560px) { .grid.programmation { padding-top:100%; margin:5% 0 0 0; } } @media (min-width:760px) { .grid.programmation .films a, .timeline .day-title, .timeline .hour h4 { font-size:.75rem; } } /*****************************/ /*****************************/ /********** GALLERY **********/ /*****************************/ /*****************************/ .grid.gallery figure { background:rgba(255,255,255,.9); position:relative; display:block; width:100%; } .grid.gallery figure:before { content:""; font-family:'icomoon'; position:absolute; z-index:1; 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%); } .grid.gallery figure:after { content:""; position:absolute; z-index:0; top:0; right:0; bottom:0; left:0; background:rgb(29,29,30); opacity:.25; } .grid.gallery figure img { position:relative; z-index:10; display:block; height:auto; width:100%; margin:0; } /********** @MEDIA **********/ @media (min-width:0px) { .grid.gallery figure { padding:.5rem; } .grid.gallery figure:after { margin:.5rem; } } @media (min-width:760px) { .grid.gallery figure { padding:.625rem; } .grid.gallery figure:after { margin:.625rem; } } /**********************************/ /**********************************/ /********** GRID / SIZES **********/ /**********************************/ /**********************************/ /********** @MEDIA **********/ @media (min-width:0px) { /* default */ .grid .items { margin:-.0625rem; } .grid .items .item { -webkit-box-orient:horizontal; -webkit-box-direction:normal; -webkit-flex-direction:row; -moz-box-orient:horizontal; -moz-box-direction:normal; -ms-flex-direction:row; flex-direction:row; width:100%; margin:.0625rem; } /* movies */ .grid.movies .items .item { width:-webkit-calc(100% / 2 - .125rem); width:-moz-calc(100% / 2 - .125rem); width:calc(100% / 2 - .125rem); } /* gallery */ .grid.gallery .items .item { width:-webkit-calc((100% / 3) - .125rem); width:-moz-calc((100% / 3) - .125rem); width:calc((100% / 3) - .125rem); } } @media (min-width:640px) { /* movies */ .grid.movies .items .item { width:-webkit-calc(100% / 3 - .125rem); width:-moz-calc(100% / 3 - .125rem); width:calc(100% / 3 - .125rem); } /* events */ .grid.events .items .item { width:-webkit-calc(100% / 3 - .125rem); width:-moz-calc(100% / 3 - .125rem); width:calc(100% / 3 - .125rem); } .grid.events.large .items .item { width:-webkit-calc(100% / 2 - .125rem); width:-moz-calc(100% / 2 - .125rem); width:calc(100% / 2 - .125rem); } /* authors / posts */ .grid.authors .items .item { width:-webkit-calc(100% / 5 - .125rem); width:-moz-calc(100% / 5 - .125rem); width:calc(100% / 5 - .125rem); } } @media (min-width:640px) { /* movies */ .grid.movies .items .item { width:-webkit-calc(100% / 4 - .125rem); width:-moz-calc(100% / 4 - .125rem); width:calc(100% / 4 - .125rem); } } @media (min-width:760px) { /* default */ .grid .items .item { width:-webkit-calc(100% / 2 - .125rem); width:-moz-calc(100% / 2 - .125rem); width:calc(100% / 2 - .125rem); } /* movies */ .grid.movies .items .item { width:-webkit-calc(100% / 5 - .125rem); width:-moz-calc(100% / 5 - .125rem); width:calc(100% / 5 - .125rem); } /* events */ .grid.events .items .item { width:-webkit-calc(100% / 3 - .125rem); width:-moz-calc(100% / 3 - .125rem); width:calc(100% / 3 - .125rem); } .grid.events.large .items .item { width:-webkit-calc(100% / 2 - .125rem); width:-moz-calc(100% / 2 - .125rem); width:calc(100% / 2 - .125rem); } /* gallery */ .grid.gallery .items .item { width:-webkit-calc((100% / 5) - .125rem); width:-moz-calc((100% / 5) - .125rem); width:calc((100% / 5) - .125rem); } } @media (min-width:1000px) { /* movies */ .overlay .grid.movies .items .item { width:-webkit-calc(100% / 6 - .125rem); width:-moz-calc(100% / 6 - .125rem); width:calc(100% / 6 - .125rem); } /* events */ .overlay .grid.events .items .item { width:-webkit-calc(100% / 4 - .125rem); width:-moz-calc(100% / 4 - .125rem); width:calc(100% / 4 - .125rem); } /* table */ .grid.table .items .item { width:-webkit-calc(100% / 4 - .125rem); width:-moz-calc(100% / 4 - .125rem); width:calc(100% / 4 - .125rem); } .grid.table .items .item.medium { width:-webkit-calc(100% / 5 - .125rem); width:-moz-calc(100% / 5 - .125rem); width:calc(100% / 5 - .125rem); } .grid.table .items .item.large { width:100%; } } @media (min-width:1200px) { /* movies */ .grid.movies .items .item { width:-webkit-calc(100% / 6 - .125rem); width:-moz-calc(100% / 6 - .125rem); width:calc(100% / 6 - .125rem); } } @charset "UTF-8"; /* .slider == .slider > .slider-container > .slides > .slide > .slide-content .slider.min == slide-content:hover has borders fx .slider.grid == slider with grid behaviour (shared behaviours) .slider nav .slider-pagination == dots .slider-controls == previous + next .slide-bg == for viewer (cf. in gallery overlay) */ /****************************/ /****************************/ /********** GLOBAL **********/ /****************************/ /****************************/ .swiper-container { position:relative; overflow:hidden; } /* for li */ .swiper-slide { display:block; margin:0; } /* from grid to swiper */ .swiper-container.swiperable .swiper-slide.empty { display:none; } /******************************/ /******************************/ /********** ON / OFF **********/ /******************************/ /******************************/ /* JS > if < 2 slides */ .swiper-container.off .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0) !important; -moz-transform: translate3d(0px, 0, 0) !important; transform: translate3d(0px, 0, 0) !important; } .swiper-container.off .swiper-controls, .swiper-container.off + .swiper-controls { display: none; } /********************************/ /********************************/ /********** NAVIGATION **********/ /********************************/ /********************************/ .swiper-controls { position:absolute; z-index:10; top:0; right:0; bottom:0; left:0; margin:0; display:-webkit-inline-box; display:-webkit-inline-flex; display:-moz-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -webkit-justify-content:center; -moz-box-pack:center; -ms-flex-pack:center; justify-content:center; pointer-events:none; } .swiper-controls > * { z-index:100; margin:0; pointer-events:auto; } /*************************************/ /********** NEXT / PREVIOUS **********/ /*************************************/ .swiper-controls .reduce, .swiper-controls .previous, .swiper-controls .next { position:absolute; top:50%; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(29,29,30); font-size:0; line-height:0; pointer-events:auto; } .swiper-controls .reduce:hover, .swiper-controls .previous:hover, .swiper-controls .next:hover { color:rgb(29,29,30); text-shadow:0 0 0 rgb(29,29,30); background:rgb(255,255,255); } .swiper-controls .reduce { top:0; right:0; -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none; } .swiper-controls .previous { left:0; } .swiper-controls .next { right:0; } .swiper-controls .reduce:after, .swiper-controls .previous:before, .swiper-controls .next:after { font-family:'icomoon'; display:block; } .swiper-controls .swiper-button-disabled { opacity:.25; pointer-events:none !important; } /********************************/ /********** PAGINATION **********/ /********************************/ .swiper-pagination { position:relative; bottom:auto !important; display:-webkit-inline-box; display:-webkit-inline-flex; display:-moz-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-pack:center; -webkit-justify-content:center; -moz-box-pack:center; -ms-flex-pack:center; justify-content:center; margin:0 1em; } .swiper-pagination-bullet { height:.5rem; width:.5rem; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; background:rgb(0,0,0); opacity:.25; } .swiper-pagination-bullet-active { background:rgb(0,0,0); opacity:1; } /********** @MEDIA **********/ @media (min-width:0px) { .swiper-controls .reduce, .swiper-controls .previous, .swiper-controls .next { padding:1rem; } .swiper-controls .reduce:after, .swiper-controls .previous:before, .swiper-controls .next:after { font-size:1rem; line-height:1rem; width:1rem; } } @media (min-width:1000px) { .swiper-controls .reduce:after, .swiper-controls .previous:before, .swiper-controls .next:after { font-size:1.5rem; line-height:1.5rem; width:1.5rem; } } /************************************/ /************************************/ /********** FOCUS / EVENTS **********/ /************************************/ /************************************/ /* ratio = 640 x 320 px */ .swiper-container.focus { position:relative; display:block; height:auto; width:100%; } .focus img { width:100%; } /********** POSTER **********/ .swiper-container.events .poster, .swiper-container.focus .poster { position:relative; height:0; padding:50% 0 0 0; overflow:hidden; } .swiper-container.events .poster:after, .swiper-container.focus .poster:after { margin:0; } .swiper-container.events .poster img, .swiper-container.focus .poster img { position:absolute; z-index:10; top:0; left:0; height:100%; width:100%; -o-object-fit:cover; object-fit:cover; } /********** MORE LINK **********/ .swiper-container.events .more-link, .swiper-container.focus .more-link { height:0; padding:50% 0 0 0; } /********** INFOS **********/ .swiper-container.events .swiper-slide .infos { z-index:10; margin:0; font-size:.875rem; padding:1.25rem; color:rgb(29,29,30); text-shadow:none; background:rgb(255,255,255); } .swiper-container.focus .swiper-slide .infos { z-index:10; margin:0; font-size:.875rem; padding:1.25rem; color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(29,29,30); } .swiper-container.events .swiper-slide .infos > *, .swiper-container.focus .swiper-slide .infos > * { font-size:inherit; background:none; padding:0; } .swiper-container.events .swiper-slide .infos > * + *, .swiper-container.events .swiper-slide .titles > * + *, .swiper-container.focus .swiper-slide .infos > * + *, .swiper-container.focus .swiper-slide .titles > * + * { margin-top:.25rem; } .swiper-container.events .swiper-slide .infos > h2, .swiper-container.focus .swiper-slide .infos > h2 { font-size:1rem; } .swiper-container.events .swiper-slide .infos > h2 + *, .swiper-container.events .swiper-slide .titles > h2 + *, .swiper-container.focus .swiper-slide .infos > h2 + *, .swiper-container.focus .swiper-slide .titles > h2 + * { margin-top:.5rem; } .swiper-container.events .swiper-slide .titles > *, .swiper-container.focus .swiper-slide .titles > * { padding:0; color:inherit; text-shadow:inherit; background:none; } /********** SWIPER MORE LINK **********/ .swiper-container .more-link:hover { background:rgba(29,30,30,.9); } .swiper-container .more-link:after { font-family:'icomoon'; position:absolute; 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%); font-size:1rem; line-height:1rem; opacity:0; } .swiper-container .more-link:hover:after { opacity:1; } /********** VIEWER **********/ body.enlarged { overflow:hidden; } body.enlarged main { -webkit-filter:blur(.25rem); filter:blur(.25rem); opacity:.25; pointer-events:none; } .viewer { position:fixed !important; z-index:-1; top:0; right:0; bottom:0; left:0; opacity:0; } .viewer.active { z-index:9999; opacity:1; } .viewer:after { content:""; position:fixed; z-index:-1; top:0; left:0; bottom:0; right:0; background:rgb(255,255,255); opacity:.85; } .viewer .swiper-slide figure { -webkit-background-size:contain !important; -moz-background-size:contain !important; -o-background-size:contain !important; background-size:contain !important; background-repeat:no-repeat !important; background-position:center center !important; } .viewer .swiper-controls { height:100%; margin:0; } /********** @MEDIA **********/ @media (min-width:0px) { .viewer .swiper-slide figure { height:-webkit-calc(100% - 2.5rem); height:-moz-calc(100% - 2.5rem); height:calc(100% - 2.5rem); width:-webkit-calc(100% - 2.5rem); width:-moz-calc(100% - 2.5rem); width:calc(100% - 2.5rem); margin:1.25rem; } } @media (min-width:760px) { .viewer .swiper-slide figure { height:-webkit-calc(100% - 5rem); height:-moz-calc(100% - 5rem); height:calc(100% - 5rem); width:-webkit-calc(100% - 5rem); width:-moz-calc(100% - 5rem); width:calc(100% - 5rem); margin:2.5rem; } } @media (min-width:1200px) { .viewer .swiper-slide figure { height:-webkit-calc(100% - 10rem); height:-moz-calc(100% - 10rem); height:calc(100% - 10rem); width:-webkit-calc(100% - 10rem); width:-moz-calc(100% - 10rem); width:calc(100% - 10rem); margin:5rem; } } @charset "UTF-8"; /* .overlay == full page .overlay.slide == from left / from right / from top / from bottom ??? .overlay.modal == centered box .overlay.bottom == full bottom page overlay-container > overlay-header | overlay-content | overlay-footer */ /******************************/ /******************************/ /********** OVERLAYS **********/ /******************************/ /******************************/ /********** OVERLAY DEFAULT **********/ #overlays { position:relative; z-index:10000; transform:none !important; margin:0 !important; } .overlay { position:fixed; z-index:1000; inset:0; display:block; max-height:100%; width:100%; opacity:0; overflow:hidden; -webkit-overflow-scrolling:touch; pointer-events:none; visibility: hidden; } .overlay.active { opacity:1; cursor:pointer; pointer-events:all; opacity:1; overflow-x:hidden; overflow-y:auto; visibility: visible; } /********** OVERLAY CONTAINER **********/ .overlay .overlay-container { position:relative; z-index:100; min-height:100%; margin:0 auto; pointer-events:none; cursor:auto; display:flex; flex-direction:column; } .overlay.active .overlay-container > * { position:relative; pointer-events:all; } /********** OVERLAYED **********/ body.overlayed { overflow:hidden !important; } body.overlayed main { pointer-events:none; -webkit-filter:blur(.25rem); filter:blur(.25rem); } /********** OVERLAY-CONTENT **********/ .overlay .overlay-content { flex-grow:1; overflow:unset; } .overlay-content.vertical-centered { display:inline-flex; flex-direction:column; justify-content:center; } /****************************************************/ /****************************************************/ /********** OVERLAY POSITIONS / ANIMATIONS **********/ /****************************************************/ /****************************************************/ /* if no position == fading animation */ .overlay.top { transform:translate3d(0,-100%,0); } .overlay.bottom { transform:translate3d(0,100%,0); } .overlay.left { transform:translate3d(-100%,0,0); } .overlay.right { transform:translate3d(100%,0,0); } .overlay.top.active, .overlay.bottom.active, .overlay.left.active, .overlay.right.active { transform:translate3d(0,0,0); } /***********************************/ /***********************************/ /********** OVERLAY SHORT **********/ /***********************************/ /***********************************/ /* not fullscreen top, bottom == full width / min height left, right == min width / full height */ /********** SHORT DEFAULT **********/ .overlay.short.top { bottom:unset; } .overlay.short.right { left:unset; } .overlay.short.bottom { top:unset; } .overlay.short.left { right:unset; } .overlay.short.top .overlay-container, .overlay.short.bottom .overlay-container { min-height:auto; width:auto; } .overlay.short.top .overlay-container { margin:0 auto auto auto; } .overlay.short.bottom .overlay-container { margin:auto auto 0 auto; } .overlay.short.left .overlay-container { margin:auto auto auto 0; } .overlay.short.right .overlay-container { margin:auto 0 auto auto; } /********** @MEDIA **********/ @media (min-width:760px) { .overlay.short.left, .overlay.short.right { /*max-width:var(--overlay-width-short);*/ max-width:30rem; } } /***********************************/ /***********************************/ /********** OVERLAY MODAL **********/ /***********************************/ /***********************************/ /* floating modal box */ .overlay.modal { display:flex; align-items:center; } .overlay.modal.active { pointer-events: none; } .overlay.modal .overlay-container { display:flex; flex-direction:column; margin:auto; min-height:auto; width:auto; max-width:var(--content-maxwidth); pointer-events: all; /*filter:drop-shadow(0 0 .25em rgba(0,0,0,.5));*/ } .overlay.modal.top .overlay-container { margin:calc(var(--gutter-gap) * 2) auto auto auto; } .overlay.modal.bottom .overlay-container { margin:auto auto calc(var(--gutter-gap) * 2) auto; } .overlay.modal.left .overlay-container { margin:auto auto auto calc(var(--gutter-gap) * 2); } .overlay.modal.right .overlay-container { margin:auto calc(var(--gutter-gap) * 2) auto auto; } /********** @MEDIA **********/ /* default / short */ @media (min-width:0px) { .overlay.modal { padding-top:.5rem; padding-bottom:.5rem; } .overlay.modal > .overlay-container { width:-webkit-calc(100% - 1rem); width:-moz-calc(100% - 1rem); width:calc(100% - 1rem); } } @media (min-width:760px) { .overlay.modal { padding-top:4rem; padding-bottom:4rem; } .overlay.modal > .container { width:-webkit-calc(100% - 8rem); width:-moz-calc(100% - 8rem); width:calc(100% - 8rem); } } @media (min-width:1000px) { .overlay.modal { padding-top:8rem; padding-bottom:8rem; } .overlay.modal > .overlay-container { width:-webkit-calc(100% - 16rem); width:-moz-calc(100% - 16rem); width:calc(100% - 16rem); } } /* @media (max-width:760px) { .overlay.modal .overlay-container { width:calc(100% - var(--gutter-gap) * 2); } } @media (min-width:760px) { .overlay.modal.left .overlay-container, .overlay.modal.right .overlay-container { max-width:var(--overlay-width-short); width:var(--overlay-width-short); } .overlay.modal.short .overlay-container { width:auto; min-width:var(--overlay-width-limit); } } */ /************************************/ /************************************/ /********** OVERLAY PUSHED **********/ /************************************/ /************************************/ @media (min-width:760px) { body.overlayed.pushed main { transform: translateX(calc(100% / -3)); } body.overlayed.pushed.left main { transform: translateX(calc(100% / 3)); } } /* .overlay.push { width: 50%; } */ /*******************************************************/ /*******************************************************/ /********** OVERLAY HEADER / CONTENT / FOOTER **********/ /*******************************************************/ /*******************************************************/ /* .overlay-container > .overlay-header + .overlay-content + .overlay-footer */ /********** DEFAULT **********/ .overlay-header, .overlay-content, .overlay-footer { padding:calc(var(--gutter-gap) * 2); } .overlay .overlay-container .overlay-header, .overlay .overlay-container .overlay-content, .overlay .overlay-container .overlay-footer { position:relative; width:100%; } /********** STICKY **********/ .overlay .overlay-container .overlay-header.sticky, .overlay .overlay-container .overlay-footer.sticky { position:sticky; z-index:30; background:var(--bright-color); } .overlay .overlay-container .overlay-header.sticky { top:0; } .overlay .overlay-container .overlay-footer.sticky { bottom:0; } /*************************************/ /*************************************/ /********** OVERLAY LOADING **********/ /*************************************/ /*************************************/ .overlay.is-loading:before { position:absolute; z-index:110; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events: none; } .overlay.is-loading .overlay-content { opacity:0; } /***********************************/ /***********************************/ /********** OVERLAY CLOSE **********/ /***********************************/ /***********************************/ /********** DEFAULT **********/ .overlay-close { opacity:0; } .overlay.active .overlay-close { opacity:1; } /********** ONLY TOP ONE **********/ .overlay .overlay-container > .overlay-close:first-child, .overlay .overlay-header > .overlay-close:first-child { /* position:sticky; z-index:20; top:1em; left:100%; right:auto; */ display:inline-flex; line-height:1em; border:0; margin:1em 1em 1em auto; } .overlay .overlay-header > .overlay-close:first-child { margin:0 0 0 auto; } .overlay .overlay-container > .overlay-close + * { margin-top:calc(var(--gutter-gap) * -2) !important; } .overlay.modal .overlay-container > .overlay-close + *, .overlay .overlay-header > .overlay-close + * { margin-top:calc(var(--gutter-gap) * -1) !important; } /********** @MEDIA **********/ @media (min-width:0px) { .overlay .overlay-container > .overlay-close, .overlay .overlay-header > .overlay-close { font-size:1.5em; } } @media (min-width:760px) { .overlay .overlay-container > .overlay-close, .overlay .overlay-header > .overlay-close { font-size:2em; } } /**********************************/ /**********************************/ /********** CLICKOUTSIDE **********/ /**********************************/ /**********************************/ /* zone for closing in overlays */ .clickoutside { position:fixed; z-index:900; top:0; left:0; right:0; bottom:0; font-size:0; opacity:0; pointer-events:none; } body.overlayed .clickoutside { opacity:var(--overlay-bg-opacity); pointer-events:auto; } /*****************************************/ /*****************************************/ /********** OVERLAY INTERACTIVE **********/ /*****************************************/ /*****************************************/ /* keeps page interactive == no clickoutside */ body.overlayed.interactive { overflow-y:auto !important; } body.overlayed.interactive main { pointer-events:all; } body.overlayed.interactive .clickoutside { display:none; } /**********************************************/ /**********************************************/ /********** OVERLAY FREEZE / INSTANT **********/ /**********************************************/ /**********************************************/ /* no behaviours until overlay closed == for ex. cookies */ .overlay.freeze:after, .overlay.instant:after { content:""; position:fixed; z-index:1; top:0; left:0; bottom:0; right:0; background:rgba(255,255,255,.85); } .overlay.freeze, body.overlayed.freeze, body.freeze.overlayed main, body.freeze.overlayed .clickoutside { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; pointer-events:none; } body.freeze.overlayed .clickoutside, body.instant.overlayed .clickoutside { opacity:0; pointer-events:none; } /****************************/ /****************************/ /********** CUSTOM **********/ /****************************/ /****************************/ /* in swiper.css ? */ .overlay .swiper-container.gallery .swiper-slide { height:calc(var(--viewport-height) - var(--gutter-gap) * 4); } /****************************/ /****************************/ /********** COLORS **********/ /****************************/ /****************************/ .overlay .overlay-container { background:var(--bright-color); } .overlay.freeze:after, .overlay.instant:after, .clickoutside { background:var(--dark-color); } /********** OVERLAY MODAL **********/ /* .overlay.modal { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-moz-flex; display:-webkit-flex; display:flex; -webkit-box-align:center; -moz-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; } .overlay.modal > .overlay-container { margin-top:auto; margin-bottom:auto; width:100%; min-height:auto; } .overlay.modal.short > .overlay-container { max-width:30rem; } */ /********** OVERLAY BOTTOM **********/ /* .overlay.bottom { top:auto; left:0; right:0; bottom:0; max-height:100%; } .overlay.bottom { -webkit-transform:translateY(100%); -moz-transform:translateY(100%); -ms-transform:translateY(100%); -o-transform:translateY(100%); transform:translateY(100%); } .overlay.bottom.active { -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0); } */ /********** @MEDIA **********/ /* @media (min-width:0px) { .overlay { width:100%; } .overlay.modal { padding-top:.5rem; padding-bottom:.5rem; } .overlay.modal > .overlay-container { width:-webkit-calc(100% - 1rem); width:-moz-calc(100% - 1rem); width:calc(100% - 1rem); } } @media (min-width:760px) { .overlay.modal { padding-top:4rem; padding-bottom:4rem; } .overlay.modal > .container { width:-webkit-calc(100% - 8rem); width:-moz-calc(100% - 8rem); width:calc(100% - 8rem); } } @media (min-width:1000px) { .overlay.modal { padding-top:8rem; padding-bottom:8rem; } .overlay.modal > .overlay-container { width:-webkit-calc(100% - 16rem); width:-moz-calc(100% - 16rem); width:calc(100% - 16rem); } } */ /*******************************************************/ /*******************************************************/ /********** OVERLAY HEADER / CONTENT / FOOTER **********/ /*******************************************************/ /*******************************************************/ /********** @MEDIA **********/ @media (min-width:0px) { .overlay-header, .overlay-content, .overlay-footer { padding:1.25rem; } } @media (min-width:760px) { .overlay-header { padding:2.5rem 2.5rem 0 2.5rem; } .overlay-footer { padding:0 2.5rem 2.5rem 2.5rem; } .overlay-content { padding:2.5rem; } } /*********************************************/ /*********************************************/ /********** OVERLAY & TOOLTIP CLOSE **********/ /*********************************************/ /*********************************************/ .overlay > .overlay-container > .overlay-close, .tooltip > .tooltip-close { position:absolute; z-index:100; top:0; right:0; display:inline-block; font-size:0; line-height:0; border:0; margin:0; } .overlay > .overlay-container > .overlay-close:after, .tooltip > .tooltip-close:after { font-family:'icomoon'; display:block; } .overlay > .overlay-container > .overlay-close:hover, .tooltip > .tooltip-close:hover { -webkit-transform:scale(.8); -moz-transform:scale(.8); -ms-transform:scale(.8); -o-transform:scale(.8); transform:scale(.8); } /********** @MEDIA **********/ @media (min-width:0px) { .overlay > .overlay-container > .overlay-close, .tooltip > .tooltip-close { padding:1.25rem; } .overlay > .overlay-container > .overlay-close:after, .tooltip > .tooltip-close:after { font-size:1rem; line-height:1rem; width:1rem; } } @media (min-width:760px) { .overlay > .overlay-container > .overlay-close, .tooltip > .tooltip-close { padding:2.5rem; } .overlay > .overlay-container > .overlay-close:after, .tooltip > .tooltip-close:after { font-size:2rem; line-height:2rem; width:2rem; } } /**********************************/ /**********************************/ /********** CLICKOUTSIDE **********/ /**********************************/ /**********************************/ /* zone for closing in overlays */ .clickoutside { position:fixed; z-index:900; top:0; left:0; right:0; bottom:0; font-size:0; opacity:0; pointer-events:none; } body.overlayed .clickoutside { /*opacity:var(--overlay-bg-opacity);*/ opacity:.75; pointer-events:auto; } /********** BODY TOOLTIPED **********/ body.tooltiped main { -webkit-filter:blur(.25rem); filter:blur(.25rem); } body.tooltiped main { pointer-events:none; } body.tooltiped .clickoutside { opacity:.75; visibility:visible; pointer-events:auto; } /***********************************/ /***********************************/ /********** OVERLAY SLIDE **********/ /***********************************/ /***********************************/ .overlay.slide { left:auto; right:auto; bottom:0; } .overlay.slide.top { -webkit-transform:translateY(-100%); -moz-transform:translateY(-100%); -ms-transform:translateY(-100%); -o-transform:translateY(-100%); transform:translateY(-100%); } .overlay.slide.left { left:0; -webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); -ms-transform:translateX(-100%); -o-transform:translateX(-100%); transform:translateX(-100%); } .overlay.slide.right { right:0; -webkit-transform:translateX(100%); -moz-transform:translateX(100%); -ms-transform:translateX(100%); -o-transform:translateX(100%); transform:translateX(100%); } .overlay.slide.active { -webkit-transform:translateX(0) translateY(0) !important; -moz-transform:translateX(0) translateY(0) !important; -ms-transform:translateX(0) translateY(0) !important; -o-transform:translateX(0) translateY(0) !important; transform:translateX(0) translateY(0) !important; } .overlay.slide > .overlay-container { min-height:100%; height:100%; overflow:hidden; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; -webkit-box-orient:vertical; -webkit-box-direction:normal; flex-direction:column; } .overlay.slide > .overlay-container > .overlay-header, .overlay.slide > .overlay-container > .overlay-footer { width:100%; } .overlay.slide > .overlay-container > .overlay-content { -webkit-box-flex:8; -webkit-flex:8; -moz-box-flex:8; -ms-flex:8; flex:8; overflow:auto; } /************************************/ /************************************/ /********** OVERLAY CUSTOM **********/ /************************************/ /************************************/ /********** OVERLAY COLORS **********/ .overlay.freeze:after, .overlay.instant:after, .clickoutside { background:rgb(29,29,30); } .overlay .overlay-container { background:rgb(255,255,255); } .overlay.dark .overlay-container { color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(29,29,30); } /**********************************/ /**********************************/ /********** INTRODUCTION **********/ /**********************************/ /**********************************/ #sticky-movie { 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%); display:-webkit-inline-box; display:-webkit-inline-flex; display:-moz-inline-box; display:-ms-inline-flexbox; display:inline-flex; } #sticky-movie .titles { white-space:nowrap; margin:0 0 0 1.25rem; } #overlay-introduction .skip { position:fixed; bottom:0; right:0; margin:1.25rem; display:-webkit-inline-box; display:-webkit-inline-flex; display:-moz-inline-box; display:-ms-inline-flexbox; display:inline-flex; } #overlay-introduction .skip:after { font-family:'icomoon'; display:block; margin-left:1em; } /********** VISIBILITY **********/ #overlay-introduction .skip, #sticky-movie, #curtains { opacity:0; pointer-events:none; visibility:hidden; } #overlay-introduction.active .skip, #sticky-movie.active, #curtains.active { opacity:1; pointer-events:auto; visibility:visible; } /*****************************/ /*****************************/ /********** TOOLTIP **********/ /*****************************/ /*****************************/ .tooltip-toggle { position:relative; } .tooltip { position:absolute; z-index:10; top:0; left:0; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; color:rgb(255,255,255); text-shadow:0 0 0 rgb(255,255,255); background:rgb(29,29,30); border:0; opacity:0; visibility:hidden; } .tooltip-toggle:not(.clickable):hover .tooltip, .tooltip.active { opacity:1; visibility:visible; } /********** FIXED TOOLTIP **********/ #tooltipContainer { position:fixed; z-index:2000; top:0; right:0; bottom:0; left:0; pointer-events:none; overflow:visible; } #tooltipContainer .tooltip { position:absolute; top:0; left:0; z-index:2000; max-width:60rem; margin:-2.5rem 1.25rem 1.25rem 1.25rem; } #tooltipContainer .tooltip.is-clickable { pointer-events:all; } /********** FOR MOBILE **********/ body.tooltiped #tooltipContainer .tooltip, body.mobile #tooltipContainer .tooltip { top:auto !important; left:0 !important; right:0 !important; bottom:0 !important; max-width:none; pointer-events:all; } #tooltipContainer .tooltip .tooltip-close { visibility:hidden; display:none; } body.tooltiped #tooltipContainer .tooltip .tooltip-close, body.mobile #tooltipContainer .tooltip .tooltip-close { visibility:visible; display:inline-block; } #tooltipContainer .tooltip .tooltip-close + * { margin-top:0; margin-right:2.25rem; } /********** IN GRID **********/ .tooltip-toggle .tooltip { display: none; } /********** IN LIST **********/ .grid.list .item .tooltip { position:relative; z-index:10; top:auto; left:auto; right:auto; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -moz-box-orient:vertical; -moz-box-direction:normal; -ms-flex-direction:column; flex-direction:column; width:100%; margin:0; color:rgb(29,29,30); text-shadow:none; background:none; opacity:1; visibility:visible; -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none; } /********** TOOLTIP CONTENT **********/ .tooltip .titles > * { padding:0; color:inherit; text-shadow:inherit; background:none; } .tooltip .titles > * + * { margin-top:.25em; } .tooltip .titles + .movie-synopsis { margin-top:1rem; } /********** @MEDIA **********/ @media (min-width:0px) { .tooltip { padding:1.25rem; pointer-events:auto; } } @media (min-width:1000px) { .tooltip { padding:2.5rem; pointer-events:none; } } @charset "UTF-8"; /**************************/ /**************************/ /********** VARS **********/ /**************************/ /**************************/ /* https://easings.net/fr */ :root { /* duration */ --duration-fast: .25s; --duration-normal: .5s; --duration-slow: 1s; /* easing */ --ease-fast: cubic-bezier(0,.5,.5,1); --elastic: cubic-bezier(1, 0.01, 0, 1.22); --ease: ease; --easeInQuint: cubic-bezier(0.64, 0, 0.78, 0); --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1); /*--fastOutFastIn: cubic-bezier(0.4,0,0.2,1);*/ } /********************************/ /********************************/ /********** ANIMATIONS **********/ /********************************/ /********************************/ /* structure */ /* header { transition: opacity var(--duration-fast) var(--ease), transform var(--duration-normal) var(--ease); } */ header:after { -webkit-transition:opacity .25s cubic-bezier(.75,0,.25,1); -o-transition:opacity .25s cubic-bezier(.75,0,.25,1); -moz-transition:opacity .25s cubic-bezier(.75,0,.25,1); transition:opacity .25s cubic-bezier(.75,0,.25,1); } /* styles */ p > a, .buttons a, .button { -webkit-transition:all .25s cubic-bezier(.75,0,.25,1); -o-transition:all .25s cubic-bezier(.75,0,.25,1); -moz-transition:all .25s cubic-bezier(.75,0,.25,1); transition:all .25s cubic-bezier(.75,0,.25,1); } /* navigation */ #primary, footer nav.contextual { -webkit-transition:-webkit-transform .25s cubic-bezier(.75,0,.25,1); transition:-webkit-transform .25s cubic-bezier(.75,0,.25,1); -o-transition:-o-transform .25s cubic-bezier(.75,0,.25,1); -moz-transition:transform .25s cubic-bezier(.75,0,.25,1), -moz-transform .25s cubic-bezier(.75,0,.25,1); transition:transform .25s cubic-bezier(.75,0,.25,1); transition:transform .25s cubic-bezier(.75,0,.25,1), -webkit-transform .25s cubic-bezier(.75,0,.25,1), -moz-transform .25s cubic-bezier(.75,0,.25,1), -o-transform .25s cubic-bezier(.75,0,.25,1); } .coming-soon .session, #primary a, #primary a:after, .primary-expand .label, .primary-expand .label:before, .primary-expand .label:after { -webkit-transition:all .125s cubic-bezier(.75,0,.25,1); -o-transition:all .125s cubic-bezier(.75,0,.25,1); -moz-transition:all .125s cubic-bezier(.75,0,.25,1); transition:all .125s cubic-bezier(.75,0,.25,1); } .more-link { -webkit-transition:background-color .125s cubic-bezier(.75,0,.25,1); -o-transition:background-color .125s cubic-bezier(.75,0,.25,1); -moz-transition:background-color .125s cubic-bezier(.75,0,.25,1); transition:background-color .125s cubic-bezier(.75,0,.25,1); } .more-link:after { -webkit-transition:opacity .125s cubic-bezier(.75,0,.25,1); -o-transition:opacity .125s cubic-bezier(.75,0,.25,1); -moz-transition:opacity .125s cubic-bezier(.75,0,.25,1); transition:opacity .125s cubic-bezier(.75,0,.25,1); } /* swiper */ .swiper-container.viewer { -webkit-transition:opacity .25s cubic-bezier(.75,0,.25,1); -o-transition:opacity .25s cubic-bezier(.75,0,.25,1); -moz-transition:opacity .25s cubic-bezier(.75,0,.25,1); transition:opacity .25s cubic-bezier(.75,0,.25,1); } .swiper-controls a { -webkit-transition:all .125s cubic-bezier(.75,0,.25,1); -o-transition:all .125s cubic-bezier(.75,0,.25,1); -moz-transition:all .125s cubic-bezier(.75,0,.25,1); transition:all .125s cubic-bezier(.75,0,.25,1); } /* overlays */ .overlay, .overlay .close, .clickoutside { -webkit-transition:all .25s cubic-bezier(.75,0,.25,1); -o-transition:all .25s cubic-bezier(.75,0,.25,1); -moz-transition:all .25s cubic-bezier(.75,0,.25,1); transition:all .25s cubic-bezier(.75,0,.25,1); } .tooltip { -webkit-transition:opacity .25s cubic-bezier(.75,0,.25,1); -o-transition:opacity .25s cubic-bezier(.75,0,.25,1); -moz-transition:opacity .25s cubic-bezier(.75,0,.25,1); transition:opacity .25s cubic-bezier(.75,0,.25,1); } /* animations */ .instant-transition { -webkit-transition:none; -o-transition:none; -moz-transition:none; transition:none; } /********** SPINNER **********/ @-webkit-keyframes spinner { 0%, 50%, 100% { -webkit-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); } 0% { -webkit-transform: rotate(0); } 50% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes spinner { 0%, 50%, 100% { -moz-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); } 0% { -moz-transform: rotate(0); } 50% { -moz-transform: rotate(180deg); } 100% { -moz-transform: rotate(360deg); } } @-o-keyframes spinner { 0%, 50%, 100% { -o-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); } 0% { -o-transform: rotate(0); transform: rotate(0); } 50% { -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0%, 50%, 100% { -webkit-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); -moz-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); -o-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); } 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /****************************/ /****************************/ /********** LOADER **********/ /****************************/ /****************************/ /* icon only */ .loader:before { content:"" !important; display:inline-block; height:1rem; width:1rem; margin:-.25rem; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; border-style:solid; border-width:0.125rem; border-color: rgb(65,65,65) rgb(65,65,65) rgb(65,65,65) transparent; -webkit-animation: spinner 1s infinite linear; -moz-animation: spinner 1s infinite linear; -o-animation: spinner 1s infinite linear; animation: spinner 1s infinite linear; } /* loading txt */ .loading:before { content:""; display:inline-block; vertical-align:middle; height:.75em; width:.75em; margin:-.375em .375em -.375em -.375em; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; border-style:solid; border-width:0.125em; border-color: rgb(65,65,65) rgb(65,65,65) rgb(65,65,65) transparent; -webkit-animation: spinner .5s infinite linear; -moz-animation: spinner .5s infinite linear; -o-animation: spinner .5s infinite linear; animation: spinner .5s infinite linear; }