@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');

:root{
    --high1: #ffce00;
    --high1a: #ffce0095;
    --high2: #53ADC1;
    --high3: #5BC15B;
}
    



body{margin: 0px;width: 100vw; height: 100%; background: #FAFAFA; overflow: hidden;}
.pos{position: relative; float: left;}
.wrapper{position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.content{width: 100%; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch;}
.logo{width: calc(40% - 50px); margin: 0 25px; height: 300px; background: url('../images/logo.svg') no-repeat center; background-size:contain; align-self: center; opacity: 0; }
.txts{width: calc(60% - 100px); padding: 50px; font-family: 'Montserrat', sans-serif; color:#333; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; opacity: 0;box-shadow: -20px 0px 30px -20px rgba(0,0,0,.1);}
.txts > h1{font-size: 5em; line-height: .8em; letter-spacing: -.02em; color:var(--high1); font-weight: 800; text-transform: uppercase;margin: 0px; padding: 0px;margin-top: 50px; width: 90%;}
.txts > h2{font-size: 1.1em; line-height: 1em; font-weight: 300; letter-spacing: .05em; margin: 0px; padding: 0px;margin-top: 40px; width: 70%;}
.rrss{margin-top: 30px;}
h2 > span{color:#FFF; font-weight: 500; padding: 10px 30px; border-radius: 100px; background: linear-gradient(45deg,  var(--high2) 0%, var(--high3) 100%);}
.rrss a, .rrss a:visited{ text-decoration: none; color:#FFF; margin-right: 10px;}
.txts > p{line-height: 1.6em; font-size: .9em; margin-top: 60px;}
.rrss-icon{font-size: 1.5em; width:1em; height: 1.2em; margin-right: 20px; padding: 10px;}
.rrss-icon::after{content: ""; position: absolute; width: 100%; height: 1px; background: #FFF; bottom:0; left: 0; z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform .3s ease;}
.rrss-icon:hover::after{transform: scaleX(1); transform-origin: left; transition: transform .3s ease;}
.rrss a:hover{transform: scale(1.1);}

.clip-text{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eef204+0,04f729+51,0017ea+100 */
background: linear-gradient(45deg,  var(--high1) 0%,var(--high2) 80%,var(--high3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}


@media screen and (max-width:800px){
    .content{width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: stretch; align-content: stretch;}
    .logo{width: 50vw; height: 50%; background: url('../images/logo.svg') no-repeat bottom left;  background-size: contain; margin-top: 0px;align-self: flex-start;}
    .txts{width: calc(100% - 50px); padding: 0 25px; align-self: flex-start; justify-content: flex-start;height: 50%;box-shadow: 0px -20px 30px -20px rgba(0,0,0,0);}
    .txts > h1{font-size: 2.5em; width: 100%;}
    .txts > h2{font-size: .8em; width: 100%;}
    
}


/*ANIMACIONES*/
@keyframes from_bottom{
    0%{opacity: 0; transform: translateY(100px)}
    100%{opacity: 1; transform: translateY(0px)}
  }

.from-bottom{animation: from_bottom 1s 1.1s ease forwards;}

@keyframes from_left{
    0%{opacity: 0; transform: translateX(100px)}
    100%{opacity: 1; transform: translateX(0px)}
  }

.from-left{animation: from_left 1s 1.2s ease forwards;}



@keyframes slide_up{
    0%{top:0}
    100%{top:-100%}
  }

.slide-up{animation: slide_up 1s .5s ease forwards;}
.slide-up-2{animation: slide_up 1s .6s ease forwards;}
.slide-up-3{animation: slide_up 1s .7s ease forwards;}