@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* variables */
:root {
  --brandcolor: #c8242b;
  --brandrgba: rgba(200, 36, 43, .78);
}

/* specifix */
body {font-family: 'Lato', sans-serif}

#nav-btn {margin-bottom: 5px}

#topnav li {margin: 1px}

#topnav li a {
color: #343434;
transition: 0.5s ease;
}

#topnav .now {background-color: rgba(200, 36, 43, .07)}

#topnav li a:hover {
  color: var(--brandcolor);
  background-color: rgba(200, 36, 43, .14);
}

#svg-icon {fill: var(--brandcolor)}

#svg-cells {fill: #555}

#svg-mcpl {fill: #888}

#hero-box {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: 112px;
  height: 60vh;
}

#hero-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#hero-overlay {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
}

#hero-items {
  font-size: 20px;
  color: #454545;
  width: 90vw;
}

#hero-items h2 {
  font-weight: 700;
  font-size: 36px;
  color: #343434;
}

#img-box {
  position: relative;
  height: 30vh;
  margin-top: 70px;
}

#img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

#long-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background: rgba(0,0,0,0.5);
  background: linear-gradient(180deg,rgba(0,0,0,.85)0%,rgba(0,0,0,0)100%);
}

#long-title h2 {
  margin-top: 10px;
  color: #fff;
  text-shadow: 1px 1px #111;
  font-weight: 700;
  border-left: 2px solid var(--brandcolor);
  padding-left: 7px;
  padding-bottom: 3px;
}

#head-line {
  margin-top: 68px;
  z-index: 1;
  font-family: 'Helvetica', sans-serif;
  /* border-bottom: 1px solid black; */
}

#cells {font-size: 28px}

#cells span {
  color: #454647;
  margin: 0;
  padding: 0;
  display: inline-block;
  animation: fadein 20s ease-out calc(var(--seq)*1.5s) both infinite;
}

@keyframes fadein {
  0% {opacity: 0}
  12% {opacity: 1}
  34% {opacity: 1}
  56% {opacity: 1}
  99% {opacity: 1}
  100% {opacity: 1}
}

#cells span::first-letter {
  font-weight: bold;
  color: var(--brandcolor);
}

#cells span:first-child {padding-right: 1px}
#cells span:nth-child(n+2) {padding: 1px}
#cells span:last-child {padding-right: 0}

#content {
  color: #343434;
  font-size: 20px;
}

#content p {
  text-align: justify;
  text-justify: inter-word;
}

#content h3 {
  color: #454545;
  font-weight: 700;
  text-align: left;
  font-size: larger;
}

#content [role="button"]:hover {
  color: var(--brandcolor);
}

#content p a {
  text-decoration: none;
  text-align: left;
  color: var(--brandcolor);
}

#content p a:hover {
  text-decoration: underline;
}

#menu-box {
  position: relative;
  height: 280px;
}

#menu-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

#menu-box a {
  position: relative;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, .23);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

#menu-box a:hover {
  background-color: var(--brandrgba);
}

#menu-box h3 {
  word-break: break-word;
  text-align: center;
  padding: 10px;
  text-shadow: 1px 1px 3px #000;
  color: #fff !important;
}

#contact-form {width: 320px}

#footer {color: #ddd}

#footer a {
  text-decoration: none;
  color: #ddd;
  transition: .3s ease;
}

#footer a:hover {
  text-decoration: none;
  color: var(--brandcolor);
}

#footer li a::before {
  font-family: 'boxicons' !important;
  content: "\e9b2";
  margin-left: -5px;
  margin-right: 5px;
  color: var(--brandcolor);
}

#footer-top {
  background-color: #232323;
  border-bottom: 1px solid #343434;
  font-size: 18px;
}

#footer-top h4 {font-weight: 700}

#footer-bottom {background-color: #121212}

.footer-links li {padding: 3px 0}

.unchevron {list-style: none !important;}

.unchevron li a::before {
  content: "" !important;
  margin: -18px !important;
}

#back2top {
  display: none;
  transition: display 0.5s ease-in-out;
  width: 40px;
  height: 40px;
  border-radius: 3px;
  right: 10px;
  bottom: 10px;
  color: #fff;
  background-color: #343434;
}

#back2top i {
  font-size: 24px;
  position: relative;
  top: 8px;
  left: 8px;
}

#back2top:hover {
  background-color: var(--brandcolor);
  transition: background-color 0.5s ease-in-out;
}

#map {
  padding: 0;
  margin-bottom: -6px;
}

#map iframe {
  width: 100%;
  height: 380px;
  border: none;
}

.err {
  color: var(--brandcolor);
  font-size: 16px;
}

.fl-bold span {display: inline-block}

.fl-bold span::first-letter {font-weight: bold}

#filters {
  list-style: none;
  text-align: center;
  font-size: 18px;
}

#filters li {
  display: inline-block;
  cursor: pointer;
  margin: 0 5px;
  padding: 0 5px;
  color: #444;
  transition: all 0.3s ease-in-out;
  border-bottom: 2px solid rgba(255,255,255,0);
}

#filters li:hover, #filters li.filter-active {
  border-bottom: 2px solid var(--brandcolor);
  color: var(--brandcolor);
}

#clients img {
  width: 150px;
  border: 1px dashed rgba(0,0,0,0.05);
  border-radius: 5px;
  padding: 10px;
}

#clients p {
  font-size: 16px;
}

.caret-right {
  list-style: none;
  padding-left: 20px;
  text-align: left;
}

.caret-right li::before {
  font-family: 'boxicons' !important;
  content: "\e992";
  margin: 0 5px 0 -25px;
}

.slant li strong {
  display: inline-block;
}

.slant li > strong::first-letter {
  font-style: italic;
  color: var(--brandcolor);
}

.boxes:nth-child(2) {
  background-color: #F5B7B1;
}

.boxes:nth-child(3) {
  background-color: #A9DFBF;
}

.boxes:nth-child(4) {
  background-color: #A9CCE3;
  border-radius: 0 0 0 4px;
}

.boxes:nth-child(5) {
  background-color: #D7BDE2;
  border-radius: 0 0 4px 0;
}

.fl li {
  display: inline-block;
  margin-left: -30px;
}

.fl li::first-letter {
  font-weight: bold;
  color: var(--brandcolor);
}

.g-recaptcha {
 transform: scale(1.05);
 transform-origin: 0px 0px 0px;
}

video {
  max-width: 100% !important;
  max-height: 100% !important;
}

.modal-backdrop {
  opacity:0.87 !important;
}