/* CSS for contact-sales page 
----------------------------------*/
/* Fix SVG in <img> tags not scaling in IE9, IE10, IE11
 * Yet another reason why Microsoft browsers are so despised.
 *
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src$=".svg"] {
	width: 100%;
}

/* 2 */
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
	img[src$=".svg"] {
		width: 100%;
	}
}

.full-width-bg {
	/*background: url(../images/bg-contact-sales.jpg) no-repeat;*/
	background: url(../images/625285316-contact-sales.jpg) no-repeat;
	padding: 75px 5%;
	/* 5% padding left and right is manditory to match other sections */

	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-position: center center;
}

/* Size up only text on page */
.thirds-single-column p {
	font-size: 18px;
}

/* Hide usemap border */
area:focus {
	border: none;
	outline-style: none;
	-moz-outline-style: none;
}

#worldMapWrapper {
	position: relative;
}

#salesTeam {
	position: absolute;
	top: 0;
	left: 0;
}

.textElement h4 {
	line-height: 1.5rem !important;
}

/* Modal
-----------------------------------*/
/* The Modal (background) */
.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	/*z-index: 1;*/
	/* Sit on top */
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Turn ON - Bios maybe taller than bio's length so if user cann't scroll, they cann't see bio. Turn OFF - Stops modal from having it's own scrollbar; happens becasue of object positioning */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/ opacity */
}

/* Modal Content/Box */
#modal-content {
	position: relative;
	/*background-color: #fefefe;*/
	background: url(../images/sales-bio-card-bg.png) repeat-x;
	background-position: 0 -35px;
	/* from left, from top */
	margin: 15% auto;
	/* Place box 15% from the top and centered */
	/*padding: 1.5%;*/
	padding: 10px;
	border: 1px solid #888;
	width: 60%;
	/* Could be more or less, depending on screen size */

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	/* future proofing */
	-khtml-border-radius: 4px;
	/* for old Konqueror browsers */
}

#salesEmailLink,
#salesEmail {
	margin: 0.6rem 0 0 0 !important;
	/* Stops long word (like email addy) from sticking out of container */
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
	font-size: 13px;
}

#salesBioInfo {
	width: 73%;
}

#salesContactInfo {
	width: 35%;
	max-width: 200px;
	/* Don't exceed size of sales person picture 233px */
	display: block;
}

#salesPerson {
	color: #fff;
	line-height: 1.0;
	padding-top: 3px;
}

#salesTitle {
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
}

#salesBio {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;

	overflow: hidden;
	position: relative;
	padding-top: 7px;
	margin-bottom: 0;
}


.height-collapsed {
	max-height: 148px;
}

.height-natural {
	max-height: 1000px;
}

.trigger {
	color: #53b044;
}

/* The Close Button */
.close {
	position: absolute;
	top: 0;
	right: 10px;
	color: #fff;
	font-size: 28px;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

section#contents.contents {
	background-color: #ececd6;
}

/* Sales associates 
----------------------------------------*/

/* Remove space beneath Salesperson name (default is 1rem) */
#articleExtraWht .columns.equal .element h2 {
	margin: 0 0 0.7rem;
}

#articleExtraWht .main .element {
	margin-bottom: 0 !important;
}

#articleExtraWht {
	margin-bottom: 75px;
}

#channelEngeerTitle,
#channelMngrTitle {
	margin-top: 75px;
}

#detailWhtSection {
	background-color: #f9f7f2;
}

.sec-page .contents .columns.equal .right h2,
.sec-page .contents .columns.equal .left h2,
.sec-page .contents .columns.equal .left .element,
.sec-page .contents .columns.equal .right .element {
	background-color: transparent;
}

.tap-target {
	margin: 6px 0;
}


@media screen and (max-width: 1250px) {

	#salesBioInfo {
		width: 68%;
	}
}

@media screen and (max-width: 1100px) {

	#salesBioInfo {
		width: 65%;
	}
}

@media screen and (max-width: 1000px) {

	#salesBioInfo {
		width: 60%;
	}
}

@media screen and (max-width: 768px) {

	.full-width-bg {
		padding: 55px 5%;
		/* 5% padding left and right is manditory to match other sections */
	}

	#articleExtraWht {
		margin-bottom: 55px;
	}

	.thirds-single-column p {
		font-size: 16px;
	}

	#modal-content {
		width: 70%;
		background-position: 0 -45px;
		/* from left, from top */
	}

	#channelEngeerTitle,
	#channelMngrTitle {
		margin-top: 55px;
	}
}

@media screen and (max-width: 640px) {

	#modal-content {
		width: 75%
	}

	/* Reduce margin when two columns stack together */
	#articleExtraWht .columns.equal .right .element {
		margin-top: 0.7rem;
	}

	/* Remove margin when 1st columns stack together */
	#articleDetailWht .columns.equal .left .element {
		margin-bottom: 1rem;
	}
}

@media screen and (max-width: 600px) {

	#modal-content {
		background-position: 0 -35px;
		/* from left, from top */
	}
}