* {
   box-sizing: border-box;
}

::-webkit-scrollbar {
   width: 0px;
}

::-webkit-scrollbar-track {
   background: transparent;
}

::-webkit-scrollbar-thumb {
   background: transparent;
}

::-webkit-scrollbar-thumb:hover {
   background: transparent;
}

@font-face {
   font-family: "MarkPro";
   src: url('assets/fonts/MarkPro.otf');
}
@font-face {
   font-family: "MarkPro Bold";
   src: url('assets/fonts/MarkPro-Bold.otf');
}

html, body {
   width: 100vw;
   padding: 0;
   margin: 0;
}

body {
   font-family: Helvetica;
   overflow: hidden;
}

.content {
   height: 100vh;
   padding-bottom: 50px;
   overflow-y: scroll;
}

nav {
   display: flex;
   align-items: center;
   padding: 10px 15%;
}

nav img.logo {
   width: 180px;
}

/* fill: #0098ff; */
img.icon {
   width: 20px;
   height: 20px;
   object-fit: contain;
}

nav .header_links {
   margin-left: auto;
   display: flex;
   align-items: center;
}

nav .header_links a {
   margin: 0 10px;
}

div.divider {
   width: 1px;
   height: 30px;
   background: #0098ff;
   margin: 0 25px;
}

nav .header_links .call {
   width: 240px;
   height: auto;
}

.banner {
   position: relative;
   background: url('assets/banner-15-years.png') no-repeat center;
   background-size: cover;
   height: 150px;
}

.banner .play {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 20%;
   background: white;
   border-radius: 20px;
   width: max-content;
   padding: 10px 20px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.banner .play span {
   color: #0098ff;
   font-family: "MarkPro";
   letter-spacing: 1px;
}

.banner .play a {
   margin: 0 4px;
}

.ml-20 {
   margin-left: 20px;
}

input[type=range] {
   margin-left: 10px;
   -webkit-appearance: none;
   width: 120px;
   height: 3px;
   background: #d3d3d3;
   border-radius: 4px;
   outline: none;
   opacity: 0.7;
   -webkit-transition: .2s;
   transition: opacity .2s;
}

input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 15px;
   height: 15px;
   background: #0098ff;
   border-radius: 50%;
   cursor: pointer;
}

.map {
   margin-top: 40px;
   text-align: center;
}

.map img {
   width: 50%;
}

.info {
   padding: 10px 10%;
}

.info p {
   width: 400px;
   font-family: "MarkPro Bold";
   word-wrap: break-word;
}

.info img {
   width: 150px;
}

body {
    overflow-x: hidden;
}

.footer {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   background: #0098ff;
   padding: 15px 10%;
   color: white;
   display: flex;
   align-items: center;
}

.footer span:last-child {
   margin-left: auto;
}

h4.bordered {
   position: relative;
   color: #0098ff;
   text-align: center;
}

h4.bordered::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 40%;
   height: 1px;
   background: #dfddde;
}

h4.bordered::after {
   content: '';
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 40%;
   height: 1px;
   background: #dfddde;
}

.hero_1 img {
   display: block;
   width: 35vw;
   margin: 0 auto;
}


.hero_2 .shows {
   width: 70%;
   margin: 0 auto;
   display: grid;
   justify-items: center;
   grid-template-columns: repeat(3, minmax(220px,1fr));
   grid-gap: 15px;
}

.hero_2 .shows img {
   width: 100%;
   cursor: pointer;
}

.modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 9999999999999;
   opacity: 0.95;
}

.modal.active {
   display: block;
   overflow-y: scroll;
}

.modal img.close {
   width: 30px;
   height: 30px;
   object-fit: contain;
   position: fixed;
   top: 25px;
   right: 25px;
   cursor: pointer;
   opacity: 0.7;
}

.modal .content {
   width: 80%;
   margin: 8vh auto;
   text-align: center;
}

h3.bordered {
   position: relative;
   color: #0098ff;
   text-align: center;
}

h3.bordered::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 40%;
   height: 3px;
   background: navy;
}

h3.bordered::after {
   content: '';
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 40%;
   height: 3px;
   background: navy;
}

