@import 'variants.css';
/* INDEX 
    0.0 GLOBAL CLASSES
    1.0 NAV STYLES
    1.1 MOBILE NAV STYLES  
    1.2 SEARCH MODAL
    2.0 FOOTER STYLES
    3.0 PRODUCT CARD
    4.0 PC/BUILD CARD 
    5.0 FAQ
*/
/*------- 4.0 GLOBAL CLASSES -------*/
html{
  scroll-behavior: smooth !important;
}
body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  text-rendering: optimizeLegibility;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font-smooth:antialiased;
  -webkit-font-smoothing: antialiased;

}
.smoothed{
  font-smooth:antialiased;
  -webkit-font-smoothing: antialiased;
}

@media screen and (min-width: 30em) {
  .w-95-ns {
      width: 95%;
  }
}


/*------- 1.0 NAVS TYLES
.build_menu_wrapper{
  display: flex !important;
  background-color: var(--complementary-gray) !important;
  padding: 2rem;
  border-radius: 1.5rem;

}
.brands-navy{
  background-color: var(--complementary-gray);
}
#siteNav {
  padding: 0;

}
#siteNav li {
  list-style: none;
}
#siteNav li ul li {
  display:  inline-block;
  margin-right: .5rem;
 
}

#siteNav li ul li a{
  text-decoration: none;
  color: #fff;
  padding: .8rem;
  font-weight: 400;
 
}
.btn-primary_nav{
  background-color: var(--acent);
  border-radius: .5rem;
  padding: .65rem .875rem;
  transition: ease .2s;
  font-weight: 600 !important;
}
.btn-primary_nav:hover{
  background-color: var(--acent-light);

}
.cartBtn{
  width: 32px;
  height: 32px;
  padding: .6rem;
  border-radius: 999px;
  background-color:var(--light-gray-60);
  display: flex;
  color: rgba(255, 255, 255, 0.788) !important;
  font-size: .9rem !important;
  align-items: center;
  justify-content: center;
}
.cartBtn:hover{
  color: #fff !important;
}
.buildsDropdownWrapper{
  position: relative;
  display: inline-block;

}
.buildsDropdownWrapper:hover  .buildsDropdownContent {
  display: flex !important;
  visibility: visible !important;
}
.buildsDropdownContent{
  background-color: var(--complementary-gray);
  width: 453px;
  padding: 1.65rem 2rem;
  border-radius: 1rem;
  position: absolute;
  display: none;
  visibility: hidden;
  z-index: 9999;
  box-shadow: 0 17px 15px 3px rgba(0,0,0,0.50);
}
.servicesDropdownWrapper{
  position: relative;
  display: inline-block;
}
.servicesDropdownContent{
  background-color: var(--complementary-gray);
  width: max-content;
  padding: 1rem;
  border-radius: 1rem;
  position: absolute;
  display: none;
  visibility: hidden;
  z-index: 999;
  box-shadow: 0 17px 15px 3px rgba(0,0,0,0.50);
}
.servicesDropdownWrapper:hover  .servicesDropdownContent {
  display: block !important;
  visibility: visible !important;
}
.buildsDropdownContent h3{
  margin: 0;
  margin-bottom: .75rem;
  font-size: 1rem;
}
.buildsDropdownContent ul {
  padding: 0;
}
.buildsDropdownContent li {
  padding: 0;
  margin-bottom: .5rem;
  display: block !important;
}
.servicesDropdownContent li {
  padding: 0;
  margin-bottom: .5rem;
  display: block !important;
}
.buildsDropdownContent li a {
  font-size: .9rem;
  display: flex;
  padding: .6rem .4rem !important;
  opacity: .85 !important;
  border-radius: .5rem;
  transition: background var(--easing-duration, .2s) var(--easing, cubic-bezier(.65, 0, .35, 1));
}
.servicesDropdownContent li a {
  font-size: .9rem;
  display: flex;
  padding: .6rem .4rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-radius: .5rem;
  transition: background var(--easing-duration, .2s) var(--easing, cubic-bezier(.65, 0, .35, 1));
}
.buildsDropdownContent li a:hover{
  background-color: var(--light-gray);
}

.servicesDropdownContent li a:hover{
  background-color: var(--light-gray);
}
-------*/

