/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
}
main {
    display: block;
}
h1 {
    font-size: 2em;
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}
a {
    background-color: transparent;
}
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}
b,
strong {
    font-weight: bolder;
}
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
img {
    border-style: none;
}
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button,
input {
    overflow: visible;
}
button,
select {
    text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
    -webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText;
}
fieldset {
    padding: 0.35em 0.75em 0.625em;
}
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}
progress {
    vertical-align: baseline;
}
textarea {
    overflow: auto;
}
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}
details {
    display: block;
}
summary {
    display: list-item;
}
template {
    display: none;
}
[hidden] {
    display: none;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
:root {
    font-family: hatch, serif;
    font-weight: 300;
    font-size: calc(0.1em + 2.5vmin);
    line-height: 1.3;
    color: var(--textblack);
}
:root {
    --purewhite: rgb(255, 255, 255);
    --white: rgb(224, 223, 213);
    --black: rgb(15, 15, 15);
    --grey: rgb(197, 204, 197);
    --darkgrey: rgb(147, 153, 147);
    --yellowLOGO: rgb(238, 203, 53);
    --orangeLOGO: rgb(239, 126, 69);
    --greenLOGO: rgb(133, 188, 56);
    --blueLOGO: rgb(82, 182, 171);
    --blackLOGO: rgb(28, 29, 28);
    --yellow: rgb(255, 218, 57);
    --red: rgb(255, 86, 0);
    --pink: rgb(239, 198, 178);
    --blue: rgb(82, 182, 171);
    --green: rgb(133, 188, 56);
    --brightblue: rgb(0, 51, 237);
    --brightgreen: rgb(149, 255, 0);
    --textwhite: rgb(224, 223, 213);
    --textblack: rgb(15, 15, 15);
    --textgrey: rgb(197, 204, 197);
    --textdarkgrey: rgb(147, 153, 147);
    --textblackLOGO: rgb(28, 29, 28);
    --textyellow: rgb(255, 218, 57);
    --textred: rgb(255, 86, 0);
    --textpink: rgb(239, 198, 178);
    --textorange: rgb(239, 126, 69);
    --textgreen: rgb(133, 188, 56);
    --textblue: rgb(82, 182, 171);
    --textbrightred: rgb(245, 40, 10);
    --textbrightgreen: rgb(149, 255, 0);
    --dot1: rgb(239, 126, 69);
    --dot2: rgb(133, 188, 56);
    --dot3: rgb(82, 182, 171);
    --shadow1: rgb(150, 182, 178);
    --shadow2: rgb(239, 198, 178);
    --shadow3: rgb(15, 15, 15);
    --shadow4: rgb(224, 223, 213);
    --shadow5: rgb(245 223 77);
    --shadow6: rgb(115 156 97);
    --shadow7: rgb(0 67 203);
    --shadow8: rgb(226 124 98);
    --shadowtext: rgb(15, 15, 15);
}
.PointerCursor {
    cursor: pointer;
}
.NoCursor {
    cursor: none;
}
#wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#container {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#logo {
    margin: auto;
}
#logo a {
    display: block;
    width: 100%;
    height: 100vh;
    margin: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}
