:root{
    --primary: #95C11F;
    --primary-lighten-15: #79C089;
    --primary-lighten-50: #A6D5B0;
    --secondary: #3A7C49;
    --secondary-gradient: #00858F;

    --action: #FF0000;
    --action-text-color: #ffbc6b;
    --action-gradient: #FFA02F;
    --action-mute: #8f8e8e;
    --action-mute-text-color: #e3e3e3;

    --info: #09afcd;
    --info-text-color: #d2f0f5;
    --warning: #e2aa34;
    --warning-text-color: #fff5e1;
    --error: #cb3636;
    --error-text-color: #ffdcdc;
    --success: #83b86f;
    --success-text-color: #e3ffda;
    --help-text-color: #666;

    /** BASE **/
    --bg-color: #EEEEEE;
    --font-color: #666666;
    --muted-font-color: #999999;
    --contrast-font-color: #FFF;
    --font-size: 1rem;
    --font-family: 'Montserrat', sans-serif;
    --font-line-height: 1.6;
    --font-letter-spacing: 0.05em;

    --heading-font-family: var(--font-family);
    --heading-font-color: var(--secondary);
    --heading-line-height: var(--font-line-height);
    --heading-letter-spacing: var(--font-letter-spacing);
    --heading-h1-font-size: 2rem;
    --heading-h2-font-size: 1.4rem;
    --heading-h3-font-size: 1.2rem;
    --heading-h4-font-size: 1rem;
    --heading-margin: 0 0 1em 0;

    --border-radius: 20px;
    --border-radius-small: 10px;


    /** BUTTONS **/
    --button-bg: var(--action);
    --button-bg-gradient: linear-gradient(35deg, var(--action), var(--action-gradient));
    --button-text: #ffffff;

    // not used:
    --action-button-bg: #e00034;
    --action-button-gradient: linear-gradient(35deg, #e00034, #ff5f85);
    --action-button-text: #ffbc6b;

    /** BOX **/
    --box-color: #ffffff;

    /** NAVIGATION **/
    --nav-height: 60px;
    --nav-bar-bg: #fff;
    --nav-icon-color: #666;

    /** TOOLTIP **/
    --tooltip-bg: #95C11F;
    --tooltip-text: #ffffff;

    /** SLIDESHOW **/
    --slideshow-text-bg: #333;
    --slideshow-text-color: #fff;

    /** PROFILE **/
    --profile-bg: #fff;
    --profile-element-bg: #fafafa;

    /** LEVEL **/
    --level-header-bg: #f3f3f3;
    --level-bg-color: #fff;
    --level-header-padding: 0 0 1rem 0;
    --level-header-border: 2px dashed var(--level-header-bg);
    --level-header-border-with: 0 0 2px 0;
    --level-header-border-radius: var(--border-radius-small);

    --moderator-text-bg: var(--bg-color);
    --moderator-text-color: var(--font-color);
    --moderator-text-font-size: 1rem;
    --moderator-text-toggle-bg: var(--secondary);
    --moderator-text-toggle-color: var(--contrast-font-color);

    /** ELEMENTS **/
    --element-bg: transparent;
    --element-result-bg: var(--element-bg);
    --element-padding: 0;
    --element-box-shadow: 0 0 15px 0px rgb(0 0 0 / 15%);
    --element-border: none;
    --element-result-border: none;

    --element-text-input-share-info-bg: rgba(255,255,255,0.3);
    --element-text-input-share-info-border: 1px solid var(--info);

    --element-slideshow-bg: rgba(0,0,0,0.8);
    --element-slideshow-text-bg: var(--secondary);
    --element-slideshow-text-color: var(--contrast-font-color);
    --element-slideshow-progress: var(--secondary);
    --element-slideshow-font-size: 1rem;

    --element-selection-result-li-bg: rgba(255, 255, 255, 0.4);

    --element-text-speech-bubble-bg: var(--primary-lighten-50);
    --element-text-speech-bubble-font-color: var(#ffffff);
    --element-text-speech-bubble-font-size: 1.4rem;

    // SELECTION SLIDESHOW
    --element-selection-slideshow-bg: #aaa;
    --element-selection-slideshow-color: var(--contrast-font-color);
    --element-selection-slideshow-selected-bg: var(--secondary);
    --element-selection-slideshow-selected-color: #ffffff;
    --element-selection-slideshow-selected-item-bg: rgba(255, 255, 255, 0.4);
    --element-selection-slideshow-selected-item-color: var(--bg-color);

    /** LINK COLLECTION **/
    --link-collection-bg: #f3f3f3;
    --link-collection-columns: 3;
    --link-collection-box-width: 400px;
    --link-collection-box-height: 300px;
    --link-collection-highlight-border-animation-time: 8s;
    --link-collection-highlight-border-color: var(--font-color);
}

#app-nav #app-nav-logo{
  width: 253px;
}

.element.slideshow-element.text-bottom .vueperslides .text-container .text{
  height: 172px;
}
.element.selection-element .slideshow-container .vueperslides .text-container.checked h3{
  color: #fff;
}

.link-collection.tiny-intervention-links{}
.link-collection.tiny-intervention-links .link-content{
  padding: 0;
  font-family: Arial;
}
.link-collection.tiny-intervention-links .link-content .link-title{
  flex: 50% 0 0;
  background: var(--secondary);
  color: #fff;
  font-weight: 400;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.3;
  letter-spacing: 2px;
}
.link-collection.tiny-intervention-links .link-content .link-title:before{}
.link-collection.tiny-intervention-links .link-content .link-title:after{
    content: '';
    width: 30%;
    height: 5px;
    margin: 1rem 0 1rem -1rem;
    background: var(--primary);
    display: block;
    transition: all .5s ease-in-out;
}
.link-collection.tiny-intervention-links .link-collection-box:hover .link-content .link-title:after{
  width: 70%;
}

.link-collection.tiny-intervention-links .link-content .link-description{
  flex: 50% 0 0;
  padding: 1.5rem 1rem;
}