/* Fonts */
@font-face {font-family: DIN; src: url(../fonts/DIN.ttf) format('truetype');}
@font-face {font-family: DIN Bold; src: url(../fonts/DIN-PRO-600-SemiBold.ttf) format('truetype');}
@font-face {font-family: DIN Normal; src: url(../fonts/DINMedium.ttf) format('truetype');}

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

.visible-xs {display: none !important;}
.dlheader {font-size: 1vw !important; width: 100%; background-color: #000; padding: 0 4em; font-family: var(--body-font); text-transform:  uppercase; color: #fff;}
.dlheader a {text-decoration: none; color: #fff;}
.dlheader a:hover {color: var(--main-color); text-decoration: none;}
.dlheader_top {display: flex; justify-content: space-between; align-items: center;}
.dlheader_top_logo img {height: 5.85em; aspect-ratio: 22/5;}
.dlheader_locations {display: flex; flex-wrap: wrap; justify-content: end; width: 100%;}
.dlheader_locations_item {display: flex; flex-direction: column; align-items: flex-end; padding: 0 4em; border-right: .01em solid #3F5057; line-height: 1.6; min-width: 21.5%;}
.dlheader_locations_item:last-child {border: 0;}
.locations-title {font-family: var(--main-font-bold); text-transform: uppercase; font-weight: bold; font-size: 1.2em; margin-bottom: .5em;}
.locations-title a:hover, .locations-title a:focus {color: var(--main-color);}
.locations-title i {margin-right: .3em;}
.locations-phone {font-family: var(--main-font-bold); font-weight: bold; font-size: 1.1em;}
.locations-phone a:hover, .locations-phone a:focus {color: var(--main-color);}
.locations-phone i {margin-right: .5em;}
.dlheader_top i {color: var(--main-color); font-size: 1em; width: 1em; height: 1em; display: inline-block; aspect-ratio: 1/1;}
.dlheader_top_social {display: flex; flex-direction: column; font-size: .9em; align-items: center;}
.dlheader_top_social a i {color: #fff;}
.dlheader_top_social a {padding: .2em; font-size: 1em;}
.dlheader_top_social a:first-child {padding-left: .3em;}
.dlheader_top a:hover i, .dlheader_top a:focus i {color: var(--main-color);}
.dlheader_top_phone a:hover, .dlheader_top_hours a:hover, .dlheader_top_location a:hover, .dlheader_top_social a:hover i {color:  var(--main-color);}
.ebay_icon {aspect-ratio: 121/50; height: 1em;}

/* Modals */
.modal {font-family: var(--body-font); bottom: unset !important; top: 5em !important;}
.modal-header {padding: 1em 2em !important; background-color: var(--main-color); color: #fff; flex-direction: row-reverse; border: none !important; border-radius: 0 !important;}
.modal-title {font-family: var(--main-font-bold); font-size: 1.2em; font-weight: 600;}
.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 {padding: 1em 2em; overflow: hidden;}
.modal-body a {color: #000; border: none; display: block}
.modal-footer {padding: 1em; border-radius: 0 !important;}
.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);}
.modal-open {padding-right: .9em !important;}
.btn-link a {background-color: var(--main-color); font-family: var(--main-font-bold); text-decoration: none; text-transform: uppercase; color: #fff; padding: 1em 3em; border: .01em solid var(--main-color); font-size: 1em; border-radius: 0 !important;}
.btn-link a:hover, .btn-link a:focus, .btn-link a:active {background-color: #00205B; text-decoration: none;}

@media (max-width: 769px){
  .dlheader {font-size: 16px !important; padding: .2em 1em; background-color: #000;}
  .visible-xs {display: block !important;}
  .hidden-xs {display: none !important;}
  .dlheader_top_logo img {height: 3.5em; margin-right: 1em;}
  .header-contact {display: flex !important; align-items: center; gap: 1em;}
  .header-contact a:first-child {padding-left: .7em; padding-right: .5em;}
  .header-contact a {border: .13em solid #fff; border-radius: 100%; padding: .6em;}
  .header-contact a i {color: #fff; font-size: 1em;}
  .dlheader_top_social {flex-direction: row;}
  .dlheader_top_social a {padding: .2em .5em;}
  .modal-dialog {width: 96% !important;}
  .modal-open {padding-right: 0 !important;}
}