/*
Theme Name: FLEEEX
Author: Giuseppe Colonna
Author URI: https://www.fleeex.com/
Description: My first responsive HTML5 theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

:root {
    --navbar-height: calc(var(--wp--preset--spacing--30)*2);
    --fs-xsmall: 11px;
}


/* --------------------------------------------------------------------------------------------------------------------------- */
/* ! INTRO */
/* --------------------------------------------------------------------------------------------------------------------------- */

.main_trans_section {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999999999999999;
}

.grid_trans_wrapper {
  display: grid;
  grid: repeat(5, 20%) / repeat(8, 12.5%);
  grid: repeat(2, 50%) / repeat(1, 100%);
  gap: 0;
  position: absolute;
  top: 0;
  height: 0;
  width: 100%;
  height: 100vh;
}

.grid_pixel_item {
  width: 100%;
  height: 100%;
  background: var(--base);
  animation: shrinkGridItem 1s ease-in-out forwards;
  animation-delay: 0.2s;
}

@keyframes shrinkGridItem {to {width: 0%;}}
.grid_pixel_item:first-child {right: 0;}
.grid_pixel_item:nth-child(1) {animation-delay: 0.1s;}
.grid_pixel_item:nth-child(2) {animation-delay: 0.3s;}


/*LEAVING*/
body.leaving .grid_trans_wrapper {display: grid;}
body.leaving .grid_pixel_item {
  animation: expandPixel 0.5s ease-in-out forwards;
  animation-delay: calc(var(--stagger) * 1s);
}

.grid_pixel_item:nth-child(1) { --stagger: 0; }
.grid_pixel_item:nth-child(2) { --stagger: 0.2; }
@keyframes expandPixel {from {width: 0%;}to {width: 100%;}}



/* LM STYLE */

#masthead {height: var(--navbar-height);}

.marquee-inner span img {
    width: 35vw !important;
    height: auto !important;
    margin: 0 4px;
}
@media screen and (max-width: 786px) {
    .marquee-inner span img {
        width: 55vw !important;
    }
}

.n27, .has-n-27-font-family {font-family: var(--wp--preset--font-family--n-27) !important;font-weight: 200;}
figcaption {font-size: var(--wp--preset--font-size--small) !important; text-align: center;}
.top-space {padding-top: 8rem;}


.fleeex-underline {
  position: relative;
  display: inline-block;
}

.fleeex-underline::after {
  content: "";
  position: absolute;
  border-radius: 10px;
  left: 0;
  bottom: 0;
  height: 6px;
  width: 100%;
  background: var(--primary);
  transform-origin: left;
  transform: scaleX(0);
}

.animate-underline::after {
  transform: scaleX(1);
  transition: transform 1s ease-out;
}



/* FOOTER / lm-arrowS */

/* lm-arrowS */
.lm-arrow_animation_wrap {
  position: relative;
  overflow: hidden;
}

.lm-arrow_animation {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  transition: all .5s ease-in-out;
}


.single-project__nav:hover .lm-arrow_animation {
  top: -1.65rem;
}

a:hover .lm-arrow_animation {
  top: calc(-100% - var(--wp--preset--spacing--20));
}

.lm-arrow_animation_wrap,
.lm-arrow {
  display: inline-block;
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
}

.lm-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml;utf8,<svg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M11.6 12L11.6 11L1.7 11L12 0.7L11.3 6.11959e-08L1 10.3L0.999999 0.300001L-1.02285e-06 0.300001L0 12L11.6 12Z' fill='black'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
}

h1 .lm-arrow, .h1 .lm-arrow, h1 .lm-arrow_animation_wrap, .h1 .lm-arrow_animation_wrap {
  width: calc(15px + 3.5vw);
  height: calc(15px + 3.5vw);
  max-width: 57px;
  max-height: 57px;
}

