@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

html {
    color: var(--vll-black);
}

:root{
    --plyr-color-main:var(--vll-pink);
    --plyr-font-size-base: 13px;
    --plyr-font-size-small: 12px;
    --plyr-font-size-time: 11px;
    --plyr-font-size-badges: 9px;
    --plyr-font-size-menu: var(--plyr-font-size-base);
    --plyr-font-weight-regular: 500;
    --plyr-font-weight-bold: 600;
    --plyr-font-size-captions-medium: 18px;
    --plyr-font-size-captions-large: 21px;
    --plyr-video-background: var(--vll-dark-green);
    --plyr-range-track-height: 8px;
    --plyr-line-height:1.3;
    --plyr-control-spacing: 1.3vmin;
    --plyr-control-icon-size: calc(12px + 1vmin);
    --plyr-video-range-track-background: rgba(0,255,255,0.42);
    --plyr-video-progress-buffered-background: var(--vll-dark-green);
    --plyr-progress-marker-background: white;
}

:lang(en) .vl-fr {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    font-size: 0 !important;
}

:lang(fr) .vl-en {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    font-size: 0 !important;
}

.vl-trad>span {
    pointer-events: none;
}

.vl-inline * {
    display: inline !important;
}

.vl-pointer {
    cursor: pointer;
}

body {
    position: relative;
    border: 0;
    margin: 0;
}

html,
body {
    scroll-behavior: smooth;
    scroll-padding-top: 20vh;
}


img {
    max-width: 100vw;
    max-height: 100vh;
}

button {
    cursor: pointer;
}

div#ccm-menu-highlighter,
div#ccm-menu-click-proxy {
    margin-top: -48px;
}

.vl-main,
.vl-main * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.vl-spinner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 101;
}

.vl-spinner:before {
    content: attr(title);
    color: var(--vll-white);
    position: fixed;
    top: calc(50% - 90px);
    left: 50%;
    transform: translateX(-50%);
}

.vl-spinner:after {
    content: '';
    border: 8px solid var(--vll-white-light);
    border-top: 8px solid var(--vll-main-color);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
    margin: 0;
    position: fixed;
    top: calc(50% - 40px);
    left: calc(50% - 40px);

}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#vll-header{
    min-height: 10vh;
    z-index:3;
}

.vl-landscreen {
    position: absolute;
    width: 100vmax;
    height: auto;
    opacity: 0.25;
    display: block;
    overflow: hidden;
    min-width: 260vh;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
}

.vl-main {
    min-height: 100vh;
    width: 100%;
    padding: 0 0 0 0;
    font-family: "Instrument Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: calc(10px + 0.92vmin);
    line-height: 1.618;
    display: flex;
    flex-direction: column;
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    color: var(--vll-black);
}



.vl-main #vll-video-embeded {
    font-size: calc(14px) !important;

}

.ccm-panel-open .vl-main {
    width: calc(100% - 320px);
}

.ccm-toolbar-visible .vl-main {
    min-height: calc(100vh - 48px);
}

.ccm-toolbar-visible .vl-main {
    min-height: calc(100vh - 48px);
}

.ccm-toolbar-visible[data-removed="true"] .vl-main {
    min-height: calc(100vh);
    margin-top: 0;
}

.ccm-toolbar-visible[data-removed="true"] #ccm-toolbar {
    display: none;
}

.vl-main p {
    min-width: 150px;
}

.vl-main select {
    padding: 0.33em 0.5em;
    letter-spacing: 0.5px;
    background-color: transparent;
    border-radius: none;
    border: none;
    border-bottom: 1px solid;
    cursor: pointer;
    color: inherit;
}

.vl-main select>option {
    color: #222 !important;
}

.vl-main select:hover {
    box-shadow: 0px 10px 20px 0px rgba(12, 0, 46, 0.08);
    transition: box-shadow 0.35s ease;
}

.vl-main a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.vl-main hr {
    width: 100%;
    color: transparent;
    border: none;
    border-top: 1px solid var(--vll-cream);
}

.vl-main .vl-bg-cream hr {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.vl-fade {
    animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*FONT */

.vl-f-xxl {
    font-size: min(7vw, 3em) !important;

}

.vl-f-xl {
    font-size: min(6vw, 2.5em) !important;
}

.vl-f-l {
    font-size: min(5vw, 2.5em) !important;
}

.vl-f-m {
    font-size: min(3.5vw, 1.5em) !important;
}

.vl-f-s {
    font-size: 0.8em !important;
}

.vl-f-xs {
    font-size: 0.6em !important;
}

.vl-up {
    text-transform: uppercase;
}

.vl-cap:first-letter {
    text-transform: uppercase;
}

.vl-i {
    font-style: italic;
}

.vl-f-right {
    text-align: right;
}

.vl-f-center {
    text-align: center;

}

.vl-f-left {
    text-align: left;
}

.vl-f-nowrap {
    white-space: nowrap;
}

.vl-f-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block !important;
    white-space: nowrap;
}

.vl-f-justify {
    text-align: justify;
}

.vl-f-light {
    font-weight: 300 !important;
}

.vl-f-normal {
    font-weight: 400 !important;
    text-decoration: none;
}

.vl-f-shadow {
    filter: drop-shadow(0.1em 0.1em .3em var(--vll-black-light));
}

/* LIST */

nav a {
    white-space: nowrap;
}

.vl-ul,
.vl-ul-2 {
    list-style: none;
}

.vl-ul-2 {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
}

#vll-lang-menu>li:first-child {
    border-right: 1px solid;
}

.vl-ref {
    line-height: 1.4em;
    text-indent: -4em;
    padding-left: 4em;
    width: calc(100% - 2em);
    margin-left: 2em;
    max-width: 1200px;
}

.vl-ref>li {
    margin-bottom: 0.7em;
    font-size: 90%;
}

