/* ==========================================================================
   ET Instrumente GmbH — 1:1 Stylesheet (Clean HTML5 / CSS3 Rebuild)
   Reference: Joomla theme1477 + Superfish + Camera Slideshow + CreativeForm 18
   ========================================================================== */

@font-face {
  font-family: "Raleway Regular";
  font-style: normal;
  font-weight: normal;
  src: url("../assets/fonts/Raleway-Regular.ttf") format("truetype");
  font-display: swap;
}

/* ======================= RESET & BASE ======================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: "Raleway Regular", "Raleway", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #666666;
  background-color: #ffffff;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

a {
  color: #008080;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #000000;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid #008080;
  outline-offset: 2px;
}

p {
  margin: 0;
  padding-bottom: 21px;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-weight: normal;
}

h3,
legend {
  color: #333333;
  font-weight: normal;
  font-size: 27px;
  line-height: 32px;
  margin: 0 0 25px;
  text-shadow: 0 1px rgba(0, 0, 0, 0.1);
}

h4 {
  font-size: 18px;
  line-height: 22px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 16px;
}

h4 a {
  color: inherit;
}

h5 {
  font-weight: normal;
  font-size: 17px;
  line-height: 16px;
  margin: 0 0 18px;
}

h5 a {
  color: inherit;
}

h6 {
  text-transform: uppercase;
  color: #ffffff;
  font: inherit;
  border-bottom: 1px dashed #898989;
  font-size: 14px;
  padding: 0 0 7px;
  margin-bottom: 16px;
}

h6 a {
  color: inherit;
}

/* Buttons (theme1477 template.css) */
.btn {
  display: inline-block;
  padding: 4px 14px;
  font-size: 14px;
  line-height: 21px;
  background: #ffffff;
  color: #666666;
  text-shadow: none;
  border: 1px solid #e6e6e6;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.btn:hover {
  text-decoration: none;
  background: #e6e6e6;
  color: #000000;
  transition: all 0.1s linear;
}

.btn-primary {
  background: url("../assets/images/ui/button_marker.png") 100% 9px no-repeat #2F5C50 !important;
  border: none;
  line-height: 25px;
  height: 25px;
  padding: 0 26px 0 9px;
  color: #ffffff;
  font-size: 10px !important;
  text-transform: uppercase;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  outline: none;
  box-shadow: none;
  background: url("../assets/images/ui/button_marker.png") 100% 9px no-repeat #00b4da !important;
  color: #ffffff;
}

.btn-info {
  background: url("../assets/images/ui/button_marker.png") 100% 9px no-repeat #2F5C50;
  border: none;
  line-height: 25px;
  padding: 0 26px 0 9px;
  color: #ffffff;
  font-size: 10px;
  text-transform: uppercase;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  outline: none;
  box-shadow: none;
  background: url("../assets/images/ui/button_marker.png") 100% 9px no-repeat #00b4da;
  color: #ffffff;
}

.item_img,
.category_img {
  margin-bottom: 21px;
}

.img-intro__left,
.img-full__left {
  float: left;
  margin: 0 18px 10px 0;
}

.img-intro__right,
.img-full__right {
  float: right;
  margin: 0 18px 9px 0;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.clearfix::before,
.clearfix::after,
.container::before,
.container::after,
.container-fluid::before,
.container-fluid::after,
.row::before,
.row::after,
.row-fluid::before,
.row-fluid::after,
.row-container::before,
.row-container::after {
  display: table;
  content: "";
  line-height: 0;
}

.clearfix::after,
.container::after,
.container-fluid::after,
.row::after,
.row-fluid::after,
.row-container::after {
  clear: both;
}

/* ======================= BOOTSTRAP-2 EXACT GRID ======================= */
.container {
  width: 940px;
  margin-right: auto;
  margin-left: auto;
}

.container-fluid {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.row {
  margin-left: -20px;
}

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}

.span12 { width: 940px; }
.span11 { width: 860px; }
.span10 { width: 780px; }
.span9  { width: 700px; }
.span8  { width: 620px; }
.span7  { width: 540px; }
.span6  { width: 460px; }
.span5  { width: 380px; }
.span4  { width: 300px; }
.span3  { width: 220px; }
.span2  { width: 140px; }
.span1  { width: 60px; }

.offset12 { margin-left: 980px; }
.offset11 { margin-left: 900px; }
.offset10 { margin-left: 820px; }
.offset9  { margin-left: 740px; }
.offset8  { margin-left: 660px; }
.offset7  { margin-left: 580px; }
.offset6  { margin-left: 500px; }
.offset5  { margin-left: 420px; }
.offset4  { margin-left: 340px; }
.offset3  { margin-left: 260px; }
.offset2  { margin-left: 180px; }
.offset1  { margin-left: 100px; }

.row-fluid {
  width: 100%;
}

.row-fluid [class*="span"] {
  display: block;
  width: 100%;
  min-height: 30px;
  box-sizing: border-box;
  float: left;
  margin-left: 2.127659574468085%;
}

.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}

.row-fluid .span12 { width: 100%; }
.row-fluid .span11 { width: 91.48936170212765%; }
.row-fluid .span10 { width: 82.97872340425532%; }
.row-fluid .span9  { width: 74.46808510638297%; }
.row-fluid .span8  { width: 65.95744680851064%; }
.row-fluid .span7  { width: 57.44680851063829%; }
.row-fluid .span6  { width: 48.93617021276595%; }
.row-fluid .span5  { width: 40.42553191489362%; }
.row-fluid .span4  { width: 31.914893617021278%; }
.row-fluid .span3  { width: 23.404255319148934%; }
.row-fluid .span2  { width: 14.893617021276595%; }
.row-fluid .span1  { width: 6.382978723404255%; }

