@charset "UTF-8";

/* GENERAL STUFF */

html {
    height: 100%;
    margin: 0;
    font-size: 100%;
    scroll-behavior: smooth;
}
body {
	margin: 0;
    background-color: white;
	color: #161616;
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
	font-size: 1.1rem;
	line-height: 1.75rem;
}
button {
    display: inline-block;
    margin: .25rem .125rem;
    padding: 1rem 1.5rem .9rem 1.5rem;
    border: solid;
    border-width: 2px;
    border-radius: 4rem;
    border-color: #161616;
    background-color: rgba(255, 255, 255, 0);
    color: #161616;
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
	font-size: 1.1rem;
	line-height: 1.75rem;
    text-align: center;
    text-decoration: none;
    transition-duration: 0.1s;
    cursor: pointer;
}
button.nav {
    background-color: #161616;
    color: white;
}
button.closenav {
    font-size: 2rem;
    margin: .25rem .125rem;
    padding: .9rem 1.5rem .9rem 1.5rem;
}
button.small {
    margin: 0;
    padding: .65rem 1.25rem .75rem 1.25rem;
    border-width: 2px;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
}
button.tertiary {
    margin: 0;
    padding: .75rem 0 .65rem 0;
    border-style: solid;
    border-width: 0 0 2px 0;
    border-radius: 0;
    border-color: transparent;
    font-size: 1.1rem;
    font-weight: 400;
    transition-duration: 0.2s;
}
button.disabled {
    border-color: #B0B0B0;
    background-color: rgba(255, 255, 255, 0);
    color: #B0B0B0;
    cursor: default;
}
button:hover {
    background-color: #161616;
    color: white;
}
button.nav:hover {
    background-color: #555555;
    border-color: #555555;
}
button.tertiary:hover {
    border-style: none none solid none;
    border-width: 0 0 2px 0;
    border-color: #161616;
    background-color: transparent;
    color: #161616;
}
button.disabled:hover {
    border-color: #B0B0B0;
    background-color: rgba(255, 255, 255, 0);
    color: #B0B0B0;
}
.btn-arrow {
    vertical-align: middle;
}
.navigation {
    position: -webkit-fixed; /* Safari */
    position: fixed;
    z-index: 10;    
    top: 2rem;
    left: 2rem;
    overflow: hidden;
}
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.logo {
    max-width: 100%;
    height: auto;    
}
img.thumb {
    max-width: 100%;
    height: auto;
    padding-bottom: 1.5rem;
    transition: all .2s ease-in-out;
    filter: drop-shadow(1rem 1rem 2rem rgb(0,0,0,15%));
    cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in; 
    cursor: zoom-in;
}
img.thumb:hover {
    transform: scale(1.05);
}
.btn-icon {
    margin: 0 8px 2px 0;
    vertical-align: middle;
}
img.btn-icon-end {
    margin: 0 0 2px 8px;
    vertical-align: middle;
}
ul {
    margin:0;
    padding: 0 0 2.5rem 0;
}
ul li{
    list-style: circle;
    list-style-position: outside;
    padding: 0 0 .5rem 0;
}
a:link {
    text-decoration: underline;
    text-decoration-color: #161616;
    text-decoration-style: dotted;
    text-underline-offset: 0.4rem;
    color: #161616;
}
a:visited {
    color: #161616;
    text-decoration-color: plum;
}
a:hover {
    text-decoration-style: solid;
    text-decoration-color: black;
    text-underline-offset: 0.4rem;
}


/* FONTS */

b {
    font-weight: 800;
}
.txt-h1 {
    font-size: 5rem;
    line-height: 4.5rem;
    font-weight: 800;
}
.txt-hero {
    text-align: center;
    font-size: 7.5rem;
    line-height: 9rem;
    font-weight: 800;
}
.txt-h2 {
    font-size: 3rem;
    line-height: 4rem;
    font-weight: 800;
}
.txt-h3 {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 800;    
}
.txt-h4 {
    font-size: 1.5rem;
    line-height: 2.5rem;
    font-weight: 700;    
}
.txt-small {
    font-size: .8rem;
    line-height: 1.2rem;
}
p.full {
    padding-bottom: 2.5rem;
}
p.half {
    padding-bottom: 1rem;
}
p.project-h3 {
    margin-top: -1rem;
    padding-bottom: 3rem;
}
.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}
.covered-by-your-grace-regular {
  font-family: "Covered By Your Grace", cursive;
  font-weight: 400;
  font-style: normal;
}


/* COLOURS */

