/*
	PERTRONICS
	Default Stylesheet
	
*/

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	line-height: 1.5em; 
	color: #000000; 
	overflow: hidden; }
	
h1 {
	font-size: 2.8em;
	line-height: 1.2em;
	margin: 0 0 5px; }

h2 {
	font-size: 2.4em;
	line-height: 1.3em; 
	margin: 0 0 15px; }

h3 {
	font-size: 2.2em;
	line-height: 1.3em; 
	margin: 0 0 15px; }

h4 {
	text-transform: uppercase;
	color: #777;
	font-size: 1.4em;
	margin: 0 0 10px;
	padding: 0 0 10px;
	border-bottom: 1px dashed #777; }
	
h5 {
	font-size: 1.8em; 
	line-height: 1.0em; 
	margin: 0 0 15px; }
h6 {
	font-size: 1.2em; }
p {
	font-size: 1.4em;
	line-height: 1.4em; 
	margin: 0 0 15px; }

a {
	text-decoration: none; 
	color: #2392d2; }
	
a:hover {
	text-decoration: underline; }
	
.blue {
	color: #2392d2; }
	
	
/*******
		LAYOUT 
********/
	
.inner {
	width: 98%;
	margin: 0 auto; }	

.main .inner,
footer .inner{
	width: 980px;
	margin: 0 auto;
}
.main .inner {
	position: relative;
	z-index: 3; }
	
.main {
	position: relative; }
	
.clear {
	clear: both; }
	
.col.left {
	float: none; }
	
.col.right {
	float: none; }
	
.col.full {
	width: 95%; 
	margin: 0 auto; }
	
.col.sixth {
	float: left;
	width: 14.6%;
	margin: 0 1%; }
	
/* mobile changes */
.tiny-layout .col.sixth,
.narrow-layout .col.sixth {
	width: 30%;
	margin: 0 1%; }

.hotline{
	padding-top: 10px;
	width: 320px;

	color: #fff;
	font-weight: bolder;
	font-size: 14px;
}

.hotline img{
	height: 22px;
	width: auto;
	vertical-align: middle;
}

.hotline:hover{
	color: yellow;
	text-decoration: none;
}



	
/*******
		ELEMENTS 
********/

.popout-image-left,
.popout-image {
	margin: 10px;
	float: left; }

.pdf-download,	
.word-download,
.excel-download {
	padding: 5px 0 5px 30px; 
	font-size: 1.5em; 
	margin: 0 0 10px; }
	
.pdf-download {
	background: url('../../../assets/Icons/pdf-download.jpg') no-repeat center left; }
	
.word-download {
	background: url('../../../assets/Icons/word-download.jpg') no-repeat center left; }
	
.excel-download {
	background: url('../../../assets/Icons/excel-download.jpg') no-repeat center left; }
	
	
	
/*******
		HEADER 
********/	

header {
	background: #000; 
	position: relative;
	z-index: 4;}
	
header .inner {
	position: relative;
	z-index: 2; 
	padding-top: 14px; 
	width: 100%; 
	height: 135px; }
	
.tiny header .inner,
.narrow header .inner {
	height: auto; }
	
	
header .inner #branding {
	display: block;
	position: absolute;
	bottom: 0;
	left: 3%;
	margin: 0;
	text-indent: -999em; 
	width: 334px;
	height: 107px;	
	background: url('../images/Pertronic-Australia-horizonal-logo.png') no-repeat;
}
	
.tiny-layout header .inner #branding,
.narrow-layout header .inner #branding {
	width: 100px;
	height: 88px;
	background: url('../images/Pertronic-Australia-vertical-logo.png') no-repeat;
}
	
header .inner #branding a {
	display: block; 
	width: 100%;
	height: 100%; }
	
	
	
	
	
/*******
		NAVIGATION 
********/


#mobile-nav {
	display: block;
	font-size: 1.6em;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	position: absolute;
	right: 5%;
		top: 75px; 										/* 05/19 push 'menu'  button down lower  */
	padding: 10px 20px; }
	
#mobile-nav:hover {
	color: #2392D2; }

.mainnav ul {
	display: none;
	top: 0;
	left: 0;
	z-index: 5; 
	background: #000; 
	width: 100%; }
	
.mainnav ul li {
	display: block; }	
	
.mainnav ul li a {
	display: block;
	color: #fff;
	font-size: 1.6em;
	padding: 15px 0 15px 30px;
	width: 94%; }

.mainnav ul li.current a,
.mainnav ul li a:hover,
.mainnav ul li a:focus,
.mainnav ul li.section a {
	text-decoration: none; 
	color: #1da8e9;
}

@media ( min-width: 650px ) {

	#mobile-nav {
		display: none; }

	.mainnav {
		position: relative; }

	.mainnav ul {
		position: absolute;
		display: block;
		top: unset;
		left: 240px;
		width: 300px;
	}

	.mainnav ul li {
		display: inline; }

	.mainnav ul li a {
		float: left;
		font-size: 1.4em;
		padding: 11px 10px 5px;
		/* margin: 0 5px; */
		width: auto; }

	.mainnav ul li.last a {
		margin-right: 0; }

}




	
/*******
			Top Nav 
********/	

.tiny-layout .topnav {
	display: none;
}

.topnav {
	position: absolute;
	top: 0;
	right: 0;
	/* background: #333; */
	width: 70%; }
	
