#main{
    position: relative;
    background-color: var(--color3);
}

#section1{
    position: relative;
}
    #video1{
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

#section2{
    position: relative;
    background-image: url("../pictures/fondo2.jpg");!important;
    background-size: cover;
    background-position: center center;
}

#section3{
    position: relative;
    min-height: 75vh;
}
    #picture1{
        background-image: url("../pictures/branding.jpg");
        background-size: cover;
        background-position: center center;
        position: relative;
        min-height: 75vh;
    }
    #picture2{
        background-image: url("../pictures/marketing.jpg");
        background-size: cover;
        background-position: center center;
        position: relative;
        min-height: 75vh;
    }
    #picture3{
        background-image: url("../pictures/desarrollo.jpg");
        background-size: cover;
        background-position: center center;
        position: relative;
        min-height: 75vh;
    }
        .pictureText{
            position: absolute;
            display: flex;
            align-items: center;
            text-align: center;
            left: 0;
            right: 0;
            bottom: 0;
            height: 20vh;
            background-color: var(--color2-shadow);
            cursor: pointer;
            text-decoration: none;
        }

        .pictureText > p{
            display: inline-block;
            width: 100%;
            color: white; !important;
        }

        .pictureText:hover{
            background-color: var(--color1-shadow);
        }

        .pictureText:hover > p{
            color: var(--color2) !important;
        }

#section4{
    position: relative;
    background-image: url("../pictures/fondo2.jpg");
    background-size: cover;
    background-position: center center;
}

#slider{
    overflow: hidden;
}

#sliderContent{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    transition: all 0.3s ease-in;
}

    .sliderItem{
        width: 350px;
        height: 350px;
    }

        .points{cursor: pointer;}

        .iconActive{
            fill: var(--color1); !important;
        }

        .iconInactive{
            fill: var(--color1-shadow);
        }


#section5{
    position: relative;
    min-height: 25vh;
    display: flex;
    align-items: center;
}

#section6{
    position: relative;

}

#section8{
    position: relative;
    min-height: 25vh;
    display: flex;
    align-items: center;
}

#section9{
    position: relative;
}