.presenter {
   width: 80%;
   margin: 20px auto;
   display: flex;
   align-items: center;
}

#modal_4 .presenter img {
   border-radius: 50%;
   border: 3px solid #080808;
}

.presenter img {
   width: 120px;
   height: 120px;
   object-fit: contain;
   /* border-radius: 50%; */
   /* border: 3px solid navy; */
}

.modal .information {
   font-family: "MarkPro Bold";
}

.modal .content > .information {
   text-align: left;
}

.presenter .information {
   text-align: left;
   margin-left: 20px;
}

.presenter .information span {
   font-size: 24px;
}

.modal .content > img {
   width: 150px;
}

#modal_1 {
   background: #f9f8e1;
}

#modal_1 h3.bordered {
   color: #2a2051;
}

#modal_1 h3.bordered::before,
#modal_1 h3.bordered::after {
   background: #080808;
}

#modal_1 .presenter > img {
   border-color: #2a2051;
}

#modal_1 .presenter .information {
   color: #2a2051;
}

#modal_2 {
   background: #ff405f;
}

#modal_2 h3.bordered {
   color: #fff0b2;
}

#modal_2 h3.bordered::before,
#modal_2 h3.bordered::after {
   background: #fff0b2;
}

#modal_2 .presenter > img {
   border-color: #fff0b2;
}

#modal_2 .presenter .information {
   color: #fff0b2;
}
#modal_2 .presenter .information .about {
   color: white;
}

#modal_2 .content > .information {
   color: white;
}

#modal_3 {
   background: #181818;
}

#modal_3 h3.bordered {
   color: #e00b42;
}

#modal_3 h3.bordered::before,
#modal_3 h3.bordered::after {
   background: #e00b42;
}

#modal_3 .presenter > img {
   border-color: #e00b42;
}

#modal_3 .presenter .information {
   color: #e00b42;
}
#modal_3 .presenter .information .about {
   color: white;
}
#modal_3 .content > .information {
   color: white;
}

#modal_4 {
   background: #d80023;
}

#modal_4 h3.bordered {
   color: white;
}

#modal_4 h3.bordered::before,
#modal_4 h3.bordered::after {
   background: #fff0b2;
}

#modal_4 .presenter > img {
   border-color: #080808;
}

#modal_4 .presenter .information {
   color: #fff0b2;
}
#modal_4 .presenter .information .about {
   color: white;
}
#modal_4 .content > .information {
   color: white;
}

#modal_5 {
   background: #003a6e;
}

#modal_5 h3.bordered {
   color: #fff0b2;
}

#modal_5 h3.bordered::before,
#modal_5 h3.bordered::after {
   background: #fff0b2;
}

#modal_5 .presenter > img {
   border-color: #fff0b2;
}

#modal_5 .presenter .information {
   color: #fff0b2;
}
#modal_5 .presenter .information .about {
   color: white;
}
#modal_5 .content > .information {
   color: white;
}
#modal_6 {
   background: #3dc0cb;
}

#modal_6 h3.bordered {
   color: #fff0b2;
}

#modal_6 h3.bordered::before,
#modal_6 h3.bordered::after {
   background: #fff0b2;
}

#modal_6 .presenter > img {
   border-color: #fff0b2;
}

#modal_6 .presenter .information {
   color: #fff0b2;
}
#modal_6 .presenter .information .about {
   color: white;
}
#modal_6 .content > .information {
   color: white;
}

.iframe-soundcloud {
   width: 50%;
   margin: 10px auto;
}

.show {
   position: relative;
}

.show.has-hover img:last-child {
   display: none;
}

.show.has-hover:hover img:first-child {
   filter: grayscale(1);
}

.show.has-hover:hover img:last-child {
   position: absolute;
   display: block;
   top: 0;
   left: 0;
   width: 100%;
   object-fit: contain;
}

nav .phoneWrapper {
    display: flex;
    align-items: center;
}

nav .phoneWrapper a {
    margin: 0 5px;
}

nav .phoneWrapper a img {
    height: 25px;
    object-fit: contain;
}

.mobile-only {
    display: none;
}