.vl-ref>li>.vl-doi {
    text-indent: 0;
    overflow: hidden;
    vertical-align: middle;
    max-width: 20em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vl-ul.vl-end li {
    text-align: right;
}

/*FORMS */

.vl-express-form fieldset {
    padding: 0 var(--vll-padding-m) var(--vll-padding-m) var(--vll-padding-m);
}

.vl-express-form fieldset legend {
    text-transform: uppercase;
    padding: 5px;
    color: var(--vll-black-light);
}

.vl-express-form input[type="text"]:not(.tokenfield-input),
.vl-express-form input[type="password"]:not(.tokenfield-input) {
    padding: 0.25em 1em;
    border: none;
    outline: none;
    background: var(--vll-white);
    box-shadow: var(--vll-inline-shadow);
    color: var(--vll-black);
    min-width: min(232px, 60%);
    line-height: 1.8em;
    border-radius: 1.8em;
}

.vl-express-form input[type="text"]:not(.tokenfield-input),
.vl-express-form input[type="password"]:not(.tokenfield-input) {
    padding: 0.33em 1em;
    color: var(--vll-black);
    min-width: min(232px, 60%);
}

.vl-express-form .vl-input-prefix {
    border-radius: 1.8em 0 0 1.8em;
    border: none;
    box-shadow: var(--vll-inline-shadow);
    padding: 0.33em 1em 0.33em 1em;
    height: 100%;
    color: white;
    line-height: 1.8em;
}

.vl-express-form .vl-input-prefix+input {
    border-radius: 0 1.8em 1.8em0 !important;
}

.vl-express-form input[type="url"] {
    padding: 0.25em 1em;
    border: 2px solid transparent;
    outline: none;
    box-shadow: var(--vll-inline-shadow);
    color: var(--vll-black);
    min-width: min(232px, 60%);
    border-radius: 2em;
    line-height: 2em;
}

.vl-express-form input[type="url"]:invalid,.vl-express-form input[name="video_link"]:invalid  {
    background: #e69e9e;
}

.vl-express-form input[type="url"]:valid,.vl-express-form input[name="video_link"]:valid {
    background: #b8e69e;
}

.vl-express-form label {
    line-height: 2;
    margin-top: 1em;
    margin-bottom: 0.25em;
    display: block;
    padding-left: 2px;
    font-weight: bold;
}

.vl-express-form .ccm-input-time-wrapper {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.8em;

}

.vl-express-form .row {
    display: flex;
}

.vl-express-form .ccm-input-time-wrapper select:last-child {
    margin-right: 0 !important;
    width: auto;
    padding: 0.25em 0.5em;
    margin: 0 5px !important;
    border-radius: var(--vll-box-radius);
    border: 2px solid transparent;
    outline: none;
    background: var(--vll-white);
    box-shadow: var(--vll-inline-shadow);
    color: var(--vll-black);
}

.vl-express-form .text-muted {
    margin-left: 2px;
    color: var(--vll-black-light);
    font-size: 85%;
}

.ui-datepicker {
    z-index: 100 !important;
    margin-top: -42px;

}

.vl-express-form .cke_editable {
    min-height: 10vh;
}

.vl-input {
    padding: 0.25em 1em;
    border-radius: var(--vll-box-radius);
    border: 2px solid transparent;
    outline: none;
    background: var(--vll-white);
    box-shadow: var(--vll-inline-shadow);
    color: var(--vll-black);
    min-width: 12em;
}

textarea.vl-input {
    aspect-ratio: 4;
}

.vl-input:read-only {
    background: var(--vll-white-light);

}

.vl-label {
    padding-top: 0.33em;
    padding-bottom: 0.33em;
    padding-right: 5px;
    align-self: center;
}

.vl-input.vl-dark {
    background: var(--vll-black);
    color: var(--vll-white);
}

.vl-input:active {
    border: 2px solid var(--vll-main-color);
}

.vl-input:focus {
    border: 2px solid var(--vll-white);
}

input[type=file].vl-input {
    border-radius: var(--vll-box-radius);
    border: 2px solid transparent;
    outline: none;
    background: var(--vll-white);
    box-shadow: var(--vll-inline-shadow);
    color: var(--vll-black);
    padding: 0.15em;
}

input[type=file].vl-input::file-selector-button {
    margin-right: 1em;
    border: none;
    background: var(--vll-main-color);
    border-radius: var(--vll-box-radius);
    color: var(--vll-white);
    cursor: pointer;
    transition: all .2s ease-in-out;
    padding: 0.25em 0.66em;
}

input[type=file].vl-input::file-selector-button:hover {
    box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.3) inset;
    filter: brightness(1.05);
}

.vl-select>select {
    appearance: none;
    background-color: transparent;
    border: none;
    width: 100%;
    text-align: center;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    outline: none;
    padding: 0.33em 1em;
    line-height: 1.5;
    color: white;
}

.vl-select>select::-ms-expand {
    display: none;
}

.vl-select {
    border: none;
    border-radius: var(--vll-box-radius);
    box-shadow: var(--vll-inline-shadow);
    cursor: pointer;
    background-color: var(--vll-green);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.12), transparent 45%);
}

.vl-select::after {
    content: "";
    width: 0.8em;
    height: 0.5em;
    background-color: var(--vll-black-light);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}

.vl-select select:focus+.focus {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 2px solid var(--vll-white);
    border-radius: inherit;
    outline: none
}

.vl-select option {
    text-align: center;
    color: var(--vll-black);
}

.vl-autocomplete {
    position: absolute !important;
    bottom: 0;
    transform: translateY(100%);
    z-index: 999 !important;
    cursor: pointer;
    list-style: none;
}

.vl-autocomplete>li {
    transition: all 0.2s ease;
    background-color: transparent;
    font-weight: 400;
}

.vl-autocomplete>li:hover {
    font-weight: 700;

    background-color: var(--vll-white-light);
}

.vl-z-top {
    z-index: 999 !important;
}

.vl-switch {
    display: flex;
    position: relative;
    width: 2em;
    padding: 0 2em;
}

.vl-switch>label {
    position: absolute;
    display: inline-block;
    width: 3em;
    height: 1.5em;
    font-size: 0.9em;
    top: 0.5em;
    right: 1em;
}

.vl-switch>label>span {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--vll-black-light);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 0.75em;
    box-shadow: var(--vll-box-shadow);
}

