/* * Style by Datagif * */ /* @group RESETS */ /* Eric Meyer reset.css v2.0 20110126 -- & -- normalize.css v3.0.0 git.io/normalize --- merge v1.2 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;} *, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} html {font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;} audio, canvas, progress, video {display: inline-block; vertical-align: baseline;} audio:not([controls]) {display: none; height: 0;} [hidden], template {display: none;} a {background: transparent;} a:active, a:hover {outline: 0;} abbr[title] {border-bottom: 1px dotted;} strong {font-weight: bold;} em, dfn {font-style: italic;} mark {background: #ff0; color: #000;} small {font-size: 80%;} sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup {top: -0.5em;} sub {bottom: -0.25em;} img {border: 0;} svg:not(:root) {overflow: hidden;} ol, ul {list-style: none;} hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;} pre {overflow: auto;} code, kbd, pre, samp {font-family: monospace, monospace; font-size: 1em;} button, input, optgroup, select, textarea {color: inherit; font: inherit; margin: 0;} button {overflow: visible;} button, select {text-transform: none;} button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;} button[disabled], html input[disabled] {cursor: default;} button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;} input {line-height: normal;} input[type="checkbox"], input[type="radio"] {padding: 0;} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto;} input[type="search"] {-webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;} textarea {overflow: auto;} optgroup {font-weight: bold;} table {border-collapse: collapse; border-spacing: 0;} td, th {padding: 0;} /* Personal & h5bp defaults */ a[role="button"] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; /*user-select: none;*/ /* not supported yet */ } audio, canvas, img, svg, video {vertical-align: middle;} img {display: block;} textarea {resize: vertical;} :lang(fr) q {quotes: "\00ab\00a0" "\00a0\bb" "\201c" "\201d";} /* « … “…” … » */ q:lang(fr) {quotes: "\00ab\00a0" "\00a0\bb" "\201c" "\201d";} :lang(en) q {quotes: "\201c" "\201d" "\2018" "\2019";} /* “ … ‘…’ … ” */ q:lang(en) {quotes: "\201c" "\201d" "\2018" "\2019";} q::before {content: open-quote;} q::after {content: close-quote;} :focus {outline: 0 none;} /* @end RESETS */ /* @group BASE */ html { height: 100%; color: #222; font: 1em/1.4em "proxima-nova", sans-serif; } /*html, button, input, select, textarea {color: #222;}*/ /* https://github.com/h5bp/html5-boilerplate/commit/1c4df2aa073a4f791e54d4eede91e3bfbb8ee233 --- to be tested*/ body { min-height: 100%; } ::-moz-selection {background-color: #FFF; text-shadow: none} ::selection {background-color: #FFF; text-shadow: none} a { color: inherit; cursor: pointer; } a:hover { } p a:active { position: relative; top: 1px; } a:focus {outline: thin dotted;} a:active, a:hover {outline: 0 none;} /* a { -webkit-transition: color 100ms ease, background-color 100ms ease; -moz-transition: color 100ms ease, background-color 100ms ease; -o-transition: color 100ms ease, background-color 100ms ease; transition: color 100ms ease, background-color 100ms ease; } a:hover { -webkit-transition: color 0ms, background-color 0ms ease; -moz-transition: color 0ms, background-color 0ms ease; -o-transition: color 0ms, background-color 0ms ease; transition: color 0ms, background-color 0ms ease; } */ /* Helpers / utils */ .hidden, .template { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visual-ir { /* /!\ Must be re-tested on several browsers - creat validator error for font: 0 */ border: 0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; } .clearfix:before, .clearfix:after { content: " "; display: block; /* "table" instead of "block" to contain top-margins of child elements */ } .clearfix:after {clear: both;} /* @end BASE */ /* @group TEXTS & COLORS */ html, .shop-link-label { background-color: #e9f3f4; } /* Utils */ .underline { text-decoration: none; background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #262626 50%); background-position: 0 90%; background-repeat: no-repeat; background-size: 100% 2px; padding-bottom: 0.1em; /*text-shadow: 6px -1px 0 #fff, -6px -1px 0 #fff, -6px -2px 0 #fff;*/ } a.underline:hover { background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #555 50%); } .ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* Titles & texts */ .article h1 { } .cat-label { display: inline-block; font-size: 0.8em; line-height: 1em; text-transform: uppercase; border: 2px solid #333; padding: 0.45em 0.65em 0.35em; margin-right: 6px; } a.cat-label { position: relative; z-index: 0; text-decoration:none; } a.cat-label::before { content: ""; display: block; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 0; background-color: #fff; -webkit-transition: width 100ms; transition: width 100ms; } a.cat-label:hover::before { left: 0; width: 100%; } .date-label { font-size: 0.85em; } .highlight { color: #fff; box-shadow: -6px 0 0 4px #1d1d1d, 6px 0 0 4px #1d1d1d; -webkit-box-decoration-break: clone; -ms-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone; } .highlight > .hl-inner { background-color: #1d1d1d; position: relative; } .highlight-padding, .highlight-h-padding { padding-left: 12px; padding-right: 12px; } .highlight-padding, .highlight-v-padding { padding-top: 12px; padding-bottom: 12px; } /* Share this */ .share-this { } .share-this-label { display: inline-block; font-size: 1em; line-height: 1em; font-weight: 700; border-bottom: 1px solid #999; cursor: default; } .share-this-buttons { height: 30px; overflow: hidden; padding-top:10px; } .share-this:not(:hover) .share-this-buttons { opacity:0; } .share-this-buttons > div { display: inline-block; margin-right: 10px; } .share-this-buttons .fb > div > span { vertical-align: inherit !important; } .share-this-buttons .tw { width: 110px; } .share-this-buttons > div.loading::after { content: ""; display: block; left: 75px; top: 9px; width: 12px; height: 12px; border-bottom: 1px solid; border-left: 1px solid; border-radius: 50%; -webkit-animation: share-this-loader 600ms infinite linear; -moz-animation: share-this-loader 600ms infinite linear; -o-animation: share-this-loader 600ms infinite linear; animation: share-this-loader 600ms infinite linear; } .share-this-buttons > .fb.loading::after {border-color: #3b5998;} .share-this-buttons > .tw.loading::after {border-color: #55acee;} @-webkit-keyframes share-this-loader { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} } @-moz-keyframes share-this-loader { 0% {-moz-transform: rotate(0deg);} 100% {-moz-transform: rotate(360deg);} } @-o-keyframes share-this-loader { 0% {-o-transform: rotate(0deg);} 100% {-o-transform: rotate(360deg);} } @keyframes share-this-loader { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } /* SVG Icons */ .icon { display: inline-block; } /* @end TEXTS & COLORS */ /* @group HEADER */ .site-header { background-color: #fff; position: absolute; width: 100%; box-shadow: 0 -20px 10px 20px rgba(0, 0, 0, 0.05); z-index: 10; } .header-padding-handler { height: 226px; } .site-logo-bar { border-bottom: 1px solid #eaeaea; } .site-logo { display: block; margin-left: auto; margin-right: auto; padding: 0 15px; width: 100%; max-width: 575px; margin-left: auto; margin-right: auto; } .site-logo img { width: 100%; height: auto; padding: 8.696% 0; /* default padding-top/bottom / parent max-width */ } .main-nav-toggle { display: none; } .main-nav { } .main-nav-container { } .site-header.fixed { margin-bottom: 80px; } .site-header.fixed .main-nav-container { position: fixed; width: 100%; top: 0; background-color: #fff; box-shadow: 0 -20px 10px 20px rgba(0, 0, 0, 0.05); } .main-nav.sticky { position: absolute; top: 0; width: 100%; } .main-nav .width-wrap { position: relative; } .main-nav a svg { pointer-events: none; } .main-nav-menu, .main-nav-alts { margin-top: 18px; } .main-nav-menu { float: left; } .main-nav-menu li { float: left; } .main-nav-menu li:first-child {margin-left: -17px;} .main-nav-menu li a, .main-nav-social-link, .main-nav-playlist, .main-nav-search .search-toggle { height: 42px; } @media (max-width: 1140px) { .main-nav-menu > li:first-child {margin-left: 0;} } .main-nav-menu li a { display: inline-block; font-size: 1.1em; line-height: 1em; font-weight: 700; text-transform: uppercase; text-decoration: none; padding: 11px 15px 0; } .main-nav-menu li a, .main-nav-social-link, .main-nav-playlist, .main-nav-search .search-toggle { border: 2px solid transparent; margin-right: -2px; -webkit-transition: border 250ms; transition: border 250ms; } .main-nav-menu li a:hover, .main-nav-menu li.hover a, .main-nav-social-link:hover, .main-nav-social li.hover a, .main-nav-playlist:hover, .main-nav-playlist.hover, .main-nav-search .search-toggle:hover, .main-nav-toggle { /*border-color: #ddd;*/ border-color: inherit; -webkit-transition: background-color 50ms; transition: background-color 50ms; } .main-nav-menu li a:active, .main-nav-social-link:active, .main-nav-playlist:active, .main-nav-search .search-toggle:active, { border-color: #aaa; } .main-nav-menu li.active { z-index: 1; position: relative; } .main-nav:not(.opened-panel) .main-nav-menu li.active a, .main-nav:not(.opened-panel) .main-nav-playlist.active { border-color: inherit; } .main-nav-alts { float: right; } .main-nav-social, .main-nav-playlist, .main-nav-search { float: left; } .main-nav-social { margin-right: 40px; } .main-nav-social > li { float: left; } .main-nav-social-link { display: block; padding: 7px 10px 0; } .main-nav-playlist { display: block; font-size: 0.9em; line-height: 1em; font-weight: 600; text-transform: uppercase; text-decoration: none; padding: 10px 15px; margin-right: 20px; } .main-nav-playlist .icon { vertical-align: -0.2em; } .main-nav-playlist span { margin-left: 8px; } .main-nav-search { } .main-nav-search .search-toggle { display: inline-block; cursor: text; padding: 6px 8px 0 40px; margin-right: -10px; } .main-nav-search .search-fieldset { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; display: none; padding-left: 8px; margin-left: -8px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .main-nav-search .search-suggestions, .main-nav-search .search-fieldset input[type="text"] { font-size: 1.8em; width: 75%; } .main-nav-search .search-suggestions { position: absolute; display: none; left: 19px; top: 27px; color: rgba(0, 0, 0, 0.5); } .main-nav-search .search-suggestions li { position: absolute; width: 100%; opacity: 0; -webkit-animation: search-suggestions-animation 10s infinite linear; animation: search-suggestions-animation 10s infinite linear; } .main-nav-search .search-suggestions li:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .main-nav-search .search-suggestions li:nth-child(2) { -webkit-animation-delay: 2s; animation-delay: 2s; } .main-nav-search .search-suggestions li:nth-child(3) { -webkit-animation-delay: 4s; animation-delay: 4s; } .main-nav-search .search-suggestions li:nth-child(4) { -webkit-animation-delay: 6s; animation-delay: 6s; } .main-nav-search .search-suggestions li:nth-child(5) { -webkit-animation-delay: 8s; animation-delay: 8s; } @-webkit-keyframes search-suggestions-animation { 0% { opacity: 0; } 2% { opacity: 1; } 18% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } } @keyframes search-suggestions-animation { 0% { opacity: 0; } 2% { opacity: 1; } 18% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } } .main-nav-search .search-fieldset input[type="text"] { position: relative; border: 0 none; margin-top: 19px; margin-left: 10px; background-color: transparent; z-index: 1; } .main-nav-search .search-fieldset input[type="text"]:invalid { box-shadow: none; } .main-nav-search .search-fieldset input[type="text"]:invalid + .search-suggestions { display: block; } .main-nav-search .search-fieldset .search-close { float: right; display: block; width: 50px; height: 50px; position: relative; margin-top: 14px; margin-right: 2px; opacity: 0.6; } .main-nav-search .search-fieldset .search-close:hover {opacity: 0.4;} .main-nav-search .search-fieldset .search-close:active {opacity: 1;} .main-nav-search .search-fieldset .search-close::before, .main-nav-search .search-fieldset .search-close::after { content: ""; position: absolute; width: 1px; height: 45px; left: 50%; top: 5%; background-color: #111; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .main-nav-search .search-fieldset .search-close::after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .main-nav.searching .main-nav-search .search-fieldset { display: block; } /*@media (max-width: 1140px) { .main-nav-menu > li:first-child {margin-left: 0;} }*/ .main-nav-panels { position: relative; height: 0; overflow: hidden; padding-bottom:18px; -webkit-transition: height 250ms; transition: height 250ms; } .main-nav-panel { position: absolute; width: 100%; margin-top: 25px; -webkit-transition: opacity 250ms; transition: opacity 250ms; } .main-nav-panel:not(.current) { opacity: 0; pointer-events: none; } .main-nav-panel.cat-panel { /* padding-top: 25px;*/ padding-bottom: 20px; } .main-nav-panel.cat-panel .cat-panel-item { float: left; width: 18.4%; margin-right: 2%; } .main-nav-panel.cat-panel .cat-panel-item:last-child {margin-right: 0;} .main-nav-panel.cat-panel .cat-panel-item img { width: 100%; height: auto; } .main-nav-panel.cat-panel .cat-panel-item h3 { font-size: 1.2em; line-height: 1em; height: 4em; font-weight: 600; margin-top: 15px; margin-bottom: 30px; overflow: hidden; } .main-nav-panel.cat-panel .cat-panel-item h3 a:not(:hover) {text-decoration: none;} .main-nav-panel .social-container { display: inline-block; max-height: 60px; max-width: 230px; } .main-nav-panel .text-panel-social { text-align:center; } .main-nav-panel.text-panel { height: 225px; padding-top: 65px; text-align:center; } .main-nav-panel.text-panel .high-text { color: #fff; font-size: 3.5em; line-height: 1em; font-weight: 300; overflow: hidden; } .main-nav-panel.text-panel .panel-marquee { display: inline-block; white-space: nowrap; } .main-nav-panel.text-panel .panel-marquee li { display: inline-block; margin-right: 45px; } .main-nav-panel.text-panel .panel-marquee li::after { content: ""; display: inline-block; margin-left: 50px; width: 44px; height: 30px; background: url("data:image/svg+xml;utf8,") no-repeat center top; } .main-nav-panel.text-panel .social-container { margin-top: 25px; } /* Youtube mosaic panel */ .menu-yt-panel { width: 40000px; overflow:hidden; height:auto; } .menu-ig-panel { width: 3400px; overflow:hidden; height:auto; } .menu-ig-panel .text-panel-social, .menu-yt-panel .text-panel-social{ width:100vw; } .yt-video-column { width: 390px; float: left; } .yt-mosaic-elmt { width: 50%; float: left; padding-bottom: 30.952380952%; max-height: 260px; position:relative; } .yt-mosaic-elmt:hover:before { position:absolute; top:35%; left:45%; content: " "; border-left:36px solid #FFF; border-top:20px solid transparent; border-bottom:20px solid transparent; transform:scale(0.9999); } div.yt-video-column:nth-child(3n+2) { width: 195px; } div.yt-video-column:nth-child(3n+2):hover:after { width: 195px; top:40%; left:40%; } div.yt-video-column:nth-child(3n+2) .yt-mosaic-elmt, div.yt-video-column:nth-child(3n+1) .yt-mosaic-elmt:first-child, div.yt-video-column:nth-child(3n) .yt-mosaic-elmt:last-child { width: 100%; padding-bottom: 62%; } /*.yt-mosaic-elmt:nth-child(9n+1), .yt-mosaic-elmt:nth-child(9){ width: 25%; padding-bottom: 15.476190476%; } .yt-mosaic-elmt:nth-child(-n+2) { left: 0; } .yt-mosaic-elmt:nth-child(3) { left: 12.5%; top: 56.6%; }*/ /* */ /* Playlist panel menu */ .main-nav-panel.menu-playlist-panel { } .main-nav-panel.menu-playlist-panel::after { content: ""; display: block; position: absolute; left: 0; width: 100%; top: 0; height: 100%; z-index: 2; background: url("data:image/gif;base64,R0lGODlhKABQAIABAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGMTE3NDA3MjA2ODExODIyQUZGOTY0RTVDMTNBQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNTA0Q0I2RDMwNjAxMUU0QTE0QjhFRUQwRjc0MThDQSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNTA0Q0I2QzMwNjAxMUU0QTE0QjhFRUQwRjc0MThDQSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDQ4MDExNzQwNzIwNjgxMTgzRDFDOUQwMDM2NTkzNzAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjExNzQwNzIwNjgxMTgyMkFGRjk2NEU1QzEzQUIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQFAQABACwAAAAAKABQAAACfYyPqcvtD6OctNqLs968+w+G4kiW5ommKACkLHu+bynLY12HOP7te+fzbYLBDJFoPPI0Shun2fIodUWRkLSkzVZRlfcLDovH5LL5jE6r1+y2G9ONweRbbJb6w1+lUyD0CTUHF1hXQVhocQjYxHcE4qiXc3Nn5WSCSPOmuVAAACH5BAkBAAEALAAAEgAoADsAAAIyjI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YiUFAAAIfkECQEAAQAsAAAAACgAUAAAAmOMj6nL7Q+jnLTai7PevPsPhuJIluaJpurKrgCQvu8py2Vdjzge7vvn83WCwQ2RqDkWW8ym8wmNSqfUqvWKzWq33K73Cw5LYLEZLXf76ZYgZVtJ5sBtxjkdY0fj2eK+/w/4UQAAIfkEBQEAAQAsAAAAACgAUAAAAmKMj6nL7Q+jnLTai7PevPsPhuJIluaJpurKtu4JAGkcw3RN3veo62Hf+wCBneFwYzRqkseX8wmNSqfUqvWKzWq33K73Cw6Lxwsaylci8pogZpspK8Jxy7k5Y9/hleS+/99QAAAh+QQJAQABACwKAB4AFwArAAACHYyPqcvtD6OctNqLs968+w+G4kiW5omm6sq27vsWACH5BAUBAAEALAAAAAAoAFAAAAKDjI+py+0Po5y02ouz3rz7D4biSJbmiaYlwLZu6MYtKMtfXXu4ze355uNlgj8MUWg5FitKJKUZG0IBmim12uxltUTd8RakhcU4lfmMTqvX7Lb7DY/L5/S2szP2+sh7/Nf/h6XENSgFJXh4YcVitNg4hVj4KGkYWJkHZBlZBtanx8l3VgAAIfkECQEAAQAsAAASACgAPQAAAjKMj6nL7Q+jnLTai7PevPsPhuJIluaJpurKtu4Lx/JM1/aN5/rO9/4PDAqHxKLxiEx2CgAh+QQFAQABACwAAAAAKABQAAACg4yPqcvtD6OctNqLs968+w+G4kiW5ommKgq0biu+svvNNtDd96brWr/DAH2XYdBitAmTsiWTVnxCkVKYk/mT8rCcZA0YU5qsq7L5jE6r1+y2+w2Py+ck8qk56oGMHm7WH/X0JxioVUhIVXWFWFFlR+GIc+iVoVjJuKiXM7RHFCZJt1EAACH5BAkBAAEALAAAEwAoADsAAAIyjI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YiUFAAAIfkECQEAAQAsAAAAACgAUAAAAmGMj6nL7Q+jnLTai7PevPsPhuJIluaJpurKtu4LgwCQzvNp22Wejzwf+v0+QmGnWNwgkZplMgaNSqfUqvWKzWq33K73Cw6Lx2TZDdfbDX1PM5PopB3j5yZdl7mnMcuyf1wAACH5BAkBAAEALAAAAAAoAFAAAAJijI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuCQBpHMN0Td73qOth3/sAgZ3hcGM0apLHl/MJjUqn1Kr1is1qt9yu9wsOi8cLGspXIvKaIGabKSvCccu5OWPf4ZXkvv/fUAAAIfkEBQEAAQAsAAAAACgAUAAAAn2Mj6nL7Q+jnLTai7PevPsPhuJIluaJpigApCx7vm8py2Ndhzj+7Xvn822CwQyRaDzyNEobp9nyKHVFkZC0pM1WUZX3Cw6Lx+Sy+YxOq9fsthvTjcHkW2yW+sNfpVMg9Ak1BxdYV0FYaHEI2MR3BOKol3NzZ+VkgkjzprlQAAAh+QQJAQABACwKABIAHgAyAAACJoyPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+lQAACH5BAUBAAEALAAAAAAoAFAAAAKDjI+py+0Po5y02ouz3rz7D4biSJbmiaYqCrRuK76y+8020N33putav8MAfZdh0GK0CZOyJZNWfEKRUpiT+ZPysJxkDRhTmqyrsvmMTqvX7Lb7DY/L5yTyqTnqgYwebtYf9fQnGKhVSEhVdYVYUWVH4Yhz6JWhWMm4qJcztEcUJkm3UQAAIfkECQEAAQAsAAATACgAOwAAAjKMj6nL7Q+jnLTai7PevPsPhuJIluaJpurKtu4Lx/JM1/aN5/rO9/4PDAqHxKLxiJQUAAAh+QQFAQABACwAAAAAKABQAAACfYyPqcvtD6OctNqLs968+w+G4kiW5ommKACkLHu+bynLY12HOP7te+fzbYLBDJFoPPI0Shun2fIodUWRkLSkzVZRlfcLDovH5LL5jE6r1+y2G9ONweRbbJb6w1+lUyD0CTUHF1hXQVhocQjYxHcE4qiXc3Nn5WSCSPOmuVAAACH5BAkBAAEALAoAGgAWACoAAAIdjI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuVgAAIfkEBQEAAQAsAAAAACgAUAAAAoOMj6nL7Q+jnLTai7PevPsPhuJIluaJpiXAtm7oxi0oy19de7jN7fnm42WCPwxRaDkWK0okpRkbQgGaKbXa7GW1RN3xFqSFxTiV+YxOq9fstvsNj8vn9LazM/b6yHv81/+HpcQ1KAUleHhhxWK02DiFWPgoaRhYmQdkGVkG1qfHyXdWAAAh+QQJAQABACwAABIAKAA9AAACMoyPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofEovGITHYKACH5BAUBAAEALAAAAAAoAFAAAAJhjI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC4MAkM7zadtlno88H/r9PkJhp1jcIJGaZTIGjUqn1Kr1is1qt9yu9wsOi8dk2Q3X2w19TzOT6KQd4+cmXZe5pzHLsn9cAAAh+QQJAQABACwKACAAFwArAAACHYyPqcvtD6OctNqLs968+w+G4kiW5omm6sq27vsWACH5BAUBAAEALAAAAAAoAFAAAAKDjI+py+0Po5y02ouz3rz7D4biSJbmiaYqCrRuK76y+8020N33putav8MAfZdh0GK0CZOyJZNWfEKRUpiT+ZPysJxkDRhTmqyrsvmMTqvX7Lb7DY/L5yTyqTnqgYwebtYf9fQnGKhVSEhVdYVYUWVH4Yhz6JWhWMm4qJcztEcUJkm3UQAAIfkEBQEAAQAsAAAAAAEAAQAAAgJMAQA7") center center repeat; } .main-nav-panel.menu-playlist-panel iframe { position: relative; /*margin: 20px auto;*/ display: block; z-index: 3; } .main-nav-panel.menu-playlist-panel .background-slider-img { position: absolute; z-index: 1; width: 100%; height: 426px; left: 0; top: 0; background-size: cover; background: no-repeat scroll center 0; position: absolute; width: 100%; opacity: 0; -webkit-animation: background-slider-img-animation 20s infinite linear; animation: background-slider-img-animation 20s infinite linear; } .main-nav-panel.menu-playlist-panel .background-slider-img:nth-child(2) { -webkit-animation-delay: 0s; animation-delay: 0s; } .main-nav-panel.menu-playlist-panel .background-slider-img:nth-child(3) { -webkit-animation-delay: 5s; animation-delay: 5s; } .main-nav-panel.menu-playlist-panel .background-slider-img:nth-child(4) { -webkit-animation-delay: 10s; animation-delay: 10s; } .main-nav-panel.menu-playlist-panel .background-slider-img:nth-child(5) { -webkit-animation-delay: 15s; animation-delay: 15s; } @-webkit-keyframes background-slider-img-animation { 0% { opacity: 0; } 4% { opacity: 1; } 23% { opacity: 1; } 27% { opacity: 0; } 100% { opacity: 0; } } @keyframes background-slider-img-animation { 0% { opacity: 0; } 4% { opacity: 1; } 13% { opacity: 1; } 27% { opacity: 0; } 100% { opacity: 0; } } /* */ .main-nav-panel.menu-fb-panel {background-color: #3865a0;} .main-nav-panel.menu-tw-panel {background-color: #58aceb;} .main-nav-panel.media-panel { } .main-nav-panel.media-panel .media { position: relative; } .main-nav-panel.media-panel .media::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; box-shadow: 0 20px 20px -20px rgba(0, 0, 0, 0.25) inset, 0 -20px 20px -20px rgba(0, 0, 0, 0.25) inset; } .main-nav-panel.media-panel .media.mosaic { } .main-nav-panel.media-panel .media.mosaic a { float: left; } .main-nav-panel.media-panel .media.mosaic img { width: 195px; height: auto; } .main-nav-panel.media-panel .media.mosaic a:first-child img { width: 390px; } @media (max-height: 720px) { .main-nav-panel.media-panel .media.mosaic img { width: 155px; } .main-nav-panel.media-panel .media.mosaic a:first-child img { width: 310px; } } .main-nav-panel.media-panel .social-container { margin-top: 15px; margin-bottom: 15px; } /*@media (max-width: 1140px) { .main-nav-menu > li:first-child {margin-left: 0;} }*/ @media (max-width: 990px) { .main-nav-social, .main-nav-playlist { margin-right: 8px; } .main-nav-playlist span { display: none; } .main-nav-search .search-toggle { padding-left: 15px; margin-right: 10px; } } @media (max-width: 888px) { .site-header { position: fixed; top: 0; width: 100%; background-color: transparent; } .site-logo-bar, .main-nav-container { width: 100%; background-color: #fff; } .site-logo-bar { position: relative; } .site-header:not(.expanded) .site-logo-bar { border-bottom: 0 none; } .site-logo { max-width: none; padding: 0 20%; } .site-logo img { padding: 5% 0 6%; } .main-nav-toggle { display: block; position: absolute; font-size: 50px; width: 1em; height: 1em; top: 50%; right: 30px; overflow: hidden; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .main-nav-toggle-icon { display: block; position: relative; width: 0.8em; height: 2px; margin-top: 0.28em; margin-left: 0.1em; background-color: #333; box-shadow: 0 0.2em 0 0 #333, 0 0.4em 0 0 #333; -webkit-transition: -webkit-transform 350ms; -webkit-transition: transform 350ms; transition: -ms-transform 350ms; transition: transform 350ms; } .main-nav-toggle-icon::before, .main-nav-toggle-icon::after { content: ""; display: block; position: absolute; width: 0.8em; height: 2px; top: -1em; margin-top: 25%; background-color: inherit; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .main-nav-toggle-icon::after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .site-header.expanded .main-nav-toggle-icon { -webkit-transform: translateY(1em); -ms-transform: translateY(1em); transform: translateY(1em); } .main-nav-panels { display: none; } .main-nav-container { position: relative; overflow: hidden; max-height: 0; -webkit-transition: max-height 350ms; transition: max-height 350ms; } .site-header.expanded .main-nav-container { max-height: 150px; } .main-nav { } .main-nav.sticky { position: relative; top: auto; } .main-nav .width-wrap { position: relative; } .main-nav-menu, .main-nav-alts { float: none; } .main-nav-menu { margin-top: 10px; margin-bottom: 10px; } .main-nav-menu > li { width: 16.666%; text-align: center; } .main-nav-menu > li:first-child {margin-left: 0;} .main-nav-alts { margin-top: 5px; text-align: center; } .main-nav-social, .main-nav-playlist, .main-nav-search { display: inline-block; float: none; vertical-align: middle; } .main-nav-playlist span { display: inline; } } @media (max-width: 630px) { .site-header.expanded .main-nav-container { max-height: 350px; } .main-nav-toggle { font-size: 35px; right: 15px; } .main-nav-toggle-icon {margin-top: 0.3em;} .main-nav-menu > li { width: 100%; border-bottom: 3px solid; } .main-nav-menu > li:first-child {border-top: 3px solid;} .main-nav-menu > li:nth-child(-n+3) {margin-bottom: 0;} .main-nav-menu > li a:hover {border-color: transparent !important;} .main-nav:not(.opened-panel) .main-nav-menu li.active a, .main-nav:not(.opened-panel) .main-nav-playlist.active { border-color: transparent; } } @media (max-width: 400px) { .main-nav-playlist span { display: none; } } @media (max-width: 333px) { .site-header.expanded .main-nav-container { max-height: 400px; } .main-nav-toggle { font-size: 30px; } .main-nav-alts { margin-top: 0; } .main-nav-social, .main-nav-playlist, .main-nav-search { margin-top: 10px; } } /* @end HEADER */ /* @group LAYOUT UTILS & MAINS */ /* Global wrapers */ .width-wrap { width: 100%; max-width: 1160px; /* including 2 * 10px paddings */ padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto; } .width-wrap.wide { max-width: 1300px; /* including 2 * 10px paddings */ } .width-wrap.narrow { max-width: 1000px; /* including 2 * 10px paddings */ } .width-wrap .width-wrap { padding-left: 0; padding-right: 0; max-width: 1140px; } /* Centering */ .v-centerer { } .v-centerer::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; width: 0.1em; margin-right: -0.4em; } .v-centered { display: inline-block; vertical-align: middle; } .abs-centered { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .table { display: table; } .v-centering-cell { display: table-cell; width: 100%; height: 100%; vertical-align: middle; } /* Main container */ .main-container { padding-top: 40px; } .main-container.clr-top { padding-top: 0; } /* @end LAYOUT UTILS & MAINS */ /* @group FEED BLOCS */ /* @group COMMON */ .feed-bloc { } .feed-bloc.bottom-sep { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .feed-bloc.bottom-sep:after{ border-bottom: 1px solid #fff; content: " "; height: 1px; margin-top: 39px; position: absolute; width: 100%; } .feed-bloc.bottom-sep-artiste:after{ margin-top: 61px; width: 99.5%; } /* Texts */ .l1-title { font-size: 2.4em; line-height: 1em; font-weight: 700; margin-top: 20px; margin-bottom: 20px; } .l2-title { font-size: 1.25em; line-height: 1.1em; font-weight: 700; margin-top: 15px; margin-bottom: 20px; } .l1-title a:not(:hover), .l2-title a:not(:hover) { text-decoration: none; } .l1-standfirst { font-size: 1.5em; line-height: 1.2em; font-weight: 300; margin-top: 20px; margin-bottom: 30px; } .l2-standfirst { } .l1-big-standfirst { font-size: 5.6em; line-height: 1.12em; font-weight: 300; margin-top: 20px; margin-bottom: 30px; } .l2-big-standfirst { font-size: 3.5em; line-height: 1.12em; font-weight: 300; margin-top: 20px; margin-bottom: 30px; } @media (max-width: 800px) { .l1-title { font-size: 2em; } .l2-title { font-size: 1.1em; } .l1-standfirst { font-size: 1.25em; } .l2-standfirst { } .l1-big-standfirst { font-size: 3.6em; } .l2-big-standfirst { font-size: 2em; } } /* Images */ .link-img { display: inline-block; position: relative; } .link-img::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #9debf3; opacity: 0; -webkit-transition: opacity 250ms; transition: opacity 250ms; } .link-img.rounded-mask::after { border-radius: 50%; } .link-img:hover::after { opacity: 0.2; -webkit-transition: opacity 50ms; transition: opacity 50ms; } .sales-badge { position: relative; } .sales-badge::before { content: ""; display: block; position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; z-index:1; background-image: url('data:image/svg+xml;utf8,'); } .sales-badge.scroll-anim::before { opacity: 0; margin-top: -50px; -webkit-transition: opacity 200ms, margin-top 200ms; transition: opacity 200ms, margin-top 200ms; } .sales-badge.scroll-anim-active::before { opacity: 1; margin-top: 0; } .sales-badge.sales-badge-right::before { left: auto; right: 20px; } .sales-badge.sales-badge-small::before { top: 0; -webkit-transform: scale(0.666); -ms-transform: scale(0.666); transform: scale(0.666); } .sales-badge.sales-badge-right.sales-badge-small::before { right: 0; } .sales-badge.rounded-mask::before { top: 120px; left: 40px; } .sales-badge.sales-badge-right.rounded-mask::before { left: auto; right: 40px; } .shop-link-img { position: relative; } .shop-link-img .link-img { display: block } .shop-link-label { display: block; position: absolute; right: 0; bottom: 0; overflow: hidden; height: 0px; line-height: 40px; vertical-align: middle; padding-left: 20px; padding-right: 20px; font-size: 1.1em; font-weight: 600; text-align: center; z-index: 1; background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #262626 50%); background-position: center 28px; background-repeat: no-repeat; background-size: 68% 2px; text-decoration: none; -webkit-transition: height 250ms; transition: height 250ms; } .shop-link-img:hover .shop-link-label { height: 40px; -webkit-transition: height 100ms; transition: height 100ms; } .shop-link-img.rounded-mask .shop-link-label { left: 50%; right: auto; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .rounded-mask { border-radius: 100%; overflow: hidden; position: relative; } .media-container .rounded-mask { width: 100%; } .rounded-mask:after { content: ""; display: block; padding-bottom: 100%; } .rounded-mask .link-img, .rounded-mask > .img-bloc { height: 100%; position: absolute; top: 0; width: 100%; } .rounded-mask .link-img > img { height: 100%; width: 100%; } /* Misc */ .feed-bloc .top-space { padding-top: 50px; } /* @end COMMON */ /* @group HALF SLIDER BLOC */ .half-slider-bloc { overflow-x: hidden; } .half-slider-bloc .width-wrap { position: relative; } .half-slider-bloc .slider-details { position: relative; width: 44%; padding-bottom: 200px; overflow: hidden; } .half-slider-bloc.inverted .slider-details { width: 46%; margin-left: 54%; } .slider-wrapper-height-handler { width: 1px; margin-right: -1px; float: left; margin-top: -50px; margin-bottom: -200px; } .half-slider-bloc .slider-controls { position: absolute; bottom: 80px; } .half-slider-bloc:not(.activated) .slider-controls { display: none; } .half-slider-bloc .slider-controls .arrow, .half-slider-bloc .slider-controls .vu, .article-slider-bloc .slider-controls .arrow, .article-slider-bloc .slider-controls .vu { height: 50px; border: 2px solid; background-color: #fff; } .half-slider-bloc .slider-controls .arrow, .article-slider-bloc .slider-controls .arrow { display: block; position: relative; float: left; width: 51px; margin-bottom: -2px; -webkit-transition: background-color 250ms; transition: background-color 250ms; } .half-slider-bloc .slider-controls .arrow.right, .article-slider-bloc .slider-controls .arrow.right { margin-left: -2px; } .half-slider-bloc .slider-controls .arrow:hover, .article-slider-bloc .slider-controls .arrow:hover { background-color: transparent; -webkit-transition: background-color 50ms; transition: background-color 50ms; } .half-slider-bloc .slider-controls .arrow:active, .article-slider-bloc .slider-controls .arrow:active {background-color: rgba(0, 0, 0, 0.1);} .half-slider-bloc .slider-controls .arrow::before, .half-slider-bloc .slider-controls .arrow::after, .article-slider-bloc .slider-controls .arrow::before, .article-slider-bloc .slider-controls .arrow::after { content: ""; position: absolute; width: 2px; height: 16px; left: 46%; top: 21%; background-color: #333; -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } .half-slider-bloc .slider-controls .arrow::after, .article-slider-bloc .slider-controls .arrow::after { top: 45%; -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); transform: rotate(-40deg); } .half-slider-bloc .slider-controls .arrow.right::before, .article-slider-bloc .slider-controls .arrow.right::before {top: 46%;} .half-slider-bloc .slider-controls .arrow.right::after, .article-slider-bloc .slider-controls .arrow.right::after {top: 20%;} .half-slider-bloc .slider-controls .vu, .article-slider-bloc .slider-controls .vu { width: 100px; text-align: center; font-size: 1.2em; padding-top: 12px; } .half-slider-bloc .slider-wrapper { position: absolute; left: 48%; right: -1000px; right: -webkit-calc((-100vw + 100%) / 2); right: calc((-100vw + 100%) / 2); top: 0; width: auto; overflow: hidden; } .half-slider-bloc.inverted .slider-wrapper { left: -1000px; left: -webkit-calc((-100vw + 100%) / 2); left: calc((-100vw + 100%) / 2); right: 50%; } .half-slider-bloc .slider-container { font-size: 0rem; white-space: nowrap; position: relative; } .half-slider-bloc.inverted .slider-container { text-align: right; float: right; } .half-slider-bloc .slider-container .slide { display: inline-block; font-size: 1rem; vertical-align: top; } .half-slider-bloc .slider-container .inner-slide { display: block; } .half-slider-bloc .slider-container .slide:not(:last-child) {margin-right: 10px;} .half-slider-bloc .slider-container .inner-slide:not(:last-child) {margin-bottom: 10px;} @media (max-width: 680px) { .half-slider-bloc .slider-details, .half-slider-bloc.inverted .slider-details { width: 100%; padding-bottom: 80px; margin-left: 0; } .half-slider-bloc .slider-details.top-space { padding-top: 0; } .half-slider-bloc .slider-controls { bottom: 20px; right: 20px; } .half-slider-bloc .slider-controls { width: 200px; right: 10px; } .half-slider-bloc .slider-controls .arrow.right { float: right; } .half-slider-bloc .slider-controls .vu { width: 100%; } .half-slider-bloc .slider-controls > div::before, .half-slider-bloc .slider-controls > div::after { display: none; content: none; } .slider-wrapper-height-handler { display: none; } .half-slider-bloc .slider-wrapper, .half-slider-bloc.inverted .slider-wrapper { position: relative; left: 10px; right: 10px; } .half-slider-bloc .slider-wrapper, .half-slider-bloc.inverted .slider-wrapper { position: relative; width: calc(100% + 10px); left: 0; width: -webkit-calc(100% + 10px); } } @media (max-width: 600px) { .half-slider-bloc .slider-wrapper .slide { max-width: 70%; } .half-slider-bloc .slider-wrapper .slide a, .half-slider-bloc .slider-wrapper .slide .inner-slide, .half-slider-bloc .slider-wrapper .slide img { width: 100%; height: auto; } } /* @end HALF SLIDER BLOC */ /* @group MASON BLOC */ .mason-bloc { } .mason-bloc .mason-col { width: 23.275%; margin-right: 2.3%; float: left; } .mason-bloc .mason-col:nth-child(4) {margin-right: 0;} .mason-bloc .mason-item { width: 23.58%; /*padding-right: 1.72%;*/ } .mason-item-sizer { width: 23.58%; /*padding-right: 1.72%;*/ } .gutter-sizer{ width:1.89%; } @media (max-width: 660px) { .mason-bloc .mason-item { width: 46%; /*padding-right: 1.72%;*/ } .mason-item-sizer { width: 46%; /*padding-right: 1.72%;*/ } .gutter-sizer{ width:4%; } } .mason-bloc .mason-item-push:last-child { margin-right: 0%; } .mason-bloc .mason-item:not(:last-child) { margin-bottom: 80px; } .mason-bloc .mason-item-push:not(:last-child) { margin-bottom: 80px; } .mason-bloc .mason-item-pic { margin-bottom: 20px; } .mason-bloc .mason-item-pic a, .mason-bloc .mason-item-pic img { width: 100%; height: auto; } @media (max-width: 600px) { .mason-bloc .mason-col { width: 48.85%; margin-right: 2.3%; } .mason-bloc .mason-col:nth-child(2) {margin-right: 0;} .mason-bloc .mason-item:last-child { margin-bottom: 80px; } } @media (max-width: 350px) { .mason-bloc .mason-col { width: 100%; margin-right: 0; } .mason-bloc .mason-item, .mason-bloc .mason-item:last-child { margin-bottom: 30px; } } /* @end MASON BLOC */ /* @group WIDE PIC BLOC */ wide-pic-bloc { } .wide-pic-container { position: relative; } .wide-pic-bloc .wide-pic-content { width: 90%; max-width: 660px; padding-right: 2%; padding-bottom: 6%; padding-left: 2%; margin-left: -webkit-calc(42% - 660px / 2); margin-left: calc(42% - 660px / 2); } .wide-pic-bloc.inverted .wide-pic-content { margin-left: -webkit-calc(58% - 660px / 2); margin-left: calc(58% - 660px / 2); } .wide-pic-bloc .wide-pic-slice { position: absolute; height: 100%; top: 0; background-size: auto 100%; } .wide-pic-bloc .wide-pic-slice.left { left: 0; width: -webkit-calc(42% - 660px / 2); width: calc(42% - 660px / 2); background-position: left 0; } .wide-pic-bloc.inverted .wide-pic-slice.left { width: -webkit-calc(58% - 660px / 2); width: calc(58% - 660px / 2); background-position: right 0; } .wide-pic-bloc .wide-pic-slice.right { right: 0; width: -webkit-calc(58% - 660px / 2); width: calc(58% - 660px / 2); background-position: right 0; } .wide-pic-bloc.inverted .wide-pic-slice.right { width: -webkit-calc(42% - 660px / 2); width: calc(42% - 660px / 2); background-position: left 0; } @media (max-width: 900px) { .wide-pic-bloc .wide-pic-content.top-space { padding-top: 0; } .wide-pic-bloc .wide-pic-content { width: 60%; margin-left: 0 !important; } .wide-pic-bloc .wide-pic-slice.left { display: none; } .wide-pic-bloc .wide-pic-slice.right { right: 0; width: 40% !important; background-position: right 0 !important; } } /* @end WIDE PIC BLOC */ /* @group PLAYLIST BLOC */ .playlist-bloc { } .playlist-bloc .playlist-cover, .playlist-bloc .playlist-content { float: left; } .playlist-bloc .playlist-cover { width: 40%; margin-right: 4%; } .playlist-bloc .playlist-cover img { width: 100%; height: auto; } .playlist-bloc .playlist-content { width: 56%; } @media (max-width: 600px) { .playlist-bloc .playlist-content.top-space { padding-top: 15px; } .playlist-bloc .playlist-cover, .playlist-bloc .playlist-content { float: none; } .playlist-bloc .playlist-cover { width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; } .playlist-bloc .playlist-content { width: 100%; } } /* @end PLAYLIST BLOC */ /* @group MEDIA BLOC */ .media-bloc { } .media-bloc .media-details, .media-bloc .media-container { float: left; } .media-bloc.full-width .media-details, .media-bloc.full-width .media-container { float: none; } .media-bloc .media-details { width: 44%; margin-right: 4%; } .media-bloc .media-container { width: 52%; position: relative; } .media-bloc.inverted .media-details { width: 44%; margin-right: 0; } .media-bloc.inverted .media-container { width: 52%; margin-right: 4%; } .media-bloc.full-width .media-details { width: auto; margin-left: auto; margin-right: auto; padding-top: 20px; padding-bottom: 20px; } .media-bloc.full-width .media-container { width: 100%; } .article-media-container { position: relative; } .media-bloc .media-container.yt-ratio::after, .media-bloc .media-container.sc-ratio::after, .article-media-container.yt-ratio::after, .article-media-container.sc-ratio::after { content: ""; display: block; top: 0; } .media-bloc .media-container.yt-ratio::after, .article-media-container.yt-ratio::after {padding-bottom: 56.25%;} .media-bloc .media-container.sc-ratio::after, .article-media-container.sc-ratio::after {padding-bottom: 100%;} .media-bloc .media-container > img, .media-bloc .media-container > a, .media-bloc .media-container > a > img, .media-bloc .media-container > iframe, .article-media-container > iframe { width: 100%; } .media-bloc .media-container > img, .media-bloc .media-container > a, .media-bloc .media-container > a > img { height: auto; } .media-bloc .media-container > iframe, .media-bloc .media-container > .iframe, .article-media-container > iframe, .article-media-container > .iframe { position: absolute; top: 0; width: 100%; height: 100%; } .quarter .media-container > iframe{ width: 100%; height: 100%; } @media (max-width: 740px) { .media-bloc .media-details.top-space { padding-top: 15px; } .media-bloc .media-details, .media-bloc.inverted .media-details, .media-bloc.full-width .media-details, .media-bloc .media-container, .media-bloc.inverted .media-container { float: none; width: 100%; margin-right: 0; margin-left: 0; } } /* @end MEDIA BLOC */ /* @group MOSAIC BLOC */ .mosaic-bloc { } .mosaic-bloc .mosaic-item { position: relative; float: left; margin-right: 1%; margin-bottom: 1%; } .mosaic-bloc .mosaic-item img { width: 100%; height: auto; } .mosaic-bloc .mosaic-item .inner { position: absolute; top: 8%; bottom: 8%; left: 8%; right: 8%; text-align: center; padding: 25px; background-color: rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -webkit-transition: background-color 450ms 150ms, box-shadow 150ms 150ms; transition: background-color 450ms 150ms, box-shadow 150ms 150ms; } .mosaic-bloc .mosaic-item .inner .v-centered { width: 98%; } .mosaic-bloc .mosaic-item .item-title { padding-top: 10%; margin-bottom: 25%; text-transform: uppercase; font-size: 0.9em; line-height: 1.2em; font-weight: 700; opacity: 0; -webkit-transition: opacity 250ms 0ms; transition: opacity 250ms 0ms; } .mosaic-bloc .mosaic-item .link-label { font-weight: 700; text-decoration: underline; opacity: 0; -webkit-transition: opacity 250ms 150ms; transition: opacity 250ms 150ms; } .mosaic-bloc a.mosaic-item:hover .inner { background-color: rgba(255, 255, 255, 1); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); -webkit-transition-delay: 0ms, 0ms; transition-delay: 0ms, 0ms; -webkit-transition-duration: 200ms, 150ms; transition-duration: 200ms, 150ms; } .mosaic-bloc .mosaic-item:hover .item-title { opacity: 1; -webkit-transition-delay: 150ms; transition-delay: 150ms; } .mosaic-bloc .mosaic-item:hover .link-label { opacity: 0.5; -webkit-transition-delay: 200ms; transition-delay: 200ms; } @media (max-width: 960px) { .mosaic-bloc .mosaic-item .inner { padding: 5px; } } @media (min-width: 800px) { .mosaic-bloc .mosaic-item {width: 19.2%;} .mosaic-bloc .mosaic-item:nth-child(5n) {margin-right: 0;} } @media (max-width: 799px) and (min-width: 670px) { .mosaic-bloc .mosaic-item {width: 24.25%;} .mosaic-bloc .mosaic-item:nth-child(4n) {margin-right: 0;} } @media (max-width: 669px) and (min-width: 540px) { .mosaic-bloc .mosaic-item {width: 32.666%;} .mosaic-bloc .mosaic-item:nth-child(3n) {margin-right: 0;} } @media (max-width: 539px) { .mosaic-bloc .mosaic-item {width: 49.5%;} .mosaic-bloc .mosaic-item:nth-child(2n) {margin-right: 0;} } /* @end MOSAIC BLOC */ /* @group NL BLOC */ .newsletter-subscription-field { font-size: 1.6em; width: 100%; border: 0 none; padding: 26px 28px; margin-top: 5%; margin-bottom: 30px; } .newsletter-subscription-field-inp1{ float: left; margin-right: 1%; margin-top: 1%; width: 49%; font-size: 1.6em; border: 0 none; padding: 2%; } .newsletter-subscription-field-inp2{ float: left; margin-top: 1%; width: 50%; font-size: 1.6em; border: 0 none; padding: 2%; } .newsletter-subscription-field-select{ border: 0 none; font-size: 1.6em; padding: 2.36%; width: 100%; cursor: pointer; } .newsletter-subscription-field-select:active{ outline: 0; } .newsletter-subscription-field-select-div{ width: 50%; position: relative; margin-top: 1%; display: inline-block; } .newsletter-subscription-field-select-div span{ border-bottom: 2px solid #333; border-left: 2px solid #333; height: 12px; pointer-events: none; position: absolute; right: 2%; top: calc(50% - 6px); transform: rotate(-45deg); width: 12px; z-index: 51; } .newsletter-subscription-field-select-div:after{ background: #fff none repeat scroll 0 0; content: " "; height: 100%; position: absolute; right: 0; top: 0; width: 5%; pointer-events: none; } .newsletter-subscription-field-select option{ font-size: 0.7em; padding: 2%; } .newsletter-subscription-field-sub{ background: #bababa; color: #FFF; margin-top: 1%; } .newsletter-subscription-title{ margin-bottom: 3%; margin-top: 5%; } @media (max-width: 600px) { .newsletter-subscription-field, .newsletter-subscription-field-inp1, .newsletter-subscription-field-inp2, .newsletter-subscription-field-select{ font-size:1em; } } .newsletter-subscription-field::-webkit-input-placeholder, .newsletter-subscription-field-inp1::-webkit-input-placeholder, .newsletter-subscription-field-inp2::-webkit-input-placeholder {color: inherit; font-weight: 300;} .newsletter-subscription-field:-ms-input-placeholder, .newsletter-subscription-field-inp1:-ms-input-placeholder, .newsletter-subscription-field-inp2:-ms-input-placeholder {color: inherit; font-weight: 300;} .newsletter-subscription-field::-moz-placeholder, .newsletter-subscription-field-inp1::-moz-placeholder, .newsletter-subscription-field-inp2::-moz-placeholder {color: inherit; font-weight: 300;} /* @end NL BLOC */ /* @end FEED BLOCS */ /* @group ARTICLES BLOCS */ /* @group COMMON */ .article-bloc { } .article-bloc.bottom-sep { padding-bottom: 120px; margin-bottom: 60px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .article-content-part { margin-top: 20px; margin-bottom: 20px; } .article-header-wrapper, .article-content-wrapper { max-width: 860px; } .article-header-wrapper { margin-bottom: 80px; } .article-content-wrapper { padding-right: 5%; } .article-title { font-size: 3.6em; line-height: 1em; font-weight: 700; margin-top: 20px; margin-bottom: 40px; } .article-content-part p { font-size: 1.1em; line-height: 1.5em; font-weight: 300; margin-top: 20px; margin-bottom: 20px; } .article-content-part p:not([class]) { padding-right: 7.5%; } .article-header-wrapper .article-standfirst { font-size: 1.5em; line-height: 1.2em; font-weight: 300; margin-top: 20px; margin-bottom: 30px; } .article-content-part p a { display: inline-block; font-weight: 600; line-height: 1.2em; text-decoration: none; border-bottom: 1px dotted; } .article-content-part p a:hover { border-bottom: 1px dashed; } .article-content-part .big { font-size: 3.5em; line-height: 1.12em; font-weight: 300; margin-top: 20px; margin-bottom: 30px; } .article-content-part img { max-width: 100%; height: auto; } /* @end COMMON */ /* @group ALL BLOCS */ .article-slider-bloc { position: relative; z-index: 0; margin-top: 40px; margin-bottom: 40px; } .article-slider-bloc .slider-controls-wrapper { position: absolute; z-index: 1; width: 100%; top: 140px; } .article-slider-bloc .slider-controls-wrapper, .article-slider-bloc .slider-controls-wrapper .slider-controls { pointer-events: none; } .article-slider-bloc:not(.activated) .slider-controls { display:none; } .article-slider-bloc .slider-controls .arrow, .article-slider-bloc .slider-controls .vu { pointer-events: all; } .article-slider-bloc .slider-wrapper { overflow: hidden; } .article-slider-bloc .slider-container { font-size: 0rem; white-space: nowrap; position:relative; } .article-slider-bloc .slider-container .slide { display: inline-block; font-size: 1rem; vertical-align: top; -webkit-transition: margin 250ms; transition: margin 250ms; } .article-slider-bloc .slider-container .inner-slide { display: block; } .article-slider-bloc .slider-container .slide:not(:last-child) {margin-right: 10px;} .article-slider-bloc .slider-container .inner-slide:not(:last-child) {margin-bottom: 10px;} .article-slider-bloc .slider-container .slide.current:not(:first-child) {margin-left: 300px;} .article-slider-bloc .slider-container .slide.current {margin-left: 300px;} .article-media-bloc { margin-top: 40px; margin-bottom: 40px; } .article-media-bloc img, .article-content-wrapper iframe, .article-content-part .inner-media { max-width: 100%; } .article-content-part .inner-media.rounded-mask { max-width: 500px; } .article-media-bloc.full-width-media > img, .article-media-bloc.full-width-media > a, .article-media-bloc.full-width-media > a > img, .article-media-bloc.full-width-media > iframe { width: 100%; } .article-media-bloc img, .article-media-bloc.full-width-media > a { height: auto; } .article-content-part .inner-media { display: inline-block; } .article-content-part .inner-media.float-left { float: left; margin-left: -60px; margin-right: 40px; margin-bottom: 40px; } .article-content-part .inner-media img { max-width: 100%; height: auto; } .article-wide-pic-bloc { } .article-wide-pic-bloc .wide-pic { height: 500px; background-position: center center; background-repeat: no-repeat; background-size: cover; } .article-address-box { width: 200px; margin: 40px 60px 40px -60px; text-align: center; float: left; } .article-address-box .img-bloc { width: 100%; } .article-address-box .img-bloc { background-position: center center; background-size: cover; } .article-address-box .img-bloc::after { content: ""; display: block; padding-bottom: 100%; } .article-address-box .name { font-size: 1.2em; font-weight: 700; margin-top: 15px; margin-bottom: 15px; } .article-address-box .info { line-height: 1.2em; } @media (max-width: 1279px) { .article-content-part .inner-media.float-left, .article-address-box {margin-left: -30px;} } @media (max-width: 1229px) { .article-content-part .inner-media.float-left, .article-address-box {margin-left: 0px;} } @media (max-width: 1160px) { .article-wide-pic-bloc .wide-pic {height: auto;} .article-wide-pic-bloc .wide-pic::after { content: ""; display: block; padding-top: 43.103%; } } /* @end ALL BLOCS */ /* @end ARTICLES BLOCS */ /* @group MISC BLOCS */ /* @group PAGINATION */ .page-pagination { margin-top: 50px; margin-bottom: 50px; } .page-pagination-list { text-align: center; } .page-pagination-list > li { display: inline-block; margin-right: 4px; } .page-pagination-arrow, .page-pagination-list-link { display: block; width: 40px; height: 40px; font-size: 0.9em; line-height: 40px; vertical-align: middle; text-align: center; text-decoration: none; border: 1px solid #fff; border-radius: 100%; background-clip: padding-box; -webkit-transition: background-color 250ms; transition: background-color 250ms; } .page-pagination-arrow:hover, .page-pagination-list-link:hover { background-color: rgba(255, 255, 255, 0.5); -webkit-transition: background-color 50ms; transition: background-color 50ms; } .page-pagination-arrow:active, .page-pagination-arrow.current, .page-pagination-list-link:active, .page-pagination-list-link.current { background-color: #fff; } .page-pagination-arrow { position: relative; margin-bottom: 10px; } .page-pagination-arrow.left { float: left; margin-right: 10px; } .page-pagination-arrow.right { float: right; margin-left: 10px; } .page-pagination-arrow::before, .page-pagination-arrow::after { content: ""; position: absolute; width: 2px; height: 10px; left: 17px; background-color: #333; -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } .page-pagination-arrow::after, .page-pagination-arrow.right::after { -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); transform: rotate(-40deg); } .page-pagination-arrow::after, .page-pagination-arrow.right::before {top: 18px;} .page-pagination-arrow::before, .page-pagination-arrow.right::after {top: 11px;} .page-pagination-arrow.right::before, .page-pagination-arrow.right::after {left: 19px;} /* @end PAGINATION */ /* @group INSTA FEED */ .insta-feed { position: relative; background-color: #fff; z-index: 0; } .insta-feed::after { content: ""; display: block; padding-bottom: 55%; } .insta-feed-follow-box { position: absolute; width: 275px; height: 275px; margin-left: auto; margin-right: auto; border: 2px solid #333; background-color: #fff; text-align: center; padding: 60px 50px; z-index: 1; text-decoration: none; display: block; -webkit-transition: border-width 100ms, padding 100ms; transition: border-width 100ms, padding 100ms; } .insta-feed-follow-box:hover { border-width: 6px; padding: 56px 46px; -webkit-transition: border-width 0ms, padding 0ms; transition: border-width 0ms, padding 0ms; } .insta-feed-follow-box .icon { width: 18px; height: 18px; } .insta-feed-follow-box .label { font-size: 1.8em; line-height: 1em; margin-top: 12px; margin-bottom: 10px; font-weight: 300; } .insta-feed-follow-box .follow-link { text-decoration: none; border-bottom: 1px solid #aaa; } .insta-feed-pic-container { position: absolute; width: auto; height: auto; left: 40px; right: 40px; top: 40px; bottom: 40px; overflow: hidden; z-index: 0; } .insta-feed-item { position: absolute; width: 25%; cursor: move; cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .insta-feed-item.ui-draggable-dragging, .insta-feed-item:active { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } .insta-feed-item img { width: 100%; height: auto; } @media (max-width: 960px) { .insta-feed { padding-top: 20px; padding-bottom: 20px; } .insta-feed::after { content: none; } .insta-feed-follow-box { position: relative; top: auto; left: auto; -webkit-transform: none; -ms-transform: none; transform: none; z-index: 0; } .insta-feed-pic-container { position: relative; left: auto; right: auto; top: auto; bottom: auto; padding: 10px; } .insta-feed-item { position: relative; float: left; left: auto !important; top: auto !important; margin-bottom: 1%; margin-right: 1%; } .insta-feed-item img { width: 100%; height: auto; } } @media (max-width: 960px) and (min-width: 600px) { .insta-feed-item {width: 24.25%;} .insta-feed-item:nth-child(4n) {margin-right: 0;} } @media (max-width: 599px) and (min-width: 360px) { .insta-feed-item {width: 32.666%;} .insta-feed-item:nth-child(3n) {margin-right: 0;} } @media (max-width: 359px) { .insta-feed-item {width: 49.5%;} .insta-feed-item:nth-child(2n) {margin-right: 0;} } /* @end INSTA FEED */ /* @group AGENDA BLOC */ .action-btn { text-decoration: none; float: left; padding: 9px 16px 9px 12px; margin-left: 5px; background-color: #fff; font-weight: 600; } .action-btn:first-child {margin-left: 0;} .country-filter { float: left; min-height: 40px; } .country-filter .action-btn { -webkit-transition: color 100ms ease, background-color 100ms ease; -moz-transition: color 100ms ease, background-color 100ms ease; -o-transition: color 100ms ease, background-color 100ms ease; transition: color 100ms ease, background-color 100ms ease; } .country-filter .action-btn:hover { background-color: #eee; } .action-btn.past-events-btn:hover { background-color: #222; } .country-filter .action-btn.active, .action-btn.past-events-btn { color: #fff; background-color: #000000; } .country-filter .action-btn::after { content: '+'; font-weight: 200; font-size: 26px; float: right; margin-left: 12px; filter: alpha(opacity=99); opacity:0.999; -webkit-transition: color 100ms ease, background-color 100ms ease; -moz-transition: color 100ms ease, background-color 100ms ease; -o-transition: color 100ms ease, background-color 100ms ease; transition: color 100ms ease, background-color 100ms ease; -webkit-transition: -webkit-transform 300ms ease; -webkit-transition: transform 300ms ease; transition: transform 300ms ease; } .country-filter .action-btn.active::after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .action-btn.past-events-btn { float: right; padding-top: 0px; padding-bottom: 0px; line-height: 40px; } .action-btn.past-events-btn svg { margin-right: 13px; margin-top: 5px; float: left; } .agenda-bloc, .agenda-month { border-bottom: #fafcfc 1px solid; padding: 40px 0; clear: both; } .agenda-month { margin-top: 53px; font-size: 3.75em; line-height: 0.68em; font-weight: bold; font-style: italic; text-transform: uppercase; } .agenda-bloc { padding-top: 60px; position: relative; } .agenda-bloc a { text-decoration: none; opacity: 1; } .agenda-bloc a.img-link { display: block; } .agenda-bloc a:not(.img-link) { -webkit-transition: opacity 0.15s; -moz-transition: opacity 0.15s; -o-transition: opacity 0.15s; transition: opacity 0.15s; } .agenda-bloc a:hover { opacity: 0.8; } .agenda-bloc a.img-link:hover { opacity: 0.95; } .agenda-bloc img { float: left; margin-right: 36px; margin-top: -20px; } .black-bg-label { text-transform: uppercase; font-weight: lighter; color: #fff; display:inline-block; padding: 6px 13px; background-color: #000; font-size: 0.75em; line-height: 1em; } .date-agenda { font-size: 1.25em; font-weight: 300; margin: 15px 0; } .date-agenda span { font-size: 2em; line-height: 1em; font-weight: bold; } .event-title-agenda { font-size: 1.25em; font-weight: bold; margin-bottom: 20px; max-width: 550px; line-height: 1em; display: inline-block; } .agenda-bloc-big .event-title-agenda { font-size: 2.5em; } .event-location-agenda { display: block; text-decoration: none; } .event-location-agenda .icon {vertical-align: top;} .event-links { float: right; width: 275px; } .event-links a { text-decoration: none; display: inline-block; margin-bottom: 1em; font-weight: bold; border-bottom: 1px solid #afb6b7; padding-bottom: 2px; } @media (max-width: 1024px) { .event-links li { display: inline-block; margin-left: 15px; } .event-links a { margin-bottom: 0; } .event-title-agenda { display: block; max-width: 95%; } } @media (max-width: 768px) { .agenda-bloc-big img { width: 200px; height: auto; margin-right: 5%; } .agenda-bloc-big .event-title-agenda { font-size: 1.25em; } .date-agenda { clear: right; } } @media (max-width: 660px) { .agenda-bloc, .agenda-month { padding: 20px 0; padding-bottom: 50px; } .agenda-month { font-size: 2em; padding: 15px 0; } .agenda-bloc img { /*display: none;*/ width: 30%; height: auto; margin-top: 0; } .event-location-agenda { margin-left: 35%; } .event-title-agenda { margin-top: 20px; } .event-links { position: absolute; bottom: 20px; left: 35%; } .event-links li { float: left; margin-left: 0; margin-right: 15px; } .action-btn.past-events-btn { float: none; display: inline-block; margin-bottom: 11px; } } @media (max-width: 600px) { .agenda-bloc img { } } @media (max-width: 440px) { .agenda-bloc img { margin-bottom: 5%; } .event-title-agenda { display: block; clear: left; } .event-location-agenda { margin-left: 0; } .event-links { left: 0; } } /* @end AGENDA BLOC */ /* @group ARTIST BLOCS */ .header-artist { width: 100%; color: #fff; position: relative; margin: -2px auto 0; overflow: hidden; max-height: 750px; background-position: center; } .background-header-artist { background-size: cover; padding-bottom: 44%; width: 100%; } .artist-cover-overlay { position: absolute; min-height: 168px; padding-bottom: 15px; bottom: 0; width: 100%; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .header-artist h1, .header-artist .like-box-mask{ position: absolute; } .header-artist h1 { font-size: 3.75em; font-weight: bold; margin-bottom: 16px; line-height: 1em; bottom: 86px; max-width: 60%; } .header-artist .like-box-mask { margin-left: -5px; margin-bottom: 20px; bottom: 0; } .header-artist .like-box-mask::before { display: block; position: absolute; left: 15px; top: 20px; height: 0px; width: 140px; content: ''; /*-webkit-box-shadow: 0px 0px 70px 10px rgba(255,255,255,1); -moz-box-shadow: 0px 0px 70px 10px rgba(255,255,255,1); box-shadow: 0px 0px 70px 10px rgba(255,255,255,1);*/ /*-webkit-box-shadow: inset 0px 0px 10px 0px rgba(255,255,255,1); -moz-box-shadow: inset 0px 0px 10px 0px rgba(255,255,255,1); box-shadow: inset 0px 0px 10px 0px rgba(255,255,255,1);*/ } .header-artist .last-tweet { text-align: right; float:right; width: 330px; font-size: 1.25em; line-height: 1.2em; font-weight: 300; } .last-tweet a { vertical-align: top; display: inline-block; margin-right: 8px; line-height: 21px; text-decoration:none; } .header-artist .date-tweet { font-size: 0.75rem; } .header-artist .tweet-content { margin-top: 0.5em; } .artist-blocks-container { overflow: hidden; } .artist-blocks-container .column-container { width: 48.9%; margin-top: 4%; float: left; } .column-container.left { width: 58.8%; } .column-container.right { width: 38.9%; } .artist-blocks-container .column-container .full, .artist-blocks-container .column-container .quarter { margin-bottom: 4%; background-color: #fff; border-top: 2px #000 solid; float: left; } .artist-blocks-container .column-container .quarter { width: 45.7%; margin-left: 4.3%; margin-bottom: 4%; } .artist-blocks-container .column-container .full { width: 100%; } .artist-blocks-container .column-container.left {} .artist-blocks-container .column-container .quarter { margin-left: 0%; width: 47.76%; } .artist-blocks-container .column-container .quarter:nth-child(2n) { float: right; } .artist-blocks-container .column-container.right { float: right; } .artist-blocks-container h2 { font-weight: bold; font-size: 1em; padding-top: 0.8em; padding-bottom: 1.3em; } .artist-blocks-container p { font-size: 1.5625em; line-height: 1.2; font-weight: 300; } .artist-blocks-container p + * { margin-top: 1em; } .artist-blocks-container .quarter p { font-size: 1.25em; } .artist-blocks-container p.content-profile{ font-size: 1.1em; padding-bottom:15px; } .artist-blocks-container div > img, .artist-blocks-container div > object, .artist-blocks-container div > object embed { width: 100%; } .artist-blocks-container > div > img { height: auto; } .artist-blocks-container h2, .artist-blocks-container p { padding-left: 20px; padding-right: 20px; } .artist-blocks-container .full > *:last-child:not(ul), .artist-blocks-container .quarter > *:last-child:not(ul) { margin-bottom: 25px; display: block; } .artist-blocks-container .link-list li a svg { margin-right: 10px; } .artist-blocks-container .link-list li a { display:inline-block; width:90%; padding-left:8%; text-decoration:none; } .artist-blocks-container .link-list li a:hover { text-decoration:underline; } .artist-blocks-container .tour-date { padding-bottom: 17px; border-top: #e9f3f4 1px solid; margin-top: 7px; } .artist-blocks-container .tour-date:last-child { margin-bottom: 0; } .artist-blocks-container .date-agenda { font-size: 1.25em; padding: 0 12px ; } .artist-blocks-container .date-agenda span{ font-size: 1.5em; } .artist-blocks-container .event-location-agenda { font-size: 1.25em; font-weight: bold; padding: 0 12px; margin-bottom: 12px; margin-left: -5px; } .artist-blocks-container .event-links { padding: 0 12px; width: 100%; margin-right: 10px; float: none; position: relative; } .artist-blocks-container .event-links li { float: left; margin-right: 10px; margin-left: 0; } .artist-blocks-container .event-links li:first-child { margin-left : 0; } .artist-blocks-container .event-links li .icon { margin-right: 5px; } .artist-blocks-container .download-links li a { display: block; min-height: 59px; line-height: 59px; border-top: #e9f3f4 1px solid; text-decoration: none; padding-right: 10px; padding-left:25px; } .artist-blocks-container .download-links li a img { float: left; margin: 4px 20px 4px 10px; } .artist-blocks-container .download-links li a .icon { margin-right: 10px; } .artist-blocks-container .column-container a.see-more-link { display: block; text-decoration: none; border-bottom: 1px solid #afb6b7; margin: 9px auto 38px; max-width: 144px; font-weight: bold; } .artist-blocks-container .see-more-link::before { display: inline-block; font-weight: 100; content: '+'; margin-right: 10px; font-size: 22px; vertical-align: bottom; } .artist-blocks-container .media-container > * { width: 100%; } .artist-blocks-container .media-container > * > * { width: 100%; } @media (max-width: 1050px) { .artist-blocks-container .link-list li a { padding-left: 10px; } } @media (max-width: 1023px) { .artist-blocks-container .event-location-agenda { margin-left: 0; margin-top: 22px; float: left; } .column-container.left { width: 58.8%; } .column-container.right { width: 38.9%; } .artist-blocks-container .tour-date { padding: 15px; margin: 0; } .artist-blocks-container .date-agenda { float: left; margin: 10px; margin-right: 20px; } .artist-blocks-container .event-links{ left: 0; width: auto; clear: left; } .artist-blocks-container .event-links > li { float: none; margin-top: 22px; } .artist-blocks-container .link-list li a { padding-left: 20px; } .artist-blocks-container .column-container .quarter { width: 100%; margin-left: 0; margin-right: 0; } .artist-blocks-container .download-links li a{ padding: 10px 20px; } } @media (max-width: 768px) { .header-artist h1 { max-width: none; } .artist-blocks-container .column-container { width: 100%; } .artist-blocks-container .column-container:not(:first-child) { margin-top: 0; } .header-artist .last-tweet { font-size: 0.95em; line-height: 1em; bottom: 10px; right: 10px; position: absolute; } .header-artist .fb-like-box{ margin-bottom: 0; } .artist-blocks-container p { font-size: 1.25em; } } @media (max-width: 720px) { .header-artist .last-tweet > *:not(iframe){ display: none; } .header-artist .fb-like-box { margin-left: -63px; } .like-box-mask { width: 150px; height: 55px; overflow: hidden; margin-left:0; } .fb-like-box{ position: relative; } .header-artist .like-box-mask, .header-artist .last-tweet { position: absolute; bottom: -80px; margin-left: 0; } .header-artist .last-tweet { margin-bottom: 20px; } .header-artist { margin-bottom: 50px; overflow: visible; } .header-artist h1 { margin: 0; bottom: 0.5em; position: absolute; } } @media (max-width: 440px) { } /* @end ARTIST BLOCS */ /* @group ABOUT PAGE */ .serif-title { font-size: 1.125em; font-family: "Times New Roman", serif; text-transform: uppercase; text-align: center; margin-top: 22px; } .serif-title::before, .serif-title::after { content: ''; display:inline-block; vertical-align: middle; height: 1px; width: 24px; margin: 0 12px; background-color: #1d1d1b; color: #1d1d1b; } .year-nav { position: fixed; top: 35%; z-index: 5; left: 0; } .year-nav a { display: inline-block; text-decoration: none; height: 32px; width: 40px; padding-left: 14px; color: #808080; font-size: 0.75em; } .year-nav a:hover, .year-nav a.active { color: #1d1d1b; } .wrap-years { overflow: hidden; } .years-container { position: relative; width: 1300px; } @media (max-width: 1300px) { .wrap-years { width: 100%; position: relative; height: 15700px; } .years-container { left: 50%; margin-left: -650px; } } .year-section { position: relative; } .year-section:first-of-type { margin-top: 90px; /* 30px */ } .year-section { width: 100%; position: relative; } .year-section .background-img { position: absolute; z-index: 0; } .year-section > * { position: absolute; } .year-section img { height: auto; } .year-section .media-embed { overflow: hidden; } .year-section .media-embed.soundcloud > iframe { margin-left: -164px; } .year-section .media-embed.soundcloud.full > iframe { margin-left: 0; } .left-0 { left: 0%; } .left-1 { left: 12.5%; } .left-2 { left: 25.0%; } .left-3 { left: 37.5%; } .left-4 { left: 50.0%; } .left-5 { left: 62.5%; } .left-6 { left: 75.0%; } .left-7 { left: 87.5%; } .right-0 { right: 0%; } .right-1 { right: 12.5%; } .right-2 { right: 25.0%; } .right-3 { right: 37.5%; } .right-4 { right: 50.0%; } .right-5 { right: 62.5%; } .right-6 { right: 75.0%; } .right-7 { right: 87.5%; } .sprite { width: 80px; height: 80px; position: absolute; background: url("../images/about/KITSUNE_JOURNAL_V2_TIMELINE_20140512_SPRITE.png") no-repeat left top;} .cintre { background-position: -80px; } .fox { background-position: -240px; } .microphone {background-position: -320px;} .shop { background-position: -160px; } /* year 2015-2 */ .year-2015-2 { padding-bottom: 171%; margin-bottom: 175px; } .year-2015-2-bloc-text-1 { margin-top: 6.9375%; } .year-2015-2-bloc-text-2 { margin-top: 80.4%; } .year-2015-2-bloc-text-4 { margin-top: 133.3%; } .gmaps-3 { width: 540px; height: 287px;} .year-2015-2-img-1 { margin-top: 0%; } .year-2015-2-img-2 { margin-top: 22.9%;} .year-2015-2-img-3 { margin-top: 59.4%;} .year-2015-2-img-4 { margin-top: -9.6%; } .year-2015-2-img-5 { margin-top: 22.9%; } .year-2015-2-img-7 { margin-top: 80.4%; } .year-2015-2-img-9 { margin-top: 97.7%; } .year-2015-2-img-10 { margin-top: 125.55%; } .year-2015-2-img-11 { margin-top: 149.2%; } .year-2015-2-img-18 { margin-top: 110.85%;} .year-2015-2 .fox { margin-top: 118%; margin-left: 6.45%; } .year-2015-2 .cintre { margin-top: 55.5%; margin-left: 59.3%; } /* year 2015 */ .year-2015 { padding-bottom: 153%; margin-bottom: 65px; } .year-2015-bloc-text-1 { margin-top: 32%; } .year-2015-bloc-text-2 { margin-top: 70%; min-height: 228px; } /* year 2014 */ .year-2014 { padding-bottom: 210.53125%; margin-bottom: 65px; } .year-2014 .background-img:nth-of-type(1) { top: 60px; right: -60px; } .year-2014 .background-img:nth-of-type(2) { bottom: 0px; right: 30px; } .year-2014-media-1 {margin-top: 138.203125%; width: 50%;} .year-2014-bloc-text-1 { margin-top: 25.9375%; } .year-2014-bloc-text-2 { margin-top: 58.671875%; } .year-2014-bloc-text-3 { margin-top: 100.46875%; } .year-2014-bloc-text-4 { margin-top: 148.359375%; } .gmaps-1 { width: 481px; height: 336px;} .year-img-1 { margin-top: 0%; } .year-img-2 { margin-top: 41.015625%;} .year-img-3 { margin-top: 23.5%;} .year-img-4 { margin-top: 4.53125%; } .year-img-5 { margin-top: 8.75%; } .year-img-6 { margin-top: 17.265625%; } .year-img-7 { margin-top: 81.171875%; } .year-img-8 { margin-top: 73.671875%; } .year-img-9 { margin-top: 41.015625%; } .year-img-10 { margin-top: 46.875%; left: 87.7%; } .year-img-11 { margin-top: 73.671875%; } .year-img-12 { margin-top: 100.46875%; } .year-img-13 { margin-top: 115.46875%; } .year-img-14 { margin-top: 115.46875%; right: 4%;} .year-img-15 { margin-top: 166%;} .year-img-16 { margin-top: 166%;} .year-img-17 { margin-top: 151.21%; } .year-img-18 { margin-top: 151.25%; right: -7.96875%;} .year-2014 .fox { margin-top: 118%; margin-left: 6.45%; } .year-2014 .cintre { margin-top: 55.5%; margin-left: 59.3%; } /* year 2013 */ .year-2013 { padding-bottom: 165%; margin-bottom: 170px; } .year-2013 .background-img:nth-of-type(1) { width: 120.390625%; top: 8.1%; left: -4.453125%; } .year-2013-media-1 {margin-top: 4.921875%;} .year-2013-media-2 {margin-top: 144.921875%; width:480px;} .year-2013-media-3 {margin-top: 128.828125%;} .year-2013-bloc-text-1 { margin-top: 32.890625%;} .year-2013-bloc-text-2 { margin-top: 85.390625%;} .year-2013-bloc-text-3 { margin-top: 149.921875%;} .year-img-19 { margin-top: 32.890625%; left: -0.05%;} .year-img-20 { margin-top: 32.890625%;} .year-img-21 { margin-top: 0.14%;} .year-img-22 { margin-top: 72.1875%;} .year-img-23 { margin-top: 47.96875%;} .year-img-24 { margin-top: 47.96875%; right: -0.19%;} .year-img-25 { margin-top: 83.828125%; left: 75.1%;} .year-img-26 { margin-top: 105.859375%;} .year-img-27 { margin-top: 103.828125%;} .year-img-28 { margin-top: 119.84375%;} .year-img-29 { margin-top: 103.828125%;} .year-img-30 { margin-top: 128.828125%;} .year-img-31 { margin-top: 149.921875%;} .year-2013 .disc { margin-top: 73%; margin-left: 9.45%; } .year-2013 .cintre { margin-top: 114%; margin-left: 84.3%; } /* year 2012 */ .year-2012 { padding-bottom: 128.28125%; margin-bottom: 72px; } .year-2012 .background-img:nth-of-type(1) { width: 110.15625%; top: 0; left: 0; } .year-2012-media-1 { margin-top: 3.28125%;} .year-2012-bloc-text-1 {margin-top: 24.375%;} .year-2012-bloc-text-2 {margin-top: 88.17%;} .year-2012-bloc-text-3 {margin-top: 52.03125%;} .year-img-32 { margin-top: 4.140625%;} .year-img-33 { margin-top: 21.25%;} .year-img-34 { margin-top: 39.453125%;} .year-img-35 { margin-top: 24.296875%;} .year-img-36 { margin-top: 52%;} .year-img-37 { margin-top: 41.953125%;} img.year-img-38 { margin-top: 39.453125%;} .year-img-39 { margin-top: 79.49%;} .year-img-40 { margin-top: 66.95%;} .year-img-41 { margin-top: 52%} .year-img-42 { margin-top: 73.30%;} .year-2012 .microphone { margin-top: 85%; margin-left: 33.3%; } /* year 2011 */ .year-2011 { padding-bottom: 72.1875%; margin-bottom: 123px; } .year-2011 .background-img:nth-of-type(1) { width: 95.78125%; top: 0; left: 9.84375%; } .year-2011-bloc-text-1 { margin-top: 19.21875%} .year-2011-media-1 { margin-top: 19.21875%;} .year-img-43 { margin-top: 4.51%;} .year-img-44 { margin-top: 42.734375%;} .year-img-45 { margin-top: 35.15%;} .year-img-46 { margin-top: 36.09375%;} /* year 2010 */ .year-2010 { padding-bottom: 96%; } .year-2010 .background-img:nth-of-type(1) { width: 122.8125%; top: 0.859375%; left: -12.265625%; } .year-2010-bloc-text-1 { margin-top: 38.94%;} p.citation-2010 { width: 35.5%; margin-top: 9.45%; } .year-img-47 { margin-top: 13.984375%;} .year-img-48 { margin-top: 0%;} .year-img-49 { margin-top: 54.02%;} .year-img-50 { margin-top: 54.02%;} .year-img-51 { margin-top: 80.4%;} .year-img-52 { margin-top: 29.65%; left: 50.1%;} .year-img-53 { margin-top: 67.9%;} .year-img-54 { margin-top: 67.9%;} .year-2010 .fox { margin-top: 5%; margin-left: 22%; } /*year 2009*/ .year-2009{ padding-bottom: 78.203125%; margin-bottom: 8.828125%; } .year-2009 > .disc { margin-top: 39%; left: -3%;} .year-2009 > .cintre { margin-top: 51.28%; right: 10%;} .year-2009-bloc-text-1 { margin-top: 36.2%;} .year-img-77 {margin-top: 10.5%;} .year-img-76 {margin-top: 31.328125%;} .year-img-75 {margin-top: 21.6%;} .year-img-74 {margin-top: 56.39%;} .year-img-73 {bottom: 0;} .year-img-72 {margin-top: 54.5%;} .year-img-71 {display: block; top: 0; right: 9.53125%;} .year-img-69 {display: none !important;} /*year 2008*/ .year-2008{ padding-bottom: 79.140625%; margin-bottom: 6.71875%; } .year-2008 > .cintre { margin-top: 8%; left: 34.453125%;} .year-2008-bloc-text-1 { margin-top: 26.1%;} .citation-2008 {margin-top: 13.28125%; text-align: right; width: 32%; padding-right: 0;} .year-img-84 {margin-top: 4.6875%; } .year-img-83 {margin-top: 0; left: 6.09375%;} .year-img-82 {margin-top: 15.9375%;} .year-img-81 {margin-top: 42.1%;} .year-img-80 {margin-top: 40.66%;} .year-img-79 {margin-top: 4.6875%;right: -37%} /*year 2007*/ .year-2007{ padding-bottom: 79.140625%; margin-bottom: 5.3125% } .year-2007 > .cintre { margin-top: 28%; right: 9.396875%;} div.year-2007-bloc-text-1 { margin-top: 36.7%; height: 186px; min-height: 0; } .citation-2007 {margin-top: 7.55%;text-align: right;width: 32%;padding-right: 10px;} .year-img-88 {margin-top: 7.1875%;} .year-img-87 {margin-top: 51.24%;} .year-img-86 {margin-top: 36.5625%;} .year-img-85 {margin-top: 0.1%; right: 1.71875%} .year-img-78 {margin-top: 51.24%;} .year-img-70 {margin-top: 59.3%;} .year-img-68 {display: none;} .gmaps-2 { width: 560px; height: 363px;} /* year 2006 */ .year-2006{ padding-bottom: 61.875%; margin-bottom: 9.765625%; } .year-2006 > .disc { margin-top: 29%; right: 9.296875%;} div.year-2006-bloc-text-1 { margin-top: 22.742424242%; height: 186px; min-height: 0;} .year-img-93 {margin-top: 10.25625%;} .year-img-92 {margin-top: 15.078125%;} .year-img-91 {margin-top: 37.3%;} .year-img-90 {margin-top: 37.3%;} .year-img-89 {margin-top: 0; right: -15.3125%;} /* year 2005 */ .year-2005{ padding-bottom: 81.484375%; margin-bottom: 0.78125%; } .year-2005 > .disc { margin-top: 20.5%; left: 16.953125%;} .year-2005-bloc-text-1 { margin-top: 29.942424242%;} .citation-2005 {margin-top: 0.5%; width: 43.5%; padding-top: 11px; padding-left: 9px;} .year-img-97{top: 0; left: 20%;} .year-img-96{margin-top: 29.9%; left: -2.9%;} .year-img-95{margin-top: 47.6%;} .year-img-94{margin-top: 47.6%; left: 52.929%;} /* year 2002 */ .year-2002 { padding-bottom: 95.625%; margin-bottom: 12.734375% } .year-2002-bloc-text-1 { margin-top: 33.4%;} .citation-2002 {margin-top: 52.85%; width: 43.5%; padding-top: 6px;} .year-img-100 {margin-top: 14.3%; left: 15.46875%; } .year-img-99 {margin-top: 4.92%; right: 5.8%;} .year-img-98 {margin-top: 52.8%;} .white-bloc-text { padding: 24px 24px 31px; background-color: #fff; min-height: 204px; width: 50.0%; } .year-section .white-bloc-text:first-of-type .about-date { font-weight: bold; } .white-bloc-text.small{ min-height: 0; height: 192px; } .white-bloc-text.big { height: 192px; } .white-bloc-text.bigger { height: 235px; } .white-bloc-text .about-date { font-size: 1.875em; font-weight: lighter; } .white-bloc-text .about-date span { font-size: 5.1em; line-height: 1em; } .white-bloc-text h2 { font-size: 2.5em; font-weight: bold; line-height: 1em; margin-bottom: 0.18em; } .white-bloc-text p { font-size: 0.97em; padding-bottom: 0.3em; } .year-section .highlight { line-height: 1em; color: #c5d1d2; box-shadow: -8px 0 0 4px #1d1d1d, 6px 0 0 4px #1d1d1d; } /* @group ELEMENT */ /* @group FOOTER */ .site-footer { padding-top: 20px; padding-bottom: 30px; text-align: center; } .site-footer .footer-bar { padding-bottom: 30px; font-size: 0.8em; } .site-footer .credit-button { display: none; } .site-footer .credit-drawer { font-size: 0.9em; /* max-height: 0px; overflow: hidden; -webkit-transition: max-height 500ms; transition: max-height 500ms;*/ } .site-footer .credit-drawer.opened { max-height: 400px; -webkit-transition: max-height 0ms; transition: max-height 0ms; } .site-footer a {text-decoration: underline;} .site-footer a:hover {text-decoration: none;} .site-footer .credit-drawer p { font-family: "Times New Roman", serif; margin-bottom: 20px; line-height: 1.4em; } .p404-box { position: relative; } .p404-box::after { content: ""; display: block; padding-bottom: 45%; } .p404-box-inner { border: 0.8em solid rgba(255, 255, 255, 1); font-size: 2.8em; font-weight: 300; height: 52%; left: 50%; line-height: 1.2em; padding-top: 3%; position: absolute; text-align: center; top: 50%; width: 55%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0 0 0 0.9em rgba(233, 242, 243, 1), 0 0 0 1.8em rgba(255, 255, 255, 1), 0 0 0 2.7em rgba(233, 242, 243, 1), 0 0 0 3.6em rgba(255, 255, 255, 1); -webkit-animation: pfourofour-animation 3s 1 linear; animation: pfourofour-animation 3s 1 linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes pfourofour-animation { 0% {border: 0.8em solid rgba(255, 255, 255, 0); box-shadow: 0 0 0 0.9em rgba(233, 242, 243, 0), 0 0 0 1.8em rgba(255, 255, 255, 0), 0 0 0 2.7em rgba(233, 242, 243, 0), 0 0 0 3.6em rgba(255, 255, 255, 0);} 33% {border: 0.8em solid rgba(255, 255, 255, 1); box-shadow: 0 0 0 0.9em rgba(233, 242, 243, 0), 0 0 0 1.8em rgba(255, 255, 255, 0), 0 0 0 2.7em rgba(233, 242, 243, 0), 0 0 0 3.6em rgba(255, 255, 255, 0);} 66% {border: 0.8em solid rgba(255, 255, 255, 1); box-shadow: 0 0 0 0.9em rgba(233, 242, 243, 1), 0 0 0 1.8em rgba(255, 255, 255, 1), 0 0 0 2.7em rgba(233, 242, 243, 0), 0 0 0 3.6em rgba(255, 255, 255, 0);} 100% {border: 0.8em solid rgba(255, 255, 255, 1); box-shadow: 0 0 0 0.9em rgba(233, 242, 243, 1), 0 0 0 1.8em rgba(255, 255, 255, 1), 0 0 0 2.7em rgba(233, 242, 243, 1), 0 0 0 3.6em rgba(255, 255, 255, 1);} } @keyframes pfourofour-animation { 0% {border: 0.8em solid rgba(255, 255, 255, 0); box-shadow: 0 0 0 0.9em rgba(233, 242, 243, 0), 0 0 0 1.8em rgba(255, 255, 255, 0), 0 0 0 2.7em rgba(233, 242, 243, 0), 0 0 0 3.6em rgba(255, 255, 255, 0);} 33% {border: 0.8em solid rgba(255, 255, 255, 1); box-shadow: 0 0 0 0.9em rgba(233, 242, 243, 0), 0 0 0 1.8em rgba(255, 255, 255, 0), 0 0 0 2.7em rgba(233, 242, 243, 0), 0 0 0 3.6em rgba(255, 255, 255, 0);} 66% {border: 0.8em solid rgba(255, 255, 255, 1); box-shadow: 0 0 0 0.9em rgba(233, 242, 243, 1), 0 0 0 1.8em rgba(255, 255, 255, 1), 0 0 0 2.7em rgba(233, 242, 243, 0), 0 0 0 3.6em rgba(255, 255, 255, 0);} 100% {border: 0.8em solid rgba(255, 255, 255, 1); box-shadow: 0 0 0 0.9em rgba(233, 242, 243, 1), 0 0 0 1.8em rgba(255, 255, 255, 1), 0 0 0 2.7em rgba(233, 242, 243, 1), 0 0 0 3.6em rgba(255, 255, 255, 1);} } @media (max-width: 1300px) { .p404-box-inner { font-size: 1em; height: 47%; padding-top: 2%; } } @media (max-width: 1024px) { .p404-box-inner { font-size: 1.7em; height: 42%; } } @media (max-width: 888px) { .p404-box-inner { height: 60%; width: 75%; } } /* @end FOOTER */ /* @group ARTISTS BLOC */ .artists-slider { width: 100%; position: relative; overflow: hidden; } .artists-nav { height: 120px; position: relative; } .artists-nav p { position: absolute; text-align: center; width: 100%; text-transform: uppercase; font-size: 2.1875em; margin: 0 auto; padding-top: 50px; } .artists-nav .arrow { display: block; position: relative; float: left; width: 51px; cursor: pointer; margin-top: 50px; height: 51px; } .artists-nav .arrow::before, .artists-nav .arrow::after { content: ""; position: absolute; width: 2px; height: 16px; left: 46%; top: 22%; background-color: #333; -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } .artists-nav .arrow::after { top: 46%; -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); transform: rotate(-40deg); } .artists-nav .arrow.right { float: right; -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .artists-nav p span { padding-bottom: 4px; display: inline-block; } /*.artists-nav p span::after { content: ''; display: inline-block; width: 40px; height: 1em; }*/ .artists-slider .wrap-artists { width: auto; overflow: hidden; min-height: 300px; } .artists-slider .slider-container{ font-size: 0rem; white-space: nowrap; position: absolute; } .artists-slider .artist-bloc { white-space: normal; display: inline-block; font-size: 1rem; position: relative; vertical-align: top; width: 420px; margin-left: 10px; } .artists-slider .artist-bloc:first-child { margin-left: 0; } .artists-slider .artist-bloc > img { width: 100%; height:auto; } .artists-slider .artist-links { height: 50%; position: absolute; padding: 14px; opacity: 0; bottom: 0; width: 100%; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ -webkit-transition: opacity 0.15s; -moz-transition: opacity 0.15s; -ms-transition: opacity 0.15s; -o-transition: opacity 0.15s; transition: opacity 0.15s; } .artists-slider .artist-bloc:hover .artist-links { opacity: 1; } .artists-slider .artist-name { position: absolute; top: 100%; margin-top: 10px; text-decoration: none; font-size: 1.2em; font-weight: bold; margin-left: 3px; padding-left:5%; } .artists-slider .artist-links li { float: left; } .artists-slider .artist-links a { text-decoration: none; color: #fff; } .artists-slider .artists-intern-links { position: absolute; bottom: 60px; } .artists-slider .artists-intern-links li { margin-right: 14px; padding-right: 14px; border-right: 1px solid #fff; height: 20px; margin-bottom: 5px; } .artists-slider .artists-intern-links li:last-child { border-right: 0; } .artists-slider .artists-intern-links a { font-size: 1.5em; display: block; padding-bottom: 4px; } .artists-slider .artists-intern-links a:hover { border-bottom: 2px solid #fff; } .artists-slider .artists-social { margin-top: 44px; position: absolute; bottom: 10px; } .artists-slider .artists-social a { display: block; width: 38px; height: 38px; margin-right: 8px; padding: 6px 11px; } .artists-slider .artists-social li:last-child a { padding-left: 8px; } .artists-slider .artists-social li:last-child a:hover { padding-left: 6px; } .artists-slider .artists-social a:hover { border: 2px solid #fff; padding: 4px 9px; } .artists-slider .artists-social a svg { fill:#fff; } @media (max-width: 760px) { .artists-slider .artists-intern-links { display: none; } } @media (max-width: 610px) { .artists-slider .artist-links { display: none; } } /* @end ARTISTS BLOC */ /* @group ELEMENT */ /* @end ELEMENT */ /* @end MISC BLOCS */ /* @group GLOBAL ALERTS */ .global-alert { color: #222; background-color: #FFF3B8; left: 0; position: fixed; text-align: center; top: 0; width: 100%; z-index: 1000; font: 300 1em/1.3em Helvetica, sans-serif; padding: 1.2em 0 1.6em; } .global-alert p {margin: 0 0 0.6em;} .global-alert p:last-of-type {margin-bottom: 0;} .global-alert a:hover {color: #9d8511;} .global-alert .global-alert-close { cursor: pointer; display: block; font-size: 16px; padding: 3px 7px 4px; position: absolute; right: 6px; top: 6px; line-height: 18px; } .global-alert .global-alert-close:hover {background-color: #e4c00f; color: #fff;} .global-alert .global-alert-close:active {background-color: #766203; color: #fff;} .global-alert-close-handler:checked + .global-alert {display: none;} /* @end GLOBAL ALERTS */ @media screen and (max-width: 1100px) { .year-section img { height: auto; } .years-container { width: 532px; left: auto; margin-left: auto; } .wrap-years { width: 100%; position: relative; height: auto; } .white-bloc-text {width: 50%; font-size: 0.9em} .white-bloc-text h2 { font-size: 1.4em; padding-bottom: 0.5em; } .white-bloc-text .about-date { font-size: 1.4em; } .l2-big-standfirst { font-size: 1.7em; } .background-img { height: auto; } .sprite { background: url("../images/about/KITSUNE_JOURNAL_V2_TIMELINE_20140512_SPRITE.png") no-repeat scroll left top / cover rgba(0, 0, 0, 0); height: 50px; position: absolute; width: 50px; } .cintre { background-position: -50px; } .fox { background-position: -150px; } .microphone {background-position: -200px;} .shop { background-position: -100px; } .year-2009{ padding-bottom: 162.29924812%; margin-bottom: 8.828125%; } /*year 2015-2 */ .year-2015-2 { padding-bottom: 230%; margin-bottom: 0; width: 103.90625%; } .year-2015-2-img-1 { margin-top: 0%; width: 22%; left: 15.45%; } .year-2015-2-img-2 { margin-top: 29.4%; width: 22%; left: 15.6%; } .year-2015-2-img-3 { margin-top: 58.7%; width: 33.9%; left: 14.5%; } .year-2015-2-img-5 { margin-top: 58.7%; width: 16.3%; left: 48.4%; } .year-2015-2-img-4 { margin-top: -33px; width: 34%; left: 74.6%; } .year-2015-2-img-7 { margin-top: 80.5%; width: 36%; left: 50.2%; } .year-2015-2-img-9 { margin-top: 123.6%; width: 50%; } .year-2015-2-img-10 { margin-top: 157.2%; width: 33%; } .year-2015-2-img-11 { margin-top: 172.5%; width: 20%; } .year-2015-2-img-18 { margin-top: 104.45%; } .year-2015-2-bloc-text-2 { } .gmaps-3 { width: 266px; height: 152.3px; } /* 2015 */ .year-2015 { padding-bottom: 183%; margin-bottom: 0; width: 103.90625%; } .year-2015 .year-2015-bloc-text-2 {margin-top: 110%;} .year-2015 .year-img-1 { margin-top: 1.879699248% ; width: 37%; left: 20.112781955%;} .year-2015 .year-img-2 { margin-top: 17% !important; width: 31.203007519%; left: 87.6%;} .year-2015 .year-img-3 { margin-top: 97.368421053%; width: 31.203007519%; left: 67.857142857%;} .year-2015 .year-img-4, .gmaps-2015-1, .year-img-18, .year-img-80 { display: none !important;} .year-2015 .year-img-5 { margin-top: 99.962% !important; width: 52.932%; left: 50.179%;} .year-2015 .year-img-6 { margin-top: 61.541% !important; width: 25.6%; left: 87.865%;} .year-2015 .year-img-7 { margin-top: 135.2% !important; width: 25.233%; left: 50.157%;} /*year 2014 */ .year-2014{ padding-bottom: 455.609023%; margin-bottom: 0; width: 103.90625%; } .year-2014 .cintre { display: none; } .year-2014 .fox { margin-top: 261%; margin-left: 78.45%; } .year-2014-media-1 {margin-top: 310.679699%; width: 120.7%; left: 0.751879699%;} .year-2014-bloc-text-1 { margin-top: 75.46%; width: 56.390977444%; left: 11.466165414%;} .year-2014-bloc-text-2 { margin-top: 159.962406015%; width: 56.390977444%; left: 38.533834586%; height:9.8%; } .white-bloc-text.year-2014-bloc-text-3 { margin-top: 234.022556391%; width: 56.390977444%; left: 0.751879699%; height: 9.8%;line-height: 1.3em;} .year-2014-bloc-text-4 { margin-top: 367.293233083%; width: 56.390977444%; left: 35.902255639%;} .year-2014-bloc-text-2 { margin-top: 159.962406015%; width: 56.390977444%; left: 38.533834586%; height:9.8%;} .white-bloc-text.year-2014-bloc-text-3 { margin-top: 239.222556%; width: 56.390977444%; left: 0.751879699%; height: auto;} .year-2014-bloc-text-4 { margin-top: 375.693233%; width: 56.390977444%; left: 35.902255639%;} .gmaps-1 { height: 181px; } .year-img-1 { margin-top: 1.879699248% ; width: 36.842105263%; left: 20.112781955%;} .year-img-2 { margin-top: 75.46%; width: 31.203007519%; left: 67.857142857%;} .year-img-3 { margin-top: 97.368421053%; width: 31.203007519%; left: 67.857142857%;} .year-img-4 { margin-top: 41.541353383%; width: 59.398496241%; left: 11.466165414%;} .year-img-5 { margin-top: 9.962406015%; width: 22.932330827%; left: 56.578947368%;} .year-img-6 { margin-top: 41.541353383%; width: 20.6%; left: 70.864661654%;} .year-img-7 { margin-top: 128.66%; width: 18.233082707%; left: 67.857142857%;} .year-img-8 { margin-top: 201.879699248%; width: 44.736842105%; left: 38.533834586%;} .year-img-9 { margin-top: 126.62%;width: 30.1%;left: 8.511278%;} .year-img-10 { margin-top: 220.3%; width: 15.601503759%; left: 83.2%;} .year-img-11 { margin-top: 165.977443609%; width: 37.781954887%; left: 0.751879699%;} .year-img-12 { margin-top: 189.473684211%; width: 37.781954887%; left: 0.751879699%;} .year-img-13 { margin-top: 276.127819549%; width: 37.781954887%; left: 0.751879699%;} .year-img-14 { margin-top: 201.879699248%; width: 13.345864662%; left: 83.270676692%;} .year-img-15 { margin-top: 233.92%; width: 25.939849624%; left: 57.142857143%;} .year-img-16 { margin-top: 333.458646617%; width: 48.496240602%; left: 0.751879699%;} .year-img-17 { margin-top: 285.12782%; width: 26.691729323%; left: 36.842105263%;} .year-img-7 { margin-top: 128.61203%; width: 18.233082707%; left: 67.857142857%;} .year-img-8 { margin-top: 201.879699248%; width: 52.736842%; left: 38.533834586%;} .year-img-9 { margin-top: 126.616541353%; width: 34.022556391%; left: 4.511278195%;} .year-img-10 { margin-top: 215.977443609%; width: 15.601503759%; left: 91.270677%;} .year-img-11 { margin-top: 170.977443609%; width: 37.781954887%; left: 0.751879699%;} .year-img-12 { margin-top: 194.473684211%; width: 37.781954887%; left: 0.751879699%;} .year-img-13 { margin-top: 285.12782%; width: 37.781954887%; left: 0.751879699%;} .year-img-14 { margin-top: 201.879699248%; width: 13.345864662%; left: 91.270677%;} .year-img-15 { margin-top: 239.222556%; width: 25.939849624%; left: 57.142857143%;} .year-img-16 { margin-top: 341.958647%; width: 48.496240602%; left: 0.751879699%;} .year-img-17 { margin-top: 285.12782%; width: 26.691729323%; left: 36.842105263%;} .year-img-18 { margin-top: 342.1%; width: 48.684210526%; left: 49.060150376%;} /* year 2013 */ .year-2013 { padding-bottom: 344.518796992%; margin-bottom: 170px; } .year-2013 .background-img:nth-of-type(1) { width: 120.390625%; top: 8.1%; left: -4.453125%; } .year-2013-media-1 {margin-top: 80.921875%; left: 6.766917293%; width: 61.654135338%;} .media-embed > object > embed {height: 100%; width: 100%} .year-2013-media-2 {margin-top: 238.022%; width: 71.804511278%; left: 25.8%;} .year-2013-media-3 {margin-top: 270.428%; width: 56.323308271%; left: 1%;} .year-2013-bloc-text-1 { margin-top: 14.4%%; width: 56.390977444%; left: 6.766917293%;} .year-2013-bloc-text-2 { margin-top: 179.822%; width: 56.390977444%; left: 44.767%;} .year-2013-bloc-text-2, .bigger{height: auto !important;} .year-2013-bloc-text-3 { bottom: 0; width: 56.390977444%; left: 1%;} .year-img-19 { margin-top: 179.822%; width: 15.977443609%; left: 10%;} .year-img-20 { margin-top: 143%; width: 60.706766917%; left: 37.569924812%;} .year-img-21 { margin-top: 43.69924812%; left: 63.121804511%; width: 28.383458647%;} .year-img-22 { margin-top: 112.5875%; width: 8.774%; left: 78%;} .year-img-23 { margin-top: 110.369%; width: 54.69924812%; left: 14.097744361%;} .year-img-24 { margin-top: 80.921875%; width: 29.471428571%; left: 68.6%;} .year-img-25 { margin-top: 143%; width: 31.0271%; left: 6.766917293%;} .year-img-26 { margin-top: 179.822%; width:18.775%; left: 25.9%;} .year-img-27 { margin-top: 270.428%; width: 39.473684211%; left: 57.4%;} .year-img-28 { margin-top: 204.044%; width: 22.556390977%; left: 3.3%;} .year-img-29 { margin-top: 295.928%; left: 57.4%; width: 41.917293233%} .year-img-30 { margin-top: 316.928%; width: 20.273684211%; left: 57.4%;} .year-img-31 { margin-top: 226.644%; width: 18.421052632%; left: 7.5%} .year-2013 .disc { display: none; } .year-2013 .cintre { display: none; } /* year 2012 */ .year-2012 { padding-bottom: 278.2%; margin-bottom: 72px; } .year-2012 .background-img:nth-of-type(1) { width: 110.15625%; top: 0; left: 0; } .year-2012-media-1 { margin-top: 30.5%; width: 67.293233083%; left: 31.5%;} .year-2012-bloc-text-1 {margin-top: 59.875%; left: 1%; width: 56.390977444%;} .year-2012-bloc-text-2 {margin-top: 224%; width: 56.390977444%;} .year-2012-bloc-text-3 {margin-top: 52.03125%;} .year-img-32 { margin-top: 4.140625%;} .year-img-33 { margin-top: 21.25%; width: 23.308270677%; left: 8.270676692%} .year-img-34 { margin-top: 59.875%; left: 57.4%; width: 41.1%;} .year-img-35 { margin-top: 100.896875%; width: 41.165413534%; left: 23%;} .year-img-36 { margin-top: 164.8%; width: 18.233082707%; left: 45.8%;} .year-img-37 { margin-top: 100.896875%; left: 64%; width: 34.6744%;} img.year-img-38 { margin-top: 146.5%; width: 40.601503759%; left: 5.2%} .year-img-39 { margin-top: 199.2%; width: 33.6466%; left: 19%;} .year-img-40 { margin-top: 146.5%; width: 18.233082707%; left: 45.8%;} .year-img-41 { margin-top: 135.6%; width: 36.090225564%; left: 64%;} .year-img-42 { margin-top: 199%; width: 24.812030075%; left: 52.6%;} .year-2012 .microphone { display: none; } /* year 2011 */ .year-2011 { padding-bottom: 129.556390977%; margin-bottom: 123px; } .year-2011 .background-img:nth-of-type(1) { width: 95.78125%; top: 0; left: 9.84375%; } .year-2011-bloc-text-1 { margin-top: 19.21875%; width: 56.390977444%; left: 2.25564%;} .year-2011-media-1 { margin-top: 76.9%; width: 56.7%; left: 2.25564%;} .year-img-43 { margin-top: 14.5%; width: 30.07518797%; left: 58.7%;} .year-img-44 { margin-top: 44.634375%; width: 37.406015038% ; left: 58.7%;} .year-img-45 { margin-top: 82.05%; width: 39.473684211%; left: 59%;} .year-img-46 { margin-top: 0; bottom: 0; left: 17%; width: 26%;} .year-2011 .sprite { margin-top: 17%; margin-left: 84%; } /* year 2010 */ .year-2010 { padding-bottom: 181.015037594%; } .year-2010 .background-img:nth-of-type(1) { width: 122.8125%; top: 0.859375%; left: -12.265625%; } .year-2010-bloc-text-1 { margin-top: 58.54%; width: 56.390977444%; left: 42.6%;} p.citation-2010 { width: 49.436090226%; margin-top: 6.65%; left: 42.6%; } .year-img-47 { margin-top: 33.4%; width: 25.281%; left: 66.4%;} .year-img-48 { margin-top: 23.4962%; width: 40.4%; left: 2.25564%;} .year-img-49 { margin-top: 33.4%; width: 23.872180451%; left: 42.6%;} .year-img-50 { margin-top: 0; bottom: 0; width: 40.32556391%; left: 2.25564%;} .year-img-51 { margin-top: 143.4%; width: 18.609022556%; left: 42.5%;} .year-img-52 { margin-top: 98.5313%; width: 58.458646617%; left: 42.5%;} .year-img-53 { margin-top: 86.5%; left: 2.25564%; width: 40.3%;} .year-img-54 { margin-top: 162.1%; width: 26.879699248%; left: 42.5%} .year-2010 .fox { display: none; } /*year 2009*/ .sprite { background: url("../images/about/KITSUNE_JOURNAL_V2_TIMELINE_20140512_SPRITE.png") no-repeat left top / cover rgba(0, 0, 0, 0); height: 50px; position: absolute; width: 50px; } .year-2009{ padding-bottom: 162.29924812%; margin-bottom: 8.828125%; } .year-2009 > .disc { margin-top: 14%; left: 88.4%; } .year-2009 > .cintre { margin-top: 101.28%; right: 9.8%; } .year-2009-bloc-text-1 { margin-top: 21.052631579%; width: 56.390977444%; left: 2.25564%;} .year-img-77 {margin-top: 79.3%; left: 2.25564%; width: 63.157894737%} .year-img-76 {margin-top: 66.328125%; width: 32.142857143%; left: 65.4%;} .year-img-75 {margin-top: 17.7%; width: 34.77443609%; left: 58.6%;} .year-img-74 {margin-top: 98.3%; width: 19.92481203%; left: 65.4%;} .year-img-73 {bottom: 6.7%; left: 2.25564%; width: 63.157894737%} .year-img-72 {margin-top: 0; bottom: 1.4%; width: 28.571428571%; left: 65.4%} .year-img-71 {display: none !important;} .year-img-69 {display: block !important; top: 0; right: 9.53125%; width: 48.120300752%} /*year 2008*/ .year-2008{ padding-bottom: 151.857894737%; margin-bottom: 6.71875%; } .year-2008 > .cintre { display: none;} .gmaps-2 { height: 218px; width: 336px; } .year-2008 > .cintre { margin-top: 10.5%; left: 34.453125%;} .year-2008-bloc-text-1 { margin-top: 61.893984962%; width: 56.390977444%; left: 35.526315789%} .citation-2008 {margin-top: 13.28125%; text-align: right; width: 32%; padding-right: 0;} .year-img-84 {margin-top: 15.313533835%; left: 15.413533835%; width: 81.578947368%;} .year-img-83 {margin-top: 0; left: 0%; width: 44.172932331%; height: auto;} .year-img-82 {margin-top: 61.893984962%; width: 33.458646617%; left: 2.05564%} .year-img-81 {margin-top: 109.1%; width: 23.872180451%; left: 11.6541%;} .year-img-80 {margin-top: 107%; width: 63.345864662%; left: 35.526315789%;} .year-img-79 {margin-top: 80.6875%; width: 46.052631579%; right: -16.1875%} /*year 2007*/ .year-2007{ padding-bottom: 137.7%; margin-bottom: 5.3125% } .year-2007 > .cintre { display: none;} div.year-2007-bloc-text-1 { margin-top: 33.7%; width: 56.390977444%; left: 2.25564%; height: auto;} .citation-2007 {margin-top: 0.5%;text-align: right; width: 42.917293233%; padding-right: 10px; right: 41.4%;} .year-img-88 {margin-top: 30.1875%; width: 40.413533835%; left: 58.6%;} .year-img-87 {margin-top: 91.2%; left: 2.25564%; width: 27.067669173%} .year-img-86 {bottom: 0.5%; width: 29.423308271%; left: 29.2%;} .year-img-85 {display: none;} .year-img-78 {margin-top: 94.83%; width: 30.827067669%; right: 10.5%;} .year-img-70 {display: none !important;} .year-img-68 {display: block; top: 0; left: 3%;} /* year 2006 */ .year-2006{ padding-bottom: 92.348120301%; margin-bottom: 9.765625%; } .year-2006 > .disc { margin-top: 80.5%; right: 14.296875%;} .year-2006-bloc-text-1 { margin-top: 30.242424242%; width: 56.390977444%; left: 2.25564%; height: auto !important;} .year-img-93 {margin-top: 0; width: 30.263157895%; left: 2.25564%;} .year-img-92 {margin-top: 46.078125%; width: 39.473684211%; left: 58.534586466%} .year-img-91 {bottom: 0; width: 28.947368421%; left: 2.25564%;} .year-img-90 {margin-top: 63.4%; width: 27.443609023%; left: 31.20977444%;} .year-img-89 {margin-top: 2%; right: 4.688%; width: 56.875%} /* year 2005 */ .year-2005{ padding-bottom: 165.45%; margin-bottom: 0.78125%; } .year-2005 > .disc { left: 83.953%; margin-top: 105.5%;} .year-2005-bloc-text-1 {margin-top: 0; width: 56.390977444%; left: 40.6%;} .citation-2005 {margin-top: 61%; width: 55.5%; padding-top: 11px; padding-left: 9px; left: 41.1%;} .year-img-97{margin-top: 89%; left: 7.87%; width: 32.706766917%;} .year-img-96{margin-top: 29.9%; left: 2.255639098%; width: 38.345864662%;} .year-img-95{bottom: 1.6%; width: 48.496240602%; left: 40.6%} .year-img-94{display: none;} /*year 2002*/ .year-2002 { padding-bottom: 154.709774436%; margin-bottom: 12.734375% } .year-2002-bloc-text-1 { margin-top: 25.236090226%; width: 56.390977444%; left: 0;} .citation-2002 {margin-top: 96.1%; width: 53.383458647%; padding-top: 6px; left: 46.054%;} .year-img-100 {margin-top: 4.992%; left: 15.46875%; width: 32.65625% } .year-img-99 {margin-top: 30.5%; right: 0.075%; width: 43.615254237%; } .year-img-98 {bottom: 0 ;width: 46.009022556%; left: 0;} } /* @group MEDIA QUERY */ @media (max-width: 360px) { .serif-title { font-size: 0.8em; } .serif-title::before, .serif-title::after { width: 16px; margin: 0 8px; background-color: #1d1d1b; color: #1d1d1b; } } .mobile-lazyloaded { display: none; } .mobile-background-img { display: none; } @media (max-width: 320px) { .main-container { padding-top: 70px; } .serif-title { font-size: 0.8em; margin-top: 10px; margin-bottom: 18px; } .year-nav { position: absolute; z-index: auto; margin-top: 12%; top: 0; right: 0; border-bottom: 1px solid rgba(0,0,0,0.05); } .year-nav ul { overflow: hidden; overflow-x: auto; text-align: center; white-space: nowrap; } .year-nav li { display: inline-block; } .year-nav a { width: auto; height: auto; text-align: center; font-size: 0.9em; line-height: 0.8em; padding: 17px 14px; } .year-section .mobile-lazyloaded { display: block; position: absolute; z-index: 1; } .year-section .mobile-background-img { display: block; } .sprite { display: none; } .right-5 { border: 5px solid red; } .year-section img { display: none; } .mobile-background-img { z-index: auto; } .lazyloaded { display: none; } .year-section .media-embed { display: none; } .width-wrap.wide { padding-left: 0; padding-right: 0; width: 320px; } .white-bloc-text h2 { font-size: 1.25em; padding: 0; margin: 0; } .white-bloc-text { width: 214px; } .white-bloc-text .about-date { font-size: 1.25em; padding-bottom: 0; padding: 0; margin: 0; } .white-bloc-text p { font-size: 0.8em; line-height: 1.2em; } .left-3 { left: 18px; } .year-section:first-of-type { margin-top: 0; } .l2-big-standfirst { font-size: 1.7em; } /* year 2015-2 */ .year-2015-2 { margin-top: 0; padding-bottom: 1160px; } .mobile-year-2015-2-img-1 { top: 0px; left: 0px; } .mobile-year-2015-2-img-2 { top: 337px; left: 212px; } .mobile-year-2015-2-img-3 { top: 450px; left: -3px; } .mobile-year-2015-2-img-4 { top: 732px; left: -3px; } .year-2015-2-bloc-text-1 { margin-top: 270px; } .year-2015-2-bloc-text-2 { margin-top: 562px; left: 85px; } .year-2015-2-bloc-text-4 { margin-top: 929px; right: auto; left: 21px; } .year-2015-2-img-18 { display: none; } /* year 2015 */ .year-2015 { padding-bottom: 314%; } .mobile-year-2015-img-1 { top: 0px; left: 12px; } .mobile-year-2015-img-2 { top: 358px; left: 44px; } .mobile-year-2015-img-3 { top: 707px; left: -24px; } .year-2015 .mobile-bg-1 { top: 610px; left: -10px; } .year-2015-bloc-text-1 { margin-top: 58%; width: 201px; } .year-2015 .year-2015-bloc-text-2 { margin-top: 174%; left: 98px; width: 200px; } /* year 2014 */ .year-2014{ margin-top: 0; padding-bottom: 1940px; } .year-2014 .mobile-bg-1 { top: 1631px; left: 0; } .year-2014-bloc-text-1 { margin-top: 260px; } .year-2014-bloc-text-2 { margin-top: 569px; left: auto; right: 10px; } .white-bloc-text.year-2014-bloc-text-3 { margin-top: 914px; right: auto; left: 20px; height: auto; } .year-2014-bloc-text-4 { margin-top: 1373px; left: 33px; } .mobile-year-img-1 { top: 0; left: -3px; } .mobile-year-img-2 { top: 187px; right: 0px; } .mobile-year-img-3 { top: 455px; left: -21px; } .mobile-year-img-4 { top: 721px; left: -45px; } .mobile-year-img-5 { top: 908px; right: 0; } .mobile-year-img-6 { top: 1111px; left: 0; } .mobile-year-img-7 { top: 1578px; right: 10px; } .year-2013 { margin-top: 10px; margin-bottom: 0; padding-bottom: 1260px; } .year-2013 .mobile-bg-1 { top: 40px; left: 177px; } .year-2013 .mobile-bg-2 { top: 399px; left: 20px; } .year-2013 .mobile-bg-3 { top: 918px; left: 160px; } .mobile-year-img-8 { top: 0px; left: 30px; } .mobile-year-img-9 { top: 150px; right: 28px; } .mobile-year-img-10 { top: 360px; left: 0px; } .mobile-year-img-11 { top: 790px; left: 0px; } .mobile-year-img-12 { top: 984px; right: 0px; } .year-2013-bloc-text-1 { margin-top: 137px; left: 10px; } .year-2013-bloc-text-2 { margin-top: 580px; right: 20px; left: auto; } .year-2013-bloc-text-3 { margin-top: 953px; left: 20px; } .year-2012 { margin-top: 0px; padding-bottom: 890px; margin-bottom: 0; } .year-2012 .moblie-bg-1 { top: 0; left: 0; } .year-2012 .moblie-bg-2 { top: 550px; left: 0; } .mobile-year-img-13 { top: 13px; right: 0px; } .mobile-year-img-14 { top: 270px; left: 0px; } .mobile-year-img-15 { top: 500px; right: 0px; } .year-2012-bloc-text-1 { margin-top: 100px; right: 10px; left: auto; } .year-2012-bloc-text-2 { margin-top: 556px; left: 50px; } .year-2012-bloc-text-3 { display: none; } .year-2011 { margin-top: 0px; padding-bottom: 580px; margin-bottom: 0; } .year-2011 .mobile-bg-1 { top: 0; left: 20px; } .mobile-year-img-16 { top: 33px; right: 30px; } .mobile-year-img-17 { top: 315px; left: 0px; } .year-2011-bloc-text-1 { margin-top: 130px; left: 20px; } .year-2010 { margin-top: 0px; padding-bottom: 760px; margin-bottom: 0; } .year-2010 .mobile-bg-1 { top: 460px; left: 0px; } .mobile-year-img-18 { top: 0px; right: 0; } .mobile-year-img-19 { top: 505px; right: 20px; } .year-2010-bloc-text-1 { margin-top: 209px; left: 20px; } p.citation-2010 { left: 20px; width: auto; margin-top: 406px; } .year-2009 { margin-top: 30px; margin-bottom: 0; padding-bottom: 540px; } .mobile-year-img-20 { top: 0px; right: 0; } .mobile-year-img-21 { top: 288px; right: 0px; } .year-2009-bloc-text-1 { margin-top: 119px; left: 40px; } .year-2008 { margin-top: 27px; margin-bottom: 0; padding-bottom: 640px; } .year-2008 .mobile-bg-1 { top: 528px; right: -54px; } .mobile-year-img-22 { top: 0px; right: -113px; } .mobile-year-img-23 { top: 395px; left: 10px; } .year-2008-bloc-text-1 { margin-top: 270px; left: 20px; } .year-2007 { margin-top: 60px; padding-bottom: 570px; margin-bottom: 0; } .year-2007 .mobile-bg-1 { top: 380px; left: 0; } .mobile-year-img-24 { top: 0; left: -5px; } .mobile-year-img-25 { top: 300px; left: 0; } div.year-2007-bloc-text-1 { margin-top: 140px; right: 20px; left: auto; height: 200px; width: 214px; } .citation-2007 { margin-top: 333px; right: 20px; width: 220px; } .year-2006 { margin-top: 0px; padding-bottom: 420px; margin-bottom: 0; } .year-2006 .mobile-bg-1 { top: 130px; right: -30px; } .mobile-year-img-26 { top: 0; left: -10px; } .mobile-year-img-27 { top: 290px; left: 20px; } div.year-2006-bloc-text-1 { margin-top: 143px; left: 30px; } .year-2005 { margin-top: 70px; padding-bottom: 620px; margin-bottom: 0; } .mobile-year-img-28 { top: 0; left: auto; right: -10px; } .mobile-year-img-29 { top: 290px; right: -30px; } .year-2005-bloc-text-1 { margin-top: 150px; left: 20px; } .citation-2005 { margin-top: 376px; left: 23px; width: 223px; } .year-2002 { margin-top: 100px; padding-bottom: 600px; } .year-2002 .mobile-bg-1 { top: 385px; right: 0px; } .mobile-year-img-30 { top: 0px; right: -10px; } .year-2002-bloc-text-1 { margin-top: 110px; left: 20px; } .citation-2002 { left: 20px; width: auto; margin-top: 314px; } } /* @end MEDIA QUERY */ /* @group FONT-FACES */ @font-face { font-family: "Fontname"; font-weight: normal; font-style: normal; src: url("fonts/fontname-webfont.woff") format("woff"), url("fonts/fontname-webfont.ttf") format("truetype"); /* or otf / opentype */ } /* @end FONT-FACES */ /* @group PRINT */ @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited {text-decoration: underline;} a[href]:after {content: " (" attr(href) ")";} abbr[title]:after {content: " (" attr(title) ")";} .visual-ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {content: "";} pre, blockquote { border: 1px solid #999; page-break-inside: avoid;} thead {display: table-header-group;} tr, img {page-break-inside: avoid;} img {max-width: 100% !important;} p, h2, h3 {orphans: 3; widows: 3;} h2, h3 {page-break-after: avoid;} } /* @end PRINT */ /* @group DEBUG * element:nth-child(even) {background-color: rgba(255, 154, 242, 0.2);} element:nth-child(odd) {background-color: rgba(115, 254, 228, 0.2);} /* @end DEBUG */