/* Module itemSpan widths (default.css) */
.row-fluid [class*="itemSpan"] {
  box-sizing: border-box;
  display: block;
  float: left;
  margin-left: 3.225806451612903%;
  min-height: 30px;
  width: 100%;
}

.row-fluid [class*="itemSpan"]:first-child {
  margin-left: 0;
}

.row-fluid .itemSpan1  { width: 100%; }
.row-fluid .itemSpan2  { width: 48.38709677419355%; }
.row-fluid .itemSpan3  { width: 31.182795698924732%; }
.row-fluid .itemSpan4  { width: 22.580645161290324%; }
.row-fluid .itemSpan5  { width: 17.419354838709676%; }
.row-fluid .itemSpan6  { width: 13.978494623655914%; }
.row-fluid .itemSpan7  { width: 11.520737327188941%; }
.row-fluid .itemSpan8  { width: 9.67741935483871%; }
.row-fluid .itemSpan9  { width: 8.243727598566307%; }
.row-fluid .itemSpan10 { width: 7.096774193548387%; }
.row-fluid .itemSpan11 { width: 6.158357771260998%; }
.row-fluid .itemSpan12 { width: 5.376344086021505%; }

[class*="span"].hide,
.row-fluid [class*="span"].hide {
  display: none;
}

[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}

@media (min-width: 1200px) {
  .container {
    width: 1116px;
  }
  .row {
    margin-left: -36px;
  }
  [class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 36px;
  }
  .span12 { width: 1116px; }
  .span11 { width: 1020px; }
  .span10 { width: 924px; }
  .span9  { width: 828px; }
  .span8  { width: 732px; }
  .span7  { width: 636px; }
  .span6  { width: 540px; }
  .span5  { width: 444px; }
  .span4  { width: 348px; }
  .span3  { width: 252px; }
  .span2  { width: 156px; }
  .span1  { width: 60px; }

  .offset12 { margin-left: 1188px; }
  .offset11 { margin-left: 1092px; }
  .offset10 { margin-left: 996px; }
  .offset9  { margin-left: 900px; }
  .offset8  { margin-left: 804px; }
  .offset7  { margin-left: 708px; }
  .offset6  { margin-left: 612px; }
  .offset5  { margin-left: 516px; }
  .offset4  { margin-left: 420px; }
  .offset3  { margin-left: 324px; }
  .offset2  { margin-left: 228px; }
  .offset1  { margin-left: 132px; }

  .row-fluid [class*="span"] {
    float: left;
    margin-left: 3.225806451612903%;
  }
  .row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }
  .row-fluid .span12 { width: 100%; }
  .row-fluid .span11 { width: 91.39784946236558%; }
  .row-fluid .span10 { width: 82.79569892473117%; }
  .row-fluid .span9  { width: 74.19354838709677%; }
  .row-fluid .span8  { width: 65.59139784946237%; }
  .row-fluid .span7  { width: 56.98924731182795%; }
  .row-fluid .span6  { width: 48.38709677419355%; }
  .row-fluid .span5  { width: 39.784946236559136%; }
  .row-fluid .span4  { width: 31.18279569892473%; }
  .row-fluid .span3  { width: 22.58064516129032%; }
  .row-fluid .span2  { width: 13.978494623655912%; }
  .row-fluid .span1  { width: 5.376344086021505%; }
}

@media (min-width: 768px) and (max-width: 979px) {
  .container {
    width: 756px;
  }
  .row {
    margin-left: -12px;
  }
  [class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 12px;
  }
  .span12 { width: 756px; }
  .span11 { width: 692px; }
  .span10 { width: 628px; }
  .span9  { width: 564px; }
  .span8  { width: 500px; }
  .span7  { width: 436px; }
  .span6  { width: 372px; }
  .span5  { width: 308px; }
  .span4  { width: 244px; }
  .span3  { width: 180px; }
  .span2  { width: 116px; }
  .span1  { width: 52px; }

  .offset12 { margin-left: 780px; }
  .offset11 { margin-left: 716px; }
  .offset10 { margin-left: 652px; }
  .offset9  { margin-left: 588px; }
  .offset8  { margin-left: 524px; }
  .offset7  { margin-left: 460px; }
  .offset6  { margin-left: 396px; }
  .offset5  { margin-left: 332px; }
  .offset4  { margin-left: 268px; }
  .offset3  { margin-left: 204px; }
  .offset2  { margin-left: 140px; }
  .offset1  { margin-left: 76px; }

  .row-fluid [class*="span"] {
    float: left;
    margin-left: 1.5873015873015872%;
  }
  .row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }
  .row-fluid .span12 { width: 100%; }
  .row-fluid .span11 { width: 91.53439153439153%; }
  .row-fluid .span10 { width: 83.06878306878306%; }
  .row-fluid .span9  { width: 74.60317460317461%; }
  .row-fluid .span8  { width: 66.13756613756614%; }
  .row-fluid .span7  { width: 57.67195767195767%; }
  .row-fluid .span6  { width: 49.2063492063492%; }
  .row-fluid .span5  { width: 40.74074074074074%; }
  .row-fluid .span4  { width: 32.27513227513227%; }
  .row-fluid .span3  { width: 23.809523809523806%; }
  .row-fluid .span2  { width: 15.343915343915343%; }
  .row-fluid .span1  { width: 6.878306878306878%; }
}

@media (max-width: 767px) {
  .container {
    width: auto;
    padding: 0 20px;
  }
  .row,
  .thumbnails {
    margin-left: 0;
  }
  [class*="span"],
  .uneditable-input[class*="span"],
  .row-fluid [class*="span"],
  .row-fluid [class*="itemSpan"] {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
  }
}

