/* Index CSS */

@import url('icofont.2.min.css');

@font-face {
  font-family: "BankGothic-Bold";
  src: "https://yellowjackettrucking.alexburton.com/css/fonts/BankGothic-Bold";
}
@font-face {
  font-family: "BankGothic-Regular";
  src: "https://yellowjackettrucking.alexburton.com/css/fonts/BankGothic-Regular";
}
@font-face {
  font-family: "Eurostile";
  src: "https://yellowjackettrucking.alexburton.com/css/fonts/eurostile.ttf";
}
@font-face {
  font-family: "EuroStyle-Normal";
  src: "https://yellowjackettrucking.alexburton.com/css/fonts/EuroStyle-Normal.ttf";
}
@font-face {
  font-family: "MicrogrammaEF-Extend-Bold";
  src: "https://yellowjackettrucking.alexburton.com/css/fonts/MicrogrammaEF-Extend-Bold.otf";
}

:root {
  --yjt-header-font: "BankGothic-Bold", sans-serif;
  --yjt-paragraph-font: "Eurostile", sans-serif;
  --yjt-yellow: #f1c530;
  --yjt-black: #231f1f;
  --yjt-brand: #2c3f50;
  --yjt-white: #FFFFFF;
  --yjt-white: #fff;
  --yjt-grey: #f7f7f7;
  --yjt-dark: #333;
  --yjt-darker: #111;
  --yjt-black: #000;
  --yjt-red: #e74c3c;
  --yjt-orange: #e67e22;
  --yjt-green: #2ecc71;
  --yjt-blue: #3498db;
  --yjt-purple: #9b59b6;
  --facebook: #2D88FF;
  --instagram: #1DA1F2;
  --snap_chat: #FFFC01;
  --twitter: #1CA1F2;
  --apple: #D6D6D6;
  --patreon: #FF424D;
  --spotify: #1DB954;
  --spotify-hover: #1ED760;
  --youtube: #FF0101;
  --cash_app: #00D54B;
  --paypal: #0D3685;
  --venmo: #028CFF;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--yjt-header-font);
  margin:1rem 0;
  text-shadow: 2px 2px 2px var(--yjt-yellow);
}

*:not(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
  font-family: var(--yjt-paragraph-font);
}

/* ----------------------------------- */
#full-video-wrap {position: relative; overflow: hidden;}
#full-video-overlay {
    position: absolute; z-index: 0; width: 100%; inset: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7));
}
#full-video {
    position: absolute; top: 0; left: 0;
    width: auto; z-index: -10; background-color: black;
}
#full-video video {width: 100%;}
#full-video-wrap, #full-video-overlay {width: 100%; aspect-ratio: 16 / 9; max-height: 720px;}
.yjt-button {
  display: inline-block; padding: 0.5rem 1rem; margin: 10px; border-radius: 5px; text-align: center;
  font-size: 1.2em; font-weight: 700; text-transform: uppercase; text-decoration: none;
  background-color: var(--yjt-yellow); color: var(--yjt-black); transition: all 0.2s linear;
}
h1 {font-size: 3.8vw;}
h2 {font-size:3vw;}
h3 {font-size: 2.8vw;}
.contact-button {font-size: 2vw;}
@media screen and (min-width:1200px) {
  .contact-button {font-size:1.7vw;}
}
h3 {font-size: 1.75vw;}

p {font-size:2vw;}
@media screen and (max-width:991px) {
  h2 {font-size:4vw;}
  h3 {font-size:3.2vw;}
  p {font-size:2.7vw;}
}

