:root { --white: #ffffff;
--soft-grey: #bdbec0;
--grey-medium: #909090;
--grey: #666666;
--black: #000000;
--background: #f5f5f5; --turquoise: #20798b;
--turquoise-darken: #105a69;
--turquoise-light: #bcd7dc;
--orange: #e18353;
--orange-dark: #682503;
--purple: #625181;
--pink: #98356f;
--pink-light: #ff9db5;
--aqua: #7adcca;
--aqua-light: #91d9ca;
--yellow: #ffd55f;
--yellow-dark: #aa5a10; --warning-bg: #fff7da;
--warning: #aa8a33;
--danger-bg: #fadbdb;
--danger: #db1111;
--success-bg: #e1f5e4;
--success: #3f8048;
--info-bg: #eee5ff;
--info: #625181;
--disabled: #5b5b5b;
}
.purple {
color: var(--purple);
}
.background {
color: var(--background);
}
:root { --white: #ffffff;
--soft-grey: #bdbec0;
--grey-medium: #909090;
--grey: #666666;
--black: #000000;
--background: #f5f5f5; --turquoise: #20798b;
--turquoise-darken: #105a69;
--turquoise-light: #bcd7dc;
--orange: #e18353;
--orange-dark: #682503;
--purple: #625181;
--pink: #98356f;
--pink-light: #ff9db5;
--aqua: #7adcca;
--aqua-light: #91d9ca;
--yellow: #ffd55f;
--yellow-dark: #aa5a10; --warning-bg: #fff7da;
--warning: #aa8a33;
--danger-bg: #fadbdb;
--danger: #db1111;
--success-bg: #e1f5e4;
--success: #3f8048;
--info-bg: #eee5ff;
--info: #625181;
--disabled: #5b5b5b;
}
.purple {
color: var(--purple);
}
.background {
color: var(--background);
}
:root {
--primary: 'Nexa';
--secondary: 'Georgia';
}
@font-face {
font-family: 'Nexa';
src: url(//ced.cat/wp-content/themes/ced2015/carrera-professional/assets/fonts/Nexa-Heavy.otf) format('opentype');
font-weight: 800;
}
h1 {
font-family: var(--primary);
font-size: 40px;
font-weight: 800;
color: var(--purple);
}
h2 {
font-family: var(--primary);
font-size: 24px;
font-weight: 700;
color: var(--purple);
}
p {
font-size: 18px;
font-family: var(--secondary);
line-height: 150%;
color: var(--grey);
}
b {
font-weight: bold;
font-family: var(--primary);
color: var(--purple);
}
label {
color: var(--purple);
font-family: var(--primary);
font-weight: bold;
} .demography-day * {
margin: 0;
padding: 0;
box-sizing: border-box;
} body.demography-day-page {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--background);
} .demography-day-container {
padding: 80px;
display: flex;
width: 100%;
gap: 80px;
justify-items: flex-end;
align-items: flex-start;
} .image-text img {
width: 100%;
max-width: 250px;
height: auto;
display: none; } .demography-day-text {
display: flex;
flex-direction: column;
flex: 1;
gap: 24px;
padding: 16px;
} .demography-day-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
flex: 1;
min-width: 200px;
justify-items: center; } .demography-day-modal-details label {
font-weight: bold;
color: var(--purple);
} .demography-day-button {
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
overflow: hidden;
cursor: pointer;
transition: background 0.3s ease-in-out;
background-size: cover;
background-position: center;
background-color: #ddd; } .demography-day-button img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
} .demography-day-button:hover {
background-color: rgba(0, 0, 0, 0.2);
} .demography-day-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 100000;
padding: 56px 0;
} .demography-day-modal-content {
background: white;
padding: 64px;
border-radius: 10px;
display: flex;
align-items: flex-start;
position: relative;
z-index: 100001;  max-width: 900px;
} .demography-day-close-btn {
position: absolute;
top: 24px;
right: 24px;
font-size: 40px;
cursor: pointer;
background: none;
border: none;
} .demography-day-modal-left {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px;
}
.demography-day-modal-left img {
width: 200px;
height: 200px;
border-radius: 50%;
} .demography-day-modal-details {
overflow: scroll;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 24px;
height: 66vh;
} @media (max-width: 1024px) {
.demography-day-grid {
grid-template-columns: repeat(2, 1fr);
}
.demography-day-modal-content {
flex-direction: column;
align-items: center;
width: 90%;
}
} @media (max-width: 768px) {
h1 {
padding: 0 !important;
}
.demography-day-container {
padding: 40px;
gap: 0px;
justify-items: flex-end;
align-items: flex-start;
flex-direction: column;
}
.demography-day-text {
width: 100%;
}
demography-day-modal-content {
width: 100vw;
height: 100vh;
max-width: none;
max-height: none;
border-radius: 0;
padding: 10px;
}
demography-day-modal-left {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
demography-day-modal-left img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
demography-day-modal-details {
flex: 2;
overflow-y: auto;
max-height: 80vh; padding-right: 10px;
}
}
@media (max-width: 500px) {
.demography-day-grid {
grid-template-columns: repeat(2, 1fr);
}
.demography-day-button {
width: 120px;
height: 120px;
}
.demography-day-modal-content {
width: 100%;
}
demography-day-modal-content {
flex-direction: column;
overflow: auto;
}
demography-day-modal-left {
width: 100%;
justify-content: center;
}
demography-day-modal-details {
max-height: none;
padding-top: 24px;
}
}