/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
    span.span_chat {
        display: none;
        position:fixed;
        right:0.5%;
        bottom:4%;
        z-index:1000 !Important;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
    }  
    .div_chat {
        background-color: rgba(255, 255, 255, 1);
        display: block;
        width:400px;
        height:520px;
        z-index:0;
    }
    .emergente2{/*contenedor deonde se ajusta el chat*/
        background-color: rgba(255, 255, 255, 1);
        display: block;
        width:400px;
        height:520px;
    }
    .flecha{
        height:15px;
        width:15px;
    }   
    span.span_phone {
        display: none;
        position:fixed;
        right:0.5%;
        bottom:3%;
        z-index:10 !Important;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 3px 3px 7px rgba(0, 0, 0, 1);
    }  
    .div_phone {
        //background-color: rgba(0, 255, 0, 1);
        display: block;
        width:400px;
        height:520px;
        z-index:0;
    }
    .emergente3{
        //background-color: rgba(0, 255, 255, 1);
        display: block;
        width:390px;
        height:490px;
    }  
}
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {

    span.span_chat {
        display: none;
        position:fixed;
        right:0.5%;
        bottom:10%;
        z-index:1000 !Important;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
    }
    .div_chat {
        /*display: block;*/
        width:380px;
        height:500px;
        z-index:0;
    }
    .emergente2{
        /*display: block;*/
        height:500px;
        width:380px;
    }
    .flecha{
        height:15px;
        width:15px;
    }
    span.span_phone {
        display: none;
        position:fixed;
        right:0.5%;
        bottom:10%;
        z-index:10 !Important;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
    }
    .div_phone {
        display: block;
        width:380px;
        height:500px;
        z-index:0;
    }
    .emergente3{
        display: block;
        height:350px;
        width:300px;
    }
}
/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {

    span.span_chat {
        display: none;
        position:fixed;
        left:47%;
        bottom:2%;
        z-index:1;
        background-color: rgba(255, 255, 255, 1) !Important;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
    }
    #chat_box{
        margin-left: 0em;
    }
    .div_chat {
        /*display: block;*/
        left:47%;
        bottom:2%;
        width:400px !Important;
        height:440px !Important;
        z-index:0;
    }
    .emergente2{
        display: block;
        margin-left: 0px;
        height:440px !IMportant;
        width:380px !Important;
    }
    .flecha{
        height:15px;
        width:15px;
    }
    span.span_phone {
        display: none;
        position:fixed;
        right:10px;
        bottom:20px;
        z-index:1;
        background-color: rgba(255, 255, 255, 1) !Important;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
    }
    .div_phone {
        display: block;
        width:400px;
        height:500px;
        z-index:0;
    }
    .emergente3{
        display: block;
        margin-left: 0px;
        height:350px;
        width:300px;
    }
}
/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    span.span_chat {
        display: none;
        position:fixed;
        left:60%;
        bottom:2%;
        z-index:1;
        background-color: white;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
    }
    .div_chat {
        /*display: block;*/
        width:400px;
        height:520px;
        z-index:0;
    }
    .emergente2{
        /*display: block;*/
        height:320px;
        width:500px;
    }
    .flecha{
        height:15px;
        width:15px;
    }
    span.span_phone {
        display: none;
        position:fixed;
        right:10px;
        bottom:20px;
        z-index:1;
        background-color: white;
    }
    .div_phone {
        display: block;
        width:380px;
        height:500px;
        z-index:0;
    }
    .emergente3{
        display: block;
        height:320px;
        width:300px;
    }
}
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
    /* CSS */
    span.span_chat {
        display: none;
        position:fixed;
        right:0.5%;
        bottom:4%;
        z-index:1;
        background-color: rgba(255, 255, 255, 1) !Important;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
    }
    .div_chat {
        /*display: block;*/
        width:480px;
        height:520px;
        z-index:0;
    }
    .emergente2{
        /*display: block;*/
        margin-left: -27.5px !Important;
        height:400px !Important;
        width:480px !Important;
    }
    .flecha{
        height:5px !Important;
        width:5px !Important;
    }
    span.span_phone {
        display: none;
        position:fixed;
        right:10px;
        bottom:10px;
        z-index:1;
        background-color: white;
    }
    .div_phone {
        display: block;
        width:380px;
        height:500px;
        z-index:0;
    }
    .emergente3{
        display: block;
        width:380px;
        height:490px;
        background-color: rgba(255, 255, 255, 1) !Important;
    }
}
/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 380px) and (max-width: 480px) {
    span.span_chat {
        display: none;
        position:fixed;
        left:5px;
        bottom:5px;
        z-index:1;
        background-color: rgba(255, 255, 255, 1) !Important;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
    }
    .div_chat {
        /*display: block;*/
        width:380px;
        height:500px;
        z-index:0;
    }
    .emergente2{
        /*display: block;*/
        height:500px;
        width:380px;
    }
    .flecha{
        height:15px;
        width:15px;
    }
    span.span_phone {
        display: none;
        position:fixed;
        right:5px;
        bottom:5px;
        z-index:1;
        background-color: white;
    }
    .div_phone {
        display: block;
        width:380px;
        height:500px;
        z-index:0;
    }
    .emergente3{
        display: block;
        height:350px;
        width:300px;
    }
}
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 379px) {
    /* CSS */
    span.span_chat {
        display: none;
        position:fixed;
        margin: auto;
        margin-left:1.2em !Important;
        bottom:1em;
        z-index:1;
        background-color: rgba(255, 255, 255, 1) !Important;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
    }
    .div_chat {
        /*display: block;*/
        width:100% !Important;
        height:500px !Important;
        z-index:0;
    }
    .emergente2{
        /*display: block;*/
        height:480px;
        width:320px;
    }
    .flecha{
        height:15px;
        width:15px;
    }
    span.span_phone {
        display: none;
        position:fixed;
        width:320px;
        margin-left:1.2em !Important;
        bottom:1em;
        z-index:1;
        background-color: rgba(255, 255, 255, 1) !Important;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
    }
    .div_phone {
        display: block;
        width:380px;
        height:500px;
        z-index:0;
    }
    .emergente3{
        display: block;
        margin-left:-0.1em !Important;
        width:95% !Important;
        height:450px !Important;
    }
}