/*
Theme Name: Banjaluka Danas
Theme URI: banjalukadanas.info
Author: Digitality  
Author URI: https://digitality.ba
Description: 
Version: 1.0
*/
@font-face {
    font-display: swap; 
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/outfit-v11-latin_latin-ext-300.woff2') format('woff2');
}
 @font-face {
    font-display: swap; 
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/outfit-v11-latin_latin-ext-regular.woff2') format('woff2'); 
 }
@font-face {
    font-display: swap; 
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/outfit-v11-latin_latin-ext-500.woff2') format('woff2'); 
}
@font-face {
    font-display: swap; 
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/outfit-v11-latin_latin-ext-600.woff2') format('woff2'); 
}
@font-face {
    font-display: swap; 
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/outfit-v11-latin_latin-ext-700.woff2') format('woff2'); 
}
@font-face {
    font-display: swap; 
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 800;
    src: url('fonts/outfit-v11-latin_latin-ext-800.woff2') format('woff2');
}
@font-face {
    font-display: swap; 
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 900;
    src: url('fonts/outfit-v11-latin_latin-ext-900.woff2') format('woff2');
}
@font-face {
    font-display: swap; 
    font-family: 'Alexandria';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/Alexandria-Bold.ttf') format('woff2'); 
}
@font-face {
    font-display: swap; 
    font-family: 'SourceSansPro';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/SourceSansPro-Bold.ttf') format('woff2'); 
}
/****** ROOT ***********/
:root {
    --primary-font:'Outfit',sans-serif;
    --secondary-font:'Alexandria',sans-serif;
    --primary-red:#af0f0f;
    --secondary-grey:#D3D3D3;
    --color-title:#04102F;
}
/*********** PRE-D CLASSES ***********/
.asdad {
    color: var(--dark-icon-color);
}
body{
    font-family: var(--primary-font);
	padding-bottom: 60px;
}
.section-padding{
    padding: 40px 0;
}
.bg-dark-blue{
    background-color: #04102F;
}
.bg-red{
    background: var(--primary-red);
}
.bg-grey{
    background: var(--secondary-grey);
}
.bg-red{
    background: var(--primary-red);
}
.section-title h2{
    font-size: 24px;
    color: var(--color-title);
    font-weight: 700;
    line-height: 1.3;
}
.card-sm-title h4{
    color: var(--color-title);
    line-height: 1.3;
    font-weight: 700;
    font-size: 17px;
}
.card-xl-title h2{
    font-size: 27px;
    color: var(--color-title);
    line-height: 1.1;
    font-weight: 700;
}
.card-title-md h3{
    color: var(--color-title);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}
.card-lg-title h3{
    font-size: 20px;
    color: var(--color-title);
}
.card-text{
    font-size: 13px;
    color:#666;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.btn-all a{
    background-color: var(--primary-red);
    padding: 10px 25px;
    border-radius: 30px;
    color: #ffffff !important;
    font-size: 18px;
    transition: all .3s ease-in-out;
}
.btn-all a:hover{
    background-color: var(--color-title);
}
.darkmode .top-link-footer a{
    color: #ffffff;
}
.darkmode .footer-text  h4{
    color: #ffffff;
}
.darkmode .footer-text p,
.darkmode .footer-link h3, .darkmode .footer-social-media h3,
.darkmode .footer-link li a,
.darkmode .copy-right,
.darkmode .navbar-nav .nav-item .nav-link,
.darkmode .archive-section .card-title-md p,
.darkmode .single-box .single-title h2,
.darkmode .single-editor-text *,
.darkmode .heateor_sss_sharing_title,
.darkmode .form-label
{
    color: #ffffff;
}
.darkmode .footer-link li::after,
.darkmode .footer-social-media .social-icon a img,
.darkmode .dropdown-big .dropdown-toggle::after,
.darkmode .dropdown-toggle::after,
.darkmode .social-icon-xl a img,
.darkmode .sticky-box .social-icon a img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}
.darkmode .card-sm-title h4,
.darkmode .card-xl-title h2,
.darkmode .hero-box-tag a,
.darkmode .news-box .section-title h2,
.darkmode .news-box .section-title span,
.darkmode .card-title-md h3,
.darkmode .autor-box a,
.darkmode .section-title h2,
.darkmode .title-tag-card a,
.darkmode .see-all a,
.darkmode .single-tag,
.darkmode .single-tag-source{
    color: #ffffff;
}
.darkmode .autor-name{
    color: #ffffff;
}
.darkmode .navbar{
    background-color: #000000 !important;
}
.darkmode .navbar-collapse .navbar-nav .nav-link.bg-red:hover,
.darkmode .navbar-collapse .navbar-nav .nav-link:hover{
    color: #ffffff;
    background-color: var(--primary-red);
    border-radius: 5px;
}
.darkmode .btn-darkmode-box{
    background-color: #888;
}
.darkmode footer{
    background: #000000 ;
}
.darkmode .see-all img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7462%) hue-rotate(30deg) brightness(109%) contrast(108%);
}


