body {
  margin: 0;
  font-family: helvetica;
  font-size: 15px;
  letter-spacing: 0.02em;
  background-color: white;
  overflow-y: hidden;
  overflow-x: hidden;
}

.wrapper-desktop {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
      grid-template-areas: 
      "col-1 col-2"
}

.opaque {
  opacity: 1;
}

a {
  text-decoration: inherit;
  color: inherit;
  cursor: inherit;
}

p {
  margin: 0;
}


#col-1-fade, #col-2-fade {
  display: none;
}


/*CURSOR*/

    html {
      cursor: none;
    }

    #circular-cursor {
      background-color:black;
      height:8px;
      width:8px;
      margin-left: 1px;
      margin-top: 1px;
      border-radius:50%;
      -moz-border-radius:50%;
      -webkit-border-radius:50%;
      position: absolute;
      z-index: 100000;
      transform: scale(1.25);
      transition: transform 0.2s;
      -moz-transition: transform 0.2s;
      -webkit-transition: transform 0.2s;
    }





/*HEADER*/

    .header-desktop {
      width: 100%;
      position: fixed;
      height: auto;
      display: flex;
/*    /*  background-color: red;*/
      z-index: 3;
      line-height: 0px;
      
    }

    .header-mobile {
      display: none;
    }

    .menu-mobile {
      display: none;
    }

    .menu-mobile-close {
      display: none;
    }

    .mobile-about-wrapper {
      display: none;
    }

    .profile-contact {
      margin: 22px 0 0 14px;
/*      background-color: blue;*/
      flex-grow: 1;
    }

    .logo {
      margin: 12px 0 0 0;
      padding-right: 7px;
    /*  background-color: yellow;*/
      flex-grow: 1;
      text-align: center;
    }

    .logo svg {
      width: 300px;
      margin-top: 5px;
      transition: fill 0.1s ease-in-out;
      -moz-transition: fill 0.1s ease-in-out;
      -webkit-transition: fill 0.1s ease-in-out;
    }

    .logo svg:hover {
      fill: #ff501b;

    }

    .grid-index {
      text-align: right;
      margin: 22px 14px 0 0;
    /*  background-color: blue;*/
      flex-grow: 1;
      
    }

    #mode-inactive:hover {
      color: #ff501b;
    }

    #about-click:hover {
      color: #ff501b;
    }

    #about-click {
      transition: color 0.1s ease-in-out;
      -moz-transition: color 0.1s ease-in-out;
      -webkit-transition: color 0.1s ease-in-out;

    }

    .red {
      color: #ff501b;
    }

    .underline {
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      text-decoration: underline;
    }







/*PAINTINGS*/

    .column1 {
      grid-area: col-1;
      display: flex;
      overflow-y: scroll;
      height: 100vh;
      flex-wrap: wrap;
      z-index: 1;
    }

    .paintings {
      margin: 45% 36px 0 36px;
      flex-grow: 1;
    }

    .paintings img {
      width: 100%;
    }

    .column1::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    }

    .ls-small-left img, .ls-small-right img {
      max-width: 75%;
    }

    #shrink {
      max-width:60%
    }

    .portrait-right, .ls-small-right {
      text-align: right;
    }

    .portrait-left {
      text-align: left;
    }

    .portrait-centre {
      text-align: center;
    }

    .portrait-right img, .portrait-left img {
      max-width: 70%;
    }

    .portrait-centre img {
      max-width: 75%;
    }


    .captions {
      width: 100%;
      font-size: 12px;
      margin: 2px 0 0 36px;
      color: #ff501b;
      transition: opacity 0.1s ease-in-out;
      -moz-transition: opacity 0.1s ease-in-out;
      -webkit-transition: opacity 0.1s ease-in-out;
      opacity: 0;
    }

    .last-caption {
      margin-bottom: 80px;
    }

    .caption-right {
      text-align: right;
      margin-right: 40px;
    }

    .captions-centre {
    text-align: center;
    margin: auto;
    padding-top: 4px;
}




