/* CSS Document */


    


    html { font-size: 100%; width: 100%; height: 100%; margin: 0px;} 
    body { font-size:12px; color: #333; width: 100%; height: 100%; margin: 0px; line-height: 1.2;
font-family: "Overpass Mono", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
word-spacing: -0.2em;
letter-spacing: 0.02em;}


    #wrapper { width: 100%; height: 100%; margin: 0px; text-align: left; position: fixed; top: 0; left: 0;}


    /*homepage*/

    body.homepage #wrapper { width: 100%; height: 100%; margin: 0px; text-align: left; position: fixed; top: 0; left: 0; background: #d6d6d6;}

    /*works page*/

    body#works #wrapper {position:absolute; top: 0; right: 0; left: 0;padding: 0; margin: 0; width: 100%; height:auto;}

    /*Bio*/

    .bio {transition: all 0.5s ease-out 0s !important;
        position: absolute; top: 20px; left: -8px; z-index: 999999;
        transform: translate(-600px, 0px);
        padding-left: 15px;color: rgba(255,255,255,0);
        max-width: 600px;
    font-size: 100%;
    }

    .bio a, .bio a:active, .bio a:focus {color:rgba(255,255,255,0.5); text-decoration: none; outline: none; transition: all 0.5s ease-out 0s !important;
    font-size: 100%;}

    .bio a:hover {color:rgba(255,255,255,1);}

    a:focus {outline: none !important;}

    /*bio trigger*/

    .bio::before {transition: all 0.5s ease-out 0s !important;
        content:"Hello.";
        position: absolute; right: -280px; top: -8px;
        display: block; width: 280px;
        color: #fff; z-index: 999999;
    font-size: 42px; letter-spacing: -0.02em; word-spacing: -0.04em; line-height: 90%; cursor:pointer;}
    .bio:hover::before {color: rgba(255,255,255,0);}
    .bio:hover {transform: translate(0px, 0px); color: rgba(255,255,255,1);}

    /*hide hover bio below tablets*/
    @media screen and (max-width: 1024px) {
        .bio {display: none;}
    }
    /*hide menu above tablets*/
    @media screen and (min-width: 1025px) {
        #homenav {/*! display: none; */}
    }



    #homeslideshow { position:fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 45; text-align: center; margin-left: auto; margin-right: auto;}

    #sitenav { width: auto;  height: 10%; position:absolute; top: 5px; left:12px; text-align: left; font-size: 120%;  color:#000000; line-height: 100%; z-index: 60; }


    /*iphone6plus height*/
    @media screen and (max-height: 736px) {
        #sitenav {font-size: 120%;}
    }
    /*iphone6 height*/
    @media screen and (max-height: 667px) {
        #sitenav {font-size: 120%;}
    }


    #sitenav ul {list-style-type:none; margin:0; padding:0; }
    #sitenav li{float:left;}
    #sitenav li a {transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
       -webkit-transition: 0.3s ease-in-out;}
    #sitenav li a:hover {color:#000000; text-decoration: none;  }
    #sitenav a{ color: #979187; display:block; width:auto; text-decoration: none;}

    /*push the nav
    @media screen and (min-width: 1025px) {
    #sitenav .push {transition: 0.3s ease-in-out;}
    #sitenav .push:hover {margin-right: 10px;}
    }*/

    /*keep signposting for work sub pages*/

    body#fantasia #sitenav > ul:nth-child(1) > li:nth-child(2) > a:nth-child(1),
    body#folk #sitenav > ul:nth-child(1) > li:nth-child(2) > a:nth-child(1),
    body#gofigure #sitenav > ul:nth-child(1) > li:nth-child(2) > a:nth-child(1),
    body#granddayout #sitenav > ul:nth-child(1) > li:nth-child(2) > a:nth-child(1),
    body#ctrlv #sitenav > ul:nth-child(1) > li:nth-child(2) > a:nth-child(1),
    body#focus #sitenav > ul:nth-child(1) > li:nth-child(2) > a:nth-child(1),
    body#stencil #sitenav > ul:nth-child(1) > li:nth-child(2) > a:nth-child(1),
    body#woodcut #sitenav > ul:nth-child(1) > li:nth-child(2) > a:nth-child(1) {color: #000 !important;}





    /* Captions*/

    .erimgMain_desc {font-family: 'Work Sans', sans-serif !important; font-size: 110% !important; opacity: 0.7 !important; line-height: 14px !important; transition: all 0.3s ease-out 0s !important; z-index: +1;
    }
    /*responsive*/
    @media only screen and (max-width: 773px) {
        .erimgMain_desc {font-size: 95% !important; position: absolute !important; bottom: -5px !important; }
    }

    /*Images */

    @media only screen and (max-width: 773px) {
        .erimgMain_img {top: 45px !important ; bottom: 46px !important; overflow: visible !important;}
    }

    /* wrap the dw display in a prints div to isolate position from rest of the site...

    @media only screen and (max-width: 736px) {
        .erimgMain_img {display:none}
    }
    and arrows...*/


    /* Arrows */

    .erimgMain_arrowLeft, .erimgMain_arrowRight {}

    @media screen and (min-width: 1025px) {
        .erimgMain_arrowLeft {transform: translateX(6px); transition: all ease 0.4s;}
        .erimgMain_arrowLeft:hover {transform: translateX(0px);}
        .erimgMain_arrowRight {transform: translateX(-6px); transition: all ease 0.4s;}
        .erimgMain_arrowRight:hover {transform: translateX(0px);}
    }


    /*responsive*/
    @media only screen and (max-width: 773px) {
    .erimgMain_arrowLeft, .erimgMain_arrowRight {top: 50% !important;}
    .dwuserEasyRotator .erimgMain_arrowLeft img, .dwuserEasyRotator .erimgMain_arrowRight img {max-width: 70% !important;}
    .dwuserEasyRotator .erimgMain_arrowRight img {position: relative; right: -8px !important;}
    }
    @media only screen and (max-width: 414px) {
    .erimgMain_arrowLeft, .erimgMain_arrowRight {top: 50% !important;}
    }

    #print_info{ position:absolute; bottom: 20px; left: auto; right: auto; width: 100%; text-align: center; z-index: 70; font-size:80%; color: #979187;  opacity: 0.8;}
    /*responsive*/
    @media only screen and (max-width: 773px) {
        #print_info {display:none;}
    }
    #print_info a {color: #979187; transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
       -webkit-transition: 0.3s ease-in-out;}
    #print_info a:hover {color: #000; text-decoration: none;}
    #workdisplay {
        position: absolute;
        width: auto;
        top: 7%;
        height: 87%;
        left: 8px;
        right: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        text-align: left;
        font-size: 80%;
        color: #979187;
        animation-name:fadeup; animation-duration:1s;
    }

    #text_page {font-size: 100%; position: absolute; width: 80%;
        max-width: 420px;  bottom: 5%; top: 8%; left: 15px; right: 0px;
        overflow-x:hidden; overflow-y: auto; text-align: left; padding-right: 50px; margin-right: 10px;
        animation-name: fadeup; animation-duration: 1s;}

    .text {
        font-size: 100%;
        color: #979187;
        line-height: 120%;
        padding-right: 0;
        max-width: 460px;
        letter-spacing: -0.02em;
    }
    @media screen and (min-width: 1024px) {
        #text_page {min-width: 600px;}
        .text {font-size: 100%; min-width: 600px;}
        .text_page_subhead {font-size: 110% !important;}
    }
    .text_page_subhead {  color:#000; font-size:100%;}

    #text_page ul
    {font-size:100%;
    line-height: 120%;
    list-style-type:none;
    margin-left: 0;
    padding: 0;
    letter-spacing: -0.02em;}

    .smallest_text {font-size: 100%;}











    #text_page a, #text_page a:focus { outline: none; text-decoration: none; color: #979187; transition: 0.2s ease-in-out;
       -moz-transition: 0.2s ease-in-out;
       -webkit-transition: 0.2s ease-in-out;}

    /*contact page images*/

    .only-contact img {max-height: 30px; padding-right: 10px; padding-top:12px; width: auto; vertical-align: middle; opacity: 0.5; transition: 0.2s ease-in-out;}
    .only-contact img:hover {opacity: 1;}

    #text_page a:hover { text-decoration: none; color: #000;}

    input {padding:4px 6px 4px 6px;}

    .input-rounded-button {
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        border: 1px solid #979187 !important;
        padding:5px 16px 5px 16px;
        display:inline-block;
        text-decoration:none;
        background: #fff;
        margin-left: 8px;
        color:#333 !important;
        cursor:pointer;
        transition: all 0.3s ease-out 0s !important;
        font-size: 100%;
        font-family: "Overpass Mono", serif;
font-weight: 300;
    }

    .input-rounded-button:hover { 
        text-decoration:none; 
        color:#333; 
        cursor:pointer;  
       -moz-transition: opacity .25s ease-in-out;
       -webkit-transition: opacity .25s ease-in-out;
    }



    img {
         max-width: 100%;
         max-height: 100%;
    }

    #text_page img {/*! min-width: 100%; */}

    /*blue peter*/

    #text_page img#blue-peter {min-width: 100% !important;}


    /*//////////////New Works Page//////////////*/


    /*works container*/

    .works-wrapper {position:absolute; top: 0; left: 0; right: 0; max-width: 100%;
    padding: 60px 12px 12px 12px; font-size: 0;}


    /*gif container*/

    .gif-container { display:inline-block;
    position:relative; margin: 0 !important; white-space:nowrap;
    }


    /*images*/

    .gif-container img {min-width: 100%; height: auto; transition:all ease 0.3s;}



    /*links*/

    .gif-container a, .gif-container a:visited {color: #bbb6ae; text-decoration:none;}

    /*title content*/

        .title-content {position:absolute; left: 0; right: 0; bottom: 0;
    font-size: 1.6vw; padding: 6px 15px 12px 10px; text-align:right;letter-spacing: -0.02em; word-spacing: -0.1em}

    @media screen and (max-width: 1280px) {
        .title-content {font-size: 2.5vw;}
    }


    /*----------------Query: Above 1025px-------------*/

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


    /*gif container*/

    .gif-container {
    width: 25%; 
    }


    /*title*/

        .title {transition:all ease 0.3s;display:block;opacity:0; position: absolute; top: 0; left: 0; right: 0; bottom: 0;width: 100%; height: 100%;}

        .title:hover {opacity:1; background-color: rgba(255,255,255,0.94);}

    }

    /*----------------Query ends-------------*/


    /*----------------Query: below 1024px-------------*/

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


    /*gif container*/

    .gif-container {
    width: 33.33%; 
    }

    /*title*/

        .title {opacity:1; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.1);}

        .title:hover {opacity:1; background-color: rgba(0,0,0,0.1);}

        .title-content {font-size: 34px;}


    /*links*/

    .gif-container a, .gif-container a:visited {color: #fff; text-decoration:none;}


    }

    /*----------------Query ends-------------*/


    /*----------------Query: below 800px-------------*/

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


    /*gif container*/

    .gif-container {
    width: 50%; 
    }


    }

    /*----------------Query ends-------------*/



    /*----------------Query: below 414px-------------*/

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


    /*gif container*/

    .gif-container {
    width: 100%; 
    }


    }

    /*----------------Query ends-------------*/




























































    /*fade up gifs*/

    .gif-container:nth-of-type(1) {animation-name: fadeup; animation-duration: 1s;}
    .gif-container:nth-of-type(2) {animation-name: fadeup; animation-duration: 1.2s;}
    .gif-container:nth-of-type(3) {animation-name: fadeup; animation-duration: 1.4s;}
    .gif-container:nth-of-type(4) {animation-name: fadeup; animation-duration: 1.5s;}
    .gif-container:nth-of-type(5) {animation-name: fadeup; animation-duration: 1.6s;}
    .gif-container:nth-of-type(6) {animation-name: fadeup; animation-duration: 1.7s;}
    .gif-container:nth-of-type(7) {animation-name: fadeup; animation-duration: 1.8s;}
    .gif-container:nth-of-type(8) {animation-name: fadeup; animation-duration: 1.9s;}
    .gif-container:nth-of-type(9) {animation-name: fadeup; animation-duration: 2s;}




    
















