.cover{
    background-image: url(/images/new/contact-cover.jpg) !important;
    background-position: 0% 35% !important;
}

.three{
    text-align: center;
}

.contact-map{
    width: 60vw;
    box-shadow: 3px 3px 5px 2px #00000040; 
}


.email2{
    display: none;
}

/*** BOX - 3 LAYOUT ***/


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

.box-3 img{
    width: 15% !important;
    margin: auto;
    padding-top: 7% !important;
    padding-bottom: 5% !important;
}

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

.box-3 p{
    width: 95%;
    margin: auto;
    padding: 0px 10px 10px 10px;
    font-size: 0.9em;
}

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


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

    .img-right img{
        margin-top: -60px;
    }
}

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

    .img-right{
        position: absolute;
        right: 0%;
        margin-top: -10px;
    }

    .img-right img{
        position: relative;
        height: 28vw !important;
        right: 18%;
    }
}

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

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

    .contact-map{width: 65vw;}
}

/******************************/ 
/* KONTAKT - LAPTOP */

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

    .contact-map{width: 65vw;}
}

/******************************/ 
/* KONTAKT - TABLET */

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

    .contact-map{width: 70vw;}
    
}

/******************************/ 
/* GLOBAL - MOBILNI */

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

    .contact-map{width: 80vw;}
}


/******************************/ 
/* BOXES - TABLET I MOBILNI */

@media only screen and (min-width: 675px) and (max-width: 1050px){
    
    .boxes{
        width: 80vw;
        flex-wrap: wrap;
    }

    .box-3{
        height: 26vh;
    }
    
    .box-3 img{
        width: 25% !important;
    }

    .box-3 h5{
        height: 13%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .box-3 p{
        font-size: 0.8em !important;
        width: 90%;
        margin: auto;

    }

    .email1{
        display: none;
    }

    .email2{
        display: block;
    }
}

@media only screen and (max-width: 675px){
    .boxes{
        flex-direction: column;
        align-items: center;
    }

    .box-3{
        margin-bottom: 30px;
        width: 80% !important;
    }

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

        .email1{
            display: none;
        }

        .email2{
            display: block;
        }

        .box-3 p{
            font-size: 0.7em !important;
            width: 95%;

            padding: 0px 0px 10px 0px;
        }

    }

}