@charset "utf-8";

* {
    margin: 0;
    font-family: "Work Sans", sans-serif;
    height: auto;
    word-break: break-word;
}

body {
    background: #141414;
}

a {
    text-decoration: none;
    color: #000;
}

p {
    font-size: 24px;
    font-weight: 200;
}

.row {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.row-header {
    max-width: 90%;
    margin: 0 auto;
    display: flex;
}

.row .col {
    padding: 15px;
    box-sizing: border-box;
}

.row .col-3 {
    flex-basis: 25%;
}

.row .col-4 {
    flex-basis: 33.333%;
}

.row .col-6 {
    flex-basis: 50%;
}

.row .col-8 {
    flex-basis: 66.666%;
}

.row .col-9 {
    flex-basis: 75%;
}

.row .col-12 {
    flex-basis: 100%;
}

p.marquee {
    overflow: hidden;
    width: max-content;
}




/* STYLE HOME PAGE */
#header {
    text-transform: uppercase;
    font-size: 14px;
    position: sticky;
    top: 0;
    height: 0;
    mix-blend-mode: difference;
    filter: invert(1);
    z-index: 999;
}

#about {
    text-transform: uppercase;
    font-size: 14px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    mix-blend-mode: difference;
    filter: invert(1);
    z-index: 999;
    text-align: right;
}

#about a::after {
    background-image: url(../img/right-arrow.png);
    transform: rotate(-45deg);
    display: inline-block;
    content: "";
    height: 10px;
    background-size: 10px;
    width: 10px;
    margin-left: 7px;
    background-repeat: no-repeat;
}

#header .col-6.menu{
    text-align: right;
}

span.divider {
    padding: 0 20px;
}

#header .col-6 {
    padding: 50px 0;
}



#above-the-fold {
    height: 100vh;
    background-image: url(../img/hero-hp.png);
    background-size: 120%;
    background-position: center;
    animation-name: background-scale;
    animation-delay: .4s;
    animation-fill-mode: forwards;
    animation-duration: 1.6s;
    animation-timing-function: ease-in-out;
}

@keyframes background-scale {
    from {
        background-size: 120%;
    }

    to {
        background-size: 100%;
    }
}

@keyframes marquee-scroll {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(50%);
    }
}

p.marquee {
    font-size: 200px !important;
    text-transform: uppercase;
    font-weight: 500;
    padding-top: 100px;
    animation: marquee-scroll 30s linear 0s infinite normal forwards;
    transform: translateX(-50%);
}

.marquee-container {
    animation: marquee-blur .4s linear 1.4s 1 normal forwards;
    overflow: hidden;
    opacity: 0;
}

@keyframes marquee-blur {
    from {
        filter: blur(8px);
        opacity: 0;
    }

    to {
        filter: blur(0);
        opacity: 1;
    }
}

#above-the-fold p.marquee {
    padding-top: 100px;
}

#slider .row-fixed {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
}

#slider .row-fixed h1 {
    font-size: 52px;
    font-weight: 500;
    margin-bottom: 30px;
}


#profile {
    background-color: #141414;
    color: #fff;
    padding: 120px 0;
}

#profile .row-title {
    margin-bottom: 150px;
}

#profile h2,
#profile h3 {
    font-weight: 500;
}

#profile h2 {
    font-size: 122px;
}

#profile h3 {
    font-size: 22px;
}

#portfolio {
    background-color: #141414;
    position: relative;
    padding: 0;
}

#portfolio img {
    width: 100%;
    transition: .2s;
    bottom: 0 !important;
    top: 0;
    object-fit: cover;
    filter: brightness(0.5);
}

#portfolio.active,
#portfolio .video-img.active,
#portfolio .row.active,
#portfolio img.active {
    animation-name: transizione-pagina-concepts;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    position: sticky;
    bottom: 0;
    top: 0;
    background: transparent;
    z-index: 997;
    height: auto;
}

@keyframes transizione-pagina-concepts {
    0% {
        height: 540px;
        width: 100%;
        position: sticky;
        z-index: 997;
        bottom: 0 !important;
        top: 0 !important;
    }


    100% {
        height: 100vh;
        position: sticky;
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
        bottom: 0;
        top: 0;
        padding: 0px;
        z-index: 997;
    }

}


