/*
 * Gobal
 */

:root {
	font-size: 18px !important;
    --primary-color: rgba(0, 30, 215, 1);
    --secondary-color: rgba(255, 195, 0, 1);
    
    /*logo animation */
    --stroke-base: 8;
    --stroke-max: 48;
    --stroke-load-max: 43;
    --hover-radius: 120;
    --ease-speed: 0.08;
}

@media (max-width: 768px) {
  :root {
    font-size: 15px !important;
  }
}

body.mobile {
  font-size: 16px;
}

@font-face {
    font-family: 'Moderat';
    src: url('https://files.cargocollective.com/c3316108/Moderat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Moderat-Bold';
    src: url('https://files.cargocollective.com/c3316108/Moderat-Bold.woff') format('woff');
    font-weight: normal;
    font-style: bold;
}


body {
    font-family: 'Moderat', sans-serif !important;
	background-color: #fff;
	color: #000;  
    
}

.main_container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
}

body b, body strong {
	font-family: 'Moderat', sans-serif !important;
}

a:active {
	opacity: 0.7;
}

/* hover effect links */
.page a {
    color: black !important;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.page a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05em;
    height: 1px;

    background-color: rgba(0,0,0,.4);
    transition: background-color 0.2s ease, height 0.2s ease;
}

.page a:hover::after {
    height: 6px;
    background-color: transparent;

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3' fill='none' stroke='%23001fd6' stroke-width='1'/%3E%3C/svg%3E");

    background-repeat: repeat-x;
    background-size:30px 6px;
    animation: wave-move 1.2s linear infinite;
}

@keyframes wave-move {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: 60px;
    }
}

.page a.active {
	opacity: .4;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 1em;
}

blockquote {
	margin: 0;
	padding: 0 2rem 0 2em;
    border-left: solid .05rem rgba(0,0,0,.8);
}

hr {
	background: rgba(0, 0, 0, 0.3);
	border: 0;
	height: 1px;
	display: block;
    margin: 2rem 0 1rem 0;
}

.content img {
	float: none;
	margin-bottom: .5em;
}

.gallery_image_caption {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: 'Moderat', sans-serif !important;
	font-style: normal;
	line-height: 1.3;	
}

/*
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/*
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: 'Moderat', sans-serif !important;
	font-style: normal;
	line-height: 1.3;
}

[data-predefined-style="true"] bodycopy a {
	color: rgb(105, 143, 255);
	padding-bottom: 0.1em;
	border-bottom: 0.0em solid rgba(127, 127, 127, 0.2);
	text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {

}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: 'Moderat', sans-serif !important;
	font-style: normal;
	font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
	font-size: 1.3rem;
	line-height: 1.2;
	
    
    border-left: 
        0.05rem 
        solid 
        rgba(0, 0, 0, 0.8);
    border-top: 
        0.05rem 
        solid 
        rgba(0, 0, 0, 0.8);
    
	padding: 0.4rem 0.8rem;
    margin: 0 0 1rem 0;
	}

[data-predefined-style="true"] h1 a {
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"] h2 {
	font-family: 'Moderat', sans-serif !important;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-size: 1.3rem;
	line-height: 1.2;
    text-align: right;
    
    border-right: 
        0.05rem 
        solid 
        rgba(0, 0, 0, 0.8);
    border-top: 
        0.05rem 
        solid 
        rgba(0, 0, 0, 0.8);
    
	padding: 0.4rem 0.8rem;
    margin: 0 0 2rem 0;
}

[data-predefined-style="true"] h2 a {
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: .8rem;
	line-height: 1.3;
	font-family: 'Moderat', sans-serif !important;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
}

[data-predefined-style="true"] small a {
	color: rgba(0, 0, 0, 0.35) !important;
	border-bottom-width: 0em;
}

/*
 * Breakpoints
 */


[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: 0 /*!content_left*/;
	margin-right: auto /*!content_left*/;
	text-align: left /*!text_center*/;
}

[data-css-preset] body {
	background-color: rgb(250, 250, 250)/*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100% /*!content_left*/;
}

[data-css-preset] .content_padding {
	padding-top: 5rem /*!main_margin*/;
	padding-bottom: 5rem /*!main_margin*/;
	padding-left: 5rem /*!main_margin*/;
	padding-right: 5rem /*!main_margin*/;
}


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/*
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: rgba(0, 0, 0, 0)/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 0rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: 0rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: 0rem/*!responsive_thumbnails_padding*/; 
}


.thumb_image {
    position: relative;
    padding-bottom: 110% !important;
    overflow: visible;

    transition: filter 0.3s ease, transform 0.3s ease;
}

