.video-container {
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgba(186, 186, 186, 0.5);
}

.video-container .video-placeholder {
    background-size: cover;
    background-position: center;	
    width: 100%; 
    height: 100%; 
    border: none; 
    border-radius: 0;
}

.video-container .video-content {
    padding: 3rem;
}

.video-container .txt-light {
    color: #666;
}

.video-container .btn-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-container .btn-play-bg {
    background-color: #fff;
    border-radius: 50%;
    width: 6rem;
    height: 6rem;
    display: inline-block;
}

.video-container .btn-play-bg .btn-play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent #39c38e;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-40%, -50%);
    transform: translate(-40%, -50%);
    border-width: 15.5px 0 15.5px 25px;
}

.video-container .btn-play-bg:hover {
    opacity: 0.7;
    background-color: #999;
    transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.video-container .btn-play-bg:hover .btn-play {
    border-color: transparent transparent transparent $white;
}

.video-container .btn-play-bg:active {
    border: #fff 4px solid;
}

.video-container.video-container__hero {
    height: auto;
    position: relative;
}

.video-container.video-container__hero  .video-placeholder {
    background-size: cover; 
    width: 100%;
    min-height: calc(75vh - 95px); 
    border: none; 
    border-radius: 0;
}     

.video-container.video-container__hero  .btn-play {
    position: absolute;
    left: 50%;
    top: calc(calc(75vh - 95px)/2);
    transform: translate(-50%, -50%);
} 

@media screen and (min-width: 768px) {
    .video-container .txt-light {
        color: #fff;
    }

    .video-container .video-overlay {
        position: absolute; 
        top: 0; 
        bottom: 0; 
        right: 0; 
        left: 0;
    }
	
    .video-container .video-overlay.top-dark-bg {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(51, 51, 51, 0.4));
    }

    .video-container .video-overlay.bottom-dark-bg {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(51, 51, 51, 0.4));
    }

    .video-container .video-overlay.top-light-bg {
        background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4));
    }

    .video-container .video-overlay.bottom-light-bg {
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4));
    }

    .video-container .video-content {
        padding: 3rem;
        position: absolute;
    }
	
    .video-container .video-content.video-content__top-center {
        top: 0; 
        left: 50%; 
        transform: translateX(-50%);
    }

    .video-container .video-content.video-content__bottom-center {
        bottom: 0; 
        left: 50%; 
        transform: translateX(-50%);
    }

    .video-container .video-content.video-content__top-left {
        top: 0; 
        left: 0;
    }

    .video-container .video-content.video-content__bottom-left {
        bottom: 0;
        left: 0;
    }
	
    .video-container.video-container__hero{
        height: calc(75vh - 95px);
    }
	
    .video-container.video-container__hero  .video-placeholder{
        height: 100%; 
        min-height: auto;
    }
	
    .video-container.video-container__hero  .btn-play {
        top: 50%;
    }
	
    .video-container .btn-play-bg {
        width: 9rem;
        height: 9rem;
    }
	
    .video-container .btn-play-bg .btn-play-icon {
        border-width: 22.5px 0 22.5px 35px;
    }
}