/* ==========================================================================
 Author's Variables
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=BBH+Bartle&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');


:root{
    --cubic: cubic-bezier(0.33, 1, 0.68, 1);
    --black:#191916;
    --red:#C61B23;
    --yellow:#E1A522;
    --text: "Raleway", sans-serif;
    --title:  "BBH Bartle", sans-serif;
}
/* 400-500-700 */
#master{
	position: relative;
	width: 100vw;
	padding: 0;
	margin: 0; 
	overflow-x:hidden;
	z-index: 4;   
}

#smooth-wrapper{
    margin: 0;
}
body{
    overflow-y: hidden;
    height: 100vh;
    font-family: var(--text);
    background-color: white;
}
body.dom-is-loaded{
    overflow-y: visible;
    height: auto;
}
h1,h2,h3,h4,h5{
    font-family: var(--title);
}
a{
    outline: 0 none;
    font-family: var(--text);
}
p{
    font-family: var(--text);
}
ul li, ol li{
    font-family: var(--text);
}
nav ul li a{
    font-size: 22px;
    font-family: var(--text);
    line-height: 100%;
}
nav.big-menu ul li a{
    font-size: 60px;  
    line-height: 100%;
}

.custom-column{
    gap: 80px;
}
.pila-gap{
    padding-top: 15vh !important;
    padding-bottom: 15vh  !important;
}


/* Animations */
.load-left-mask::before{
    content: '';
    position: absolute;
    z-index:5;
    top:-2%;
    left:0;
    width: 100%;
    height: 104%;
    background-color:white;
    transform: scaleX(1);
    transform-origin: 0 0;
    transition: transform 0.5s var(--cubic);
    transition-delay: 100ms;
}
.dom-is-loaded .load-left-mask::before{
    transform: scaleX(0);
}

.load-right-mask::before{
    content: '';
    position: absolute;
    z-index:5;
    top:-2%;
    left:0;
    width: 100%;
    height: 104%;
    background-color:white;
    transform: scaleX(1);
    transform-origin: 100% 0;
    transition: transform 0.5s var(--cubic);
    transition-delay: 100ms;
}
.dom-is-loaded .load-right-mask::before{
    transform: scaleX(0);
}

.load-up-mask::before{
    content: '';
    position: absolute;
    z-index:5;
    top:-2%;
    left:0;
    width: 100%;
    height: 104%;
    background-color:white;
    transform: scaleY(1);
    transform-origin: 0 0;
    transition: transform 0.5s var(--cubic);
    transition-delay: 100ms;
}
.dom-is-loaded .load-up-mask::before{
    transform: scaleY(0);
}

.load-down-mask::before{
    content: '';
    position: absolute;
    z-index:5;
    top:-2%;
    left:0;
    width: 100%;
    height: 104%;
    background-color:white;
    transform: scaleY(1);
    transform-origin: 0 100%;
    transition: transform 0.5s var(--cubic);
    transition-delay: 100ms;
}
.dom-is-loaded .load-down-mask::before{
    transform: scaleY(0);
}
.load-fade{
    opacity: 0;
}
.dom-is-loaded .load-fade{
    opacity: 1;
    transition: opacity 0.4s;
    transition-delay: 300ms;
}

.load-scale{
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.3s var(--cubic);
    transition-delay: 300ms;
}
.dom-is-loaded .load-scale{
    opacity: 1;
    transform: scale(1);
}

.load-title{
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.4s;
}
.dom-is-loaded .load-title{
    transform: translateY(0);
    opacity: 1;
}

.load-text{
    opacity: 0;
}
.dom-is-loaded .load-text{
    opacity: 1;
    transition: opacity 0.4s;
    transition-delay: 400ms;
}
.anim-fade{
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s;
}
.is-active .anim-fade{
    opacity: 1;
    transform: translateY(0);
}

.anim-title{
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.4s;
}
.is-active .anim-title{
    opacity: 1;
    transform: translateY(0);
}

.regular-text{
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s;
}
.is-active .regular-text{
    opacity: 1;
    transform: translateY(0);
}

.anim-move{
    opacity: 0;
    transform: translateX(50%);
    transition: all 0.4s;
}
.is-active .anim-move{
    opacity: 1;
    transform: translateY(0);
}

.anim-scale{
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s;
}
.is-active .anim-scale{
    opacity: 1;
    transform: scale(1);
}
.delayed{
    transition-delay: 200ms;
}

.capsule-subtitle{
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s;
}
.is-active .capsule-subtitle{
    opacity: 1;
    transform: scale(1);
}

.anim-button{
    opacity: 0;
    transform: button(0.9);
    transition: all 0.4s;
}
.is-active .anim-button{
    opacity: 1;
    transform: scale(1);
}

.show-right::before{
    content: '';
    position: absolute;
    z-index:5;
    top:-2%;
    left:0;
    width: 100%;
    height: 104%;
    background-color:white;
    transform: scaleX(1);
    transform-origin: 100% 0;
    transition: transform 0.5s var(--cubic);
    transition-delay: 100ms;
}
.is-active .show-right::before{
    transform: scaleX(0);
}


.dom-is-loaded .internal-landing .capsule-subtitle{
    opacity: 1;
    transform: scale(1);
}