* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

.pre-header {
    background-color: rgb(46, 46, 46);
    height: 70px;
    padding-right: 100px;
}

.pre-header .col-md-5{
    padding-left: 100px;
}

.pre-header .col-md-7 {
    margin-top: -10px;
}

.navbar {
    margin-left: 500px;
    background-color: aqua;
}

.pre-header li {
    list-style: none;
    display: inline-block;
    margin: 10px;
}

.main-nav {
    height: 60px;
    background-color: rgb(46, 46, 46);
}
.main-nav .main-menu a {
    text-decoration: none;
}

.main-nav .main-menu {
    list-style: none;
    padding-left: 90px;
    margin-top: 20px;

}

.main-nav  .main-menu li {
    display: inline-block;
    margin-left: 20px; font-weight: bold;
    text-decoration: none;

}

.main-nav  .main-menu li a {
    color: rgb(22, 22, 22);
    text-transform: uppercase;
    color: white;
}

.main-nav .main-menu .free-quote-btn a {
    background-color: rgb(22, 22, 22);
    border: 1px solid #ffffffa4;
    padding: 10px;
    color: white;
    text-decoration: none;
    transition: 0.4s;
}

.main-nav .main-menu .free-quote-btn a:hover {
    color: #ffffff;
    background-color: transparent;
    text-decoration: none;
}

.about-us {
    text-align: center;
}

.about-us h1 {
    font-weight: bold;
    margin-top: 40px;
    font-family: "Cookie";
}

.about-us p {
    font-size: 23px;
    margin-top: 60px;
    margin-bottom: 80px;
}

.slika {
    text-align: center;
    background-color: rgb(226, 226, 226);
}

@media only screen and (max-width: 415px){.slika{display: flex;height: 340px;}}@media only screen and (max-width: 414px){.slika{display: flex;height: 339px;}}@media only screen and (max-width: 413px){.slika{display: flex;height: 338px;}}@media only screen and (max-width: 412px){.slika{display: flex;height: 337px;}}@media only screen and (max-width: 411px){.slika{display: flex;height: 336px;}}@media only screen and (max-width: 410px){.slika{display: flex;height: 335px;}}@media only screen and (max-width: 409px){.slika{display: flex;height: 334px;}}@media only screen and (max-width: 408px){.slika{display: flex;height: 333px;}}@media only screen and (max-width: 407px){.slika{display: flex;height: 332px;}}@media only screen and (max-width: 406px){.slika{display: flex;height: 331px;}}@media only screen and (max-width: 405px){.slika{display: flex;height: 330px;}}@media only screen and (max-width: 404px){.slika{display: flex;height: 329px;}}@media only screen and (max-width: 403px){.slika{display: flex;height: 328px;}}@media only screen and (max-width: 402px){.slika{display: flex;height: 327px;}}@media only screen and (max-width: 401px){.slika{display: flex;height: 326px;}}@media only screen and (max-width: 400px){.slika{display: flex;height: 325px;}}@media only screen and (max-width: 399px){.slika{display: flex;height: 324px;}}@media only screen and (max-width: 398px){.slika{display: flex;height: 323px;}}@media only screen and (max-width: 397px){.slika{display: flex;height: 322px;}}@media only screen and (max-width: 396px){.slika{display: flex;height: 321px;}}@media only screen and (max-width: 395px){.slika{display: flex;height: 320px;}}@media only screen and (max-width: 394px){.slika{display: flex;height: 319px;}}@media only screen and (max-width: 393px){.slika{display: flex;height: 318px;}}

.tradicija h1 {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}

.tradicija h2 {
    text-align: center;
    margin-top: 30px;
    margin-left: 30px;
}

.tradicija p{
    text-align: center;
    margin-top: 30px;
    font-size: 21px;
    margin-left: 30px;
    font-weight: 55;
}

.narudzba {
    text-align: center;
    background-color: rgb(226, 226, 226);
    margin-top: 80px;
}

.narudzba h1 {
    margin-top: 30px;
    font-size: 38px;
    font-weight: bold;
    color: black;
}

.narudzba h5{
    margin-top: 20px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 50px;
}


.narudzba1 {
    background-color: rgb(226, 226, 226);
    text-align: center;
}

.narudzba1 h1{
    margin-top: 30px;
}

.narudzba1 p{
    font-size: 20px;
    font-weight: 600;
    padding-top:  10px;
}

.narudzba1 .col-md-6 p{
    margin-top: 20px;
}

.ranc{
    text-align: center;
    margin-top: 50px;
}

.ranc h1{
    font-weight: bold;
}

.ranc p{
    font-size: 22px;
}

.kontakt{
    text-align: center;
    background-color: rgb(226, 226, 226);
}

.kontakt h1{
    font-weight: bold;
    margin-top: 50px;
}

.kontakt h4{
    font-size: 25px;
    margin-top: 15px;
    font-weight: 600;
}

.kontakt h3{
    font-size: 22px;
}

.kontakt h2{
    font-weight: bold;
    font-size: 24px;
    margin-top: 20px;
}

.kontakt p{
    margin-top: 70px;
    margin-bottom: 90px;
}

.jato{
    margin-left: -15px;
}