.vl-switch>label>span:before {
    position: absolute;
    content: "";
    height: 1em;
    width: 1em;
    left: 0.25em;
    bottom: 0.25em;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.vl-switch>label>input {
    opacity: 0;
}

.vl-switch>label>input:checked+span {
    background-color: var(--vll-main-color);
}

.vl-switch>label>input:focus+span {
    box-shadow: 0 0 1px var(--vll-main-color);
}

.vl-switch>label>input:checked+span:before {
    -webkit-transform: translateX(1.5em);
    -ms-transform: translateX(1.5em);
    transform: translateX(1.5em);
}

/*COLORS */

.vl-f-transparent {
    color: transparent;
}

.vl-f-bright {
    filter: saturate(0.5) brightness(2);
}

.vl-f-black {
    color: var(--vll-black) !important;
}

.vl-f-black-light {
    color: var(--vll-black-light) !important;
}

.vl-f-white {
    color: var(--vll-white) !important;
}

.vl-f-pink {
    color: var(--vll-pink) !important;
}

.vl-f-green {
    color: var(--vll-green) !important;
}

.vl-f-blue {
    color: var(--vll-blue) !important;
}

.vl-f-purple {
    color: var(--vll-purple) !important;
}

.vl-f-dark-black {
    color: var(--vll-black) !important;
}

.vl-f-dark-pink {
    color: var(--vll-dark-pink) !important;
}

.vl-f-dark-green {
    color: var(--vll-dark-green) !important;
}

.vl-f-dark-blue {
    color: var(--vll-dark-blue) !important;
}

.vl-f-dark-purple {
    color: var(--vll-dark-purple) !important;
}

.vl-bg-purple {
    background-color: var(--vll-purple) !important;
}

.vl-bg-purple-grad {
    background-image: var(--vll-purple-gradient) !important;
}

.vl-bg-pink {
    background-color: var(--vll-pink) !important;
}

.vl-bg-pink-grad {
    background-image: var(--vll-pink-gradient) !important;
}

.vl-bg-grad {
    background: var(--vll-grad) !important;

}

.vl-bg-green {
    background-color: var(--vll-green) !important;
}

.vl-bg-green-grad {
    background-image: var(--vll-green-gradient) !important;
}

.vl-bg-blue {
    background-color: var(--vll-blue) !important;
}

.vl-bg-blue-grad {
    background-image: var(--vll-blue-gradient) !important;
}

.vl-bg-cream,
.vl-bg-cream-grad {
    background-image: var(--vll-cream-gradient) !important;
}

.vl-bg-black {
    background-color: var(--vll-black) !important;
}

.vl-bg-white {
    background-color: var(--vll-white) !important;
}

.vl-bg-light {
    background-color: var(--vll-white-light) !important;
}

.vl-bg-dark {
    background-color: var(--vll-black-light) !important;
}

.vl-bg-shallow {
    background-color: var(--vll-black-lightest) !important;
}

.vl-bg-dark-pink {
    background-color: var(--vll-dark-pink) !important;
}

.vl-bg-dark-green {
    background-color: var(--vll-dark-green) !important;
}

.vl-bg-dark-blue {
    background-color: var(--vll-dark-blue) !important;
}

.vl-bg-dark-purple {
    background-color: var(--vll-dark-purple) !important;
}

.vl-close {
    position: absolute;
    top: -0.3em;
    right: -0.25em;
    display: inline-block;
    line-height: 1.3em;
    height: 1.3em;
    width: 1.3em;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
}

.vl-close:hover {
    background-color: var(--vll-main-color);
}

/* BOX ELEMENTS */

.vl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-bottom: 4em
}

@media only screen and (max-width: 720px) {
    .vl-grid {
        grid-template-columns: repeat(1, 95%);
    }
}



.vl-grid>* {
    cursor: pointer;
}

.vl-flex h1,
.vl-flex h2,
.vl-flex h3,
.vl-flex h4 {
    font-weight: 700;
    line-height: 1em;
}

.vl-flex h1 {
    font-size: 2em;
}

.vl-flex h2 {
    font-size: 1.6em;
}

.vl-flex h3 {
    font-size: 1.2em;
}

.vl-flex h4 {
    font-size: 1.1em;
}

.vl-flex h5 {
    font-size: 1em;
}

.vl-flex details:not(.vl-texteditor details),
.vl-flex small:not(.vl-texteditor small),
.vl-flex p:not(.vl-texteditor p),
.vl-flex span:not(.vl-texteditor span) .vl-flex p:not([contenteditable="true"]) {
    display: inline-block;
}

.vl-flex span:not(.vl-texteditor span) {
    display: inline-flex;
    align-items: center;
    text-align: right;
}

/* FLEX BOX */
.vl-flex {
    display: flex;
    position: relative;
    align-items: stretch;
    z-index: 2;
}

.vl-flex ol>li {
    margin-left: 2em;
}

.vl-col>.vl-hr {
    border-bottom: 1px solid var(--vll-white-light);
}

.vl-flex:not(.vl-col)>.vl-hr {
    border-right: 1px solid var(--vll-white-light);
}

.vl-col>.vl-split {
    margin-bottom: var(--vll-padding-s);
}

.vl-wrap>.vl-split,
.vl-wrap>.vl-split+*,
.vl-wrap-r>.vl-split,
.vl-wrap-r>.vl-split+* {
    margin: var(--vll-padding-xs);
}

.vl-flex:not(.vl-col)>.vl-split {
    margin-right:var(--vll-padding-s);
}

.vl-flex:not(.vl-col)>.vl-border-split {
    border-right: 1px solid var(--vll-black-light);
}

@media only screen and (max-width: 720px) {

    .vl-flex:not(.vl-col)>.vl-split {
        margin-bottom: var(--vll-padding-s);
    }

    .vl-flex:not(.vl-col)>.vl-border-split {
        border-right: none;
        border-bottom: 1px solid var(--vll-black-light);
    }
}

.vl-p-xs {
    padding: var(--vll-padding-xs);
}

.vl-p-s {
    padding: var(--vll-padding-s);
}

.vl-p-m {
    padding: var(--vll-padding-m);
}

.vl-p-l {
    padding: var(--vll-padding-l);
}

.vl-p-xl {
    padding: var(--vll-padding-xl);
}

.vl-p-xxl {
    padding: var(--vll-padding-xxl);
}

.vl-px-xs {
    padding-left: var(--vll-padding-xs);
    padding-right: var(--vll-padding-xs);
}

.vl-px-s {
    padding-left: var(--vll-padding-s);
    padding-right: var(--vll-padding-s);
}

.vl-px-m {
    padding-left: var(--vll-padding-m);
    padding-right: var(--vll-padding-m);
}

.vl-px-l {
    padding-left: var(--vll-padding-l);
    padding-right: var(--vll-padding-l);
}

