@import url("https://p.typekit.net/p.css?s=1&k=mzb7ekt&ht=tk&f=44510&a=72513466&app=typekit&e=css");
@font-face {
  font-family: Duotone-Serif;
  src: url("/assets/fonts/SangBleuKingdomTrial-Light.otf");
}
@font-face {
  font-family: Duotone-Serif-Italic;
  src: url("/assets/fonts/SangBleuKingdomTrial-LightItalic.otf");
}
@font-face {
  font-family: Degular;
  src: url("https://use.typekit.net/mzb7ekt.css");
}
@font-face {
  font-family: "degular";
  src: url("https://use.typekit.net/af/174e41/00000000000000007735c867/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/174e41/00000000000000007735c867/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/174e41/00000000000000007735c867/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
  font-display: auto;
  font-weight: 400;
}

.navigation-section {
    padding-top: 100px;
    
}

.topnav {
    float: none;
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
}

.topnav a {
    float: left;
    color: #fff;
    opacity: .33;
    text-align: center;
    padding: 0px 20px 0px 20px;
  text-decoration: none;
}

.topnav a:hover{
    color: #fff;
    opacity: 1;
}

.topnav a.active {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 5px;
}



.topnav2 {
    float: none;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}

.topnav2 a {
    float: left;
    color: #fff;
    opacity: .33;
    text-align: center;
    padding: 40px 20px 0px 40px;
 border-bottom: solid 1px #fff;
}

.topnav2 a:hover{
    color: #fff;
    opacity: .75;
}

.topnav2 a.active {
    opacity: 1;
    border-bottom: solid 1px #fff;
}

 /* ul {
    list-style: none;
    display: inline;
     width: 100%;
     text-align: center;
    justify-self: center;
}

li a {
  text-align: center;
    display: inline-block;
     margin: 0;
    padding: 0;
  padding: 14px 16px;
  text-decoration: none;
    opacity: .5;
}


a{
    float:left;
    width: 100%;
}
*/



/* Change the link color to #111 (black) on hover */

/*
li a:hover {
  color: #fff;
    opacity: 1;
}

li a:active {
    opacity: 1;
    border-bottom: 1px solid #fff;
}
*/
.logo-menu {
    z-index: 999;
}

.navigation-container {
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 5vh;
    
    padding: 0px;
}


.portfolio-header {
    font-family: Duotone-Serif;
    color: #F9EDEE;
    letter-spacing: 1px;
    font-size: 30px;
    font-weight: 200;
    text-align: center;
    
}

.portfolio-header i{
    font-family: Duotone-Serif-Italic;
   
}
/*
li {
    margin-left: auto;
    margin-right: auto;
}
*/

.nav-text {
    font-family: Degular;
    color: #fff;
    font-size: 12px;
    width: 100%;
    letter-spacing: 2px;
}

.nav-text2 {
    font-family: Degular;
    color: #fff;
    font-size: 14px;
    font-style: italic;
    letter-spacing: 2px;
}

.nav-group {
    width: 100%;
    text-align: center;
    position: relative;
    display: inline-block;
    grid-column: 2 / 12;
    grid-row: 1 / 3;
}

.grid-container {

    /* Tells CSS that this class is for a grid */
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, 70vh);
    
    padding: 20px 40px 40px 40px;

    gap: 10px;

    /* grid-template-columns: 67% 33%;
    grid-template-rows: 70vh; */

}


.portfolio-divider-dark {
    background-color: #000;
    height: 25vh;
    width: 100%;
    
}

.webp .blue-div {
    background-color: black;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ), url("/assets/images/clotho/clotho-4.webp");
    background-size: cover;
    background-position: 50% 50%;

    transition: all 0.2s ease-in;


    /* grid-column: 1;
    grid-row: 1; */
}
/*
.project-title {
float: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width:100%;
    height: 100%;
    font-family: Degular;
    color: #fff;
    letter-spacing: 2px;
  font-size: 20px;
    color: #fff;
  visibility: hidden;
  opacity: 0;
    background: rgba(0, 0, 0, 0.72);
    transition: opacity .2s, visibility .2s;
    
}
*/
/*
.project-title {
    display: block;
  width: 100%;
top: 40%;
    text-align: center;
  color: white;
    font-family: Duotone-Serif-Italic;
    letter-spacing: 2px;
  font-size: 45px;
  position: absolute;
    overflow: hidden;
padding: 0;
  margin: 0;
    color: #fff;
  visibility: hidden;
  opacity: 0;
    transition: opacity .2s, visibility .2s;
    
    
}
*/

