:root {
 --firstcolor-navy: #243068;
 --firstcolor-navy-rgb: 36, 48, 104;
 --secondcolor-red: #d71635;
 --secondcolor-red-rgb: 215, 22, 53;
 --thirdcolor-gray: #6e6e6e;
 --thirdcolor-gray-rgb: 110, 110, 110;
}

body {
 background-color: rgba(var(--firstcolor-navy-rgb), .2)
}

.fc-firstcolor {
 color: var(--firstcolor-navy) !important;
}

.fc-secondcolor {
 color: var(--secondcolor-red) !important;
}

.fc-thirdcolor {
 color: var(--thirdcolor-gray) !important;
}

.bg-firstcolor {
 background-color: var(--firstcolor-navy) !important;
}

.bg-secondcolor {
 background-color: var(--secondcolor-red) !important;
}

.bg-thirdcolor {
 background-color: var(--thirdcolor-gray) !important;
}

.border-firstcolor {
 border-color: var(--firstcolor-navy) !important;
}

.border-secondcolor {
 border-color: var(--secondcolor-red) !important;
}

.border-thirdcolor {
 border-color: var(--thirdcolor-gray) !important;
}

a, a:active, a:visited {
 color: var(--thirdcolor-gray) !important;
 text-decoration: none;
}

 a:hover, a:focus {
  color: var(--bs-dark) !important;
  text-decoration: underline !important;
  cursor: pointer;
 }

 a.btn,
 a.btn:active.btn,
 a.btn:visited,
 a.btn:hover,
 a.btn:focus {
  color: #fff !important;
  text-decoration: none !important;
 }

  a.btn:hover,
  a.btn:focus {
   filter: saturate(0.8);
  }

nav a,
nav a:active,
nav a:visited {
 color: var(--firstcolor-navy) !important;
 text-decoration: none;
}

 nav a:hover,
 nav a:focus {
  color: var(--secondcolor-red) !important;
  text-decoration: underline !important;
  cursor: pointer;
 }

.top-bar {
 height: 40px;
 line-height: 40px;
 font-size: 13px;
}

.banner {
 background-image: url(https://cradso.net/ebay/images/Billboard01.png);
 background-size: 100%;
 background-repeat: no-repeat;
 padding-top: 23%;
}


/* =========================================================
   CSS GALLERY
   eBay Mobile App Compatible
   ========================================================= */

.css-gallery {
 width: 100%;
}

 .css-gallery input[type="radio"] {
  display: none;
 }


/* =========================================================
   BIG PHOTO AREA
   ========================================================= */

.big-photo-container {
 display: block;
 width: 80%;
 max-width: 100%;
 margin: 0 auto;
 padding: 0;
 overflow: hidden;
 border: 2px solid var(--firstcolor-navy);
 border-radius: 20px;
 box-sizing: border-box;
}


/* Hide all large slides by default */

.large-slide {
 display: none;
 width: 100%;
 max-width: 100%;
 margin: 0;
 padding: 0;
}


 /* Main gallery images */

 .large-slide img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0;
  padding: 0;
  border: 0;
 }


/* =========================================================
   SHOW SELECTED LARGE IMAGE
   ========================================================= */

#img-1:checked ~ .big-photo-container .slide-1,
#img-2:checked ~ .big-photo-container .slide-2,
#img-3:checked ~ .big-photo-container .slide-3,
#img-4:checked ~ .big-photo-container .slide-4,
#img-5:checked ~ .big-photo-container .slide-5,
#img-6:checked ~ .big-photo-container .slide-6,
#img-7:checked ~ .big-photo-container .slide-7,
#img-8:checked ~ .big-photo-container .slide-8,
#img-9:checked ~ .big-photo-container .slide-9,
#img-10:checked ~ .big-photo-container .slide-10 {
 display: block;
}


/* =========================================================
   THUMBNAIL BARS
   ========================================================= */