/* ======================= TOP OVERLAY CONTAINER ======================= */
.top_container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
}

/* Top Contact & Language Bar */
#top-row {
  background: rgba(0, 0, 0, 0.65);
  margin-bottom: 1px;
  line-height: 15px;
  position: relative;
  padding: 9px 0 5px;
}

#top-row::after {
  height: 1px;
  background: rgba(48, 48, 48, 0.65);
  width: 100%;
  position: absolute;
  bottom: -1px;
  left: 0;
  content: "";
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.contacts {
  color: #87989b;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
}

.contacts p {
  padding-bottom: 0;
  margin: 0;
}

.contacts a {
  color: inherit;
}

.contacts a:hover {
  color: #ffffff;
}

.contacts span.mail {
  margin-left: 3px;
  background: url("../assets/images/ui/mail.png") 0 50% no-repeat;
  padding: 0 20px 0 18px;
  display: inline-block;
}

.contacts span.phone {
  background: url("../assets/images/ui/phone.png") 0 50% no-repeat;
  padding: 0 0 0 14px;
  display: inline-block;
  color: #91a3a7;
  color: rgba(255, 255, 255, 0.48);
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.mod-languages ul.lang-inline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}

.mod-languages ul.lang-inline li {
  margin: 0 5px;
  display: inline-flex;
}

.mod-languages ul.lang-inline li a {
  display: inline-flex;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mod-languages ul.lang-inline li.lang-active a,
.mod-languages ul.lang-inline li a:hover {
  opacity: 1;
}

.user_menu ul {
  margin: 0 6px 0 0;
  padding: 0;
  list-style: none;
  line-height: 12px;
}

.user_menu ul li {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  line-height: inherit;
}

.user_menu ul li a {
  color: inherit;
  cursor: pointer;
}

.user_menu ul li a:hover {
  color: #ffffff;
}

/* Header & Navigation Row */
#header-row {
  background: rgba(0, 0, 0, 0.49);
  position: relative;
  margin-bottom: 4px;
  padding: 5px 0 7px;
}

#header-row::after {
  height: 4px;
  background: rgba(45, 45, 45, 0.49);
  width: 100%;
  position: absolute;
  bottom: -4px;
  left: 0;
  content: "";
}

#logo a {
  display: inline-block;
}

/* Superfish Desktop Menu */
.select-menu {
  display: none;
}

.navigation ul.sf-menu,
.navigation ul.sf-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigation ul.sf-menu {
  position: relative;
  padding: 22px 0 0;
  float: right;
  line-height: 1;
}

.navigation ul.sf-menu > li {
  float: left;
  position: relative;
  padding: 0;
  height: 26px;
}

.navigation ul.sf-menu > li + li {
  margin: 0 0 0 63px;
}

.navigation ul.sf-menu > li > a {
  font-size: 18px;
  line-height: 24px;
  font-family: "Raleway Regular", sans-serif;
  color: #ffffff;
  height: 24px;
  display: block;
  text-transform: uppercase;
  font-weight: normal;
  transition: color 0.35s ease;
}

.navigation ul.sf-menu > li > a:hover,
.navigation ul.sf-menu > li.sfHover > a,
.navigation ul.sf-menu > li.active > a {
  color: #000000;
}

/* Invisible hover bridge so moving mouse down into dropdown never loses hover */
.navigation ul.sf-menu > li.parent::after {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  top: 24px;
  height: 26px;
  display: none;
}

.navigation ul.sf-menu > li.parent:hover::after,
.navigation ul.sf-menu > li.parent.sfHover::after {
  display: block;
}

/* 1st Level Dropdown */
.navigation ul.sf-menu ul {
  position: absolute;
  top: 47px;
  left: 50%;
  margin-left: -87.5px;
  width: 225px;
  background: #ffffff;
  padding: 12px 0;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.31);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.navigation ul.sf-menu li:hover > ul,
.navigation ul.sf-menu li.sfHover > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.navigation ul.sf-menu ul li {
  width: 100%;
  position: relative;
  float: none;
}

.navigation ul.sf-menu ul li a {
  font-size: 14px;
  line-height: 35px;
  font-family: "Raleway Regular", sans-serif;
  color: #000000;
  display: block;
  text-align: left;
  padding: 0 16px 0 20px;
  text-decoration: none;
  transition: color 0.3s ease, background-color 0.2s ease;
}

.navigation ul.sf-menu ul li.parent > a::after {
  content: "›";
  float: right;
  font-size: 16px;
  opacity: 0.55;
}

.navigation ul.sf-menu ul li a:hover,
.navigation ul.sf-menu ul li.sfHover > a {
  color: #008080;
  background-color: #f8fafa;
}

/* 2nd Level Nested Flyout */
.navigation ul.sf-menu ul ul {
  top: -12px;
  left: 225px;
  margin-left: 2px;
  background: #ffffff;
}

/* Side-bridge for 2nd-level flyout */
.navigation ul.sf-menu ul li.parent::before {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  width: 8px;
  height: 100%;
}

/* ======================= HERO SLIDESHOW (#showcase-row) ======================= */
#showcase-row {
  position: relative;
  width: 100%;
  background: transparent;
}

body:has(.container-fluid) .main_img {
  max-width: 1116px;
  margin-left: auto;
  margin-right: auto;
}

#camera-slideshow {
  position: relative;
  width: 100%;
  /* Exact Camera height ratio from original site: 33.313289% (1663 x 554) */
  aspect-ratio: 1663 / 554;
  min-height: 120px;
  overflow: hidden;
  user-select: none;
}

#camera-slideshow::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  content: "";
  background: url("../assets/images/ui/slider_shadow.png") repeat-x center bottom;
  height: 16px;
  z-index: 10;
  pointer-events: none;
}