.darkmode .events-info-box {
    color: #ffffff;
}
.darkmode .events-info-box img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7462%) hue-rotate(30deg) brightness(109%) contrast(108%);
}
/*************************
        NAV-BAR
*************************/
.burger {
    display: flex;
    justify-content: start;
    align-items: center;
    outline: none;
    height: 30px;
    width: 30px;
    border: 0px;
    padding: 0px;
    background: transparent;
    transition: all 250ms ease-out;
    cursor: pointer;
    margin-top: -12px;
}
.burger span{
    content: '';
    width: 16px;
    height: 2px;
    position: absolute;
    background-color: var(--primary-red);
    transition: all 250ms ease-out;
    will-change: transform;
    margin-top: 6px;
}
.burger:before {
    content: '';
    width:24px;
    height: 2px;
    position: absolute;
    background: #1a1a1a;
    transition: all 250ms ease-out;
    will-change: transform;
}
.burger:after{
    content: '';
    width: 9px;
    height: 2px;
    position: absolute;
    background: #1a1a1a;
    transition: all 250ms ease-out;
    will-change: transform;
}
.burger:before {
    transform: translateY(-6px);
    margin-top: 4px;
    background-color: var(--primary-red);
}
.burger:after {
    transform: translateY(6px);
    margin-top: 8px;
    background-color: var(--primary-red);
}
.navbar-toggler:not(.collapsed) .burger:before {
    transform: translateY(0) rotate(134deg);
    margin-top: 10px;
}
.navbar-toggler:not(.collapsed) .burger:after {
    transform: translateY(0) rotate(-133deg);
    margin-top: 10px;
    width: 24px;
}
.navbar-toggler:not(.collapsed) .burger span {
    display: none;
}
.navbar-nav .nav-item .nav-link{
    color:#ffffff;
    font-weight: 700;
    line-height: 1.16;
    transition: all .2s ease-in-out;
    display: inline-block;
    text-transform: uppercase;
}
.navbar-nav .nav-item {
    margin-bottom: 5px;
}
.navbar-collapse {
    background-color: var(--color-title);
}
.navbar.scrollUp {
    transform: translateY(-210px);
}  
.navbar-toggler{
    border: none ;
    padding: 0;
    height: 25px;
}
.navbar-toggler:focus{
    border: none;
    box-shadow: none;
}


.mobile-fixed-navigation{
	height: auto;
	max-height: 50px;
	background: #000;
	color: #fff;
}
.mobile-fixed-navigation ul{
	list-style-type: none;
	
	& li{
		width: 20%;
		text-align: center;
		
		& a{
			text-decoration: none;
			color: #fff;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 14px;
			
			& img{
				width: auto;
				height: 20px;
				max-height: 100%;
				max-width: 100%;
				object-fit: contain;
				filter: brightness(0) invert(1);
			}
		}
		&.home-li-box{
			a{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				position: relative;
				top: -8px;
				background: var(--primary-red);
				
				& img{
					height: 25px;
				}
			}
		}
	}
}

.darkmode .mobile-fixed-navigation{
	background: #fff;
	color: #000;
}

.darkmode .mobile-fixed-navigation ul{
	& li{
		& a{
			color: #000;
			
			& img{
				filter: none;
			}
		}
		&.home-li-box{
			a{
				& img{
					filter: brightness(0) invert(1);
				}
			}
		}
	}
}


.navbar-toggler .line-top{
    display: flex;
    width:24px;
    height: 2px;
    background-color: #000000;
    margin-bottom: 5px;
}
.navbar-toggler .line-center{
    display: flex;
    width:15px ;
    height: 2px;
    background-color: #000000;
    margin-bottom: 5px;
}
.navbar-toggler .line-bottom{
    display: flex;
    width:10px;
    height: 2px;
    background-color: #000000;
    margin-bottom: -5px;
}  
.navbar-brand img{
    max-width: 180px;
    height: auto;
    max-height: 100%;
}
.navbar-brand-search{
    width:25px;
    height: 20px;
}
.navbar-brand-search img{
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}
.line-left{
    border-right: 1px solid #28282820;
    padding-right: 10px;
}
.navbar-nav-bottom{
    list-style: none;
}
.navbar-bottom-sm{
    overflow-x: auto;
}
.navbar-bottom-sm::-webkit-scrollbar {
    display: none;
}
.navbar-bottom-sm {
    -ms-overflow-style: none; 
    scrollbar-width: none;  
}
.house-img{
    width: 17.5px;
    height: 16px;
}
.house-img img{
    max-width: 100%;
    width: auto;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}
