/*-------- 
Text Domain: https://laramm.es/
Author URI: https://laramm.es/
Description: Personal portfolio.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: portfolio, single-column, clean, minimal.

All files, unless otherwise stated, are released under the GNU General Public License. 
© All works - 2023 Lara Martínez - All Rights Reserved.
--------*/

@charset "utf-8";
* {
    box-sizing: border-box
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.clear:before, .clear:after {
    content: "";
    display: table;
}
.clear:after {
    clear: both;
}
.clear {
    zoom: 1;
}

html {
    min-height: 100vh;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
}
body {
    position: relative;
    height: auto;
    min-height: 100vh !important;
    overflow: auto;
    margin: 0;
    opacity: 1 !important;
    background-size: cover;
    background-position: center;
    font-family: 'garnett_regular', sans-serif;
    font-size: 0.65rem;
    line-height: 0.75rem;
    text-align: center;
    color: #000000;
    border-color: #000;
    outline: 0;
}

body, html {
    position: fixed;
    width: 100%;
    height: 100%;
    -ms-overflow-style: none;
    overflow: hidden!important;
}

body.white_font, body.white_font a {
    color: white;
    text-decoration: none;
}

.bg_fill {
    border-top: 1px solid #000;
    background: rgb(255,255,255);
}
.bg_gradient {
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6012605725884104) 50%, rgba(255,255,255,0) 100%);
}


/*-- !OVERFLOW --*/

.overflow_hidden {
    overflow: hidden !important
}

.auto_scroll {
    position: relative;
    width: 100%;
    height: 100%;
    -ms-overflow-style: none;
    overflow: scroll !important;
}


/*-- !TRANSITION --*/

.page_transition {
    z-index: 999;
    display: block;
    position: relative;
}
.overlay {
    z-index: 100;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: black;
}
.preloader {
    z-index: 100;
    position: fixed;
    left: -8px;
    font-family: 'garnett_light', sans-serif;
    text-align: left;
    text-transform: uppercase;
    color: white;
    font-size: 1.65rem;
    padding: 24px;
}


/*-- !CURSOR --*/

    body .cursor {
        display: none;
    }

@media screen and (min-width: 1024px) {
    body .cursor {
        display: inherit !important;
        pointer-events: none;
    }
    body .cursor_circle {
        z-index: 999;
        position: fixed;
        top: 0;
        left: 0;
    }
    body .cursor_circle {
        mix-blend-mode: difference;
    }
    .white {
        fill: white;
    }
    .black {
        fill: black;
    }
    .multi {
        animation: colorchange 8s infinite;
    }
    @keyframes colorchange {
        0% {fill: blue;}
        10% {fill: chartreuse;}
        20% {fill: crimson;}
        30% {fill: darkkhaki;}
        40% {fill: darkorange;}
        50% {fill: darkviolet;}
        60% {fill: dodgerblue;}
        70% {fill: gold;}
        80% {fill: indigo;}
        90% {fill: sandybrown;}
        100% {fill: lime;}
    }
}    


/*-- !TYPOGRAPHY --*/

