@import url('https://fonts.cdnfonts.com/css/itc-avant-garde-pro-md');

@import url('https://fonts.cdnfonts.com/css/futura-std-4');


 @import url('https://fonts.cdnfonts.com/css/my-puma');
*{
  padding:0px;
  margin:0px;
  box-sizing: border-box;
}
body{
  background-image: linear-gradient(#181818, #020202);
  
  
  
  
  
  
}
.preview{font-weight:normal}

#header-back{
  position:static;
  width:100%; 
  height:10vh;
  min-height:80px;
  top:0;
  z-index:80;
  
  background-color:#e70dd8;
}
body{margin-top:0;}/*clears it from index page*/




#upper-margin{
  width:100%;
  height:3vh;
  min-height:20px;
  background-color:#9e9e9e;
  
  color:rgb(20, 20, 20);
  display:flex;
  justify-content:center;
  align-items: center;
  font-family:sans-serif;
  font-weight:bold;
  text-transform: uppercase;
  font-size:0.8em;
  background-image:linear-gradient(270deg, 
  #787878 0%, 
  #e3e3e3 25%,
  #787878 50%,
  #ededed 75%,
  #7e7e7e 100%);
  z-index:20;
  
 
  
  
  
  
}


#upper-margin a{
  text-decoration: none;
  color:rgb(226, 226, 226);
  transition: color 1.5s;
  z-index:10;
}
#upper-margin a:hover{cursor:pointer;}

#cusService{
  background-color:rgba(0, 0, 255, 0);
  text-transform: capitalize;
  display:flex;
  justify-content: flex-end;
  height:3vh;
  align-items: center;
  position:absolute;
  right:1em;
  
}
#cusService:hover{
  cursor:pointer;
}
#cusService div{
  font-size:0.9em
  
}
#cusService img{
  height:70%;
  margin-left:1em;
}

.filter-banner-wrap{
  height:20vh;
  
  min-height:150px;
  width:100%;
  position:relative;
  
  
  
}

.category-banner{
  
  height:100%;
  width:100%;
  position:absolute;
   
  
  background-color:#121212;
  
  display:flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  column-gap:24px;
  
  
 

}

.category-banner div:nth-child(1) {
  background-color:rgba(18, 238, 18, 0);
  height:100%;
  font-family:'Roboto Condensed', sans-serif;
  font-size:3.5vw;
  white-space: nowrap;
  color:rgb(255, 255, 255);
  text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.352);
  display: flex;
  justify-content: center;
  align-items:center;
  flex-direction: column;
  margin-left:24px;
  flex-grow:1;
  z-index:10;
  text-transform:uppercase;
  

}
.category-banner div:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items:flex-start;
  flex-direction: column;
  background-color:rgba(236, 33, 26, 0);
  height:100%;
  width:50%;
  text-align: left;
  flex-grow:0.8;
  font-size:1.5vw;
  font-family:'Roboto',Cambria;
  
  color:rgb(255, 255, 255);
  z-index:10;

}
#leftBannerPic{
  position:absolute;
  left:0%;
  opacity:0.3;
  height:100%;
}
#centerBannerPic{
  position:absolute;
  height:100%;
  left:50%;
  transform:translate(-50%,0);
  opacity:0.00;
}
#rightBannerPic{
  opacity:0.5;
}




.filter{
  width:100%;
  
  height:100%;
  background-color:rgb(0, 0, 0);
  position:absolute;
  justify-content:center;
  
  display:flex;
  z-index:11;
  transform-origin: left;
  transition: transform 400ms ease-in-out;
  transform: scale(0,1);
 
  

}


