/*
            .promociones_salud
            {
                width: 100%;
                max-width: 1200px;
                margin: auto;
                text-align: center;
                padding: 60px 0px
            }
            .promociones_salud p
            {
                text-align: center
            }
            .promociones_salud > div
            {
                display: flex;
                justify-content: center;
                flex-wrap: wrap
            }
            .promociones_salud > div > div
            {
                margin: 5px;
                padding: 10px;
                background-color: #fff
            }
           .promociones_salud > div > div img:first-child:hover
            {
                transform: rotate(-2deg) translateY(-5px) scale(1.025);
            }


            .boton-promo_modal
            {
                background-color: orange;
                color: #fff;
                padding: 10px;
                border-radius: 5px;
                display: block;
                line-height: 100%;
                max-width: 400px;
                margin: 40px auto;
            }
            .boton-promo_modal:hover
            {
                color: #fff !important;
                opacity: 0.8
            }
            .modalDialog
            {
                position: fixed;
                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;
                text-align:center !important
            }
            .modalDialog:target
            {
                opacity: 1;
                pointer-events: auto;
            }
            .modalDialog > div
            {
                width: 94%;
                max-width: 600px;
                max-height: 650px;
                overflow-y: auto;
                overflow-x: hidden;
                position: relative;
                margin: 7.5% auto;
                padding: 15px;
                background: #fff;
            }
            .modalDialog > div ul
            {
                text-align: left;
                max-width: 400px;
                margin: auto;
                list-style: inherit;
                margin-bottom: 15px
            }
            .modalDialog > div img
            {
                width: 200px
            }
            .modalDialog > div p.big
            {
                font-size: 200%;
                display: block;
                margin: 25px;
                line-height: 100%;
                text-align:center
            }
            .modalDialog > div h2
            {
                font-size: 21px
            }
            .modalDialog p{text-align:center !important}
            a.btn-promo-modal
            {
    font-size: 23px;
    border: 1px solid #4abfd3;
    border-radius: 5px;
    max-width: 500px;
    margin: 0px auto 30px;
    padding: 10px;
    text-align: center;
    color: #1c4a82;
            }
            a.btn-promo-modal:hover {border: 1px solid #888;text-decoration: none;}
            .close2
            {
                background: #afafaf;
                color: #FFFFFF !important;
                line-height: 25px;
                position: absolute;
                right: -5px;
                text-align: center;
                top: -10px;
                width: 24px;
                text-decoration: none;
                font-weight: bold;
                -webkit-border-radius: 12px;
                -moz-border-radius: 12px;
                border-radius: 12px;
                transform: rotate(45deg);
                opacity: 1
            }
            .close2:hover
            {
                background: #fff;
                color: #afafaf !important;
                -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
                -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
                box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
                text-decoration:none !important;
            }
            .btn-promo-modal
            {
                display: block;
                margin-top: 15px
            }
            button.fakeImage{border:none; background-color: #fff; padding:0px}
            button.fakeImage:hover{cursor:pointer}
            .header_modal_promo{position: fixed;width: 88%; max-width: 570px;}
            .header_modal_promo a.close{transform: rotate(45deg)}
            .modalDialog button.fakeImage{background-color:orange; padding:15px; margin:30px auto; border-radius:5px; font-size:21px; color:#fff; font-weight:bold;}
            .modalDialog button.fakeImage:hover{opacity:0.7}
            button:focus {outline: none}
			button:active {border-style: none}
			img.img_prom_grande, img.img_prom_peque {width: 100% !important;margin:30px auto 0px; border:none !important}

           .modalDialog table{margin:15px auto; border:2px solid #eaeaea; overflow-y:scroll}
            .modalDialog table tr{border-bottom:1px solid #eaeaea;}
            .modalDialog table th{background-color:#f6f6f6; color:#000}
            .modalDialog table th, .modalDialog table td{padding:5px; line-height:100%}
            .modalDialog > div img{width: 200px}*/




            /***** MÓVIL **********************************************************/
           /* @media only screen and (max-width: 575px)
            {
            	/*.modalDialog button.fakeImage{white-space: break-spaces;}*/
            	/*a.btn-promo-modal {margin: 15px auto 30px;}
            }
            /***** TABLET **********************************************************/
            /*@media only screen and (min-width: 576px) and (max-width: 767px)
            {
            	.promociones_salud > div > div {width: 48%;}
            	a.btn-promo-modal {margin: 15px auto 30px;}
            }
            /***** LAPTOP **********************************************************/
            /*@media only screen and (min-width: 768px) and (max-width: 991px)
            {
            	.promociones_salud > div > div {width: 32%;}
            }
            /***** ORDENADOR **********************************************************/
           /* @media only screen and (min-width: 992px)
            {
                .promociones_salud > div
                {
                    flex-wrap: nowrap;
                    -ms-flex-wrap: wrap
                }
                .promociones_salud > div > div
                {
                    padding: 10px 0.6%;
                }
            }*/
           

