/*
Theme Name: Agencia Elévate v1.0 (2024)
Author URI: http://graficolab.cl
Description: agencialevate.cl
Author: Pablo Jiménez Marín
Version: 1.0
License: GNU/GPL Version 2 or later. http://www.gnu.org/licenses/gpl.html
Copyright:
*/

.home-hero-landing{width: 100%; min-height: 110vh; background: var(--high3); overflow: hidden;}
.hero-landing-wrapper{position: absolute; left: 0; right: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; align-content: center;}
.home-landing-bg{background-blend-mode: multiply;background-size: cover;filter: grayscale(0) blur(0px); opacity:.1; }
.hero-landing-left{width: 90%; padding: 30px 5%; height: calc(60vh - 60px); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;}
.hero-landing-enter-left{transform: translateX(-200px); opacity: 0;}
.hero-landing-left-h1{font-size: 2.5em; width: 100%; margin-top: 00px; line-height: 1em; color:var(--bg1); font-family: var(--font1); text-transform: uppercase; font-weight: 800;}
.hero-landing-left-txt{font-size: 1.2em; width: 100%; line-height: 1.3em; color:var(--bg1); font-family: var(--font1); margin-top: 20px; margin-bottom: 0px;}
.hero-landing-right{width: 100%; min-height: 40vh;}
.hero-landing-enter-right{transform: translateX(200px); opacity: 0;}

.content-landing{width: 100%; display: flex; flex-direction: column; background: var(--bg1); justify-content: center; align-items: stretch; color: var(--high3);}
.content-landing-left{width: 90%; padding: 50px 5%; height: calc(100% - 200px); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; background: var(--high2);}
.content-landing-left-button{text-decoration: none; font-weight: 700; color:var(--high3); background: transparent; text-transform: uppercase; margin-top: 30px; font-family: var(--font2); box-shadow: 5px 5px 0px 0px var(--high3); overflow: hidden; margin-bottom: 40px;}
.content-landing h2{font-size: 1.8em; font-family: var(--font1); text-transform: uppercase; margin-bottom: 10px; font-weight: 800;}
.content-landing h3{font-size: 1.6em; font-family: var(--font1); text-transform: uppercase; margin-bottom: 10px; font-weight: 800;}
.content-landing p{font-size: .9em; line-height: 1.6em;}
.content-landing ul{margin:60px 0;}
.content-landing li{margin-bottom: 20px; font-size: 1em; font-weight: 700; margin-left: 2em; line-height: 1.3em;}
.content-landing li::before{content:""; position: relative; float: left; width: 1.5em; height: 1.5em; margin-top: -.25em; background: red; margin-left: -2em; background: url('images/checkmark.svg') center no-repeat; background-size: contain;}
.content-landing-right{width: calc(100% - 40px); min-height: 100%; background: var(--high3); padding: 20px 20px 150px 20px; perspective: 1000px;}
.content-landing-form{box-shadow: -20px 0px 20px -10px rgba(0,0,0,.2); width: calc(100% - 60px); padding: 30px; margin-top: 0px; margin-left: 0px; background: var(--bg1); border-radius: 30px;}



/******************/
/**DESKTOP*********/
/*****************/

@media screen and (min-width:800px){
    
.hero-landing-wrapper{flex-direction: row; justify-content: center; align-items: center; align-content: center;}
.hero-landing-left{width: 40%; padding: 100px 5%; height: calc(100% - 200px); justify-content: center;}
.hero-landing-right{width: 50%; min-height: 100%;}
.hero-landing-left-h1{font-size: 5em;}
.hero-landing-left-txt{font-size: 1.2em; margin-top: 20px; margin-bottom: -100px;}    

.content-landing{flex-direction: row;}
.content-landing-left{width: 45%; padding: 100px 5%; height: calc(100% - 200px);}
.content-landing h2{font-size: 3em;}
.content-landing h3{font-size: 1.8em;}
.content-landing p{font-size: 1.2em;}
.content-landing ul{margin:60px 0;}
.content-landing li{margin-bottom: 20px; font-size: 1.2em; font-weight: 700; margin-left: 2em; line-height: 1.3em;}
.content-landing li::before{ width: 1.5em; height: 1.5em; margin-top: -.25em; margin-left: -2em;}
.content-landing-right{width: calc(45% - 0px); padding: 50px 0;}
.content-landing-form{width: calc(100% - 200px); padding: 100px; margin-top: 20px; margin-left: -50px;}
    
    
}