/*Monitor:
@media screen and (min-width: 1400px){}

Laptop:
@media screen and (max-width: 1400px){}

Mobile:
@media screen and (max-width: 800px){}*/



/*@media screen and (min-width: 800px){
    .v-alignment-mhs{padding-top:6%;}
    .v-alignment-bdf{padding-top:5%;}
}
@media screen and (max-width: 800px){
    .v-alignment-mhs{padding-top:15%;}
    .v-alignment-bdf{padding-top:12%;}
}*/




/*Working -------------------------------------------------------------------------------------------*/


.m-hero{
    position: relative;
    top: 0; left: 0;
    height: 720px;
    overflow-y: scroll;
    overflow-x: hidden;
    /*position: absolute;*/
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.m-logo{
    position: sticky;
    width: 100%;
    z-index: 1;
    mix-blend-mode: multiply;
    top: 0; right: 0;

}

.m-logo img{
    width: 216px;
    margin: auto;
    padding: 60px 0;
    display: block;

}

.m-hero-bg{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: auto;
}

.m-hero-bg img{
    display: block;
    margin: 0;
    padding: 0;/*
    position: relative;*/
}

.about {
    padding: 10px 0 0px 0; margin: 0;
}
.about img{
    width: 60%; 
    padding: 5% 20% 2% 20%; 
}

.about .txt {width:90%; padding: 2% 5% 5% 5%;}

.about .txt p{padding-bottom: 20px;}


/*Hero --------------------------------------------------------------------------------------------------------------*/



@media screen and (min-width: 1024px){
    .desktop{display: block;}
    .mobile{display: none;}
}
@media screen and (max-width: 1024px){
    .desktop{display: none;}
    .mobile{display: block;}
}






@media screen and (min-width: 1024px){  

    .hero{height: 620px; background-color: black;} 

    .outer-wrapper {
      width: 100vh;
      height: 100vw;
      transform: rotate(-90deg) translateX(-100vh);
      transform-origin: top left;
      overflow-y: scroll;
      overflow-x: hidden;
      position: absolute;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .wrapper {
      display: flex;
      flex-direction: row;
      width: 2880px; /*width of website*/
      height: 100vh;

      transform: rotate(90deg) translateY(-100vh);
      transform-origin: top left;

      margin-top: 0%; /*distance from the left*/
      /*box-shadow: -2px 1px 4px rgba(0,0,0,0.1);*/
        background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8),rgba(255,255,255,1));
    }
            
    ::-webkit-scrollbar {display:none;}
}



.ca-logo-container{
    top: 0;
    left: 0;
    z-index: 999;
    mix-blend-mode: multiply;
    position: absolute;

}
.ca-logo-container img{
    mix-blend-mode: multiply; 
}


@media screen and (min-width: 1024px){
    .ca-logo-container{
        height: 100%; 
        width: 560px;        
    }

    .ca-logo-container img{
        width: 265px;
        padding-left: 250px;
        transform: translate(0%,-50%); 
        top:50%; left:0%; 
        position: absolute; 
    }
}




.hero-image-background{
    position: absolute;
    z-index: -1;
    top: 0; left: 0;
}
.hero-image-background img{
    height: 100%;
}


.hero-about-the-artist-txtbox{
    height: auto; 
    width: 576px; 
    right: 0;
    padding: 15px 20px 10px 20px;
    margin: 110px 250px 0 0;
    /*transform: translate(-50%,0%); 
    top:50%; left:0%; */
    position: absolute;
    background-color: rgba(255, 255, 255, .1);
    border-radius: 10px;
    border: 0.1px solid white;
}
.hero-about-the-artist-txtbox p{padding-bottom: 17px; font-size: 13.5px; line-height: 20px; letter-spacing: 0.2px;}
/*.hero-about-the-artist-txtbox img{width: 300px;}*/






.label{
    text-transform: uppercase; 
    position: absolute;
    width: 94%;
    letter-spacing: 18px;
    font-size: 10.75px;
    padding: 2% 3%;
    z-index: 999;
    mix-blend-mode: difference;

}

@media screen and (max-width: 1024px){
    /*.hero .label{position: fixed; z-index: -1;} */
    .label{
        position: fixed; 
        top:0%;
        letter-spacing: 5px;
        font-size: 10px;
    }   

}





/*Artblocks --------------------------------------------------------------------------------------------------------------*/


.category{padding: 20px 0; margin: 0; overflow: hidden; position: relative;}
        .category .row{margin: auto; gap: 20px; margin: 0px 250px;}

@media screen and (min-width: 1024px){
    .category{height: auto;}
    .category .row{margin: 0px 250px;}
}

@media screen and (max-width: 1024px){
    .category .row{margin: 0px 20px; height: 480px;}    
}





.art-cover{
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
    
    transition: 1s;
    flex: 1;
    border-radius: 10px;
    background-size: cover; 
    background-position: center;
}

.art-cover img {width: 100%; display: block;}




@media screen and (min-width: 1024px){
    .art-cover{height: 360px;}
    .art-cover:hover{flex: 1.5; transition: 0.75s;}
    .art-cover:hover .preview{bottom: 0; transition: 1s;} 
    
}

@media screen and (max-width: 1024px){
    /*.art-cover{height: 480px;}*/
}






.preview{padding: 20px; transition: 1s; width: 320px;}

@media screen and (min-width: 1024px){
    .preview{bottom: -110px; }
}

@media screen and (max-width: 1024px){
    .preview{bottom: -110px;}
}







.over-image-txt-box{z-index: 666; position: absolute;}/*absolute is issue in secondary pages*/
    .over-image-txt-box img{width: 100%;}/*arrow svg*/             



.overlay{background-color: #000000; opacity: 0%; width: 100%; height: 100%; position: absolute; transition: 1s;}
    .art-cover:hover .overlay{opacity: 80%; transition: 1s;}



.date{top:0; align-content: center; text-align: center; width: 90%; padding: 10px 5%;}

@media screen and (max-width: 1024px){
    .date{display: none;}
}