.home {
    color: #B264B2;
    font-size: 10rem;
}
#bkg-card-uxui {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(259deg 69% 94%) 0%,
        hsl(262deg 68% 94%) 16%,
        hsl(265deg 68% 94%) 24%,
        hsl(268deg 67% 94%) 30%,
        hsl(272deg 66% 94%) 35%,
        hsl(275deg 66% 94%) 40%,
        hsl(278deg 65% 95%) 45%,
        hsl(282deg 64% 95%) 50%,
        hsl(285deg 64% 95%) 55%,
        hsl(289deg 63% 95%) 60%,
        hsl(293deg 62% 95%) 65%,
        hsl(297deg 62% 95%) 70%,
        hsl(301deg 63% 96%) 76%,
        hsl(305deg 70% 96%) 84%,
        hsl(309deg 78% 96%) 100%
      );
}
#bkg-card-tshirt {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(120deg 68% 94%) 0%,
        hsl(111deg 67% 94%) 16%,
        hsl(103deg 66% 94%) 24%,
        hsl(96deg 65% 93%) 30%,
        hsl(89deg 64% 93%) 35%,
        hsl(83deg 63% 93%) 40%,
        hsl(76deg 62% 93%) 45%,
        hsl(70deg 60% 93%) 50%,
        hsl(65deg 59% 93%) 55%,
        hsl(59deg 59% 93%) 60%,
        hsl(54deg 67% 94%) 65%,
        hsl(49deg 75% 94%) 70%,
        hsl(45deg 83% 95%) 76%,
        hsl(42deg 91% 95%) 84%,
        hsl(39deg 100% 95%) 100%
      );
}
#bkg-card-sneakers {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(323deg 100% 93%) 0%,
        hsl(330deg 100% 93%) 16%,
        hsl(337deg 100% 94%) 24%,
        hsl(344deg 100% 94%) 30%,
        hsl(351deg 100% 94%) 35%,
        hsl(359deg 100% 95%) 40%,
        hsl(7deg 100% 95%) 45%,
        hsl(13deg 100% 95%) 50%,
        hsl(18deg 100% 95%) 55%,
        hsl(23deg 100% 95%) 60%,
        hsl(27deg 100% 95%) 65%,
        hsl(30deg 100% 95%) 70%,
        hsl(34deg 100% 96%) 76%,
        hsl(37deg 100% 96%) 84%,
        hsl(41deg 100% 97%) 100%
      );
}
.portfolio {
    color: #D29233;
}
#bkg-portfolio {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(335deg 59% 94%) 0%,
        hsl(343deg 69% 95%) 8%,
        hsl(349deg 79% 95%) 17%,
        hsl(355deg 88% 95%) 25%,
        hsl(1deg 97% 96%) 33%,
        hsl(7deg 100% 96%) 42%,
        hsl(12deg 100% 95%) 50%,
        hsl(16deg 100% 95%) 58%,
        hsl(20deg 100% 95%) 67%,
        hsl(24deg 97% 95%) 75%,
        hsl(28deg 91% 94%) 83%,
        hsl(32deg 83% 94%) 92%,
        hsl(38deg 75% 94%) 100%
      );
}
#bkg-tiffany {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(60deg 80% 94%) 0%,
        hsl(70deg 75% 94%) 8%,
        hsl(81deg 70% 94%) 17%,
        hsl(92deg 65% 93%) 25%,
        hsl(104deg 59% 93%) 33%,
        hsl(118deg 54% 93%) 42%,
        hsl(132deg 53% 92%) 50%,
        hsl(143deg 53% 91%) 58%,
        hsl(151deg 53% 90%) 67%,
        hsl(158deg 52% 89%) 75%,
        hsl(164deg 51% 88%) 83%,
        hsl(170deg 49% 87%) 92%,
        hsl(175deg 47% 86%) 100%
      );
}
#bkg-softcard {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(198deg 80% 94%) 0%,
        hsl(201deg 89% 94%) 8%,
        hsl(205deg 99% 94%) 17%,
        hsl(208deg 100% 94%) 25%,
        hsl(211deg 100% 94%) 33%,
        hsl(216deg 100% 94%) 42%,
        hsl(222deg 100% 95%) 50%,
        hsl(232deg 100% 95%) 58%,
        hsl(245deg 100% 95%) 67%,
        hsl(258deg 100% 95%) 75%,
        hsl(270deg 99% 94%) 83%,
        hsl(284deg 83% 93%) 92%,
        hsl(300deg 69% 92%) 100%
      );
}
.fineart {
    color: #6D92AE;
}
#bkg-fineart {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(0deg 0% 90%) 0%,
        hsl(344deg 0% 91%) 8%,
        hsl(344deg 0% 91%) 17%,
        hsl(344deg 0% 92%) 25%,
        hsl(344deg 0% 92%) 33%,
        hsl(344deg 0% 93%) 42%,
        hsl(344deg 0% 94%) 50%,
        hsl(344deg 0% 94%) 58%,
        hsl(344deg 0% 95%) 67%,
        hsl(344deg 0% 95%) 75%,
        hsl(344deg 0% 96%) 83%,
        hsl(344deg 0% 96%) 92%,
        hsl(0deg 0% 97%) 100%
      );
}
.travel {
    color: #D45884;
}
.tshirts {
    color: #43B391;
}
#bkg-tshirts-peeps {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
    hsl(65deg 86% 95%) 0%,
    hsl(74deg 85% 95%) 8%,
    hsl(83deg 83% 95%) 17%,
    hsl(93deg 82% 95%) 25%,
    hsl(104deg 79% 95%) 33%,
    hsl(116deg 76% 95%) 42%,
    hsl(129deg 76% 94%) 50%,
    hsl(139deg 76% 94%) 58%,
    hsl(147deg 75% 93%) 67%,
    hsl(154deg 75% 92%) 75%,
    hsl(160deg 74% 92%) 83%,
    hsl(165deg 72% 91%) 92%,
    hsl(169deg 71% 91%) 100%
        );
}
#bkg-tshirts-line {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(0deg 100% 95%) 0%,
        hsl(354deg 92% 95%) 8%,
        hsl(348deg 83% 94%) 17%,
        hsl(342deg 73% 94%) 25%,
        hsl(335deg 63% 93%) 33%,
        hsl(326deg 53% 93%) 42%,
        hsl(316deg 43% 92%) 50%,
        hsl(301deg 34% 91%) 58%,
        hsl(285deg 36% 92%) 67%,
        hsl(271deg 39% 92%) 75%,
        hsl(258deg 41% 92%) 83%,
        hsl(245deg 42% 92%) 92%,
        hsl(234deg 44% 92%) 100%
        );
}
#bkg-tshirts-madonna {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(71deg 73% 94%) 0%,
        hsl(55deg 73% 93%) 8%,
        hsl(44deg 93% 94%) 17%,
        hsl(38deg 100% 93%) 25%,
        hsl(33deg 100% 93%) 33%,
        hsl(28deg 100% 93%) 42%,
        hsl(22deg 100% 93%) 50%,
        hsl(15deg 100% 94%) 58%,
        hsl(7deg 100% 94%) 67%,
        hsl(356deg 100% 95%) 75%,
        hsl(346deg 100% 94%) 83%,
        hsl(336deg 100% 94%) 92%,
        hsl(328deg 100% 94%) 100%
        );
}
.sneakers {
    color: #8A6FB7;
}
#bkg-snk-nyc {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(185deg 32% 92%) 0%,
        hsl(190deg 44% 92%) 8%,
        hsl(195deg 58% 92%) 17%,
        hsl(200deg 72% 92%) 25%,
        hsl(204deg 87% 92%) 33%,
        hsl(209deg 100% 93%) 42%,
        hsl(213deg 100% 93%) 50%,
        hsl(219deg 100% 94%) 58%,
        hsl(231deg 100% 95%) 67%,
        hsl(249deg 100% 95%) 75%,
        hsl(268deg 100% 94%) 83%,
        hsl(285deg 100% 94%) 92%,
        hsl(302deg 100% 93%) 100%
    );
}
#bkg-snk-africolour {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(52deg 96% 90%) 0%,
        hsl(57deg 83% 89%) 8%,
        hsl(63deg 78% 89%) 17%,
        hsl(69deg 80% 89%) 25%,
        hsl(76deg 82% 89%) 33%,
        hsl(83deg 84% 90%) 42%,
        hsl(90deg 86% 90%) 50%,
        hsl(98deg 89% 91%) 58%,
        hsl(106deg 91% 91%) 67%,
        hsl(116deg 93% 92%) 75%,
        hsl(126deg 96% 92%) 83%,
        hsl(134deg 98% 91%) 92%,
        hsl(141deg 100% 90%) 100%
      );
}
#bkg-snk-cmyk {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(335deg 83% 95%) 0%,
        hsl(322deg 73% 95%) 8%,
        hsl(305deg 58% 95%) 17%,
        hsl(282deg 72% 95%) 25%,
        hsl(262deg 97% 96%) 33%,
        hsl(245deg 100% 96%) 42%,
        hsl(227deg 100% 96%) 50%,
        hsl(215deg 100% 95%) 58%,
        hsl(206deg 100% 94%) 67%,
        hsl(200deg 100% 93%) 75%,
        hsl(196deg 100% 92%) 83%,
        hsl(193deg 100% 91%) 92%,
        hsl(191deg 100% 90%) 100%
      );
}
#bkg-snk-bundesarmy {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(97deg 35% 85%) 0%,
        hsl(91deg 36% 86%) 8%,
        hsl(84deg 36% 86%) 17%,
        hsl(79deg 37% 87%) 25%,
        hsl(73deg 37% 87%) 33%,
        hsl(67deg 37% 88%) 42%,
        hsl(62deg 38% 88%) 50%,
        hsl(57deg 41% 89%) 58%,
        hsl(52deg 46% 90%) 67%,
        hsl(48deg 52% 91%) 75%,
        hsl(45deg 58% 92%) 83%,
        hsl(42deg 66% 93%) 92%,
        hsl(39deg 74% 94%) 100%
      );
}
#bkg-neutral {
    background-color: #FAFAFA;
    background-image: linear-gradient(
        45deg,
        hsl(165deg 29% 95%) 0%,
        hsl(158deg 26% 95%) 8%,
        hsl(150deg 24% 95%) 17%,
        hsl(140deg 21% 95%) 25%,
        hsl(127deg 17% 95%) 33%,
        hsl(111deg 16% 95%) 42%,
        hsl(96deg 16% 95%) 50%,
        hsl(82deg 16% 95%) 58%,
        hsl(70deg 15% 95%) 67%,
        hsl(58deg 15% 95%) 75%,
        hsl(49deg 17% 95%) 83%,
        hsl(42deg 19% 95%) 92%,
        hsl(36deg 20% 95%) 100%
      );
}


