.paragraph--type--hero-banner {
    height: 530px;
    overflow: hidden;
    position: relative;
}

.paragraph--type--hero-banner .field--name-field-hero-video,
.paragraph--type--hero-banner .field--name-field-hero-secondary-video,
.paragraph--type--hero-banner .field--name-field-hero-banner-image {
    height: 100%;
    right: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%);
    z-index: 2;
}

.paragraph--type--hero-banner .hero-banner-wide .field--name-field-hero-video,
.paragraph--type--hero-banner .hero-banner-wide .field--name-field-hero-secondary-video,
.paragraph--type--hero-banner .hero-banner-wide .field--name-field-hero-banner-image {
    width: 80%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
}

.paragraph--type--hero-banner .field--type-video-embed-field.hidden {
    display: none;
}

/*
.paragraph--type--hero-banner .field--name-field-hero-secondary-video {
    display: none;
}
*/

.paragraph--type--hero-banner .field--name-field-hero-banner-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 530px;
    object-fit: cover;
}

.paragraph--type--hero-banner .hero-banner-content {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    box-sizing: border-box;
    color: var(--color-primary-white);
    font-family: var(--font-secondary);
    overflow: hidden;
    position: absolute;
    height: calc(100% - var(--margin-medium));
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.paragraph--type--hero-banner .hero-banner-content.hero-banner-content-color-blue {
    background-color: var(--color-primary-blue);
    background-image: url("/themes/vendi2020/css/../images/banner-finger-print-blue.jpg");
}

.paragraph--type--hero-banner .hero-banner-content.hero-banner-content-color-dark-gray {
    background-color: var(--color-primary-dark-gray);
}

.paragraph--type--hero-banner .hero-banner-content.hero-banner-content-color-green {
    background-color: var(--color-primary-green);
}

.paragraph--type--hero-banner .hero-banner-content.hero-banner-content-color-red {
    background-color: var(--color-primary-red);
}

.paragraph--type--hero-banner .hero-banner-content-wrapper {
    font-size: var(--font-body-large);
    font-family: var(--font-secondary);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 8vw;
    box-sizing: border-box;
    width: 50%;
}

.paragraph--type--hero-banner .hero-banner-button {
    cursor: pointer;
    font-size: 0;
    margin-top: var(--margin-normal);
}

.paragraph--type--hero-banner .hero-banner-button .field {
    box-sizing: border-box;
    display: inline-block;
    font-size: var(--font-body-large);
    padding-right: var(--margin-medium);
    vertical-align: middle;
    width: auto;
}

.paragraph--type--hero-banner .hero-banner-button .field.hidden {
    display: none;
}

/*
.paragraph--type--hero-banner .hero-banner-button .field--name-field-hero-sec-video-button-text {
    display: none;
}
*/

.paragraph--type--hero-banner .hero-banner-button-icon {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
}

.paragraph--type--hero-banner .hero-banner-button-icon svg {
    height: auto;
    width: 100%;
}

.paragraph--type--hero-banner [data-current-toggle="secondary"] .hero-banner-button-icon svg {
    transform: rotate(180deg);
}

@media (max-width: 1660px) {
    
    .paragraph--type--hero-banner {
        height: 380px;
    }
    
    .paragraph--type--hero-banner .field--name-field-hero-video, 
    .paragraph--type--hero-banner .field--name-field-hero-secondary-video, 
    .paragraph--type--hero-banner .field--name-field-hero-banner-image {
        width: 50%;
    }
    
    .paragraph--type--hero-banner .hero-banner-content-wrapper {
        width: 58%;
    }
    
    .paragraph--type--hero-banner .field--name-field-hero-banner-image img {
        height: 380px;
    }
}

@media (max-width: 1280px) {
    
    .paragraph--type--hero-banner {
        height: 380px;
    }
    
    .paragraph--type--hero-banner .field--name-field-hero-video, 
    .paragraph--type--hero-banner .field--name-field-hero-secondary-video, 
    .paragraph--type--hero-banner .field--name-field-hero-banner-image {
        width: 60%;
    }
    
    .paragraph--type--hero-banner .hero-banner-content-wrapper {
        font-size: 2.5rem;
        width: 48%;
    }
    
    .paragraph--type--hero-banner .field--name-field-hero-banner-image img {
        height: 380px;
    }
    
    
}

@media (max-width: 1035px) {
    
    .paragraph--type--hero-banner {
        height: 100%;
        overflow: visible;
    }
    
    .paragraph--type--hero-banner .hero-banner-wide .field--name-field-hero-video, .paragraph--type--hero-banner .hero-banner-wide .field--name-field-hero-secondary-video, .paragraph--type--hero-banner .hero-banner-wide .field--name-field-hero-banner-image {
        width: 100%;
        clip-path: none;
    }

    .paragraph--type--hero-banner .field--name-field-hero-video,
    .paragraph--type--hero-banner .field--name-field-hero-secondary-video,
    .paragraph--type--hero-banner .field--name-field-hero-banner-image {
        height: 100%;
        right: auto;
        position: relative;
        top: auto;
        transform: none;
        width: 100%;
        clip-path: none;
        z-index: 2;
    }
    
    .paragraph--type--hero-banner .field--name-field-hero-banner-image img {
        display: block;
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
    }
    
    
    .paragraph--type--hero-banner .hero-banner-content {
        border-bottom: solid var(--margin-medium) var(--color-primary-white);
        box-sizing: border-box;
        color: var(--color-primary-white);
        font-family: var(--font-secondary);
        overflow: visible;
        position: relative;
        height: 100%;
        top: auto;
        left: auto;
        width: 100%;
        z-index: 1;
    }
    
    .paragraph--type--hero-banner .hero-banner-content-wrapper {
        font-size: var(--font-body-medium);
        position: relative;
        top: auto;
        transform: none;
        padding: 3rem 8vw;
        box-sizing: border-box;
        width: 100%;
    }
    
    .paragraph--type--hero-banner .field--name-field-hero-banner-image img {
        height: 100%;
    }
        
}