/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/* 
================================================================================================================================
================================================================================================================================
================================================================================================================================
   D E S K T O P   S I Z E
================================================================================================================================
================================================================================================================================
================================================================================================================================
*/

/*====================================================================*/
/*======================= ANIMATIONS =======================*/
/*====================================================================*/
/* The animation code */
@keyframes bouncing-chevron {
    0% {
        transform: scaleY(1) translateY(0) translateX(-50%);
    }

    10% {
        transform: scaleY(1.05) translateY(0) translateX(-50%);
    }

    30% {
        transform: scaleY(.95) translateY(-30px) translateX(-50%);
    }

    50% {
        transform: scaleY(1.02) translateY(0) translateX(-50%);
    }

    57% {
        transform: scaleY(1) translateY(-13px) translateX(-50%);
    }

    64% {
        transform: scaleY(1) translateY(0) translateX(-50%);
    }

    100% {
        transform: scaleY(1) translateY(0) translateX(-50%);
    }
}

/* The element to apply the animation to */
.bouncing-chevron #left_chevron_icon {
    transform: rotateZ(-90deg);
    stroke: #fff;
    width: 50px;
    margin: auto;
    display: block;
    height: 50px;
    stroke-width: 100px;

}

.bouncing-chevron {
    left: 50%;
    position: absolute;
    bottom: 2vh;
    width: 100px;
    height: 50px;
    /*    background-color: red;*/
    transform: translateX(-50%);
    animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
    animation-name: bouncing-chevron;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

/*====================================================================*/
/*======================= HTML STYLES =======================*/
/*====================================================================*/

h1,
h2,
h3,
h4,
h5,
p,
label,
input,
textarea {
    font-family: 'Montserrat', sans-serif;
}

h1 {
    font-weight: 700;
    font-size: 6em;
    margin: 0;
}

h2 {
    font-weight: 700;
    font-size: 3em;
    margin: 0;
    line-height: 1em;
}

h3 {
    font-weight: 300;
}

h4 {
    font-weight: 700;
    font-size: 2em;
    margin: 0;
}

h5 {
    font-weight: 500;
    font-size: 1em;
    margin: 0;
}

a {
    text-decoration: none;
}

p {
    line-height: 1.5em;
}



/* SVG STYLES */
#home_icon,
#fine_art_icon,
#about_icon,
#design_icon,
#three_d_icon {
    display: none;
}


#hamburger_menu_icon,
#cross_icon,
#left_chevron_icon,
#right_chevron_icon,
#home_icon,
#fine_art_icon,
#about_icon,
#design_icon,
#resume_icon,
#portfolio_icon,
#three_d_icon,
#facebook_icon,
#linkedin_icon,
#instagram_icon,
#email_icon,
#go_to_icon {
    width: 30px;
    height: 30px;
    margin: 8px;
    fill: none;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-width: 60px;
}

svg.light-svg {
    stroke: #f0f0f0;
}

svg.med-svg {
    stroke: #919191;
}

svg.dark-svg {
    stroke: #5a5a5a;
}

#fineArtImageSliderDescOpen,
#fineArtImageSliderDescClosed,
#ThreeDImageSliderDescOpen,
#ThreeDImageSliderDescClosed,
.mobile-only,
.tablet-only {
    display: none;
}


.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.openable-img {
    height: 100%;
    position: relative;
}

.new-tab-cover {
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #00000070;
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0%;
    transition-duration: 300ms;
    /*    display: none;*/
}

.new-tab-cover div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    transform: translateX(-50%) translateY(-50%);
    transition-duration: 300ms;
}

div.new-tab-cover div h3 {
    text-align: center;
    /*    border: 1px solid #fff;*/
    border-radius: 1em;
    color: #5A5A5A;
    box-shadow: 3px 3px 6px #00000030;
    background-color: #fff;
    /*        min-width: 70px;*/

}





/*====================================================================*/
/*======================= HEADER =======================*/
/*====================================================================*/

header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 100;
    height: 60px;
    overflow: hidden;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, .1)
        /*
    border-radius: 30px;
    margin: 20px 20px
*/

}

header ul.nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: right;
    margin-top: 15px;
}

header ul {
    margin-top: 15px;
    line-height: 25px;
}

.header-categories {
    padding-right: 30px;
}

header li,
header li h3,
.header-name h3 {
    display: inline-block;
    box-sizing: border-box;
    padding: 0px 10px;
    border-radius: 6px;
    margin: 0;
    text-transform: capitalize;
}

.header-selected h3 {
    font-weight: 700;
    background-color: transparent;
}


#right_chevron_icon.art-dropdown-arrow {
    padding: 0;
    margin: 0;
    height: 18px;
    width: 18px;
    transform: rotateZ(90deg);
    vertical-align: middle;
    display: none;
}

/*LIGHT PAGE COLORS*/
body.light-page {
    background-color: #ffffff;
}


.light-page h1,
.light-page h2,
.light-page h4,
.light-page h3,
.light-page h5 {
    color: #919191
}

body header.header-white h3,
.header-white #right_chevron_icon {
    color: #707070;
}

.header-white {
    background-color: #ffffff;
}


/*MEDIUM PAGE COLORS*/
body.med-page {
    background-color: #EDEDED;
}

.med-page h1,
.med-page h2,
.med-page h4,
.med-page h3,
.med-page h5 {
    color: #919191
}

.header-med {
    background-color: #EDEDED;
}

.header-med h3 {
    color: #919191;
}

/*DARK PAGE COLORS*/
body.dark-page {
    background-color: #484848;
}

.header-dark {
    background-color: #484848;
}

body.dark-page h1,
body.dark-page h2,
body.dark-page h3 {
    color: #f0f0f0;
}

.header-dark h3,
    {
    color: #f0f0f0;
}

.mobile-header,
.header-null,
.mobile-header-social {
    display: none;
}




/*==========GENERAL STYLES==========*/
.page-title {
    width: 100%;
    margin-top: 100px;
}

.page-title h2,
.page-title h1 {
    text-align: center;
}


/*====================================================================*/
/*=======================index.html=======================*/
/*====================================================================*/

body#index .index-snap-wrapper {
    height: 100vh;
    top: 0;
}

.index-text-wrapper {
    position: absolute;
    width: 100vw;
    /*    left: 10vw;*/
    height: 40vh;
    top: 30vh;
    z-index: 10;
    pointer-events: none;
}

.index-text-wrapper a {
    height: 100%
}

.index-text-wrapper h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 8em;
    line-height: 1em;
    color: #fff;
    width: 50%;
    position: absolute;
    text-align: left;
    bottom: 0;
    left: 25%;
    z-index: 10;
    pointer-events: none;
}


.hamburger-menu {
    display: none;
}

/*IMAGE TOOLBAR*/
.index-image-toolbar {
    display: grid;
    grid-template-columns: auto 1.5em 1.5em 1.5em;
}


.index-image-toolbar > div {
    border-bottom: 1px solid #333;
}

/*IMAGE TOOLBAR TEXT BAR*/
.index-image-toolbar > div:nth-child(1) p {
    margin: 0 1em;
    line-height: 1.4em;
    color: #333;
}


/*IMAGE TOOLBAR MINIMISE*/
.index-image-toolbar > div:nth-child(2) {
    border-left: 1px solid #333;
    padding: 4px;
}

.index-image-toolbar > div:nth-child(2) div {
    height: 50%;
    border-bottom: 1px solid #333;
}


/*IMAGE TOOLBAR FULLSCREEN*/
.index-image-toolbar > div:nth-child(3) {
    border-left: 1px solid #333;
    padding: 5px 5px 6px 5px;
}

.index-image-toolbar > div:nth-child(3) div {
    border: 1px solid #333;
    height: 100%;

}


/*IMAGE TOOLBAR EXIT*/
.index-image-toolbar div:nth-child(4) {
    border-left: 1px solid #333;
    position: relative;
    padding: 4px
}

.index-image-toolbar > div:nth-child(4) div:nth-child(1) {
    height: 50%;
    border-bottom: 1px solid #333;
    transform: rotate(45deg);
    position: absolute;
    top: -8px;
    left: 8px;
    width: 100%;
    height: 100%;
}

.index-image-toolbar > div:nth-child(4) div:nth-child(2) {
    height: 50%;
    border-bottom: 1px solid #333;
    transform: rotate(-45deg);
    position: absolute;
    top: -8px;
    left: -8px;
    width: 100%;
    height: 100%;
}


.index-blurb {
    position: absolute;
    bottom: 10px;
    left: 20px;
    width: 25vw;

}

.index-blurb p {
    margin-bottom: 1.2em
}

.index-hover-wrapper {
    /*    transition-duration: 300ms;*/
    /*    position: absolute;*/
    width: 60%;
    height: 60%;
    max-width: 800px;
    margin: 20vh auto;
    display: grid;
    grid-template-rows: 1.5em auto;
    border: 1px solid #333;
}


.index-ux-design-page .index-image,
.index-3d-design-page .index-image,
.index-art-page .index-image,
.index-me-page .index-image {
    background-size: cover;
    background-position: center;
}

.index-image {
    grid-row: 2/3;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.index-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/*TODO replace this image with a photo of me*/
.index-ux-design-page .index-image {
    /*    background-image: url(../img/ux_design/anemoi/00_anemoi_header.png);*/

}

.index-3d-design-page .index-image {
    /*    background-image: url(../img/3d_design/preview_img/05_chain.png)*/
}

.index-art-page .index-image {
    /*    background-image: url(../img/fine_art/sd_img/02_greif.jpg);*/
}

.index-me-page .index-image {
    /*    background-image: url(../img/ux_design/kauri_lounge/17_group_photo.JPG);*/
}

.fa-arrow-left,
.fa-arrow-right {
    font-size: .6em;
    vertical-align: middle;
}


.index-snap-page .design-tag {
    display: none;
}


/*====================================================================*/
/*============================ DESIGN PAGE ===========================*/
/*====================================================================*/

.design-wrapper {
    width: 80vw;
    margin: 50px auto;
}

.design-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, calc(((80vw - (3vw * 3)) / 4)));
    grid-gap: 3vw;


}

.design-card {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    position: relative;
    padding: 1em;
    box-sizing: border-box;
    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.16);
    transition-duration: 300ms;
}

.design-blurb {
    padding: 10%;
}

.design-card img {
    width: calc(100% + 2em);
    margin: -1em -1em 0 -1em;
}

.design-card h4 {
    margin-top: .4em;
    word-break: break-word;
}

.design-card p {}

.design-tag {
    height: 1.8em;
    display: inline-block;
    padding: 0 1em;
    background-color: #919191;
    /*    margin: .5em 0 1.4em 1em;*/
    border-radius: .9em;
    margin-bottom: .5em;
    /*    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.10);*/
}



div.design-tag h5 {
    color: #EDEDED;
    line-height: 1.8em;
    font-weight: 700;
}

.design-tag.clickable {
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    box-shadow: 5px 5px 10px #8BC6EC20;

}

.design-tag.clickable {
    color: #FFF;
}

.design-tag.clickable svg#go_to_icon {
    stroke-width: 80px;
    height: 1.8em;
    width: 1.8em;

}

.design-tag.clickable svg#right_chevron_icon {
    stroke-width: 120px;
    height: 1.4em;
    width: 1.4em;

}

.design-tag.clickable svg#go_to_icon,
.design-tag.clickable svg#right_chevron_icon {

    padding: 0.2em;
    box-sizing: border-box;
    margin: 0;
    stroke: #EDEDED;
}

#chaosPreviewImage {
    width: 100%;
    box-sizing: border-box;
    padding: 10%;
    margin: -20% 0 20%;
    transition-duration: 300ms;
    pointer-events: none;

}

#chaosPreviewImageBackground {
    position: relative;
    background-color: #EFB8BF;
    width: calc(100% + 2em);
    margin: -1em -1em 0 -1em;
    /*    height: 60%;*/
    box-sizing: border-box;
}

#bestAwardsSticker {
    position: absolute;
    border-radius: 50%;
    top: 0px;
    left: 0px;
    width: 30%;
    transition-duration: 300ms;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.10);

}


/*====================================================================*/
/*==================== VISUAL ART NAVIGATION PAGE ====================*/
/*====================================================================*/


.visual-art-wrapper {
    width: 60vw;
    margin: 8vh auto;
}

.visual-art-grid {
    display: grid;
    column-gap: 10%;
    width: 100%;
    grid-template-columns: 45% 45%;
}

.visual-art-grid img {
    width: 100%;
    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.16);
    transition-duration: 300ms;
}

.visual-art-grid h2 {
    font-size: 4em;
    text-decoration: none;
    text-align: center;
    margin-top: -0.5em;
    transition-duration: 300ms;
}


.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

/*====================================================================*/
/*======================= 3D DESIGN PAGE =============================*/
/*====================================================================*/

div.three-d-design-grid-wrapper {
    gap: 30px 30px;
    width: 80vw;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /*    grid-template-rows: 1fr 1fr 1fr 1fr;*/
    /*    grid-auto-rows: 1fr;*/
    margin-top: 40px;
    margin-bottom: 100px;
}

div.three-d-design-grid-wrapper img {
    width: 100%;
    box-sizing: border-box;
    object-fit: contain;
    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.16);
    transition-duration: 200ms;
}