.slike1{
    background-color: rgb(226, 226, 226);
}

.vidimo-se{
    text-align: center;
    margin-top: 150px;
}

.vidimo-se span{
    margin-top: 50px;
}

.vidimo-se h1{
    font-size: 28px;
    font-weight: 680;
    margin-bottom: 100px;
    margin-top: 50px;
}

.vidimo-se .facebook{
    margin-bottom: 50px;
}

.vidimo-se ul li{
    display: inline-block;
    margin: 15px;
}

.recenzije{
    padding: 30px;
    padding-left: 100px;
}

.recenzije h1{
    text-align: center;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 80px;
}

.kraj{
    background-color: rgb(29, 29, 29);
}

.kraj .asdf{
    margin-top: 20px;
}

.kraj h3{
    color: white;
    font-size: 17px;
    margin-bottom: 40px;
    margin-top: 40px;
}

.kraj .kompas {
    margin-bottom: px;
    margin-left: 300px;
}

/* Tablet */



@media (min-width: 414px) and (max-width: 768px){
    
    .pre-header {
        background-color: rgb(46, 46, 46);
        height: 70px;
        padding-right: 100px;
    }

    .pre-header .kuharic{
        display: none;
    }

    .main-nav .col-md-1{
        display: none;
    }

    .main-nav .main-menu .free-quote-btn a {
        background-color: rgb(46, 46, 46);
        border: 0px solid #ffffffa4;
        padding: 0px;
        color: white;
        text-decoration: none;
        transition: 0.4s;
    }
    
    .main-nav .main-menu .free-quote-btn a:hover {
       display: none;
    }

    .slika{
        display: flex;
        height: 632px;        
    }

    .narudzba1 .janjac{
        width: 100%;
    }

    .kontakt h4{
        font-size: 23px;
        margin-top: 15px;
        font-weight: 600;
    }

    .kontakt .mapa{
        width: 100%;
    }

    .jato {
        width: 100%;
        margin-left: 0px;
    }

    .roze {
        width: 100%;
    }

    .vidimo-se span{
        margin-top: 50px;
        width: px;
    }

    .kraj .col-md-4{
        width: 100%;
    }
}

@media (min-width: 415px) and (max-width: 991px){
    .jato {
        width: 800px;
        margin-left: 0px;
        height: 700px;
    }

    .roze {
        width: 800px;
        height: 800px;
    }
}

@media (min-width: 769px) and (max-width: 1600px){
    .recenzije{
    display: none;
}
}

/* Mobitel */

@media (min-width: 1px) and (max-width: 414px){
    
    .pre-header {
        background-color: rgb(46, 46, 46);
        height: 70px;
        padding-right: 100px;
    }

    .pre-header .kuharic{
        display: none;
    }

    .main-nav .col-md-1{
        display: none;
    }

    .main-nav .main-menu .free-quote-btn a {
        background-color: rgb(46, 46, 46);
        border: 0px solid #ffffffa4;
        padding: 0px;
        color: white;
        text-decoration: none;
        transition: 0.4s;
    }
    
    .main-nav .main-menu .free-quote-btn a:hover {
       display: none;
    }

    .section h4{
        font-size: 1px;
    }

    .slika{
        display: flex;
        height: 335px;        
    }

    .narudzba1 .janjac{
        width: 100%;
        height: 100%;
    }

    .kontakt h4{
        font-size: 23px;
        margin-top: 15px;
        font-weight: 600;
    }

    .kontakt .mapa{
        width: 100%;
    }

    
    .jato {
        width: 100%;
        margin-left: 0px;
        height: 100%;
    }

    .roze {
        width: 100%;
        height: 100%;
    }

    .vidimo-se span{
        margin-top: 50px;
        width: px;
    }

    .kraj .col-md-4{
        width: 100%;
    }
}


@media (min-width: 1px) and (max-width: 414px){
    .slika{
        display: flex;
        height: 340px;
    }

    .main-nav .main-menu{
        margin-top: -20px;
    }
}

@media (min-width: 415px) and (max-width: 600px){
    .slika{
        display: flex;
        height: 450px;
        text-align: center;
    }
}

@media (min-width: 414px) and (max-width: 768px){
     .janjac{
        display: flex;
        height: 100%;
        width: 100%;
    }

    .roze {
        height: 100%;
        width: 100%;
    }

    .jato{
        height: 100%;
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1900px){
    .janjac{
       display: flex;
       height: 100%;
       width: 100%;
   }
}

@media (min-width: 600px) and (max-width: 730px){
    .slika{
        display: flex;
        height: 550px;
        text-align: center;
    }
}

@media (min-width: 415px) and (max-width: 768px){
        .tradi{
        margin-left: 70px;
    }
}

@media (min-width: 768px) and (max-width: 1200px){
    .tradi{
        height: 270px;
        width: 270px;
    }

    .narudzba1 .janjac {
        height: 50%;
    }
    
    .main-nav .main-menu .free-quote-btn a {
        background-color: rgb(46, 46, 46);
        border: 0px solid #ffffffa4;
        padding: 0px;
        color: white;
        text-decoration: none;
        transition: 0.4s;
    }
    
    .main-nav .main-menu .free-quote-btn a:hover {
       display: none;
    }

}