.project-title {
    float: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: Duotone-Serif-Italic;
    letter-spacing: 2px;
  font-size: 45px;
  position: absolute;
    color: #fff;
  display: none;
  opacity: 0;
    transition: opacity .2s, visibility .2s;
    
    
}

.project-title p{
    font-family: Degular;
    letter-spacing: 2.5px;
    line-height: 30px;
  font-size: 12px;
    font-style: italic;
}
/*
.project-subhead {
  width: 100%;
    text-align: center;
    font-family: Degular;
    letter-spacing: 2px;
  font-size: 18px;
  position: absolute;
    font-style: italic;
    overflow: hidden;
  
    color: #fff;
    transition: opacity .2s, visibility .2s;
    
    
}
*/



.blue-div:hover .project-title{
    display: block;
  opacity: 1;
}





.webp .blue-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.8)
    ), url("/assets/images/clotho/clotho-4.webp");
    filter: grayscale(100%);
    
}
    

.red-div2 {

    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 1;


}


.red-div {

    width: 100%;
    height: 100%;

   border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/Sample.png");
    background-size: cover;
    background-position: 50% 0%;

    /* grid-column: 2;
    grid-row: 1; */
}

.red-div:hover .project-title{
    display: block;
  opacity: 1;
}





.red-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("assets/images/Sample.png");
    filter: grayscale(100%);
    
}




.rusihashi-div {

    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 1;
     border-radius: 20px;

   
}


.webp .rusihashi-div2 {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/rusihashi/rusi-20.webp");
    background-size: cover;
    background-position: 50% 50%;
        border-radius: 20px;
}

.rusihashi-div2:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .rusihashi-div2:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/rusihashi/rusi-20.webp");
    filter: grayscale(100%);
    
}


.vote-div2 {
  
    width: 100%;
    height: 100%;

 border-radius: 40px;
    
   
    /*
     grid-column: 9 / 13;
    grid-row: 3;
    */

    grid-column: 9 / 13;
    grid-row: 5;

}

.webp .vote-div {
  
    width: 100%;
    height: 100%;

    border-radius: 20px;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vote-test1.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.vote-div:hover .project-title{
    display: block;
  opacity: 1;
}


.vote-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vote-test1.webp);
    filter: grayscale(100%);
    
        )}







.green-div2 {

    width: 100%;
    height: 100%;
   border-radius: 20px;
    
     grid-column: 9 / 13;
    grid-row: 1;
 
}



.green-div {
background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    border-radius: 20px;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vgnn-2.png");
    background-size: cover;
    background-position: 50% 50%;
}

.green-div:hover .project-title{
  display: block;
  opacity: 1;
}


.green-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vgnn-2.png");
    filter: grayscale(100%);
    
}


.orange-div2 {

    width: 100%;
    height: 100%;
   border-radius: 20px;
    grid-column: 5 / 13;
    grid-row: 2;

 
}


.webp .orange-div {
background-color: #2C2C2C;
    width: 100%;
    height: 100%;

     border-radius: 20px;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/clotho/clotho-1.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.orange-div:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .orange-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/clotho/clotho-1.webp");
    filter: grayscale(100%);
    
}


.drift-div2 {

    width: 100%;
    height: 100%;

       border-radius: 20px;
    
    grid-column: 1 / 5;
    grid-row: 4;
    

    
}



.drift-div {
  background-color: #2C2C2C;
    width: 100%;
    height: 100%;
    overflow: hidden;
       border-radius: 20px;
}

.drift-div:hover .project-title{
  display: block;
  opacity: 1;
}

.drift-video {
  height:100%;
  width:100%;
  object-fit: cover;
       border-radius: 20px;
}

.sun-video {
  height:100%;
  width:100%;
  object-fit: cover;
}


.drift-div:hover {
    cursor: pointer;
    filter: grayscale(100%);
    
}

.presto-div2 {
 
    width: 100%;
    height: 100%;

      border-radius: 20px;
    
     grid-column: 9 / 13;
    grid-row: 3;

    
}

