@import url(https://fonts.googleapis.com/css?family=Lato:700);

/* Green / In stock*/
#products .green > div {
	background-color: rgba(118,169,24,0.9);
}
#products .green .cpu, #products .green .next {
	background-color: rgba(118,169,24,1);
	  transition: 0.3s;
}
#products .green a.next:hover {
	background-color: rgba(118,169,24,0.7);
}

/* Blue  / Low stock */
#products div.blue > div {
	background-color: rgba(0,102,135,0.9);
}
#products div.blue .cpu, #products div.blue .next {
	background-color: rgba(0,102,135,1);
	transition: 0.3s;
}
#products .blue > a.next:hover {
	background-color: rgba(0,102,135,0.7);
}

/* red / Popular */
#products .red > div {
	background-color: rgba(226,64,2,0.9);
}
#products .red .cpu, #products .red .next {
	background-color: rgba(226,64,2,1);
	  transition: 0.3s;
}
#products .red a.next:hover {
	background-color: rgba(226,64,2,0.7);
}

/* Gray / Out of stock */
#products .gray > div {
	background-color: rgba(196,196,196,0.9);
}
#products .gray .cpu, #products .gray .next {
	background-color: rgba(196,196,196,1);
    transition: 0.3s;
}
#products .gray a.next:hover {
	background-color: rgba(196,196,196,0.7);
}


#products .next {
	 border-radius:0px 10px 10px 0px;
	 font-size:10px;
}
#products .next i {
	color:#fff;
	font-size:20px;
}
#products div.next {
	cursor: not-allowed;
}
#products .name {
	 border-radius:10px 0px 0px 10px;
}

/* product grid */
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 120px 110px auto 150px 80px;
  grid-auto-rows: 80px;
  margin-bottom: 10px;
   position: relative;
}

.grid-container.header > div {
	font-size: 13px;
	color:#000;
   text-align: center;
    padding-top: 20px;
   padding-bottom: 0px;
   white-space: nowrap;
	overflow:hidden;
}

.grid-container.product  > div, .grid-container.product > a {
   text-align: center;
  	color:#FFF;
	white-space: nowrap;
	overflow:hidden;
  font-size: 20px;
  vertical-align:middle;
  text-decoration:none;
}

.grid-container.product  > div {
	padding-top:28px;
}
.grid-container.product > a {
	padding-top:24px;
}

#tagline {padding: 30px;}

/* products with tiny desc */
.grid-container .hdd, .grid-container .ram, .grid-container .bw  {
	padding-top:20px !important;
}

.grid-container.product .desc {
	  font-size: 9px;
}
	
	
	
/* stock ribbon */
.ribbon {
  width: 70px;
  height: 70px;
  overflow: hidden;
  position: absolute;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}
.ribbon span {
	position: absolute;
	display: block;
	width: 90px;
	padding: 5px 0;
	background-color: rgba(102,102,102,1);
	box-shadow: 0 2px 5px rgba(0,0,0,.1);
	color: #fff;
	font: 700 10px/1 'Lato', sans-serif;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	text-transform: uppercase;
	text-align: center;
}
.ribbon span.nostock {
	background-color: rgba(178,178,178,1);
}
.ribbon span.featured {
	background-color: rgba(0,0,0,1);
}
/* top left*/
.ribbon-top-left {
  top: -5px;
  left: -5px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: 0;
  right: 5px;
}
.ribbon-top-left::after {
  bottom: 5px;
  left: -5px;
}
.ribbon-top-left span {
  right: 0px;
  top: 16px;
  transform: rotate(-45deg);
}

@media (max-width: 1200px) {

}
@media (max-width: 990px) {

	.grid-container.header {
		display:none;
	}
	.grid-container.product div {
		padding: 10px;
	}
	.grid-container {
	  display: grid;
	  grid-template-columns:130px auto;
	  grid-auto-rows: auto;
	    align-items: stretch;
	}
	
	.grid-container.product  > div, .grid-container.product > a {
	  font-size: 15px;
	}
	.grid-container .name {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 1;
		  grid-row-end: 2;
		}
	.grid-container .name:before {
		font-family: 'Font Awesome 5 Pro';
		content: "\f233";
		font-size: 15px;
		padding-right:10px;
	}
	.grid-container .ram {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 2;
		  grid-row-end: 3;
		}
	.grid-container .ram:before {
		font-family: 'Font Awesome 5 Pro';
			content: "\f538";
		font-size: 15px;
		padding-right:10px;
	}
	.grid-container .hdd {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 3;
		  grid-row-end: 4;
		}
	.grid-container .hdd:before {
		font-family: 'Font Awesome 5 Pro';
			content: "\f0a0";
		font-size: 15px;
		padding-right:10px;
	}
	.grid-container .bw {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 4;
		  grid-row-end: 5;
		  
		}
	.grid-container .bw:before {
		font-family: 'Font Awesome 5 Pro';
			content: "\f362";
		font-size: 15px;
		padding-right:10px;
			 text-align:left;
	}
	.grid-container .cpu {
		  grid-column-start: 2;
		  grid-column-end: 3;
		  grid-row-start: 1;
		  grid-row-end: 3;
		  font-size: 13px;
		}
	.grid-container .cpu:before {
		font-family: 'Font Awesome 5 Pro';
			content: "\f2db";
		font-size: 25px;
		display:block;
	}
	.grid-container .price {
		  grid-column-start: 2;
		  grid-column-end: 3;
		  grid-row-start: 3;
		  grid-row-end: 4;
		}
	.grid-container .price:before {
		font-family: 'Font Awesome 5 Pro';
			content: "\f02c";
		font-size: 15px;
		padding-right:10px;
	}
	.grid-container .next {
		  grid-column-start: 2;
		  grid-column-end: 3;
		  grid-row-start: 4;
		  grid-row-end: 5;
		}
		
	.grid-container.product > a {
		padding-top:10px; padding-bottom:10px;
	}
	#products .name {
		 border-radius:10px 0px 0px 0px;
	}
	#products .price {
		border-top:rgba(255,255,255,.2) 1px solid;
	}
	#products .next {
		border-top:rgba(255,255,255,.2) 1px solid;
	 border-radius:0px 0px 10px 0px;
	}
	
	.grid-container.product .name, .grid-container.product .ram, .grid-container.product .hdd, .grid-container.product .bw {
		text-align: left;
		padding-left:15px;
	}
	.grid-container.product .desc {
		display:none;
	}
}