/*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* ----------------------------- */ /* Général /* ----------------------------- */ html { /* set base font-size to equiv "10px", which is adapted to rem unit */ font-size: 62.5%; /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ font-size: calc(1em * 0.625); } *[role=button]{ user-select: none; } *[role=button], button, .select-wrapper, select{ cursor: pointer; } h1.hidden{ display: none; } ::-moz-placeholder{ opacity: 1; } html{ scroll-behavior: smooth; } strong{ font-weight: bold; } em{ font-style: italic; } /* ----------------------------- */ /* Typo /* ----------------------------- */ @font-face { font-family: 'SMS'; src: url('../fonts/SMS.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } body{ font-family: 'SMS', Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; font-variation-settings: 'wght' 9, 'SHPP' 10; line-height: 2; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .header, .footer-menu1{ font-size: 2.55vw; line-height: 1.7; } .item-jour, .event-jour, .t30{ font-size: 4.5rem; line-height: 1.7; } .item-mois, .event-mois, .event h1, .t20{ font-size: 3rem; line-height: 1.7; } .item-texte h2, .t13{ font-size: 2rem; line-height: 1.7; } .event-horaires-lieu, .event-generique, .event-chapeau, .article-chapeau, .section-texte h2, .t9{ font-size: 1.4rem; line-height: 1.85; } body, .t6-5{ font-size: 1rem; } .footer-menu2, .item-texte, .programme-tags, .event-tags, .event-infos, .section-texte, .t5{ font-size: 0.8rem; } .item-mois, .event-mois, .item-ville, .event-villes-tags, .event-ville{ text-transform: capitalize; } /* -767 */ @media (max-width: 767px){ .item-jour, .event-jour, .t30{ font-size: 3.6rem; } .item-mois, .event-mois, .event h1, .t20{ font-size: 2.4rem; } .header, .item-texte h2, .t13{ font-size: 1.8rem; } .event-horaires-lieu, .event-generique, .event-chapeau, .article-chapeau, .section-texte h2, .t9{ font-size: 1.3rem; } } /* ----------------------------- */ /* Variables /* ----------------------------- */ :root{ --marge: 2rem; --couleur1: #FFE715; --couleur2: #B2B6B7; --couleur3: #00B86F; --couleur4: #7659B0; --couleur5: #FFAF97; } /* -767 */ @media (max-width: 767px){ :root{ --marge: 1.6rem; } } /* ----------------------------- */ /* Couleurs /* ----------------------------- */ body{ color: var(--couleur1); } .programme-tags li:hover, .programme-tags li.current, .event-villes-tags li a:hover, .event-retour:hover{ background-color: var(--couleur1); } .programme-tags li:hover, .programme-tags li.current, .event-villes-tags li a:hover, .event-retour:hover{ color: var(--couleur2); } body{ background-color: var(--couleur2); } ::-moz-selection{ color: var(--couleur2); background-color: var(--couleur1); } ::selection{ color: var(--couleur2); background-color: var(--couleur1); } /* ----------------------------- */ /* Liens / boutons /* ----------------------------- */ /* Liens */ .footer-menu2 a:hover, .page-standard a:hover, .event a:hover{ border-bottom: 2px solid; } .logo-partenaire a:hover{ border-bottom: none; } .event-villes-tags a.gratuit{ pointer-events: none; } /* Liens blocs */ .item, .linkzone{ position: relative; } .item h2 a::after{ content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0); z-index: 2; } /* ----------------------------- */ /* Images en bichromie /* ----------------------------- */ figure.duotone{ position: relative; overflow: hidden; } figure.duotone img{ -webkit-filter: url('#duotone'); filter: url('#duotone'); width: 100%; } /* ----------------------------- */ /* Splide slider / galerie /* ----------------------------- */ .splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0} .splide__track{ cursor: move; cursor: grab; } .splide__arrows, .splide__pagination{ display: none; } .splide__slide img{ display: block; height: 100%; margin: 0 auto; object-fit: cover; } .splide, .splide__track, .splide__slide{ aspect-ratio: 3 / 2; } /* ----------------------------- */ /* Layout /* ----------------------------- */ body{ display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } main{ flex-grow: 1; } .mire{ position: fixed; left: 0; width: 100%; height: 1rem; background-image: url('../images/biennale/bg-footer.svg'); background-size: 5rem; background-repeat: repeat-x; } .header-mire{ top: 0; } .footer-mire{ bottom: 0; } .header{ padding: 0.7em var(--marge) 0; transition: padding 0.8s ease; } .footer{ padding: calc( var(--marge) * 1.5) var(--marge) var(--marge) var(--marge); } .event{ padding: 0 var(--marge); } .page-standard{ margin: 0 var(--marge); } .programme-tags, .event-tags{ padding: var(--marge) 0; margin: 0 var(--marge); } /* -767 */ @media (max-width: 767px){ .page-standard{ margin: 0; } .footer-menu1{ display: none; } } /* ----------------------------- */ /* Header /* ----------------------------- */ .header{ background-size: 100%, 100%; background-position: bottom -1px left, bottom left; background-repeat: repeat-x, repeat-x; } .menu-principal menu{ display: flex; justify-content: space-between; } .menu-principal a{ display: block; position: relative; user-select: none; } .menu-principal menu > li > a.current::after{ content: ''; position: absolute; top: -0.4em; left: -1.2em; width: 9.5em; height: 3em; background-image: url(https://www.miroirsetendus.fr/assets/css/../images/biennale/outline-menu1.png); background-repeat: no-repeat; background-size: 100%; } .menu-principal menu > li.menu-billetterie > a.current::after{ top: -0.5em; left: -0.6em; } .menu-principal menu > li.menu-programme > a.current::after{ background-image: url(https://www.miroirsetendus.fr/assets/css/../images/biennale/outline-menu2.png); top: -0.45em; left: -0.6em; width: 11em; } .menu-principal menu > li.menu-la-haut > a.current::after{ background-image: none; } /* -767 */ @media (max-width: 767px){ .header { background-size: 200%, 200%; background-position: bottom -1px center, bottom center; } .menu-principal menu{ flex-wrap: wrap; } .menu-principal menu > li{ width: 50%; } .menu-principal menu > li:nth-child(2n){ padding-left: var(--marge); } } /* ----------------------------- */ /* Encart réservation /* ----------------------------- */ .resa{ position: relative; image-rendering: pixelated; } .resa-inner{ display: flex; align-items: center; padding: 0 var(--marge); width: 74%; } .resa-part2{ position: relative; top: 0.3vw; margin-left: 1rem; } .resa img{ user-select: none; image-rendering: pixelated; } .lion{ user-select: none; width: 10vw; position: absolute; top: 0; left: 90%; } /* -767 */ @media (max-width: 767px){ .resa{ display: none; } } /* ----------------------------- */ /* Encart lions /* ----------------------------- */ .lions{ position: relative; height: 12vw; } /* -767 */ @media (max-width: 767px){ .lions{ display: none; } } /* ----------------------------- */ /* Footer /* ----------------------------- */ .footer{ display: flex; justify-content: space-between; align-items: flex-end; } .mire{ position: fixed; bottom: 0; left: 0; width: 100%; height: 1rem; background-image: url('../images/biennale/bg-footer.svg'); background-size: 5rem; background-repeat: repeat-x; z-index: 2; } .footer-menu1{ position: relative; top: 0.25em; user-select: none; } .footer-menu2 menu{ columns: 3; column-width: 14em; column-gap: var(--marge); } /* -767 */ @media (max-width: 767px){ .footer-menu2 menu{ column-width: 12em; } } /* ----------------------------- */ /* Tags / filtres /* ----------------------------- */ .programme-tags, .event-tags, .event-villes-tags{ display: flex; align-items: flex-start; user-select: none; } .programme-tags, .event-tags{ background-image: url('../images/biennale/line-h1.png'); background-size: 165rem; background-position: bottom left; background-repeat: repeat-x; } .programme-tags li + li, .event-villes-tags li + li, .event-retour{ margin-left: 5em; } .programme-tags li, .event-villes-tags li a, .event-retour{ border: 2px solid; border-radius: 3em; display: flex; padding: 0 3.2em; height: 3.1em; align-items: end; padding-bottom: 0.1em; white-space: nowrap; } .event-retour{ padding-right: 1em; } .event-retour::after{ content: url('../images/biennale/icon-retour.svg'); display: inline-block; width: 2em; margin-left: 1.5em; position: relative; top: 0.3em; } /* -767 */ @media (max-width: 767px){ .programme-tags, .event-tags{ overflow-x: scroll; } .programme-tags::-webkit-scrollbar, .event-tags::-webkit-scrollbar{ display: none; } } /* ----------------------------- */ /* Programme /* ----------------------------- */ .item{ min-height: 28rem; display: flex; gap: calc(var(--marge) * 2.5); } .item.is-hidden{ display: none; } .item-mois{ text-transform: capitalize; } .item-texte{ display: flex; flex-direction: column; justify-content: space-between; } .item-texte-part1{ margin-bottom: var(--marge); } /* +768 */ @media (min-width: 768px){ .events{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 38rem), 1fr)); } .item{ margin-top: var(--marge); padding: 0 var(--marge) var(--marge); background-image: url('../images/biennale/line-h2.png'), url('../images/biennale/line-v1.png'); background-size: 170rem, 0.21rem; background-position: bottom left, top right; background-repeat: repeat-x, repeat-y; } .item-generique{ opacity: 0; transition: transform 0.35s ease-out; transform: translateY(-2em); } .item:hover .item-generique{ opacity: 1; transform: translateY(0); } } /* -767 */ @media (max-width: 767px){ .item{ margin: 0 var(--marge); padding: var(--marge) 0; background-image: url('../images/biennale/line-h2.png'); background-size: 170rem; background-position: bottom left; background-repeat: repeat-x; } } /* ----------------------------- */ /* Éditorial /* ----------------------------- */ .event-chapeau p + p, .event-texte p + p, .article-chapeau p + p, .article-section p + p{ margin-top: 2em; } .article-section h2{ margin-bottom: 1em; } .article-section * + h2{ margin-top: 1.8em; } /* ----------------------------- */ /* Évènement / spectacle /* ----------------------------- */ .event-date-titre{ display: flex; } .event-infos{ margin-top: 1.5em; } .event-date{ padding-right: var(--marge); } .event h1{ background-image: url('../images/biennale/line-v1.png'); background-size: 0.21rem; background-position: top left; background-repeat: repeat-y; padding-left: var(--marge); } .logo-soutiens{ margin-top: 1.5rem; } .logo-soutiens img{ display: block; height: 6.4rem; } /* +768 */ @media (min-width: 768px){ .event{ display: grid; } } /* +1200 */ @media (min-width: 1200px){ .event{ grid-template-columns: repeat(3, 1fr); } .event-date-titre, .event-horaires-lieu{ margin-top: var(--marge); padding: 0 var(--marge) var(--marge) var(--marge); } .event-generique{ margin-top: var(--marge); padding: 0 0 var(--marge) var(--marge); } .event-galerie, .event-chapeau{ padding: var(--marge) var(--marge) 0 var(--marge); } .event-texte{ padding: var(--marge) 0 0 var(--marge); } .event-date-titre, .event-galerie{ padding-left: 0; } .event-date-titre, .event-horaires-lieu{ background-image: url('../images/biennale/line-h2.png'), url('../images/biennale/line-v1.png'); background-size: 170rem, 0.21rem; background-position: bottom left, top right; background-repeat: repeat-x, repeat-y; } .event-generique{ background-image: url('../images/biennale/line-h2.png'); background-size: 170rem; background-position: bottom left; background-repeat: repeat-x; } .event-galerie, .event-chapeau{ background-image: url('../images/biennale/line-v1.png'); background-size: 0.21rem; background-position: top right; background-repeat: repeat-y; } } /* +768-1199 */ @media (min-width: 768px) and (max-width: 1199px){ .event{ grid-template-columns: repeat(2, 1fr) } .event-date-titre{ margin-top: var(--marge); padding: 0 var(--marge) var(--marge) 0; } .event-horaires-lieu{ margin-top: var(--marge); padding: 0 0 var(--marge) var(--marge); } .event-generique{ padding: var(--marge) var(--marge) var(--marge) 0; } .event-galerie{ padding: var(--marge) 0 var(--marge) var(--marge); } .event-chapeau{ padding: var(--marge) var(--marge) 0 0; } .event-texte{ padding: var(--marge) 0 0 var(--marge); } .event-date-titre, .event-generique{ background-image: url('../images/biennale/line-h2.png'), url('../biennale/images/line-v1.png'); background-size: 170rem, 0.21rem; background-position: bottom left, top right; background-repeat: repeat-x, repeat-y; } .event-horaires-lieu, .event-galerie{ background-image: url('../images/biennale/line-h2.png'); background-size: 170rem; background-position: bottom left; background-repeat: repeat-x; } .event-chapeau{ background-image: url('../images/biennale/line-v1.png'); background-size: 0.21rem; background-position: top right; background-repeat: repeat-y; } } /* -767 */ @media (max-width: 767px){ .event > section{ padding: var(--marge) 0; background-image: url('../images/biennale/line-h2.png'); background-size: 170rem; background-position: bottom left; background-repeat: repeat-x; } } /* ----------------------------- */ /* Page standard /* ----------------------------- */ .page-standard{ background-image: url('../images/biennale/line-h1.png'); background-size: 165rem; background-position: top left; background-repeat: repeat-x; } .article-sections{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); } * + .section-logos{ margin-top: 2.5em; } .section-logos{ display: flex; flex-wrap: wrap; align-items: center; } .section-logos .logo-partenaire{ display: inline-block; vertical-align: middle; margin: 0 var(--marge) var(--marge) 0; display: flex; } .logo-partenaire.landscape img{ max-width: 11rem; max-height: 8rem; } .logo-partenaire.portrait img{ max-width: 8rem; max-height: 11rem; } .logo-partenaire.square img{ max-width: 8rem; max-height: 8rem; } .logo-partenaire img{ display: block; width: 100%; } /* +768 */ @media (min-width: 768px){ .page-standard{ display: grid; grid-template-columns: repeat(2, 1fr); } .article-chapeau{ margin-top: var(--marge); padding: 0 var(--marge) var(--marge) 0; } .article-section{ margin-top: var(--marge); padding: 0 var(--marge); background-image: url('../images/biennale/line-v1.png'); background-size: 0.21rem; background-position: top left; background-repeat: repeat-y; } } /* +1440 */ @media (min-width: 1440px){ .page-standard{ grid-template-columns: repeat(3, 1fr); } .article-sections{ grid-column: span 2; } } /* -767 */ @media (max-width: 767px){ .article-chapeau{ padding: var(--marge); background-image: url('../images/biennale/line-h2.png'); background-size: 170rem; background-position: bottom left; background-repeat: repeat-x; } .article-section{ margin-top: var(--marge); padding: 0 var(--marge) var(--marge); background-image: url('../images/biennale/line-h2.png'), url('../images/biennale/line-v1.png'); background-size: 170rem, 0.21rem; background-position: bottom left, top right; background-repeat: repeat-x, repeat-y; } }