/*------------------------------
        Media Query
------------------------------*/

@media all and (max-width: 1420px) {
        #viberItel {
                /* width: 30%; */
        }
        /* #viberItel a{ */
                /* height: 2em; */
        /* } */
        /* #viberItel .viber{ */
                /* margin-left: 20px; */
        /* } */
        #trece-dete h5{
                font-size: 1.2em;
                margin: 5px;
        }
        #contact-section .podaci2 #mapa iframe {
                width: 490px;
        }
        #about-section img {
                width: 450px;
        }

}

@media all and (max-width: 1200px) {
        #phone{
                font-size: 1.1em;
        }
        #phone a{
                width: 100%;
        }
        #viberItel{
                width: 40%;
        }
        #meniViber{
                font-size: 1.1em;
        }
        #meniViber a {
                width: 100%;
        }
        #paketi .paket h5{
                font-size: 1.1em;
        }
        #paketi p{
                line-height: 1.2em;
        }
        #paketi .paket{
                height: 120px;
        }
        #trece-dete h5{
                font-size: 1.2em;
                margin: 5px;
        }
        #about-section img {
                width: 370px;
 
        }
        #contact-section .podaci2 #mapa iframe {
                width: 380px;
                height: 380px;
        }

}

@media all and (max-width: 991px) {
        .logo img {
                width: 120px;
        }
        .nav-links {
                /* width: 50%; */
        }
        /* #phone{
                font-size: 1em;
                width: 25%;
                padding: 0px;
        } */
        /* #phone a{
                width: 100%;    
                font-size: 1em;
        } */
        #viberItel{
                width: 40%;
                font-size: 0.9em;
                /* order:2; */
        }
        /* #meniViber{
                font-size: 1em;
                width: 25%;
                padding: 5px;
        } */
        /* #meniViber a{
                width: 100%;
                font-size: 1em;
        } */
        /* #phone img {
                width: 40px;
        
        } */
        .nav-links li a {
                font-size: 1em;
                padding: 5px
        }
        #landing-section h1{
                font-size: 1.8em
        }
        #naslovna #paketi{
                min-width: 350px;
        }
        #naslovna #paketi .paket{
                height: 120px;
                line-height: 1.5em;
        }
        #paketi .paket h5{
                font-size: 1.3em;
        }
        #zastavice .opis{
                display:block;
        }
        #trece-dete .opis{
                display:none;
        }
        .circle-container{
                margin-left: -20px;
                margin-bottom: 30px;
        }

        #naslovna #trece-dete {
                width: 500px;
                margin:0 auto
        }
        #naslovna #trece-dete h5{
                justify-content: center;
        }
        #naslovna #trece-dete p{
               text-align: center;

        }
        #trece-dete h5{
                font-size: 1.3em;
                margin: 10px;
        }
        #about-section>div div:first-child{
                flex:0 0 100%
        }
        #about-section>div div:nth-child(2){
                flex:0 0 100%
        }
        #about-section img{
                width: 400px;
        }
        #contact-section>div {
                padding: 24px;
        }
        #contact-section .podaci2 #mapa iframe {
                width: 300px;
                height: 300px;
        }
        #footer>div div {
                flex: 0 0 50%;
        }

}