.three-d-pop-up-preview {
    width: 86vw;
    height: 86vh;
    left: 7vw;
    top: 7vh;
    padding: 1em;
    box-sizing: border-box;
    background-color: #5a5a5a;
    position: fixed;
    box-shadow: 20px 20px 80px rgba(0, 0, 0, 0.35);
    display: none;
    /*    grid-template-columns: 1fr 1fr;*/
    /*    grid-template-rows: 1fr 4fr 1fr 4fr 1fr;*/
}

.three-d-arrows {
    position: absolute;
    top: 50%;
    transition-duration: 300ms;
}

.three-d-arrows-right {
    right: -3em;
}

.three-d-arrows-left {
    left: -3em;
}

#ThreeDImageSliderExit {
    z-index: 20;
    position: absolute;
    background: #5a5a5a;
    right: 1.5em;
    top: 1.5em;
    border-radius: .6em;
    transition-duration: 300ms;
}

#ThreeDCaroselWrapper {
    /*    grid-column: 2;*/
    /*    grid-row: 2 / 5;*/
    height: 100%;
    overflow: hidden;
}

#ThreeDCaroselGrid {
    display: grid;
    overflow: hidden;
    grid-template-columns: repeat(15, 1fr);
    height: 100%;
    width: 1500%;
    transition-duration: .3s;

}

.three-d-carosel-cell {
    height: 100%;
    width: 100%;
    display: grid;
    overflow: hidden;
    grid-gap: 1em;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: calc(30% - 1em) 70%;
}

.three-d-carosel-cell div:first-child {
    grid-column: 1/3;
    grid-row: 2/3;
}

.three-d-carosel-cell div:first-child img {
    /*    min-height: calc(86vh - 2em);*/
}


.three-d-carosel-cell-text {
    z-index: 10;
    background-color: #5A5A5A;
    color: #f0f0f0;
    box-sizing: border-box;
    padding: 1em;
    grid-column: 1/3;
    grid-row: 1/2;
}

.three-d-slider-image-div {
    position: relative;
    height: 100%;
    width: 100%;
}

.three-d-slider-image-div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.three-d-slider-image-div:nth-child(2) {
    grid-column: 3/5;
    grid-row: 1/3;
}




/*====================================================================*/
/*========================== FINE ART PAGE ==========================*/
/*====================================================================*/

#fineArtGridWrapper {
    width: 90vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin: 40px auto 100px;
}

.fine-art-card {
    /*    height: 300px;*/
    width: 100%;
    padding: 6%;
    background-color: #5A5A5A;
    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.16);
    transition-duration: 300ms;
    box-sizing: border-box;
}



.fine-art-card img {
    width: 100%;
    /*    margin: 6% 7% 2%;*/
}

.fine-art-card h4 {
    /*    margin-left: 6%;*/
    color: #f0f0f0;
}

.fine-art-card h5 {
    color: #5A5A5A;
    line-height: 1.8em;
}

.fine-art-card-tag {
    height: 1.8em;
    display: inline-block;
    padding: 0 1em;
    background-color: #f0f0f0;
    /*    margin: .5em 0 1.4em 1em;*/
    border-radius: .9em;
    margin-bottom: .5em;
    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.16);
}

.fine-art-card-image-collection {
    width: 100%;
    /*    margin: 6% 7%;*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
}

.fine-art-card-image-collection img {
    margin: 0;
    width: 100%;
}

/*FINE ART CAROSEL*/

#fineArtCaroselWindow {
    width: 86vw;
    /*    max-width: 900px;*/
    height: 80vh;
    left: 7vw;
    top: 10vh;
    background-color: #5a5a5a;
    position: fixed;
    box-shadow: 20px 20px 80px rgba(0, 0, 0, 0.35);
    padding: 1em;
    box-sizing: border-box;
    display: none;

}

#fineArtCaroselWrapper {
    overflow: hidden;
    height: 100%;
}

#fineArtCaroselGrid {
    width: 1700%;
    display: grid;
    height: 100%;
    grid-template-columns: repeat(17, 1fr);
}

.fine-art-carosel-cell {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(50%, auto) minmax(40%, 1fr);
    overflow: hidden;
    position: relative;
}

.fine-art-slider-image-div {
    position: relative;
}

.fine-art-carosel-cell-text {
    z-index: 10;
    max-width: 400px;
    margin: 0 auto;
    background-color: #5A5A5A;
    color: #f0f0f0;
    box-sizing: border-box;
    padding: 1em;
}

.fine-art-carosel-cell img {
    z-index: 1;
    height: 100%;
    width: 100%;
    overflow: hidden;
    object-fit: cover;
    /*    margin: auto;*/
    margin-left: 50%;
    transform: translateX(-50%);
}

.fine-art-carosel-cell-text h2 {
    margin: .3em 0;
}

.fine-art-carosel-cell-text .fine-art-card-tag {
    color: #5a5a5a;
}

.fine-art-carosel-cell-text .fine-art-card-tag h5 {
    line-height: 1.8em;
}

.fine-art-carosel-collection-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.fine-art-carosel-collection-grid {
    height: 100%;
    display: grid;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    /*    width: 100%;*/
}

.fine-art-carosel-collection-wrapper div {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.fine-art-carosel-collection-wrapper img {
    height: 100%;

    /*    overflow: hidden;*/
    margin-left: 50%;
    transform: translateX(-50%);

}

#fineArtCaroselExit {
    z-index: 20;
    position: absolute;
    right: .5em;
    top: .3em;
}



.fine-art-arrows {
    position: absolute;
    top: 50%;
    transition-duration: 300ms;
}



#fineArtCaroselRight {
    right: -3em;
}

#fineArtCaroselLeft {
    left: -3em
}


/*=================================================================================================================
===================================================================================================================

 UX PROJECTS 

=================================================================================================================
=================================================================================================================*/



/*====================================================================
UX PROJECTS GENERAL STYLES
====================================================================*/

.snap-wrapper {
    width: 100vw;
    /*    max-width: 1200px;/*/
    /*    margin: auto;*/
    overflow: scroll;
    height: calc(100vh - 60px);
    top: 60px;
    position: absolute;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;

}

.snap-page,
.snap-page-header {
    scroll-snap-align: center;
    margin: 0;
    height: calc(100vh - 60px);
    top: 60px;
    width: 100vw;
    overflow: hidden;
    position: relative;
}

.snap-page-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.snap-page {
    margin: auto;
}

.project-text-wrapper {
    margin-top: 40vh;
    /*    min-width: 300px;*/
    transform: translateY(-50%);
}

.project-text-grid-wrapper.left {
    margin-right: 20%;
    grid-column: 1/2;
    grid-row: 1/2;
}

.project-text-grid-wrapper.left + img {
    grid-column: 2/3;
    grid-row: 1/2;
}

.project-text-grid-wrapper.right {
    margin-left: 20%;
    grid-column: 2/3;
    grid-row: 1/2;
}

.project-text-grid-wrapper.right + img {
    grid-column: 1/2;
    grid-row: 1/2;
}

.socratic-page,
.anemoi-page,
.kauri-lounge-page,
.chaos-page,
.mini-page,
.retrospection-page,
.our-history-page,
.dysphoria-page,
.venchi-page,
.lamort-page {
    display: grid;
    max-width: 1000px;
    position: relative;
    width: 70vw;
    height: 80%;
    margin: 10vh auto;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
}

.retrospection-title-page .project-title h1,
.retrospection-title-page .project-title h2,
.retrospection-title-page .design-tag,
.retrospection-title-page {
    background-color: #1d4da0;
}

.socratic-title-page .project-title h1,
.socratic-title-page .project-title h2,
.socratic-title-page .design-tag,
.socratic-title-page {
    background-color: #707f95;
}

.kauri-lounge-title-page .project-title h1,
.kauri-lounge-title-page .project-title h2,
.kauri-lounge-title-page .design-tag,
.kauri-lounge-title-page {
    background-color: #91ad3d;
}

.anemoi-title-page .project-title h1,
.anemoi-title-page .project-title h2,
.anemoi-title-page .design-tag,
.anemoi-title-page {
    background-color: #36689d;
}

.mini-title-page .project-title h1,
.mini-title-page .project-title h2,
.mini-title-page .design-tag,
.mini-title-page {
    background-color: #494e66;
}

.dysphoria-title-page .project-title h1,
.dysphoria-title-page .project-title h2,
.dysphoria-title-page .design-tag,
.dysphoria-title-page {
    background-color: #000;
}

.venchi-title-page .project-title h1,
.venchi-title-page .project-title h2,
.venchi-title-page .design-tag,
.venchi-title-page {
    background-color: #8a3c4b;
}

.lamort-title-page .project-title h1,
.lamort-title-page .project-title h2,
.lamort-title-page .design-tag,
.lamort-title-page {
    background-color: #1b1b1b;
}

.project-title {
    position: absolute;
    line-height: 5.2em;
    bottom: 10vh;
    left: 6vw;
}

body div.project-title h1,
body div.project-title h2 {
    color: #f0f0f0;
    padding: .2em;
    box-shadow: 10px 10px 20px #00000030
}

body div.project-title h2 {
    margin-bottom: .5em;
    transition-duration: 300ms;
    display: inline-block;
}

body div.project-title h2 #left_chevron_icon {
    stroke: #ffffff;
    stroke-width: 140px;
    margin: 0;
    vertical-align: baseline;
    width: 36px;
    height: 36px;
    margin-right: 0.4em;

}

.snap-page-header {
    background-size: cover;
    background-position: center;
    height: 100%;
}

.project-design-tags {
    position: absolute;
    bottom: 10vh;
    transform: translateY(100%);
    padding-top: 1.4em;
    left: 6vw;
}

.project-design-tags .design-tag {
    margin: 0 .5em;

}



/*====================================================================
DESIGN PROJECTS BASIC STYLES
====================================================================*/

.snap-page h1.page-title-large-image-1,
.snap-page h1.page-title-large-image-2,
.snap-page h1.page-title-large-image,
.snap-page h1.page-title-large-image-vert-1,
.snap-page h1.page-title-large-image-vert-2,
.snap-page h1.page-title-two-image-grid,
.snap-page h1.page-title-kauri-banners-1,
.snap-page h1.page-title-kauri-banners-2,
.snap-page h1.page-title-four-posters-grid {
    position: absolute;
    margin: 0;
    font-weight: 900;
    color: #D8D8D8;
    text-transform: uppercase;
    /*    z-index: 500;*/
}

.snap-page h1.page-title-large-image,
.snap-page h1.page-title-large-image-1 {
    font-size: 10em;
    writing-mode: vertical-lr;
    text-align: center;
    transform: rotateZ(180deg);
    height: 100%;
    left: 3vw;
}

.snap-page h1.page-title-large-image-2 {
    font-size: 10em;
    writing-mode: vertical-lr;
    text-align: center;
    height: 100%;
    right: 3vw;
}

.snap-page h1.page-title-large-image-vert-1 {
    font-size: 10em;
    writing-mode: vertical-lr;
    text-align: center;
    transform: rotate(180deg);
    left: 15vw;
    height: 100%
}

.snap-page h1.page-title-large-image-vert-2 {
    font-size: 10em;
    writing-mode: vertical-lr;
    text-align: center;
    right: 15vw;
    height: 100%;
}

.snap-page h1.page-title-two-image-grid {
    font-size: 10em;
    text-align: center;
    bottom: 5vh;
    left: 6vw;
}

.snap-page h1.page-title-kauri-banners-1 {
    font-size: 7em;
    bottom: 5vh;
    text-align: right;
    width: 50%;
    right: 51%;
}


.snap-page h1.page-title-kauri-banners-2 {
    font-size: 7em;
    bottom: 5vh;
    text-align: left;
    width: 50%;
    left: 51%;
}

.snap-page h1.page-title-four-posters-grid {
    font-size: 10em;
    left: 10vw;
    top: 16vh;
    width: 100%;
}


/*
============================================
BASIC IMAGE
NOTE: 
    * apply class to image
============================================
*/

.design-project-basic-img {
    position: relative;
    width: 100%;
    margin-top: 40vh;
    transform: translateY(-50%);
}

div.design-project-basic-img {
    height: fit-content;
}

.basic-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
============================================
LARGE IMAGE
NOTE: 
    * apply class to the child of ".snap-page"
    * img tag does NOT require div wrapper
============================================
*/

.design-project-large-img {
    /*    display: block;*/
    overflow: visible;
    position: relative;
}

.design-project-large-img > div:first-child {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    position: absolute
}

.design-project-large-img > div:first-child > img {
    width: 100%;
}

/*
============================================
LARGE VERTICAL IMAGE
NOTE: 
    * apply class to the child of ".snap-page"
    * img tag does NOT require div wrapper
============================================
*/

.design-project-large-vert-img {
    display: flex;
    justify-content: center;
    overflow: visible;
    position: relative;
}

.design-project-large-vert-img img {
    height: 100%;
}

.large-vert-img {
    height: 100%;
}

/*
============================================
FOUR IMAGE GRID
NOTE:     
    * apply class to the child of ".snap-page"
    * Place all images in unclassed empty divs
        (div.snap-page>div*4>img)
============================================
*/