.thumb-bar {
 display: flex;
 width: 80%;
 max-width: 100%;
 margin: 10px auto 0 auto;
 padding: 0;
 box-sizing: border-box;
}

 .thumb-bar label {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  max-width: 20%;
  margin: 0 8px 0 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  box-sizing: border-box;
  opacity: 0.5;
 }

  .thumb-bar label:last-child {
   margin-right: 0;
  }

  .thumb-bar label img {
   display: block;
   width: 100% !important;
   max-width: 100% !important;
   height: auto !important;
   margin: 0;
   padding: 0;
   border: 0;
  }


/* =========================================================
   ACTIVE THUMBNAIL
   ========================================================= */

#img-1:checked ~ .thumb-bar label[for="img-1"],
#img-2:checked ~ .thumb-bar label[for="img-2"],
#img-3:checked ~ .thumb-bar label[for="img-3"],
#img-4:checked ~ .thumb-bar label[for="img-4"],
#img-5:checked ~ .thumb-bar label[for="img-5"],
#img-6:checked ~ .thumb-bar label[for="img-6"],
#img-7:checked ~ .thumb-bar label[for="img-7"],
#img-8:checked ~ .thumb-bar label[for="img-8"],
#img-9:checked ~ .thumb-bar label[for="img-9"],
#img-10:checked ~ .thumb-bar label[for="img-10"] {
 border-color: var(--secondcolor-red);
 opacity: 1;
}


/* =========================================================
   PRODUCT NAME
   ========================================================= */

.productname {
 border: 2px solid var(--secondcolor-red);
 border-radius: 10px;
 color: var(--firstcolor-navy);
 width: 100%;
 font-size: 24px;
 line-height: 60px;
 min-height: 60px;
 display: block;
 text-align: center;
 text-transform: uppercase;
 font-weight: 900;
}


/* =========================================================
   HIGHLIGHT HEADING
   ========================================================= */

.highlighthead {
 border-radius: 10px;
 background-color: var(--secondcolor-red);
 color: #fff;
 width: 80%;
 margin: 0 auto 20px auto;
 padding: 20px;
 font-size: 24px;
 line-height: 30px;
 min-height: 60px;
 display: block;
 text-align: center;
 text-transform: uppercase;
 font-weight: 900;
}


/* =========================================================
   SUBTITLES
   ========================================================= */

.subtitles {
 border-bottom: 2px solid var(--secondcolor-red);
 color: var(--firstcolor-navy);
 width: 100%;
 font-size: 24px;
 line-height: 34px;
 min-height: 30px;
 display: block;
 text-transform: uppercase;
 font-weight: 900;
}


/* =========================================================
   PRODUCT SPECIFICATIONS
   ========================================================= */

.spechead {
 color: var(--secondcolor-red);
 font-size: 16px;
 text-transform: uppercase;
 font-weight: 700;
}

.specheadnote {
 color: #888;
 font-size: 14px;
 line-height: 18px;
 font-weight: 400;
 font-style: italic;
}

.spec {
 color: #000;
 font-size: 16px;
 line-height: 22px;
 text-transform: capitalize;
 font-weight: 400;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

 .top-bar {
  height: 80px;
  line-height: 20px;
  padding: 10px 0 10px 0;
 }

 .big-photo-container {
  width: 100%;
  max-width: 100%;
 }

 .thumb-bar {
  width: 100%;
  max-width: 100%;
 }
}


/* =========================================================
   INFORMATION TABS
   ========================================================= */

.cradso-tab-pane {
 display: none;
}

#tab-delivery:checked ~ .tab-content #tab-delivery-content,
#tab-returns:checked ~ .tab-content #tab-returns-content {
 display: block;
}

#tab-delivery ~ .nav-tabs label[for="tab-delivery"],
#tab-delivery:visited ~ .nav-tabs label[for="tab-delivery"],
#tab-returns ~ .nav-tabs label[for="tab-returns"],
#tab-returns:visited ~ .nav-tabs label[for="tab-returns"] {
 color: white;
 background-color: var(--thirdcolor-gray);
}

#tab-delivery:checked ~ .nav-tabs label[for="tab-delivery"],
#tab-returns:checked ~ .nav-tabs label[for="tab-returns"],
#tab-delivery:hover ~ .nav-tabs label[for="tab-delivery"],
#tab-returns:hover ~ .nav-tabs label[for="tab-returns"] {
 color: white;
 background-color: var(--secondcolor-red);
}