:root {
    --main-color: #1C2A44;
    --secondary-color: #3c88d3;
    --alternative-color: #2F415F;
    --menu-color: rgba(28, 42, 68, .8);
    --border-radius: 7px;
}

a{ text-decoration: none; }

/**/
body{
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
  

}

.bg-white {
    background: #fff;
    background-image: url("../images/pattern.png") !important;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-gray{ background: #ebebeb; }
.bg-alternative{ background: var(--alternative-color); }
.navbar-toggler:focus{ outline: 0; box-shadow: none; }


.quickcolor a {
    color: #3c88d3 !important;
}

    .quickcolor a:hover {
        color: #76C8FF !important;
    }

.quickborder {
    border-bottom: 0.05em solid #3c88d3 !important;
}

.quickcolor {
    list-style-type: none !important;
    padding: 0px;
}

/**/
header{ z-index: 1111; position: relative; }
header .header-top{ background: var(--main-color);  color: #fff;  }
header .header-top .container{  display: flex; justify-content: space-between; height: 50px; align-items: stretch; }
header .header-top .links{ align-items: center; display: flex; gap: 30px; }
header .header-top .links a{ color: #fff; font-weight: 300;; }
header .header-top .links a.active{ color: var(--secondary-color); }
header .header-top .links .theme{ display: flex; align-items: center; }
header .header-top .links .theme i{ height: 20px;}
header .header-top .links .theme .form-check-input{ border: 0; }
header .header-top .socials{ display: flex; align-items: center; }
header .header-top .socials a{ color: #fff; width: 40px; text-align: center;  font-size: 1.125rem; }
header .header-top .socials a:hover{ color: var(--secondary-color); }

header .header{ }
header .header > .container{ padding-top: 20px; padding-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
header .header .logo{ display: flex; gap: 30px; color: var(--main-color); }
header .header .logo img{ width: 50px; }
header .header .logo .logo-text{ font-size: 1.5rem; line-height: 1.2; display: flex; flex-direction: column; justify-content: center; }
header .header .search{}
header .header .search .input-group{ background: #eee; height: 50px; border-radius: 25px; padding: 0 10px; }
header .header .search .input-group input{ border: 0; background: transparent; }
header .header .search .input-group button{ border: 0; background: transparent; font-size: 1.5rem; }

header .menu{ background: var(--menu-color); }
header .menu .container .navbar-nav{ justify-content: flex-end; }

/* section */
section{ padding: 50px 0; }

.navbar{ flex-direction: column; padding: 0; align-items: inherit; }
.navbar-nav{ align-items: stretch; }
.navbar-nav .nav-item{ height: 60px; display: flex;  }
.navbar-nav .nav-item .nav-link{ color: #fff; padding: 0 15px; display: flex; align-items: center; }
    .navbar-nav .nav-item .nav-link:hover {
        color: #76C8FF;
        padding: 0 15px;
        display: flex;
        align-items: center;
    }
    .navbar-nav .nav-item3 .nav-link {
        color: #fff;
        padding: 0 10px;
        display: flex;
        align-items: center;
        height: 60px
    }
        .navbar-nav .nav-item3 .nav-link:hover {
            color: #76C8FF;
            padding: 0 10px;
            display: flex;
            align-items: center;
            height: 60px
        }
     


.form-control:focus {

    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.075) inset, 0px 0px 0px rgba(255, 100, 255, 0.5);
}
.btn:focus, .btn:active {
    outline: none !important;
    box-shadow: none;
}

/* slider */
#slider {
    margin-top: 0px;
    overflow: hidden;
}
#slider .item{  }
#slider .item a{ display: block; height: -webkit-fill-available; position: relative; height: 100%; }
#slider .item  img{  position: relative;  object-fit: cover; object-position: top; }
#slider .item strong{ position: absolute; left: 50%; top: 40%; z-index: 999; width: 1000px; margin-left: -660px; font-size: 3.5rem; color: #fff; text-shadow: 0 2px 2px rgba(0,0,0,.2); }
#slider .owl-dots{ position: absolute; bottom: 30px; left: 50%; width: 400px; text-align: left; margin-left: -660px; }
#slider .owl-dots .owl-dot span{ width: 15px; height: 15px; background: rgba(255,255,255,.3); }
#slider .owl-dots .owl-dot.active span{ background: rgba(255,255,255,1); }

/* home icon list */
.home-icon-list{ padding: 30px 0; }
.home-icon-list .container{ }
.home-icon-list .container a{ display: flex; flex-direction: column; align-items: center; color: #fff; gap: 10px; text-align: center; padding: 10px; }
.home-icon-list .container a:hover{ color: var(--secondary-color); }
.home-icon-list .container a i{ font-size: 2.5rem; }
.home-icon-list .container a span{ font-weight: 300; }

/* home icon grid */
.home-icon-grid{}
.home-icon-grid .container { display: flex; gap: 20px; flex-wrap: wrap; }
.home-icon-grid .container a { width: calc((100% - 120px) / 7); height: 150px; gap: 10px; display: flex; flex-direction: column; align-items: center; background: #ccc; border-radius: 20px; color: var(--main-color); padding: 35px 20px 20px; }
.home-icon-grid .container a i { font-size: 1.5rem; }
.home-icon-grid .container a span { text-align: center; }
.home-icon-grid .container a:hover { background: var(--alternative-color); color: #fff; }

/**/
.nav-custom{}
.nav-custom .nav-item{}
.nav-custom .nav-item button{ border: 0; background: transparent; }
.nav-custom .nav-item .nav-link{ position: relative; border-bottom: 1px solid #ccc; color: #9D9D9C; font-weight: 500; font-size: 1.125rem; padding: 10px 50px; }
.nav-custom .nav-item .nav-link.active{ border-color: var(--secondary-color); color: var(--secondary-color); }
.nav-custom .nav-item .nav-link.active:before, .nav-custom .nav-item .nav-link.active:after{ width:0; height: 0; border-style: solid; content: ''; position: absolute; bottom: 0;  transform: rotate(90deg); left: 50%;  }
.nav-custom .nav-item .nav-link.active:before{ margin-bottom: -22px; margin-left: -11px; border-width: 11px; border-color: transparent transparent transparent var(--secondary-color); }
.nav-custom .nav-item .nav-link.active:after{ margin-bottom: -20px; margin-left: -10px; border-width: 10px; border-color: transparent transparent transparent #fff;  }

/**/
.announcement-list{}
.announcement-list a{ display: block; border-bottom: 1px dashed #bbb; padding: 15px 0; color: #333; font-weight: 300; }
.announcement-list a:hover{ color: var(--secondary-color); border-bottom-color: var(--secondary-color); }

.nav-about-text{ font-weight: 300; line-height: 1.8; }

/**/
.isubu{}
.isubu .isubu-header{ color: #fff; display: flex; justify-content: space-between; margin-bottom: 40px; }
.isubu .isubu-header .nav-custom .nav-item .nav-link{ color: #fff; border-color: #6F97C6; }
.isubu .isubu-header .nav-custom .nav-item .nav-link.active{  border-color: #fff; }
.isubu .isubu-header .nav-custom .nav-item .nav-link.active:before{ border-color: transparent transparent transparent #fff; }
.isubu .isubu-header .nav-custom .nav-item .nav-link.active:after{ border-color: transparent transparent transparent var(--alternative-color); }

.isubu .more{ border: 1px solid #fff; border-radius: var(--border-radius); color: #fff; padding: 10px; display: inline-block; }
.isubu .more:hover{ background: #fff; color: var(--main-color); }

/* isubu news */
.isubu-news{}
.isubu-news .item{ margin-bottom: 15px; }
.isubu-news .item a{ display: block; color: #fff; }
.isubu-news .item a img{ height: 200px; object-fit: cover; object-position: top; width: 100%; border-radius: var(--border-radius); }
.isubu-news .item a .info{ padding: 15px; border-radius: var(--border-radius); margin-top: 5px; }
.isubu-news .item a .info strong{ display: block; font-weight: 500; margin-bottom: 10px; height: 50px; overflow: hidden; text-overflow: ellipsis; }
.isubu-news .item a .info span{ display: block; color: #B3B7BD; text-transform: uppercase; font-weight: 300; font-size: .825rem; letter-spacing: 3px; }
.isubu-news .item a:hover .info{ background: rgba(0,0,0,.2); }

/* isubu announcements */
.isubu-announcements{}
.isubu-announcements .item{ margin-bottom: 15px; }
.isubu-announcements .item a{ display: block; color: #fff; }
.isubu-announcements .item a .info{ padding: 15px; border-radius: var(--border-radius); margin-top: 5px; }
.isubu-announcements .item a .info strong{ display: block; font-weight: 500; margin-bottom: 10px; height: 75px; overflow: hidden; text-overflow: ellipsis; }
.isubu-announcements .item a .info span{ display: block; color: #B3B7BD; text-transform: uppercase; font-weight: 300; font-size: .825rem; letter-spacing: 3px; }
.isubu-announcements .item a:hover .info{ background: rgba(0,0,0,.2); }

/**/
.page-header{ padding: 20px 0; background: #efefef; margin-bottom: 30px;}
.page-header h1{ color: var(--main-color); font-size: 1.7rem; margin: 0; font-weight: 500; }

/* announcement */
#announcement{ margin-bottom: 50px; }
#announcement .announcement-header{ display: flex; gap: 30px; margin-bottom: 30px; color: #868686; font-weight: 500;; }
#announcement .announcement-header .item{ display: flex; gap: 10px; align-items: center; }
#announcement .announcement-header .item i{ font-size: 1.125rem; }
#announcement .content { font-size: 1.25rem; }

/* content */
#content{ margin-bottom: 50px; }
#content .content { font-size: 1.125rem; line-height: 1.7; }

/* search */
#search{ margin-bottom: 50px; }
#search .results{}
#search .results .subtitle{ color: var(--secondary-color); font-size: 1.25rem; margin-bottom: 20px; }
#search .results ul{ list-style: none; margin: 0 0 0 50px; padding: 0; margin-bottom: 30px; }
#search .results ul li{ position: relative; padding: 3px 10px 3px 15px; color: #666; font-weight: 500; }
#search .results ul li:before{ content: '\f105'; font-family: "Font Awesome 6 Pro"; position: absolute; left: 0; top: 3px; }
#search .results ul li a{ color: #000; }
#search .results ul li a:hover{ color: var(--secondary-color); }

/* content */
#content{ margin-bottom: 50px;}
#content .content { font-size: 1.125rem; line-height: 1.7; }

/* contact */
#contact{ margin-bottom: 100px; }
#contact .contact-info{ list-style: none; margin: 0; padding: 0;}
#contact .contact-info li{ display: flex; margin-bottom: 20px; font-weight: 500; font-size: 1.125rem; gap: 10px; }
#contact .contact-info li i{ flex: 0 0 30px; font-size: 1.5rem; }
#contact .contact-info li span{ flex: 0 0 calc(100% - 40px); flex-wrap: wrap; }

#contact .contact-form{}
#contact .contact-form .form-control{ border-radius: 0;  border: 0; background: #eee; font-weight: 500; font-size: 1.125rem; padding: 15px 20px; }
#contact .contact-form .btn{ background: var(--main-color); border-radius: 0; color: #fff; padding: 15px 20px;}

/* gallery */
#gallery{ margin-bottom: 50px;} 
#gallery .gallery-item{ margin-bottom: 25px;}
#gallery .gallery-item a{ display: block; position: relative; }
#gallery .gallery-item a:before{ visibility: hidden; position: absolute; z-index: 11; background: rgba(0,0,0,.5); content: ''; left: 0; right: 0; top: 0; bottom: 0; }
#gallery .gallery-item a:after{ visibility: hidden; position: absolute; z-index: 12; color: #fff; font-size: 2rem; content: '\f002'; font-family: "Font Awesome 6 Pro"; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; }
#gallery .gallery-item a:hover:before, #gallery .gallery-item a:hover:after{ visibility: visible; }

/* academic */
#academic{}
#academic .department{ background: #eee; padding: 15px; color: var(--main-color); margin: 0; font-size: 1.25rem; text-align: center; margin-bottom: 25px; }
#academic .items{}
#academic .items .item{ margin-bottom: 25px; }
#academic .items .item a{ display: block; border-bottom: 1px solid #eee; padding-bottom: 20px; }
#academic .items .item img{ margin-bottom: 20px; }
#academic .items .item strong{ display: block; text-align: center; font-weight: 500; color: var(--main-color); font-size: 1.3rem; }
#academic .items .item span{ display: block; text-align: center; font-weight: 500; color: #777; font-size: 1rem; }

/**/
footer{ background: #EBF4FC; }
footer .footer{ padding: 40px 0; }
    footer .footer-bottom {
        background: var(--alternative-color);
        padding: 15px 0;
        color: #fff;
        text-align: center;
        font-size: 0.8rem;
    }

footer .badges{ display: flex; gap: 5px; margin-bottom: 20px; }
footer .badges a{ display: block; }
footer .badges a img{ height: 32px; }

footer .responsive{ display: flex; gap: 10px; color: #8594A3; font-weight: 300; font-size: .925rem; align-items: flex-end; line-height: 1.2; }
footer .responsive i{ font-size: 2.5rem; }

footer .socials{ display: flex; gap: 0; justify-content: flex-end; margin-bottom: 10px;  }
footer .socials a{ color: #84B1D3; font-size: 1.25rem; display: block; width: 40px; padding: 5px 0; text-align: center; border-radius: 5px; }
footer .socials a:hover{ background: #84B1D3; color: #fff; }

footer .contact-list{ list-style: none; margin: 0; padding: 0; font-weight: 300; font-size: .925rem; color: #8594A3; }
footer .contact-list li{ margin-bottom: 5px; }

footer .footer-logo{ width: 180px; }

/* responsive */
@media (min-width: 1200px) and (max-width: 1319px){

    /**/
    #slider .item strong{ margin-left: -570px; width: 700px; }
    #slider .owl-dots{ margin-left: -570px; }

    /**/
    .isubu-news .item a img{ height: 170px; }

    /**/
    footer .badges a img{ height: 28px; }
    footer .footer-logo{ width: 150px; }
}

@media (min-width: 992px) and (max-width: 1199px){

    header .header .logo .logo-text{ font-size: 1.25rem;}

    /**/
    #slider .item strong{ margin-left: -480px; width: 600px; }
    #slider .owl-dots{ margin-left: -480px; }

    /**/
    .home-icon-grid .container a{ width: calc((100% - 120px) / 6); }

    /**/
    .isubu-news .item a img{ height: 120px; }

    /**/
    footer .badges a img{ height: 23px; }
    footer .footer-logo{ width: 120px; }
}

@media (min-width: 768px) and (max-width: 991px){

    
    header .header .logo .logo-text{ font-size: 1rem;}
    header .header .logo img{ width: 40px; }

    header .header .search .input-group{ height: 40px; }
    header .header .search .input-group button{ font-size: 1rem; }
    .navbar-nav .nav-item .nav-link{ padding: 10px; }
    header .menu .container{ justify-content: center; }

    /**/
    #slider{ margin-top: 0; }
   /* #slider .item img{ height: 450px; }*/
    #slider .item strong{ margin-left: -360px; width: 400px; font-size: 2.5rem; top: 30%; }
    #slider .owl-dots{ margin-left: -360px; }

    .home-icon-list .container a{ margin-bottom: 20px; }
    .home-icon-list .container a i{ font-size: 2em; }
    .home-icon-list .container a span{ font-size: .825rem; }

    /**/
    .home-icon-grid .container a{ width: calc((100% - 80px) / 5); font-size: .825rem; height: 120px; padding: 25px 15px 15px; }
    .home-icon-grid .container a i{ font-size: 1.5rem;}

    /**/
    .nav-custom .nav-item .nav-link{ padding: 10px 20px; font-size: 1rem; }

    .isubu .isubu-header{}
    .isubu .isubu-header .header-title{ font-size: 1.5rem;}

    /**/
    .isubu-news .item a img{ height: 160px; }

    .page-header h1{ font-size: 1rem;}

    /**/
    #content .content{ font-size: .925rem;}

    /**/
    #contact{ margin-bottom: 20px; }
    #contact .contact-form .form-control{ padding: 10px 15px; font-size: 1rem; font-weight: 400; }
    #contact .contact-info li{ font-size: .925rem; font-weight: 400; }

    /**/
    #search{}
    #search .results .subtitle{ font-size: 1rem; }
    #search .results ul{ margin: 0 0 20px 20px; }
    #search .results ul li{ font-weight: 400; font-size: .925rem; }

    /**/
    footer .badges a img{ height: 25px; }
    footer .footer-logo{ width: 120px; }

    /**/
    #academic .items .item strong{ font-size: 1.25rem; }
    #academic .items .item span{ font-size: 1rem; }
}

@media (min-width: 576px) and (max-width: 768px) {
    
}

@media (max-width: 767px){

    body{ font-size: .825rem; }

    header .header{ height: 85px; }
    header .header .logo{ gap: 15px; width: 80%; }
    header .header .logo .logo-text{ font-size: .825rem;}
    header .header .logo img{ width: 30px; }
    header .header-top .links{ width: 100%; justify-content: space-between; }

    header .header .search{ display: none; }
    header .header .search .input-group{ height: 40px; }
    header .header .search .input-group button{ font-size: 1rem; }
    .navbar-nav .nav-item .nav-link{ padding: 10px; }
    header .menu .container{ justify-content: center; }

    /**/
    #slider{ margin-top: 0;}
    #slider .item img{  }
    #slider .item strong{ margin-left: 10px; margin-right: 10px; width: auto; font-size: 1.5rem; top: 40%; left: 0; right: 0; }
    #slider .owl-dots{ margin-left: 10px; width: 100%; left: 0; right: 0; }

    .home-icon-list .container a{ }
    .home-icon-list .container a i{ font-size: 2em; }
    .home-icon-list .container a span{ font-size: .825rem; }

    /**/
    .home-icon-grid .container a{ width: calc((100% - 40px) / 3); font-size: .825rem; height: 120px; padding: 25px 15px 15px; }
    .home-icon-grid .container a i{ font-size: 1.5rem;}

    /**/
    .nav-custom .nav-item .nav-link{ padding: 10px 20px; font-size: 1rem; }

    .isubu .isubu-header{ flex-direction: column; justify-content: center; align-items: center; }
    .isubu .isubu-header .header-title{ font-size: 1.5rem;}

    /**/
    .isubu-news .item a img{ height: 120px; }
    .isubu-news .item a .info{ padding: 5px;}
    .isubu-news .item a .info strong{ height: 60px; }
    .isubu-news .item a .info span{ font-size: .725rem; }

    .isubu-announcements .item a .info strong{ height: 60px;}

    /**/
    footer .badges a img{ height: 30px; }
    footer .badges{ justify-content: center; }
    footer .responsive{ text-align: center; justify-content: center; align-items: center; margin-bottom: 20px; }

    footer .footer-logo{ width: 120px; }
    footer .footer-left{ margin-bottom: 20px; text-align: center; }
    footer .footer-contact{ margin-top: 20px; text-align: center !important; }
    footer .footer-contact .socials{ justify-content: center; }

    .page-header h1{ font-size: 1.125rem;}

    /**/
    #content .content{ font-size: .875rem;}

    /**/
    #contact .contact-info li{ font-size: .925rem; font-weight: 400; }

    /**/
    #search{}
    #search .results .subtitle{ font-size: .925rem; }
    #search .results ul{ margin: 0 0 20px 20px; }

    /**/
    #contact{ margin-bottom: 20px; }
    #contact .contact-form .form-control{ padding: 10px 15px; font-size: 1rem; font-weight: 400; }

    /**/
    #academic .department{ font-size: 1rem; margin-bottom: 20px; }
    #academic .items .item strong{ font-size: 1rem; }
    #academic .items .item span{ font-size: .725rem; }

    /**/
    #announcement .content{ font-size: 1rem; line-height: 1.7;}
}


/* Dišer */