.camera-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.camera-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 800ms ease-out, visibility 800ms ease-out;
  z-index: 1;
}

.camera-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.camera-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.camera-slide img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: top center;
  display: block;
}

/* Original Camera Prev / Next Arrow Sprite Buttons */
.camera_prev,
.camera_next {
  cursor: pointer;
  height: 57px;
  width: 45px;
  position: absolute;
  bottom: 36%;
  left: 50%;
  z-index: 12;
  border: none;
  padding: 0;
  background-color: transparent;
  background-image: url("../assets/images/ui/slider_btns.png");
  background-repeat: no-repeat;
}

.camera_prev {
  margin-left: -638px;
  background-position: left top;
}

.camera_prev:hover {
  background-position: left bottom;
}

.camera_next {
  margin-left: 591px;
  background-position: right top;
}

.camera_next:hover {
  background-position: right bottom;
}

@media (max-width: 1320px) {
  .camera_prev {
    left: 18px;
    margin-left: 0;
    bottom: 28%;
  }
  .camera_next {
    left: auto;
    right: 18px;
    margin-left: 0;
    bottom: 28%;
  }
}

/* ======================= MAIN CONTENT (#content-row) ======================= */
#content-row {
  padding: 51px 0 0;
}

.page-item {
  padding-bottom: 50px;
}

.item_fulltext {
  color: #000000;
}

/* Welcome & Section Headings */
.welcome-heading {
  text-align: center;
  font-size: 24pt; /* 32px */
  line-height: 1.25;
  color: #008080;
  margin-bottom: 26px;
}

.body-copy {
  font-size: 15pt; /* 20px */
  line-height: 26pt; /* 34.67px */
  color: #000000;
  text-align: left;
  padding-bottom: 21px;
}

.section-heading-black {
  text-align: center;
  font-size: 24pt;
  line-height: 1.3;
  color: #000000;
  margin: 42px 0 34px;
}

.sub-heading-teal {
  color: #008080;
  display: inline-block;
}

/* 5 USPs / Customer Decision Badges */
.usp-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 42px;
}

.usp-grid img {
  flex: 1 1 0;
  max-width: 218px;
  height: auto;
}

/* 4 Product Selection Hover Tiles */
.product-tiles {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 18px;
  margin: 0 0 42px;
}

.product-tile {
  display: block;
  flex: 1 1 0;
  max-width: 260px;
  transition: transform 0.2s ease;
}

.product-tile img {
  width: 100%;
  height: auto;
  display: block;
}

/* Quality Seals Row */
.certs-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 8px 0 24px;
  flex-wrap: wrap;
}

.certs-row img.cert-iso {
  width: 200px;
  height: 149px;
  object-fit: contain;
}

.certs-row img.cert-madein {
  width: 200px;
  height: 131px;
  object-fit: contain;
}

/* Contact Intro Block ("Wir sind für Sie da:") */
.contact-intro-block {
  margin-top: 10px;
  margin-bottom: 28px;
}

.contact-person-img {
  float: right;
  width: 500px;
  max-width: 48%;
  height: auto;
  margin: 0 0 20px 28px;
}

.contact-sub-heading {
  font-size: 24pt;
  line-height: 1.3;
  color: #000000;
  padding-bottom: 18px;
}

.contact-hours {
  font-size: 15pt;
  line-height: 26pt;
  color: #008080;
  padding-bottom: 24px;
}

/* ======================= CREATIVE CONTACT FORM 18 ======================= */
.creativecontactform_wrapper.creative_form_18 {
  width: 100%;
  margin: 15px 0 20px;
  border: 1px solid #dedede;
  background: #ffffff;
  box-shadow: 1px 1px 1px 1px #d9d6d9;
  border-radius: 6px;
  color: #111111;
  transition: box-shadow 0.2s linear, border 0.2s linear;
  position: relative;
}

.creativecontactform_wrapper.creative_form_18:hover {
  box-shadow: 1px 1px 1px 1px #bababa;
}

.creative_form_18 .creativecontactform_header {
  padding: 10px 40px 22px 50px;
  border-bottom: 15px solid #ffffff;
  border-radius: 6px 6px 0 0;
  text-align: left;
}

.creative_form_18 .creativecontactform_title {
  color: #000000;
  font-size: 35px;
  line-height: 1.2;
  font-weight: normal;
  text-align: left;
  text-shadow: 2px 1px 2px #ffffff;
  margin: 0;
}

.creative_form_18 .creativecontactform_pre_text {
  margin-top: 6px;
  padding: 5px 0 0 0;
  width: 100%;
  font-size: 16px;
  line-height: 1.35;
  color: #000000;
  text-align: left;
  border-top: 1px ridge #a8a8a8;
}

.creative_form_18 .creativecontactform_body {
  padding: 0 50px 35px 50px;
  text-align: left;
}

.ccf-col-narrow {
  width: 45%;
}

.ccf-col-full {
  width: 100%;
  clear: both;
  margin-top: 6px;
}

.creativecontactform_field_box {
  margin: 0 0 10px 0;
}

.creativecontactform_field_name {
  display: block;
  color: #000000;
  font-size: 16px;
  line-height: 1.3;
  font-weight: normal;
  text-align: left;
  text-shadow: 2px 1px 1px #ffffff;
  margin: 10px 0 6px 1px;
}

.creativecontactform_field_required {
  color: #ff0000;
  font-size: 23px;
  font-weight: bold;
  vertical-align: middle;
  line-height: 1;
}