/* PAGE STRUCTURE */

.mobile {
    display: none;
}
.center-vertically-in-div {
    display: flex;
    align-items: center;
}
.bottom {
    position: absolute;
    margin: auto;
    bottom: 0px;
    width: 100%;
}
.align-content-bottom {
    display: flex;
    align-items: flex-end;
}
.align-center-h {
    margin: auto;
    width: fit-content;
}
.card-container {
    display: grid;
    padding: 0 5rem;
}
.card {
    width: 100%;
    height: 100%;
    border-style: none;
    border-radius: 2.5rem;
}
.card-prj-details {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    border-style: none;
    border-radius: 2.5rem;
}
.grid-page {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 1rem;
    padding: 0 5rem;
}
.grid-2h-auto-fr {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: .5rem;
    width: 100%;
}
.grid-2h-auto {
    display: grid;
    grid-template-columns: 46% 46%;
    grid-column-gap: 8%;
    width: 100%;
}
.line-divider {
    width: 100%;
    height: 1px;
    background-color: #444444;
}
.line-divider-short {
    width: 20%;
    height: 2px;
    background-color: #444444;
}
.grid-2-new {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-column-gap: 2rem;
    padding: 7.5rem 7.5rem;
}
.grid-2inversed-new {
    display: grid;
    grid-template-columns: 1fr 40%;
    grid-column-gap: 2rem;
    padding: 7.5rem 7.5rem;
}
.container-hero {
    max-width: 50rem;
    padding: 12rem 5rem 8rem 5rem;
}
.container-2cols {
    max-width: 68rem;
    padding: 10rem 5rem;
}
.container-project-top-h {
    max-width: 100%;
    padding: 2rem;
}
.container-page-top {
    max-width: 50rem;
    padding: 12.5rem 5rem;
}
.grid-project-top-h {
    display: grid;
    grid-template-columns: 38% 1fr;
    grid-column-gap: 2rem;
    padding: 7.5rem 7.5rem;
}
.grid-project-top-v {
    display: grid;
    grid-template-columns: 1fr 34% auto 1fr;
    grid-column-gap: 2rem;
    padding: 6rem 0;
}
.grid-project, {
    display: grid;
    grid-template-columns: 15% 1fr 15%;
    grid-column-gap: 1rem;
    padding: 0 2rem;
}
.grid-project-gallery {
    display: grid;
    grid-template-columns: 15% 1fr 15%;
    grid-column-gap: 1rem;
    padding: 0 2rem 7.5rem 2rem;
}
.grid-tshirts-gallery {
    display: grid;
    grid-template-columns: 5% 36% 1fr 84px 5%;
    grid-column-gap: 1rem;
    padding: 0 2rem 7.5rem 2rem;
}
.grid-sneakers {
    display: grid;
    grid-template-columns: 1fr 27%;
    grid-column-gap: 2rem;
    padding: 7.5rem 8% 5rem 2%;
}
.container-sneakers {
    height: 70vh;
    padding: 0 6rem;
}
.image-sneakers {
    position: relative;
    height: 65vh;
}
.container-switch {
    min-height: 4rem;
    padding-bottom: 4rem;
}
.card-padding {
    padding: 5rem 6rem 10rem 6rem;
}
.card-padding-project {
    padding: 7.5rem;
}
.space2juma {
     margin-bottom: 2.5rem;
}
.space4juma {
     margin-bottom: 4.5rem;
}
.space7juma {
     margin-bottom: 7.5rem;
}
.space20 {
     padding-bottom: 20rem;
}
.space-tshirt-card {
     margin-bottom: 7.5rem;
}


