@import "hjSite.css?20240711";

@font-face {
	font-family: 'AHJ Urbano';
	src:
		url(//content.herffjones.com/wp-content/themes/hj18/library/css/fonts/AHJUrbano-Bold.woff2)
		format('woff2'),
		url(//content.herffjones.com/wp-content/themes/hj18/library/css/fonts/AHJUrbano-Bold.woff)
		format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'AHJ Urbano Ext Cond';
	src:
		url(//content.herffjones.com/wp-content/themes/hj18/library/css/fonts/AHJUrbano-ExtraCond.woff2)
		format('woff2'),
		url(//content.herffjones.com/wp-content/themes/hj18/library/css/fonts/AHJUrbano-ExtraCond.woff)
		format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'AHJ Urbano Lt Cond';
	src:
		url(//content.herffjones.com/wp-content/themes/hj18/library/css/fonts/AHJUrbano-LightCondensed.woff2)
		format('woff2'),
		url(//content.herffjones.com/wp-content/themes/hj18/library/css/fonts/AHJUrbano-LightCondensed.woff)
		format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'AHJ Urbano';
	src:
		url(//content.herffjones.com/wp-content/themes/hj18/library/css/fonts/AHJUrbano-Light.woff2)
		format('woff2'),
		url(//content.herffjones.com/wp-content/themes/hj18/library/css/fonts/AHJUrbano-Light.woff)
		format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'AHJ Urbano';
	src:
		url(//content.herffjones.com/wp-content/themes/hj18/library/css/fonts/AHJUrbano-Regular.woff2)
		format('woff2'),
		url(//content.herffjones.com/wp-content/themes/hj18/library/css/fonts/AHJUrbano-Regular.woff)
		format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'AHJ Urbano Lt Ext Cond';
	src:
		url(//content.herffjones.com/wp-content/themes/hj18/library/css/fonts/AHJUrbano-LtExtraCond.woff2)
		format('woff2'),
		url(//content.herffjones.com/wp-content/themes/hj18/library/css/fonts/AHJUrbano-LtExtraCond.woff)
		format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans Regular'), local('OpenSans-Regular'),
		url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2)
		format('woff2')
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: local('Open Sans Bold'), local('OpenSans-Bold'),
		url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2)
		format('woff2')
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 800;
	src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
		url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN8rsOUuhp.woff2)
		format('woff2')
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	src:
		url(https://fonts.gstatic.com/s/oswald/v35/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiZQ.woff2)
		format('woff2')
}

@font-face {
	font-family: 'Bentham';
	font-style: normal;
	font-weight: 400;
	src: local('Bentham Regular'), local('Bentham-Regular'),
		url(https://fonts.gstatic.com/s/bentham/v10/VdGeAZQPEpYfmHglGWsxCQ.woff2)
		format('woff2')
}

h1 {
  font-weight: 700;
  font-size: 2em; }

h2 {
  font-weight: 700; }

h3 {
  font-weight: 700; }

h4 {
  font-weight: 700; }

p {
  font-weight: 400; }

.btn {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1em; }

.bold {
  font-weight: 700; }

nav {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  /* padding: 1em; */
  position: sticky;
  top: 0;
  background-color: #fff;
  max-width: 1440px;
  margin: 0 auto;
  z-index: 1000; }
  nav .nav-link-wrapper {
    position: absolute;
    top: 0;
    left: 100vw;
    z-index: 1000;
    height: 100vh;
    width: 90vw;
    transition: left 0.5s ease-out;
    display: none;
    flex-direction: column; }
    nav .nav-link-wrapper.open {
      left: 10vw; }
    nav .nav-link-wrapper .mobile-nav-all {
      overflow: scroll;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
    nav .nav-link-wrapper .mobile-logo {
      background-color: #000;
      padding: 1em;
      display: flex;
      align-items: center;
      justify-content: right;
      position: relative; }
      nav .nav-link-wrapper .mobile-logo .material-symbols-outlined {
        position: absolute;
        left: 1em;
        top: 1.1em;
        cursor: pointer;
        color: #fff; }
    nav .nav-link-wrapper ul.nav-links {
      background-color: #000;
      flex-direction: column;
      height: auto;
      padding: 3px; }
      nav .nav-link-wrapper ul.nav-links.bottom {
	  padding-right: 20px;
      }
      nav .nav-link-wrapper ul.nav-links.bottom li {
        padding: 0; 
        }
      nav .nav-link-wrapper ul.nav-links li {
        padding: 1em 0;
        width: 100%;
        text-align: right; }
      nav .nav-link-wrapper ul.nav-links li.std {
          border-bottom: 1px solid #333; }
          
/*     srk  nav .nav-link-wrapper ul.nav-links li.std:hover {
      	color: 005DAB !important;
      	text-decoration: underline;  	
        }   */        
          
      nav .nav-link-wrapper ul.nav-links li.std.active {
      	color: 005DAB;
      	text-decoration: underline;  	
        }     
      nav .nav-link-wrapper ul.nav-links .cart {
        background-color: #005DAB;
        color: #fff;
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 0; }
        nav .nav-link-wrapper ul.nav-links .cart .cart-btn-left {
          display: flex;
          align-items: center; }
        nav .nav-link-wrapper ul.nav-links .cart .cart-btn-right {
          font-weight: 200; }
        nav .nav-link-wrapper ul.nav-links .cart .text {
          font-family: 'Oswald', sans-serif; }
      nav .nav-link-wrapper ul.nav-links .change-schools {
        background-color: #333;
        color: #fff;
        padding: 1em !important;
        border-radius: 8px; }
        nav .nav-link-wrapper ul.nav-links .change-schools .content {
          display: flex;
          align-items: center; }
          nav .nav-link-wrapper ul.nav-links .change-schools .content .details {
            text-align: left;
            margin-left: 8px; }
            nav .nav-link-wrapper ul.nav-links .change-schools .content .details h4 {
              margin: 0; }
        nav .nav-link-wrapper ul.nav-links .change-schools .btn.change {
          background-color: transparent;
          border: 2px solid #fff;
          width: 100%;
          margin-top: 16px; }
      nav .nav-link-wrapper ul.nav-links a {
        color: #fff; }
  nav .logo {
    max-width: 	250px;
    display: block; 
    padding-bottom: 15px;
    padding-top: 5px;
    padding-left: 20px;
    width: 80%; }
  nav .school-logo {
    max-width: 40px;
    border-radius: 8px; }
  nav .school-name {
    flex-grow: 1;
    margin: auto 0.5em; }
  nav .nav-links {
    font-size: 1.2em;
    display: flex;
    align-items: center;
    margin-bottom: 3px; }
    nav .nav-links li {
      list-style: none;
      padding-left: 1.5em;
      text-align: center;
      min-width: auto; }
    nav .nav-links .cart {
      color: #fff;
      padding: 0.75em 1em;
      display: flex;
      align-items: center;
      border-radius: 5px;
      transition: opacity 0.25s ease-in-out;
      width: max-content; }
      nav .nav-links .cart .material-icons {
        margin-right: 0.5em; }
      nav .nav-links .cart:hover {
        opacity: 0.9; }
  nav .mobile-logo {
    display: none; }
  nav .nav-school {
  	display: flex;
  	margin-top: 0;
  }
  nav .nav-school-icon {
  	width: 40px;
  	height:40px;
  	border-radius: 8px;
  	background-color:#005DAB;
  	text-align: center;
  	vertical-align: middle;
  }
  nav .nav-school-icon-text {
  	color: #fff;
  	font-weight: bold;
  	font-size: 1.6em;
  	text-transform: uppercase;
  }
  nav #mobileCartIcon{
    width: 40px;
    height: 40px;
    padding: 0;
    margin-right:0.25em;
    position: relative;
  }
    nav #mobileCartIcon .material-icons{
      line-height:40px;
    }
    nav #mobileCartIcon .cartAsterisk {
		position:absolute;
		color:#ff0000;
		top:12px;
		left:16px;
		font-size:20px;
		font-weight:bold;
	}

footer {
  background-color: #000;
  color: #fff; 
  max-width: 100%;
  /* padding-bottom: 60px */}
  footer .content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em; }
    footer .content-container .logo {
      max-width: 160px;
      display: block; }
    footer .content-container a {
      color: #fff; }
    footer .content-container .footer-nav {
	      /* text-align: center;
	      display: flex; */
      flex-direction: column;
      width: 100%;
      padding: 1em 0; }
      footer .content-container .footer-nav a {
        padding: 0.5em;
        border-bottom: 1px solid #333; }
        footer .content-container .footer-nav a:last-child {
          border-bottom: 0; }
    footer .content-container .social {
      margin: 1em; }
      footer .content-container .social img {
        width: 40px;
        margin: 0.25em; }
    footer .content-container .dark-bg {
      color: #fff;
      border: 2px solid #fff;
      background-color: transparent;
      min-width: none; }
    footer .content-container .footer-extras {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0.5em; }
      footer .content-container .footer-extras .contact {
        padding: 0.25em 0;
        text-align: center; }
      footer .content-container .footer-extras .row {
        padding: 1em 0 0.5em 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 0.25em; }
        footer .content-container .footer-extras .row .btn {
          white-space: nowrap; }

.search-results {
  position: absolute;
  top: 90px;
  left: 0;
  max-height: 190px;
  overflow-y: auto;
  width: calc(100% + 93px);
  background-color: #fff;
  display: none;
  border-radius: 2px;
  border: 1px solid #BEC0C0; }
  .search-results li {
    list-style: none;
    padding: 0em 1em; }
    .search-results li:hover {
      background-color: #E6E6E6; }
    .search-results li a {
      display: flex;
      justify-content: space-between;
      padding: 1.5em 0;
      border-bottom: 1px solid #E6E6E6; }
  .search-results.show {
    display: initial; }

.start-checkout.btn {
  position: fixed;
  bottom: 1em;
  left: 50%;
  width: 90%;
  display: none;
  justify-content: center;
  align-items: center;
  max-width: 850;
  transform: translate(-50%, 0); }
  .start-checkout.btn .before-text {
    margin-right: 0.5em; }
  .start-checkout.btn .after-text {
    margin-left: 0.5em; }
  .start-checkout.btn .item-count {
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translate(0%, -50%); }
    .start-checkout.btn .item-count.next {
      font-weight: 300;
      font-family: 'Oswald', sans-serif; }
  .start-checkout.btn.active {
    display: flex; }
  .start-checkout.btn.anchored {
    position: initial;
    bottom: 0;
    left: 50%;
    width: 100%;
    margin-left: 0;
    transform: none; }

.btn {
  padding: 0.8em 1em;
  text-decoration: none;
  background-color: #005DAB;
  color: #fff;
  border: none;
  cursor: pointer;
  line-height: 1em;
  text-transform: uppercase;
  transition: opacity 0.25s ease-in-out;
  text-align: center;
  display: inline-block;
  border-radius: 4px; }
  .btn:hover {
  	color: #fff;
	background-color: #005DAB;
	opacity: 0.8; }
  .btn:active {
  	color: #fff;
	background-color: #005DAB;
	opacity: 0.5; }
  .btn:focus {
  	color: #fff;
	background-color: #005DAB;
	opacity: 0.8; }
  .btn.btn-light {
    background-color: #fff;
    color: #000;
    transition: background-color 0.25s ease-in-out; }
    .btn.btn-light:hover {
      background-color: #F7F9F9; }
  .btn.btn-login {
    background-color: #000;
    color: #fff !important;
    transition: background-color 0.25s ease-in-out; }
    .btn.btn-login:hover {
      background-color: #ccc; 
	  color: #000 !important;
      }

a.tab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #F2F2F2;
  font-weight: 700;
  border-radius: 5px;
  padding: 0.75em 1.25em;
  width: max-content;
  margin-right: 10px;
  transition: background-color 0.25s ease-in;
  white-space: nowrap; }
  a.tab:hover {
    background-color: #E6E6E6; }
  a.tab.active {
    background-color: #000;
    color: #fff;
    transition: opacity 0.25s ease-in; }
    a.tab.active:hover {
      opacity: 0.85; }

.tab-menu-wrapper {
  overflow: auto;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  scroll-behavior: smooth; }
  .tab-menu-wrapper::-webkit-scrollbar {
    display: none; }

.tab-menu {
  display: flex;
  margin: 0.5em 0 1em 0;
  position: relative; 
  padding-left: 15px}
  .tab-menu .more-indicator {
    position: sticky;
    top: 0;
    right: -1em;
    display: flex;
    height: 50px;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    cursor: pointer; }
    .tab-menu .more-indicator span {
      font-size: 1em;
      opacity: 1;
      transition: opacity 0.5s ease-out; }
      .tab-menu .more-indicator span.hidden {
        opacity: 0; }
    .tab-menu .back-indicator {
    position: sticky;
    top: 0;
    right: 98%;
    display: flex;
    height: 50px;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    cursor: pointer; }
    .tab-menu .back-indicator span {
      font-size: 1em;
      opacity: 1;
      transition: opacity 0.5s ease-out; }
      .tab-menu .back-indicator span.hidden {
        opacity: 0; }

.sub-tab-menu {
  display: flex;
  margin: 1em 0 0.5em 0; }
	.sub-tab-menu .more-indicator {
	    position: sticky;
	    top: 0;
	    right: -1em;
	    display: flex;
	    height: 44px;
	    background-color: #fff;
	    justify-content: center;
	    align-items: center;
	    padding: 0.5em;
	    cursor: pointer; }
	    .sub-tab-menu .more-indicator span {
	      font-size: 1em;
	      opacity: 1;
	      transition: opacity 0.5s ease-out; }
	      .sub-tab-menu .more-indicator span.hidden {
	        opacity: 0; }
	.sub-tab-menu .back-indicator {
	    position: sticky;
	    top: 0;
	    right: 98%;
	    display: flex;
	    height: 44px;
	    background-color: #fff;
	    justify-content: center;
	    align-items: center;
	    padding: 0.5em;
	    cursor: pointer; }
	    .sub-tab-menu .back-indicator span {
	      font-size: 1em;
	      opacity: 1;
	      transition: opacity 0.5s ease-out; }
	      .sub-tab-menu .back-indicator span.hidden {
	        opacity: 0; }
a.sub-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  font-weight: 700;
  border-radius: 8px;
  padding: 0.35em 0.75em;
  width: max-content;
  margin-right: 10px;
  transition: background-color 0.25s ease-in-out;
  white-space: nowrap;
  border: 1px solid #000;
  font-size: 0.9em; }
  a.sub-tab:hover {
    background-color: #E6E6E6; }
  a.sub-tab.active {
    background-color: #000;
    color: #fff;
    transition: opacity 0.25s ease-in-out; }
    a.sub-tab.active:hover {
      opacity: 0.85; }

.category-menu-wrapper .category-menu {
  display: flex;
  margin: 0.5em 0 .5em 0; }
  .category-menu-wrapper .category-menu a {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 1em;
    color: #808080;
    font-weight: 700;
    transition: color 0.25s ease-in; }
    .category-menu-wrapper .category-menu a.active {
      color: #005DAB;
      position: relative;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px; }
    .category-menu-wrapper .category-menu a:hover {
      color: #000; }
    .category-menu-wrapper .category-menu a::after {
      content: '';
      position: absolute;
      bottom: 25%;
      right: 0;
      border-right: 2px solid #E6E6E6;
      height: 50%; }
    .category-menu-wrapper .category-menu a:first-child {
      padding-left: 0;
      border-right: none; }
    .category-menu-wrapper .category-menu a:last-child::after {
      border-right: none; }

.note {
  background-color: #F7F9F9;
  padding: 1em 1.25em 1.5em 1.25em;
  border-radius: 5px;
  max-width: 500px;
  display: inline-flex;
  flex-direction: column;
  margin-bottom: 2em; }
  .note .title {
    font-weight: 700;
    display: flex;
    align-items: center; }
    .note .title span {
      color: #005DAB;
      margin-right: 0.2em; }
  .note p {
    margin-top: 0.5em;
    font-weight: 600; }
  .note.alert span {
    color: #BD2F26; }

.img-alert {
  background-color: #000;
  color: #fff;
  font-weight: 700;
  position: absolute;
  bottom: 1em;
  right: 1em;
  padding: 0.75em 0.5em;
  border-radius: 5px; }

.confirm {
  position: relative;
  margin: 3em 0; }
  .confirm p {
    padding-left: 30px; }
  .confirm:hover input ~ .checkmark {
    background-color: #F7F9F9; }
  .confirm input:checked ~ .checkmark:after {
    display: block; }
  .confirm .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 5px;
    border: 3px solid #55575A;
    box-sizing: border-box; }
    .confirm .checkmark:after {
      content: "";
      position: absolute;
      display: none; }
  .confirm .checkmark:after {
    left: 3px;
    top: 0px;
    width: 5px;
    height: 8px;
    border: solid #55575A;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }
  .confirm input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0; }

.package-product-listing {
    width: 100%;
    margin-left: 1em;
    margin-bottom: 1em;
    padding: 10px;
}
.product-listing {
  display: inline-flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  font-size: 0.9em;
  max-width: 420px;
  overflow: hidden; }
  .product-listing.package .info {
    align-items: unset; }
  .product-listing.ring .image {
    height: auto; }
    .product-listing.ring .image img {
      width: 100%; }
  .product-listing.ring .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5em; }
    .product-listing.ring .row .option {
      display: flex;
      flex-direction: column;
      padding: 0.25em;
      min-width: 0;
      align-items: center; }
      .product-listing.ring .row .option .top {
        font-weight: 700;
        padding-bottom: 4px; }
      .product-listing.ring .row .option.light-bg {
        color: #000;
        border: 2px solid #000;
        background-color: #fff; }
  .product-listing .image {
    height: 165px;
    width: 100%;
    padding: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center; }
    .product-listing .image img {
      /*
      height: 100%;
      */
       }
    .single .image img {
      height: 100%; 
      }
	.product-listing.gray-border.single.product-name.bold.btn-product-more-info {
	  cursor: pointer;
	}
  .product-listing .product-name {
    text-align: center;
    flex-grow: 1;
    padding: 0 1em 1em 1em; }
  .product-listing .info {
    display: flex;
    flex-direction: column;
    padding: 0 1em 1em 1em;
    align-items: center;
    justify-content: center; }
  .product-listing .title {
    display: inline-flex;
    align-items: center;
    line-height: 24px;
    font-weight: 700; }
    .product-listing .title .material-icons {
      margin-right: 0.2em;
      color: #005DAB;
      display: none; }
  .product-listing.package {
    min-width: 288px;
    max-height: 268px; }
    .product-listing.package .package-image {
      max-height: 182px;
      overflow: hidden;
      display: block;
      border-radius: 5px 5px 0 0;
      position: relative;
      background-color: #F2F2F2; }
      .product-listing.package .package-image .package-content-images {
        transform: rotate(-23deg) translate(5%, -20%); }
        .product-listing.package .package-image .package-content-images .row {
          margin-top: 0.5em;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-gap: 0.5em;
          padding: 0; }
        .product-listing.package .package-image .package-content-images .image {
          height: 100px;
          width: 100px;
          background-color: #fff;
          border: 1px solid #E6E6E6;
          border-radius: 8px;
          overflow: hidden; }
          .product-listing.package .package-image .package-content-images .image img {
            padding: 0;
            /*
            max-height: 200px;
            height: 100%;
            */
            width:100%; }
    .product-listing.package .title .material-icons {
      display: inline-block; }
  .product-listing.detail {
    flex-direction: row; }
  .product-listing .row {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5em; }
    .product-listing .row .column {
      display: flex;
      flex-direction: column; }
    .product-listing .row .package-content .items {
      display: flex;
      align-items: center;
      padding: 0.1em 0.5em 0.2em 0.1em;
      background-color: #E6E6E6;
      border-radius: 5px;
      line-height: 24px;
      border: none;
      font-size: 1em;
      transition: background-color 0.25s ease-in-out;
      position: relative;
      cursor: pointer; }
      .product-listing .row .package-content .items .material-icons-round {
        margin-right: 0.2em;
        font-size: 1.6em; }
      .product-listing .row .package-content .items:hover {
        background-color: #E6E6E6; }
      .product-listing .row .package-content .items:focus ul {
        display: initial; }
      .product-listing .row .package-content .items ul {
        list-style: none;
        display: none;
        position: absolute;
        left: 0;
        top: 30px;
        z-index: 20;
        text-align: left;
        border: 1px solid #BEC0C0;
        padding: 0.5em 0.75em;
        background-color: #fff;
        max-width: 95px; }
  .product-listing .package-content-items {
    display: flex;
    width: 100%;
    overflow: scroll;
    max-height: 0;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    transition: max-height 0.5s ease-out; }
    .product-listing .package-content-items::-webkit-scrollbar {
      display: none; }
    .product-listing .package-content-items .item {
      margin-right: 0.5em;
      margin-top: 1em; }
      .product-listing .package-content-items .item .image {
        height: 100px;
        width: 100px;
        background-color: #fff;
        border: 1px solid #E6E6E6;
        border-radius: 8px;
        position: relative;
        overflow:hidden; }
        .product-listing .package-content-items .item .image img {
          padding: 0;
		  max-width: 100%;
		  max-height: 100%; }
        .product-listing .package-content-items .item .image .qty {
          position: absolute;
          bottom: 4px;
          right: 4px;
          background-color: #000;
          color: #fff;
          padding: 4px 6px;
          border-radius: 8px;
          font-weight: 600; }
      .product-listing .package-content-items .item .name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100px; }
    .product-listing .package-content-items.show {
      max-height: 200px; }
  .product-listing:nth-child(even).package .package-content-images {
    transform: rotate(23deg) translate(-15%, -20%); }
  .product-listing .cart-qty {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    background-color: #fff;
    padding: 0.15em 0.3em;
    border: 2px solid #005DAB;
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    color: #005DAB; }
    .product-listing .cart-qty .material-symbols-sharp {
      margin-right: 0.25em; }
  .product-listing.selected {
    border: 2px solid #005DAB; }
    .product-listing.selected .cart-qty {
      display: flex; }
  .product-listing.selected-dk-bg {
    border: 2px solid #005DAB;
    background-color: #E6E6E6; }
  .product-listing.ring {
    padding: 8px; }
    .product-listing.ring .image {
      padding: 0.5em; }
    .product-listing.ring .product-name {
      padding: 0.25em;
      flex-grow: unset; }
    .product-listing.ring .info {
      align-items: center;
      justify-content: start;
      padding: 0.25em;
      flex-grow: 1; }

.page-intro {
  padding: 0.75em 0;
  margin: 0.75em auto;
  margin-bottom: 1.5em; }
  .page-intro .content {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    max-width: 98%; }
    .page-intro .content .description {
      flex-grow: 1;
      margin-right: 1em; }
      .page-intro .content .description h1 {
        font-size: 1em;
        margin-bottom: 0.5em; }
      .page-intro .content .description p {
        font-size: 0.8em; }
    .page-intro .content .image {
      min-width: 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center; }
      .page-intro .content .image img {
        width: 100%;
        height: 100%;
        border-radius: 8px; }

.product-category {
  border: 1px solid #E6E6E6;
  border-radius: 8px;
  padding: 1em;
  margin: 1em 0;
  display: block;
  max-width: 700px; }
  .product-category .content {
    display: flex;
    align-items: center;
    width: 100%; }
    .product-category .content .description {
      flex-grow: 1; }
      .product-category .content .description h4 {
        text-transform: uppercase; }
      .product-category .content .description p {
        font-size: 0.8em; }
    .product-category .content .image {
      border: 1px solid #E6E6E6;
      width: 72px;
      height: 72px;
      border-radius: 8px;
      margin: auto 0.75em;
      overflow: hidden; 
      display: flex;
      justify-content: center;
      }
      .product-category .content .image img {
        width: 100%;
        height: auto; }
    .product-category .content .material-symbols-rounded {
      color: #808080;
      font-size: 1em; }

.change-school {
  border: 1px solid #E6E6E6;
  border-radius: 8px;
  padding: 1em;
  margin: 1em auto;
  background-color: #F2F2F2; }
  .change-school .content {
    display: flex;
    align-items: center;
    width: 100%; }
    .change-school .content .details {
      flex-grow: 1; }
      .change-school .content .details p {
        padding: 0; }
    .change-school .content .material-symbols-rounded {
      margin-right: 8px; }

.related {
  margin: 5em 0; }
  .related .grid {
    margin-top: 1em;
    display: flex;
    overflow: auto; }
    .related .grid .scroll-wrapper {
      display: flex; }
    .related .grid .product-listing {
      max-width: 200px;
      min-width: 200px;
      margin-right: 1em;
      margin-bottom: 1em;
      max-height: 130px;
      flex-grow: unset; }
      .related .grid .product-listing.single {
        flex-direction: row;
        background-color: #F1F1F1;
        padding: 0.5em;
        min-width: 180px;
        height: fit-content; }
        .related .grid .product-listing.single .image {
          padding: 0;
          justify-content: start;
          margin-right: 0.5em; }
          .related .grid .product-listing.single .image img {
            height: 60px; }
        .related .grid .product-listing.single .info {
          justify-content: center; }
      .related .grid .product-listing.package .image {
        max-height: 65px;
        width: auto; }
        .related .grid .product-listing.package .image .package-images {
          transform: scale(0.5) rotate(-30deg) translate(-94px, 10px);
          margin-top: -10em;
          margin-left: -2em; }
      .related .grid .product-listing.package .info {
        padding: 0.5em; }

.form {
  flex-direction: column; }
  .form .qty {
    width: fit-content; }
    .form .qty .select-selected {
      border-radius: 8px;
      width: min-content;
      padding-right: 36px; }
    .form .qty .select-items {
      width: min-content;
      border-radius: 2px; }
      .form .qty .select-items div {
        padding-right: 36px; }
  .form label {
    display: block;
    padding: 0.5em 0 0.5em 0;
    font-size: 0.8em; }
  .form input {
    padding: 1em 1em;
    min-width: 100%;
    border: 1px solid #BEC0C0;
    outline: none; }
    .form input:focus {
      border: 2px solid #BEC0C0; }
    .form input::placeholder {
      font-size: 1.1em;
      color: #868686; }
  .form select {
    display: inline;
    padding: 1em 1em;
    min-width: 100%;
    border-radius: 0;
    border: 1px solid #BEC0C0;
    outline: none; }
  .form .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.75em; }

.jewelry-builder-wrapper .column-2-l {
  position: sticky;
  top: 76.5px;
  z-index: 1; }

.jewelry-builder {
  background-color: #fff;
  position: sticky;
  top: 76px;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid #E6E6E6;
  margin-bottom: 1.5em; }
  .jewelry-builder .builder-window {
    border: 1px solid #E6E6E6;
    border-radius: 8px; }
    .jewelry-builder .builder-window .image {
      width: 100%;
      padding: 0.5em;
      display: flex;
      justify-content: center;
      align-items: center;
      height: auto;
      max-width: 450px;
      margin: auto; }
      .jewelry-builder .builder-window .image img {
        
        height: fit-content; }
  .jewelry-builder .builder-nav {
    padding: 0.5em 0;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .jewelry-builder .builder-nav .back {
      border: 1px solid #E6E6E6;
      background-color: #fff;
      color: #000;
      text-transform: capitalize;
      padding: 0.35em 0.5em;
      min-width: auto;
      font-size: 0.9em;
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: 700;
      display: inline-flex;
      justify-content: center;
      align-items: center; }
      .jewelry-builder .builder-nav .back .before-text {
        margin-right: 0.25em; }
    .jewelry-builder .builder-nav .toggle {
      background-color: #E6E6E6;
      display: inline-flex;
      border-radius: 4px;
      justify-content: center;
      align-items: center;
      padding: 0.25em; }
      .jewelry-builder .builder-nav .toggle .btn {
        background-color: transparent;
        color: #000;
        width: auto;
        font-size: 0.9em; }
        .jewelry-builder .builder-nav .toggle .btn.selected {
          background-color: #fff; }
    .jewelry-builder .builder-nav .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px; }
      .jewelry-builder .builder-nav .switch input {
        opacity: 0;
        width: 0;
        height: 0; }
    .jewelry-builder .builder-nav .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #E6E6E6;
      -webkit-transition: .4s;
      transition: .4s; }
      .jewelry-builder .builder-nav .slider:before {
        position: absolute;
        content: "Test";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s; }
    .jewelry-builder .builder-nav input:checked + .slider {
      background-color: #E6E6E6; }
    .jewelry-builder .builder-nav input:focus + .slider {
      box-shadow: 0 0 1px #E6E6E6; }
    .jewelry-builder .builder-nav input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px); }

.progress-bar.column-3 {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr; }

.progress-bar.column-6 {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr); }

.progress-bar .step {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em;
  font-size: 0.75em;
  color: #666666;
  border-bottom: 4px solid #E6E6E6; }
  .progress-bar .step.active {
    color: #005DAB;
    font-weight: 700; }
  .progress-bar .step.on-complete {
    border-bottom: 4px solid #005DAB; }

.order-tile {
  display: inline-block;
  padding: 2em 1.5em;
  box-sizing: border-box;
  flex-grow: 1; }
  .order-tile hr {
    margin: 1em 0; }
  .order-tile .item-info {
    display: flex;
    justify-content: space-between;
    padding: 0 0.5em; }
    .order-tile .item-info.single .package-count {
      display: none; }
    .order-tile .item-info .item {
      display: flex; }
      .order-tile .item-info .item .image {
        padding: 0.2em;
        background-color: #F2F2F2;
        width: 65px;
        height: 65px; }
        .order-tile .item-info .item .image img {
          max-height: 100%; }
      .order-tile .item-info .item .item-text {
        padding: 0.5em 1em; }
        .order-tile .item-info .item .item-text .name {
          display: block; }
  .order-tile .status {
    margin-top: 1.5em; }
    .order-tile .status .status-text {
      font-size: 0.8em;
      color: #808080;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      padding-top: 1em;
      text-align: center; }
    .order-tile .status .bar {
      width: 100%;
      position: relative;
      height: 20px;
      overflow: hidden;
      background-color: #E6E6E6;
      border-radius: 10px; }
      .order-tile .status .bar .progress-bar {
        width: 100%;
        position: absolute;
        height: 20px;
        background-color: #000;
        border-radius: 10px; }
    .order-tile .status.processing .status-1 {
      color: #000;
      font-weight: 700; }
    .order-tile .status.processing .progress-bar {
      right: 90%; }
    .order-tile .status.preparing .status-2 {
      color: #000;
      font-weight: 700; }
    .order-tile .status.preparing .progress-bar {
      right: 58%; }
    .order-tile .status.shipped .status-3 {
      color: #000;
      font-weight: 700; }
    .order-tile .status.shipped .progress-bar {
      right: 28%; }
    .order-tile .status.delivered .status-4 {
      color: #000;
      font-weight: 700; }
    .order-tile .status.delivered .progress-bar {
      right: 0; }
  .order-tile .tracking {
    margin-top: 1.5em; }
    .order-tile .tracking .shipping-with {
      font-size: 1.3em;
      font-weight: 700;
      padding-bottom: 0.75em; }
    .order-tile .tracking .tracking-number {
      font-weight: 400; }
      .order-tile .tracking .tracking-number a {
        font-weight: 600;
        text-decoration: underline; }

.cart-items {
  padding: 1em 0; }
  .cart-items .row {
    display: flex;
    padding: 1em;
    margin-bottom: 1em;
    justify-content: space-between;
    align-items: center; }
    .cart-items .row.with-button {
      justify-content: center;
      padding: 0; }
      .cart-items .row.with-button .btn {
        width: 100%; }
    .cart-items .row .item {
      display: flex; }
      .cart-items .row .item .image {
        width: 60px;
        display: flex;
        align-items: center;
        justify-content: center; }
        .cart-items .row .item .image img {
        max-height: 60px;
    	max-width: 60px; }
      .cart-items .row .item .info {
        padding: 0 0.5em; }
    .cart-items .row .item-action {
      display: flex; }

.order-cost {
  font-size: 1.2em;
  margin-bottom: 2em; }
  .order-cost hr {
    border: 1px solid #f0f0f0;
    margin: 0.5em 0 0.5em 0; }
  .order-cost .row {
    width: 100%;
    display: flex;
    justify-content: space-between; }
    .order-cost .row .cost {
      font-weight: 600; }

.side-bar .btn {
  position: relative; }
  .side-bar .btn .total {
    position: absolute;
    display: block;
    top: 33%;
    right: 1.5em; }

a.action {
  color: #000;
  border-radius: 2px;
  margin-left: 0.5em;
  height: 35px;
  width: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.25s ease-in-out; }
  a.action .material-icons {
    padding-bottom: 2px; }
  a.action:hover {
    opacity: 0.8; }

.ceremony-info h2, .ceremony-info .grad-date, .ceremony-info .location {
  padding-bottom: 1em; }

.ceremony-info .grad-date, .ceremony-info .location {
  display: flex;
  align-items: center; }
  .ceremony-info .grad-date .material-icons, .ceremony-info .location .material-icons {
    margin-right: 1em; }

.confirmation-info {
  display: flex;
  width: 100%;
  justify-content: space-between;
  max-width: 500px;
  padding: 1em 0; }
  .confirmation-info h2, .confirmation-info h3 {
    margin-bottom: 0.5em; }
  .confirmation-info .address span {
    display: block; }
    .confirmation-info .address span.city, .confirmation-info .address span.state, .confirmation-info .address span.zip {
      display: initial; }

#announcement-preview .preview {
  background-color: #F7F9F9;
  margin: 2em 0;
  padding: 3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 500px; }

#announcement-preview .side-bar .note {
  margin-top: 2em; }

#announcement-preview .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 500px; }
  #announcement-preview .row.with-button {
    justify-content: center;
    margin-bottom: 2em; }
  #announcement-preview .row .btn {
    width: 100%; }

.enter-info .form {
  max-width: 500px;
  display: flex; }

.student-information .form, #enter-billing-info .form, .shipping-information .form {
  background-color: #fff;
  padding: 1.25em 0; }
  .student-information .form .btn, #enter-billing-info .form .btn, .shipping-information .form .btn {
    margin-top: 1em; }
  .student-information .form p, #enter-billing-info .form p, .shipping-information .form p {
    font-size: 0.9em;
    padding-top: 0.5em; }

.student-information .confirmation-info, #enter-billing-info .confirmation-info, .shipping-information .confirmation-info {
  margin-top: 2.25em; }

.student-information h4, #enter-billing-info h4, .shipping-information h4 {
  margin-top: 1em; }

.student-information .column-2-r .btn, #enter-billing-info .column-2-r .btn, .shipping-information .column-2-r .btn {
  margin-top: 2em; }

.student-information .column-2-r h3, #enter-billing-info .column-2-r h3, .shipping-information .column-2-r h3 {
  padding: 1.25em 0; }

.student-information .column-2-r h4, #enter-billing-info .column-2-r h4, .shipping-information .column-2-r h4 {
  margin-bottom: 1em; }

.student-information .column-2-r label.confirm, #enter-billing-info .column-2-r label.confirm, .shipping-information .column-2-r label.confirm {
  margin-top: 1.25em;
  margin-bottom: 1.5em; }

.student-information .column-2-r .row, #enter-billing-info .column-2-r .row, .shipping-information .column-2-r .row {
  display: flex; }

.student-information .column-2-r .shipping-method, #enter-billing-info .column-2-r .shipping-method, .shipping-information .column-2-r .shipping-method {
  padding: 1.25em 1em;
  border-radius: 5px;
  background-color: #F2F2F2;
  transition: background-color 0.25s ease-in;
  text-align: left;
  min-width: 110px;
  width: 50%;
  margin: 0 0.75em 0.75em 0;
  border: none; }
  .student-information .column-2-r .shipping-method span, #enter-billing-info .column-2-r .shipping-method span, .shipping-information .column-2-r .shipping-method span {
    display: block; }
    .student-information .column-2-r .shipping-method span.type, #enter-billing-info .column-2-r .shipping-method span.type, .shipping-information .column-2-r .shipping-method span.type {
      text-transform: uppercase;
      padding-bottom: 0.25em; }
  .student-information .column-2-r .shipping-method:hover, #enter-billing-info .column-2-r .shipping-method:hover, .shipping-information .column-2-r .shipping-method:hover {
    background-color: #E6E6E6; }
  .student-information .column-2-r .shipping-method:focus, #enter-billing-info .column-2-r .shipping-method:focus, .shipping-information .column-2-r .shipping-method:focus {
    background-color: #BDBDBD; }

.student-information .main, #enter-billing-info .main, .shipping-information .main {
  margin-top: 0; }

#ceremony-info-input .edit-announcement .form {
  max-width: 500px;
  display: flex;
  margin: 2em 0; }
  #ceremony-info-input .edit-announcement .form .row {
    justify-content: initial; }

#ceremony-info-input .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 500px; }
  #ceremony-info-input .row.with-button {
    justify-content: center;
    margin-bottom: 2em; }
  #ceremony-info-input .row .btn {
    width: 100%; }

.modal-wrapper {
  position: relative; }
  .modal-wrapper .product-modal {
    /*position: fixed;*/
    /*height: 100vh;
    width: 100vw;*/
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    /*display: none;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*width:100%;*/
    margin-top:10vh;
    align-items: flex-end;
    padding: 0.5em; 
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .modal-wrapper .product-modal.show {
      display: flex;
      justify-content: center; }
    .modal-wrapper .product-modal .package-content, .modal-wrapper .product-modal .product-content {
      overflow: scroll;
      flex-grow: 1;
      -ms-overflow-style: none;
      /* IE and Edge */
      scrollbar-width: none;
      /* Firefox */ }
      .modal-wrapper .product-modal .package-content .column-2-r, .modal-wrapper .product-modal .product-content .column-2-r {
        position: relative; }
      .modal-wrapper .product-modal .package-content::-webkit-scrollbar, .modal-wrapper .product-modal .product-content::-webkit-scrollbar {
        display: none; }
      .modal-wrapper .product-modal .package-content .info, .modal-wrapper .product-modal .product-content .info {
        font-size: 0.9em; }
        .modal-wrapper .product-modal .package-content .info ul, .modal-wrapper .product-modal .product-content .info ul {
          list-style: disc;
          margin-left: 1em; }
      .modal-wrapper .product-modal .package-content .price, .modal-wrapper .product-modal .package-content .count, .modal-wrapper .product-modal .product-content .price, .modal-wrapper .product-modal .product-content .count {
        display: block;
        margin: 0.5em 0; }
      .modal-wrapper .product-modal .package-content p.bold, .modal-wrapper .product-modal .product-content p.bold {
        margin: 0.5em 0; }
    .modal-wrapper .product-modal .product-content .images {
      height: 190px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.5em; }
      .modal-wrapper .product-modal .product-content .images img {
        max-height: 100%;
        max-width: 100%; }
    .modal-wrapper .product-modal .popup {
      background-color: #fff;
      padding: 1.5em 1.25em;
      max-width: 1100px;
      width: 100%;
      border-radius: 8px;
      max-height: 90%;
      position: relative;
      display: flex;
      flex-direction: column; }
      .modal-wrapper .product-modal .popup .product-name-mobile {
        display: none; }
      .modal-wrapper .product-modal .popup .close {
        position: absolute;
        top: 0.4em;
        right: 0.4em;
        z-index: 5; }
      .modal-wrapper .product-modal .popup .innactive {
        opacity: 0.1;
        pointer-events: none; }
      .modal-wrapper .product-modal .popup .package-items {
        padding: 1em 0; }
        .modal-wrapper .product-modal .popup .package-items .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          border: 1px solid #E6E6E6;
          border-radius: 8px; }
          .modal-wrapper .product-modal .popup .package-items .item p {
            text-align: center;
            flex-grow: 1;
            padding: 0.5em; }
          .modal-wrapper .product-modal .popup .package-items .item .image {
            height: 165px;
            width: 100%; }
      .modal-wrapper .product-modal .popup .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1em; }
      .modal-wrapper .product-modal .popup .back {
        border: 1px solid #E6E6E6;
        background-color: #fff;
        color: #000;
        text-transform: capitalize;
        padding: 0.35em 0.5em;
        width: min-content;
        font-size: 0.9em;
        font-family: 'Source Sans Pro', sans-serif;
        font-weight: 700;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.25s ease-out; }
        .modal-wrapper .product-modal .popup .back .before-text {
          margin-right: 0.25em; }
        .modal-wrapper .product-modal .popup .back:hover {
          background-color: #F7F9F9; }
      .modal-wrapper .product-modal .popup .package-image {
        max-height: 182px;
        max-width: 450px;
        margin: 0 auto;
        overflow: hidden;
        display: block;
        border-radius: 5px 5px 0 0;
        position: relative;
        background-color: #F2F2F2;
        border-radius: 8px; }
        .modal-wrapper .product-modal .popup .package-image .package-content-images {
          transform: rotate(-23deg) translate(5%, -22%); }
          .modal-wrapper .product-modal .popup .package-image .package-content-images .row {
            margin-top: 0.5em;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 0.5em;
            padding: 0; }
          .modal-wrapper .product-modal .popup .package-image .package-content-images .image {
            height: 100px;
            width: 100px;
            background-color: #fff;
            border: 1px solid #E6E6E6;
            border-radius: 8px; }
            .modal-wrapper .product-modal .popup .package-image .package-content-images .image img {
              padding: 0;
              max-height: 200px;
              height: 100%; }
      .modal-wrapper .product-modal .popup h3 {
        padding-bottom: 0.5em; }
      .modal-wrapper .product-modal .popup .stationary-note {
        position: sticky;
        bottom: 0;
        right: 1em;
        background-color: #fff;
        padding-top: 8px; }
        .modal-wrapper .product-modal .popup .stationary-note p.cart-note {
          padding: 1em 0;
          font-size: 0.9em;
          border-top: 1px solid #E6E6E6;
          margin-top: 1em; }
      .modal-wrapper .product-modal .popup .row {
        display: flex; }
        .modal-wrapper .product-modal .popup .row .grow {
          flex-grow: 1;
          margin-left: 0.5em; }
      .modal-wrapper .product-modal .popup .btn {
        display: flex;
        justify-content: center;
        align-items: center; }
        .modal-wrapper .product-modal .popup .btn .material-symbols-rounded {
          margin-left: 0.5em; }
.close {cursor: pointer;}
/* The container must be positioned relative: */
.custom-select {
  position: relative; }

.custom-select select {
  display: none;
  /*hide original SELECT element: */ }

.select-selected {
  background-color: #fff;
  border-radius: 8px; }

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 49px;
  right: 12px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #000 transparent transparent transparent; }

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #000 transparent;
  top: 7px;
  top: 42px;
  right: 12px; }

/* style the items (options), including the selected item: */
.select-items div, .select-selected {
  color: #000;
  padding: 1em;
  font-size: 0.9em;
  border: 1px solid #BEC0C0;
  cursor: pointer;
  line-height: 1em;
  border-radius: 2px; }

.select-items div {
  border: none; }

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: #fff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border: 1px solid #BEC0C0;
  border-radius: 2px;
  max-height: 130px;
  overflow: scroll; }

/* Hide the items when the select box is closed: */
.select-hide {
  display: none; }

.select-items div:hover, .same-as-selected {
  background-color: #F7F9F9; }

@media (min-width: 600px) {
  .graduation-products .grid {
    grid-template-columns: 1fr 1fr; }
  .product-listing.single .info {
    text-align: center; } 
    }

@media (min-width: 720px) {
  .landing-page-wrapper .hero .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px; }
  .graduation-products.singles .grid {
    grid-template-columns: 1fr 1fr 1fr !important; }
  .modal-wrapper .product-modal.show {
    align-items: center; }
  .modal-wrapper .product-modal .popup {
    max-width: 1100px;
    max-height: 550px;
    height: 100%; }
    .modal-wrapper .product-modal .popup .package-image {
      max-height: 500px;
      max-width: none; }
      .modal-wrapper .product-modal .popup .package-image .package-content-images {
        transform: rotate(-23deg) translate(-5%, -10%); }
        .modal-wrapper .product-modal .popup .package-image .package-content-images .image {
          width: 180px;
          height: 180px; }
    .modal-wrapper .product-modal .popup .product-name-mobile {
      display: block; }
    .modal-wrapper .product-modal .popup .product-name {
      display: none; }
    .modal-wrapper .product-modal .popup .product-content .images {
      height: 100%;
      width: 530px; }
  .modal-wrapper .product-modal .package-content, .modal-wrapper .product-modal .product-content {
    display: flex; }
    .modal-wrapper .product-modal .package-content .column-2-r, .modal-wrapper .product-modal .product-content .column-2-r {
      flex-grow: 1;
      max-height: 100%;
      overflow: scroll; }
    .modal-wrapper .product-modal .package-content .column-2-l, .modal-wrapper .product-modal .product-content .column-2-l {
      max-width: 50%;
      margin-right: 1em;
      max-height: 100%;
      display: flex;
      justify-self: center;
      align-items: center; } }

@media (min-width: 880px) {
  .jewelry.internal-wrapper.singles .grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    max-width: 1000px; } 
  .package-product-listing {
    width: 30%;}
    }

@media (min-width: 950px) {
  nav{ align-items: center;}
  nav #mobileCartIcon{ display:none}
  nav .nav-link-wrapper {
    position: unset;
    display: flex;
    height: auto;
    width: auto;
    padding-top: 5x;
    flex-direction: row;}
    nav .nav-link-wrapper .mobile-nav-all {
      flex-direction: row;
      height: 100%; }
      nav .nav-link-wrapper .mobile-nav-all .change-schools {
        display: none; }
    nav .nav-link-wrapper ul.nav-links {
      background-color: #fff;
      flex-direction: row;
      font-size: 1em;
      padding: 0; }
      nav .nav-link-wrapper ul.nav-links a {
        color: #4d4d4d;
        font-weight: 700;
        white-space: nowrap; }
        nav .nav-link-wrapper ul.nav-links a.cart {
         /*  min-width: 220px; */
          color: #fff; }
      nav .nav-link-wrapper ul.nav-links li {
        padding-right: 2em; }
        nav .nav-link-wrapper ul.nav-links li.std {
          border-bottom: none; }
          nav .nav-link-wrapper ul.nav-links li.std a {
            transition: color 0.25s ease-in; }
            nav .nav-link-wrapper ul.nav-links li.std a:hover {
              color: #005DAB;
              text-decoration: underline;
              text-decoration-color: #005DAB}
        nav .nav-link-wrapper ul.nav-links li.active a {
          color: #005DAB;
          text-decoration: underline;
          text-decoration-thickness: 1px;
          text-underline-offset: 4px; }
    nav .nav-link-wrapper .mobile-logo {
      display: none; }
  nav svg {
    display: none; }
  nav .nav-school {
  	margin-top: -1em;
  }
  .category-menu-wrapper {
    display: none; }
  .tab-menu-wrapper.content-container {
    margin-top: 1.5em; }
    .tab-menu-wrapper.content-container .more-indicator {
      display: none; }
      .tab-menu-wrapper.content-container .back-indicator {
      display: none; }
  .graduation-products .grid {
    grid-template-columns: 1fr 1fr 1fr; }
  .start-checkout.btn.active {
    max-width: 850px;
    margin: 0 auto; }
  section.cart,
  section.student-information,
  section.shipping-information {
    display: flex; }
    section.cart .column-2-l,
    section.student-information .column-2-l,
    section.shipping-information .column-2-l {
      width: 60%; }
      section.cart .column-2-l .cart-items,
      section.student-information .column-2-l .cart-items,
      section.shipping-information .column-2-l .cart-items {
        margin-right: 1em; }
      section.cart .column-2-l .enter-info .form,
      section.student-information .column-2-l .enter-info .form,
      section.shipping-information .column-2-l .enter-info .form {
        max-width: none;
        margin-right: 2em; }
    section.cart .column-2-r,
    section.student-information .column-2-r,
    section.shipping-information .column-2-r {
      flex-grow: 1; }
      section.cart .column-2-r .order-cost,
      section.student-information .column-2-r .order-cost,
      section.shipping-information .column-2-r .order-cost {
        padding: 1em;
        margin-top: 16px;
        border: 1px solid #E6E6E6;
        border-radius: 8px; }
  .jewelry-builder-wrapper {
    display: flex;
    flex-direction: row-reverse; }
    .jewelry-builder-wrapper .column-2-l {
      top: 96px;
      width: 100%;
      max-width: 600px; }
      .jewelry-builder-wrapper .column-2-l .jewelry-builder {
        top: 96px; }
    .jewelry-builder-wrapper .column-2-r {
      margin-right: 1em; }
      .jewelry-builder-wrapper .column-2-r .singles .grid {
        grid-template-columns: 1fr 1fr !important;
        max-width: 1000px; } 
  #added-to-cart-modal .buttons{
    display:flex;
    justify-content: center;
    }
  #ringSizerModal #checkoutButton{
    max-width: 50%;
  }
}

@media (min-width: 1050px) {
  .landing-page-wrapper .hero .hero-start .find-school {
    display: flex; }
    .landing-page-wrapper .hero .hero-start .find-school .column-2-l {
      max-width: 600px;
      margin-right: 1em; }
    .landing-page-wrapper .hero .hero-start .find-school p.bold {
      display: block !important; }
  .school-landing-page {
    display: flex;
    margin-top: 1.5em !important; }
    .school-landing-page .column-2-l {
      max-width: 600px;
      margin-right: 1em; }
      .school-landing-page .column-2-l .hero-image-ar {
        aspect-ratio: 3/2 !important; }
    .school-landing-page .column-2-r {
      flex-grow: 1; } }

@media (min-width: 1150px) {
  footer .content-container {
    flex-direction: row;
    justify-content: center; }
    footer .content-container .footer-nav {
      flex-direction: row;
      align-items: center;
      justify-content: center; 
      width: auto;}
      footer .content-container .footer-nav a, footer .content-container .footer-nav span.copyright-text, footer .content-container .footer-nav p {
        border-bottom: none;
        font-size: .7rem}
    footer .content-container .social {
      margin: 0;
      display: flex; }
    footer .content-container .footer-extras {
      justify-content: start; }
      footer .content-container .footer-extras .contact {
        text-align: left; } }

@media (min-width: 1300px) {
  footer .content-container .footer-nav a, footer .content-container .footer-nav span.copyright-text, footer .content-container .footer-nav p {
    font-size: .8rem;}
}
@media (min-width: 1450px) {
  footer .content-container .footer-nav a, footer .content-container .footer-nav span.copyright-text, footer .content-container .footer-nav p {
    font-size: .9rem;}
}

.landing-page-wrapper.content-container {
  min-height: calc(100vh - 296px);
    padding: 1em 1em 2em 1em; }
  .landing-page-wrapper.content-container .hero {
    display: flex;
    flex-direction: column;
    }
    .landing-page-wrapper.content-container .hero .hero-image {
      max-width: 100%;
      margin-bottom: 1.5em;
      margin-right: 0; }
      .landing-page-wrapper.content-container .hero .hero-image img {
        width: 100%; }
    .landing-page-wrapper.content-container .hero .hero-start {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex-grow: 1; }
      .landing-page-wrapper.content-container .hero .hero-start .title {
        color: #fff;
        background-color: #000;
        padding: 0.4em 0.75em;
        align-self: flex-start; }
      .landing-page-wrapper.content-container .hero .hero-start .find-school {
        position: relative; }
        .landing-page-wrapper.content-container .hero .hero-start .find-school h2 {
          margin-bottom: 16px; }
        .landing-page-wrapper.content-container .hero .hero-start .find-school p {
          margin-bottom: 16px;
          display: none; }
      .landing-page-wrapper.content-container .hero .hero-start .search {
        display: flex; }
      .landing-page-wrapper.content-container .hero .hero-start .form {
        padding: 0;
        background-color: transparent;
        display: flex;
        justify-content: center;
        flex-grow: 1;
        max-width: 684px; }
        .landing-page-wrapper.content-container .hero .hero-start .form form {
          width: 100%;
          margin-right: 0.5em;
          display: flex; }
          @media( max-width: 400px){
           .landing-page-wrapper.content-container .hero .hero-start .form form {
	           	width: 100%;
	            margin-right: 0.5em;
	          	display : inline !important;
          }
          }
          .landing-page-wrapper.content-container .hero .hero-start .form form .school-search {
            flex-grow: 1;
            margin-right: 0.5em;
            position: relative; }
            @media( max-width: 400px){
           		.landing-page-wrapper.content-container .hero .hero-start .form form .school-search {
	            flex-grow: 1;
	            margin-right: 0em;
	            position: relative;
	           }
            }
      .landing-page-wrapper.content-container .hero .hero-start .videos {
        padding: 3em 0; }
        .landing-page-wrapper.content-container .hero .hero-start .videos .video-placeholder {
          height: 250px;
          width: 100%;
          margin: 1em auto;
          background-color: #55575A; }
      
@media screen and (max-width: 950px) {    
	.landing-page-wrapper.content-container {
		min-height: calc(100vh - 296px);
    	padding: 0em 0em 0em 0em;
	}
}

.school-landing-page .hero, .other-products .hero {
  display: flex;
  flex-direction: column; }
  .school-landing-page .hero .hero-image-ar, .other-products .hero .hero-image-ar {
    max-width: 100%;
    margin-bottom: 1.5em;
    margin-right: 0;
    aspect-ratio: 3/1;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .school-landing-page .hero .hero-image-ar img, .other-products .hero .hero-image-ar img {
      width: 100%; }

.school-landing-page .column-2-r h1, .other-products .column-2-r h1 {
  font-size: 1.5em; }

.school-landing-page .column-2-r p, .other-products .column-2-r p {
  padding: 0.5em 0; }

.graduation-products, .jewelry {
  margin: 1.5em auto !important;
  scroll-behavior: smooth; }
  .graduation-products .grid, .jewelry .grid {
    display: grid;
    grid-gap: 1em; }
  .graduation-products.singles .grid, .jewelry.singles .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em; }
  .graduation-products h4, .jewelry h4 {
    padding: 1em 0 0.5em 0; }
    .graduation-products h4:first-child, .jewelry h4:first-child {
      padding-top: 0; }

#order-status {
  margin: 2.5em auto; }
  #order-status .grid {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 1.5em;
    margin: 2em auto; }
  #order-status h2, #order-status .grad-date, #order-status .location {
    padding-bottom: 1em; }
  #order-status .btn {
    margin-top: 2em; }

