@font-face {font-family: SFProDisplay; src: url("../fonts/SF-Pro-Display-Regular.otf") format("opentype");}
  @font-face {font-family: SFProDisplay-Bold;src: url("../fonts/SF-Pro-Display-Bold.otf") format("opentype");}
  @font-face {font-family: SFProDisplay-Medium;src: url("../fonts/SF-Pro-Display-Medium.otf") format("opentype");}
  @font-face {font-family: NeueWorld;src: url("../fonts/CondensedRegular.otf") format("opentype");}
body {
    background-color:  #000000;
    margin:0;
    padding:0;
    color: #fff;
    font-size:18px;
    line-height:24px;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto;
}

a {color:#f95f1f;text-decoration: none;}

h1 {
  font-family: NeueWorld;
  font-size: 170px;
  font-weight: normal;
  font-stretch: condensed;
  font-style: normal;
  line-height: 0.88;
  letter-spacing: -3.32px;
  color: #e9dfc9;
  margin:0px;
}

h2 {
  font-family: NeueWorld;
  font-size: 46px;
  font-weight: normal;
  font-stretch: condensed;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.9px;
  color: #e9dfc9;
}

h3 {
    font-family: NeueWorld;
    font-size: 40px;
    font-stretch: condensed;
    font-weight: normal;
    font-style: normal;
    line-height: 0.95;
    letter-spacing: -0.78px;
    margin-top:0px;
    margin-bottom:20px;
    text-align: center;
    margin:auto;
  }
h4 {
    font-family: NeueWorld;
    font-size: 32px;
    font-weight: normal;
    font-stretch: condensed;
    font-style: normal;
    line-height: 1.06;
    letter-spacing: -0.63px;
    margin-top:40px;
    margin-bottom:30px;
}

h5 {
  font-family: Inter;
  font-size: 22px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #000;
  margin-top:0px;
  margin-bottom:15px;
}

.container {margin:auto;max-width:1920px;
    background:url(../img/header.png) #000000 no-repeat center 0;
    background-size:contain;
    text-align: center;
}

#top, #video {max-width:1000px;margin:auto;}
#top .heading {margin-top:300px;}
#content {max-width:850px; margin:auto;}

#top {text-align:left;padding-top:50px;}
#top p {
    font-family: SFProDisplay;
    font-size: 26px;
    font-weight: 500;
    line-height: 34px;
}

#video {margin-top:70px;}

#video .video-container {
    position: relative;
    padding-bottom: 56.25%;
    width: 850px;
    margin: auto;
  }
  
 #video .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

#video h2 {text-align: left;max-width:850px; margin:auto; margin-top:50px;padding-left:100px;}
#video p {
    max-width: 850px;
    margin: auto;
    text-align: left;
    margin-top: 50px;
}

#video .vl {
        border-left: 1px solid #e9dfc9;
        height: 350px;
        position: absolute;
        margin-top:512px;
}
#content {text-align: left;}
#content .btn {
    background-color: #e9dfc9;
    font-weight:normal;
    font-family: SFProDisplay;
    font-size:20px;
    line-height: 70px;
    color:#000;;
    width:457px;
    height: 70px;
    border-radius: 25px;
    text-align: center;
    margin-top: 55px; margin-bottom:55px;
}
#content .btn a {color: #000;}
#content .btn:hover {background-color: #e9dfc9; opacity: 0.8;}
#content .big_p {font-size:20px;font-weight:500;}
#content ul {line-height: 36px;margin-bottom:15px;}
#content .banner {margin-top:55px; border:1px solid #e9dfc9;}
#content .banner p {padding:20px;margin:0px;font-size:16px; line-height: 24px;}
#podcasts {margin:auto; overflow:auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
#podcasts .grid {
    margin:auto;
    margin-top: 60px;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    width: 1700px;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}
#podcasts .grid-wrapper {
    width:1700px;
    display: block;
    white-space: nowrap;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
#podcasts .podcast {width:280px;height:475px;position:relative;margin-left:30px; margin-right:30px;display: inline-flex;
}

