@media (min-width: 1980px) and (orientation: Landscape){
  :root{
    --biography-text-size: calc(1 * var(--max-w-percent) + 5px);
    --biography-line-size: calc(3 * var(--max-w-percent) / 2 + 5px);
  }

  div#author{
    background-color: black;
    width: 100%;
    min-height: calc(100vh - var(--header-s1));
  }

  h1.headline.author-about-headline{background-color: black; color: white;}
  h1.headline.author-live-headline{background-color: black; color: white;}

  div.author-about{
    background-color: black;
    overflow: hidden;
  }  

  div.author-about-container{
    width: 100%;
    position: relative;
    min-height: calc(30 * var(--max-w-percent));
  }

  div.author-about-slide{
    position: absolute;
    left: 100%;
    width: 100%;
    transition: left 0.4s ease-out 0s;
  }

  img.author-about-slide-photo{
    height: calc(30 * var(--max-w-percent));
    margin: 0px 50px;
    float: left;  
  }  

  h2.author-about-slide-header{
    color: #00c6c8;;
    font-size: calc(var(--biography-text-size) * 10 / 9);
    line-height: calc(var(--biography-line-size) * 10 / 9);
    font-family: Roboto-Regular;
    padding: 0px 10%;
  }

  p.author-about-slide-paragraph{
    color: #fff;
    font-size: var(--biography-text-size);
    line-height: var(--biography-line-size);
    font-family: Roboto-Light;
    padding: 0px 10%;
  }

  button.author-about-button.left{left: 0px; background-image: url("/photo/sys/left.png");}
  button.author-about-button.right{right: 0px; background-image: url("/photo/sys/right.png");}

  button.author-about-button{
    position: absolute;
    height: 100%;
    width: 50px;
    background-size: 100%;
    top: 0px;
    background-color: #00000040;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }

  div.author-live{
    background-color: black;
    width: 100%;
    padding-bottom: 100px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    padding: 50px;
  }

  div.author-live-photo{
    width: calc(100% / 3);
    height: calc(100 * var(--max-w-percent) / 3 / 2);
    opacity: 1;
    transition: opacity 0.4s ease-out 0s;
    background-size: 100%;
    background-position: 50% 30%;
    background-repeat: no-repeat;
  }

  div.author-live-photo:hover{opacity: 0.6; }

  video.author-live-video{width: calc(100% / 3); }

  div.author-live-backscreen{
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    position: fixed;
    display: none;
    align-items: center;
  }

  div.author-live-backscreen-container{
    position: relative;
    max-height: 90vh;
    display: flex;
    width: 100%;
  }

  img.author-live-backscreen-photo{
    max-height: 90vh;
    border: calc(2vw / 5) white solid;
    margin: 0px 5vh;
    max-width: 60vw;
  }

  div.author-live-backscreen-textbox{
    background-color: #f3fffd;
    margin-right: 5vh;
    position: relative;
    width: 100%;
  }

  img.author-live-backscreen-decore{ 
    height: 5vw; 
    position: absolute; 
    top: 0px; 
    right: 0px;
  }

  p.author-live-backscreen-text{
    color: #000;
    font-size: var(--biography-text-size);
    line-height: var(--biography-line-size);
    font-family: Roboto-Light;
    margin: calc(2.5vw);
  }
}