#product-detail .product-listing {
  width: 100%; }
  #product-detail .product-listing .image {
    max-width: 425px;
    position: relative;
    flex-grow: 1; }
  #product-detail .product-listing .info {
    padding: 0.5em 1em; }
    #product-detail .product-listing .info p {
      padding: 0.25em 0;
      font-size: 1.2em; }

#product-detail .related .grid .product-listing .image {
  width: auto; }

#product-detail .related .grid.package-contents .item {
  display: flex;
  flex-direction: column;
  align-items: center; }
  #product-detail .related .grid.package-contents .item .image {
    padding: 0.2em;
    background-color: #F2F2F2;
    width: 65px;
    height: 65px;
    position: relative; }
    #product-detail .related .grid.package-contents .item .image .item-count {
      position: absolute;
      bottom: 3px;
      right: 3px;
      background-color: #000;
      color: #fff;
      border-radius: 3px;
      padding: 0.2em 0.3em; }
    #product-detail .related .grid.package-contents .item .image img {
      max-height: 100%; }
  #product-detail .related .grid.package-contents .item .info {
    padding: 0.5em 1em;
    white-space: nowrap; }
    #product-detail .related .grid.package-contents .item .info .name {
      display: block;
      font-weight: 700;
      font-size: 0.8em; }