.vl-px-xl {
    padding-left: var(--vll-padding-xl);
    padding-right: var(--vll-padding-xl);
}

.vl-px-xxl {
    padding-left: var(--vll-padding-xxl);
    padding-right: var(--vll-padding-xxl);
}

.vl-py-xs {
    padding-top: var(--vll-padding-xs);
    padding-bottom: var(--vll-padding-xs);
}

.vl-py-s {
    padding-top: var(--vll-padding-s);
    padding-bottom: var(--vll-padding-s);
}

.vl-py-m {
    padding-top: var(--vll-padding-m);
    padding-bottom: var(--vll-padding-m);
}

.vl-py-l {
    padding-top: var(--vll-padding-l);
    padding-bottom: var(--vll-padding-l);
}

.vl-py-xl {
    padding-top: var(--vll-padding-xxl);
    padding-bottom: var(--vll-padding-xxl);
}

.vl-py-xxl {
    padding-top: var(--vll-padding-xxl);
    padding-bottom: var(--vll-padding-xxl);
}

.vl-m-xs {
    margin: var(--vll-margin-xs);
}

.vl-m-s {
    margin: var(--vll-margin-s);
}

.vl-m-m {
    margin: var(--vll-margin-m);
}

.vl-m-l {
    margin: var(--vll-margin-l);
}

.vl-m-xl {
    margin: var(--vll-margin-xl);
}

.vl-my-xs {
    margin-top: var(--vll-margin-xs);
    margin-bottom: var(--vll-margin-xs);
}

.vl-my-s {
    margin-top: var(--vll-margin-s);
    margin-bottom: var(--vll-margin-s);
}

.vl-my-m {
    margin-top: var(--vll-margin-m);
    margin-bottom: var(--vll-margin-m);
}

.vl-my-l {
    margin-top: var(--vll-margin-l);
    margin-bottom: var(--vll-margin-l);
}

.vl-my-xl {
    margin-top: var(--vll-margin-xl);
    margin-bottom: var(--vll-margin-xl);
}

.vl-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.vl-mx-xs {
    margin-left: var(--vll-margin-xs);
    margin-right: var(--vll-margin-xs);
}

.vl-mx-s {
    margin-left: var(--vll-margin-s);
    margin-right: var(--vll-margin-s);
}

.vl-mx-m {
    margin-left: var(--vll-margin-m);
    margin-right: var(--vll-margin-m);
}

.vl-mx-l {
    margin-left: var(--vll-margin-l);
    margin-right: var(--vll-margin-l);
}

.vl-mx-xl {
    margin-left: var(--vll-margin-xl);
    margin-right: var(--vll-margin-xl);
}

.vl-col {
    flex-direction: column;
}

.vl-transparent {
    background: transparent;
}

.vl-dark {
    background: var(--vll-black-light);
    color: var(--vll-white);
}

.vl-shallow {
    background: var(--vll-black-lightest);
    color: var(--vll-white);
}

.vl-light {
    background: var(--vll-white-light);
}

.vl-light,
.vl-light * {
    color: var(--vll-black);
}

.vl-light .vl-dark,
.vl-light .vl-btn {
    color: var(--vll-white);
}

.vl-light>hr {
    border-top: 1px solid var(--vll-black-light);
}

.vl-light>.vl-icon,
.vl-light>*>.vl-icon {
    filter: invert(100%);
}

.vl-invert {
    filter: invert(100%);
}

.vl-grad {
    background-image: var(--vll-lighting-gradient);
}

.vl-item-grad {
    background-image: var(--vll-item-gradient);
}

.vl-square {
    border-radius: 0;
}

.vl-round {
    border-radius: var(--vll-box-radius);
}

.vl-round-heavy {
    border-radius: var(--vll-box-radius-heavy);
}

.vl-round-full{
    border-radius: 50%;
}

.vl-shadow {
    box-shadow: var(--vll-box-shadow);
}

.vl-shadow-light {
    box-shadow: var(--vll-box-shadow-light);
}

.vl-o-hidden {
    overflow: hidden;
}

.vl-ox-hidden {
    overflow-x: hidden;
}

.vl-scroll {
    overflow-y: scroll;
    padding-right: 5px;
}

.vl-drop-shadow {
    filter: drop-shadow(0.05em 0.05em 0.07em rgba(0, 0, 0, 0.4));
}

.vl-wrap {
    flex-wrap: wrap;
}

.vl-wrap-r {
    flex-wrap: wrap-reverse;
}

.vl-flat {
    box-shadow: none;
}

.vl-full {
    width: 100%;
    flex: 1;
}

.vl-full-y {
    height: 100%;
}

.vl-half {
    flex: 1 1 50%;
    max-width: min(100%, 98vmin);
    min-width: min(360px, 95%);
}

.vl-column2 {
    width: 100%;
    flex: 1 1 48%;
    min-width: 280px;
}

.vl-clamp320 {
    max-width: 320px;
}

.vl-gridBlock {
    min-width: min(280px, 45%);
    max-width: min(420px, 100%);
    overflow: hidden;
    flex: 1 1 20% !important;
}

.vl-clamp250 {
    max-width: 250px;
}

.vl-clamp450 {
    max-width: 450px;
}

.vl-medium {
    width: min(160vmin, 100%);
    margin-left: auto;
    margin-right: auto;
}

.vl-full-y {
    min-height: 100vh;
}

.ccm-toolbar-visible .vl-full-y {
    min-height: calc(100vh - 48px);
}

.vl-row-r {
    flex-direction: row-reverse;
}

.vl-pan-right {
    flex: 1 1 70%;
    min-height: 70vh;
    z-index: 2;
    position: relative;
}

.vl-pan-left {
    flex: 1 1 25%;
    min-width: 260px;
    min-height: 20vh;
    z-index: 3;
    position: relative;
}

.ccm-panel-open .vl-medium {
    width: max(calc(92vmin - 320px), 70%);
}

.vl-end {
    justify-content: end;
}

.vl-center {
    justify-content: center;
}

.vl-align {
    align-items: center;
}

.vl-col.vl-center {
    align-items: center;
}

.vl-start {
    justify-content: start;
}

.vl-col.vl-start {
    align-items: start;
}

.vl-spaced {
    justify-content: space-between;
}

.vl-even {
    justify-content: space-evenly;
}

.vl-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
}

.vl-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.vl-right {
    position: absolute;
    top: 0;
    right: 0;
}