@media all and (max-width: 768px) {
        body{
                overflow-x: hidden;
        }
        .logo{
                width: 30%;
        }
        .nav-links{
                position: absolute;
                right: 0;
                top:12vh;
                height: 88vh;
                width: 30%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-evenly;
                background-color:var(--red);
                transform: translateX(100%);
                transition: transform 0.5s ease-in;
        }
        .nav-links li a{
                color: white;
        }
                
        .nav-links li{
                opacity: 0;
        }
        .burger>div{
                margin:5px auto
        }
        nav>div.burger{
                display: block;
                width: 10%;
                margin:0 auto;
                order:1
        }
        nav>div.burger{
                /* display: none; */
        }
        /* .burger{
                display: block;
        } */
        .nav-links {
                position: fixed;
        }
        /* #phone{
                font-size: 1em;
                width: 25%;
        }
        #phone a{
                width: 100%;    
                font-size: 1em;
        } */
        #meniViber{
                /* font-size: 1em; */
                /* width: 33%; */
                /* padding: 5px; */
        }
        /* #meniViber a{
                width: 100%;
                font-size: 1em;
        } */
        #viberItel{
                display: none;
        }
        #viberItel{
                /* order:1; */
                width: 60%;
        }
        #viberItel{
                display:flex;
                justify-content: space-evenly;
                /* width:100%; */
        }
        h1{
                font-size: 1.5em;
        }
        #paketi{
                width: 100%!important;
                padding: 30px;
                order:1;
        }
        #naslovna #paketi {
                min-width: 300px;
            }
        #naslovna #paketi .paket{
                height: 100px;
        }
        .opisi {
                padding: 0px;
        }
        #zastavice{
                margin-top: -50px;
        }
        #zastavice a.zaMapu {
                width: 150px;
                font-size: 1em;
        }
        #zastavice h4:first-child{
                margin-top: 80px;
        }
        .circle-container{
                margin-left: -20px;
        }
        #trece-dete{
                width: 100%!important;
                padding:30px;
                order:1
        }
        #naslovna #trece-dete h5{
                justify-content: left;
        }
        #naslovna #trece-dete p{
               text-align: left;

        }
        .usluga{
                padding: 10px;
                padding-top:13vh ;
        }

        h3{
                font-size:1.3em;
                width: 200px;
        }
        .menu-item-description{
                font-size: 1.1em;
                text-align: center;
                text-indent: 0;
        }
        #services-section .usluga ul{
                font-size: 1.1em;
        }

        #upload-section p.klik{
                margin-left:0;
        }

        #contact-section>div{
                padding: 10px;
                padding-top:20px ;
        }
        .podaci1>div{
                flex:0 0 100%;
                padding: 20px;
        }
        form{
                flex: 0 0 100%;
                padding: 20px;
        }
        #contact-section .podaci2>div{
                flex:0 0 100%;
                padding: 20px;
        }
        #contact-section .podaci2 #mapa iframe{
                width: 400px;
                height: 250px;
        }
        #contact-section #social-networks{
                /* margin-top: 50px; */
                margin-top: 50px;
        }
        #contact-section #social-networks a{
                margin:7px;
        }
        #contact-section .podaci2 #adrese{
                /* align-items: stretch; */
        }

        #footer>div div{
                flex:0 0 100%;
                text-align: center;
                margin-bottom:20px
        }
        #footer>div div:nth-child(2){
                flex:0 0 100%;
                text-align: center;
            }
        #footer{
                padding:30px 17px 50px 17px;
        }

        #footer .logo img{
                margin-top: 0px;
                margin-bottom: 0px;
        }

        
        
}

.nav-active{
        transform: translateX(0%);
}



@media all and (max-width: 480px) {
        #pozadina{
                padding-top: 15vh;
        }
        nav{
                height: 15vh;
                /* flex-direction: column; */
        }
        .nav-links{
                top:15vh;
                height: 85vh;
        }
        #viberItel{
                /* order:1; */
                width: 100%;
        }
        #services-section,
        #upload-section,
        #about-section,
        #contact-section {
                padding-top: 15vh;
        }
        nav>div.burger{
                width: 50%;
        }
        .logo>div.burger{
                display: block;
        }
        nav>div.burger {
                order: 0;
            }
        .logo {
                width: 50%;
                /* display: flex; */
                /* justify-content: space-around; */
        }
        .logo img{
                width: 135px;
                padding-top: 10px;
        }       
        /* #phone{
                display: none;
        } */
        /* #meniViber{
                display:none;
        } */
        .tel img{
                margin-left: 100px;
        }
        .nav-links{
                width: 40%;
        }
        .nav-links li a {
                font-size: 0.8em;
        }
        #landing-section{
                /* padding-top:12vh; */
        }
        #landing-section h1 {
                font-size: 1.3em;
        }
        #naslovna .dete{
                margin:0 auto
        }

        .paket p{
                font-size: 0.9em;
                line-height: 1.3em;
        }
        #zastavice h4{
                margin-top: 0px;
        }
        #zastavice h4:first-child{
                margin-top: 30px;
        }
        .circle-container{
                width: 15em;
                height: 15em;
                margin-top: 30px;
                margin-left: 30px;
        }
        .circle-container img{
                width: 70%;
        }
        .deg0 { transform: rotate(-16deg) translate(6em) rotate(16deg); } /* 6em = half the width of the wrapper */
        .deg36 { transform: rotate(15deg) translate(6em) rotate(-15deg); }
        .deg72 { transform: rotate(50deg) translate(6em) rotate(-50deg); }
        .deg108 { transform: rotate(90deg) translate(6em) rotate(-90deg); }
        .deg144 { transform: rotate(130deg) translate(6em) rotate(-130deg); }
        .deg180 { transform: rotate(165deg) translate(6em) rotate(-165deg); }
        .deg216 { transform: rotate(196deg) translate(6em) rotate(-196deg); }
        .deg252 { transform: rotate(230deg) translate(6em) rotate(-230deg); }
        .deg288 { transform: rotate(270deg) translate(6em) rotate(-270deg); }
        .deg324 { transform: rotate(310deg) translate(6em) rotate(-310deg); }

        .rezultat{
                width: 100px;
                height: 100px;
        }  
        #trece-dete {
                padding: 20px;
        }
        #trece-dete .opis{
                margin-top:20px
        }
        .usl p{
                text-indent: 0px;
                text-align: center;
        } 
        #about-section img{
                width: 250px;
        }
        #contact-section .podaci2 #mapa iframe{
                width: 250px;
        }
        #up{
                font-size:1.2em;
                right:2%;
                bottom:2%;
        }
        #footer{
                font-size:0.9em;
        }

}

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

}