/*------------------------Makeover--------------------------*/






/*------------------------Makeover Desktop Nav -------------------------*/


/*--Desktops--*/

/*home size*/
.home-makeover-nav {font-size: 2.5vw; z-index:+1}
/*rest of site*/
.makeover-nav {font-size: 2.5vw; z-index:+1}

/*--Large desktops--*/

@media screen and (min-width: 1600px) {
    
/*home size*/
.home-makeover-nav {font-size: 1.5vw; z-index:+1}
/*rest of site*/
.makeover-nav {font-size: 1.5vw; z-index:+1}
    
}

/*--Large tablets--*/
@media screen and (max-width: 1024px) {
	/*home size*/
    .home-makeover-nav  {font-size: 2.2vw;}
	/*rest of site*/
    .makeover-nav  {font-size: 2.2vw;}
}

/*--Small tablets--*/
@media screen and (max-width: 960px) {
	/*home size*/
    .home-makeover-nav  {font-size: 2vw;}
	/*rest of site*/
    .makeover-nav  {font-size: 2vw;}
}



/*fixed nav on large devices*/


.home-makeover-nav.brand, .home-makeover-nav.originals, .home-makeover-nav.prints, .home-makeover-nav.about {position:fixed;}
.makeover-nav.brand, .makeover-nav.originals, .makeover-nav.prints, .makeover-nav.about {position:fixed;}

    /*fixed positions*/

    .home-makeover-nav.brand {left: 10px;top: 5px; text-align:left;}
    .makeover-nav.brand {left: 10px;top: 5px; text-align:left;}
    .home-makeover-nav.originals {right: 15px;top: 5px; text-align:left;}
    .makeover-nav.originals {right: 15px;top: 5px; text-align:left;}
    .home-makeover-nav.prints {right: 15px;bottom: 20px; text-align:left;}
    .makeover-nav.prints {right: 15px;bottom: 20px; text-align:left;}
    .home-makeover-nav.about {left: 15px;bottom: 20px; text-align:left;}
    .makeover-nav.about {left: 15px;bottom: 20px; text-align:left;}


    /*link underlining & color*/
    .home-makeover-nav a, .home-makeover-nav a:visited {text-decoration:none; color: #fff;}
    
    .makeover-nav a, .makeover-nav a:visited {text-decoration:none; color: #bbb6ae; transition: all ease 0.3s;}

     /*current page*/

    .makeover-nav.currentnav a, .makeover-nav.currentnav a:visited {text-decoration:none; color: #333;}

     /*hover*/

    .makeover-nav a:hover {color: #333;}

    /*mix-blend-mode*/

.makeover-nav {mix-blend-mode: multiply;}

/*less word spacing on the brand*/

.home-makeover-nav.brand, .makeover-nav.brand {word-spacing: -0.15em !important;}

/*Mobiles - switch some off!*/
    

.home-makeover-nav {display:none;}



/*------------------------Makeover originals, archives and prints pages -------------------------*/


/*wrapper*/
    #makeover-wrapper {margin: 0; width: 100%; animation-name: fadeup; animation-duration: 1.5s; padding-top: 16vh;}
    body#all-prints #makeover-wrapper {margin: 0; width: 100%; animation-name: fadeup; animation-duration: 1.5s; padding-top: 0;}



@media screen and (min-width: 1024px) {
body.originals-archive #makeover-wrapper {padding-top: 16vh;}
}

@media screen and (max-width: 1024px) {
    body#all-prints #makeover-wrapper {padding-top: 80px !important}
}


    /*content on desktops*/

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

        .makeover-content { /*background: blue;*/ width: 75%; max-width: 1500px;margin-left: auto; margin-right: auto; }
        
        body.originals-archive .makeover-content {width: 100%; max-width: 100%;}

        .makeover {/*background: green;*/ position:relative; margin-bottom: 600px;}

        .makeover-image, .makeover-caption {display:inline-block}

        .makeover-image {width: 66%; /*padding: 20px; box-sizing: border-box;*/; text-align:center;}

        .makeover-caption {width: 280px;  /*padding: 20px; box-sizing: border-box;*/ padding-bottom: 160px}
        
        

        .makeover:nth-of-type(odd) .makeover-caption {/*background:red;*/ position:absolute; bottom: 0; right: 0}

        .makeover:nth-of-type(even) .makeover-caption {/*background:red;*/ position:absolute; bottom: 0; left: 20px}

        .makeover:nth-of-type(even) .makeover-image {/*background:yellow;*/ min-width: 100% !important; text-align:right;}

        .makeover:nth-of-type(even) .makeover-image img {max-width: 66%;}

    }

/*captions on prints*/

body.prints-archive .makeover-caption {width: 180px !important}

/*content on tablet portrait*/

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

        .makeover-content { /*background: blue;*/ width: 100%; max-width: 1400px;margin-left: auto; margin-right: auto; }

        .makeover {/*background: green;*/ position:relative; margin-bottom: 150px;}
        
        

        .makeover-image, .makeover-caption {display:inline-block}

        .makeover-image {max-width: 66%; /*padding: 20px; box-sizing: border-box;*/}

        .makeover-caption {width: 280px;  padding-right: 10px;/*padding: 20px; box-sizing: border-box;*/ padding-bottom: 60px}

        .makeover:nth-of-type(odd) .makeover-caption {/*background:red;*/ position:absolute; bottom: 0; right: 0}

        .makeover:nth-of-type(even) .makeover-caption {/*background:red;*/ position:absolute; bottom: 0; left: 15px}

        .makeover:nth-of-type(even) .makeover-image {/*background:yellow;*/ min-width: 100% !important; text-align:right;}

        .makeover:nth-of-type(even) .makeover-image img {max-width: 66%;}

    }

/*content on portrait tablets*/

@media screen and (max-width:860px) {
    
    #makeover-wrapper {padding-top: 140px}
    
    .makeover-image { /*padding: 20px; box-sizing: border-box;*/}
    
    .makeover:nth-of-type(odd) .makeover-image {min-width: 100% !important;}

        .makeover-caption {width: 250px;}

        .makeover:nth-of-type(odd) .makeover-caption {/*background:red;*/ position:relative; padding-left: 15px;}

        .makeover:nth-of-type(even) .makeover-caption {/*background:red;*/ position:relative; padding-left: 0px;}

        .makeover:nth-of-type(even) .makeover-image {/*background:yellow;*/ min-width: 100% !important; text-align:center;}

        .makeover:nth-of-type(even) .makeover-image img {min-width: 100%; min-height:auto !important; text-align:center}
    

    
    
}

@media screen and (max-width: 600px) {
    .makeover-caption {width: 300px;}
}


    /*------------------------Makeover class for scroll fade---------------------*/


    /*/////////////////Fades up the images by adding in-view class to scrollfade class//////////////*/

    .scrollfade {
      opacity: 0;
      -moz-transition: all 1000ms ease-out;

      -webkit-transition: all 1000ms ease-out;
      -o-transition: all 1000ms ease-out;
      transition: all 1000ms ease-out;
      /*transform:translateY(200px);
        margin-top: 200px;*/

      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .in-view {
      opacity: 1;
        /*transform:translateY(0px);
        margin-top: 0;*/

    }



    /*------------------------Makeover typography & graphics-------------------------*/


    /*makeover title*/

    .makeover-title {font-weight: 300; font-size: 100%;line-height: 1.5; display:block; margin-bottom: -5px !important; position:relative; left: -4px}

    /*makeover captions*/



    .makeover-caption {color: #333333; font-size: 100%; line-height: 1.4; margin-top: 20px;}

@media screen and (max-width: 1024px) {
    .makeover-caption {font-size: 100%}
}


    /*makeover h2*/

    h2.archive.heading {padding-left: 15px; color: #333; font-size: 100%;font-weight:300; padding-top: 0px !important; margin-bottom: 100px;}
    /*bottom-print-info*/
.bottom-print-info {padding-left: 18px !important; margin-bottom: 3em; font-size: 100%; line-height: 1.3;}
    body#all-prints h2.archive.heading {margin-bottom: 140px; font-size: 110%; padding-top: 1em !important;}

body.prints-only h2 {font-size: 130% !important; margin-bottom: 20px !important; padding-left: 18px !important}








    body#all-prints.prints-only h2.archive.heading {margin-bottom: 30px;}

@media screen and (max-width:1024px) {
    h2.archive.heading {font-size: 100%; padding-left: 8px;}
    .bottom-print-info {padding-left: 8px;}
    body.originals-archive h2.archive.heading, body#all-prints h2.archive.heading {padding-top: 0 !important; margin-bottom: 30px;}
}

@media screen and (max-width: 960px) {
    h2.archive.heading, .bottom-print-info, body.prints-only h2 {padding-left: 5px !important}
}

@media screen and (max-width: 500px) {
     body#all-prints h2.archive.heading {}
}


/*info text padding*/

.info-text {margin-bottom: 6em; max-width: 772px;}

@media screen and (max-width: 1080px) {
    .info-text {padding-left: 15px; padding-right: 15px;}
}

@media screen and (max-width: 740px) {
    .info-text {padding-left: 15px; padding-right: 15px;}
}

/*info h2*/

.info-text h2 {color: #333; font-size: 100%;font-weight:300; padding-top: 50px !important; margin-bottom: 40px; max-width: 80%;  line-height: 1.05}

@media screen and (max-width: 600px) {
    .info-text h2{ max-width: 100%;}
}

/*blue peter image*/

.blue-peter {margin-bottom: 70px; margin-top: 50px; filter:contrast(180%);}

img.blue-peter {min-width: 80%; height: auto;}

/*info body*/

.info-text p {color: #333; max-width: 75%; line-height: 1.6 !important}


@media screen and (max-width: 600px) {
    .info-text p {  max-width: 100%;}
}

/*info link*/

.info-text p a, .info-text p a:visited {color: #333;text-decoration: none; border-bottom: 1px solid rgba(51,51,51,0); transition: all ease 0.3s;}
.info-text p a:hover {border-bottom: 1px solid rgba(51,51,51,1)}

/*info icons*/

.follow-icons{margin-top: 50px; padding-bottom: 20px;}

.follow-icons img {max-height: 32px; margin-right: 20px;}

@media screen and (max-width: 600px) {
    .follow-icons img{max-height: 32px;}
}

.follow-icons img {opacity: 1; transition: ease 0.2s;}
.follow-icons img:hover {opacity: 0.4}

/*info list*/

.info-text ul {list-style: outside none; padding: 0; color: #333}

.info-text li {min-width: 100% !important; line-height: 1.6;}

@media screen and (max-width: 600px) {
    .info-text li {font-size: 85%;}
}


    /*------------------------Sold/Available/Print-------------------------*/

     .status {display:block; font-size: 90%; margin-top: 8px; line-height: 1;}

    .status.available, .status.sold, .status.print {position: relative; top: 4px;}

    .status.available:before, .status.sold:before, .status.print:before {display:inline-block; width: 4px; height: 4px; content:""; margin-right: 6px; border-radius: 50%; position:relative; margin-bottom: 2px;}
    
    .status.sold:before {background:red}

    .status.available:before {background:green;}

    .status.print:before {background:green;}


    /*status links*/

    .makeover-caption a, .makeover-caption a:visited {color: #333 !important; text-decoration:none; display:inline-block; border-bottom: 1px dotted rgba(51,51,51,1); padding-bottom: 4px; transition:all ease 0.3s; font-size: 90%;}
.makeover-caption a:hover {/*border-bottom: 1px dotted rgba(51,51,51,0);*/}


    /*collab-links*/
a.collab-link, a.collab-link:visited {display:inline-block; padding-bottom: 4px; margin-bottom: .8em}
a.collab-link:hover {border-bottom: 1px dotted rgba(0,0,0,0) !important;}


    /*------------------------Glide in up animation-------------------------*/
    @keyframes fadeup {
        0% {
        opacity: 0;
            transform:translateY(200px);
      }
      75% {
        opacity: 0;
      }
        85% {
        opacity: 0.5;
      }
      100% {
        opacity: 1;
          transform:translateY(0px);
      }
    }


   /*------------------------Menu toggle simplefade------------------------*/

/*menu toggle animates in*/
.mobileIconToggle { animation-name: simplefade; animation-duration: .7s;}


 @keyframes simplefade {
        0% {
        opacity: 0;
      }
      75% {
        opacity: 0;
      }
        85% {
        opacity: 0.5;

      }
      100% {
        opacity: 1;
      }
    }


    
    
    
/*------------------------Makeover archives-------------------------*/

.makeover-archives {padding-left: 20px; padding-right: 20px; padding-bottom: 400px;}



@media screen and (max-width: 1024px) {
    .makeover-archives {padding-left: 12px; padding-right: 10px;} 
}


/*------------------------Makeover archive thumbs-------------------------*/

/*archive thumb container and widths*/

.archive-thumb-container {
    display: inline-block;
    position: relative;
    margin: 0 !important;
    white-space: nowrap;
}

.archive-thumb-container img {min-width: 100% !important;}

@media screen and (min-width: 1025px) {
body.originals-archive .archive-thumb-container {
    width: 24.6% !important;
    margin: 0.2% 0% 0 0 !important;}
}

@media screen and (min-width: 1920px) {
body.originals-archive .archive-thumb-container {
    width: 24.7% !important;
    margin: 0.2% 0% 0 0 !important;}
}

@media screen and (min-width: 1025px) {
.archive-thumb-container {
    width: 12% !important;
    margin: 0.1% 0.1% 0 0 !important}
}

@media screen and (max-width: 1024px) {
.archive-thumb-container {
    width: 24.4% !important;
    margin: 0.1% 0.1% 0 0 !important;}
}



@media screen and (max-width: 768px) {
.archive-thumb-container {
    width: 49% !important;
    margin: 0.5% 0 0 0!important;}
}


/*archive span title */






.archive-thumb-title-content {position:relative; display:block; opacity: 1; width:100%; height: 100%; padding-top: 0; margin-top: 10px; margin-bottom: 30px; font-size: 90%;}
.archive-thumb-container a {text-decoration:none !important; color: #333; font-weight: 300;}


.makeover-archives .archive-thumb-container {transition: opacity ease .2s;}

.makeover-archives .archive-thumb-container:hover {opacity: 0.6;}

.makeover-archives .archive-thumb-container.archive-current {opacity: 0.3}



/*-----------------------Makeover Mobile Menu-----------------------*/



/*mobile menu brand*/

.mobile-brand {position:absolute; top: 18px; left: 22px; color: #333; z-index: 99;word-spacing: -0.07em; font-weight: 300;}

@media screen and (max-width: 960px) {
    .mobile-brand {left: 15px;}
}
@media screen and (min-width: 500px) {
    .mobile-brand {font-size: 130%;}
}

@media screen and (max-width: 499px) {
    .mobile-brand {font-size: 130%;}
}

.mobile-brand a, .mobile-brand a:visited {color: #333; text-decoration:none;}

body.homepage .mobile-brand a, body.homepage .mobile-brand a:visited {color: #fff;}


/*menu container*/

#mobileMenu {
    position: fixed;
    left: 0;
    height: 100%;
    width: 100%;
    transition: all 0.4s ease-out-in;
    background: #fff;
    z-index: 99;
    opacity:0;
	top: 0;
visibility:hidden;
}

/*animations when clicked*/

input[type="checkbox"]:checked ~ #mobileMenu {
    opacity: 1;
visibility:visible;
}

input[type=checkbox].makeover {
    transition: all 0.2s;
    box-sizing: border-box;
    display: none;
}

/*menu 'button'*/

.mobileIconToggle {
    transition: all 0.2s;
    box-sizing: border-box;
    cursor: pointer;
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
	top: 28px;
    right: 24px;
    height: 22px;
    width: 17px;
    letter-spacing: 0.1em;
}

/*laptops above*/

@media screen and (min-width:1280px) {
    .mobileIconToggle {width: 9px;}
    .mobileIconToggle:before {content:"menu"; display:inline-block; position:absolute; left: -42px; top: -7px; font-size: 100%;}
}

/*position below 960*/

@media screen and (max-width: 960px) {
    .mobileIconToggle {right: 12px; width: 30px; top: 26px;}
    input[type=checkbox]:checked ~ .mobileIconToggle {top: 26px;}
}

/*button stroke*/
.spinner {
    transition: all 0.2s;
    box-sizing: border-box;
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #333;
}


/*middle hidden*/
.horizontal {
    transition: all 0.2s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 4px;
display:none;
}

/*vertical*/
.diagonal.part-1 {
    position: relative;
    top: -1px;
    transition: all 0.2s;
    box-sizing: border-box;
    float: left;
transform:rotate(90deg);
}

@media screen and (max-width:1280px) {
    .diagonal.part-1 {top: 0px}
}

/*horizontal*/
.diagonal.part-2 {
    transition: all 0.2s;
    box-sizing: border-box;
    position: relative;
    float: left;













    margin-top: -2px;
}


/*activated*/


/*vertical*/
input[type=checkbox]:checked ~ .mobileIconToggle > .diagonal.part-1 {
    transition: all 0s;
    box-sizing: border-box;
background-color: #333;
opacity: 0;
}
/*horizontal*/
input[type=checkbox]:checked ~ .mobileIconToggle > .diagonal.part-2 {
    transition: all 0.2s;
    box-sizing: border-box;
    transform: rotate(0deg);
    background-color: #333;

}

/*hidden anyways*/
input[type=checkbox]:checked ~ .mobileIconToggle > .horizontal {
    transition: all 0.2s;
    box-sizing: border-box;
    opacity: 0;
}


/*hover action
.mobileIconToggle:hover > .spinner.horizontal {width: 90%;}*/


/*----------------Mobile menu content--------------*/

.Mobile-Menu-Content {position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); text-align:center; opacity: 0; transition: all .6s ease;}

/*animating the content*/

input[type="checkbox"]:checked ~ #mobileMenu > .Mobile-Menu-Content {opacity: 1 !important;}


/*menu font size*/

.Mobile-Menu-Content ul {list-style: outside none; font-size: 130%; padding: 0; font-weight: 300; letter-spacing: 0.1em}

.Mobile-Menu-Content li {margin-bottom: 3em;color: #333; line-height: .7}

.Mobile-Menu-Content a, .Mobile-Menu-Content a:visited {color: #333; text-decoration:none;}

/*a.menu-sale {color: #ec3a11 !important; display:none !important;}*/

/*---------------Switch menus on 741px OFF--------------*/

/*@media screen and (min-width: 741px) {
    .mobileIconToggle, .Mobile-Menu-Content {display:none;}


}*/

.makeover-nav {display:none;} 



/*--------------Footer---------------*/

.footer {font-size: 80%; padding-bottom: 100px; padding-top: 3em;}
body#all-prints .footer, body.originals-archive .footer {padding-left: 20px}
@media screen and (max-width: 960px) {
    .footer {padding-left: 12px}
    body#all-prints .footer, body.originals-archive .footer {padding-left: 5px}
}

.footer a {text-decoration:none; color: inherit;}

.al-credit a, .al-credit a:hover, .al-credit a:visited, .al-credit a:active {color: #333 !important;}

.al-credit a::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 3px solid;
  box-sizing: border-box;
  transform: rotate(45deg);
  margin-left: 6px;
}


/*--------------links to prints---------------*/

.marker {display:inline-block; scroll-margin-top: 300px; min-height: 20px;}

@media screen and (max-width: 768px) {
    .marker {scroll-margin-top: 250px;}
}







/*---------------pure-css-slideshow---------------*/



/*Images wrapper*/
#pure-css-slideshow { position:fixed;/*or relative originally*/ overflow:hidden; width:100%; height:100% } /* change width and height to suit */

/*each image position and animation(transition) speed*/
#pure-css-slideshow div { position:absolute; z-index:2; width:100%; height:100%; top:0; left:0; background-position:center; background-repeat:no-repeat; background-size:cover; opacity:0;
-webkit-transition:opacity 0s ease;-ms-transition:opacity 0s ease;transition:opacity 0s ease;
}


/*1st transform-origin*/
#pure-css-slideshow div {background-position:center}
@media screen and (max-width: 810px) {
   #pure-css-slideshow div {background-position:33%} 
}



/*z-index dark magic when the java adds the .fx class*/
#pure-css-slideshow .fx:first-child + div ~ div, #pure-css-slideshow .fx1 { z-index:1 }

/*the .fx class that performs size(scale) and move(translate)*/
#pure-css-slideshow .fx, #pure-css-slideshow .fx1 { opacity:1;}


/*images*/

#pure-css-slideshow :nth-child(1) { background-image:url("/backgrounds/cell-1-g.jpg");}
#pure-css-slideshow :nth-child(2) { background-image:url("/backgrounds/cell-2-d.jpg"); }
#pure-css-slideshow :nth-child(3) { background-image:url("/backgrounds/cell-3-f.jpg"); }



/*------------------mosaic limited-edition-prints----------------------*/


* {
    box-sizing: border-box;
}

@media screen and (min-width: 769px) {
  body#all-prints .makeover-content {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/*padding*/

body#all-prints .makeover-content {padding-right: .2vw; padding-left: .2vw;}

@media screen and (max-width: 1680px) {
    body#all-prints .makeover-content {padding-right: .5vw; padding-left: .5vw;}
}

@media screen and (max-width: 960px) {
    body#all-prints .makeover-content {padding-right: 1vw; padding-left: 1vw;}
}

@media screen and (max-width: 600px) {
    body#all-prints .makeover-content {padding-right: 10px; padding-left: 10px;}
}


/*//////////////////////////////limited edition prints//////////////////////////////*/



/*-------------------rows and columns------------------*/
.print-row {
  			display: -ms-flexbox; /* IE10 */
  			display: flex;
  			-ms-flex-wrap: wrap; /* IE10 */
  			flex-wrap: wrap;
  			padding: 0 0px;
margin-bottom: 8em
}

/* Create four equal columns that sits next to each other */
		.print-column {
  		-ms-flex: 25%; /* IE10 */
  		flex: 25%;
  		max-width: 25%;
  		padding: 0 .5vw;
}

/*big screens?*/

@media screen and (min-width: 2220px) {
	.print-column {
  		padding: 0 .5vw 0 .5vw;}
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 960px) {
  .print-column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
      padding: 0 0vw;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .print-column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
      padding: 0 0vw;
  }
}



/*print-column img*/
		.print-column img {
  		margin-top: 0px;
  		vertical-align: top;
  		width: 100%;
padding-bottom: 1vw;
}

@media screen and (max-width: 960px) {
    .print-column img {padding-bottom: .25vw;}
}

.print-column img:hover {
    cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in; cursor:zoom-in;}

@media screen and (min-width: 2200px) {
    .yes-spacing .print-column img {padding-bottom: 1vw}
}

/*print-item-contents arrival*/

		.print-item-contents {
    	opacity: 0;
    	transform: translateY(20px);
    	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
		cursor:pointer;
}

		.print-item-contents.visible {
    	opacity: 1;
    	transform: translateY(0);
}

/*hide print-item text for mosaic view*/
.print-title, .print-description, .print-email {display:none;}


/*-------------------rows and columns ENDS------------------*/


/*-------------------lightbox------------------*/

/*lightbox*/
        #lightbox {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(255, 255, 255, 1);
            justify-content: center;
            align-items: center;
            flex-direction: column;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        #lightbox.show {
            opacity: 1; transition: opacity 0.5s ease;
        }

        #lightbox img.lightbox-content {
            margin: auto;
            display: block;
            max-width: 80%;
            max-height: 75vh;
            width: auto;
            height: auto;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%,-40%);
            transition: all ease 0.3s !important;
        }

@media screen and (max-height: 500px) {
    #lightbox img.lightbox-content {
        top: 35%;
        transform: translate(-50%,-40%);
    }
}

@media screen and (max-width: 414px) {
    #lightbox img.lightbox-content {
        max-width: 92%;
    }
}

        #lightbox .close {

            position: absolute;






            bottom: 40px;
            right: 60px;
            color: rgba(0,0,0,0);
            font-size: 250%;
            font-weight: 300;
            transition: 0.3s;
            z-index: +1;
            background: url("/gfx/18-cursor.svg");


            background-repeat:no-repeat;
        }

@media screen and (max-width: 810px) {
    #lightbox .close {top: 20px; left: 16px;}
}

        #lightbox .close:hover,
        #lightbox .close:focus {
            color: rgba(0,0,0,0);
            text-decoration: none;
            cursor: pointer;
        }
        /*info container*/
        #lightbox .lightbox-info {
            position: absolute;
            bottom: calc(3vh + 4px);
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            width: 100%;
font-size: 90%;
        }

@media screen and (min-height: 1024px) {
    #lightbox .lightbox-info {bottom: 6vh;}
}

        /*title*/
        #lightbox .lightbox-title {
            color: #333;
            font-size: 100%;
            margin: 0 0 1em !important;
            text-align: center;
            display:block;
            z-index: +1;
			line-height: 1;
            max-height: 10px;
            padding: 0 !important;
            font-weight: 300;
            word-spacing: -0.2em;
  letter-spacing: 0.05em;
        }
        /*description*/
        #lightbox .lightbox-description {
            color: #333;
            font-size: 100%;
            margin-bottom: 1em;
margin-top: 1em;
            text-align: center;
            z-index: +1;
            line-height: 1.2;
position:relative;
padding-left: 40px; padding-right: 40px;
            letter-spacing: 0.05em;
        }

@media screen and (max-width: 600px) {
    #lightbox .lightbox-description {padding-left: 0; padding-right: 0; width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; line-height: 1.15}
}

        /*email*/
        #lightbox .lightbox-email {
            text-align: center;
            color: #333;
            font-size: 85% !important;
            text-decoration: none;
            background-color: #fff;
            padding: 1em 1.5em;
            border-radius: 0;
            border: 1px solid #333;
            transition: all 0.3s ease;
            z-index: +1;
            font-weight: 300;
            display:inline-block;
        }

body.sold-archive #lightbox .lightbox-email {display:none;} 

        #lightbox .lightbox-email:hover {
            border: 1px solid #000;
            color: #000;
        }


