/*
Theme Name: TopMedia Salient Child
Template: salient
Version: 1.0.0

TopMedia Design-Adapter für Salient / WordPress
Quelle: alte skin.css der bestehenden Website, angepasst für ein Salient Child Theme.

Hinweis zu Fonts:
- Die alte Seite nutzt "Playfair Display" für Überschriften und "Source Sans Pro" für Fließtext.
- Font-Dateien dürfen nicht einfach aus der alten Seite übernommen werden, wenn die Lizenz/Quelle nicht geklärt ist.
- Empfohlen: Fonts lokal sauber im Child Theme ablegen oder über Salient/WordPress laden.
*/

/* =========================================================
   1. Design Tokens
   ========================================================= */

:root {
  --tm-red: #C90119;
  --tm-black: #000000;
  --tm-text: #353535;
  --tm-muted: #575757;
  --tm-light: #efefef;
  --tm-warm-gray: #A9A194;
  --tm-white: #ffffff;

  --tm-font-body: "Source Sans Pro", Arial, sans-serif;
  --tm-font-heading: "Playfair Display", Georgia, serif;

  --tm-container-wide: 1520px;
  --tm-transition-fast: 0.35s ease-out;
  --tm-transition: 0.45s ease-out;
}

/* =========================================================
   2. Globale Basis
   ========================================================= */

html,
body {
  min-height: 100%;
}

body {
  font-family: var(--tm-font-body);
  font-size: 20px;
  font-weight: 400;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
  text-rendering: optimizeLegibility;
  color: var(--tm-text);
  background: var(--tm-white);
}

body,
#ajax-content-wrap,
.container-wrap,
.material .container-wrap {
  background-color: var(--tm-white);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--tm-red) var(--tm-white);
}

*::-webkit-scrollbar {
  width: 15px;
}

*::-webkit-scrollbar-track {
  background: var(--tm-white);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--tm-red);
  border-radius: 0;
  border: none;
}

/* Alte Seite entfernte fast alle Outlines. Für Barrierefreiheit besser nur sauber stylen. */
:focus-visible {
  outline: 2px solid var(--tm-red) !important;
  outline-offset: 3px;
}

/* =========================================================
   3. Links
   ========================================================= */

a {
  color: var(--tm-black);
  text-decoration: underline;
  transition: color var(--tm-transition), background-color var(--tm-transition), border-color var(--tm-transition);
}

a:hover,
a:focus {
  color: var(--tm-red);
}

#ajax-content-wrap a:not(.nectar-button):not(.wp-block-button__link):hover {
  color: var(--tm-red);
}

/* =========================================================
   4. Typografie
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.row .col h1,
.row .col h2,
.row .col h3,
.row .col h4,
.row .col h5,
.row .col h6,
.nectar-split-heading,
.nectar-fancy-ul h1,
.nectar-fancy-ul h2,
.nectar-fancy-ul h3 {
  font-family: var(--tm-font-heading);
  color: var(--tm-red);
  font-weight: 600;
  line-height: 1.18;
}

h1,
.h1,
h2,
.h2,
.row .col h1,
.row .col h2 {
  font-weight: 800;
}

h3,
.h3,
h4,
.h4,
.row .col h3,
.row .col h4 {
  font-weight: 600;
}

h2,
.h2,
.row .col h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

h3,
.h3,
.row .col h3 {
  font-size: 1.875rem;
}

.tm-title-wrapper h2,
.title-wrapper h2 {
  font-size: 3.75rem;
  font-weight: 500;
  color: var(--tm-black);
}

.tm-title-wrapper h2 span,
.title-wrapper h2 span {
  background-color: var(--tm-red);
  color: var(--tm-white);
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

/* Salient Text-Spalten */
.wpb_text_column p:last-child,
.nectar-fancy-box p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   5. Layout-Hilfen / Sektionen
   ========================================================= */

.container.main-content,
body .container,
body[data-ext-responsive="true"] .container {
  max-width: var(--tm-container-wide);
}

