@media all { /* graphic buttons */
  .er-content-container-grahpicbutton { align-items: center; }
  .er-content-graphicbutton { background-color: #ccc; text-align: center; position: relative; }
  .er-content-graphicbutton:hover .er-content-container-overlay-graphicbutton { background-color: rgba(10, 10, 10, 0.2); }
  .er-content-graphicbutton:hover .er-content-container-overlay-graphicbutton-light { background-color: rgba(250, 250, 250, 0.2); }
  .er-content-graphicbutton-linkcontainer { width: 100%; height: 100%; }
  .er-content-graphicbutton-1btnw2-1by1, .er-content-graphicbutton-1btnw2-4by3, .er-content-graphicbutton-1btnw2-16by9, .er-content-graphicbutton-1btnw3-1by1, .er-content-graphicbutton-1btnw3-4by3, .er-content-graphicbutton-1btnw3-16by9, .er-content-graphicbutton-1btnw4-1by1, .er-content-graphicbutton-1btnw4-4by3, .er-content-graphicbutton-1btnw4-16by9 { width: 100%; }
  .er-content-graphicbutton-2btn-1by1, .er-content-graphicbutton-2btn-4by3, .er-content-graphicbutton-2btn-16by9 { width: 50%; }
  .er-content-graphicbutton-3btn-1by1, .er-content-graphicbutton-3btn-4by3, .er-content-graphicbutton-3btn-16by9 { width: 33.33%; }
  .er-content-graphicbutton-4btn-1by1, .er-content-graphicbutton-4btn-4by3, .er-content-graphicbutton-4btn-16by9 { width: 25%; }
  .er-content-graphicbutton-2btn-1by1, .er-content-graphicbutton-1btnw2-1by1 { height: calc((100vw - 40px) / 2); }
  .er-content-graphicbutton-2btn-1by1:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw2-1by1:hover .er-content-container-overlay-graphicbutton { width: calc(((100vw - 40px) / 2) * 0.9); height: calc(((100vw - 40px) / 2) * 0.9); border-radius: calc((((100vw - 40px) / 2) * 0.9) /2); left: calc( 50% - ((100vw/2)*0.9)/2); top: calc( 50% - ((100vw/2)*0.9)/2); }
  .er-content-graphicbutton-2btn-4by3, .er-content-graphicbutton-1btnw2-4by3 { height: calc((100vw - 40px) / 12 *3); }
  .er-content-graphicbutton-2btn-4by3:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw2-4by3:hover .er-content-container-overlay-graphicbutton { width: calc((((100vw - 40px) / 12)*3) * 0.9); height: calc((((100vw - 40px) / 12)*3) * 0.9); border-radius: calc(((((100vw - 40px) / 12)*3) * 0.9) /2); left: calc( 50% - ((((100vw - 40px) / 12)*3) * 0.9)/2); top: calc( 50% - ((((100vw - 40px) / 12)*3) * 0.9)/2); }
  .er-content-graphicbutton-2btn-16by9, .er-content-graphicbutton-1btnw2-16by9 { height: calc((100vw - 40px) / 48 * 9); }
  .er-content-graphicbutton-2btn-16by9:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw2-16by9:hover .er-content-container-overlay-graphicbutton { width: calc((((100vw - 40px) / 48)*9) * 0.9); height: calc((((100vw - 40px) / 48)*9) * 0.9); border-radius: calc(((((100vw - 40px) / 48)*9) * 0.9) /2); left: calc( 50% - (((((100vw - 40px) / 48)*9) * 0.9)/2)); top: calc( 50% - (((((100vw - 40px) / 48)*9) * 0.9)/2)); }
  .er-content-graphicbutton-3btn-1by1, .er-content-graphicbutton-1btnw3-1by1 { height: calc((100vw - 60px) / 3); }
  .er-content-graphicbutton-3btn-1by1:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw3-1by1:hover .er-content-container-overlay-graphicbutton { width: calc(((100vw - 60px) / 3) * 0.9); height: calc(((100vw - 60px) / 3) * 0.9); border-radius: calc((((100vw - 60px) / 3) * 0.9) /2); left: calc( 50% - ((100vw/3)*0.9)/2); top: calc( 50% - ((100vw/3)*0.9)/2); }
  .er-content-graphicbutton-3btn-4by3, .er-content-graphicbutton-1btnw3-4by3 { height: calc((100vw - 60px) / 12 *3); }
  .er-content-graphicbutton-3btn-4by3:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw3-4by3:hover .er-content-container-overlay-graphicbutton { height: calc((100vw - 60px) / 12 *3); width: calc((100vw - 60px) / 12 *3); border-radius: calc((((100vw - 60px) / 12) * 3) /2); left: calc( 50% - (((100vw - 60px) / 12 *3)/2)); top: calc( 50% - (((100vw - 60px) / 12 *3)/2)); }
  .er-content-graphicbutton-3btn-16by9, .er-content-graphicbutton-1btnw3-16by9 { height: calc(((100vw - 60px) / 48) * 9); }
  .er-content-graphicbutton-3btn-16by9:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw3-16by9:hover .er-content-container-overlay-graphicbutton { height: calc(((100vw - 60px) / 48) * 9); width: calc(((100vw - 60px) / 48) * 9); border-radius: calc((((100vw - 60px) / 48) * 9) /2); left: calc( 50% - ((((100vw - 60px) / 48) * 9) /2)); top: calc( 50% - ((((100vw - 60px) / 48) * 9) /2)); }
  .er-content-graphicbutton-4btn-1by1, .er-content-graphicbutton-1btnw4-1by1 { height: calc((100vw - 80px) / 3); }
  .er-content-graphicbutton-4btn-4by3, .er-content-graphicbutton-1btnw4-4by3 { height: calc((100vw - 80px) / 12 *3); }
  .er-content-graphicbutton-4btn-16by9, .er-content-graphicbutton-1btnw4-16by9 { height: calc((100vw - 80px) / 48 * 9); }
  .er-content-container-overlay-graphicbutton { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 10, 10, 0.5); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
  .er-content-graphicbutton-text { position: absolute; top: 45%; left: 0; width: 100%; font-size: 2em; color: #fff; }
  .er-content-graphicbutton-text:hover { animation: scaleone 1s; animation-timing-function: ease-in-out; }
  .er-content-graphicbutton-text a { color: #fff; }
  .er-content-graphicbutton-text a:hover, .er-content-graphicbutton-text a:focus, .er-content-graphicbutton-text a:visited { color: #fff; text-decoration: none; border-bottom: none; background-color: transparent; }
  .er-content-graphicbutton-img { position: absolute; width: calc(100% - 20px); height: calc(100% - 20px); }
  /*-------------------- BUTTONS ---------------*/
  .er-button-wrapper { margin-bottom: 1em; }
  .er-button-wrapper.er-button-align-center { text-align: center; }
  .er-button-wrapper.er-button-align-right { text-align: right; }
  .er-button-wrapper a.er-button { padding: 0.9em 1em; display: inline-block; background-color: #d1d1d1; color: #000; transition: all 0.5s ease-in-out; }
  .er-button-wrapper a.er-button:hover, .er-button-wrapper a.er-button:focus { background-color: #949494; color: #000; }
  .er-button-wrapper a.er-button:after, .er-button-wrapper a.er-button:before { padding-left: 0; transition: all 400ms ease-in-out; }
  .er-button-wrapper a.er-button-shadow-dark { -webkit-box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.75); box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.75); }
  .er-button-wrapper a.er-button-rect-rounded { border-radius: 4px; }
  .er-button-wrapper a.er-button-med { padding-left: 1.9em; padding-right: 1.9em; }
  .er-button-wrapper a.er-button-lg { padding-left: 3.2em; padding-right: 3.2em; }
  .er-button-wrapper a.er-button-icon:after { content: '>'; padding-left: 0.4em; vertical-align: baseline; }
  .er-button-wrapper a.er-button-hover-icon:after { content: '>'; opacity: 0; margin-left: -0.8em; padding-left: 0.4em; vertical-align: baseline; }
  .er-button-wrapper a.er-button-hover-icon:hover:after { opacity: 1; margin-left: 0; }
  .er-button-wrapper a.er-button-custom-icon img { vertical-align: middle; margin-right: 0.4em; }
  /*-------------------- CARD ------------------*/
  .er-content-card { flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: stretch; }
  .er-card { flex-grow: 0; background-color: #cecece; padding: 10px 10px 80px 10px; width: 250px; margin: 5px; position: relative; }
  .er-card-image { width: 250px; margin: 0 auto; }
  .er-card-image img { width: 100%; height: auto; }
  .er-card-title { font-size: 1.5em; margin-top: 1em; }
  .er-card-text { font-size: 1em; margin-top: 1em; }
  .er-card-button { margin: 0 auto; text-align: center; position: absolute; width: calc(100% - 20px); bottom: 10px; }
  .er-card-button a { padding: 20px; background-color: #aa2727; color: #fff; display: inline-block; border-radius: 3px; }
  .er-card-button a:hover { transform: scale(1.3, 1.1); }
  /* Content - Staff Basic List */
  .er-staff-container { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; }
  .er-staff-container.er-staff-2-column .frame-type-yaml_staff { width: 40%; }
  .er-staff-container.er-staff-3-column .frame-type-yaml_staff { width: 30%; }
  .er-staff-container.er-staff-4-column .frame-type-yaml_staff { width: 20%; }
  .er-staff-container.er-staff-align-center .er-staff { text-align: center; }
  .er-staff-container.er-staff-align-center .er-staff .er-staff-image { text-align: center; }
  .er-staff-container.er-staff-align-center .er-staff .er-staff-social { text-align: center; }
  .er-staff-container.er-staff-align-center .er-staff h2 { text-align: center; }
  .er-staff-container.er-staff-align-center .er-staff p { text-align: center; }
  .er-staff-container .er-staff .er-staff-image { overflow: hidden; }
  .er-staff-container .er-staff h2 { font-size: 140%; }
  .er-staff-container .er-staff h3 { font-size: 110%; }
  .er-staff-container .er-staff-social { margin: 7px 0; }
  .er-staff-container .er-staff-social a.icon { color: #000; margin-right: 7px; }
  .er-staff-container .er-staff-social a.icon:hover { color: #cecece; background-color: transparent; }
  .er-staff-container .er-staff-social a.icon:last-child { margin-right: 0; }
  /* -------- Content Socials -------*/
  .er-content-socials { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .er-a-social-icon { font-size: 18px; color: #fff; padding: 3px 5px; border-radius: 4px; }
  /* Layout styles for flex and grid */
  .er-layout-flex { display: flex; gap: 10px; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; }
  .er-layout-col { flex-grow: 1; background-color: #eee; }
  .er-layout-2column .er-layout-col { flex: 1 0 0%; }
  .er-layout-3column .er-layout-col { flex: 1 0 0%; }
  .er-layout-4column .er-layout-col { flex: 1 0 0%; }
  /* These styles are for the TYPO3 Appearance tab in the CE Form TCEFORM */
  .frame-padding-lr-10 { padding-left: 10px; padding-right: 10px; }
  .frame-padding-lr-20 { padding-left: 20px; padding-right: 20px; }
  .frame-padding-lr-30 { padding-left: 30px; padding-right: 30px; }
  .frame-padding-lr-40 { padding-left: 40px; padding-right: 40px; }
  .frame-padding-lr-50 { padding-left: 50px; padding-right: 50px; } }

@media only screen and (min-device-width: 768px) and (max-device-width: 1000px) { .er-content-graphicbutton-1btnw2-1by1, .er-content-graphicbutton-1btnw2-4by3, .er-content-graphicbutton-1btnw2-16by9, .er-content-graphicbutton-1btnw3-1by1, .er-content-graphicbutton-1btnw3-4by3, .er-content-graphicbutton-1btnw3-16by9, .er-content-graphicbutton-1btnw4-1by1, .er-content-graphicbutton-1btnw4-4by3, .er-content-graphicbutton-1btnw4-16by9 { width: 100%; }
  .er-content-graphicbutton-1btnw2-1by1:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw2-4by3:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw2-16by9:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw3-1by1:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw3-4by3:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw3-16by9:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw4-1by1:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw4-4by3:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw4-16by9:hover .er-content-container-overlay-graphicbutton { width: calc(((100vw - 40px) / 2) * 0.9); height: calc(((100vw - 40px) / 2) * 0.9); border-radius: calc((((100vw - 40px) / 2) * 0.9) /2); left: calc( 50% - ((100vw/2)*0.9)/2); top: calc( 50% - ((100vw/2)*0.9)/2); }
  .er-content-graphicbutton-2btn-1by1, .er-content-graphicbutton-2btn-4by3, .er-content-graphicbutton-2btn-16by9 { width: 50%; }
  .er-content-graphicbutton-3btn-1by1, .er-content-graphicbutton-3btn-4by3, .er-content-graphicbutton-3btn-16by9 { width: 33.33%; }
  .er-content-graphicbutton-4btn-1by1, .er-content-graphicbutton-4btn-4by3, .er-content-graphicbutton-4btn-16by9 { width: 25%; }
  .er-content-graphicbutton-text { font-size: 1.5em; }
  .er-staff-container.er-staff-tab-1-column .frame-type-yaml_staff { width: 100%; }
  .er-staff-container.er-staff-tab-2-column .frame-type-yaml_staff { width: 40%; }
  .er-staff-container.er-staff-tab-3-column .frame-type-yaml_staff { width: 30%; }
  .er-staff-container.er-staff-tab-4-column .frame-type-yaml_staff { width: 20%; }
  /* Layout styles for flex and grid */
  .er-layout-flex { flex-wrap: wrap; align-items: flex-start; }
  .er-layout-tab-1column .er-layout-col { flex: 1 0 100%; }
  .er-layout-tab-2column .er-layout-col { flex: 1 0 49%; }
  .er-layout-tab-3column .er-layout-col { flex: 1 0 32%; }
  .er-layout-tab-4column .er-layout-col { flex: 1 0 25%; } }

@media screen and (min-device-width: 320px) and (max-device-width: 767px) { .er-content-container-grahpicbutton { flex-wrap: wrap; }
  .er-content-graphicbutton-1btnw2-1by1, .er-content-graphicbutton-1btnw2-4by3, .er-content-graphicbutton-1btnw2-16by9, .er-content-graphicbutton-1btnw3-1by1, .er-content-graphicbutton-1btnw3-4by3, .er-content-graphicbutton-1btnw3-16by9, .er-content-graphicbutton-1btnw4-1by1, .er-content-graphicbutton-1btnw4-4by3, .er-content-graphicbutton-1btnw4-16by9, .er-content-graphicbutton-2btn-1by1, .er-content-graphicbutton-2btn-4by3, .er-content-graphicbutton-2btn-16by9, .er-content-graphicbutton-3btn-1by1, .er-content-graphicbutton-3btn-4by3, .er-content-graphicbutton-3btn-16by9 { width: 100%; }
  .er-content-graphicbutton-1btnw2-1by1:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw2-4by3:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw2-16by9:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw3-1by1:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw3-4by3:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw3-16by9:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw4-1by1:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw4-4by3:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-1btnw4-16by9:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-2btn-1by1:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-2btn-4by3:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-2btn-16by9:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-3btn-1by1:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-3btn-4by3:hover .er-content-container-overlay-graphicbutton, .er-content-graphicbutton-3btn-16by9:hover .er-content-container-overlay-graphicbutton { width: calc(((100vw - 20px) / 2) * 1.2); height: calc(((100vw - 20px) / 2) * 1.2); border-radius: calc((((100vw - 20px) / 2) * 1.2) /2); left: calc( 50% - ((100vw/2)*1.2)/2); top: calc( 50% - ((100vw/2)*1.2)/2); }
  .er-content-graphicbutton-4btn-1by1, .er-content-graphicbutton-4btn-4by3, .er-content-graphicbutton-4btn-16by9 { width: 50%; }
  .er-content-graphicbutton-4btn-1by1 .er-content-graphicbutton-text, .er-content-graphicbutton-4btn-4by3 .er-content-graphicbutton-text, .er-content-graphicbutton-4btn-16by9 .er-content-graphicbutton-text { font-size: 1.5em; }
  .er-content-graphicbutton-2btn-1by1, .er-content-graphicbutton-1btnw2-1by1 { height: calc((100vw - 20px)); }
  .er-content-graphicbutton-2btn-4by3, .er-content-graphicbutton-1btnw2-4by3 { height: calc((100vw - 20px) / 4 *3); }
  .er-content-graphicbutton-2btn-16by9, .er-content-graphicbutton-1btnw2-16by9 { height: calc((100vw - 20px) / 16 * 9); }
  .er-content-graphicbutton-3btn-1by1, .er-content-graphicbutton-1btnw3-1by1 { height: calc((100vw - 20px)); }
  .er-content-graphicbutton-3btn-4by3, .er-content-graphicbutton-1btnw3-4by3 { height: calc((100vw - 20px) / 4 *3); }
  .er-content-graphicbutton-3btn-16by9, .er-content-graphicbutton-1btnw3-16by9 { height: calc((100vw - 20px) / 16 * 9); }
  .er-content-graphicbutton-4btn-1by1, .er-content-graphicbutton-1btnw4-1by1 { height: calc((100vw - 40px) / 2); }
  .er-content-graphicbutton-4btn-4by3, .er-content-graphicbutton-1btnw4-4by3 { height: calc((100vw - 40px) / 8 *3); }
  .er-content-graphicbutton-4btn-16by9, .er-content-graphicbutton-1btnw4-16by9 { height: calc((100vw - 80px) / 32 * 9); }
  .er-content-graphicbutton-text { font-size: 2em; }
  .er-staff-container.er-staff-ph-1-column .frame-type-yaml_staff { width: 100%; }
  .er-staff-container.er-staff-ph-2-column .frame-type-yaml_staff { width: 40%; }
  .er-staff-container.er-staff-ph-3-column .frame-type-yaml_staff { width: 30%; }
  .er-staff-container.er-staff-ph-4-column .frame-type-yaml_staff { width: 20%; }
  /* styles for the appearance tab in the TCEFORM */
  .frame-padding-lr-10, .frame-padding-lr-20, .frame-padding-lr-30, .frame-padding-lr-40, .frame-padding-lr-50 { padding-left: 10px; padding-right: 10px; }
  /* Layout styles for flex and grid */
  .er-layout-flex { flex-wrap: wrap; }
  .er-layout-ph-1column .er-layout-col { flex: 1 0 100%; }
  .er-layout-ph-2column .er-layout-col { flex: 1 0 48%; }
  .er-layout-ph-3column .er-layout-col { flex: 1 0 32%; }
  .er-layout-ph-4column .er-layout-col { flex: 1 0 25%; } }

@keyframes scaleone { 0% { translate: scale(1); }
  50% { translate: scale(1.5); }
  100% { translate: scale(1.2); } }