/* NAVIGATION OVERLAY */

.overlay {
    position: fixed;
    z-index: 11;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background-color: white;
    overflow-y: hidden;
    transition: .5s;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(18px);
    visibility: hidden;
    opacity: 0%;
}
.overlay-content {
    margin-left: 20vw;    
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    transition-delay: .1s;
}
.overlay a {
    color: #161616;
    font-size: 2rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
    color: #161616;
}
.overlay .closebtn {
    position: absolute;
    top: 2rem;
    left: 2rem;
}
.gradient-nav-overlay {
    background: white;
    background-color: rgba(255,255,255,25%);
}
ul.menu {
    margin: 0;
    padding: 0;
}
ul.menu li{
    list-style: none;
    padding: 1.25rem 0;
    text-decoration: none;
}
ul.menu:hover li{
    text-decoration: none;
} 
ul.menu li:hover{
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 0.5rem;    
}
ul.menu li.selected {
    font-size: 2rem;
    font-weight: 800;
}
ul.menu li.selected:hover {
    text-decoration: none;
}
.menu-open { 
    visibility: visible;
    opacity: 100%;
} 


/* PORTFOLIO PAGES */
.tools {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 6rem 6rem;
}
.tools-mobile {
    display: none;
}
.grid-3h-33 {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-column-gap: 4rem;
    grid-row-gap: 12rem;
    margin: 0;
}


