@import url('https://fonts.googleapis.com/css?family=Muli:bold,normal&display=swap'); /*Placa Nombre*/
@import url('https://fonts.googleapis.com/css?family=Public+Sans&display=swap'); /*Slogan animación inicio*/

body{
    background-size: cover;
}

.linea{
    border: 1px solid #000!important;
}

.imagenProducto{
    box-shadow: none;
}

.banner{
    position: absolute!important;
    top: 70px;
    left: auto;
    right: 0;
    height: 401px!important;
    width: 390px!important;
    background-size: cover!important;
    animation: inicioBanner 14s 1 linear;
}



.areaBotones{
    position: absolute;
    top: 0;
    left:0;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(0,0,0,0.7);
}

.bgLogo{
    position: absolute;
    top:0;
    right:0;
    width: 62%;
    height: 100px;
    z-index:11;
    background: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    /*box-shadow: 3px 3px 9px #000;*/
    padding: 0!important;
    
    
}

.logoEcard{
    position: absolute;
    width: 95%;
    height: 100px;
    object-fit: contain;
    animation: logoEcard 12s 1 linear;
    
}

.corner{
    position: absolute;
    height: auto;
    width: auto;
    z-index:2;
    bottom: 0;
    right: 0;
    z-index: 8;
}

/*.elemento1{
    position: absolute;
    height: 300px;
    width: 80px;
    top: 0;
    left: 15px;
    z-index:10;
    animation: elemento1 12s 1 linear;
}*/

.tema{
    position: absolute;
    bottom: 0;
    right: 0;
    z-index:10;
}


.bgareabotones, .bgPlacaNombre{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index:5;
}

.bgPlacaNombre{
    left:auto;
    top: auto;
    bottom: 80px;
    right: 0;
    width: 45%;
    height: 43px;
}


/*#quieroUnirme{
    position: absolute!important;
    width: 65px;
    text-align: center;
    right: 0;
    bottom: 130px;
}

#quieroUnirme .Tbotton{
    color: #00849b; 
    font-size: 10px;
}

.mercadeo{
    position: absolute;
    z-index: 6;
    bottom: 145px;
    right: 0;
    /*width: 90px;*//*
    height: 70px;
    animation: mercadeo 12s 1 linear;
}*/

/*.boton{
    width: 40px;
    height: 40px;
}*/

.boton{
    width: 40px;
    height: 40px;
}

.icoAndSombra{
    width: 40px;
    height: auto;
}

.labelTop{
    font-size: 8px!important;
}

#infoDockL{
    position: absolute;
    top: 350px;
    left:0;
}

 #infoDockL label{
    position: absolute;
    top: 0;
    left:0;
    width: 125px;
    padding: 8.5px;
    font-size: 12px;
    text-align: center;
    color: #fff;
}

.icoInfo{
    width: 125px;
    height: auto;
}

.iconoCatalogo{
    width: 23.5px;
    height: auto;
    position: absolute;
    top: 7.5px;
    left: 7.5px;
}

#contacto, #catalogo, #citas{
    top: 110px;
}

#contacto{
    right: 160px;
}

#catalogo{
    right: 84px;
}

#citas{
    right: 8px;
}

/*#club{
    position: absolute;
    top: 290px;
    left: 25%;
}*/

#share{
    top: 0;
    left: 10px;
}

#refresh{
    top:0;
    left: 70px;
}

#areaPrimarios{
    animation: areaPrimarios 12s 1 linear;
}

.areaSecundarios{
    position: absolute;
    width: 80px;
    top: 100px;
    left:10px;
    animation: areaSecundarios 12s 1 linear;
}

#galeria{
    top: 20px;
    left:20px;
}

#promos{
    top: 75px;
    left:20px;
}

#eventos{
    top: 130px;
    left:20px;
}