.navbar-nav-bottom .nav-item .nav-link{
    color: #282828;
    font-size: inherit;
    font-weight: 700;
    white-space: nowrap;
}
.navbar-nav-bottom .nav-link{
    position: relative;
}
.navbar-nav-bottom .nav-item{
    padding-left: 10px;
    padding-right: 10px;
}
.navbar-nav-bottom .nav-item:first-child{
    padding-left:0;
}
.navbar-nav-bottom .nav-link.bg-orange{
    border-radius: 5px;
}
.navbar-bottom-sm{
    padding-top: 7px;
}
.navigation-top{
    padding-bottom: 8px;
}
.search-box h5{
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}
.search-box .form-control{
    background: transparent;
    border-color:#88888826;
    color: #ffffff;
    padding: 7px 0;
    padding-left: 40px;
    border-radius: 15px;
}
.search-box .form-control::placeholder{
    color: #ffffff;
}
.search-box .form-control:focus{
    box-shadow: none;
}
.offcanvas-body .navbar-nav .nav-link{
    color: #ffffff;
    font-weight: 700;
}
.offcanvas-body .navbar-nav .nav-link{
    display: inline-block;
}
.play-img{
    width: 12px;
    height: 16px;
}
.play-img img{
    max-width: 100%;
    width: auto;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}
.social-icon a {
    width: 16px;
    height: 16px;
}
.social-icon a img{
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(94%) sepia(94%) saturate(0%) hue-rotate(184deg) brightness(107%) contrast(103%);
}
.social-title{
    font-size: 14px;
    font-weight: 700;
}
.navbar-collapse .house-img img,
.navbar-collapse .play-img  img{
    filter: brightness(0) saturate(100%) invert(94%) sepia(94%) saturate(0%) hue-rotate(184deg) brightness(107%) contrast(103%);
}
.btn-search{
    width:25px;
    height: 25px;
}
.btn-search img{
    position: absolute;
    width:auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    top: -27px;
    filter: brightness(0) saturate(100%) invert(55%) sepia(0%) saturate(0%) hue-rotate(225deg) brightness(86%) contrast(88%);
    left: 10px;
}
.nav-bottom-link a{
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}
.copyright-text p{
    font-size: 12px;
    color: #ffffffB3;
}
.btn-search-arrow  button{
    width: 16px;
    height: 16px;
    right: 10px;
    top: 12px;
}
.btn-search-arrow img{
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(100%) sepia(71%) saturate(0%) hue-rotate(82deg) brightness(103%) contrast(101%);
}