.presto-div {
   background-color: #2C2C2C;
    width: 100%;
    height: 100%;

     border-radius: 20px;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/presto/presto_9.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

.presto-div:hover .project-title{
    display: block;
  opacity: 1;
}


.presto-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/presto/presto_9.jpg");
    filter: grayscale(100%);
    
}

.worthy-div2 {
    
    width: 100%;
    height: 100%;
   border-radius: 20px;
    grid-column: 1 / 5;
    grid-row: 2;


}

.worthy-div {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

 
   border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/worthy/worthy_1.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

.worthy-div:hover .project-title{
  display: block;
  opacity: 1;
}


.worthy-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("assets/images/worthy/worthy_1.jpg");
    filter: grayscale(100%);
    
}

.champs-div2 {
 
    width: 100%;
    height: 100%;

      border-radius: 20px;
    /*
     grid-column: 1 / 9;
    grid-row: 3;
    */ 
    
    grid-column: 5 / 13;
    grid-row: 6;
    
   


}

.champs-div:hover .project-title{
    display: block;
  opacity: 1;
}

.webp .champs-div {
   background-color: #2C2C2C;
    width: 100%;
    height: 100%;
       border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/ChampsMockup1.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.champs-div:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .champs-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/ChampsMockup1.webp");
    filter: grayscale(100%);
    
}



.kissick-div2 {
 
    width: 100%;
    height: 100%;

      border-radius: 20px;
    
     grid-column: 1 / 9;
    grid-row: 3;



}

.kissick-div:hover .project-title{
    display: block;
  opacity: 1;
}

.kissick-div {
   background-color: #2C2C2C;
    width: 100%;
    height: 100%;
       border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/kissick/kissick_19.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

.kissick-div:hover .project-title{
    display: block;
  opacity: 1;
}


.kissick-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/kissick/kissick_19.jpg");
    filter: grayscale(100%);
    
}


.liz-div2 {
  
    width: 100%;
    height: 100%;
   border-radius: 20px;
 /*   
 grid-column: 5 / 13;
    grid-row: 6; */
    
     grid-column: 1 / 5;
    grid-row: 8;
 
}

.webp .liz-div {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;
   border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/liz-image3.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.liz-div:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .liz-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/liz-image3.webp");
    filter: grayscale(100%);
    
}

.gigis-div2 {
 
    width: 100%;
    height: 100%;

       border-radius: 20px;
    /*
     grid-column: 1 / 9;
    grid-row: 5;
    */
    grid-column: 1 / 5;
    grid-row: 6;


}



.webp .gigis-div {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

   border-radius: 20px;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/gigis/gigis-new2.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.gigis-div:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .gigis-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/gigis/gigis-new2.webp");
    filter: grayscale(100%);
    
}


/*

.voiceless-div2 {

    width: 100%;
    height: 100%;

   
       border-radius: 20px;
    
    grid-column: 1 / 5;
    grid-row: 4;

}



.voiceless-div {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

 
   border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/geckoeye.gif");
    background-size: cover;
    background-position: 50% 50%;
}

*/


/*
.photo-div2 {

    width: 100%;
    height: 100%;
   border-radius: 20px;
    grid-column: 1 / 5;
    grid-row: 6;

  
}


.webp .photo-div {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;


   border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/photography/photography-13.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.photo-div:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .photo-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/photography/photography-13.webp");
    filter: grayscale(100%);
    
}

*/

.sinqo-div2 {

    width: 100%;
    height: 100%;

     border-radius: 20px;

     grid-column: 5 / 13;
    grid-row: 4;
    
     
    
  
}

.sinqo-div {
   
    width: 100%;
    height: 100%;

    border-radius: 20px;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/sinqo/sinqo_7.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

.sinqo-div:hover .project-title{
    display: block;
  opacity: 1;
}


.sinqo-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/sinqo/sinqo_7.jpg");
    filter: grayscale(100%);
    
}




.vortex-div2 {

    width: 100%;
    height: 100%;

     border-radius: 20px;

    
    
     grid-column: 1 / 9;
    grid-row: 5;
    
  
}

.webp .vortex-div {
   
    width: 100%;
    height: 100%;

    border-radius: 20px;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vortex/vortex-new1.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.vortex-div:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .vortex-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vortex/vortex-new1.webp");
    filter: grayscale(100%);
    
}