.filter-on{
  
  transform: scale(1,1);
  
}
.filter-form{
  display:flex;
  column-gap:6em;
  
  justify-content:flex-start;
  background-color:rgba(128, 119, 0, 0);
}
.input-block{
  display:flex;
  align-items: center;
  justify-content: space-around;
  background-color:rgba(0, 0, 255, 0); 
}
.title{
  color:white;
  font-family:'roboto';
  font-weight:300;
  background-color:rgba(0, 0, 255, 0);
  font-size:1.2em;
  text-transform: uppercase;
}
.flex-container {
  display: flex;
  flex-direction: column;
  width:fit-content;
  height:80%;
  align-items: flex-start;
  background-color: rgba(255, 166, 0, 0);
  flex-wrap:wrap;
  justify-content:center; 
}
.checkbox-label {
  display: flex;
  align-items:center;
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
  background-color:rgba(0, 128, 0, 0);
  width:fit-content;
  margin-left:10px;
  color:white;
}
.input-block label{
  font-family:'Oswald';
  font-weight:200;
  letter-spacing: 3px;
}
.custom-checkbox {
  opacity: 0;
  position: absolute;
}
.checkmark {
  /* checkmark is the square but its pseudo element after contains tick */
  position: relative;
  height: 20px;
  width: 20px;
  border: 1px solid #acabab;
  margin-right: 10px;
  background-color:rgba(27, 215, 225, 0);
}
.custom-checkbox:checked + .checkmark:after {
  /* 'after' is used because content doesn't have physical presence to push label to the right. */
  content: '✔';
  font-size: 18px;
  color: #FF4500; /* Orange color for graffiti effect */
  position: absolute;
  top: -4px;
  left: 2px;
  background-color:rgba(0, 128, 0, 0);
}
.radio-label {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
  margin-left:10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:white;
  background-color:rgba(0, 128, 0, 0);
}
.radiomark {
  position: relative;
  height: 20px;
  width: 20px;
  border: 1px solid #acabab;
  border-radius: 8px;
  margin-right: 10px;
  background-color:rgba(0, 174, 255, 0);
}
.custom-radio {
  opacity: 0;
  position: absolute;
  
}
.custom-radio:checked + .radiomark:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FF4500;
}
#newCheckBox[disabled] +.checkmark {
  opacity:0.4;
  
}
#limCheckBox[disabled] +.checkmark {
  opacity:0.4;
  
}




#brand-block label:nth-child(1){
  font-family: 'Futura Std';
  font-style: italic;
  font-weight:bold;
  text-transform: uppercase;
  letter-spacing: normal;
  font-size:1.1em
  
}
#brand-block label:nth-child(2){
  font-family: 'ITC Avant Garde Pro Md', sans-serif;
  letter-spacing:normal;                                        
}
#brand-block label:nth-child(3){
  font-family: 'My Puma', sans-serif;
  text-transform: uppercase;
  letter-spacing: normal;
  font-size:1.0em
                                                
}
.reset-btn,.close-btn{
  background-color: #04aa6d00; /* Green */
  border: none;
  color: rgba(255, 255, 255, 0.62);
  padding:8px 16px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 1.1vw;
  border-radius:10px;
  margin:auto;
  font-family:'Oswald';
  font-weight:200;
  letter-spacing: 3px;
  user-select: none;
}

.close-btn:hover, .reset-btn:hover{
  color:white;
  cursor:pointer;
}
.reset-btn:active{
  color:rgb(0, 200, 255)
}

.close-btn:active{
  color:red;
}









#filter-bar{
  height:5vh;
  height:40px;
  display:flex;
  align-items: center;
  justify-content:flex-end;
  font-family: 'roboto';
  color:rgb(0, 0, 0);
  font-weight:bold;
  font-size:0.9em;
  
  
  margin-bottom:5px;

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
 background-color:rgb(0, 0, 0);
 padding-left:3em;
 padding-right:3em;
 border-color:rgb(126, 126, 126);
 border-left:none;
 border-right:none;
 border-style:solid;
 border-width:1px;
 transition: opacity 0.5s;
 z-index:50;
 




 
  
  
  
}
.filter-bar-when-filter-expanded{
  /*translation code forces chromes to use hardware acceleration to ensure fixed element is visible after scrolling*/
  transform: translateZ(0);
  -webkit-transform: translateZ(0);

  width:100%;
  z-index:50;
  
 
}

