/**
 * General */

.index-table-field {
    padding: 4px 18px 2px;
}


/**
 * Header placement */
#ctnr-header {
    width  : 100vw;
    height : calc(100vh - 180px);
    position : relative;
}

#index-content-header {
    min-height : 180px;
}
@media (min-width: 576px) {
    #ctnr-header          { height : calc(100vh - 100px); }
    #index-content-header { min-height : 100px; }
}


body:not(.accessibility-mode) #ctnr-header > .header-image.layer-1-single-image {
    background-image: url('/media/images/landing_index_all_mobile.jpg');
    opacity : 1.0;
    z-index : 2;
    background-position-x: center;
}
@media (min-width: 576px) {
    body:not(.accessibility-mode) #ctnr-header > .header-image.layer-1-single-image {
        background-image: url('/media/images/landing_index_all_mobile_to_right.jpg');
        /* background-position-x: 90px; */
    }
}
@media (min-width: 992px) {
    body:not(.accessibility-mode) #ctnr-header > .header-image.layer-1-single-image {
        background-image: url('/media/images/landing_index_all.jpg');
        /* background-position-x: center; */
    }
}


body:not(.accessibility-mode) #ctnr-header > .header-image.layer-1 {
    background-image: url('/media/images/landing_index_universe.jpg');
    opacity : 0.5;
    z-index : 2;
}
body:not(.accessibility-mode) #ctnr-header > .header-image.layer-2 {
    background-color : unset;
    z-index  : 3;
    position : absolute;
    bottom   : calc(30vh + 340px);
    left     : calc(-155px - 5vw);
    height   : 320px;
}
body:not(.accessibility-mode) #ctnr-header > .header-image.layer-2 svg { width : calc(190px + 106vw); }
body:not(.accessibility-mode) #ctnr-header > .header-image.layer-2-shade {
    position: absolute;
    width  : 70vw;
    height : calc(100vh - 100px);
    top: 0;
    left: 0;
  /* background : transparent linear-gradient(270deg, #0000 0%, #000000e0 100%) 0% 0% no-repeat padding-box; */
  /*  z-index  : 4; */
  /*  background : transparent linear-gradient(90deg, #000000e0 0%, #000F 90px, #000000e0 100%) 0% 0% no-repeat padding-box; */
}
/* #ctnr-header > .header-left-shade { background:unset !important; } */
body:not(.accessibility-mode) #ctnr-header > .header-image.layer-3 {
    background-image: url('/media/images/landing_index_horn_mobile.png');
    background-color : unset;
    position : absolute;
    width    : calc(250px + 18vw);
    height   : calc(375px + 27vw);
    right    : -95px;
    bottom   : 270px;
    z-index  : 5;
}
#ctnr-header > .header-image.layer-4 {
    background-color : unset;
    position : absolute;
    /* bottom   : 40px; */
    /* left     : calc(-140px + 58vw); */
    /* height   : 320px; */
    /* z-index  : 6; */

    height   : calc(45vh - 100px);
    z-index  : 6;
    bottom   : 0;
    left     : 0;
    display  : table;
}
#ctnr-header > .header-image.layer-4 > div {
    display        : table-cell;
    vertical-align : middle;
    text-align     : center;
}
#ctnr-header > .header-image.layer-4 > div > svg { width: calc(60vw + 70px); height : calc(6vh + 80px); }
/* #ctnr-header > .header-image.layer-4 > div > svg { width: calc(11vh + 80px); }*/
/* #ctnr-header > .header-image.layer-4 > svg { width : 220px; } */
@media (min-width: 768px) {
    body:not(.accessibility-mode) #ctnr-header > .header-image.layer-3 {
        background-image: url('/media/images/landing_index_horn_half.png');
        width    : calc(21vw + 420px);
        height   : calc(21vw + 420px);
        right    : clamp(-250px, calc(-250px + 8vw), 0px);
        top      : 0px;
    }
    body:not(.accessibility-mode) #ctnr-header > .header-image.layer-2     { left  : calc(-400px + 26vw); }
    body:not(.accessibility-mode) #ctnr-header > .header-image.layer-2 svg { width : calc(300px + 50vw);  }
}
@media (min-width: 992px) {
    #ctnr-header > .header-image.layer-4 {
     /* top    : calc(34vh - 80px); */
        top    : calc(34vh - 10px);
     /* left   : 19vw; */
        left   : 14vw;
        bottom : unset;
    }
    #ctnr-header > .header-image.layer-4 > div { text-align : left; }
    #ctnr-header > .header-image.layer-4 > div > svg { width : calc(20vw + 32vh); height : calc(11vw + 11vh); }
}