.vl-side {
    min-width: calc(40% - 2em);
}

.vl-long-side {
    min-width: max(60%, 60vmin);
}

.vl-side2 {
    min-width: calc(30% - 2em);
}

.vl-long-side2 {
    min-width: max(70%, 70vmin);
}

.vl-side3 {
    min-width: calc(20% - 2em);
}

.vl-long-side3 {
    min-width: max(80%, 80vmin);
}

/* IMAGES */

.vl-avatar {
    height: 1.5em;
    width: 1.5em;
    border-radius: 50%;
}

.vl-thumb,
.vl-thumb-xs,
.vl-thumb-s,
.vl-thumb-m,
.vl-thumb-l,
.vl-thumb-xl,
.vl-thumb-xxl,
.vll-thumb-xxxl {
    overflow: hidden;
}

.vl-thumb-xxxl {
    width: calc(var(--vll-thumb) *5);
    min-width: calc(var(--vll-thumb) *5);

}


.vl-thumb-xxl {
    width: calc(var(--vll-thumb) *3);
    min-width: calc(var(--vll-thumb) *3);

}

.vl-thumb-xl {
    width: calc(var(--vll-thumb) * 2);
    min-width: calc(var(--vll-thumb) * 2);

}

.vl-thumb-l {
    width: calc(var(--vll-thumb) * 1.5);
    min-width: calc(var(--vll-thumb) * 1.5);

}

.vl-thumb-m {
    width: calc(var(--vll-thumb) * 1.25);
    min-width: calc(var(--vll-thumb) * 1.25);

}

.vl-thumb {
    width: var(--vll-thumb);
    min-width: var(--vll-thumb);

}

.vl-thumb-s {
    width: calc(var(--vll-thumb) * 0.75);
    min-width: calc(var(--vll-thumb) * 0.75);

}

.vl-thumb-xs {
    width: calc(var(--vll-thumb) * 0.6);
    min-width: calc(var(--vll-thumb) * 0.6);
}

.vl-thumb-xxs {
    width: calc(var(--vll-thumb) * 0.45);
    min-width: calc(var(--vll-thumb) * 0.45);
}

.vl-fit {
    height: auto;
    width: 100%;
    object-fit: contain;
    overflow: auto;
}

.vl-fit-h {
    height: 100%;
    aspect-ratio: 16/9;
    max-width: 100%;
}

.vl-icon {
    width: auto;
    height: 0.8em;
    vertical-align: baseline;
    line-height: 1;
    display: inline-block;
}

.vl-icon-player{
    font-size:calc(var(--plyr-control-icon-size) + 4px ) !important;
    display: block;
}

:hover>.vl-icon:not(.vl-icon-player) {
    filter: brightness(0.85) sepia(0.6) saturate(1.5);
    transition: all 0.3s ease;
}
:hover>.vl-icon.vl-invert {
    filter: brightness(0.85) sepia(0.6) saturate(1.5) invert(1);
    transition: all 0.3s ease;
}


.vl-filter-pink {
    filter: invert(0.72) sepia(1) hue-rotate(-80deg) saturate(6.5) brightness(0.65);
}

:hover>.vl-filter-pink {
    filter: invert(0.72) sepia(1) hue-rotate(-80deg) saturate(6.5) brightness(0.65) !important;
    transition: 0.33s;
}

.vl-filter-green {
    filter: invert(0.67) sepia(1) hue-rotate(137deg) saturate(2);
}

:hover>.vl-filter-green {
    filter: invert(0.65) sepia(1) hue-rotate(-80deg) saturate(3) !important;
    transition: 0.33s;
}

/*BTN*/
.vl-btn {
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
    height: max-content;
    display: inline;
    text-shadow: 0 1px 1px #0000001a;
}

a.vl-link {
    display: inline;
    color: var(--vll-green);
    cursor: pointer;
    border-bottom: 1px solid transparent;
}

a.vl-link.vl-align {
    vertical-align: middle;
}

.vl-bg-black .vl-link {
    filter: brightness(1.4);
}

.vl-link:hover {
    border-bottom: 1px dotted;
}

.vl-btn {
    border-radius: 1.4em;
    overflow: hidden;
    position: relative;
    transition: all 0.2s linear 0s;
    text-align: center;
    white-space: nowrap;
    padding-left: 2em;
    padding-right: 2em;
    line-height: 1.4;
    letter-spacing: 1px;
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

button.vl-btn {
    color: var(--vll-white);
    outline: none;
}

.vl-btn.vl-full {
    flex: initial;
}

.vl-back {
    padding-left: 1.6em;
}

.vl-back:before {
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M6 12H18M6 12L11 7M6 12L11 17' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    position: absolute;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    top: 50%;
    transform: translateY(-50%);
}

.vl-h-bor {
    transition: all 0.3s ease;
    border: 1px solid transparent;
    background: transparent;
}

.vl-h-bor:hover {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.07);
}

.vl-h-underline:hover {
    border-bottom: 1px dotted;
}

.vl-h-scale:hover {
    transform: scale(1.05);
    transition: 0.15s all ease;
    border-bottom: none;
}

.vl-h-img:hover img:not(.vl-icon) {
    transform: scale(1.06);
    transition: 0.3s all;
    filter: brightness(0.85) contrast(1.25);
}

.vl-h-shadow:hover {
    transition: 0.2s all ease;
    box-shadow: var(--vll-box-shadow);
}

.vl-btn:before,
.vl-block-link:before {
    background-image: url('../img/icons/arrow_black.png');
    display: inline-block;
    position: absolute;
    top: 0;
    left: 8%;
    height: 100%;
    background-size: 1.2em;
    transform: scale(0, 1);
    transform-origin: left center;
    transition: all 0.2s linear 0s;
    width: 1.2em;
    height: 100%;
    content: '';
    background-repeat: no-repeat;
    background-position: center;
}

.vl-btn.vl-bg-pink:before,
.vl-btn.vl-bg-dark-pink:before,
.vl-btn.vl-bg-green:before,
.vl-btn.vl-bg-dark-green:before,
.vl-btn.vl-bg-black:before,
.vl-btn.vl-bg-dark-black:before,
.vl-btn.vl-bg-blue:before,
.vl-btn.vl-bg-dark-blue:before,
.vl-btn.vl-bg-purple:before,
.vl-btn.vl-bg-dark-purple:before {
    background-image: url('../img/icons/arrow.png');
}

