﻿@keyframes show
{
    from
    {
        opacity : 0;
        scale   : 90%;
    }
    to
    {
        opacity : 1;
        scale   : 100%;
    }
}
@keyframes mostrarScalar {
	from 
    {
        opacity   : 0;
        transform : scale3d(.5, .5, .5);
	}
	to 
    {
        opacity: 1;
	}
}
.contacto .txt-1, .contacto .txt-2, .txt-donde-estamos svg, .txt-datos-contacto svg, .txt-donde-estamos .de-1, .txt-datos-contacto .de-1, .txt-donde-estamos .de-2, .txt-datos-contacto .de-2, .txt-donde-estamos .de-3, .txt-datos-contacto .de-3
{
    animation: mostrarScalar 1.5s ease 0s 1 normal forwards;
}
.formulario .form-group, .formulario .bt-enviar, .col-txt-mas-contacto, .logos-rs
{
    view-timeline-name   : --fadeA;
    view-timeline-axis   : block;
    animation-timeline   : --fadeA;
    animation-name       : show;
    animation-range      : entry 10% cover 25%;
    animation-fill-mode  : both;
}

.container
{
    background: #F4F7FE;
}
.contacto .txt-1
{
    color       : #244079;
    text-align  : center;
    font-size   : 36px;
    font-style  : normal;
    font-weight : 800;
    line-height : 46.8px;
    padding     : 100px 0px 0px 0px;
}
.contacto .txt-2
{
    color       : #737B7D;
    text-align  : center;
    font-size   : 20px;
    font-style  : normal;
    font-weight : 400;
    line-height : 26px;
    padding     : 10px 0px 101px 0px;
}

.txt-donde-estamos
{
    padding : 0px 0px 0px 170px;
}


.txt-donde-estamos .de-1, .txt-datos-contacto .de-1
{
    color       : #161C2D;
    font-size   : 22px;
    font-style  : normal;
    font-weight : 800;
    line-height : 28.6px;
    padding     : 10px 0px 20px 0px;
}
.txt-donde-estamos .de-2, .txt-datos-contacto .de-2
{
    color       : #737B7D;
    font-size   : 18px;
    font-style  : normal;
    font-weight : 700;
    line-height : 25.2px;
}
.txt-donde-estamos .de-3, .txt-datos-contacto .de-3
{
    color       : #737B7D;
    font-size   : 18px;
    font-style  : normal;
    font-weight : 400;
    line-height : 140%;
    max-width   : 354px;
}

.formulario
{
    margin        : 41px 160px 60px 160px;
    padding       : 50px;
    border-radius : 12px;
    background    : #FFFFFF;
    box-shadow    : 0px 20px 30px 0px rgba(36, 64, 121, 0.10);
}
.formulario label
{
    color          : #262626;
    font-family    : Inter;
    font-size      : 15px;
    font-style     : normal;
    font-weight    : 800;
    line-height    : 19.5px;
    letter-spacing : -0.1px;
    padding        : 0px 0px 10px 0px;
}

.formulario .form-group
{
    padding : 0px 0px 40px 0px;
}
.form-group input, .form-group textarea
{
    padding : 10px 20px 10px 20px;
}

.formulario .bt-enviar
{
    display         : flex;
    padding         : 10px 40px 10px 40px;
    justify-content : center;
    align-items     : center;
    border-radius   : 6px;
    border          : 2px solid #DD082D;
    background      : #FFFFFF;
    color           : #DD082D;
    font-size       : 16px;
    font-style      : normal;
    font-weight     : 600;
    line-height     : 22px;
    letter-spacing  : -0.32px;
}

.col-txt-mas-contacto
{
    color       : #737B7D;
    text-align  : center;
    font-size   : 20px;
    font-style  : normal;
    font-weight : 400;
    line-height : 26px;
    padding     : 0px 0px 20px 0px;
}
.col-txt-mas-contacto a
{
    color                : #385DA8;
    text-decoration-line : underline;
}
.logo-linkedin
{
    text-align    : right;
    border-right  : 2px solid #D8D8D8;
    padding-right : 30px;
}
.logo-telegram
{
    text-align : left;
    padding-left : 30px;
}
.logos-rs
{
    padding : 0px 0px 130px 0px;
}

.formulario .bt-enviar.enviando
{
    color :#dd082d47 !important;
}

.formulario .col-btenviar
{
    position : relative
}
.formulario .col-btenviar .spinner-border
{
    position : absolute;
    top      : 6px;
    left     : 60px;
}



@media (min-width: 1440px) 
{
}
@media (min-width: 1400px)  and (max-width: 1440px) /*XXL*/
{
}
@media (min-width: 1200px)  and (max-width: 1399px) /*XL*/
{
}

@media (min-width: 992px)  and (max-width: 1199px) /*LG*/
{
    .contacto .txt-1
    { 
        font-size   : 32px !important; 
        line-height : initial !important;
    }
    .txt-donde-estamos
    {
        padding: 0px 0px 40px 280px;
    }
    .txt-datos-contacto
    {
        padding: 0px 0px 40px 280px;
    }
    .formulario
    {
        margin: 30px 60px 60px 60px;
    }
}

@media (min-width: 768px)  and (max-width: 991px) /*MD*/
{
    .contacto .txt-1
    { 
        font-size   : 32px !important; 
        line-height : initial !important;
    }
    .txt-donde-estamos
    {
        padding: 0px 0px 40px 160px;
    }
    .txt-datos-contacto
    {
        padding: 0px 0px 40px 160px;
    }
    .formulario
    {
        margin: 30px 60px 60px 60px;
    }
}

@media (min-width: 576px)  and (max-width: 767px) /*SM*/
{
    .contacto .txt-1
    { 
        font-size   : 32px !important; 
        line-height : initial !important;
    }
    .txt-donde-estamos
    {
        padding: 0px 0px 40px 50px;
    }
    .txt-datos-contacto
    {
        padding: 0px 0px 40px 50px;
    }
    .formulario
    {
        margin: 30px 30px 60px 30px;
    }  
}

@media (min-width: 0px)  and (max-width: 575px) /*XS*/
{ 
    .contacto .txt-1
    { 
        font-size   : 32px !important; 
        line-height : initial !important;
    }
    .txt-donde-estamos
    {
        padding: 0px 20px 40px 20px;
    }
    .txt-datos-contacto
    {
        padding: 0px 20px 40px 20px;
    }
    .formulario
    {
        margin  : 30px 10px 60px 10px;
        padding : 50px 20px 50px 20px;
    }
    .logos-rs 
    {
        padding: 0px 0px 60px 0px;
    }
}