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

  /* latin-ext */
  @font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* latin-ext */
  @font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
  font-display: swap;
	font-stretch: 100%;
	src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIGxA.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
  font-display: swap;
	font-stretch: 100%;
	src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }



html,
body {
  height: 100%;
  margin: 0;
  font-family: 'Raleway';
 background-color: white;
	line-height:1.5;
	font-display: swap;
}


h1 {
  font-size: clamp(15px, 4vw, 25px);
  font-weight: bold;
  font-family:raleway;
  margin: 2px;
  mix-blend-mode: normal;

}

h2 {
  font-size: clamp(10px, 3vw, 25px);
  margin: 2px;
}

h3 {
  font: 15px raleway;
  margin:0px;
  color: rgb(181, 14, 14);
  position: absolute;

}

.pad-10 {
  padding: 10px;
}

.w3-modal
{
z-index: 3;
display: none;
padding-top: 100px;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}

.w3-modal-content
{
margin: auto;
background-color: #FFF;
position: relative;
padding: 0;
outline: 0;
width: 600px;
}

.gradient-hover-effect:hover,
.gradient-hover-effect:focus {
  background-color: #e91e63;
  transition: background-color 1s;
  color: #fff;
}



/* GRADIENTS */
.gradient-blue {
  background: linear-gradient(
    to top,
    hsla(186, 33%, 94%, 1) 0%,
    hsla(216, 41%, 79%, 1) 100%
  );
}

