div.btnChat{/*estilos de ajuste al div que sera el boton de llamar al bot*/
    padding-right: 0;
    padding-left: 0;
    background-color: rgba(3,155, 153, 1) !Important;
    width: 9em;
    height: 3em;
    float: right !Important;
    color:rgba(255, 255, 255, 1);
    font-size: 1.2em;
    alignment-adjust: auto !Important;
    margin-right: -85.5% !Important;
    margin-left: 5px;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5) !Important;
    transition: width 0.7s;
}
div.btnChat:hover{
    /*estilos de ajuste al div que sera el boton de llamar al bot cuando el usuario pasa por encima el mouse*/
    width: 10em;
    transition: width 0.7s;
    background-color: rgba(3,155, 153, 0.5) !Important;
    margin-right: -50% !Important;
    cursor: pointer;
}
.imgBot{/*imagen que se muestra en el div que llama al bot*/
    width: 2em;
    height: 2em;
    margin: 0.5em 0.5em auto !Important;
    float: left;
    filter: drop-shadow(2px 2px 3px rgba(255, 255, 255, 1));
}
.textBtnChat{/*texto contenido enel div que llama al bot*/
    margin-top: 10px;
    margin-right: -20px;
}
.btn{
    background-color: rgba(3,155, 153, 1) !Important;
    padding-right: 0px;
    padding-left: 0;
 }
#btn{
    background-color: rgba(3,155, 153, 1) !Important;
    float: right !Important;
    margin-right: -8.5em;
    width: 12em;
}
.btn-info {
    color: #fff;
    background-color: rgba(3,155, 153, 1);
    border-color: #17a2b8;
}
.btn-lg, .btn-group-lg > .btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}
.modal-open {
    overflow: hidden;
}
.modal {/*fondo transparente cuando se llama al bot*/
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    //display: none;
    overflow: hidden;
    outline: 0;
}
.modal.fade .modal-dialog {/*posicion y el movimiento del bot*/
    left: 39.3%;
    top: 60%;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    -webkit-transform: translate(0, -25%);
    transform: translate(0, -25%);
}
.modal.show .modal-dialog {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-dialog {/*contiene el modal general del bot donde estan los tres enlaces*/
    //background:rgba(255, 255, 255, 0.1) !Important;
    position: relative;
    width: auto;
    margin: 0px;
    pointer-events: none;
}
.modal-content {/*contiene el modal principal del bot donde estan los tres enlaces*/
    //background: rgba(255, 255, 255, 1) !Important;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid rgba(0, 0, 0, 1);
    border-radius: 0.3rem;
    outline: 0;
    font-size: 16px !Important;
}
/*estios que afectan el modal que muestra los telefonos*/
.modal-tel.fade-tel .modal-dialog-tel {/*posicion y el movimiento del bot*/
    left: 10%;
    top: 10%;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    -webkit-transform: translate(0, -25%);
    transform: translate(0, -25%);
}
.modal-content-tel {/*contiene el modal principal del bot donde estan los tres enlaces*/
    //background: rgba(255, 255, 255, 1) !Important;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid rgba(0, 0, 0, 1);
    border-radius: 0.3rem;
    outline: 0;
    font-size: 16px !Important;
}
.modal-header-tel {/*contiene el titulo del bot y la imagen*/
    background-color: rgba(3,155, 153, 1);
    color:rgba(255, 255, 255, 1);
    width: 100%;
    height: 3em !Important;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}
.modal-body-tel {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 1) !Important;
}
.modal-footer-tel {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 15px;
    border-top: 1px solid #e9ecef;
}
.modal-footer-tel > :not(:first-child) {
    margin-left: .25rem;
}
.modal-footer-tel > :not(:last-child) {
    margin-right: .25rem;
}
/*termina estilos ajustados a lo stelefonos*/
.collapse {
  display: none;
}
font.font-chat{
    font-size: 16.8px !Important;
}
img.imgChatLinea{
    width: 2em;
    height: 2em;
}
div.ChatLinea{/*contiene el texto de enlace a chat en linea*/
    margin-left:-15px;
    width: 24% !Important;
    background-color: rgba(255, 255, 255, 1) !Important;
    cursor: pointer !Important;
}
img.entregaResultBot{
    width: 2em;
    height: 2em;
}
div.EntregaResultados{/*contiene el texto de enlace a entrega resultados*/
    margin-left:-15px;
    width: 24% !Important;
    background-color: rgba(255, 255, 255, 1) !Important;
    cursor: pointer !Important;
}
img.llamanos{
    width: 2em;
    height: 2em;
}
div.Llamanos{/*contiene el texto de enlace a llamanos*/
    margin-left:-15px;
    width: 24% !Important;
    background-color: rgba(255, 255, 255, 1) !Important;
    cursor: pointer !Important;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}
.modal-backdrop.fade {
    opacity: 0;
}
.modal-backdrop.show {
    opacity: 0.5;
}
.modal-header {/*contiene el titulo del bot y la imagen*/
    background-color: rgba(3,155, 153, 1);
    color:rgba(255, 255, 255, 1);
    width: 100%;
    height: 3em !Important;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}