.design-project-four-image-grid {
    display: grid;
    grid-template-columns: calc(50% - 1em) calc(50% - 1em);
    grid-template-rows: calc(50% - 1em) calc(50% - 1em);
    grid-gap: 2em;
    overflow: hidden;
}

.design-project-four-image-grid > div {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.design-project-four-image-grid img {
    height: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
}

/*
============================================
TWO IMAGE GRID
NOTE:     
    * apply class to the child of ".snap-page"
    * Place all images in unclassed empty divs
        (div.snap-page>div*2>img)
============================================
*/

.design-project-two-image-grid {
    display: grid;
    grid-template-columns: calc(50% - 1em) calc(50% - 1em);
    grid-gap: 2em;
    overflow: hidden;
}



.design-project-two-image-grid div {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.design-project-two-image-grid img {
    height: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
}

.venchi-page.design-project-two-image-grid {
    overflow: visible;
}

.venchi-page.design-project-two-image-grid div {
    overflow: visible;
}



/*====================================================================
UX PROJECTS FOOTER
====================================================================*/

.snap-footer {
    height: auto;
    padding: 1em 0;
    background: linear-gradient(0deg, rgba(90, 90, 90, 1) 0%, rgba(75, 75, 75, 1) 66%, rgba(60, 60, 60, 1) 100%);
    width: 100vw;
    /*    height: 10em;*/
    scroll-snap-align: end;
}

.snap-footer-grid {
    width: 80vw;
    margin: auto 10vw;
    display: grid;
    grid-gap: 1em;
    grid-template-rows: 1fr auto;
    grid-template-columns: repeat(3, 1fr);
}

.snap-footer h3 {
    font-weight: 600;
    font-size: 1em;
    text-align: center;
    text-transform: uppercase;
    width: fit-content;
    margin: 1.2em auto;
    padding: .5em;
    border-radius: .5em;
    transition-duration: 300ms;
}

.snap-footer-credits {
    grid-column: 1/4;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 2em;
    /*    max-width: 600px;*/
    margin: auto;
}

.snap-footer-credits h3,
.snap-footer-credits p {
    color: #ccc;

    margin: .4em 0;
    padding: 0;

}

.snap-footer-credits h3 {
    text-align: right;
}

.snap-footer-credits p {
    text-align: left;
}

.snap-footer #left_chevron_icon,
.snap-footer #right_chevron_icon {
    stroke: #919191;
    width: 20px;
    height: 20px;
    stroke-width: 120px;
    margin: 0;
    vertical-align: text-bottom;
}

.snap-footer .mobile {
    display: none;
}




/*====================================================================
SOCRATIC
====================================================================*/

.socratic-title-page {
    /*    background-image: url(../img/ux_design/socratic/socratic_header.png);*/
}

.socratic-page-2 img {
    height: 100%;
}

.socratic-page-6 img {
    width: 100%;
}

.socratic-page-7 {
    height: 100%;
}

.socratic-page-7 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/*====================================================================
KAURI LOUNGE
====================================================================*/

.kauri-lounge-title-page {
    /*    background-image: url(../img/ux_design/kauri_lounge/00_header_image.jpg);*/
}

.kauri-lounge-page-2 img {
    width: 100%;
    margin-bottom: 10vh;
    margin-top: auto;
    transition-duration: 300ms;
    transform-origin: bottom;
    box-sizing: border-box;
}

.kauri-lounge-page-2 {
    grid-template-columns: repeat(8, auto);
    grid-column-gap: .5em;
    width: 90vw;
    height: 70%;
    margin-top: 20vh;
}

/*FROM CONCEPT TO EXECUTION PAGE*/

.kauri-lounge-page-3 {
    width: 30vw;
    position: absolute;
    bottom: 0;
}


/*TEXT*/
.kauri-lounge-page-3-line-wrapper {
    display: grid;
    position: absolute;
    width: 90vw;
    height: 90vh;
    margin-top: 5vh;
    margin-left: 5vw;
}

.kauri-lounge-page-3-text {
    writing-mode: vertical-rl;
    width: fit-content;
    text-align: center;
    color: #919191;
}

#kauri-lounge-page-3-text-1 {
    grid-column: 1;
    grid-row: 2;
    margin-left: -1.5em;
}

#kauri-lounge-page-3-text-2 {
    grid-column: 8;
    grid-row: 5;
    margin-right: -2em;
    width: auto;
}

/*LINE*/
.kauri-lounge-page-3-line {
    width: 100%;
    height: 100%;
}

#kauri-lounge-page-3-line-1 {
    grid-column: 1;
    grid-row: 3;
    border-left: 1px solid #919191;
    border-bottom: 1px solid #919191;
}

#kauri-lounge-page-3-line-2 {
    grid-column: 2 / 8;
    grid-row: 3;
    border-bottom: 1px solid #919191;
}

#kauri-lounge-page-3-line-3 {
    grid-column: 8;
    grid-row: 4;
    border-top: 1px solid #919191;
    border-right: 1px solid #919191;
}

.kauri-lounge-page-3-image-wrapper {
    display: grid;
    position: absolute;
    width: 80vw;
    height: 80vh;
    margin-left: 10vw;
    margin-top: 10vh;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 1em;

}


.kauri-lounge-page-3-image-wrapper div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition-duration: 300ms
}

.kauri-text-banner-wrapper {
    max-width: 1000px;
    position: absolute;
    margin-left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 100%;
    top: 5vh;
    /*    margin: auto;*/
}

.kauri-banners-text {
    width: 400px;
    /*    position: absolute;*/
    top: ;
    left: 5vw;
}

#kauri-lounge-page-3-image-1 {
    background-image: url(../img/ux_design/kauri_lounge/10_exhibition_sketch.jpg);
    grid-column: 1/3;
    grid-row: 1/3;

}

#kauri-lounge-page-3-image-2 {
    background-image: url(../img/ux_design/kauri_lounge/11_prototyping.jpg);
    grid-column: 3/5;
    grid-row: 2/4;
}

#kauri-lounge-page-3-image-3 {
    background-image: url(../img/ux_design/kauri_lounge/12_prototyping_tree.jpg);
    grid-column: 5/7;
    grid-row: 1/3;
}

#kauri-lounge-page-3-image-4 {
    background-image: url(../img/ux_design/kauri_lounge/13_building_the_exhibition.jpg);
    grid-column: 6/8;
    grid-row: 3/5;
}

#kauri-lounge-page-3-image-5 {
    background-image: url(../img/ux_design/kauri_lounge/14_built_exhibition.jpg);
    grid-column: 8/10;
    grid-row: 4/6;
}

.kauri-lounge-page-3 img {
    height: 100%;
    margin-right: auto;
    margin-left: 0;
}



img.best-awards-sticker {
    width: 150px;
    height: auto;
    position: absolute;
    top: -75px;
    right: -75px;
}


.kauri-lounge-page-7 img {
    width: 80%;
    margin: auto 10%;
    /*    margin-top: -20vh;*/
}

/*====================================================================
ANEMOI ENERGY
====================================================================*/


.anemoi-title-page {
    /*    background-image: url(../img/ux_design/anemoi/00_anemoi_header.png);*/
}


.anemoi-page-1 .project-text-grid-wrapper {
    position: absolute;
    left: 50%;

}

.anemoi-page-1 img {
    height: 100%;
    position: absolute;
    /*    right: 10vw;*/
    right: 40%;
}


.anemoi-page-3-tablets-grid {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 10vh;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.anemoi-page-3-tablets-grid img {
    width: 100%;
    transform: scale(1.4);
    transform-origin: top;
}

.anemoi-page-3-tablets-grid img:nth-child(2) {
    margin-top: 10vh;
}

.anemoi-page-3 .project-text-wrapper {

    position: absolute;
    width: 50%;
    bottom: 0;
    transform: translateY(0);
    padding-left: 0;
}



.anemoi-page-4 img {
    width: 100%;
    margin-top: 25vh;
}

.anemoi-page-5 img {
    width: 80%;
    margin: 50vh 10%;
    transform: translateY(-50%);
}


/*====================================================================
MINI MEMBERS
====================================================================*/



.mini-title-page {
    /*    background-image: url(../img/ux_design/mini_members/00_mini_header_image.png);*/
}


.mini-page-2 img {
    height: 100%;
    margin-right: -50vw;
}

.mini-page-3 img {
    height: 100%;
    margin-right: auto;
    margin-left: 0;
}

.mini-card-grid {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - .5em));
    grid-column-gap: 1em;
}

.mini-card-grid img {
    padding: 0;
    height: auto;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, .15)
}

.mini-page-4 {
    display: block;
}

.mini-page-4 img {
    /*    height: 60%;*/
    margin-top: 20%;
    display: grid;
}

.mini-page-4 .project-text-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 0%;
    padding-right: 40%;
    margin-top: 0;
    min-width: 300px;
    transform: translateY(0);

}

.mini-mockup-grid {
    position: absolute;
    bottom: 25vh;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.mini-mockup-grid img:nth-child(even) {
    margin-top: 10%;
    width: 100%;
}

.mini-mockup-grid img:nth-child(odd) {
    margin-top: 50%;
    width: 100%;
}

.mini-page-5 div {
    background-image: url(../img/ux_design/mini_members/07_mini_logo.jpg);
    background-size: cover;
    background-position: center;
    width: 60vw;
    max-width: 800px;
    height: 60vh;
    margin: 20vh auto;
}

/*====================================================================
RETROSPECTION
====================================================================*/

.retrospection-title-page {
    /*    background-image: url(../img/ux_design/retrospection/Magazine_Mockup_2.png);*/
    background-color: #333;
}





/*====================================================================
DYSPHORIA
====================================================================*/


.dysphoria-title-page {
    /*    background-image: url(../img/ux_design/dysphoria/01_dysphoria_header_image.png);*/
    background-color: #333;
}

.dysphoria-page img {
    height: 50%;
    object-fit: cover;
}

.dysphoria-page-3,
.dysphoria-page-7 {
    display: block;
    max-width: none;
    position: relative;
    width: inherit;
}

.four-posters-grid {
    display: grid;
    position: absolute;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2em;
    width: 80vw;
    max-width: 1000px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%)translateY(-50%);
}

.four-posters-grid > div {
    width: 100%;
    margin: auto;
    position: relative;

}

.four-posters-grid div img {
    width: 100%;
    /*    transform-origin: center;*/
    /*    transition-duration: 300ms;*/
}

.four-posters-grid > div > div {
    transform-origin: center;
    transition-duration: 300ms;
}


/*====================================================================
VENCHI
====================================================================*/

.venchi-title-page {
    /*    background-image: url(../img/ux_design/venchi/pink_pattern.png);*/
}

#venchi-final-poster {
    transform-origin: center;

}



/*====================================================================*/
/*========================== ABOUT ME ==========================*/
/*====================================================================*/

/*==========ABOUT ME SWITCHER==========*/
.about-contact-switcher-wrapper {
    width: 100vw;
    margin: 90px 0 50px;
    position: absolute;
    top: -160px;
    z-index: 80;
}

.about-contact-switcher {
    width: 350px;
    height: 30px;
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;
    /*    border: 2px solid #919191;*/
    background-color: #CACACA;
    grid-gap: 1px;
    border-radius: .4em;
    margin: 0px auto;
    overflow: hidden;
}

.sliding-button {
    position: absolute;
    width: calc(50% - 4px);
    height: calc(100% - 4px);
    background-color: #fff;
    border-radius: .3em;
    box-sizing: border-box;
    transition-duration: 300ms;
    box-shadow: 2px 2px 4px #00000020;
    left: 0%;
    margin: 2px;
}

.about-contact-switcher.about .sliding-button {
    left: 0;
    /*    right: auto;*/
}

.about-contact-switcher.contact .sliding-button {
    /*    right: 0;*/
    left: 50%;
}

.about-contact-switcher h5 {
    padding: .2em;
    text-align: center;
    font-weight: 600;
    box-sizing: border-box;
    transition-duration: 300ms;
    z-index: 10;
    line-height: 24px;
}

.about-contact-switcher.about #aboutMeAboutSwitch h5,
.about-contact-switcher.contact #aboutMeContactSwitch h5 {
    position: relative;
    /*    color: #fff;*/
}



.about-me-contact-wrapper.closed {
    display: none;
}

.about-me-info-wrapper.closed {
    display: none;
}

/*==========ABOUT ME WRAPPER==========*/

.about-me-wrapper {
    /*    max-width: 1000px;*/
    position: relative;
    width: 100vw;
    /*    margin: 140px 0 0 0 ;*/
}

.about-me-wrapper .page-title {
    margin-top: 160px
}

.about-me-wrapper h1 {
    text-align: left;
    margin-bottom: 0.4em;
    font-size: 3.8em;
}

.about-me-wrapper h2 {
    font-size: 3em;
    margin-bottom: 1em;
    text-align: left;
    margin-left: 0;
}

.about-me-wrapper h3 {
    margin-bottom: .1em;
    margin-top: 1em;
    margin-left: 0;

}

.about-me-wrapper p {
    margin-bottom: .1em;
    margin-top: .1em;
    color: #333;
}

.about-me-wrapper strong {
    color: #919191;
}

/*==========ABOUT ME INFO==========*/

.about-me-info-wrapper,
.about-me-contact-wrapper {
    box-sizing: border-box;
    position: relative;
    padding: 0 2em;
    width: 70%;
    margin: auto;
}

