html, body {height:100%; width:100%;}
body {padding:0; margin:0; min-height: 100vh; box-sizing:border-box; font-family:'firago-book';}
a {outline:none; text-decoration:none; color:black;}
ul {width:100%; display:flex; justify-content:space-between; padding:0;}
ul li {list-style:none;}
button {border:none; background:none;}
section ul {display:block; background:#7988D3; padding-top:30px;}
section p {font-size:33px; line-height: 40px;}
section ul li p, section ul li h2 {width:80%; margin:30px auto; color:white;}
section ul li {border-bottom:1px solid white; transition-duration:0.4s; cursor:pointer;}
section ul li:hover h2 {color:#12184D; transition-duration:0.4s;}
section ul li:hover p {color:#12184D; transition-duration:0.4s;}
section img {width:20%; display:block; object-fit:contain; top:30%; left:70%; transition-duration:0.4s;}
h1, h2, ul li span, ul li b { text-transform:uppercase; font-feature-settings: "case";  font-family:'firago-bold';}
ul li b, ul li span {font-size:12px; line-height:18px; font-family:"fiago-book"; width:100%; display:block;}
.uppercase li b, .uppercase li span {font-family:"firago-regular"; font-feature-settings:"case";}
ul li span {color:#707070;}
h1 {font-size:64px; line-height:76px;}
h2 {font-size:33px; line-height: 40px;}
p, .choice {font-size:16px; line-height:24px;}
nav {display:flex; justify-content:left; flex-wrap:nowrap; z-index: 8; position: fixed; background:white; width: 100%; top:-100px;}
nav > a {margin: 20px 10px; font-family:"firago-medium"; font-feature-settings:"case"; transition-duration: 0.4s; color:#333333; }
nav > a:hover {color:black; transition-duration: 0.4s;}
nav .language {display:flex; width:10%; justify-content:center; margin: 20px 0 20px auto; }
nav .language div {width: 10px; height: 1px; background: black; margin: auto 5px;}
nav .language a {font-family:"firago-regular"; transition-duration: 0.4s;}
nav .language a:hover {font-weight:bold; transition-duration: 0.4s; color:black;}


footer .container {display:block; margin:0 auto;}
footer img {display:block; width:70px; height:70px; object-fit:contain; margin:20px auto;}
footer p {text-align:center; font-size:14px; font-family:"firago-regular"; font-feature-settings: "case";
          margin: auto 0; }

.wrapper {width:100%; margin:0 auto 150px; display:block;}
.relative {position:relative;}
.absolute {position:absolute;}

.wrapper ul li img {width:100%; height:350px; margin:0 auto 20px; object-fit:contain;}
.slider ul {width: 80%;}
.slider .left-arrow {margin: auto 10px auto  auto; width:30px; height:30px; opacity:0; pointer-events: none; cursor:pointer;}
.slider .right-arrow {margin:auto auto auto 10px; width:30px; height:30px; cursor:pointer;}
.container-wrapper {width:90%; margin:50px auto; display:flex; justify-content: center;}
.sub-container {margin:0 auto; display:block; width:45%; min-height: 540px; display: flex; flex-direction: column;}
.container {width:60%; margin:50px auto;}
.container h2, .container p, .container {margin-bottom:40px;}
.sub-container h2, .sub-container p, .sub-container .see-more {margin-bottom:40px;}

.flex-box {display:flex; justify-content:left;}
.flex-box .sound-icon {display:flex; margin:auto 20px 0; padding:13px; border:1px solid black; transition-duration:0.4s; }
.sound-icon:hover {transition-duration:0.4s; border:1px solid #7988D3; }
.flex-box span img {margin:auto; display:block;}
.choices {display:flex; justify-content:center;}
.choice {border-right: 2px solid #393939; padding: 0 1% 0 1%; cursor:pointer;
  font-feature-settings:"case"; font-family:"firago-regular"; transition-duration:0.4s; color:#535353;}
.choice:hover {transition-duration:0.4s; font-weight:bold; color:black;}
.choice:first-child {padding: 0 1% 0 0; font-weight:bold; color:black;}
.choice:last-child {border:none;}
.align-center {text-align:center;}
.wrapper img {object-fit:contain; display:block; margin:0 auto 20px;}
.signature {top:25%; left:0; width:60px; object-fit:contain; margin:0 0 0 auto; z-index:-5;}
.vivid {background:#7988D3; padding:200px 0;}
.vivid p, .vivid h2 {color:white}
.see-more {padding: 10px 40px; background: transparent; display:block; width:40px; border:1px solid black;
  margin:auto 0 0; cursor:pointer; font-size:18px; line-height:30px; transition-duration:0.4s;}
.see-more:hover {background:black; color:white; transition-duration:0.4s;}
.whiteboard {width:50%; max-width:100%; left:25%; top:10%; position:fixed; z-index:20;
  background:white; opacity:0; display:none; transition-duration: 0.4s;
  margin:0 auto; padding:50px; border:1px solid #999999; border-radius:10px;}
.whiteboard img {display:block; width:20px; height:20px; object-fit:contain; margin:0 0 0 auto; cursor:pointer;}
.whiteboard h2 {border-bottom:1px solid #F3F3F3; padding-bottom:30px; font-size:22px; line-height:25px; }
.whiteboard p {height:300px; overflow-y:scroll; font-size:14px; line-height:18px;}
.whiteboard p::-webkit-scrollbar { width: 6px; }
.whiteboard p::-webkit-scrollbar-track { background:none; }
.whiteboard p::-webkit-scrollbar-thumb {background-color:transparent;  border-radius:4px; }
.whiteboard p:hover::-webkit-scrollbar-thumb{background-color: darkgrey;}


#main-wrapper {min-height:auto; display:none;}
#main-wrapper .signature-container {width:100%; }
#menu-control {display:none; position:fixed; top:2%; left:2%; z-index:11;}
#menu-control img {width:40px; height:40px; object-fit:contain; display:block; margin:0 auto; cursor:pointer;}
#menu-control .menu-closer {display:none;}
#intro-container {height:800px; display:flex;}
#intro-container div {margin:auto;}
#intro-container .background-web {width:100%; height:100%; object-fit:cover; top:0; left:0; z-index:-1;}
#intro-container .background-mobile {width:100%; height:100%; object-fit:cover; top:0; left:0; z-index:-1; display:none;}
#intro-container h1, #intro-container p {margin-bottom:50px;}
#timestamp-container {display: flex; justify-content: center; margin:50px auto 30px;}
#timestamp-container div {width: 174px; height: 2px; background: black; margin: auto 10px;}
#timestamp-container span {font-size:36px; line-height:44px; font-family:"firago-regular";}
#portrait-container {padding:50px 0; background:#F3F3F3;}
#portrait-container ul {margin:50px auto;}
#portrait-container ul li {width:20%; margin:0 5%;}
#portrait-container ul li:first-of-type {margin:0 5% 0 10%;}
#portrait-container ul li:last-of-type {margin:0 10% 0 5%;}
#blackness {position:fixed; display:none; width:100%; left:0; top:0; height:100%;
  transition-duration: 0.4s; color:black; opacity:0; z-index:9; background:black;}


.for4 {padding:50px 0; background:#F3F3F3; min-height:950px;}
.for3 {padding:50px 0; background:#F3F3F3; min-height:650px;}

.for4 ul li {width:22%;}
.for4 ul li:nth-child(n+5) {display:none; opacity:0; transform:scale(0); width:0;}
.for3 ul li {width:30%; margin:0 auto;}
.for3 ul li:nth-child(n+4) {display:none; opacity:0; transform:scale(0); width:0;}
.for2 ul li {width:40%; margin:0 auto; text-align:right;}
.for2 ul li img { height:550px;}
.for2 ul li:nth-child(n+3) {display:none; opacity:0; transform:scale(0); width:0;}
.for1 ul li {width:70%; margin:30px auto; text-align:right;}
.for1 ul li img {height:550px}
.for1 ul li:nth-child(n+2) {display:none; opacity:0; transform:scale(0); width:0;}
.for4 .right-arrow, .for3 .right-arrow {margin:190px auto 190px 10px;}
.for4 .left-arrow, .for3 .left-arrow {margin:190px 10px 190px auto;}
.for2 .right-arrow, .for1 .right-arrow {margin:285px auto 285px 10px;}
.for2 .left-arrow, .for1 .left-arrow {margin:285px 10px 285px auto;}

/* audio for vinyls */
.sound-icon {cursor:pointer;}
#audio-box {width:calc(100% - 160px); display:none; margin:auto 20px;}
audio {display:none;}
.Vinyl {display:none;}
.None {display:none;}
#atitle {font-style:italic;}

#audio_container {width:100%; padding:10px; display:flex; justify-content:left; flex-wrap:nowrap; margin:auto 0 0; border:1px solid #7988D3; transition-duration:0.4s;}
#audio_container:hover {border:1px solid #4D5579; transition-duration:0.4s;}
#audio_button {position:relative; width:30px; height:30px; padding:0; margin:auto; border:none; background:transparent; outline:none; -webkit-appearance:none; cursor:pointer;}

#audio_button  img {display:block; width:20px; height:20px; object-fit:contain; margin:auto 15px auto 0 }
#audio_button #audio_pause {display:none;}
#audio_body{display:block; width:80%; margin:auto;}
#audio_body #audio_information {display:flex; justify-content:left; text-align:left; flex-wrap:wrap;}
#audio_information span {font-size:14px; color:gray; margin:0 5px;}
#audio_information span:first-of-type {color:#2c2c2c; margin:0 20px 0 0;}
#current_time {white-space:nowrap; width:33px;}
#audio_player {display:block; position:relative;}
#audio_background {display:block; width:100%; height:5px; background:#E2E6F9; border-radius:25px;}
#progress_bar { width:0; height:5px; background:#7988D3; margin-top:-5px; border-radius:25px;}
#progress_bar img {display:block; margin:0 0 0 auto; width:15px; height:15px; object-fit:contain; transform:translate(0, -40%);}
#audio_bar {display:block; margin-top:-5px; width:100%; height:5px; background:transparent; cursor:pointer; border-radius:25px;}
#playlist {margin:20px 0;}
.dropdown {margin:auto 10px;  width:50px; height:25px; position:relative; display:inline-block; border-right: 1px solid #E2E6F9; border-radius:4px; text-align:center;}
.dropdown > span {font-family:"firago-semibold"; font-feature-settings:"case"; color:#4D5579; font-size:14px;}
.dropdown ul {display:block; margin:20px 0; width:100px; height:auto}
.dropdown ul li {display: none; margin: auto; height: 100%; width: 100%; cursor:pointer; background:white;}
.dropdown ul li button {padding-bottom: 10px; padding-top:10px; width: 100%; height: 40px; cursor:pointer; display:flex; border-bottom:1px solid #F3F3F3;}
.dropdown ul li button img {width:20px; height:20px; margin:auto; object-fit:contain; display:block;}
.dropdown ul li span {width:50%; color:#4D5579; font-size:14px; font-family:"firago-semibold"; font-feature-settings:"case";}
.dropdown ul li:first-child  button span{font-weight:bold}

.dropdown:hover ul li {display: block;}

#audio_container > img {margin:0 5px; display:block; width:25px; height:25px; cursor:pointer;}
.track_box button {position:relative; display:block; width:15px; height:15px; padding:0; margin:auto; border:none; background:transparent; outline:none; -webkit-appearance:none; cursor:pointer;}
.track_box button img {display:block; width:15px; height:15px; object-fit:contain; margin:auto;}
.track_box button .audio_pause {display:none;}
.track_box span {margin:auto 5px;}
#playlist .track_box .active_button .audio_play {display:none;}
#playlist .track_box .active_button .audio_pause {display:block;}



#playlist .track_box .disabled_button .audio_play {display:block;}
#playlist .track_box .disabled_button .audio_pause {display:none;}
/* audio for vinyls */

/* loader */
.loader {
      box-sizing: border-box;
      display: flex;
      flex: 0 1 auto;
      flex-direction: column;
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: 25%;
      margin:auto;
      position:relative;
      top:30%;
      width:200px;
      height: 200px;
      align-items: center;
      justify-content: center; }

.ball-scale-multiple { position: relative;-webkit-transform: translateY(-60px);transform: translateY(-60px); }
  .ball-scale-multiple > div:nth-child(2) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
  .ball-scale-multiple > div:nth-child(3) {-webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
  .ball-scale-multiple > div { background-color: #7988D3; width: 30px; height: 30px;
    border-radius: 100%; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both;
    position: absolute; left: -60px; top: 0; opacity: 0; margin: 0; width: 120px; height: 120px;
    -webkit-animation: ball-scale-multiple 1s 0s linear infinite; animation: ball-scale-multiple 1s 0s linear infinite; }

  @-webkit-keyframes ball-scale-multiple {
  0% {-webkit-transform: scale(0); transform: scale(0); opacity: 0; }
  5% {opacity: 1; }
  100% {-webkit-transform: scale(1); transform: scale(1); opacity: 0; } }

@keyframes ball-scale-multiple {
  0% {-webkit-transform: scale(0); transform: scale(0); opacity: 0; }
  5% { opacity: 1; }
  100% {-webkit-transform: scale(1); transform: scale(1); opacity: 0; }
}
/* loader */

/* video player */
.video-player { width: 72%; height: auto; position: relative; display:block; margin:0 auto; padding-bottom:10px;
  border-radius:8px; background:#7988D3}
.video-player > img {position:absolute; top:calc(50% - 60px); left:calc(50% - 60px); width:120px; height:120px; object-fit:contain; z-index:5; cursor:pointer }
video { width: 100%; height: 100%; display:block; margin:0 auto; background:black;}
.controls { display: flex; width: 100%; margin:auto; align-items: center; transition: opacity .2s;}
.control-button { border: none; background: transparent; cursor: pointer; opacity: .8; transition: all .2s; }

.control-button:hover { opacity: 1; }

.control-button svg { stroke: #fff; fill: transparent; }

.control-button.play-button { height: 40px; width: 40px; }

.control-button.sound-button { height: 40px; width: 40px;}

.control-button.fullscreen-button { height: 35px; width: 35px;}

.timeline { -webkit-appearance: none; width: calc(100% - 125px); height: .5em; background-color: rgba(255, 255, 255, .3);
  border-radius: 5px; background-size: 0% 100%; background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat;}

.timeline::-webkit-slider-thumb { -webkit-appearance: none; width: 1em; height: 1em; border-radius: 50%; cursor: pointer;
  opacity: 0; transition: all .1s; background-color: rgba(255, 255, 255, .8);}

.timeline::-moz-range-thumb { -webkit-appearance: none; width: 1em; height: 1em; border-radius: 50%;
  cursor: pointer; opacity: 0; transition: all .1s; background-color: rgba(255, 255, 255, .8);
}

.timeline::-ms-thumb { -webkit-appearance: none; width: 1em; height: 1em; border-radius: 50%; cursor: pointer; opacity: 0;
  transition: all .1s; background-color: rgba(255, 255, 255, .8);
}

.timeline::-webkit-slider-thumb:hover {background-color: #fff;}

.timeline:hover::-webkit-slider-thumb {opacity: 1;}

.timeline::-moz-range-thumb:hover {background-color: #fff;}

.timeline:hover::-moz-range-thumb {opacity: 1;}

.timeline::-ms-thumb:hover { background-color: #fff; }

.timeline:hover::-ms-thumb { opacity: 1;}

.timeline::-webkit-slider-runnable-track {-webkit-appearance: none; box-shadow: none; border: none; background: transparent;}

.timeline::-moz-range-track {-webkit-appearance: none; box-shadow: none; border: none; background: transparent;}

.timeline::-ms-track {-webkit-appearance: none; box-shadow: none; border: none; background: transparent;}
/* video player */



@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media only screen and (max-width: 1400px) {
   #graphics {justify-content:center;}
  .choices{flex-wrap:wrap; justify-content: left;}
  .choice {padding:0 2% 0 2%; margin-bottom:20px; }
  .choice:first-child {padding:0 2% 0 2%;}
}

@media only screen and (max-width: 1350px) {

}

@media only screen and (max-width: 1300px) {

}

@media only screen and (max-width: 1130px) {


}

@media only screen and (max-width: 1050px) {
  #intro-container {height:650px;}
  .container-wrapper {flex-wrap:wrap;}
  .sub-container {width:100%;}
  .video-player {width:85%;}
  .slider ul {width:90%; flex-wrap: nowrap; overflow-x: scroll; overflow-y:hidden; padding-bottom:20px; justify-content: left; margin:auto 5% auto auto;}
  .for4 {min-height:800px;}
  .for4 ul li:nth-child(n+5) {display:flex; opacity:1; transform:scale(1); width:100%;}
  .for3 ul li:nth-child(n+4) {display:flex; opacity:1; transform:scale(1); width:100%;}
  .for2 ul li:nth-child(n+3) {display:flex; opacity:1; transform:scale(1); width:100%;}
  .for1 ul li:nth-child(n+2) {display:flex; opacity:1; transform:scale(1); width:100%;}
  .slider ul li {width:100%; height:auto; margin-right:10%; display:flex; flex-direction:column;}
  .slider ul li  img {width:calc(40vw - 20px); height:350px;}
  .for2 ul li, .for1 ul li {text-align:left;}
  #main-wrapper .slider .right-arrow, #main-wrapper .slider .left-arrow {display:none; margin:0;}
  .slider ul::-webkit-scrollbar { height:6px; }
  .slider ul::-webkit-scrollbar-track { background:none; }
  .slider ul::-webkit-scrollbar-thumb {background-color:darkgrey;  border-radius:4px; }
  .slider ul:hover::-webkit-scrollbar-thumb{background-color: darkgrey;}
  .slider ul::-webkit-scrollbar-corner {background-color:transparent;  border-radius:4px; }
}

@media only screen and (max-width: 950px) {
  #intro-container .background-web {display:none}
  #intro-container .background-mobile {display:block}
  h1 {font-size:55px; line-height:60px;}
  #timestamp-container span {font-size:30px; line-height:36px;}
  #timestamp-container div {width:120px;}
  section p, h2 {font-size:30px; line-height:36px;}

  #menu-control {display:block}
  nav {height:100%; width:50%; display:none; flex-direction: column; overflow-y:scroll; top:0;}
  nav .language {margin:50px 10px; justify-content:left; width:50%;}
  nav > a:first-of-type {margin:100px 10px 50px;}
  nav::-webkit-scrollbar { height:6px; }
  nav::-webkit-scrollbar-track { background:none; }
  nav::-webkit-scrollbar-thumb {background-color:darkgrey;  border-radius:4px; }
  nav:hover::-webkit-scrollbar-thumb{background-color: darkgrey;}
  nav::-webkit-scrollbar-corner {background-color:transparent;  border-radius:4px; }

}

@media only screen and (max-width: 770px) {
  .container {width:90%;}

  .signature-container .signature {display:none;}
  .vivid {background:#7988D3; padding:150px 0;}
  .whiteboard {left:15%; padding:30px; width:calc(70% - 60px); overflow-y:scroll;}

  .whiteboard::-webkit-scrollbar { height:6px; }
  .whiteboard::-webkit-scrollbar-track { background:none; }
  .whiteboard::-webkit-scrollbar-thumb {background-color:darkgrey;  border-radius:4px; }
  .whiteboard:hover::-webkit-scrollbar-thumb{background-color: darkgrey;}
  .whiteboard::-webkit-scrollbar-corner {background-color:transparent;  border-radius:4px; }
}

@media only screen and (max-width: 700px) {

}

@media only screen and (max-width:650px){

}

@media only screen and (max-width: 600px) {
  #intro-container {height:500px;}
  h1 {font-size:50px; line-height:56px;}
  section img {width:35%; top:25%; left:55%;}
  #portrait-container ul {flex-wrap:wrap;}
  #portrait-container ul li:first-child {margin:30px auto;}
  #portrait-container ul li {margin:30px auto; width:60%;}
  #portrait-container ul li:last-child {margin:30px auto;}
  #portrait-container ul li img {height:auto;}
  #biography .flex-box {flex-wrap:wrap;}
  #audio-box {width:90%; margin:20px 0;}
  #audio_button {margin:0 20px 0 0;}
  #audio_body {width:75%;}
  .vivid {background:#7988D3; padding:100px 0;}
  .slider ul li  img {width:calc(80vw - 20px); height:300px;}
  nav {overflow-y:hidden;}
  .whiteboard {left:5%; top:2%; padding:20px; width:calc(90% - 40px); overflow-y:hidden; height:calc(90% - 40px);}
  .whiteboard h2 {font-size:16px; line-height:20px;}
  .whiteboard p {min-height:200px;}
  .video-player > img {top:calc(40% - 35px); left:calc(50% - 35px); width:70px; height:70px;}



}

@media only screen and (max-width: 500px) {
  .vivid {background:#7988D3; padding:50px 0;}
  section p, section h2 {font-size:22px; line-height:36px;}
   #graphics {justify-content:left;}
   .choices{margin: 0 30px;}
}

@media only screen and (max-width: 400px) {

}