#filter-button{
  height:80%;
  width:120px;
  display:flex;
  align-items:center;
  opacity:0.95;
  z-index:49;
  
  
  font-size:15px;
  font-weight:lighter;
  justify-content:center;
  padding-left:1.0em;
  padding-right:1.0em;
  
  margin-left:1em;
  background-color:rgb(224, 14, 14);
 border-radius:5px;
  
  

  background-image:linear-gradient(270deg, 
  #787878, 
  #ebebeb ,
  #787878 
  );
  background-image:linear-gradient(270deg, 
  #000000, 
  #000000 ,
  #000000 
  );
  color:rgb(228, 228, 228);
  border-style:solid;
  border-width:1px;
  border-color:white;

 
  
  
 
}
#filter-button div{
  width:50px; 
  text-transform: uppercase;
  text-align: center;
  font-size:1em;
  z-index:49;
  
}
#results{
  opacity:1;
  font-size:1.5vw;
  font-weight:lighter;
  position:absolute;
  color:rgb(236, 236, 236);
  justify-self: center;
  left:50%;
  transform:translate(-50%,0);
  z-index:50;
}
#result span{
  position:relative;
  /*the div with 'filtered' in it*/
}
#result span:after{
  visibility: hidden;
  /*the tooltip bubble*/
  
}
#results span:hover:after{
  width:fit-content;
  height:fit-content;
  background-color:rgb(255, 255, 255);
  
  border-radius:2.8vh;
  border: 2px solid white;
  color:rgb(0, 0, 0);
  font-size: 0.8em;;
  font-family:'roboto';
  font-weight:bold;
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding:0.7em;
  
  bottom:100%;;;left:0;right:0;
  content:"Clear by resetting filter";
  visibility: visible;
  z-index:51;
  position:absolute;;
  text-transform: uppercase;
  font-style:italic
  
  
}
#results span:hover:before{
  /*just the pointer thing*/
  position:absolute;
  height:1.2em;
  width:1.2em;
  background-color:rgb(255, 255, 255);
  content:'';
  
  left:60%;
  top:-0.8em;;
  transform:translateX(-50%);
  transform-origin: 50% 50%;
  transform:rotate(45deg);
 
  z-index:49;
  border: 2px solid white;
  border-top:none;
  
}


#filter-button:hover{
  cursor:pointer;
  
  opacity:1;
}
#sort-button:hover{
  cursor:pointer;
}
#filter-button:active{
  border-color:red;
      
}


#filter-icon{
  height:80%;
  
  opacity:1;
  filter: invert(1);
  margin-left:1em;
}
#sort-icon{
  height:100%;
  margin-left:0.9em;
  opacity:0.7;
}

#sort-button:active{
  cursor: pointer;
  border-color:var(--c1);
  border-style:solid;
}
.pressedBtn{
  border-style:solid;
  
  
  border-width:1px;
 
 opacity:1;
 border-color:var(--c1);
 box-shadow: 0 0 10px #00b7ffb8,
              0 0 20px #00b7ff8b,
              0 0 30px #00b7ff1a;
}


.wrap{
  display:grid;
  grid-template-columns: repeat(5,minmax(150px,299px));
  row-gap: 2em;
  column-gap:2em;
  margin-top:0.5em;
  margin-left:3em;
  margin-right:3em;
  justify-items:center;
  justify-content: center;
  
  
}
.load-more-wrapper{
  margin-bottom:100px;
}
.card{
  /*w= 392, h = 558
  width:392px;
  height:558px;
  background-image:linear-gradient(90deg, 
  #787878 0%, 
  #e3e3e3 25%,
  #787878 50%,
  #ededed 75%,
  #7e7e7e 100%);*/
  width:100%; height:100%;
  background-color:rgba(255, 255, 255, 0);
  border-style:solid;
  border-color:rgb(255, 255, 255);
  border-width:1px;
  border-radius:10px;
  border-color:rgba(55, 55, 55, 0);
  
  
  
  position:relative;
  display:flex;
  flex-direction: column;
  justify-content:flex-start;
  align-items: center;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.207);;
  
}

.card p{
  display: block; width: 100%; /*flexbox immunity*/
  text-transform: capitalize;  
  font-family: 'roboto', sans-serif;
 
  font-size:1.2vw;
  color:rgba(227, 227, 227, 0.739);
  background-color:rgba(55, 55, 55, 0);
  
  
  margin-top:0.5em;
  margin-bottom:0.2em;
  margin-left:1em;
  border-radius:11px;
  
  
  
  
  
}


.card p span{
  font-weight:bold;
  color:#e0e0e0;
  border: none;
  outline: none;
  font-size:1.5vw;
  
  
}