.about-me-section-wrapper,
.info-section-wrapper {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1.5px solid #ddd;
}

.about-me-section-wrapper h2,
.about-me-section-wrapper h3,
.about-me-section-wrapper p {
    max-width: 350px;
    margin: auto 0;
}


.about-me-info-wrapper h3,
.about-me-contact-wrapper h3 {
    font-weight: 600;
}

.about-me-section-wrapper h2,
.about-me-section-wrapper p {
    margin-bottom: 1em;
}



.about-me-layer-1 {
    width: 700px;
    height: 700px;
    left: -150px;
    top: -150px;
}

.about-me-layer-2 {
    width: 600px;
    height: 600px;
    left: -100px;
    top: -100px;
}

.about-me-layer-3 {
    width: 500px;
    height: 500px;
    left: -50px;
    top: -50px;
}

.about-me-layer-4 {
    width: 400px;
    height: 400px;
    left: -1px;
    top: -1px;
}


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

.information-div {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 10%;

}

#about-me-profile-photo {
    width: 70%;
    margin: auto;
    max-width: 300px;
    border-radius: 1em;
}

.information-div-graphic {
    width: 398px;
    height: 398px;
    overflow: hidden;
    position: relative;
}

.information-div-graphic img {
    position: absolute;
}

.about-me-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 20%);
    margin: 22px auto;
    grid-gap: 5%;
    width: 100%;
    box-sizing: border-box;

}

.about-me-icon-grid div {
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
    max-width: 350px;
    padding: .4em;
    border-radius: 1em;
    /*    box-shadow: 3px 3px 9px #00000020*/
}

.about-me-icon-grid img {
    width: 100%;
    margin: auto;
    display: block;
}

.about-me-icon-grid p {
    text-align: center;
}



/*==========ABOUT ME CONTACT==========*/

.my-details {
    display: grid;
    grid-template-rows: repeat(4, auto);
    grid-gap: 1em;
}

.my-details h3,
.my-details p {
    margin: 0;
}

.about-me-contact-wrapper button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: block;
}



.about-me-contact-wrapper #email_icon {
    box-sizing: border-box;
    stroke: #FFF;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    box-shadow: 8px 8px 16px #8BC6EC40;
    border-radius: 20%;
    padding: .4em;
    stroke-miterlimit: 0;
    stroke-linecap: inherit;
    stroke-width: 50px;
    width: 100%;
    height: auto;
    margin: 0px;
    transition-duration: 300ms;
}

.contact-me-email {
    width: 60%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 5em;
}

.contact-me-email h3 {
    margin-top: 0px;
    margin-bottom: 1em;
}

.contact-social-grid {
    display: grid;
    grid-template-columns: repeat(3, calc((100%/3) - (2em/3)));
    grid-gap: 1em;
}

.contact-social-grid svg#facebook_icon,
.contact-social-grid svg#linkedin_icon,
.contact-social-grid svg#instagram_icon {
    width: 100%;
    height: 100%;
    border-radius: 20%;
    transition-duration: 300ms;
    margin: 0;
}

.contact-social-grid svg#facebook_icon {
    box-shadow: 8px 8px 10px rgba(57, 86, 156, .2);
}

.contact-social-grid svg#linkedin_icon {
    box-shadow: 8px 8px 10px rgba(59, 89, 152, .2);
}

.contact-social-grid svg#instagram_icon {
    box-shadow: 8px 8px 10px rgba(81, 91, 212, .2);
}


.contact-social-grid svg#instagram_icon .cls-1 {
    fill: url(#IGGrad);
}

.contact-social-grid svg#facebook_icon .cls-1 {
    fill: url(#FBGrad);
}

.contact-social-grid svg#linkedin_icon .cls-1 {
    fill: url(#LNGrad);
    box-shadow: 5px 5px 10px #8BC6EC20;

}

.contact-social-grid svg#facebook_icon .cls-2,
.contact-social-grid svg#linkedin_icon .cls-2,
.contact-social-grid svg#instagram_icon .cls-2 {
    fill: #FFF;
}



.contact-me-email div:nth-child(1) {
    max-width: 125px;
    margin: auto;
}

.contact-me-email div:nth-child(2) {
    max-width: 375px;
    margin: auto;
}


.about-me-files {
    margin-top: 10%;
    margin-bottom: 10%;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2em;
}


.about-me-files h2 {
    grid-row: 1/2;
    grid-column: 1/3;
    margin-bottom: 0;
}

.about-me-files h3 {
    text-align: center;
}

.portfolio_resume_card {
    padding: 1em;
    width: 30%;
    transition-duration: 300ms;
}

.portfolio_resume_card:nth-child(1) {
    margin-right: 0;
    margin-left: auto;

}

.portfolio_resume_card:nth-child(2) {
    margin-right: auto;
    margin-left: 0;

}

.portfolio_resume_card div {
    width: 100%;
    margin: auto;
}

.portfolio_resume_card {
    stroke: #FFF;
}

#resume_icon,
#portfolio_icon {
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    box-shadow: 8px 8px 20px #8BC6EC30;
    display: block;
    margin: auto;
    width: 100%;
    stroke-width: 50px;
    padding: 0.4em;
    border-radius: 1.4em;
    max-width: 100px;
    height: auto;
}

