/******************************/ 
/* GLOBAL - FONTOVI */

body {
    font-family: 'Montserrat', sans-serif;  
    margin: 0 !important;  }

a{
    font-weight: 700;
    font-size: .9em;
    color: white;
    text-decoration: none;

    border-bottom: rgba(0, 0, 0, 0.1);
}



a+a{margin-left: 1.8vw;}

p{
    font-weight: 400;
    font-size: 1em;
    margin: 2% 0% 3% 0%;
}

h1{
    font-weight: 800;
    font-size: 1.8em;
    color: rgb(9, 153, 9);
    margin: 0px;
}

h2{
    font-weight: 800;
    font-size: 1.5em;
    color: black;
    margin: 0px;
}

h4{
    font-weight: 700;
    font-size: 1.2em;
    color: black;
    margin: 0px;
}

h5{
    font-weight: 800;
    font-size: 0.9em;
    margin: 0px;
}

/******************************/ 
/* COVER IMG & NASLOV */

.cover{
    background-image: url(/images/new/home-cover.jpg);
    background-size: cover;
    height: 20vw;
    position: relative;
}

.cover-heading{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 98;
}

.cover-heading h1{
    color: white;   
}

/******************************/ 
/* SEKCIJE - 1, 2, 3 */

.one{
    background-color: #f7f7f7;
    padding: 3% 0% 3% 0%;
}

.two{
    padding: 3% 0% 3% 0%;
    background-color: #eeeeee;
}

.three{
    background-color: #f7f7f7;
    padding: 3% 0% 3% 0%;
}

.four{
    padding: 3% 0% 3% 0%;
    background-color: #eeeeee;
}

.five{    
    background-color: #f7f7f7;
    padding: 3% 0% 3% 0%;
}


/* Text + Slika */

.text-img{
    width: 60vw;
    display: flex;
    justify-content:space-between ;
    align-items: center;
    margin: auto;
}

.text-left{
    width: 55%;
}

.img-right{
    width: 40%;
    text-align: center;
}

.img-right img{
    height: 16vw;
}

/* Slika + Text */

.img-text{
    width: 60vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
}

.img-left{
    width: 40%;
    text-align: center;
}

.img-left img{
    height: 15vw;
}

.text-right{
    width: 55%;
}

/******************************/ 
/* BUTTONS & BTTN HOVER */

.shop-button{
    width: max-content;
    font-weight: 700;
    font-size: .9em;
    padding: 1.4% 5% 1.4% 5%;
    color: white;
    background-color: rgb(9, 153, 9);
    border: 2px solid rgb(9, 153, 9);
}

.shop-button:hover{
    transition: ease 0.5s;
    cursor: pointer;
    color: rgb(9, 153, 9);
    background-color: transparent;
    border: 2px solid rgb(9, 153, 9);
}

.shop-button:hover a{
    color: rgb(9, 153, 9);
}

/******************************/ 
/* BOXES & BOX HOVER */

.boxes{
    width: 60vw;
    display: flex;  
    margin: auto;
    justify-content: space-between;
}

.box{
    position: relative;
    width: 23.5%;
    text-align: center;
    background-color: white;
    box-shadow: 3px 3px 5px 2px #00000040; 
}

.box img{
    width: 60%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 5%;
    z-index: 98;
}

.box h5{
    width: 80%;
    margin: auto;
    padding-bottom: 15px;
}

.box p{
    padding: 0px 10px 10px 10px;
    font-size: 0.9em;
}

.box-more{
    color: white;
    background-color: rgb(0, 0, 0, 0.75);

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99;

    visibility:hidden;
}

.box-more a{
    padding: 3% 5% 3% 5%;
    background-color: rgb(9, 153, 9);
}

.box:hover > .box-more{
    visibility: visible;
}

/******************************/ 
/* GLOBAL - LAPTOP, VEĆI */

@media only screen and (min-width: 1260px) and (max-width: 1450px){
    
    p{font-size:0.9em;}

    .text-img{width: 65vw;}
    .img-text{width: 65vw;}

    .boxes{width: 65vw;}
    .box{width: 23.5%;}
    .box h5{width: 85%;}
}