.tm-wrapper,
.wrapper {
  padding: 150px 0;
}

.tm-wrapper-top,
.wrapper-top {
  padding-top: 150px;
}

.tm-wrapper-bottom,
.wrapper-btm {
  padding-bottom: 150px;
}

.tm-bg-primary,
.bg-primary {
  background-color: var(--tm-red) !important;
}

.tm-bg-secondary,
.bg-secondary {
  background-color: var(--tm-light) !important;
}

.tm-bg-dark,
.bg-dark {
  background-color: var(--tm-black) !important;
}

.tm-bg-light,
.bg-light {
  background-color: var(--tm-warm-gray) !important;
}

.tm-bg-dark,
.tm-bg-dark h1,
.tm-bg-dark h2,
.tm-bg-dark h3,
.tm-bg-dark h4,
.tm-bg-dark h5,
.tm-bg-dark h6,
.bg-dark,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6 {
  color: var(--tm-white);
}

/* =========================================================
   6. Salient Header / Navigation
   ========================================================= */

#header-outer {
  background-color: var(--tm-white) !important;
  border-bottom: 2px solid var(--tm-light);
  box-shadow: none !important;
  transition: background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

#header-outer.small-nav,
#header-outer.scrolled-down,
#header-outer[data-lhe="animated_underline"].small-nav {
  box-shadow: 0 22px 22px -18px rgba(0, 0, 0, 0.185) !important;
}

#header-outer #logo img,
#header-outer .logo-spacing img {
  max-height: 90px;
  width: auto;
  transition: max-height var(--tm-transition-fast);
}

#header-outer.small-nav #logo img,
#header-outer.scrolled-down #logo img {
  max-height: 58px;
}

#top nav > ul > li {
  margin-right: 2rem;
}

#top nav > ul > li:last-child {
  margin-right: 0;
}

#top nav > ul > li > a,
#header-outer #top .sf-menu > li > a,
#slide-out-widget-area .inner .off-canvas-menu-container li a {
  font-family: var(--tm-font-body);
  color: var(--tm-black) !important;
  font-weight: 400;
  text-decoration: none;
}

#top nav > ul > li > a:hover,
#top nav > ul > li > a:focus,
#top nav > ul > li.current-menu-item > a,
#top nav > ul > li.current_page_item > a,
#header-outer #top .sf-menu > li.current-menu-item > a,
#header-outer #top .sf-menu > li.current_page_item > a {
  color: var(--tm-red) !important;
}

#header-outer[data-lhe="animated_underline"] #top nav > ul > li > a:after,
#header-outer #top .sf-menu > li.current-menu-item > a:after,
#header-outer #top .sf-menu > li.current_page_item > a:after {
  border-color: var(--tm-red) !important;
  background-color: var(--tm-red) !important;
}

/* Dropdowns */
#header-outer .sf-menu li ul,
#header-outer nav > ul > .megamenu > .sub-menu {
  border: none !important;
  border-radius: 0 !important;
  background: var(--tm-white) !important;
  box-shadow: 3px 18px 25px -8px rgba(0, 0, 0, 0.37) !important;
}

#header-outer .sf-menu li ul li a,
#header-outer nav > ul > .megamenu > .sub-menu a {
  color: #333 !important;
  font-size: 1.125rem;
  line-height: 1.4;
  text-decoration: none;
}

#header-outer .sf-menu li ul li a:hover,
#header-outer .sf-menu li ul li a:focus,
#header-outer .sf-menu li ul li.current-menu-item > a {
  color: var(--tm-red) !important;
  background-color: var(--tm-light) !important;
}

/* Mobile Burger im alten TopMedia-Stil */
#header-outer .slide-out-widget-area-toggle a .lines-button:after,
#header-outer .slide-out-widget-area-toggle a .lines:before,
#header-outer .slide-out-widget-area-toggle a .lines:after,
#header-outer .slide-out-widget-area-toggle a .lines {
  background-color: var(--tm-warm-gray) !important;
}

