/*
	_____________________________________________________

	VARIABLES
	_____________________________________________________

*/
:root {
		--base-color: rgb(0,150,214);
		--base-font-family: 'Roboto';

		--hero-color-packaging: rgb(211,37,39);
		--hero-color-handling: rgb(64,175,72);
		--hero-color-process: rgb(0,179,235);
	}

/*
	_____________________________________________________

	FORM
	_____________________________________________________

*/
.form-heading {
	margin: 0px 0 10px 0;
	BORDER: 0;
	font-size: 22px;
	font-weight: 500;
	text-align: center;
}
.form-group { /* The old Bootstrap .form-group class */ 
	margin-bottom: 1rem;
}
/*
	_____________________________________________________

	MODAL
	_____________________________________________________

*/
.modal button.close {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: .5;
	background-color: transparent;
	border: 0;
	appearance: none;
}
/*
	_____________________________________________________

	FONTS
	_____________________________________________________

*/
* {
	font-family: 'Roboto'; /*var(--base-font-family);*/
	/*
	font-weight: 400;
	font-size: 15px;
	*/
	color: rgb(85, 86, 90);
}
a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
}
/*
designicons created with fontello

E800 search (Web Symbols by Just Be Nice studio)
E801 phone (Font Awesome by Dave Gandy)
E802 on arrows...
*/
@font-face {
			font-family: 'designicons';
			src: url('../fonts/designicons/designicons.eot?16986335');
			src: url('../fonts/designicons/designicons.eot?16986335#iefix') format('embedded-opentype'),
					 url('../fonts/designicons/designicons.woff?16986335') format('woff'),
					 url('../fonts/designicons/designicons.ttf?16986335') format('truetype'),
					 url('../fonts/designicons/designicons.svg?16986335#designicons') format('svg');
			font-weight: normal;
			font-style: normal;
		}