.cart h1 {
  font-size: 1.5em; }

#order-summary .confirmation-info a.action {
  background-color: #000; }

#order-confirmation .confirmation {
  width: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  #order-confirmation .confirmation .heading {
    display: flex;
    align-items: center;
    padding-bottom: 1em; }
    #order-confirmation .confirmation .heading h1 {
      font-family: 'Oswald', sans-serif; }
    #order-confirmation .confirmation .heading .material-icons-outlined {
      color: #005DAB;
      font-size: 2em;
      margin-right: 0.25em; }
  #order-confirmation .confirmation .order-number {
    text-transform: uppercase; }
  #order-confirmation .confirmation .confirmation-email {
    text-align: center;
    padding: 2em 0; }
    #order-confirmation .confirmation .confirmation-email .email {
      font-weight: 700; }

#order-confirmation .cart-items hr {
  margin: 1em 1em; }

#order-confirmation .grad-date, #order-confirmation .location {
  margin-left: 1.5em; }

#order-confirmation .other-products h2 {
  margin-bottom: 1em; }

#order-confirmation .other-products .grid {
  display: flex; }
  #order-confirmation .other-products .grid .product-listing {
    margin-right: 1em;
    margin-bottom: 1em;
    max-width: 350px; }
    #order-confirmation .other-products .grid .product-listing .image {
      background-color: #fff; }