.creativecontactform_input_element {
  width: 100%;
  height: 29px;
  position: relative;
  display: block;
  background: linear-gradient(to bottom, #d1d1d1, #e6e6e6);
  box-shadow: 2px 1px 5px 0px #bdbdbd;
  border-radius: 4px;
  transition: background 0.2s linear, box-shadow 0.2s linear;
}

.creativecontactform_input_element:hover,
.creativecontactform_input_element:focus-within {
  background: linear-gradient(to bottom, #d9d6d9, #ebebeb);
  box-shadow: 1px 1px 3px 2px #d4d4d4;
}

.creativecontactform_input_element input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 16px;
  color: #000000;
  outline: none;
}

.creativecontactform_input_element.creative_textarea_wrapper {
  height: 161px;
}

.creativecontactform_input_element textarea {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  color: #000000;
  resize: none;
  outline: none;
}

/* Validation Error States & Forest-Green Tooltip */
.creativecontactform_field_box.creativecontactform_error .creativecontactform_field_name {
  color: #c70808;
}

.creativecontactform_field_box.creativecontactform_error .creativecontactform_input_element {
  background: #ffdbdd;
  box-shadow: inset 0 0 19px 0 #ebaaaa;
}

.ccf-tooltip {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  background: #2d6a3e;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.3;
  padding: 5px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 20;
  white-space: nowrap;
  pointer-events: none;
}

.ccf-tooltip::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 100%;
  border-width: 5px;
  border-style: solid;
  border-color: #2d6a3e transparent transparent transparent;
}

.creativecontactform_field_box.creativecontactform_error .ccf-tooltip {
  display: block;
}

@keyframes ccfShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-10px); }
  40%      { transform: translateX(10px); }
  60%      { transform: translateX(-8px); }
  80%      { transform: translateX(8px); }
}

.ccf-shake {
  animation: ccfShake 0.35s ease;
}

/* Custom Sprite Radio & Checkbox Controls (Exact TwoGlux 30x240 Sprites) */
.ccf-choice-row {
  display: flex;
  align-items: center;
  margin: 4px 0;
  cursor: pointer;
  user-select: none;
}

.ccf-choice-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.ccf-choice-sprite {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-block;
  background-repeat: no-repeat;
  margin-right: 6px;
}

.ccf-sprite-black     { background-image: url("../assets/images/ui/icons-black.png"); }
.ccf-sprite-blue      { background-image: url("../assets/images/ui/icons-blue.png"); }
.ccf-sprite-red       { background-image: url("../assets/images/ui/icons-red.png"); }
.ccf-sprite-litegreen { background-image: url("../assets/images/ui/icons-litegreen.png"); }

/* Checkbox frames: 0=unchecked, -30=hover, -60=checked, -90=checked+hover */
.ccf-choice-sprite.is-checkbox {
  background-position: 0 0;
}
.ccf-choice-row:hover .ccf-choice-sprite.is-checkbox {
  background-position: 0 -30px;
}
.ccf-choice-input:checked + .ccf-choice-sprite.is-checkbox {
  background-position: 0 -60px;
}
.ccf-choice-row:hover .ccf-choice-input:checked + .ccf-choice-sprite.is-checkbox {
  background-position: 0 -90px;
}

/* Radio frames: -120=unchecked, -150=hover, -180=checked, -210=checked+hover */
.ccf-choice-sprite.is-radio {
  background-position: 0 -120px;
}
.ccf-choice-row:hover .ccf-choice-sprite.is-radio {
  background-position: 0 -150px;
}
.ccf-choice-input:checked + .ccf-choice-sprite.is-radio {
  background-position: 0 -180px;
}
.ccf-choice-row:hover .ccf-choice-input:checked + .ccf-choice-sprite.is-radio {
  background-position: 0 -210px;
}

.ccf-choice-input:focus-visible + .ccf-choice-sprite {
  outline: 2px solid #008080;
  outline-offset: 2px;
  border-radius: 4px;
}

.ccf-choice-label {
  color: #000000;
  font-size: 15px;
  line-height: 1.4;
  text-shadow: 2px 1px 1px #ffffff;
}

.ccf_popup_link {
  color: #008080;
  font-weight: bold;
  border-bottom: 1px dotted transparent;
  cursor: pointer;
  transition: color 0.2s linear, border-color 0.2s linear;
}

.ccf_popup_link:hover {
  color: #b00023;
  border-bottom: 1px dotted #b50000;
}

/* Form Submit Footer */
.creative_form_18 .creativecontactform_footer {
  padding: 0 15px 22px 15px;
  overflow: hidden;
}

.creative_form_18 .creativecontactform_submit_wrapper {
  width: 64%;
  overflow: hidden;
}

.creativecontactform_send,
.creativecontactform_send_new {
  background-color: #008080;
  background: linear-gradient(to bottom, #008080, #e0e0e0);
  padding: 23px 68px;
  border: none;
  border-radius: 4px;
  float: right;
  font-family: inherit;
  font-size: 32px;
  line-height: 17px;
  color: #666666;
  font-weight: bold;
  text-shadow: 0 0 3px #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.creativecontactform_send:hover,
.creativecontactform_send_new:hover {
  background: linear-gradient(to bottom, #32b5b5, #e0e0e0);
  color: #6b6b6b;
  box-shadow: 0 0 6px 0 #999999;
}

.ccf-thank-you-box {
  display: none;
  margin: 0 50px 28px;
  padding: 22px 26px;
  background: #f0f9f9;
  border: 1px solid #008080;
  border-radius: 6px;
  color: #005959;
  font-size: 20px;
  text-align: center;
}

.ccf-thank-you-box.is-visible {
  display: block;
}

/* ======================= FOOTER (#footer-wrapper) ======================= */
#footer-wrapper {
  position: relative;
}

#footer-row {
  color: #c3c3c3;
  background: url("../assets/images/ui/footer_texture.jpg") 50% 0 repeat;
  background-color: #5d5d5d;
  line-height: 18px;
  font-size: 12px;
  padding: 51px 0 0;
}

#footer-row .moduletable {
  margin-bottom: 48px;
}