.tedx-div2 {
   
    width: 100%;
    height: 100%;
   border-radius: 20px;
    grid-column: 1 / 9;
    grid-row: 7;

 
}

.webp .tedx-div {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;
   border-radius: 20px;
  

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/tedx-image2.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.tedx-div:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .tedx-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/tedx-image2.webp");
    filter: grayscale(100%);
    
}




.mist-div2 {
   
    width: 100%;
    height: 100%;
   border-radius: 20px;
    grid-column: 9 / 13;
    grid-row: 7;
    grid-row: 7;

 
}

.webp .mist-div {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;
   border-radius: 20px;
  

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/mist/mist-13.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.mist-div:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .mist-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/mist/mist-13.webp");
    filter: grayscale(100%);
    
}





/*
.cascada-div2 {

    width: 100%;
    height: 100%;
   border-radius: 20px;
    grid-column: 1 / 5;
    grid-row: 8;


}



.cascada-div {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;
   border-radius: 20px;


    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/cascada/cascada-2.png");
    background-size: cover;
    background-position: 50% 50%;
}

.cascada-div:hover .project-title{
  display: block;
  opacity: 1;
}


.cascada-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("assets/images/cascada/cascada-2.png");
    filter: grayscale(100%);
    
}

*/

.ethereal-div2 {
   
    width: 100%;
    height: 100%;
   border-radius: 20px;
    grid-column: 5 / 13;
    grid-row: 8;

}

.webp .ethereal-div {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

   border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/ethereal/ethereal-8.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.ethereal-div:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .ethereal-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/ethereal/ethereal-8.webp");
    filter: grayscale(100%);
    
}



/* 


BRAND PROJECTS



*/


.grid-container1 {

    /* Tells CSS that this class is for a grid */
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, 85vh);
    
    padding: 40px;

    gap: 12px;

    /* grid-template-columns: 67% 33%;
    grid-template-rows: 70vh; */

}

.grid-container-brand {

    /* Tells CSS that this class is for a grid */
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(5, 70vh);
    
    padding: 40px;

    gap: 15px;

    /* grid-template-columns: 67% 33%;
    grid-template-rows: 70vh; */

}

.grid-container-motion {

    /* Tells CSS that this class is for a grid */
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 70vh);
    
    padding: 40px;

    gap: 15px;

    /* grid-template-columns: 67% 33%;
    grid-template-rows: 70vh; */

}

.grid-container-web {

    /* Tells CSS that this class is for a grid */
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 70vh);
    
    padding: 40px;

    gap: 15px;

    /* grid-template-columns: 67% 33%;
    grid-template-rows: 70vh; */

}

.grid-container-app {

    /* Tells CSS that this class is for a grid */
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 70vh);
    
    padding: 40px;

    gap: 15px;

    /* grid-template-columns: 67% 33%;
    grid-template-rows: 70vh; */

}

.grid-container-packaging {

    /* Tells CSS that this class is for a grid */
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 70vh);
    
    padding: 40px;

    gap: 15px;

    /* grid-template-columns: 67% 33%;
    grid-template-rows: 70vh; */

}

.grid-container-photo {

    /* Tells CSS that this class is for a grid */
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(4, 70vh);
    
    padding: 40px;

    gap: 15px;

    /* grid-template-columns: 67% 33%;
    grid-template-rows: 70vh; */

}


#tab1 {

  display: ;

}


#tab2 {

  display: none;

}

#tab3 {

  display: none;

}

#tab4 {

  display: none;

}

#tab5 {

  display: none;

}

#tab6 {

  display: none;

}

#tab7 {

  display: none;

}
 /* 







------ BRAND TAB -----------------











*/



.webp .brand-1a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/rusihashi/Rusihashi_sample.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.brand-1a:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .brand-1a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/rusihashi/Rusihashi_sample.webp");
    filter: grayscale(100%);
    
}



.brand-1b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/worthy/worthy_1.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

.brand-1b:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .brand-1b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/Driftpic.webp");
    filter: grayscale(100%);
    
}





.webp .brand-2a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 5;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vgn_new10.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.brand-2a:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .brand-2a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vgn_new10.webp");
    filter: grayscale(100%);
    
}

.webp .brand-2b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 5 / 13;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/clotho/clotho-4.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.brand-2b:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .brand-2b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/clotho/clotho-4.webp");
    filter: grayscale(100%);
}






