body {
    background-color: white;
    font-family:'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica', 'Arial', sans-serif;

}

a {
    font-weight: bold;
}

#full-header {
    background-color: black;
}

#header-desktop {
    background-image:url("/images/sankyo-stream/header-desktop.png");
    width:100%;
    height:0;
    display: inline-block;
    position: relative;
    background-size: contain;
    margin: 0 auto;
    display:none;
}

#banner {
    background-image: url("/images/sankyo-stream/viii-oil-paint-mob.jpeg");
    width:100%;
    display: inline-block;
    position: relative;
    background-size: fill;
    justify-content: center;
}

#viii-return-button {
    display: inline;
    top: 0;
    position:absolute;
    width:25%;
    padding-left:3%;
}

#theend-banner {
    background-image: url("/images/sankyo-stream/theend-banner-mobile.jpg");
    width:100%;
    height:0;
    display: inline-block;
    position: relative;
    background-size: contain;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-color: black;
    padding-top: 177.777%;
    margin-bottom: -5px;
    justify-content: center;
}

#theend-gif {
    position:absolute;
    padding-top: 2%;
    top: 0;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
}

#theend-gif img {
    width: 75%;
    height: 75%;
    margin: auto;
}

.content {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

#header-desktop #back-image {
    padding-left: 3vw;
    width:18vw;
}

#header #back-image {
    padding-left:3vw;
    width:40%;
}

#header-vimeo {
    display: flex;
    justify-content: flex-end;
}

#header-vimeo-mobile {
    display: flex;
    justify-content: center;
    padding-top:180%;
}


#header-vimeo iframe {
    border: 0;
    height: 50%;
    padding-left:20%;
}

#header-vimeo-mobile iframe {
    border:0;
    width:80%;
    margin: 0 auto;
    left: auto;
}


#header {
    background-image: url("/images/sankyo-stream/header.png");
    width:100%;
    height:0;
    display: inline-block;
    position: relative;
    background-size: contain;
    margin: 0 auto;
    padding-top:177%;
}

.main-content {
    font-family:'Helvetica', 'Arial', sans-serif;
    padding:1vw;
    display:flex;
    flex-direction: column;
    max-width: 1080px;
    margin: 0 auto;
}

.main-content p {
    font-size: large;
}

.main-content picture.heading {
    margin: 0 auto;
    height:100%;
}

.main-content div.heading {
    height: 40vw;
    max-height:400px;
    justify-content: center;
    display: flex;
}

div .image-grid {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.image-grid img {
    height:500px;
}


.text-wrap img {
    float:left;
    height:500px;
}

.sarah-text img {
    width:200px;
}

.main-content picture {
    margin: 0 auto;
}

/*.blue-background {
    background-color: #94d1de;
    max-width: 100%;
}*/

.medium-img {
    width:500px;
    height:auto;
    margin:0 auto;
}

.list {
    background-color: black;
}
.list-header {
    padding-top:50px;
    background-color: black;
}


#concepts-grid {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(10, 5vw);
    column-gap: 0;
    row-gap: 0;
    padding:0px;
    align-content: inherit;
}

#concepts-grid .right-image {
    grid-column: 11 /span 9;
    grid-row: 5 /span 5;
}

#concepts-grid .right-text {
    grid-column: 11 /span 9;
    grid-row: 1 /span 8;
    text-align: right;
}

#concepts-grid .left-text {
    grid-column: 1 /span 9;
    grid-row: 5 /span 5;
}

#concepts-grid .heading {
    grid-column: 1 /span 14;
    grid-row: 1 /span 5;
}

.overflow-hidden{
    position: relative;;
    overflow-x: hidden;
    max-width:100vw;
}
.joan-poems {
    display:block;
    max-width: 250px;
}
.joan-poems img {
    width:250px;
    height:auto;
    padding-right:10px;
}

.intro {
    margin:20px;
}

.grid-1 {
    margin:20px;
}




@media only screen and (min-width:1080px) {
    /*html, body {
        position: relative;
        overflow-x:hidden;
    }*/
}

@media only screen and (min-width: 800px) {
    #header-desktop {
        visibility: visible;
        padding-top:56.25%;
        display: block;
    }
      .grid-1 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 150px 150px 150px 150px 150px 150px 150px 150px 150px 150px 150px 500px;
        gap: 5px 5px;
        width:1080px;
        max-width: 1080px;
        margin: 0 auto;
        
      }
      
      .concepts-right-text { 
          grid-area: 1 / 5 / 4 / 9; 
          text-align: end;
        
        }
      
      .concepts-heading { grid-area: 1 / 1 / 4 / 6; }
      
      .concepts-right-image { 
        padding-top:30px; 
        padding-right:20px; 
        grid-area: 2 / 4 / 5 / 9; 
    z-index:-1000;
    display:flex;
    flex-flow: row;

    }
      
      .process-heading { 
          grid-area: 3 / 5 / 6 / 9; 
          padding-top:0px;
        }
        .process-heading img {
            width:120%;
            height:120%;
        }
      
      .sarah-text { 
        margin-top:0px;  
        grid-area: 5 / 6 / 11 / 9; 
        }

        .sarah-text img {
            max-width:500px;
        }
      
        .sarah-text-mobile {
            display:none;
        }
      .joan-text { 
          grid-area: 4 / 1 / 10 / 6; 
          margin-top:-50px;
        }
      
      .mac-text { 
          grid-area: 10 / 1 / 17 / 6;
          margin-top: -80px;
      }      
      .point-reyes-image { 
          grid-area: 12 / 2 / 17 / 8;  
            margin-top:-20px;
        }
          
          
          
          
          .catherine-maude { 
              padding-top:15px;
              grid-area: 13 / 5 / 16 / 9; 
            }
          
          .chapel { grid-area: 13 / 1 / 17 / 5; }
          
          .liam-yonni { grid-area: 16 / 5 / 19 / 8; }
          
          .liam-lula { grid-area: 16 / 2 / 19 / 5; }
          
          .maude-letter { grid-area: 19 / 2 / 22 / 5; }
          
          .final-credits { grid-area: 19 / 5 / 23 / 9; }
          
        .blue-background {
             grid-area: 13 / 1 / 19 / 9; 
            background-color: lightblue;
            z-index: -1000;
            position:relative;
            width:150vw;
            margin-left: -40vw;
            overflow: hidden;
        }
      
      
      
      
      
      
    #header {
        display:none;
    }
    .main-content {
        visibility: visible;
    }

    #banner {
        background-image: url("images/sankyo-stream/viii-oil-paint.jpeg");
    }

    #viii-new-banner {
        width: 70%;
        height: auto;
        margin: 0 auto;
    }

    #viii-return-button  {
        width:15%;
        padding-left:3%;
    }

    #theend-banner {
        background-image: url("/images/sankyo-stream/theend-banner.jpg");
        padding-top: 56.25%;
    }

    #theend-gif {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    #theend-gif img {
        padding-top: 8.5%;
        padding-right: 56%;
        width: 37%;
        height: 37%;
    }
}