:root{
    --highlight: #ffffff;
    --headerHeight: 10vh;
}

html{
    box-sizing: border-box;
    font-family: 'Helvetica';
    font-size: 20px;
    font-weight: bold;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
html::-webkit-scrollbar {
    display: none;
}
body{margin: 0;}
body > *{
    margin: 0;
    scrollbar-width: none;
}

/* FONTS SIZE */
h1{font-size: 3.2vw;}
h3, .one p, .close{font-size: 1.3vw;}
p, nav, .caption, .search-input input{font-size: 1vw;}

h1{margin: 0; top: 25px;}
h3{hyphens: none; line-height: 130%;}
p, .caption{padding: 0 10px; line-height: 130%;}

/* p:empty{
    padding: 5px;
} */

nav{
    position: fixed;
    right: 20px;
    top: -15px;
    z-index: 2;
}
li{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: right;
}
li a {
  display: block;
  text-align: center;
  padding: 17px;
  text-decoration: none;
  transition: color 1.5s;
}
p a {transition: color 1.5s;}
li img{
    text-align: center;
}
a{
  text-decoration: none;
  color: black;
}
li a:hover, p a:hover, .logo a:hover, .sublogo a:hover, .artist a:hover {color:var(--highlight)}
a:visited{color: inherit;}
/* -------------------------- */
/* HEADER*/
.logo{position: fixed; z-index: 2; left: 100px; background-color: white; top: 3vh;}
.logo a, .sublogo a, .artist a{transition: color 1.5s;}
.sublogo{ transition: margin-left 1.5s, opacity 0.5s; background-color: white;}
.left{z-index: 1; position: relative;}
.right{
    margin-left: -8.3vw;
    opacity: 0;
}
.moved{
    margin-left: 0;
    opacity: 1;
}

.logo-gradient{
    width: 20px;
    height: var(--headerHeight);
    position: fixed;
    top: 0;
    left: 300;
    background-image: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
}

.header{
    position: fixed; 
    top: 0;
    width: 100vw;
    height: var(--headerHeight);
    background-color: white;
    color: black;
    z-index: 3;
}
a.temporary{
    pointer-events: none;
    -webkit-text-stroke: 1px black;
    color: #ffffff;
}
.filter {display: inline-block;}
.filter p {margin: 0;}
/* -------------------------- */
/* ADDED GENERALS  */
.division{
    background-color: black;
    position: fixed;
    top: var(--headerHeight);   
    display: none;
}
.horizontal{
    width: 100vw;
    height: 1px;
    margin-bottom: 20px;
    left: 0;
}
.vertical{
    width: 1px;
    height: 100vh;
}
.vertical.first{left: 28vw;}
.vertical.second{left: 50vw;}
.vertical.third{left: 72vw;}
.button, .buyRent a{
    padding: 5px;
    border: 1px solid black;
    transition: color 1.5s;
    transition: background-color 1.5s;
    display: inline;
}
.button:hover, .buyRent a:hover{
    color: white;
    background-color: black;
}
.resize-animation-stopper * {
  transition: none !important;
  animation: none !important;
}

/* -------------------------- */
/* BOOKS */
.top-gradient{
    position: fixed;
    width: 100vw;
    height: 20px;
    top: var(--headerHeight);
    z-index: 3;
    background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
}
.books, .films{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    margin-top: var(--headerHeight);
    width: 100vw;
    padding: 0;
    background-color: black;
    margin-bottom: 0;
}
.book{
    height: auto;
}
.book img{
    width: 100%;
}
.more-by{width: 40%;}
.caption{
    text-align: left; 
    /* font-size: 1.2vw; */
    width: 16%;
    color: white;
    background-color: black;
    padding: 8px;
    position: absolute;
    margin-top: 2%;
    display: inline-block;
    margin-left: 1%;
}
.not-shown, .bio{ display: none;}

.showVideo:hover, .playsoundFile:hover, .showFilm:hover, .showTrailer:hover{cursor: pointer;}
.flip-video{
    width: 80vw;
    padding-top: calc(var(--headerHeight) - 10px);
    display: none;
}
.flip-video.shown, .close.shown{display: inline;}
.close{
    color: white;
    position: fixed;
    top: calc(var(--headerHeight) *1.3);
    transition: color 1.5s;
    padding: 10px;
    right: 20vw;
    display: none;
}
.close:hover{
    cursor: pointer;
    color:var(--highlight);
}
/* -------------------------- */
/* ARTISTS */
.artist{
    float: initial;
    margin: 0;
}

.artist a{
    padding: 0;
    padding-bottom: 5px;
    text-align: left;
    color: black;
}
/* -------------------------- */
/* SEARCH */
.search-input{
    position: fixed;
    right: 35px;
    top: 5vh;
    caret-color: var(--highlight);
    direction: rtl;
    z-index: 4;
    /* visibility:hidden; */
    /* pointer-events: none; */
}
.search-input.shown{
    visibility: visible;
    pointer-events: auto;
}
.search-input input{
    color: var(--highlight);
    /* font-size: 1.2vw; */
    font-weight: bold;
    border: 0;
}

.search-input input:focus{
    outline: none;
}

/* -------------------------- */
/* LAYOUT */
.media-layout{
    display: grid;
    /* grid-template-rows: 3fr 1fr; */
    grid-template-rows:75vh 25vh;
    transition: all 1s;
    height: 100vh;
    background-color: black;
}
.media-layout.expand-image{grid-template-rows:90vh 10vh;}

.media-layout.expand-text{grid-template-rows:15vh 85vh;}

.about-layout, .artist-layout, .news-layout{
    height: 100vh;
    display: grid;
    grid-template-rows: var(--headerHeight) auto;
}

/* -------------------------- */
/* FILM and BOOKS GALLERY */
.media-gallery{overflow-y: scroll; z-index: 2; text-align: center;-ms-overflow-style: none;scrollbar-width: none;}
.media-gallery::-webkit-scrollbar {display: none;}
.media-gallery img{ width: 84%;}
.media-gallery ul{margin-top: var(--headerHeight);}
.media-gallery li{width: 100vw;}
.media-info, .artist-info, .news-info{
    overflow: hidden;
    background-color: white;
    display: grid;
    grid-template-rows: 20px auto;
    border-top: 1px solid black;
}
/* -------------------------- */
/* NEWS */
/* .news-info{
    grid-template-rows: auto;
    padding: 0;
    padding-left: 50px;
} */
.news-article{
    text-align: left;
    width: 100%;
}
.news-title{margin-top: -1.5vw; margin-bottom: 0;}
.news-article a{ text-align: left; padding: 0;}
.news-latest{
    background-color: white;
    position: fixed;
    width: 30vw;
    height: 30vw;
    top: 25vh;
    left: 35vw;
    filter: drop-shadow(0 0 0.75rem black);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.news-latest::-webkit-scrollbar {
  display: none;
}
 
.media-info{grid-template-columns: 2fr 1fr 1fr;}
.artist-info, .news-info{ grid-template-columns: 1.2fr 1fr 1fr 1fr;}
/* .artist-info{ grid-template-columns: repeat(4, 1fr);} */
.column{overflow-y: scroll; scrollbar-width: none; margin-top: -20px; border-left: 1px solid black;}
.column::-webkit-scrollbar {
  display: none;
}
.one{
    padding-left: 60px;
    padding-right: 15px;
}
.one p{ padding: 0;}
.gradient{
    border-left: 1px solid black;
    background-image: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
    position: sticky;
    top: 0;
}
/* big screen on dsktop */
@media screen and (min-width: 1400px) {
  .books, .films { grid-template-columns: repeat(4, 1fr);}
}
/* if the window is trasformed in height */
@media screen and (max-height: 400px) {
  .logo{top: 0;}
}

/* small screen on dsktop */
@media screen and (max-width: 800px) {
  .books, .films { grid-template-columns: repeat(2, 1fr);}
}

/* mobiles */
@media screen and (max-width: 500px) {
    :root{--headerHeight: 15vh;}
    h1{font-size: 7.2vw;}
    h3, .one p, .close{font-size: 3.4vw;}
    p{font-size: 2.5vw;}

    .logo{left:20px; top: 7vh; line-height: 84%;}
    .right{margin-left: 0;}

    nav, .filter p{
        top: -10px; 
        font-size: 3.2vw;
    }
    .filter p{padding-left: 0;}
    .flip-video{width: 100vw;}
    .close{
        top: calc(var(--headerHeight) *1.1);
        right: 2vw;
    }

    .media-layout{ grid-template-rows: 50vh 50vh; } 
    .media-info{grid-template-columns: 3fr 1fr 0;}  
    .books, .films { grid-template-columns: repeat(1, 1fr); width: auto;}
    .caption{font-size: 3.2vw; width: 25%;}
    .caption.not-shown{display: inline-block;}
    .bio{display: block;}

    .news-latest{
       width: 50vw;
       height: 50vw;
       top: 55vh;
       left: 25vw; 
    }
    .news-info{padding-left: 0;}
    .news-info ul{
        padding-left: 20px;
        column-count: 1;
    }
    .news-title{margin-top: -4vw;}

    .artist-info{grid-template-columns: 1fr 1.2fr 0fr;}
    .one{padding-left: 0;}
    .one ul{padding-left: 20px;}
    .four, .gradient:nth-child(4){display: none;}

    .search-input input{ font-size: 3.2vw;}
    .artist {font-size: 3.4vw;}
    
}