.footer_text {
  font-size: 10px;
  line-height: 18px;
}

.footer_text .social-links {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer_text .social-links a {
  display: inline-block;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.footer_text .social-links a:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

.footer_list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer_list ul li {
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 2px;
}

.footer_list ul li a {
  color: #c3c3c3;
  transition: color 0.35s ease;
}

.footer_list ul li a:hover {
  color: #ffffff;
}

.footer_contacts .mod-custom {
  max-width: 165px;
}

.footer_contacts p {
  padding-bottom: 18px;
}

.footer_contacts a {
  color: inherit;
}

.footer_contacts a:hover {
  color: #ffffff;
}

/* Copyright Row */
#copyright-row {
  background: #333333;
  padding: 21px 0;
  min-height: 66px;
}

.mod-footer {
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
}

.mod-footer a {
  color: inherit;
  margin-left: 6px;
  transition: color 0.35s ease;
}

.mod-footer a:hover {
  color: #c3c3c3;
}

/* ======================= SCROLL TO TOP (#back-top) ======================= */
#back-top {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

#back-top.is-visible {
  opacity: 1;
  visibility: visible;
}

#back-top a {
  width: 51px;
  display: block;
  text-align: center;
  text-decoration: none;
}

#back-top span {
  width: 51px;
  height: 51px;
  display: block;
  background: url("../assets/images/ui/up-arrow.png") no-repeat center center;
  transition: opacity 0.2s ease;
}

#back-top a:hover span {
  opacity: 0.5;
}

/* ======================= MODAL POPUP (Impressum / Datenschutz / AGB & Suche) ======================= */
.ccf-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ccf-modal-backdrop.is-open {
  display: flex;
}

.ccf-modal-dialog {
  position: relative;
  width: 700px;
  max-width: 100%;
  height: 500px;
  max-height: 86vh;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 0 18px 0 #222222;
  color: #111111;
}

.ccf-modal-dialog.ccf-modal-small {
  width: 520px;
  height: auto;
  max-height: 80vh;
  padding: 24px 28px;
}

.ccf_close_popup {
  position: absolute;
  width: 32px;
  height: 32px;
  top: -16px;
  right: -16px;
  z-index: 10;
  cursor: pointer;
  border: none;
  padding: 0;
  background: transparent;
  transition: transform 0.2s ease-out;
}

.ccf_close_popup:hover {
  transform: scale(1.1);
}

.ccf_close_popup_bg {
  position: absolute;
  background-color: #767676;
  top: 8px;
  left: 9px;
  width: 16px;
  height: 16px;
  transition: background-color 0.2s ease-out;
}

.ccf_close_popup:hover .ccf_close_popup_bg {
  background-color: rgb(194, 0, 15);
}

.ccf_close_popup_icon {
  position: absolute;
  background: transparent url("../assets/images/ui/close_popup.png") 0 0 no-repeat;
  background-size: 100% 100%;
  width: 32px;
  height: 32px;
  top: 0;
  left: 0;
}

.ccf_popup_inner_wrapper {
  position: absolute;
  top: 18px;
  left: 24px;
  right: 24px;
  bottom: 20px;
  overflow-y: auto;
  padding-right: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: #222222;
}

.ccf_popup_inner_wrapper h3 {
  color: #008080;
  font-size: 24px;
  margin-bottom: 16px;
}

.ccf_popup_inner_wrapper ul {
  margin: 0 0 16px 20px;
  padding: 0;
}

.ccf_popup_inner_wrapper li {
  margin-bottom: 6px;
}

/* Search Modal Styles */
.search-modal-input-row {
  display: flex;
  gap: 10px;
  margin: 14px 0 16px;
}

.search-modal-input-row input {
  flex: 1;
  height: 38px;
  padding: 6px 12px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
}

.search-modal-input-row button {
  background: #008080;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.search-results-list li {
  padding: 8px 0;
  border-bottom: 1px dashed #e0e0e0;
}

.search-results-list li a {
  font-weight: bold;
  color: #008080;
  display: block;
}

.search-results-list li span {
  font-size: 12px;
  color: #666666;
}

/* ======================= SUBPAGE LAYOUT, PARALLAX, SIDEBAR, SEARCH & FLIPBOOK ======================= */
.main_img .mod-custom {
  height: 112px;
  background-position: 50% 0;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Aikon Parallax Sections (full-bleed 100vw matching forceFullWidth: 'true') */
.aikon-parallax-outer-container {
  float: none;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}

#showcase-row .aikon-parallax-outer-container {
  width: 100%;
  left: 0;
  right: 0;
  margin-left: 0;
  margin-right: 0;
}

.aikon_paralax {
  min-height: 600px;
  background-size: cover;
  position: relative;
  width: 100%;
  background-attachment: fixed;
  background-position: 0% 0%;
  background-repeat: no-repeat;
}

.aikon_paralax_content {
  position: relative;
  color: #181818;
  max-width: 1024px;
  width: 100%;
  margin: auto;
  float: none;
  z-index: 2;
}

#aikon_paralax_191,
#aikon_paralax_202,
#aikon_paralax_225 {
  background-image: url("../assets/images/slider/Slider-ESL-19Zoll-2018.jpg");
}

#aikon_paralax_196 {
  background-image: url("../assets/images/slider/EAQ-Slider-2018-300dpi-3000.jpg");
}

#aikon_paralax_198,
#aikon_paralax_204 {
  background-image: url("../assets/images/slider/Slider-ESL-Solar_1-2_19Zoll-2018.jpg");
}

#aikon_paralax_212 {
  background-image: url("../assets/images/slider/Slider-Parallax-HV500.jpg");
}

