/* 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: 'Poppins', 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:#502455;
position:fixed;
width:100%;
top:0;
z-index:1;}

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

#menu li{display:inline;;
vertical-align:baseline;
text-align: left;}

#menu1, #menu2, #menu3, #menu4, #menu5{margin-right:15x}

.menuLi {line-height: 90px;}

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

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

#logo{float:left;
    width:15%;
    margin-left:0;
    background:url(../slike/logo/pc_grey_and_white.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:#502455;
    }

    .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%;
}

.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: #703377;}

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

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

/* selected link */ a:active {color: #502455}

/*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;}

    .pc .vertical_line{border-left-color:#703377;}

.vertical_line p {width: 100%;}

#pc_p p{margin-bottom: 20px;}

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


/*sastojci*/

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

.sastojak_2{padding-top: 20px}

    .helpyred strong{color:#24408e;}

    .pc strong{color: #703377;}

/*sastojci podnaslov*/

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

.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{padding: 10px;
    margin-top: 30px;
    background-color:#bed2e6;}

    #istaknuto_helpyred p{
    margin: 10px;}

#istaknuto_pc{padding: 5px;
    margin-top: 30px;
    background-color:#916196;}

        #istaknuto_carthakaps p{
         margin: 10px;}

         
/*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
}


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

.webshop {width:30.33%;
    background-color:#bcbcbc;
    padding:0.5%;
    margin:1%;
    border-radius: 15px;
}

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

.webshop:hover{background-color: #703377;}

#brendovi 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;}

/*proizvodi - str. */

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

/*publikacije i certifikati*/

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

.certifikati {background-color:#ededed;}

.certifikati:hover, .publikacije:hover{background-color: #e1e0e0}

.certifikati h4,.publikacije h4{margin:10px 10px 0 10px;
text-align: center;}

.publikacije p{text-align: center;}


/*make-up*/

#make-up-lokacije p{word-break:normal}

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

#pageFooter{padding:20px 0 0 0}

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

#pageFooter p{margin-bottom: 15px}

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

#pageFooter h5{font-weight: bold}

#footerTop h6{text-align:center;}

#footerTop{height:auto;
    width:100%;}

#pageFooter a{color:black;}

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


.footer_item img{width:40px;
}

#footerTop p{word-break: normal;}

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

#pc_logo img{max-width:100%;
    width:130px;
margin-bottom:15px}

/*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%;}

.brend_left{float:left;
    width:20%;
    padding-right: 5%;
    margin:15px 0;
}
.brend_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:400px;}

/* navigacija */

.dropDown {
    position: relative;
    
}

#menu2 .dropdownList li{text-align: center;}

.dropdownList {
    position: absolute;
    width: auto;
    min-width: 100%;
    width:200px;
    color: #c28e46;
    top: 30px;
    background-color: #703377;
    left: 0;
    color: white;
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    transition: 200ms;
    border-radius: 15px;
    margin-top:5px;
    box-shadow: 6px 5px 6px 0px rgba(55,22,59,0.84);
    -webkit-box-shadow: 6px 5px 6px 0px rgba(55,22,59,0.84);
    -moz-box-shadow: 6px 5px 6px 0px rgba(55,22,59,0.84);
}

.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: #502455;
}

.headerResp {
    display: block;
}

/* 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: 10px;}


    /*flex-container*/

    #index_h2 h2{margin-top: 30px}

    .certifikati {width:45%;
        padding:0 0.5% 0.5% 0.5%;
        margin:2%;}
    
    .brends {width:45%;
        padding:0.5%;
        margin:2%;}

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

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

}

@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: #502455;}

    #menu ul{display:none}

    .navigation{clear:both;}

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

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

    #menu2, #menu4{padding:0}


    #menu a:link{transition: all 0.01s linear;
      }

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

    #mobileButton {display:block;
    	padding:4.5px 0;}

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

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

    .menuOpen {
        display: block !important;
        background-color: white;
        margin-top: 90px;
        }

    #menu a{border-radius: 0}

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

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

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

    .dropDown ul {
        display: block !important;
        visibility: visible !important;
        top: 100% !important;
        position:relative;
        border-radius: 0
        }

    .dropdownItem {
        line-height: 0 !important;
        padding:0;
        }

.dropDown li{text-indent: 0}

    #menu2 a, #menu4 a{padding: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%;}
    
}

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

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

    body{font-size:18px;}

    .brend_left,.brend_right,.adresa_left,.adresa_right{float:none;
    width:100%;}

    .brend_left{width: 300px; height: auto; display: block;
        margin-left: auto;
        margin-right: auto;}

    .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}

    .publikacije h4, .publikacije p,.certifikati h4{font-size: 12px;}

    #box .publikacije p{margin:0 0 5px 0; word-break: normal;}

}

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

#logo{width:40%;}

}

@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}

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

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

    .webshop {width:47%;
        padding:0.5%;
        margin:1%;
    }

}

@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;}
}