.modal-header .close {/*estilos a la x de salida del bot*/
    padding: 0px;
    margin: -15px -10px 0px auto !Important;
}
.imgBotHeader{
    width: 2em;
    height: 2em;
    margin: -0.5em -0.5em 0em -0.5em !Important;
    float: left;
}
.textBtnChatheader{
    background-color: rgba(0,0, 0, 0);
    margin-top: -14px;
    margin-left: 40px;
}
.modal-title {
    margin-bottom: 0;
    margin-left:1.5em;
    line-height: 2.5;
}
.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 1) !Important;
}
.modal-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 15px;
    border-top: 1px solid #e9ecef;
}
.modal-footer > :not(:first-child) {
    margin-left: .25rem;
}
.modal-footer > :not(:last-child) {
    margin-right: .25rem;
}
.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1441px) and (max-width: 2000px) {
    div.btnChat{/*estilos de ajuste al div que sera el boton de llamar al bot*/
        padding-right: 0px;
        padding-left: 0px;
        background-color: rgba(3,155, 153, 1) !Important;
        width: 12em;
        height: 3em;
        float: right !Important;
        color:rgba(255, 255, 255, 1);
        font-size: 1.2em;
        alignment-adjust: auto !Important;
        margin-right: -5em !Important;
        box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5) !Important;
        transition: width 0.7s;
        animation: mymove 5s infinite;
    }    
    div.btnChat:hover{
        /*estilos de ajuste al div que sera el boton de llamar al bot cuando el usuario pasa por encima el mouse*/
        width: 15em;
        transition: width 0.7s;
        background-color: rgba(3,155, 153, 0.5) !Important;
        margin-right: -7em !Important;
        cursor: pointer;
    }
}
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
    div.btnChat{/*estilos de ajuste al div que sera el boton de llamar al bot*/
        padding-right: 0px;
        padding-left: 0px;
        background-color: rgba(3,155, 153, 1) !Important;
        width: 9em;
        height: 3em;
        float: right !Important;
        color:rgba(255, 255, 255, 1);
        font-size: 1.2em;
        alignment-adjust: auto !Important;
        margin-right: -45% !Important;
        margin-left: 0%;
        box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5) !Important;
        transition: width 0.7s;
    }    
    div.btnChat:hover{
        /*estilos de ajuste al div que sera el boton de llamar al bot cuando el usuario pasa por encima el mouse*/
        width: 10em;
        transition: width 0.7s;
        background-color: rgba(3,155, 153, 0.5) !Important;
        margin-right: -5em !Important;
        cursor: pointer;
    }
    .modal.fade .modal-dialog {/*posicion y el movimiento del bot*/
        left: 34.5%;
        top: 50%;
    }
}    
/* 
  ##Device = Tablets, Ipads 
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px){
    div.btnChat{/*estilos de ajuste al div que sera el boton de llamar al bot*/
        padding-right: 0px;
        padding-left: 0px;
        background-color: rgba(3,155, 153, 1) !Important;
        width: 9em;
        height: 3em;
        float: right !Important;
        color:rgba(255, 255, 255, 1);
        font-size: 1.2em;
        alignment-adjust: auto !Important;
        margin-right: -22.5% !Important;
        margin-left: 0%;
        box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5) !Important;
        transition: width 0.7s;
    }
    div.btnChat:hover{
        /*estilos de ajuste al div que sera el boton de llamar al bot cuando el usuario pasa por encima el mouse*/
        width: 10em;
        transition: width 0.7s;
        background-color: rgba(3,155, 153, 0.5) !Important;
        margin-right: -3.3em !Important;
        cursor: pointer;
    }
    div.ChatLinea{ /*div que contiene el boton y letrero de chat en linea*/
        margin-left: 0px;
        width: 100% !Important;
        background-color: rgba(255, 255, 255, 1) !Important;
        cursor: pointer !Important;
    }
    div.EntregaResultados{/*div que contiene el boton y letrero de entrega resultados*/
        margin-left:0px;
        width: 100% !Important;
        background-color: rgba(255, 255, 255, 1) !Important;
        cursor: pointer !Important;
    }
    div.Llamanos{/*div que contiene el boton y letrero de llamanos*/
        margin-left:0px;
        width: 100% !Important;
        background-color: rgba(255, 255, 255, 1) !Important;
        cursor: pointer !Important;
    }
    .modal.fade .modal-dialog {/*posicion y el movimiento del bot*/
        background: rgba(255, 255, 255, 1) !Important;
        left: 39.3%;
        top: 60%;
        width: 25em !Important;
        transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
        -webkit-transform: translate(0, -25%);
        transform: translate(0, -25%);
    }
    .modal-dialog {/*contiene el modal del bot*/
        position: relative;
        width: 50em !Important;
        margin-right: 39.5% !Important;
        margin-bottom: 50% !Important;
        pointer-events: none;
    }
} 
/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    div.btnChat{/*estilos de ajuste al div que sera el boton de llamar al bot*/
        padding-right: 0;
        padding-left: 0;
        background-color: rgba(3,155, 153, 1) !Important;
        width: 9em;
        height: 3em;
        float: right !Important;
        color:rgba(255, 255, 255, 1);
        font-size: 1.2em;
        alignment-adjust: auto !Important;
        margin-right: -42% !Important;
        margin-left: 0%;
        box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5) !Important;
        transition: width 0.7s;
    }
    div.btnChat:hover{
        /*estilos de ajuste al div que sera el boton de llamar al bot cuando el usuario pasa por encima el mouse*/
        width: 10em;
        transition: width 0.7s;
        background-color: rgba(3,155, 153, 0.5) !Important;
        margin-right: -19% !Important;
        cursor: pointer;
    }
}    
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 380px) and (max-width: 767px){
    div.btnChat{/*estilos de ajuste al div que sera el boton de llamar al bot*/
        padding-right: 0;
        padding-left: 0;
        background-color: rgba(3,155, 153, 1) !Important;
        width: 9em;
        height: 3em;
        float: right !Important;
        color:rgba(255, 255, 255, 1);
        font-size: 1.2em;
        alignment-adjust: auto !Important;
        margin-right: -30% !Important;
        margin-left: 0%;
        box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5) !Important;
        transition: width 0.7s;
    }
    div.btnChat:hover{
        /*estilos de ajuste al div que sera el boton de llamar al bot cuando el usuario pasa por encima el mouse*/
        width: 10em;
        transition: width 0.7s;
        background-color: rgba(3,155, 153, 0.5) !Important;
        margin-right: -8.5% !Important;
        cursor: pointer;
    }
    div.ChatLinea{
        margin-left:-15px;
        width: 100% !Important;
        background-color: rgba(255, 255, 255, 1) !Important;
        cursor: pointer !Important;
    }
    div.EntregaResultados{
        margin-left:-15px;
        width: 100% !Important;
        background-color: rgba(255, 255, 255, 1) !Important;
        cursor: pointer !Important;
    }
    div.Llamanos{
        margin-left:-15px;
        width: 100% !Important;
        background-color: rgba(255, 255, 255, 1) !Important;
        cursor: pointer !Important;
    }
    .modal.fade .modal-dialog {/*posicion y el movimiento del bot*/
        left: 2.5%;
        top: 62.3%;
        width: 25em !Important;
        transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
        -webkit-transform: translate(0, -25%);
        transform: translate(0, -25%);
    }
    .modal-dialog {/*contiene el modal del bot*/
        position: relative;
        width: 50em !Important;
        margin-right: 39.5% !Important;
        margin-bottom: 50% !Important;
        pointer-events: none;
    }
} 
/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media only screen and (max-width: 379px ){
    div.btnChat{/*estilos de ajuste al div que sera el boton de llamar al bot*/
        padding-right: 0;
        padding-left: 0;
        background-color: rgba(3,155, 153, 1) !Important;
        width: 9em;
        height: 3em;
        float: right !Important;
        color:rgba(255, 255, 255, 1);
        font-size: 1.2em;
        alignment-adjust: auto !Important;
        margin-right: -33% !Important;
        margin-top: -30%;
        box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5) !Important;
        transition: width 0.7s;
    }
    div.btnChat:hover{
        /*estilos de ajuste al div que sera el boton de llamar al bot cuando el usuario pasa por encima el mouse*/
        width: 10em;
        transition: width 0.7s;
        background-color: rgba(3,155, 153, 0.5) !Important;
        margin-right: -1.3em !Important;
        cursor: pointer;
    }
    div.ChatLinea{
        margin-left:-15px;
        width: 100% !Important;
        background-color: rgba(255, 255, 255, 1) !Important;
        cursor: pointer !Important;
    }
    div.EntregaResultados{
        margin-left:-15px;
        width: 110% !Important;
        background-color: rgba(255, 255, 255, 1) !Important;
        cursor: pointer !Important;
    }
    div.Llamanos{
        margin-left:-15px;
        width: 100% !Important;
        background-color: rgba(255, 255, 255, 1) !Important;
        cursor: pointer !Important;
    }
    .modal.fade .modal-dialog {/*posicion del modal que contiene los tres opciones*/
        background-color: rgba(0, 0, 0, 0) !Important;
        left: -8px;
        top: 59%;
        width: 25em !Important;
        transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
        -webkit-transform: translate(0, -25%);
        transform: translate(0, -25%);
    }
    .modal-dialog {/*contiene el modal del bot*/
        background-color: rgba(0, 0, 0, 0) !Important;
        position: relative;
        width: 50em !Important;
        margin-right: 39.5% !Important;
        margin-bottom: 50% !Important;
        pointer-events: none;
    }
    .div_phone{
        background-color: rgba(255, 255, 255, 1) !Important;
        width: 100% !Important;
        left: -20px !Important;
    }
    .div_chat{
        background-color: rgba(255, 255, 255, 1) !Important;
        width: 100% !Important;
        left: -20px !Important;
    }
}