@charset "UTF-8";

/* ===== LANDING/RADIO PAGE SPECIFIC ===== */
/* This file contains styles unique to landing/homepage layouts */
/* Requires: Base.css */

@media all {
  /* ===== IMAGE OVERFLOW FIX ===== */
  img,
  video,
  canvas {
    overflow: hidden !important;
  }

   /* ===== GRID LAYOUT ===== */
  .row {
    height: auto;
    margin: 12px auto;
  }

  .column {
    height: 400px;
    display: inline-block;
    vertical-align: top;
    width: 300px;
    margin-bottom: 20px;
    box-sizing: border-box;
  }

  .row:after {
    content: "";
    display: table;
    clear: both;
    padding-bottom: 10px;
  }

  /* ===== CAROUSEL CONTROLS ===== */
  .carousel-nav butt {
    background-color: #0c19cf !important;
    border-color: #98b1c4;
    color: #FFFFFF;
  }

  .carousel-nav butt:hover {
    background-color: #c04912;
    border-color: #98b1c4;
    color: #FFFFFF;
  }

  /* ===== IMAGE HANDLING ===== */
  .manyimg,
  .BigImg {
    object-fit: contain;
    max-width: 100%;
    height: auto;
    overflow: visible;
  }

  /* ===== TABLES ===== */
  table#customers {
    width: 50%;
    max-width: 53em;
  }

  #customers tr:nth-child(even) {
    background-color: #f2f2f2
  }

  #customers th {
    background-color: #aab0b5;
    color: white;
  }
}

/* ===== SMALL MOBILE (< 600px) ===== */
@media (max-width: 600px) {
  img,
  video,
  canvas {
    overflow: hidden;
  }

  .row {
    left: 0 !important;
  }

  .column {
    width: 98vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    display: block !important;
    float: none !important;
    margin: 10px auto !important;
    box-sizing: border-box;
  }

  /* Touch targets - accessibility */
  .separator,
  .Butt,
  .Ddoc,
  .Bblog,
  button,
  a[role="button"] {
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 8px !important;
    padding: 8px 12px !important;
    font-size: 1.1em;
    line-height: 1.1em;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }
}

/* ===== MOBILE (< 900px) ===== */
@media all and (max-width: 899px) {
  .column {
    min-height: 200px;
    height: auto;
    width: 25%;
    margin: auto;
  }

  .showbody {
    display: block;
    height: 180px;
  }

  .bodycontent {
    min-height: 100px;
    height: auto;
    width: 100px;
    margin: auto;
  }

  .manyimg {
    display: inline-block;
    height: 100%;
    width: 100%;
  }

  .BigImg {
    height: 300px;
    width: 300px;
  }

  .side ol {
    display: flex;
    list-style: inside none;
    border: groove thick;
    border-radius: 20px;
    max-width: 80%;
    position: relative;
    left: 5%;
  }

  #collect,
  .midcom {
    padding: 3px;
    float: right;
    clear: right;
    position: relative;
    bottom: 45%;
  }

  footer {
    width: 100%;
  }
}

/* ===== DESKTOP (>= 900px) ===== */
@media all and (min-width: 900px) {
   .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0 !important;
    position: relative;
    left: 5%;
    justify-content: flex-start;
  }
  .column {
    flex: 0 0 300px;
    max-width: 300px;
    margin-bottom: 20px;
    margin-right: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 400px; /* Or remove for auto-height */
    vertical-align: top;
  }

  .manyimg {
    margin: auto;
    text-align: center;
    display: block;
    max-height: 90%;
    width: 90%;
    height: 200px;
  }

  .bodycontent {
    background-color: white;
    padding: 10px;
    text-align: center;
    width: 200px;
    height: auto;
    margin: 5px 10px;
  }

  .showbody {
    display: inline-block;
    float: left;
  }

  .BigImg {
    height: 400px;
    width: 400px;
  }
}