html {
  scroll-behavior: smooth;
}

/************************
GENERAL
************************/
.video-solutions {
    scroll-behavior: smooth;
}

#solutions-contact-container {
    display: none;
}

.solutions-contact-content {
    display: none;
}

/************************
BANNER
************************/
.video-solutions-banner {
    height: 40vh;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 3rem;
}

/*.video-solutions-banner .black-overlay {*/
/*    position: absolute;*/
/*    height: 100%;*/
/*    width: 100%;*/
/*    background-color: black;*/
/*    opacity: .75;*/
/*}*/
.black-overlay {
    background-color: #000;
    opacity: 0;
}

.video-solutions-banner-text {
    position: absolute;
    color: white;
    text-align: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-solutions-banner-text h1 {
    font-size: 3.6rem;
    font-weight: 600;
}

.video-solutions-banner-text p {
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 1.5px;
}

/************************
TABLE OF CONTENTS
************************/
.table-of-contents {
    position: sticky;
    top: 0;
    text-align: left;
    color: #303030;
}

.table-of-contents h3 {
    /*font-family: 'Neuzeit Grotesk', 'Helvetica Neue', sans-serif;*/
    font-size: 1.4rem;
    padding: 1.4rem 0 1.2rem 0;
    font-weight: 500;
    margin-bottom: 0.7em;
    border-bottom: 1px solid #bbb;
}

.table-of-contents a {
    display: block;
    font-size: 1.1rem;
    line-height: 20px;
    color: #04344A;
    padding: 1rem 1.5rem 0.8rem 1.5rem;
}

.table-of-contents .nav-link.active,.table-of-contents .nav-link:hover {
    text-decoration: none;
    background: #990000;
    color: #fff;
    transition: 0.3s all ease-in-out;
}


/************************
CAROUSEL
************************/
/*.list-of-videos div {
    padding-bottom: 2rem;
}*/

.list-of-videos h1 {
    text-align: left;
    font-size: 2.1rem;
    padding: 0.5rem 0;
    font-weight: 500;
    color: #04344A;
}

.list-of-videos a:hover {
    text-decoration: none;
}

.owl-carousel div {
    text-align: center;
}

.owl-carousel h2 {
    font-size: 1.12rem;
    line-height: 1.6rem;
    font-weight: 400;
    color: #000;
    padding: 0.8rem 0rem;
}

.owl-carousel p {
    font-size: 13px;
    color: #777;
    margin-top: 1rem;
}

.owl-carousel img {
    width: 100%;
}

/* note: fix the !important issues later */
.owl-nav {
    font-size: 2rem;
    position: absolute;
    top: 30%;
    width: 100%;
    transform: translateY(-50%);
    font-family: 'porto';
    opacity: 0.2;
}

.owl-nav .owl-next {
	position: absolute;
    right: 10px;
}

.owl-nav .owl-prev {
	position: absolute;
    left: 10px;
}

.owl-nav:hover {
	opacity: 1;
}

/*.owl-carousel .owl-stage-outer {
	width: 94%;
	margin: 0 auto;
}*/

.color_carousel_button_dark {
    color: #333333;
}

.color_carousel_button_white {
    color: white;
}

.video-list-div {
	margin-bottom: 3em;
}

.video-list-div .video-desc {
    display: none;
}

#modalPlaylist > .uk-modal-body {
	width: auto;
	max-width: 100% !important;
	padding: 3em;
}

#modalPlaylist .nav {
	background-color: #f7f7f7;
}

#modalPlaylist .nav-item {
	padding: 1em;
	font-size: 1.2em;
	text-decoration: none;
}



#modalPlaylist .nav-item:hover {
	background-color: #d7d7d7;
}

#modalPlaylist .nav-item.active {
	background-color: #eee;
	color: #900;
}

#modalPlaylist .nav-item .desc {
	display: none;
}

#modalPlaylist .pl-list-title {
	padding: 1em;
	background-color: #ddd;
	margin: 0;
}

#modalPlaylist .pl-video-title {
	margin-top: 1em;
}

#modalPlaylist .pl-video-desc {
	margin-top: 1em;
}


@media (max-width: 576px) {
    .solutions-navigation-tabs {
        list-style: none;
        font-size: 1.2em;
        -webkit-flex-direction: column;
        flex-direction: column;
        padding: 0;
        font-weight: 200;
        max-height: 689px;
        text-align: left;
        overflow-y: scroll;
    }

    .solutions-navigation-tabs::-webkit-scrollbar {
        width: 0 !important;
    }

    .video-solutions-banner {
        height: 32vh;
    }

    .video-solutions-banner-text h1 {
        font-size: 2.6rem;
    }

    .owl-carousel h2 {
        padding: 1rem;
    }

    .owl-carousel img {
        width: 90%;
    }

    .owl-carousel div {
        padding: 0rem;
    }

    .list-of-videos h1 {
        font-size: 1.8rem;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .owl-carousel h2 {
        font-size: 1rem;
        line-height: 1.4rem;
    }
}

@media (min-width: 992.1px) and (max-width: 1199.99px) {
    .owl-carousel h2 {
        font-size: 1rem;
        line-height: 1.4rem;
    }
}