/*----lightbox cursor----*/
@media screen and (min-width: 1366px) {
#lightbox.show {cursor: url("/gfx/36-cursor.svg"), auto !important;}
    #lightbox .close {display:none; }
    
}

        /*-------------------lightbox ENDS------------------*/

/*//////////////////////////////limited edition prints//////////////////////////////*/


/*//////////////////accordion////////////////*/


/*accordion contents*/

/*accordion buttons*/
.accordion {
    background: rgba(255,25,255,0);
    color: #333;
    cursor: pointer;
    padding: 1em 0px .2em 0px;
    width: 100%;
    border-left: 0;
	border-right: 0;
    border-top: 0px;
	border-bottom: 0;
    text-align: left;
    outline: none;
    transition: 0.4s;
    line-height: 1;
    font-family: "Overpass Mono", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  word-spacing: -0.2em;
  letter-spacing: 0.02em;
font-size: 90%;
}



/*hover*/

.accordion:hover {
    background: rgba(255,25,255,0);
    color: rgba(51,51,51,1);
}


/*symbol +*/

.accordion:after {
    content: '\002B';
    color: rgba(51,51,51,1);
    font-weight: 300;
    margin-left: 4px;
    transition: 0.3s ease;
}




/*symbol -*/

.active:after {
    content: "\2212";
}