.card .thumb{
  width:100%;
  height:100%;
  border-radius:11px;
}
.card .thumb:hover{
  border-style:solid;
  border-color:#FF4500}
.card .thumb-bkg{
  width:100%;
  height:fit-content;
  background-color:rgba(255, 255, 255, 0)
  
}
.wrap .card img:hover{opacity:0.5; cursor:pointer;}
.load-more-wrapper{
  width:100%;
  display: flex;
  justify-content: center;
  
}
.load-more-button{
  padding:1em;
  margin:1.5em;
  border-style:solid;
  border-color:black;
  font-family:'roboto';
  color:rgb(255, 255, 255);
  background-color:rgb(49, 49, 49);
  display:none;
  text-transform: uppercase;
}
.load-more-button:hover{
  border-color:var(--c1);
}





@media (orientation:portrait) and   (max-width:1200px) and (min-width:0px)
{
  
  
    /*phone & tablet*/
    #header-back{
      height:15vh;
      min-height:120px;
      background-color:rgb(255, 192, 203);
    }

    .filter-bar-when-filter-expanded{
      
      position:fixed;;
     
    }
    
    
  
  #cusService div{
    color:rgba(0, 0, 0, 0);
    /*phone & tablet*/
    
}
  .category-banner{
    /*phone & tablet*/
    flex-direction:column;
    background-color:rgba(255, 166, 0, 0);
    justify-content:flex-start;
    
    align-items:center;
    padding-top:15px;
    padding-bottom:15px;
  }
  .category-banner div:nth-child(1){
    /*phone & tablet*/
    
    font-size:calc(50px + 1vw);;
    flex-grow:0;
   height:fit-content;
   margin-bottom:0.1em;;
    background-color:rgba(255, 0, 0, 0);
    
  }
  .category-banner div:nth-child(2){
    /*phone & tablet*/
    
    
    text-align: center;
    font-size:calc(14px + 0.5vw);
    width:70%;
    flex-grow:0;
    height:fit-content;
    color:rgb(225, 225, 225);
    
  }

  #leftBannerPic, #rightBannerPic{
    /*phone & tablet*/
    display:none;
  }
  

  .wrap{
    /*phone & tablet*/
    display:grid;
    grid-template-columns: repeat(2,minmax(150px,299px));
    row-gap: 2em;
    column-gap:2em;
    margin-top:0.5em;
    margin-left:3em;
    margin-right:3em;
    justify-items:center;
    justify-content: center;
    
    
  }
  .card p{
  /*phone & tablet*/
 
  font-size:2.4vw;
  
}


.card p span{
  /*phone & tablet*/
  font-weight:bold;
  color:#e0e0e0;
  border: none;
  outline: none;
  font-size:3vw;
  
  
}
#results{
  /*phone & tablet*/
  opacity:1;
  font-size:1em;
  font-weight:lighter;
  position:absolute;
  color:rgb(236, 236, 236);
  justify-self: center;
  left:50%;
  transform:translate(-50%,0);
}

#filter-button{
  height:60%;
  /*phone & tablet*/
  position:relative;
  left:20px;
  transition:1s;
  width:100px;

  }
#filter-icon{
  /*phone & tablet*/
 opacity:1;
}
#filter-button div{
  width:50px; 
  text-transform: uppercase;
  text-align: center;
  font-size:1em;
  background-color:rgba(0, 128, 0, 0);
}

.filter{
  width:fit-content;
  height:fit-content;
  background-color:rgba(90, 90, 90, 0.916);
  
  position:fixed;
  justify-content:center;
  padding:1em;
  border-style:solid;
  border-color:white;
  border-width:1px;
  border-left:none;
  z-index:11;
  flex-direction:column;
  

}

.filter-form{
  display:flex;
  flex-direction:column;
  background-color:rgba(0, 128, 73, 0);
}
.input-block{
  display:flex;
  flex-direction:column;
  BACKGROUND-COLOR:rgba(0, 0, 255, 0);
  align-items:flex-start;
}
.input-block:nth-child(1) .title
{
  margin-top:0.5em;
}
.title{
  color:white;
  font-family:'roboto';
  font-weight:300;
  background-color:rgba(255, 68, 0, 0);
  font-size:1.1em;
  text-transform: uppercase;
  margin-bottom:0.5em;
  margin-top:1.5em;
}
.flex-container {
  display: flex;
  flex-direction: column;
  width:fit-content;
  
  align-content: flex-start;
  background-color: rgba(255, 166, 0, 0);
  flex-wrap:wrap;
  justify-content:center; 
}


