: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;}

.dlheader a {color: var(--black);}
.dlheader a:hover, .dlheader a:focus {color: var(--main-color);}

/* Header */
.dlheader {font-family: var(--body-font); background-color: #fff; padding: .5em 1em; overflow: hidden; color: #000; font-size: .95vw; line-height: 1.4;}
.dlheader > div{ width: 28%; border-right: .01em solid #d5d5d5; float: left; }
.dlheader > div:last-child{ border: none; }
.dlheader .header-logo{ width: 44%; text-align: center;}
.dlheader .header-logo a{ display: inline-block; }
.header-logo img {width: 16em;}
.dlheader .header-location-hours{ padding: 0 4em 0 5em; }
.dlheader .header-location{ display: flex; border-bottom: 0.01em solid #d5d5d5; padding: 0; }
.dlheader .header-location a{ display: contents; }
.dlheader .header-location i{ background-color: #0a0a0a; color: #f1f1f1; padding: 0.5em 1.5em 0.6em 0.8em; margin: 0 0.5em 0.3em 0; width: 2.3em; height: 2.1em; display: inline-block; aspect-ratio: 2/2; }
.dlheader .header-location a:hover i,.dlheader .header-location a:focus i{ background-color: var(--main-color); color: #fff; }
.dlheader .header-location span{ text-transform: uppercase; font-weight: 700; line-height: 1.25; font-size: .85em; }
.dlheader .header-hours{ display: flex; align-items: center;}
.dlheader .header-hours a{ display: contents; }
.dlheader .header-hours i{ padding: 0.5em 0.3em 0.6em 0.7em; margin: 0.5em 0.5em 0 0; border: 0.01em solid #d5d5d5; width: 2.3em; height: 2.1em; display: inline-block; aspect-ratio: 2/2; }
.dlheader .header-hours span{ font-size: .88em; font-weight: 500; padding-top: .4em; }
.dlheader .header-phone-social{ padding: 0 5em 0 4em; border: none;}
.dlheader .header-phone a {font-family: var(--main-font-bold); font-size: 2.2em; display: inline-block; font-weight: 700; line-height: 1.2;}
.dlheader .header-phone a:hover, .dlheader .header-phone a:focus {text-decoration: none;}
.dlheader .header-social a {font-size: .9em; margin: 0 0.8em 0 0; display: inline-block; background-color: #d5d5d5; padding: 0.5em 0.5em 0.3em 0.7em; color: #1c1c1c;}
.dlheader .header-social{ width: 15em; overflow: hidden; border-top: 0.01em solid #d5d5d5; padding-top: 0.2em;}
.dlheader .header-social i{ width: 1em; height: 1em; aspect-ratio: 1/1; }
.dlheader .header-social a:hover, .dlheader .header-social a:focus {background-color: var(--main-color); color: #fff;}
.dlheader .secondary-phone {margin: 0 !important; background-color: transparent !important; font-family: var(--main-font-bold); font-size: 1.5em !important; padding: 0 !important; font-weight: 700;}
.dlheader .secondary-phone:hover, .dlheader .secondary-phone:focus {color: var(--main-color) !important; text-decoration: none;}

/* Header Mobile */
.header-mobile-buttons {font-size: 1.2em;}
.header-mobile-buttons a {border: 0.01em solid #1c1c1c; padding: 0.5em 0.2em 0.5em 0.4em;}
.header-mobile-buttons a:first-child {color: var(--main-color);}

/* 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 .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){
  .visible-xs {display: block;}
  .hidden-xs {display: none !important;}
  .dlheader {font-size: 16px; display: flex; justify-content: space-between; align-items: center; padding: .7em;}
  .dlheader > div {width: unset;}
  .header-logo img {width: 100%;}
  .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%;}
}