.gradient-darkblue{
  baCKGROUND:linear-gradient(to right, #00416a, #e4e5e6);
}

.gradient-beige {
  background: linear-gradient(to bottom, #fdfcfb 0%, #e2d1c3 100%);
}

.gradient-gray {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.gradient-pink {
  background: linear-gradient(to bottom, #fdfcfb 0%, #f7e3e3 100%);
}


.gradient-jfm {
  background: linear-gradient(
    180deg,
    rgba(251, 251, 251, 1) 1%,
    rgba(249, 249, 249, 1) 2%,
    rgba(244, 244, 245, 1) 3%,
    rgba(237, 238, 240, 1) 4%,
    rgba(230, 231, 234, 1) 5%,
    rgba(223, 225, 228, 1) 6%,
    rgba(216, 219, 222, 1) 7%,
    rgba(207, 211, 215, 1) 8%,
    rgba(172, 175, 179, 1) 9%,
    rgba(252, 253, 255, 1) 30%
  );
}

.gradient-box {
  background: #e3dad2;
  box-shadow: inset 0 0 20vmin 0 #bfaf90;
}



.header-container {
  height:75px;
 
}

.header-logo {
  padding-top: 5px;
  width: 100%;
  height:100%;
  display: grid;
  grid-template-columns: 1fr 5fr ;
  grid-template-rows: 1fr 5fr ;
  gap: 5px ;
  grid-template-areas:
    "header-logo-image header-jewelsforme"
    "header-logo-image header-slogan";
  color: white;
}

.header-logo-image {
  grid-area: header-logo-image;
}
.header-jewelsforme {
  grid-area: header-jewelsforme;
  font-size: 1.7rem;
  font-family: 'Open Sans';
}

.header-slogan {
  grid-area: header-slogan;
  font-size: 0.8rem;

}

.header-jewelsforme {
  font-size: 2rem;
}

.fadecycle > * {
	opacity: 0;
	position: absolute;
	width: 200px;
	line-height: 200px;
	text-align: center;
  }
  
  
  .fadecycle > *:nth-child(1) {
			animation: fadeinout 10s linear 0s infinite;
  }
  
  .fadecycle > *:nth-child(2) {
			animation: fadeinout 10s linear 3s infinite;
  }
  
  .fadecycle > *:nth-child(3) {
			animation: fadeinout 10s linear 6s infinite;
  }
  

  @keyframes fadeinout {
	0% {
	  opacity: 0;
	}
	16.6666666667%, 33.3333333333% {
	  opacity: 1;
	}
	50%, 100% {
	  opacity: 0;
	}
  }
  

.hamburger {
  position: absolute;
  text-align: right;
  width: 100%;
  z-index: 100;
  display: none;
}

.hamburger i {
  font-size: 2.5rem;
  padding: 7px;
  cursor: pointer;
}

 .hamburger-overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0, 0, 0);
  z-index: 200;
} 

.menu-gem img {
  width: 100px;
  height: auto;
}


.close-button {
  z-index: 50;
  cursor: pointer;
  color: white;
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
}

.close-button-black{
  z-index: 50;
  cursor: pointer;
  color: rgb(0, 0, 0);
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
}

.header-main {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  height: 75px;
}

.logo-container {
  display: grid;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "logo jewelsforme"
    "logo slogan";
  color: white;
  z-index: 5;
}

.logo {
  grid-area: logo;
  height: 80px;
}

.logo img{
  height: 100%;
  width: auto;
}

.jewelsforme {
  padding-top: 2px;
  grid-area: jewelsforme;
  font-size: 2.3rem;
}

@media (max-width: 400px) {
  .jewelsforme {
    padding-top: 2px;
    grid-area: jewelsforme;
    font-size:2rem;
  }
}

.slogan {
  grid-area: slogan;
  font-size: 0.7em;
  margin-top: -15px;
  margin-left: 130px;
}

.account-bar {
  padding: 10px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  gap: 10px;
  z-index: 11;
}

.account-item {
  width: 7vw;
  color: white;
  text-align: center;
  font-display: swap;
}

.account-tooltip {
  visibility: hidden;
  font-size: 0.8rem;
  text-align: center;
  color: rgb(255, 255, 157);
  line-height: 1;
  font-display: swap;
}

.material-icons {
  font-size: 1.8rem;
  font-display: swap;
}

.account-item-count {
  position: absolute;
  color: rgb(98, 0, 255);
  margin-top: 15px;
  margin-left: -15px;
  font-weight: bold;
  font-size: 0.7rem;
  background-color: rgb(255, 255, 144);
  height: 1rem;
  width: 1rem;
  text-align: center;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  z-index: 5;
}

.account-item:hover .account-tooltip {
  color: yellow;
  visibility: visible;
}

.gemselections-main {
 
  position: fixed;
  left: 10%;
  top: 10%;
  width: 80%;
  max-height: 80%;
  margin-left: -(10%);
  padding: 10px;
  padding-top: 40px;
  /* display: none; */
  gap: 0.5vw;
  z-index: 500;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  border-radius: 10px;
  overflow: auto;
  box-shadow: rgb(21, 15, 42) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background: linear-gradient(to bottom, #fdfcfb 0%, #e2d1c3 100%);
  visibility:hidden;
}

.gemselections-month {
   background-color: white;
  flex: 1 1 20%;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-radius: 1vw;
}

.gemselections-month-name {
  background-color: black;
  color: white;
  display: block;
  text-align: center;
  font-size: 0.8rem;
}
.gemselections-gems {
  display: flex;
  flex-flow: row wrap;

  justify-content: space-between;
  text-align: center;
}
.gemselections-gem {
  flex: 1 1 20%;
  font-size: 0.5rem;
}
.gemselections-gem img {
  width: clamp(20px, 10vw, 60px);
  height: auto;
}

.whatsmybstone {

  display: flex;
  flex-flow: row wrap;
  align-items: space-around;
 

}

.gem-icon-caption {
  display: block;
  color: #fff;
  mix-blend-mode: difference;
  font-size: 0.6rem;
  text-align: center;
  font-family: 'Open Sans';
}


.account-item-count:hover .account-tooltip {
  color: rgb(255, 0, 166);
  visibility: visible;
}

.google-icon-text {
  font-size: 0.6rem;
}

.w3-dropdown-content {
  display: flex;
  flex-flow: row wrap;
  cursor: auto;
  color: #000;
  position: absolute;
   margin-top: 20px;
  width:100%;
visibility: hidden;

}

.collapsible {
  cursor: pointer;
}


.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


.w3-dropdown-content a {
  flex: 1 1 10%;
}

.w3-dropdown-click,
.w3-dropdown-hover {
  display: flex;
  flex-flow: row wrap;
  cursor: pointer;
  padding:5px;
}

.w3-dropdown-hover:hover .w3-dropdown-content {
  visibility: visible;
  transition-delay: 0.2s;
}

.account-hover {
  height: 50px;
}

.account-hover:hover .account-menu-dropdown {
  visibility: visible;
  cursor: pointer;
}

.account-hover-click,
.account-dropdown-hover {
  display: flex;
  flex-flow: row wrap;
  cursor: pointer;
}

.account-menu-dropdown {
  color: #000;
  background-color: rgb(255, 255, 255);
  display: block;
  width: 100px;
  margin-top: -20px;
  visibility: hidden;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}



.account-menu-dropdown ul {
  list-style-type: none;
  z-index: 50;
  width: 100%;
  padding-inline-start: 5px;
}

.account-menu-dropdown li {
  padding: 3px;
  text-align: left;
}

.account-menu-dropdown li:hover {
  font-weight: bold;
}

.w3-dropdown-content img {
  width: 70px;
  text-align: center;
}

.message-alert * {
  display: block;
  text-align: center;
  background: #000;
  color: #fdce9f;
}

.blink_me {
  animation: blinker 3s ease infinite;
}
@keyframes blinker {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  71% {
    opacity: 0;
  }
}

.menu-bar {
  z-index: 0;
  width:100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  background: linear-gradient(
    to top,
    rgb(241, 246, 247) 0%,
    rgb(230, 240, 255) 50%,
    rgb(241, 246, 247) 100%
  );
 height: 32px;
 font-size: .9rem;
}

.menu-item {
  z-index: 10;
  padding: 5px;
  font-size: 0.8rem;
  color: #000;
  text-align: center;
  letter-spacing: 0rem;
  overflow:hidden;

}

.menu-box {
  display: block;
  border-radius: 10px;
  margin: 2px;
  min-height: 80px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.menu-box-title {
  display: inline-block;
  font-size: 1.1rem;
  text-align: left;
  padding: 7px;
  white-space: nowrap;

}

.home-menu-main {
 display: flex;
 flex-flow: column wrap;
 justify-content: space-around;
 margin: auto;
}

.home-menu-month{
  background: white;
box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
overflow:hidden;
padding:3px;
font-family: open sans;

}

.home-menu-month-name{
  color:rgb(0, 0, 0);
  text-align: left;
  font-size: .7rem;
  font-style: italic;
}

.home-menu-gems{
  font-size: .8rem;
}

.home-menu-gem a{
  display:flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-items: left;
  justify-content: left;
 gap:5px;
 }

 .home-menu-gem-caption{
   text-align: left;
 }

.home-menu-gem img{
   width:15px;
}

#item img {
  width: 15vw;
  margin-top: -5vw;
  margin-bottom: -2vw;
}

#earrings .menu-box {
  height: 200px;
}

#earrings img {
  width: 14vw;
  margin-top: -2vw;
  margin-bottom: -2vw;
}

#keepsake {
  width: 160px;
  height: 120px;
}

