/* resetiranje margina i paddinga */
*{margin:0;
padding:0;}

/* osnovno uređivanje HTMl elementa */

body{
font-family: 'Montserrat', sans-serif;
font-size:14px;
color:#262626;}

h1,h2,h3,h4,h5,h6{font-family: 'Raleway', sans-serif;}

img{max-width:100%;
height:auto;}

a{text-decoration:none;}

#bodywrapper,#header,#pageFooter{margin:0 auto;
max-width:1200px;}

#bodywrapper {
    margin: 0 auto;
}

.clearfix:after{content:"";
display:block;
clear:both;
height:0;
font-size:0;
visibility:hidden;}

h1{font-size:40px;
margin-bottom:20px;}

p, li{
    line-height: 18px;
}

.mobile{
display:none !important;
}

/*MENU*/

#headerwrapper{background-color:#ebdbc5;
position:fixed;
width:100%;
top:0;
z-index:1;}

#menu ul{list-style-type:none;
text-align: right}

#menu li{display:inline;;
margin-right: 1px;
vertical-align:baseline;
text-align: left;}

.menuLi {line-height: 90px;}

#menu a{color:#262626;
font-size:12px;
padding:15px 10px;
transition: all 0.2s linear;
font-family: 'Merriweather Sans', sans-serif;}

#menu1:hover,#menu2:hover,#menu3:hover,#menu4:hover,#menu5:hover,#menu6:hover,#menu7:hover{background-color: white}

#logo{float:left;
    width:30%;
    margin-left:0;
    background:url(../slike/logo/auraxol_black_logo.svg) no-repeat center;
    padding-left:0;}

#menu{float:right;
width:66%;}

#menu,#logo{padding:1%;
height:90px;}

/* banner*/
.slick-dots li{
width:12px !important;
height:12px !important;
background:lightgray;
border-radius:50px;
}

.slick-dots li.slick-active{
  background:#964133;
    }

    .slick-dots li button::before{
        display:none;
    }


/* section */

#box,.index_section{background-color:white;}

/* #box, .index_section{padding:60px}*/

#box,.index_section,#pageFooter {
    width: 95%;
    overflow:hidden;
}

#box,#bodywrapper{margin: 180px auto 60px auto;}

.index_section{margin:0 auto;}

.vertical_line li{margin-left: 20px}

h2, h3,#index_p{margin:10px 0}

#napomene h3{margin-top:20px;padding-top: 20px;}

.abc_naslov{margin-top:50px;
margin-bottom:5px;}

.adresa_right h2{margin:0;}

#box p{margin:10px 0;}

#box img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.imgBox {
    width: 50%;
}

.imgBoxRight {
    padding-left: 20px;
}

#index_image img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    margin: 0;
    padding: 0}

.box_slike,.index_section,.kontakt_wrapper{display:flex;
justify-content:space-around;}

.left, .right {
    width:50%;
}

#index_link{margin-top:30px; display: inline-block;}

.photoleft,.left{padding-right:2%;}

#box h3,.left h2{color:black;}

#box h2{color:black;}

.index_p p{font-size: small;
text-align: center;}