.reset-btn,.close-btn{
  background-color: #04aa6d00; /* Green */
  border: none;
  color: rgba(255, 255, 255, 0.62);
  padding:8px 16px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  
  margin:auto;
  font-family:'Oswald';
  font-weight:200;
  letter-spacing: 3px;
  user-select: none;
}

.close-btn:hover, .reset-btn:hover{
  color:white;
  cursor:pointer;
}
.reset-btn:active{
  color:rgb(0, 200, 255)
}

.close-btn:active{
  color:red;
}
.close-btn{content:""}
}
@media (orientation:portrait) and (max-width:500px) and (min-width:0px){
  #header-back{
    min-height:80px;
    height:10vh;
    background-color:rgba(0, 128, 0, 0);
  }

  
}
@media (orientation:portrait) and (max-width:400px) and (min-width:0px){
  /*small phones*/

  
  #upper-margin {
    font-size:0.7em;
  }
  .category-banner div:nth-child(1){font-size:calc(30px + 1vw)}
  .category-banner div:nth-child(2){font-size:calc(8px + 0.5vw);;}
  .category-banner{
    background-color:rgba(0, 0, 255, 0);
    height:fit-content;
    
  }
  .filter-banner-wrap{
    height:fit-content;
    width:100%;
    min-height:100px;
    position:relative;
    background-color:rgba(0, 128, 0, 0);
    
    
    
    
  }
  #results{
    
    position:absolute;
    font-size:4vw;
    
    white-space: nowrap;
    justify-self:flex-start;
    background-color:rgba(0, 0, 255, 0);
    left:25%;
    
    
  }
  
  #filter-bar{
    background-color:#121212;
    display:flex;
    justify-content:flex-end;
    
    
  }
  #filter-button{
    background-color:rgba(235, 12, 135, 0);
    font-size:4vw;
    justify-self:flex-end;
    
  }
  .wrap{
    display:grid;
    grid-template-columns: repeat(1,minmax(150px,299px));
   
    
    
  }
  
}
@media(orientation:portrait) and (max-height:700px){
  
  .filter{
    font-size:0.7em;
    margin-top:30px;
    
  }
  
}
@media (orientation:portrait) and (max-width:250px) and (min-width:0px){
  body{
    display:none;
  }
}

/*small landscape devices*/
@media (orientation:landscape) and (max-width:1150px) and (min-width:850px){
  .filter{
    font-size:0.7em
  }
  .filter-banner-wrap{
    margin-top:10px;
  }
  #filter-form .input-block .title{
    font-size:0.7em;
  }
  .wrap{
    display:grid;
    grid-template-columns: repeat(3,minmax(150px,299px));
   
    
    
  }
  
}


@media (orientation:landscape) and (max-width:849px)  {
  .filter{
    font-size:0.7em;
  }
  .filter-banner-wrap{
    margin-top:10px;
  }
  #filter-form .input-block .title{
    display:none;
  }
  .wrap{
    display:grid;
    grid-template-columns: repeat(3,minmax(150px,299px));
   
    
    
  }

}
@media (orientation:landscape) and (max-width:749px) and
(min-width:501px) {
  .filter{
    font-size:0.5em;

  }
  .checkmark{
    height:15px;
    width:15px;
  }
  .custom-checkbox:checked + .checkmark:after {
    font-size:13px;
  }
  .radiomark{
    height:15px;
    width:15px;
    
  }
  .custom-radio:checked + .radiomark:after{
    width:9px;
    height:9px;
    top:2.25px;
    left:2.27px;
  }
  
  #brand-block{
    background-color:rgba(255, 0, 0, 0);
  }
  #sort-box{
    background-color:rgba(0, 128, 0, 0);
    margin-right:10px;
  }
  .category-banner div:nth-child(2){
    /*copy text in banner next to heading*/
    font-size:1em;
    width:100%;
  }
  #rightBannerPic{
    position:absolute;
  }
 
}
@media (orientation:landscape) and (max-width:500px) and
(min-width:0px) {
  body{
    display:none;
  }
}
@media (orientation:landscape)  {
  .filter-bar-when-filter-expanded-in-landscape-mode{
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    width:100%;
    
    z-index:50;
  }
}