@charset "utf-8";
/* CSS Document */
.ProductSection {
	padding-bottom: 50px;
	padding-top: 75px;
}
.ProductSection:nth-of-type(odd) {
	background-color: #f7f2ed;
}
.ProductPanel {
	position: relative;
	float: left;
	width: 86%;
	padding-right: 7%;
	padding-left: 7%;
}
.ProductPanel h1 {
	position: relative;
	text-transform: uppercase;	
}
.ProductTitleContainer {
	width: 100%;
	position: relative;
}
.ProductIntroContainer {
	float: left;
	width: 100%;
	position: relative !important;
	line-height: 22px;
}
.ProductIntroContainer h1 {
	margin-bottom: 30px;
}
.HeroCationFloatRight {
	float: right;
	height: auto;
	width: 35%;
	margin-left: 5%;
	position: relative;
	margin-top: 6px;
}

.HeroCationImgCon {
	float: left;
	width: 100%;
	position: relative;
	line-height: 0;
	padding: 0;
}
.HeroCationImgCon img {
	width: 100%;
	height: auto;
}
.HeroCaption {
	line-height: 22px;
	font-size: .95em;
	background-color: #394666;
	color: #FFF;
	padding-left: 3%;
	padding-right: 3%;
	position: relative;
}
.HeroCaption  ul {
	list-style-image: none;
	list-style-type: none;
	margin-left: 0px;
	margin-bottom: 4px;
	margin-top: 4px;
	padding-left: 0px;
}
.HeroCaption li::before {
	left: 10px; 
	top: 10px; 
	height: 5px; 
	width: 5px;
	position: absolute; 
	content: " "; 
	background-color: #FFF;
}

.HeroCaption li {
	padding-left: 15px;
	padding-bottom: 5px;
	position: relative;
}
.HeroCaption a {
	color: #FFF;
	text-decoration: none !important;
	position: relative;
}
.ProductReturnContainer {
	height: 30px;
	position: absolute;
	top: 0px;
	right: 0px;
	background-image: url(../ui/MenuArrow.png);
	background-repeat: no-repeat;
	background-position: right 0px;
	background-size: auto 25px;
	padding-right: 30px;
}
.ProductReturnContainer:hover {
	background-image: url(../ui/MenuArrowHover.png);
}
.ProductReturnContainer a {
	font-size: 1.15em;
	line-height: 1.25em;
}
.ProductsDisplayPanel {
	width: 100%;
	margin-top: 45px;
}
.ProductDisplayContainer {
	float: left;
	width: 31%;
	position: relative;
	height: auto;
	margin-bottom: 50px;
	margin-right: 3%;
}
.ProductDisplayContainer:nth-child(3n) {
	margin-right: 0%;
}
.ProductImageContainer {
	width: 100%;
	height: auto;
	position: relative;
	line-height: 0px;
	background-color: #394765;
}

.ProductImageContainer img {
	width: 100%;
	height: auto;
	
}
.ProductImageContainer img:hover {
	opacity: .55;
}
.ImageMargin {
	margin-right: 50px;
}
.ProductNameContainer {
	width: 100%;
	height: auto;
	position: relative;
}
.ProductNameContainer h3 {
	font-size: .9em;
	margin-top: 17px;
	margin-bottom: 0px !important;
	line-height: .75em;
	position: relative;
	text-transform: uppercase;
}
.ProductNameContainer h3::after {
	right: 0px; 
	top: .65em; 
	width: 30px; 
	height: 1px; 
	position: absolute; 
	content: " "; 
	background-color: #394665;
}
.ColourAdditionalInfo {
	padding-left: 2%;
	float: left;
	width: 98%;
	position: relative;
}
.ColourAdditionalInfo h3::before {
	left: 0px; 
	top: .75em; 
	width: 30px; 
	height: 1px; 
	position: absolute; 
	content: " "; 
	background-color: #394665;
}
.ColourAdditionalInfo h3 {
	font-size: 1.15em;
	position: relative;
	padding-left: 40px;
	margin-top: 24px;
	margin-bottom: 0px;
}
.ColourAdditionalInfo p {
	margin-top: 8px;
	line-height: 22px;
}
@media all and (min-width:768px) and (max-width:1024px) {
	.ProductDisplayContainer {
		width: 45%;
		margin-right: 10%;
	}
	.ProductDisplayContainer:nth-child(3n) {
		margin-right: 0%;
	}
}
@media all and (min-width:320px) and (max-width:767px) {
	.ProductDisplayContainer {
		width: 100%;
		margin-right: 0%;
	}
	.ColourAdditionalInfo {
		width: 100%;
		padding-left: 0%;
	}
}