/*symbol -*/

.accordion:hover:after {
    color: rgba(51,51,51,1);
}


/*accordion panel*/
.panel {
    padding: 0 0 0 0;
    max-height: 0;
    overflow: hidden;

    transition: max-height 0.4s ease;

    border-bottom: 0px;
    font-weight: 300;
}

.panel p {padding-bottom: 1em; width: 100%; max-width: 90%; line-height: 1.5; }



/*//////////////////accordion content ENDS////////////////*/

/*max-height on .makeover-image */

@media screen and (min-width: 860px) {
    .makeover-image img {max-height: 90vh}
}


/*tap colour*/

* {
    -webkit-tap-highlight-color: rgba(255,255,255,0) !important;
}


/*------------------Homepage animations---------------------*/
.cell-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cell {
    position: absolute;
    transition: transform .6s ease-in; /* Added transition for smooth animation */
    mix-blend-mode: multiply !important;
}
#hand {
    transform: translateY(-50%) translateX(72vw);
    top: 50%;
    right: -23vw;
    width: 75vw;
    z-index: 1;
}
#pan {
    transform: translateY(-50%) translateX(-68vw);
    left: -15vw;
    top: 55%;
    width: 68vw;
    z-index: 1;
}
.show {
    /*! visibility: visible; */
}

