/* Custom Fonts */
@font-face {
  font-family: 'Benton Sans';
  src: url('assets/fonts/benton-sans-book.woff2') format('woff2'),
     url('assets/fonts/benton-sans-book.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Benton Sans';
  src: url('assets/fonts/benton-sans-bold.woff2') format('woff2'),
       url('assets/fonts/benton-sans-bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

/* Defaults */
* {
  margin: 0;
  padding: 0;
  font-family: 'Benton Sans', sans-serif;
}
section {
  display: block;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 8px;
}
p, h1, h2, figcaption {
  display: block;

  font-weight: normal;
  padding: 8px 16px;
}

/* Figures */
figure {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
figure.reverse {
  flex-direction: row-reverse;
}
figcaption {
  padding: 0;
}
figcaption .info {
  padding: 20px;
}
figcaption .links {
  list-style: none;
}
figcaption .links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  font-size: 20px;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* Background Wrapping System */
.bg-wrap {
  display: flex;
  width: 100%;
}
.bg-wrap>div {
  width: 50vw;
  transform: scaleX(2);
}
.bg-wrap>div:first-child {
  z-index: 2;
  transform-origin: left;
}
.bg-wrap>div:last-child {
  z-index: 1;
  transform-origin: right;
}
.bg-wrap>div>div {
  width: 200%;
  transform: scaleX(0.5);
  transform-origin: left;
}
.bg-wrap>div:first-child>div {
}
.bg-wrap>div:last-child>div {
  /*width: 200%;*/
  height: 100%;
  /*position: relative;*/
}

/* Social Media Icons */
.icon {
  display: block;
  margin-left: 10px;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: contain;
}
.icon.yt { background-image: url("assets/icons/youtube.png"); }
.icon.sp { background-image: url("assets/icons/spotify.png"); }
.icon.ap { background-image: url("assets/icons/apple.png"); }
.icon.go { background-image: url("assets/icons/google.png"); }
.icon.am { background-image: url("assets/icons/amazon.png"); }
.icon.sc { background-image: url("assets/icons/soundcloud.png"); }
.icon.ig { background-image: url("assets/icons/instagram.png"); }
.icon.dz { background-image: url("assets/icons/deezer.png"); }
.icon.bc { background-image: url("assets/icons/bandcamp.png"); }
.icon.tk { background-image: url("assets/icons/tiktok.png"); }
.icon.gd { background-image: url("assets/icons/google-drive.png"); }

/* Video Player */
div.video img.thumbnail, div.video div.play-button, div.video video {
  cursor: pointer;
}
div.video img.thumbnail {
  width: 100%;
  max-width: initial;
  max-height: initial;
}
div.video video {
  width: 100%;
  object-fit: fill;
}
div.video div.progress {
  display: absolute;
  width: 100%;
  height: 4px;
  transform: translateY(1px);
}
div.video div.progress div {
  height: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0 0 0 5px;
}
div.video div.play-button {
  cursor: pointer;
  width: 48px;
  height: 64px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMSBUaW55Ly9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLXRpbnkuZHRkIj48c3ZnIHZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9InRpbnkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iOTZweCIgaGVpZ2h0PSIxMjhweCIgdmlld0JveD0iMCAwIDk2IDEyOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTYuNjU2LDQuNDM4QzIuOTk2LDEuOTk3LDAsMy42LDAsOHYxMTJjMCw0LjQsMi45OTYsNi4wMDMsNi42NTYsMy41NjJsODIuNjg4LTU1LjEyNWMzLjY2MS0yLjQ0LDMuNjYxLTYuNDM1LDAtOC44NzVMNi42NTYsNC40Mzh6Ii8+PC9zdmc+');
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto;
  opacity: 0.5;
  transition: opacity 0.25s;
  -webkit-transition: opacity 0.25s;
}
div.video div.play-button.white {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMSBUaW55Ly9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLXRpbnkuZHRkIj48c3ZnIHZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9InRpbnkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iOTZweCIgaGVpZ2h0PSIxMjhweCIgdmlld0JveD0iMCAwIDk2IDEyOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTYuNjU2LDQuNDM4QzIuOTk2LDEuOTk3LDAsMy42LDAsOHYxMTJjMCw0LjQsMi45OTYsNi4wMDMsNi42NTYsMy41NjJsODIuNjg4LTU1LjEyNWMzLjY2MS0yLjQ0LDMuNjYxLTYuNDM1LDAtOC44NzVMNi42NTYsNC40Mzh6IiBmaWxsPSIjZmZmIi8+PC9zdmc+');
  opacity: 1;
}
div.video:hover div.play-button {
  opacity: 0.8;
}
div.video div.play-button:hover {
  opacity: 1;
}

/* Header section */
div.header {
  height: min(max(800px, 52vw), 148vw);
  width: 100%;
  background-image: url("assets/bike.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
div.header.press {
  background-image: url("assets/bike-press.jpg");
}
section header {
  margin: 80px 0;
}
section header img {
  max-width: 100%;
  max-height: 64px;
}
section header p {
  padding: 8px 0;
  font-size: 26px;
}

/* Biography section */
.biography>div:last-child>div {
  background-image: url("assets/dark-background.jpg");
  background-repeat: repeat;
  background-size: 100px;
  background-position: center;
}
.biography section {
  color: #fff;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
  font-size: 28px;
  padding: 120px 16px 80px 16px;
}
.biography section p {
  padding: 24px 0;
}
.biography a {
  color: rgba(255, 255, 255, 0.8);
}
.socials-buttons {
  display: flex;
  margin-top: 60px;
  margin-bottom: 100px;
  justify-content: center;
}
.socials-buttons .icon {
  margin: 0 20px;
  width: 64px;
  height: 64px;
}

/* Album section */
.the-album>div:last-child>div {
  background-image: url("assets/egg-background.jpg");
  background-repeat: repeat;
  background-size: auto 250px;
  background-position: center;
}
.the-album header p {
  color: #fff;
  font-weight: bold;
  text-shadow: 2px 2px #b79202;
}
.the-album .media {
  max-width: 360px;
  background-color: #fff;
}
.the-album .media img,
.the-album .media video {
  width: 100%;
  box-shadow: 4px 6px 0 0 #b79202;
}
.the-album figure {
  justify-content: space-around;
}
.the-album figcaption {
  background-color: #fff;
  margin: 20px;
  border: 5px solid #333;
  border-radius: 5px;
  box-shadow: 3px 4px 0 0 #b79202;
}
.the-album .info {
  text-align: center;
}
.the-album figcaption h4 {
  margin-bottom: 5px;
}
.the-album figcaption h4 span {
  font-weight: normal;
}
.the-album figcaption .links a {
  border-top: 3px solid #333;
}
.the-album figcaption li:nth-child(odd) a {
  background-color: #e8e8e8;
}

/* Mini-song section */
.mini-songs>div:last-child>div {
  background-image: url("assets/digital-background.jpg");
  background-repeat: repeat;
  background-size: auto 500px;
  background-position: center;
}
.mini-songs header p {
  color: #fff;
  font-weight: bold;
  text-shadow: 0px 1.5px 1px #000;
}
.mini-songs .a1,
.mini-songs .a2,
.mini-songs .a3,
.mini-songs .a4,
.mini-songs .a5,
.mini-songs .a6,
.mini-songs .a7,
.mini-songs .a8,
.mini-songs .a9 {
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  transform: translateY(-50%);
}
.mini-songs .p1 { left: 2%; top: 20%; }
.mini-songs .p2 { left: 95%; top: 25%; transform: translateX(-100%); }
.mini-songs .p3 { left: 90%; top: 85%; transform: translateX(-100%); }
.mini-songs .p4 { left: 5%;  top: 40%; }
.mini-songs .p5 { left: 85%; top: 45%; transform: translateX(-100%); }
.mini-songs .p6 { left: 15%; top: 50%; }
.mini-songs .p7 { left: 90%; top: 70%; transform: translateX(-100%); }
.mini-songs .p8 { left: 75%; top: 85%; transform: translateX(-100%); }
.mini-songs .p9 { left: 5%;  top: 90%; }
.mini-songs .p10 { left: 35%; top: 95%; }
.mini-songs .a1 { width: 200px; height: 200px; background-image: url("assets/a1.png"); }
.mini-songs .a2 { width: 400px; height: 400px; background-image: url("assets/a2.png"); }
.mini-songs .a3 { width: 102px; height: 92px;  background-image: url("assets/a3.png"); }
.mini-songs .a4 { width: 109px; height: 80px;  background-image: url("assets/a4.png"); }
.mini-songs .a5 { width: 67px;  height: 86px;  background-image: url("assets/a5.png"); }
.mini-songs .a6 { width: 100px; height: 90px;  background-image: url("assets/a6.png"); }
.mini-songs .a7 { width: 100px; height: 90px;  background-image: url("assets/a7.png"); }
.mini-songs .a8 { width: 100px; height: 90px;  background-image: url("assets/a8.png"); }
.mini-songs .a9 { width: 100px; height: 90px;  background-image: url("assets/a9.png"); }
.mini-songs .media {
  padding: 22px 0 0 0;
  max-width: 480px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 22'%3E%3Cstyle type='text/css'%3E.st0%7Bfill:url(%23SVGID_1_);%7D.st1%7Bfill:%23ED6A5E;stroke:%23D05246;stroke-width:0.5;stroke-miterlimit:10;%7D.st2%7Bfill:%23F5BF50;stroke:%23D6A143;stroke-width:0.5;stroke-miterlimit:10;%7D.st3%7Bfill:%2362C554;stroke:%2355A741;stroke-width:0.5;stroke-miterlimit:10;%7D%3C/style%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='264' y1='22' x2='264' y2='0'%3E%3Cstop offset='0' style='stop-color:%23D3D1D3'/%3E%3Cstop offset='1' style='stop-color:%23E8E6E8'/%3E%3C/linearGradient%3E%3Crect class='st0' x='0' y='0' width='480' height='22' /%3E%3Ccircle class='st1' cx='14' cy='11' r='6'/%3E%3Ccircle class='st2' cx='34' cy='11' r='6'/%3E%3Ccircle class='st3' cx='54' cy='11' r='6'/%3E%3C/svg%3E");
  background-size: 480px 22px;
  background-repeat: no-repeat;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}
.mini-songs .media img,
.mini-songs .media video {
  width: 100%;
  border-radius: 0 0 5px 5px;
  margin-bottom: -5px;
}
.mini-songs figcaption {
  background-color: #fff;
  margin: 20px;
}
.mini-songs figcaption a {
  color: #35878e;
}
.mini-songs figcaption li:nth-child(odd) a {
  background-color: #eef0f0;
}

/* Goodies section */
.goodies>div:last-child>div {
  background-image: url("assets/paper-background.jpg");
  background-repeat: repeat;
  background-size: 500px auto;
  background-position: center;
}
.goodies header {
  color: rgba(73, 39, 16, 0.68);
}
.goodies section {
  text-align: center;
}
.goodies .media {
  background-color: #fff;
}
.goodies .media img,
.goodies .media video {
  width: 100%;
  box-shadow: 0 2px 8px 0 rgba(59, 45, 28, 0.2);
  border-radius: 3px;
}
.goodies figure {
  display: block;
  max-width: 640px;
  margin: 20px auto;
}
.goodies figcaption {
  color: rgba(73, 39, 16, 0.68);
}
.goodies figcaption .links {
  max-width: 300px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 2px 8px 0 rgba(59, 45, 28, 0.2);
  border-radius: 3px;
}
.goodies figcaption li:nth-child(even) a {
  background-color: #e8e8e8;
}
.goodies figcaption h4 {
  margin: 10px 0;
  color: rgba(73, 39, 16, 0.9);
  text-align: center;
  font-size: 20px;
}

/* LOSER announcement section */
.loser>div:last-child>div {
  background-image: url("assets/loser-background.jpg");
  background-repeat: repeat;
  background-size: 500px auto;
  background-position: center;
}
.loser header p {
  color: #fff;
  font-weight: bold;
}
.loser header img {
  max-height: 128px;
}
.loser section {
  text-align: center;
}
.loser .media {
  background-color: #fff;
}
.loser .media img,
.loser .media video {
  width: 100%;
  box-shadow: 0 6px 16px 0 rgba(59, 45, 28, 0.6);
}
.loser figure {
  display: block;
  margin: 20px auto;
}
.loser figcaption {
  color: rgba(73, 39, 16, 0.68);
}
.loser figcaption .links {
  max-width: 400px;
  margin: 60px auto;
  border-radius: 3px;
  box-shadow: 0 6px 16px 0 rgba(59, 45, 28, 0.6);
}
.loser figcaption .links a {
  font-size: 24px;
  color: #fff;
}
.loser figcaption li:nth-child(odd) a {
  background-color: rgba(0, 0, 0, 0.5);
}
.loser figcaption li:nth-child(even) a {
  background-color: rgba(0, 0, 0, 0.35);
}

/* LMOR announcement section */
.lmor>div:last-child>div {
  background-image: url("assets/lmor-background.jpg");
  background-size: cover;
  background-position: center;
}
.lmor header p {
  color: #fff;
  font-weight: bold;
  text-shadow: -1px 2px #000;
  margin-top: 200px;
  font-size: 32px;
}
.lmor header img {
  margin-top: 60px;
  max-height: 300px;
}
.lmor section {
  text-align: center;
}
.lmor figure {
  display: block;
  margin: 20px auto;
}
.lmor figcaption {
  color: rgba(73, 39, 16, 0.68);
}
.lmor figcaption .links {
  max-width: 400px;
  margin: 60px auto;
  border-radius: 3px;
}
.lmor figcaption .links a {
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  text-shadow: -1px 2px #000;
}
.lmor figcaption li:nth-child(odd) a {
  background-color: rgba(255, 255, 255, 0.6);
}
.lmor figcaption li:nth-child(even) a {
  background-color: rgba(150, 150, 150, 0.6);
}

/* STS announcement section */
.sts>div:last-child>div {
  background-image: url("assets/sts-background.jpg");
  background-size: cover;
  background-position: center;
}
.sts header p {
  color: #fff;
  font-weight: bold;
  text-shadow: 3px 3px #000;
  margin-top: 100px;
  font-size: 50px;
}
.sts header img {
  margin-top: 60px;
  max-height: 300px;
}
.sts section {
  text-align: center;
}
.sts figure {
  display: block;
  margin: 20px auto;
}
.sts figcaption {
  color: rgba(73, 39, 16, 0.68);
}
.sts figcaption .links {
  max-width: 400px;
  margin: 60px auto;
  border-radius: 3px;
  border: 10px solid #000;
}
.sts figcaption .links a {
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  text-shadow: -1px 2px #000;
}
.sts figcaption li:nth-child(odd) a {
  background-color: #debf7f;
}
.sts figcaption li:nth-child(even) a {
  background-color: #8f6d33;
}

/* Oneitis announcement section */
.oneitis>div:last-child>div {
  background-image: url("assets/oneitis-background.jpg");
  background-size: cover;
  background-position: center;
}
.oneitis header p {
  color: #fff;
  font-weight: bold;
  text-shadow: 3px 3px #000;
  margin-top: 100px;
  font-size: 50px;
}
.oneitis header img {
  margin-top: 60px;
  max-height: 300px;
}
.oneitis section {
  text-align: center;
}
.oneitis figure {
  display: block;
  margin: 20px auto;
}
.oneitis figcaption {
  color: rgba(73, 39, 16, 0.68);
}
.oneitis figcaption .links {
  max-width: 400px;
  margin: 60px auto;
  border-radius: 3px;
  border: 10px solid #000;
}
.oneitis figcaption .links a {
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  text-shadow: -1px 2px #000;
}
.oneitis figcaption li:nth-child(odd) a {
  background-color: #debf7f;
}
.oneitis figcaption li:nth-child(even) a {
  background-color: #8f6d33;
}

/* HTGOM announcement section */
.htgom>div:last-child>div {
  background-image: url("assets/htgom-background.jpg");
  background-size: cover;
  background-position: center;
}
.htgom header p {
  color: #fff;
  font-weight: bold;
  text-shadow: -1px 2px #000;
}
.htgom header img {
  margin-top: 60px;
  max-height: 300px;
}
.htgom section {
  text-align: center;
}
.htgom figure {
  display: block;
  margin: 20px auto;
}
.htgom figcaption {
  color: rgba(73, 39, 16, 0.68);
}
.htgom figcaption .links {
  max-width: 400px;
  margin: 60px auto;
  border-radius: 3px;
}
.htgom figcaption .links a {
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  text-shadow: -1px 2px #000;
}
.htgom figcaption li:nth-child(odd) a {
  background-color: rgba(255, 255, 255, 0.7);
}
.htgom figcaption li:nth-child(even) a {
  background-color: rgba(150, 150, 150, 0.7);
}

/* PICK UP announcement section */
.pick-up>div:last-child>div {
  background-image: url("assets/pick-up-background.jpg");
  background-size: cover;
  background-position: center;
}
.pick-up header p {
  color: #fff;
  font-weight: bold;
  text-shadow: -1px 2px #000;
}
.pick-up header img {
  margin-top: 60px;
  max-height: 100px;
}
.pick-up section {
  text-align: center;
}
.pick-up figure {
  display: block;
  margin: 20px auto;
}
.pick-up figcaption {
  color: rgba(73, 39, 16, 0.68);
}
.pick-up figcaption .links {
  max-width: 400px;
  margin: 60px auto;
  border-radius: 3px;
  box-shadow: -2px 4px #000;
}
.pick-up figcaption .links a {
  font-size: 24px;
}
.pick-up figcaption li:nth-child(odd) a {
  background-color: #fff;
}
.pick-up figcaption li:nth-child(even) a {
  background-color: #eee;
}

/* YAML announcement section */
.yaml>div:last-child>div {
  background-color: #030d15;
}
.yaml header p {
  color: #fff;
  font-weight: bold;
}
.yaml header img {
  max-height: 500px;
}
.yaml section {
  text-align: center;
}
.yaml figure {
  display: block;
  margin: 0 auto;
}
.yaml figcaption {
  color: rgba(73, 39, 16, 0.68);
}
.yaml figcaption .links {
  max-width: 400px;
  margin: 0 auto;
  border-radius: 3px;
}
.yaml figcaption .links a {
  font-size: 24px;
  color: #fff;
}

/* Press kit text block */
header .text-block {
  margin-top: 16px;
  padding: 16px 24px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}
header .text-block p {
  font-size: 20px;
  font-weight: normal;
  text-shadow: none;
  line-height: 1.4em;
  color: #000;
}
.text-block a {
  color: #68b;
}
.text-block b {
  color: #444;
}
.text-block h3 {
  color: #444;
  margin-top: 28px;
}

/* Media assets */
.media-assets {
  background-image: url("assets/dark-background.jpg");
  background-repeat: repeat;
  background-size: 100px;
  background-position: center;
}
.media-assets section {
  max-width: initial;
}
.media-assets header {
  margin-bottom: 30px;
}
.media-assets header h1 {
  margin: 0;
  padding: 0;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
}
.media-assets header p {
  padding: 8px 0;
  font-size: 26px;
  color: #fff;
  font-weight: bold;
  text-shadow: 2px 2px #b79202;
}
.media-assets footer {
  text-align: center;
  padding-bottom: 60px;
}
.media-assets a {
  color: #fff;
}
.media-assets .socials-buttons {
  padding-bottom: 20px;
}
#kit {
  width: 741px;
  height: calc(0.7 * 741px);
  margin: 0 auto;
  background-image: url("assets/kit.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
}
#kit div {
  display: flex;
}
#kit .window-box {
  flex-direction: column;
}
#kit .window-box>div {
  align-items: stretch;
}
#kit a {
  display: block;
  flex: 1;
}
#kit a:hover {
  background-color: rgba(101, 152, 200, 0.3);
}
#kit img {
  display: none;
  width: 100%;
}
@media only screen and (max-width: 800px) {
  #kit {
    width: 95vw;
    height: calc(0.7 * 95vw);
  }
}

@media only screen and (max-width: 1000px) {
  figure {
    display: initial;
  }
  .media {
    margin: 0 auto;
  }
  .mini-songs figcaption,
  .the-album figcaption {
    margin: 20px 30px 120px 30px;
  }
  section {
    max-width: 480px;
  }
  section .title {
    font-size: 40px;
    line-height: 40px;
  }
}

@media only screen and (max-width: 500px) {
  .mini-songs .media,
  .the-album .media {
    max-width: 90vw;
  }
}