.webp .brand-3a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/ChampsMockup1.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.brand-3a:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .brand-3a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/ChampsMockup1.webp");
    filter: grayscale(100%);
    
}



.webp .brand-3b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/gigis/gigis-2.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.brand-3b:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .brand-3b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/gigis/gigis-2.webp");
    filter: grayscale(100%);
    
}





.brand-4a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 5;
    grid-row: 4;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/cascada/cascada-2.png");
    background-size: cover;
    background-position: 50% 50%;
}

.brand-4a:hover .project-title{
  display: block;
  opacity: 1;
}


.brand-4a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("assets/images/cascada/cascada-2.png");
    filter: grayscale(100%);
    
}

.webp .brand-4b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 5 / 13;
    grid-row: 4;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/tedx-image2.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.brand-4b:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .brand-4b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/tedx-image2.webp");
    filter: grayscale(100%);
}


.brand-5a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 5;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/vortex/vortex-2.gif");
    background-size: cover;
    background-position: 50% 50%;
}

.brand-5a:hover .project-title{
  display: block;
  opacity: 1;
}


.brand-5a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("assets/images/vortex/vortex-2.gif");
    filter: grayscale(100%);
    
}



.webp .brand-5b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 5;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/liz-image3.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.brand-5b:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .brand-5b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/liz-image3.webp");
    filter: grayscale(100%);
    
}







/*


------ MOTION TAB -----------------











*/



.motion-1a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/geckoeye.gif");
    background-size: cover;
    background-position: 50% 50%;
}

.motion-1a:hover .project-title{
  display: block;
  opacity: 1;
}


.motion-1a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("assets/images/geckoeye.gif");
    filter: grayscale(100%);
    
}



.motion-1b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/Sample.png");
    background-size: cover;
    background-position: 50% 50%;
}

.motion-1b:hover .project-title{
    display: block;
  opacity: 1;
}


.motion-1b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("assets/images/Sample.png");
    filter: grayscale(100%);
    
}





.motion-2a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 5;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/sun-1.gif");
    background-size: cover;
    background-position: 50% 50%;
}

.motion-2a:hover .project-title{
  display: block;
  opacity: 1;
}


.motion-2a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("assets/images/sun-1.gif");
    filter: grayscale(100%);
    
}

.webp .motion-2b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 5 / 13;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/rusihashi/Rusihashi_sample.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.motion-2b:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .motion-2b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/rusihashi/Rusihashi_sample.webp");
    filter: grayscale(100%);
}






.motion-3a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/Driftbutt.gif");
    background-size: cover;
    background-position: 50% 50%;
}

.motion-3a:hover .project-title{
  display: block;
  opacity: 1;
}


.motion-3a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("assets/images/Driftbutt.gif");
    filter: grayscale(100%);
    
}



.webp .motion-3b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/tedx-image2.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.motion-3b:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .motion-3b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/tedx-image2.webp");
    filter: grayscale(100%);
    
}





/*


------ WEB TAB -----------------











*/



.webp .web-1a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/clotho/clotho-4.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.web-1a:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .web-1a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/clotho/clotho-4.webp");
    filter: grayscale(100%);
    
}



.webp .web-1b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vgn_new10.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.web-1b:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .web-1b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vgn_new10.webp");
    filter: grayscale(100%);
    
}


.webp .web-2ab {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 1 / 13;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/rusihashi/Rusihashi_sample.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.web-2ab:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .web-2ab:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/rusihashi/Rusihashi_sample.webp");
    filter: grayscale(100%);
}




.webp .web-3a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 5;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/tedx-image2.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.web-3a:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .web-3a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/tedx-image2.webp");
    filter: grayscale(100%);
    
}

.webp .web-3b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 5 / 13;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vortex/vortex-10.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.web-3b:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .web-3b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vortex/vortex-10.webp");
    filter: grayscale(100%);
}




/*


------ APP TAB -----------------











*/



.webp .app-1a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/clotho/clotho-4.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.app-1a:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .app-1a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/clotho/clotho-4.webp");
    filter: grayscale(100%);
    
}



.webp .app-1b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/Driftpic.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.app-1b:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .app-1b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/Driftpic.webp");
    filter: grayscale(100%);
    
}





/*


------ PACKAGING TAB -----------------











*/



