@font-face {
	font-family: Gotham-Bold;
	src: url(../style/font/Gotham-Bold.otf);
}

@font-face {
	font-family: Gotham-Book;
	src: url(../style/font/Gotham-Book.otf);
}

@font-face {
	font-family: Gotham-Ultra;
	src: url(../style/font/Gotham-Ultra.otf);
}

@font-face {
	font-family: Aleo;
	src: url(../style/font/Aleo-VariableFont_wght.ttf);
}

@font-face {
	font-family: Aleo-Italic;
	src: url(../style/font/Aleo-Italic-VariableFont_wght.ttf);
}

.font-gotham-bold{
    font-family: Gotham-Bold;
}

.font-gotham-book{
    font-family: Gotham-Book;
}

.font-gotham-ultra{
    font-family: Gotham-Ultra;
}

.font-aleo{
    font-family: Aleo;
}

.font-aleo-italic{
    font-family: Aleo-Italic;
}

h4{
    margin-bottom: 0px;
}

p{
    font-family: Gotham-Book;
}

.bg-purple{
    background-color: #4f0a51;
}

.bg-black{
    background-color: #000;
    color: #fff;
}

.bg-brown{
    background-color: #2c241e;
    color: #fff;
}

.font-size-xs{
    font-size: 12px;
}

.font-size-lg{
    font-size: 65px;
    line-height: 1;
}

.position-text-center{
    position: absolute;
}

.section-banner{
    background: url(../images/endthefamilybusiness-banner.jpg) top center no-repeat;
    background-size: cover;
    min-height: 700px;
}

#banner-text{
    position: absolute;
    bottom: 10%;
    right: 0;
    left: 0;
}

.style-kerning-normal{
    letter-spacing: 15px;
}

.style-kerning-wide{
    letter-spacing: 20px;
}

.section-nowheretogo{
    background: url(../images/endthefamilybusiness-nowheretogo.jpg) bottom center no-repeat;
    background-size: cover;
    min-height: 350px;
    padding: 20px 0;
}

.section-contact{
    background: url(../images/endthefamilybusiness-contact.jpg) bottom center no-repeat;
    background-size: cover;
}

.video-title{
    font-size: 20px;
    text-transform: uppercase;
}

#playlist {
    display: flex;
    margin-left: -40px;
}

#playlist li{
    cursor:pointer;
    list-style-type: none;
    padding: 10px;
    margin-top: 15px;
}

#playlist button{
    border: none;
    padding: 0; 
}

#playlist button:focus{
    outline: none;
}

@media all and (max-width: 575px){
    .font-size-lg{
        font-size: 50px;
        line-height: 1;
    }
    
    .style-kerning-normal{
        letter-spacing: 8px;
    }

    .style-kerning-wide{
        letter-spacing: 13px;
    }
    .video-title{
        font-size: 15px;
    }

    h2{
        font-size: 1.5rem
    }

    p#header-logo{
        font-size: 12px;
    }

    .section-nowheretogo{
        padding: 40px 0 20px;
    }
}

@media (min-width: 575px) and (max-width:767px){
    .position-text-center{
        transform: translateY(10%);
    }
}

@media all and (max-width: 767px){
    .section-banner, .section-nowheretogo{
        box-shadow: inset 0 0 0 350px rgba(61, 42, 42, 0.6);
    }

    .font-size-xs{
        font-size: 9px;
    }

    .position-text-center{
        position: relative;
    }

    .text-center-mobile{
        text-align: center;
    }

    h4{
        font-size: 1.2rem;
    }

    #footer-logo{
        width: 40%;
    }
}

@media all and (min-width: 992px){
   #video-playlist{
        display: flex;
        flex-direction: row-reverse;
    }

    #playlist {
        display:table;
        margin-right: 35px;
    }

    #playlist li{
        padding: 0px;
        margin-bottom: 15px;
    }

    #footer-logo{
        width: 20%;
    }
}

@media (min-width: 768px) and (max-width:991px){
    .position-text-center{
        transform: translateY(15%);
    }

    #footer-logo{
        width: 30%;
    }
}

@media (min-width: 992px) and (max-width:1199px){
    .position-text-center{
        transform: translateY(20%);
    }
}

@media all and (min-width: 1200px){
    .statistics-header{
        min-height: 95px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .position-text-center{
        transform: translateY(25%);
    }
}