.telephone-icon {
	font-family: "designicons";
	font-size: 14px; 
	margin: 0px 6px 0px 0px;
}
.nav-item.search-item .search-icon,
.search-icon {
	font-family: "designicons";
	font-size: 18px;
}
/*
	_____________________________________________________

	UTILITIES
	_____________________________________________________

*/
.defloater {
		float: none;
		clear: both;
}
/*
	_____________________________________________________

	HEADER
	_____________________________________________________

*/
.no-gutters {
	padding-right: 0;
	padding-left: 0;
	margin-right: 0;
	margin-left: 0;
	> .col,
	> [class*="col-"] {
		padding-right: 0;
		padding-left: 0;
	}
}
a.nav-link {
	padding-right: 20px !important;
}
.main-header {
	BORDER-BOTTOM: 1px solid #b9b8bb; /*rgba(0,0,0,0.1);*/
}
.navbar-nav.ml-auto {
	border: 0;
}
a.nav-link.dropdown-toggle,
a.nav-link {
	font-family: Montserrat;
	font-weight: 600;
	font-size: 14px;
	/*text-transform: uppercase;*/
	letter-spacing: -0.02em;
	border: 0;
	margin-top: 7.5px;
}
.dropdown-menu {
	width: 500px;
	border-radius: 0;
}
.dropdown-menu a.dropdown-item {
	padding: 2px 0 2px 0;

}
.search-item {
	margin-left: 15px;
	BORDER-LEFT: 1px solid #b9b8bb;
	padding-left: 20px;
}
.search-icon {
	padding: 4px 0 4px 0;
}
.form-inline .form-group {
	display: flex;
}
.form-inline .form-control {
	display: inline-block;
	vertical-align: middle;
}
.search-form-container {
	background-color: rgb(250,250,250);
	padding: 20px;
	border-bottom: 1px solid #efefef;
}
.search-form-container input.form-control {
	font-size: 18px;
	width: 500px;
	border-radius: 0;
}
.search-form-container .container {
	text-align: center;
}
.search-form-container .container .form-inline{
	display: inline-block;
}
.search-form-container button.btn {
	display: inline-block;
	border-radius: 0;
}
.search-form-container button.btn span.search-icon {
	color: #ffffff;
}
/*
	HOME PAGE

*/
.container.products-in-category {
	margin-bottom: 40px;
}
.card-product {
	BORDER: 0;
	display: block;
	float: left;
	width: 310px;
	height: 330px;
	margin: 0;
	--bs-card-spacer-y: 0;
}
.card-product .card-img {
	margin-bottom: 15px;
	BORDER: 0;
	width: 100%;
	height: 200px;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.card-product .card-img img {
	max-height: 200px;
	max-width: 100%;
}
.card-product .card-body,
.card-product .card-text {
	height: 90px;
	overflow: hidden;
}
.card-product .card-body .card-title a {
	margin: 0 0 0 0;
	display: block;
	padding: 0 0 0 0;
	vertical-align: bottom !important;
	font-family: Montserrat;
	font-weight: 400;
	letter-spacing: -0.02em;
	font-size: 20px;
	color: rgb(85, 86, 90);
}
.card-product .card-body .card-title span.makename {
	display: none;
}
.card-product .card-body .card-text {
	display: none;
}
/*legacy*/
.prodThin3 {
		BORDER: 0;
		display: block;
		float: left;
		width: 180px;
		height: 300px;
		margin: 10px 16px 10px 16px;
}
.prodWideImage3 {
		margin-bottom: 15px;
		BORDER: 0;
		width: 100%;
		height: 200px;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
}
.prodWideImage3 img {
		max-height: 200px;
		max-width: 100%;
}
.prodTitle3 {
		margin: 0 0 0 0;
		display: block;
		padding: 0 0 0 0;
		vertical-align: bottom !important;
		font-family: Montserrat;
		font-weight: 400;
		letter-spacing: -0.02em;
		font-size: 16px;
		color: rgb(85, 86, 90);
}
.prodMoreBtn3 {
		display: none;
}
h2 {
		font-family: Montserrat;
		font-weight: 400;
		letter-spacing: -0.02em;
		/* text-transform: uppercase; */
		/*font-size: 34px;*/
		color: rgb(85, 86, 90);
}
h3 {
		font-family: Montserrat;
		font-weight: 300;
		letter-spacing: -0.02em;
		/* text-transform: uppercase; */
		/*font-size: 16px;*/
		color: rgb(85, 86, 90);
}
h2.category-title {
		margin-top: 0.5em;
		margin-bottom: 0.8em;
		BORDER-BOTTOM: 1px solid #e2e2e2;
		line-height: 1.3em;
		color: rgb(85, 86, 90);
		letter-spacing: -0.02em;
		text-transform: uppercase;
		font-family: Montserrat;
		font-weight: 700;
		font-size: 38px;
}
.category-title-underline {
		display: inline-block;
		border-bottom: 5px solid #e2e2e2;
		font-family: Montserrat;
		font-weight: 700;
		font-size: 38px;
		margin-bottom: -1px;
}
.container-btn-browse {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
}
.btn-browse {
		padding-left: 50px;
		padding-right: 50px;
		font-family: Montserrat;
		font-weight: 400;
		font-size: 18px;
		letter-spacing: -0.02em;
}
.container-category-hero {
		margin-bottom: 50px;
}
/* process */
.container-category-hero-process .btn-browse {
		border-color: var(--hero-color-process);
		color: var(--hero-color-process);
}
.container-category-hero-process .btn-browse:hover {
		color: rgb(255,255,255);
		border-color: var(--hero-color-process);
		background-color: var(--hero-color-process);
}
.container-category-hero-process .category-title-underline {
		border-bottom-color: var(--hero-color-process)
}
/*packaging*/
.container-category-hero-packaging .btn-browse {
		border-color: var(--hero-color-packaging);
		color: var(--hero-color-packaging);
}
.container-category-hero-packaging .btn-browse:hover {
		color: rgb(255,255,255);
		border-color: var(--hero-color-packaging);
		background-color: var(--hero-color-packaging);
}
.container-category-hero-packaging .category-title-underline {
		border-bottom-color: var(--hero-color-packaging)
}
/*handling*/
.container-category-hero-handling .btn-browse {
		border-color: var(--hero-color-handling);
		color: var(--hero-color-handling);
}
.container-category-hero-handling .btn-browse:hover {
		color: rgb(255,255,255);
		border-color: var(--hero-color-handling);
		background-color: var(--hero-color-handling);
}
.container-category-hero-handling .category-title-underline {
		border-bottom-color: var(--hero-color-handling)
}
/*
	_____________________________________________________

	SEARCH AND CATEGORY PAGES
	_____________________________________________________

*/
.container-fluid.items {
	margin-bottom: 40px;
	padding-top: 20px;
}
.col-filters {
	display: none;
}
.col-items {
	width: 100%;
}
h1.category-heading {
    margin: 0 0 0 0;
    /*BORDER-bottom: 5px solid rgba(0, 0, 0, 0.1);*/
    display: block;
    width: 50%;
    padding: 20px 0 30px 0;
    vertical-align: bottom !important;
    font-family: Montserrat;
    font-weight: 300;
    letter-spacing: -0.02em;
    /* text-transform: uppercase; */
    font-size: 46px;
    color: rgb(76, 76, 76); /*rgb(85, 86, 90);*/
}
/*
	_____________________________________________________

	PRODUCT
	_____________________________________________________

*/
.embed-container { 
	position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-top: 30px;
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}
.product-details {
	margin-top: 20px;
}
.details-subheading-container {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	margin: 0 0 35px 0;
}
h2.details-subheading {
		margin: 0 0 0 0;
		BORDER-bottom: 5px solid rgba(0, 0, 0, 0.1);
		display: block;
		width: 50%;
		padding-bottom: 10px;
		vertical-align: bottom !important;
	font-family: Montserrat;
	font-weight: 300;
	letter-spacing: -0.02em;
	/*text-transform: uppercase;*/
	font-size: 28px;

}
body.packaging h2.details-subheading {
	/*BORDER-bottom: 5px solid var(--hero-color-packaging);*/
}
.breadcrumbs {
	margin-top: 1rem;
	font-family: Montserrat;
	font-weight: 600;
	font-size: 12px;
	/*text-transform: uppercase;*/
	letter-spacing: -0.02em;
	color: rgba(0,0,0,.5);
}
.breadcrumbs a {
	font-family: Montserrat;
	font-weight: 600;
	font-size: 12px;
	/*text-transform: uppercase;*/
	letter-spacing: -0.02em;
	color: rgba(0,0,0,.5);
	text-decoration: none;
}
h1.product-title {
	margin-top: 0;
	margin-bottom: 0.8em;
	/*BORDER-BOTTOM: 1px solid #e2e2e2;*/
	line-height: 42px;
	color: rgb(85, 86, 90);
	letter-spacing: -0.02em;
	/*text-transform: uppercase;*/
	font-family: Montserrat;
	font-weight: 700;
	font-size: 38px;
}
.product-title-underline {
	display: inline-block;
	/*border-bottom: 1px solid #e2e2e2;*/
	font-family: Montserrat;
	font-weight: 700;
	font-size: 38px;
	margin-bottom: -1px;
}
body.packaging .product-title-underline {
	border-bottom: 1px solid var(--hero-color-packaging);
}
.dropdown-toggle.iopak-process::after {
	color: var(--hero-color-process);
}
.dropdown-toggle.iopak-packaging::after {
	color: var(--hero-color-packaging);
}
.dropdown-toggle.iopak-handling::after {
	color: var(--hero-color-handling);
}
/* CAROUSEL */
.main-image-carousel {
	border: 0;
}
.main-image-slide-container {
	height: 460px;
	width: 440px;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.main-image-slide {
	/*BORDER: 1px solid red;*/
	max-width: 440px;
	max-height: 460px;
}
.carousel-control-next {
	right: 0;
}
.carousel-control-prev {
	left: 0;
}
.carousel-control-next, 
.carousel-control-prev {
	width: 10%;
	bottom: auto;
	top: 45%;
	opacity: 1;
}
.carousel-control-next:hover, 
.carousel-control-prev:hover,
.carousel-control-next:focus, 
.carousel-control-prev:focus {
	opacity: 1;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
	height: 35px;
	width: 35px;
	outline: none;
	background-size: 100%, 100%;
	border-radius: 50%;
	border: 0;
	background-image: none;
	background-color: #555;
}
.carousel-control-next-icon:after
{
	content: '>';
	font-size: 30px;
	font-family: 'Lato';
	font-weight: 400;
	color: rgba(255,255,255,1);
	line-height: 34px;
}
.carousel-control-prev-icon:after {
	content: '<';
	font-size: 30px;
	font-family: 'Lato';
	font-weight: 400;
	color: rgba(255,255,255,1);
	line-height: 34px;
}
/* ENQUIRY BUTTONS */
.enquiry-buttons-container {
	width: 100%;
	padding: 20px;
}
.btn-get,
.btn-ask {
	margin-bottom: 10px;
	display: block;
	width: 100%;
	
}
.btn-getx {
	background: linear-gradient(#42a1ec,#0070c9);
		border-color: #07c;
		transition-property: color, background-color, border-color, box-shadow;
		transition-duration: 0.15s, 2s, 0.15s, 0.15s;
		transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
		transition-delay: initial, initial, initial, initial;
}
.btn-getx:hover {
		background-color: #147bcd;
		background: -webkit-linear-gradient(#51a9ee, #147bcd);
		background: linear-gradient(#51a9ee, #147bcd);
		border-color: #1482d0;
}
.btn-askx {
	border-color: #07c;
	color: #07c;
}
.btn-askx:hover {
		color: #fff;
		background-color: #07c;
}
/* DETAILS */
.details-row {
	
	margin-bottom: 50px;
	BORDER: 0;
}
/* VIDEOS */
.videos-container .card.video-container {
	margin-right: 20px;
	float: left;
}
.card.video-container {
	border-radius: 0;
	border: 0;
	width: 300px;
}
.card.video-container .card-block {
	display: none;
}
.card-img-top {
	border-radius: 0;
}
.video-thumb-container .youtube-icon {
	top: 38%;
	left: 38%;
	width: 26%;
	position: absolute;
}
/* SIMILAR PRODUCTS */
.similar-products-card-deck .card-img-container .card-img-top {
    BORDER: 0;
    height: 100%;
    max-width: none !important;
    width: auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}
.similar-products-card-deck .card {
	border: 0;
	max-width: 20%;
}
.similar-products-card-deck .card .card-body .card-title {
    margin: 0 0 0 0;
    display: block;
    padding: 0 0 0 0;
    vertical-align: bottom !important;
    font-family: Montserrat;
    font-weight: 400;
    letter-spacing: -0.02em;
    font-size: 20px;
    color: rgb(85, 86, 90);
}
.similar-products-card-deck .card .prodWideImage3 {
	height: 170px;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.similar-products-card-deck .card .prodMoreBtnseealso {
	display: none;
}
.similar-products-card-deck .card .prodTitle3 {
	background-color: #f8f8f8;
	min-height: 5em;
	padding: 15px;
	border-bottom: 2.5px solid #bab7b7;
	line-height: 19px;
}
.similar-products-card-deck .card .prodTitle3 a {
	color: rgb(85, 86, 90);
	text-decoration: none;
	font-size: 14px;

}
/*
	_____________________________________________________

	FOOTER
	_____________________________________________________

*/
.footer {
	background-color: rgb(90,90,90);
	padding: 40px 0 40px 0;
	color: rgb(255,255,255);
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
}
.footer * {
	font-size: 14px;
	line-height: 18px;
	color: rgb(255,255,255);
}
.footer a {
	color: rgb(255,255,255);
}
.footer h5,
.footer .footer-heading {
	margin-bottom: 8px;
	BORDER: 0;
	color: rgb(255,255,255);
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
}
.footer .columns {
	margin-top: 20px;
	BORDER-BOTTOM: 1px solid rgb(137,136,136);
	padding-bottom: 20px;
}
.footer .legal {
	margin-top: 20px;
}
ul.prolisting  {
	margin: 0;
	BORDER: 0;
	padding: 0;
	list-style: none;
}
ul.prolisting li {
	font-size: 14px;
	line-height: 18px;
}