/*LIGHTBOX*/

    .lightbox-wrapper {
      position: fixed;
      width: 100%;
      height: 100dvh;
      z-index: 4000;
      display: none;
      background-color: white;

    }

    .lightbox {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .lightbox-portrait {
      width: auto;
      min-height: 100vh;
      background-color: white;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .lightbox-portrait img {
      max-height: 100vh;
    }

    .lightbox img {
      max-width: 75%;
      max-height: 85dvh;
    }

    .lightbox-close {
      position: fixed;
      width: 26px;
      height: 26px;
      top: 20px;
      right: 20px;
      /*background-color: red;*/
      transition: opacity 0.1s ease-in-out;
      -moz-transition: opacity 0.1s ease-in-out;
      -webkit-transition: opacity 0.1s ease-in-out;
    }

    .lightbox-close:hover {
      opacity: 0.25;
    } 

    .lightbox-captions {
      position: absolute;
      bottom: 30px;
      width: 100%;
      text-align: center;
    }




/*PROCESS*/

    .column2 {
      grid-area: col-2;
      display: flex;
      overflow-y: scroll;
      height: 100vh;
      flex-wrap: wrap;
      z-index: 1;
      background-color: #f2f2f2;
    }

    .column2::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    }

    .process, .process-no-hover {
      margin: 60% 36px 0 36px;
/*      flex-grow: 1;*/
/*      mix-blend-mode: multiply;*/
      text-align: center;
      width: auto;
    }

    .process img, .process-no-hover img {
      max-width: 100%;
/*      mix-blend-mode: multiply;*/
    }

    .smaller img {
      max-width: 80%;
    }

    .even-smaller {
            text-align: left;

    }

    .even-smaller img {
      max-width: 65%;
    }

    .space {
      margin-top: 200px;
    }

    .space-smaller {
      margin-top: 20%;
    }

    .space-bottom {
      margin-bottom: 100px;
    }

    .process img:hover {
        cursor: url('data:image/svg+xml;utf8,<svg version="1.1" fill="%23ff501b" width="30" height="30" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve"> <polygon points="59.2,28.9 43.2,44.9 41.4,43 54.3,30.2 1,30.2 1,27.6 54.3,27.6 41.4,14.7 43.2,12.9 "/></svg>'), auto;

    }




/*DRAGGABLE ABOUT*/

    .about-wrapper {
      display: none;
      z-index: 1000;
    }

    
    #about {
    position: absolute;
    z-index: 9;
    text-align: center;
    cursor: move;
    color: #ff501b;
    padding-top: 40px;
    padding-bottom: 35px;
    left: calc(50% - 250px);
    top: calc(50% - 50px);
    }



    #email {
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      letter-spacing: 0.05em;
    }

    #email:hover {
      text-decoration: underline;
      cursor: pointer;
    }

    .about-wrapper p {
      font-size: 24px;
      line-height: 29px;
    }





    /*LIST PAINTINGS*/


    .list-paintings-wrapper {
      display: grid;
      grid-area: col-1;
      width: 100%;
      height: 100vh;
      padding: 0 40px 0 40px;
      background-color: #f2f2f2;
      grid-template-columns: repeat(4, 1fr);
      grid-template-areas: 
      "title title title title"
      "list-paintings-1 list-paintings-2 list-paintings-3 list-paintings-4"
      "list-paintings-1 list-paintings-2 list-paintings-3 list-paintings-4"
      "list-paintings-1 list-paintings-2 list-paintings-3 list-paintings-4"
      "list-paintings-1 list-paintings-2 list-paintings-3 list-paintings-4"
      "list-paintings-1 list-paintings-2 list-paintings-3 list-paintings-4"
      "list-paintings-1 list-paintings-2 list-paintings-3 list-paintings-4"
      "list-paintings-1 list-paintings-2 list-paintings-3 list-paintings-4"
      "list-paintings-1 list-paintings-2 list-paintings-3 list-paintings-4"
      "list-paintings-1 list-paintings-2 list-paintings-3 list-paintings-4";

      transition: color 0.1s ease-in-out;
      -moz-transition: color 0.1s ease-in-out;
      -webkit-transition: color 0.1s ease-in-out;
      z-index: 1;
    }


    .paintings-title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      grid-area: title;
      text-align: center;