/* SNEAKERS SWITCH */

.image {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.sneaker-big {
    object-fit: contain;
    max-height: 65vh;
}
.visible {
    opacity: 1;
}
.hidden {
    opacity: 0;
}
.switch {
    position: relative;
    display: inline-block;
    width: 6rem;
    height: 2.75rem;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    z-index: 2;    
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0);
    border-style: solid;
    border-width: 2px;
    border-color: #161616;
    border-radius: 34px;
    transition: .1s;
}
.slider:hover {
    background-color: white;
    border-style: solid;
    border-width: 2px;
    border-color: #161616;    
}
.slider:before {
    position: absolute;
    z-index: 2;
    content: "";
    height: 1.85rem;
    width: 1.85rem;
    left: .25rem;
    top: .25rem;
    background-color: #161616;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider:before {
    transform: translateX(3.3rem);
    background-color: #161616;
}


/* T-SHIRTS GALLERY */

.thumbnail {
    cursor: pointer;
    transition: opacity 0.3s;
    border-style: solid;
    border-color: black;
    border-radius: 2.5rem;
    border-width: 1px;    
}
.thumbnail.selected {
    border: 1px solid lightgray;    
    border-radius: 2.5rem;
    cursor: auto;
}
.thumbnail:hover {
    background-color: white;
}
.big-image {
    margin-top: 2vh;
    margin-left: 2vw;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

.thumbnail2 {
    cursor: pointer;
    transition: opacity 0.3s;
    border-style: solid;
    border-color: black;
    border-radius: 2.5rem;
    border-width: 1px;    
}
.thumbnail2.selected {
    border: 1px solid lightgray;        
    border-radius: 2.5rem;
    cursor: auto;
}
.thumbnail2:hover {
    background-color: white;
}
.big-image2 {
    margin-top: 2vh;
    margin-left: 2vw;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.3s ease-in;
}


/* IMAGES GALLERY STYLES */

.thumbnails-wrapper {
    max-width: 124px;
}
.gallery-size {
     height: 75vh;
}
#thumbnails-container {
    max-height: 75vh;
    overflow: auto;
}
#thumbnails img {
    max-width: 100%;
    height: auto;    
    cursor: pointer;
    border: 2px dotted #161616;
    border-radius: 2.75rem;
    transition-duration: .2s;
}
#thumbnails img.selected {
    border: 2px solid #161616;
    border-radius: 2.75rem;
}
#thumbnails img:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;    
}
#thumbnails img.selected:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;
    cursor: default;
}
#big-image-container {
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 0;
}
#big-image {
    cursor: zoom-in;
    object-fit: contain;
    max-height: 75vh;
}
#loading-message {
    color: #444444;
}
#caption {
  margin-top: 2rem;
}

/* ONE LINER TSHIRTS */
#thumbnails-container-line {
    max-height: 75vh;
    overflow: auto;
}
#thumbnails-line img {
    max-width: 100%;
    height: auto;    
    cursor: pointer;
    border: 2px dotted #161616;
    border-radius: 2.75rem;
    transition-duration: .2s;
}
#thumbnails-line img.selected {
    border: 2px solid #161616;
    border-radius: 2.75rem;
}
#thumbnails-line img:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;
}
#thumbnails-line img.selected:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;
    cursor: default;
}
#big-image-container-line {
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 0;
}
#big-image-line {
    cursor: zoom-in;
    object-fit: contain;
    max-height: 75vh;
}
#loading-message-line {
    color: #444444;
}
#caption-line {
  margin-top: 2rem;
}

/* MADONNA TSHIRT */
#big-image-madonna {
    cursor: zoom-in;
    object-fit: contain;
    max-height: 75vh;
}