@font-face {
    font-family: 'garnett_regular';
    src: url('assets/fonts/garnett_regular.woff2') format('woff2'),
         url('assets/fonts/garnett_regular.woff') format('woff'),
         url('assets/fonts/garnett_regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'garnett_regular_italic';
    src: url('assets/fonts/garnett_regular_italic.woff2') format('woff2'),
         url('assets/fonts/garnett_regular_italic.woff') format('woff'),
         url('assets/fonts/garnett_regular_italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'garnett_light';
    src: url('assets/fonts/garnett_light.woff2') format('woff2'),
         url('assets/fonts/garnett_light.woff') format('woff'),
         url('assets/fonts/garnett_light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'garnett_light_italic';
    src: url('assets/fonts/garnett_light_italic.woff2') format('woff2'),
         url('assets/fonts/garnett_light_italic.woff') format('woff'),
         url('assets/fonts/garnett_light_italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

a, div, figure, footer, header, img, li, ul {
    box-sizing: border-box
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
p {
    margin: 0;
    text-decoration: none;
}
a {
    color: #000;
    text-decoration: none;
}


/*-- !HOVER --*/

.hover_destination {
    display: inline-block;
    overflow: hidden;
}
.hover_destination span {
    position: relative;
    display: inline-block;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}
.hover_destination span::before {
    position: absolute;
    white-space: nowrap;	
    top: 100%;
    content: attr(data-hover);
}
.hover_destination:hover span,
.hover_destination:focus span {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
.hover_underline_white::after {
    z-index: 100;
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #fff;
    transition: .3s;
}
.hover_underline_white:hover::after {
    width: 100%;
    transition: .3s;
}
.hover_underline_black::after {
    z-index: 100;
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #000;
    transition: .3s;
}
.hover_underline_black:hover::after {
    width: 100%;
    transition: .3s;
}
.on_hover {}

.active {
    opacity: 0.5;
}

/*-- !LAYOUT --*/

.main_wrapper {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
}
.main_wrapper:after {
    z-index: 100;
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    mix-blend-mode: multiply;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease-in-out 0s;
    -moz-transition: opacity .25s ease-in-out 0s;
    -ms-transition: opacity .25s ease-in-out 0s;
    -o-transition: opacity .25s ease-in-out 0s;
}

.main_wrapper, .on_scroll {
    position: absolute;
    overflow: scroll !important;
}

.main_wrapper, .no_scroll {
    position: absolute;
    overflow: hidden !important;
}

.main_wrapper .header_wrapper {
    z-index: 100;
    display: flex;
    flex-flow: wrap;
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
}

.fixed {
    position: fixed !important;
    top: 0;
    left: 0;
}

.main_wrapper .header_wrapper div {
    flex: 1 1 auto;
    padding: 4px 16px;
}
.main_wrapper .header_wrapper nav {
    display: inline-block;
    flex: 1 1 auto;
    padding: 8px 16px;
}
.title_name, .title_surname {
    position: relative;
    left: -4px;
    width: 40%;
    font-family: 'garnett_light', sans-serif;
    font-size: 3.75rem;
    line-height: 4rem;
    text-align: left;
}
.title_name_surname {
    width: 100%;
    font-family: 'garnett_regular', sans-serif;
    text-align: left;
    margin-top: 12px;
}
.information {
    display: inline-block;
    text-align: left;
}
.location {
    display: none;
    text-align: left;
}
.contact {
    display: none;
    text-align: left;
}
.head_nav ul {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: right;
}
.head_nav ul li {
    display: inline-block;
    padding: 0 0 0 32px;
    list-style: none;  
}
.head_nav ul a {
    display: inline-block;
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
}


/*-- !PAGINATION --*/

.main_wrapper .pagination {
    z-index: 100;
    display: none;
    width: 100%;
    height: 64px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #fff;
    pointer-events: none;  
}
.main_wrapper .pagination label {
    display: flex;
    width: 98%;
    position: relative;
    top: 40%;
    left: 0;
    margin: 0 auto;
    padding: 0;
    pointer-events: auto;
}
.main_wrapper .pagination span {
    flex: 1 1 auto;
    font-family: 'garnett_regular', sans-serif;
    font-size: 0.65rem;
}
.main_wrapper .pagination span.active {
    opacity: .2;
}
.main_wrapper .pagination span:hover {
    opacity: .2;
}


/*-- !SLIDER --*/

.main_wrapper .website_slider {
}
.main_wrapper .website_slider:after {
    content: 'SIGUIENTE';
    right: 0;
}
.main_wrapper .website_slider:before {
    content: 'ANTERIOR';
    left: 0;
}
.main_wrapper .website_slider:after, .main_wrapper .website_slider:before {
    z-index: 100;
    position: fixed;
    top: calc(100% - 32px);
    padding: 8px 16px;
    transform: translate(0%,-40%);
    -webkit-transform: translate(0%,-40%);
    -ms-transform: translate(0%,-40%);
    -moz-transition: opacity .25s ease-in-out 0s;
    -ms-transition: opacity .25s ease-in-out 0s;
    -o-transition: opacity .25s ease-in-out 0s;
    transition: opacity .25s ease-in-out 0s;
    cursor: pointer;
}
.main_wrapper .website_slider .website_slider_wrapper {}

.main_wrapper .website_slider .website_slider_wrapper .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -moz-transition: background-color .3s ease-in-out 0s;
    -ms-transition: background-color .3s ease-in-out 0s;
    -o-transition: background-color .3s ease-in-out 0s;
    transition: background-color .3s ease-in-out 0s;
}
.main_wrapper .website_slider .website_slider_wrapper .slide .slide_image {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    position: relative;
    opacity: 0;
}
.main_wrapper .website_slider .website_slider_wrapper .slide .slide_image.contain_image {
    width: 75%;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
}
.main_wrapper .website_slider .website_slider_wrapper .slide.playing_video .slide_image {
    background-image: none !important;
}
.main_wrapper .website_slider .website_slider_wrapper .slide.playing_video .slide_image video {
    opacity: 1 !important;
}
.main_wrapper .website_slider .website_slider_wrapper .slide.playing_video .slide_image.fix_video video {
    width: 100%;
    height: auto;
}
.main_wrapper .website_slider .website_slider_wrapper .slide .slide_image.right_image {
    background-position: center right;
}
.main_wrapper .website_slider .website_slider_wrapper .slide .slide_image.right_image video {
    top: 50%;
    left: auto;
    right: 0;
    -webkit-transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    transform: translate(0%,-50%);
}
.main_wrapper .website_slider .website_slider_wrapper .slide .slide_image.left_image {
    background-position: center left;
}
.main_wrapper .website_slider .website_slider_wrapper .slide .slide_image.left_image video {
    top: 50%;
    left: 0;
    -webkit-transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    transform: translate(0%,-50%);
}
.main_wrapper .website_slider .website_slider_wrapper .slide .slide_image video {
    position: absolute;
    width: auto;
    height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    opacity: 0;
    pointer-events: none;
}


/*-- !PROJECT --*/

.main_wrapper .project_detail {
    display: flex;
    width: 100%;
    height: 56px;
    position: fixed;
    top: calc(100% - 112px);
    left: 0;
    border-bottom: 1px solid #fff;
    opacity: 0;
    -moz-transition: opacity .25s ease-in-out 0s;
    -ms-transition: opacity .25s ease-in-out 0s;
    -o-transition: opacity .25s ease-in-out 0s;
    transition: opacity .25s ease-in-out 0s;
}
.main_wrapper .project_detail label {
    text-transform: uppercase;
    display: inline-block;
}
.main_wrapper .current_slide .project_detail {
    opacity: 1
}
.main_wrapper .project_detail .project_name {
    display: none;
    flex: 1 1 auto;
    width: 50%;
    padding: 0px 16px;
    font-family: 'garnett_regular', sans-serif;
    font-size: 0.65rem;
    text-align: left;   
}
.main_wrapper .project_detail .project_info {
    display: none;
    flex: 1 1 auto;
    padding: 0px 16px;
    text-align: right;
}


/*-- !ABOUT --*/

.info_wrapper {
    margin: 144px 0 64px 0;
    -webkit-margin-after: 64px;
    -moz-margin-after: 64px;
    -o-margin-after: 64px;
}
.about_wrapper {
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: 90%;
    height: auto;
    text-align: left;
    margin: 0 auto;
    padding: 0;
}
.about_wrapper .column {
    flex: 1 1 auto;
    display: inline-block;
    width: 100%;
    padding: 16px 0px;
}

.about_wrapper .mirror {
    flex: 1 1 auto;
    display: none !important;
	transform: scaleX(-1);
    opacity: 0.10;
}
.about_wrapper .feature {
    flex: inherit;
    display: block;
    width: 100%;
}
.none {
    display: none !important;
}
.subheading_left, .subheading_center, .subheading_right, .number {
    font-family: 'garnett_light', sans-serif;
    font-size: 1.75rem;
    line-height: 2rem;
}
.subheading_left {text-align: left;}
.subheading_center {text-align: center;}
.subheading_right {text-align: right;}

.column img {
    border-radius: 8px;
}

.img_about {
    width: 100%;
}

.column ul {
    list-style: none;
    text-decoration: none;
    padding-left: 0;
    margin: 0;
}
.column ul li {
    padding: 0.25rem 0;
}


/*-- !DRAGGABLE --*/

.draggable_wrapper {
    display: block;
/*    width: 100%;*/
    padding: 0 16px;
    overflow-x: hidden !important;
}
.draggable {
    position:absolute;
}

.draggable_mobile {
    display: block !important;
    position: absolute;
    width: 25%;
}
.draggable_laptop {
    display: none;
    width: auto !important;
}
.draggable_desktop {
    display: none;
    width: auto !important;
}

.draggable img {
    left: -75px;
    position: relative;
    width: 30%;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.draggable figcaption {
    display: none;
    width: 100%;
    margin: 0 auto;
    padding: 8px 0;
    background-color: transparent;
}

/*-- !FOOTER --*/

.main_footer {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 56px;
    position: fixed;
    bottom: 0;
    left: 0;
}
.main_footer div {
    flex: 1 1 auto;
    transform: translate(0,40%);
    padding: 0px 16px;;
}
.main_footer div a {
    display: inline-block;
    margin: 0;
    padding: 0 8px 0 0;
    color: inherit;
    text-decoration: none;
}
.social {
    text-align: left;
}
.copy_desktop {
    display: none;
    width: 50%;
    text-align: right;
}
.copy_mobile {
    display: inline-block;
    width: 25%;
    text-align: right;
}
.appointment {
    width: 100%;
    font-family: 'garnett_regular', sans-serif;
    font-size: 1rem;
    line-height: 0.65rem;
    text-align: center;  
}


/*-- !TOUCHING --*/

.touching .main_wrapper .pagination span.active {
opacity: 1!important;
}

.touching .main_wrapper .pagination span {
opacity: .2!important;
}

.current_slide .main_wrapper .project_detail {
opacity: 1;
}

.main_wrapper .website_slider .website_slider_wrapper .slide.active_slide .slide_image {
opacity: 1;
}


/*-- !RESPONSIVE --*/

@media screen and (min-width: 768px) {
    .title_name, .title_surname {
        width: 45%;
        text-align: left;
    }
    .img_01, .img_02 {
        width: 50%;
    }
    .draggable_mobile {
        width: 25%;
    }
    
}

@media screen and (min-width: 1024px) {
    .preloader {
        z-index: 100;
        position: fixed;
        left: -8px;
        font-family: 'garnett_light', sans-serif;
        text-align: left;
        text-transform: uppercase;
        color: white;
        font-size: 7rem;
        line-height: 6.5rem;
        padding: 24px;
    }
    .draggable_mobile {
        display: none;
    }
    .draggable_laptop {
        display: block !important;
        position: absolute;
    }
    .draggable_desktop {
        display: none;
    }
    .main_wrapper .header_wrapper {
        z-index: 100;
        display: flex;
        flex-direction: row;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
        flex-flow: none;
        padding: 16px 0;
    }
    .main_wrapper .header_wrapper nav {
        padding: 0 24px;
    } 
    .main_wrapper .header_wrapper div {
        display: inline-block;
        width: 15%;
        padding: 0 24px;
    }
    .title_name, .title_surname {
        width: 45%;
        text-align: left;
        font-size: 7rem;
        line-height: 6.5rem;
    }
    .title_name_surname {
        margin-top: 0;
    }
    .main_wrapper .pagination {
        display: flex;
        flex-direction: column;
    }
    .main_wrapper .website_slider:after {
        display: none;
    }
    .main_wrapper .website_slider:before {
        display: none;
    } 
    .main_wrapper .project_detail {
        height: 64px;
        top: calc(100% - 128px);
        left: 0;
        border-bottom: none;
        opacity: 0;
    } 
    .main_wrapper .website_slider .website_slider_wrapper .slide .slide_image.contain_image {
        width: 75%;
        background-size: contain;
        background-repeat: no-repeat;
        margin: 0 auto;
    }   
    .main_wrapper .current_slide .project_detail {
        opacity: 1
    }
    .main_wrapper .project_detail .project_name {
        display: inline-block;
        flex: 1 1 auto;
        padding: 24px;
        text-align: left;   
    }
    .main_wrapper .project_detail .project_info {
        display: inline-block;
        flex: 1 1 auto;
        padding: 24px;
        text-align: right;
    }
    .info_wrapper {
        margin: 164px 0 64px 0;
        -webkit-margin-after: 64px;
        -moz-margin-after: 64px;
        -o-margin-after: 64px;
    }
    .about_wrapper {
        z-index: 100;
        display: flex;
        flex-direction: row;
        width: 100%;
        height: auto;
        text-align: left;
        padding: 12px 0;
        gap: 24px;
    }
    .about_wrapper .column {
        flex: 1 1 auto;
        display: inline-block;
        width: 15%;
        padding: 0 24px;
    }
    .about_wrapper .mirror {
        flex: 1 1 auto;
        display: inline-block !important;
        transform: scaleX(-1);
        opacity: 0.10;
    }
    .about_wrapper .feature {
        flex: inherit;
        display: block;
        width: 100%;
    }
    .none {
        display: inherit !important;
    }
    .subheading_left, .subheading_center, .subheading_right, .number {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .img_about {
      width: 20%;
      position: fixed;
      bottom: 96px;
    }
    .main_footer {
        height: 64px;
    }   
    .main_footer div {
        transform: translate(0,40%);
        -webkit-transform: translate(0%,35%);
        -ms-transform: translate(0%,35%);
        padding: 0px 24px;;
    }  
    .main_footer div a {
        padding: 0 32px 0 0;
    }
    .copy_desktop {
        display: inline-block;
    }
    .copy_mobile {
        display: none;
    }
    .draggable img {
        left: 0px;
        width: 65%;
    }
    .draggable figcaption {
        display: block;
    }
}

@media screen and (min-width: 1440px) {
    .main_wrapper .pagination label {
        width: 100%;
    }  
    .about_wrapper .feature {
        width: 75%;
        padding-bottom: 36px;
    }
    .subheading_left, .subheading_center, .subheading_right, .number {
        font-size: 2.5rem;
        line-height: 2.75rem;
    }
        .draggable_mobile {
        display: none;
    }
    .draggable_laptop {
        display: none;
    }
    .draggable_desktop {
        display: block !important;
        position: absolute;
    }
}

@media screen and (min-width: 2560px) {
    .about_wrapper .feature {
        width: 65%;
    }
    .subheading_right, .subheading_left, .subheading_center, .number {
        font-size: 3.65rem;
        line-height: 3.85rem;
    }
    .img_about {
      width: 15%;
      position: fixed;
      bottom: 96px;
    }
}