#portfolio .video-img:hover img {
    transform: scale(1.05);
    transition: .5s;
}

#portfolio .video-img.active:hover img {
    transform: scale(1) !important;
    transition: .5s;
}

#portfolio .video-img {
    margin: 0 auto;
    display: block;
    z-index: 9;
    transition: .5s;
}

video {
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    transition: .5s;
}

#portfolio .video-img:hover video{
opacity: 1;
transition: .5s;
}

#portfolio h3 {
    font-size: 60px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;  
}

#portfolio .col-12 {
position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#quote {
    background: #141414;
    color: #fff;
    padding-top: 120px;
}

#quote h6 {
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
}

#quote h6.line-1 {
    text-align: right;
}

#quote .row{
    max-width: 100%;
    padding: 20px 10px;
}

#quote .col {
    padding: 0px;
}

#quote .row{
    max-width: 100%;
}

#selected-works {
    background-image: url(../img/hero-newbalance.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#selected-works .row:first-of-type {
    padding-top: 150px;
}

#selected-works .row:last-of-type {
    padding-bottom: 150px;
}


#selected-works.active {
    animation-name: transizione-pagina-projects;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    position: sticky;
    bottom: 0;
    top: 0;
    z-index: 997;
    height: auto;
}

@keyframes transizione-pagina-projects {
    0% {
        height: 540px;
        width: 100%;
        position: sticky;
        z-index: 997;
        bottom: 0 !important;
        top: 0 !important;
    }


    100% {
        height: 100vh;
        position: sticky;
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
        bottom: 0;
        top: 0;
        padding: 0px;
        z-index: 997;
    }

}

#selected-works.active p,
#selected-works.active img  {
    animation-name: transizione-elementi-pagina-projects;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}



@keyframes transizione-elementi-pagina-projects {
    0% {
        opacity: 1;
    }


    100% {
        opacity: 0;
    }

}






#selected-works p {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
}

#selected-works img {
   float: right;
}

#selected-works p.marquee {
    padding: 0;
    text-transform: lowercase;
    font-size: 200px;
    font-weight: 500;
 }

 #selected-works .text-block {
    padding-top: 100px;
 }

 #selected-works .text-block p {
    font-size: 24px;
    text-transform: none;
    font-weight: 200;
 }

 #quote-robert {
    padding: 150px 0;
    background: #fff;
}

 #quote-robert .row {
    max-width: 1360px;
}

 #quote-robert h2 {
    font-size: 120px;
    font-weight: 500;
    line-height: 120px;
}

#quote-robert h3 {
    font-size: 20px;
    font-weight: 500;
    padding-top: 50px;
}

#business {
    padding: 150px 0;
    color: #ffffff;
    background-color: #141414;
}

#business h3 {
    font-size: 20px;
    font-weight: 500;
}

#business p.heading-section {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 100px;
}

#business h2 {
    font-size: 122px;
    font-weight: 500;
    margin-bottom: 100px;
}

#footer {
    padding: 100px 0;
    font-size: 44px;
    font-weight: 600;
    background: #fff;
}

#footer .col {
    margin: 0 auto;
    text-align: center;
}

#footer ul{
list-style: none;
display: flex;
flex-wrap: wrap;
}

#footer li {
flex-basis: 33%;
}



/* STYLE ABOUT */

#above-the-fold-about {
    height: 100vh;
    background-image: url(../img/profile.jpg);
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
    color: #fff;
    animation-name: background-scale;
    animation-delay: .4s;
    animation-fill-mode: forwards;
    animation-duration: 1.4s;
    animation-timing-function: ease-in-out;
}

#above-the-fold-about .slide-top-opacity-anim {
    animation-duration: .6s;
    animation-delay: 1.5s;
}

#above-the-fold-about img.slide-top-opacity-anim {
    animation-delay: 1s;
}

#above-the-fold-about .solid-bg-text-reveal-anim-negative {
    animation-delay: 1.25s;
    opacity: 0;
}

#above-the-fold-about .solid-bg-text-reveal-anim-negative.active {
    opacity: 0;
}

#above-the-fold-about #slider h1 {
    font-size: 24px;
}

#above-the-fold-about img {
    filter: invert(1);
}

