/*zavelike tablice do 1200px: 1024px - 1200px*/
@media only screen and (max-width: 1200px){
    /*Head*/
    .hero-text-box{
        width: 100%;
        padding: 0 2%;
    }
    .row{ padding: 0 2%; }/*velja za vse vrstice*/
}

/*za majhne tablice do velikih tablic: 768px - 1023px*/
@media only screen and (max-width: 1023px){
    body {font-size: 18px;}/*ker so vsi fonti v procentih se vsi fonti spreminjajo, ker so odvisni od base */
    section{
        padding: 60px 0;
    }
    
    .long-copy{
    width: 80%;/*30% ostane*/
    margin-left: 10%;/*50% od ostanka(20%) pa je 10% tako lahko poravnamo na sredino brez težav*/
}
    
    .steps-box{margin-top: 10px;}
    .steps-box:last-child{ margin-top: 10px; }
    .works-step { margin-bottom: 40px; }
    .works-step:last-of-type { margin-bottom: 80px; }
    
    .app-screen { width: 50%;}
    
    .icon-small{ 
        margin-right: 5px;
        width: 17px;
    }
    .city-feature{ font-size: 90%; }
    
    .plan-box{
        width: 100%;
        margin-left: 0%;
    }
    
    .plan-price{ font-size: 250%;}
    
    .contact-form{ width: 90%; }
 }


/*za majhne telefone do majhnih tablic: 481px - 767px*/
@media only screen and (max-width: 767px){
    body{
        font-size: 16px;
    }
    section{ padding: 30px 0; }
        .row,.hero-text-box{ padding: 0 4%;}
    
    .col {
        width: 100%;
        margin: 0 0 4% 0;/*bottom ima 4%*/
    }
    
    .main-nav{ display: none;}
    .mobile-nav-icon{ display: inline-block;}
    
    .main-nav{ float: left;
        margin-top: 30px;
        margin-left: 25px;
    }
    
    .main-nav li{ display: block; }/*el. so en na drugem*/
    
    .main-nav li a:link,
    .main-nav li a:visited{
        display: block;
        border: 0;/*na tel, ne moremo hver zato je border 0*/
        padding: 10px 0;
        font-size: 100%;
    }
    
    .sticky-nav .main-nav{ margin-top:10px; }

    .sticky-nav .main-nav li a:link,
    .sticky-nav .main-nav li a:visited{ padding: 10px 0; }

    .sticky-nav .logo{display: none;}
    .sticky-nav .logo-black{display: block;}
    .sticky-nav .mobile-nav-icon i{margin-top: 10px;}
    .sticky-nav .mobile-nav-icon i{color: #555;}
    
    h1{ font-size: 180%; }
    h2{ font-size: 150%; }
    
    .long-copy{
        width: 100%;
        margin-left: 0%;
    }
    
    .steps-box:first-child{ text-align: center; }
    
    .app-screen{ width: 40%; }
    
    .works-step div{
        height: 40px;
        width: 40px;
        margin-right: 15px;
        padding: 4px;
        font-size: 120%;
    }
    

    .works-step { margin-bottom: 20px; }
    .works-step:last-of-type { margin-bottom: 20px; }
    
.map-box{
    width: 100%;
    height: auto;
}
.map{
    width: 100%;
    height: 300px;
    position: relative;
}

.form-box{
    width: 100%;
    height: auto;
    padding: 30px 0;
    position: relative;
    }

    
}

/*za majhne telefone: 0 - 480px*/
@media only screen and (max-width: 480px){
    section {padding: 25px 0;}
    contact-form{width: 100%;}
}