.thumb_image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    max-width: 60%;
    height: auto;
    
    filter: drop-shadow(.2rem .2rem .2rem rgba(0,0,0,0.2)) grayscale(1);

    transition: filter 0.3s ease, transform 0.3s ease ;
}


.thumbnail:hover .thumb_image {
    transform: translateY(-.5rem);
    filter: grayscale(0);
}

.thumbnail:hover .thumb_image img {
    filter: drop-shadow(.5rem .5rem .6rem rgba(0,0,0,0.15)) grayscale(0);
    transform: translate(-50%, calc(-50% - .4rem));
}


.thumbnail {
	position: relative;
    margin-bottom: 8rem;
    border-bottom: 0.05rem solid rgba(0, 0, 0, 0.8);;
}

.thumbnail .title {
    display: inline-block;
    vertical-align: baseline;

    font-size: 1rem;
    font-weight: normal;
    color: rgba(0,0,0,0.85);
    font-family: 'Moderat', sans-serif !important;
    line-height: 1.1;

    border-left: 0.05rem solid rgba(0,0,0,0.8);
    padding: 0.4rem 0.6rem 0.8rem 0.8rem;
}

.thumbnail .tags {
    position: absolute;
    right: 1.6rem;
    bottom: .4rem;
    margin-top: 1.5rem;
    margin-left: 0.8rem;
    margin-bottom: 0.5rem;
    font-size: 0.6rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.45);
	font-family: 'Moderat', sans-serif !important;
	font-style: normal;
	line-height: 1.2;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 0.45);
    text-decoration: none;
}

.thumbnails .tags a {
    display: inline;
    color: rgba(0,0,0,0.45);
    text-decoration: none;
    border-bottom: 0;
}

.thumbnails .has_title .tags {
	margin-top: 0rem;
}


/* MOBILE THUMBS */
body.mobile .thumbnail {
    margin-bottom: 4rem;
}

body.mobile .thumbnail .title {
	padding: 0.4rem 0.6rem 1.5rem 0.8rem;
}

body.mobile .thumbnail .tags {
	right: auto;
    bottom: 0rem;
}


/*
 * Thumb specific
 */

/*PFP THUMB -- -- -- */
[data-id="38100164"].thumb_image {
  transform-origin: center;
}

[data-id="38100164"] .thumb_image:hover {
  animation: subtle-wiggle .6s ease-out 0.4s 1;
}

@keyframes subtle-wiggle {
  0%   { transform: translateX(0) rotate(0deg) translateY(-.5rem); }
  20%  { transform: translateX(-.4rem) rotate(-1deg) translateY(-.5rem); }
  40%  { transform: translateX(.4rem)  rotate(1deg) translateY(-.5rem); }
  60%  { transform: translateX(-.2rem) rotate(-0.5deg) translateY(-.5rem); }
  80%  { transform: translateX(.2rem)  rotate(0.5deg) translateY(-.5rem); }
  100% { transform: translateX(0) rotate(0deg) translateY(-.5rem); }
}

/* CAMPAGNES THUMB -- -- -- */
[data-id="38112586"] .thumb_image {
  position: relative;
}

[data-id="38112586"] .thumb_image::before,
[data-id="38112586"] .thumb_image::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;

  background-repeat: no-repeat;
  background-position: center center;

  filter: drop-shadow(.2rem .2rem .2rem rgba(0,0,0,0.2)) grayscale(1);
  transition: transform .3s ease, filter .3s ease;
}

/* BEFORE */
[data-id="38112586"] .thumb_image::before {
  background-image: url("https://freight.cargo.site/t/original/i/a3d41348bf8c4d445f3742d9cdbbac325705176a5c1d54a27c294f684155ef2b/thumb-2.png");
  background-size: 70% auto;
  transform: rotate(-2deg);
}

[data-id="38112586"]:hover .thumb_image::before {
  transform: translateX(-8rem) rotate(-5deg);
}

/* AFTER */
[data-id="38112586"] .thumb_image::after {
  background-image: url("https://freight.cargo.site/t/original/i/03aab8964f26cd34be80c329b8eb0527f93f413e4528660d7edd49495359d056/thumb-3.png");
  background-size: 80% auto;
  transform: rotate(2deg);
  z-index: -1;
}

[data-id="38112586"]:hover .thumb_image::after {
  transform: translateX(6rem) rotate(6deg);
}

/* HOVER */
[data-id="38112586"]:hover .thumb_image::before,
[data-id="38112586"]:hover .thumb_image::after {
  filter: drop-shadow(.5rem .5rem .6rem rgba(0,0,0,0.15)) grayscale(0);
}


