body{
    margin: 0;
    /*background-color: #272626;*/
    background: linear-gradient(100deg, #000000, #b4acac);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 9s ease infinite;
    -moz-animation: AnimationName 9s ease infinite;
    -o-animation: AnimationName 9s ease infinite;
    animation: AnimationName 9s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:35% 0%}
    50%{background-position:66% 100%}
    100%{background-position:35% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:35% 0%}
    50%{background-position:66% 100%}
    100%{background-position:35% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:35% 0%}
    50%{background-position:66% 100%}
    100%{background-position:35% 0%}
}
@keyframes AnimationName {
    0%{background-position:35% 0%}
    50%{background-position:66% 100%}
    100%{background-position:35% 0%}
}

h1{
    font-family: 'Overpass', sans-serif;
    letter-spacing: 4px;
    color: white;
    margin: 0;
    display: flex;
    justify-content: center;
    font-size: 7vw;
    margin-top: 3vw;
}


img {
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
}


img:hover{
    filter: none;
    -webkit-filter: none;
}

p{
    font-size: 1.5vw;
    font-family: 'Libre Franklin', sans-serif;
    color: white;
}

/*CONTAINER 1111*/
.container1{
    margin-top: 5%;
    display: flex;
}

.img1{
    width: 50%;
    left: 7%;
    position: relative;
}

.div-slika1{
    display: contents;
    position: relative;
}

.div-text1{
    position: relative;
    display: flex;
    align-items: center;
    width: 640px;
    padding-left: 3%;
}

/*CONTAINER 2222*/
.container2{
    display: flex;
}

.div-slika2{
    display: contents;
    position: relative;
}

.img2{
    /*width: 45%;
    padding-left: 25%;*/
    width: 450px;
    margin-top: -5%;
    position: relative;
    padding-left: 30px;
}

.div-text2{
    margin-left: 6%;
    width: 550px;
}

.text2{
    padding-top: 200px;
}

/*CONTAINER 3333*/
.img3{
    width: 650px;
    position: relative;
    margin-top: -5%;
    padding-left: 25%;
}

.container3{
    display: flex;
}

.div-slika3{
    position: relative;
}

.div-text3{
    position: relative;
    display: flex;
    align-items: center;
    width: 640px;
    padding-left: 8%;
}

/*CONTAINER 44444*/
.container4{
    display: flex;
}

.img4{
    width: 650px;
    position: relative;
    margin-top: -40px;
}

.div-slika4{
    position: relative;
}

.div-text4{
    margin-left: 6%;
    width: 550px;
    display: flex;
    align-items: center;
}

.text4{
    display: flex;
}

/*CONTAINER 5555*/
.img5{
    width: 450px;
    position: relative;
    margin-top: -10%;
    padding-left: 60%;
}

.container5{
    display: flex;
}

.div-slika5{
    position: relative;
}

.div-text5{
    position: relative;
    display: flex;
    align-items: center;
    width: 742px;
    padding-left: 15%;
}

/*CONTAINER 6666*/
.container6{
    display: flex;
}

.img6{
    width: 650px;
    position: relative;
    margin-top: -40px;
    padding-left: 4%;
}

.div-slika6{
    position: relative;
}

.div-text6{
    margin-left: 6%;
    width: 550px;
    display: flex;
    align-items: center;
}

.text6{
    display: flex;
}

/*CONTAINER 7777*/
.img7{
    width: 650px;
    position: relative;
    margin-top: -5%;
    padding-left: 25%;
    margin-bottom: 100px;
}

.container7{
    display: flex;
}

.div-slika7{
    position: relative;
}

.div-text7{
    position: relative;
    display: flex;
    align-items: center;
    width: 640px;
    padding-left: 8%;
}

.pocetna_back{
    margin-top: -2%;
    margin-left: 1%;
    position: fixed;
}

@media only screen and (max-width: 768px) {
    .mobile{
        display: block;
    }
    .desktop{
        display: none;
    }
    h1{
        font-size: 12vw;
        margin-top: 10vw;
    }
    p{
        font-size: 4vw;
    }
    img:hover {
        -webkit-filter: grayscale(100%); 
        filter: grayscale(100%);
      }
    /*CONTAINER 1111*/
    .container1{
        flex-direction: column;
    }
    .div-slika1{
        display: flex;
        position: relative;
        width: 100%;
        justify-content: center;  
    }
    .img1{
        width: 330px;
        left: 0;
        position: relative;
    }
    .div-text1{
        padding-left: 0;
        width: 100%;
        text-align: justify;
        text-justify: inter-word;
        margin-top: 5%;
    }
    .text1{
        padding-left: 5%;
        padding-right: 5%;
    }
}

@media only screen and (min-width: 769px) {
    .mobile{
        display: none;
    }
    .desktop{
        display: block;
    }
}

@media only screen and (min-width: 2400px) {
    .div-text1{
        width: 1055px;
    }
    .img2{
        width: 787px;
    }
    .container2{
        justify-content: center;
    }
    .div-text3{
        left: 18%;
    }
    .img3{
        padding-left: 65%;
        width: 895px;
    }
    .img4{
        width: 771px;
    }
    .div-text4{
        margin-left: 30%;
    }
    .div-slika5{
        left: 13%;
    }
    .img5{
        width: 645px;
    }
    .div-text5{
        padding-left: 30%;
    }
    .div-text6{
        margin-left: 20%;
    }
    .img6{
        width: 896px;
    }
    .img7{
        width: 773px;
        padding-left: 60%;
    }
    .div-text7{
        padding-left: 20%;
    }
}