.packaging-1a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/vortex/vortex-2.gif");
    background-size: cover;
    background-position: 50% 50%;
}

.packaging-1a:hover .project-title{
  display: block;
  opacity: 1;
}


.packaging-1a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("assets/images/vortex/vortex-2.gif");
    filter: grayscale(100%);
    
}



.packaging-1b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/mist/mist-13.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

.packaging-1b:hover .project-title{
    display: block;
  opacity: 1;
}


.packaging-1b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/mist/mist-13.jpg");
    filter: grayscale(100%);
    
}





.packaging-2a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 5;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/gigis/gigis-5.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

.packaging-2a:hover .project-title{
  display: block;
  opacity: 1;
}


.packaging-2a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("assets/images/gigis/gigis-5.jpg");
    filter: grayscale(100%);
    
}

.webp .packaging-2b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 5 / 13;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vgn-image4.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.packaging-2b:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .packaging-2b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vgn-image4.webp");
    filter: grayscale(100%);
}









.packaging-3ab {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 1 / 13;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/cascada/cascada-2.png");
    background-size: cover;
    background-position: 50% 50%;
}

.packaging-3ab:hover .project-title{
  display: block;
  opacity: 1;
}


.packaging-3ab:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("assets/images/cascada/cascada-2.png");
    filter: grayscale(100%);
    
}













/*


------ PHOTO TAB -----------------











*/



.webp .photo-1a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/rusihashi/Rusihashi_sample.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.photo-1a:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .photo-1a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/rusihashi/Rusihashi_sample.webp");
    filter: grayscale(100%);
    
}



.photo-1b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("assets/images/photography/fashion-pics-13.png");
    background-size: cover;
    background-position: 50% 50%;
}

.photo-1b:hover .project-title{
    display: block;
  opacity: 1;
}


.photo-1b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("assets/images/photography/fashion-pics-13.png");
    filter: grayscale(100%);
    
}

.webp .photo-2ab {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 13;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/ethereal/ethereal-8.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.photo-2ab:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .photo-2ab:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/ethereal/ethereal-8.webp");
    filter: grayscale(100%);
    
}



.webp .photo-3a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/Driftpic.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.photo-3a:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .photo-3a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/Driftpic.webp");
    filter: grayscale(100%);
    
}

.webp .photo-3b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vortex/vortex-home-opt-1.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.photo-3b:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .photo-3b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vortex/vortex-home-opt-1.webp");
    filter: grayscale(100%);
}














.webp .photo-4a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 5;
    grid-row: 4;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vgn-image7.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.photo-4a:hover .project-title{
  display: block;
  opacity: 1;
}


.webp .photo-4a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vgn-image7.webp");
    filter: grayscale(100%);
    
}

.webp .photo-4b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 5 / 13;
    grid-row: 4;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/gigis/gigis-2.webp");
    background-size: cover;
    background-position: 50% 50%;
}

.photo-4b:hover .project-title{
    display: block;
  opacity: 1;
}


.webp .photo-4b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/gigis/gigis-2.webp");
    filter: grayscale(100%);
}






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


.grid-container {

    /* Tells CSS that this class is for a grid */
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(11, 40vh);
    gap: 10px;
    
  

}
    
    
    .portfolio-header {
        font-size: 25px;
        grid-row: 2;
    }
    
    
    .topnav a {
    padding: 0px 7px 0px 7px;
}
    
     .topnav {
    left: 55%;
        width: 420px;
         transform: translate(-50%, -50%);
        
         
}
    
       .topnav2 {
    display: none;
        
         
}
    