.vl-btn.vl-f-dark-green:hover,
.vl-btn.vl-f-dark-blue:hover,
.vl-btn.vl-f-dark-purple:hover,
.vl-btn.vl-f-dark-pink:hover {
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0.04);
}

.vl-btn.vl-f-dark-green:before {
    background-image: url('../img/icons/arrow.png');
    filter: invert(0.67) sepia(1) hue-rotate(137deg) saturate(2);
}

.vl-btn.vl-f-dark-pink:before {
    background-image: url('../img/icons/arrow.png');
    filter: invert(0.72) sepia(1) hue-rotate(-80deg) saturate(6.5) brightness(0.65);
}

.vl-block-link:before {
    left: -1.7em;
}

.vl-btn:hover {
    text-indent: 0.6em;
    padding-right: 1.4em;
    box-shadow: inset 1000px 1000px 1000px rgba(255, 255, 255, 0.05);
}

.vl-block-link:hover {
    margin-left: 1em;
}

.vl-btn:hover:before,
.vl-block-link:hover:before {
    transform: scale(1, 1);
    text-indent: 0;
}

.vl-h-lighten:hover {
    box-shadow: inset 0 0 100vmax rgba(255, 255, 255, 0.15);
}

.vl-h-lighten2:hover {
    box-shadow: var(--vll-box-shadow), inset 0 0 100vmax rgba(255, 255, 255, 0.85);
}

.vl-bold,
.vl-b {
    font-weight: bold;
}

.vl-h-bold:hover {
    transition: all 0.3s;
    font-weight: bold;
}

.vl-sepia {
    filter: sepia(1)
}

.vl-rotate {
    perspective: 1000px;
}

.vl-rotate> :first-child {
    transform-style: preserve-3d;
    transition: transform 0.5s;
    height: 100%;
}

.vl-rotate> :first-child>* {
    backface-visibility: hidden;
}

.vl-rotate:hover>* {
    transform: rotateY(180deg);
}

.vl-rotate> :first-child>div:nth-of-type(2) {
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
    right: 1px;
    width: 100%;
    height: 100%;
}

.vl-lineUp1 {
    animation: 1.5s anim-lineUp ease-out;
}

.vl-lineUp2 {
    animation: 2.5s anim-lineUp ease-out;
}

.vl-lineUp3 {
    animation: 3.5s anim-lineUp ease-out;
}

.vl-reveal1 {
    opacity: 0;
    animation: 1.5s anim-reveal forwards;
}

.vl-reveal2 {
    opacity: 0;
    animation: 2.5s anim-reveal forwards;
}

.vl-reveal3 {
    opacity: 0;
    animation: 3.5s anim-reveal forwards;

}

.vl-img-spin:hover img {
    animation: 0.7s anim-rotate ease-out;
}

@keyframes anim-lineUp {
    0% {
        opacity: 0;
        transform: translateY(33%);
    }

    20% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        transform: translateY(0%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes anim-reveal {
    0% {
        opacity: 0;
        transform: translateX(80%);
    }

    20% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        transform: translateY(0%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes anim-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* CONCRETE CMS OVERRIDE */

/* DIALOG BOX override default concrete dialog box */

.vl-dialog {
    border: none !important;
    border-radius: var(--vll-box-radius) !important;
    background: var(--vll-black-light) !important;
    color: var(--vll-white) !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 1em !important;
}

.vl-dialog>div {
    border: none !important;
    background: transparent !important;
}

.vl-dialog>div:first-of-type {
    background: var(--vll-main-color) !important;
    border-radius: 0.25em 0.25em 0 0 !important;
}

/* override concrete default form selector */

.vl-selector table {
    width: 100%;
    background: var(--vll-cream);
    border-radius: var(--vll-box-radius);
    box-shadow: var(--vll-box-shadow);
    color: var(--vll-black-light);
}

.vl-selector thead{
    background-color: var(--vll-dark-green);
}

.vl-selector th {
    padding: 0.5em 1em;
    background-color: var(--vll-dark-pink );
    color: var(--vll-white);
}

.vl-selector th a.icon-link i {
  color: var(--vll-green) !important;
  text-decoration: none;
}

.vl-selector th:has(a.icon-link i), .vl-selector td:has(a.icon-link i) {
    background-color: var(--vll-white);
}

.vl-selector td a.icon-link i {
  color: var(--vll-dark-pink) !important;
  text-decoration: none;
}

.vl-selector td {
    padding: 0.5em 1em;
    text-align: center;
}

.vl-selector .ccm-item-selector-choose .btn {
    background: var(--vll-white-light);
    padding: var(--vll-padding-xs) var(--vll-padding-l);
    border-radius: var(--vll-box-radius);
    outline: none;
    border: navajowhite;
    color: var(--vll-white);
    box-shadow: var(--vll-box-shadow);
    cursor: pointer;
    white-space: nowrap;
}

.vl-selector .ccm-item-selector-choose .btn:hover {
    font-weight: bold;
}

.vl-selector .ccm-item-selector-loaded .btn-group {
    background: var(--vll-black-light);
    padding: var(--vll-padding-s);
    border-radius: var(--vll-box-radius);
    box-shadow: var(--vll-box-shadow);
    align-items: center;
    justify-content: center;
    display: flex;
}

.vl-selector .ccm-item-selector-loaded img.u-avatar {
    border-radius: 50%;
    max-width: 30px;
    max-height: 30px;

}

.vl-selector .ccm-item-selector-loaded .btn-group .btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vl-selector .ccm-item-selector-reset {
    background: transparent;
    border: none;
    outline: none;
}

.vl-selector .ccm-item-selector-reset>i {
    filter: invert(1);
    cursor: pointer;
}

.vl-selector .ccm-item-selector-reset>i:hover {
    transition: filter 0.3s;
    filter: invert(1) drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.5));
}


.vl-selector.vl-locked{
    pointer-events: none;
    filter: grayscale(0.3);
}

.vl-selector.vl-preview{
    pointer-events: none;
}

.vl-selector.vl-preview:before {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--vll-black-light);
  top: 0;
  left: 0;
}

.vl-selector.vl-locked a.icon-link, 
.vl-selector.vl-locked th:has(a.icon-link), 
.vl-selector.vl-locked td:has(a.icon-link) {
    display: none;
}

.vl-selector.vl-preview td a.icon-link i,
.vl-selector.vl-preview th a.icon-link i  {
    color:var(--vll-black) !important
}

.vl-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    visibility: collapse;
}

