@charset "utf-8";
/* CSS Document */

        /*{border:1px solid #bada55;}*/

        .test{display:none;}    
        body {
            font-family: 'Barlow', sans-serif;
            background-color: black;
            background-image: url("images/hadal.svg");
            background-size: cover;
            background-position: bottom;
            font-size: 16px;
            overflow-y: hidden;
        }

        #container {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            vertical-align: top;
            overflow-y: hidden;
        }

        header {
            margin-left: -12px;
            padding: 0 10px 20px 10px;
            top: 0;
            left: 0;
            position: absolute;
            background-color: #122246;
            height: 97vh;
            z-index: 10;
            width: 40px;
            -ms-writing-mode: tb-rl;
            -webkit-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            white-space: nowrap;
            text-align: right;

        }

        h1 {
            font-family: 'Barlow', sans-serif;
            font-weight: 400;
            font-size: 17px;
            color: azure;
        }


        .scrolling-wrapper {
            /*background-color:#e7e7e7;*/
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            vertical-align: top;
            height: 98vh;
            margin-top: 0;
            margin-left: 40px;
        }

        .card {
            width: auto;
            height: 100vh;
            display: inline-block;
            vertical-align: top;
        }

        .slice {
            width: 13vw;
            height: 80%;
            display: inline-block;
            vertical-align: top;
            border: 10px solid white;
        }

        .expand img, .display img{cursor:pointer;}

        .full,
        .fullprint,
        .fullint,
        .fullother {
            /*border:1px solid purple;*/
            display: inline-block;
            width: 33vw;
            margin: 50px 0 0 -15px;
            vertical-align: top;
            height: 80%;
            padding-right: 20px;
            border-right: 1px solid lightgray;
            background-color: white;
            border: 10px solid white;
        }

        .fullitem {
            max-height: 60vh;
            max-width: 30vw;
            margin: 2vw;
            background-color: pink;
        }

        .thumb {
            width: 3vw;
            height: 3vw;
            background-color: darkturquoise;
            top: 0;
            float: left;
            margin: 0 1vw 1vw 0;
            object-fit: cover;
            background-position-x: center;
            border: 1px solid lightgray;
        }

        h3 {
            text-transform: uppercase;
            clear: both;
            letter-spacing: 1px;
            border-bottom: 1px solid lightgray;
            background-color: white;
        }

        .about .expand {
            white-space: normal;
            /*width:50vw;*/
            width: 30vw;
            padding-right: 40px;
            background-color: white;
        }

        .print .expand,
        .fineart .expand {
            width: 18vw;
        }

        .about p {
            font-style: normal;
            font-family: 'Barlow', sans-serif;
            line-height: 1.5em;
            /*columns: 2;
            column-gap:40px;*/
            vertical-align: top;
        }

        .fineart .slice {
            background-image: url("images/kali029.jpg");
            background-size: cover;
            background-position-x: center;
            margin: 50px;
        }

        .print .slice {
            background-image: url("images/parmesan_thumb.jpg");
            background-size: cover;
            background-position-x: center;
            margin: 50px;
        }

        .interactive .slice {
            background-image: url("images/costofwar_thumb.png");
            background-size: cover;
            background-position-x: center;
            margin: 50px;
        }

        .other .slice {
            background-image: url("images/aquarium_thumb.png");
            background-size: cover;
            background-position-x: left;
            margin: 50px;
        }

        .about .slice {
            background-image: url("images/mural_profile.jpeg");
            background-size: cover;
            background-position-x: center;
            margin: 50px;
        }

        h2 {
            background: rgba(255, 255, 255, 1);
            top: 30px;
            left: -30px;
            position: relative;
            padding: 15px 25px 10px 15px;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 1em;
            font-family: 'Josefin Sans', sans-serif;
            display: inline-block;
        }

        .min {
            width: 5vw;
            position: relative;
        }

        .min h2 {
            /*transform: rotate(-90deg);
            width:110%;
            text-align:center;
            padding:10px;
            left:10px;
            border:1px solid hotpink;
            bottom:0;*/
            background: rgba(255, 255, 255, 1);
            /*top:30px;*/
            /*left:-30px;*/
            text-align: center;
            position: absolute;
            padding: 15px 25px 10px 15px;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 1em;
            font-family: 'Josefin Sans', sans-serif;
            display: inline-block;
        }

        .min .sectionTitle {
            transform: rotate(-90deg);
            text-align: center;
            padding: 10px;
            position: absolute;
            top: 100px;
            right: 55px;
        }

        .display {
            text-align: center;
        }

        .display img {
            border: 1px solid lightgray;
        }

        #demo_title {
            margin: 2vw;
            font-style: normal;
        }


        #demo img {
            border: 1px solid lightgray;
        }
        
        .apology{
            background-color:rgba(0,0,0,.75);
            border-radius: 15px;
            padding:15px;
            color:white;
            width:auto;
            position:absolute;
            z-index:666;
            margin:10px auto auto auto;
            
        }