.tiny .topnav,
.narrow .topnav {
	height: 26px;
	background: #333; }

/* medium */
.topnav ul {
	padding-top: 8px;
	right: 0;
	background: #000;
	float: right;
	margin-right: 12px;}
	
/* tiny and narrow */
.tiny .topnav ul,
.narrow .topnav ul {
	top: 0;
	right: 0;
	width: 100%; 
	background: #333; }
	
.topnav ul li a,
.topnav .location-item {
	display: block;
	float: left;
	color: #999999;
    font-size: 1.4em;
	padding: 6px 4px; }
	
.topnav .location-item.active {
	text-decoration: none;
	color: #CCCCCC;}
	
.topnav ul li a:hover,
.topnav .location-item:hover {
	color: #CCCCCC;
	text-decoration: none;}
	
	
/* .topnav ul li.last a {
	padding-right: 0; } */
	
.topnav ul li span.pipe {
	display: block;
	float: left;
	color: #bbb;
    font-size: 1.2em;
	padding: 6px 2px 0; }
	
.topnav ul li {
	display: block;
	float: left;
}
	
.topnav ul li.globe {		background-position: 15px 6px; }
.topnav ul li.login {		background-position: 15px -18px; }
.topnav ul li.chat {		background-position: 15px -41px; }
.topnav ul li.search {		background-position: 15px -65px; }

/*
.topnav ul li.facebook {	background-position: 15px -95px; }
.topnav ul li.youtube {	background-position: 15px -95px; }
.topnav ul li.linkedin {
	background-position: 15px -95px;
}
*/

.linkedin	{				/* 05/19 move youtube logo to the right*/
	position:relative;
	right:-54px;
	top:-5px;
	background: none;
	width: 50px;  /* vc */
}

.facebook	{				/* 05/19 move facebook logo to the right*/
	position:relative;
	right:-5px;
	top:-7px;
	width: 30px;  /* vc */
}

.youtube	{				/* 05/19 move youtube logo to the right*/
	position:relative;
	right:-30px;
	top:-5px;
	width: 120px;  /* vc */
}


	
/*******
			CALLOUT
********/

.callout.banner {
	background: #444; }
	
.callout.banner .inner {
	height: 364px;
	position: relative; }

.callout.banner .content {
	padding: 3%; }
	
.callout .content {
	/* background: #444; */
	background: #222968;
	color: #fff;
	padding: 3%;
	width: 94%;
	position: absolute;
	right: 0; }

.callout .banner .content h1,
.callout .banner .content h2 {
	color: #FFFFFF;
}

/*******
			HOME PAGE SLIDES
********/

.callout.homepage {
	position: relative;
	margin-bottom: 20px; 
	height: 550px; }       /* used to be 344px*/

.callout.homepage .slide,
.callout.homepage .banner {
	width: 100%;
	height: 100%;
	background: #444; 
 	position: absolute; 
	top: 0; 
	right: 0; 
	overflow: hidden;
}

.callout.homepage .banner {
	background-color: #222968;
}
	
.callout.homepage .slide .inner,
.callout.homepage .banner .inner {
	width: 980px;
	margin: 0 auto; }
	
.callout.homepage .slide .content .readmore,
.callout.homepage .banner .content .readmore {
	font-size: 1.2em; 
	text-transform: uppercase; 
	background: url('../images/read-more-arrow.png') no-repeat 77px 0;
	padding-right: 15px; }
	
.callout.homepage .slide .content .readmore:hover,
.callout.homepage .banner .content .readmore:hover {
	color: #fff;
	text-decoration: none;
	background-position: 77px -27px;
}
	
	


.tiny-layout .main .homepage .content,
.narrow-layout .main .homepage .content,
.medium-layout .main .homepage .content {
	margin: 3% 5%; }

	
	

/* medium layout 

.medium-layout .callout .inner {
	position: relative; 
	height: 235px;
	height: auto;	
} 
	
.medium-layout .callout.homepage .image {
	height: 235px;
	width: 812px;
	background-position: top center; }
	
.medium-layout .callout.homepage .content {
	position: absolute;
	top: 0;
	right: 0;
	width: 295px;
	height: 185px;
	padding: 50px 0 0 40px;
	padding: 50px 8% 0 4%;	}
	
.medium-layout .callout.homepage .slide h1 {
	font-size: 2em; }
	
.medium-layout .callout.homepage .slide h2 {
	font-size: 1.6em; }
	
.medium-layout .callout.homepage .content .arrow {
	background: url('../images/callout-arrow.png') no-repeat 20px 20px; 
	display: block;
    height: 54px;
    padding: 20px;
    position: absolute;
    right: 10px;
    top: 63px;
    width: 29px; }
*/	

.medium-layout .callout.homepage {
	height: 590px;
}

/* .medium-layout .callout.homepage .slide {
	height: 540px;
} */

.medium-layout .slideNav .arrow {
		background: url("../images/callout-arrow.png") no-repeat scroll 20px 20px rgba(0, 0, 0, 0);
		display: block;
		height: 54px;
		padding: 20px;
		position: absolute;
		top: 100px;
		width: 29px;
		z-index: 4;
	}
	
.medium-layout .slideNav .arrow.left {
	background-position: 20px -125px;
	left: 0;
}
	
.medium-layout .slideNav .arrow.right {
	background-position: 20px 20px;
	right: 0;
}
	
	

/* narrow / tiny layout */
	
.tiny-layout .callout.banner .image,
.narrow-layout .callout.banner .image,
.tiny-layout .callout.homepage .image,
.narrow-layout .callout.homepage .image {
	/* height: 182px; */
	background-position: center top; }

.tiny-layout .callout.homepage,
.narrow-layout .callout.homepage {
	position: relative; 
	/* height: 300px;  */}
	
.tiny-layout .callout.homepage .slide .content,
.narrow-layout .callout.homepage .slide .content,
.tiny-layout .callout.homepage .banner .content,
.narrow-layout .callout.homepage .banner .content {
	padding: 3% 22% 3% 4%;	
	width: 74%;
	position: relative; }

.tiny-layout .callout.homepage,
.narrow-layout .callout.homepage {
	height: 580px;
}
	
.tiny-layout .callout.homepage .slide h1,
.narrow-layout .callout.homepage .slide h1,
.tiny-layout .callout.homepage .banner h1,
.narrow-layout .callout.homepage .banner h1 {
	font-size: 1.8em; 
	color: #fff;
}

.tiny-layout .callout.homepage .banner h1,
.narrow-layout .callout.homepage .banner h1 {
	color: #FFF;
}

.tiny-layout .callout.homepage .slide h2,
.narrow-layout .callout.homepage .slide h2,
.tiny-layout .callout.homepage .banner h2,
.narrow-layout .callout.homepage .banner h2 {
	font-size: 1.5em;
	color: #fff;
}

.tiny-layout .callout.homepage .banner h2,
.narrow-layout .callout.homepage .banner h2 {
	color: #FFFFFF;
}
	
.tiny-layout .callout.homepage .content .arrow,
.narrow-layout .callout.homepage .content .arrow {
	background: url('../images/callout-arrow.png') no-repeat 20px 20px; 
	display: block;
    height: 54px;
    padding: 20px;
    position: absolute;
    right: 10px;
    top: 15px;
    width: 29px; }

	
	

/********
		PAGE INTRO
*********/

.pageheading {
	margin: 20px 0; }

.pageintro {
	color: #767676; 
	font-size: 1.6em;
	line-height: 1.2em; 
	text-align:justify;
	}
	
#popups .pageintro {
	margin-left: 15px; }
	
	
	
/*******
			GREY COLUMN
********/	

.main.grey-bg .inner {
	width: 100%; 
	min-height: 400px;}
	
.main.grey-bg .inner .left.two-thirds {
	padding: 2%; }

.tiny-layout .col.third.grey-bg,
.narrow-layout .col.third.grey-bg {
	width: 90%;
	padding: 20px 5%;
	min-height: inherit; }

.col.third.grey-bg {
	background: #D1D1D1;
    padding: 20px;
    width: 284px; 
	height: 96%; /** Not 100% because of padding at top **/
	position: relative;
	margin-bottom: 20px;
}
	
.col.third.grey-bg.left {
	padding: 3%; }
	
.col.third.grey-bg.right {
	right: 0; }
	
	
.tiny-layout .outer,
.narrow-layout .outer {
	display: none; }	
	
/* right col outer */
.main.grey-bg .outer {
	background: #d1d1d1;
	width: 30%;
	height: 100%; 
	position: absolute;
	top: 0; }
	
.main.grey-bg .outer.left {
	left: 0; }
	
.main.grey-bg .outer.right {
	right: 0; }	
	
	
	
/***** LINKS / BUTTONS ******/

a.link {
	display: inline-block;
	font-size: 1.5em; 
	font-weight: bold; }
	
a.link:hover {
	text-decoration: none; }

.link.blue {
	color: #2392D2; }
	
.link.blue-bg {
	background: none repeat scroll 0 0 #1DA8E9;
    color: #FFFFFF;
    padding: 7px 8px; 
	margin: 8px 0; }
	
.link.grey {
	color: #888; }
	
.link.uppercase {
	text-transform: uppercase; }
	
.link.readmore {
	font-size: 0.8em;
	float: right;
	font-weight: normal; 
	margin: 10px 0 0; }
	
.link.readmore:hover {
	color: #333; }
	
.link.small {
	font-weight: normal;
	font-size: 1.3em; }
	
.link.small:hover {
	color: #333; }
	
	
	
/*******
			Silverstripe page type 'Page'
			turns on bullets  07/17
********/

.main-content ul {
	margin-top: 10px;
	margin-bottom: 30px; 
	margin-left: 27px; 	
}	

.main-content ul li {
	font-size: 1.4em;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 5px;       
	list-style-type: disc;
	padding-left:10px;
}

		
/*******
			HOME PAGE
********/
	
.contact-line {
	text-align: center; }
	


	
/*******
			HOME PAGE FEATURED INTROS
********/
	
.featured-intros {
	border-top: 1px dashed #ccc; 
	border-bottom: 1px dashed #ccc;
	padding: 15px 0;
	margin: 30px 0; }
	
.tiny-layout .featured-intros {
	width: 95%; 
	margin: 30px auto; }
	
.narrow-layout .featured-intros,
.medium-layout .featured-intros {
	width: 90%;
	margin: 30px auto; }
	
.featured-intros .col.left {
	width: 100%;
	float: none; 
	clear: both; }
	
.pages {
	padding: 0 19px; 
	border-right: 1px solid #9c9c9c; }
	
.tiny-layout .featured-intros .col.left,
.narrow-layout .featured-intros .col.left,
.medium-layout .featured-intros .col.left {
	padding: 0 3%; 
	width: 94%; }
	
.pages h3 {
	text-transform: uppercase;
	font-size: 1.2em;
	color: #888; 
	margin-bottom: 8px; }

.pages .text h2 {
	font-size: 1.7em;
	line-height: 1.1em; }
	
.pages .text {
	width: 55%;				/*used to be 50%*/
	float: left; 
	min-height: 120px;
	position: relative; }
	
.tiny-layout .pages .text,
.narrow-layout .pages .text,
.medium-layout .pages .text {
	margin: 0 0 20px; }
	
.pages img {	float: right;}
/* 
.tiny-layout .pages img,
.narrow-layout .pages img {
	margin-right: 45px; } */
	
.pages a {
	text-transform: uppercase;
	font-size: 1.2em; 
	font-weight: bold;
	position: absolute;
	bottom: 0; }
	
.tiny-layout .pages a,
.narrow-layout .pages a,
.medium-layout .pages a {
	position: static; }
	
.home-links {
	padding-left: 15px; }

.tiny-layout .home-links,
.narrow-layout .home-links {
	margin: 136px 0 0; 
	padding: 0; }
	
.home-links .pagelink {
	display: block;
	height: 55px;
	background: #eeeeee; 
	position: relative; }
	
.medium-layout .home-links .pagelink {
	width: 48%; 
	float: left; }

.medium-layout .home-links .pagelink.pos-2 {
	float: right; }
	
.tiny-layout .home-links .pagelink {
	height: auto; }
	
.narrow-layout .home-links .pagelink {
	margin: 10px 0; }
	
.home-links .pagelink:hover {
	background: #cdcbcb; 
	text-decoration: none; }
	
.home-links .pagelink.pos-1 {
	margin-bottom: 10px; }
	
.home-links .pagelink img {
	position: absolute;
	bottom: 0; }
	
.home-links .pagelink .text {
	width: 100%; 
	margin-left: 95px; }
	
.medium-layout .home-links .pagelink .text {
	width: 100%; 
	margin-left: 125px; }
	
.home-links .pagelink .text h2 {
	color: #000;
	font-size: 1.7em;
	margin: 0;
	padding: 8px 0 0; }
	
.home-links .pagelink .text p {
	text-transform: uppercase;
	font-size: 1.2em; 
	font-weight: bold;}
	
	
/*******
			PROJECTS PAGE
********/

/* landing page */

.study {
	margin: 0 20px 20px 0; 
	border-bottom: 1px solid #ccc; 
	padding-bottom: 8px; }

.study img {
	float: left;
	margin-right: 20px; }
	
.study h3 {
	margin: 0 0 10px; }

.tiny-layout .study h3,	
.narrow-layout .study h3 {
	font-size: 1.5em; }
	
.study h3 a {
	color: #000000;
    display: block; }
	
.study h3 a:hover {
	text-decoration: none; 
	color: #2392D2; }

	
/* Single case study page */
	
.callout.banner.case-study {
	background: #D1D1D1; }
	
.callout.banner.case-study .image {
	right: 0; }
	
.callout.banner.case-study .content h1 {
	font-size: 2.6em; 
	color: #fff; 
	margin: 10px 0; }
	
.specifications h4 {
	margin-bottom: 30px; }
	
.specifications p {
	font-size: 1.8em;
	margin: 0 0 5px; }
	
/* Small devices */
	
.tiny-layout .callout.banner.case-study .inner,
.narrow-layout .callout.banner.case-study .inner {
	height: 250px; 
	width: 100%; }
	
.tiny-layout .callout.banner.case-study .content,
.narrow-layout .callout.banner.case-study .content {
	height: auto; 
	width: 96%;
	padding: 2%;
	bottom: 0; }
	
.tiny-layout .callout.banner.case-study .content h1,
.narrow-layout .callout.banner.case-study .content h1 {
	font-size: 1.8em; }

	
	
/*******
			PRODUCT PAGE
********/

/* product search */

.search.products .searchicon {
	background: url('../images/search-icon-black.png') no-repeat; 
	width: 20px; }

	
.main.products .col.right.two-thirds {
	min-height: 425px; }
	
	
/* product menu */

.product-menu {
	margin: 15px 0; }

.product-menu li {
	margin: 8px 0; }
	
.product-menu li .openclose {
	font-size: 1.5em;
	display: block;
	float: left;
	width: 20px;
	height: 15px;
	cursor: pointer; 
	background: url('../images/product-open-close.png') no-repeat; }
	
.product-menu li .openclose.open {
	background-position: 0 -72px; }
	
.product-menu li .spacer {
	display: block;
	float: left;
	width: 20px;
	height: 15px; }

.product-menu li a,
.product-menu li .trigger {
	color: #000;
	font-size: 1.5em; }

.product-menu li a:hover {
	text-decoration: none; 
	color: #757575; }
	
.product-menu li ul li a {
	font-size: 1.5em; 
	margin-left: 35px; }

.product-menu li.current a {	
	color: #757575; }
	
.product-menu li.current ul li a {
	color: #000; }
	
	
.category-intro {/* 
	width: auto;
	width: 63%; */
	background: #444;
	color: #fff;
	padding: 30px 30px 30px 25px; 
	/* float: left;  */
	margin: 0 0 30px 305px; }
	
.category-intro h1 {
	margin: 0; 
	font-size: 2.6em; }

.breadcrumbs p {
	color: #999;
	font-size: 1.3em;
	margin: 0; }
	
.breadcrumbs p a {
	color: #999;
	font-size: 1em; }
	
	
.breadcrumbs p .separator {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: url('../images/product-breadcrumb-arrow.png') no-repeat; }

	
	
/* Product landing page */
	
.product-landingpg h2 {
	border-bottom: 1px solid #000; 
	font-size: 2.2em;
	margin: 15px 0; }
	
.product.category {
	min-height: 212px; }

	
/* product display */

.product {
	width: 41%;
	min-height: 265px; 
	padding: 2%;
	float: left; 
	border: 3px solid #99ccff; /* used to be #dfdfdf, used to be 1px */
	margin: 1%; 				/* used to be 2% */
	position: relative; }	
	
.product:hover {
	text-decoration: none; 
	border: 3px solid #0099ff; } /* used to be #bbb, used to be 1px */
	
	
	/*
.product.pos-4,
.product.pos-7,
.product.pos-10,
.product.pos-13,
.product.pos-16,
.product.pos-19 {
	clear: left; }
	*/
/* .product a {
	display: block;
	height: 178px;
	padding: 0 0 15px; } */
	
.product a .title,
.product.category .title {
	font-size: 1.6em;
	color: #000; 
	margin: 0 0 5px; 			/* used to be 10px  move product title up by 5px */
	display: block; 
	line-height: 1.1em; }
	
.product a .subtitle {
	font-size: 1.3em;
	color: #555; 
	margin: 0 0 10px; 
	display: block; 
	line-height: 1.1em;
	background: #FFF;
}

.product .intro-image {
	width: 90%;
	height: 150px;
	overflow: hidden; 
	margin: 0 auto 15px; 
	position: absolute;   	/* used to be commented out */
	top: 78px; 				/* used to be commented out, position product thumbnails vertially center  used to be, 70px*/
}							/* z-index: -1, not commented out, stops product thumbnails becoming links */
	
	
.product .intro-image img {
	display: block;
	margin: 0 auto; 
	}
	
/* 	
.product .intro-image.landscape img {
	width: 100%;
	height: auto; }
	
.product .intro-image.portrait img {
	width: auto;
	height: 100%; 
	display: block;
	margin: 0 auto;} */
	
/* .product .intro-image img {
	width: 100%;
	margin: 0 0 5px;  } */
	
.product a:hover,
.product .attachments a.product-pdf:hover {
	text-decoration: none; }
	
.product a:hover .title,
.product .attachments a.product-pdf:hover {
	color: #2392D2; }
	
.product .attachments {
	/*max-height: 52px; */
	position: absolute;
	bottom: 9px; }
	
.product .attachments a.product-pdf {
	display: block;
	font-size: 1.2em; 
	color: #6e6e6e; 
	padding: 0 0 2px; 
	/* height: auto; */ }
	
.product .attachments a.product-pdf span {
	display: block;
	float: left;
	width: 15px;
	height: 12px;
	margin-right: 5px;
	background: url('../images/product-download-icons.jpg') no-repeat 0 2px; }
	
.product .attachments a.product-pdf:hover span {
	background-position: -16px 2px; }
	
.product .attachments a.product-pdf.installation span {
	background-position: 0 -19px; }
	
.product .attachments a.product-pdf.installation:hover span {
	background-position: -16px -19px; }
	
	
/** Product Popups **/
/* 
.product.popup-area {
	width: 91.6%;
	float: none; 
	position: absolute;
	top: 296px; 
	background: #fff; }
	
.product.popup-area h3 {
	margin: 5px 6px 10px; }
	
.product.popup-area img {
	width: auto; }
	
.product.popup-area .two-thirds p {
	font-size: 1.3em; }
	
.product.popup-area a.close {
	display: block;
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 45px;
	background: url('../images/product-popup-close.jpg') no-repeat; 
	text-indent: -999em; }
	
	
#popups {
	position: relative; 
	width: 68%; }
	
#popups .popup-background {
	background: url('../images/product-popup-bg.png');
	position: absolute;
	width: 100%;
	height: 100%; 
	top: 0;
	left: 0;
	z-index: 2; }
	
#popups .product-descriptions {
	position: absolute;
	top: 0;
	z-index: 3;
	width: 100%; } */
	
	
/*** Product pages ***/

.product-page {
	margin: 0 0 30px; 
}
	
.product-page p	{  				/*used to be nothing*/
	text-align:justify;		
}
	
.product-page h3, .main-content h3 {  		/* 3/8/17 css selector '.main-content h3' added to make page type 'page' the same as product page */
	font-size: 1.8em; }
	
.product-page h3.subtitle {
	color: #555; 
	font-size: 1.6em; }
	
.product-image.right {
	float: right;
	margin: 0 0 10px 20px; }
	
.product-page ul {
	margin-top: 10px;
	margin-bottom: 20px; 
	margin-left: 27px; 	
}	

.product-page ul li { 			 /*used to be 8px 15px*/
	font-size: 1.4em;
	line-height: 1.4rem;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 12px;       
	list-style-type: disc;
	padding-left:10px;
}

.product-page .belongs-subcats h4 {
	margin: 15px 15px 15px 0; }
	
.product-page .belongs-subcats ul li {
	font-size: 1.4em; 
	list-style-type: none;
	margin: 8px 0; }
	
.product-page a.link {
	float: right; }
	
.attachments a {
	color: #6E6E6E; }
	
.attachments a:hover {
	color: #2392D2;
	text-decoration: none; }
	
.attachments a.product-pdf span {
    background: url("../images/product-download-icons-large.jpg") no-repeat scroll 0 -2px rgba(0, 0, 0, 0);
    display: block;
    float: left;
    height: 26px;
    margin-right: 5px;
    width: 27px;
}

.attachments a.product-pdf:hover span {
	background-position: -32px -2px; }
	
.attachments a.product-pdf.installation span {
	background-position: 0 -44px; }
	
.attachments a.product-pdf.installation:hover span {
	background-position: -32px -44px; }


	
	
/*******
			ABOUT US - OFFICES PAGE
********/

 /* 08/18 office address layout change, now displayed under each other*/


.content ul.officesnav {
	margin: 0; }
	
.officesnav li {
	display: inline; }
	
.officesnav li a {
	display: block;
	float: left;
	font-size: 1.3em;
	background: #fff;
	color: #333;
	padding: 6px 8px; 
	margin-right: 4px;
	margin-top: 4px;}
	
.officesnav li a:hover,
.officesnav li.active a {
	text-decoration: none;
	background: #2392d2;
	color: #fff; }
	
a.change-country {
	display: block;
	margin: 20px 0 0;
	font-size: 1.4em;
	color: #ccc; }
	
a.change-country:hover {
	color: #2392d2; }
	
.col #offices .office {       /* 08/18 used to be display: block */
	display: block;
}
 /* 08/18 not needed because contact page layout change

.col #offices .office.active {
	display: block;
}
*/	
	
.col #offices .office .text { 				 /* 08/18 reduce vertical spaceing of contact addresses */
	margin: 15px; }

.col #offices .office .text p {				/* 08/18 reduce vertical spaceing of contact addresses */
	margin-bottom: 5px;
}
.col #offices .office .text h3 {			/* 08/18 reduce vertical spaceing of contact addresses */
	margin-bottom: 5px;
}
	
a.map-link {
	color: #555;
	text-transform: uppercase;
	display: block;
	float: right; 
	padding: 5px; 
	margin-right: 25px; 
}
	
.office .map-frame {        /* 08/18 make map smaller */
	margin-top: 0px;
	width: 257px;
	height: 120px;
	border: 1px solid #8A8A8A;  
	margin-left: 13px;
	margin-bottom: 10px;
}
	
.office img {
	position: relative;
	left: -25px; }
	
.firebits-registration-form {
	margin: 15px 0 25px 0; }
	
	
	


/*******
			RESOURCES PAGE
********/
/* 
.resources.col.two-thirds {
	width: 65%; } */
	
	
.member-login-form h3 {
	margin: 0; }
	
.loggedin {
	margin: 10px 0; }

.tiny-layout .resource-groups .resource,
.narrow-layout .resource-groups .resource {
	width: 100%; 
	margin: 0 0 20px 0; }
	
.resource-groups .resource {
	position: relative;
	display: block;
	height: 72px;
	float: left; 
	width: 282px;
	margin: 0 20px 20px 0;
	background-repeat: no-repeat; 
	overflow: hidden; }
	
.resource-groups .resource img {
	position: absolute;
	top: 0;
	right: 0; 
	width: 100%; }
	
.resource-groups .resource h3 { 
	float: left;
	color: #fff;
	font-size: 1.8em;
	background: #1da8e9; 
	padding: 10px;
	margin: 0; 
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1; }
	
/* form */
.inner div.search.resources {
	width: 100%; 
	margin: 40px 0; }
	
.search.resources h3 {
	background: #000;
	color: #fff;
	font-size: 1.6em; 
	line-height: 30px; 
	padding: 6px 20px; 
	float: left; 
    z-index: 1; }
	
.search.resources #SearchForm_SearchForm {
	position: static;
	width: 100%; 
	background: #d1d1d1; }
	
.search.resources #SearchForm_SearchForm .field input {
	background: #d1d1d1;
	margin-left: 173px; 
	width: 42%; }
	
.search.resources .searchicon {
	right: 12px;
	width: 20px;
	background: url('../images/search-icon-black.png') no-repeat; }

	
/***** SINGLE RESOURCE PAGE *****/	

.crumbtrail {
	margin: 10px 0; }

.resource-menu li a {
	font-size: 1.5em; 
	padding: 5px;
	margin: 5px; 
	display: block; 
	color: #000; }
	
.resource-menu li a:hover {
	color: #2392D2; }
	
	
	
	

/*******
			ORDER FORM PAGE
********/	

/***** SALES PRODUCT SEARCH *****/

.salesproduct-search {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 20px 0; }
	
.salesproduct-search label { 
	display: block;
	font-size: 1.4em; 
	width: 150px; 
	line-height: 27px; }

.salesproduct-search input {
	display: block;
	width: 250px; 
	padding: 5px;
	margin: 0 25px 0 0; }
	
	
/* Medium Layout */	
@media ( min-width: 980px ) {
	
	.salesproduct-search label,
	.salesproduct-search input {
		float: left; }
		
}


	
/***** CONFIRMATION PAGE *****/
	
.order-confirmation-details {
	margin: 20px 0; }
	
.order-confirmation-details strong {
	display: block;
	float: left;
	width: 200px; }
	
#order-confirmation {
	width: 100%;
	border-top: 1px solid #ccc; 
	border-left: 1px solid #ccc; 
	margin: 10px 0 30px; 
	border-collapse: collapse; }
	
#order-confirmation tr th,
#order-confirmation tr td {
	text-align: left;
	font-size: 1.4em; 
	border-bottom: 1px solid #ccc; 
	border-right: 1px solid #ccc;
	padding: 8px; }
	
	
	
	



/*******
			FOOTER
********/

footer {
	border-top: 6px solid #000;
	background: #d1d1d1;
	margin: 50px 0 0; 
	color: #777;	
	padding-bottom: 20px; }
	
footer .inner {
	}
	
/* Search */

.tiny-layout footer .inner div.search,
.narrow-layout footer .inner div.search {
	margin-left: 5%; }

.inner div.search {
	width: 300px;
	height: 40px;
	margin: 15px 0;
	position: relative; }
	
#SearchForm_SearchForm {	
	position: absolute; 
	top: 0;
	left: 0; }
	
#SearchForm_SearchForm .field input {
	border: 0; 
	padding: 8px; 
	width: 300px; }
	
#SearchForm_SearchForm #SearchForm_SearchForm_action_results {
	display: none; }
	
.searchicon {
	background: url('../images/header-icons.png') no-repeat 0 -65px;
	width: 16px;
	height: 20px; 
	position: absolute; 
	top: 12px;
	right: -7px;
	z-index: 2; }
	

	
/* Nav */

footer .col {
	margin: 15px 0; }
	
.tiny-layout footer .col.quarter,
.narrow-layout footer .col.quarter,
.tiny-layout footer .col.one-three, 		/* 8/17 added when 'Subscribe to Pertronic News' was added to the footer*/
.narrow-layout footer .col.one-three {
	margin: 15px 2% 15px 10%;
    width: 100%; }
	
footer .col.quarter {
	margin: 15px 1% 15px 10px;
    width: 28%; } 					 /* 8/17 used to be 22.6%*/
	
footer .col.one-three {				/* 8/17 added when 'Subscribe to Pertronic News' was added to the footer*/
	margin: 15px 1% 15px 10px;
    width: 14%; }
	
footer h4 {
	color: #777;
	font-size: 1.6em; 
	margin: 0 0 15px;
	text-indent: -10px; 
	text-transform: none; 
	border: 0;
	padding: 0; }
	
.medium-layout footer .col.right h4,
.wide-layout footer .col.right h4,
footer .col.right .offices h4 {
	text-indent: 0; }
	
footer a {
	color: #777; }
	
footer ul li {
	margin: 0 0 5px -8px; }
	
footer ul li a {
	display: block;
	color: #777;
	font-size: 1.2em; }
	
	
footer .col.contact-us p {
	margin: 0 0 5px; }
	
footer .col.contact-us {					/*added to adjust to the offices phone numbers to the right   stu*/
		margin: 13px 15px 0 0;
	}
	
footer .col.contact-us .offices {
	margin: 15px 0 0; }
	
footer .col.contact-us .offices h4 {
	text-transform: uppercase; 
	font-size: 1.3em; 
	font-weight: bold;
	margin: 0 0 10px; }
	
footer .col.contact-us .offices a {
	text-decoration: underline; 
	font-size: 0.85em; }



.legal {
	text-align: center;
	font-size: 1.2em; }
	
	
	

/*******
			WIDGETS
********/
	
.WidgetHolder {
	margin-bottom: 20px; 
	border-bottom: 1px solid #737373;
	padding-bottom: 20px; }
	
.WidgetHolder:last-child {
	border: 0;
	padding: 0; 
	margin: 20px 0 40px; }
	
.ContactWgtnWidget {
	border: 0; 
	height: 107px; }
	
.calculators h3 {
	margin: 0 0 5px; }
	
.calculators a {
	color: #000;
	display: block; 
	font-size: 1.4em; 
	padding: 3px 0; 
	text-indent: 15px; }

	
.contact-widget {
	background: #fff;
	margin: 20px 25px 0 0; 
	padding: 20px 30px 20px 30px;
	position: absolute;
	left: 0; }
	
.contact-widget h3 {
	margin: 0; 
	font-size: 1.9em; }
	
	
	
	
/********
		FIRE BITS REGISTRATION FORM
*********/

.FireBitsWidget h3 {
	margin: 0; }
	
.FireBitsWidget p {
	margin: 0 0 5px; }

.FireBitsWidget form .field {
	position: relative;
	/* height: 30px; */ }
	
.FireBitsWidget form .field label {
	color: #ccc; }
	
.FireBitsWidget form .field input,
.FireBitsWidget form .field textarea { 
	border: 0;
	font-size: 1.2em;
	color: #000; }
	
.FireBitsWidget form .field textarea {
	height: 40px; }
	
.FireBitsWidget form .Actions input {
	background: #000; }
	
	
	
/*******
			CODE PAGE
********/
	
.main.code-page .main-content {
	margin-top: 20px;
	padding-right: 0;}
	

	
/*******
			SEARCH
********/
	
.search-result .introduction {
	font-size: 1.4em;
	line-height: 1.4em;
	padding-bottom: 10px;}
	
.search-result .introduction p {
	font-size: 1em;
	margin-bottom: 0;}
	
.col.left.third.grey-bg .search.products form {
	max-width: 275px;}
	
.search-result {
	border-top: 1px solid #CCCCCC;
	padding-top: 2em;
	margin-top: 2em;
}

.search-result.product-result {
	padding-left: 100px;
	position: relative;
}

.search-result.product-result .product-image {
	position: absolute;
	left: 0;
	top: 2em;
}

.search-result-filter {
	background: #EEEEEE;
	padding: 0.4em 1em;
	margin-right: 0.8em;
	margin-bottom: 0.8em;
	display: inline-block;
	text-decoration: none !important;
}

.search-result-filter:hover {
	background: #DDDDDD;
}

.search-result-filter.active {
	color: #FFFFFF;
	background: #000000;
}

.search.resources form {
	max-width: none;
}

.search.resources form input[type=text] {
	padding: 2.5%;
}

.search.resources form .field {
	margin: 0;
}


	
/*******
			PAGINATION
********/

.pagination {
	text-align: center;
	font-size: 1.2em;
	padding-top: 3em;
	border-top: 3px solid #CCCCCC;
	margin-top: 3em;
}

.pagination .current-page {
	color: #AAAAAA;
	padding: 0 1em;
}



/*******
	MOBILE CHANGES
********/

/** About and Contact office look up boxes **/
/* Move select office links for iPad portrait and below */	
@media (max-width: 1000px) {

	.banner{
		height: 600px;
	}
	.callout.homepage .slide,
	.callout.homepage .banner {
		height: 100%;
	}
		
	.callout.homepage .slide .inner,
	.callout.homepage .banner .inner {
		width: 100%; }
		
	.callout.homepage .slide .image img,
	.callout.homepage .banner .image img
	{
		width: 100%; }
		
	.products .category-intro {
		margin: 0; 
		width: 90%;
		padding: 30px 5%; }
		
	.main.products .col.right.two-thirds {
		width: 90%;
		padding: 0 5%; }
	
	.AboutUsPage .callout .inner {
		height: 180px; 
		overflow: hidden; }
		
	.OfficeHolderPage .callout.banner {
		height: 200px; }
		
	.mobile-select-office {
		padding: 20px;
		width: 284px; 
		background: #444444; }
		
	.mobile-select-office h2 {
		color: #fff; }
	
}


/* --- phone etc --- */
@media (max-width: 650px) {

	header .inner {
		height: 100px;
	}

	header .inner .hotline{
		background-color: transparent;
		float: left;
		padding-top: 0;
		text-align: center;
		width: 100%;
	}
	
	.topnav ul li.youtube {
		padding-left: 0;
	}
	
	header .mainnav {
		position: relative;
		top: 60px;
	}
	
	/* homepage slider */
	.callout.homepage {
		/*height: 540px;*/
		height: 340px;
		position: relative;
	}
	
/* 	.callout.homepage .slide .inner {
		width: auto;
	} */
	
	.callout.homepage .slide .inner .content {
		/* height: 155px; */
		width: 75%;
	}
	
	.callout.homepage .slide .inner .content .readmore {
		position: static;
		/* left: 4%;
		bottom: 15px; */
	}
	
	.slideNav .arrow {
		background: url("../images/callout-arrow.png") no-repeat scroll 20px 20px rgba(0, 0, 0, 0);
		display: block;
		height: 54px;
		padding: 20px;
		position: absolute;
		top: 50px;				
		width: 29px;
		z-index: 4;
	}
	
	.slideNav .arrow.left {
		background-position: 20px -125px;
		left: 0;
	}
	
	.slideNav .arrow.right {
		background-position: 20px 20px;
		right: 0;
	}
	
	/* main */
	.category-intro {
		margin: 0;
	}
	
	
	/* footer */
	.inner div.search {
		width: auto;
	}

}

@media (max-width: 520px) {
	
	.callout.homepage {
		height: 300px;
		background-color: aquamarine;
	}
	
}

@media (max-width: 450px) {


	.slideNav .arrow {
		top: 5px; }
	
	.product-image.right {
		float: none; 
		margin: 0 0 10px; }
		
	.product-image.right img {
		display: block;
		margin: 0 auto; }


}

	
.tiny-layout .mobile-select-office, 
.narrow-layout .mobile-select-office {
	padding: 20px 5%;
	width: 90%; }
		
.highlight {					/* highlight search terms */
	font-weight: bolder;
}

.middle {
	vertical-align:middle;		/* table cell align center */
}

.table p	{
	margin-bottom:0px;			/* used for software download page, table cell p */
}

.bottom {
	vertical-align:bottom;		/* table cell align bottom */
}

.link a  {						/* link text colour blue*/
	color: #043EF9;
	text-decoration: none;
}

.link a:hover {						/* on hover unline text*/		
	text-decoration: underline;
}

.center { 							/* alignment of news & project-profile icons RSS div */	
	margin-left:35px;
	width: 70%;
}

.center-text {						/* vertical align of News & Projects text */
	vertical-align: 2px;
}

.twitter	{ 						/* alignment of tweet button on news blog */
	position: relative;
	top: 4px;
	left: 1px;
}
.google-plus	{ 						/* alignment of tgoogle-plus button on news blog */
	position: relative;
	top: 5.5px;
	left: 2px;
}

/* ORDERING INFO */
.ordering-info-table{
	display: table;
	width: 100%;
}
.ordering-info-table .ordering-info-row{
	display: table-row;
}

.ordering-info-table .ordering-info-row .ordering-info-left-has-discontinued-products,
.ordering-info-table .ordering-info-row .ordering-info-centre-has-discontinued-products,
.ordering-info-table .ordering-info-row .ordering-info-right-has-discontinued-products,
.ordering-info-table .ordering-info-row .ordering-info-left-no-discontinued-products,
.ordering-info-table .ordering-info-row .ordering-info-left-no-discontinued-products,
.ordering-info-table .ordering-info-row .ordering-info-left-no-discontinued-products{
	display: table-cell;
}

.ordering-info-table .ordering-info-row .ordering-info-left-has-discontinued-products,
.ordering-info-table .ordering-info-row .ordering-info-centre-has-discontinued-products,
.ordering-info-table .ordering-info-row .ordering-info-left-no-discontinued-products,
.ordering-info-table .ordering-info-row .ordering-info-centre-no-discontinued-products{
	padding-right: 1rem;
}

.ordering-info-table .ordering-info-row .ordering-info-left-has-discontinued-products,
.ordering-info-table .ordering-info-row .ordering-info-left-no-discontinued-products{
	white-space: nowrap;
}

.ordering-info-table .ordering-info-row .ordering-info-right-has-discontinued-products{
	width: 15%;
}

/* MEDIA QUERIES */
/* Extra small */
@media only screen and (max-width: 576px){
	body{
		//background-color: red;
	}
	.main .inner, footer .inner{
		width: 98%;
		margin: 0 auto;
	}

	.tiny-layout .callout.homepage,
	.narrow-layout .callout.homepage{
		height: 400px;
		width: 100%;
	}

	.tiny-layout .callout.homepage .slide .content,
	.narrow-layout .callout.homepage .slide .content,
	.tiny-layout .callout.homepage .banner .content,
	.narrow-layout .callout.homepage .banner .content{
		width: 100%;
		padding: 1rem;
		box-sizing: border-box;
	}

	body .HomePage .callout.homepage .slide,
	body .HomePage.callout.homepage .banner{
		height: 400px;
	}

	#promoPhoto{
		height: unset!important;
	}
}

/* Medium */
@media only screen and (min-width: 577px) and (max-width: 767px){

	body{
		//background-color: plum;
	}

	.HomePage .callout.homepage .slide,
	.HomePage.callout.homepage .banner{
		height: 500px;
	}

	.HomePage .callout .banner .inner #promoPhoto {
		height: auto!important;
	}

	.HomePage .callout .banner .inner .content {
	}

	.main .inner, footer .inner{
		width: 98%;
		margin: 0 auto;
	}

}
/* Large */
@media only screen and (min-width: 768px) and (max-width: 991px){
	body{
		//background-color: aquamarine;
	}

	header .inner{
		height: 166px;
	}

	.topnav ul li{
		padding-left: 0.5rem;
	}

	.mainnav{
		width: 50%;
		float: right;
		top: 70px;
	}

	.mainnav ul{
		width: 100%;
		float: left;
		left: unset;
		top: unset;
	}

	.main .inner, footer .inner{
		width: 98%;
		margin: 0 auto;
	}

	#promoPhoto{
		height: unset!important;
	}
}

@media (max-width: 992px) {

	.callout.banner .inner {
		width: 100%;
	}

}

@media only screen and (min-width: 992px) and (max-width: 1200px){
	html body{
		/* background-color: coral; */
	}

	html body .callout.homepage{
		height: 570px;
	}
	html body .banner .inner .image{
		height: auto!important;
	}
	html body .banner .inner .content{
		height: 120px;
		padding: 1rem;
		right: unset;
		width: auto;
	}

	html body .mainnav ul{
		width: auto;
	}

	.main .inner,
	footer .inner{
		width: 980px;
		margin: 0 auto;
	}

	.callout .image {
		width: 100%;
		max-height: 500px;
	}

	#promoPhoto img {
		width: 100%;
	}

}

@media (max-width: 992px) and (orientation: landscape) {
	html body {
		//background-color: hotpink;
	}

	.HomePage .callout.homepage{
		height: 600px;
	}

	.HomePage .callout.homepage .slide .inner,
	.HomePage .callout.homepage .banner .inner {
		width: 100%;
	}

	.HomePage .callout .banner .inner .content {
		background: #444;
		background: #222968;
		color: #fff;
		padding: 3%;
		width: 94%;
		position: absolute;
		right: 0;
		top: auto;
	}

	#promoPhoto{
		right: 0!important;
	}
}