.vl-hidden *,
.vl-noEvent {
    pointer-events: none !important;
}

.vl-none {
    display: none !important;
}

@media only screen and (max-width: 720px) {
    .vl-no-phone {
        display: none !important;
    }
}

.vl-only-phone {
    display: none !important;
}

@media only screen and (max-width: 720px) {
    .vl-only-phone {
        display: flex !important;
    }
}

@media only screen and (max-width: 1280px) {
    .vl-medium {
        width: 100%;
    }
}

.vl-scroll-arrow {
    position: relative;
    width: 100%;
    display: block;
    height: 80px;
}

.vl-scroll-arrow>a {
    position: absolute;
    top: calc(50% - 1.5em);
    left: calc(50% - 0.5em);
    width: 0;
    height: 30px;
    border: 0px solid;
    border-radius: 0.25em;
    animation: jumpInfinite 1.5s infinite;
    font-size: calc(14px + 1.5vw);
    text-decoration: none !important;
    color: var(--vll-black) !important;
}

.vl-scroll-arrow>a::after {
    content: " ";
    position: absolute;
    top: 12px;
    left: -10px;
    width: 1em;
    height: 1em;
    border-bottom: 0.25em solid;
    border-right: 0.25em solid;
    border-radius: 0.15em 0;
    transform: rotateZ(45deg);
}

@keyframes jumpInfinite {
    0% {
        margin-top: 15px;
    }

    50% {
        margin-top: 25px;
    }

    100% {
        margin-top: 15px;
    }
}

.vl-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    font-size: 95% !important;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .25);
    background: white;
    z-index: 200;
    padding: 0.5em !important;
    transition: all 0.3s;
}

.ccm-toolbar-visible .vl-sticky {
    top: 48px;
}

.vl-bor {
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.vl-bor-r {
    border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.vl-bor-t {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.vl-bor-l {
    border-left: 1px solid rgba(0, 0, 0, 0.15);
}

.vl-bor-b {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.vl-bor-white {
    border: 0.25em solid white;
}

.vl-textbox {
    overflow-y: auto;
    position: relative;
    z-index: 1;
    color: rgba(0, 0, 0, 0.7);
    max-height: 30vh;
    height: max-content;
}

.vl-textoverlay {}

.vl-help {
    cursor: help;
}

p.vl-maxlines4,
div.vl-maxlines4>p {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    text-align: justify;
}

.vl-video-thumbnail {
    width: 100%;
    height: 100%;
    display: block;
    z-index: 100;
    background: var(--vll-green);
    text-align: center;
    position: relative;
}

.vl-video-thumbnail:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 32px;
    background-color: black;
    border-radius: 0.4em;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 12C19 12.3557 18.8111 12.6846 18.5039 12.8638L6.50387 19.8638C6.19458 20.0442 5.81243 20.0455 5.50194 19.8671C5.19145 19.6888 5 19.3581 5 19L5 5C5 4.64193 5.19145 4.3112 5.50194 4.13286C5.81243 3.95452 6.19458 3.9558 6.50387 4.13622L18.5039 11.1362C18.8111 11.3154 19 11.6443 19 12Z" fill="%23ffffff"></path></svg>');
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    opacity: 0.8;
    background-repeat: no-repeat;
    background-position: center center;
}

.vl-video-thumbnail:hover:after {
    background-color: var(--vll-pink);
    width: 52px;
    height: 34px;
    cursor: pointer;
}

.vl-link-thumbnail {
    width: 100%;
    height: 100%;
    display: block;
    z-index: 100;
    background: var(--vll-dark-green);
    text-align: center;
    position: relative;
    cursor: pointer;
}

.vl-link-thumbnail:hover {
    transform: scale(1.01);
}

.vl-filter {
    min-width: 15em;
}

.vl-filter>option {
    font-weight: 400;
}

.vl-filter>option:first-of-type {
    font-weight: bold;
}

.bibYear>h3 {
    font-size: 150%;
    color: var(--vll-purple);
    margin: 1em 0 0.5em 0;
}

.bibYear h4 {
    margin-top: 0.75em;
}

.bibItem {
    list-style-type: none;
    line-height: 1.4em;
    padding-left: 2em;
    padding-top: 0.5em;
}

.vl-tags>small {
    display: inline-block;
    font-size: 80%;
    padding: 0 0.35em;
    margin: 0.35em 0.7em 0.35em 0;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    height: max-content;
    white-space: nowrap;

}

.vl-menu-toggle {
    display: none;
}

/* Responsive rules */
@media (max-width: 768px) {
    .vl-menu-toggle {
        display: block !important;
        text-align: center;
        margin: 0 0.75em ;
        font-size: 2em;
    }

    .vl-menu {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .vl-menu a:not(.vl-menu-toggle) {
        opacity: 0;
        overflow: hidden;
        height: 0px;
        width: 0px;
        pointer-events: none;

    }

    .vl-menu:not(.vl-open) a:not(.vl-menu-toggle) {
        padding: 0 !important;
        margin: 0 !important;
    }

    .vl-menu.vl-open a {
        opacity: 1;
        overflow: hidden;
        height: auto;
        width: auto;
        pointer-events: all;
        justify-content: center;
        display: flex;
    }

    .vl-menu a:not(.vl-menu-toggle) {
        border-top: 1px solid var(--vll-white-light);
        transition: all 0.5s;
    }
}


/* ===================================== TABS PANEL ========================================================================*/

    .tabs {
      max-width: 52vmax;
      margin: 0 auto;
      overflow: hidden;
      background: rgba(255,255,255,0.25);
      padding: 0 1em;
      border-radius: 0.33em;
    }

    .tab-labels {
      display: flex;
    }

    .tab-labels label {
      flex: 1;
      cursor: pointer;
     font-weight: bold;
     transition: all 0.35s;
    transform: translateX(0);
        font-size: calc(5px + 0.72vmax);


    }

    .tab-labels label:hover {
        transform: translateX(10px);
    }

    input[type="radio"] {
      display: none;
    }

    .tab-content {
      display: none;
      border-radius: var(--vll-box-radius);
      margin-top: 1.618em;
      text-align: justify;
      font-size: 92%;
    }


    #tab1:checked ~ .tabs .label-tab1
    {
        border-bottom : 4px solid var(--vll-dark-green);
    }

    #tab2:checked ~ .tabs .label-tab2
    {
        border-bottom : 4px solid var(--vll-dark-blue);
    }

    #tab3:checked ~ .tabs .label-tab3
    {
        border-bottom : 4px solid var(--vll-dark-pink);
    }




    #tab1:checked ~ .tabs .content-tab1,
    #tab2:checked ~ .tabs .content-tab2,
    #tab3:checked ~ .tabs .content-tab3 {
      display: block;
    }


/* PLYR PLAYER ========================================================================== */


.plyr, .plyr-placeholder {
    aspect-ratio: 16/9;
    display: flex !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
}

.plyr-placeholder .vl-loader{
  width: 60px;
  height: 60px;
  border: 5px solid var(--vll-white-light);
  border-top: 5px solid var(--vll-pink);
  border-radius: 50%;
  animation: rotate 1.2s linear infinite;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
}

@keyframes rotate {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}


.plyr video::cue{
    font-size: calc(8px + 1vw) !important;
}

.plyr__caption{
    line-height: 130% !important;
}

.plyr__caption:empty{
    padding: 0 !important;
}

.plyr__progress .plyr__tooltip{
    max-width: max-content !important;
    flex-direction: column;
}

.plyr__progress .plyr__tooltip abbr{
    color:var(--vll-dark-green);
}

.plyr--captions-active .plyr__captions {
	letter-spacing: 0.5px;
}


.plyr-small .plyr__controls .plyr__controls__item.plyr__progress__container{
    position: absolute;
    width: 100%;
    bottom: calc(var(--plyr-control-spacing)*5);
    left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: var(--plyr-control-spacing) !important;
    margin-right: var(--plyr-control-spacing) !important;
    width: calc(100% - calc(2 * var(--plyr-control-spacing)));
}

.plyr-small .plyr__progress {
    left: 0 !important;
    margin-right: 0 !important;
}

.plyr-small .plyr__progress input[type="range"], .plyr__progress__buffer {
    margin-left: 0 !important;
    margin-right: 0 !important  ;
    width: 100% !important;
}

.plyr-small .plyr__controls {
    justify-content: space-around !important;
}

.plyr-small .plyr__controls .plyr__controls__item:first-child{
    margin-right: 0 !important;
}

.plyr__poster {
      background-size: cover !important;
}



.vl-player-chapter-menu {
	display: flex;
	position: absolute;
    background-color: rgba(0,0,0,0.7);
	top: 0px;
	right: 0px;
	width: 50%;
	height: calc(100% - 35px - 1vw);
	z-index: 9999;
	flex-direction: column;
	overflow-y: auto;
	padding: 10px;
	box-sizing: border-box;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(4px);
	max-width: 360px;
    font-size: calc(8px + 0.5vmin);
    box-shadow: -5px 0 5px rgba(0, 0, 0, .25);
  }

.vl-player-chapter-menu button {
    background: none;
    border: none;
    text-align: left;
    padding: 5px;
    width: 100%;
    cursor: pointer;
    color: white;
    transition: all 0.25s;
  }


.vl-player-chapter-menu button:hover {
    background-color: var(--vll-white-light);
}


.vl-player-chapter-menu button.active {
    background: var(--vll-white);
    font-weight: bold;
    color: var(--vll-black);
  }


  /* HOME ================================================ */

  
#vll-sections::before,#vll-about::before,
#vll-team::before  {
  content: "";
  width: 100%;
  background: var(--vll-green);
  height: 4em;
  position: absolute;
  top: -2em;
  transform: rotate(-2deg);
}

#vll-about::before {
  transform: rotate(-2deg);
}

#vll-team::before {
  background: var(--vll-cream);
  transform: rotate(2deg);
}