.cover {
  background-color: black;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.submenu-link {
  width: 150px;
}

.pear-left {
  transform: translate(25px) rotate(-20deg);
}

.pear-right {
  transform: translate(-25px) rotate(20deg);
}

.footer {
  display: flex;
  flex-flow: row wrap;
}


.footer-cards {
  padding: 2vw;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
}

footer {


  background-color: #b3b6c1;
  color: white;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  padding: 20px;
}

.emblem-bar {
  padding: 2vw;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
}

.emblem-jvc {
  border-radius: 10px;
  overflow: hidden;
}

.emblem-bbb{
  width:280px;
  height:80px;
}

.footer-text-links {

  display: flex;
  flex-flow: row wrap;
  align-content: space-evenly;
   width: 100%;

 }

.footer-menu-section {
  flex: 1 1 20%;
  flex-flow: column wrap;
  list-style-type: none;
  font-size: 0.9rem;
  
}

.footer-menu-links {
   padding:3px;
  font-size: 0.9rem;
  margin-left: 1px;
}

.footer-bottom-links {
  text-align: center;
  width: 100%;
}

.searchbox {
  background-color: white;
  border: 2px solid;
  position: absolute;
  top: 0%;
  left: 50%;
  width: 300px; /* adjust as per your needs */
  height: 100px; /* adjust as per your needs */
  margin-left: -200px; /* negative half of width above */
  margin-top: 100px;
}

.searchbar {
  position: relative;
  text-align: center;
  z-index: 50;
  margin-bottom: 10px;
}

.searchbar input {
  width: 95%;
  font-size: 1rem;
  padding: 5px;
  margin: 10px;
}

@media (max-width: 650px) {
  .account-bar,
  .menu-bar {
    display: none;
  }
  .hamburger {
    display: block;
  }
}

.bigsearchbox{

  border:2px solid gray;
  width:60%;
  margin: auto;

}

.searchbox-header{
  height:25px;
  baCKGROUND:linear-gradient(to right, #00416a, #e4e5e6);
  padding:10px;
  color:white;
}

.searchbox-main{
  text-align: center;
margin:auto;
  height:100px;
}

.searchbox-main input{
 
    width: 80%;
    margin:auto;
    margin-top:20px;
    height: 50px;
    border: 1px solid gray;
    outline: 0;
    color: rgb(60, 66, 87);
    background-color: rgb(255, 255, 255);
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px,
      rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(60 66 87 / 16%) 0px 0px 0px 1px,
      rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px,
      rgb(0 0 0 / 0%) 0px 0px 0px 0px;
    border-radius: 4px;
    font-size: 1.1rem;
    line-height: 20px;
    font-weight: 400;
    padding: 4px 8px;
    min-height: 28px;

  }


.w3-display-topright
{color:black;
  cursor: pointer;
  padding:10px;
position: absolute;
right: 0;
top: 0;
}

.account-icons img{
  width: 22px;
  height: auto;
}

.hamburger-icon img{
  width:30px;
  height: auto;
  padding:10px;
}

.close-icon img{
  width:30px;
  height: 30px;
  padding:5px;
}

.zoom-icon img{
  width:30px;
  height: 30px;
  padding:5px;
}

#mysidebar {
  display: none;
}


.burger-account-item *{
  color:white;
}

.burger-account-item ul{
list-style-type: none;
padding:0;
}



#mysidebar {
  display: none;
  background-color: #000000;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 10000;
  font-size: 1.4rem;
  color: #ffffff;
}