.h1 .lm-arrow::before, h1 .lm-arrow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml;utf8,<svg width='76.3' height='76.3' viewBox='0 0 76.3 76.3' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M76.3 1.1L75.2 0L1.5 73.7V0.5H0V76.3H75.8V74.8H2.6L76.3 1.1Z' fill='black'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%, auto;
}

.h1 .lm-arrow::before,
h1 .lm-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml;utf8,<svg width='76.3' height='76.3' viewBox='0 0 76.3 76.3' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M76.3 1.1L75.2 0L1.5 73.7V0.5H0V76.3H75.8V74.8H2.6L76.3 1.1Z' fill='black'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;

}


.lm-arrow.lm-arrow-top-left::before {
  transform: rotate(90deg);
}

.lm-arrow.lm-arrow-top-right::before {
  transform: rotate(180deg);
}

.lm-arrow.lm-arrow-bottom-left::before {
  transform: rotate(0deg);
}

.lm-arrow.lm-arrow-bottom-right::before {
  transform: rotate(-90deg);
}


.footer-menu li {display: inline-block;padding-right: 1rem;}


/* PROJECTS */
.row-projects .col-md-6 {margin-bottom: 8vh !important;}

@media screen and (min-width: 768px) {
  .row-projects {align-items: center;}
  .row-projects .col-md-6:nth-child(4n-2) .projects img { object-fit: contain;scale: 1;}
  .row-projects .col-md-6:nth-child(4n-2) {padding: 0 6%;}
  .row-projects .col-md-6:nth-child(3n-3) {margin-left: 25%;}
  .row-projects .col-md-6 {margin-bottom: 12vh !important;}
}

.project-gallery-image {position: absolute;width: 100%;height: 100%;}

a.fullscreen-gallery-btn {
  position: absolute;
  top: calc(var(--wp--style--root--padding-right) * 1);
  right: calc(var(--wp--style--root--padding-right) * 1);
  left: auto;
  background: var(--base);
  z-index: 9999999;
  width: 42px;
  height: 42px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: end;
  transition: all 300ms ease;
  padding: 11px;
}
a.fullscreen-gallery-btn:hover {
  width: 200px;
}
a.fullscreen-gallery-btn:hover .fsg-btn-icon svg {
  transition: all 500ms ease;
  transform: rotate(90deg);
}

.fsg-btn-icon {
  width: 42px;
  height: 42px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px;
  transition: all 300ms ease;
}
.fsg-btn-text {
  white-space: nowrap;
  width: 0;
  overflow: hidden;
  opacity: 0;
  
}
a.fullscreen-gallery-btn:hover .fsg-btn-text {
  width: 170px;
  opacity: 1;
  transition: all 300ms ease;
}


.site-branding img {
    width: auto;
    height: 23px;
}


/* ACADEMY */
.mini-th-wrap figure {margin-left: -20px !important;}
.mini-th-wrap figure img {border: 3px solid var(--base);border-radius: 50%;}
.mini-th-wrap figure:nth-child(1) {margin-left: 0px !important;z-index: 5;}
.mini-th-wrap figure:nth-child(2) {z-index: 4;}
.mini-th-wrap figure:nth-child(3) {z-index: 3;}
.mini-th-wrap figure:nth-child(4) {z-index: 2;}
.mini-th-wrap figure:nth-child(5) {z-index: 1;}


/* Logo Navbar */
.site-branding {
    max-width: 140px;
    display: inline-block;
    padding: 1rem 0;
}

body, p, .fs-p {
    font-feature-settings: "ss02" on;
    -webkit-font-smoothing: antialiased;
}


strong, b
/* h1 strong, .fs-1 strong,
h2 strong, .fs-2 strong,
h3 strong, .fs-3 strong,
h4 strong, .fs-4 strong,
h5 strong, .fs-5 strong,
h6 strong, .fs-6 strong */
{
    font-weight: 600 !important;
}

