.hero-image{
    background-image: url('../../assets/images/referenz/hipisland/hero/opt-hipisland.jpg');
}

.projekt-beschreibung-image{
    width: unset;
    height: 200px;
    /* max-height: 200px; */
    margin: 3em 0em;
    background-image: url('../../assets/images/referenz/hipisland/opt-tikimask-hipisland.png');
    background-size: cover;
    background-position: center;
}

.projekt-beschreibung-inserted-image{
    max-width: 150px;
    /* animation: animateProjectDescriptionImages 10s ease-in-out infinite; */
}

.herausforderungen-image{
    background-image: url('../../assets/images/referenz/hipisland/opt-hipatnight-hipisland.jpg');
}

.loesung-image > img{
    position: absolute;
    max-height: 150px;
    filter: brightness(.8);
}

.loesung-image img:nth-child(1){
    top: 5%;
}

.loesung-image > img:nth-child(2){
    top: 30%;
    right: 0%;
}

.loesung-image > img:nth-child(3){
    top: 50%;
    left: 30%;
}

.loesung-image > img:nth-child(4){
    top: 70%;
    left: 0%;
    transform: scale(100%);
}

.loesung-ergebnis-trenn-image{
    background-image: url('../../assets/images/referenz/hipisland/opt-steg-hipisland.jpg');
}

/* ----- Keyframes ----- */

@keyframes animateProjectDescriptionImages{

    0%{
        transform: scale(100%);
    }

    50%{
        transform: scale(90%);
    }

    100%{
        transform: scale(100%);
    }

}

/* ----- Mediaqueries ----- */

/* Ganz kleine Größen wie z.B. iPhone 4 */
@media (max-width: 320px){

 

}

/* Größer als Standardgröße */

@media (min-width: 380px){

    .projekt-beschreibung-image {
        height: 250px;
        margin: 5em 0em;
    }

}

@media (min-width: 500px){

    .projekt-beschreibung-image {
        height: 300px;
    }

}

@media (min-width: 650px){

    .projekt-beschreibung-image {
        margin: 6em auto;
        height: 350px;
        max-width: 750px;
    }

}

@media (min-width: 768px){

    

}

@media (min-width: 992px){

   

}

@media (min-width: 1200px){

    .projekt-beschreibung-image{
        margin: 7em auto;
        max-width: 750px;
        min-height: 350px;
        max-height: 350px;
    }
    
}

@media (min-width: 1400px){

  
    
}

@media (min-width: 1700px){

    
    
}

@media (min-width: 1920px){

    

}