.vl-situation-description{
    position: absolute;
    inset: 0;
    color: white;
    z-index: 4;
    opacity: 1;
    transition: all 0.5s ease;
    transition-delay: 0s;
    transition-delay: 0.1s;
    top: 50%;
    transform: translateY(50%) scaleY(0);
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    height: 100%;
    padding: 1em 2em;
}

.vl-situation-description span{
        width: 6em;
        border-radius: 1em;
        margin-top: 1em;
}




.vl-situation:hover  .vl-situation-description {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}

    
.vl-situation>article::before, .vl-situation>article::after {
  content: '';
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.94);
  position: absolute;
  transform-origin: left;
  transform: scaleX(0);
  transition: all 0.45s cubic-bezier(0.38, 0.26, 0.05, 1.07);
    transition-delay: 0s;
  transition-delay: 0s;
  z-index: 3;
}

.vl-situation:hover>article::before, .vl-situation:hover>article::after {
  transform: scaleX(1);
}

.vl-situation>article::after {
  top: 50.01%;
  transition-delay: 0.15s;
}

ul#pagination, ul#situations-pagination{
    max-width: 50%;
    overflow-x: scroll;
    margin: auto;
    justify-content: space-around;
}


html.ccm-toolbar-visible .ui-dialog .ui-dialog-titlebar {
  background-color: var(--vll-dark-green) !important;
  font-family: "Instrument Sans", sans-serif;
}

.ccm-ui .btn{
    background-color: var(--vll-dark-green) !important;
    border: var(--bs-btn-border-width) solid var(--vll-dark-green) !important;
    font-family: "Instrument Sans", sans-serif !important;
}

.ui-widget input[type="checkbox"]{
    width: 1.33em;
    height: 1.33em;
    cursor: pointer;
}

#vll-lab-list a, #vl-fuzzy-result a.vll-lab{
    min-width:min(90vw, 525px);
    width:520px; 
    max-width: min(90vw, 520px);
    border-color: var(--vll-dark-pink);
    background-color: var(--vll-white);
    position: relative;
    color: var(--vll-dark-pink);
}

#vll-lab-list a.vl-shared{
    border-color: var(--vll-dark-green);
    background-color: var(--vll-dark-green);
    color: var(--vll-dark-green);
}

#vll-lab-list a.vl-shared:before{
  content: "Partagé avec moi";
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--vll-dark-green);
  display: block;
  z-index: 999;
  font-size: 65%;
  padding: 3px 10px;
  color: white;
  letter-spacing: 0.5px;
}