* {
	box-sizing:border-box;
}


img {
    display: block;
    width: 100%;    
}

figure {
    margin: 0;
}
main{
    overflow: hidden;
}
main section{
  justify-content: start;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  position: relative;
  height: 90vh;
}
main section:last-of-type{
    margin-bottom: 35vh
}
main section:first-of-type{
    margin-top: 0;
}
main section > figure{
    padding: 2rem;
    flex: 0 0 25%;    
    transform-origin: 50%;
    margin: 2rem 0;
}

main section h3 ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
main section h3 {
  font-size: 65px;
  line-height: 70px;
  font-family: 'GT America Expanded Bold'!important;
  color: #fff;
  font-weight: 300;
  text-align: center;
  z-index: 25;
  position: absolute;
  width: 100%;
  transform: translate(-50%);
  left: 50%;
  top: 50%;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
  pointer-events: none;
}
main section h3.lines-3{
    font-size: 55px;
    line-height: 60px;
}
main section h3 > span.year {
    display: inline-block;
    font-size: 60px;
    font-family: 'GT America Expanded Light'!important;
    margin-bottom: 15px;
}
@media screen and (max-width: 991px) {
    main section h3 {
        font-size: 5vw;
        line-height: 5vw;
        padding: 0 1rem;
    }
    main section h3.lines-3 {
        font-size: 4.5vw;
        line-height: 4.5vw;
        
    }
    main section h3 > span.year {
        font-size: 6vw;        
    }
    main section{
        max-height: unset;
    }
    main section:last-of-type{
        margin-bottom: 15vh
    }
}


p {
  grid-row: 7 / 10;
  grid-column: 5 / 9;
}

.section-parallax{
    background-color: transparent;
}

section > figure{    
    transition: all 400ms;
    transition-timing-function: ease-out;    
    opacity: 1;
}
.section-parallax.hover figure img{
    opacity: 0.3;
}
.section-parallax.hover figure.hover{
}
.section-parallax.hover figure.hover img{
    opacity: 1!important;    
}
section > figure > div > img{    
    box-shadow: 0 5px 80px rgba(0,0,0,.6);
    position: relative;
    transition: opacity 400ms;
    transition-timing-function: ease-out;
}
section > .col-12{
    height: 150px;
}

.position-sticky > section > figure > div{
    cursor: pointer;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}
main section{
}
main section > figure.item:not(.item-empty){
    aspect-ratio: 1/1;
    position: relative;
}
main section > figure.item.item-empty{
    height: 1px;
    cursor: none;
}
main section.hover > figure.item{
    
}
main section > figure >div{
    background-color: #000;
    position: absolute;
    width: 100%;
    height: 70%;    
    transition: all .4s cubic-bezier(0, 0, 0.5, 1);
    /*transition: all 1.2s cubic-bezier(0, 0, 0.63, 1);*/
}
main section > figure >div.vertical{
    width: 70%;
    height: 100%;    
}
main section > figure >div.full-vertical{
    width: 50%;
    height: 100%;    
}
main section > figure >div.soft-vertical{
    width: 87%;
    height: 100%;    
}
main section > figure >div.semi-vertical{
    width: 80%;
    height: 100%;    
}
main section > figure >div.horizontal{
    width: 100%;
    height: 70%;    
}
main section > figure >div > img{
    opacity: 1;
    width: 100%;
    display: block;
    position: relative;
    box-shadow: 0 0 56px rgba(0,0,0,.7);
    width: 100%;
    height: 100%;
    object-fit: cover;
}


section > figure.item5{
    z-index: 15;
}
section > figure.item2{
    z-index: 15;
}
section > figure.item4{
    z-index: 5;
}
section > figure.item1 > div{
    left: 25px;
    top: -100px;
}
section > figure.item2 > div{
    left: 15px;
    top: 100px;
}
section > figure.item3 > div{
    left: -20px;
    top: 150px;
}
section > figure.item4 > div{
    left: 50px;
    top: -200px;
}
section > figure.item5 > div{
    left: 0px;
}
section > figure.item6 > div{
    left: -50px;
}
section > figure.item7 > div{
    left: 50px;
}
section > figure.item8 > div{
    left: 0px;
}
section > figure.item9 > div{
    left: 200px;
}
section > figure.item10 > div{
    left: 100px;
}
/*.position-sticky > section:nth-child(5n+5) > figure > img{
    left: -150px;
}*/





.section-parallax > section > figure.item{    
    width: 20vw;
    position: absolute!important;
}

.section-parallax > section > figure.item.item1{
    z-index: 15;
    width: 21vw;
    top: -10.6vw;
    right: 22vw;
}
.section-parallax > section > figure.item.item2{
    width: 20vw;
    top: 30vw;
    left: 2.8vw;
}
.section-parallax > section > figure.item.item3{
    width: 20vw;
    top: 10vw;
    left: 40vw;
}
.section-parallax > section > figure.item.item4{
    z-index: 5;
    width: 26vw;
    top: 15.3vw;
    right: 2.7vw;
}
.section-parallax > section > figure.item.item5{
    width: 13vw;
    top: -6vw;
    left: 34.5vw;
}
.section-parallax > section > figure.item.item6{
    width: 24vw;
    bottom: 13.6vw;
    left: 10.5vw;
}
.section-parallax > section > figure.item.item7{
    width: 21vw;
    bottom: 16vw;
    right: 35.6vw;
}
.section-parallax > section > figure.item.item8{
    width: 28vw;
    bottom: -5vw;
    right: 5vw;
}
.section-parallax > section > figure.item.item9{
    width: 10vw;
    top: -4vw;
    right: 4vw;
}
.section-parallax > section > figure.item.item10{
    
}


.block-hover{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 100;
}





@media screen and (max-width: 768px) {
    .section-parallax > section > figure.item.item1{
        z-index: 15;
        width: 32vw;
        top: -38.6vw;
        right: 40vw;
    }
    .section-parallax > section > figure.item.item2{
        width: 30vw;
        top: 30vw;
        left: 2.8vw;
    }
    .section-parallax > section > figure.item.item3{
        width: 30vw;
        top: -10vw;
        left: 33vw;
    }
    .section-parallax > section > figure.item.item4{
        z-index: 5;
        width: 36vw;
        top: 15.3vw;
        right: 13.7vw;
    }
    .section-parallax > section > figure.item.item5{
        width: 33vw;
        top: -6vw;
        left: 60.5vw;
    }
    .section-parallax > section > figure.item.item6{
        width: 34vw;
        bottom: 13.6vw;
        left: 15.5vw;
    }
    .section-parallax > section > figure.item.item7{
        width: 31vw;
        bottom: 16vw;
        right: 35.6vw;
    }
    .section-parallax > section > figure.item.item8{
        width: 38vw;
        bottom: -5vw;
        right: 5vw;
    }
    .section-parallax > section > figure.item.item9{
        width: 20vw;
        top: -4vw;
        right: 4vw;
    }
    .section-parallax > section > figure.item.item10{

    }
    .section-parallax section{
      max-height: 80vh;  
    }
    main section > figure > div.full-vertical,
    main section > figure > div.semi-vertical{
        width: 100%;
    }
}