:root{
    --tul-color-1: #041d25;
    --tul-color-2: #1e435f;
    --tul-color-3: #0094ae;
    --tul-color-4: #52bfd3;
    --tul-color-5: #eff9fb;
}
@font-face{
    font-family: "Metropolis";
    src: url("../assets/fonts/Metropolis/Metropolis-Medium.otf") format("woff");
}
@font-face{
    font-family: "CircularStd";
    src: url("../assets/fonts/CircularStd/CircularStd-Black.otf") format("woff");
}
body{
    background-color: var(--tul-color-5);
}

.bg-cyan{
    background-color: var(--tul-color-4);
    color: var(--tul-color-1);
}
.bg-blue{
    background-color: var(--tul-color-2);
    color: var(--tul-color-5);
}
.bg-white{
    background-color: var(--tul-color-5);
    color: var(--tul-color-2);
}

.metro-font{
    font-family: 'Metropolis';
}
.circo-font{
    font-family: 'CircularStd';
}
.btn-tulbot{
    width: 15%;
    height: auto;
    position: absolute;
    top: 3vw;
    right: 31%;
}
.logo-pr{
    width:100%;
}
.imag-prom{
    width:80%;
    position: relative;
    border-radius: 10px;
    mask-image: linear-gradient(to top, transparent 0%, black 25%);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 25%);
}
.menu-tul{
    position: sticky;
    top: 0px;
    z-index: 999;
}

.title{
    font-family: 'Metropolis';
}
.title span:nth-child(1){
    font-family: 'CircularStd'!important;
    color: var(--tul-color-4);
}
.title span:nth-child(2){
    font-size: small !important;
}

.title-changer{
    font-size: 3em;
    > span{
        color: var(--tul-color-4) !important;
        position: relative !important;
        display: inline-block !important;
        vertical-align: bottom !important;
        overflow: hidden !important;
        height: 1.25em !important;
        span{
            display: block !important;
            animation: animateWords 5s infinite ease !important;
        }
    }
}

@media (max-width: 900px) {
    .title-changer{
        font-size: 8vw !important;
        >span{
            font-size: 8.5vw !important;
        }
    }
}

.bg-principal{
    border-radius:10px; 
    backdrop-filter: blur(15px);
    background-color: rgba(239, 249, 251,.4) !important;
    color: var(--tul-color-2);
}

.btn-tultec{
    background-color: var(--tul-color-5);
    color: var(--tul-color-2);
    font-family: 'Metropolis';
    border: 1px solid var(--tul-color-5);
    border-radius: 20px;
    box-shadow: inset 0 0 2px var(--tul-color-3);
}
.btn-tultec:hover{
    background-color: var(--tul-color-5);
    color: var(--tul-color-4);
    font-family: 'CircularStd';
    border: 2px solid var(--tul-color-5);
    box-shadow: 0 0 10px var(--tul-color-3);
}

.content-right{
    width: 80%;
    height: auto;
    position: relative;
    left: 20%;
}
.content-left{
    width: 80%;
    height: auto;
}

.flex-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.foot-logo{
    width: 120px;
    height: auto;
    filter: brightness(10) opacity(.75) drop-shadow(0 0 0 var(--tul-color-5));
    margin: 10px;
}
.foot-logo:hover{
    filter:brightness(1) drop-shadow(0 0 5px var(--tul-color-5)) drop-shadow(0 0 8px var(--tul-color-5)) drop-shadow(0 0 10px var(--tul-color-5)) drop-shadow(0 0 10px var(--tul-color-5));
}
footer a{
    color: var(--tul-color-5);
    text-decoration: none;
}

footer a :hover{
    color: var(--tul-color-4);
}

ul{list-style: none;}

.cel::before{
    content: url("../assets/icons/smartphone.svg");
	margin-right:3px;
}
.pin::before{
	content: url("../assets/icons/map-pin.svg");
	margin-right:3px;
}
.pin-tulbot::before{
    content: "";
    position: absolute;
    left: 0;
    top: -4px;
    width: 35px;
    height: 35px;
    background-image: url("../assets/icons/tulbot.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.pin-tulbot{
    position: relative;
    padding-left: 40px;
}
.big-pin-tulbot::before{
    content: "";
    position: absolute;
    left: 20px;
    top: 7px;
    width: 45px;
    height: 45px;
    background-image: url("../assets/icons/tulbot.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.big-pin-tulbot{
    position: relative;
    padding-left: 40px;
}
.code-tulbot::before{
	content: url("../assets/icons/code-tulbot.svg");
	margin-right:3px;
}
.serv-tulbot::before{
	content: url("../assets/icons/serv-tulbot.svg");
	margin-right:3px;
}
.bussi-tulbot::before{
	content: url("../assets/icons/bussi-tulbot.svg");
	margin-right:3px;
}

.btn-icon{
    border: 0;
    width: 32px;
    height: 32px;
}
.btn-icon:hover{
    border: 0;
    box-shadow: 0 0 25px var(--tul-color-5);
    width: 32px;
    height: 32px;
    border-radius: 25%;
}
.btn-facebook{
    background: url("../assets/icons/facebook.svg");
    background-repeat: no-repeat;
    background-position: center;
    
}
.btn-facebook:hover{
    background: url("../assets/icons/facebook_active.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--tul-color-5);
}
.btn-twitter{
    background: url("../assets/icons/twitter.svg");
    background-repeat: no-repeat;
    background-position: center;
    
}
.btn-twitter:hover{
    background: url("../assets/icons/twitter_active.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--tul-color-5);
}
.btn-instagram{
    background: url("../assets/icons/instagram.svg");
    background-repeat: no-repeat;
    background-position: center;
    
}
.btn-instagram:hover{
    background: url("../assets/icons/instagram_active.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--tul-color-5);
}

footer{
    background-image: url('../assets/img/foot-tul-01.png');
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-color: var(--tul-color-2);
    color: var(--tul-color-5);
    font-family: "Metropolis";
    font-size: medium;
}

@keyframes logo_right{
    0%{
        transform: scale(.8);
        filter: blur(0px) brightness(1);
    }
    90%{
        filter: blur(30px) brightness(1.2);
        transform: translate(31vw) scale(.5);
    }
    100%{
        transform:translate(31vw) scale(.7);
        filter: blur(0px) brightness(1) drop-shadow(0 0 10px var(--tul-color-5));
    }
}
@keyframes logo_left{
    0%{
        transform: scale(.8) translate(31vw);
        filter: blur(0px) brightness(1);
    }
    90%{
        filter: blur(30px) brightness(1.2);
        transform: translate(0vw) scale(.5);
    }
    100%{
        transform:translate(0vw) scale(1);
        filter: blur(0px) brightness(1);
    }
}

@keyframes animateWords {
    0%{
        transform: translateY(0%);
    }
    20%{
        transform: translateY(-100%);
    }
    40%{
        transform: translateY(-200%);
    }
    60%{
        transform: translateY(-300%);
    }
    80%{
        transform: translateY(-400%);
    }
    100%{
        transform: translateY(-500%);
    }
}