/* TIFFANY 2 */
#thumbnails-container2 {
    max-height: 75vh;
    overflow: auto;
}
#thumbnails2 img {
    max-width: 100%;
    height: auto;    
    cursor: pointer;
    border: 2px dotted #161616;
    border-radius: 2.75rem;
    transition-duration: .2s;
}
#thumbnails2 img.selected {
    border: 2px solid #161616;
    border-radius: 2.75rem;
}
#thumbnails2 img:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;    
}
#thumbnails2 img.selected:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;
    cursor: default;
}
#big-image-container2 {
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 0;
}
#big-image2 {
    cursor: zoom-in;
    object-fit: contain;
    max-height: 75vh;
}
#loading-message2 {
    color: #444444;
}
#caption2 {
  margin-top: 2rem;
}

/* TIFFANY 3 */
#thumbnails-container3 {
    max-height: 75vh;
    overflow: auto;
}
#thumbnails3 img {
    max-width: 100%;
    height: auto;    
    cursor: pointer;
    border: 2px dotted #161616;
    border-radius: 2.75rem;
    transition-duration: .2s;
}
#thumbnails3 img.selected {
    border: 2px solid #161616;
    border-radius: 2.75rem;
}
#thumbnails3 img:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;    
}
#thumbnails3 img.selected:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;
    cursor: default;
}
#big-image-container3 {
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 0;
}
#big-image3 {
    cursor: zoom-in;
    object-fit: contain;
    max-height: 75vh;
}
#loading-message3 {
    color: #444444;
}
#caption3 {
  margin-top: 2rem;
}

/* TIFFANY 4 */
#thumbnails-container4 {
    max-height: 75vh;
    overflow: auto;
}
#thumbnails4 img {
    max-width: 100%;
    height: auto;    
    cursor: pointer;
    border: 2px dotted #161616;
    border-radius: 2.75rem;
    transition-duration: .2s;
}
#thumbnails4 img.selected {
    border: 2px solid #161616;
    border-radius: 2.75rem;
}
#thumbnails4 img:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;    
}
#thumbnails4 img.selected:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;
    cursor: default;
}
#big-image-container4 {
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 0;
}
#big-image4 {
    cursor: zoom-in;
    object-fit: contain;
    max-height: 75vh;
}
#loading-message4 {
    color: #444444;
}
#caption4 {
  margin-top: 2rem;
}

/* TIFFANY 5 */
#thumbnails-container5 {
    max-height: 75vh;
    overflow: auto;
}
#thumbnails5 img {
    max-width: 100%;
    height: auto;    
    cursor: pointer;
    border: 2px dotted #161616;
    border-radius: 2.75rem;
    transition-duration: .2s;
}
#thumbnails5 img.selected {
    border: 2px solid #161616;
    border-radius: 2.75rem;
}
#thumbnails5 img:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;    
}
#thumbnails5 img.selected:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;
    cursor: default;
}
#big-image-container5 {
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 0;
}
#big-image5 {
    cursor: zoom-in;
    object-fit: contain;
    max-height: 75vh;
}
#loading-message5 {
    color: #444444;
}
#caption5 {
  margin-top: 2rem;
}

/* TIFFANY 6 */
#thumbnails-container6 {
    max-height: 75vh;
    overflow: auto;
}
#thumbnails6 img {
    max-width: 100%;
    height: auto;    
    cursor: pointer;
    border: 2px dotted #161616;
    border-radius: 2.75rem;
    transition-duration: .2s;
}
#thumbnails6 img.selected {
    border: 2px solid #161616;
    border-radius: 2.75rem;
}
#thumbnails6 img:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;    
}
#thumbnails6 img.selected:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;
    cursor: default;
}
#big-image-container6 {
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 0;
}
#big-image6 {
    cursor: zoom-in;
    object-fit: contain;
    max-height: 75vh;
}
#loading-message6 {
    color: #444444;
}
#caption6 {
  margin-top: 2rem;
}

/* FINE-ART ONLY */
#thumbnailstall img {
    max-width: 100%;
    height: auto;    
    cursor: pointer;
    border: 2px dotted #161616;
    border-radius: 2.75rem;
    transition-duration: .2s;
}
#thumbnailstall img.selected {
    border: 2px solid #161616;
    border-radius: 2.75rem;
}
#thumbnailstall img:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;    
}
#thumbnailstall img.selected:hover {
    border: 2px solid #161616;
    border-radius: 2.75rem;
    cursor: default;
}


/* IMAGES GALLERY ANIMATIONS */
.fade-in {
  animation: fadeIn 2s forwards;
}
.fade-out {
  animation: fadeOut 1s forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}


/* PROJECTS IMAGES OLD GALLERY */