.bgRedes{
    position: absolute;
    z-index: 50;
    bottom: 40px;
    left: 0;
    width: 40%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.iconRedes{
    position: relative!important;
    font-size: 17px;
    margin:7px;
    cursor: pointer;
}

/*#mas{
    bottom: -7px;
    left: -100px;
}

#agregar{
    bottom: -7px;
    left: -55px;
}*/
/*
#mas .glyphicon, #agregar .glyphicon{
    font-size: 18px!important;
    color: #000!important;
}

#mas .Tbotton, #agregar .Tbotton{
    font-size: 8px!important;
    top:30px!important;
}*/




/**/


/************PLACA NOMBRE**************/

.infoAgente{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60%!important;
    height: 200px;
    text-align: center;
    padding: 15px;
}

.placaFoto{
    
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: 1px 1px 3px #000;
    object-fit: cover;
    top: 10px; 
    left: 26%;
    margin: auto;
    animation: placaFoto 12s 1 linear;
}

    @keyframes placaFoto{
        from{left: 100%}
        to{left: 26%;}
    }


.placaNombre{
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    color: #000;
    border-radius: 0;
    height: 45px;
    
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /*background: -moz-linear-gradient(left, #5599ca, #5599ca, #3774ad);
    background: -webkit-linear-gradient(left, #5599ca, #5599ca, #3774ad);
    background: -o-linear-gradient(left, #5599ca, #5599ca, #3774ad);
    background: -linear-gradient(left, #5599ca, #5599ca, #3774ad);*/
    /*animation: placaNombre 12s 1 linear;*/
}

.nomAgente, .puestoAgente, .idAgente{
    position: relative;
    font-family: 'Muli', sans-serif;
    text-align: center;
    color: #000;
    line-height : 20px;
    font-weight: bold!important;
}

.nomAgente{
    font-weight: bold;
    font-size: 15px;
    top: 8px;
    
}


.puestoAgente{
    top: 5px;
    font-size: 13px;
    font-weight: normal!important;
}

.idAgente{
    color:#000;
    font-size: 10px;
    top: 5px;
}

/*.estadoAgente{
    bottom: 140px; right: 0; width: 50%; text-align: center;
    animation: estadoAgente 12s 1 linear;
}*/

/************ACCIONES**************/

#divAcciones{
    position: absolute;
    top: 0%;
    right:-90px;
    width:90px;
    height: 100%;
    background: rgba(255,255,255,0.7);
    z-index:40;
    border-left: 2px solid #052c49;

}

.botonesAcciones #cerrarAccion{
    top: 0;
    left: 25%;
}

.titleAccion{
    width: 100%;
    top: 60px;
    left:-18px;
    background: #000;
    color: #fff;
    font-weight: bold!important;
}

#AccionesContacto, #AccionesRedes{
    top: 95px;
    z-index: 1;
}

.botonesAcciones{
    top: 0;
    z-index: 100;
    height: 250px;
    width: 90px!important;
    right: 0;
}

.espacioAcciones{
    top: 0!important;
    height:500px!important;
    width: 90px;
    right: 0;
    background: transparent;/*rgba(74,152,174, 0.9);*/
    
}

#AccionesContacto .Tbotton{
    bottom: -10px!important;
}

.espacioOpciones, .espacioOpciones2{
    width: 100%;
    margin-top: 15px;
    margin-bottom: 10px;
}

/************CERTIFICADO**************/

.logo_cert{
    top: 60px;
    width: 50px;
    height: 50px;
    left: 40px;
    z-index:90;
    box-shadow: none;
    object-fit: contain;
    animation: logo_cert 12s 1 linear;
}

.cert{
    object-fit: contain!important;
}

/************ANIMACIÓN**************/

#animacion{
    background: #fff;
    background-image: url('https://www.e-cards.com.mx/assets/images/templetes/_estambul/bg_anima.jpg');
    background-size: cover;
    
}

.logoInicio{
    width: 60%;
    margin-left: 20%;
    margin-top: 140px;
}

.contenedor{
    position: relative;
    margin-left: 10%;
    width: 80%;
    
}

#slogan{
    /*font-family: 'Comic Neue', cursive!important;
    font-size: 25px!important;
    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff;*/
    font-family: 'Anton', sans-serif!important;
    font-size: 20px!important;
}

/************CATALOGO**************/

.nombreCatalogo{
    color:#000;
    font-size: 45px;
}

/************REDES**************/