.ColourInfoLeft {
	float: left;
	width: 30%;
	min-height: 515px;
	position: relative;
}
.ColourInfoContent {
	float: left;
	width: 90%;
	position: relative;
	margin-top: -5px;
}
.ColourInfoContent h2 {
	font-size: 1.45em;
}
.ColourInfoContent h3 {
	font-size: 1.15em;
}
.ColourInfoContent h4 {
	font-size: 1.15em;
	color: #394767;
	font-weight: 400;
}
.ColourInfoContent p::before {
/*	left: 0px; 
	top: .75em; 
	width: 30px; 
	height: 1px; 
	position: absolute; 
	content: " "; 
	background-color: #394665;*/
}
.ColourInfoContent p {
	position: relative;
	padding-left: 40px;
	font-size: .95em;
}
.ColourInfoContent a {
	font-size: .95em;
}
.ColourIntro {
	width: 100%;
	margin-bottom: 36px;
	position: relative;
}
.ColourInfoRight {
	float: left;
	height: auto;
	width: 70%;
	position: relative;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
}
.ColourSampleImage {
	float: left;
	height: 515px;
	width: 100%;
	position: relative;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
}
.ColourSampleImage img {
	width: 100%;
	height: auto;
}

.ColourInfoContent ul {
	list-style: none;
	margin: 0px;
}
.ColourInfoContent li {
	list-style: none;
}
.ColourInfoContent li div {
	max-width: 95%;
	line-height: 22px;
}
li.ColourWheel > h3 {
	height: 30px;
}
li.ColourWheel {
	background-image: url(../ui/APT-Icons_CMYK_ColourWheel.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	padding-left: 40px;
	padding-top: 5px;
	padding-bottom: 5px;
}
li.Exterior {
	background-image: url(../ui/APT-Icons_CMYK_Exterior.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	padding-left: 40px;
	padding-top: 5px;
	padding-bottom: 5px;
}
li.Translucent {
	background-image: url(../ui/APT-Icons_CMYK_Translucency.png);
	background-repeat: no-repeat;
	background-position: left 4px;
	padding-left: 40px;
	padding-top: 5px;
	padding-bottom: 5px;
}
li.Sinks {
	background-image: url(../ui/APT-Icons_CMYK_Sinks.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	padding-left: 40px;
	padding-top: 8px;
	padding-bottom: 5px;
}
li.Edging {
	background-image: url(../ui/Edging-Icon.png);
	background-repeat: no-repeat;
	background-position: left 6px;
	padding-left: 40px;
	padding-top: 8px;
	padding-bottom: 5px;
}
li.Dollar {
	background-image: url(../ui/icon_dollar.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	padding-left: 40px;
	padding-top: 5px;
	padding-bottom: 5px;
}
ul.ColourInfo {
	margin-left: 42px;
	margin-bottom: 16px;
}
ul.ColourInfo li {
	font-size: .90em;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-right: 10px;
	position: relative;
	width: 100%;
}
ul.ColourInfo li span {
	font-weight: 200;
	position: absolute;
	height: 12px;
	width: auto;
	top: 12px;
	right: 0px;
	color: #394666;
}
ul.ColourInfo li a {
	font-size: 1.15em;
}
.underlined li {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #394666;
}
li.Thickness {
	background-image: url(../ui/APT-Icons_CMYK_Thickness.png);
	background-repeat: no-repeat;
	background-position: 5px 5px;
	padding-left: 40px;
	padding-top: 5px;
	padding-bottom: 5px;
}
li.Sheets {
	background-image: url(../ui/APT-Icons_CMYK_SheetSize.png);
	background-repeat: no-repeat;
	background-position: 5px 4px;
	padding-left: 40px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.MagPanel {
	background-color: #394666;
	position: absolute;
	z-index: 2;
	height: 50px;
	width: 50px;
	right: 0px;
	bottom: 0px;
	background-image: url(../ui/MagnifyGlassLeft.png);
	background-repeat: no-repeat;
	background-position: center center;
	opacity: .5;
	border-radius: 15px 0px 0px 0px;
}
#Mobile {
	display: none;
}

@media all and (min-width:768px) and (max-width:1279px) {
	.ColourInfoLeft {
		width: 35%;
	}
	.ColourInfoRight {
		width: 65%;
	}
}
@media all and (min-width:320px) and (max-width:767px) {
	.ProductSection {
		padding-top: 40px;
	}
	.ProductTitleContainer {
		margin-bottom: 20px;
	}
	.ProductsDetailDisplayPanel {
		margin-top: 0px;
	}
	.ColourInfoRight,
	.ColourInfoLeft,
	.ProductIntroContainer {
		width: 100%;
		height: auto;
	}
	.ColourInfoRight {
		overflow: hidden;
	}
	.ColourSampleImage {
		height: 300px;
	}
	.ColourInfoLeft {
		min-height: 100px;
		margin-top: 20px;
	}
	#Desktop {
		display: none;
	}
	#Mobile {
		display: block;
	}
	.ColourInfoContent p {
		padding-left: 0px;
	}
}
.LinkedProduct {
	line-height: 30px;
	color: #394666;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #394666;
}
.LinkedProduct:hover {
	text-decoration: none !important;
	color: #b72025;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #b72025;
}
/*Assocatiated Projects*/
.ProjectContainer {
	float: left;
	height: auto;
	width: 23%;
	position: relative;
	margin-right: 2.666666666666667%;
	min-height: 210px;
}
.ProjectContainerMargin {
	margin-right: 2%;
}
.LastProject {
	margin-right: 0%;
}
@media all and (min-width:320px) and (max-width:767px) {
	.ProjectContainer {
		width: 47%;
		min-height: 180px;
		margin-right: 4%;
	}
	.ProjectContainerMargin {
		margin-right: 4%;
	}
	.ProjectContainer:nth-child(2n+1) {
	    margin-right: 0%;
   }

}
.ProjectImageContainer {
	float: left;
	width: 100%;
	position: relative;
	background-color: #394765;
	line-height: 0px;
}
.ProjectImageContainer img {
	width: 100%;
	height: auto;
}
.ProjectImageContainer img:hover {
	opacity: .55;
}
.ProjectNameContainer {
	float: left;
	width: 100%;
	height: auto;
	position: relative;
}
.ProjectNameContainer h5 {
	font-size: .95em;
	margin-top: 16px;
	margin-bottom: 0px !important;
	line-height: normal;
	position: relative;
	color: #394765;
}
.ProjectNameContainer h5 > span {
	display: block;
	max-width: 85%;
}
.ProjectNameContainer h5::after {
	right: 0px; 
	top: .65em; 
	width: 30px; 
	height: 1px; 
	position: absolute; 
	content: " "; 
	background-color: #394665;
}
@media all and (min-width:320px) and (max-width:767px) {
	.ProjectContainer {
		width: 47%;
		margin-right: 4%;
		margin-bottom: 4px;
	}
	.ProjectContainerMargin {
		margin-right: 4%;
	}
	.ProjectContainer:nth-child(2n+1) {
	    margin-right: 0%;
   }
   .ProjectNameContainer h5::after {
	   width: 20px;
	   content: none;
   }
   .ProjectNameContainer h5 > span {
	   max-width: 100%;
   }
}
p.html5-description {
	font-size: .95em !important;
}
.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}