.conjunction-with {
    display: grid;
    width: 100%;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

.conjunction-with h2 {
    grid-row: 1/2;
    grid-column: 1/4;

}

.conjunction-with div {
    width: 80%;
    margin: auto;
    transition-duration: 300ms;
}

.conjunction-with img {
    width: 100%;
    transition-duration: 300ms;

}

.conjunction-with div {
    filter: grayscale(100);
}

.information-div .design-tag {
    height: 1.8em;
    display: inline-block;
    padding: 0 1em;
    border-radius: .9em;
    margin: .4em;
}

.information-div .design-tag h5 {
    line-height: 1.8em;
    font-size: 1em;
}


/* 
================================================================================================================================
================================================================================================================================
================================================================================================================================
   ###TABLET SIZE 
================================================================================================================================
================================================================================================================================
================================================================================================================================
*/

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

    /*====================================================================*/
    /*======================= HTML STYLES =======================*/
    /*====================================================================*/

    h1 {
        font-size: 4em;
    }

    h2 {
        font-size: 2em;
    }

    h4 {
        font-size: 1.6em;
    }

    .tablet-only {
        display: initial
    }

    /*====================================================================*/
    /*======================= SLIDING HEADER =======================*/
    /*====================================================================*/

    header {
        left: -350px;
        display: block;
        position: fixed;
        top: 0;
        width: 80vw;
        min-width: 205px;
        max-width: 350px;
        z-index: 100;
        height: 100%;
        overflow: hidden;
        box-shadow: none;
        transition-duration: 300ms;
    }

    .hamburger-menu {
        position: fixed;
        display: block;
        width: 46px;
        height: 46px;
        margin: 10px;
        border-radius: 50%;
        box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.20);
        left: 0;
    }

    #about .hamburger-menu {
        box-shadow: none;

    }

    /*    ICON COLOR: WHITE HEADER*/
    header.header-white svg,
    header.header-white .mobile-header h2,
    header.header-white .mobile-header h3 {
        stroke: #5A5A5A;
        color: #5A5A5A;
    }

    header.header-white .hamburger-menu {
        background-color: #ffffff;
    }

    /*    ICON HEADER: MEDIUM HEADER*/
    header.header-med svg,
    header.header-med .mobile-header h2,
    header.header-med .mobile-header h3 {
        stroke: #919191;
        color: #919191;
    }

    header.header-med .hamburger-menu {
        background-color: #F0F0F0;
    }

    /*    ICON COLOR: DARK HEADER*/
    header.header-dark svg,
    header.header-dark .mobile-header h2,
    header.header-dark .mobile-header h3 {
        stroke: #F0F0F0;
        color: #F0F0F0;
    }

    header.header-dark .hamburger-menu {
        background-color: #484848;
    }

    /*    HIDE ICONS*/
    header.open .hamburger-menu svg#hamburger_menu_icon,
    header .hamburger-menu svg#cross_icon {
        display: none;
    }

    /*    SHOW ICONS*/
    header .hamburger-menu svg#hamburger_menu_icon,
    header.open .hamburger-menu svg#cross_icon {
        display: block;
    }

    header.open {
        left: 0;
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
    }

    header.open .hamburger-menu {
        box-shadow: none;
        background-color: transparent;
    }

    header .mobile-header {
        display: grid;
        grid-template-rows: auto auto;
        width: 80%;
        margin: 5vh auto 0;
        padding-bottom: 2em;
        border-bottom: 1px solid #ddd;
    }



    header .mobile-header img {
        width: 40%;
        display: block;
        margin: 1em auto;
        border-radius: 25%;
        box-shadow: 6px 6px 20px rgba(10, 10, 10, 0.2)
    }

    header .mobile-header img:active {
        box-shadow: 2px 2px 10px rgba(10, 10, 10, 0.2);
        transform: scale(0.95);
    }


    header .mobile-header h2,
    header .mobile-header h3 {
        text-align: center;
        margin: 0.2em 0;
    }

    header .mobile-header-social {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: 80%;
        margin: 10% auto;
    }

    header .mobile-header-social svg#facebook_icon,
    header .mobile-header-social svg#linkedin_icon,
    header .mobile-header-social svg#instagram_icon,
    header .mobile-header-social svg#email_icon {
        width: 60%;
        margin: 0 auto;
        border-radius: 20%;
        height: 100%;
        stroke-linecap: butt;
        box-shadow: 2px 2px 6px #00000015;

    }

    /*    ==========WHITE HEADER SVG ICONS==========*/
    header.header-white .mobile-header-social svg#facebook_icon .cls-1,
    header.header-white .mobile-header-social svg#linkedin_icon .cls-1,
    header.header-white .mobile-header-social svg#instagram_icon .cls-1 {
        fill: #CACACA;
    }

    header.header-white .mobile-header-social svg#facebook_icon .cls-2,
    header.header-white .mobile-header-social svg#linkedin_icon .cls-2,
    header.header-white .mobile-header-social svg#instagram_icon .cls-2 {
        fill: #FFF;
    }

    header.header-white .mobile-header-social svg#email_icon {
        background-color: #CACACa;
        stroke: #FFF;
    }

    /*    ==========MEDIUM HEADER SVG ICONS==========*/
    header.header-med .mobile-header-social svg#facebook_icon .cls-1,
    header.header-med .mobile-header-social svg#linkedin_icon .cls-1,
    header.header-med .mobile-header-social svg#instagram_icon .cls-1 {
        fill: #AAA;
    }

    header.header-med .mobile-header-social svg#facebook_icon .cls-2,
    header.header-med .mobile-header-social svg#linkedin_icon .cls-2,
    header.header-med .mobile-header-social svg#instagram_icon .cls-2 {
        fill: #EDEDED;
    }

    header.header-med .mobile-header-social svg#email_icon {
        background-color: #AAA;
        stroke: #EDEDED;
    }

    /*    ==========DARK HEADER SVG ICONS==========*/
    header.header-dark .mobile-header-social svg#facebook_icon .cls-1,
    header.header-dark .mobile-header-social svg#linkedin_icon .cls-1,
    header.header-dark .mobile-header-social svg#instagram_icon .cls-1 {
        fill: #717171;
    }

    header.header-dark .mobile-header-social svg#facebook_icon .cls-2,
    header.header-dark .mobile-header-social svg#linkedin_icon .cls-2,
    header.header-dark .mobile-header-social svg#instagram_icon .cls-2 {
        fill: #c1c1c1;
    }

    header.header-dark .mobile-header-social svg#email_icon {
        background-color: #717171;
        stroke: #c1c1c1;
    }

    header .mobile-header-social svg#facebook_icon,
    header .mobile-header-social svg#linkedin_icon,
    header .mobile-header-social svg#instagram_icon {
        stroke-width: 0;
    }



    header .mobile-header-social button {
        border: none;
        padding: 0;
        background-color: transparent;
    }

    .header-name ul {
        margin-top: 2em;
        margin-bottom: 0;
        padding: 0;
    }

    header ul.nav-list {
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    header ul.nav-list li,
    .header-name ul li {
        padding: 0%;
    }

    header li {
        line-height: 60px;
    }

    header ul li a {
        display: grid;
        grid-template-columns: 50px auto;
    }

    header ul li a svg#home_icon,
    header ul li a svg#fine_art_icon,
    header ul li a svg#about_icon,
    header ul li a svg#design_icon,
    header ul li a svg#three_d_icon {
        display: block;
        height: 26px;
        margin: 6px;
        stroke-width: 45px;
    }

    .header-selected svg#home_icon,
    .header-selected svg#fine_art_icon,
    .header-selected svg#about_icon,
    .header-selected svg#design_icon,
    .header-selected svg#three_d_icon {
        stroke-width: 70px;
        stroke: #ffffff;
    }

    .header-white .header-selected,
    .header-med .header-selected {
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        box-shadow: 3px 3px 10px #8BC6EC30;
    }

    .header-dark .header-selected {
        background-color: #667eea;
        background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 3px 3px 10px #667eea30;
    }

    body header li.header-selected h3 {
        color: #ffffff;
    }

    .header-categories {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 2em;
        border-bottom: 1px solid #ddd;
        padding-right: 0px;
    }

    .header-name {
        width: 80%;
        margin: 0 auto;
    }

    .header-name h3,
    .header-categories h3 {
        text-transform: capitalize;
    }


    header li,
    header li h3,
    .header-name h3 {
        display: block;
    }


    header li {
        text-decoration: none;
    }

    header li:active {
        background-color: #5a5a5a;
    }

    .header-default,
    .header-selected {
        line-height: 40px;
    }

    .header-null.open {
        display: block;
        width: 100vw;
        top: 0;
        left: 0;
        z-index: 20;
        height: 100vh;
        position: fixed;

    }

    /*==========GENERAL STYLES==========*/
    .page-title {
        width: 100%;
        margin-top: 50px;
    }

    .page-title h2,
    .page-title h1 {
        text-align: center;
    }


    .design-project-large-img .openable-img {
        height: auto;
    }

    /*====================================================================*/
    /*=======================index.html=======================*/
    /*====================================================================*/

    body#index .index-snap-wrapper {
        height: 100%;
    }

    .index-text-wrapper h1 {
        font-size: 5em;
        left: 22%;
    }

    .index-blurb {
        position: absolute;
        z-index: 1;
        top: calc(60% + 15vh);
        left: 20%;
        width: 40%;

    }

    .index-hover-wrapper {
        margin: 15vh auto;
    }

    .new-tab-cover.mobile-open {
        opacity: 100%;
    }

    .new-tab-cover.mobile-open a {
        display: inherit;
    }

    .new-tab-cover a {
        display: none;
    }


    .index-snap-page .design-tag {
        display: inline-block;
    }

    #about_design_button {
        background-color: #2f3815;
        background-image: linear-gradient(135deg, #2f3815 0%, #0a1005 100%);
        box-shadow: 5px 5px 10px #2f381540;
    }

    #ux_design_button {
        background-color: #7ba2bc;
        background-image: linear-gradient(135deg, #7ba2bc 0%, #4b76a0 100%);
        box-shadow: 5px 5px 10px #4b76a040;
    }

    #three_d_design_button {
        background-color: #bbaacd;
        background-image: linear-gradient(135deg, #bbaacd 0%, #ce97af 100%);
        box-shadow: 5px 5px 10px #ce97af40;
    }

    #art_design_button {
        background-color: #5a5b5d;
        background-image: linear-gradient(135deg, #5a5b5d 0%, #313234 100%);
        box-shadow: 5px 5px 10px #31323440;
    }

    /*====================================================================*/
    /*============================ DESIGN PAGE ===========================*/
    /*====================================================================*/

    .design-grid {
        grid-template-columns: repeat(3, calc(((80vw - (2vw * 3)) / 3)));
        grid-gap: 2.4vw;
    }

    .design-blurb {
        padding: 10%;
    }




    /*====================================================================*/
    /*============================ VISUAL ART ===========================*/
    /*====================================================================*/

    .visual-art-grid h2 {
        font-size: 3em;
        margin-top: 8px;
        text-align: left;
    }

    /*====================================================================*/
    /*============================ 3D DESIGN ===========================*/
    /*====================================================================*/


    div.three-d-design-grid-wrapper {
        gap: 30px 30px;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .three-d-pop-up-preview {
        width: 90vw;
        height: 90vh;
        left: 5vw;
        top: 5vh;
        padding: 1em;
    }

    .three-d-arrows {
        position: absolute;
        top: 50%;
        transition-duration: 300ms;
    }

    #ThreeDImageSliderExit {
        z-index: 20;
        position: absolute;
        right: .5em;
        top: .3em;
        transition-duration: 300ms;
    }

    #ThreeDCaroselWrapper {
        height: 100%;
        overflow: hidden;
    }

    .three-d-carosel-cell {
        height: 100%;
        width: 100%;
        display: grid;
        overflow: hidden;
        grid-gap: .6em;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 40% 60%;
    }

    .three-d-carosel-cell div:first-child {
        grid-column: 1/3;
        grid-row: 1/2;
    }

    .three-d-carosel-cell div:first-child img {
        min-height: 100%;
    }

    .three-d-carosel-cell div:nth-child(2) {
        grid-column: 1/5;
        grid-row: 2/3;
    }

    .three-d-carosel-cell div:nth-child(2) img {
        width: 100%;
    }


    .three-d-carosel-cell-text {
        z-index: 10;
        background-color: #5A5A5A;
        color: #f0f0f0;
        box-sizing: border-box;
        padding: 1em;
        grid-column: 3/5;
        grid-row: 1/2;
    }

    .three-d-slider-image-div {
        height: 100%;
        width: 100%;
    }

    .three-d-slider-image-div img {
        height: 100%;
        min-height: 100%;
        /*        object-fit: none;*/
        /*        object-position: none;*/
    }

    .three-d-slider-image-div-only-2 {
        grid-column: 3/5;
    }

    /*====================================================================*/
    /*============================ FINE ART ===========================*/
    /*====================================================================*/

    #fineArtGridWrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;

    }


    /*FINE ART CAROSEL*/

    #fineArtCaroselWindow {
        height: 70vh;
        top: 15vh;
        /*        border-radius: 1em;*/
    }

    .fine-art-carosel-cell {
        grid-template-columns: 1.5fr 1fr;
    }

    .fine-art-carosel-cell img {
        /*        border-radius: .6em*/
    }


    /*====================================================================
    ABOUT ME
    ====================================================================*/

    .about-contact-switcher-wrapper {
        padding: 20px 0;
        margin: 0;
        box-sizing: border-box;
        top: 00px;
        position: fixed;
        background: #fff;
        box-shadow: 0px 3px 6px #00000020
    }

    .about-me-wrapper h2 {
        font-size: 2.4em;
    }

    .about-me-wrapper .page-title {
        margin-top: 100px;
    }

    .about-me-info-wrapper,
    .about-me-contact-wrapper {
        box-sizing: border-box;
        width: 100%;
    }

    .about-me-layer-1,
    .about-me-layer-2,
    .about-me-layer-3,
    .about-me-layer-4 {
        display: none;
    }


    .about-me-mobile {
        display: block;
        width: 70%;
        margin-left: 10%;
        top: 50%;
        transform: translateY(-50%);
    }


    .about-me-section-wrapper,
    .info-section-wrapper {
        box-sizing: border-box;
        box-shadow: 3px 3px 9px #00000020;
        padding: 3em;
        margin: 2em auto;
        width: 100%;

    }

    .information-div {
        width: 100%;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 2em;
        overflow: visible;
    }

    .information-div-graphic {
        width: 100%;
        height: 375px;
        margin: auto;
    }

    .about-me-icon-grid div {
        padding: 1vw;
    }

    .conjunction-with div {
        filter: none;
    }

    .contact-me-email {
        width: 100%;

    }

    .contact-me-email div:nth-child(1) {
        max-width: 115px;
        margin: auto;
    }

    .contact-me-email div:nth-child(2) {
        max-width: 350px;
        margin: auto;
    }

    .about-me-files {
        margin-bottom: 1em;
        width: 100%;
        margin: auto;
    }



    .portfolio_resume_card {
        width: 80%;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        box-shadow: 8px 8px 20px #8BC6EC30;
        border-radius: 1.4em;
        grid-template-columns: 1fr 1fr 1fr;
        padding: .4em;
        max-width: 300px;
        min-width: 230px;
    }

    .portfolio_resume_card a {
        display: grid;
        grid-template-columns: 3em auto 3em;
    }

    .portfolio_resume_card h3 {
        margin: 0;
        color: #fff;
    }

    .portfolio_resume_card:nth-child(1),
    .portfolio_resume_card:nth-child(2) {
        margin: auto;
    }

    #resume_icon,
    #portfolio_icon {
        background-color: transparent;
        background-image: none;
        box-shadow: none;
        padding-left: 1em;
    }

    .portfolio_resume_card #go_to_icon {
        padding-right: 1em;
    }

    .portfolio_resume_card #go_to_icon,
    .portfolio_resume_card #portfolio_icon,
    .portfolio_resume_card #resume_icon {
        height: 2em;
        width: 2em;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
        stroke-width: 60px;
    }




    /*====================================================================
    UX PROJECTS GENERAL STYLES
    ====================================================================*/


    .snap-wrapper {
        height: 100%;
        top: 0px;

    }

    .snap-page,
    .snap-page-header {
        height: 100%;
        top: 0px;
    }

    .socratic-page,
    .kauri-lounge-page,
    .anemoi-page,
    .chaos-page,
    .mini-page,
    .retrospection-page,
    .our-history-page,
    .dysphoria-page,
    .venchi-page,
    .rethink-page,
    .lamort-page {
        max-width: none;
    }

    .project-title {
        position: absolute;
        line-height: 3.6em;
        bottom: 18vh;
        left: 6vw;
    }

    .project-design-tags {
        bottom: 18vh;
    }

    body div.project-title h1,
    body div.project-title h2 {
        color: #f0f0f0;
        padding: .2em;
        box-shadow: 10px 10px 20px #00000030
    }

    body div.project-title h2 {
        margin-bottom: .5em;
        transition-duration: 300ms;
        display: inline-block;
    }

    body div.project-title h2 #left_chevron_icon {
        stroke: #ffffff;
        width: 24px;
        height: 24px;
    }

    /*====================================================================
    UX PAGE TITLES
    ====================================================================*/

    .snap-page h1.page-title-large-image-1,
    .snap-page h1.page-title-large-image-2,
    .snap-page h1.page-title-large-image,
    .snap-page h1.page-title-large-image-vert-1,
    .snap-page h1.page-title-large-image-vert-2,
    .snap-page h1.page-title-two-image-grid,
    .snap-page h1.page-title-kauri-banners,
    .snap-page h1.page-title-four-posters-grid {}

    .snap-page h1.page-title-large-image,
    .snap-page h1.page-title-large-image-1 {
        font-size: 10em;
        writing-mode: horizontal-tb;
        text-align: left;
        transform: none;
        height: auto;
        top: 2vh;
        left: 3vw;
    }

    .snap-page h1.page-title-large-image-2 {
        font-size: 10em;
        writing-mode: horizontal-tb;
        text-align: right;
        height: auto;
        bottom: 2vh;
        right: 3vw;
    }

    .snap-page h1.page-title-large-image-vert-1 {
        font-size: 10em;
        writing-mode: horizontal-tb;
        text-align: left;
        transform: none;
        left: 5vw;
        height: auto;
        top: 1vh;
        width: 100%;

    }

    .snap-page h1.page-title-large-image-vert-2 {
        font-size: 10em;
        writing-mode: horizontal-tb;
        text-align: right;
        right: 5vw;
        height: auto;
        bottom: 1vh;
        width: 100%;
    }

    .snap-page h1.page-title-two-image-grid {
        font-size: 7em;
        text-align: center;
        bottom: 5vh;
        left: 6vw;

    }

    .snap-page h1.page-title-kauri-banners-1,
    .snap-page h1.page-title-kauri-banners-2 {
        font-size: 4em;
    }

    .snap-page h1.page-title-four-posters-grid {
        font-size: 10em;
        left: -75vw;
        top: 0vh;
        height: 100%;
        writing-mode: vertical-lr;
        transform: rotate(180deg);
        text-align: center;
        width: 100%;
    }



    /*====================================================================
    FOUR IMAGE DIV
    ====================================================================*/
    .design-project-four-image-grid {
        height: 70%;
        margin-top: 15vh;
    }

    .design-project-large-vert-img {
        height: 60%;
        margin-top: 20vh;
    }


    /*====================================================================
    FOOTER
    ====================================================================*/

    .snap-footer {
        height: auto;
    }


    /*====================================================================
    KAURI LOUNGE
    ====================================================================*/

    .kauri-lounge-page-2 img {
        height: 100%;
        width: auto;
        margin-bottom: 0;
        margin-top: 0;
        box-sizing: border-box;
    }

    .kauri-lounge-page-2 {
        grid-template-columns: repeat(8, auto);
        width: 80vw;
        height: 50%;
        overflow-y: scroll;
        margin-left: 10vw;
        margin-top: 30vh;

    }

    .scroll-hint {
        position: absolute;
        right: 0;
        bottom: -10%;
        /*        padding: 1em;*/
    }

    .scroll-hint svg#right_chevron_icon {
        stroke: #919191;
        height: 1.4em;
        width: 1.4em;
        margin: 0;
        vertical-align: top;
    }

    .banner-fade-out {
        position: absolute;
        width: 80vw;
        height: 50%;
        top: 30vh;
        left: 10vw;
        pointer-events: none;
        background: linear-gradient(270deg, #EDEDED 0%, #EDEDED00 10%);

    }

    .kauri-text-banner-wrapper {
        max-width: 80vw;
        top: 9vh;
    }

    .kauri-lounge-page-3-image-wrapper {
        height: 60vh;
        margin-top: 20vh;
    }

    img.best-awards-sticker {
        top: calc((50% - 75px) - 25vw);
    }


    /*====================================================================
    DYSPHORIA
    ====================================================================*/



    .four-posters-grid {
        display: grid;
        grid-gap: 1em;
        position: relative;
        grid-template-columns: repeat(2, calc(50% - 0.5em));
        grid-template-rows: repeat(2, calc(50% - 0.5em));
        height: 100%;
        width: auto;
        margin: auto;
        top: 0;
        transform: none;
        max-width: 500px;
        left: 0;
    }

    .four-posters-grid > div {
        height: auto;
        width: 100%;
        margin: auto;
    }

    .four-posters-grid div:nth-child(odd) {
        margin-left: auto;
        margin-right: 0;
    }

    .four-posters-grid div:nth-child(even) {
        margin-left: 0;
        margin-right: auto;
    }

    .four-posters-grid div:nth-child(1),
    .four-posters-grid div:nth-child(2) {
        margin-top: auto;
        margin-bottom: 0;
    }

    .four-posters-grid div:nth-child(3),
    .four-posters-grid div:nth-child(4) {
        margin-top: 0;
        margin-bottom: auto;
    }

    .four-posters-grid div img {
        height: auto;
        width: 100%;
    }


    /*====================================================================
    KAURI LOUNGE
    ====================================================================*/
    .socratic-page-6 {
        height: 100%;
    }

    .socratic-page-6 img {
        height: 100%;
        object-fit: cover;
    }

}


