/*//jeb TODO

on mobile LATEST VIDEOS is 2 lines, shouldn't be... How does 2024 look??

1 PIXEL LESS GRAY FROM THE HEADER (ONLY IN MIDDLE?!?!?!?!?!)

22 console ERRORs - fixed?  delete the next folder?  dont need those js? they error?

videos on mobile - they look better now but they aren't horizontal centered.

website by matrix tools doesn't show on mobile, also make links have a white font style
FIXED??
*/

/* //jeb rename all random names (and refactor/delete the OLD css files) */
body,
.i7vnoo4,
._1bmdihx3,
.cja00k0,
.cja00k1,
.cja00k3:not(.cja00k2) {
  background-color: #fff !important;
  color: #000 !important;
}

.center {
  text-align: center;
}

video {
  width: 100%;
}

/* //jebjeb why does this ruin the mobile hero image?!?! HUH!?!?!   */
img:not(.mobile-visible img) {
  max-width: 100%;
}

/*//jeb mobile seems off.. prob need to get BOOTSTRAP IN HERE!!!! */
.col-3,
.quarter {
  min-width: 100px;
  width: 24%;
  display: inline-block;
}

._1nleju31,
._12t2k8n0,
.gft88p0,
.nmr7kb0,
.d8gusx0,
.d8gusx2 {
  background-color: #A2AAAD !important;
}

.cja00k1 {
  padding-top: 0 !important;
}

h1 { /*//jeb can this just target h1 and kill that class??*/
  font-size: 40px !important;
  font-family: sans-serif !important;
  font-weight: bold !important;
  font-style: italic;
  letter-spacing: -3px !important;
}

#main-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);  
}


.i7vnoo5,
h1, h2 {
  color: #BE251C !important;
  font-weight: bold !important;
}

h1 {
  text-shadow: 2px 1px #000;
}

.icon {
  max-height: 40px;
  vertical-align: middle;
}

.call-to-action {
  background-color: #BE251C !important;
  border-color: #BE251C !important;
}

.no-margin {
  margin: 0 !important;
  padding: 0 !important
}

.mobile-visible {
  display: none !important;
}

/* //jeb rename this to .footer-link ? */
.nmr7kb0 {
  border-top: 0 !important;
  font-size: 1rem !important;
  font-weight: bold !important;
}

.large-font {
  font-size: 1.5rem !important;
}

.matrix-tools-link {
  color: #000 !important;
}

/* //jeb underline on hover for our link??  also, prob just use UNDERLINE this looks kinda weird
.matrix-tools-link:hover {
  border-bottom: 2px solid #000;
} */

/* Punishment List */
.punishment-container {
  margin-top: 30px;
  margin-bottom: 30px !important
}

.punishment-container.no-line ul.process-list:before {
  display: none !important
}

ul.punishment-list {
  list-type: none;/*//jeb isn't valid?? */
  display: table;
  margin-left: 0 !important;
  margin: 0;
  padding: 0;
  width: 100%
}

ul.punishment-list li {
  padding: 0 0.5em 1em;
  margin-bottom: 20px;
  text-align: center;
  list-style-type: none;
  display: table-cell;/*makes no sense //jeb there are 2 here and neither are ever used.  if we can make this awesome also take it back to Nash Ink (copied from there and shopuld not be this confusing!!!*/
  /* //jeb yo, this lil popup UL is something that i wanna reuse now, what if i made a library system of things i like to reuse ?!?! would others use it?!?!  */
  adisplay: block;
}j

ul.punishment-list li .icon-box {
  margin-bottom: 0
}

.punishment-title {
  font-size: 18px;
  margin-bottom: 0
}

.punishment-text {
  font-size: 13px;
  max-width: 450px;
  margin: 0 auto
}

/* MEDIA QUERIES */
/* For tablets */
@media only screen and (max-width: 1020px) {
  .video-header {
    margin-top: 20px !important;
  }
}

/* For mobile phones */
@media only screen and (max-width: 768px) {
  .mobile-visible {
    display: flex !important;
  }

  #mobile-logo,
  #mobile-logo img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);  
  }

  #main-logo {
    display: none;
  }

  ul.punishment-list li {
    display: block;
  }
}