.burger-header {
  font-size: 1.5rem;
  padding: 10px;
}

.burger-dropdown-content {
  display: flex;
  flex-flow: column nowrap;
   gap: 0px;
  cursor: auto;
}
.burger-menu-item {
  z-index: 10;
  color: #ffffff;
  flex: auto;
  border-bottom: 1px solid white;
}
.burger-menu-box {
  background-color: white;
  width: 100%;
   color: black;
   display: flex;
   gap:015px;
   align-items: center;
   border-bottom: 1px solid black;
   height:100px;
}


.burger-menu-box-title{
    font-size: 1.2rem;
}

.burger-menu-box img{
  width:100px;
  height: auto;
  margin-top: -2vw;
  margin-bottom: -2vw;
}

.burger-account-bar{
display:flex;
flex-flow:column nowrap;
font-size:1.2rem;
padding:30px;
}

.burger-account-item{
  gap:10px;
  flex:auto;
  display:flex;
flex-flow:row nowrap;
height:50px;
color:white;
}

#burger-keepsake{
  font-size: 1rem;
padding:10px;
}

#burger-keepsake img{
width:50px;
height: auto;
}

.burger-pear-left{
  transform: translate(20px) rotate(-20deg);
}

.burger-pear-right{
  transform: translate(-20px) rotate(20deg);
}

.w3-animate-left {
  position: relative;
  animation: animateleft 0.4s;
}

@keyframes animateleft {
  from {
    left: -300px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}


.burger-dropdown-content {

  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

.burger-dropdown-content  a{
  flex: 1 1 10%;
}


.gemselections-burger{

  display: flex;
flex-flow: column nowrap;
 justify-items: center;

  height: 500;
  max-height: 0px;
}

.burger-gemselections-month-name{
  color:black;
  background-color: #5e74cb;
}

.burger-gemselections-gem img{
  width:70px;
  height: auto;
}

.burder-gem-icon-caption{

  align-self: center;
}