/*!
Theme Name: ASOO
Theme URI: http://underscores.me/
Author: active.hr
Author URI: http://active.hr
Description: Agencija za strukovno obrazovanje  i obrazovanje odraslih
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: asoo
Tags:  

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

ASOO is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 

body.normal  {margin: 0 auto; max-width:1920px; overflow-x: hidden;    font-family: "Poppins", Arial; font-size: 14px; font-weight: normal;  color: #3E4551; background:#fff;   }
body.bigger   {margin: 0 auto; max-width:1920px; overflow-x: hidden;    font-family: "Poppins", Arial; font-size: 18px; font-weight: normal;  color: #3E4551; background:#fff;   }

/* DEFAULT POSTAVKE*/
.container-fluid {margin:0; padding:0;}
.nom { margin:0 !important; padding:0 !important;}
.red-text {color:#BE323A !important}
a {color: #3E4551;}
a:hover {color:#BE323A}
.rgba-black-strong { background: rgba(0,0,0,.6);}
strong {font-weight: bold;}
.social-share {font-size:24px;}
.card-body.nom-bottom {padding-bottom:0 !important;}
.pagination a {color: #3E4551 !important; padding:5px 10px; margin:0 10px; font-size:16px !important; margin-top:20px;}
.pagination li.active a {color:#fff !important; background:#BE323A !important;}
.overlayBox {position:absolute; left:0; right:0; bottom:0; top:0; background-color: aqua;}
.sub-item a {color:#3E4551 !important} 
.sub-item a:hover {color:#BE323A !important }
a.nav-link {  padding:20px 30px; border-radius:0; width:100%; }
a.nav-link.active {color:#3E4551 !important; padding:20px 30px; border-radius:0; background-color: #F5F5F5 !important;}
a.nav-link h6 {margin:0; padding:0;}
div.link-ico a {display: inline-block; padding-left: 15px}
div.link-ico a > i { display: inline-block; margin-left: -15px; margin-right: 8px; }
.mobile-open {display:none;}
#documents-mobile {display:none;}
.mobile-logo {display:none;}

.modal {z-index:3000 !important;}

.videoContainer { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.videoContainer iframe, .videoContainer object, .videoContainer embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.videoContainer43 { position: relative; padding-bottom:75%; padding-top: 30px; height: 0; overflow: hidden; }

.videoContainer43 iframe, .videoContainer43 object, .videoContainer43 embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.featured-img {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
     
     
    
}


a.skip-main {
    left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
    color: #fff;
    background-color:#3E4551;
    left: auto;
    top: auto;
    width: 30%;
    height: auto;
    overflow:auto;
    margin: 10px 35%;
    padding:5px;
    border-radius: 0px;
    border:1px solid #ddd
    text-align:center;
    font-size:1.2em;
    z-index:999;
}

 

.carousel-control-prev {left: 0; margin-left: 0; filter: none; opacity: 1; }
.carousel-control-prev:hover, .carousel-control-next:hover {filter: none; opacity: 1;}
.carousel-control-prev i {background: #fff; color:#BE323A; padding:8px 15px; left: 0 !important; margin-left: 0;}
.carousel-control-prev:hover i {background: #fff; color:#000; padding:8px 15px}

.carousel-control-next {margin-right:0; right:0; filter: none; opacity: 1;  }
.carousel-control-next i {background: #fff; color:#BE323A; padding:8px 15px; margin-right:0; right:0 !important;}
.carousel-control-next:hover i {background: #fff; color:#000; padding:8px 15px}

ul.menuTop form { display:inline;}
ul.menuTop li button { border:none; background: none; color:#BE323A;}
ul.menuTop li button:hover { border:none; background: none; color:#3E4551;}

ul.menuTop li.search-wrap {display:inline-block !important; padding:5px !important; width:300px;}
ul.menuTop li.search-wrap button {margin:0; padding:0; border:0; background: none; position:absolute; margin-left:-25px; margin-top:5px;}
 

 #search button {margin:0; padding:0; border:0; background: none; position:absolute; margin-left:0px; margin-top:0px;} {}

 #mobile-search {display:none;}

#page-main-content a {color:#BE323A}
#page-main-content a:hover {color:#98282E}

#page-main-content img {max-width: 100% !important; height:auto !important;}

#page-main-content a[href$=".pdf"]:before {
    font-family: "Font Awesome 5 Free";
   content: "\f1c1";
   display: inline-block;
   padding:0px  3px;
   vertical-align: middle;
    font-size:90%;
}

#page-main-content a[href$=".doc"]:before, #page-main-content a[href$=".docx"]:before {
    font-family: "Font Awesome 5 Free";
    content: "\f1c2";
    display: inline-block;
    padding:0px  3px;
    vertical-align: middle;
     font-size:90%;
}
 
#page-main-content a[href$=".xls"]:before, #page-main-content a[href$=".xlsx"]:before {
    font-family: "Font Awesome 5 Free";
    content: "\f1c3";
    display: inline-block;
    padding:0px  3px;
    vertical-align: middle;
     font-size:90%;
}
#page-main-content a[href$=".ppt"]:before, #page-main-content a[href$=".pptx"]:before  {
    font-family: "Font Awesome 5 Free";
    content: "\f1c4";
    display: inline-block;
    padding:0px  3px;
    vertical-align: middle;
     font-size:90%;
}

/*MAIN LAYOUTS*/
.body-wrap {position: relative; max-width: 1920px!important; margin: 0 auto;}
.left-wrap {position: absolute; left: 0; top: 0; width:80px;}
#left-sidebar-wrap { position: fixed; left:0; top:0; bottom:0;   z-index:800; width: 80px; height:80px; right: auto!important; left: auto!important; }
#header-wrap { position: fixed; top:0; left:80px; right:80px; height:80px; z-index:800; max-width: 1761px!important; margin: 0 auto;     }
#content-wrap { position:relative; margin-left:80px; margin-top:80px; margin-right:80px;   z-index:500}
 
 
/*HEADER_CONTAINER*/
#header-container {position:relative;  }

  #mobile-menu {display:none;}

  #header-container img#logo-wrap {width:120px !important;}
 
#header-container ul.menuTop { margin:0; padding:0; border-bottom:1px solid #eaeaea;   }
    #header-container ul.menuTop li { margin:0; padding:0; display:inline ; position:relative}
        #header-container ul.menuTop li a { color:#BE323A; padding:5px 15px;  display:inline-block;  }
        #header-container ul.menuTop li a:hover {color:#3E4551;    }
        #header-container ul.menuTop li.divider a {color:#3E4551;  }
        #header-container ul.menuTop li input {width:280px; border-radius:0; display:inline}
         

#header-container ul.menuBottom { margin:0; padding:0;  }
    #header-container ul.menuBottom li { margin:0; padding:0; display: inline; }
        #header-container ul.menuBottom li a { padding:8px 15px 9px 15px; color: #3E4551; display:inline-block; font-size:14px; text-transform: uppercase; font-weight:bold;}
        #header-container ul.menuBottom li a:hover ,  #header-container ul.menuBottom li:hover a, #header-container ul.menuBottom li a.active{ color:#BE323A; background: #EEEEEE;}
        #header-container ul.menuBottom li ul { border-bottom:1px solid #ddd; display:none; margin:0;  padding:0;   position:fixed; left:80px; right:80px;  -webkit-transform: translateZ(0);     background: #EEEEEE; text-align: left !important; z-index:1000}
        #header-container ul.menuBottom li:hover ul, #header-container ul.menuBottom li:focus-within ul,  #header-container ul.menuBottom li a:focus + ul {display: grid; grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );} 

        

        #header-container ul.menuBottom li:hover ul li a i, #header-container ul.menuBottom li:focus-within ul li a i ,  #header-container ul.menuBottom li a:focus + ul li a i{display:none}

        #header-container ul.menuBottom li:hover ul li, #header-container ul.menuBottom li:focus-within ul li, #header-container ul.menuBottom li a:focus + ul li { display:inline-block; margin:0; padding:30px 40px;    float:left;  background: #EEEEEE; } 

        #header-container ul.menuBottom li.no-third-level:hover ul li,#header-container ul.menuBottom li.no-third-level:focus-within ul li, #header-container ul.menuBottom li.no-third-level  a:focus + ul li {padding:0 !important; border-right:1px solid #ddd; display: table   } 
        #header-container ul.menuBottom li.no-third-level:hover ul li a ,  #header-container ul.menuBottom li.no-third-level:focus-within ul li a , #header-container ul.menuBottom li.no-third-level  a:focus + ul li  a  {text-align:center; vertical-align: middle; display: table-cell;    font-size:15px; font-weight:normal !important;     border-bottom: none !important; text-transform: none !important; padding:20px;   }
        
        #header-container ul.menuBottom li:hover ul li a, #header-container ul.menuBottom li:focus-within ul li a, #header-container ul.menuBottom li a:focus + ul li a  {padding:10px 0px; border-bottom:1px solid #ddd; color: #3E4551; display: block; font-size:15px; text-transform: uppercase; font-weight:bold;}

        #header-container ul.menuBottom li:hover ul li a:hover, #header-container ul.menuBottom li:focus-within  ul li a:focus-within , #header-container ul.menuBottom li a:focus + ul li a:hover {color:#BE323A;}
        #header-container ul.menuBottom li:hover ul li ul, #header-container ul.menuBottom li:focus-within ul li ul, #header-container ul.menuBottom li a:focus + ul li ul  {margin:0 !important; padding:0; position:relative; left:0; display: block; background:#eeeeee;}
        #header-container ul.menuBottom li:hover ul li ul li, #header-container ul.menuBottom li:focus-within ul li ul li, #header-container ul.menuBottom li a:focus + ul li ul li {display:block; margin:0; padding:0; width:100%;  } 
        #header-container ul.menuBottom li:hover ul li ul li a,  #header-container ul.menuBottom li:focus-within ul li ul li a, #header-container ul.menuBottom li a:focus + ul li ul li a {border:none; font-weight:normal; text-transform: none !important; font-size:14px;}
        #header-container ul.menuBottom li:hover ul li ul li a:hover,  #header-container ul.menuBottom li:focus-within ul li ul li a:focus-within, #header-container ul.menuBottom li a:focus + ul li ul li a:hover {color:#BE323A;}

        

#kategorije-stranica-menu ul {display:block; margin:0; padding:0;}
#kategorije-stranica-menu ul li {display:inline-block; float:left; margin:0; padding:0; width:20%; text-align: center; }
#kategorije-stranica-menu ul li a {display:block; width:100%; padding:40px 20px; font-size:16px; border-right:1px solid #ddd; min-height:135px;    }

#slider-container {position:relative; z-index:500}
    #slider-container .view { }
    #slider-container .view .mask  div { position:absolute; bottom:0; left:0; padding:30px; display:block}
    #slider-container .view .mask.large-mask   div { position:absolute; bottom:0; left:0; padding:30px 80px; display:block}
    
    
    #slider-container .view .mask  div h3, #slider-container .view .mask  div h5, #slider-container .view .mask  div h6 {padding:10px 0px}

#about-container .row:first-child {padding-top:40px;}
#about-container .row:last-child {padding-bottom:40px;}
    #about-container .col-md-6.parent  {padding:0px 40px}

 

#about2-container {}
    #about2-container .mask {padding:80px;}
    #about2-container .mask a {color:#fff;}
    #about2-container .mask a:hover  {color:#BE323A;}
	
	
#novosti-list > div { border-right:1px solid #ddd; }
#novosti-list > div:nth-child(3n) { border-right:none; }

ul#accordion li, ul#accordion    { list-style:none; margin:0; padding:10px;  }

ul#sitemap {margin:0; padding:0;}
ul#sitemap li  {margin:0; padding:5px 0px;  }
ul#sitemap li  a { font-weight:bold; color:#BE323A; font-size:16px; margin-top:10px;}
ul#sitemap li ul li  a { font-weight:bold; color:#222; font-size:14px;}
ul#sitemap li ul li ul li  a {font-weight:normal; color:#222; font-size:14px;}

 

/*
#footer-container { background: #BE323A;}

#footer-container a { display: block; font-size:14px;    padding:20px 10px 19px 10px; color:#fff;   }
    #footer-container a:hover {background:#3E4551}
*/

#footer-container { background: #4B515D; }
    #footer-container ul { padding: 0; margin: 0; list-style: none; }
    #footer-container ul li { list-style: none; margin: 0; padding:0; float:left  }
    #footer-container ul li.fa-pull-right {float:right; }
    #footer-container ul li.fa-pull-right a {color:#fff;  padding:19px 25px 19px 25px; border-right:0; border-left:1px solid #3E4551; display:inline-block}
    #footer-container ul li a { color:#fff;  padding:19px 25px 19px 25px; border-right:1px solid #3E4551; display:inline-block}
    #footer-container ul li a:hover { background: #BE323A;}
 
     
#copy-container {color:#d8d9dc}
    #copy-container a {color:#d8d9dc}
    #copy-container a:hover {color:#fff}

    #copy-container ul {margin:0; padding:0;}
    #copy-container ul li  {margin:0; padding:0; display:block; padding-bottom:10px;}
    #copy-container .widget-card ul li a:before {font-family: "Font Awesome 5 Free"; position:absolute; content: "\f105"; display: inline-block; margin-left:-15px;   font-weight: 900;color:#BE323A;}
    #copy-container ul li a {padding-left:15px; display: block;}
    @media (min-width:1925px)   {
        #header-container ul.menuBottom li ul {  display:none; margin:0;  padding:0;  position:fixed; left:0; right:0;   max-width:1761px!important; margin: 0 auto;    background: #ECEFF1; text-align: left !important; z-index:1000}
    }

@media (min-width:1440px) and (max-width:1690px) {
    #header-container ul.menuBottom li a {padding:8px 15px 9px 15px;  color: #3E4551; display:inline-block; font-size:14px; text-transform: uppercase; font-weight:bold;}
    #header-wrap { position: fixed; top:0; left:80px; right:0px; height:80px; z-index:1000; max-width: 1742px!important; margin: 0 auto;     }
    #header-container ul.menuBottom li ul {  display:none; margin:0;  padding:0;   position:fixed; left:80px; right:0px;  -webkit-transform: translateZ(0);     background: #ECEFF1; text-align: left !important; z-index:1000}
    #header-container img#logo-wrap {width:120px !important;}
    #mobile-menu {display:none;}
    #content-wrap { position:relative; margin-left:80px; margin-top:80px; margin-right:0px;   z-index:500}
    #slider-container .view .mask  div { position:absolute; bottom:0; left:0; padding:20px; display:block}
    #kategorije-stranica-menu ul {display:block; margin:0; padding:0;}
    #kategorije-stranica-menu ul li {display:inline-block; float:left; margin:0; padding:0; width:20%; text-align: center; }
    #kategorije-stranica-menu ul li a {display:block; width:100%; padding:40px 10px; font-size:16px; border-right:1px solid #ddd; min-height:135px;    }
    #kategorije-stranica-menu h5 {font-size:16px;}

   
}


@media (min-width:1280px) and (max-width:1440px) {
    #header-container ul.menuBottom li ul {  display:none; margin:0;  padding:0;   position:fixed; left:80px; right:0px;  -webkit-transform: translateZ(0);     background: #ECEFF1; text-align: left !important; z-index:1000}
    #header-container ul.menuBottom li a {padding:8px 15px 9px 15px; color: #3E4551; display:inline-block; font-size:14px; text-transform: uppercase; font-weight:bold;}
    #header-container img#logo-wrap {width:120px !important;}
    #content-wrap { position:relative; margin-left:80px; margin-top:80px; margin-right:0px;   z-index:500}  
    #header-wrap { position: fixed; top:0; left:80px; right:0; height:80px; z-index:1000 }
    #header-container ul.menuTop li input {width:200px; border-radius:0; display:inline}
    #header-container ul.menuTop li i.fa-search {position:absolute; margin-left:-25px; margin-top:-2px;}
    #about2-container .mask {padding:40px;}
    a.nav-link {font-size:12px !important;}
    #mobile-menu {display:none;}
    #footer-container ul li a { color:#fff;  padding:18px 15px 19px 15px; border-right:1px solid #3E4551; display:inline-block}
    #kategorije-stranica-menu ul {display:block; margin:0; padding:0;}
    #kategorije-stranica-menu ul li {display:inline-block; float:left; margin:0; padding:0; width:20%; text-align: center; }
    #kategorije-stranica-menu ul li a {display:block; width:100%; padding:40px 5px; font-size:14px; border-right:1px solid #ddd; min-height:135px;    }
    #kategorije-stranica-menu h5 {font-size:14px;}
     
    
}

@media (max-width:1280px) {
    
    
    /*MAIN LAYOUTS*/
    #left-sidebar-wrap { position: fixed; left:0; top:0; bottom:0; width:80px; height: 80px;  z-index:1500 }
    #header-wrap { position: fixed; top:0; left:0px; right:0; height:80px; z-index:1000 }
         
    #content-wrap { position:relative; margin-left:0px; margin-top:80px; margin-right:0px;   z-index:500} 
    /*HEADER*/
    .mobile-open {display:block; width:50%; height:80px; padding:25px 20px; position:absolute; z-index:2000; right:0; text-align:right !important; font-size:18px;}
    .mobile-logo {display:block; position:relative; top:10px; left:100px; font-weight:bold; font-size:18px; color:#BE323A; width:150px; height:80px;}
    a#close-menu {display:none;}
    #header-container img#logo-wrap {width:150px !important;}
      #header-wrap {border-right:0 !important;}
    #header-container #main-menu {  text-align: left !important;   display:none; background: #FAFAFA;  }

    #header-container #mobile-menu {display:none; background: #f9f9f9; text-align: right !important;}

    #header-container ul.mobileTop { margin:0; padding:0;  text-align:left !important }
    #header-container ul.mobileTop li { margin:0; padding:0; display:inline-block ; position:relative}

    #header-container ul.mobileTop li button {color:#BE323A; border:none; background: none;}
    #header-container ul.mobileTop li button:hover {color:#3E4551; border:none; background: none;}
     
        #header-container ul.mobileTop li a { color:#BE323A; margin-top:10px; padding:10px 10px;  display:inline-block;  }
        #header-container ul.mobileTop li a:hover {color:#3E4551;    }
        #header-container  #search {padding:10px; position:relative;}
        #header-container  #search  input {width:100%; border-radius:0; display:block;  }
        #header-container  #search  i.fa-search {position:absolute; margin-left:-25px; margin-top:-22px;}

#header-container ul.mobileBottom { margin:0; padding:0; display:block; width:100%; }
    #header-container ul.mobileBottom li { margin:0; padding:0; display: block; width:100%; text-align:left !important ; position:relative;}
     
        #header-container ul.mobileBottom li a { padding:8px 15px 9px 15px;  border-bottom:1px solid #ddd ; color: #3E4551; display: block; font-size:14px; text-transform: uppercase; font-weight:bold;}
        #header-container ul.mobileBottom li a:hover, #header-container ul.mobileBottom li:hover a {color:#BE323A}
        #header-container ul.mobileBottom li a i {position:absolute; right:0px; top:0; padding:11px 20px 12px 20px; background:#e0e0e0;}
        #header-container ul.mobileBottom ul ul {display:none;}

        #header-container ul.mobileBottom ul li a i {display:none;}

        #header-container ul.mobileBottom ul {display:none; position:relative; left:0; margin:0; padding:0; background:#e0e0e0}
        #header-container ul.mobileBottom ul li a {text-transform: none;  border-bottom:1px solid #bdbdbd  ; font-weight:normal; padding:10px 40px; color:#3E4551 !important}
        #header-container ul.mobileBottom ul li a:hover {color: #BE323A !important;}
        #header-container ul.mobileBottom ul li:first-child {display:block;}
         
     
        #kategorije-stranica-menu ul {display:block; margin:0; padding:0;}
        #kategorije-stranica-menu ul li {display: block; float:left; margin:0; padding:0; width:100%; text-align: center; }
        #kategorije-stranica-menu ul li a {display:block; width:100%; padding:40px 5px; font-size:16px; border-right:0; border-bottom:1px solid #ddd; min-height:auto;    }
        #kategorije-stranica-menu h5 {font-size:18px;}     
        
    

     

     
    #about-container {padding:30px 0px}
    #about-container .col-md-6.parent  {padding:0px 30px}
    #about2-container .mask {padding:40px;}

    #footer-container ul li a { color:#fff;  padding:18px 15px 19px 15px; border-right:1px solid #3E4551; display:inline-block}


    .slide-hide-on-mobile { display: none !important; }
    .carousel-control-prev { display: none !important; }
    .carousel-control-next { display: none !important; }

/* DATA TABLES custom css*/
.dataTables_info{padding:0px 10px !important;}

     

}

@media (max-width:992px) {
	#novosti-list > div { border-right:1px solid #ddd; }
	#novosti-list > div:nth-child(3n) { border-right:1px solid #ddd; }
    #novosti-list > div:nth-child(2n) { border-right:none; }
    #footer-container ul li:first-child {display:none;}
    #footer-container ul li {display:block; width:100%}
    #footer-container ul li a { color:#fff;  padding:15px; display:block; width:100%; border-bottom:1px solid #3E4551; border-right:0; display:inline-block}
    #footer-container ul li.fa-pull-right  {   display:inline-block; width:33.333333%;  text-align:center;  border-right:1px solid #3E4551;}

    #mobile-search {display:block;}
    #desktop-search {display:none;}
    
}


@media (max-width:768px) {
	/*OPEN MENU*/    
    .featured-img {
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
        height:200px;
        
    }

    #slider-container .border-right, #slider-container .border-bottom  {border-right:none !important; border-bottom:1px solid #ddd !important;  }
    #slider-container h3 {font-size:24px;}
 

     
    #about-container h3 {font-size:20px;}
    #about2-container .mask {padding:40px;}

    a.nav-link span {/*display:none;*/ font-size: 12px!important;}
    a.nav-link { display:inline-block; width:24.9%; text-align:center; border-radius:0}
    a.nav-link i.fa-angle-right {display:none;}
	

    #footer-container ul li:first-child {display:none;}
    #footer-container ul li {display:block; width:100%}
    #footer-container ul li a { color:#fff;  padding:15px; display:block; width:100%; border-bottom:1px solid #3E4551; border-right:0; display:inline-block}
    #footer-container ul li.fa-pull-right  {   display:inline-block; width:33.333333%;  text-align:center;  border-right:1px solid #3E4551;}

    #social-share  {display:none;}
    #title-container h1 {font-size:32px;}
    #title-container .breadcrumb {font-size:12px;}
    #documents-desktop {display:none}
    #documents-mobile {display:block;} 

    #center-content {border:none !important}
    #center-content .card-body, #title-container .card-body {padding:10px; }
     
    
}