/*************************************************************
 * Important section of the front page... make it responsive *
 *************************************************************/

/*
#landing_page_important_container {
    width            : 100%;
    height           : 95px;
    display          : block;
    background-color : #E9E8E8;
    display          : inline-block;
    min-height       : 95px;
}
*/
.landing_page_important_wrapper {
    width      : 100%;
    margin     : 0 auto;
    position   : relative;
    text-align : center;
    min-height : 180px;
}
@media (min-width: 576px) {
    .landing_page_important_wrapper { min-height : 100px; }
}


.landing_page_important_message {
    font-family      : 'Montserrat', sans-serif;
    font-weight      : 600;
    font-size        : 18px;
    color            : white;
}
@media (min-width: 768px) {
    .landing_page_important_message { font-size : 24px; }
}

.landing_page_important_button {
    padding          : 0px 50px;
}
.landing_page_important_button span {
    font-family      : 'Montserrat', sans-serif;
    font-size        : 12px;
    font-weight      : 400;
    text-decoration  : none;
    color            : white;
}
.carousel-inner, .carousel-inner > div.item {
    width            : 100%;
}
.carousel-caption,
.carousel-mobile-caption {
    width            : 86%;
    padding          : 0;
    bottom           : 0px;
    color            : #333333;
    text-shadow      : unset;
    display          : inline-block;
    position         : relative;
    left             : 0;
}
.carousel-caption > div {
    vertical-align   : middle;
    display          : flex;
    flex-direction   : column;
    flex-wrap        : nowrap;
    align-content    : center;
    justify-content  : center;
    align-items      : center;
    min-height       : 180px;
}
.carousel-mobile-caption > div {
    height         : 275px;
    display        : table-cell;
    vertical-align : middle;
}
@media (min-width: 576px) {
    .carousel-caption > div { min-height : 95px; flex-direction  : row; }
}


button[class*="carousel-control-"] {
    width : unset;
}


#landing_page_predmetnik_container {
    padding-top: 25px;
}

/*************************************************************
 *************************************************************/

/**
 * Section 1 */
body:not(.accessibility-mode) .section-container.accessible { display : none; }
body.accessibility-mode       .section-container.row        { display : none; }

#page_index_dogodki { height : 500px; }

#page_index_dogodki .section-container {
    height: 100%;
}
.carousel-indicators > button[data-bs-target] {
    background-color : var(--page-bg-grey1);
    margin-left      : unset;
    margin-right     : unset;
    width            : 10vw;
}
.carousel-indicators > button.active { background-color : var(--page-green); }

[id*="events-carousel-"] button[class*="carousel-control"] {
    height : 54px;
    bottom : 0;
    top    : unset;
    left   : unset;
    right  : unset;
}
[id*="events-carousel-"] button[class*="carousel-control-prev"] { left  : clamp(20px, calc(4vw - 8px), 100px); }
[id*="events-carousel-"] button[class*="carousel-control-next"] { right : clamp(20px, calc(4vw - 8px), 100px); }

