.main{
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow-y: hidden;

    .overlay{
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        background: rgba(0, 0, 0, .5);
        mix-blend-mode: multiply;
        z-index: 2;
    }

    & video {
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        height: 100vh;
        width: 100vw;
        pointer-events: none;
        z-index: 1;
    }

    .languages {
        position: absolute;
        top: 100px;
        right: 100px;
        height: 155px;
        width: 350px;
        display: flex;
        column-gap: 50px;
        z-index: 3;

        .language {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 10px solid white;
            opacity: .25;

            &.default, &.active {
                opacity: 1;
            }



            &.languageEs{
                background: url("../../assets/image/flags/es.png") left;
            }

            &.languageEn{
                background: url("../../assets/image/flags/en.png") left;
            }

            &.languageEs, &.languageEn{
                background-size: cover;
                background-repeat: no-repeat;
            }

            &:hover {
                opacity: 1;
                cursor: pointer;
                border-color: var(--borderHover);
            }
        }
    }

    .content{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2600px;
        overflow: hidden;
        text-align: center;
        z-index: 3;

        .brand{
            width: 20%;
            height: 300px;
            background: url("../../assets/image/logoPPIWhite.svg") no-repeat center;
            background-size: contain;
            margin: 0 auto;
        }

        .title{
            width: 100%;
            display: flex;
            column-gap: 25px;
            justify-content: space-between;
            align-items: center;


            .titleL,
            .titleR {
                display: flex;
                flex-direction: column;
                width: 40%;
                justify-content: space-between;
                height: 50px;
            }

            .titleL {
                align-items: flex-end;

                .titleBar {
                    display: block;
                    height: 5px;
                    background: var(--secondary);
                    align-content: flex-end;
                    -webkit-box-shadow: -1px 1px 3px 0px rgba(0, 0, 0, 0.75);
                    -moz-box-shadow: -1px 1px 3px 0px rgba(0, 0, 0, 0.75);
                    box-shadow: -1px 1px 3px 0px rgba(0, 0, 0, 0.75);
                    border-top-left-radius: 10px;
                    border-bottom-left-radius: 10px;
                }

                .titleBarL {
                    width: 100%;
                }

                .titleBarM {
                    width: 50%;
                }

                .titleBarS {
                    width: 25%;
                }
            }

            .titleR {
                .titleBar {
                    display: block;
                    height: 5px;
                    background: var(--secondary);
                    -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
                    -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
                    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
                    border-top-right-radius: 10px;
                    border-bottom-right-radius: 10px;
                }

                .titleBarM {
                    width: 50%;
                }

                .titleBarS {
                    width: 25%;
                }
            }

            .titleC {
                width: 20%;
                font-family: 'Anton';
                color: white;
                font-size: 6rem;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
                letter-spacing: -2px;
                font-style: italic;
            }
        }

        .buttonContainer{
            margin: 25px auto;
            width: 20%;

            .button {
                width: auto;
                text-transform: uppercase;
                font-family: Anton;

                .label{
                    font-size: 2rem;
                }
            }
        }

        .client{
            color: white;
            text-align: center;

            .label{
                font-size: 2rem;
            }

            .brand{
                width: 550px;
                height: 80px;
                background: url("../../assets/image/logoCompanyWhite.svg") no-repeat center;
                background-size: contain;
                margin: 25px auto;

            }
            .mine{
                font-size: 3rem;
            }
        }
    }
}