#hero.track-order h1.title {
  background-color: #fff;
  color: #000;
  padding: 0; }

.select {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-bottom: 1em; }
  .select p {
    padding-left: 30px; }
  .select:hover input ~ .dot {
    background-color: #F7F9F9; }
  .select input:checked ~ .dot:after {
    display: block; }
  .select .dot {
    position: absolute;
    top: 10px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: none;
    border-radius: 50%;
    border: 3px solid #55575A;
    box-sizing: border-box; }
    .select .dot:after {
      content: "";
      position: absolute;
      display: none; }
  .select .dot:after {
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #55575A; }
  .select input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0; }

.gray-border {
  border: 1px solid #F2F2F2;
  border-radius: 8px; }
  
.gray-border:hover {
	border: 2px solid #005DAB;	
}

.black-border {
  border: 2px solid #000;
  border-radius: 8px; }

.dk-gray-border {
  border: 1px solid #E6E6E6;
  border-radius: 8px; }

.border-sm {
  border-radius: 2px; }

.border-md {
  border-radius: 5px; }

.border-lg {
  border-radius: 8px; }

* {
  margin: 0;
  /* padding: 0; */
  font-family: 'Source Sans Pro', sans-serif;
  box-sizing: border-box;
  scroll-behavior: smooth;
  }

a {
  text-decoration: none;
  color: #000; }

.gray-bg {
  background-color: #F1F1F1; }

.container {
  max-width: 1440px;
  min-height: 45rem;
  margin: auto;
  overflow: hidden; }

.content-container {
  max-width: 1440px	;
  padding: 0 1em; 
  min-height: 1rem;
  margin: 0 auto; }

.internal-wrapper {
  /* min-height: calc(100vh - 344px); */
  padding-bottom: 2em !important; }
.itemScrollLeft {
	position: absolute;
    top: 68px;
    z-index: 1001;
    height: 120px;
    background-color: #fff;
    left: 5px;
    display: none;
}
.itemScrollRight {
	position: absolute;
    top: 68px;
    z-index: 1001;
    right: 5px;
    height: 120px;
    background-color: #fff;	
    display: none;
}
.itemScrollLeftBtn {
	background-color: #005DAB !important;
	color: #fff !important;
	height: 100px;
}
.itemScrollRightBtn {
	background-color: #005DAB !important;
	color: #fff !important;
	height: 100px;
}
.error {
	color:#d60000;
}
#added-to-cart-modal .modal-body{
	text-align: center;
}
#added-to-cart-modal .title{
  font-size: 1.25rem;
}
.material-icons.green-check{
	font-size: 6em;
    color: #3ABF41;
}
#added-to-cart-modal .buttons .btn{
    width: 100%;
    margin-bottom: 0.75em;
    margin-left: 0.125em;
    margin-right: 0.125em;
    display: flex;
    justify-content: center;
    align-items: center;
}
#ringSizerModal #rightSizeContent h3{
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom:0;
}
#ringSizerModal #checkoutButton{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* SECOM REDESIGN 2024 */
.landing-link-text {
	text-align: left;
	font: normal normal normal 20px/41px AHJ Urbano;
	letter-spacing: 0px;
	opacity: 1;
	color: #707070;
	line-height: 12px;
	/* padding: 5px; */
	/* padding-left: 40px; */
}
@media (max-width: 480px ){
.search-text-style {
	text-align: left;
	vertical-align: top;
	font: normal normal 1000 30px/41px AHJ Urbano Lt Cond;
	color: #000000;
	padding: 5px;
	line-height: 25px;
}
}
@media (min-width: 481px ){
  .search-text-style {
    text-align: left;
    vertical-align: top;
    font: normal normal 1000 30px/41px AHJ Urbano Lt Cond;
    color: #000000;
    padding: 5px;
    line-height: 25px;
    padding-left: 40px;
  }
  }
