/*SMALL DESKTOP*/

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

	.paintings {
    	margin: 220px 28px 0 28px;
    }

    .process {
    	margin: 200px 28px 0 28px;
    }

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

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

    .list-process-1, .list-process-2, .list-process-3, .list-process-4, .list-process-5  {
      padding: 0 40px 0 40px;
    }

}

/*MOBILE DEVICE*/

@media screen and (min-width: 551px) {
    .mobile-nav {display: none;}
  }

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

html {
      cursor: auto;
    }

    #circular-cursor { 
      display: none;
    }



/* HEADER RESPONSIVE */

  .mobile-nav {
    position: fixed;
    top: 12px;
    left: 14px;
    z-index: 20;
  }

  .header-desktop {
    display: none;
  }

  .header-mobile {
    display: flex;
    z-index: 5;
    width: 100%;
/*    background-color: red;*/
    margin: 0;
    position: fixed;
    top: 50%;
    transform: translate(0, -56%);
    margin-left: 17px;
  }

  .logo-mobile {
/*    background-color: yellow;*/
    width: 60%;
  }

  .menu-mobile-close {
    display: none;
    text-align: right;
    z-index: 5;
    height: 25px;
/*    background-color: green;*/
    position: fixed;
    top: 50%;
    transform: translate(0, -50%);
    margin-right: 17px;
    right: 0;
  }

  .menu-mobile {
    display: block;
    text-align: right;
    z-index: 5;
    height: 25px;
/*    background-color: green;*/
    position: fixed;
    top: 50%;
    transform: translate(0, -50%);
    margin-right: 17px;
    right: 0;
  }

  .menu-mobile img, .menu-mobile-close img {
    height: 100%;
    width: auto;
    align-self: flex-end;
  }

  .header-mobile img {
    max-width: 100%;
  }

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




/*  MOBILE ABOUT */

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

  .mobile-about {
    position: absolute;
    z-index: 20;
    text-align: center;
    bottom: 20%;
    font-size: 22px;
    color: #ff501b;;
  }

  .mobile-about p {
        width: 90%;
        margin: auto;
  }



  /* CURSOR */

  #circular-cursor { 
    display: none;
  }



  /* PAINTINGS RESPONSIVE */

  .column1 {
    position: fixed;
      grid-area: col-1;
/*      position: fixed;*/
      display: flex;
      flex-direction: row;
      overflow-x: scroll;
      height: 50dvh;
      flex-wrap: nowrap;
      width: 100vw;
    }

    .paintings {
      margin: 0;
      height: 90%;
      flex-grow: 1;
      margin-left: 100px;
    }

    .paintings img {
      margin-right: 80px;
      height: 100%;
      width: auto;
    }

    .ls-small-left img, .ls-small-right img, .portrait-right img, .portrait-left img, .portrait-centre img, #shrink {
      max-width: none;
    }


    .captions {
      display: none;
    }




/*    LIGHTBOX RESPOSIVE*/

    .lightbox img, .lightbox-portrait img {
        max-width: 100%;
        top: 50%;
    }

    .lightbox-portrait {
      width: 90vw;
      margin: auto;
      justify-content: center;
      align-items: center;
    }





    /* PROCESS RESPONSIVE */

    .column2 {
      position: fixed;
      bottom: 0;
      flex-direction: row;
      overflow-x: scroll;
      height: 50dvh;
      flex-wrap: nowrap;
      background-color: #f2f2f2;
      width: 100vw;
/*      mix-blend-mode: multiply;*/
    }

    .process {
      padding: 20px;
      text-align: center;
/*      background-color: lightgoldenrodyellow;*/
      max-height: 100%;
      margin: 0;
      max-width: 400px;
/*      mix-blend-mode: multiply;*/

    }

    .first-mob {
      margin-left: 40%;
    }

    .space {
      margin-top: 0;
    }

    .space-bottom {
      margin-bottom: 0;
    }

    .space-smaller {
      margin-top: 0;
    }

    .smaller img {
      max-width: none;
    }

    .process img {
      max-width: none;
      height: 100%;
      width: auto;
/*      mix-blend-mode: multiply;*/
            background-color: #f2f2f2;

    }



/*    LIST PAINTINGS RESPONSIVE */

  .list-paintings-wrapper {
      display: grid;
      grid-area: col-1;
      overflow-x: scroll;
      height: 50dvh;
      padding: 0 40px 0 40px;
      background-color: white;
      grid-template-columns: repeat(3, 75%);
      grid-template-areas: 
      "title title title"
      "list-paintings-1 list-paintings-2 list-paintings-4"
      "list-paintings-1 list-paintings-2 list-paintings-4"
      "list-paintings-1 list-paintings-2 list-paintings-4"
      "list-paintings-1 list-paintings-2 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;
    }

    .list-paintings-wrapper::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    }

    .list-paintings-wrapper p {
      letter-spacing: 0.04em;
      font-size: 14px;
      line-height: 20px;
    }

    .paintings-title {
      text-align: left;
      justify-content: flex-start;
/*      background-color: gray;*/
    }

    .paintings-title p {
      padding-top: 8%;
      position: sticky;
      left:0px;
      top: 0px;
    }

    .list-paintings-1 { 
/*      background-color: yellow;*/
    }

    .list-paintings-2 {
/*      background-color: green;*/
    }

  

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




    /*    LIST PROCESS RESPONSIVE */


    .list-process-wrapper p {
      letter-spacing: 0.04em;
      font-size: 15px;
      line-height: 30px;
    }

    .list-process-wrapper {
      grid-area: col-2;
      display: grid;
      width: 100vw;
      height: 50dvh;
      background-color: #f2f2f2;
      overflow-x: scroll;
      grid-template-columns: repeat(5, 300px);
      grid-template-areas: 
      "title title title title title"
      "list-process-1 list-process-2 list-process-3 list-process-4 list-process-5";
    }

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

    .process-title p {
      padding-top: 2%;
      padding-left: 40px;
      position: sticky;
      left:0px;
      top: 0px;
    }



    /* PROCESS LIGHTBOX (MOBILE ONLY) */

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

    .process-lightbox-wrapper img {
/*      mix-blend-mode: multiply;*/
max-width: 85%;
    }


}