@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:url(../img/header.jpg) #000000 no-repeat center 0;
    background-size:contain;
    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 {
    margin-top:300px;
    font-family: NeueWorld;
    font-size: 170px;
    font-weight:normal;
    font-stretch: condensed;
    letter-spacing: -3.32px;
    text-align: center;
}
h2 {
    font-family: NeueWorld;
    font-size: 54px;
    font-weight: normal;
    font-stretch: condensed;
    font-style: normal;
    line-height: normal;
    letter-spacing: -1.05px;
    margin-top: 0px;
}
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;
  margin-top:0px;
  margin-bottom:16px;
}
.container {margin:auto;}
.logo {float: left;}
.vote {
    background-color: #f95f1f;
    font-weight:normal;
    font-family: SFProDisplay;
    width: 171px;
    height: 50px;
    padding: 13px 49px;
    border-radius: 25px;}
.btn a, .vote a {color: #fff;}
.btn a:hover, .vote a:hover {
    background-color: #fa7f4c;
}
.grid {
    display: grid;
    margin:auto;
}
#top, #podcasts {max-width: 1400px;margin:auto;}
#top {margin-top:50px;display:flow-root;}
#top .btn {float:right;margin-top:15px;}
#top, #header, #podcasts, #partners, #radio, #cookie {text-align:center;}
#header .select {display: grid; grid-template-columns: 58% 42%;}
.select-left {
    text-align: right; padding-right:20px;
    font-family: SFProDisplay;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: normal;
}
.select-right {text-align: left;}
#header .left, #header .right {display:inline-block;padding-left: 20px; padding-right: 20px;margin-top:80px;}
#header span {font-size:16px;}
#header .date {
  font-family: NeueWorld;
  font-size: 35px;
  font-stretch: condensed;
  line-height: 60px;
  letter-spacing: -0.68px;
  text-align: center;
  color: #f95f1f;
}
#tribute {margin-top:90px;}
#tribute .grid {
    grid-template-columns: 50% 50%;
    max-width: 1200px;   
}
#tribute .line {
        border-left: 2px solid #f95f1f;
        height: 58px;
}
#tribute .left, #tribute .right {
    max-width: 500px;
    z-index:100;
}

.cover1 {
    position:absolute;
    background:url(../img/cover1.png) no-repeat left 0;
    left:0;
}

.cover2 {
    position:absolute;
    background:url(../img/cover2.png) no-repeat right 0;
    right:0;
}

.cover1, .cover2 {
    height:450px;
    width: 450px;
    margin-top:-100px;
}

#tribute .left {
    text-align:right;
}
#tribute .right {
    text-align: left;
}
#tribute .btn {margin-top:50px;}
#tribute p {line-height: 1.33;}
#podcasts {margin-top:120px;}
#podcasts .grid, #radio .grid {grid-template-columns: 25% 25% 25% 25%; margin-top: 60px; padding-left:25px; padding-right:25px;}
#podcasts .title {text-align: left; background-color:#0c0b0b; width:244px;margin:auto;height:140px; margin-top:-10px; padding:20px; margin-bottom:40px;}
#podcasts .title span {
    font-size: 10px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.9px;
    color: #bbb;
    text-transform: uppercase;
}
#podcasts a {color:#fff;}
#podcasts img {width:280px; height:auto;}
#partners {display:block; margin-bottom:80px;}
#partners h3 {margin-bottom:40px;}
#partners img {padding-left:20px; padding-right:20px;}
#radio {padding-top:120px; background-color: #151515;}
#radio .grid {text-align:left;max-width:1400px;padding-bottom:100px;}
#radio hr {
    width: 70px;
    border: solid 1px #f95f1f;
    text-align: left;
    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 {margin:40px;}
#cookie p {max-width:1000px; margin:auto;color:#bbbbbb; font-size:13px;}

@media all and (min-width: 1500px) {
    h1 {margin-top:500px;}
}

@media all and (min-width: 1800px) {
    h1 {margin-top:600px;}
}