/* 
================================================================================================================================
================================================================================================================================
================================================================================================================================
  ###SMALL TABLET SIZE 
================================================================================================================================
================================================================================================================================
================================================================================================================================
*/

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


    /*====================================================================*/
    /*======================= HTML STYLES =======================*/
    /*====================================================================*/

    p {
        font-size: 1em;
    }

    h1 {
        font-size: 3.4em;
    }

    h2 {
        font-size: 1.6em;
    }

    h4 {
        font-size: 1.2em;
    }

    /*====================================================================*/
    /*=======================index.html=======================*/
    /*====================================================================*/

    body#index div.index-snap-wrapper {
        overflow: scroll;
        height: 100vh;
        scroll-snap-type: mandatory;
        scroll-snap-points-y: repeat(100vh);
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
    }

    body div.index-snap-page {
        padding: 0;
        scroll-snap-align: center;
        margin: 0;
        height: 100vh;
        grid-gap: 3%;
        width: 100vw;
        display: grid;
        padding-top: 70px;
        box-sizing: border-box;
        grid-template-rows: 12% 30% auto
    }

    .index-text-wrapper {
        grid-row: 1/2;
        height: auto;
        top: 0;
        height: 100%;
        pointer-events: all;
    }

    .index-text-wrapper h1 {
        font-size: 3em;
        right: 10%;
        color: #5a5a5a;
        pointer-events: all;
        text-align: right;
        left: auto;
        width: 60%;
    }

    .index-blurb {
        grid-row: 3/4;
        top: 0;
        left: 10%;
        width: 80%;
    }

    .index-blurb p {
        margin: 0 0 1.2em 0;
    }


    .index-snap-page .bouncing-chevron {
        display: inherit;
        bottom: 18vh

    }

    .index-snap-page .bouncing-chevron #left_chevron_icon {
        stroke: #ccc;
    }

    .index-hover-wrapper {
        margin: 0 auto 0;
        width: 80%;
        height: 100%;
    }

    a.index-img-link {
        grid-row: 2/3;

    }

    .index-image-toolbar {
        display: none;
    }

    .index-hover-wrapper {
        display: block;
        border: none;
    }

    .index-image img {
        object-position: top;
    }


    /*====================================================================*/
    /*============================ DESIGN PAGE ===========================*/
    /*====================================================================*/

    .design-wrapper {
        width: 90vw;
    }

    .design-grid {
        grid-template-columns: repeat(2, calc((100% - 2.4vw)/2));
        grid-gap: 2.4vw;
    }

    .design-blurb {
        padding: 4%;
    }

    .design-card {
        padding: .6em;
        box-shadow: 4px 4px 10px #00000020
    }


    .design-card img {
        width: calc(100% + 1.2em);
        margin: -.6em -.6em 0 -.6em;
    }

    .design-card h4 {
        margin-top: 8px;
        font-size: 1.1em;
    }

    .design-tag:not(.clickable) h5 {
        font-size: .8em;
    }

    .design-tag:not(.clickable) {
        height: 1.4em;
        padding: 0 .5em;
        margin-bottom: .2em;
    }


    /*====================================================================*/
    /*============================ VISUAL ART ===========================*/
    /*====================================================================*/

    .visual-art-grid {
        grid-template-columns: 100%;
        grid-row-gap: 5vh;
    }

    .visual-art-grid h2 {
        font-size: 2em;
        margin-top: 8px;
        text-align: left;
    }

    /*====================================================================*/
    /*============================ 3D DESIGN ===========================*/
    /*====================================================================*/


    div.three-d-design-grid-wrapper {
        grid-gap: 1em;
        grid-template-columns: 1fr 1fr;
        width: 90vw;
    }

    .three-d-pop-up-preview {
        padding: 0.6em;
        height: calc(100% - 1.2em);
        top: 0.6em;
        width: calc(100vw - 1.2em);
        left: 0.6em;
    }

    .three-d-carosel-cell {
        grid-template-rows: calc(45% - ((48px + (1em))/2)) calc(55% - ((48px + (1em))/2)) calc(48px + (1em));
    }

    #ThreeDImageSliderExit {
        transform: translateX(-50%);
        position: absolute;
        left: 50%;
        right: auto;
        bottom: .5em;
        top: auto;
        background-color: #707070;
        border-radius: 20%;
        box-shadow: 1px 2px 3px #00000020
    }

    #ThreeDImageSliderLeft,
    #ThreeDImageSliderRight {
        position: absolute;
        bottom: .5em;
        top: auto;
        z-index: 20;
        background-color: #707070;
        border-radius: 20%;
        box-shadow: 1px 2px 3px #00000020
    }

    #ThreeDImageSliderRight {
        right: 1em;
    }

    #ThreeDImageSliderLeft {
        left: 1em
    }

    .three-d-carosel-cell-text {
        padding: .6em;
    }

    .three-d-carosel-cell-text h2 {
        margin: .2em 0;
    }

    .three-d-carosel-cell-text h3 {
        margin: .2em 0;
    }

    /*====================================================================*/
    /*============================ FINE ART ===========================*/
    /*====================================================================*/

    #fineArtCaroselGrid {
        height: calc(100% - 66px);
    }

    #fineArtGridWrapper {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: .6em;
        width: calc(100vw - 1.2em);


    }

    /*FINE ART CAROSEL*/

    #fineArtCaroselWindow {
        padding: 0.6em;
        height: calc(100% - 1.2em);
        top: 0.6em;
        width: calc(100vw - 1.2em);
        left: 0.6em;
    }

    .fine-art-carosel-cell {
        grid-template-columns: 1fr;
        grid-template-rows: 30% 60% 1fr;
        grid-gap: 1em;
    }

    .fine-art-carosel-cell .openable-img {
        /*        height: fit-content;*/
    }

    /*
    .fine-art-carosel-cell img {
        height: auto;
        width: 100%;
        overflow: hidden;
        margin-left: 50%;
        transform: translateX(-50%);
        grid-row: 2/3;
        z-index: 0;
    }
*/

    .fine-art-carosel-cell-text {
        padding: .6em;
        margin: 0;
        max-width: none;
        grid-row: 1/2;
    }

    .fine-art-carosel-cell-text h2 {
        margin: .2em 0;
        width: calc(100% - 50px);
    }

    .fine-art-carosel-cell-text h3 {
        margin: .2em 0;
    }

    .fine-art-carosel-cell .fine-art-description-wrapper {
        height: 0px;
        overflow: hidden;
        transition-duration: 300ms;
        transition-delay: 0ms
    }

    .fine-art-description-wrapper.desc-open {
        height: 300%;
        transition-delay: 200ms;
    }

    #fineArtImageSliderDescOpen #design_icon,
    #fineArtImageSliderDescClosed #about_icon {
        display: block;
        width: 2.4em;
        height: 2.4em;
        margin: 0;
    }

    #fineArtImageSliderDescOpen.desc-open {
        display: block;
    }

    #fineArtImageSliderDescClosed.desc-open {
        display: none;
    }

    #fineArtImageSliderDescOpen,
    #fineArtImageSliderDescClosed {
        z-index: 20;
        position: absolute;
        background: #5a5a5a;
        right: 1.5em;
        top: 1.5em;
        border-radius: .6em;
    }

    #fineArtImageSliderDescOpen {}

    #fineArtImageSliderDescClosed {
        display: block;
    }

    .fine-art-slider-image-div {
        position: relative;
    }

    .fine-art-slider-image-div img {
        transition-duration: 300ms;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        z-index: 0;
        height: 100%;
        transition-delay: 200ms;
    }

    .desc-open .fine-art-slider-image-div img {
        height: 0;
        transition-delay: 00ms;
    }

    .desc-open .new-tab-cover {
        opacity: 0;
    }

    #fineArtCaroselExit {
        transform: translateX(-50%);
        position: absolute;
        left: 50%;
        right: auto;
        bottom: 1em;
        top: auto;
        background-color: #707070;
        border-radius: 20%;
        box-shadow: 1px 2px 3px #00000020
    }

    .fine-art-arrows {
        position: absolute;
        bottom: 1em;
        top: auto;
    }

    #fineArtCaroselLeft,
    #fineArtCaroselRight {
        z-index: 20;
        background-color: #707070;
        border-radius: 20%;
        box-shadow: 1px 2px 3px #00000020
    }

    #fineArtCaroselRight {
        right: 1em;
    }

    #fineArtCaroselLeft {
        left: 1em
    }



    /*====================================================================
    ABOUT ME
    ====================================================================*/

    #about{
        background-color: #fafafa;
    }
    
    .about-me-wrapper h2 {
        font-size: 1.8em;
    }

    .about-me-info-wrapper,
    .about-me-contact-wrapper {
        box-sizing: border-box;
        width: 90%;
        padding: 0;
    }

    .about-me-section-wrapper h2,
    .about-me-section-wrapper h3,
    .about-me-section-wrapper p {
        margin: 0 auto 1em;
    }

    .about-me-mobile {
        width: 100%;
        height: auto;
        margin-left: 0;
    }

    .about-me-section-wrapper,
    .info-section-wrapper {
        box-sizing: border-box;
        box-shadow: 3px 3px 9px #00000020;
        padding: 2em;
        margin: 1.4em auto;
        width: 100%;
        max-width: 450px;
        border-radius: 2em;
        background-color: #FFFFFF;

    }

    .information-div {
        grid-template-rows: 1fr auto;
        grid-template-columns: none;
        grid-gap: 2em;
        overflow: visible
    }

    .information-div-graphic {
        width: 70%;
        margin: auto;
        height: 55vw;
        grid-row: 1/2;
    }

    #about-me-profile-photo {
        height: auto;
        width: 70%;
        grid-row: 1/2;
    }

    .about-me-icon-grid {
        width: 80%;
        max-width: 350px;
    }


    .about-me-icon-grid div {
        box-shadow: none;
    }

    .my-details h3,
    .my-details p {
        margin: 0;
    }

    .my-details {
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-columns: 100%;
        grid-gap: 1em;
    }

    .contact-me-email {
        grid-template-columns: 100%;
        grid-template-rows: 1fr 1fr;
        grid-gap: 2em;
        max-width: 350px;
        margin: auto;
    }

    .contact-me-email div:nth-child(1) {
        width: 33%;
    }

    .contact-me-email div:nth-child(1) h3 {
        min-width: 100px;
    }

    .contact-me-email div:nth-child(1),
    .contact-me-email div:nth-child(2) {
        margin: auto;
    }

    .about-me-files {
        grid-template-columns: none;
        width: 100%;
        margin: 2em 0;
        grid-gap: 2em;
        grid-template-rows: 1fr 1fr;
    }

    .portfolio_resume_card {
        box-sizing: border-box;
        width: 100%;
        box-shadow: none;
    }

    #resume_icon,
    #portfolio_icon {
        display: block;
        margin: auto;
        /*        box-shadow: 4px 4px 8px #00000020;*/
        border-radius: 1em;
        max-width: 70px;
        padding: 0.3em;
    }

    .conjunction-with {
        grid-template-rows: auto 1fr 1fr 1fr;
        grid-template-columns: 100%;
    }

    .conjunction-with h2 {
        grid-column: 1/2;
    }

    .conjunction-with div {
        width: 80%;
        padding: 1em;
        height: 100%;
    }

    .desktop-br {
        display: none;
    }


    /*====================================================================
    UX PROJECTS GENERAL STYLES
    ====================================================================*/

    .snap-wrapper {
        width: 100vw;
        overflow: hidden;
        height: auto;
        position: relative;
        scroll-snap-type: none;
        scroll-snap-points-y: none;
        scroll-snap-type: none;
        -webkit-overflow-scrolling: none;

    }

    .snap-page-header {
        height: auto;
        overflow: visible;
        position: relative;
        /*        margin-bottom: 20vh;*/
        display: grid;
        grid-template-rows: 50vh auto auto;

    }

    .snap-page {
        scroll-snap-align: none;
        padding: 16% 0;
        height: auto;
        top: 0px;
        width: calc(100% - (24px*2));
        margin: 24px;
        overflow: visible;
        position: relative;
        border-top: 0.5px solid #ccc;
    }

    .project-text-wrapper {
        margin: auto;
        max-width: 300px;
        transform: translateY(0);
    }

    .project-text-grid-wrapper.right {
        margin: auto;
    }

    .project-text-grid-wrapper.left {
        margin: auto;
    }

    .socratic-page,
    .kauri-lounge-page,
    .anemoi-page,
    .chaos-page,
    .mini-page,
    .retrospection-page,
    .our-history-page,
    .dysphoria-page,
    .venchi-page,
    .rethink-page,
    .lamort-page {
        margin: auto;
        grid-template-columns: 100%;
        grid-template-rows: 1fr 1fr;
        box-sizing: border-box;
        width: 100%;
        display: block;
    }

    .project-title {
        position: relative;
        margin: 0;
        bottom: 0;
        left: 0;
        padding: 1em;
        grid-row: 3/4;
        background-color: #EDEDED;
        width: 100%;
    }

    body div.project-title h1,
    body div.project-title h2 {
        color: #919191;
        padding: 0;
        box-shadow: none;
    }

    body div.project-title h1 {
        font-size: 2.6em;
    }

    body div.project-title h2 {
        font-size: 1.8em;
        line-height: 1.2em;
        border-radius: .8em;
        padding: 0.2em 0.4em;
        box-shadow: 3px 3px 10px #00000020;
    }

    .project-design-tags {
        bottom: 1em;
        transform: none;
        grid-row: 2/3;
        left: 1em;
        padding-top: 0;
    }

    .snap-page-header .design-tag {
        height: 1.8em;
        padding: 0 1em;
        margin: .2em;

    }

    .snap-page-header .design-tag h5 {
        font-size: 1em;
    }

    .retrospection-title-page .project-title h1,
    .socratic-title-page .project-title h1,
    .kauri-lounge-title-page .project-title h1,
    .anemoi-title-page .project-title h1,
    .mini-title-page .project-title h1,
    .dysphoria-title-page .project-title h1,
    .venchi-title-page .project-title h1,
    .lamort-title-page .project-title h1 {
        background-color: transparent;
    }

    .retrospection-title-page .project-title h2,
    .socratic-title-page .project-title h2,
    .kauri-lounge-title-page .project-title h2,
    .anemoi-title-page .project-title h2,
    .mini-title-page .project-title h2,
    .dysphoria-title-page .project-title h2,
    .venchi-title-page .project-title h2,
    .lamort-title-page .project-title h2 {
        background-color: #FFFFFF;
    }

    body div.project-title h2 #left_chevron_icon {
        stroke: #919191;
        width: 20px;
        height: 20px;
    }


    /*IMAGES WITH PADDING BELOW:*/

    .anemoi-page-1 > img,
    .anemoi-page-2 > img,
    .anemoi-page-4 > img,
    .anemoi-page-3-tablets-grid > img:nth-child(2),
    .mini-card-grid,
    .mini-page-2 > img,
    .mini-mockup-grid,
    .venchi-page-1 > img,
    .lamort-page-1 > img,
    .lamort-page-3 > img {
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 10%;
    }


    .bouncing-chevron {
        display: none
    }




    /*====================================================================
    UX PAGE TITLES
    ====================================================================*/

    .snap-page h1.page-title-large-image-1,
    .snap-page h1.page-title-large-image-2,
    .snap-page h1.page-title-large-image,
    .snap-page h1.page-title-large-image-vert-1,
    .snap-page h1.page-title-large-image-vert-2,
    .snap-page h1.page-title-two-image-grid,
    .snap-page h1.page-title-kauri-banners-1,
    .snap-page h1.page-title-kauri-banners-2,
    .snap-page h1.page-title-four-posters-grid {
        position: relative;
        margin: 0;
        /*        margin-left: 4%;*/
        font-size: 5em;
        transform: none;
        text-align: left;
        width: auto;
        height: auto;
        left: auto;
        top: auto;
        bottom: auto;
        right: auto;
        writing-mode: horizontal-tb;
    }

    .snap-page h1.page-title-large-image-1,
    .snap-page h1.page-title-large-image-vert-1,
    .snap-page h1.page-title-kauri-banners-1 {
        line-height: .4em;
    }

    /*====================================================================
    DESIGN PROJECTS BASIC STYLES
    ====================================================================*/

    /*============================================
    BASIC IMAGE
    ============================================*/

    .design-project-basic-img {
        height: auto;
        width: 90%;
        margin: auto;
        transform: none;
        padding: 10% 0;
        display: block;
    }

    /*============================================
    LARGE IMAGE
    ============================================*/

    .design-project-large-img {
        display: block;
        overflow: visible;
        position: relative;
        width: 90%;
        margin: auto;
    }

    .design-project-large-img > div:first-child {
        top: 0;
        display: block;
        width: 100%;
        transform: none;
        position: relative;
    }



    /*============================================
    LARGE VERTICAL IMAGE
    ============================================*/

    .design-project-large-vert-img {
        /*        display: flex;*/
        /*        justify-content: center;*/
        /*        overflow: visible;*/
        position: relative;
        max-width: 500px;
    }

    .design-project-large-vert-img img {
        width: 100%;
        height: auto;
    }


    /*============================================
    FOUR IMAGE GRID
    ============================================*/

    .design-project-four-image-grid {
        display: grid;
        width: 90%;
        grid-template-columns: 100%;
        grid-template-rows: repeat(4, calc(25% - 24px));
        grid-gap: 24px;
        overflow: hidden;
    }

    .design-project-four-image-grid > div {
        height: auto;
        width: 100%;
        overflow: hidden;
    }

    .design-project-four-image-grid img {
        height: auto;
        width: 100%;
        object-fit: cover;
        height: 100%;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    /*============================================
    TWO IMAGE GRID
    ============================================*/

    .design-project-two-image-grid {
        display: grid;
        grid-template-columns: calc(50% - 1em) calc(50% - 1em);
        grid-template-rows: 100%;
        grid-gap: 2em;
        overflow: hidden;
    }

    .design-project-two-image-grid div {
        height: auto;
        width: 100%;
        overflow: hidden;
    }

    .design-project-two-image-grid img {
        width: 100%;
        height: auto;
        margin-left: 50%;
        transform: translateX(-50%);
    }







    /*====================================================================
    UX PROJECTS FOOTER
    ====================================================================*/

    .snap-footer {
        /*    height: 200px;*/
        /*        background: linear-gradient(0deg, rgba(90, 90, 90, 1) 0%, rgba(75, 75, 75, 1) 66%, rgba(60, 60, 60, 1) 100%);*/
        width: 100vw;
        /*        height: 80px;*/
        padding: 0;
        scroll-snap-align: end;
        margin: 0;
    }

    .snap-footer-grid {
        width: 90vw;
        padding-top: 5px;
        padding-bottom: 1em;
        /*    height: 100%;*/
        margin: auto 5vw;
        display: grid;
        /*        grid-template-columns: 30% 40% 30%;*/
    }

    .snap-footer-grid div:first-child,
    .snap-footer-grid div:last-child {
        border: none;
    }

    .snap-footer h3 {
        width: calc(100% - 10px);
        font-weight: 600;
        font-size: .8em;
        text-align: center;
        text-transform: uppercase;
        /*    display: inline-block;*/
        margin: 1.2em 2em;
        padding: 5px;
        line-height: 20px;
        border-radius: 5px;
        transition-duration: 300ms;
    }

    .snap-footer-credits {
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        padding-top: 1em;
        padding-bottom: 1em;
        width: 80%;
    }

    .snap-footer .snap-footer-credits h3 {

        font-weight: 800;
        font-size: 1em;
        text-align: left;
        text-transform: uppercase;
        /*    display: inline-block;*/
        margin: .4em 0;
        width: fit-content;
        padding: 0;
        line-height: auto;
    }

    .snap-footer .snap-footer-credits p {
        font-size: .8em;
    }

    .snap-footer .snap-footer-credits strong {
        font-weight: 600;
    }

    .snap-footer .mobile,
    .snap-footer .mobile#right_chevron_icon,
    .snap-footer .mobile#left_chevron_icon {
        display: block;
        margin: auto;
        padding: 5px;
        border-radius: 5px;
        color: #aaa;
        stroke: #aaa;
        background-color: #6a6a6a;
        box-shadow: 4px 4px 16px #00000020
    }

    .snap-footer .desktop {
        display: none;
    }




    /*====================================================================
    SOCRATIC
    ====================================================================*/

    .socratic-page-2 img {
        width: 200%;

        margin-left: -50%;

    }

    .socratic-page-6 img {
        width: 150%;
        transform: translateX(-20%);
    }

    /*====================================================================
    KAURI LOUNGE
    ====================================================================*/


    .kauri-lounge-page-2 img {
        width: auto;
        height: 100%;
        margin-bottom: 0;
        margin-top: 0;
        box-sizing: border-box;
    }

    .kauri-lounge-page-2 {
        position: absolute;
        grid-template-columns: repeat(8, auto);
        grid-template-rows: 100%;
        width: 100%;
        height: 60vh;
        display: grid;
        overflow-y: scroll;
        margin-left: 0;
        background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .0) 20%);
    }

    .snap-page-banner {
        height: calc(450px + 50vh);
    }

    .banner-fade-out {
        position: absolute;
        width: 100%;
        height: 60vh;
        top: auto;
        left: 0vw;
        pointer-events: none;
        background: linear-gradient(270deg, #EDEDED 0%, #EDEDED00 10%);

    }

    .kauri-text-banner-wrapper {
        position: relative;
        max-width: 300px;
        margin: auto;
        transform: none;
        display: block;
        top: 0;

    }

    .kauri-banners-text {
        width: auto;
        left: 0;
    }

    .kauri-lounge-page-3-line-wrapper {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
        margin-top: 0;
        margin-left: 0;

    }


    #kauri-lounge-page-3-line-1,
    #kauri-lounge-page-3-line-2,
    #kauri-lounge-page-3-line-3 {
        display: none;
    }

    #kauri-lounge-page-3-text-1,
    #kauri-lounge-page-3-text-2,
    .kauri-lounge-page-3-text {
        writing-mode: initial;
        margin: 0;
        width: auto;
        text-align: left;
        font-size: 2em;
        text-transform: capitalize;
        font-weight: 700;
    }

    #kauri-lounge-page-3-text-1 {
        text-align: left;
    }

    #kauri-lounge-page-3-text-2 {
        text-align: right;
    }

    .kauri-lounge-page-3-image-wrapper {
        /*        display: grid;*/
        position: relative;
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-top: 0;
        grid-template-columns: 100%;
        grid-template-rows: repeat(5, 1fr);
        gap: 1em;
    }

    .kauri-lounge-page-3 {
        width: auto;
        position: relative;
        bottom: 0;
    }

    .kauri-lounge-page-3-image-wrapper div,
    #kauri-lounge-page-3-image-1,
    #kauri-lounge-page-3-image-2,
    #kauri-lounge-page-3-image-3,
    #kauri-lounge-page-3-image-4,
    #kauri-lounge-page-3-image-5 {
        height: 40vw;
        grid-row: auto;
        grid-column: auto;
    }

    .kauri-lounge-page-6 div {
        position: relative;
        width: 100%;
        height: 60vw;
        top: 0;
        left: 0;
    }

    .kauri-lounge-page-6 img.best-awards-sticker {
        width: 150px;
        top: 60vw;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        border-radius: 50%;
        box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2);
    }



    /*====================================================================
    ANEMOI ENERGY
    ====================================================================*/

    .anemoi-page-1 img {
        height: auto;
        width: 150%;
        transform: translateX(-10%);
        position: relative;
        right: 0;
    }

    .anemoi-page-1 .project-text-grid-wrapper {
        position: relative;
        left: 0;
    }

    .anemoi-page-3-tablets-grid {
        width: 100%;
        height: 100%;
        position: relative;
        top: 0vh;
        right: 0;
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 100%;
    }

    .anemoi-page-3-tablets-grid img {
        width: 80%;
        margin: auto;
        transform: none;
    }

    .anemoi-page-3 .project-text-wrapper {
        position: relative;
        width: 100%;
        bottom: 0;
        transform: translateY(0);
        padding-left: 0;
    }

    .anemoi-page-5 img {
        width: 80%;
        margin: 0 10%;
        transform: none;
    }

    /*====================================================================
    MINI MEMBERS
    ====================================================================*/

    .mini-page-2 img {
        height: auto;
        width: 160%;
        transform: translateX(-25%);
    }

    .mini-card-grid img {
        height: auto;
        width: 100%;
        margin-top: 0%;
        box-shadow: 10px 10px 30px rgba(0, 0, 0, .15);
    }

    .mini-card-grid img:nth-child(1) {
        margin-left: auto;
        margin-right: 0;
    }

    .mini-card-grid img:nth-child(2) {
        margin-left: 0;
        margin-right: auto;
    }


    .mini-mockup-grid {
        position: relative;
        bottom: 0vh;
        grid-template-columns: repeat(4, 1fr);
    }

    .mini-page-4 .project-text-wrapper {
        position: relative;
        padding-right: 0%;
    }

    .mini-page-5 div {
        width: 100%;
        height: 80vw;
        margin: 0 auto;
    }


    /*====================================================================
    RETROSPECTION
    ====================================================================*/


    /*====================================================================
    DYSPHORIA
    ====================================================================*/

    .dysphoria-page img {
        height: 50vw;
        object-fit: cover;
        padding: 0;
        margin: 10% auto;
        /*        box-shadow: 3px 3px 15px rgba(0,0,0,0.2)*/
    }

    .four-posters-grid img {
        margin: auto;
    }



    /*====================================================================
    VENCHI
    ====================================================================*/

    .venchi-page-1 img {
        width: 50%;
    }





}