#content h3 {color:#e9dfc9; text-align:left;width:850px; margin-top:150px;}
.p1 {background-image: linear-gradient(to bottom, rgba(163, 149, 121, 0), #e9dfc9 58%), url(../img/author_raulin.png);}
.p2 {background-image: linear-gradient(to bottom, rgba(163, 149, 121, 0), #e9dfc9 58%), url(../img/author_klaja.png);}
.p3 {background-image: linear-gradient(to bottom, rgba(163, 149, 121, 0), #e9dfc9 58%), url(../img/author_soltysinska.png);}
.p4 {background-image: linear-gradient(to bottom, rgba(163, 149, 121, 0), #e9dfc9 58%), url(../img/author_tokarski.png);}
.p5 {background-image: linear-gradient(to bottom, rgba(163, 149, 121, 0), #e9dfc9 58%), url(../img/author_jankowiak-maik.png);}
.details {position:absolute;bottom:0px;text-align: left; padding:20px; white-space:normal;}
.details p, .details span {font-size:12px; line-height:16px;color:#000;}
.icon {display:inline-block; width:45%; text-align:center;}



#radio {padding-top:120px; background-color: #151515; margin-top:100px;}
#radio .grid {text-align:left;max-width:1400px;padding-bottom:100px;display: grid; grid-template-columns: 20% 20% 20% 20% 20%; padding-left:25px; padding-right:25px; margin:auto; margin-top: 60px;}
#radio hr {
    width: 70px;
    border: solid 1px #f95f1f;
    float:left;
}

#radio p {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: normal;
    color: #bbbbbb;
}

#radio div {padding:10px;}
#radio img {margin-top:12px;}


#cookie {
    background-color:#000;
    max-width:100%; 
}

#cookie p {
    max-width:1000px;
    margin:40px auto;
    color:#bbbbbb; 
    font-size:13px;
}


@media all and (max-width: 1024px) {
#top {padding-left:20px; padding-right:20px;}
h1 {font-size:140px; line-height:140px;}
}


@media all and (max-width: 800px) {
body {font-size:14px;}
.logo img {width: 120px; height:auto;}
.container {background:url(../img/header-mobile.png) #000000 no-repeat center 0; background-size: contain;}
h1 {
  font-size: 58px;
  line-height: 0.9;
  letter-spacing: -0.98px;
  color: #e9dfc9;
  max-width: 80%;
}
h2 {font-size: 32px;}
h3 {font-size:28px;padding-left:30px; padding-right:30px;max-width:300px;line-height: normal;text-align: left; margin-left:0px;}
h4 {font-size:24px;margin-top:30px; margin-bottom:10px;}
h5 {font-size:18px;}
#video h2 {padding-left:30px;margin-top:20px;}
#top .logo {margin-top:200px;}
#top {padding-left:30px; padding-right:30px;}
#top p {font-size:14px;line-height: 1.3; max-width:80%;}
#top .heading {margin-top:20px;}
#video .video-container {width:auto;margin-left:30px; margin-right:30px;}
#video p {max-widthL100%; padding-left: 30px; padding-right:30px; margin-top:20px;}
.vl {display:none;}
.desktop {display:none}
#content .btn {width:auto;padding-left:10px; padding-right:10px;margin-left:30px; margin-right:30px; border-radius:60px;}
#content .big_p {
    font-size: 16px;
    font-weight: 500;
    padding-left: 30px;
    padding-right: 30px;}
    #content ul {
        line-height: 24px;
        margin-bottom: 15px;
        padding-left: 50px;
        padding-right: 30px;
    }

    #content li{
        margin-bottom:16px;
    }

    #content .banner {margin-left:30px; margin-right:30px;}
    #content .banner img {width: -webkit-fill-available;}
    #content .banner p {font-size:12px; line-height:20px;}
    #content h3 {margin-top:70px;}

    #podcasts .grid {margin-top:30px;}

    #radio {margin-top:0px;padding-top:42px; padding-left:30px; padding-right:30px;}
    #radio .grid {grid-template-columns: 100%;padding-left:0px;margin-top:10px;padding-bottom:40px;}
    #radio p {font-size:14px; line-height: 1.43;}
    #radio h3 {text-align: left; padding-left:0px; padding-right:0px;}

    #cookie {padding-left:15px; padding-right: 15px;}
    #cookie p {font-size:12px; line-height:18px;margin-top:20px; margin-bottom:20px;}

    #podcasts {margin-left: 15px; text-align: left;}
    #podcasts .grid {width:1060px;}
    #podcasts .podcast {width:188px;height:320px;position:relative;margin-left:10px; margin-right:10px;display: inline-flex; background-size: contain;}
    .p1 {background-image: linear-gradient(to bottom, rgba(163, 149, 121, 0), #e9dfc9 58%), url(../img/author_raulin_mobile.png);}
    .p2 {background-image: linear-gradient(to bottom, rgba(163, 149, 121, 0), #e9dfc9 58%), url(../img/author_klaja_mobile.png);}
    .p3 {background-image: linear-gradient(to bottom, rgba(163, 149, 121, 0), #e9dfc9 58%), url(../img/author_soltysinska_mobile.png);}
    .p4 {background-image: linear-gradient(to bottom, rgba(163, 149, 121, 0), #e9dfc9 58%), url(../img/author_tokarski_mobile.png);}
    .p5 {background-image: linear-gradient(to bottom, rgba(163, 149, 121, 0), #e9dfc9 58%), url(../img/author_jankowiak-maik_mobile.png);}

    .details {padding:8px;}
    .details p, .details span {font-size:10px;line-height:15px;}
    .icon {vertical-align: middle;}
    .icon img {height:20px; width:auto;margin-bottom:-12px;}
}






@media all and (min-width: 801px) {
#video .video-container {
    -webkit-box-shadow: 0px 0px 45px 15px rgba(66, 66, 66, 1);
-moz-box-shadow: 0px 0px 45px 15px rgba(66, 66, 66, 1);
box-shadow: 0px 0px 45px 15px rgba(66, 66, 66, 1);
  }
.mobile {display: none;}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  #podcasts {
    scrollbar-width: auto;
    scrollbar-color: #000000 #1c1c1c;
  }

  /* Chrome, Edge, and Safari */
  #podcasts::-webkit-scrollbar {
    width: 15px;
  }

  #podcasts::-webkit-scrollbar-track {
    background: #1c1c1c;
  }

  #podcasts::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 5px;
    border: 1px solid #5e5e5e;
  }


}