@media screen and (max-width: 600px) {
#hand {
    width: 80vw;
    right: -28vw;}
#pan {
    width: 68vw;
    left: -15vw;
top: 52%;}
}



/*#first-animation opacity for taking off*/
#first-animation {
opacity: 1;
transition: opacity 0.1s ease-in-out; 
}

/* New image container styling */
#second-animation {
    position: absolute;
    bottom: 0;
    right: 0;
    display: none; /* Initially hidden */
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    mix-blend-mode: multiply !important;
    transition: opacity 0.2s ease; /* Added transition for smooth opacity change */
    opacity: 0; /* Initially hidden */
    filter: blur(100px);
}
#second-animation.show {
    opacity: 1;filter: blur(0px); /* Show when 'show' class is added */
}
#second-animation img {
    width: 75vw;
max-height: 90vh;
    position: absolute; 
    bottom: 0; 
    right: 5px;
}
@media (max-width: 600px) {
    #second-animation img {
        width: 95vw;
    }
}

/*-----------------------Homepage animations ENDS----------------------*/

/*-----------------------Accordion on print page----------------------*/


/*accordion-container*/

.accordion-container {width: 100%; margin: 0 0 60px auto; max-width: calc(25% - 1vw);}

@media screen and (min-width: 1024px) {
    .accordion-container {margin-top: 80px}
}