#slide-out-widget-area a:hover,
#slide-out-widget-area a:focus {
  color: var(--tm-red) !important;
}

/* =========================================================
   7. Buttons / CTAs
   ========================================================= */

.btn,
.nectar-button,
body .nectar-button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"],
.tm-button {
  transition: color var(--tm-transition-fast), background-color var(--tm-transition-fast), border-color var(--tm-transition-fast), opacity var(--tm-transition-fast);
  font-weight: 500;
  padding: 0.5rem 2rem;
  text-decoration: none !important;
  text-transform: uppercase;
  border-radius: 0.25rem !important;
  box-shadow: none !important;
}

.btn-default,
.btn-primary,
.nectar-button,
body .nectar-button.regular-button,
body .nectar-button.large,
.wp-block-button__link,
input[type="submit"],
button[type="submit"],
.tm-button-primary {
  color: var(--tm-white) !important;
  border: 1px solid var(--tm-red) !important;
  background-color: var(--tm-red) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.nectar-button:hover,
body .nectar-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.tm-button-primary:hover,
.tm-button-primary:focus {
  background-color: var(--tm-black) !important;
  border-color: var(--tm-black) !important;
  color: var(--tm-white) !important;
}

.btn-link,
.tm-button-link {
  color: var(--tm-black);
  background: transparent;
  border: none;
}

.btn-link:hover,
.btn-link:focus,
.tm-button-link:hover,
.tm-button-link:focus {
  color: var(--tm-red);
}

.nectar-button.see-through,
.nectar-button.see-through-2,
.tm-button-outline {
  color: var(--tm-black) !important;
  background-color: transparent !important;
  border: 1px solid var(--tm-black) !important;
}

.nectar-button.see-through:hover,
.nectar-button.see-through-2:hover,
.tm-button-outline:hover {
  color: var(--tm-white) !important;
  background-color: var(--tm-red) !important;
  border-color: var(--tm-red) !important;
}

/* =========================================================
   8. Hero / Slider Ersatz für Salient
   ========================================================= */

.tm-hero,
.vc_row.tm-hero,
.full-width-section.tm-hero {
  min-height: calc(100vh - 188px);
  max-height: 800px;
  background-color: #cecece;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
}

.tm-hero-caption,
.tm-hero .wpb_text_column,
.tm-hero .nectar-split-heading {
  max-width: 35%;
  color: var(--tm-black);
  font-size: 1.25rem;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.75);
}

.tm-hero-caption h1,
.tm-hero-caption h2,
.tm-hero .wpb_text_column h1,
.tm-hero .wpb_text_column h2 {
  color: var(--tm-red);
  text-shadow: 1px 2px 3px var(--tm-white);
  font-size: 3.25rem;
  font-weight: 800 !important;
  hyphens: none;
  margin-bottom: 1.15rem;
  line-height: 1.4;
  display: inline-block;
}

.tm-hero-caption-right {
  margin-left: auto;
  text-align: right;
}

.tm-hero-caption-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* =========================================================
   9. Footer
   ========================================================= */

#footer-outer,
#footer-widgets,
#copyright {
  background-color: var(--tm-warm-gray) !important;
  color: #333;
  font-size: 1.25rem;
}

#footer-outer {
  border-top: 1px solid var(--tm-warm-gray);
}

#footer-outer h3,
#footer-outer .widget h4,
#footer-outer .widget h3 {
  display: none;
}

#footer-outer a,
#copyright a {
  color: #333;
  text-decoration: none;
}

#footer-outer a:hover,
#footer-outer a:focus,
#copyright a:hover,
#copyright a:focus {
  color: var(--tm-red);
}

#footer-outer .social a,
#footer-outer .nectar-social a {
  font-size: 50px;
}

#to-top,
.scroll-top-btn {
  bottom: 50px !important;
}

/* =========================================================
   10. Formulare / Contact Form 7 / WPForms / Salient Forms
   ========================================================= */