/*******Mantalla mayor al ancho de la tarjeta (390 px).)*/
@media (min-width: 390px) {/*415px*/
    .banner{
        /*top: 66px;
        height: 343px!important;*/
    }
    
    /*.logoEcard{
        left: 12px;
    }*/
    
     /*#slogan{
        font-size: 30px;
    }   */
    
    #infoDockL{
        top: 370px;
        
    }
    
   
        
    .logoInicio{
        margin-top: 160px;
    }
    
    #contacto{
        right: 46%;
    }
    
    #catalogo{
        right: 25.5%;
    }
    
    #citas{
        right: 5%;
    }
    
    
    
    .labelTop{
        font-size: 10px!important;
    }
    
    /*#contacto, #redes, #catalogo, #citas{
        left: 8%;
    }*/
    
    /*#contacto{
        top: 300px;
    }
    
    #redes{
        top: 370px;
    }
    
    #catalogo{
        top: 440px
    }
    
    #citas{
        top: 510px;
    }*/
    
    /*#contacto{
        left: 15%;
    }
    
    #redes{
        left: 35%;
    }
    
    #catalogo{
        left: 55%;
    }
    
    #citas{ 
        left: 75%;
    }*/
    
    /*#share{
        left: 15px
    }
    
    #refresh{
        left: 180px
    }*/
    
    /*#share{
        bottom: 175px;
        right: 180px;
    }
    
    
    #refresh{
        bottom: 180px;
        right: 15px;
    }*/
    
    #share{
        bottom: 188px;
        right: 215px;
    }
    
    #refresh{
        bottom:195px;
        right: 15px;
    }
    
    /*.infoAgente{
        width: 50%!important;
    }*/

    .placaFoto{
        width: 125px;
        height: 125px;
        top: -5px; 
        left: 24%;
    }
    
    @keyframes placaFoto{
        from{left: 100%}
        to{left: 24%;}
    }
    
    /*.placaNombre{
        bottom: 90px;
        left: 16%;
        width: 40%;
    }*/
    
    .nomAgente{
        font-size: 17px;
        top:8px;
    }
    
    .puestoAgente{
        font-size: 15px;
        top:5px;
    }
    
    .idAgente{
        font-size: 12px;
    }
    
    
    
    /*.estadoAgente{
        bottom: 145px;
    }*/
    
    /*#promos{
        bottom: 70px;
        left: auto;
        right:10px;
    }
    
    #eventos{
        bottom: 120px;
        left: auto;
        right:60px;
        height: auto;
    }
    
    #galeria{
        bottom: 10px;
        left: auto;
        right:10px;
    }
    
    #mas{
        bottom: 10px;
        left: auto;
        right:60px;
    }
    
    #agregar{
        bottom: 10px;
        left: auto;
        right:110px;
    }
    
    #mas .glyphicon, #agregar .glyphicon{
        font-size: 18px!important;
        color: #fff!important;
    }
    
    #mas .Tbotton, #agregar .Tbotton{
        font-size: 10px!important;
        top:35px!important;
    }*/
    
    .logo_cert{
        top: 70px;
    }
    
    .contenedor{
        width: 100%;
        margin-left: 0%;
        
}
    
    
    
    
    
    
    
    
    
}


@keyframes maquina{
    from{
        width: 100%;
    }
    to{
        width: 0;
    }
}


@keyframes foto{
    from{
        left: -100%;
    }
    to{
        left: 7.5%;
    }
}

@keyframes placaNombre{
    from{
        left: -390px;
    }
    to{
        left: 0;
    }
}

@keyframes areaPrimarios{
    from {opacity: 0}
    to   {opacity: 1}
}

@keyframes areaSecundarios{
    from {opacity: 0}
    to   {opacity: 1}
}

@keyframes logo_cert{
    0% {opacity: 0}
    90% {opacity: 0}
    100% {opacity: 1}
}



@keyframes inicioBanner{
    from{
        right: 390px;
    }
    to{
        right: 0;
    }
}

@keyframes estadoAgente{
    from{
        right: -50%;
    }
    to{
        right: 0;
    }
}

@keyframes logoEcard{
    from{
        top: -100px;
    }
    to{
        top:0;
    }
}

/*@keyframes elemento1{
    from{
        top: -500px;
    }
    to{
        top:0;
    }
}*/