/* VIDEO THUMB -- -- -- */
[data-id="38113079"] .thumb_image {
  position: relative;
}

[data-id="38113079"] .thumb_image::before,
[data-id="38113079"] .thumb_image::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;

  background-repeat: no-repeat;
  background-position: center center;

  filter: drop-shadow(.2rem .2rem .2rem rgba(0,0,0,0.2)) grayscale(1);
  transition: transform .3s ease, filter .3s ease;
}

/* BEFORE */
[data-id="38113079"] .thumb_image::before {
  background-image: url("https://freight.cargo.site/t/original/i/689793ceacc238263e7c1afe33073c2fea37890dfc4c0dfa2598dfb30432615e/thumb-2.png");
  background-size: 70% auto;
  transform: rotate(-2deg);
}

[data-id="38113079"]:hover .thumb_image::before {
  transform: translateX(-8rem) rotate(-5deg);
}

/* AFTER */
[data-id="38113079"] .thumb_image::after {
  background-image: url("https://freight.cargo.site/t/original/i/31aa6079d2f987113867b3224cfc62272c66c47ff19f8a0f0aa49b96c02ba71f/thumb-3.png");
  background-size: 80% auto;
  transform: rotate(2deg);
  z-index: -1;
}

[data-id="38113079"]:hover .thumb_image::after {
  transform: translateX(6rem) rotate(6deg);
}

/* HOVER */
[data-id="38113079"]:hover .thumb_image::before,
[data-id="38113079"]:hover .thumb_image::after {
  filter: drop-shadow(.5rem .5rem .6rem rgba(0,0,0,0.15)) grayscale(0);
}


/* INFOGRAPHIC THUMB -- -- -- */
[data-id="38110627"] .thumb_image {
  position: relative;
}

[data-id="38110627"] .thumb_image::before,
[data-id="38110627"] .thumb_image::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;

  background-repeat: no-repeat;
  background-position: center center;

  filter: drop-shadow(.2rem .2rem .2rem rgba(0,0,0,0.2)) grayscale(1);
  transition: transform .3s ease, filter .3s ease;
}

/* BEFORE */
[data-id="38110627"] .thumb_image::before {
  background-image: url("https://freight.cargo.site/t/original/i/e68cb38c9107b4073a44fc597abdc86b88c2456aeec5306b276dec440b16f878/thumb-2.jpg");
  background-size: 70% auto;
  transform: rotate(-2deg);
}

[data-id="38110627"]:hover .thumb_image::before {
  transform: translateX(-8rem) rotate(-5deg);
}

/* AFTER */
[data-id="38110627"] .thumb_image::after {
  background-image: url("https://freight.cargo.site/t/original/i/4f0d9f708ec81004fdd9889eb6f1b229a763fe700d492e56cc03bbbb2aeb80d4/thumb-3.png");
  background-size: 80% auto;
  transform: rotate(2deg);
  z-index: -1;
}

[data-id="38110627"]:hover .thumb_image::after {
  transform: translateX(6rem) rotate(6deg);
}

/* HOVER */
[data-id="38113079"]:hover .thumb_image::before,
[data-id="38113079"]:hover .thumb_image::after {
  filter: drop-shadow(.5rem .5rem .6rem rgba(0,0,0,0.15)) grayscale(0);
}

/*
 * Site Menu
 */