::-webkit-input-placeholder { color: rgba(35, 35, 35, 0.6) !important; }
:-moz-placeholder { color: rgba(35, 35, 35, 0.6) !important; }
::-moz-placeholder { color: rgba(35, 35, 35, 0.6) !important; }
:-ms-input-placeholder { color: rgba(35, 35, 35, 0.6) !important; }
input::placeholder,
textarea::placeholder { color: rgba(35, 35, 35, 0.6) !important; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="phone"],
input[type="number"],
input[type="password"],
input[type="url"],
select,
textarea,
textarea.form-control,
body .gform_wrapper input[type="text"],
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--tm-black) !important;
  background-color: transparent;
  color: var(--tm-black);
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: all 0.5s ease-in-out;
}

input[type="text"]:hover,
input[type="text"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="tel"]:hover,
input[type="tel"]:focus,
input[type="date"]:hover,
input[type="date"]:focus,
input[type="phone"]:hover,
input[type="phone"]:focus,
input[type="number"]:hover,
input[type="number"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="url"]:hover,
input[type="url"]:focus,
select:hover,
select:focus,
textarea:hover,
textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
  background-color: rgba(255, 255, 255, 0.8);
  border-color: var(--tm-red) !important;
  color: var(--tm-black);
  box-shadow: none !important;
}

label,
.gfield_label,
.wpforms-field-label {
  font-weight: bold;
  font-size: 1.125rem;
  margin-bottom: 0.65rem;
}

label.required:after,
.gfield_contains_required .gfield_label:after,
.wpforms-required-label {
  color: var(--tm-red);
}

.form-check-input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--tm-red);
  border-color: var(--tm-red);
}

/* =========================================================
   11. Akkordeons / Toggles
   ========================================================= */

.accordion .card-header,
.nectar-toggle .toggle-heading,
.toggle h3 a {
  background-color: transparent;
  border-bottom: none;
}

.accordion .card-header h4,
.nectar-toggle .toggle-heading h3,
.toggle h3 {
  font-size: 1.25rem;
  font-weight: bold;
  text-align: left;
  text-transform: none;
  margin: 0 !important;
}

.accordion .card-header .btn-link,
.nectar-toggle .toggle-heading a,
.toggle h3 a {
  color: var(--tm-black);
  font-size: 1.25rem;
  text-decoration: none;
}

.accordion .show .card-header .btn-link,
.accordion .card-header .btn-link:hover,
.accordion .card-header .btn-link:focus,
.nectar-toggle.open .toggle-heading a,
.nectar-toggle .toggle-heading a:hover,
.toggle.open h3 a,
.toggle h3 a:hover {
  color: var(--tm-red) !important;
}

.accordion > .card,
.nectar-toggle,
.toggle {
  background-color: transparent;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-color: #D3D3D3;
}

/* =========================================================
   12. Listen / Icons
   ========================================================= */

.custom-list ul,
.tm-check-list ul {
  padding-left: 0;
  margin: 0 0 1.5rem 1.55rem;
}

.custom-list li,
.tm-check-list li {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0.25rem;
}

.custom-list li:before,
.tm-check-list li:before {
  content: "✓";
  display: inline-block;
  margin-left: -1.5rem;
  width: 1.5rem;
  color: var(--tm-red);
  font-weight: 700;
}

.keyfacts h4,
.tm-keyfacts h4 {
  color: var(--tm-text);
}

.keyfacts i,
.tm-keyfacts i {
  color: var(--tm-red);
}

/* =========================================================
   13. Teaser / Jobangebote / Content-Blöcke
   ========================================================= */