.nav-text {
        font-size: 9px;
   
    
    
    }
    
    
    .navigation-container {
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    
    padding: 5px;
        
}

    
    
    
    .rusihashi-div {
        
        grid-column: 1 / 13;
    grid-row: 1;
    }
    
    .green-div2 {
        
       
        
        grid-column: 7 / 13;
    grid-row: 2;
    }
    
    
    .kissick-div2 {
        
        
        
        grid-column: 1 / 7;
    grid-row: 4;
        
        
    }

    
    
    
    
    .orange-div2 {
        
        grid-column: 1 / 13;
    grid-row: 3;
    }
    
    .worthy-div2 {
        
       
        
         grid-column: 1 / 7;
    grid-row: 2;
    }
    
    
    .drift-div2 {
        
         grid-column: 1 / 7;
    grid-row: 6;
    }

    
    
    
    
    
    
     
    .sinqo-div2 {
        
        grid-column: 1 / 13;
    grid-row: 5;
    }
    
    .presto-div2 {
        
       
        
        
         grid-column: 7 / 13;
    grid-row: 4;
    }
    
    
    .champs-div2 {
        
        grid-column: 7 / 13;
    grid-row: 8;
        
    }

    
    
    
    
    .vote-div2 {
        
       
        grid-column: 7 / 13;
    grid-row: 6;
    }
    
   
    
    
     .vortex-div2 {
        
       
        grid-column: 1 / 13;
    grid-row: 7;
        
        
    }
    
    .gigis-div2 {
        
       
        grid-column: 1 / 7;
    grid-row: 8;
        
        
    }
    
    
    
     .tedx-div2 {
        
        grid-column: 1 / 13;
    grid-row: 9;
    }
    
    .liz-div2 {
        
        grid-column: 1 / 7;
    grid-row: 10;
    }
    
    
    .mist-div2 {
        
        grid-column: 7 / 13;
    grid-row: 10;
    }
    
     .ethereal-div2 {
        
        grid-column: 1 / 13;
    grid-row: 11;
    }
}




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


.grid-container {

    /* Tells CSS that this class is for a grid */
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(11, 35vh);
    
    padding: 20px;
    gap: 7px;
    
  

}
    
    .portfolio-header {
        font-size: 20px;
        letter-spacing: 1px;
    }

}




.fade-in-image {
  animation: fadeIn 1s;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -o-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}





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


.grid-container {

    /* Tells CSS that this class is for a grid */
    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(11, 35vh);
    
    padding: 20px;
    
  

}

}






















/* BEGIN NO-WEBP */

