﻿/*################################################### MEDIA ##########################################################*/

@media (max-width: 440px) {

    .phone_number p {
        display: none;
    }

}

@media (max-width: 580px) {

    .phone_number p {
        font-size: 20px;
    }

}

@media (max-width: 1400px) {

    .nav img{
        padding-right: 20px;
    }

    .phone_number p {
        padding-left: 20px;
    }

}

/*############################################# LISTA USLUGE #####################################################*/

@media (max-width: 700px) {

    .hidraulicni_uredjaji .row .uredjaj {
        padding-left: 50px;
        padding-right: 50px;
        margin-bottom: 100px;
    }

    .hero-section {
        height: 460px;
    }

    .background2 {
        height: 460px;
    }

}

@media (max-width: 1000px) {

    #menuToggle {
        display: block;
    }

    .nav {
        max-height: 92px;
        padding-right: 20px;
        padding-left: 20px;
        justify-content: space-between;
    }

    .nav img{
        height: 60px;
    }

    .nav-links {
        display: none;
    }



    /*################################################### USLUGE #####################################################*/

    .usluge .row {
        padding-right: 20px;
        padding-left: 20px;
    }

    /*################################################### O NAMA #####################################################*/

    .o_nama .row{
        padding-right: 20px;
        padding-left: 20px;
    }

    /*################################################### PHONE NUMBER ###############################################*/

    .navigation {
        position: relative;
    }

    /*################################################### HERO SECTION ###############################################*/
    .hero-section {
        top: 92px;
        height: 460px;
        background-position: right 1px;
    }

    .hero-section .row {
        height: 100%;
        top: 0;
    }

    .hero-section .box {
        width: 100%;
        height: 100%;
        background-color: rgba(255, 174, 0, 0.4);
    }


    .hero-section .box h1 {
        text-align: center;
        padding: 0;
    }

    .slogan h1 {
        font-size: 30px;
    }

    /*################################################### POSLOVANJE #################################################*/

    .poslovanje .row {
        height: 260px;
    }

    .poslovanje .row button {
        margin-top: 10px;
    }

    /*#################################################### KONTAKT ###################################################*/

    #con1 { order: 2; }
    #con2 { order: 3; }
    #con3 { order: 1; }

    .kontakt .row #con1 {
        text-align: center;
    }

    .kontakt .row #con2 {
        text-align: center;
        padding-top: 60px;
    }

    .kontakt .row #con3  {
        padding-top: 40px;
    }

    .kontakt #con3 {
        text-align: center;
    }

    .kontakt #row3 {
        padding-right: 20px;
        padding-left: 20px;
    }

    .kontakt #row4 {
        padding: 0;
    }

    .kontakt #row5 {
        padding-right: 20px;
        padding-left: 20px;
    }

    .kontakt .row .container-fluid {
        width: 100%;
        height: 330px;
        padding: 0;
    }

    .kontakt .row #con1 p {
        padding-right: 40px;
        padding-left: 40px;
    }
    .kontakt .row #con2 p {
        padding-right: 40px;
        padding-left: 40px;
    }
    .kontakt .row #con3 p {
        padding-right: 20px;
        padding-left: 20px;
    }

}