/* BEGIN product header styles*/

.prod-category-header {
  width:100%;
  height:90vh;
  max-height:1020px;
  position:relative;
  overflow:hidden;

}

.prod-category-header {
	background-attachment:fixed;	
	background-repeat:no-repeat;
	background-size:100%;
}

.header-text {
  max-width:1212px;
  width:90vw;
  margin:200px auto;
  background-color: rgba(0,0,0,.75);
  color:white;
  padding:100px;
}

.header-text h1 {
	font-family:"LinotypeUniversW02-Medi_726166",'Helvetica Neue', Helvetica, Century Gothic, Gotham;
	font-size:55px;
}

.header-text p {
	color:white;	
	font-size:18px;
}

.bckg-img {
	position:fixed;
	top:0px;
	left:0px;
	z-index:-1;
}

.prod-subcategory-nav {
  position:absolute;
  bottom:0px;
  width:100vw;
  height:89px;
  background-color: rgba(0,0,0,.75);

}

.prod-subcategory-nav .nav-box {
	margin:0px auto;
	max-width:1280px;
	width:100vw;	
	height:84px;
}

.prod-subcategory-nav .nav-box li {
	float:left;
	list-style-type:none;
	color:white;
	font-size:24px;
	line-height:84px;
	padding: 0 30px;
	cursor:pointer;
}

.prod-subcategory-nav .nav-box li.active {
	border-bottom:5px solid white;
	font-family:"LinotypeUniversW02-Medi_726166",'Helvetica Neue', Helvetica, Century Gothic, Gotham;

}





/* END product header styles*/



/*BEGIN product column styles*/



.prods {
	max-width:1280px;
	width:90vw;
	margin:20px auto;

}

.prod-subcategory#oem{
	display:none;
}


.prod-type-header {
	padding:30px 0px 0px;
	display:block;
	border-top:1px solid #E0E0E0;

}

.prod-type-header h1 {
	text-transform: uppercase;
	font-size:24px;
	font-family: "Helvetica",'Helvetica Neue', Helvetica, Century Gothic, Gotham;
	font-weight: 100;	
}

.prod-type-header h2 {
	font-size: 24px;
  line-height: 33px;
	font-family: "Helvetica",'Helvetica Neue', Helvetica, Century Gothic, Gotham;
	font-weight: 100;
}

.prod-col:hover .prod-thumb-prev {
    transform: scale(1.15);
    transition: all 100ms;
    transition-timing-function: ease-out
}

.learn-more-link {
	color:#d11242;
	font-family: "Helvetica",'Helvetica Neue', Helvetica, Century Gothic, Gotham;
}




.prod-col {
	float:left;
	width:33%;
	max-width:400px;
	text-decoration:none;
	color:black;
	margin-right:40px;
	height:700px;
}



.prod-col:nth-child(3n) {
	margin-right:0px;
}

.prod-col:hover {
	text-decoration:none;
	color:black;
}

.prod-col p {
	font-size:16px;
}

.thumb-container {
	width:286px;
	height:230px;
	position:relative;
    overflow:hidden;
    margin: 0px auto;
}


.prod-thumb-prev {
	position: absolute;
    width: 100%;
    transform: scale(1);
    transition: all 300ms;
    transition-timing-function: ease-out;
}


.prod-col h3 {
	font-family:"LinotypeUniversW02-Medi_726166",'Helvetica Neue', Helvetica, Century Gothic, Gotham;
}

.prod-col h4 {
	font-family:"LinotypeUniversW02-Medi_726166",'Helvetica Neue', Helvetica, Century Gothic, Gotham;
	font-size:16px;
	margin-bottom:12px;
}

@media (max-width:1705px) {
	.prod-category-header {
	  height:52vw;
	}
	.header-text {
		padding:5vw;
	}
}

@media (max-width:1440px) {
	.header-text {
	  margin:8vw auto;
	  max-width:75vw;
	  padding:3vw;
	}
}


@media (max-width:1410px) {
	.prod-col{
		margin-right:4vw;
		max-width:27vw;	
	}

	.thumb-container {
		width:20vw;
		height:16.31vw;
	}

}

@media (max-width:1175px) {
	.prod-col {
		height:60vw;
	}

	.prod-col h3 {
		font-size:2vw;
	}

	.prod-col p {
		font-size:1.361vw;
	}
}

@media (max-width:1024px) {
	.prod-category-header {
		height:75vw;
	}


	.header-text {
		margin:16vw auto;
		padding:5vw;
	}

	.header-text h1 {
		font-size:4.8vw;
	}

	.header-text p {
		font-size:1.757vw;
	}

	

	.prod-type-header {
		padding:2.9vw 0px 0px;
	}

	.prod-type-header h1 {
		font-size:2.3vw;
	}

	.prod-type-header h2 {
		font-size: 2.3vw;
	    line-height: 3.2vw;
	}
}

@media (max-width:900px) {
	.prod-subcategory-nav {
		height:9.8vw;
	}

	.prod-subcategory-nav .nav-box{
	    height:9.33vw;
	}

	.prod-subcategory-nav .nav-box li{
	    width: 50%;
	    text-align: center;
	    font-size: 2.33vw;
	    line-height:9.33vw;
	}


}




@media (max-width:650px) {
	.prod-type-header h1 {
		font-size:24px;
	}

	.prod-type-header h2 {
		font-size: 19px;
    	line-height: 26px;

	}

	.prod-col {
		width:43vw;
		max-width:43vw;
		height:600px;
		margin-right:4vw;
	}

	.prod-col h3 {
		font-size:24px;
	}

	.prod-col p {
		font-size:16px;
	}

	.prod-col:nth-child(2n) {
		margin-right:0px;
	}

	.thumb-container {
		width:44vw;
		height:35vw;
	}
}

@media (max-width:480px) {
	.prod-category-header {
		height:155vw;
	}

	.prod-category-header.card-readers {
		background-size: 325%;
    	background-position-x: -178vw;

	}

	.header-text {
		padding:5vw 8vw;
	}

	.header-text h1 {
		font-size:8vw;
	}

	.header-text p {
		font-size:3.33vw;
	}

	.prod-subcategory-nav {
		height: 20vw;
	}

	.prod-subcategory-nav .nav-box {
		height:20vw;
	}

	.prod-subcategory-nav .nav-box li {
		font-size: 4.3vw;
    	line-height: 7vw;
    	padding:2.6vw 5vw;
	}

	.prod-subcategory-nav .nav-box li#oem {
		padding: 2.6vw 12vw;
	}


	.prod-col {
		width:90vw;
		max-width:90vw;
		margin-right:0px;
	}
	.prod-col:nth-child(2n), .prod-col:nth-child(4n) {
		margin-right:0px;
	}
	.thumb-container {
		width: 90vw;
    	height: 70vw;
	}

	.prod-thumb-prev {
		width:90vw;
	}
}

/*END product column styles*/

/* EVERYTHING ABOVE THIS LINE SHOULD BE THE SAME CSS (card readers page, check scanners page, pin pads page, card personalization page)*/

/*BEGIN Instant Issuance page Styles*/

.prod-category-header.instant-issuance {
	background-image:url("../content/images/instant-issuance-card-personalization-credit-union-banks.jpg");
	background-position-y: -17vw;
    background-position-x: -31vw;
    background-size: 141vw;
}

@media (max-width:1024px) {
	.prod-category-header.instant-issuance {
		background-position-x: -50vw;
    	background-size: 192vw;	
	}
}

@media (max-width:480px) {
	.prod-category-header.instant-issuance {
		background-size: 383vw;
    	background-position-x: -100vw;
    	background-position-y: -19vw;
	
	}
}