#above-the-fold-about p.marquee {
    font-size: 200px;
    text-transform: uppercase;
    font-weight: 500;
    padding-top: 100px;
    animation-name: marquee-scroll;
    animation-duration: 30s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
}

#bio {
    background-color: #141414;
    color: #fff;
    padding: 120px 0;
}

#bio .row-title {
    margin-bottom: 150px;
}

#bio h2,
#bio h3 {
    font-weight: 500;
}

#bio h2 {
    font-size: 122px;
}

#bio h3 {
    font-size: 22px;
}


#stack {
    padding: 120px 0;
    background: #fff;
}

#stack .row {
    padding-bottom: 50px;
}

#stack p {
    line-height: 35px;
}

#stack .row-title {
    margin-bottom: 150px;
}

#stack h2,
#stack h3 {
    font-weight: 500;
}

#stack h2 {
    font-size: 122px;
}

#stack h3 {
    font-size: 22px;
}

#stack strong {
    font-weight: 500;
}


#awards {
    padding: 120px 0;
    background: #141414;
    color: #fff;
}

#awards .row {
    padding-bottom: 50px;
}

#awards p {
    line-height: 35px;
}

#awards .row-title {
    margin-bottom: 150px;
}

#awards h2,
#awards h3 {
    font-weight: 500;
}

#awards h2 {
    font-size: 122px;
    display: block;
}

#awards h3 {
    font-size: 22px;
}

#awards strong {
    font-weight: 500;
}

#awards .title-mob {
    display: none;
}

/* STYLE PROJECT CONCEPTS */

body#project-concepts #animation-frame-1,
body#project-concepts #animation-frame-2 {
    display: none;
}

#above-the-fold-project-concepts {
    height: 100vh;
    background-image: url(../img/face.jpg);
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
    color: #fff;
}

#above-the-fold-project-concepts p.marquee {
    font-size: 200px;
    text-transform: uppercase;
    font-weight: 500;
    padding-top: 100px;
}

#above-the-fold-project-concepts .marquee-container {
    animation-delay: 0s;
}

#above-the-fold-project-concepts #slider h1 {
    font-size: 24px;
}

#above-the-fold-project-concepts img {
    filter: invert(1);
}

#works {
    background-color: #141414;
    color: #fff;
    padding: 120px 0;
}

#works .row-title:first-of-type {
    margin-top: 0px;
}

#works .row-title {
    margin-bottom: 150px;
    margin-top: 200px;
}

#works h2,
#works h3 {
    font-weight: 500;
}

#works h2 {
    font-size: 122px;
}

#works h3 {
    font-size: 22px;
}

.row-portfolio img {
    max-width: 100%;
    width: 100%;
}

.row-portfolio {
    max-width: 1240px;
    margin-bottom: 120px;
}

#parallax-section {
    background-image: url(../img/stanton-bg.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0 1px 0;
}

.row-full-width {
    width: 100%;
    max-width: 100%;
}

#parallax-section-reresh {
    background-image: url(../img/refresh-bg.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0 1px 0;
}




/* CSS PAGINA PROJECTS */

body#projects #animation-frame-1,
body#projects #animation-frame-2 {
    display: none;
}

#projects p.marquee {
    padding: 0;
    text-transform: lowercase;
    font-size: 200px;
    font-weight: 500;
}

#new-balance {
    background-image: url(../img/hero-newbalance.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0px;
}

#new-balance .marquee-container {
    animation-delay: 0s;
}

#new-balance p {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
}

#new-balance img {
   float: right;
}

#new-balance p.marquee {
    padding: 0;
    text-transform: lowercase;
 }

 #new-balance .text-block {
    padding-top: 100px;
 }

 #new-balance .text-block p {
    font-size: 24px;
    text-transform: none;
    font-weight: 200;
 }


 #wing {
    background-image: url(../img/hero-wing.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0px;
    color: #fff;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
}

#wing p {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
}

#wing img {
   float: right;
   filter: invert(1);
}

#wing p.marquee {
    padding: 0;
    text-transform: lowercase;
 }

 #wing .text-block {
    padding-top: 100px;
 }

 #wing .text-block p {
    font-size: 24px;
    text-transform: none;
    font-weight: 200;
 }

 #autumn {
    background-image: url(../img/autumn.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0px;
}