.c-joboffers-intro div.position-relative,
.tm-image-headline-box {
  width: 100%;
  height: 480px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

.c-joboffers-intro h2.position-absolute,
.tm-image-headline-box h2 {
  font-size: 4rem;
  font-weight: 500;
  left: 40px;
  bottom: 40px;
  width: 550px;
  position: absolute;
}

.c-joboffers-intro h2.position-absolute span,
.c-joboffers-intro div.txt h3 span,
.tm-highlight-red {
  background-color: var(--tm-red);
  color: var(--tm-white);
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.c-joboffers-intro div.txt,
.tm-offset-text {
  padding-left: 40px;
}

.c-joboffers-intro div.txt h3,
.tm-offset-text h3 {
  font-size: 3.75rem;
  font-weight: 500;
  color: var(--tm-black);
}

#accordion-joboffers .card,
.tm-job-accordion .card {
  background-color: transparent;
}

#accordion-joboffers .border-top,
.tm-job-accordion .border-top {
  border-color: var(--tm-red) !important;
}

#accordion-joboffers button,
.tm-job-accordion button {
  box-shadow: none !important;
}

#accordion-joboffers button i,
.tm-job-accordion button i {
  font-size: 1.5rem;
  color: var(--tm-red);
}

#accordion-joboffers .card-header button span,
.tm-job-accordion .card-header button span {
  font-family: var(--tm-font-body) !important;
  font-size: 1.5rem !important;
  font-weight: 500;
  color: var(--tm-black) !important;
}

#accordion-joboffers .card-body,
.tm-job-accordion .card-body {
  padding-left: 3.5rem;
  width: 75%;
}

.c-initiative-application .border,
.tm-application-box {
  border-color: var(--tm-red) !important;
}

.c-initiative-application h4,
.tm-application-box h4 {
  font-size: 2rem;
  font-weight: 500;
  font-family: var(--tm-font-body);
}

.c-initiative-application .btn-default,
.tm-application-box .nectar-button {
  background-color: var(--tm-red) !important;
  border-color: var(--tm-white) !important;
  color: var(--tm-white) !important;
  display: block;
  width: 100%;
}

.c-initiative-application .btn-default:hover,
.c-initiative-application .btn-default:focus,
.tm-application-box .nectar-button:hover,
.tm-application-box .nectar-button:focus {
  color: var(--tm-red) !important;
  background-color: var(--tm-white) !important;
  border-color: var(--tm-red) !important;
}

/* =========================================================
   14. Video / Datenschutz-Overlay
   ========================================================= */

.gs-video-wrapper .fa-play-circle.position-absolute,
.tm-video-wrapper .play-icon {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.gs-video-wrapper .confirm-hover,
.tm-video-wrapper .confirm-hover {
  background-color: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
  left: 0;
  top: 100%;
  font-size: 0.8rem;
  transition: top 0.3s ease-in-out;
}

.gs-video-wrapper .confirm-hover p,
.tm-video-wrapper .confirm-hover p {
  font-size: 0.8rem !important;
  margin-bottom: 0;
}

.gs-video-wrapper .confirm-hover a,
.tm-video-wrapper .confirm-hover a {
  color: var(--tm-white) !important;
  text-decoration: underline;
}

.gs-video-wrapper .confirm-hover a:hover,
.gs-video-wrapper .confirm-hover .btn-link:hover,
.gs-video-wrapper .confirm-hover .btn-link:focus,
.tm-video-wrapper .confirm-hover a:hover {
  color: var(--tm-red) !important;
}

.gs-video-wrapper:hover .confirm-hover,
.tm-video-wrapper:hover .confirm-hover {
  top: 0;
}

.gs-video-wrapper span.font-weight-bold > span,
.tm-video-wrapper strong span {
  color: var(--tm-red);
}

.gs-video-wrapper .h4,
.tm-video-wrapper .h4 {
  font-size: 1.65rem;
}

/* =========================================================
   15. Maps / Datenschutz-Vorschau
   ========================================================= */

.simplemap,
.tm-simplemap {
  position: relative;
}

.simplemap iframe,
.tm-simplemap iframe {
  width: 100%;
}

.simplemap img.img-fluid,
.tm-simplemap img {
  filter: blur(4px);
  width: 100% !important;
}

#locationmap,
.tm-locationmap {
  overflow: hidden;
  height: 800px;
}

#locationmap .map-overlay,
#locationmap .google-map,
.tm-locationmap .map-overlay,
.tm-locationmap .google-map {
  width: 100%;
  height: 800px;
  top: 0;
}

#locationmap .map-preview-img,
.tm-locationmap .map-preview-img {
  left: 0;
  top: 0;
  width: 100%;
  height: 920px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover !important;
  filter: blur(7px);
}

#locationmap .map-preview-content,
.tm-locationmap .map-preview-content {
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
}

#locationmap h3,
.tm-locationmap h3 {
  font-family: var(--tm-font-body);
}

/* =========================================================
   16. Pagination / Archive
   ========================================================= */

.pagination,
.page-numbers {
  margin-bottom: 0;
}

.page-link,
.page-numbers {
  color: #262626;
  background-color: transparent !important;
  border-color: transparent !important;
  text-decoration: none;
}

.page-item.active .page-link,
.page-link:hover,
.page-link:focus,
.page-numbers.current,
.page-numbers:hover,
.page-numbers:focus {
  color: var(--tm-red);
}

.page-item.active {
  border-bottom: 2px solid var(--tm-red);
}

.page-link:focus {
  box-shadow: none;
}

/* =========================================================
   17. Responsive
   ========================================================= */

@media (min-width: 1380px) {
  .container,
  body .container {
    max-width: 1350px;
  }
}

@media (min-width: 1480px) {
  .container,
  body .container {
    max-width: 1450px;
  }
}

@media (min-width: 1580px) {
  .container,
  body .container {
    max-width: 1520px;
  }
}

@media (min-width: 1680px) {
  .container,
  body .container {
    max-width: 1620px;
  }
}

@media (max-width: 1380px) {
  .c-joboffers-intro div.position-relative,
  .tm-image-headline-box {
    height: 420px;
  }
}

@media (max-width: 1200px) {
  body {
    font-size: 1rem;
  }

  h2,
  .h2,
  .row .col h2 {
    font-size: 1.875rem;
  }

  h3,
  .h3,
  .row .col h3 {
    font-size: 1.4rem;
  }

  #top nav > ul > li {
    margin-right: 1.5rem;
  }

  .c-joboffers-intro div.position-relative,
  .tm-image-headline-box {
    height: 380px;
  }

  .c-joboffers-intro h2.position-absolute,
  .tm-image-headline-box h2 {
    font-size: 3rem;
  }

  .c-joboffers-intro div.txt h3,
  .tm-offset-text h3 {
    font-size: 2.75rem;
  }
}

@media (max-width: 999px) {
  #header-outer #logo img,
  #header-outer.small-nav #logo img,
  #header-outer.scrolled-down #logo img {
    max-height: 58px;
  }

  #header-outer.scrolled-down,
  #header-outer.small-nav {
    box-shadow: none !important;
  }

  .tm-hero,
  .vc_row.tm-hero,
  .full-width-section.tm-hero {
    min-height: 520px;
  }

  .tm-hero-caption,
  .tm-hero .wpb_text_column,
  .tm-hero .nectar-split-heading {
    max-width: 70%;
  }

  #footer-outer,
  #footer-widgets,
  #copyright {
    font-size: 1rem;
  }

  #accordion-joboffers .card-body,
  .tm-job-accordion .card-body {
    width: 100%;
    padding-left: 1rem;
  }

  .c-joboffers-intro div.position-relative,
  .tm-image-headline-box {
    height: 300px;
  }
}