.gallery-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1rem;
    margin-bottom: 1rem;
}
.img-container {
	margin: 0;
	padding: 0;
	background-color: white;
	aspect-ratio: 4/3;
	max-height: 480px;
	position: relative;
	overflow: hidden;
	cursor:zoom-in;
	border: none;
    border-radius: 1rem;
}
.img-container:hover .img-overlay {
  height: 4rem;
}
.img-container:hover .imga {
	transform: translate(-50%, -50%) scale(1.4);
}
.imga {
	display: block;
	margin-left: auto;
    margin-right: auto;
	object-fit: cover;
	float:left;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease-in-out;
}
.img-wide {
	width: 100%;
	max-height: 100%;
}
.img-tall {
	max-width: 100%;
	height: 100%;
}
.img-caption-mobile {
    display: none;
	text-align: center;
	font-size: 0.9rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.25rem;
	margin: 0;
	padding: .5rem .4rem 1.5rem .4rem;
}
.img-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
	opacity: 100%;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .2s ease;
}
.img-caption {
    color: white;
	font-weight: 300;
	font-size: 0.9rem;
	line-height: 1.2rem;
    position: absolute;
    text-align: center;
    padding: 0 .5rem;
}



/* TRAVEL GALLERY */

button.travel {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
}
.overlay-country {
    position: absolute;
    display: flex;
    display: -webkit-flex;
    margin: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    width: auto;
    height: 16%;
    background: rgba(0,0,0,0.5);
    opacity:1;
    transition: .3s ease;
    -moz-transition: .3s ease;
    -webkit-transition: .3s ease;
}
.tile-label {
    margin: auto;
    width: 90%;
    height: auto;
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-weight: 800;
    color: white;
    text-align: center;
}
.tile-more {
    display: none;
    margin-top: 2rem;
    width:100%;
    height: auto;    
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.75rem;
    color: white;
    text-align: center;
}
img.travel {
    width: 100%;
    height: 100%;
    margin-bottom: -8px;
    transition: all .8s;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;    
}
.grid-travel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 5rem;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}
.grid-country {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 5rem;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

/* Responsive layout - max 992px - two columns */
@media screen and (max-width: 992px) {
    .grid-travel {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0 2.5rem;
        grid-column-gap: 1rem;
        grid-row-gap: 1rem;
    }
    .grid-country {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        padding: 0 2.5rem;
        grid-column-gap: 1rem;
        grid-row-gap: 1rem;
    }
}
/* Responsive layout - max 768px - two columns */
@media screen and (max-width: 768px) {
    .grid-travel {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        padding: 0 2rem;
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
    }
    .grid-country {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        padding: 0 2rem;
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
    }
}
.grid-travel-cell {
    position: relative;
	overflow: hidden;
    margin: 0;
    border: none;
    border-radius: 2rem;
    padding: 0;
    background-color: #FAFAFA;
}
.grid-travel-cell:hover .overlay-country {
    height: 100%;
    background: rgba(0,0,0,0.8);
}
.grid-travel-cell:hover .tile-label {
    font-size: 2rem;
    line-height: 2.2rem;
}
.grid-travel-cell:hover .tile-more {
    display: block;
}
.grid-travel-cell:hover img.travel {
    transform: scale(1.4);
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
}
.icon-travel {
    margin: .5rem 0 0 0;
}



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

    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }    
    

/* GENERAL STUFF */

    .navigation {
        top: 1rem;
        left: 1rem;
        overflow: hidden;
    }
    img.btn-icon-end {
        margin: 0 0 2px 8px;
        vertical-align: middle;
    }    
    button.tertiary:hover {
        border-style: none;
    }
    
    