.yjt-button span {display: inline-block; vertical-align: middle;}
.yjt-button-black {background-color: var(--yjt-black); color: var(--yjt-yellow);}
.yjt-button-yellow {background-color: var(--yjt-yellow); color: var(--yjt-black);}
.yjt-button:hover,
.yjt-button-black:hover {background-color: var(--yjt-yellow); color: var(--yjt-black);}
#hours-table {font-size:1.5vw;}
@media screen and (max-width:991px) {#hours-table {font-size:2vw;}}
.service-card p {font-size:1.4vw;}
@media screen and (max-width:767px) {
  .service-card img {width:48px;}
  #hours-table {font-size:3vw;}
}
@media screen and (max-width:991px) {.service-card p {font-size:2.4vw !important;}}
.service-card h3 {margin:4px 0;}
/* ----------------------------------- */

/* Social Media Branding CSS */
.facebook {background-color: var(--facebook);}
.instagram {
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
.snap_chat {background-color: var(--snap_chat);}
.twitter {background-color: var(--twitter);}
.apple {background-color: var(--apple);}
.patreon {background-color: var(--patreon);}
.spotify {background-color: var(--spotify);}
.spotify-hover {background-color: var(--spotify-hover);}
.youtube {background-color: var(--youtube);}
.cash_app {background-color: var(--cash_app);}
.paypal {background-color: var(--paypal);}
.venmo {background-color: var(--venmo);}

.facebook-text {color: var(--facebook);}
.instagram-text {color: var(--instagram);}
.snap_chat-text {color: var(--snap_chat);}
.twitter-text {color: var(--twitter);}
.apple-text {color: var(--apple);}
.patreon-text {color: var(--patreon);}
.spotify-text {color: var(--spotify);}
.spotify-hover-text {color: var(--spotify-hover);}
.youtube-text {color: var(--youtube);}
.cash_app-text {color: var(--cash_app);}
.paypal-text {color: var(--paypal);}
.venmo-text {color: var(--venmo);}

.facebook-border {border-color: var(--facebook);}
.instagram-border {border-color: var(--instagram);}
.snap_chat-border {border-color: var(--snap_chat);}
.twitter-border {border-color: var(--twitter);}
.apple-border {border-color: var(--apple);}
.patreon-border {border-color: var(--patreon);}
.spotify-border {border-color: var(--spotify);}
.spotify-hover-border {border-color: var(--spotify-hover);}
.youtube-border {border-color: var(--youtube);}
.cash_app-border {border-color: var(--cash_app);}
.paypal-border {border-color: var(--paypal);}
.venmo-border {border-color: var(--venmo);}
/* End Social Media Branding CSS */

a {text-decoration:none; cursor:pointer;}

/* Full Banner CSS */
.full-banner {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}
.full-width {width: 100%;}
/* End Full Banner CSS */

/*~~~~~~~~ PREV CSS ~~~~~~~~*/
body * {font-family:var(--yjt-paragraph) !important;}
body {background:var(--yjt-white); margin:0; padding:0;}
/* h1 {font-weight:900; font-size:4rem;}
h2 {font-size:2.5rem;} */
fieldset {border:none;}
#site-load-cover.active {position: fixed; left: 0px; top: 0px; transition:all 0.2s linear; width: 100%; height: 100%; z-index: 999999; background-color: var(--yjt-black-2); background-position: 50% 290px; background-repeat: no-repeat; background-size: 40%;}
#site-load-cover:not(.active) {display:none; opacity:0; width:0; height:0; z-index:-999999;}
#loading-yjt {color: var(--yjt-white); font-size:5rem; text-align:center; margin-top:3rem; text-transform:uppercase;}
.container {padding:1rem;}
.uppercase {text-transform: uppercase;}
.text-center {text-align:center;}
.text-left {text-align:left;}
.text-right {text-align:right;}
.yjt-black {background-color: var(--yjt-black);}
.black {background-color: var(--yjt-black);}
.light-grey {background-color: var(--yjt-light-grey);}
.white {background-color: var(--yjt-white);}
.yjt-blue {background-color: var(--yjt-blue);}
.yjt-red {background-color: var(--yjt-red);}
.yjt-green {background-color: var(--yjt-green);}
.white-text {color: var(--yjt-white);}
.black-text {color: var(--yjt-black);}
.button {border:none; border-radius:0; padding:1rem 2rem; text-align:center; text-transform:uppercase; transition: all 0.2s linear; width:160px;}
.button-white {background-color: var(--yjt-white); color: var(--yjt-black);}
.button-grey {background-color: var(--yjt-grey); color: var(--yjt-white);}
.button-black {background-color: var(--yjt-black); color: var(--yjt-white);}
.button-white:hover,
.button-grey:hover {background-color: var(--yjt-black-2); color: var(--yjt-white);}
.button-black:hover {background-color: var(--yjt-white); color: var(--yjt-black);}
.thicc {font-weight:900;}
.big-yjt {font-size: 2rem; font-weight: 900; letter-spacing: 10px;}

#buy-tickets {font-size:1.2rem; width:200px;}

a, button, input, .menu-item {cursor:pointer;}

.col-fifth {flex: 0 0 20%; max-width: 20%; position: relative; width:100%; padding-right: 15px; padding-left: 15px;}
@media screen and (min-width: 576px) {.col-sm-fifth {flex: 0 0 20%; max-width: 20%; position: relative; width:100%; padding-right: 15px; padding-left: 15px;}}
@media screen and (min-width: 768px) {.col-md-fifth {flex: 0 0 20%; max-width: 20%; position: relative; width:100%; padding-right: 15px; padding-left: 15px;}}
@media screen and (min-width: 992px) {.col-lg-fifth {flex: 0 0 20%; max-width: 20%; position: relative; width:100%; padding-right: 15px; padding-left: 15px;}}
@media screen and (min-width: 1200px) {.col-xl-fifth {flex: 0 0 20%; max-width: 20%; position: relative; width:100%; padding-right: 15px; padding-left: 15px;}}

/* .nav-badge {width:29%;}
.nav-menu {width:65%;} */
#yjt-biz {background: var(--yjt-light-grey); padding:5% 3rem;}
.banner {background-size:cover; background-repeat:no-repeat;}
#yjt-spotify-wrap {max-width:600px; display:block; margin:0 auto; padding:2rem;}

footer {padding:2rem 1rem;}
.anim-hidden {visibility:hidden;}
.hidden {display:none;}
.animate__animated {visibility:visible;}
.lh-2 {line-height:2;}

/* Progress Bar */
#progress-bar {height:0.5rem; width:0%; background-color:var(--yjt-yellow); position:fixed; bottom:0; left:0; z-index:99999;}

/* @keyframes yjtbutton {
    0% {background:var(--yjt-green);}
    30% {background:var(--yjt-red);}
    70% {background:var(--yjt-blue);}
    100% {background:var(--yjt-green);}
} */
.button-yjt {
  background: var(--yjt-green);
  color: var(--yjt-white);
  font-size: 1.2rem;
  width: 250px;
  font-weight: 900;
}

button * {pointer-events: none;}

/* .button-yjt:hover {
  animation: yjtbutton 0.3s infinite;
} */

@media screen and (max-width:991px) {
  .big-yjt {font-size:1.2rem !important;}
  #yjt-banner {padding:22% 3rem; background-position: 36% 50%;}
  .tour-date-left,
  .tour-date-middle,
  .tour-date-right {width:100% !important;}
  .tour-date {display:block !important; text-align:center !important;}
}

/*~~~~~~~~ END PREV CSS ~~~~~~~~*/


/* div,p,input,select,button,.yjt-roboto {font-family: var(--yjt-paragraph);}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {font-family: var(--yjt-paragraph);} */

/* Horizontal Centering */
.centerize {margin: 0px auto; width: 100%; display:block;}
.ctz-xxs {max-width:400px;}
.ctz-xs {max-width: 600px;}
.ctz-sm {max-width: 800px;}
.ctz-md {max-width: 1000px;}
.ctz-lg {max-width: 1200px;}
.ctz-xl {max-width: 1440px;}

/* Font Weight */
.fw-900 {font-weight:900;}
.fw-800 {font-weight:800;}
.fw-700 {font-weight:700;}
.fw-600 {font-weight:600;}
.fw-500 {font-weight:500;}
.fw-400 {font-weight:400;}

/* Animation Delays */
.ad-200 {animation-delay: 0.2s;}
.ad-300 {animation-delay: 0.3s;}
.ad-400 {animation-delay: 0.4s;}
.ad-500 {animation-delay: 0.5s;}
.ad-600 {animation-delay: 0.6s;}
.ad-700 {animation-delay: 0.7s;}
.ad-750 {animation-delay: 0.75s;}
.ad-800 {animation-delay: 0.8s;}
.ad-900 {animation-delay: 0.9s;}
.ad-1000 {animation-delay: 1s;}
.ad-1100 {animation-delay: 1.1s;}
.ad-1200 {animation-delay: 1.2s;}
.ad-1300 {animation-delay: 1.3s;}
.ad-1400 {animation-delay: 1.4s;}
.ad-1500 {animation-delay: 1.5s;}
.ad-2000 {animation-delay: 2s;}
.ad-2500 {animation-delay: 2.5s;}
.ad-3000 {animation-delay: 3s;}
.ad-3500 {animation-delay: 3.5s;}
.ad-4000 {animation-delay: 4s;}
.ad-4500 {animation-delay: 4.5s;}
.ad-5000 {animation-delay: 5s;}
.ad-5500 {animation-delay: 5.5s;}
.ad-6000 {animation-delay: 6s;}
.ad-6500 {animation-delay: 6.5s;}
.ad-7000 {animation-delay: 7s;}
.ad-7500 {animation-delay: 7.5s;}
.ad-8000 {animation-delay: 8s;}
.ad-8500 {animation-delay: 8.5s;}
.ad-9000 {animation-delay: 9s;}
.ad-9500 {animation-delay: 9.5s;}
.ad-10000 {animation-delay: 10s;}
.ad-10500 {animation-delay: 10.5s;}
.ad-11000 {animation-delay: 11s;}
.ad-11500 {animation-delay: 11.5s;}
.ad-12000 {animation-delay: 12s;}


/* Register Colors */
.yjt-white {background-color:var(--yjt-white);}
.yjt-grey {background-color:var(--yjt-grey);}
.yjt-dark {background-color:var(--yjt-dark);}
.yjt-darker {background-color:var(--yjt-darker);}
.yjt-black {background-color:var(--yjt-black);}
.yjt-red {background-color:var(--yjt-red);}
.yjt-orange {background-color:var(--yjt-orange);}
.yjt-yellow {background-color:var(--yjt-yellow);}
.yjt-green {background-color:var(--yjt-green);}
.yjt-blue {background-color:var(--yjt-blue);}
.yjt-purple {background-color:var(--yjt-purple);}
.yjt-brand {background-color:var(--yjt-brand);}

.yjt-white-text {color:var(--yjt-white);}
.yjt-grey-text {color:var(--yjt-grey);}
.yjt-dark-text {color:var(--yjt-dark);}
.yjt-darker-text {color:var(--yjt-darker);}
.yjt-black-text {color:var(--yjt-black);}
.yjt-red-text {color:var(--yjt-red);}
.yjt-orange-text {color:var(--yjt-orange);}
.yjt-yellow-text {color:var(--yjt-yellow);}
.yjt-green-text {color:var(--yjt-green);}
.yjt-blue-text {color:var(--yjt-blue);}
.yjt-purple-text {color:var(--yjt-purple);}
.yjt-brand-text {color:var(--yjt-brand);}

.yjt-white-border {border-color:var(--yjt-white);}
.yjt-grey-border {border-color:var(--yjt-grey);}
.yjt-dark-border {border-color:var(--yjt-dark);}
.yjt-darker-border {border-color:var(--yjt-darker);}
.yjt-black-border {border-color:var(--yjt-black);}
.yjt-red-border {border-color:var(--yjt-red);}
.yjt-orange-border {border-color:var(--yjt-orange);}
.yjt-yellow-border {border-color:var(--yjt-yellow);}
.yjt-green-border {border-color:var(--yjt-green);}
.yjt-blue-border {border-color:var(--yjt-blue);}
.yjt-purple-border {border-color:var(--yjt-purple);}
.yjt-brand-border {border-color: var(--yjt-brand);}


/* Tour Dates CSS */
/* .tour-date {border-bottom: solid 1px var(--yjt-black-2); display:flex; padding:3rem 1rem; max-width:800px; margin:0 auto;}
.tour-date-left {width:18%;}
.tour-date-middle {width:58%;}
.tour-date-right {width:24%;}
.tour-date-day, .tour-date-month-x {width:50px; display:inline-block;}
.tour-date-day {width: 50px; text-align: center; font-size:2rem; font-weight:900;}
.tour-date-box {width:140px; margin:0 auto;}
h3 .location {font-family: var(--font-metrophobic) !important; text-transform: uppercase; margin-right: 0.5rem;}
h3 .venue {font-family: var(-font-metrophobic) !important; text-transform: uppercase;} */
/* End Tour Dates CSS */

/* Calendar Dates CSS */
.event-list-item {border-bottom: solid 3px #333;}
.ticket-button {display:block; border-radius:0.5rem; padding:0.5rem 1rem; border:none; background: var(--yjt-red); color: var(--yjt-white); transition:all 0.2s linear; text-decoration:none !important; width:110px; margin:0 auto;}
.ticket-button:hover {background-color: var(--yjt-green); color: var(--yjt-white) !important;}
.calendar-box {border-radius:0.5rem; width:100px; margin:0 auto; display:block; box-shadow: 0 0 12px var(--yjt-dark-grey);}
.calendar-box-header {padding:0.2rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: var(--yjt-red); color: var(--yjt-white);}
.calendar-box-body {padding:0.2rem; text-align:center; font-weight:900; color: var(--yjt-red-darkest);}
.calendar-box-footer {padding:0.2rem; border-bottom-left-radius:0.5rem; border-bottom-right-radius:0.5rem; background-color: var(--yjt-red); color: var(--yjt-white);}
.ticket-table {width:100%; margin:0 auto;}
/* End Calendar Dates CSS */

/* YJT Headshot Images CSS */
.headshot-img {
  display:block;
  margin:0 auto;
  max-width:100%;
  width: 300px;
  height: auto;
}
/* End YJT Headshot Images CSS */

/* Form CSS */
input.form-control {
    padding: 4px;
    border: none;
}

/* Modal CSS */
.modal-button {cursor:pointer;}
.modal {display:none;}
.modal.modal-open {display:flex !important; align-items: center; justify-content: center; position:fixed; width:100%; height:100%; inset: 0; background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)); z-index:9999999;}
.modal-container {padding:0.25rem; height:auto; max-width:80%;}
.modal-sm {width:400px;}
.modal-md {width:800px;}
.modal-lg {width:1200px;}
.modal .headshot-img {width:100%; height:auto;}
.close-modal {border-radius:50%; border:none; padding:0.5reem; width:32px; height:32px; margin-bottom:0.25rem;}




.social-badge {
  width: 3.4rem;
  height: 3.4rem;
  padding-top: 8px;
  display: inline-block;
  margin: 0 1rem 1rem 0;
  text-align: center;
  font-size: 2rem;
  border-radius: 50%;
  transition: all 0.2s linear;
}

@media screen and (max-width:991px) {
  .social-badge {width:2.5rem; height:2.5rem; font-size:1.2rem;}
}

#yjt-logo-images img {width:80%; height:auto; padding-top:14%;}

@media screen and (max-width:991px) {
  #yjt-logo-images img {width:60%; padding-top:10%;}
}

.facebook {background-color: var(--facebook);}
.instagram {
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
.snap_chat {background-color: var(--snap_chat);}
.twitter {background-color: var(--twitter);}
.apple {background-color: var(--apple);}
.patreon {background-color: var(--patreon);}
.spotify {background-color: var(--spotify);}
.spotify-hover {background-color: var(--spotify-hover);}
.youtube {background-color: var(--youtube);}
.cash_app {background-color: var(--cash_app);}
.paypal {background-color: var(--paypal);}
.venmo {background-color: var(--venmo);}

.facebook-text {color: var(--facebook);}
.instagram-text {color: var(--instagram);}
.snap_chat-text {color: var(--snap_chat);}
.twitter-text {color: var(--twitter);}
.apple-text {color: var(--apple);}
.patreon-text {color: var(--patreon);}
.spotify-text {color: var(--spotify);}
.spotify-hover-text {color: var(--spotify-hover);}
.youtube-text {color: var(--youtube);}
.cash_app-text {color: var(--cash_app);}
.paypal-text {color: var(--paypal);}
.venmo-text {color: var(--venmo);}

.facebook-border {border-color: var(--facebook);}
.instagram-border {border-color: var(--instagram);}
.snap_chat-border {border-color: var(--snap_chat);}
.twitter-border {border-color: var(--twitter);}
.apple-border {border-color: var(--apple);}
.patreon-border {border-color: var(--patreon);}
.spotify-border {border-color: var(--spotify);}
.spotify-hover-border {border-color: var(--spotify-hover);}
.youtube-border {border-color: var(--youtube);}
.cash_app-border {border-color: var(--cash_app);}
.paypal-border {border-color: var(--paypal);}
.venmo-border {border-color: var(--venmo);}