/*      background-color: lightcyan;*/
    }

    .list-paintings-wrapper p {
      letter-spacing: 0.05em;
      font-size: 16px;
    }

    .paintings-title p {
      padding-top: 100px;
    }

    .list-paintings-1 {
      display: flex;
      grid-area: list-paintings-1;
/*    background-color: yellow;*/
      white-space: nowrap;
    }

    .list-paintings-2 {
      display: flex;
      flex-direction: row;
      align-items: center;
      grid-area: list-paintings-2;
      white-space: nowrap;
    }

    .list-paintings-4 {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      grid-area: list-paintings-4;
      white-space: nowrap;
    }

    .list-paintings-4 p {
      padding-bottom: 80px;
      white-space: nowrap;
    }



/*LIST PAINTINGS HOVER*/

    .list-paintings-hover {
      grid-area: col-2;
      display: none;
      flex-direction: row;
      align-items: center;
      background-color: white;
      z-index: 2;
      padding: 40px;
    }
    
    .list-paintings-hover img {
      max-width: 100%;
    }

    .list-paintings-hover-portrait {
      grid-area: col-2;
      display: none;
      flex-direction: row;
      align-items: center;
      background-color: white;
      z-index: 2;
      padding: 40px;
    }

    .list-paintings-hover-portrait img {
      max-width: 65%;
      margin: auto;
    }

    .list-hover:hover {
      color: #ff501b;
    }

    .list-hover {
      padding-left: 0.75em;
      padding-right: 0.75em;
      width: 100%;
    }
    




/*LIST PROCESS*/

    .list-process-wrapper p {
      letter-spacing: 0.05em;
      font-size: 16px;
      line-height: 28px;
    }

    .list-process-wrapper {
      grid-area: col-2;
      display: grid;
      width: 100%;
      height: 100vh;
      background-color: white;
      overflow-y: hidden;
      grid-template-columns: repeat(1, 1fr);
      grid-template-areas: 
      "title"
      "list-process-1"
      "list-process-1"
      "list-process-2"
      "list-process-2"
      "list-process-2"
      "list-process-3"
      "list-process-3"
      "list-process-3"
      "list-process-4"
      "list-process-4"
      "list-process-4"
      "list-process-5"
      "list-process-5"
      "list-process-5"
      "list-process-6";

    }

    .process-title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      grid-area: title;
      text-align: center;
    }

    .list-process-wrapper p {
      letter-spacing: 0.05em;
      font-size: 16px;
    }

    .process-title p {
      padding-top: 97px;
    }

    .list-process-1 {
      max-width: 600px;
      margin: auto;
      grid-area: list-process-1;
/*      background-color: red;*/
      text-align: center;
      padding: 40px;
    }

    .list-process-2 {
      max-width: 600px;
      margin: auto;
      grid-area: list-process-2;
/*      background-color: red;*/
      text-align: center;
      padding: 40px;
    }

    .list-process-3 {
      max-width: 600px;
      margin: auto;
      grid-area: list-process-3;
/*      background-color: red;*/
      text-align: center;
      padding: 40px;
    }

    .list-process-4 {
      max-width: 600px;
      margin: auto;
      grid-area: list-process-4;
/*      background-color: red;*/
      text-align: center;
      padding: 40px;
    }

    .list-process-5 {
      max-width: 600px;
      margin: auto;
      grid-area: list-process-5;
/*      background-color: red;*/
      text-align: center;
      padding: 40px;
    }

    .list-process-6 {
      height: 30px;
      width: 100%;
      grid-area: list-process-6;
    }




/*    LIST PROCESS HOVER*/

    .list-process-hover, .list-process-hover-landscape  {
      grid-area: col-1;
      display: none;
      flex-direction: row;
      align-items: center;
      background-color: #f2f2f2;
      z-index: 2;
      padding: 40px 40px 40px 20px;
    }
    
    .list-process-hover img {
      max-width: 60%;
/*      mix-blend-mode: multiply;*/
      margin: auto;
    }

    .list-process-hover-landscape img {
      max-width: 80%;
/*      mix-blend-mode: multiply;*/
      margin: auto;
    }

    .list-hover:hover {
      color: #ff501b;
    }