.no-webp .blue-div {
    background-color: black;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 1;
   border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ), url("/assets/images/clotho/clotho-4.jpg");
    background-size: cover;
    background-position: 50% 50%;

    transition: all 0.2s ease-in;


    /* grid-column: 1;
    grid-row: 1; */
}
.no-webp .blue-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.8)
    ), url("/assets/images/clotho/clotho-4.jpg");
    filter: grayscale(100%);
    
}
.no-webp .rusihashi-div2 {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;
   border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/rusihashi/rusi-20.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .rusihashi-div2:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/rusihashi/rusi-20.jpg");
    filter: grayscale(100%);
    
}
.no-webp .vote-div {
  
    width: 100%;
    height: 100%;

   border-radius: 20px;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vote-test1.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

.no-webp .orange-div {
background-color: #2C2C2C;
    width: 100%;
    height: 100%;

     border-radius: 20px;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/clotho/clotho-1.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .orange-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/clotho/clotho-1.jpg");
    filter: grayscale(100%);
    
}
.no-webp .champs-div {
   background-color: #2C2C2C;
    width: 100%;
    height: 100%;
       border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/ChampsMockup1.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .champs-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/ChampsMockup1.jpg");
    filter: grayscale(100%);
    
}
.no-webp .liz-div {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;
   border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/liz-image3.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .liz-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/liz-image3.jpg");
    filter: grayscale(100%);
    
}
.no-webp .gigis-div {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

   border-radius: 20px;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/gigis/gigis-new2.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .gigis-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/gigis/gigis-new2.jpg");
    filter: grayscale(100%);
    
}
.no-webp .photo-div {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;


   border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/photography/photography-13.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .photo-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/photography/photography-13.jpg");
    filter: grayscale(100%);
    
}
.no-webp .vortex-div {
   
    width: 100%;
    height: 100%;

    border-radius: 20px;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vortex/vortex-new1.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .vortex-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vortex/vortex-new1.jpg");
    filter: grayscale(100%);
    
}
.no-webp .tedx-div {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

     border-radius: 20px;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/tedx-image2.png");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .tedx-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/tedx-image2.png");
    filter: grayscale(100%);
    
}
.no-webp .ethereal-div {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

   border-radius: 20px;
    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/ethereal/ethereal-8.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .ethereal-div:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/ethereal/ethereal-8.jpg");
    filter: grayscale(100%);
    
}
.no-webp .brand-1a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/rusihashi/Rusihashi_sample.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .brand-1a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/rusihashi/Rusihashi_sample.jpg");
    filter: grayscale(100%);
    
}
.no-webp .brand-1b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/Driftpic.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .brand-1b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/Driftpic.jpg");
    filter: grayscale(100%);
    
}
.no-webp .brand-2a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 5;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vgn_new10.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .brand-2a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vgn_new10.jpg");
    filter: grayscale(100%);
    
}
.no-webp .brand-2b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 5 / 13;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/clotho/clotho-4.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .brand-2b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/clotho/clotho-4.jpg");
    filter: grayscale(100%);
}
.no-webp .brand-3a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/ChampsMockup1.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .brand-3a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/ChampsMockup1.jpg");
    filter: grayscale(100%);
    
}
.no-webp .brand-3b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/gigis/gigis-2.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .brand-3b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/gigis/gigis-2.jpg");
    filter: grayscale(100%);
    
}
.no-webp .brand-4b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 5 / 13;
    grid-row: 4;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/tedx-image2.png");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .brand-4b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/tedx-image2.png");
    filter: grayscale(100%);
}
.no-webp .brand-5b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 5;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/liz-image3.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .brand-5b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/liz-image3.jpg");
    filter: grayscale(100%);
    
}
.no-webp .motion-2b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 5 / 13;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/rusihashi/Rusihashi_sample.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .motion-2b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/rusihashi/Rusihashi_sample.jpg");
    filter: grayscale(100%);
}
.no-webp .motion-3b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/tedx-image2.png");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .motion-3b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/tedx-image2.png");
    filter: grayscale(100%);
    
}
.no-webp .web-1a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/clotho/clotho-4.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .web-1a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/clotho/clotho-4.jpg");
    filter: grayscale(100%);
    
}
.no-webp .web-1b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vgn_new10.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .web-1b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vgn_new10.jpg");
    filter: grayscale(100%);
    
}
.no-webp .web-2ab {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 1 / 13;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/rusihashi/Rusihashi_sample.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .web-2ab:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/rusihashi/Rusihashi_sample.jpg");
    filter: grayscale(100%);
}
.no-webp .web-3a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 5;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/tedx-image2.png");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .web-3a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/tedx-image2.png");
    filter: grayscale(100%);
    
}
.no-webp .web-3b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 5 / 13;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vortex/vortex-10.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .web-3b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vortex/vortex-10.jpg");
    filter: grayscale(100%);
}
.no-webp .app-1a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/clotho/clotho-4.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .app-1a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/clotho/clotho-4.jpg");
    filter: grayscale(100%);
    
}
.no-webp .app-1b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/Driftpic.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .app-1b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/Driftpic.jpg");
    filter: grayscale(100%);
    
}
.no-webp .packaging-2b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 5 / 13;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vgn-image4.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .packaging-2b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vgn-image4.jpg");
    filter: grayscale(100%);
}
.no-webp .photo-1a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 1;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/rusihashi/Rusihashi_sample.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .photo-1a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/rusihashi/Rusihashi_sample.jpg");
    filter: grayscale(100%);
    
}
.no-webp .photo-2ab {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 13;
    grid-row: 2;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/ethereal/ethereal-8.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .photo-2ab:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/ethereal/ethereal-8.jpg");
    filter: grayscale(100%);
    
}
.no-webp .photo-3a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 9;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/Driftpic.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .photo-3a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/Driftpic.jpg");
    filter: grayscale(100%);
    
}
.no-webp .photo-3b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 9 / 13;
    grid-row: 3;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vortex/vortex-home-opt-1.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .photo-3b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vortex/vortex-home-opt-1.jpg");
    filter: grayscale(100%);
}
.no-webp .photo-4a {
    background-color: #2C2C2C;
    width: 100%;
    height: 100%;

    grid-column: 1 / 5;
    grid-row: 4;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/vgn-image7.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .photo-4a:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/vgn-image7.jpg");
    filter: grayscale(100%);
    
}
.no-webp .photo-4b {
    background-color: rgb(180, 151, 21);
    width: 100%;
    height: 100%;

    grid-column: 5 / 13;
    grid-row: 4;

    background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),  url("/assets/images/gigis/gigis-2.jpg");
    background-size: cover;
    background-position: 50% 50%;
}
.no-webp .photo-4b:hover {
    cursor: pointer;
     background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("/assets/images/gigis/gigis-2.jpg");
    filter: grayscale(100%);
}