#logo a img {
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
#copyright {
    width: 100%;
    text-align: center;
    margin: 5vmin auto;
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--textdarkgrey);
    position: fixed;
    bottom: 0;
}
.grid-parent {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: repeat(15, minmax(40px, 6vh));
    grid-gap: 0;
    position: absolute;
    z-index: -1;
}
.grid-parent div:nth-child(4n + 1) {
    -ms-grid-column: 1;
    -ms-grid-column-span: 7;
    grid-column: 1 / span 7;
}
.grid-parent div:nth-child(4n + 2) {
    -ms-grid-column: 8;
    -ms-grid-column-span: 7;
    grid-column: 8 / span 7;
}
.grid-parent div:nth-child(4n + 3) {
    -ms-grid-column: 15;
    -ms-grid-column-span: 6;
    grid-column: 15 / span 6;
}
.grid-parent div:nth-child(4n) {
    -ms-grid-column: 21;
    -ms-grid-column-span: 10;
    grid-column: 21 / span 10;
}
.grid-parent div:nth-child(-n + 4) {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    grid-row: 1 / span 3;
}
.grid-parent div:nth-child(5),
.grid-parent div:nth-child(6),
.grid-parent div:nth-child(7),
.grid-parent div:nth-child(8) {
    -ms-grid-row: 4;
    -ms-grid-row-span: 3;
    grid-row: 4 / span 3;
}
.grid-parent div:nth-child(10),
.grid-parent div:nth-child(11),
.grid-parent div:nth-child(12),
.grid-parent div:nth-child(9) {
    -ms-grid-row: 7;
    -ms-grid-row-span: 6;
    grid-row: 7 / span 6;
}
.grid-parent div:nth-child(n + 13) {
    -ms-grid-row: 13;
    -ms-grid-row-span: 3;
    grid-row: 13 / span 3;
}
.grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: repeat(15, minmax(40px, 6vh));
    grid-gap: 0;
    justify-content: stretch;
    align-content: start;
}
.item-contact {
    -ms-grid-row: 1;
    -ms-grid-row-span: 15;
    -ms-grid-column: 1;
    -ms-grid-column-span: 30;
    grid-area: 1/1/16/31;
    justify-self: right;
    align-self: end;
}
.item-contact a {
    overflow: hidden;
    font-size: 1.2rem;
    color: var(--darkgrey);
    text-decoration: none;
    padding: 1.3vmin;
    display: block;
}
nav {
    width: 100%;
    position: absolute;
    top: 2.5%;
    text-align: center;
    margin-top: 3.8vmin;
    z-index: 1;
}
nav a {
    padding-top: 1.3vmin;
    padding-bottom: 1.3vmin;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-decoration: none;
    color: var(--darkgrey);
    font-size: 1rem;
}
.item-dot.one {
    -ms-grid-row: 6;
    -ms-grid-row-span: 2;
    -ms-grid-column: 7;
    -ms-grid-column-span: 2;
    grid-area: 6/7/8/9;
    background-color: var(--dot1);
}
.item-dot.two {
    -ms-grid-row: 12;
    -ms-grid-row-span: 2;
    -ms-grid-column: 14;
    -ms-grid-column-span: 2;
    grid-area: 12/14/14/16;
    background-color: var(--dot2);
}
.item-dot.three {
    -ms-grid-row: 3;
    -ms-grid-row-span: 2;
    -ms-grid-column: 20;
    -ms-grid-column-span: 2;
    grid-area: 3/20/5/22;
    background-color: var(--dot3);
}
.item-dot {
    justify-self: center;
    align-self: center;
}
.item-dot-hint {
    -ms-grid-row: 1;
    -ms-grid-row-span: 15;
    -ms-grid-column: 1;
    -ms-grid-column-span: 28;
    grid-area: 1/1/16/29;
    justify-self: center;
    align-self: center;
}
.item-dot {
    width: 6vmin;
    height: 6vmin;
    border-radius: 100%;
}
.item-dot.one {
    background-color: var(--dot1);
}
.item-dot.two {
    background-color: var(--dot2);
}
.item-dot.three {
    background-color: var(--dot3);
}
.item-dot-hint {
    display: none;
    padding: 3.8vmin;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.1rem;
    font-size: 1.2rem;
}
.item-dot.one.animate {
    animation: first-dot;
    animation-duration: 0.3s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.item-dot.two.animate {
    animation: second-dot;
    animation-duration: 0.3s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.item-dot.three.animate {
    animation: third-dot;
    animation-duration: 0.3s;
    animation-delay: 0.7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes first-dot {
    from {
        background-color: var(--dot1);
    }
    to {
        background-color: var(--yellowLOGO);
    }
}
@keyframes second-dot {
    from {
        background-color: var(--dot2);
    }
    to {
        background-color: var(--yellowLOGO);
    }
}
@keyframes third-dot {
    from {
        background-color: var(--dot3);
    }
    to {
        background-color: var(--yellowLOGO);
    }
}
.item-AboutMe {
    grid-column-start: 8;
    -ms-grid-column-span: 23;
    grid-column-end: 31;
    grid-row-start: 7;
    -ms-grid-row-span: 9;
    grid-row-end: 16;
}
.item-MyPhoto {
    grid-column-start: 1;
    -ms-grid-column-span: 6;
    grid-column-end: 7;
    grid-row-start: 1;
    -ms-grid-row-span: 6;
    grid-row-end: 7;
}
.item-Patterns {
    -ms-grid-column: 15;
    -ms-grid-column-span: 16;
    grid-column: 15/31;
    -ms-grid-row: 1;
    -ms-grid-row-span: 12;
    grid-row: 1/13;
}
.item-Info {
    -ms-grid-column: 1;
    -ms-grid-column-span: 14;
    grid-column: 1/15;
    -ms-grid-row: 1;
    -ms-grid-row-span: 12;
    grid-row: 1/13;
}
.item-Projects {
    -ms-grid-row: 4;
    -ms-grid-row-span: 12;
    -ms-grid-column: 1;
    -ms-grid-column-span: 20;
    grid-area: 4/1/16/21;
}
.item-Process {
    -ms-grid-row: 4;
    -ms-grid-row-span: 12;
    -ms-grid-column: 21;
    -ms-grid-column-span: 10;
    grid-area: 4/21/16/31;
}
.item-AboutMe,
.item-Info,
.item-Patterns,
.item-Process,
.item-Projects {
    justify-self: stretch;
    align-self: stretch;
}
.grid .text {
    padding: 3.8vmin;
    font-style: normal;
    font-weight: 300;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.grid .text h1 {
    padding-bottom: 3.8vmin;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--textred);
    max-height: 10vh;
}
.grid .text p {
    font-size: 1rem;
    color: var(--textblack);
    padding-right: 1rem;
}
.grid .text p strong {
    color: var(--textred);
    font-weight: 300;
}
.grid .text a {
    font-size: 0.9rem;
    font-weight: 400;
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    transform: translate(0, -100%);
    padding: 3.8vmin;
    color: var(--textblack);
}
.grid .text div p a {
    font-size: 1rem;
    font-weight: 300;
    display: inline;
    position: static;
    transform: none;
    padding: 0;
    color: var(--textblue);
}
.grid .item-MyPhoto {
    position: relative;
    overflow: hidden;
}
.grid .item-MyPhoto img {
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.grid .item-AboutMe span.icon-binoculars1 {
    color: var(--red);
    font-size: 1rem;
}
.grid .item-AboutMe p {
    display: block;
    max-height: 30vh;
    overflow: auto;
}
.grid .item-AboutMe p br {
    margin-bottom: 0.65rem;
}
.grid .item-Patterns div {
    height: 50vh;
    display: block;
    padding: 0;
    width: 100%;
    min-height: 48vh;
    margin: auto;
    position: relative;
    overflow: hidden;
}
.grid .item-Patterns div img {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.grid .item-Patterns span.icon-eye1 {
    color: var(--red);
    font-size: 1rem;
}
.grid .item-Info div {
    max-height: 65vh;
    width: 100%;
}
.grid .item-Info div p {
    max-width: 100%;
    display: block;
    max-height: 65vh;
    overflow: auto;
    font-size: 1rem;
}
.grid .item-Info div p span {
    color: transparent;
    font-weight: 300;
    text-shadow: 0 0 4px var(--textwhite);
}
.grid .item-Info div p q {
    color: var(--textpink);
    font-style: italic;
}
.grid .item-Info div p b {
    color: var(--textdarkgrey);
    font-style: normal;
    font-size: 1rem;
    font-weight: 300;
}
.grid .item-Info p br {
    margin-bottom: 0.43rem;
}
.grid .item-Info p br:last-of-type {
    margin-bottom: 0.87rem;
}
.grid .item-Projects div {
    width: 100%;
}
.grid .item-Projects div p {
    max-width: 100%;
    display: block;
    max-height: 50vh;
    overflow: auto;
    font-size: 1rem;
}
.grid .item-Projects div p br {
    margin-bottom: 0.43rem;
}
.grid .item-Projects div p br:last-of-type {
    margin-bottom: 0.87rem;
}
.grid .item-Projects > div p i {
    color: var(--textorange);
}
.item-Projects a {
    left: 0;
}
.grid .item-Projects span.icon-eye1 {
    color: var(--red);
    font-size: 1rem;
}
.grid .item-Projects div p b {
    font-weight: 400;
}
.grid .item-Projects div p b:last-of-type {
    color: var(--textdarkgrey);
    font-style: normal;
    font-size: 1rem;
    font-weight: 300;
}
.grid .item-Process div {
    width: 100%;
    min-height: 64vh;
    position: relative;
    overflow: hidden;
}
.grid .item-Process div img {
    height: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.grid .item-dot.icon-circle-left {
    font-size: 6vmin;
    text-align: center;
    font-style: normal;
    font-weight: 300;
    color: var(--grey);
    z-index: 100;
}
.item-AboutMe,
.item-Info,
.item-MyPhoto,
.item-Patterns,
.item-Process,
.item-Projects {
    display: none;
}
#MoreMe-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
}
#MoreMe-container .MoreMe {
    max-width: 40vw;
    position: absolute;
    padding: 3.8vmin;
}
#MoreMe-container .MoreMe p {
    font-style: normal;
    font-weight: 100;
    font-size: 1.2rem;
    color: var(--textwhite);
    text-shadow: 1px 3px 3px var(--shadowtext);
}
#MoreMe-container .MoreMe p b {
    font-style: normal;
    font-weight: 100;
    color: var(--textbrightgreen);
    font-size: 1.2rem;
}
#MoreMe-container .MoreMe p span {
    width: 1.2rem !important;
    height: 1.2rem !important;
    float: left;
    font-style: normal;
    font-weight: 100;
    color: var(--brightgreen);
    font-size: 1.2rem;
    margin: 0 !important;
    padding-right: 0.5rem !important;
    overflow: unset !important;
    text-align: center !important;
}
#MoreMe-container .MoreMe p span:last-of-type {
    margin-top: 0.3rem !important;
    font-size: 0.9rem;
}
.background-change {
    background-image: url(../img/bg-aboutme.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
#MoreMe-container #counter {
    display: none;
}
#MoreMe-container .position_0 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    border: 0.2rem var(--brightgreen) solid;
}
#MoreMe-container .position_1 {
    bottom: 3vh;
    left: 0;
    border-right: 0.2rem var(--brightgreen) solid;
}
#MoreMe-container .position_2 {
    top: 12vh;
    left: 20vw;
    border-bottom: 0.2rem var(--brightgreen) solid;
}
#MoreMe-container .position_3 {
    bottom: 30vh;
    right: 0;
    border-left: 0.2rem var(--brightgreen) solid;
}
#MoreMe-container .position_4 {
    bottom: 3vh;
    right: 12vw;
    border-top: 0.2rem var(--brightgreen) solid;
}
#MoreMe-container .position_5 {
    top: 20vh;
    left: 0;
    border-right: 0.2rem var(--brightgreen) solid;
}
#MoreMe-container .position_6 {
    top: 20vh;
    right: 0;
    border-bottom: 0.2rem var(--brightgreen) solid;
}
#MoreMe-container .position_7 {
    bottom: 10vh;
    left: 20vw;
    border: 0.2rem var(--brightgreen) solid;
}
#MoreMe-container .MoreMe span {
    font-size: 1rem;
    font-weight: 300;
    font-style: normal;
    float: right;
    margin-top: 1.9vmin;
    display: block;
    width: 1rem;
    height: 1rem;
    overflow: hidden;
    text-align: right;
}
.large-text {
    max-width: 100%;
    margin: auto;
    padding: 3.8vmin;
    padding-top: 20vmin;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.large-text p {
    font-weight: 400;
    font-size: 2.4rem;
    letter-spacing: 2px;
    font-style: normal;
    color: var(--purewhite);
    text-shadow: 1px 3px 3px var(--shadowtext);
    height: 70vh;
    overflow: auto;
}
.large-text p b {
    font-weight: 400;
    color: var(--textred);
}
.mouse {
    font-size: 1.2rem;
    border-radius: 100%;
    color: var(--brightgreen);
    position: fixed;
}
.Dark {
    background-color: var(--black);
}
.FullHeight {
    height: 100vh;
    width: 100% !important;
}
#Patterns-container {
    position: absolute;
    height: 100vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
#Patterns-container .work {
    position: absolute;
    border-radius: 100%;
    background-color: var(--black);
    cursor: pointer;
}
#Patterns-container .work a {
    display: block;
    height: 100%;
    width: 100%;
} 
#Patterns-container .work img {
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    border-radius: 100%;
    display: none;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
