@import "variables.less"; .a-unset { all: unset; } /* CONTAINERS */ .a-flex { display: flex; } .a-row { display: flex; flex-direction: row; } .a-column { display: flex; flex-direction: column; } .a-column-reverse { display: flex; flex-direction: column-reverse; } .a-flow-wrap { flex-flow: wrap; } .a-grid { display: grid; } .a-grid-columns-2 { display: grid; grid-template-columns: 1fr 1fr; } .a-grid-columns-5 { display: grid; grid-template-columns: repeat(5, 1fr); } .a-grid-child-2 { grid-column: span 2; } .a-grid-columns-3 { display: grid; grid-template-columns: repeat(3, 1fr); } .a-grid-columns-3-spaced { display: grid; grid-template-columns: 1fr auto 1fr; } .a-grid-columns-4-max-content { display: grid; grid-template-columns: repeat(4, max-content); } .a-grid-column-start-2 { grid-column-start: 2; } .a-wrap { flex-wrap: wrap; } .a-inline { display: inline; } .a-inline-block { display: inline-block; } .a-align-center { align-items: center; } .a-align-stretch { align-items: stretch; } .a-align-end { align-items: end; } .a-align-self-end { align-self: end; } .a-align-self-center { align-self: center; } .a-align-items-stretch { align-items: stretch; } .a-right-0 { right: 0px; } .a-right-1 { right: 1em; } .a-right-2 { right: 2em; } .a-top-1 { top: 1em; } .a-top-2 { top: 2em; } .a-top-50{ top: 50%; } .a-gap-smallest { gap: var(--gap-smallest); } .a-gap-small { gap: var(--gap-small); } .a-gap-medium { gap: var(--gap-medium); } .a-gap-big { gap: var(--gap-big); } .a-gap-variable-horizontal { gap: max(var(--gap-small), 2vw); } .a-gap-horizontal { gap: var(--gap-horizontal); } .a-gap-vertical { gap: var(--gap-vertical); } .a-justify-between { justify-content: space-between; } .a-justify-center { justify-content: center; } .a-justify-end { justify-content: end; } .a-w-full { width: 100%; } .a-w-m-full { max-width: 100%; } .a-w-full-important { width: 100% !important; } .a-w-5 { width: 5%; } .a-w-10 { width: 10%; } .a-w-15 { width: 15%; } .a-w-min-50 { min-width: 50%; } .a-w-40 { width: 40%; } .a-w-50 { width: 50%; } .a-w-70 { width: 70%; } .a-w-80 { width: 80%; } .a-w-90 { width: 90%; } .a-w-40-max{ max-width: 50%; } .a-w-50-max{ max-width: 50%; } .a-w-full-max { max-width: 100%; } .a-w-fit { width: fit-content; } .a-h-4 { height: 1rem; } .a-h-5 { height: 1.25rem; } .a-h-8 { height: 2rem; } .a-h-12 { height: 3rem; } .a-h-20 { min-height: 20%; } .a-h-30 { min-height: 30%; } .a-h-min-300px { min-height: 300px; } .a-h-max-80px { max-height: 80px; } .a-h-full { height: 100%; } .a-h-full-max { max-height: 100%; } .a-h-100vh-min { min-height: 100vh; } .a-sidebar { height: 100%; } .a-cover { object-fit: cover; } .a-contain { object-fit: contain; } .a-flex-1 { flex: 1; } .a-flex-2 { flex: 2; } .a-flex-3 { flex: 3; } .a-flex-5 { flex: 5; } .a-flex-6 { flex: 6; } .a-flex-7 { flex: 7; } .a-flex-basis-5 { flex-basis: 5%; } .a-flex-basis-10 { flex-basis: 10%; } .a-flex-basis-15 { flex-basis: 15%; } .a-flex-basis-30 { flex-basis: 30%; } .a-flex-basis-50 { flex-basis: 50%; } .a-flex-basis-60 { flex-basis: 70%; } .a-flex-basis-70 { flex-basis: 70%; } .a-flex-basis-80 { flex-basis: 80%; } .a-flex-basis-90 { flex-basis: 90%; } .a-flex-basis-100 { flex-basis: 100%; } .a-position-relative { position: relative; } .a-position-absolute { position: absolute; } .a-m-auto{ margin: auto !important; } .a-m-0 { margin: 0; } .a-m-1 { margin: 0.25rem; } .a-p-0 { padding: 0; } .a-p-small { padding: var(--small-horizontal-padding); } .a-mh-main { margin-right: var(--main-horizontal-padding); margin-left: var(--main-horizontal-padding); } .a-n-mh-main { margin-right: calc(-1 * var(--main-horizontal-padding)); margin-left: calc(-1 * var(--main-horizontal-padding)); } .a-mv-0{ margin-top: 0; margin-bottom: 0; } .a-mv-main { margin-top: var(--main-vertical-padding); margin-bottom: var(--main-vertical-padding); } .a-pv-small { padding-top: var(--small-vertical-padding); padding-bottom: var(--small-vertical-padding); } .a-pv-small-important { padding-top: var(--small-vertical-padding) !important; padding-bottom: var(--small-vertical-padding) !important; } .a-ph-small { padding-right: var(--small-horizontal-padding); padding-bottom: var(--small-horizontal-padding); } .a-ph-main { padding-right: var(--main-horizontal-padding); padding-left: var(--main-horizontal-padding); } .a-ph-main-important { padding-right: var(--main-horizontal-padding) !important; padding-left: var(--main-horizontal-padding) !important; } .a-ph-main-2 { padding-right: calc(var(--main-horizontal-padding) * 2); padding-left: calc(var(--main-horizontal-padding) * 2); } .a-pr-main { padding-right: var(--main-horizontal-padding) !important; } .a-pl-main { padding-left: var(--main-horizontal-padding) !important; } .a-pv-main { padding-top: var(--main-vertical-padding); padding-bottom: var(--main-vertical-padding); } .a-pb-main { padding-bottom: var(--main-vertical-padding); } .a-pt-main { padding-top: var(--main-vertical-padding); } .a-pt-small { padding-top: calc(var(--main-vertical-padding) / 2); } .a-p-main { padding-right: var(--main-horizontal-padding); padding-left: var(--main-horizontal-padding); padding-top: var(--main-vertical-padding); padding-bottom: var(--main-vertical-padding); } .a-p-1 { padding: 0.25rem; } .a-p-1px { padding: 1px; } .a-p-2 { padding: 0.5rem; } .a-p-3 { padding: 0.75rem; } .a-p-4 { padding: 1rem; } .a-p-12 { padding: 3rem; } .a-pl-0 { padding-left: 0rem; } .a-pl-1 { padding-left: 0.25rem; } .a-pl-4 { padding-left: 1rem; } .a-pr-0 { padding-right: 0; } .a-pr-4 { padding-right: 1rem; } .a-pr-8 { padding-right: 2rem; } .a-pl-vertical-main { padding-left: var(--main-vertical-padding); } .a-pl-vertical-main-2 { padding-left: calc(var(--main-vertical-padding) / 2); } .a-pr-vertical-main { padding-right: var(--main-vertical-padding) !important; } .a-pr-vertical-main-2 { padding-right: calc(var(--main-vertical-padding) / 2); } .a-pv-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .a-pv-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .a-pv-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .a-ph-2 { padding-right: 0.5rem; padding-left: 0.5rem; } .a-ph-4 { padding-right: 1rem; padding-left: 1rem; } .a-pv-medium { padding-top: var(--gap-medium); padding-bottom: var(--gap-medium); } .a-ph-medium { padding-right: var(--gap-medium); padding-left: var(--gap-medium); } .a-pv-big { padding-top: var(--gap-big); padding-bottom: var(--gap-big); } .a-ph-big { padding-right: var(--gap-big); padding-left: var(--gap-big); } .a-pt-0 { padding-top: 0; } .a-pt-1 { padding-top: 0.25rem; } .a-pt-2 { padding-top: 0.5rem; } .a-pb-0 { padding-bottom: 0; } .a-pb-1 { padding-bottom: 0.25rem; } .a-pb-2 { padding-bottom: 0.5rem; } .a-pb-3 { padding-bottom: 0.75rem; } .a-pb-4 { padding-bottom: 1rem; } .a-pb-8 { padding-bottom: 2rem; } .a-mv-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .a-mv-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .a-mv-4 { margin-top: 1rem; margin-bottom: 1rem; } .a-mh-medium { margin-left: var(--gap-medium); margin-right: var(--gap-medium); } .a-mv-medium { margin-top: var(--gap-medium); margin-bottom: var(--gap-medium); } .a-mv-big { margin-top: var(--gap-big); margin-bottom: var(--gap-big); } .a-m-4 { margin: 1rem; } .a-mh-1 { margin-right: 0.25rem; margin-left: 0.25rem; } .a-mh-2 { margin-right: 0.5rem; margin-left: 0.5rem; } .a-ml-0 { margin-left: 0rem; } .a-ml-1 { margin-left: 0.25rem; } .a-ml-auto { margin-left: auto; } .a-mr-0 { margin-right: 0rem; } .a-mr-2 { margin-right: 0.5rem; } .a-mr-4 { margin-right: 1rem; } .a-mb-0 { margin-bottom: 0; } .a-m-0-important { margin: 0 !important; } .a-mb-1 { margin-bottom: 0.25rem; } .a-mb-2 { margin-bottom: 0.5rem; } .a-mb-3 { margin-bottom: 0.75rem; } .a-mb-4 { margin-bottom: 1rem; } .a-mb-6 { margin-bottom: 1.5rem; } .a-mb-8 { margin-bottom: 2rem; } .a-mb-9 { margin-bottom: 2.25rem; } .a-mb-9-important { margin-bottom: 2.25rem !important; } .a-mb-20 { margin-bottom: 5rem; } .a-mb-40{ margin-bottom: 10rem; } .a-mb-smallest { margin-bottom: var(--gap-smallest); } .a-mb-small { margin-bottom: var(--gap-small); } .a-mt-smallest { margin-top: var(--gap-smallest); } .a-mt-0 { margin-top: 0; } .a-mt-0-important { margin-top: 0 !important; } .a-mt-1 { margin-top: 0.25rem; } .a-mt-2 { margin-top: 0.5rem; } .a-mt-3 { margin-top: 1rem; } .a-mt-4 { margin-top: 1rem; } .a-mt-8 { margin-top: 2rem; } .a-mt-9 { margin-top: 2.25rem; } .a-mt-auto { margin-top: auto; } .a-br-0-important { border-right: 0 !important; } .a-b-1 { border: 0.1rem solid var(--color-dark); } .a-b-2 { border: 0.2rem solid var(--color-dark); } .a-top-0 { top: 0; } .a-left-0 { left: 0; } .a-bottom-0 { bottom: 0; } .a-bottom-10 { bottom: 10px; } .a-fullpage { width: 100%; height: calc(100% - var(--fix-wp-gap)); position: fixed; top: var(--fix-wp-gap); left: 0; opacity: 1; } .a-fixed { position: fixed; } .a-relative { position: relative; } .a-absolute { position: absolute; } .a-events-no { pointer-events: none; } .a-events { pointer-events: all; } /* z-index */ .a-z-1 { z-index: 20; } .a-z-10 { z-index: 200; } /* COLORS */ .a-text-light { color: var(--color-light); } .a-text-dark { color: var(--color-dark); } .a-text-accent { color: var(--color-accent); } .a-session-sold-out-color { color: #4b4b4b; } .a-session-sold-out-hover:hover { color: var(--color-accent) !important; > div { color: var(--color-accent) !important; } } /* BUTTONS */ body.a-auditori .a-button-accent{ background-color: var(--color-accent); color: var(--color-darkest); text-decoration: none !important; } .a-animate-transitions { transition: 0.7s; } .a-button-accent-hover { transition: 0.7s; &:hover, &:focus, &:focus-visible { background-color: var(--color-accent); color: var(--color-dark); } } .a-button-focus-accent[aria-checked="false"] { &:focus, &:focus-visible { background-color: var(--color-light-accent) !important; color: var(--color-dark) !important; } } .a-min-content { width: min-content; } .a-max-content { width: max-content; } .a-no-wrap { white-space: nowrap; } .a-word-break-normal { word-break: normal; } .a-word-break-normal { word-break: normal; } .a-break-inside-auto { break-inside: auto; } .a-break-inside-avoid { break-inside: avoid; } .a-break-after { break-after: page; } .a-b-transparent { border-color: rgba(0, 0, 0, 0); transition: 0.1s; } .a-underline { // border-bottom: 0.1rem solid var(--color-dark); position: relative; &:after { content: ""; background: black; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; } } .a-underline-80 { position: relative; &:after { content: ""; background: black; position: absolute; bottom: 0; left: 0; height: 1px; width: 80%; margin-left: 10%; } } .a-bb-1 { border-bottom: 0.1rem solid var(--color-dark); } .a-shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); } .a-pointer { cursor: pointer; } .a-text-start-important { text-align: start !important; } .a-text-center { text-align: center; } .a-text-end { text-align: end; } /* ASPECT RATIOS */ .a-wider-media-aspect-ratio { aspect-ratio: 16 / 9; } .a-default-media-aspect-ratio { aspect-ratio: 14 / 9; } .a-banner-aspect-ratio { aspect-ratio: 4 / 1; } .a-min-box-ratio { position: relative; float: left; display: flex; &::before { padding-top: 108%; float: left; content: ""; display: block; } } /* VISIBILITY */ .a-none { display: none; } .a-show-sm { @media @sm { display: none; } } .a-hide-sm { @media @max-sm { display: none; } } .a-show-md { @media @md { display: none; } } .a-hide-md { @media @max-md { display: none; } } .a-show-lg { @media @lg { display: none; } } .a-hide-lg { @media @max-lg { display: none; } } .a-hide-xl { @media @max-xl { display: none; } } .a-invisible { visibility: hidden; } .a-transparent { opacity: 0; } .a-bg-transparent { background: rgba(0,0,0,0) !important; } .a-opacity-1 { opacity: 0.1; } .a-semitransparent { opacity: 0.64; } .a-bg-no { background-color: rgba(0, 0, 0, 0) !important; } .a-bg-dark { background-color: var(--color-dark); } .a-bg-dark-semitransparent { background-color: rgba(0, 0, 0, 0.80); } .a-opacity-transition-1 { transition: opacity 1s ease; } .a-bg-linear-gradient::after { display: block; position: relative; background-image: linear-gradient(rgba(0, 0, 0, 0) 0px, black); margin-top: -100px; height: 100px; width: 100%; content: ""; pointer-events: none; } .a-bg-black-linear-gradient-up-left { background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.8) 20%, rgba(255, 255, 255, 0) 60%) ; background-color: rgba(0, 0, 0, 0) !important; } .a-bg-full-image { background-repeat: no-repeat; background-size: cover; } /* HR */ .a-hr-strong-dark { border: 0; border-top: 1px solid var(--color-darkest); } .a-hr-slim-dark { border: 0; border-top: 1px solid var(--color-darkest); opacity: 0.1; } .a-bg-dark, .a-bg-dark-important { .a-hr-slim-dark { border: 0; border-top: 1px solid var(--color-light); opacity: 0.1; } } /* FONT */ .a-font-smallest { font-size: 0.65rem; line-height: 0.6rem; } .a-font-small { font-size: 0.8rem; } .a-font-default { font-size: 1rem; } .a-font-medium { font-size: 1.15rem; } .a-font-large { font-size: 1.3rem; } .a-font-mid-large { font-size: 1.4rem; } .a-font-extra-large { font-size: 1.7rem; } .a-font-banner { font-size: 3rem ; } .a-font-title { font-family: var(--font-title); letter-spacing: 0.05em; text-transform: uppercase; } .a-font-title a { text-decoration: none !important; } .a-font-body { font-family: var(--font-body); } .a-strong { font-weight: bold; } .a-upper { text-transform: uppercase; } .a-t-underline { text-decoration: underline; } .a-no-underline { a { text-decoration: none !important; } } .a-font-italic { font-style: italic; } /* CLIP PATH DECORATORS */ .a-clip-top-right-big { clip-path: polygon( 0% 0%, 0% 100%, 100% 100%, 100% 8vh, calc(100% - 8vh) 0% ); } .a-clip-bottom-right-big { clip-path: polygon( 0% 0%, 100% 0%, 100% calc(100% - 8vh), calc(100% - 8vh) 100%, 0 100% ); } .a-clip-top-left-big { clip-path: polygon(5vh 0, 100% 0, 100% 100%, 0 100%, 0 5vh); } .a-clip-right { clip-path: polygon( 0% 0%, 0% 100%, calc(100% - 35px) 100%, 100% 0px, 100% 0% ); &-padding:extend(.a-clip-right) { padding-right: 35px; } } .a-clip-bottom-right-small { clip-path: polygon( 0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100% ); } .a-clip-bottom-right { clip-path: polygon( 0% 0%, 100% 0%, 100% calc(100% - 35px), calc(100% - 35px) 100%, 0 100% ); &-padding:extend(.a-clip-bottom-right) { padding-right: 35px; } } .a-clip-bottom-right-top-left { clip-path:polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%); &-padding:extend(.a-clip-bottom-right) { padding-right: 35px; } } .a-clip-padding-right { padding-right: 35px; } /* ICONS */ .a-filter-white { filter: invert(94%) sepia(94%) saturate(23%) hue-rotate(337deg) brightness(104%) contrast(107%); } .a-no-pointer { cursor: default; } .a-overflow-auto { overflow: auto; } .a-overflow-hidden{ overflow: hidden; } .a-select.collapsed { display: none; } /* IMG */ .a-loading-img { width: min(20vw, 150px); margin-top: 2vh; } .a-intro-logo { width: min(70vw, 486px); } /* LIST */ .a-list-no-style { list-style: none; padding-left: 0; } .a-gutenberg-right{ margin-left: auto !important; } .a-gutenberg-left{ margin-right: auto !important; } .a-gutenberg-center{ margin-left: auto !important; margin-right: auto !important; } /* PRINT PAGE */ .a-print-break-before { break-before: page; }