.product-header-style { 
	text-align: left;
	font: normal normal bold 16px/35px AHJ Urbano;
	letter-spacing: 0.72px;
	color: #005DAB;
	text-transform: uppercase;
	opacity: 1;
	padding-left:50px;
	padding-top: 20px;
}
.product-desc-style {
	text-align: left;
	font: normal normal normal 15px/22px AHJ Urbano;
	letter-spacing: 0px;
	color: #707070;
	opacity: 1;	
    padding-left:50px;
    padding-right: 2em;
    padding-top: 0px;
}
.product-img-row-style {
	padding-bottom: 30px;
	padding-top: 15px;
	padding-left:50px;
}	
.home-search-button {
	top: 765px;
	left: 1536px;
	width: 77px;
	height: 29px;
	vertical-align: top;
	text-align: left;
	font: normal normal bold 21px/35px Source Sans 3;
	/* letter-spacing: -0.5px; */
	color: #000000;
	opacity: 1;
}
.login-button {
	/* background-color: #FFFFFF; */ /* White background */
	color: #000000; /* Black text */
	border: 2px solid #000000; /* Black border */
	padding: 5px 10px; /* Top and bottom padding 10px, left and right padding 20px */
	text-align: center;
	display: inline-block;
	font-family: AHJ Urbano;
	letter-spacing: -0.22p;
	font-size: 22px; /* Example font size */
	cursor: pointer;
	text-transform: uppercase; /* Uppercase text */
	font-weight: 700;
}
.login-button:hover {
    background-color: #F8F8F8;
    color: #005DAB  !important; 
	border: 2px solid #005DAB;
}
.search-button {
	background-color: #FFFFFF; /* White background */
	color: #000000; /* Black text */
	border: 2px solid #000000; /* Black border */
	padding: 5px 10px; /* Top and bottom padding 10px, left and right padding 20px */
	text-align: center;
	display: inline-block;
	font-family: AHJ Urbano;
	letter-spacing: -0.22p;
	font-size: 22px; /* Example font size */
	cursor: pointer;
	text-transform: uppercase; /* Uppercase text */
	height: 65px;
	font-weight: 700;
	vertical-align: bottom;
}
.search-button:hover {
    background-color: #F8F8F8;
    color: #005DAB; 
	border: 2px solid #005DAB; /* Slightly darker background on hover */
}
.blue-text {
	color: #005DAB;
}
.white-background {
	background-color: #ffffff;
}
.school-landing-name {
	text-align: left;
	font: normal normal normal 27px AHJ Urbano;
	letter-spacing: -0.04em;
	color: #000000;
}
.grey-block-landing {
	/* text-align: left; */
	font: normal normal normal 18px AHJ Urbano;
	letter-spacing: -0.04em;
	background: #F5F5F5;
	margin-left: .05rem;
	/* margin-top: 10px; */
	margin-bottom: 10px;	
	margin-right: .0rem;
}
.landing-secondary-text {
	text-align: left;
	font: normal normal normal 12px AHJ Urbano;
	letter-spacing: 0px;
	color: #707070;
}
.vertline_landing {
	border-left: 4px solid #848484;
	margin-top: 10px;
	margin-bottom: 10px;
}
.vertline_compensation {
	margin-top: 10px;
	margin-bottom: 10px;
}
.product-padding {
	padding: 2em;
}
.landing-width {
	width: 400
}
.container-hero {
	/* max-width: 1440px; */
	text-align: left;
	vertical-align: top;
	background: #F5F5F5;
	padding-bottom: 25px;	
}
.container-menu-home {
	display: flex;
	flex-direction: column;
}
.row-max-width-1440 {
	max-width: 1440px;
}
.school-year-select {
	width: 85px;
	background-color: #ffffff;
}
.school-search-input {
	max-width: 420px;
	height: 65px;
	width: 100%;
}
.center-align-contact {
	justify-content: center;
	max-width: 750px; 
	vertical-align: top;
	padding-bottom: 30px;
}
.contact-btn-width {
	height: 30px;
	padding: 5px 5px 5px 5px;
}
.find-text {
	color: #707070;
}
.hamburger-position {
	verticle-align: middle;
	padding: 20px;
}
.center-align-shop {
    justify-content: center;
    /* width: 100%; */
    /* padding-left: 0px;
    padding-right: 0px; */
    padding-bottom: 30px;
    /* margin: 0px; */
}    
.products-image-width {
	max-width: 360px;
}	