#nav {
    align-content: space-around;
    display: flex;
    flex-wrap: wrap;
    height: 39px;
    width: 100%;
    padding-left: 0px;
    
  }
  #nav li{
     list-style: none;
     position: relative;
  }
  #nav li a{
    color: var(--secondary-color-70);
    text-decoration: none;
    margin: 0px 0;
    padding: .8rem;
    display: block;
  }
  #nav li a:hover{
    color: #fff;
    transition: .3s;
  } 
  #nav ul{
    background-color: var(--complementary-gray);
    text-align: left;
    padding: 1rem 0rem;
    width: 100%;
    box-shadow: 1px 1px 28px 2px rgba(0, 0, 0, .50);
    border-radius: .3rem;
    
  }
  #nav ul a{
    color: var(--secondary-color);
  }
  #nav ul li:hover{
    background-color: var(--acent);
  }
  
  /* Sub Menus*/
  #nav ul{
    display: none;
      visibility:hidden;
      position: absolute;
    top: 40px;
    z-index: 1300;
    min-width: max-content;
  }
  /* Third-level menus */
  #nav ul ul{
      top: -16px;
      left:100%;
      display: none;
    visibility:hidden;
    background-color: #fff;
  }
  #nav ul ul li:hover{
    background-color: rgba(0, 0, 0, .075);
  }
  #nav ul ul li a{
    color: #3b3b3e;
    }
  #nav ul ul li a:hover{
    color: #0E0E0E;
  
  }
  /* Fourth-level menus */
   
  #nav ul ul ul{
      top: 0px;
      left:100%;
      display: none;
      visibility:hidden;
  }
  
  #nav ul li{
      display: block;
      visibility:visible;
      margin-bottom: .5rem;
  }
  #nav li:hover > ul{
      display: block;
      visibility:visible;
  } 

 