.custom-nav {
    position: absolute;
    top: 7rem;
    right: 5rem;

    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.nav-button {
    display: grid;
    grid-auto-flow: column;
    align-items: center;

    height: 2rem;
    width: 2rem;

    border: 0.06rem solid rgba(0,0,0,0.4);
    border-radius: 999px;

    color: rgba(0,0,0,.8);
    text-decoration: none;

    overflow: hidden;
    white-space: nowrap;

    transition:
    width 0.35s ease,
    border-color 0.35s ease;
}

.nav-button:hover {
    width: 8rem;
    border-color: rgba(0,0,0,.6);
}

.nav-button .icon {
    width: 1.9rem;
    height: 1.9rem;

    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.nav-button .icon img {
    width: 1.0rem;
    height: 1.0rem;

    display: block;
    opacity: .4;
}

.nav-button:hover .icon img {
    opacity: .8;
}

.nav-button .label {
    text-align: right;
    padding-right: 0.8rem;
    padding-bottom: 0.15rem;

    font-family: 'Moderat', sans-serif;
    font-size: 1rem;
}

body.mobile .custom-nav {
    top: 2.5rem;
    right: 1rem;
    gap: 0.6rem;
}

body.mobile .nav-button {
	height: 2.5rem;
    width: 2.5rem;
}

body.mobile .nav-button .icon {
    width: 2.5rem;
    height: 2.5rem;
}

/*
 * Project navigation
 */

#project-navigation {
	position: fixed;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.4rem;
    
    width: 100%;
    bottom: 3rem;
    
    z-index: 9999;
}

.svg-button {
    cursor: pointer;
    width: 3rem;
    cursor: pointer;
    
    padding: .5rem;
    background-color: rgba(255,255,255,1);
    border: 0.06rem solid rgba(0,0,0,0.4);
    border-radius: 50%;
    
    
    fill: none;
    stroke: #a0a0a0;
    stroke-linecap: round;
    stroke-linejoin: round;
	stroke-width: 1.8em;
    
    transition: 
        transform 0.2s ease-in-out,
        border 0.2s ease-in-out,
        stroke 0.2s ease-in-out;
}


.svg-button path {
	transition: transform 0.2s ease-in-out;
}

.svg-button:hover {
    border: 0.06rem solid rgba(0,0,0,8);
    stroke: #2d2d2d;
}

#prev-project:hover path {
    transform: translateX(-2rem);
}

#close-project:hover {
    transform: rotate(90deg);
}

#next-project:hover path {
    transform: translateX(2rem);
}

body.mobile #project-navigation {
    bottom: .66rem;
}

/*
 * Image Zoom
 */

.content img.image-zoom:active {
    opacity: .7;
}

.content img.image-zoom {
    cursor: url('https://files.cargocollective.com/c3316108/zoom.png') 2 2, auto;
}

/*
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(0, 0, 0, 0.85) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: 'Moderat', sans-serif !important;
    font-weight: 400;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.5rem;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,.5);
    color: white;
}


/*
 * Quick View Navigation 
 */
.quick-view-navigation .left-arrow *,
.quick-view-navigation .right-arrow *,
.quick-view-navigation .close-button * {
    stroke: none !important;
    fill: none !important;
}

/*.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow,*/
.quick-view-navigation .close-button {
    background-color: rgba(0,0,0,0);
    border-radius: 999px;
    border: 0.1rem solid rgba(250,250,250,1);

    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

/*
.quick-view-navigation .left-arrow {
  background-image: url("https://files.cargocollective.com/c3316108/prev_white.svg");
}

.quick-view-navigation .right-arrow {
  background-image: url("https://files.cargocollective.com/c3316108/next_white.svg");
}
*/

.quick-view-navigation .close-button {
  background-image: url("https://files.cargocollective.com/c3316108/close_white.svg");
  background-size: 50%;
}

.quick-view-navigation .left-arrow:hover {
  transform: scale(1.06);
}

.quick-view-navigation .right-arrow:hover {
  transform: scale(1.06);
}

.quick-view-navigation .close-button:hover {
  transform: scale(1.06) rotate(90deg);
}

/*
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/*
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
   stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/*
 * Project page
 */

[grid-col="9"], [grid-col="8"]  {
  margin-top: -2.2rem;
}

/*
 * Content
 */

video {
	padding: 1.5rem;
    width: 100% !important;
    height: 50vh !important;
    background-color: rgba(0,0,0,0.05) !important;
}

poster {
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: repeat;
}

/*
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}



/*
 * Skill table
 */

.skills.heading {
	border-bottom: 
        .05rem 
        solid 
        rgba(0, 0, 0, 0.4);
}

.skills {
	border-bottom: 
        .05rem 
        solid 
        rgba(0, 0, 0, 0.2);
    padding: 0.4rem 0 0.2rem 0 !important;
}

.skill-bar {
    height: 0.2rem;
    margin-top: 0.4rem;
    margin-bottom: -0.6rem;
    
    border-radius: 99rem;
    
    background-color: var(--primary-color);
}

.skill-bar[data-skill-level="4"] {width: 100%;}
.skill-bar[data-skill-level="3"] {width: 75%;}
.skill-bar[data-skill-level="2"] {width: 50%;}
.skill-bar[data-skill-level="1"] {width: 25%;}


/*
 * Logo
 */

#logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15rem;
}

#logo {
    width: 10rem;
    overflow: visible;
}

.logo-line {
  fill: none;
  stroke: var(--primary-color);
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 0;
  pointer-events: none; /* important */
}

body.mobile #logo-wrapper {
	height: 10rem;
    justify-content: start;
    align-items: start;
}

body.mobile #logo {
	height: 3rem;
    margin-top: 2rem;
}