/* PAGE STRUCTURE */

    .align-center-h-mobile {
        margin: auto;
        width: fit-content;
    }
    .grid-2-new {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(2, auto);
        grid-row-gap: 1rem;
        padding: 2rem;
    }
    .grid-2inversed-new {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(2, auto);        
        grid-column-gap: 1rem;
        padding: 2rem;
    }    
    .grid-2h-auto {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-row-gap: 4rem;
        width: 100%;
    }
    .card-container {
        display: grid;
        padding: 0 1rem;
    }
    .card-padding {
        padding: 5rem 3rem;
    }
    .card-padding-project {
        padding: 2rem 2rem 2rem 2rem;
    }
    .card-prj-details {
        width: 100%;
    }
    .container-hero {
        max-width: 100%;
        padding: 11rem 3rem 6rem 3rem;
    }
    .container-page-top {
        max-width: 100%;
        padding: 10rem 3rem 6rem 3rem;
    }
    .container-2cols {
        max-width: 100%;
        padding: 8rem 3rem;
    }
    .container-project-top-h {
        max-width: 100%;
        padding: 2rem;
    }
    .grid-project-top-h {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat (2, auto);
        grid-column-gap: 0;
        grid-row-gap: 2rem;
        padding: 7.5rem 0 2.5rem 0;
    }
    .grid-project-top-v {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat (4, auto);
        grid-column-gap: 0;
        grid-row-gap: 1.5rem;
        padding: 8.5rem 0 1rem 0;
    }
    .grid-tshirts-gallery {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-column-gap: 0;
        grid-row-gap: 0;
        margin: 0 2rem 0 2rem;
        padding: 0;
    }
    .grid-sneakers {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(2, auto);
        grid-row-gap: 1rem;
        padding: 2rem;
    }
    .container-sneakers {
        width: 80vw;
        height: 32vh;
        padding: 4rem 0;
    }
    .image-sneakers {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .container-switch {
        min-height: 4rem;
        padding-bottom: 0;
    }
    .space2juma {
         margin-bottom: 2rem;
    }
    .space7juma {
         margin-bottom: 4rem;
    }
    .space20 {
         padding-bottom: 12rem;
    }
    .space-tshirt-card {
         margin-bottom: 2rem;
    }

    
/* FONTS */

    .txt-h1 {
        font-size: 3.25rem;
        line-height: 4rem;
        font-weight: 800;
    }
    .txt-hero {
        font-size: 4rem;
        line-height: 4rem;
        font-weight: 800;
    }
    .txt-h2 {
        font-size: 2.5rem;
        line-height: 3rem;
        font-weight: 800;
        margin: 1rem 0 0 0;
    }
    .txt-h3 {
        font-size: 2rem;
        line-height: 2.75rem;
        font-weight: 800;    
    }
    .txt-h4 {
        font-size: 1.25rem;
        line-height: 2rem;
        font-weight: 700;    
    }
    .txt-small {
        font-size: .8rem;
        line-height: 1.2rem;
    }
    p.full {
        padding-bottom: 1.5rem;
    }
    p.half {
        padding-bottom: .5rem;
    }    
     p.project-h3 {
        margin-top: -1.5rem;
        padding-bottom: 2rem;
    }
    .home {
        font-size: 5rem;
        line-height: 5rem;
    }
    
    
/* NAVIGATION OVERLAY */

    .overlay-content {
        margin-left: 0;
        padding: 0 3rem;
    }
    .overlay a {
        font-size: 1.75rem;
        line-height: 2.5rem;
    }
    .overlay .closebtn {
        top: 1rem;
        left: 1rem;
    }
    ul.menu li{
        padding: 1rem 0;
    }
    ul.menu li.selected {
        font-size: 1.75rem;
        line-height: 2.5rem;
    }

    
/* PORTFOLIO PAGE */
    .tools {
        display: none;
    }
    .tools-mobile {
        display: block;
    }    
    .grid-3h-33 {
        display: grid;
        grid-template-columns: auto;
        grid-column-gap: 0;
        grid-row-gap: 8rem;
        padding: 5rem 0 0 0;
    }
    .grid-project {
        display: grid;
        grid-template-columns: 1rem 1fr 1rem;
        grid-column-gap: 1rem;
    }
    .grid-project-gallery {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-column-gap: 0;
        grid-row-gap: 0;
        margin: 0 2rem 0 2rem;
        padding: 0;
    }

    
/* IMAGES GALLERY STYLES */

    .thumbnails-wrapper {
        max-width: 100%;
        padding: 2rem 0 3rem 0;
    }
    .gallery-size {
         height: 100%;
    }    
    #thumbnails img {
        margin: 0 4px;
        max-width: 80px;
    }
    #caption {
      margin-top: 1rem;
    }
    #big-image {
        max-height: 40vh;
    }
    #thumbnails2 img {
        margin: 0 4px;
        max-width: 80px;
    }
    #caption2 {
      margin-top: 1rem;
    }
    #big-image2 {
        max-height: 40vh;
    }
    #thumbnails3 img {
        margin: 0 4px;
        max-width: 80px;
    }
    #caption3 {
      margin-top: 1rem;
    }
    #big-image3 {
        max-height: 40vh;
    }    
    #thumbnails4 img {
        margin: 0 4px;
        max-width: 80px;
    }
    #caption4 {
      margin-top: 1rem;
    }
    #big-image4 {
        max-height: 40vh;
    }
    #thumbnails5 img {
        margin: 0 4px;
        max-width: 80px;
    }
    #caption5 {
      margin-top: 1rem;
    }
    #big-image5 {
        max-height: 40vh;
    }
    #thumbnails6 img {
        margin: 0 4px;
        max-width: 80px;
    }
    #caption6 {
      margin-top: 1rem;
    }
    #big-image6 {
        max-height: 40vh;
    }
    #thumbnails-line img {
        margin: 0 4px;
        max-height: 80px;
    }
    #thumbnailstall img {
        margin: 0 4px;
        max-height: 80px;
    }


/* PROJECTS IMAGES OLD GALLERY */
    
	.gallery-row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 8px;
	}
	.img-container:hover .img-overlay {
	  display: none;
	}
	.img-container:hover imga {
		transform: translate(-50%, -50%);
	}
	.img-caption-mobile {
		display: block;
	}
    

}