:root {
  --black: #000;
  --darkgrey: #222;
  --grey: #333;
  --lightgrey: #d5d5d5;
  --main-color: #D52B1E;
  --main-font: D-DIN-PRO, sans-serif !important;
  --main-font-bold: D-DIN-PRO, sans-serif !important;
  --body-font: "Open Sans", sans-serif !important;
}

html {-webkit-scroll-behavior: smooth; scroll-behavior: smooth;}

@font-face {font-family: DIN; src: url(../fonts/DIN.ttf) format('truetype');}
@font-face {font-family: DIN Bold; src: url(../fonts/DIN-PRO-700-Bold.ttf) format('truetype');}
@font-face {font-family: DIN Normal; src: url(../fonts/DINMedium.ttf) format('truetype');}
.visible-xs {display: none;}

body {font-size: .95vw !important;}
.dlheader {
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.10);
  padding: .9em 4em;
  font-size: .95vw; line-height: 1.4;
}

.dlheader a {
  text-decoration: none;
  color: #000;
}
.dlheader a:hover {
  color: var(--main-color);
  text-decoration: none;
}

.dlheader_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--main-font-bold);
  text-transform: uppercase;
  font-size: 1.1em;
  width: 100%;
}

.dlheader_top_logo {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.dlheader_top_logo a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  align-items: center;
}

.dlheader_top_logo a img {
  width: 12em;
  aspect-ratio: 3/1;
}

.dlheader_top_brands {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dlheader_top_brands a {
  padding: 1em 1.5em;
  display: flex;
  align-items: center;
  height: 4em;
}

.dlheader_top_brands a img {
  height: 4em;
}

.dlheader_top_contact {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.dlheader_top_contact a {
  display: flex;
  align-items: center;
  padding: 1em;
  box-shadow: 0 0 .3em #00000029;
  border-radius: .2em;
  margin-left: .8em;
  font-size: 1em;
}

.dlheader_top_contact a i {
  font-size: 1.2em;
  margin-right: -.2em;
}

/* Modals */
.modal {font-family: var(--body-font);}
.modal-header {padding: 1em 2em !important; background-color: var(--main-color); color: #fff; flex-direction: row-reverse;}
.modal-header .modal-title {font-size: 1.3em; text-transform: uppercase; font-weight: bold;}
.modal .close {font-size: 2em; color: #fff; opacity: 1; background-color: var(--main-color);}
.modal-dialog {margin: 5em auto; width: 60% !important; max-width: unset !important;}
.modal-content {border: none; border-radius: 0; box-shadow: none;}
.modal-body, .modal.deposit-info .modal-content {padding: 1em 2em; overflow: hidden;}
.modal-footer {padding: 1em;}
.modal-footer .btn {background-color: #000; color: #fff; border: none; font-family: var(--main-font-bold); font-size: 1em; padding: .5em 1em; border-radius: 0;}
.modal-footer .btn:hover, .modal-footer .btn:focus {background-color: var(--main-color);}

/* Hours Modal */
#HoursModal .modal-dialog .modal-content .modal-body {padding: 0;}
#HoursModal .modal-dialog .modal-content .modal-body .inner {display: flex;}
#HoursModal .modal-dialog .modal-content .modal-body .inner .bg-container {width: 50%;}
#HoursModal .modal-dialog .modal-content .modal-body .inner .bg-container img {width: 100%;}
#HoursModal .modal-dialog .modal-content .modal-body .inner .content {width: 50%; display: flex; flex-direction: column; justify-content: space-between;}
#HoursModal .modal-dialog .modal-content .modal-body .inner .content .title h4 {margin: 0; padding: .6em 1em; text-align: center; background-color: var(--main-color); color: #fff;}
#HoursModal .modal-dialog .modal-content .modal-body .inner .content .hours-list {color: #000; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; width: 100%; margin: auto; padding: 0 2em;}
#HoursModal .modal-dialog .modal-content .modal-body .inner .content .hours-list li {font-size: 1em; display: flex; justify-content: space-between; border-bottom: .01em solid #d5d5d5; padding: 0.4em;}

.modal-open {padding-right: .9em !important;}


@media (max-width: 769px){
  body {font-size: 16px !important;}
  .visible-xs {display: block;}
  .hidden-xs {display: none !important;}
  .dlheader {font-size: 16px; display: flex; justify-content: space-between; align-items: center; padding: .5em 0 .5em .7em;}
  .dlheader_top_logo {margin-right: 1em;}
  .dlheader_top_logo a img {width: 6em;}
  .dlheader_top_contact {font-size: 14px; margin-right: 1em;}
  .dlheader_top_contact a {padding: .8em;}
  .modal-dialog {width: 96% !important;}
  #HoursModal .modal-dialog .modal-content .modal-body .inner {flex-direction: column-reverse;}
  #HoursModal .modal-dialog .modal-content .modal-body .inner .bg-container, #HoursModal .modal-dialog .modal-content .modal-body .inner .content {width: 100%;}
}

@media (max-width: 369px){
  .hidden-xxs {display: none !important;}
}