/* 
================================================================================================================================
================================================================================================================================
================================================================================================================================
   ###MOBILE SIZE 
================================================================================================================================
================================================================================================================================
================================================================================================================================
*/

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

    /*====================================================================*/
    /*======================= HTML STYLES =======================*/
    /*====================================================================*/

    /*====================================================================*/
    /*======================= index.html =======================*/
    /*====================================================================*/

    /*====================================================================*/
    /*============================ DESIGN PAGE ===========================*/
    /*====================================================================*/

    /*====================================================================*/
    /*============================ VISUAL ART ===========================*/
    /*====================================================================*/

    /*====================================================================*/
    /*============================ 3D DESIGN ===========================*/
    /*====================================================================*/

    .three-d-carosel-cell {
        height: calc(100% - (.6em + 46px));
        grid-template-columns: 100%;
        grid-template-rows: calc((14%) - ((.6em*2)/3)) calc((43%) - ((.6em*2)/3)) calc((43%) - ((.6em*2)/3));
        position: relative;
    }

    .three-d-carosel-cell .three-d-description-wrapper {
        height: 0px;
        overflow: hidden;
        transition-duration: 300ms;
        transition-delay: 00ms;
    }

    .three-d-description-wrapper.desc-open {
        height: 300%;
        transition-delay: 200ms;
    }

    #ThreeDImageSliderDescOpen #design_icon,
    #ThreeDImageSliderDescClosed #about_icon {
        display: block;
        width: 2.4em;
        height: 2.4em;
        margin: 0;
    }

    #ThreeDImageSliderDescOpen.desc-open {
        display: block;
    }

    #ThreeDImageSliderDescClosed.desc-open {
        display: none;
    }

    #ThreeDImageSliderDescOpen,
    #ThreeDImageSliderDescClosed {
        z-index: 20;
        position: absolute;
        background: #5a5a5a;
        right: 1.5em;
        top: 1.5em;
        border-radius: .6em;
    }

    #ThreeDImageSliderDescOpen {}

    #ThreeDImageSliderDescClosed {
        display: block;
    }

    .three-d-carosel-cell > div:first-child {
        grid-row: 2/3;
        grid-column: 1/2;
        transition-duration: 300ms;
        transform-origin: bottom;
        bottom: 0;
        position: absolute;
    }

    .three-d-carosel-cell.desc-open > div:first-child {
        /*        transform: scaleY(0);*/
        height: 0%;

    }

    .three-d-carosel-cell.desc-open > div:first-child .mobile-open {
        display: none;
    }

    .three-d-carosel-cell div:nth-child(2) {
        grid-row: 3/4;
        grid-column: 1/2;
    }

    .three-d-carosel-cell-text {
        grid-row: 1/2;
        grid-column: 1/2;
    }

    /*====================================================================*/
    /*============================ FINE ART ===========================*/
    /*====================================================================*/






    /*====================================================================
    /*============================ ABOUT ME ===========================*/
    /*====================================================================*/

    .about-contact-switcher-wrapper {
        padding-left: 66px;
        padding-right: 20px;
    }

    .about-contact-switcher {
        width: 100%;
    }

    .about-me-icon-grid {
        width: 100%;
    }

    .contact-social-grid {
        width: 70%;
        margin: auto;
    }

    .contact-me-email div:nth-child(1) {
        width: auto;
        margin: auto;
    }

    .about-me-contact-wrapper button {
        box-shadow: none;
    }

    .contact-me-email h3 {
        text-align: center;
    }

    #about-me-profile-photo {
        width: 100%;
    }



    /*====================================================================
    DESIGN PROJECTS BASIC STYLES
    ====================================================================*/

    /*====================================================================
    UX PAGE TITLES
    ====================================================================*/

    .snap-page h1.page-title-large-image-1,
    .snap-page h1.page-title-large-image-2,
    .snap-page h1.page-title-large-image,
    .snap-page h1.page-title-large-image-vert-1,
    .snap-page h1.page-title-large-image-vert-2,
    .snap-page h1.page-title-two-image-grid,
    .snap-page h1.page-title-kauri-banners-1,
    .snap-page h1.page-title-kauri-banners-2,
    .snap-page h1.page-title-four-posters-grid {

        font-size: 3em;

    }



    /*============================================
    BASIC IMAGE
    ============================================*/

    /*============================================
    LARGE IMAGE
    ============================================*/

    /*============================================
    LARGE VERTICAL IMAGE
    ============================================*/

    /*============================================
    FOUR IMAGE GRID
    ============================================*/

    /*============================================
    TWO IMAGE GRID
    ============================================*/

    .venchi-page.design-project-two-image-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 0;
    }

    .venchi-page.design-project-two-image-grid img {
        width: 60%;
    }

    .venchi-page.design-project-two-image-grid div:first-child {
        transform: translate(-15%, 25%);
    }

    .venchi-page.design-project-two-image-grid div:last-child {
        transform: translate(15%, -25%);
    }

    /*====================================================================
    UX PROJECTS FOOTER
    ====================================================================*/

    /*====================================================================
    SOCRATIC
    ====================================================================*/

    /*====================================================================
    KAURI LOUNGE
    ====================================================================*/

    .kauri-lounge-page-3 {
        width: 80vw;
    }

    .kauri-lounge-page-6 img.best-awards-sticker {
        width: 100px;
    }

    /*====================================================================
    ANEMOI ENERGY
    ====================================================================*/

    .anemoi-page-3-tablets-grid img {
        width: 120%;
        transform: translateX(-6%);
    }

    /*====================================================================
    MINI MEMBERS
    ====================================================================*/

    /*====================================================================
    RETROSPECTION
    ====================================================================*/

    /*====================================================================
    DYSPHORIA
    ====================================================================*/

    /*====================================================================
    VENCHI
    ====================================================================*/


}

