.header{
    top: 0px;
    margin-right: 20px;
    margin-top: 5px;
    text-align: right;
}
.fondo{
    background-image: url(../images/fondo1.jpg);
    background-color: #00000088;
    background-attachment: fixed;
    background-size: 100%;
    /*background-repeat: no-repeat;*/
}

.container-botones{
    display:flex;
    align-items: center;
    justify-content:center;
    flex-direction: column;
    margin-top: -100px;
}

.links{
    margin-top: 15px;
    padding: 1em;
    width: 90%;
    /*background-color: #f28cb4  !important;*/
    background: linear-gradient(90deg, #31307B, #31307B);
    color:#82c7e6;
    /*text-shadow: black 0.1em 0.1em 0.2em;*/
    font-family: 'Open Sans';
    font-size: 18px;
    border-color: #82c7e6;;
    border-radius: 50px;;
    box-shadow: 4px 4px 7px #333;
}

.hot{
    margin-top: 15px;
    padding: 1em;
    width: 90%;
    border-color: #82C7E6;
    /*background: linear-gradient(180deg, #1078B0, #29A2E3);*/
    /*background-color: #29c04d  !important;*/
    /*background-image: url(../images/hot.gif);*/
    color:#fff;
    font-family: 'Open Sans';
    font-size: 18px;
    border-color: #82C7E6;
    border-radius: 50px;
    box-shadow: 4px 4px 7px #333;
    /*text-shadow: 0.07em 0.07em 0.2em #000;*/
    animation-name: anim;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

/*Animacion de cambio de color*/
@keyframes anim{
    0% {background-color: #82C7E6; border-color: #31307B; color: #31307B} 
   25% {background-color: #31307B; border-color: #82C7E6; color: #82C7E6} 
   50% {background-color: #82C7E6; border-color: #31307B; color: #31307B} 
   75% {background-color: #31307B; border-color: #82C7E6; color: #82C7E6} 
   100% {background-color: #82C7E6; border-color: #31307B; color: #31307B}
   /*100% {background-color: #7fc41c;} /*Otra vez naranja*/
}

.links :hover{
    /*background-color: #ffc72c;*/
    border-color: #fff;
    color: #fff000;
    border-radius: 0px;
    border-width: 3px;

}

.encabezado{
    background-color: transparent !important;
    /*background-image: url(../images/fondo.png);
    background-attachment: fixed;*/
}

.encabezado .imagen_face{
    display: flex;
    justify-content: center !important;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 150px;
    border-color: #82c7e6;;
    border-style: solid;
    border-width: 3px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 4px 4px 7px #333;

    animation-name: anim-imagen_face;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

/*Animacion de cambio de color*/
@keyframes anim-imagen_face{
    0% {border-color: #31307B;} 
   25% {border-color: #82C7E6;} 
   50% {border-color: #31307B;} 
   75% {border-color: #82C7E6;} 
   100% {border-color: #31307B;}
   /*100% {background-color: #7fc41c;} /*Otra vez naranja*/
}

.encabezado .video_face{
    display: flex;
    justify-content: center !important;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 150px;
    border-color: #ffc72c;
    border-style: solid;
    border-width: 3px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    box-shadow: 4px 4px 7px #333;
}

.encabezado .texto_face{
    font-family: Roboto, sans-serif;
    font-size: 24px;
    text-align: center;
    margin-top: 15px;
    color: #fff;
    text-shadow: #000 0.1em 0.1em 0.2em, 0.1em 0.1em 0.1em #000;
}

.texto_descripcion_face{
    font-family: Roboto, sans-serif;
    font-size: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    text-align: center;
    color: #fff;
    text-shadow: #000 0.1em 0.1em 0.2em, 0.1em 0.1em 0.1em #000
}

.py-5{
    padding-top: 1rem !important;
}

.fondo-avatar{
    background-color: #00000088;
    width: 100%;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
}

.titulo_promocion{
    color: #fff;
    text-shadow: black 0.1em 0.1em 0.2em, 0.1em 0.1em 0.1em black;
    text-align: center;
}

.fab {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    }
    
    .fab:hover {
    opacity: 0.7;
    }
    
    .fa-whatsapp {
    background: #00bb2d;
    color: white;
    }

    .encabezado .imagen_whatsapp{
        display: flex;
        justify-content: center !important;
        align-items: center;
        width: 50px;
        height: 50px;
        /*border-radius: 150px;*/
        margin-left: auto;
        margin-right: auto;
        /*box-shadow: 4px 4px 7px #333;*/
    }

    .redes-superiores{
        position: relative;
        top: -120px;
        margin-left: auto;
        margin-right: auto;
    }

    .imagen_rrss{
        display: flex;
        justify-content: center !important;
        align-items: center;
        width: 50px;
        height: 50px;
        /*border-radius: 150px;*/
        margin-left: auto;
        margin-right: auto;
        /*box-shadow: 4px 4px 7px #333;*/
    }

    .imagen_instagram{
        display: flex;
        justify-content: center !important;
        align-items: center;
        width: 50px;
        height: 50px;
        /*border-radius: 150px;*/
        margin-left: auto;
        margin-right: auto;
        /*box-shadow: 4px 4px 7px #333;*/
    }

    .encabezado .imagen_telegram{
        display: flex;
        justify-content: center !important;
        align-items: center;
        width: 50px;
        height: 50px;
        /*border-radius: 150px;*/
        margin-left: auto;
        margin-right: auto;
        /*box-shadow: 4px 4px 7px #333;*/
    }

    .icon-color{
        color: #ffffff;
    }

    .container-design{
        margin-top: 20px;
        position: relative;
        /*background-color: #00000088;
        padding: 20px;*/
        align-items: center;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: 100%;
    }

    .footer{
        padding: 5px;
        margin-top: 20px;
        position: relative;
        /*bottom: 0px;*/
       /*background-color: #00000088;*/
        color: #fff;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 10px;
        text-align: center;
        width: 100%;
    }

    .link_footer{
        color: #fff;
    }

    .encabezado .imagen_face_promocion{
        display: flex;
        top: 20px;
        justify-content: center !important;
        align-items: center;
        width: 60px;
        height: 60px;
        border-radius: 150px;
        border-color: #89ecda;
        border-style: solid;
        border-width: 3px;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 4px 4px 7px #333;
    }

    .imagen_promocion{
        width: 90%;
        border-style: solid;
        border-width: 1px;
        border-radius: 10px;
        box-shadow: 4px 4px 7px #333;
    }
/****Css de las imágenes de los productos*/
    .contenedor{
        position: relative;
        display: inline-block;
        text-align: center;
    }
    /*.texto-encima{
        position: absolute;
        top: 10px;
        left: 10px;
    }*/
    .texto-imagen{
        position: relative;
        margin-top: 0px;
        left: 50%;
        transform: translate(-50%, 0%);
        background-color: #00000088;
        padding: 10px;
    }

    /****Fin de css de las imágenes de los productos*/
    
    /*******Ventana modal */

    .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }
    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }
    .modalDialog > div {
        width: 90%;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        /*background: #000;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);*/
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
    }
    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }
    .close:hover { background: #00d9ff; }

    .close_abajo {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        left: 50%;
        text-align: center;
        bottom: 10px;
        width: 100px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }

    /*******Fin ventana modal*/

    .blink_me {
        animation: blinker 1s linear infinite;
    }
      
    @keyframes blinker {
        30% {
            opacity: 0;
          background-color: #da291c;
        }
    }

    @media (max-width: 700px){
        .fondo{
            background-image: url(../images/fondo.jpg);
            background-attachment: fixed;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .encabezado .texto_face{
            color: #31307B;
            text-shadow: none;
        }

        .encabezado .texto_descripcion_face{
                color: #31307B;
                text-shadow: none;
        }
    }