.btn-search-arrow button:hover img{
    filter: brightness(0) saturate(100%) invert(65%) sepia(8%) saturate(6346%) hue-rotate(357deg) brightness(99%) contrast(108%);
}
.navbar .dropdown-menu .dropdown-item:hover{
    color: var(--primary-red);
}
.menu-border{
    border-top: 1px solid #282828 !important;
    border-radius: 0 !important;
}
.navbar-nav .nav-item .nav-link.active{
  background-color: var(--primary-red) ;  
  padding: 5px ;
  border-radius: 5px;
}
.navbar-nav-bottom .nav-item .nav-link.active{
    background-color: #28282820;
    border-radius: 5px;
    padding: 8px;
}
.menu-border li{
    margin-top: 10px;
}
.menu-border-direct{
    margin-top: 25px !important;
}
.nav-bottom-link {
    margin-top: 30px;
}
.darkmode .burger::before,
.darkmode .burger::after,
.darkmode .burger span{
    background-color: #ffffff;
}
.darkmode .navbar-brand-search img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7459%) hue-rotate(293deg) brightness(94%) contrast(111%);
}
.darkmode .navbar-nav-bottom .nav-item .nav-link{
    color: #ffffff;
}
.darkmode .house-img img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(76%) saturate(0%) hue-rotate(217deg) brightness(105%) contrast(105%);
}
.navbar.scrollUp {
    transform: translateY(-210px);
}  
.istaknuto{
    background-color: var(--primary-red);
    border-radius: 3px;
    color: #ffffff !important;
}
.istaknuto .nav-link{
    color: #ffffff !important;
    padding: 5px;
}
/*************************
        DARK MODE
*************************/
.btn-darkmode-box {
    background-color: #88888826;
    width: 40px;
    height: 14px;
    border-radius: 20px;
    padding: 0 2px;
    margin-left: 10px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.btn__indicator {
    background-color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: calc(50% - 10px);
    position: absolute;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .2);
    transition: transform .3s ease;
}
.btn__icon-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background:var(--primary-red);
}
.btn__icon-container .btn__icon {
    width: 60%;
    height: 60%;
}
.fa-sun {
    background-image: url('local-images/sun.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(337deg) brightness(103%) contrast(105%);

}
.btn__icon-container .btn__icon.fa-sun {
    width: 70%;
    height: 70%;
}
.fa-moon {
    background-image: url('local-images/moon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) saturate(100%) invert(100%) sepia(77%) saturate(192%) hue-rotate(148deg) brightness(118%) contrast(106%);
}
/* -------------- ANIMATION ------------ */
.btn__icon.animated {
    animation: spin 0.5s;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/*-------------- DARKMODE -------------- */
body.darkmode {
    background-color: #000000;
}
/* body.darkmode .card-title{
    color: var(--light-color-text);
} */
.darkmode .text-box {
    color: #fff;
}
.darkmode .btn-darkmode-box {
    box-shadow: inset 0 2px 30px rgba(0, 0, 0, .1),
    inset 2px 0 2px rgba(0, 0, 0, .1),
    inset 0 -1px 1px rgba(0, 0, 0, .1);
}
.darkmode .btn__indicator {
    transform: translateX(20px);
    background-color: var(--dark-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
}
/* .darkmode .btn__icon {
    color: var(--dark-icon-color);
}
.darkmode .editor {
    color: var(--light-color-text);
} */
.darkmode .link-traka .social-media-links-wrap img,
.darkmode .link-traka .kopiraj-link-icon img {
    filter: invert(1);
}
.navbar-collapse{
    width: 100%;
    padding-bottom: 40px;
    margin-top: 10px;
}
.event-cats-box {
    top: 6px;
    right: 6px;
    width: calc(100% - 12px);
}
.event-over,
.event-cats-box .cat-item {
    background-color: var(--color-title);
    color: #FFFFFF;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 3px;
    font-size: 14px;
}
.event-over {
    background-color: var(--primary-red);
    bottom: 6px;
    left: 6px;
}
.event-icon {
    width: 14px;
    height: 14px;
}
.event-icon img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}
.event-info-text {
    font-size: 14px;
}
/***********************************
            Footer
************************************/
footer{
    padding: 40px 0 20px 0;
    border-top: 4px solid var(--primary-red);
}
.footer-text h4{
    font-size: 18px;
    font-weight: 700;
    color: var(--color-title);
    line-height: 1.4;
}
.footer-text p{
   color: var(--color-title);
}
.icon-air img{
    width: auto;
    height: auto;
    max-width: 85px;
    max-height: 70px;
    object-fit: contain;
    position: absolute;
    left: -5px;
    z-index: -1;
    top: 25px;
    transform: rotate(20deg);
}
.footer-link h3,
.footer-social-media h3{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 15px;
}
.footer-link ul {
    list-style: none;
    padding-left: 0;
}
.footer-link li{
    position: relative;
    margin-bottom: 8px;
    padding-left: 15px;
}
.footer-link li::after{
    content: '';
    position: absolute;
    width: 8px;
    height: 12px;
    background-size: 8px 12px;
    background-image: url('local-images/chevron-right.svg');
    left: 0;
    top: 6px;
}
.footer-link li a{
    text-decoration: none;
    color: var(--color-title);
}
.footer-social-media .social-icon a{
    width: 17.5px;
    height: 19px;
}
.footer-social-media .social-icon a img{
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(11%) sepia(21%) saturate(3347%) hue-rotate(184deg) brightness(96%) contrast(110%);
}
.copy-right{
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    opacity: .7;
}
footer .navbar-brand img{
    margin-top: 40px;
    max-width: 180px;
    margin-bottom: 20px;
}
.top-link-footer ul li{
    margin-bottom: 8px;
}
footer .footer-brand img{
    max-width: 250px ;
    height: auto;
    max-height: 100%;
}
.banner-box a img {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: cover;
     border-radius: 3px;
    transition: all .3s;
}
.banner-box a:hover img {
    opacity: .8;
}
.banner-box iframe {
    max-width: 100%;
}
.promo-see-all img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7462%) hue-rotate(30deg) brightness(109%) contrast(108%);
}
.video-section .autor-name {
    color: #FFFFFF;
}
/*****************************
        Hero - section
******************************/
.hero-card-sm-img {
    overflow: hidden;
    border-radius: 3px;
}
.hero-card-sm-img img{
    width: 100%;
    height: auto;
    aspect-ratio:16/9;
    object-fit: cover;
    border-radius: 3px;
    transition: all .3s;
}
.hero-card-sm-img:hover img {
    scale: 1.03;
}
.hero-box-tag a{
    font-size:13px;
    color: var(--color-title);
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
}
.hero-card-lg-img img{
    width: 100%;
    height: auto;
    aspect-ratio:4/3;
    object-fit: cover;
    transition: all .4s;
}
.hero-card-lg-img {
    border-radius: 3px;
    overflow: hidden;
}
.hero-card-lg-img:hover img {
    scale: 1.02;
}
.swiper-button-next::after, .swiper-rtl .swiper-button-prev::after {
    content: 'none';
}
.swiper-button-prev::after, .swiper-rtl .swiper-button-next::after {
    content: 'none';
}
.swiper-button-next-hero,
.swiper-button-prev-hero {
    background-color: var(--primary-red);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.swiper-button-next-hero img,
.swiper-button-prev-hero img{
    width: auto;
    max-width: 15px;
    height: auto;
    max-height: 15px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(179deg) brightness(104%) contrast(102%);
}
.swiper-hero-arrow{
    bottom: -20px;
}
.swiper-button-next{
    right: 1px;
}
.swiper-button-prev{
    left: 1px;
}
.news-box .section-title h2{
    margin-bottom: 0;
}
.news-box .section-title span{
    font-weight: 600;
}
.autor-box a{
    font-size: 13px;
}
.hero-box-tag{
    line-height: 1;
}
/*************************************
        Second - news - section
**************************************/
.circle-img{
    width: 100px;
    height: 100px;
    margin-right: 15px;
}
.circle-img img{
    width: 100%;
    height: 100%;
	object-fit: cover;
}
.title-tag-card a{
    font-size: 24px;
    color: var(--color-title);
    font-weight: 700;
    line-height: 1.3;
}
.see-all a {
    color: var(--color-title);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
}
.circle-img-big{
    width: 150px;
    height: 150px;
}
.num-card{
    font-size: 50px;
    line-height: 1;
    font-weight: 700;
    color: var(--secondary-grey);
}
.video-section .section-title h2{
    color: #ffffff;
}
.video-section .card-title-md h3{
    color: #ffffff;
}
.big-card-text .card-xl-title h2{
    color: #ffffff;
}
.card-title-md h3 span{
    color: var(--primary-red);
    font-size: 30px;
}
.sticky-box .social-icon a img{
    filter: brightness(0) saturate(100%) invert(0%) sepia(78%) saturate(7411%) hue-rotate(232deg) brightness(100%) contrast(94%);
}
.btn-all a{
    color: var(--color-title);
    font-size: 18px;
}
.btn-all img{
    width: auto;
    height: auto;
    max-width: 18px;
    max-height: 18px;
    object-fit: contain;
    margin-left: 15px;
}
.video-section .hero-sm-card{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.archive-section .card-title-md p{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.single-editor-text img {
    max-width: 100%;
}

.single-editor-text img.alignright {float:right; margin:0 0 1em 1em}
.single-editor-text img.alignleft {float:left; margin:0 1em 1em 0}
.single-editor-text img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.single-editor-text a img.alignright {float:right; margin:0 0 1em 1em}
.single-editor-text a img.alignleft {float:left; margin:0 1em 1em 0}
.single-editor-text a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

.single-box .single-title h2{
    font-size:28px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-title);
    margin-bottom: 30px;
}
.single-editor-text p{
    font-size:18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-title);
    margin-bottom: 30px;
}
.single-bottom-post-section{
    border-top: 1px solid var(--primary-red);
}
.autor-img{
    border-radius: 50%;
    overflow: hidden;
    margin-right: 7px;
    width: 22px;
    height: 22px;
}
.autor-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.autor-name{
    color: var(--color-title);
    font-size: 14px;
    line-height: 1.2;
}
.error-section{
    min-height: 50svh;
}
.banner-single {
    max-width: 1300px;
    margin: 0 auto;
}
.btn-primary {
    background-color: var(--primary-red);
    color: #FFFFFF;
    border: 1px solid var(--primary-red);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-title) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--color-title) !important;
}
/***********************************
            Modal
************************************/
.btn-modal {
	border: 1px solid var(--primary-red);
	background: var(--primary-red);
	color: #FFFFFF;
	font-weight: 500;
	font-size: 18px;
	border-radius: 3px;
}
.modal-body .form-control:focus{
    box-shadow: none;
    border-color: #28282820;
}
.modal-body .form-control{
    background-color: #28282820;
    padding: 8px 16px 8px 16px;
}
.modal-body .btn-search{
    width: 22px;
    height: 22px;
    position: absolute;
    top: 36px;
}
.modal-body .btn-search img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(0%) hue-rotate(195deg) brightness(98%) contrast(105%);
}
.modal-body{
    padding: 15px ;
}
.modal-body .search-box-navigation .btn-search-arrow img{
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(25%) hue-rotate(83deg) brightness(101%) contrast(105%);
}
.modal-body .search-box-navigation .btn-search-arrow button{
    width: 22px;
    height: 22px;
    top: 9px;
}
.modal-body .search-box-navigation .btn-search-arrow a:hover img{
    filter: brightness(0) saturate(100%) invert(14%) sepia(96%) saturate(3378%) hue-rotate(353deg) brightness(82%) contrast(99%);
}
.form-check-input:focus {
	box-shadow: none;
}
.form-check-input:checked {
	background-color: var(--primary-red);
	border-color: var(--primary-red); 
}
.archive-section p{
    margin-bottom: 8px;
}
.icon-all{
    width: 22px;
    height: 22px;
}
.icon-all img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin-top: 4px;
}
.galerija-clearfix a img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}
.galerija-clearfix .ski-galery img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ski-section .galerija-clearfix{
    gap: 20px;
}
.gallery-box{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.2/1;
}
.gallery-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.search-none{
    min-height: 400px;
}
.search-none p{
    color: var(--color-title);
    font-size: 24px;
    line-height: 1.4;
    font-weight: 600;
    text-align: center;
}
.darkmode .search-none p {
	color: #FFFFFF;
}
.blog-pagination .page-item.active .page-link{
    background-color: var(--tite-color);
    color: #fff !important;
    border-color: var(--secondary-title) !important;
}
.page-link{
    color: var(--tite-color);
}
.page-link:focus{
    box-shadow: none;
    background-color: #fff;
}
.page-link:hover{
    color: var(--tite-color);
    background-color: #fff;
}
.wp-pagenavi {
    display: flex;
}
.wp-pagenavi .current,
.wp-pagenavi span,
.wp-pagenavi a {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    color: #FFFFFF;
    background-color: var(--primary-red);
    border: 1px solid var(--primary-red) !important;
}
.wp-pagenavi .current,
.wp-pagenavi a:hover {
    background-color: var(--color-title);
    border: 1px solid var(--color-title) !important;
}
/* 
.wp-pagenavi span.current{
    font-weight: 100;
    background-color: var(--primary-color);
    color: #fff;
    
}
.wp-pagenavi a:hover, .wp-pagenavi span.current{
    border-color: var(--primary-red) !important;
    color: #ffffff;
    border-radius: 50%;
    background-color: var(--primary-red);
}
.wp-pagenavi a, .wp-pagenavi span{
    padding: 8px 13px;
    color: var(--primary-color);
    border-radius: 50% ;
}

.blog-pagination .page-item.active .page-link{
    background-color: var(--primary-color);
    border-color: var(--text-color)!important;
}
.current{
    color: var(--text-color);
    font-weight: 500;
}
.page-link{
    color: var(--text-color);
}
.page-link:focus{
    box-shadow: none;
    background-color: #fff;
}
.pagination{
    gap: 5px;
} */
.circle-box .card-sm-title h4 {
    margin-bottom: 0;
}
.video-section .hero-box-tag {
    display: none;
}
.video-section .hero-card-sm-img {
    margin-bottom: 8px;
}
.single-events-box .event-info-text{
    font-size: 16px;
}
.single-event-over {
    font-size: 16px;
}
.form-control:focus {
	box-shadow: none !important;
	border-color: var(--primary-red);
}
.form-label {
	margin-bottom: 4px;
}
.contact-section .social-icon-xl a {
	width: 40px;
	height: 40px;
}
    .social-icon-xl a .icon-text {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 3px;
        opacity: 0;
        visibility: hidden;
        background-color: var(--primary-red);
        color: #ffffff;
        padding: 2px 5px;
        border-radius: 4px;
        font-size: 8px;
        white-space: nowrap;
        transition: visibility 0.3s ease;
        font-weight: 700;
    }
    .social-icon-xl a:hover .icon-text {
        opacity: 1;
        visibility: visible;
    }
    .social-icon-xl a img{
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .social-icon-xl a:hover img {
        filter: brightness(0) saturate(100%) invert(14%) sepia(96%) saturate(3378%) hue-rotate(353deg) brightness(82%) contrast(99%);
    }

.map-section {
	height: 300px;
}
.map-section iframe {
	height: 100%;
	width: 100%;
}
.container-navbar-bottom-sm .hide-scroll-menu {
	display: none;
}
.single-tags a {
	color: var(--primary-red);
	font-size: 18px;
}
.tags-title {
	font-size: 18px;
}
.darkmode .tags-title {
	color: #FFFFFF;
}
.tags-title img {
	width: 22px;
}
.darkmode .tags-title img {
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(252deg) brightness(103%) contrast(103%);
}
.current-conditions {
	margin-left: auto;
	margin-right: auto;
}
.napomena a {
	text-decoration: none;
	color: var(--primary-red);
}
.napomena a:hover {
	text-decoration: underline;
}
.grecaptcha-badge { 
    visibility: hidden;
}
.darkmode .napomena {
	color: #FFFFFF;
}
.oglasi-top {
	max-width: 500px;
}
.oglasi-top .btn-modal {
	padding: 4.5px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.oglasi-top input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.oglas-box img {
	width: 50%;
	height: auto;
	max-height: 100%;
	filter: brightness(0) saturate(100%) invert(12%) sepia(72%) saturate(5730%) hue-rotate(357deg) brightness(84%) contrast(93%);
}
.oglas-box h4 {
	font-weight: 700;
	font-size: 15px;
	color: #333333;
}
.darkmode .oglas-box h4 {
	color: #FFFFFF;
}
.darkmode .oglas-box img  {
	filter: brightness(0) saturate(100%) invert(91%) sepia(99%) saturate(36%) hue-rotate(195deg) brightness(108%) contrast(99%);
}
.oglas-box-img {
	width: 100%;
	height: 50px;
	border-right: 1px solid #f4f4f4;
}
.oglas-box {
	border: 1px solid var(--primary-red);
	border-radius: 15px;
	text-decoration: none;
	transition: all .3s;
}
.oglas-box:hover {
	background-color: #f3f3f3;
}
.darkmode .oglas-box:hover {
	background-color: #333333;
}
.card-price {
	font-weight: 600;
	color: var(--primary-red);
}
.body-scroll-disabled {
  overflow: hidden;
  height: 100%;
}
.navbar-collapse {
	max-height: calc(100svh - 144px);
    overflow-y: auto;
}
.date-box {
	font-size: 15px;
}
.darkmode .date-box {
	color: #FFFFFF;
}
.citulje-info a,
.citulje-info {
	font-size: 18px;
	color: var(--color-title);
}
.citulje-info a {
	color: var(--color-title);
}
.citulje-info a:hover {
	text-decoration: none;
}
.darkmode .citulje-info a,
.darkmode .citulje-info  {
	color: #FFFFFF;
}
.single-tags {
	column-gap: 10px;
}
/*********** RESPONSIVE SM ***********/
@media (min-width: 576px) {
}

/*********** RESPONSIVE SM ***********/
@media (min-width: 600px) {
    .admin-bar .navbar.sticky-top {
        top: 46px;
    }
}
@media (min-width: 782px) {
    .admin-bar .navbar.sticky-top {
        top: 32px;
    }
}
/*********** RESPONSIVE MD ***********/
@media (min-width: 768px) {
/*********** PRE-D CLASSES ***********/
	body{
		padding-bottom: 0px;
	}
	.card-sm-title h4{
		font-size: 24px;
	}
	.circle-box .card-sm-title h4{
		font-size: 18px;
	}
	.card-md-title h3{
		font-size: 22px;
		color: var(--color-title);
	}
	.card-xl-title h2{
		font-size: 38px;
	}
	.card-lg-title h3{
		font-size: 24px;
		color: var(--color-title);
	}
	.category-text{
		font-size: 12px;
	}
	.card-text{
		font-size: 16px;
	}
	.single-box .single-title h2{
		font-size:36px;
	}
	/***********************************
				Footer
	************************************/
	footer .navbar-brand img{
		margin-top: 0;
	}
	.bootom-footer{
		margin-top:40px;
	}
	/*****************************
			Hero - section
	******************************/
	.hero-big-image{
		height: 80%;
	}
	.hero-medium-image{
		height: 165px;
	}
	.card-md-title h3{
		font-size: 16px;
	}
	/***********************************
				Modal
	************************************/
	.current-conditions {
		margin-left: auto;
		margin-right: 0;
	}
}
/*********** RESPONSIVE LG ***********/
@media (min-width: 992px) {
    .section-padding {
        padding: 70px 0;
    }
/*************************
        NAV-BAR
*************************/
    .navbar-brand img{
        max-width: 165px;
    }
    .copyright-text p{
        font-size: 14px;
    }
/*************************
            Footer
*************************/
    .top-link-footer{
        max-width: 1000px;
        margin: 0 auto;
    }
    .footer-text h4,
    .footer-link h3, .footer-social-media h3{
        font-size: 26px;
    }
    .footer-link li a{
        font-size: 17px;
    }
    .footer-link li a:hover{
        color: var(--primary-red);
    }
    .footer-social-media .social-icon a {
        position: relative;
        transition: transform 0.3s ease;
    }
    .footer-social-media .social-icon a:hover {
        filter: brightness(0) saturate(100%) invert(14%) sepia(96%) saturate(3378%) hue-rotate(353deg) brightness(82%) contrast(99%);
    }
    .footer-link li::after{
        top: 7px;
    }
    .footer-text{
        padding-top: 0;
    }
    .top-link-footer a:hover{
        color: var(--primary-red);
    }
    /*****************************
            Hero - section
    ******************************/
    .autor-box a{
        color: var(--color-title);
        font-weight: 500;
    }
    .big-box-hero .news-md-box .hero-box-tag{
        min-height: 50px;
    }
    .card-sm-title h4:hover,
    .card-xl-title h2:hover,
    .card-title-md h3:hover{
        text-decoration: underline;
    }
    .hero-box-tag a{
        transition: all .3s ease-in-out;
    }
    .hero-box-tag a:hover{
        color: var(--primary-red) !important;
    }
    .card-title-md h3{
        font-size:24px;
    }
    .title-tag-card a{
        font-size: 35px;
    }
    .big-card-text-video .hero-box-tag a{
        font-size: 16px;
    }
    .autor-box a{
        font-size: 14px;
    }
    /***********************************
            Modal
    ************************************/
    .section-title h2 {
        font-size: 35px;
    }
	.map-section {
		height: 450px;
	}
	.single-editor-text li,
	.single-editor-text p {
		font-size: 20px;
	}
	
}
/*********** RESPONSIVE XL ***********/
@media (min-width: 1200px) {
    /*************************
            NAV-BAR
    *************************/
    .navbar-nav .nav-item .nav-link.active{
        background-color:#28282820 ;
        border-radius: 3px;
        padding: 8px;
    }
    .istaknuto .nav-link:hover{
        color: #000000 !important;
    }
    .istaknuto .nav-link{
        padding: 8px;
    }
    .navbar-collapse{
        padding-bottom: 0;
    }
    .navbar-nav  .nav-link.bg-orange{
        border-radius: 5px;
    }
    .dropdown-toggle.show::after {
        transform: rotate(180deg);
        filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(0%) hue-rotate(298deg) brightness(109%) contrast(101%);
    }
    .navbar .dropdown-menu .dropdown-item:hover{
        color: var(--color-title);
    }
    .navbar-nav .nav-item .nav-link.bg-red{
        padding: 8px !important;
    }
    .navbar-collapse .navbar-nav .nav-link.bg-red:hover{
        color: #000000 !important;
    }
    .dropdown-toggle::after{
        border: none;
        background-image: url('local-images/chevron-down.svg');
        background-size: 10px;
        background-repeat: no-repeat;
        background-position: center;
        height: 10px;
        width: 10px;
        right: 14px;
        position: absolute;
        top: 11px;
    }
    .dropdown-big .dropdown-toggle::after{
        border: none;
        background-image: url('local-images/chevron-down.svg');
        background-size: 10px;
        background-repeat: no-repeat;
        background-position: center;
        height: 10px;
        width: 10px;
        right: 14px;
        position: absolute;
        top: 13px;
        filter: brightness(0) saturate(100%) invert(100%) sepia(3%) saturate(11%) hue-rotate(322deg) brightness(102%) contrast(104%);
    }
    .dropdown-menu .dropdown-item{
        font-weight: 700;
    }
    .menu-border-direct,
    .menu-border  {
        border: none;
        padding: 7px 10px;
        border-radius: 20px !important;
        box-shadow: 0 4px 30px #0000001f;
    }
    .navbar .nav-link.dropdown-toggle{
        padding-right: 15px;
    }
    .navbar-expand-xl .navbar-collapse{
        width: 100%;
        padding-top: 30px;
    }
    .navbar-nav .nav-item{
        margin-bottom: 0;
    }
    .navbar-collapse{
        background-color: transparent;
    }
    .navbar-nav .dropdown-big .bg-orange,
    .navbar-nav .dropdown-toggle{
        padding-right: 25px !important;
    }
    .navbar-collapse .dropdown-big a:hover{
        background-color: #28282820;
        color: #000000 !important;
        border-radius: 5px;
    }
    .navbar-collapse .dropdown-big a:hover::after{
        filter: brightness(0) saturate(100%) invert(0%) sepia(92%) saturate(7457%) hue-rotate(318deg) brightness(79%) contrast(104%) !important;
    }
    .navbar-collapse .navbar-nav .nav-item{
        transition: all .3s ease-in-out;
    }
    .navbar-collapse .navbar-nav .nav-item:hover{
        background-color: #28282820;
        border-radius: 5px;
    }
    .social-icon-xl a{
        width: 24px;
        height: 20px;
    }

    .navbar-brand-search:hover img{
        filter: brightness(0) saturate(100%) invert(14%) sepia(96%) saturate(3378%) hue-rotate(353deg) brightness(82%) contrast(99%);
    }
    .navbar-brand img{
        max-width: 320px;
    }
    .navbar-nav .nav-item .nav-link{
        color: #000000;
        font-size: 14px;
    }
    .navbar-nav{
        min-height: 0;
    }
    .navbar-collapse .nav-item.dropdown{
        margin-top: 0;
    }
    .navbar-collapse .house-img img, .navbar-collapse .play-img img{
        filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7481%) hue-rotate(228deg) brightness(106%) contrast(106%);
    }
    .menu-border{
        border-top: none !important;
    }
    .menu-border li{
        margin-top: 0;
    }
    .menu-border-direct{
        margin-top: 0 !important;
    }
    .social-icon-xl a {
        transition: transform 0.3s ease;
    }
    .social-icon-xl {
        position: relative;
    }
    .social-icon-xl a {
        position: relative;
        transition: transform 0.3s ease;
        text-decoration: none;
    }

    .navbar{
        padding-top: 35px;
    }
    .navbar .navbar-brand{
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
    }
	.search-none p{
	
		font-size: 32px;

	}
    /***********************************
                Footer
    ************************************/
    footer{
        padding: 80px 0 20px 0;
    }
    .icon-air img{
        top: -40px;
    }
    footer .navbar-brand img{
        margin-bottom: 0;
    }
    footer .footer-brand img{
        max-width: 320px;
    }
    .footer-link ul li:hover::after {
        filter: brightness(0) saturate(100%) invert(14%) sepia(96%) saturate(3378%) hue-rotate(353deg) brightness(82%) contrast(99%);
    }
    /*****************************
            Hero - section
    ******************************/
    .autor-box a{
        color: var(--color-title);
        font-weight: 500;
    }
    .big-box-hero .news-md-box .hero-box-tag{
        min-height: 0;
    }
    .circle-box .card-sm-title h4{
        font-size: 20px;
    }
    .hero-section .row.gx-xl-5{
        --bs-gutter-x: 30px;
    }
    .title-tag-card a{
        font-size: 35px;
    }
/*     .sticky-box {
        position: sticky;
        top: 0; 
    } */
    .navbar.scrollUp {
        transform: translateY(-157px);
    }
    .page-link:hover img{
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(105deg) brightness(104%) contrast(101%);
    }
    .single-box .single-title h2 {
        font-size: 44px;
    }
	.citulje-info a,
	.citulje-info {
		font-size: 20px;
	}
}
/*********** RESPONSIVE XXL ***********/
@media (min-width: 1400px) {
    .navbar-nav .nav-item .nav-link{
        font-size: 16px;
    }
    .text-image-section .row.gx-xxl-5{
        --bs-gutter-x: 80px;
    }
}