.twitter-logo-width {
	max-width: 30px;	
}


@media (min-width: 400px) {
  .form-floating {
    padding: 14px;
  }
  .school-search-input {
    max-width: 210px;
    margin-right: 15px;
  }
  .search-button {
    font-size: 15px;
    height: 64px;
    width: 85px;
    font-weight: 700;
    margin-left: 15px;
  }
 
}

@media (max-width: 480px ) {
  .school-search-input {
    max-width: 365px;
    margin-top: 12px;
    margin-left: 2px;
  }
  .search-button {
    font-size: 18px;
    height: 64px;
    width: 105px;
    font-weight: 700;
    margin-left: 10px;
  }

  #schoolSearchYear{
    margin-left: 2px;
    margin-top: 15px;
    /* position: absolute; */
    /* top: 95%; */
  }

  .container-hero {
    /* max-width: 1440px; */
    text-align: left ;
    vertical-align: top;
    background: #F5F5F5;
    padding-bottom: 67px;	
  }
}


@media screen and (min-width: 300px) and (max-width: 400px) {
  .form-floating {
    padding: 14px;
  }
  .school-search-input {
    max-width: 100%;
    margin-left: 2px;
  }
  .search-button {
    font-size: 18px;
    height: 64px;
    font-weight: 700;
    position: relative;
    top: -2px;
    left: -3px;
    width: 37%;
  }
  #schoolSearchYear {
  /* width: 100%; */
  top: 10px;
  }
}

