/**
 * Decoration */

/*
 #landing_page_napovednik > .bubble-placeholder {
    background-image : url('../media/bubbles/bubbles_napovednik.svg');
    width: 487px;
    height: 164px;
    top: calc(0% - 197px);
    right: -40px;
}
*/

#landing_page_napovednik {
    position      : relative;
}



@media (min-width: 768px) {
    #landing_page_napovednik > .bubble-placeholder {
        background-image: url('../media/bubbles/bubbles_napovednik.svg');
        width: clamp(0px, calc(59vw - 275px), 839px);
        height: 381px;
        top: -523px;
        right: 0px;
        z-index: 4;
        margin-right: -8vw;
    }
}
@media (min-width: 1762px) {
    #landing_page_napovednik > .bubble-placeholder {
        margin-right: calc((1456px - 100vw) / 2);
    }
}



/**
 * Calendard filter */
.calendar-filters { width : 100%; }
.calendar-filters > .calendar-month-selector {}
.calendar-month-selector span { word-spacing: 5px; text-transform : capitalize; }
.calendar-filters > .calendar-month-selector button {
    background-color : transparent;
    color         : var(--page-green);
    border        : transparent;
    font-size     : 20px;
    border-radius : 5px;
    transition    : all, 0.2s;
    position      : relative;
    top           : 2px;
}
.calendar-filters > .calendar-month-selector button:hover  { background-color : #333; }
.calendar-filters > .calendar-month-selector button:active { background-color : #222; color : white; }

.calendar-filters > .calendar-branch-selector {
    height        : 32px;
    top           : -2px;
}
.calendar-filters > .calendar-branch-selector button,
.calendar-filters > .calendar-branch-selector button:hover {
    background-color : transparent;
}
.calendar-filters > .calendar-branch-selector button {
    border : transparent;
}
.calendar-filters > .calendar-branch-selector button::after { display: none; }
.calendar-filters > .calendar-branch-selector button > i {
    color       : var(--page-green);
    margin-left : 7px;
}
.calendar-filters > .calendar-branch-selector ul.dropdown-menu {
    inset : 0 auto auto -70px !important;
}


/**
 * On this page disable padding for grid */
/*
[class*="col-"] { padding-left : 0px !important; padding-right: 0px !important; }
*/

.novice-title-container {
    width       : calc(100% - 13vw);
    position    : absolute;
    bottom      : 56px;
    left        : 6.5vw;
    z-index     : 5;
    color       : white;
}
.novice-title {
    margin-left : 0px;
    font-size   : 25px;
    font-weight : bold;
    text-shadow : 0px 1px 3px #000000, 0px 1px 6px #000000, 0px 1px 9px #000000;
}
.novice-date {
    margin-left : 0px;
    font-size   : 14px;
    font-weight : 100;
    text-shadow : 0px 1px 3px #000000, 0px 1px 6px #000000;
}
[class*="novice-detail-type-"] {
    position    : absolute;
    left        : 0px;
    font-size   : 15px;
    font-weight : bold;
    bottom      : -40px;
}
.novice-detail-type-pretekli-dogodek { color : #5ac6e0; }
.novice-detail-type-napovednik { color : #5bb047; }
.novice-nazaj {
    font-size   : 27px;
    font-weight : 100;
    color       : white;
    position    : relative;
    top         : 25px;
    right       : 10px;
    text-shadow: 0px 1px 3px #000000, 0px 1px 6px #000000;
}
.novice-nazaj:hover { color : #ddd; }

.novice-content {
    margin-bottom : calc(6.5vw - 20px);
}

/**
 * Styles for individual segment */
.novice-vsebina-segment {
    margin: 0 10px 20px 10px;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    position: relative;
    padding-top : calc(100% - 21px);
    background-position: center;
    background-size: cover;

}
.novice-vsebina-segment > .background {
    position    : absolute;
    top         : 0px;
    width       : 100%;
    height      : 100%;
    background-image: linear-gradient(#00000011, #00000088, #000000ee, #000000ff);
}

.novice-vsebina-segment > div.background > .type {
    font-size   : 90%;
    font-weight : bold;
    position    : absolute;
    bottom      : 8px;
    right       : 12px;
}

.novice-vsebina-segment > div.background > div.content {
    z-index     : 1;
    position    : absolute;
    bottom      : 30px;
    width       : 100%;
    color       : white;
    max-height  : 75%;
    overflow    : hidden;
}
.napovednik-vsebina-segment > div.background > div.content {
    z-index     : 1;
    position    : absolute;
    bottom      : 0px;
    width       : 100%;
    color       : white;
    overflow    : hidden;
    height      : calc(100% - 15px);
}

.novice-vsebina-segment .date {
    font-weight : 300;
    line-height : 1.2;
    text-align  : left;
    margin-left : 10px;
    margin-right: 10px;
    margin-top  :  0px;
    margin-bottom: 7px;
    height      : 14px;  /* This is to hide date when in XS mode */
    overflow    : hidden;
    transition  : margin 0.3s,
                  height 0.3s,
                  font-size 0.3s;
}

.napovednik-vsebina-segment .date {
    font-size   : 20px;
    font-weight : 600;
    line-height : 1.2;
    text-align  : left;
    margin-left : 10px;
    margin-right: 20px;
    margin-top  : -3px;
    margin-bottom: 10px;
    height      : 20px;  /* This is to hide date when in XS mode */
    overflow    : hidden;
    transition  : margin 0.3s,
                  height 0.3s,
                  font-size 0.3s;
}

.novice-vsebina-segment .title {
    font-weight : 600;
    font-size   : 17px;
    line-height : 1.2;
    text-align  : left;
    margin      : 2px 10px 5px 10px;
/*
    height      : 38px;
*/
    overflow    : hidden;
    -webkit-box-orient : vertical;
    -webkit-line-clamp : 2;
    display            : -webkit-box;
    transition  : font-size 0.3s;
}

.napovednik-vsebina-segment .title {
    font-size   : 12px;
    line-height : 1.2;
    text-align  : left;
    margin      : 2px 10px 5px 10px;
/*
    height      : 38px;
*/
    overflow    : hidden;
   /* -webkit-box-orient : vertical;
    -webkit-line-clamp : 2;
    display            : -webkit-box; */
    transition  : font-size 0.3s;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.napovednik-vsebina-segment .time {
    font-size: 13px;
    font-weight : 600;
    line-height : 1.2;
    text-align  : left;
    margin      : 15px 15px 0px 10px;
    height      : 20px;  /* This is to hide date when in XS mode */
    overflow    : hidden;
    transition  : margin 0.3s,
                  height 0.3s,
                  font-size 0.3s;
}
@media (min-width: 576px) {
    .napovednik-vsebina-segment .time {
        margin      : 20px 15px 3px 10px;
    }
}

.napovednik-vsebina-segment .more-info {
    font-size   : 10px;
    line-height : 1.2;
    text-align  : left;
    margin      : 20px 10px 5px 10px;
/*
    height      : 38px;
*/
    overflow    : hidden;
   /* -webkit-box-orient : vertical;
    -webkit-line-clamp : 2;
    display            : -webkit-box; */
    transition  : font-size 0.3s;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    bottom: 0;
}

.novice-vsebina-segment .text,
.napovednik-vsebina-segment .text {
    font-weight : 300;
    text-align  : left;
    margin      : 8px 10px;

    /* Limit text in novice item to 5 lines */
    overflow     : hidden;
    text-overflow: ellipsis;
    display      : -webkit-box;
    -webkit-box-orient: vertical;
    min-height   : 33px;
    transition  : font-size 0.3s;
}
.novice-vsebina-segment .text {
    -webkit-line-clamp: 2;
}
.napovednik-vsebina-segment .text {
    -webkit-line-clamp: 5;
}


/**
 * Detail formatting */

.page-novice-detail nav {
    border-bottom: 5px solid #5ac6e0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.page-napovednik-detail nav {
    border-bottom: 5px solid #5bb047 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.novice-detail-text-container {
    min-height: calc(100vh - 670px) !important;
    padding-left : 0px !important;
}

.novice-detail-text {
    margin-top: 20px;
    font-size:  15px;
}

.novice-detail-text h1, .novice-detail-text h2,
.novice-detail-text h3, .novice-detail-text h4,
.novice-detail-text h5, .novice-detail-text h6  { font-weight : bold; }

.blockquote {
    color               : #4ebcd7;
    font-size           : 24px !important;
    font-weight         : bold;
    border-left         : 0px solid #eee !important;
    margin              : 0 !important;
    padding             : 0 !important;
}


.napovednik-detail-announcement {
    height              : 90px;
    width               : 100%;
    background-color    : #f2f2f2;
    border-bottom-color : #5bb047;
    border-bottom-width : 3px;
    border-bottom-style : solid;
    display             : table;
    padding             : 10px 20px;
}
.napovednik-detail-announcement-text {
    font-weight         : 600;
    height              : 100%;
    display             : table-cell;
    vertical-align      : middle;
    text-align          : center;
    letter-spacing      : -0.5px;
    line-height         : 1.2;
    word-spacing        : 5px;
}

.napovednik-detail-subtitle {
    font-weight         : 600;
    font-size           : 24px;
    margin-top          : 60px;
    margin-bottom       : 15px;
}

.napovednik-detail-future-events {
    width               : calc(100% + 30px);
    position            : relative;
    left                : -15px;
}


/**
 * Section for napovednik */
/*
.napovednik-dogodki-threeormore-container {
    width        : calc(100% + 24px);
    left         : -16px;
    position     : relative;
}
*/
.page-napovednik-content-col {
    left         : 0;
    width        : 100%;
    min-height   : calc(100vh - 595px);
}
.page-novice-content-col {
    left         : -11px;
    width        : calc(100% + 22px);
}

.napovednik-dogodki-firsttwo-container,
.napovednik-dogodki-firsttwo-container > div > div { width : 100%; }

/*.napovednik-vsebina-segment:hover { padding-top : 200px !important; }
.napovednik-vsebina-segment:hover .title { height:unset; }
.napovednik-vsebina-segment:hover .date  { height:14px; }
.napovednik-vsebina-segment:hover .text  { display:-webkit-box !important; }*/
.napovednik-vsebina-segment {
    border-bottom-width: 8px;
    border-bottom-style: solid;
/*    margin: 0 -10px -15px 0px; */
    position: relative;
    height: 100%;
    transition  : padding-top 0.5s,
                  transform 0.3s;
    border-radius: 3px;
    white-space: nowrap;
}
.napovednik-vsebina-segment > .background {
    position    : absolute;
    top         : 0px;
    width       : 100%;
    height      : 100%;
 /* background-color: #333333; */
    background-color: var(--page-bg-grey1);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    transition: 0.5s;
}
.napovednik-vsebina-segment.is-today > .background {
    background-color: #646546;
}

.napovednik-vsebina-segment > .background:hover{
    background-color: #636363 !important;
}

@media (min-width: 768px) {
    .novice-title-container { bottom : 30px; }

    .novice-title { font-size : 35px; }
    .novice-content { margin-bottom : 20px; }
    [class*="novice-filtri-"] { margin-bottom : 40px; }
    .novice-vsebina-segment .title { margin             : 2px 20px 10px 20px;
                                     font-size          : 20px;
                                     height             : unset;
                                     -webkit-box-orient : unset;
                                     -webkit-line-clamp : unset; }
    .napovednik-vsebina-segment .title { margin             : 2px 20px 10px 10px;
                                        font-size           : 12px;
                                        height              : unset;
                                        font-weight         : unset;}
    .napovednik-vsebina-segment .time {
                                        font-size           : 13px;
                                        height              : unset;
                                        font-weight         : bold;}
    .novice-vsebina-segment .date,
    .napovednik-vsebina-segment .date { height:20px;
                                        font-weight: 600;
                                        font-size: 20px; }
    .novice-vsebina-segment .text,
    .napovednik-vsebina-segment .text { margin : 8px 20px;
                                        -webkit-box-orient : vertical;
                                        -webkit-line-clamp : 10;
                                        min-height         : 39px; }

    /**.napovednik-vsebina-segment {  margin: 0 15px 30px 15px;  padding-top : 280px; }
      .napovednik-vsebina-segment:hover { padding-top : 280px !important; } */

    .novice-koledar-header { font-size : 20px !important; }
    .novice-koledar-header > div.glyphicon { font-size : 28px !important; }
    .napovednik-koledar-table td .date { font-size: 16px !important; }
    .napovednik-koledar-table th { font-size : 16px; }

    #landing_page_napovednik_container { padding : 0 15px; height : 410px; }
    #landing_page_koledar_container { height : calc(100% - 30px); }

    .napovednik-detail-announcement { height : 120px;     margin-top: 35px; }

    /** novice / clanki */
    .novice-detail-text > [class*="col-sm-"] { padding-right: 20px !important; }

    /** remove left/right spacing for content when tablet */
    .page-napovednik-content-col { left : -15px; width : calc(100% + 30px); }
    .page-novice-content-col { left : -11px; width : calc(100% + 22px); }


    /** Expand segment when hovering over for higher screen resolutions */
/*  .napovednik-vsebina-segment:hover        { transform : scale(1.2); }
    .napovednik-vsebina-segment:hover .title { font-size : 15px; -webkit-box-orient : unset; -webkit-line-clamp : unset; }
    .napovednik-vsebina-segment:hover .date  { font-size : 12px; }
    .napovednik-vsebina-segment:hover .text  { font-size : 11px; -webkit-box-orient : unset; -webkit-line-clamp : unset; }
*/
}

@media (min-width: 992px) {
    .novice-title-container { left        : calc(14vw - 1px);
                              width       : calc(100% - 28vw); }
    .novice-vsebina-segment { padding-top : 200%; }


    /** novice / clanki */
    .blockquote.left  { float : left  !important; margin-right: 5px !important; }
    .blockquote.right { float : right !important; margin-left:  5px !important; }
    .novice-detail-text > [class*="col-md-"] { padding-right: 20px !important; }

    .napovednik-dogodki-firsttwo-container { width : 33.333333%; }
}

@media (min-width: 1200px) {
    .novice-filtri-brskanje { margin-right : 15px; }
    .novice-filtri-iskanje > .search { margin-right : 15px; }
    .novice-title, .novice-date, [class*="novice-detail-type-"] { margin-left : 23px; }
    .novice-vsebina-segment { margin : 0 0 25px 25px; }
    .novice-detail-text-container { padding-left : 23px !important; }

    /** novice / clanki */
    .novice-detail-text > [class*="col-lg-"] { padding-right: 20px !important; }

    /** remove left/right spacing for content when tablet */
    .page-napovednik-content-col { left : 0px; width : 75%; }
    .page-novice-content-col { left : 0px; width : 75%; }
}

/**
 * NEW CALENDAR STYLES*/

.napovednik-koledar-segment {
    display: inline-block;
    width: calc(100% / 2 - 17px);
    margin: 6px;
    padding-top: calc(100% / 2 - 17px);
    position: relative;
}

@media (min-width: 630px) {
    .napovednik-koledar-segment {
        display: inline-block;
        width: calc(100% / 3 - 17px);
        margin: 6px;
        padding-top: calc(100% / 3 - 17px);
        position: relative;
        }
    }

@media (min-width: 800px) {
.napovednik-koledar-segment {
    display: inline-block;
    width: calc(100% / 4 - 17px);
    margin: 6px;
    padding-top: calc(100% / 4 - 17px);
    position: relative;
    }
}

@media (min-width: 1400px) {
    .napovednik-koledar-segment {
        display: inline-block;
        width: calc(100% / 7 - 17px);
        margin: 6px;
        padding-top: calc(100% / 7 - 17px);
        position: relative;
    }
}


.napovednik-dogodki-threeormore-container {
    position: relative;
    left: -10px;
    width: calc(100% + 20px);
    line-height: 0;
}

.napovednik-dogodki-threeormore-container div[class="napovednik-koledar-segment"] a{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

#ctnr-content-napovednik .content-box {
    padding-top: 0 !important;
}

@media(min-width: 768px){
    #ctnr-content-napovednik .content-box{
    padding-top: 3rem !important ;
    }
}