#page_index_dogodki_img_left {
    background-image    : url('/media/images/landing_kontakt.jpg');
    background-size     : cover;
    background-position : center center;
    height   : 100%;
    width    : calc(100% + 8vw);
    position : relative;
    left     : -8vw;

    opacity  : 1;
    transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -webkit-transition: 0.3s all ease-in-out;
}

[id*="events-carousel-"] {
    padding-left  : clamp(20px, 4vw, 100px);
    padding-right : clamp(20px, 4vw, 100px);
    height    : 500px;
}
@media (min-width: 768px) {
    .carousel-indicators > button[data-bs-target] { width : clamp(10px, 5vw, 80px); }
}
@media (min-width: 1200px) {
    [id*="events-carousel-"] .carousel-inner {  width: 80%; }
}
@media (min-width: 1762px) {
    #page_index_dogodki_img_left {
        left  : calc((-100vw + 1460px) / 2);
        width : 50vw;
    }
}

[id*="events-carousel-"] .carousel-inner,
[id*="events-carousel-"] .carousel-inner > .carousel-item,
[id*="events-carousel-"] .carousel-inner > .carousel-item > div,
[id*="events-carousel-"] .carousel-inner > .carousel-item > div > div {
    height  : 100%;
}

[id*="events-carousel-"] .carousel-inner > .carousel-item > div { display : table;  }
[id*="events-carousel-"] .carousel-inner > .carousel-item > div > div {
    display : table-cell;
    float   : unset;
    vertical-align : middle;
}

/**
 * Section 2 */

#page_index_najboljse_mesto {
    max-width     : 620px;
    margin-top    : 340px;
    margin-bottom : 80px;
}
@media (min-width: 768px) {
    #page_index_najboljse_mesto { margin-bottom : 420px; }
}

#page_index_najboljse_mesto > .bubble-placeholder {
    background-image : url('../media/bubbles/bubbles_index2_7.svg');
    width            : calc(100vw + 20px);
    height           : calc(10vw + 192px);
    top              : -270px;
    right            :  0px;
}
#page_index_najboljse_mesto > .deco-image-placeholder {
    background-image    : url('../media/decoration/index_img_1.png');
    height              : 850px;
    bottom              : -420px;
    width               : clamp(0px, calc(80vw - 537px), 1000px);
    right               : 0px;
    background-position : top left;
    display             : none; /* Hide on mobile */
}
@media (min-width: 768px) {
    #page_index_najboljse_mesto > .bubble-placeholder {
        background-image : url('../media/bubbles/bubbles_index2_6.svg');
        width            : clamp(0px, calc(80vw + 500px), 1980px);
        height           :  852px;
        bottom           : -410px;
        top              : unset;
    }
    #page_index_najboljse_mesto > .deco-image-placeholder { display : unset; }
}

.section-container > p {
    font-size           : 17px;
    line-height         : 2;
}

/**
 * Section 3 */

#index-content-section3 > .content-box {
    padding-top : 120px;
}

body.accessibility-mode .section-3-bubbles { display : none; }
body:not(.accessibility-mode) .section-3-bubbles {
    z-index  : 1;
    position : absolute;
    right    : 0px;
    top      : 100px;
    width    : 680px; /* calc(50vw + 220px); */
    height   : 550px; /* calc(20vw + 363px); */
    background-image : url('../media/bubbles/bubbles_index2_1.svg');
}
/*
body:not(.accessibility-mode) .section-3-bubbles > div {
    position : relative;
    top      : -40px;
    right    : 240px;
    width    : 430px;
    height   : 320px;
}
*/

#index-content-section3 > .bubble-placeholder {
    background-image : url('../media/bubbles/bubbles_vpis2_4.svg');
    width: calc(50vw + 220px);
    height: calc(20vw + 363px);
    top: calc(0% + -50px);
    right: 0;
}

#index-content-section3{
    position: relative;
}

@media (min-width: 768px) {
    #index-content-section3{
        position: unset;
    }
    #index-content-section3 > .bubble-placeholder {
        display:none;
    }
}