@media (min-width: 300px) {
	footer {
  padding-bottom: 60px;}
	footer .content-container .footer-nav {
	   text-align: center;
	      display: flex; 
       }
       .img-fuild-container {
        padding: 0em 0.6em 1em 2em;
        display: flex;
        justify-content: center;
        align-items: center;
       }
       .img-adjust-container {
        padding: 0em 2em 0em 2em;
       }
       
       .text-nowrap {
       padding: 14px 20px 0px 0px
       }
    
}

/* #main-nav li{
  display: inline;
} */
.nav-link-wrapper {
  overflow: hidden;
}
.image-screen-size {
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: center;
}
@media (max-width: 480px ) {
  .image-screen-desktop {
    display: none;
  }
  .image-screen-mobile {
    width: 100%;
    display: block;
  }

  .content-container .footer-nav  .dark-bg {
    /* width: 120px; */
    margin: 5px;
    /* margin-left: 107px; */
  }

  .contact-details-row {
    display: flex;
    margin: 0px auto;
  }

}

/* For desktop */
@media (min-width: 481px) {
  .image-screen-mobile{
    display: none;
  }
  .image-screen-desktop {
    width: 100%;
    display: block;
  
  }
}

#image-width {
width: 98.5%;
}

@media (min-width: 481px ){
.col-md-6-banner {
  width: 50%;
   
}
}
.content-container .footer-nav .dark-bg {
  margin: 5px;
  border-bottom: 1px !important;
    border-style: solid !important;
    font-family: 'AHJ Urbano' !important;
    border-width: 1px;
}
.modal-container {
  min-height: 4rem !important;
}

.close-alignment {
  margin-top: -21px;
}

.school-name-alignment {
  margin-top: revert;
}