#autumn p {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
}

#autumn img {
   float: right;
}

#autumn p.marquee {
    padding: 0;
    text-transform: lowercase;
 }

 #autumn .text-block {
    padding-top: 100px;
 }

 #autumn .text-block p {
    font-size: 24px;
    text-transform: none;
    font-weight: 200;
 }


 #synthesia {
    background-image: url(../img/synthesia.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0px;
    box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 0.8);
}

#synthesia p {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
}

#synthesia img {
   float: right;
}

#synthesia p.marquee {
    padding: 0;
    text-transform: lowercase;
 }

 #synthesia .text-block {
    padding-top: 100px;
 }

 #synthesia .text-block p {
    font-size: 24px;
    text-transform: none;
    font-weight: 200;
 }


 #jarthur {
    background-image: url(../img/jarthur.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0px;
    color: #fff;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
}

#jarthur p {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
}

#jarthur img {
   float: right;
   filter: invert(1);
}

#jarthur p.marquee {
    padding: 0;
    text-transform: lowercase;
 }

 #jarthur .text-block {
    padding-top: 100px;
 }

 #jarthur .text-block p {
    font-size: 24px;
    text-transform: none;
    font-weight: 200;
 }

 #dimeo {
    background-image: url(../img/dimeo.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0px;
    box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 0.5);
}

#dimeo p {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
}

#dimeo img {
   float: right;
}

#dimeo p.marquee {
    padding: 0;
    text-transform: lowercase;
 }

 #dimeo .text-block {
    padding-top: 100px;
 }

 #dimeo .text-block p {
    font-size: 24px;
    text-transform: none;
    font-weight: 200;
 }



 #artwork {
    background-image: url(../img/face.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0px;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
    color: #fff;
}

#artwork p {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
}

#artwork img {
   float: right;
   filter: invert(1);
}

#artwork p.marquee {
    padding: 0;
    text-transform: lowercase;
 }

 #artwork .text-block {
    padding-top: 100px;
 }

 #artwork .text-block p {
    font-size: 24px;
    text-transform: none;
    font-weight: 200;
 }


 