@media (min-width: 720px) and (max-width: 1980px) and (orientation: Landscape){
  :root{
    --biography-text-size: calc(1vw + 5px);
    --biography-line-size: calc(3vw / 2 + 5px);
    --biography-head-size: calc(var(--biography-text-size) * 10 / 7)
  }

  div#author{
    background-color: black;
    width: 100%;
    min-height: calc(100vh - var(--header-s2));
  }

  h1.headline.author-about-headline{background-color: black; color: white;}
  h1.headline.author-live-headline{background-color: black; color: white;}

  div.author-about{
    background-color: black;
    overflow: hidden;
  }  

  div.author-about-container{
    width: 100%;
    position: relative;
    min-height: calc(30vw + 100px);
  }

  div.author-about-slide{
    position: absolute;
    left: 100%;
    width: 80%;
    margin: 0% 10%;
    background: #d3edf0;
    transition: left 0.4s ease-out 0s;
  }

  img.author-about-slide-photo{
    height: calc(30vw + 100px);
    margin: 0px 50px 0px 0px;
    float: left;  
  }  

  h2.author-about-slide-header{
    color: black;
    font-size:var(--biography-head-size);
    line-height: var(--biography-head-size);
    font-family: Roboto-Regular;
    padding: 0px 10%;
    margin-top: calc(var(--biography-head-size) / 4);
  }

  p.author-about-slide-paragraph{
    color: black;
    font-size: var(--biography-text-size);
    line-height: var(--biography-line-size);
    font-family: Roboto-Light;
    padding: 0px 50px;
    margin-top: calc(var(--biography-head-size) / 4);
  }

  button.author-about-button.left{left: 0px; background-image: url("/photo/sys/left.png");}
  button.author-about-button.right{right: 0px; background-image: url("/photo/sys/right.png");}

  button.author-about-button{
    position: absolute;
    height: 100%;
    width: 100px;
    background-size: 100%;
    top: 0px;
    background-color: #00000040;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }

  div.author-live{
    background-color: black;
    width: 100%;
    padding-bottom: 100px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
  }

  div.author-live-photo{
    width: calc(100% / 3);
    height: calc(100vw / 3 / 2);
    opacity: 1;
    transition: opacity 0.4s ease-out 0s;
    background-size: 100%;
    background-position: 50% 30%;
    background-repeat: no-repeat;
  }

  div.author-live-photo:hover{ opacity: 0.6; }

  video.author-live-video{ width: calc(100% / 3);}

  div.author-live-backscreen{
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    position: fixed;
    display: none;
    align-items: center;
  }

  div.author-live-backscreen-container{
    position: relative;
    max-height: 90vh;
    display: flex;
    width: 100%;
  }

  img.author-live-backscreen-photo{
    max-height: 90vh;
    border: calc(2vw / 5) white solid;
    margin: 0px 5vh;
    max-width: 60vw;
  }

  div.author-live-backscreen-textbox{
    background-color: #f3fffd;
    margin-right: 5vh;
    position: relative;
    width: 100%;
  }

  img.author-live-backscreen-decore{ 
    height: 5vw; 
    position: absolute; 
    top: 0px; 
    right: 0px;
  }

  p.author-live-backscreen-text{
    color: #000;
    font-size: var(--biography-text-size);
    line-height: var(--biography-line-size);
    font-family: Roboto-Light;
    margin: 2.5vw;
  }
}

@media (max-width: 720px), (orientation: Portrait){
  :root{
    --biography-text-size: calc(4vw);
    --biography-line-size: calc(5vw);
  }

  div#author{
    background-color: black;
    width: 100%;
    min-height: calc(100vh - var(--header-s3));
  }

  h1.headline.author-about-headline{background-color: black; color: white;}
  h1.headline.author-live-headline{background-color: black; color: white;}

  div.author-about{
    background-color: black;
    overflow: hidden;
  }  

  div.author-about-container{
    width: 100%;
    position: relative;
    height: 100vh;
  }

  div.author-about-slide{
    position: absolute;
    left: 100%;
    width: 100%;
    transition: left 0.4s ease-out 0s;
  }

  img.author-about-slide-photo{
    margin: 4vw max(calc((100% - 55vh) / 2), 10vw);
    width: 55vh;
    max-width: 80vw; 
  }  

  h2.author-about-slide-header{
    color: #00c6c8;
    font-size: calc(var(--biography-text-size) * 10 / 8);
    line-height: calc(var(--biography-line-size) * 10 / 8);
    font-family: Roboto-Regular;
    padding: 0px 10%;
  }

  p.author-about-slide-paragraph{
    color: #fff;
    font-size: var(--biography-text-size);
    line-height: var(--biography-line-size);
    font-family: Roboto-Light;
    padding: 0px 10%;
  }

  button.author-about-button.left{left: 0px; background-image: url("/photo/sys/left.png");}
  button.author-about-button.right{right: 0px; background-image: url("/photo/sys/right.png");}

  button.author-about-button{
    position: absolute;
    height: 100%;
    width: 50px;
    background-size: 100%;
    top: 0px;
    background-color: #00000040;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }

  div.author-live{
    background-color: black;
    width: 100%;
    padding-bottom: 10vw;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
  }

  div.author-live-photo{
    width: calc(100% / 2);
    height: calc(100vw / 2 / 2);
    background-size: 100%;
    background-position: 50% 30%;
    background-repeat: no-repeat;
  }

  video.author-live-video{ width: calc(100% / 2);}

  div.author-live-backscreen{
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background-color: black;
    position: fixed;
    display: none;
    align-items: center;
  }

  div.author-live-backscreen-container{
    position: relative;
    max-height: 100vh;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }

  img.author-live-backscreen-photo{
    border: calc(2vw / 5) white solid;
    margin: 2.5vw max((100% - 95vw) / 2, (100% - 50vh) / 2);
    max-width: min(95vw, 50vh);
  }

  div.author-live-backscreen-textbox{
    background-color: #f3fffd0a;
    position: relative;
    height: 100vh;
    margin: 0px 2.5vw;
    max-width: 95vw;
  }

  img.author-live-backscreen-decore{ 
    height: 10vw;
    position: absolute;
    top: 0px;
    right: 0px;
  }

  p.author-live-backscreen-text{
    color: #fff;
    font-size: var(--biography-text-size);
    line-height: var(--biography-line-size);
    font-family: Roboto-Light;
    margin: 5vw;
  }
}