#aikon_paralax_213 {
  background-image: url("../assets/images/slider/Slider-Parallax-HV60DC.jpg");
}

#aikon_paralax_214 {
  background-image: url("../assets/images/slider/Slider-Parallax-EST-USB-Rueck.jpg");
}

#aikon_paralax_220 {
  background-image: url("../assets/images/slider/Slider-EE.jpg");
}

#aikon_paralax_221 {
  background-image: url("../assets/images/DBK-MontageundPruefzellen.png");
}

#aikon_paralax_222 {
  background-image: url("../assets/images/Funktionstestsystem-DBK.png");
}

#aikon_paralax_224 {
  background-image: url("../assets/images/HPH.jpg");
}

#aikon_paralax_237 {
  background-image: url("../assets/images/slider/Slider-ESL.jpg");
}

/* Content Rows & Right Sidebar (#aside-right) — Exact theme1477 template.css + layout.css */
#maintop-row,
#content-row,
#mainbottom-row,
#feature-row,
#bottom-row {
  width: 100%;
}

#maintop-row .container-fluid,
#content-row .container-fluid,
#mainbottom-row .container-fluid,
#feature-row .container-fluid,
#bottom-row .container-fluid {
  max-width: 1116px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#showcase-row .container-fluid {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#content-row {
  padding: 51px 0 0;
}

#content-row.ar #component {
  padding-right: 96px;
}

#content-row.ar .container {
  position: relative;
}

#content-row.ar .container::before {
  background: url("../assets/images/ui/border.gif") repeat-y;
  content: "";
  position: absolute;
  top: -4px;
  bottom: 53px;
  display: block;
  width: 1px;
}

.mb7ar5 .container::before {
  left: 606px;
}

.mb9ar3 .container::before {
  left: 798px;
}

.mb8ar4 .container::before {
  left: 702px;
}

#component {
  min-height: 0;
  box-sizing: border-box;
}

#component .item_introtext {
  overflow: hidden;
}

.item {
  margin-bottom: 55px;
}

.page-header {
  border: none;
  padding: 0;
  margin: 0;
}

#aside-right .moduletable {
  margin-bottom: 40px;
}

#aside-right .moduletable.no_margin {
  margin-bottom: 0;
}

.list1 ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list1 ul li {
  padding: 0 0 9px 17px;
  background: url("../assets/images/ui/list1_marker.png") 0 6px no-repeat;
  font-size: 12px;
  line-height: inherit;
  font-style: italic;
}

.list1 ul li a {
  display: inline;
}

.list1 ul li a:hover {
  background: none;
}

.list1 ul li img {
  max-width: 100%;
  height: auto;
}

/* Newsflash Sidebar Widget (.news) — Exact theme1477 template.css */
.news {
  box-sizing: border-box;
  padding-right: 96px;
  background: url("../assets/images/ui/border.gif") 798px 0 repeat-y;
}

#aside-right .news {
  width: 348px;
  padding-right: 0;
  background: none;
}

.news .item_published {
  float: left;
  background: #305C4B;
  width: 58px;
  text-align: center;
  border: 1px solid #dddddd;
  text-transform: uppercase;
  font-size: 10px;
  color: #ffffff;
  line-height: 22px;
  margin-right: 26px;
}

.news .item_published span {
  display: block;
  background: #ffffff;
  font-size: 27px;
  color: #333333;
  line-height: 36px;
}

.news .item_introtext {
  overflow: hidden;
}

.news .item {
  margin: 0;
}

.news .item + .item {
  margin: 28px 0 0;
}

#feature-row {
  background: #eeeeee;
  border-top: 1px solid #dddddd;
  padding: 56px 0;
}

#mainbottom-row {
  background: #f6f6f6;
  padding: 0;
}

#bottom-row {
  background: #ffffff;
  border-top: 1px solid #dddddd;
  padding: 51px 0 11px;
}

#bottom-row .moduletable {
  margin-bottom: 55px;
}

.insurance {
  box-sizing: border-box;
  padding-right: 96px;
  padding-top: 70px;
  text-align: center;
}

.page-item {
  padding-bottom: 50px;
}

.item_fulltext img,
.mod-custom img {
  max-width: 100%;
  height: auto;
}

/* Search Page (#searchForm) */
.page-search {
  padding: 20px 0 60px;
}

#searchForm .btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  align-items: center;
}

#searchForm #search-searchword {
  width: 320px;
  max-width: 100%;
  height: 38px;
  padding: 6px 12px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 15px;
}

#searchForm .btn-primary {
  background: #008080 !important;
  color: #ffffff !important;
  border: none;
  border-radius: 4px;
  height: 38px;
  padding: 0 22px;
  font-size: 14px !important;
  text-transform: uppercase;
  cursor: pointer;
}

#searchForm .btn-primary:hover {
  background: #006666 !important;
}

#searchForm fieldset {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

#searchForm legend {
  font-size: 18px;
  font-weight: bold;
  color: #008080;
  padding: 0 8px;
  margin-bottom: 8px;
  width: auto;
  border: none;
}

#searchForm label.radio,
#searchForm label.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 20px;
  cursor: pointer;
}

#searchForm select.inputbox {
  height: 34px;
  padding: 4px 10px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.page-search-results {
  margin-top: 24px;
  border-top: 2px solid #008080;
  padding-top: 20px;
}

.page-search-results h4 {
  color: #008080;
  margin-bottom: 14px;
}

/* Interactive HTML5 Flipbook / Catalog Viewer */
.html5flippingbook {
  margin: 10px auto 40px;
  max-width: 1060px;
  background: #f7f9f9;
  border: 1px solid #dce4e4;
  border-radius: 6px;
  padding: 20px 24px 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.html5flippingbook .fb_topBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 10px 16px;
  border-bottom: 1px solid #dce4e4;
  margin-bottom: 20px;
}

