.text-image-video-container {background: #f7f7a3;padding: 60px 0;overflow: hidden; min-height: 411px;}
.tiv-bg {position: absolute;top: 0;left: 50%;width: calc(50% + 140px);height: 100%;margin-left: -140px;}
.tiv-bg img {width: 100%;height: calc(100% + 100px);object-fit: cover;}
.tiv-content {padding: 0 10% 0 5%;}
.tiv-content h3 {margin-bottom: 18px;font-size: 40px;line-height: 1.2;letter-spacing: -1px;}
.tiv-cta{padding-top: 5px;}
.tiv-shape{position: absolute;top: -30px;right: 50%; margin-right: -44px;height: calc(100% + 50px);width: auto;z-index: 1;}
.tiv-shape svg{height: 100%; width: auto; object-fit: contain; object-position: right;}
.white-bg .tiv-shape svg, .white-bg .tiv-shape-mob svg{fill:var(--white);}
.grey-bg .tiv-shape svg, .grey-bg .tiv-shape-mob svg{fill:var(--grey);}
.black-bg .tiv-shape svg, .black-bg .tiv-shape-mob svg{fill:var(--black);}
.purple-bg .tiv-shape svg, .purple-bg .tiv-shape-mob svg{fill:var(--purple);}
.green-bg .tiv-shape svg, .green-bg .tiv-shape-mob svg{fill:var(--green);}
.yellow-bg .tiv-shape svg, .yellow-bg .tiv-shape-mob svg{fill:var(--yellow);}
.dark-purple-bg .tiv-shape svg, .dark-purple-bg .tiv-shape-mob svg{fill:var(--dark-purple);}
.tiv-behind-shape{position: absolute; right: -15px; top: -5px; z-index: 1; height: calc(100% + 10px) !important; object-fit: cover; object-position: right;}
.tiv-mask {width: 100%; height: 100%; position: relative; z-index: 2; -webkit-mask-image: url(../../include/images/right-shape.png); mask-image: url(../../include/images/right-shape.png); -webkit-mask-size: auto 100%; mask-size: auto 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: right; mask-position: right;}
.tiv-mask img{height: calc(100% + 100px);object-fit: cover;width: 100%;}
.left-img .tiv-shape{margin-right: -163px;top: 0;height: 100%;width: calc(50% + 163px); z-index: 10;} 
.left-img .tiv-content{padding-left: 200px;}
.tiv-shape-mob{position: absolute;top: -85px;left:-50px;width: calc(100% + 100px);z-index: 1;z-index: -1;}
.tiv-shape-mob svg{height: auto;width: 100%;object-fit: contain;object-position: top;}
.tiv-play-btn{ width: 90px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; cursor: pointer; transition: var(--custom-ease);}
.tiv-play-btn:hover{transform: translate(-50%, -50%) scale(1.05);}
.tiv-play-btn img{width: 100%;}

/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) {

}

/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) {
.tiv-content{padding-right: 0;}
.tiv-cta{max-width: 260px;}
.text-image-video-container.left-img{min-height: 305px; padding: 45px 0;}
.text-image-video-container.left-img .tiv-content{padding-left: 312px;}
.text-image-video-container.left-img .tiv-shape{width: 296px; right: auto; left: 0; margin: 0;}
}

/* =================================================  
 ! Small devices (landscape phones, less than 768px)
 ================================================= */
@media (max-width: 767.98px){
.tiv-bg {position: relative;top: auto;left: auto;width: 100%;height: auto;margin-left: 0;height: 300px; z-index: 1;}
.tiv-bg img {width: 100%;height: calc(100% + 100px);}
.tiv-content{padding:5vw 0 0 0 !important;}
.tiv-content h3{font-size: 30px;}
.text-image-video-container{padding: 0 0 40px 0;}
.tiv-cta{max-width: 315px;margin: 0 auto;}
.tiv-mask{mask:none; -webkit-mask:none;}
.text-image-video-container.left-img .tiv-shape{position: relative; width: 100%; top: auto; right: auto; left: auto; overflow: hidden; background: var(--black);}
.text-image-video-container.left-img .tiv-content h3{font-size: 30px;}
.tiv-behind-shape{display: none;}
.text-image-video-container.left-img{padding: 0 0 40px;}
.tiv-image{background: var(--black);height: 305px;width: 100%;overflow: hidden;position: relative;}
.tiv-image>  img{height: 350px; width: 100%; object-fit: cover;}
.tiv-play-btn{width: 60px; margin-top: -40px;} 
}

/* ======================================================
! Extra small devices (portrait phones, less than 576px)
====================================================== */
@media (max-width: 575.98px){
 
}

/* ======================================================
! Extra small devices (portrait phones, less than 360px)
====================================================== */
@media (max-width:359.98px) {
}