/*------- 1.1  MOBILE NAV STYLES -------*/
.mob_nav_btn{
  background-color: transparent;
  box-shadow: none;
  outline: inherit;
  border: none;
}
.close_mob_nav{
  background-color: transparent;
  border: none;
}
.accordion-nav {
  color: var(--secondary-color);
  background-color: transparent;
  border: none;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  width: 100%;
}
.mobile-filters-showcase{
  background-color: var(--primary-color);
  z-index: 99999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  overflow: auto;
}
.panel {
  padding: 0 18px;
  background-color: rgba( 14, 14, 14, .5 );
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/*------- 2.0 FOOTER STYLES-------*/
footer p{
  color: var(--secondary-color-70);
}
footer h5{
  color: var(--secondary-color-70);
}
.f-link{
  color: var(--secondary-color-70);
  text-decoration: none;
  transition: .3s ease;
}
.f-link:hover{
  color: var(--secondary-color);
}
.f-logo img{
  filter: grayscale();
  opacity: 80%;
}
.f-logo img:hover{
  filter: none;
  opacity: 100%;
  transition:  .3s ease-in;
}
.f-made{
  color: var(--secondary-color-70);
}
/*------- 1.2 SEARCH MODAL -------*/
.search_modal_wrapper {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.search_modal_content{
  position: relative;
  margin: auto;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

.global_search_input{
    background-color: var(--complementary-gray);
    width: 100%;
    border: none;
    border-radius: 2rem;
    padding: .8rem 1rem;
    border: 1px solid transparent;
    transition: ease .2s;
    color: var(--secondary-color);
}
.global_search_input:focus{
  border: 1px solid var(--acent);
  box-shadow: -1px 0px 10px 1px ;
  -webkit-box-shadow: -1px 0px 10px 1px var(--acent30);
  -moz-box-shadow: -1px 0px 10px 1px var(--acent30);
  outline: none;
}
.globalSearch_results{
  background-color: var(--complementary-gray);
  border-radius: var(--br1);
}
.gresult_link{
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 700;
  transition: .3s ease;
}
.gresult_link:hover{
  background-color: var(--primary-color-50);
}
.gresult_link span {
  opacity: .6;
}
.search_btn{
  background-color: transparent;
  color: var(--secondary-color);
  border: transparent;
  outline: none;
  cursor: pointer;
}
.globalSearchBox_results {
  max-height: 60vh;
  overflow-y: scroll;
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/*------- 3.0 PRODUCT CARD -------*/
.product_card_container{
  min-width: 237px;
}

.proc_wrapper a{
  color: var(--secondary-color);
  text-decoration: none;
}
.product_image_card{
  background-color: var(--complementary-gray);
}
.product_card{
  background-image: linear-gradient(179deg, #212126 0%, #1D1E22 100%);
  border: 0.6px solid #41434A;
  border-radius: 8px;
  color: var(--secondary-color);
  transition: ease-in .3s;
}
.product_card:hover{
  border-color: var(--acent);
}
.comm_cardImageWrapper{
  border-bottom:.6px solid #41434A;
}
.product_sale_label{
  color: #fff;
  background-color: var(--alert);
  font-size: .75rem;
  font-weight: 600;
  border-radius: var(--br05);
  padding: .2rem .4rem;
  margin-right: .5rem;
  display: inline-block;
}
.product_readyToShip_label{
  color: #1A1A1A;
  background-color: #74F5AE;
  font-size: .75rem;
  font-weight: 600;
  border-radius: var(--br05);
  padding: .2rem .4rem;
  margin-bottom: .4rem;

  display: inline-block;
}
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-wrapper .tooltip-content{
  visibility: hidden;
  width: 223px;
  background-color: var(--light-gray);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 99;
  top: 150%;
  left: 40%;
  margin-left: -60px;
}

.tooltip-wrapper .tooltip-content::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--light-gray) transparent;
}

.tooltip-wrapper:hover .tooltip-content {
  visibility: visible;
}
/*------- 4.0 PC/BUILD CARD -------*/
.build_card{
  background-color: var(--complementary-gray);
  border-radius: var(--br05);
  position: relative;
}
.build_card a{
  color: var(--secondary-color) !important;
}
.build_card a:hover{
  text-decoration: none !important;
}
.build_card h3{
  color: var(--secondary-color);
  line-height: 1.8rem !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  
}
.build_card h3 span{
  border: 1px solid var(--light-gray);
  border-radius: var(--br05);
  padding: 3px 7px;
  margin-top: .5rem;   
}
.build_card ul{
  margin-top: 0 !important;
}
.build_card image{
  width: 100% !important;
}

.sale_price{
  border: transparent !important;
  padding-left: 0 !important;
 
}

.rtp_label{
  position: relative;
  top: .5rem;
  background-color: var(--success);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  border-radius: var(--br05);
  padding: .3rem .5rem;
  margin-bottom: .4rem;
  display: inline-block;
}
.config_pc_mask{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .2s ease-in;
  z-index: 99; 
}
.config_pc_mask:hover{
  opacity: 1;
}
.config_pc_label{
  position: absolute;
  top: 28%;
  right: 20%;
  text-align: center;
  margin: 0 auto;
  padding: 5px 15px;
  background-color: var(--acent);
  color: #fff;
  border-radius: 9999px;
  z-index: 10;

}
.pc_sale_label{
  color: #fff;
  background-color: var(--alert);
  font-size: .75rem;
  font-weight: 600;
  border-radius: var(--br05);
  padding: .2rem .4rem;
  margin-bottom: .4rem;
  display: inline-block;
}
.pc_last_label{
  color: #fff;
  background-color: #F45922;
  font-size: .75rem;
  font-weight: 600;
  border-radius: var(--br05);
  padding: .2rem .4rem;
  margin-bottom: .4rem;
  display: inline-block;
}
/*------- 5.0 FAQ -------*/
.acc_faq_item {
  background-color: var(--complementary-gray);
  color: var(--secondary-color);
  cursor: pointer;
  border: 1px solid var(--secondary-color-10);
  border-radius: var(--br05);
}
.accfaq{
  background-color: var(--complementary-gray);
  border: transparent;
  color: var(--secondary-color-70);
}
.acc_faq_item button i{
  color: var(--acent);
}
.panelfaq p {
  color:var(--secondary-color-70);
}
.zip_stripbanner{
  background-color: #844DF4;
  padding: .5rem 0;
}
.zip_link{
  color: #FFFFFF;
  text-decoration: none;
  transition: .2s ease;
}
.zip_link:hover{
  text-decoration: underline;
}
@media only screen and (max-width: 600px) {
 
   .build_card{
      border-radius: 0;
      border-bottom: 1px solid var(--light-gray-60);
  }
  .config_pc_mask:hover{
    opacity: 0;
  }
  .builds_menu_link{
    display: none !important;
  }
  .shop_menu_link{
    display: none !important;
  }
  .services_menu_link{
    display: none !important;
  }
  .custompc_cta_menu{
    display: none !important;
  }
  .search_modal_wrapper{
    padding-top: 50px;
  }
  .tooltip-wrapper .tooltip-content{
    display: none;
    
  }

}