h1, .fs-1,
h2, .fs-2,
h3, .fs-3,
h4, .fs-4,
h5, .fs-5,
h6, .fs-6 {
    -webkit-font-smoothing: antialiased;
    letter-spacing: .0012rem;
}

/* CSS SCROLL ANIMATION */
@keyframes appear {
  from {
    opacity: 0;
    /* clip-path: inset( 0 0 0 100%); */
    padding-top: 75px;
  }
  to {
    opacity: 1;
    /* clip-path: inset(0 0 0 0); */
    padding-top: 0;
  }
}

.apper-block {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 35%;
}

/* Default link style */
a {text-decoration: none;}
p a {text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 33%, transparent);
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 25%;
    color: currentColor;
    opacity: .8;
}

/* Hover style */
p a:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
}

p.has-regular-font-size a {
    padding-bottom: calc(0.26rem - 2px);
}

.icon-in {
    width: 22px !important;
    height: 22px !important;
    border-radius: 0 !important;
}

.sticky-content {
    position: relative;
    height: auto;
    padding: 110px var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
    margin-bottom: -8vh;
    z-index: 9;
}


@media (min-width: 992px) { 
    .sticky-content {
        position: absolute;
        height: 100%;
        padding: 0px;
        margin-bottom: 0px;
    }
    .sticky-content .sticky-content-text {
        writing-mode: vertical-lr !important;
        display: block;
        /* margin-left: -10px !important; */
        position: sticky;
        position: -webkit-sticky;
        top: 180px;
        padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--60) !important;
        line-height: 1;
    }
    .wp-container-core-group-is-layout-1 > :where(.sticky-content):where(*),
    .wp-container-core-group-is-layout-1 > :where(.sticky-content *) {
        margin-left: -10px !important;
    }
}



/* SINGLE */
.lwptoc:first-child {
    margin-top: 0px !important;
}


.related-content-img {
    --th-size: calc(3.5rem + 2vw);
    width: var(--th-size);
    height: var(--th-size);
}

/* HELPERS */
.text-shadow {
    text-shadow: 1px 2px 8px #000000c4;
}

/* SWIPER NAV */
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {content: '';}
.swiper-button-next .lm-arrow {transform: rotate(-90deg);}
.swiper-button-prev .lm-arrow {transform: rotate(90deg);}

/* FOOTER */
.footer-top * {color: #132034 !important;}
#legal-menu {display: flex;margin: 0;} 
#legal-menu a {padding: 0 .5rem;}


/* FORM / INPUTS */

.download-form {
    display: block;
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
}

input:focus-visible {
    outline: 2px dashed #5bc994;
    }
    /* checkbox custom */
    /* Hide default checkbox */
    .small.crandon-mailchimp-form-terms,
    input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid currentColor;
        border-radius: 4px;
        position: relative;
        cursor: pointer;
        vertical-align: middle;
        margin-right: 8px;
    }

    label {
        font-size: .68rem;
        text-transform: uppercase;
      }
    textarea, input {
        width: 100%;
        max-height: 120px;
        font-family: var(--sans-serif);
        font-size: 2rem;
        border: 0 solid transparent;
        border-bottom: 2px solid var(--dark);
        padding: .5rem 0;
        background-color: transparent;
    }

    textarea{
        border-top: 2px solid var(--dark);
    }
      
    input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        border: 5px solid transparent;
        background-color: currentColor;
        background-color: #576578;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }
    
    input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 1rem;
        height: 1rem;
        border: 1px solid currentColor;
        border-radius: 4px;
        position: relative;
        cursor: pointer;
        vertical-align: middle;
        margin-right: 8px;
        border-radius: 50%;
    }

    input[type="submit"] {
        background-color: var(--dark);
        color: white;
        font-size: 1rem;
        padding: 1.5rem;
    }
    .wpcf7-list-item {
        margin-left: 0;
    }

    .wpcf7-select {
        width: 100%;
        padding: .25rem;
    }