@media screen and (max-width: 960px) {
    .accordion-container {max-width: calc(50% - 1vw);}
}


/*accordion-container ENDS*/



.first-print-title h2 {margin-top: 78px}

@media screen and (max-width: 1024px) {
    .first-print-title h2 {margin-top: 10px; width: 100%;}
}
.accordion-container {width: 100%; }

/*-----------------------Accordion on print page----------------------*/



/*-----------------------Gallery control------------------------*/

.gallery-control {position: absolute; top: 90px; right: 26px; animation-name: fadeup; animation-duration: .7s; height: 42px}

@media screen and (max-width: 960px) {
    .gallery-control {right: 18px; top: 62px;}
}
.gallery-salon {margin-right: 20px;}

.gallery-control img {opacity: .3; transition: opacity .2s ease;}
.gallery-control img.current-view {opacity: .6;}
.gallery-control img:hover {opacity: .6;}

@media screen and (max-width: 1024px) {
    .gallery-control img {max-height: 42px !important; width: auto;}
}


/*-----------------------Gallery control ENDS------------------------*/



@media screen and (max-width: 600px) {
body.originals-list-view { padding-top: 30px;}  
}
/*-----------------------list view on artworks-----------------------*/




/*------------------------homepage-desk-nav-------------------------*/

@media screen and (min-width: 811px) {
 .mobileIconToggle,  #mobileMenu {display:none;}
}



