/*!
Theme Name: Oller Abogados
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: oller-abogados
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Oller Abogados is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
  font-size: 62.5%;
  overflow-y: scroll;
    min-height: 100%;
    word-wrap: break-word;
    /* -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth; */
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}
a {
	text-decoration: none;
}
a img {
  border: none;
  text-decoration: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

@font-face {
    font-family: 'Druk XCond Super';
    src: url('fonts/DrukXCond-Super.woff2') format('woff2'),
        url('fonts/DrukXCond-Super.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root{
	--text: "Geist", serif;
	--someTitles: "Libre Caslon Display", serif;
	--druk:'Druk XCond Super', sans-serif;
	--black:#171717;
	--white:#F0F2F1;
	--yellow:#FAA61A;
	--gray:#D4D3D3;
	--cubic: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ==========================================================================
 Author's Variables
========================================================================== */

body{
	background-color: var(--black);
	min-height: 100vh;
}
.wpcf7-form-control-wrap.service{
	visibility:hidden;	
}
#master{
	position: relative;
	width: 100vw;
	padding: 0;
	margin: 0; 
	overflow-x:hidden;
	z-index: 4;
}
.site-lines{
	position: fixed;
	top:0;
	left:0;
	width: 100vw;
	height: 100vh;
	z-index: 6;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	pointer-events: none;
	
}
.site-lines .line{
	background-color:var(--gray);
	width: 1px;
	height: 100%;
	opacity: 0.05;
	transform-origin: 0 0;
	-webkit-transform: scaleY(0);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
	transform: scaleY(0);
}
.menu-open .site-lines .line{
	background-color:var(--black);
}
body.single-servicios .site-lines .line{
	background-color:var(--black);
}

.logo{
	width: 125px;
	position: fixed;
	top:35px;
	left:2%;
	z-index: 10;
	-webkit-transform: translateX(-200px);
	-moz-transform: translateX(-200px);
	-ms-transform: translateX(-200px);
	-o-transform: translateX(-200px);
	transform: translateX(-200px);
}
.logo svg{
	width: 100%;
	display: none;
}
html[lang="es-CR"] .logo-es{
	display: block;
}
html[lang="en-US"] .logo-en{
	display: block;
}
.logo svg path{
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.menu-open .logo svg path{
	fill:black;
}




.language{
	width: auto;
	position: fixed;
	top:35px;
	right:18%;
	z-index: 10;
}
.language ul{
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items: center;
	justify-content:flex-start;
	overflow: hidden;
}
.language ul li{
	width: auto;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	-o-transform: translateY(100%);
	transform: translateY(100%);
}
.language ul li a{
	color: var(--white);
	font-family: var(--text);
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    margin: 0px;
	display: inline-block;
	padding: 0 10px;
	position: relative;
	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.language ul li.current-language-menu-item a{
	color: var(--yellow) !important;
}
.menu-open .language ul li.current-language-menu-item a{
	color: var(--white) !important;
}
.menu-open .language ul li a{
	color: var(--black) !important;
}
.menu-open .language ul li.current-language-menu-item a{
	color: var(--white);
}
.language ul li:first-child a{
	padding: 0 10px 0 0;
}
.language ul li:first-child a::after{
	content: '|';
	color: var(--white);
	font-family: var(--text);
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
	position: absolute;
	right: -2px;
	top:0;
}

/* Cursor */
.cursor {
	width: 30px;
	height: 25px;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	display: flex;
	z-index: 101;
	mix-blend-mode: difference;
	transform-origin:0 0;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	-ms-transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	-o-transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	visibility: hidden;
}
.cursor.active{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
.cursor svg{
	width: 100%;
}

.history-cursor,.contact-cursor,.circle-cursor,.drag-cursor,.arrows-cursor{
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	display: flex;
	z-index: 100;
	transform-origin:0 0;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	-ms-transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	-o-transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
	visibility: hidden;
}
.history-cursor.active,.contact-cursor.active,.circle-cursor.active,.drag-cursor.active,.arrows-cursor.active{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

.history-cursor,.contact-cursor{
	width: 260px;
	height: auto;
}
.history-cursor img{
	border-radius: 5px;
	filter: grayscale(100%);
	max-width: 100%;
}
.contact-cursor img{
	border-radius: 5px;
	max-width: 100%;
}
.circle-cursor,.drag-cursor{
	background-color: var(--yellow);
	border-radius: 100%;
	width: 80px;
	height: 80px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--black);
}
.arrows-cursor{
	width: 120px;
	height: 120px;
}
.circle-cursor span,.drag-cursor span{
	display: inline-block;
	text-align: center;
	color: var(--black);
	font-family: var(--text);
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: 0.8px;
}

/* Menu Toggle */
.menu-toggle{
	position: fixed;
	top:45vh;
	left:2%;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	gap: 19px;
	align-items: center;
	z-index: 10;
	-webkit-transform: translateX(-200px);
	-moz-transform: translateX(-200px);
	-ms-transform: translateX(-200px);
	-o-transform: translateX(-200px);
	transform: translateX(-200px);
}
.burger rect{
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
	fill:white;
}
.menu-toggle:hover .burger rect{
	fill:var(--yellow) !important;
}
.menu-open .menu-toggle:hover .burger rect{
	fill:var(--white) !important;
}
.menu-open .burger rect{
	fill:black !important;
}

.b-line{
	transform-origin: 50% 50%;
	-webkit-transition:-webkit-transform 0.5s var(--cubic);
 	-moz-transition:transform 0.5s var(--cubic);
  	-ms-transition:transform 0.5s var(--cubic);
  	-o-transition:transform 0.5s var(--cubic);
  	transition:transform 0.5s var(--cubic),-webkit-transform 0.5s var(--cubic);
}
.right-line,.left-line{
	transform: rotate(0) translate(0, 0);
}
.middle-line{
	transform: scale(1);
}
.menu-open .right-line{
	transform: rotate(-40deg) translate(-9px, 0px);
}
.menu-open .left-line{
	transform: rotate(40deg) translate(9px, 0px);
}
.menu-open .middle-line{
	transform: scale(0);
}

.menu-word{
	font-family: 'Roboto', sans-serif;
	font-size: 11px;
	font-weight: medium;
	color: #fff;
	overflow: hidden;
	display: block;
	position: relative;
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.container-menu:hover .menu-word{
	color: var(--yellow) !important;
}
.menu-open .container-menu:hover .menu-word{
	color: white !important;
}
.menu-open .menu-word{
	color: black !important;
}
.menu-word span{
	display: block;
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.menu-word span:first-child{
	-webkit-transform: translateY(0);
  	-moz-transform: translateY(0);
  	-ms-transform: translateY(0);
  	-o-transform: translateY(0);
  	transform: translateY(0);
	  position: absolute;
	  top: 0;
	  left: 0;
}
.menu-open .menu-word span:first-child{
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-ms-transform: translateY(100%);
	-o-transform: translateY(100%);
	transform: translateY(100%);
}
.menu-word span:last-child{
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.menu-open .menu-word span:last-child{
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

/* Social Media */
.container-redes-sociales{
	display: flex;
	flex-direction: column;
	gap: 40px;
	justify-content: flex-start;
	position: fixed;
	z-index: 10;
	bottom:30px;
	left: 2%;
	-webkit-transform: translateX(-200px);
	-moz-transform: translateX(-200px);
	-ms-transform: translateX(-200px);
	-o-transform: translateX(-200px);
	transform: translateX(-200px);
}
.container-redes-sociales a svg path{
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.container-redes-sociales a:hover svg path{
	fill:var(--yellow) !important;
}
.menu-open .container-redes-sociales a svg path{
	fill:black !important;
}
.menu-open .container-redes-sociales a:hover svg path{
	fill:white !important;
}

/* Button */
.oller-button{
	border-radius: 60px;
	background: var(--yellow);
	border: 1px solid var(--black);
	height: 40px;
	width: 140px;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items: center;
	justify-content:flex-start;
	padding: 0 10px;
	box-sizing: border-box;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.menu-open .oller-button{
	background: var(--black);
}
.oller-button:hover{
	-webkit-transform: scale(0.95);
	-moz-transform: scale(0.95);
	-ms-transform: scale(0.95);
	-o-transform: scale(0.95);
	transform: scale(0.95);
}
.top-button{
	position: fixed;
	top:20px;
	left: 83.4%;
	z-index: 10;
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	transform: translateY(-100px);
}
.oller-button span{
	color: var(--black);
	font-family: var(--text);
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%; 
	margin-left: 20px;
	display: inline-block;
}
.menu-open .oller-button span{
	color: var(--yellow);
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.oller-button svg{
	overflow: visible;
}
.oller-button svg path{
	fill: var(--black);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.oller-button svg circle{
	stroke: var(--black);
	fill:var(--yellow);
	transform-origin: 50% 50%;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}

.oller-button:hover svg path{
	-webkit-transform: translateX(15px);
	-moz-transform: translateX(15px);
	-ms-transform: translateX(15px);
	-o-transform: translateX(15px);
	transform: translateX(15px);
}
.oller-button:hover svg circle{
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	-ms-transform: scale(0.4);
	-o-transform: scale(0.4);
	transform: scale(0.4);
	fill:var(--black);
}

.isotipo-top{
	position: fixed;
	top:15px;
	right:2%;
	width: 60px;
	z-index: 10;
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	transform: translateY(-100px);
}
.isotipo-top path{
	fill:var(--yellow);
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.menu-open .isotipo-top path{
	fill:var(--black);
}


/* Home Landing */
.landing{
	min-height: 100vh;
	width: 100vw;
}
.three-column{
	width: 49.98%;	
}
.top-links{
	margin-left: 33.32%;
	margin-top: 30px;
}
.top-links article{
	width: 100%;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
}
.top-links article a{
	width: 33.3%;
	display: block;
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	transform: translateY(-100px);
}

.oller-link{
	display: inline-block;
}
.oller-link span{
	display: block;
	color: var(--white);
	font-family: var(--text);
	font-size: 13px;
	font-style: normal;
	font-weight: 500;
	line-height: 13px; 
	letter-spacing: 0.66px;
	margin-bottom: 5px;
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.oller-link:hover span{
	color: var(--yellow);
}
.oller-link svg{
	width: 18px;
	height: 18px;
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
	  -webkit-transform: translate(0,0);
	  -moz-transform: translate(0,0);
	  -ms-transform: translate(0,0);
	  -o-transform: translate(0,0);
	  transform: translate(0,0);
}
.oller-link:hover svg{
	-webkit-transform: translate(10px);
	  -moz-transform: translate(10px);
	  -ms-transform: translate(10px);
	  -o-transform: translate(10px);
	  transform: translate(10px);
}

.landing-info{
	position: relative;
	margin-top: 20vh;
}
.landing-info h1{
	color: var(--white);
	text-align: center;
	font-family:var(--someTitles);
	font-size: 165px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
}
.landing-info h1 .cur{
	display: block;
	overflow: hidden;
}
.landing-info h1 .cur:nth-child(2){
	position: relative;
	top: -60px;
}
.landing-info h1 .cur:nth-child(3){
	position: relative;
	top: -110px;
}
.landing-info h1 .cur:nth-child(3) span{
	text-transform: uppercase;
	font-family: var(--text);
	font-weight: 700;
	font-size: 155px;
	color:var(--yellow);
}
.landing-info h1 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.landing-info article{
	width: 16.6%;
	margin-left: 50%;
}
.landing-info article h3{
	color: var(--white);
	font-family:var(--text);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height:89.435%;
	margin-bottom: 15px;
	overflow: hidden;
}
.landing-info article h3 em{
	font-family:var(--someTitles);
}
.landing-info article h3 span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.landing-info article p{
	color: var(--white);
	font-family: var(--text);
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	line-height: 146.929%;
	opacity: 0;
}
.landing-info article p strong{
	font-weight: 600;
}

.wrapper{
	width:66.8%;
	margin-left: 16.6%;
}
.facts-section{
	position: relative;
	padding-bottom: 30rem;
	margin-top: 30rem;
}
.facts-section .wrapper{
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	position: relative;
	padding: 20rem 0;
}
.facts-section .wrapper article{
	width:25%;
	overflow: hidden;
}
.facts-section .wrapper article h4{
	color: var(--white);
	font-family: var(--text);
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 161.538%;
	-webkit-transform: translateX(-100%);
  	-moz-transform: translateX(-100%);
  	-ms-transform: translateX(-100%);
  	-o-transform: translateX(-100%);
  	transform: translateX(-100%);
}
.deco-isotype::before{
	content: '';
	display: inline-block;
	width: 29px;
	height: 21px;
	background-image: url(images/layout/deco-isotipo.svg);
	background-size: 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	margin-right: 10px;
	-webkit-transform: scale(1);
  	-moz-transform: scale(1);
  	-ms-transform: scale(1);
  	-o-transform: scale(1);
  	transform: scale(1);
	-webkit-transition:-webkit-transform 0.5s var(--cubic);
 	-moz-transition:transform 0.5s var(--cubic);
  	-ms-transition:transform 0.5s var(--cubic);
  	-o-transition:transform 0.5s var(--cubic);
  	transition:transform 0.5s var(--cubic),-webkit-transform 0.5s var(--cubic);
}
.facts-section .wrapper article h4 span{
	display: inline-block;
	
}
.facts-section .wrapper article .white-line{
	height: 2px;
	background-color: var(--white);
	width: 100%;
	margin: 2rem 0 5rem;
	transform-origin: 0 0;
	-webkit-transform: scaleX(0);
  	-moz-transform: scaleX(0);
  	-ms-transform: scaleX(0);
  	-o-transform: scaleX(0);
  	transform: scaleX(0);
}
.facts-section .wrapper article .number{
	color: var(--white);
	font-family: var(--text);
	font-size: 70px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	letter-spacing: -2.4px;
	text-align: center;
	margin-bottom: 20px;
	display: block;
	overflow: hidden;
}
.facts-section .wrapper article .number span{
	display: block;
	opacity: 0;
	-webkit-transform: translateY(105%);
  	-moz-transform: translateY(105%);
  	-ms-transform: translateY(105%);
  	-o-transform: translateY(105%);
  	transform: translateY(105%);
}
.facts-section .wrapper article .number span i{
	color: var(--yellow);
}
.facts-section .wrapper article .number span em{
	font-size: 45px;
}
.facts-section .wrapper article .text{
	color: var(--white);
	font-family: var(--text);
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	line-height:128.562%;
	padding: 0 15%;
	opacity: 0;
	-webkit-transform: translateY(40px);
  	-moz-transform: translateY(40px);
  	-ms-transform: translateY(40px);
  	-o-transform: translateY(40px);
  	transform: translateY(40px);
}
.facts-section .wrapper article:nth-child(2){
	margin-top: 25rem;
}
.facts-section .wrapper article:nth-child(3){
	margin-top: 45rem;
}
.facts-section .wrapper article:nth-child(4){
	margin-top: 70rem;
}
.facts-section .wrapper article:nth-child(5){
	margin-top: 30rem;
}
.facts-section .wrapper article:nth-child(6){
	margin-top: 15rem;
}
.facts-section .wrapper article:nth-child(7){
	margin-top: 0rem;
}
.fact-1{
	position: absolute;
	top:0;
	right:0;
	width:30%;
	border-radius: 5px;
	opacity: 0;
}
.fact-2{
	position: absolute;
	top:40%;
	left:0;
	width:25%;
	border-radius: 5px;
}
.fact-3{
	position: absolute;
	bottom:0;
	right:-5%;
	width:33.2%;
	border-radius: 5px;
}

/* Marquee */
.phrase{
	position: relative;
	width: 100vw;
	height: 15rem;
	padding:5rem 0;
	--marqueeser-width: 100vw;
	--offsetser: 20vw;
	--move-initialser: calc(-25% + var(--offsetser));
	--move-finalser: calc(-50% + var(--offsetser));
}
.marqueeser {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--marqueeser-width);
	overflow: hidden;
	pointer-events: none;
	z-index: 3;
}
  
.marqueeser__inner {
	width: fit-content;
	display: flex;
	position: relative;
	transform: translate3d(var(--move-initialser), 0, 0);
	animation: marqueeser 50s linear infinite;
	transition: opacity 0.1s;
	animation-play-state: running;
	opacity: 1;
	transition-duration: 0.4s;
}
.marqueeser .marqueeser__inner > span {
	color: var(--black);
	font-family: var(--text);
	font-size: 150px;
	font-style: normal;
	font-weight: 700;
	line-height:  93.118%;
	letter-spacing: -9.34px;
	text-transform: uppercase;
	margin:0;
	white-space: nowrap;
	padding: 0 5vw;
	line-height: 1.15;
	display: block;
	position: relative;
	transition: 0.5s all;
}
.marqueeser .marqueeser__inner > span::after{
	content:'';
	position: absolute;
	background-image: url(images/layout/star.svg);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 60px;
	height: 60px;
	right: -35px;
    top: 50px;
}
.team-phrase .marqueeser .marqueeser__inner > span{
	color: var(--white);
	font-size: 560px;
	font-style: normal;
	font-weight: 200;
	line-height:100%;
	letter-spacing: -9px;
	text-transform: uppercase;
}
.team-phrase .marqueeser .marqueeser__inner > span::after{
	display: none;
}
.footer-phrase{
	height: 5rem;
    padding: 2rem 0;
}
.footer-phrase .marqueeser{
	top:2rem;
}
.footer-phrase .marqueeser .marqueeser__inner > span{
	color: var(--black);
	font-family: var(--text);
	font-size: 50px;
	font-style: normal;
	font-weight: 300;
	line-height: 100%;
	letter-spacing: -2px;
	text-transform: uppercase;
	padding: 0 2vw;
}
.footer-phrase .marqueeser .marqueeser__inner > span::after{
	content:'';
	position: absolute;
	background-image: url(images/layout/star.svg);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 20px;
    height: 20px;
    right: -9px;
    top: 15px;
}
.footer-phrase .marqueeser .marqueeser__inner > span strong{
	font-weight: 700;
}





@keyframes marqueeser {
	0% {
	  transform: translate3d(var(--move-initialser), 0, 0);
	}
  
	100% {
	  transform: translate3d(var(--move-finalser), 0, 0);
	}
}

/* History */
.white-bg{
	/* background-color: var(--white); */
	padding: 15rem 0 25rem;
}
.history-info{
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	position: relative;
	justify-content: center;
	align-items: flex-start;
}
.history-info > div{
	width: 50%;
	box-sizing: border-box;
	position:relative;
}
.history-info > div h3{
	color: var(--black);
	font-family: var(--text);
	font-size: 50px;
	font-style: normal;
	font-weight: 700;
	line-height:  103.333%;
	text-transform: uppercase;
}
.history-info > div h3 svg{
	margin-right: 30px;
}
.history-info > div h3 svg path:nth-child(1){
	opacity: 0;
}
.history-info > div h3 svg path:nth-child(2){
	transform-origin: 0 0;
	-webkit-transform: scaleY(0);
  	-moz-transform: scaleY(0);
  	-ms-transform: scaleY(0);
  	-o-transform: scaleY(0);
  	transform: scaleY(0);
}
.history-info > div h3 svg path:nth-child(3){
	transform-origin: 0 0;
	-webkit-transform: scaleX(0);
  	-moz-transform: scaleX(0);
  	-ms-transform: scaleX(0);
  	-o-transform: scaleX(0);
  	transform: scaleX(0);
}
.history-info > div h3 span{
	position: relative;
	display: inline-block;
}
.history-info > div h3 span i{
	position: absolute;
	width: 100%;
	bottom:0;
	height: 24px;
	background-color: var(--yellow);
	left:0;
	mix-blend-mode: darken;
	transform-origin: 0 0;
	-webkit-transform: scaleX(0);
  	-moz-transform: scaleX(0);
  	-ms-transform: scaleX(0);
  	-o-transform: scaleX(0);
  	transform: scaleX(0);
}
/* .history-info > div img{
	width: 300px;
    position: absolute;
    bottom: -70%;
    right: 14%;
    border-radius: 5px;
	filter: grayscale(100%);
	display: none;
} */
.history-info > div:first-child{
	padding-right:40px;
	
}
.history-info > div:last-child{
	padding: 60px;
}
.history-info > div p{
	color: var(--black);
	text-align: justify;
	font-family: var(--text);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 133.333%;
	margin-bottom: 1.5rem;
	opacity: 0;
}
.history-info > div p#target{
	color: #DADADA;
	font-family: var(--text);
	font-size: 30px;
	font-style: normal;
	font-weight: 500;
	line-height: 125%;
	text-align: left;
	letter-spacing: -1.28px;
	text-transform: uppercase;
	width: 80%;
	margin-bottom: 4rem;
	opacity: 1;
}



/* Team */
.meet{
	padding: 15rem 0 50rem;
}
.meet-info{
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	position: relative;
	justify-content: center;
	align-items: flex-start;
	position: relative;
}
.meet-info > div{
	width: 50%;
	box-sizing: border-box;
	position:relative;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	padding: 5rem 0;
}
.meet-info > div:first-child{
	justify-content: center;
}
.meet-info > div:last-child{
	align-items: flex-start;
}
.meet-info > div:nth-child(2) article{
	width:50%;
	overflow: hidden;
}
.meet-info > div:nth-child(2) article p{
	width: 55%;
	color: var(--white);
	font-family: var(--text);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 133.333%;
	opacity: 0;
	-webkit-transform: translateX(-105%);
  	-moz-transform: translateX(-105%);
  	-ms-transform: translateX(-105%);
  	-o-transform: translateX(-105%);
  	transform: translateX(-105%);
}
.meet-info > div h3{
	text-align: center;
}
.meet-info > div h3 .cur{
	display: block;
	overflow: hidden;
}
.meet-info > div h3 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.meet-info > div h3 > span:first-child{
	color: var(--white);
	font-family: var(--someTitles);
	font-size: 130px;
	font-style: normal;
	font-weight: 400;
	line-height: 80%;
	display: block;
	width: 100%;
	padding-left: 20px;
}
html[lang="es-CR"] .meet-info > div h3 > span:first-child{
	font-size: 100px;
}
.meet-info > div h3 > span:last-child{
	color: var(--white);
	font-family: var(--text);
	font-size: 100px;
	font-style: normal;
	font-weight: 500;
	line-height: 80%;
	letter-spacing: -5px;
	text-transform: uppercase;
	display: block;
	width: 100%;
}
html[lang="es-CR"] .meet-info > div h3 > span:last-child{
	font-size: 65px;
	letter-spacing: -3px;
}
.logos-divider{
	display: block;
	width: 100%;
	height: 1px;
	background-color:#6A6A6A;
	border:0 none;
	transform-origin: 0 0;
	-webkit-transform: scaleX(0);
  	-moz-transform: scaleX(0);
  	-ms-transform: scaleX(0);
  	-o-transform: scaleX(0);
  	transform: scaleX(0);
}
.logos-container{
	width: 75%;
	margin-left: 25%;
	padding: 10rem 0;
}
.logos-container figure{
	width: 100%;
	box-sizing: border-box;
	position:relative;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-around;
}
.logos-container figure img{
	max-height: 55px;
	padding: 3rem 4rem;
	opacity: 0;
}
.meet-team{
	width: 50%;
	padding-bottom: 10rem;
	padding-top: 10rem;
}
.meet-team h3{
	color: var(--white);
	font-family: var(--text);
	font-size: 32px;
	font-style: normal;
	font-weight: 500;
	line-height: 125%;
	letter-spacing: -1.28px;
	text-transform: uppercase;
}
html[lang="es-CR"] .meet-team h3{
	font-size: 27px;
}
.meet-team h3 .cur{
	display: block;
	overflow: hidden;
}
.meet-team h3 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.team-carousel{
	width: 100%;
	position: relative;
}
.team-phrase{
	position: absolute;
	top:10%;
	z-index: 1;
	height: 43rem;
}
.main-carousel{
	width: 60%;
	margin-left: 40%;
	position: relative;
	z-index: 2;
	opacity:0;
	-webkit-transform: translateY(60px);
  	-moz-transform: translateY(60px);
  	-ms-transform: translateY(60px);
  	-o-transform: translateY(60px);
  	transform: translateY(60px);
}
.carousel-cell{
	width:28%;
	margin: 0;
}
.inner-cell{
	position: relative;
	display: block;
}
.inner-cell::after{
	content: '';
	background-color: rgba(0,0,0,0.6);
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 1;
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.inner-cell:hover::after{
	opacity: 0;
}
.carousel-cell .inner-cell figure{
	position: relative;
	z-index: 1;
}
.carousel-cell .inner-cell article{
	position: absolute;
	top:0;
	height: 100%;
	width: 100%;
	left:0;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items:flex-end;
	justify-content: flex-start;
	padding: 40px 0;
	z-index: 3;
	box-sizing: border-box;
	opacity: 0;
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.carousel-cell .inner-cell:hover article{
	opacity: 1;
}
.carousel-cell .inner-cell article h4{
	color: var(--white);
	font-family: var(--text);
	font-size: 50px;
	font-style: normal;
	font-weight: 800;
	line-height: 110.558%;
	width: 100%;
	padding: 30px 10% 10px 15px;
	border-top: 1px solid var(--white);
	align-self: flex-start;
}
.carousel-cell .inner-cell article h4 sub{
	font-size: 40px;
}
.carousel-cell .inner-cell article p{
	width: 100%;
	box-sizing: border-box;
	padding: 15px 40% 10px 15px;
	border-top: 1px solid var(--white);
	color: var(--white);
	font-family: var(--text);
	font-size: 13px;
	font-style: normal;
	font-weight: 500;
	line-height:  115.385%;
}
.carousel-cell .inner-cell figure img{
	max-width: 100%;
	height: auto;
}

/* Services */
.gray-trigger-start{
	width: 100vw;
	height: 1px;
	background-color: red;
}
.gray-trigger-end{
	width: 100vw;
	height: 1px;
	background-color: green;
}
.services-info-movil,.wrapper-for-movil{
	display: none;
}
.gray-bg{
	overflow: hidden;
	padding: 5rem 0 15rem;
}
.gray-bg .wrapper{
	position: relative;
}

/* Mobile title */
.services-info-movil h3{
	width: 100%;
	color: var(--black);
	leading-trim: both;
	text-edge: cap;
	font-family: var(--text);
	font-size: 50px;
	font-style: normal;
	font-weight: 500;
	line-height: 95%;
	letter-spacing: -2px;
	text-transform: uppercase;
}
.services-info-movil h3 .cur{
	display: block;
	overflow: hidden;
}
.services-info-movil h3 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.services-info-movil h3 strong{
	font-weight: 800;
}
.services-info-movil h3 > span{
	display: block;
}
.services-info-movil h3 > span:nth-child(1){
	text-align: left;
}
.services-info-movil h3 > span:nth-child(2){
	text-align: left;
	padding-left: 10%;
}
.services-info-movil h3 > span:nth-child(3){
	text-align: right;
	padding-right: 10%;
}
.services-info-movil h3 > span:nth-child(4){
	text-align: right;
}

/* Cards */
.service-cards{
	padding: 0;
}
.service-cards .services-info h3{
	width: 100%;
	color: var(--black);
	leading-trim: both;
	text-edge: cap;
	font-family: var(--text);
	font-size: 85px;
	font-style: normal;
	font-weight: 500;
	line-height: 95%;
	letter-spacing: -2px;
	text-transform: uppercase;
}
.service-cards .services-info h3 .cur{
	display: block;
	overflow: hidden;
}
.service-cards .services-info h3 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.service-cards .services-info h3 strong{
	font-weight: 800;
}
.service-cards .services-info h3 > span{
	display: block;
}
.service-cards .services-info h3 > span:nth-child(1){
	text-align: left;
}
.service-cards .services-info h3 > span:nth-child(2){
	text-align: left;
	padding-left: 10%;
}
.service-cards .services-info h3 > span:nth-child(3){
	text-align: right;
	padding-right: 10%;
}
.service-cards .services-info h3 > span:nth-child(4){
	text-align: right;
}
.service-cards .wrapper > article{
	width: 35%;
	margin: 4rem 0 0rem 65%;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: nowrap;
	align-items:center;
	justify-content: space-between;
	position: relative;
	top:2rem;
}
.service-cards .wrapper > article img{
	width: 86px;
	margin-right: 15px;
	-webkit-transform:scale(0);
  	-moz-transform:scale(0);
  	-ms-transform:scale(0);
  	-o-transform:scale(0);
  	transform:scale(0);
}
.service-cards .wrapper > article h4{
	color: var(--black);
	font-family: var(--text);
	font-size: 19px;
	font-style: normal;
	font-weight: 500;
	line-height: 106.842%;
	text-transform: uppercase;
	opacity: 0;
	-webkit-transform: translateY(20px);
  	-moz-transform: translateY(20px);
  	-ms-transform: translateY(20px);
  	-o-transform: translateY(20px);
  	transform: translateY(20px);
}
.security{
	-webkit-transform: translateY(20px);
  	-moz-transform: translateY(20px);
  	-ms-transform: translateY(20px);
  	-o-transform: translateY(20px);
  	transform: translateY(20px);
}
.trust-cards{
	width:60%;
	margin: 0rem auto 30rem;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
	justify-content: center;
	position: relative;
}
.card{
	cursor: pointer;
	display: block;
	width: 100%;
	border-radius: 17px;
	height: 53rem;
	padding: 2.5rem;
	box-sizing: border-box;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
	align-items:center;
	justify-content: center;
	flex-wrap: wrap;
	position: absolute;
	top:0; 
	-webkit-transform: translateY(150%) rotate(1deg);
	-moz-transform: translateY(150%) rotate(1deg);
	-ms-transform: translateY(150%) rotate(1deg);
	-o-transform: translateY(150%) rotate(1deg);
	transform: translateY(150%) rotate(1deg);
}
.card:nth-child(1){
	width: 100%;
	position: relative;
	background-color: var(--black);
	color: var(--white);
	-webkit-transform: translateY(0) rotate(1deg);
	-moz-transform: translateY(0) rotate(1deg);
	-ms-transform: translateY(0) rotate(1deg);
	-o-transform: translateY(0) rotate(1deg);
	transform: translateY(0) rotate(1deg);
}  
.card.yellow{
	background-color: var(--yellow);
	color: var(--black);
	-webkit-transform: translateY(150%) rotate(-1deg);
	-moz-transform: translateY(150%) rotate(-1deg);
	-ms-transform: translateY(150%) rotate(-1deg);
	-o-transform: translateY(150%) rotate(-1deg);
	transform: translateY(150%) rotate(-1deg);
}
.card-content{
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
	align-items:flex-start;
	justify-content: center;
	flex-wrap: wrap;
}
.card-content article{
	width: 53%;
	margin-right: 4%;
}
.card-content article{
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
	align-items:flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	height: 43rem;
}
.card-content article h3{
	leading-trim: both;
	text-edge: cap;
	font-family: var(--text);
	font-size: 50px;
	font-style: normal;
	font-weight: 800;
	line-height: 100%;
	letter-spacing: -2px;
	text-transform: uppercase;
	/* margin-bottom: 10rem; */
	width: 100%;
}

.card-content article h3 span{
	font-weight: normal;
	font-family: var(--someTitles);
}
.card-content article ul{
	align-self: center;
	    margin-top: 20px;
}
.card-content article ul li{
	leading-trim: both;
	text-edge: cap;
	font-family: var(--text);
	font-size: 16px;
	font-weight: 400;
	line-height: 125%;

}
.card-content article hr{
	display: block;
    width: 100%;
    height: 1px;
    background-color:#3B3B3B;
    border: 0 none;
	align-self: flex-end;
}
.card-content article > div{
	align-self: flex-end;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: nowrap;
	align-items:center;
	justify-content: space-between;
}
.card-content article > div img{
	width: 75px;
	margin-right: 35px;
}
.card-content article > div p{
	font-family: var(--text);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 135.333%;
}
.card-content figure{
	width: 43%;
}
.card-content figure img{
	max-width: 100%;
	border-radius: 17px;
}

.big-picture{
	padding: 2400px 0 10rem;
	width: 90%;
	margin-left: 5%;
}
.big-picture .logo-color{
	width: 100%;
	padding-top: 40vh;
	text-align: center;
	position: relative;
	z-index: 1;
}
.big-picture .logo-color img{
	width: 25%;
	opacity: 0;	
	-webkit-transform: scale(0.7);
  	-moz-transform: scale(0.7);
  	-ms-transform: scale(0.7);
  	-o-transform: scale(0.7);
  	transform: scale(0.7);
}
.big-picture > img:nth-of-type(1){
	width: 45%;
	margin-right: 55%;
	border-radius: 17px;
	margin-bottom: 10rem;
	position: relative;
	z-index: 2;
}
.big-picture > img:nth-of-type(2){
	width: 40%;
	margin-left: 60%;
	border-radius: 17px;
	margin-bottom: 10rem;
	position: relative;
	z-index: 2;
}
.big-picture > img:nth-of-type(3){
	width: 20%;
	margin-left: 20%;
	margin-right: 40%;
	border-radius: 17px;
	border-radius: 17px;
	margin-bottom: 10rem;
	position: relative;
	z-index: 2;
}
.big-picture > img:nth-of-type(4){
	width: 35%;
	margin-left: 50%;
	border-radius: 17px;
	margin-bottom: 10rem;
	position: relative;
	z-index: 2;
}
.faqs{
	padding: 20rem 0 0;
	overflow: hidden;
}
.button-container{
	width: 100%;
}
.button-container .oller-button{
	position: static;
}
.faqs > h4{
	color: var(--black);
	font-family: var(--text);
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: 95.333%;
	letter-spacing: 0.66px;
	margin-bottom:7rem;
	-webkit-transform: translateX(-105%);
  	-moz-transform: translateX(-105%);
  	-ms-transform: translateX(-105%);
  	-o-transform: translateX(-105%);
  	transform: translateX(-105%);
	display: inline-block;
}
.faqs > h3{
	color: var(--black);
	font-family: var(--text);
	font-size: 130px;
	font-style: normal;
	font-weight: 800;
	line-height: 95%;
	letter-spacing: -4.34px;
	margin-bottom:7rem;
}
.faqs > h3 .cur{
	display: block;
	overflow: hidden;
}
.faqs > h3 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.faqs > p{
	color: var(--black);
	font-family: var(--text);
	font-size: 54.4px;
	font-style: normal;
	font-weight: 800;
	line-height: 90.074%;
	text-transform: uppercase;
	width: 50%;
	margin-bottom:4rem;
	-webkit-transform: translateY(20px);
  	-moz-transform: translateY(20px);
  	-ms-transform: translateY(20px);
  	-o-transform: translateY(20px);
  	transform: translateY(20px);
	opacity: 0;
}
.faqs .oller-button{
	-webkit-transform: scale(0.8);
  	-moz-transform: scale(0.8);
  	-ms-transform: scale(0.8);
  	-o-transform: scale(0.8);
  	transform: scale(0.8);
	opacity: 0;
}
.container-preguntas{
	width: 50%;
	margin-left: 50%;
}
.preguntas{
	width: 100%;
}
.preguntas > div{
	position: relative;
}
.container-pregunta{
	width: 100%;
	margin-bottom: 5rem;
}
.container-pregunta h4{
	color: var(--black);
	font-family: var(--text);
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	margin-bottom: 2rem;
	-webkit-transform: translateY(20px);
  	-moz-transform: translateY(20px);
  	-ms-transform: translateY(20px);
  	-o-transform: translateY(20px);
  	transform: translateY(20px);
	opacity: 0;
}
.container-pregunta p{
	font-family: var(--text);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 135.333%;
	margin-bottom: 1rem;
	-webkit-transform: translateY(20px);
  	-moz-transform: translateY(20px);
  	-ms-transform: translateY(20px);
  	-o-transform: translateY(20px);
  	transform: translateY(20px);
	opacity: 0;
}
.bottom-line{
	width: 100%;
	height: 1px;
	background-color: var(--black);
	display: block;
	margin-bottom: 5rem;
	-webkit-transform: scaleX(0);
  	-moz-transform: scaleX(0);
  	-ms-transform: scaleX(0);
  	-o-transform: scaleX(0);
  	transform: scaleX(0);
	transform-origin: 0 0;
}

/* Home Contact */
.go-contact{
	padding: 20rem 0 0;
}
.contact-intro{
	width: 100%;
	padding:0 30px;
	box-sizing: border-box;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: nowrap;
	align-items:center;
	justify-content: space-between;
	margin-bottom: 20rem;
}
.contact-intro h2{
	color: var(--white);
	text-align: center;
	font-family: var(--text);
	font-size: 175px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: -3.34px;
	position: relative;
	display: inline-block;
	overflow: hidden;
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.contact-intro a:hover h2{
	color: var(--yellow);
}
.contact-intro h2 span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.contact-intro h2 hr{
	content:'';
	width: 100%;
	background-color: var(--white);
	height: 1px;
	position: absolute;
	bottom:0;
	left:0;
	margin: 0;
	border:0 none;
	transform-origin: 0 0;
	-webkit-transform: scaleX(0);
  	-moz-transform: scaleX(0);
  	-ms-transform: scaleX(0);
  	-o-transform: scaleX(0);
  	transform: scaleX(0);
}
.contact-intro svg{
	width: 192px;
	opacity: 0;
	-webkit-transform: translateX(-100px);
  	-moz-transform: translateX(-100px);
  	-ms-transform: translateX(-100px);
  	-o-transform: translateX(-100px);
  	transform: translateX(-100px);
}
.contact-intro > a:hover + svg{
	animation: moveArrow 2s ease-in-out infinite;
}
@keyframes moveArrow {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(0);
    }
}


/* Contact */
.scontact{
	padding: 20rem 0;
}
.contact-info{
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items:flex-start;
	justify-content: space-between;
	position: relative;
}
.contact-info .contact-1,.contact-info .contact-2{
	position: absolute;
	border-radius: 5px;
}
.contact-info .contact-1{
	width: 25%;
    left: -5%;
    top: 0;
}
.contact-info .contact-2{
	right: -10%;
    bottom: -10rem;
    width: 30%;
}
.contact-info > h3{
	width: 50%;
	margin: 0 25%;
	color: var(--white);
	leading-trim: both;
	text-edge: cap;
	font-family: var(--text);
	font-size: 80px;
	font-style: normal;
	font-weight: 500;
	line-height: 85%;
	letter-spacing: -2px;
	text-transform: uppercase;
	margin-bottom: 20rem;
}
.contact-info > h3 .cur{
	display: block;
	overflow: hidden;
}
.contact-info > h3 .cur span{
	display: block;
	-webkit-transform: translateX(-105%);
  	-moz-transform: translateX(-105%);
  	-ms-transform: translateX(-105%);
  	-o-transform: translateX(-105%);
  	transform: translateX(-105%);
}
.contact-info > h3 em{
	color: var(--yellow);
}
.address-social{
	width: 50%;
	margin-top: 70rem;
}
.address-social .address{
	color: var(--white);
	leading-trim: both;
	text-edge: cap;
	font-family: var(--text);
	font-size: 30px;
	font-style: normal;
	font-weight: 500;
	line-height:127.667%;
	letter-spacing: -1px;
	text-transform: uppercase;
	margin-bottom: 5rem;
	width: 70%;
	-webkit-transform: translateY(20px);
  	-moz-transform: translateY(20px);
  	-ms-transform: translateY(20px);
  	-o-transform: translateY(20px);
  	transform: translateY(20px);
	opacity: 0;
}
.address-social nav{
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items:flex-start;
	justify-content: space-between;
}
.address-social nav a{
	padding: 10px 0;
	text-align: center;
	color: #F0F2F1;
	text-align: center;
	leading-trim: both;
	text-edge: cap;
	font-family: var(--text);
	font-size: 30px;
	font-style: normal;
	font-weight: 500;
	line-height:100%;
	letter-spacing: -1px;
	text-transform: uppercase;
	border: 1px solid var(--white);
	border-radius: 130px;
	width: 40%;
	margin-right: 10%;
	margin-bottom: 2rem;
	display: block;
	box-sizing: border-box;
	opacity: 0;
	-webkit-transform:scale(0.7);
  	-moz-transform:scale(0.7);
  	-ms-transform:scale(0.7);
  	-o-transform:scale(0.7);
  	transform:scale(0.7);
	  -webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.address-social nav a:hover{
	color:var(--yellow);
	border: 1px solid var(--yellow);
}
.links{
	width: 50%;
}
.link{
	width: 100%;
	margin-bottom: 8rem;
}
.link h5{
	color: var(--white);
	font-family: var(--text);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 102.143%;
	letter-spacing: 0.66px;
	text-transform: uppercase;
	margin-bottom: 1rem;
	-webkit-transform: translateY(20px);
  	-moz-transform: translateY(20px);
  	-ms-transform: translateY(20px);
  	-o-transform: translateY(20px);
  	transform: translateY(20px);
	opacity: 0;
}
.link a{
	text-align: center;
	leading-trim: both;
	text-edge: cap;
	font-family: var(--text);
	font-size: 38px;
	font-style: normal;
	font-weight: 500;
	line-height:100%;
	letter-spacing: -1px;
	text-transform: uppercase;
	-webkit-transform: translateY(20px);
  	-moz-transform: translateY(20px);
  	-ms-transform: translateY(20px);
  	-o-transform: translateY(20px);
  	transform: translateY(20px);
	opacity: 0;
}
.link a span{
	color: var(--white);
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.link a:hover span{
	color: var(--yellow);
}
.links hr{
	width: 100%;
	background-color: var(--white);
	height: 1px;
	border: 0 none;
	margin: 10rem 0 15rem;
	transform-origin: 0 0;
	-webkit-transform: scaleX(0);
  	-moz-transform: scaleX(0);
  	-ms-transform: scaleX(0);
  	-o-transform: scaleX(0);
  	transform: scaleX(0);
}
.footer-nav ul{
	width: 100%;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items:flex-start;
	justify-content: space-between;
}
.footer-nav ul li{
	width: 50%;
	margin-bottom: 2rem;
	overflow: hidden;
	
}

.footer-nav ul li a{
	color: var(--white);
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
	text-align: center;
	leading-trim: both;
	text-edge: cap;
	font-family: var(--text);
	font-size: 26px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: -1px;
	text-transform: uppercase;
	position: relative;
	display: inline-block;
	-webkit-transform: translateX(-101%);
  	-moz-transform: translateX(-101%);
  	-ms-transform: translateX(-101%);
  	-o-transform: translateX(-101%);
  	transform: translateX(-101%);
	opacity: 0;
}
.footer-nav ul li a:hover{
	color: var(--yellow);
}
.footer-nav ul li a::after{
	content: '';
	width: 15px;
	height: 15px;
	background-image: url(images/layout/arrow.svg);
	background-size: 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	right: -30px;
    top: 7px;
    display: inline-block;
    position: absolute;
	-webkit-transform: translate(0,0);
  	-moz-transform: translate(0,0);
  	-ms-transform: translate(0,0);
  	-o-transform: translate(0,0);
  	transform: translate(0,0);
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.footer-nav ul li a:hover::after{
	-webkit-transform: translate(5px,-5px);
	-moz-transform: translate(5px,-5px);
	-ms-transform: translate(5px,-5px);
	-o-transform: translate(5px,-5px);
	transform: translate(5px,-5px);
}
/* Footer */
.top-footer{
	padding: 5rem 30px;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items:flex-start;
	justify-content: space-between;
	position: relative;
}
.top-footer p{
	color: var(--white);
	text-align: right;
	leading-trim: both;
	text-edge: cap;
	font-family: var(--text);
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height:  95.333%;
	letter-spacing: 0px;
	text-transform: uppercase;
}
.top-footer p:last-child{
	width: 80px;
}

.middle-footer{
	width: 25%;
	margin: 0 auto;
	position: relative;
    bottom: -4px;
}
.middle-footer img{
	-webkit-transform: translateY(50%);
  	-moz-transform: translateY(50%);
  	-ms-transform: translateY(50%);
  	-o-transform: translateY(50%);
  	transform: translateY(50%);
	opacity: 0;
	max-width: 100%;
}
.bottom-footer{
	background-color: var(--white);
}

/* Single */
.pic-single{
	position: absolute;
	width: 40%;
	height: 100vh;
	top:0;
	left:0;
	overflow: hidden;
}
.pic-single figure{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-webkit-transform: scale(1.2);
  	-moz-transform: scale(1.2);
  	-ms-transform: scale(1.2);
  	-o-transform: scale(1.2);
  	transform: scale(1.2);
	opacity: 0;
	z-index: 2;
	
}
.pic-single figure:last-child{
	position: absolute;
	top:0;
	left:0;
	z-index: 3;
	opacity: 0;
	-webkit-transition: all 0.8s;
  	-moz-transition: all 0.8s;
  	-ms-transition: all 0.8s;
  	-o-transition: all 0.8s;
  	transition: all 0.8s;
}
.pic-single:hover figure{
	opacity: 0;
}
.dom-is-loaded .pic-single:hover figure:last-child{
	opacity: 1;
}
.single-section-equipo{
	width: 50%;
	margin-left: 50%;
	padding-bottom: 10rem;
	overflow: hidden;
}
.wrapper-single{
	padding: 10rem 20% 0 0;
}
.back span{
	color: var(--white);
	leading-trim: both;
	text-edge: cap;
	font-family: var(--text);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: -0.96px;
	text-transform: uppercase;
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.back:hover span{
	color: var(--yellow);
}
.back svg{
	margin-right: 20px;
	width: 20px;
	-webkit-transform: scale(1);
  	-moz-transform: scale(1);
  	-ms-transform: scale(1);
  	-o-transform: scale(1);
  	transform: scale(1);
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.back:hover svg{
	-webkit-transform: scale(1.01);
	-moz-transform: scale(1.01);
	-ms-transform: scale(1.01);
	-o-transform: scale(1.01);
	transform: scale(1.01);
}
.back{
	margin-bottom: 10rem;
	display: flex;
	align-items: center;
	width: auto;
	-webkit-transform: translateX(-100%);
  	-moz-transform: translateX(-100%);
  	-ms-transform: translateX(-100%);
  	-o-transform: translateX(-100%);
  	transform: translateX(-100%);
}

.single-intro p{
	color: var(--white);
	font-family: var(--text);
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 100%;
	margin-bottom: 1rem;
	-webkit-transform: translateX(-100%);
  	-moz-transform: translateX(-100%);
  	-ms-transform: translateX(-100%);
  	-o-transform: translateX(-100%);
  	transform: translateX(-100%);
	opacity: 0;
}
.single-intro h1{
	color: var(--white);
	font-family: var(--text);
	font-size: 98px;
	font-style: normal;
	font-weight: 700;
	line-height: 90px; /* 91.837% */
	text-transform: uppercase;
	-webkit-transform: translateX(-100%);
  	-moz-transform: translateX(-100%);
  	-ms-transform: translateX(-100%);
  	-o-transform: translateX(-100%);
  	transform: translateX(-100%);
	  display: block;
}
.single-intro h1 sub{
	font-size: 70px;
    top: -20px;
    position: relative;
}

.single-intro h1 em{
	display: inline-block;
	font-family: var(--someTitles);
	text-transform: none;
	font-weight: 400;
	font-size: 68px;
    margin-left: 16px;
}
.single-info{
	margin-top: 0rem;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items:center;
	justify-content: space-between;
	position: relative;
	-webkit-transform: translateY(50%);
  	-moz-transform: translateY(50%);
  	-ms-transform: translateY(50%);
  	-o-transform: translateY(50%);
  	transform: translateY(50%);
	opacity: 0;
}
.single-info hr{
	width: 100%;
	background-color: var(--white);
	height: 2px;
	border:0 none;
	margin: 0;
}
.single-info hr:first-child{
	margin-bottom: 7rem;
}
.single-info hr:last-child{
	margin-top: 5rem;
}
.single-info > img{
	width: 10%;
}
.single-info .quote{
	width: 60%;
}
.single-info .quote p{
	color: var(--white);
	font-family: var(--text);
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	line-height:119.412%;
	text-transform: uppercase;
	position: relative;
}
.single-info .quote p::before{
	content: '';
	width: 11px;
	height: 12px;
	background-image: url(images/layout/quote.svg);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	top:-20px;
	left: -20px;
}
.single-info .quote p::after{
	content: '';
	width: 11px;
	height: 12px;
	background-image: url(images/layout/quote-end.svg);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	bottom:0;
	right: -20px;
}
.single-info .team-social{
	width: 110px;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items:center;
	justify-content: space-between;
	position: relative;
}
.single-info .team-social a svg path:first-child{
	fill:var(--white);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.single-info .team-social a:hover svg path:first-child{
	fill:var(--yellow);
}
.single-faq{
	padding: 10rem 0 0;
	-webkit-transform: translateY(50%);
  	-moz-transform: translateY(50%);
  	-ms-transform: translateY(50%);
  	-o-transform: translateY(50%);
  	transform: translateY(50%);
	opacity: 0;
}
.single-faq h2{
	color: var(--white);
	font-family: var(--text);
	font-size: 49px;
	font-style: normal;
	font-weight: 700;
	line-height: 44px; /* 89.796% */
	text-transform: uppercase;
	margin-bottom: 10rem;
	width: 60%;
}
.single-faq h2 span{
	color: var(--yellow);
	
}
.single-faq h2 span.only-es{
	display: none;
}
html[lang="es-CR"] .single-faq h2 span.only-es{
	display: inline-block;
}
html[lang="en-US"] .only-en,html[lang="es-CR"] .only-es{
	display: block;
}
html[lang="es-CR"] .only-en,html[lang="en-US"] .only-es{
	display: none;
}
.single-faq h3{
	width: 60%;
	color: var(--white);
	font-family: var(--text);
	font-size: 35px;
	font-style: normal;
	font-weight: 500;
	line-height:  94.286%;
	margin-bottom: 4rem;
}
.single-faq h3 em{
	color: var(--yellow);
}
.single-faq p::first-letter{
	margin-left: 30px;
}
.single-faq p{
	width: 80%;
	color: var(--white);
	font-family: var(--text);
	font-size: 21px;
	font-style: normal;
	font-weight: 300;
	line-height: 145.714%;
	margin-bottom: 10rem;
}

/* Contact Page */
.contact-landing{
	box-sizing: border-box;
	padding-top: 20vh;
	height: 100vh;
}
.contact-landing .wrapper{
	overflow: hidden;
}
.contact-landing h4{
	display: inline-block;
	color: var(--white);
	font-family: var(--text);
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: 95.333%;
	letter-spacing: 0.66px;
	margin-bottom: 5rem;
	-webkit-transform: translateX(-100%);
  	-moz-transform: translateX(-100%);
  	-ms-transform: translateX(-100%);
  	-o-transform: translateX(-100%);
  	transform: translateX(-100%);
}
.contact-landing h1{
	color: var(--white);
	text-align: center;
	font-family: Geist;
	font-size: 146px;
	font-style: normal;
	font-weight: 500;
	line-height: 94%;
	letter-spacing: -3.34px;
	cursor: default;
}
.contact-landing h1 .cur{
	display: block;
	overflow: hidden;
}
.contact-landing h1 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.contact-landing h1 .cur:nth-child(1) span{
	color: var(--yellow);
}
html[lang="es-CR"] .contact-landing h1 .cur:nth-child(2) span{
	color: var(--yellow);
}
.wpcf7 form .wpcf7-response-output {
    margin: 0em 0.5em 1em;
    padding: 10px;
    border-radius: 5px;
}
.wpcf7-spinner{
	left: 45%;
}
.tabs {
	width: 100%;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items:center;
	justify-content: center;
	position: relative;
}
.tab {
	width: 25%;
	padding:15px 0;
	box-sizing: border-box;
	cursor: pointer;
	color: var(--white);
	text-align: center;
	font-family: var(--text);
	font-size: 30px;
	font-style: normal;
	font-weight: 500;
	line-height:100%;
	letter-spacing: -1px;
	text-transform: uppercase;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	justify-content: center;
	position: relative;
}
.tab::after{
	content:'';
	position: absolute;
	bottom: 6px;
	width: 65px;
	height: 4px;
	background-image: url(images/layout/bottom-line.svg);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	transform-origin: 0 0;
	-webkit-transform: scaleX(0);
  	-moz-transform: scaleX(0);
  	-ms-transform: scaleX(0);
  	-o-transform: scaleX(0);
  	transform: scaleX(0);
}
.tab span{
	display:inline-block;
	position:relative;
}
/* .tab span::before{
	content:'';
	position: absolute;
	top: -28px;
	left:0;
	width: 20px;
	height: 20px;
	background-image: url(images/layout/info.svg);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100%;
} */
.tab.active::after {
	-webkit-transform: scaleX(1);
  	-moz-transform: scaleX(1);
  	-ms-transform: scaleX(1);
  	-o-transform: scaleX(1);
  	transform: scaleX(1);
}

.tab:hover::after {
	-webkit-transform: scaleX(1);
  	-moz-transform: scaleX(1);
  	-ms-transform: scaleX(1);
  	-o-transform: scaleX(1);
  	transform: scaleX(1);
}
.content-container{
	height: auto;
	position: relative;
	margin-top: 5rem;
}
.content{
	height: auto;
	/* top:10%; */
	width: 100%;
	/* position: absolute; */
	position: relative;
	opacity: 0;
	z-index: 1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.content .contact-link{
	display: block;
	width: 100%;
	overflow: hidden;
	margin-top: 20vh;
}
.content .contact-link a{
	text-align: center;
	color: var(--white);
    font-family: var(--text);
    font-size: 38px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: -1px;
    text-transform: uppercase;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
    opacity: 0;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
}
.content .contact-link a em{
	font-weight: 500;
	margin: 0 15px;
}
.content .contact-link a svg{
	width: 30px;
	margin-right: 15px;
}
.content .contact-link a:hover{
	color: var(--yellow);
}
.content.active{
	z-index: 4;
	opacity: 1;
}
.content.active .contact-link a{
	-webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}
.form-container{
	margin-left: 25%;
	width: 50%;
	background-color: var(--white);
	border-radius: 5px;
	border:1px solid var(--white);
}
.form-top{
	padding: 20px 40px;
	box-sizing: border-box;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	position: relative;
	border-bottom: 1px dotted var(--black);
}
.form-top p{
	width: 60%;
	color: var(--black);
	font-family: var(--text);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
	text-transform: uppercase;
	text-align: left;
}
.form-top img{
	width: 60px;
}
.form-box{
	padding: 30px 15% 0;
	box-sizing: border-box;
}
.form-box form input,.form-box form textarea, .form-box form select{
	width: 100%;
	padding: 10px 10px;
	box-sizing: border-box;
	color: var(--black);
	font-family: var(--text);
	font-size: 23px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
	text-transform: uppercase;
	border-top:0 none;
	border-left:0 none;
	border-right:0 none;
	border-bottom: 1px solid var(--black);
	margin-bottom: 1rem;
	background-color: transparent;
	outline: 0 none;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	
}
.form-box form input, .form-box form select{
	background-image: url(images/layout/asterisk.svg);
	background-size: 20px;
	background-position: 95% 50%;
	background-repeat: no-repeat;
}
.form-box form input::placeholder,.form-box form input::-moz-placeholder,.form-box form input::-webkit-input-placeholder{
	color: var(--black);
	text-transform: uppercase;
	font-family: var(--text);
	font-size: 23px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
}
.form-box form input:focus{
	color: var(--black);
	text-transform: uppercase;
	font-family: var(--text);
	font-size: 23px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
	border-bottom: 1px solid var(--black);
}
.form-box form input[type="submit"]{
	margin-bottom: 0;
	float:right;
	position: relative;
	font-size: 20px;
	border-bottom: 0 none;
	background-image: url(images/layout/arrow-send.svg);
	background-size: 26px;
    background-position: 97% 50%;
	text-align: right;
    padding: 10px 60px 10px 10px;
	cursor: pointer;
}

.form-box form input[type="submit"]::after{
	content: 'hola';
}
.wpcf7-not-valid-tip{
	font-family: var(--text);
	font-size: 10px;
}
.wpcf7-response-output{
	font-family: var(--text);
	font-size: 10px;
}

/* Menu */
.big-menu{
	position: fixed;
	top:0;
	left:0;
	width: 100vw;
	height: 100vh;
	z-index: 5;
	pointer-events: none;
}
.big-menu .wrapper{
	position: relative;
	height:100%;
}
.menu-open .big-menu{
	pointer-events: auto;
}
.big-menu .menu-overlay{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background-color: var(--yellow);
	opacity: 0;
}
.big-menu > img{
	width: 20%;
	position: absolute;
	top:30vh;
	right: 10%;
	opacity: 0;
	transform-origin: 100% 100%;
	-webkit-transform: scale(0.5);
  	-moz-transform: scale(0.5);
  	-ms-transform: scale(0.5);
  	-o-transform: scale(0.5);
  	transform: scale(0.5);
}
.menu-container{
	width: 50%;
	height:80vh;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	position: relative;
}
.menu-container ul{
	width: 100%;
	position: relative;
	
}
.menu-container ul li{
	width: 100%;
	overflow: hidden;
	margin-bottom: 1rem;
}
.menu-container ul li a{
	display: inline-block;
	color: var(--black);
	font-family: var(--text);
	font-size: 7rem;
	font-style: normal;
	font-weight: 700;
	line-height: 100%; 
	letter-spacing: -1px;
	position: relative;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.menu-container ul li a::after{
	content: '';
	width: 15px;
	height: 15px;
	background-image: url(images/layout/arrow-black.svg);
	background-size: 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	right: -30px;
    top: 7px;
    display: inline-block;
    position: absolute;
	opacity: 0;
	-webkit-transform: translate(0,0);
  	-moz-transform: translate(0,0);
  	-ms-transform: translate(0,0);
  	-o-transform: translate(0,0);
  	transform: translate(0,0);
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.menu-container ul li a:hover::after{
	opacity: 1;
	-webkit-transform: translate(5px,-5px);
	-moz-transform: translate(5px,-5px);
	-ms-transform: translate(5px,-5px);
	-o-transform: translate(5px,-5px);
	transform: translate(5px,-5px);
}
.menu-container ul li a:hover{
	color: var(--white);
}

.menu-bottom{
	width:50%;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	position: absolute;
	bottom:5vh;
}
.menu-bottom article{
	width: 50%;
	overflow: hidden;
}
.menu-bottom article a{
	display: inline-block;
	color: var(--black);
	font-family: var(--text);
	font-size: 13.28px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	border-bottom: 2px solid var(--black);
	padding: 6px 0;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
	  -webkit-transition: color 0.3s;
	  -moz-transition: color 0.3s;
	  -ms-transition: color 0.3s;
	  -o-transition: color 0.3s;
	  transition: color 0.3s;
}
.menu-bottom article a:hover{
	color: var(--white);
}
.menu-bottom article a span{
	display: block;
	font-weight: 300;
}

.mobile-toggle{
	display: none;
}
.menu-principal-container{
	width: 100%;
}

	.mobile-links{
        display: block;
        margin-bottom: 3em;
        pointer-events: none;
        width: 75%;
        display: -webkit-box; 
        display: -moz-box;
        display: -ms-flexbox;  
        display: -webkit-flex;    
        display: flex;
          flex-wrap: wrap;
          overflow: hidden;
    }
    .menu-open .mobile-links{
        pointer-events: auto;
    }
    .mobile-links .oller-link{
        display: block;
        width: 33.3%;
        -webkit-transform: translateY(-100px);
        -moz-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        -o-transform: translateY(-100px);
        transform: translateY(-100px);
		text-align:left;
    }
    .mobile-links .oller-link span{
        display: block;
        color: var(--black);
        font-family: var(--text);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 13px; 
        letter-spacing: 0.66px;
        margin-bottom: 5px;
        -webkit-transition: all 0.3s;
          -moz-transition: all 0.3s;
          -ms-transition: all 0.3s;
          -o-transition: all 0.3s;
          transition: all 0.3s;
    }
    .mobile-links .oller-link svg path{
        fill:var(--white);
    }

/* Intro */
.intro{
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	position: fixed;
	z-index: 30;
	display: none;
}
.home .intro{
	display: block;
}
.intro-overlay{
	position: absolute;
	width: 100%;
	top:0;
	left:0;
	height: 100%;
	background-color: var(--black);
	z-index: 1;
}
.intro-wrapper{
	padding: 20vh 14%;
	box-sizing: border-box;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	height: 100vh;
	position: relative;
	z-index: 2;
}
.intro-logo{
	width: 115px;
	position: absolute;
	bottom:30px;
	left:30px;
	opacity: 0;
	z-index: 3;
}
.intro-logo svg{
	max-width: 100%;
}

html[lang="es-CR"] .text-column h2 .cur:nth-child(2){
	top: -29px;
}
html[lang="es-CR"] .text-column h2{
	line-height: 115%;
	font-size: 85px;
}
html[lang="es-CR"] .text-column h3{
	font-size: 70px;
	top: -40px;
    position: relative;
}
html[lang="es-CR"] .left-column h3{
	line-height: 125%;
}
html[lang="es-CR"] .left-column h3 .cur:nth-child(1){
	    top: -17px;
}
html[lang="es-CR"] .left-column h3 .cur:nth-child(2){
	    top: -45px;
}



.text-column{
	width: 30%;

}
.left-column{
	align-self: flex-start;
}
.right-column{
	align-self: flex-end;
}

.text-column h2{
	color: var(--white);
	font-family: var(--text);
	font-size: 130px;
	font-style: normal;
	font-weight: 500;
	line-height: 76%;
	text-transform: uppercase;
}
.text-column h2 .cur{
	position: relative;
	overflow: hidden;
	display: block;
}
.text-column h2 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.text-column h3{
	color:var(--white);
	font-family: var(--someTitles);
	font-size: 90px;
	font-style: normal;
	font-weight: 400;
	line-height:79%;
	text-transform: uppercase;
}
.right-column.text-column h3{
	color:var(--yellow);
}
.text-column h3 .cur{
	position: relative;
	overflow: hidden;
	display: block;
}
.text-column h3 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.polaroids{
	width: 40%;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
}
.polaroids-container{
	width: 500px;
	position: relative;
	opacity: 0;
	transform-origin: 100% 100%;
	-webkit-transform: translateX(-10%) rotate(0);
  	-moz-transform: translateX(-10%) rotate(0);
  	-ms-transform: translateX(-10%) rotate(0);
  	-o-transform: translateX(-10%) rotate(0);
  	transform: translateX(-10%) rotate(0);
	/* -webkit-transform: translateX(-10%) rotate(16deg);
  	-moz-transform: translateX(-10%) rotate(16deg);
  	-ms-transform: translateX(-10%) rotate(16deg);
  	-o-transform: translateX(-10%) rotate(16deg);
  	transform: translateX(-10%) rotate(16deg); */
}
.polaroids-container::after{
	content: '';
	width: 530px;
    height: 640px;
	position: absolute;
	z-index: 3;
	top: -20px;
    left: -15px;
	background-image: url(images/layout/frame.png);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 0 0;
	
}
.polaroids-container img{
	position: absolute;
	max-width: 100%;
	top:0;
	left:0;
	z-index: 2;
	opacity: 0;
}
.polaroids-container img:first-child{
	position: relative;
	/* opacity: 1;
	z-index: 1; */
}
.single-curtain{
	display: none;
}

.back-next{
	width: 100%;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.post-navigation{
	width: 100%;
}
.nav-links{
	width: 100%;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.nav-links > div{
	width:50%;
}
.nav-links > div:nth-child(2){
	text-align: right;
}
.nav-links div a{
	color: var(--white);
	font-family: var(--text);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%;
	letter-spacing: -0.96px;
	text-transform: uppercase;
	-webkit-transition: all 0.3s;
  	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
  	transition: all 0.3s;
}
.nav-links div a span{
 	display: inline-block;
	margin: 0 10px;
}
.nav-links div a:hover{
	color: var(--yellow);
}
.nav-links div a svg{
	width: 18px;
    height: 14px;
}
.only-mobile{
	display: none;
}
.only-mobile480{
	display: none;
}
.asterisc{
	margin-right: 5px;
	display: inline-block;
}

/* Services */
.service-landing{
	height: 100vh;
	width: 100%;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	background-color: var(--white);
	position: relative;
}
.service-landing-bg{
	position: absolute;
	z-index: 1;
	bottom: 0;
	left:0;
	width: 100%;
	height: auto;
	opacity: 0;
	transition: all 0.8s var(--cubic);
}
.service-landing article{
	position: relative;
	z-index: 2;
	width: 50%;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
  	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.service-landing h1{
	width: 100%;
	color: var(--black);
	text-align: center;
	leading-trim: both;
	text-edge: cap;
	font-family: var(--text);
	font-size: 180px;
	font-style: normal;
	font-weight: 800;
	line-height: 82%;
	letter-spacing: -2px;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.service-landing h1 em{
	font-family: var(--someTitles);
	text-transform: lowercase;
	font-size:180px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: -2px;
}
.service-landing h1 .cur{
	display: block;
	overflow: hidden;
}
.service-landing h1 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}

.service-landing article p{
	color: var(--black);
	text-align: center;
	font-family: var(--text);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 116.364%;
	width: 20%;
	margin: 0 40% 10vh;
	opacity: 0;
}
.service-landing article p a{
	text-decoration: underline;
	color: var(--black);
	display: inline-block;
}
.service-landing article .button-container{
	width: auto;
	opacity: 0;
	-webkit-transform: scale(0.8);
  	-moz-transform: scale(0.8);
  	-ms-transform: scale(0.8);
  	-o-transform: scale(0.8);
  	transform: scale(0.8);
}
.service-landing article .button-container .oller-button{
	width: 260px;
}

.legal-advice{
	min-height: 100vh;
	position: relative;
}
.service-phrase{
	height: 3rem;
	padding: 2rem 0;
	position: absolute;
	top:0;
	left:0;
}
.service-phrase .marqueeser{
	top:2rem;
}
.service-phrase .marqueeser .marqueeser__inner > span{
	color: var(--white);
	font-family: var(--text);
	font-size: 30px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 0.2px;
	padding: 0 2vw;
	text-transform: none;
}
.legal-advice .pin-height {
    height: 300vh;
}
.legal-advice .para-container {
    height: 100vh;
    /* display: flex; */
    padding: 20vh 25px 0;
	position: relative;
	/* justify-content: center;
	align-items: center;
	flex-wrap: wrap; */
}
.legal-advice .paragraph-element {
    width: 45%;
	margin: 0 10% 0 10%;
    color: var(--white);
	text-align: left;
	font-family: var(--text);
	font-size: 90px;
	font-style: normal;
	font-weight: 500;
	line-height: 111.111%;
}
.legal-advice .word {
    display: inline-block;
    transform: translate(calc(100vw - 25px), 0);
}
.regular-text{
	width: 20%;
    margin: 0 35% 0 45%;
	-webkit-transform: translateY(-60px);
  	-moz-transform: translateY(-60px);
  	-ms-transform: translateY(-60px);
  	-o-transform: translateY(-60px);
  	transform: translateY(-60px);
}
.regular-text p{
	color: var(--white);
	margin-bottom: 15px;
	font-family: var(--text);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 133%;
	opacity: 0;
	-webkit-transform: translateY(20px);
  	-moz-transform: translateY(20px);
  	-ms-transform: translateY(20px);
  	-o-transform: translateY(20px);
  	transform: translateY(20px);
}

/* SERVICES Cards */
.services-list{
	background-color: var(--white);
}
.services-list .list-info h3{
	color: var(--black);
	font-family: var(--text);
	font-size: 80px;
	font-style: normal;
	font-weight: 600;
	line-height: 104%;
	margin-bottom: 10px;
}
.services-list .list-info h3 em{
	font-family: var(--someTitles);
	font-weight: 400;
	line-height: 120%;
}
.services-list .list-info h3 .cur{
	display: block;
	overflow: hidden;
	position: relative;
}
.services-list .list-info h3 .cur:nth-child(2){
	top:-10px;
}
.services-list .list-info h3 .cur:nth-child(3){
	top:-20px;
}
.services-list .list-info h3 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.services-list .list-info p{
	color: var(--black);
	font-family: var(--text);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 110%; 
	opacity: 0;
	width: 24%;
}

.container-circles{
	width: 100%;
	position: relative;
    height: 100vh;
	padding: 10rem 0;
}

.pin-services-list{
	height: 400vh;
	
}

.circles{
	height: 100%;
	position: relative;
	margin-top: 5rem;
}
.circle{
	position: absolute;
	width: 66.8%;
    left: 16.6%;
    height: 500px;
    top:0;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}
.card-single{
	width: 18%;
    transform:translateX(200vw) rotate(30deg);
    will-change: transform;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 20px;
	box-sizing: border-box;
	background-color: var(--black);
	height: 363px;
	border-radius: 17px;
}
.card-single .top h4{
	color: var(--white);
	font-family: var(--text);
	font-size: 26px;
	font-style: normal;
	font-weight: 900;
	line-height: 85.758%;
	text-transform: uppercase;
}
.card-single .top h4 span{
	color: var(--white);
	font-family: var(--someTitles);
	font-size: inherit;
	font-style: normal;
	font-weight: 400;
	line-height: 85.758%;
	text-transform: uppercase;
}
.card-single .bottom{
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.card-single .bottom svg{
	width: 25px;
	justify-self: flex-end;
}	

.card-single .bottom hr{
	height: 1px;
	border-top: 1px dotted var(--white);
	width: 100%;
	margin: 10px 0 20px;
	background-color: transparent;
	border-bottom: 0;
}
.card-single .bottom p{
	color: var(--white);
	font-family: var(--text);
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height:  135.333%;
	width:100%;
	margin-bottom: 8px;
}

/* Solutions */
.solutions{
	background-color: var(--white);
}
.pin-solutions{
	height: 200vh;
}
.solutions-content{
	height: 100vh;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items: center;
	position: relative;
}
.solutions h3{
	position: absolute;
	left:0;
	width: 100%;
	color: var(--black);
	text-align: center;
	font-family: var(--druk);
	font-size: 335px;
	font-style: normal;
	font-weight: lighter;
	line-height: 80%;
	text-transform: uppercase;
	z-index: 1;
}
.solutions h3 span{
	display: block;
	will-change: transform;
}
.solutions h3 span:nth-child(1){
	transform:translateX(-200vw) rotate(-10deg);
}
.solutions h3 span:nth-child(2){
	transform:translateX(200vw) rotate(10deg);
}
.solutions-content > ul{
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items: center;
	width: 100%;
	position: relative;
	z-index: 2;
	margin-bottom: 30px;
}
.solutions-content > ul > li{
	margin: 0 15px;
	width: 380px;
	opacity: 0;
	transform:scale(0.9);
	position: relative;
	cursor: pointer;
}
.solutions-content > ul > li > span{
	background-color: var(--yellow);
	border: 1px solid var(--black);
	padding: 10px 10px;
	width: 100%;
	border-radius: 80px;
	color: var(--black);
	text-align: center;
	font-family: var(--text);
	font-size: 23px;
	font-style: normal;
	font-weight: 600;
	line-height: 91.562%;
	letter-spacing: -1px;
	text-transform: uppercase;
	display: block;
	box-sizing: border-box;
	transition: all 0.3s;
}
.solutions-content > ul > li > span em{
	font-size: 18px;
}
.solutions-content > ul > li:hover > span{
	background-color: var(--white);
}
.solutions-content > ul > li:hover .solution-sublist{
	opacity: 1;
	transform:translateY(10px);
}
.solution-sublist{
	background-color: var(--white);
	position: absolute;
	padding: 45px 50px;
	box-sizing: border-box;
	border-top-left-radius: 60px;
	border-top-right-radius: 60px;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 60px;
	top:100%;
	left:0;
	border: 1px solid var(--black);
	opacity: 0;
	transform:translateY(-30px);
	transition: all 0.3s;
	z-index: -1;
}
.solution-sublist .li-title{
	color: var(--black);
	font-family: var(--text);
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 90.556%;
	text-transform: uppercase;
	margin-bottom: 10px;
	text-align: left;
}
.solution-sublist .li-text{
	color: var(--black);
	font-family: var(--text);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	margin-bottom: 30px;
	text-transform:none;
	text-align: left;
}
.solution-sublist .li-title i{
	display: inline-block;
	margin-right: 6px;
}
.solution-sublist .li-text:last-child{
	margin-bottom: 0;
}



/* Make It */
.make-it{
	width: 100vw;
	position: relative;
	overflow: hidden;
	padding-bottom: 0rem;
}
.make-it figure{
	z-index: 1;
	position: relative;
}
.make-it figure img{
	width:100%;
	transform: scale(1.2);
	will-change: transform;
	border-radius: 13px;
}
.desktop-pic{
	display: block;
}
.mobile-pic{
	display: none;
}
.make-it article{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	z-index: 2;
	    pointer-events: none;
}
.make-it article h4{
	position: relative;
	color:var(--white);
	font-family: var(--text);
	font-size: 220px;
	font-style: normal;
	font-weight: 500;
	line-height:100%;
	letter-spacing: -2px;
	text-transform: uppercase;
}
.make-it article h4 .cur{
	display: block;
	overflow: hidden;
}
.make-it article h4 .cur:nth-child(1){
	margin-top: 8vh;
    margin-left: 15vw;
}
.make-it article h4 .cur:nth-child(2){
	margin-top: 8vh;
    margin-left: 40vw;
}
.make-it article h4 .cur:nth-child(3){
	margin-top: 8vh;
    margin-left: 20vw;
}
.make-it article h4 .cur:nth-child(4){
	margin-top: 8vh;
    margin-left: 50vw;
}
.make-it article h4 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.sound-box{
	position: absolute;
    bottom: 270px;
    width: 320px;
    right: 8%;
    z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.sound-box img{
	border-radius: 10px;
	max-width: 100%;
	position: relative;
	z-index: 2;
}
.sound-box p{
	position: absolute;
	z-index: 3;
	text-align: center;
	color:var(--white);
	font-family: var(--text);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	padding-left: 20px;
}
.sound-box p svg{
	position: absolute;
	left:0;
	top:0;
}
.sound-box p svg.play{
	opacity: 1;
}
.sound-box p svg.pause{
	opacity: 0;
}
.sound-box.active p svg.play{
	opacity: 0;
}
.sound-box.active p svg.pause{
	opacity: 1;
}
.sound-box audio{
	background-color: red;
	position: absolute;
	top:0;
}

/* Steps */
.steps{
	padding: 10rem 0;
}
.larger-wrapper{
	width: 85%;
	margin: 0 auto;
}
.steps-subtitle{
	width: 50%;
	margin-right: 50%;
	margin-bottom: 10rem;
	border-top: 1px solid #474747;
	padding: 4rem 0 0;
}
.steps-subtitle h3{
	color: var(--white);
	font-family: var(--text);
	font-size: 55px;
	font-style: normal;
	font-weight: 400;
	line-height:  140%;
	/* margin-bottom: 5rem; */
}
.steps-subtitle h3 .cur{
	display: block;
	overflow: hidden;
}
.steps-subtitle h3 .cur:nth-child(2){
	position: relative;
	top: -26px;
}
.steps-subtitle h3 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.steps-subtitle h3 em{
	color: var(--white);
	font-family:var(--someTitles);
	font-size: 60px;
	font-style: normal;
	font-weight: 400;
}
.steps-subtitle .oller-button{
	width: 230px;
	opacity: 0;
	transform:scale(0.9);
}


.steps-title{
	width: 50%;
	margin-left: 50%;
	margin-bottom: 10rem;
}
.steps-title article{
	position: relative;
	display: flex;
	align-items: center;
}
.steps-title article h2{
	color: var(--white);
	font-family: var(--text);
	font-size: 115px;
	font-style: normal;
	font-weight: 600;
	line-height:86.957%;
	letter-spacing: -2px;
	text-transform: uppercase;
}
.steps-title article h2 .cur{
	display: block;
	overflow: hidden;
}
.steps-title article h2 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.steps-title article img{
	position: absolute;
	left: -160px;
	z-index: 2;
	opacity: 0;
	transform:scale(0.9);
	max-width: 200px;
}
.steps-content{
	width: 100%;
}
.steps-content article{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	padding: 30px 0;
	opacity: 0;
}
.steps-content article hr{
	position: absolute;
	border-top: 1px solid #474747;
	border-bottom: 0;
	border-left: 0;
	border-right:0;
	width: 100%;
	bottom:0;
	left:0;
	-webkit-transform: scaleX(0);
  	-moz-transform: scaleX(0);
  	-ms-transform: scaleX(0);
  	-o-transform: scaleX(0);
  	transform: scaleX(0);
	transform-origin: 0 0;
}
.steps-content article h4{
	width: 40%;
	color: var(--white);
	font-family: var(--text);
	font-size: 30px;
	font-style: normal;
	font-weight: 700;
	line-height:94.333%;
	text-transform: uppercase;
}
.steps-content article p{
	width: 53%;
	color: var(--white);
	font-family: var(--text);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 130%;
}
.steps-content article .number{
	width: 3%;
	color: var(--white);
	font-family: var(--text);
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 94.333%;
	text-transform: uppercase;
	text-align: right;
}

/* Guarantee */
.guaranties{
	background-color: var(--white);
}
.pin-guaranties{
	height: 200vh;
}
.guaranties-content{
	display: flex;
	justify-content:center;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	height: 100vh;
}
.guaranties-general{
	width: 100%;
}
.guaran-title{
	width: 75%;
	margin: 0 auto 10rem;
}
.guaran-title h2{
	color: var(--black);
	text-align: justify;
	font-family: var(--text);
	font-size: 65px;
	font-style: normal;
	font-weight: 300;
	line-height: 87.143%;
	letter-spacing: 2.1px;
	text-transform: uppercase;
}
.guaran-title h2 .cur{
	display: block;
	overflow: hidden;
}
.guaran-title h2 .cur:last-child{
	font-weight: 600;
}
.guaran-title h2 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}

.guaran-boxes{
	width: 90%;
	margin: 0 auto 10rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}
.guaran-boxes article{
	text-align: center;
	width: 20%;
	
}
.guaran-boxes article h4{
	color: var(--black);
	font-family: var(--text);
	font-size: 23px;
	font-style: normal;
	font-weight: 700;
	line-height: 101.304%;
	letter-spacing: -1px;
	text-transform: uppercase;
	margin-bottom: 25px;
	opacity: 0;
}
.guaran-boxes article h3{
	color: var(--black);
	font-family: var(--text);
	font-size: 55px;
	font-style: normal;
	font-weight: 600;
	line-height:100%;
	overflow: hidden;
	margin-bottom: 20px;
}
.guaran-boxes article h3 span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.guaran-boxes article h3 span img{
	width: 47px;
}
.guaran-boxes article p{
	color: var(--black);
	font-family: var(--text);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 18.3px; /* 101.667% */
	opacity: 0;
}

/* Service Contact */
.service-contact{
	padding: 15rem 0;
	text-align: center;
}
.service-contact .wrapper article{
	width: 70%;
	margin: 0 auto 5rem;
}
.service-contact .wrapper article h2{
	color: var(--white);
	font-family: var(--text);
	font-size: 100px;
	font-style: normal;
	font-weight: 400;
	line-height: 84.348%;
	letter-spacing: -2px;
	text-transform: uppercase;
	margin-bottom: 30px;
}
.service-contact .wrapper article h2 .cur{
	display: block;
	overflow: hidden;
}
.service-contact .wrapper article h2 .cur span{
	display: block;
	-webkit-transform: translateY(100%);
  	-moz-transform: translateY(100%);
  	-ms-transform: translateY(100%);
  	-o-transform: translateY(100%);
  	transform: translateY(100%);
}
.service-contact .wrapper article p{
	color: var(--white);
	font-family: var(--text);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 116%;
	opacity: 0;
}
.service-contact .wrapper article p.label{
	color: var(-white);
	text-align: center;
	font-family: var(--text);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 116%;
	margin-top: 10px;
}
.service-contact .wrapper article p.label em{
	color: red;
}
.service-contact .wrapper .form-container{
	opacity: 0;
	-webkit-transform: scale(0.9);
  	-moz-transform: scale(0.9);
  	-ms-transform: scale(0.9);
  	-o-transform: scale(0.9);
  	transform: scale(0.9);
}
.service-contact .wrapper .tabs a{
	opacity: 0;
}


/* Services Intro */
.intro-service{
	display: none;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	position: fixed;
	z-index: 30;
	left:0;
	top:0;
	background-color: var(--white);
}
.single-servicios .intro-service{
	display: block;
	
}
.intro-service .intro-ser-container{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items: center;
}
.intro-service .intro-ser-container article{
	width: 100%;
	display: flex;
	display: -webkit-box; 
	display: -moz-box;
	display: -ms-flexbox;  
	display: -webkit-flex;    
	display: flex;
	flex-wrap:nowrap;
	justify-content:center;
	align-items: center;
}
.intro-service .intro-ser-container article h3{
	color: var(--black);
	font-family: var(--text);
	font-size: 130px;
	font-style: normal;
	font-weight: 600;
	line-height:100%;
	margin-right: 45px;
	opacity: 0;
	overflow: hidden;
}
.intro-service .intro-ser-container article h3 .intro-cur{
	display: inline-block;
	overflow: hidden;
	-webkit-transform: translateY(50%);
  	-moz-transform: translateY(50%);
  	-ms-transform: translateY(50%);
  	-o-transform: translateY(50%);
  	transform: translateY(50%);
}
.intro-service .intro-ser-container article h3 .intro-cur .letter{
	display: inline-block;
	/* opacity: 0; */
	-webkit-transform: translateY(101%);
  	-moz-transform: translateY(101%);
  	-ms-transform: translateY(101%);
  	-o-transform: translateY(101%);
  	transform: translateY(101%);
}


.spacer{
	display:inline-block;
	width:40px;
}