/* unvisited link */ a:link {color: #c28e46;}

/* visited link */ a:visited {color: #c28e46;}

/* mouse over link */ a:hover {color: #964133;}

/* selected link */ a:active {color: #964133;}

/*index priča linkovi*/

/* unvisited link */ #box a:link {color: black; font-weight:bold}

/* visited link */ #box a:visited {color: black;font-weight:bold}

/* mouse over link */ #box a:hover {font-weight:bold; text-decoration: underline}

/* selected link */ #box a:active {font-weight:bold; text-decoration: underline}





/*vertical line*/

.vertical_line{border-left:4px solid;
padding-left: 15px;}

    .helpyred .vertical_line{border-left-color:#24408e;}
    .karbomint .vertical_line{border-left-color:#00a690;}
    .cardiolival .vertical_line{border-left-color:#c12e33;}
    .detrimega .vertical_line{border-left-color:#3a6e99;}
    .linakaps .vertical_line{border-left-color:#c28e46;}
    .linakapsevita .vertical_line{border-left-color:#5a93cc;}
    .linakapsq10 .vertical_line{border-left-color:#aa2a30;}   
    .cuminakaps .vertical_line{border-left-color:#964133;}
    .cannakaps .vertical_line{border-left-color:#bcb833;}
    .carthakaps .vertical_line{border-left-color:#eb7924;}
    .beauty .vertical_line{border-left-color:#ba2b74;}
    .bkompleks .vertical_line{border-left-color:#0099bb;}
    .etrimega .vertical_line{border-left-color:#328aca;}
    .linakapsala .vertical_line{border-left-color:#c48f48;}
    .pc .vertical_line{border-left-color:#703377;}

.vertical_line p {width: 100%;}

#index_link,.link2{background-color:#EEEEEE;
color:black;
transition: all 0.2s linear;}

#index_link{padding:20px;}

#index_link img{width:30px;
vertical-align: middle;
padding-right:10px;}

#index_link:hover,#index_link:focus {background-color: #24408e;color:white; }

/*sastojci*/

.sastojak_link p {background-color: black;
font-style: italic;}

.sastojak_2{padding-top: 20px}

    .helpyred strong{color:#24408e;}
    .karbomint strong{color:#00a690;}
    .cardiolival strong{color:#c12e33;}
    .detrimega strong{color:#3a6e99;}
    .linakaps strong{color:#c28e46;}
    .linakapsevita strong{color:#5a93cc;}
    .linakapsq10 strong{color:#aa2a30;}    
    .cuminakaps strong{color:#964133;}
    .cannakaps strong{color:#bcb833;}
    .carthakaps strong{color:#eb7924;}
    .beauty strong{color:#ba2b74;}
    .bkompleks strong{color:#0099bb;}
    .etrimega strong{color:#328aca;}
    .linakapsala strong{color:#c48f48;}
    .pc strong{color: #703377;}
    

/*sastojci podnaslov*/

.sastojci_podnaslov_helpyred{padding: 5px;
    color:white;
    background-color:#24408e;}

.sastojci_podnaslov_karbomint{padding: 5px;
    color:white;
    background-color:#00a690;}

.sastojci_podnaslov_cardiolival{padding: 5px;
    color:white;
    background-color:#c12e33;}

.sastojci_podnaslov_detrimega{padding: 5px;
    color:white;
    background-color:#3a6e99;}

.sastojci_podnaslov_linakaps{padding: 5px;
    color:white;
    background-color:#c28e46;}

.sastojci_podnaslov_cuminakaps{padding: 5px;
    color:white;
    background-color:#964133;}

.sastojci_podnaslov_cannakaps{padding: 5px;
    color:white;
    background-color:#bcb833;}

.sastojci_podnaslov_carthakaps{padding: 5px;
    color:white;
    background-color:#eb7924;}
    
.sastojci_podnaslov_beauty{padding: 5px;
    color:white;
    background-color:#ba2b74;}
    
.sastojci_podnaslov_bkompleks{padding: 5px;
    color:white;
    background-color:#0099bb;}
    
.sastojci_podnaslov_etrimega{padding: 5px;
    color:white;
    background-color:#328aca;}
    
.sastojci_podnaslov_linakapsala{padding: 5px;
    color:white;
    background-color:#c48f48;}

.sastojci_podnaslov_pc{padding: 5px;
    color:white;
    background-color:#703377;}

.h2_margin{padding-top: 30px;}

#h2_first_margin{padding-top: 0;}

/*istaknute rečenice*/

#istaknuto_helpyred, #article .istaknuto_helpyred{padding: 10px;
    margin-top: 30px;
    background-color:#bed2e6;}

    #istaknuto_helpyred p, #article .istaknuto_helpyred p{
    margin: 10px;}

#istaknuto_karbomint, #article .istaknuto_karbomint{padding: 5px;
    margin-top: 30px;
    background-color:#b3e4de;}

        #istaknuto_karbomint p, #article .istaknuto_karbomint p{
         margin: 10px;}

#istaknuto_cardiolival, #article .istaknuto_cardiolival{padding: 5px;
    margin-top: 30px;
    background-color:#fac8bd;}

        #istaknuto_cardiolival p, #article .istaknuto_cardiolival p{
         margin: 10px;}

#istaknuto_detrimega, #article .istaknuto_detrimega{padding: 5px;
    margin-top: 30px;
    background-color:#d8e2eb;}

        #istaknuto_detrimega p, #article .istaknuto_detrimega p{
         margin: 10px;}

#istaknuto_linakaps, #article .istaknuto_linakaps{padding: 5px;
    margin-top: 30px;
    background-color:#eddecb;}

        #istaknuto_linakaps p, #article .istaknuto_linakaps p{
         margin: 10px;}
 
         
#istaknuto_linakapsevita, #article .istaknuto_linakapsevita {padding: 5px;
    margin-top: 30px;
    background-color:#d9e2f2;}

        #istaknuto_linakapsevita p, #article .istaknuto_linakapsevita p{
         margin: 10px;}
         
#istaknuto_linakapsq10, #article .istaknuto_linakapsq10{padding: 5px;
    margin-top: 30px;
    background-color:#ebd4cc;}

        #istaknuto_linakapsq10 p, #article .istaknuto_linakapsq10 p{
         margin: 10px;} 
         
#istaknuto_cuminakaps, #article .istaknuto_cuminakaps{padding: 5px;
    margin-top: 30px;
    background-color:#d7b5a9;}

        #istaknuto_cuminakaps p, .istaknuto_cuminakaps p{
         margin: 10px;}

#istaknuto_cannakaps, #article .istaknuto_cannakaps{padding: 5px;
    margin-top: 30px;
    background-color:#f2f1d6;}

        #istaknuto_cannakaps p, #article .istaknuto_cannakaps p{
         margin: 10px;}

#istaknuto_carthakaps, #article .istaknuto_carthakaps{padding: 5px;
    margin-top: 30px;
    background-color:#fbe4d3;}

        #istaknuto_carthakaps p, #article .istaknuto_carthakaps p{
         margin: 10px;}
         
#istaknuto_beauty, #article .istaknuto_beauty{padding: 5px;
    margin-top: 30px;
    background-color:#eaced8;}

        #istaknuto_beauty p, #article .istaknuto_beauty p{
         margin: 10px;}
         
         
#istaknuto_bkompleks, #article .istaknuto_bkompleks{padding: 5px;
    margin-top: 10px;
    background-color:#caebf8;}

        #istaknuto_bkompleks p, #article .istaknuto_bkompleks p{
         margin: 15px;}
         
#istaknuto_etrimega, #article .istaknuto_etrimega {padding: 5px;
    margin-top: 10px;
    background-color:#d1ddf1;}

        #istaknuto_etrimega p, #article .istaknuto_etrimega p{
         margin: 15px;}
         
#istaknuto_linakapsala, #article .istaknuto_linakapsala {padding: 5px;
    margin-top: 10px;
    background-color:#d9c9b3}

        #istaknuto_linakapsala p, #article .istaknuto_linakapsala p{
         margin: 15px;}
         
/*anchor link*/

.anchor{display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;}

/*katalog*/

#index_h2 h2{text-align: center;
margin-top: 50px}

.katalog{
display:inline-block;
}

.flex-container {display: flex;
    flex-wrap: wrap
}

#katalog_link img{padding-bottom: 15px}

.prozor {width:28.33%;
    background-color:#e4e2e2;
    padding:0 0.5% 0.5% 0.5%;
    margin:2%;
}

.webshop {width:22%;
    background-color:#e4e2e2;
    padding:0.5%;
    margin:1%;
}

#ljekarne img{
  padding:0;
  width:100%;
}


.prozor:hover,.webshop:hover{background-color: #ebdbc5;}

#ljekarne a{font-weight: 0;}

.flex-container h3 {text-align: center;
color: black}

.flex-container p{word-break:break-all}

/*webshop*/

#box .shop_icon img{width:130px;
  display: block;
  margin-left: auto;
  margin-right: auto;}

#box .shop_icon_2 img{width:200px;}

/*index prica*/

#index_prica{border-top: 4px solid;
    border-color: #c28e46;
    margin-top: 50px}

#index_prica h2{text-align: center;}

/*proizvodi - str. */

.proizvodi_h2 h2{font-weight: bold;
text-align: center;
margin-top: 0}

#pakiranje p{margin-bottom:15px}

/*articles - članci*/

#article h2{text-align: center;
    margin-bottom:30px;
}

#article {margin: 0 70px;}

#article .beauty h3, #article .bkompleks h3, #article .linakaps h3, #article .cannakaps h3, #article .helpyred h3, #article .cuminakaps h3, #article .cardiolival h3, #article .karbomint h3, #article .linakapsevita h3,  #article h4, #article .detrimega h3 {margin-top:40px}, #article .etrimega h3, #article .linakapsala h3

#article .literatura li{margin:20px;}



/*publikacije*/

.publikacije {width:20%;
    background-color:#faefe1;
    padding:0 0.5% 0.5% 0.5%;
    margin:2%;
}

.prozor:hover{background-color: #ebdbc5;}

.publikacije h3{margin:20px}

/*pageFooter*/
#pageFooterWrapper{background-color:#ebdbc5;
    color:black;}

#pageFooter{padding:20px 0 0 0}

#pageFooter h5{padding-bottom:5px;
    margin-bottom:5px;
    display:inline-block;
    border-bottom:4px solid white;}

.footer_padding p{margin-bottom: 10px}

#pageFooter h5{border-bottom:1px solid black}

#pageFooter h5{font-weight: bold}

#footerTop h6{text-align:center;}

#footerTop{height:auto;
    width:100%;}
    
#pageFooter p{margin-bottom:10px;
    word-break: keep-all;
}

#pageFooter a{color:black;}

.footer_item {width:45%;
margin: 0 2% 2% 2%;}


.footer_item img{width:40px;
}

.socials {width:15%;
margin: 1% 1% 0 0;}

#pc_logo img{max-width:200%;
    width:180px;
margin-bottom:15px}

#pc_logo img:last-child{display:none}

#pc_logo:hover img:first-child{display:none}

#pc_logo:hover img:last-child{display:inline-block;}

/*rule*/

#rule1{float:left;width:50%;}
#rule2{float:right;width:50%;}

#rule1 a,#rule2 a{color:black;}

.proizvod_left{float:left;width:50%;}
.proizvod_right{float:right;width:50%;}

.tvari_left{float:left;
    width:20%;
    padding-right: 5%;
    margin:15px 0;
}
.tvari_right{float:right;width:75%;}


.webshop_mjesta{align-items: center}

.adresa_left{float:left;
    width:35%;
   padding-right: 5%;}
.adresa_right{float:right;width:60%;}

/*Video*/

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-top: 30px;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*map*/

iframe {width:100%;
height:600px;
padding-top:50px;
}

/* navigacija */

.dropDown {
    position: relative;
    
}

.dropdownList {
    position: absolute;
    width: auto;
    min-width: 100%;
    width:200px;
    color: #c28e46;
    top: 30px;
    background-color: white;
    left: 0;
    color: white;
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    transition: 200ms;
    margin-top:5px;
    box-shadow: 0 10px 10px rgba(195, 209, 230,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.dropDown li{list-style-position: inside;
text-indent: -1em}

.dropdownItem {
    line-height: 1.71 !important;
    display: block !important;
    padding:14px;
}

.dropDown:hover .dropdownList  {
    max-height: 10000px;

}

.dropdownItem:hover {color:white;
    background-color: #EEEEEE;
}

.headerResp {
    display: block;
}

/* TABLICA */

tr:first-child td {
    background-color:#ffffff;
}

table, th, td {
  border: 3px solid white;
}

table th, table td {padding:5px;}

table {
  border-collapse: collapse;
}

#article table tr:first-child td {/*font-weight: bolder;*/}


tr.red-parni td {
  background-color: #ffffff;
}

tr.linakapsevita-tablica td {
  background-color: #d9e2f2;
}





/* mobile button*/
#mobileButton{display:none;}

/*responsive*/

@media screen and (max-width: 1200px) {

    #logo,#menu{float:none;display:block;}

    #logo,#menu{margin:0 auto;
    padding:0;}

    #menu{width:100%;
    height:auto;
    padding-bottom: 5px;}

    header{height:auto;
    padding:0;}

    .menuLi {
        line-height: 40px;
    }

    #menu ul{text-align: center}

    .float-right h3{margin:0;}

}

@media screen and (min-width:1024px){

    	#menu ul{display:block !important;}
    }

    @media screen and (max-width:973px) {


    #bodywrapper{margin:70px auto 20px auto;
    width:auto;}

    #bodywrapper{margin-top:140px;}

    #h2_first_margin{padding-top: 20px;}


    /*flex-container*/

    #index_h2 h2{margin-top: 50px}

    .prozor {width:45%;
        padding:0 0.5% 0.5% 0.5%;
        margin:2%;
    }
    
    .webshop {width:45%;
        padding:0.5%;
        margin:2%;
}

    .proizvodi_h2 h2{font-weight: bold;
    text-align: center;
    margin-top: 30px}

    .publikacije {width:45%;
        background-color:#faefe1;
        padding:0 0.5% 0.5% 0.5%;
        margin:2%;
    }
    
    
    /*articles - članci*/

    #article h2{margin-bottom:20px;}

    #article {margin: 0px;}
    
    /*iFrame Youtube*/
    
    iframe {width:100%;
    height:500px;
    padding-top:50px;
}
    
    }

@media screen and (max-width:776px) {

    #bodywrapper{margin:40px auto 20px auto;
    width:auto;
    padding: 0 20px;}

    #box{margin:5px auto;}

    .index_section,.kontakt_wrapper{display:block;}

    .left, .right {
        width:100%;
    }

    .left{padding-bottom:15px;}

    .float-left,.float-right,.proizvod_left,.proizvod_right{float:none;
    width:100%;}

    body{font-size:16px;}

    p,li {line-height: 20px}
    
    #menu a:hover{background-color: #ebdbc5;}

    #menu ul{display:none}

    .navigation{clear:both;}

    #menu li,#menu a{display:block;
      float: none;
      overflow: hidden; 
      background-color: #faefe1;}

    #menu a{padding:20px 0;
        border-bottom:none;
        font-size:14px;}

    #menu a:active{padding:20px 0;transition: all 0.01s linear;
      }

    #menu li{text-align:center;
      margin:0;padding:0;}

    #mobileButton {display:block;
    	padding:4.5px 0;}
    	
    .menuOpen {
    display: block !important;
    background-color: white;
    margin-top: 90px;
    } 

    a{-webkit-tap-highlight-color: rgba(0,0,0,0);}

    #logo{text-align: left;
      margin:0;
      padding:0;
      line-height: 90px;}

    .dropdownList li{visibility:hidden;}

    #logo{float:left;
     	width:50%;}

    #mobileButton{float:right;
     	width:50px;
     	padding:25px 15px 0 15px;}

    .menuLi,.dropDown{line-height:0;}

    .float-right h3{margin-top:30px;}

    .left{margin-right:0;padding-right:0;}

    .footer_item {width:46%;
    margin: 2%;}
    
    .proizvodi_h2 h2{margin-top: 10px}
    
    h3{font-size:95%;}
    
    #h2_first_margin{padding-top: 30px;}
    
    table {font-size: 12px;}
    
    li {padding: 5px 0;}


}

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

    #box{margin: 120px auto 20px auto;
    width:100%;}

    body{font-size:18px;}

    .tvari_left,.tvari_right,.adresa_left,.adresa_right{float:none;
    width:100%;}

    .naslov_o_nama {padding-top:30px}
    
    p,li{line-height: 22px}
    p, li {font-size:14px;}
    h2{font-size:16px;}
    h1{font-size:24px;}
    
    #logo{margin-left:10px}

}

@media screen and (max-width:730px) {

#logo{width:50%;}

}

@media screen and (max-width:618px) {

    #index_link img {width:15px;}

    #index_link{padding:5px;
    font-size: 15px}

    #bodywrapper{margin-bottom:30px;}

/*flex-container*/

    #index_h2 h2{margin-top: 10px}

    .prozor {width:96%;
        padding:0;
        margin:2%;}


    .publikacije {width:94%;
        padding:1%;
        margin:2%;}

    .footer_item {width:94%;
    margin: 3%;}

}

@media screen and (max-width:560px) {

    #bodywrapper{margin:10px auto 30px auto;}

    #bodywrapper{padding: 5px 20px;}

    #box{margin: 100px auto 20px auto;
    width:100%;}

    .hide{visibility:hidden;}



.mobile{
display:block !important;
}

.large{
display:none !important;
}

}

@media screen and (max-width:301px) {

  body{min-width:300px;}
}