/* CSS ANIMAZIONE INTRO PAGINE */
  
  @keyframes slide-top {
    from {
      height: 102vh;
      
    }
  
    to {
      height: 0vh;
    }
  }

  #animation-frame-1 {
    animation-duration: 1.6s;
    animation-name: slide-top;
    animation-timing-function: cubic-bezier(1, 0.03, 0.64, 1);
    animation-fill-mode: forwards;
  }

  #animation-frame-1 {
    background: #141414;
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
  }


  @keyframes slide-top-img {
    from {
      opacity: 1;
      
    }
  
    to {
      opacity: 0;
      display: none;
    }
  }
  

  #animation-frame-1 img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: .2s;
    animation-delay: .8s;
    animation-name: slide-top-img;
    animation-timing-function: cubic-bezier(1, 0.03, 0.64, 1);
    animation-fill-mode: forwards;
  }


  @keyframes slide-top-2 {
    from {
      height: 102vh;
      
    }
  
    to {
      height: 0vh;
    }
  }

  #animation-frame-2 {
    animation-duration: 1.6s;
    animation-name: slide-top-2;
    animation-delay: .2s;
    animation-timing-function: cubic-bezier(1, 0.03, 0.64, 1);
    animation-fill-mode: forwards;
  }

  #animation-frame-2 {
    background: #212121;
    position: fixed;
    top: 0;
    z-index: 9998;
    width: 100%;
  }





  /* CSS ANIMAZIONE OUTRO PAGINE */
  
  
  @keyframes slide-top-outro {
    from {
      height: 0vh;
      
    }
  
    to {
      height: 102vh;
    }
  }

  #animation-frame-1.active {
    animation-duration: 1.2s;
    animation-name: slide-top-outro;
    animation-timing-function: cubic-bezier(1, 0.03, 0.64, 1);
    animation-delay: .2s;
    animation-fill-mode: forwards;
    display: block !important;
  }

  #animation-frame-1.active {
    background: #141414;
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
  }


  @keyframes slide-top-outro-img {
    from {
      opacity: 0;
      display: block;
    }
  
    to {
      opacity: 1;
    }
  }
  

  #animation-frame-1.active img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: .2s;
    animation-delay: 1.1s;
    animation-name: slide-top-outro-img;
    animation-timing-function: cubic-bezier(1, 0.03, 0.64, 1);
    animation-fill-mode: forwards;
    opacity: 0;
  }


  @keyframes slide-top-outro-2 {
    from {
      height: 0vh;
      
    }
  
    to {
      height: 102vh;
    }
  }

  #animation-frame-2.active {
    animation-duration: .8s;
    animation-name: slide-top-outro-2;
    animation-timing-function: cubic-bezier(1, 0.03, 0.64, 1);
    animation-fill-mode: forwards;
    display: block !important;
  }

  #animation-frame-2.active {
    background: #212121;
    position: fixed;
    top: 0;
    z-index: 9998;
    width: 100%;
  }




  /* CSS ANIMAZIONI ELEMENTI PAGINE */

  @keyframes slide-top-opacity {
    from {
        opacity: 0;
        top: 60px;
        position: relative;
    }

    to {
        opacity: 1;
        top: 0px;
        position: relative;
    }
  }

  #above-the-fold img.slide-top-opacity-anim {
    animation-name: slide-top-opacity;
    animation-duration: .6s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    top: 60px;
    position: relative;
  }

  #above-the-fold .col-8.slide-top-opacity-anim {
    animation-name: slide-top-opacity;
    animation-duration: .6s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    top: 60px;
    position: relative;
  }


  @keyframes solid-bg-text-reveal-anim-above-the-fold {
    from {
        background-size: 100% 100%;
    }

    to {
        background-size: 100% 0%;
    }
}

  .solid-bg-text-reveal-anim-above-the-fold {
    animation-name: solid-bg-text-reveal-anim-above-the-fold;
    animation-duration: .3s;
    animation-delay: 1.25s;
    animation-fill-mode: forwards;
    width: fit-content;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 0) 100%); 
    background-repeat: no-repeat;
    transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
    line-height: 1.2em;
}





@keyframes solid-bg-text-reveal-anim-negative {
    0% {
        background-size: 100% 0%;
        color: transparent;
        background-position-y: bottom;
        opacity: 1;
    }

    50.0% {
        color: transparent;
        background-size: 100% 100%;
        background-position-y: bottom;
        opacity: 1;
    }

    50.1% {
        color: #fff;
        background-size: 100% 100%;
        background-position-y: top;
        opacity: 1;
    }

    100% {
        background-size: 100% 0%;
        color: #fff;
        background-position-y: top;
        opacity: 1;
    }
}

.solid-bg-text-reveal-anim-negative {
    color: transparent;
}


.solid-bg-text-reveal-anim-negative.active {
    animation-name: solid-bg-text-reveal-anim-negative;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    width: fit-content;
    background: linear-gradient(180deg, rgb(255, 255, 255) 100%, rgba(255, 255, 255, 0) 100%); 
    background-repeat: no-repeat;
    transition-timing-function: ease-in-out;
    opacity: 1;
}


.slide-top-opacity-anim {
    opacity: 0;
  }

.slide-top-opacity-anim.active {
    animation-name: slide-top-opacity;
    animation-duration: .6s;
    animation-fill-mode: forwards;
    opacity: 0;
    top: 60px;
    position: relative;
  }



  @keyframes solid-bg-text-reveal-anim {
    0% {
        background-size: 100% 0%;
        color: transparent;
        background-position-y: bottom;
    }

    50.0% {
        color: transparent;
        background-size: 100% 100%;
        background-position-y: bottom;
    }

    50.1% {
        color: #000000;
        background-size: 100% 100%;
        background-position-y: top;
    }

    100% {
        background-size: 100% 0%;
        color: #000000;
        background-position-y: top;
    }
}

.solid-bg-text-reveal-anim {
    color: transparent;
}


.solid-bg-text-reveal-anim.active {
    animation-name: solid-bg-text-reveal-anim;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    width: fit-content;
    background: linear-gradient(180deg, rgb(0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%); 
    background-repeat: no-repeat;
    transition-timing-function: ease-in-out;
    opacity: 1;
}