: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-bg: #fdfcfc;
--disabled: #5b5b5b;
}
.turquoise {
color: var(--turquoise);
}
.background {
color: var(--background);
}
:root {
--primary: "Nexa";
--secondary: "Georgia";
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Book.otf) format("opentype");
font-weight: 400;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Light.otf) format("opentype");
font-weight: 100;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Bold.otf) format("opentype");
font-weight: 700;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/NexaHeavy.otf) format("opentype");
font-weight: 800;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/NexaBlack.otf) format("opentype");
font-weight: 900;
}
h1 {
font-family: var(--primary);
font-size: 2rem;
font-weight: 800;
}
h2 {
font-family: var(--primary);
font-size: 1.5rem;
font-weight: 700;
}
h3 {
font-family: var(--primary);
font-size: 1.25rem;
font-weight: 700;
}
h4 {
font-size: 1.125rem;
font-family: var(--primary);
font-weight: 700;
padding-top: 0.5rem;
color: var(--grey);
}
.uppercase {
text-transform: uppercase;
} p,
input,
.list {
font-size: 1rem;
font-family: var(--secondary);
line-height: 150%;
color: var(--grey);
}
small {
font-size: 0.875;
font-family: var(--secondary);
line-height: 130%;
color: var(--grey);
}
.label {
font-size: 0.875rem;
font-family: var(--primary);
font-weight: 700;
text-transform: uppercase;
padding-top: 0.25rem;
}
.italic {
font-style: italic;
}
.default-unorder-list {
list-style-type: circle;
}
:root {
--s-breakpoint: 600px;
--m-breakpoint: 768px;
--l-breakpoint: 1024px;
--xl-breakpoint: 1440px;
}
: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-bg: #fdfcfc;
--disabled: #5b5b5b;
}
.turquoise {
color: var(--turquoise);
}
.background {
color: var(--background);
}
:root {
--primary: "Nexa";
--secondary: "Georgia";
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Book.otf) format("opentype");
font-weight: 400;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Light.otf) format("opentype");
font-weight: 100;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Bold.otf) format("opentype");
font-weight: 700;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/NexaHeavy.otf) format("opentype");
font-weight: 800;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/NexaBlack.otf) format("opentype");
font-weight: 900;
}
h1 {
font-family: var(--primary);
font-size: 2rem;
font-weight: 800;
}
h2 {
font-family: var(--primary);
font-size: 1.5rem;
font-weight: 700;
}
h3 {
font-family: var(--primary);
font-size: 1.25rem;
font-weight: 700;
}
h4 {
font-size: 1.125rem;
font-family: var(--primary);
font-weight: 700;
padding-top: 0.5rem;
color: var(--grey);
}
.uppercase {
text-transform: uppercase;
} p,
input,
.list {
font-size: 1rem;
font-family: var(--secondary);
line-height: 150%;
color: var(--grey);
}
small {
font-size: 0.875;
font-family: var(--secondary);
line-height: 130%;
color: var(--grey);
}
.label {
font-size: 0.875rem;
font-family: var(--primary);
font-weight: 700;
text-transform: uppercase;
padding-top: 0.25rem;
}
.italic {
font-style: italic;
}
.default-unorder-list {
list-style-type: circle;
}
.accordion-container {
display: flex;
flex-direction: column;
padding-top: 1.5rem;
padding: 5rem 0 0 0;
}
.accordion {
padding-top: 1.5rem;
}
.item {
float: left;
display: block;
width: 100%;
position: relative;
top: 0;
}
.collapse .labelItem:before {
content: "+";
}
.labelItem {
border-top: 1px solid #cccccc;
cursor: pointer;
color: var(--turquoise);
width: 100%;
padding: 1rem;
}
.labelItem h4 {
color: var(--turquoise);
}
.labelItem:before {
font-family: "Noto Sans TC", sans-serif;
color: var(--turquoise);
font-weight: lighter;
font-size: 24px;
float: right;
}
.open .labelItem:before {
content: "-";
font-family: "Noto Sans TC", sans-serif;
font-weight: lighter;
font-size: 24px;
float: right;
color: var(--turquoise);
}
.content {
padding: 1rem;
font-size: 1rem;
font-family: var(--secondary);
line-height: 150%;
color: var(--grey);
}
.collapseAccordion .itemContent {
height: 0px;
transition: height 1s;
transform: scaleY(0);
float: left;
display: block;
}
.open .itemContent {
display: block;
transition: 0.1s ease;
box-sizing: border-box;
color: #666666;
}
.open .labelItem {
margin: 0px;
color: #000;
}
: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-bg: #fdfcfc;
--disabled: #5b5b5b;
}
.turquoise {
color: var(--turquoise);
}
.background {
color: var(--background);
}
:root {
--primary: "Nexa";
--secondary: "Georgia";
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Book.otf) format("opentype");
font-weight: 400;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Light.otf) format("opentype");
font-weight: 100;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Bold.otf) format("opentype");
font-weight: 700;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/NexaHeavy.otf) format("opentype");
font-weight: 800;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/NexaBlack.otf) format("opentype");
font-weight: 900;
}
h1 {
font-family: var(--primary);
font-size: 2rem;
font-weight: 800;
}
h2 {
font-family: var(--primary);
font-size: 1.5rem;
font-weight: 700;
}
h3 {
font-family: var(--primary);
font-size: 1.25rem;
font-weight: 700;
}
h4 {
font-size: 1.125rem;
font-family: var(--primary);
font-weight: 700;
padding-top: 0.5rem;
color: var(--grey);
}
.uppercase {
text-transform: uppercase;
} p,
input,
.list {
font-size: 1rem;
font-family: var(--secondary);
line-height: 150%;
color: var(--grey);
}
small {
font-size: 0.875;
font-family: var(--secondary);
line-height: 130%;
color: var(--grey);
}
.label {
font-size: 0.875rem;
font-family: var(--primary);
font-weight: 700;
text-transform: uppercase;
padding-top: 0.25rem;
}
.italic {
font-style: italic;
}
.default-unorder-list {
list-style-type: circle;
}
.button_L {
text-align: center;
padding: 1.25rem;
font-weight: 700;
font-size: 1.2rem;
text-transform: uppercase;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--primary);
cursor: pointer;
}
.button_M {
text-align: center;
padding: 0 24px;
height: 40px;
font-weight: 700;
font-size: 0.8rem; text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--primary);
cursor: pointer;
}
.primary-button {
background-color: var(--turquoise);
color: white;
}
.secondary-button {
color: var(--turquoise);
border: solid 1px var(--turquoise);
}
.primary-button span {
margin: 0.25rem 0.5rem 0 0;
}
.primary-button:hover {
transition: 1s;
background-color: var(--turquoise-darken);
}
.secondary-button:hover {
transition: 1s;
color: var(--turquoise-darken);
border: solid 1px var(--turquoise-darken);
background-color: var(--turquoise-light);
}
: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-bg: #fdfcfc;
--disabled: #5b5b5b;
}
.turquoise {
color: var(--turquoise);
}
.background {
color: var(--background);
}
:root {
--primary: "Nexa";
--secondary: "Georgia";
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Book.otf) format("opentype");
font-weight: 400;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Light.otf) format("opentype");
font-weight: 100;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Bold.otf) format("opentype");
font-weight: 700;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/NexaHeavy.otf) format("opentype");
font-weight: 800;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/NexaBlack.otf) format("opentype");
font-weight: 900;
}
h1 {
font-family: var(--primary);
font-size: 2rem;
font-weight: 800;
}
h2 {
font-family: var(--primary);
font-size: 1.5rem;
font-weight: 700;
}
h3 {
font-family: var(--primary);
font-size: 1.25rem;
font-weight: 700;
}
h4 {
font-size: 1.125rem;
font-family: var(--primary);
font-weight: 700;
padding-top: 0.5rem;
color: var(--grey);
}
.uppercase {
text-transform: uppercase;
} p,
input,
.list {
font-size: 1rem;
font-family: var(--secondary);
line-height: 150%;
color: var(--grey);
}
small {
font-size: 0.875;
font-family: var(--secondary);
line-height: 130%;
color: var(--grey);
}
.label {
font-size: 0.875rem;
font-family: var(--primary);
font-weight: 700;
text-transform: uppercase;
padding-top: 0.25rem;
}
.italic {
font-style: italic;
}
.default-unorder-list {
list-style-type: circle;
}
.card {
width: 31%;
height: auto;
float: left;
border-radius: 4px;
border: 1px solid var(--soft-grey);
overflow: hidden;
position: relative;
top: 0;
transition: all 0.25s;
cursor: pointer;
background-color: white;
}
.card:hover {
top: -0.5rem;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
border: 1px solid white;
}
.card a {
text-decoration: none;
}
.card .card-header {
position: relative;
width: 100%;
height: 200px;
display: flex;
justify-content: start;
align-items: end;
}
.card .card-header .card-image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
left: 0;
}
.card .card-header .external-link {
position: absolute;
right: 1.5rem;
top: 1.5rem;
z-index: 1;
width: 2rem;
height: 2rem;
}
.card .title {
font-weight: 600;
position: relative;
padding: 1.5rem;
color: white;
text-decoration: none;
text-transform: uppercase;
}
.card p {
padding: 1.5rem;
font-size: 16px;
font-weight: 300;
}
@media (max-width: 1024px) {
.card {
width: 45%;
}
}
@media (max-width: 768px) {
.card {
width: 100%;
}
}
.element-list {
display: flex;
padding: 1rem;
align-items: center;
justify-content: space-between;
gap: 0.25rem;
}
.element-list-container .active {
transition: all 0.5s ease;
}
.element-list-container .delete {
display: none;
transition: all 0.5s ease;
}
.title--element-list-container {
display: flex;
gap: 0.5rem;
}
.element-list-container {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.element-list-container a {
top: 0;
text-decoration: none;
background: var(--white);
border-radius: 4px;
border: 1px solid var(--soft-grey);
}
.element-list-container a:hover {
top: -0.5rem;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
border: 1px solid white;
transition: all 0.25s;
}
.row-list-container {
display: flex;
padding: 0.5rem 1rem;
}
hr {
border-top: solid 1px var(--grey-medium);
opacity: 0.5;
padding: 0;
margin: 0;
}
.row-list-info {
display: flex;
padding: 0.5rem;
align-items: center;
gap: 0.5rem;
}
@media (max-width: 600px) {
.element-list,
.title--element-list-container,
.row-list-container {
flex-direction: column;
align-items: flex-start;
}
.row-list-info {
padding: 0.5rem 0;
}
}
: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-bg: #fdfcfc;
--disabled: #5b5b5b;
}
.turquoise {
color: var(--turquoise);
}
.background {
color: var(--background);
}
:root {
--primary: "Nexa";
--secondary: "Georgia";
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Book.otf) format("opentype");
font-weight: 400;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Light.otf) format("opentype");
font-weight: 100;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Bold.otf) format("opentype");
font-weight: 700;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/NexaHeavy.otf) format("opentype");
font-weight: 800;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/NexaBlack.otf) format("opentype");
font-weight: 900;
}
h1 {
font-family: var(--primary);
font-size: 2rem;
font-weight: 800;
}
h2 {
font-family: var(--primary);
font-size: 1.5rem;
font-weight: 700;
}
h3 {
font-family: var(--primary);
font-size: 1.25rem;
font-weight: 700;
}
h4 {
font-size: 1.125rem;
font-family: var(--primary);
font-weight: 700;
padding-top: 0.5rem;
color: var(--grey);
}
.uppercase {
text-transform: uppercase;
} p,
input,
.list {
font-size: 1rem;
font-family: var(--secondary);
line-height: 150%;
color: var(--grey);
}
small {
font-size: 0.875;
font-family: var(--secondary);
line-height: 130%;
color: var(--grey);
}
.label {
font-size: 0.875rem;
font-family: var(--primary);
font-weight: 700;
text-transform: uppercase;
padding-top: 0.25rem;
}
.italic {
font-style: italic;
}
.default-unorder-list {
list-style-type: circle;
}
.container-overlay {
display: none;
top: 0;
left: 0;
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.2);
z-index: 20;
}
.container-overlay .overlay {
display: flex;
background-color: white;
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: 50vw;
padding: 2rem;
flex-direction: column;
justify-content: space-between;
align-items: start;
box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.12);
}
.container-overlay .overlay .icon-close {
position: absolute;
top: 40px;
right: 40px;
}
.overlay .header-overlay {
display: flex;
align-items: flex-start;
flex-direction: column;
padding: 0 4rem 0 0;
}
.overlay .header-overlay .title {
padding-top: 0.5rem;
color: var(--grey);
font-weight: 800;
}
.overlay .background-overlay {
width: 50vw;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.overlay .icon-with-label {
display: flex;
align-items: start;
gap: 0.5rem;
}
.overlay .row-info {
display: flex;
justify-content: space-between;
}
.overlay .row-info:not(:last-child) {
border-bottom: solid 1px var(--soft-grey);
padding-bottom: 0.5rem;
}
.overlay .list-container {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem 0;
width: 100%;
}
.overlay .buttons-container {
width: 100%;
}
.overlay .buttons-container .button_L {
width: 100%;
}
.stop-scrolling {
height: 100%;
overflow: hidden;
}
: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-bg: #fdfcfc;
--disabled: #5b5b5b;
}
.turquoise {
color: var(--turquoise);
}
.background {
color: var(--background);
}
:root {
--primary: "Nexa";
--secondary: "Georgia";
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Book.otf) format("opentype");
font-weight: 400;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Light.otf) format("opentype");
font-weight: 100;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/Nexa-Bold.otf) format("opentype");
font-weight: 700;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/NexaHeavy.otf) format("opentype");
font-weight: 800;
}
@font-face {
font-family: "Nexa";
src: url(//ced.cat/wp-content/themes/ced2015/formacio-main/assets/fonts/NexaBlack.otf) format("opentype");
font-weight: 900;
}
h1 {
font-family: var(--primary);
font-size: 2rem;
font-weight: 800;
}
h2 {
font-family: var(--primary);
font-size: 1.5rem;
font-weight: 700;
}
h3 {
font-family: var(--primary);
font-size: 1.25rem;
font-weight: 700;
}
h4 {
font-size: 1.125rem;
font-family: var(--primary);
font-weight: 700;
padding-top: 0.5rem;
color: var(--grey);
}
.uppercase {
text-transform: uppercase;
} p,
input,
.list {
font-size: 1rem;
font-family: var(--secondary);
line-height: 150%;
color: var(--grey);
}
small {
font-size: 0.875;
font-family: var(--secondary);
line-height: 130%;
color: var(--grey);
}
.label {
font-size: 0.875rem;
font-family: var(--primary);
font-weight: 700;
text-transform: uppercase;
padding-top: 0.25rem;
}
.italic {
font-style: italic;
}
.default-unorder-list {
list-style-type: circle;
}
.tag-container {
display: flex;
gap: 0.5rem;
}
.tag {
text-decoration: none;
color: var(--grey);
font-family: var(--primary);
text-transform: uppercase;
padding: 6px 4px 2px 4px;
justify-content: center;
font-size: 0.875;
font-weight: 700;
border-radius: 4px;
}
.tag-filter {
text-decoration: none;
color: var(--grey);
font-family: var(--primary);
text-transform: uppercase;
padding: 10px 8px 6px 8px;
justify-content: center;
font-size: 0.875;
font-weight: 700;
border-radius: 4px;
}
.winter,
.hivern,
.invierno {
color: var(--turquoise-darken);
background: var(--aqua-light);
}
.autumn,
.tardo,
.otoño {
color: var(--orange-dark);
background: var(--orange);
}
.spring,
.primavera {
color: var(--pink-light);
background: var(--pink);
}
.summer,
.verano,
.estiu {
color: var(--yellow-dark);
background: var(--yellow);
}
.warning {
color: var(--warning);
border: 1px solid var(--warning);
}
.disabled {
color: var(--disabled);
border: 1px solid var(--disabled);
}
: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-bg: #fdfcfc;
--disabled: #5b5b5b;
}
.turquoise {
color: var(--turquoise);
}
.background {
color: var(--background);
}
.alert {
display: flex;
flex-direction: column;
padding: 2rem;
border-radius: 1rem;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.warning {
background-color: var(--warning-bg);
color: var(--warning);
}
.danger {
background-color: var(--danger-bg);
color: var(--danger);
}
.success {
background-color: var(--success-bg);
color: var(--success);
}
.info {
background-color: var(--info-bg);
color: var(--info);
}
.disabled {
background-color: var(--disabled-bg);
color: var(--disabled);
} 
.content-container .left-side_formacio .alert > p {
padding: 0;
}
.content-container .left-side_formacio .alert > h2 {
padding: 0;
}
.alert a {
color: #666666;
text-decoration: underline;
}
.alert a :hover {
color: black;
}
body .formation {
background: var(--white);
padding: 2rem 5rem;
margin: auto;
box-sizing: border-box;
}
.content-container {
display: flex; padding: 1.5rem 5rem 2rem 5rem;
}
.content-container .left-side_formacio {
width: 65%;
padding-right: 4rem;
}
.content-container .right-side_formacio #logo-with-triangle-data {
position: relative;
}
.content-container .left-side_formacio h1,
.formation h1 {
padding-bottom: 1.5rem;
}
.content-container .left-side_formacio h2,
.content-container .left-side_formacio p,
.content-container .left-side_formacio ul,
.content-container .left-side_formacio ol {
padding-bottom: 1.5rem;
}
.content-container .right-side_formacio {
width: 30%;
box-sizing: border-box;
z-index: 0;
}
.content-container #summary {
position: fixed;
right: 5rem; }
.content-container .right-side_formacio .rows-container {
border: solid 0.063rem var(--soft-grey);
}
.responsive,
.title-responsive {
display: none;
}
.rows-container .row-info {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 0.75rem 1rem;
background-color: var(--white);
}
.rows-container .row-info .text {
text-align: right;
}
.content-container
.right-side_formacio
.rows-container
.row-info:not(:last-child) {
border-bottom: solid 0.063rem var(--soft-grey);
}
.rows-container .row-info .icon {
width: 1.5rem;
height: 1.5rem;
}
.rows-container .row-info .icon-with-label {
display: flex;
align-items: center;
gap: 0.5rem;
}
.buttons-container {
position: relative;
gap: 1rem;
display: flex;
flex-direction: column;
}
#intro .right-side_formacio {
position: relative;
}
#intro .right-side_formacio a {
color: var(--turquoise);
}
#intro .right-side_formacio .triangle {
z-index: -1;
}
#intro .right-side_formacio .list-container {
position: absolute;
top: 2rem;
left: 2rem;
}
#logo-with-triangle-data .logoBcn4seasons {
padding: 0 1rem 3rem 1rem;
width: 18rem;
}
#logo-with-triangle-data #triangle-data {
position: absolute;
}
.list-container .icon-with-label-and-text {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding-bottom: 1.5rem;
}
#intro .right-side_formacio .list-container .icon-with-label-and-text .label {
padding-top: 0.25rem;
}
.button-container #cta-summary {
position: absolute;
width: 100%;
}
.content-container .left-side_formacio .users-list-container .user-container {
display: flex;
padding-bottom: 2rem;
}
.content-container
.left-side_formacio
.users-list-container
.user-container
.user {
filter: grayscale(1);
border-radius: 50%;
margin-right: 1rem;
width: 96px;
}
.content-container
.left-side_formacio
.users-list-container
.user-container
h4 {
padding-bottom: 0.5rem;
}
.content-container .left-side_formacio .users-list-container .user-container a {
padding: 8px 0;
color: var(--turquoise);
cursor: auto;
}
.content-container
.left-side_formacio
.users-list-container
.user-container
.icon {
fill: var(--turquoise);
transform: translateY(0.5rem);
padding-left: 0.5rem;
}
#elements-and-filter-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
#elements-and-filter-container .filters-container {
list-style: none;
display: flex;
gap: 0.5rem;
margin-inline-start: 0;
}
#elements-and-filter-container .filters-container .current {
border: 1px solid var(--turquoise);
border-radius: 8px;
color: var(--turquoise);
}
.grid {
padding: 3rem 0;
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 2rem;
box-sizing: border-box;
}
.formation .content-container .left-side_formacio .title-and-description p,
.formation .content-container .left-side_formacio .title-and-description div,
.formation .content-container .left-side_formacio .title-and-description li {
font-size: 1rem;
font-family: var(--secondary);
line-height: 150%;
color: var(--grey);
} @media (max-width: 1024px) {
body .formation {
padding: 1rem 2rem;
}
.content-container {
flex-direction: column-reverse;
}
#intro,
#elements-and-filter-container {
flex-direction: column;
}
.content-container .left-side_formacio,
.content-container .right-side_formacio {
width: 100%;
padding-right: 0;
}
.default {
display: none;
}
.content-container #summary {
position: relative;
width: 100%;
right: 0;
}
.content-container #summary .rows-container {
margin-bottom: 2rem;
}
.responsive {
display: block;
padding-bottom: 2rem;
width: 16rem;
}
.title-responsive {
display: block;
padding-bottom: 2rem;
}
.content-container #summary .responsive {
padding-bottom: 1.5rem;
}
#intro .right-side_formacio .list-container {
top: 4rem;
}
.content-container .right-side_formacio .buttons-container #cta-summary {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
}
#logo-with-triangle-data #triangle-data .triangle {
width: 240px;
}
#logo-with-triangle-data #triangle-data {
position: relative;
}
}
@media (max-width: 768px) {
.container-overlay .overlay {
width: 100vw;
overflow: hidden;
}
.container-overlay .overlay .header-overlay {
padding-right: 4rem;
}
}
@media (max-width: 600px) {
#elements-and-filter-container .filters-container {
flex-wrap: wrap;
}
}