@media (max-width: 768px) {
  h2,
  .h2,
  .row .col h2 {
    font-size: 1.75rem;
  }

  h3,
  .h3,
  .row .col h3 {
    font-size: 1.375rem;
  }

  .tm-wrapper,
  .wrapper {
    padding: 100px 0;
  }

  .tm-wrapper-top,
  .wrapper-top {
    padding-top: 100px;
  }

  .tm-wrapper-bottom,
  .wrapper-btm {
    padding-bottom: 100px;
  }

  .tm-title-wrapper h2,
  .title-wrapper h2 {
    font-size: 2.75rem;
  }

  .tm-hero-caption,
  .tm-hero .wpb_text_column,
  .tm-hero .nectar-split-heading {
    max-width: 86%;
  }

  .tm-hero-caption h1,
  .tm-hero-caption h2,
  .tm-hero .wpb_text_column h1,
  .tm-hero .wpb_text_column h2 {
    font-size: 2.5rem;
  }

  .c-joboffers-intro div.position-relative,
  .tm-image-headline-box {
    height: 220px;
  }

  .c-joboffers-intro h2.position-absolute,
  .tm-image-headline-box h2 {
    font-size: 2.5rem;
    width: calc(100% - 80px);
  }

  .c-joboffers-intro div.txt h3,
  .tm-offset-text h3 {
    font-size: 2rem;
  }

  .accordion .card-header button i {
    font-size: 2.5rem;
  }

  .accordion .card-header h4 {
    font-size: 1.15rem;
    font-weight: 500;
  }
}