#Patterns-container .work.position_1 {
    top: 10%;
    left: 5%;
    width: 18vmin;
    height: 18vmin;
    z-index: 1;
    animation-direction: alternate;
}
#Patterns-container .work.position_2 {
    top: 40%;
    left: 7%;
    width: 36vmin;
    height: 36vmin;
    z-index: 3;
    animation-direction: alternate-reverse;
}
#Patterns-container .work.position_3 {
    top: 20%;
    right: 55%;
    width: 28vmin;
    height: 28vmin;
    z-index: 2;
    animation-direction: alternate;
}
#Patterns-container .work.position_4 {
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 45vmin;
    height: 45vmin;
    z-index: 4;
    animation-direction: alternate;
}
#Patterns-container .work.position_5 {
    top: 20%;
    left: 55%;
    width: 28vmin;
    height: 28vmin;
    z-index: 2;
    animation-direction: alternate;
}
#Patterns-container .work.position_6 {
    top: 40%;
    right: 7%;
    width: 36vmin;
    height: 36vmin;
    z-index: 3;
    animation-direction: alternate-reverse;
}
#Patterns-container .work.position_7 {
    top: 10%;
    right: 5%;
    width: 18vmin;
    height: 18vmin;
    z-index: 1;
    animation-direction: alternate;
}
#Patterns-container span {
    padding: 3.8vmin;
    font-style: normal;
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 0.15rem;
    color: var(--textwhite);
    display: block;
    margin: 0;
    position: absolute;
    z-index: 6;
    overflow: hidden;
    text-align: center;
}
#Patterns-container span:first-letter {
    font-size: 2.2rem;
    color: var(--textred);
}
#Patterns-container span.position {
    width: 50%;
    bottom: 30%;
    left: 50%;
    transform: translate(-50%, 0);
}
.icon-gift1 {
    color: var(--blue);
}
.center-large {
    position: fixed;
    background-color: var(--black);
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-right: 6%;
    padding-left: 6%;
}
.center-large img {
    max-width: 75%;
    max-height: 75%;
    box-sizing: border-box;
    margin: auto;
    display: none;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.center-large .back {
    position: absolute;
    top: 2.5%;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 1.3vmin;
    text-decoration: none;
    color: var(--grey);
    font-size: 1.2rem;
    cursor: pointer;
    margin-top: 2.5vmin;
}
.center-large .icon-previous {
    position: absolute;
    top: 55%;
    left: 5%;
    transform: translate(-50%, -100%);
    padding: 1.3vmin;
    text-decoration: none;
    color: var(--grey);
    font-size: 1.2rem;
    cursor: pointer;
}
.center-large .icon-next {
    position: absolute;
    top: 55%;
    left: 95%;
    transform: translate(-50%, -100%);
    padding: 1.3vmin;
    text-decoration: none;
    color: var(--grey);
    font-size: 1.2rem;
    cursor: pointer;
}
@keyframes DiscoveryShadow {
    0% {
        box-shadow: none;
    }
    17% {
        box-shadow: 3px 0 1px 1px var(--shadow1), -3px 0 1px 1px var(--shadow2);
    }
    19% {
        box-shadow: 3px 3px 1px 1px var(--shadow1), -3px -3px 1px 1px var(--shadow2);
    }
    23% {
        box-shadow: 0 3px 1px 1px var(--shadow1), 0 -3px 1px 1px var(--shadow2);
    }
    29% {
        box-shadow: -3px 3px 1px 1px var(--shadow1), 3px -3px 1px 1px var(--shadow2);
    }
    31% {
        box-shadow: -3px 0 1px 1px var(--shadow1), 3px 0 1px 1px var(--shadow2);
    }
    37% {
        box-shadow: -3px -3px 1px 1px var(--shadow1), 3px 3px 1px 1px var(--shadow2);
    }
    41% {
        box-shadow: 0 -3px 1px 1px var(--shadow1), 0 3px 1px 1px var(--shadow2);
    }
    47% {
        box-shadow: 3px -3px 1px 1px var(--shadow1), -3px 3px 1px 1px var(--shadow2);
    }
    100% {
        box-shadow: none;
    }
}
.discovery-shadow {
    animation: DiscoveryShadow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: none;
}
.fix-shadowR {
    box-shadow: 4px 6px 10px 3px var(--shadow3), 4px 6px 100px 10px var(--shadow4);
}
.fix-shadowL {
    box-shadow: -4px 6px 10px 3px var(--shadow3), -4px 6px 100px 10px var(--shadow4);
}
.fix-shadowC {
    box-shadow: 0 6px 10px 3px var(--shadow3), 0 6px 100px 10px var(--shadow4);
}
.grid.Projects {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.item-title-half:nth-of-type(1) {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 30;
    grid-area: 2/1/3/31;
}
.item-title-half:nth-of-type(2) {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 30;
    grid-area: 3/1/4/31;
}
.item-brief {
    -ms-grid-row: 5;
    -ms-grid-row-span: 9;
    -ms-grid-column: 17;
    -ms-grid-column-span: 14;
    grid-area: 5/17/14/31;
}
.item-close {
    -ms-grid-row: 12;
    -ms-grid-row-span: 2;
    -ms-grid-column: 17;
    -ms-grid-column-span: 14;
    grid-area: 12/17/14/31;
}
.item-album {
    -ms-grid-row: 4;
    -ms-grid-row-span: 11;
    -ms-grid-column: 1;
    -ms-grid-column-span: 30;
    grid-area: 4/1/15/31;
}
.item-extra {
    -ms-grid-row: 15;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 30;
    grid-area: 15/1/16/31;
}
.item-extra {
    display: none;
}
.item-title-half {
    width: 150%;
    position: relative;
    overflow: hidden;
    font-style: normal;
    font-weight: 300;
    justify-self: center;
    align-self: stretch;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.grid .item-title-half h3 {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 5px;
    color: var(--textblack);
    text-align: center;
    width: 100%;
    padding-top: 3.8vmin;
    padding-bottom: 3.8vmin;
}
.item-title-half:nth-of-type(1) h3 {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(0, 50%);
    color: var(--textgreen);
    padding: 0 !important;
}
.item-title-half:nth-of-type(1) h3.animate {
    animation: RL1;
    animation-duration: 5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.item-title-half:nth-of-type(2) h3 {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(0, -50%);
    color: var(--textblue);
}
.item-title-half:nth-of-type(2) h3.animate {
    animation: RL2;
    animation-duration: 5s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
@keyframes RL1 {
    0% {
        transform: translate(-100%, 50%);
    }
    5% {
        transform: translate(0, 50%);
    }
    50% {
        transform: translate(0, 50%);
    }
    95% {
        transform: translate(0, 50%);
    }
    100% {
        transform: translate(100%, 50%);
    }
}
@keyframes RL2 {
    0% {
        transform: translate(-100%, -50%);
    }
    5% {
        transform: translate(0, -50%);
    }
    50% {
        transform: translate(0, -50%);
    }
    95% {
        transform: translate(0, -50%);
    }
    100% {
        transform: translate(100%, -50%);
    }
}
.grid .item-brief {
    padding: 3.8vmin;
    background-color: rgba(223, 232, 231, 0.9);
    z-index: 1;
    display: none;
    justify-self: stretch;
    align-self: stretch;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.grid .item-brief h4 {
    max-height: 100%;
    overflow: hidden;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--textblackLOGO);
}
.grid .item-brief p {
    height: 27vh;
    overflow: auto;
    font-size: 0.9rem;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: var(--textblackLOGO);
    margin-bottom: 3.8vmin;
    margin-top: 1.9vmin;
    padding-right: 1rem;
}
.grid .item-brief a {
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 300;
    color: var(--textblue);
    padding-top: 1.3vh;
    padding-bottom: 1.3vh;
}
.grid .item-brief a.client {
    overflow: auto;
    font-size: 0.8rem;
    font-style: normal;
    letter-spacing: 1.2px;
    color: var(--textdarkgrey);
    display: block;
}
.grid .item-brief .client span {
    padding-right: 0.5rem;
}
.grid .item-close {
    z-index: 1;
    display: none;
    justify-self: center;
    align-self: end;
}
.grid .item-close span.icon-cancel-circle {
    font-size: 0.9rem;
    color: var(--black);
    text-align: center;
    font-weight: 400;
    display: block;
    padding: 1.9vmin;
}
.item-album {
    width: 100vw;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 1.9vmin 24px 1.9vmin 24px;
    justify-self: stretch;
    align-self: center;
}
.item-album div {
    width: 100%;
    position: relative;
    min-height: 412px;
}
.item-album div img {
    min-height: 400px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
.item-extra {
    position: relative;
    height: 100%;
    justify-self: center;
    align-self: end;
}
.item-extra a {
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    color: var(--textblack);
    padding-top: 1.3vmin;
    padding-bottom: 3.8vmin;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.item-extra span.icon-search1 {
    font-size: 1rem;
    color: var(--red);
    font-weight: 400;
    padding-top: 1.3vmin;
    padding-bottom: 3.8vmin;
    position: absolute;
    top: -0.65vh;
    left: -0.5rem;
    margin-left: 0.5rem;
    z-index: -1;
}
.item-album,
.item-brief,
.item-extra,
.item-title {
    overflow: hidden;
}
.item-form {
    -ms-grid-row: 1;
    -ms-grid-row-span: 11;
    -ms-grid-column: 2;
    -ms-grid-column-span: 28;
    grid-area: 1/2/12/30;
    justify-self: stretch;
    align-self: stretch;
}
.item-form {
    padding: 3vmin 0.75rem 1.9vmin 0.75rem;
    overflow: auto;
    color: var(--textblack);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.item-form label {
    display: block;
    margin: auto;
    margin-bottom: 0.2vmin;
    font-family: hatch;
    font-size: 0.8rem;
    font-weight: 300;
    width: 100%;
    font-weight: 400;
}
.item-form label:first-letter {
    color: var(--textred);
}
.item-form select {
    margin: auto;
    display: block;
    margin-bottom: 1.8vmin;
    font-family: hatch;
    font-size: 0.8rem;
    font-weight: 300;
    width: 100%;
    padding-left: 0.5rem;
    cursor: crosshair;
    color: var(--textblack);
}
.item-form input[type="checkbox"] {
    color: var(--textblack);
}
.item-form input[type="text"] {
    margin: auto;
    margin-top: 1.8vmin;
    margin-bottom: 1.8vmin;
    font-family: hatch;
    font-size: 0.8rem;
    font-weight: 300;
    padding-left: 0.5rem;
    cursor: crosshair;
    color: var(--textblack);
    height: 1.5rem;
    border-radius: 0.5rem;
    border: 1px var(--grey) solid;
    background-color: transparent;
}
.item-form input[type="checkbox"] ~ label {
    display: inline;
    margin-right: 1.2rem;
}
.item-form p {
    margin: auto;
    margin-top: 3vmin;
    margin-bottom: 1.5vmin;
    font-family: hatch;
    font-size: 0.9rem;
    width: 100%;
    font-weight: 300;
}
.item-form p span {
    color: var(--textred);
    font-style: italic;
    font-weight: 400;
}
.item-form input[type="submit"] {
    margin: auto;
    font-family: hatch;
    font-size: 0.9rem;
    font-weight: 400;
    width: 100%;
    border: none;
    border-radius: 0.5rem;
    background-color: var(--yellow);
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    color: var(--textblack);
    cursor: pointer;
}
.item-form :focus {
    outline: 0;
}
.item-thanks {
    -ms-grid-row: 13;
    -ms-grid-row-span: 3;
    -ms-grid-column: 2;
    -ms-grid-column-span: 28;
    grid-area: 13/2/16/30;
    justify-self: stretch;
    align-self: stretch;
}
.item-thanks {
    padding: 3vmin 0.75rem 1.9vmin 0.75rem;
    display: block;
    background-image: url(../img/thanks.jpg);
    background-repeat: repeat;
    background-size: contain;
    background-position: center;
    border-radius: 0.75rem;
    font-family: hatch;
    font-size: 3rem;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    letter-spacing: 0.3rem;
    color: var(--textpink);
    margin: auto 0 auto 0;
}