.homepage-desk-nav {position:absolute; top: 20px; right: 0; z-index: 999; display: flex;flex-wrap: wrap; justify-content: right !important; font-size: 120%;
animation-name: simplefade;
  animation-duration: .7s;}

@media screen and (max-width: 810px) {
    .homepage-desk-nav {display:none;}
}

.homepage-desk-nav .desk-nav-item {margin-right: 10vw;}
.homepage-desk-nav .desk-nav-item:last-of-type {margin-right: 2.25em}

.homepage-desk-nav a, .homepage-desk-nav a:visited {color: #333; text-decoration:none; }

/*hover everything but*/


.homepage-desk-nav a {opacity: 1;transition: all .3s ease;}
.homepage-desk-nav:hover a {opacity: .2; }
.homepage-desk-nav a:hover {opacity:1;}




/*------------------------homepage-desk-nav ENDS-------------------------*/





/*------------------------relationship sizing-------------------------*/
.item-large {transform:scale(.9);}
.item-medium {transform:scale(.7);}
.item-small {transform:scale(.55);}
.item-tiny {transform:scale(.45);}
/*------------------------relationship sizing ENDS-------------------------*/



/*sold status after lightbox titles*/

body.sold-archive .lightbox-title:after {content:" - SOLD";}


/*sold status after lightbox titles ENDS*/