@media all and (max-width: 600px) {
    body {background:url(../img/header_mobile.jpg) #000000 no-repeat center 0;background-size: contain; font-size:16px;}
    h1 {font-size: 50px;line-height: 0.8;letter-spacing: -0.98px; margin-bottom:0px;}
    h2 {font-size: 36px;letter-spacing: -0.59px;}
    h3 {font-size: 32px;line-height: 1.07;text-align: left;margin-bottom:10px;}
    h4 {font-size: 24px;line-height: 1.08;letter-spacing: -0.47px; margin-top:30px; margin-bottom:15px;}
    .container, #radio, #cookie { padding-left:20px; padding-right:20px;}
    #top {margin-top:10px;}
    #top .btn {display:none;}
    #top .logo {width:100%; margin: auto;}
    #top img {width:100px; height:auto;}
    #tribute, #podcasts {margin-top:60px;}
    #tribute .grid {grid-template-columns: 100%;}
    #tribute .left, #tribute .right {text-align: left;}
    .desktop {display:none;}
    #tribute .line {position: absolute; height:177px;}
    #tribute h2, #tribute p, #tribute .btn {padding-left: 30px;}
    #tribute {background:url(../img/cover-mobile.png) no-repeat left 80px;}
    #tribute .btn {margin-top:40px;}
    #podcasts, #partners {text-align:left;}
    #podcasts .grid {margin-top:30px;}
    #top, #header, #radio, #cookie {text-align:center;}
    #partners h3 {text-align:left; padding-top:30px; margin-bottom:0px;}
    #partners img {height:50px; padding-right:10px; padding-left:0px;padding-top:20px;}
    #radio {margin-top:0px;padding-top:42px;}
    #radio .grid {grid-template-columns: 100%;padding-left:0px;margin-top:10px;padding-bottom:40px;}
    #radio p {font-size:14px; line-height: 1.43;}
    #cookie {padding-top:20px;padding-bottom:20px;margin:0px;}
}

@media all and (min-width: 601px) {
    .mobile {display:none;}
}

@media all and (max-width: 1500px) {
#top {margin-left:20px; margin-right:20px;margin-top:20px;}
#header .select {grid-template-columns: 62% 38%;}
}

@media all and (max-width: 1280px) {
    h1 {font-size:140px;}
    #partners {grid-template-columns: 35% 65%;}
}

@media all and (max-width: 1024px) {
    h1 {font-size:120px;}
    h5 {font-size: 14px;font-weight: 600;padding-top:10px;margin-bottom:5px;line-height:20px;}
    #header .select {grid-template-columns: 68% 32%;}
    #tribute .left {max-width:450px;}
    #tribute .right {max-width: 400px;}
    #podcasts .podcast {padding-right:20px;}
    #podcasts .title span {font-size:8px;}
    #podcasts img {width:208px; height:auto;}
    #podcasts .title {width:188px; padding:12px;}
    #partners img {height:90px; padding-right:10px; padding-left:0px;padding-top:20px;}
    #partners h3 {padding-top:48px;}
    #partners {grid-template-columns: 45% 55%;}
}
@media all and (max-width: 1100px) {
    #partners img {height:70px;}
}

@media all and (max-width: 900px) {
    h1 {font-size:70px;margin-bottom:60px;}
    h2 {font-size:42px;}
    #header .select {display: grid; grid-template-columns: 100%;}
    .select-left, .select-right {text-align: center;}
    .select-right {margin-top:10px; margin-bottom:40px;}
    .select-left {
        font-size: 18px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.38;
        padding:20px;
    }
    #header .left, #header .right {margin-top:20px;}
    #tribute {margin-top:100px;}
    #tribute .left {max-width:350px;padding-left:10px;padding-right:20px;}
    #tribute .right {max-width: 350px;padding-right:10px;}
    .cover1, .cover2 {background-size: contain;}
    #partners img {height:55px; padding-right:10px; padding-left:0px;padding-top:20px;}
    #partners {grid-template-columns: 100%; margin-top:10px; margin-bottom:30px;}
    #partners h3 {text-align:center;}
    #partners .right {text-align:center;}
    #podcasts .grid {
        display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding-left:0px; padding-right:0px;
    }
    #radio h3 {max-width:600px;}
}