.vgi1 {
    @include outer-container;
    display: block;
    list-style-type: none;
    padding: 40px 0;
    border-bottom: 1px solid $color-grey-font;
}

.vgi-header {

    @include outer-container;

}

.vgi-header-title {

    @include span-columns(6);
    @include text-left;

    h2 {

        font-family: 'Lucien-bold';
        color: $color-golden;
        font-size: 2em;

    }

}

.vgi-header-infos {

    @include span-columns(6);
    @include omega();
    @include text-right;

    font-family: 'Lucien-book';
    color: $color-golden;
    font-size: 1.5em;

    .vgi-header-infos-type {
        display: inline-block;
        padding-right: 20px;
        border-right: 1px solid $color-grey-font;
    }

    .vgi-header-infos-users {
        display: inline-block;
        padding-left: 20px;
    }

    .vgi-header-infos-desc {
        display: inline-block;
        padding-left: 20px;
    }

}

.vgi-video-container {

    margin-top: 15px;
    position: relative;

}

.vgi-video {

    video {
        width: 100% !important;
        height: auto !important;
    }

}

.vgi-controls {

    position: absolute;
    top: 50%;
    margin-top: -58px;
    margin-left: -58px;
    left: 50%;
    color: $color-white;
    z-index: 101;

    @include mobile-landscape-and-below {

        margin-top: -29px;
        margin-left: -29px;

    }

}

.vgi-rules {
    position: absolute;
    z-index: 102;
    left: 20px;
    bottom: 25px;
}

.vgi-content {

    padding-top: 20px;

    p {
        font-family: 'Lucien-book';
        width: 80%;
        margin-left: 10%;
    }

}

.vgi-cta {
    @include text-center;
    padding-top: 20px;
}
