/************** NAVIGACIJA *****************/

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    display: inline-block;
    padding: 0 14px;
    line-height: 90px;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    font-weight: 500;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span {
    display: block;
    padding: 8px 10px 8px 25px;
    font-size: 18px;
    cursor: pointer;
    text-transform: uppercase;
}


/************** HEADER ****************/

#sp-header .social-icons li a {
    font-size: 20px;
}

#sp-header {
    background: #fff;
    height: 90px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}


/************* NASLOVI STRANICE ***************/

.sp-page-title {
    text-align: center;
    padding: 200px 0 0;
    min-height: 520px!important;
    overflow: hidden;
}

.sp-page-title h2 {
    line-height: 1;
    font-weight: 100;
    font-size: 60px;
    color: #ffffff;
    letter-spacing: 0.5px;
    position: relative;
    -webkit-text-shadow: 0 11px 10px rgba(0, 0, 0, 0.19);
    text-shadow: 0 11px 10px rgba(0, 0, 0, 0.19);
}
.sp-page-title h2::after {
    content: "";
    display: block; 
    width: 200px; /* Širina slike */
    height: 50px; /* Visina slike */
    background-image: url('https://24.ci-rovigno.hr//images/template/divider_transparent.png'); /* Putanja do slike */
    background-size: contain; 
    background-repeat: no-repeat; 
    margin: 40px auto 0; 

}

body.com-spsimpleportfolio #sp-page-title:before, body.view-category #sp-page-title:before, body.view-article #sp-page-title:before {
    content: "";
    position: absolute;
    bottom: -15px;
    background: none!important;
    height: 43px;
    width: 100%;
    left: 0;
    z-index: 1;
}


/************** EVENT MODUL ******************/


p#no-events { color:#000050; text-align: center;display: flex;
    justify-content: center; /* Horizontalno centriranje */
    align-items: center; /* Vertikalno centriranje */}

.event-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Prostor između kolona */
}

.event-column {
    flex: 1 1 calc(33.333% - 20px); /* Tri kolone u redu sa prostorom između */
    box-sizing: border-box;
}

.event-container {
    background-color: #0d1b4c;
    color: white;
    font-family: Arial, sans-serif;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Osigurava da svi boksevi budu iste visine */
}

.event-details {
    flex: 1;
    padding-right: 20px; /* Prostor između podataka i slike */
    text-align: left; /* Poravnanje teksta lijevo */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Poravnanje elemenata na vrh */
    min-height: 150px; /* Minimalna visina za tekstualni dio */
}

.event-date, .event-title, .event-location {
    display: flex;
    align-items: center;
    text-align: left; /* Poravnanje teksta lijevo */
    margin-bottom: 15px; /* Razmak između tekstualnih elemenata */
}

.event-date .icon, .event-title .icon, .event-location .icon {
    min-width: 24px; /* Minimalna širina ikone */
    height: 24px;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.event-date .icon {
    background-image: url('/images/template/calendar.png');
}

.event-title .icon {
    background-image: url('/images/template/info.png');
}

.event-location .icon {
    background-image: url('/images/template/location.png');
}

.event-date .date, .event-date .time {
    margin-left: 0px;
}

.date-range {
    display: flex;
    align-items: center;
}

.separator {
    margin: 0 5px; /* Razmak između datuma početka i kraja */
}

.event-image {
    margin-top: auto; /* Osigurava da se slika nalazi na dnu */
    display: flex;
    justify-content: center;
    align-items: center;
}

.event-image img {
    border-radius: 10px;
    width: 150px; /* Fiksna širina slike */
    height: 200px; /* Fiksna visina slike */
    object-fit: cover; /* Održava odnos širine i visine bez izobličenja */
    max-width: 100%; /* Osigurava da slika ne pređe granice */
}

.event-title a, .event-title a:visited, .event-title a:hover, .event-title a:focus {
    color: white; /* Boja linka */
    text-decoration: none; /* Bez podvlačenja linka */
}


/********* EVENT *********/

div#rsepro-event-controls.row { display: none; }

div#rsepro-event-title.row.mb-3 h1 {
    font-family: Lora, sans-serif;
    font-size: 40px!important;
    font-weight: 700;
}


h1.rs_event_ongoing {
    font-family: Lora, sans-serif;
     font-size: 40px!important;
    font-weight: 700;
}

#rsepro-event-date-location {
    display: flex;
    align-items: center;
    white-space: nowrap; /* Sprečava prelamanje teksta u nove redove */
}

.event-detail {
    display: flex;
    align-items: center;
    white-space: nowrap; /* Sprečava prelamanje teksta u nove redove */
	font-size: 20px;
}

.event-detail i,
.event-location i {
    margin-right: 3px; /* Razmak između ikone i teksta */
}

.event-detail span {
    display: flex;
    align-items: center;
    margin-right: 10px; /* Razmak između datuma i lokacije */
    white-space: nowrap; /* Sprečava prelamanje teksta u nove redove */
}

.event-location {
    display: flex;
    align-items: center;
    white-space: nowrap; /* Sprečava prelamanje teksta u nove redove */
    margin-bottom: 0 !important; /* Uklanja margin-bottom */
}



div#rsepro-event-files.row.mt-3 h3 {
	
	   font-family: Lora, sans-serif;
     font-size: 24px!important;
    font-weight: 700;
}






@media only screen and (max-width: 767px) {
    #sp-header ul.social-icons {
               display: none!important;
    }
}

@media only screen and (max-width: 1199px) {
    #sp-header .social-icons {
        display: none!important;
    }
}


@media only screen and (max-width: 767px) {
    ul.social-icons {
        display: none!important;
    }
}