/* CSS Document */


/*-------- HEADER AND HERO ---------*/
/*.heroshape-shadow { filter: drop-shadow(-1px 12px 12px rgba(50, 50, 0, 0.5)); }
.heroshape-shadow { filter: drop-shadow(-4px 4px 12px rgba(0, 0, 0, 0.9)); }
*/


.heroshape-home {
    position: relative;
    width: 100%;
    height: 60vh;
    background: url("/images/header-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center; }
@media (min-width: 920px) {
.heroshape-home {
    min-height: 100vh;  }
}


/*
.heroshape-home {
    position: relative;
    width: 100%;
    height: 68vh;
    background: url("/images/banner-home.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%) }
@media (min-width: 920px) {
.heroshape-home {
    min-height: 80vh;  
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 100%, 20% 60%, 0% 60%) }
} */

.heroshape-guide {
    position: relative;
    width: 100%;
    height: 68vh;
    background: url("/images/banner-guide.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%) }
@media (min-width: 920px) {
.heroshape-guide {
    min-height: 80vh;  
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 100%, 20% 60%, 0% 60%) }
}


.heroshape-products {
    position: relative;
    width: 100%;
    height: 68vh;
    background: url("/images/banner-products.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%) }
@media (min-width: 920px) {
.heroshape-products {
    min-height: 80vh;  
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 100%, 20% 60%, 0% 60%) }
}



.heroshape-lightvision {
    position: relative;
    width: 100%;
    height: 68vh;
    background: url("/images/banner-lightvision.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%) }
@media (min-width: 920px) {
.heroshape-lightvision {
    min-height: 80vh;  
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 100%, 20% 60%, 0% 60%) }
}


.heroshape-generic1 {
    position: relative;
    width: 100%;
    height: 68vh;
    background: url("/images/banner-generic1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%) }
@media (min-width: 920px) {
.heroshape-generic1 {
    min-height: 80vh;  
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 100%, 20% 60%, 0% 60%) }
}

.heroshape-generic2 {
    position: relative;
    width: 100%;
    height: 68vh;
    background: url("/images/banner-generic2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%) }
@media (min-width: 920px) {
.heroshape-generic2 {
    min-height: 80vh;  
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 100%, 20% 60%, 0% 60%) }
}

.heroshape-generic3 {
    position: relative;
    width: 100%;
    height: 68vh;
    background: url("/images/banner-generic3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%) }
@media (min-width: 920px) {
.heroshape-generic3 {
    min-height: 80vh;  
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 100%, 20% 60%, 0% 60%) }
}


.heroshape-about {
    position: relative;
    width: 100%;
    height: 68vh;
    background: url("/images/banner-about.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%) }
@media (min-width: 920px) {
.heroshape-about {
    min-height: 80vh;  
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 100%, 20% 60%, 0% 60%) }
}


.heroshape-girl1 {
    position: relative;
    width: 100%;
    height: 68vh;
    background: url("/images/banner-girl1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%) }
@media (min-width: 920px) {
.heroshape-girl1 {
    min-height: 80vh;  
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 100%, 20% 60%, 0% 60%) }
}

.heroshape-girl2 {
    position: relative;
    width: 100%;
    height: 68vh;
    background: url("/images/banner-girl2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%) }
@media (min-width: 920px) {
.heroshape-girl2 {
    min-height: 80vh;  
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 100%, 20% 60%, 0% 60%) }
}

.heroshape-girl3 {
    position: relative;
    width: 100%;
    height: 68vh;
    background: url("/images/banner-girl3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%) }
@media (min-width: 920px) {
.heroshape-girl3 {
    min-height: 80vh;  
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 100%, 20% 60%, 0% 60%) }
}