body{
margin: 0px 2px;
padding: 0px;
font-family: MajritTx,serif;
}
/*IMG*/
/* .row1 div > div:hover {
transform: translateY(0%);
} */
.infoPerfil {
position: absolute;
z-index: 1;
padding: 0 0.938rem;
width: 90%;
}
/*grid*/
.caja{
height: 150px;
width: 150px;
background-color: gray;
position: relative;
overflow: hidden;
cursor: pointer;
border-radius: 100%;
}
/* .caja::after{
content: "";
position: absolute;
z-index: 1;
background: linear-gradient(360deg, rgb(0 0 0) 0%, rgba(0, 0, 0, 0) 70.8%);
mix-blend-mode: normal;
opacity: 0.75;
height: 100%;
width: 100%;
bottom: 0px;
text-decoration: none;
} */
.caja .infoCard{
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
z-index: 2;
opacity: 0;
}
.caja .infoCard h3, .caja .infoCard p {
font-family: MarcinAntB,sans-serif;
color: #fff;
}
.caja .infoCard h3 {
font-size: 0.875rem;
padding: 0 13px;
line-height: 18px;
margin: 0;
font-weight: 100;
margin-bottom: 7px;
text-shadow: 0px 1px 0px rgb(0, 0, 0);
}
.caja .infoCard p {
font-size: 0.8em;
padding: 0 13px;
margin: 0 0;
}
.caja .infoCard:hover {
position: absolute;
opacity: 1;
background: linear-gradient(360deg, rgb(0 0 0) 0%, rgb(0 0 0) 70.8%);
mix-blend-mode: normal;
height: 100%;
width: 100%;
}
.gridcontainer {
display: grid;
justify-items: center;
justify-content: center;
align-items: center;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 20px 20px;
grid-auto-flow: row;
grid-template-areas:
"item1 item2 item3 item4 item5 item6"
"item7 item8 item9 item10 item11 item12"
"item13 item14 item15 item16 item17 item18"
"item19 item20 item21 item22 item23 item24"
"item25 item26 item27 item28 item29 item30"
"item31 item32 item33 item34 item35 item36"
"item37 item38 item39 item40 item41 item42"
"item43 item44 item45 item46 item47 item48"
"item49 item50 item51 item52 item53 .";
}
.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }
.item5 { grid-area: item5; }
.item6 { grid-area: item6; }
.item7 { grid-area: item7; }
.item8 { grid-area: item8; }
.item9 { grid-area: item9; }
.item10 { grid-area: item10; }
.item11 { grid-area: item11; }
.item12 { grid-area: item12; }
.item13 { grid-area: item13; }
.item14 { grid-area: item14; }
.item15 { grid-area: item15; }
.item16 { grid-area: item16; }
.item17 { grid-area: item17; }
.item18 { grid-area: item18; }
.item19 { grid-area: item19; }
.item20 { grid-area: item20; }
.item21 { grid-area: item21; }
.item22 { grid-area: item22; }
.item23 { grid-area: item23; }
.item24 { grid-area: item24; }
.item25 { grid-area: item25; }
.item26 { grid-area: item26; }
.item27 { grid-area: item27; }
.item28 { grid-area: item28; }
.item29 { grid-area: item29; }
.item30 { grid-area: item30; }
.item31 { grid-area: item31; }
.item32 { grid-area: item32; }
.item33 { grid-area: item33; }
.item34 { grid-area: item34; }
.item35 { grid-area: item35; }
.item36 { grid-area: item36; }
.item37 { grid-area: item37; }
.item38 { grid-area: item38; }
.item39 { grid-area: item39; }
.item40 { grid-area: item40; }
.item41 { grid-area: item41; }
.item42 { grid-area: item42; }
.item43 { grid-area: item43; }
.item44 { grid-area: item44; }
.item45 { grid-area: item45; }
.item46 { grid-area: item46; }
.item47 { grid-area: item47; }
.item48 { grid-area: item48; }
.item49 { grid-area: item49; }
.item50 { grid-area: item50; }
.item51 { grid-area: item51; }
.item52 { grid-area: item52; }
.item53 { grid-area: item53; }
@media only screen and (max-width: 1200px) {
.caja {
height: 90px;
width: 90px;
background-color: #000;
position: relative;
overflow: hidden;
cursor: pointer;
border-radius: 100%;
}
}
@media only screen and (max-width: 768px) {
.gridcontainer {
gap: 7px;
}
.caja .infoCard h3, .caja .infoCard p{
display: none;
}
}
@media only screen and (max-width: 700px) {
.gridcontainer {
gap: 5px;
}
.caja {
height: 50px;
width: 50px;
}
}
.c_img{
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.img_1 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/1.jpg?=6);
}
.img_2 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/2.jpg?=6);
}
.img_3 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/3.jpg?=6);
}
.img_4 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/4.jpg?=6);
}
.img_5 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/5.jpg?=6);
}
.img_6 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/6.jpg?=6);
}
.img_7 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/7.jpg?=6);
}
.img_8 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/8.jpg?=6);
}
.img_9 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/9.jpg?=6);
}
.img_10 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/10.jpg?=6);
}
.img_11 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/11.jpg?=6);
}
.img_12 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/12.jpg?=6);
}
.img_13 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/13.jpg?=6);
}
.img_14 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/14.jpg?=6);
}
.img_15 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/15.jpg?=6);
}
.img_16 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/16.jpg?=6);
}
.img_17 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/17.jpg?=6);
}
.img_18 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/18.jpg?=6);
}
.img_19 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/19.jpg?=6);
}
.img_20 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/20.jpg?=6);
}
.img_21 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/21.jpg?=6);
}
.img_22 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/22.jpg?=6);
}
.img_23 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/23.jpg?=6);
}
.img_24 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/24.jpg?=6);
}
.img_25 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/25.jpg?=6);
}
.img_26 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/26.jpg?=6);
}
.img_27 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/27.jpg?=6);
}
.img_28 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/28.jpg?=6);
}
.img_29 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/29.jpg?=6);
}
.img_30 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/30.jpg?=6);
}
.img_31 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/31.jpg?=6);
}
.img_32 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/32.jpg?=6);
}
.img_33 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/33.jpg?=6);
}
.img_34 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/34.jpg?=6);
}
.img_35 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/35.jpg?=6);
}
.img_36 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/36.jpg?=6);
}
.img_37 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/37.jpg?=6);
}
.img_38 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/38.jpg?=6);
}
.img_39 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/39.jpg?=6);
}
.img_40 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/40.jpg?=6);
}
.img_41 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/41.jpg?=6);
}
.img_42 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/42.jpg?=6);
}
.img_43 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/43.jpg?=6);
}
.img_44 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/44.jpg?=6);
}
.img_45 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/45.jpg?=6);
}
.img_46 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/46.jpg?=6);
}
.img_47 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/47.jpg?=6);
}
.img_48 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/48.jpg?=6);
}
.img_49 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/49.jpg?=6);
}
.img_50 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/50.jpg?=6);
}
.img_51 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/51.jpg?=6);
}
.img_52 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/52.jpg?=6);
}
.img_53 {
background-image: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/53.jpg?=6);
}
/******Notas perfiles***********/
.cont_N {
height: 100%;
max-width: 1200px;
margin: 0px auto;
padding: 0px 30px;
}
.close{
background: url(https://elpais.com/estaticos/arc/2022/07/53-muertos-sanantonio/img/close.svg);
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
height: 60px;
width: 60px;
margin-bottom: 30px;
border: 0px;
cursor: pointer;
}
.avatar{
max-width: 250px;
min-height: 250px;
border-radius: 100%;
overflow: hidden;
}
.p_N {
display: flex;
flex-direction: row;
}
.i_P {
margin-left: 30px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
.i_P h2 {
font-size: 2.3em;
margin-bottom: 10px;
margin: 0px;
padding: 0px;
}
.i_P .datos {
font-size: 1.15em;
font-family: MarcinAntB,sans-serif;
margin: 0px;
padding: 0px;
margin-top: 7px;
line-height: 33px;
}
.cont_N p {
font-size: 1.575rem;
line-height: 2.6rem;
}
/*****Modal********/
.modal {
visibility: hidden;
opacity: 0;
transition: all 0.35s ease-in;
}
.modal.is-visible {
visibility: visible;
opacity: 1;
background-color: #ffffff;
}
.modal {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: all 0.35s ease-in;
}
.modal-dialog {
position: relative;
overflow: auto;
overflow-y: auto;
cursor: default;
}
.modal-header {
display: flex;
justify-content: flex-end;
}
@media only screen and (max-width: 900px) {
.avatar {
max-width: 120px;
min-height: 120px;
}
.cont_N p {
font-size: 1rem;
line-height: 1.6rem;
}
.i_P h2 {
font-size: 1.9em;
margin: 0px;
padding: 0px;
margin-bottom: 1px!important;
}
.close {
background-size: 31px;
margin-bottom: 0px;
}
.cont_N {
padding: 0px 10px;
}
}
@media only screen and (max-width: 767px) {
.p_N {
display: flex;
flex-direction: column;
}
.i_P {
margin-left: 0px;
}
.i_P h2 {
font-size: 1.5em;
}
.i_P .datos {
font-size: 1em;
}
.avatar {
max-width: 90px;
min-height: 90px;
margin: 0px auto;
margin-bottom: 20px;
}
.cont_N {
padding: 0px;
}
.modal {
align-items: flex-start;
}
.close {
height: 30px;
width: 30px;
}
.modal-dialog{
position: relative;
overflow: auto;
cursor: default;
overflow-y: auto;
height: 95vh;
}
.caja::after{
display: none;
}
.caja .infoCard:hover{
display: none;
}
}