@charset "utf-8";

.padding_BT {padding-bottom:25px; padding-top:25px;} .padding_LR {padding-left:5%; padding-right:5%;} .padding_LR_4_percent { padding-left:4%; padding-right:4%; } .padding_LR_1 {padding-left:1em; padding-right:1em;} .color_z {color:#eab01a;} .color_s {color:#666666;} .color_c {color:#000;} .color_i {color:#F00;}

.border_TS {border-top:1px solid #e8e8e8;} .border_TZ {border-top:1px solid #eab01a;} .border_BZ {border-bottom:1px solid #eab01a;}  .border_BS { border-bottom:1px solid #e8e8e8;} .border_LS {border-left:1px solid #e8e8e8;}

.big_wrap {width:100%; margin:0; float:left; display:block;}

.wrap_content {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row; flex-wrap: wrap; justify-content:center; align-items:flex-start; align-content:flex-start; margin:0 auto;}

.grid_biger, .grid_lok {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row; width:100%;}
.ikone { text-align:center}

.grid_biger_2 {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%; float:left; -webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;  }

.grid_smaler, .grid_smaler_2{-webkit-box-flex:0 0 284px ;-ms-flex: 0 0 284px ;flex:0 0 284px ; width:100%;float:left; height:auto;}

.column_order, .column_order_small, .column_order_news {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column; flex-wrap: wrap; justify-content:center; align-items:flex-start; align-content:flex-start; margin:0 auto;}

.kropsystem-paleta-img {
    max-width: 80%;
}
/* Oluci */

.system-wrapper-flex {
    justify-items: center;
}

.gutter-systems {
    display: flex; 
    align-items: center; 
    align-content: center; 
    justify-content: space-around;
}
.tekst-pored-sistema {
    padding-top: 1.6%;
    padding-right: 2%;
}
@media screen and (max-width:600px) {
    .tekst-pored-sistema  {
    max-width: 60%;
    padding-left: 1%;
 }
}


.table-container {
    width: 95%;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.flex-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 0;
}

.flex-row:last-child {
    border-bottom: none;
}

.header-row {
    background-color: #ffffff;
    color: black;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 500;
}

.header-title {
    flex: 1;
    text-align: left;
    padding-left: 20px;
    font-size: 20px;
}

.header-img {
    flex: 1;
    text-align: right;
    max-width: 18%;
}

.product-img {
    flex: 1;
    text-align: center;
}

.product-desc {
    flex: 2;
    padding-left: 20px;
    text-align: left;
}

.product-price {
    flex: 1;
    text-align: center;
}

.product-img img, .header-img img {
    max-width: 80%;
    height: auto;
    border-radius: 4px;
}

.header-img img {

}

.flex-row:first-child:hover {

}

.flex-row:hover {
    background-color: #f1f1f1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.flex-row:first-child:hover {
    background-color: #ffffff; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 600px) {
    .product-img img, .header-img img {
        max-width: 100%;
    }

    .header-title, .product-desc, .product-price {
        font-size: 14px; /* Optionally reduce text size for better fit */
    }
}






@media screen and (max-width:1028px){.wrap_content {-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.grid_smaler_3 {order:1; -webkit-order:1; -ms-order:1; -moz-order:1;} .drugi {order:2; -webkit-order:2; -ms-order:2; -moz-order:2;}}

@media all and (max-width:1065px) {.grid_smaler_2 {order:2; -webkit-order:2; -ms-order:2; -moz-order:2;} }

@media all and (min-width:1065px) {.grid_smaler_2, .grid_smaler_3 {margin:2.5em 2em 0 0;} }

@media all and (min-width:1028px){.wrap_content { margin:0 auto;} .grid_smaler { margin-left:2em;} .grid_biger, .grid_biger_2 {max-width:718px;} .grid_lok { max-width:1030px;} .text_link_akcije { text-align:center;}.margin_BT5 {margin-bottom:10px;}  .wrap_text_p p.podnaslov_2 {margin-top:-50px;} .with_border { border-left:1px solid #e8e8e8;} .with_border_2 { border-left:1px solid #eab01a;} ul.page_ul:first-child {padding-top:1em;} .padding_L2 { width:100%; float:left;padding-left:2em;} }

@media all and (max-width:900px) and (min-width:620px) {.add_margin_in_mob {margin-top:2em;}}

.border_e8 {border:1px solid #e8e8e8;}

.border_ea {border:1px solid #eab01a;}

.vertical {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; width:40px; float:left; margin:0 7px 29px 0; border-right: 1px solid #e8e8e8; min-height: fit-content;}

@media screen and (min-width:1001px) {
    .vertical {
        min-height: 200px;
    }    
}


.stab, .stab_2, .stab_3, .stab_4 { display:inline-block; height:100%; width:40px;}

.stab p, .stab_2 p, .stab_3 p, .stab_4 p {font-size:0.8em; letter-spacing:1em; color:#5d5d61; white-space: nowrap;text-align: left; -webkit-transform-origin: 100% 100%; -webkit-transform: rotate(-90deg); transform-origin: 100% 100%; transform: rotate(-90deg);}

.wrap_two_items, .wrap_text_p {displey:block; width:100%;}

.wrap_item, .wrap_lok{ width:100%; float:left; webkit-box-flex: 1;-ms-flex:1;flex:1;  -webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column; flex-wrap: wrap; justify-content:left; align-items:left; align-content: left;}

.wrap_item { max-width:284px;}

.two_items, .wrap_links {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; width:100%; -webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row; flex-wrap: wrap; justify-content:center; align-items:center; align-content: center; margin:0 auto;}

@media all and (max-width:1001px) {
    #first-two-items {border-top: 1px solid #9e9ea7;}}

.max_W {max-width:718px;} .central_in {width:100%; margin:0 auto; text-align:center;}

@media all and (max-width:1028px) and (min-width:620px) {.column_order_small { display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row; width:100%; flex-wrap: wrap; justify-content:center; align-items:center; align-content:center; } .column_order_news {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row; width:100%; flex-wrap: wrap; justify-content:space-around; -webkit-justify-content:space-around; align-items:flex-start;align-content:space-around;} .wrap_item {-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column; flex-wrap: wrap; justify-content:left; align-items:left; align-content: left;} .nov_3 {min-width: 284px;} }

@media screen and (min-width:620px) {.stab p {margin:75px 4px 0 0;} .stab_2 p {margin: 50px 4px 0 0;} .stab_3 p {margin: 127px 4px 0 0;} .stab_4 p {margin: 20px 4px 0 0;} }

@media screen and (max-width:620px) {.grid_biger, .grid_lok {-webkit-flex-direction:columm;-ms-flex-direction:column;flex-direction:column; width:100%;}	.two_items {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; width:100%; -webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column; flex-wrap: wrap; justify-content:center; align-items:flex-start; align-content: flex-start;} .stab p, .stab_2 p, .stab_3 p, .stab_4 p  {transform:none; -webkit-transform:none; padding-left: 1em;} .vertical { border:none;}  }

.item {flex: 1;-moz-flex: 1;-ms-flex: 1;-o-flex: 1;-webkit-flex: 1;}

.photo_link_vesti, .photo_link_akcije {height:162px; width:100%; overflow:hidden; float:left;} .photo_link_vesti {max-width:310px;}

.photo_link_akcije {max-width:235px; max-height:162px;}

.photo_link_vesti img, .photo_link_akcije img {  height:auto; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease; float:left;}

.photo_link_vesti img {width:360px;} .photo_link_akcije img {width:290px;}

.photo_link_vesti:hover img {width:322px; height:auto;} .photo_link_akcije:hover img {width:255px; height:auto;}  

.text_link_vesti {padding:1.5em;}.text_link_akcije { padding: 1em 1em 1em 0; display:block; width:100%; float:left;}

h.grey { font-size:0.85em;font-weight:bold; color:#666666; letter-spacing:0.6em; line-height:150%;}

.text_link_vesti p {margin-top:1em;} img.logo_text{dispey:block; width:150px; margin:0.5em 0;}

.wrap_text_p p.pasus { padding: 0 5% 1em 5%;}

.wrap_text_p p.podnaslov {padding: 5% 0 1% 5%;} .wrap_text_p p.podnaslov, .wrap_text_p p.podnaslov_2, .button, p.napomena  { letter-spacing:5px;} .wrap_text_p p.podnaslov_2 {font-family: 'Roboto Slab', serif; display:inline-block; width:auto; font-size:0.8em; padding:15px 15px 10px 15px; margin-left:5%;} p.comercal {font-family: 'Roboto Slab', serif; display:inline-block; width:auto; font-size:0.85em; padding:15px 15px 10px 15px;}

img.width_all {width:100%; max-width:718px; height:auto; margin:0 auto;}

img.elektro {max-width:200px; height:auto; padding:10%;} img.fibran_geo {margin:1em 2em; max-width:60px;}

.flex-start {align-self:flex-start; -webkit-align-self:flex-start;}

ul.page_ul li { font-family: 'Roboto Slab', serif; font-size:0.85em; line-height:150%; padding: 4px 0 2px 10px;}

.arrow_nazad { display:block; width:100%; float:left;}

.arrow_nazad img { vertical-align:top;} .button_nazad { border:none;

font-size:0.75em; -webkit-transition: 0.3s color ease-in-out; -moz-transition: 0.3s color ease-in-out; -o-transition: 0.3s color ease-in-out; transition: 0.3s color ease-in-out;} .button_nazad:hover {color:#eab01a;}

.wrap_links a {flex: 1;-moz-flex: 1;-ms-flex: 1;-o-flex: 1;-webkit-flex: 1;position:relative;display:inline-block;text-align:center; max-width:200px;} .wrap_links a.link_logo {min-width:100px; max-width:100px;} a.katalog img{ display:inline-block; padding:1em 5px 5px 5px; vertical-align:middle;} a.katalog p { display:inline-block;}

.indent-text { text-indent:2em; padding:1em 2em; } .indent-text_2 { text-indent:2em; padding:0.25em 2em; } .indent-text_2:first-child{ padding-top:1.5em;}

.napomena { display:inline-block; font-size:0.8em; width:auto; padding: 4em 5% 3px 34px; background-image:url(../img/napomena.fw.png); background-position:left bottom; background-repeat:no-repeat;}

a.vise {display:inline-block; padding-left:1em; color:#000; letter-spacing:1px; font-size:0.75em; -webkit-transition: 0.5s color ease-in-out; -moz-transition: 0.5s color ease-in-out; -o-transition: 0.5s color ease-in-out; transition: 0.5s color ease-in-out;} a.vise:hover { color:#eab01a;}

table { border-collapse:collapse; width:100%; padding:2% 5%;}

tr { text-align:left; border-bottom:1px solid #e8e8e8;} tr:hover { font-weight:bold;} tr:nth-of-type(odd) {background: #f7f7f7;} td {padding:0.7em 0.5em 0.5em 1em; font-size:0.9em; letter-spacing:0.1em;}

.min_width_td { min-width:249px;} .center_text_table {text-align:center;} 

img.table { display:inline-block; padding-right:1em; vertical-align:text-bottom;}

.elektorde td {padding:2px 0.5em 2px 1em; font-size:0.8em;}

.playball-regular {
    font-family: "Playball", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
  }


  figcaption.page_fg h1 {
   background-color: #B72325;
  }

  #img1 {display:block;}
#img2 {display:none}

@media all and (max-width: 499px) {
    #img1 {display: none;}
    #img2 {display: block;}
}


/* Style the button that is used to open and close the collapsible content */
.collapsible {
    background-color: white;
    color: #000 ;
    cursor: pointer;
    width: 100%;
    /* border: 1px solid #a67d14;
    border-bottom: none; */
    border:none;
    /* border-bottom: 1px solid #f2f2f2; */
    text-align: left;
    outline: none;
    font-size: 15px;
    line-height: 1.4;
    padding: 10px;
    box-shadow: 0 3px 8px 0 rgba(62, 62, 62, 0.2), 0 6px 20px 0 rgba(39, 39, 39, 0.19);

  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .collapsible:hover {
    background-color: #EAB01A;
  }
  
  /* Style the collapsible content. Note: hidden by default */
  .content {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }


  .collapsible:after {
  content: '\0271A'; /* Unicode character for "plus" sign (+) */
  font-size: 16px;
  color: black;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\02212"; /* Unicode character for "minus" sign (-) */
  color: black;
  font-size: 16px;
}

/* Base styles for the gallery */
.gallery-collapsible {
    display: grid;
    justify-content: center; /* Centers the gallery horizontally */
    align-content: center; /* Centers the gallery vertically */
    gap: 1em; /* Space between gallery items */
   
  }
  
  /* 3x4 structure for desktop */
  @media (min-width: 768px) {
    .gallery-collapsible {
      grid-template-columns: repeat(3, 1fr); /* 3 columns */
      grid-template-rows: repeat(4, auto); /* 4 rows, auto height */
      margin-left: 5%;
    }
  }
  
  /* 2x6 structure for mobile */
  @media (max-width: 767px) {
    .gallery-collapsible {
      grid-template-columns: repeat(2, 1fr); /* 2 columns */
      grid-template-rows: repeat(6, auto); /* 6 rows, auto height */
      margin-left: -5%;
    }
  }
  

  .mida-logo {
    margin-left: 35%;
    margin-bottom: 5px;
  }

  @media only screen and (max-width: 600px) {
    .mida-logo{
        margin-left: 23%;
    }
  }