/* 
================================================================================================================================
================================================================================================================================
================================================================================================================================
   ###SMALL MOBILE SIZE 
================================================================================================================================
================================================================================================================================
================================================================================================================================
*/
@media only screen and (max-width: 300px) {

    /*====================================================================*/
    /*======================= HTML STYLES ================================*/
    /*====================================================================*/

    p {
        font-size: .8em;
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.4em;
    }

    h4 {
        font-size: 1em;
    }

    /*====================================================================*/
    /*=======================index.html===================================*/
    /*====================================================================*/

    .index-text-wrapper h1 {
        font-size: 2em;
    }

    /*====================================================================
    /*============================ ABOUT ME ===========================*/
    /*====================================================================*/

    .about-me-icon-grid {
        width: 80%;
        max-width: 200px;
        grid-template-rows: repeat(2, calc(100%/2 - 0.2em));
        grid-template-columns: repeat(2, calc(100%/2 - 0.2em));
        grid-gap: .4em;
    }


    /*====================================================================*/
    /*============================ DESIGN PAGE ===========================*/
    /*====================================================================*/
    .design-grid {
        grid-template-columns: repeat(1, calc(((80vw - (2vw * 1)) / 1)));
        grid-gap: 2.4vh;
    }

    /*====================================================================*/
    /*============================ VISUAL ART ===========================*/
    /*====================================================================*/

    .visual-art-grid {
        grid-template-columns: 100%;
        grid-row-gap: 5vh;
    }

    .visual-art-grid h2 {
        font-size: 2em;
        margin-top: 8px;
        text-align: left;
    }

    /*====================================================================*/
    /*============================ 3D DESIGN =============================*/
    /*====================================================================*/


    div.three-d-design-grid-wrapper {
        gap: 20px 20px;
        grid-template-columns: 1fr;
    }

    /*====================================================================*/
    /*============================ FINE ART ==============================*/
    /*====================================================================*/

    #fineArtGridWrapper {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

}


















/* ==========================================================================
###HOVER FUNCTIONS
========================================================================== */

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

    /*====================================================================*/
    /*======================= HEADER HOVER STYLES ========================*/
    /*====================================================================*/

    .header-default:hover {
        text-decoration: none;
        background-color: #cccccc;
        transform: scale(1.1);
    }

    header.header-dark ul a:hover {
        text-decoration-color: #f0f0f0;
    }

    /*======================================================================*/
    /*======================= index.html HOVER SYLES =======================*/
    /*======================================================================*/

    .index-hover-wrapper:hover {
        cursor: pointer;
    }

    .index-hover-wrapper:hover .index-image-toolbar {
        background-color: #bbb;
        color: #5a5a5a;
    }

    .index-hover-wrapper:hover,
    .index-hover-wrapper:hover .index-image-toolbar > div,
    .index-hover-wrapper:hover .index-image-toolbar > div:nth-child(2),
    .index-hover-wrapper:hover .index-image-toolbar > div:nth-child(2) div,
    .index-hover-wrapper:hover .index-image-toolbar > div:nth-child(3),
    .index-hover-wrapper:hover .index-image-toolbar > div:nth-child(3) div,
    .index-hover-wrapper:hover .index-image-toolbar div:nth-child(4),
    .index-hover-wrapper:hover .index-image-toolbar > div:nth-child(4) div:nth-child(1),
    .index-hover-wrapper:hover .index-image-toolbar > div:nth-child(4) div:nth-child(2) {
        border-color: #5A5A5A;
    }

    .openable-img:hover .new-tab-cover {
        opacity: 100%;
    }

    .new-tab-cover div:hover {
        transform: translateX(-50%) translateY(-50%) scale(1.1);
    }

    /*================================================================================*/
    /*============================ DESIGN PAGE HOVER SYLES ===========================*/
    /*================================================================================*/

    .design-card:hover {
        transform: scale(1.1);
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.3);
    }

    .design-card:hover #chaosPreviewImage {
        transform: scale(1.3);
    }

    /*===============================================================================*/
    /*============================ VISUAL ART HOVER SYLES ===========================*/
    /*===============================================================================*/

    .visual-art-grid img:hover {
        transform: scale(1.05);
        box-shadow: 30px 30px 50px rgba(0, 0, 0, 0.30);
    }

    .visual-art-grid img:hover ~ h2 {
        transform: scale(1.1);
        margin-top: -0.1em
    }

    /*===============================================================================*/
    /*============================ 3D DESIGN HOVER SYLES ===========================*/
    /*==============================================================================*/

    div.three-d-design-grid-wrapper img:hover {
        cursor: pointer;
        transform: scale(1.04);
        box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.40);
    }

    .three-d-arrows:hover {
        cursor: pointer;
        transform: scale(1.2);
        color: #fefefe;
    }

    #ThreeDImageSliderExit:hover {
        cursor: pointer;
        transform: scale(1.2);
        color: #fefefe;
    }

    /*=============================================================================*/
    /*============================ FINE ART HOVER SYLES ===========================*/
    /*=============================================================================*/

    .fine-art-card:hover {
        cursor: pointer;
        box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.40);
        transform: scale(1.04)
    }

    #fineArtCaroselExit:hover {
        cursor: pointer;
        transform: scale(1.2);
        color: #fefefe;
    }

    .fine-art-arrows:hover {
        cursor: pointer;
        transform: scale(1.2);
        color: #fefefe;
    }

    /*=============================================================================
    /*============================ ABOUT ME HOVER SYLES ===========================*/
    /*=============================================================================*/

    .conjunction-with div:hover {
        filter: grayscale(0);
        transform: scale(1.1);

    }

    .portfolio_resume_card:hover,
    .contact-social-grid svg:hover {
        transform: scale(1.1);
    }

    .portfolio_resume_card:hover svg {
        /*        stroke: #3d85bf;*/
    }

    .about-me-contact-wrapper svg#email_icon:hover {
        box-shadow: 6px 6px 12px #00000030;
        transform: scale(1.1);
        /*        background-color: #919191;*/

    }

    .about-me-contact-wrapper button:hover #email_icon {
        stroke: #FFF;
    }


    .contact-social-grid img:hover {
        /*        transform: scale(1.1);*/
    }

    /*====================================================================
    DESIGN PROJECTS  HOVER SYLES
    ====================================================================*/

    body div.project-title h2:hover {
        box-shadow: 16px 16px 30px #00000040;
        transform: scale(1.1);
    }

    .snap-footer-grid h3:not(.credits-title):hover {
        background-color: #CCCCCC;
    }

    .four-posters-grid > div:hover > div {
        transform-origin: center;
        transform: scale(1.1);
    }


    /*====================================================================
    KAURI LOUNGE HOVER SYLES
    ====================================================================*/

    .kauri-lounge-page-3-image-wrapper div:hover {
        transform: scale(1.2);
    }

}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
    content: " ";
    display: table;
}

.clearfix::after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {

    *,
    *::before,
    *::after {
        background: #fff !important;
        color: #000 !important;
        /* Black prints faster */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]::after {
        content: " ("attr(href) ")";
    }

    abbr[title]::after {
        content: " ("attr(title) ")";
    }

    /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}