/* Big tablets to 1200px (sirina je manja od naseg reda od 1140px, plus margine koje zelimo da imamo) */
@media only screen and (max-width: 1200px){

    body { font-size: 18px; }

    .main-nav-row { margin-right: 40px; }

    .main-nav li { margin-left: 20px; }

    .header-text { left: 20%; }

    .home-benefits .boxes { margin: 40px 30px; }

    .home-services .services { 
        padding: 0 20px;
        margin: 40px 30px;
    }

    .home-services .services img { height: 240px; }


    /* Strana usluge */
    .service .notes, .service-details .steps-tabs .tab-btn { padding: 10px 20px; }

    .service-details .steps-tabs .tab-btn-active { padding: 10px 20px; }

    /* Blog-grid */
    .news-section .news {
        margin: 1% 1.1%;
        width: 31%;
        height: 340px;
    }

    .news-section .news img { height: 170px; }


}


/* Small tablets to big tablets, from 768px to 1023px */
@media only screen and (max-width: 1023px){

    .main-nav-row { margin-right: 5px; }

    nav .logo { height: 43px; }

    .main-nav { padding-bottom: 15px; }

    .main-nav li { margin-left: 12px; }

    .header-text { left: 10%; }

    .home-benefits .boxes { margin: 40px 0px; }

    .home-benefits p { line-height: 140%; }

    .home-benefits .boxes .inside h3 { padding-top: 12px; }

    .home-services .services {
        padding: 0 0px;
        margin: 0px 20px;
    }

    .home-services .services img { height: 200px; }

    footer .row-1 { padding-left: 10%; }

    .service-details .steps-tabs {
        width: 28%;
        margin-left: 1%;
    }


    /* Strana usluge */
    .service img { height: 300px; }

    .service h1 {font-size: 200%;}

    /* Blog-grid */

    .news-section .news {
        width: 31%;
        height: 300px;
        margin: 1% 1%;
    }

    .news-section .news img { height: 150px; }

    .page-num { width: 70%; }
}


/* Small phones to small tablets, from 481px to 767px */
@media only screen and (max-width: 767px){
    
    .mobile-nav-icon { display: inline-block;}

    .main-nav { 
        display: none;
        float: left;
    }

    .main-nav li {
        display: block;
        float: none;
        padding-top: 10px;
    }

    .main-nav-row { font-size: 16px; }

    .main-nav .dropdown { position: relative; }

    .header-slide { background-position-x: 80%; }

    .home-benefits .outer {
        height: 150px;
        margin-bottom: 10px;
        margin-top: 10px;
        width: 80%;
        margin-left: 10%;
    }

    .home-benefits .boxes .inside { margin: 11px 11px; }

    .home-services .services-elements { width: 100%; }

    .home-services .services img {
        padding-left: 20%;
        padding-right: 20%;
    }

    h1 { font-size: 200%; }

    h2 {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .page-num div {
        float: none;
        width: 33%;
        margin: 20px 0;
    }

    .floating-phone { display: block; }

    /* Fiksna navigacija */
    .main-nav-row {
        position: fixed;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.959);
        box-shadow: 0 4px 4px rgb(231, 231, 231);
        z-index: 9999;
        font-size: 16px;
    }


    /* Strana usluge */

    .service { font-size: 17px; }

    .service img { height: 200px; }

    .service .col { float: none; }

    .service .left-col {
        width: 90%;
        line-height: 150%;
        padding-left: 0%;
        margin-left: 5%;
    }

    .service .right-col {
        margin-top: 50px;
        width: 60%;
        margin-left: 20%;
    }

    .service-details { font-size: 17px; }

    .service-details h2::before {
        width: 32px;  
        margin-left: -10px;
        transform: translate(-100%, 500%);
    }

    .service-details h2::after {
       
        width: 32px;
        margin-left: 10px;
        transform: translate(0, 500%);
        
    }

    .service-details .steps-tabs {
        float: none;
        width: 70%;
        margin-left: 15%;
    }

    .service-details .steps-tabs .tab-btn-active { padding: 10px 10px; }

    .service-details .steps-tabs .tab-btn { padding: 10px 10px; }

    .service-details .tabs-content {
        margin-left: 2%;
        width: 96%;
    }

    /* Blog-grid */
    .news-section .news {
        width: 80%;
        height: 300px;
        margin: 0 10% 5% 10%;
    }

    .news-section .news img { height: 190px; }

    .news-section .news .post-date { padding: 10px 10px; }

    .page-num { width: 100%; }

    .page-num div {
        float: none;
        width: 40%;
        margin: 20px 0;
        margin-left: 30%;
    }

    /* Kontakt strana */
    .contactP-info .left-col,
    .contactP-info .right-col {
        padding: 0% 2%;
        width: 100%;
    }

    .contactP-info .boxes-left, .contactP-info .boxes-right {
        float: none;
        margin: 0 20%;
    }

    .contactP-info .right-col iframe {
        float: none;
    }

    .section-form .contact-form {
        width: 60%;
        margin-left: 20%;
    }


}




/* Small phones from 0 to 480px */
@media only screen and (max-width: 480px){

    body { font-size: 17px; }

    .header-text { left: 5%; }

    .home-benefits .outer { height: 170px; }

    .home-benefits h2::before,
    .home-benefits h2::after { display: none;}

    


    /* Strana usluge */

    .service,
    .service-details { font-size: 16px; }

    .service .left-col { margin-left: 10%; }

    .service-details h2 {
        padding-top: 30px;
        margin-bottom: 30px;
    }

    .service-details h2::before,
    .service-details h2::after { display: none;}

    .service-details .steps-tabs .tab-btn { padding: 7px 10px; }

    .service-details .steps-tabs .tab-btn-active { padding: 7px 10px; }

    .service-details .tabs-content p { line-height: 120%; }


    /* Blog-grid */

    h1 { font-size: 150%; }

    .news-section .news {
        width: 90%;
        height: 200px;
        margin: 0 5% 5% 5%;
    }

    .news-section .news img { height: 100px; }

    .news-section .news .post-date { padding: 5px 10px; }

    .news-section .news h4 {
        font-size: 17px;
        padding: 0 5px;
    }

    .news-section .news .btn-box {
        margin-top: 5px;
        float: right;
        padding: 5px 10px;
        font-size: 80%;
    }

    .page-num div {
        width: 80%;
        margin-left: 10%;
    }


    /* Kontakt strana */

    .contactP-info .boxes-left, .contactP-info .boxes-right {
        margin: 0 5%;
    }

    .section-form .contact-form {
        width: 80%;
        margin-left: 10%;
    }

}