.html5flippingbook #fb_bookname {
  font-size: 24px;
  color: #008080;
  margin: 0;
  font-weight: bold;
}

.html5flippingbook .tb_social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fb-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #ffffff;
  border: 1px solid #008080;
  border-radius: 4px;
  color: #008080 !important;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.fb-action-btn:hover {
  background: #008080;
  color: #ffffff !important;
}

.fb-action-btn.fb-pdf-btn {
  background: #008080;
  color: #ffffff !important;
}

.fb-action-btn.fb-pdf-btn:hover {
  background: #005959;
}

.flipbook-viewport {
  opacity: 1 !important;
  position: relative;
}

.flipbook {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  background: #e6ecec;
  padding: 18px 46px;
  border-radius: 6px;
  min-height: 480px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
}

.flipbook .fb-page-slot {
  flex: 0 1 48%;
  max-width: 460px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  display: none;
  position: relative;
  overflow: hidden;
}

.flipbook .fb-page-slot.is-active {
  display: block;
}

.flipbook .fb-page-slot img {
  width: 100%;
  height: auto;
  display: block;
}

.flipbook .previous-button,
.flipbook .next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 72px;
  background-color: rgba(0, 128, 128, 0.85);
  background-image: url("../assets/images/ui/arrows.png");
  background-repeat: no-repeat;
  background-size: 200%;
  cursor: pointer;
  z-index: 10;
  border: none;
  transition: background-color 0.2s ease;
}

.flipbook .previous-button {
  left: 4px;
  border-radius: 6px 0 0 6px;
  background-position: 0% 50%;
}

.flipbook .next-button {
  right: 4px;
  border-radius: 0 6px 6px 0;
  background-position: 100% 50%;
}

.flipbook .previous-button:hover,
.flipbook .next-button:hover {
  background-color: #005959;
}

.fb-bottom-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  padding: 10px 12px 0;
}

.fb-page-counter {
  font-size: 15px;
  font-weight: bold;
  color: #333333;
}

.fb-slider-input {
  flex: 1;
  min-width: 180px;
  accent-color: #008080;
  cursor: pointer;
}

/* ======================= RESPONSIVE BREAKPOINTS ======================= */
@media (max-width: 1199px) {
  .navigation ul.sf-menu > li + li {
    margin-left: 38px;
  }
  #component .item_introtext {
    overflow: visible;
  }
  .mb7ar5 .container::before {
    left: 495px;
  }
  .mb9ar3 .container::before {
    left: 664px;
  }
  .mb8ar4 .container::before {
    left: 585px;
  }
  .usp-grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .product-tiles {
    flex-wrap: wrap;
    justify-content: center;
  }
  .product-tile {
    flex: 0 1 calc(50% - 14px);
    max-width: 260px;
  }
}

@media (max-width: 979px) {
  #back-top {
    display: none !important;
  }
  .navigation ul.sf-menu > li + li {
    margin-left: 24px;
  }
  .navigation ul.sf-menu > li > a {
    font-size: 15px;
  }
  .ccf-col-narrow {
    width: 65%;
  }
  .aikon_paralax {
    min-height: 360px;
    background-attachment: scroll;
    background-position: top center;
  }
  #content-row.ar #component {
    padding-right: 48px;
  }
  .mb7ar5 .container::before {
    left: 397px;
  }
  .mb9ar3 .container::before {
    left: 526px;
  }
  .mb8ar4 .container::before {
    left: 462px;
  }
  .insurance {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .top_container {
    position: relative;
    background: #222222;
  }
  #top-row {
    background: #1a1a1a;
  }
  #header-row {
    background: #2b2b2b;
    padding: 12px 0;
    margin-bottom: 0;
  }
  .main_img .mod-custom {
    height: 48px;
  }
  .aikon_paralax {
    min-height: 240px;
    background-attachment: scroll;
  }
  #content-row.ar #component {
    padding-right: 0;
  }
  #content-row.ar .container::before {
    display: none;
  }
  #aside-right .news {
    max-width: 100%;
  }
  .flipbook {
    flex-direction: column;
    padding: 14px 36px;
  }
  .flipbook .fb-page-slot {
    flex: 1 1 100%;
    max-width: 100%;
  }
  #logo {
    margin-bottom: 10px;
    text-align: center;
  }
  .navigation ul.sf-menu {
    display: none;
  }
  .select-menu {
    display: block;
    width: 100%;
    height: 36px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 15px;
    border-radius: 4px;
    border: 1px solid #555555;
    background: #ffffff;
    color: #222222;
  }
  .camera_prev,
  .camera_next {
    display: none;
  }
  .welcome-heading,
  .section-heading-black,
  .contact-sub-heading {
    font-size: 24px;
  }
  .body-copy,
  .contact-hours {
    font-size: 16px;
    line-height: 26px;
  }
  .contact-person-img {
    float: none;
    width: 100%;
    max-width: 420px;
    display: block;
    margin: 0 auto 20px;
  }
  .creative_form_18 .creativecontactform_header {
    padding: 16px 20px;
  }
  .creative_form_18 .creativecontactform_title {
    font-size: 26px;
  }
  .creative_form_18 .creativecontactform_body {
    padding: 0 20px 24px;
  }
  .ccf-col-narrow {
    width: 100%;
  }
  .creative_form_18 .creativecontactform_submit_wrapper {
    width: 100%;
  }
  .creativecontactform_send,
  .creativecontactform_send_new {
    width: 100%;
    padding: 18px 24px;
    font-size: 24px;
  }
  #footer-row .moduletable {
    margin-bottom: 28px;
  }
}