@media (max-width: 575px) {
  h2,
  .h2,
  .row .col h2 {
    font-size: 1.625rem;
  }

  h3,
  .h3,
  .row .col h3 {
    font-size: 1.3rem;
  }

  .tm-wrapper,
  .wrapper {
    padding: 50px 0;
  }

  .tm-wrapper-top,
  .wrapper-top {
    padding-top: 50px;
  }

  .tm-wrapper-bottom,
  .wrapper-btm {
    padding-bottom: 50px;
  }

  .tm-title-wrapper h2,
  .title-wrapper h2 {
    font-size: 1.75rem;
  }

  .tm-hero,
  .vc_row.tm-hero,
  .full-width-section.tm-hero {
    min-height: 420px;
  }

  .tm-hero-caption,
  .tm-hero .wpb_text_column,
  .tm-hero .nectar-split-heading {
    max-width: 100%;
    font-size: 1rem;
  }

  .tm-hero-caption h1,
  .tm-hero-caption h2,
  .tm-hero .wpb_text_column h1,
  .tm-hero .wpb_text_column h2 {
    font-size: 2rem;
  }

  .accordion .card-header button i {
    font-size: 2rem;
  }

  .accordion .card-header h4 {
    font-size: 1rem;
    font-weight: 500;
  }
}

@media (max-width: 480px) {
  #header-outer #logo img,
  #header-outer.small-nav #logo img,
  #header-outer.scrolled-down #logo img {
    max-height: 44px;
  }

  .page-header h1 {
    font-size: 2rem;
  }

  .container.my-5 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .c-joboffers-intro div.position-relative,
  .tm-image-headline-box {
    height: 160px;
  }

  .c-joboffers-intro h2.position-absolute,
  .tm-image-headline-box h2 {
    font-size: 2rem;
  }

  #accordion-joboffers .card-header button span,
  .tm-job-accordion .card-header button span {
    font-size: 1.25rem !important;
  }
}

@media (max-width: 380px) {
  body {
    font-size: 0.9rem;
  }

  h2,
  .h2,
  .row .col h2 {
    font-size: 1.375rem;
  }

  h3,
  .h3,
  .row .col h3 {
    font-size: 1.2rem;
  }

  .c-joboffers-intro div.position-relative,
  .tm-image-headline-box {
    height: 120px;
  }

  .c-joboffers-intro h2.position-absolute,
  .tm-image-headline-box h2 {
    font-size: 1.5rem;
    left: 0.5rem;
    bottom: 1rem;
  }

  .c-joboffers-intro div.txt,
  .tm-offset-text {
    padding-left: 0.5rem;
  }

  .c-joboffers-intro div.txt h3,
  .tm-offset-text h3 {
    font-size: 1.5rem;
  }

  #accordion-joboffers .card-header button span,
  .tm-job-accordion .card-header button span {
    font-size: 1rem !important;
  }
}