/*
 * Note: this file is not compiled from SCSS but native CSS.
 */

@font-face {
    font-family: 'Slim Omgaan Met Water - VAG Rounded Std';
    src: url('/assets/css/VAGRoundedStd-Bold.otf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



.slim_omgaan_met_water {
    background: url('../images/slim_omgaan_met_water/bg.svg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.slim_omgaan_met_water .inner_container {
    width: 760px;
    min-height: 520px;
    /*font-family: 'Slim Omgaan Met Water - VAG Rounded Std', verdana, sans-serif;*/
    font-weight: bold;
}

/*
 * Red navigation bar at the top of the game.
 */
.slim_main_nav_bar {
    position: relative;
}
.slim_main_nav_bar > div {
    position: absolute;
    top: 0;
    left: 100px;
    right: 100px;
    font-size: 15px;

    line-height: 1.2;
    color: #fff;
    text-align: center;

    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
    justify-content: center;
}
/*
 * SVG styling
 */
.slim_main_nav_bar > svg {}
.slim_main_nav_bar svg rect,
.slim_main_nav_bar svg circle  {
    fill: #e33231;
}
.slim_main_nav_bar svg .slim_main_nav_bar_prev,
.slim_main_nav_bar svg .slim_main_nav_bar_next {
    fill: #fff;
    opacity: 0.5;
    transition: opacity 0.25s ease-in-out;
    cursor: pointer;
}
.slim_main_nav_bar svg .slim_main_nav_bar_prev:hover,
.slim_main_nav_bar svg .slim_main_nav_bar_next:hover {
    opacity: 0.65;
}
.slim_main_nav_bar svg .slim_main_nav_bar_prev.slim_disabled,
.slim_main_nav_bar svg .slim_main_nav_bar_next.slim_disabled {
    opacity: 0;
    cursor: default;
}
.slim_main_nav_bar svg polyline {
    fill: none;
    stroke: #e53330;
    stroke-miterlimit: 10;
    stroke-width: 8.58px;
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
    pointer-events: none;
}

.slim_screen {
    position: relative;
}

.slim_screen:not(.slim_screen_active) {
    display: none;
}
.slim_title {
    display: none;
}

/*
 * Screen 1 - Clickable objects
 */
.screen_1_objects {
    width: 684px;
    margin: 0 auto;
    text-align: center;
}
.screen_1_objects div {
    width: 157px;
    margin: 5px;
    display: inline-block;
    cursor: pointer;
}
.screen_1_objects object,
.screen_1_objects img {
    width: 100%;
    display: block;
}
.screen_1_objects div > *:nth-child(even) {
    width: 0;
    opacity: 0;
}
.screen_1_objects div.slim_active > * {
    width: 0;
    opacity: 0;
}
.screen_1_objects div.slim_active > *:nth-child(even) {
    width: 100%;
    opacity: 1;
}

/*
 * Screen 2, 3 - selectable option
 */
#slim_1_result,
#slim_2_start,
#slim_end {
    background: no-repeat center center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    line-height: 1.2;
    box-sizing: border-box;
}
#slim_1_result:not(.slim_screen_active),
#slim_2_start:not(.slim_screen_active),
#slim_end:not(.slim_screen_active) {
    display: none;
}
#slim_1_result {
    background-image: url('../images/slim_omgaan_met_water/1_count/bg.svg');
    min-width: 861px;
    min-height: 431px;
    margin-left: -68px;
    font-size: 65px;
    color: #5183AC;
    /* These paddings are to adjust the position of the text */
    padding-left: 34px;
    padding-bottom: 30px;
}

#slim_2_start {
    background-image: url('../images/slim_omgaan_met_water/2_start/bg.svg');
    min-width: 873px;
    min-height: 420px;
    margin-left: -48px;
    /* These paddings are to adjust the position of the text */
    padding-bottom: 60px;
}
#slim_2_start img,
#slim_end img {
    width: 256px;
    height: auto;
    cursor: pointer;
    transition: opacity ease-in-out 0.5s 0s;
}
#slim_2_start img:hover,
#slim_end img:hover {
    opacity: 0.75;
}

#slim_2 {}
.slim_screen_234_objects {
    margin: 0 -35px;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
}
.slim_screen_234_objects object {
}
.slim_screen_234_objects.slim_interactive object {
    cursor: pointer;
}

#slim_2_result .slim_screen_234_objects {
    margin: 0 -35px;
}

#slim_4 .slim_screen_234_objects {
    margin: 0 0 0 -50px;
}

#slim_2_end .slim_screen_234_objects object:last-child,
#slim_3_end .slim_screen_234_objects object:last-child,
#slim_4_end .slim_screen_234_objects object:last-child {
    position: relative;
    z-index: -1;
}

#slim_end {
    background-image: url('../images/slim_omgaan_met_water/eind/bg.svg');
    min-width: 827px;
    min-height: 377px;
    margin-left: -20px;
    padding-bottom: 30px;
    padding-right: 10px;
}
#slim_end img {
    width: 461px;
}