/******************************/ 
/* GLOBAL - LAPTOP */

@media only screen and (min-width: 960px) and (max-width: 1260px){

    h1{font-size: 1.5em;}
    h2{font-size: 1.3em;}
    h4{font-size: 1.1em;}
    h5{font-size: 0.9em;}
    p{font-size:0.8em;}
    a{font-size: 0.8em;}

    a+a{margin-left: 1.2vw;}

    .cover{height: 20vw;}
    
    .text-img{width: 65vw;}
    .text-left{width: 55%;}
    .img-right{width: 40%;}
    .img-right img{height: 16vw;}

    .img-text{width: 65vw;}
    .img-left{width: 40%;}
    .img-left img{height: 16vw;}
    .text-right{width: 55%;}

    .shop-button{font-size: 0.8em !important;}

    .boxes{width: 65vw;}
    .box{width: 23.5%;}
    .box img{width: 75%;}
    .box h5{width: 85%;}

}

/******************************/ 
/* GLOBAL - TABLET */

@media only screen and (min-width: 480px) and (max-width: 960px){
    
    h1{font-size: 1.5em;}
    h2{font-size: 1.3em;}
    h4{font-size: 0.9em;}
    h5{font-size: 0.8em;}
    p{font-size: 0.9em;}
    a{font-size: 0.8em;}

    .cover{height: 23vw;}
    
    .one{padding: 4% 0% 4% 0%;}
    .two{padding: 6% 0% 6% 0%;}
    .three{padding: 4% 0% 4% 0%;}
    .four{padding: 6% 0% 6% 0%;}
    .five{padding: 4% 0% 4% 0%;}
    


    .text-img{
        width: 70vw;
        flex-direction: column-reverse;
        text-align: center;
    }

    .text-left{width: 100%;}
    .img-right{width: 100%;}
    .img-right img{
        height: 25vw;
        margin-bottom: 15px;
    }

    .img-text{
        width: 70vw;
        flex-direction: column;
        text-align: center;
    }

    .text-right{width: 100%;}
    .img-left{width: 100%;}
    .img-left img{
        height: 25vw;
        margin: 15px;
    }
    
    .shop-button{font-size: 0.8em !important;}

    
    .shop-button-2{
        margin:auto;
    }

    .boxes{
        width: 70vw;
        flex-wrap: wrap;
    }

    .box:nth-child(-n + 2) {
        margin-bottom: 30px;
    }

    .box img{width: 60%;}
    .box{width: 47%;}
    .box h5{width: 75%;}
}
    
/******************************/ 
/* GLOBAL - MOBILNI */

@media only screen and (max-width: 480px){
    .main-footer{width: 85vw;}

    h1{font-size: 1.4em;}
    h2{font-size: 1.2em;}
    h4{font-size: 1em;}
    h5{font-size: 0.85em;}
    p{font-size: 0.9em;}
    a{font-size: 0.8em;}

    .cover{height: 30vw;}
    
    .text-img{
        width: 80vw;
        flex-direction: column-reverse;
        text-align: center;
    }
    .text-left{width: 100%;}
    .img-right{width: 100%;}
    .img-right img{
        height: 40vw;
        margin-bottom: 15px;
    }

    .img-text{
        width: 80vw;
        flex-direction: column;
        text-align: center;
    }
    .text-right{width: 100%;}
    .img-left{width: 100%;}
    .img-left img{
        height: 40vw;
        margin: 15px;
    }
    
    
    .shop-button{
        font-size: 1em !important;
        margin-top: 5px;
    }

    .shop-button-2{
        margin:auto;
    }

    .one{padding: 8% 0% 8% 0%;}
    .two{padding: 10% 0% 10% 0%;}
    .three{padding: 8% 0% 8% 0%;}
    .four{padding: 10% 0% 10% 0%;}
    .five{padding: 8% 0% 8% 0%;}

    .boxes{
        width: 80vw;
        flex-direction: column;
        align-items: center;
    }

    .box{width: 90%;}

    .box+.box{
        margin-top: 25px;
    }

    .box img{width: 60%;}
    .box h5{width: 95%;}
}