#lightbox_title{
    color:pink;
}

        /*scrollbar*/
        /* width */
        ::-webkit-scrollbar {
            height: 10px;
            border-radius: 10px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, .25);
            border-radius: 5px;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, .5);
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .testbox {
            position: absolute;
            top: 10px;
            left: 55px;
            width: 10px;
            height: 10px;
            z-index: 500;
            border: 1px solid white;
            color: yellow;
        }
        .test{border:5px solid #badass;}

        
.lightbox {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
overflow: auto;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
}

.lightbox.hidden {
opacity: 0;
visibility: hidden;
}

.lightbox .close {
 position: absolute;
 right: 2.5%;
 top: 2.5%;
 font-size: 2rem;
 cursor: pointer;
}
.lightbox-content {
display:flex;
 margin:5% 5% auto 5%;
 align-items: center;
 justify-content: center;
vertical-align: middle;
        height:80vh;
}
.lightbox-content img {
 max-width: 100%;
 max-height: 100%;
 border: 5px solid #fff;
}

        /*******MEDIA QUERIES*********/



     
            .testbox {
                color: orange;
            }

            .slice {
                width: 13vw;
                height: 80%;
                display: inline-block;
                vertical-align: top;
                border: 10px solid white;
            }

            .card {
                width: auto;
                height: 100vh;
                display: inline-block;
                vertical-align: top;
            }

            .expand {
                display: inline-block;
                width: 15vw;
                margin: 50px 10px 10px -70px;
                vertical-align: top;
                padding: 0 20px 0 20px;
                height: 80%;
                background-color: white;
                white-space: normal;
                border: 10px solid white;
                position: relative;
            }
        


        @media (max-width: 768px) { 

        .test{display:none;}    
        body {
            font-family: 'Barlow', sans-serif;
            background-color: black;
            background-image: url("images/hadal.svg");
            background-size: cover;
            background-position: bottom;
            font-size: 16px;
            overflow-y: hidden;
        }

        #container {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            vertical-align: top;
            overflow-y: hidden;
        }

        header {
            margin-left: -12px;
            padding: 0 10px 20px 10px;
            top: 0;
            left: 0;
            position: absolute;
            background-color: #122246;
            height: 97vh;
            z-index: 10;
            width: 40px;
            -ms-writing-mode: tb-rl;
            -webkit-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            white-space: nowrap;
            text-align: right;

        }

        h1 {
            font-family: 'Barlow', sans-serif;
            font-weight: 400;
            font-size: 17px;
            color: azure;
        }


        .scrolling-wrapper {
            /*background-color:#e7e7e7;*/
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            vertical-align: top;
            height: 98vh;
            margin-top: 0;
            margin-left: 40px;
        }

        .card {
            width: auto;
            height: 100vh;
            display: inline-block;
            vertical-align: top;
        }

        .slice {
            width: 13vw;
            height: 80%;
            display: inline-block;
            vertical-align: top;
            border: 10px solid white;
        }

        .expand img, .display img{cursor:pointer;}

        .full,
        .fullprint,
        .fullint,
        .fullother {
            /*border:1px solid purple;*/
            display: inline-block;
            width: 33vw;
            margin: 50px 0 0 -15px;
            vertical-align: top;
            height: 80%;
            padding-right: 20px;
            border-right: 1px solid lightgray;
            background-color: white;
            border: 10px solid white;
        }

        .fullitem {
            max-height: 60vh;
            max-width: 30vw;
            margin: 2vw;
            background-color: pink;
        }

        .thumb {
            width: 3vw;
            height: 3vw;
            background-color: darkturquoise;
            top: 0;
            float: left;
            margin: 0 1vw 1vw 0;
            object-fit: cover;
            background-position-x: center;
            border: 1px solid lightgray;
        }

        h3 {
            text-transform: uppercase;
            clear: both;
            letter-spacing: 1px;
            border-bottom: 1px solid lightgray;
            background-color: white;
        }

        .about .expand {
            white-space: normal;
            /*width:50vw;*/
            width: 30vw;
            padding-right: 40px;
            background-color: white;
        }

        .print .expand,
        .fineart .expand {
            width: 18vw;
        }

        .about p {
            font-style: normal;
            font-family: 'Barlow', sans-serif;
            line-height: 1.5em;
            /*columns: 2;
            column-gap:40px;*/
            vertical-align: top;
        }

        .fineart .slice {
            background-image: url("images/kali029.jpg");
            background-size: cover;
            background-position-x: center;
            margin: 50px;
        }

        .print .slice {
            background-image: url("images/parmesan_thumb.jpg");
            background-size: cover;
            background-position-x: center;
            margin: 50px;
        }

        .interactive .slice {
            background-image: url("images/costofwar_thumb.png");
            background-size: cover;
            background-position-x: center;
            margin: 50px;
        }

        .other .slice {
            background-image: url("images/aquarium_thumb.png");
            background-size: cover;
            background-position-x: left;
            margin: 50px;
        }

        .about .slice {
            background-image: url("images/mural_profile.jpeg");
            background-size: cover;
            background-position-x: center;
            margin: 50px;
        }

        h2 {
            background: rgba(255, 255, 255, 1);
            top: 30px;
            left: -30px;
            position: relative;
            padding: 15px 25px 10px 15px;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 1em;
            font-family: 'Josefin Sans', sans-serif;
            display: inline-block;
        }

        .min {
            width: 5vw;
            position: relative;
        }

        .min h2 {
            /*transform: rotate(-90deg);
            width:110%;
            text-align:center;
            padding:10px;
            left:10px;
            border:1px solid hotpink;
            bottom:0;*/
            background: rgba(255, 255, 255, 1);
            /*top:30px;*/
            /*left:-30px;*/
            text-align: center;
            position: absolute;
            padding: 15px 25px 10px 15px;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 1em;
            font-family: 'Josefin Sans', sans-serif;
            display: inline-block;
        }

        .min .sectionTitle {
            transform: rotate(-90deg);
            text-align: center;
            padding: 10px;
            position: absolute;
            top: 100px;
            right: 55px;
        }

        .display {
            text-align: center;
        }

        .display img {
            border: 1px solid lightgray;
        }

        #demo_title {
            margin: 2vw;
            font-style: normal;
        }

        #demo img {
            border: 1px solid lightgray;
        }
        
        .apology{
            background-color:rgba(0,0,0,.75);
            border-radius: 15px;
            padding:15px;
            color:white;
            width:auto;
            position:absolute;
            z-index:666;
            margin:10px auto auto auto;
            
        }

        /*scrollbar*/
        /* width */
        ::-webkit-scrollbar {
            height: 10px;
            border-radius: 10px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, .25);
            border-radius: 5px;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, .5);
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .testbox {
            position: absolute;
            top: 10px;
            left: 55px;
            width: 10px;
            height: 10px;
            z-index: 500;
            border: 1px solid white;
            color: yellow;
        }
        .test{border:5px solid #badass;}

        
.lightbox {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
overflow: auto;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
}

.lightbox.hidden {
opacity: 0;
visibility: hidden;
}

.lightbox .close {
 position: absolute;
 right: 2.5%;
 top: 2.5%;
 font-size: 2rem;
 cursor: pointer;
}
.lightbox-content {
display:flex;
 margin:5% 5% auto 5%;
 align-items: center;
 justify-content: center;
vertical-align: middle;
        height:80vh;
}
.lightbox-content img {
 max-width: 100%;
 max-height: 100%;
 border: 5px solid #fff;
}

            .testbox {
                color: red;
            }

            .scrolling-wrapper {
                overflow-y: scroll;
                overflow-x: hidden;
            }

            .card {
                width: 100vw;
                height: auto;
                display: block;
            }


            .slice {
                width: 70vw;
                border: 10px solid white;
                background-position: top;
                display: block;
                height: 25vh;
            }

            .expand {
                width: 70vw !important;
                border: 10px solid white;
                margin: -50px 50px 50px 50px;
                display: block;
                background-color: white;
                height:inherit;
            }

           
            
            .thumb {
                width: 8vw;
                height: 8vw;
                background-color: darkturquoise;
                top: 0;
                float: left;
                margin: 0 1vw 1vw 0;
                object-fit: cover;
                background-position-x: center;
                border: 1px solid lightgray;
            }

            .subsection h3 {
                font-size: 20px;
            }
            
            .full{display:none;}
        }


     }