/******CSS NEW 16-07-2024*****/
.promociones_salud {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    text-align: center;
    padding: 60px 0px;
}
.promociones_salud p {
    text-align: center;
}
.promociones_salud > div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.promociones_salud > div > div {
    margin: 5px;
    padding: 10px;
    background-color: #fff;
    min-width: 200px; /* Reservar espacio adecuado */
    min-height: 200px; /* Reservar espacio adecuado */
}
.promociones_salud > div > div img:first-child:hover {
    transform: rotate(-2deg) translateY(-5px) scale(1.025);
    transition: transform 0.3s ease; /* Añadir una transición suave */
}

.boton-promo_modal {
    background-color: orange;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    display: block;
    line-height: 100%;
    max-width: 400px;
    margin: 40px auto;
    transition: opacity 0.3s ease; /* Transición suave para la opacidad */
}
.boton-promo_modal:hover {
    color: #fff !important;
    opacity: 0.8;
}
.modalDialog {
    position: fixed;
    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;
    text-align: center !important;
}
.modalDialog:target {
    opacity: 1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 94%;
    max-width: 600px;
    max-height: 650px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    margin: 7.5% auto;
    padding: 15px;
    background: #fff;
}
.modalDialog > div ul {
    text-align: left;
    max-width: 400px;
    margin: auto;
    list-style: inherit;
    margin-bottom: 15px;
}
.modalDialog > div img {
    width: 200px;
    height: auto; /* Mantiene la proporción de la imagen */
   	margin-top: 15px;
}
.modalDialog > div p.big {
    font-size: 200%;
    display: block;
    margin: 25px;
    line-height: 100%;
    text-align: center;
}
.modalDialog > div h2 {
    font-size: 21px;
}
.modalDialog p {
    text-align: center !important;
}
a.btn-promo-modal {
    font-size: 23px;
    border: 1px solid #4abfd3;
    border-radius: 5px;
    max-width: 500px;
    margin: 0px auto 30px;
    padding: 10px;
    text-align: center;
    color: #1c4a82;
}
a.btn-promo-modal:hover {
    border: 1px solid #888;
    text-decoration: none;
}
.close2 {
    background: #afafaf;
    color: #FFFFFF !important;
    line-height: 25px;
    position: absolute;
    right: -5px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    transform: rotate(45deg);
    opacity: 1;
}
.close2:hover {
    background: #fff;
    color: #afafaf !important;
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    text-decoration: none !important;
}
.btn-promo-modal {
    display: block;
    margin-top: 15px;
}
button.fakeImage {
    border: none;
    background-color: #fff;
    padding: 0px;
}
button.fakeImage:hover {
    cursor: pointer;
}
.header_modal_promo {
    /*position: fixed;*/
    width: 88%;
    max-width: 570px;
}
.header_modal_promo a.close {
    transform: rotate(45deg);
    color: orange;
}
.modalDialog button.fakeImage {
    background-color: orange;
    padding: 15px;
    margin: 30px auto;
    border-radius: 5px;
    font-size: 21px;
    color: #fff;
    font-weight: bold;
    transition: opacity 0.3s ease; /* Transición suave para la opacidad */
}
.modalDialog button.fakeImage:hover {
    opacity: 0.7;
}
button:focus {
    outline: none;
}
button:active {
    border-style: none;
}
img.img_prom_grande, img.img_prom_peque {
    width: 100% !important;
    margin: 30px auto 0px;
    border: none !important;
}
.modalDialog table {
    margin: 15px auto;
    border: 2px solid #eaeaea;
    overflow-y: scroll;
}
.modalDialog table tr {
    border-bottom: 1px solid #eaeaea;
}
.modalDialog table th {
    background-color: #f6f6f6;
    color: #000;
}
.modalDialog table th, .modalDialog table td {
    padding: 5px;
    line-height: 100%;
}

/***** MÓVIL **********************************************************/
@media only screen and (max-width: 575px) {
    /* .modalDialog button.fakeImage{white-space: break-spaces;} */
    a.btn-promo-modal {
        margin: 15px auto 30px;
    }
}
/***** TABLET **********************************************************/
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .promociones_salud > div > div {
        width: 48%;
    }
    a.btn-promo-modal {
        margin: 15px auto 30px;
    }
}
/***** LAPTOP **********************************************************/
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .promociones_salud > div > div {
        width: 32%;
    }
}
/***** ORDENADOR **********************************************************/
@media only screen and (min-width: 992px) {
    .promociones_salud > div {
        flex-wrap: nowrap;
        -ms-flex-wrap: wrap;
    }
    .promociones_salud > div > div {
        padding: 10px 0.6%;
    }
}