/* CSS for contact-us 
 * -------------------------------*/
/* Fix SVG in <img> tags not scaling in IE9, IE10, IE11
 * 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%;
	}
}

/* level 1 
 * ----------*/
.full-width-bg {
	padding: 75px 5%;
	background-image: url(../images/510584878-contact-us.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

header article.hero h1,
header article.hero h2,
header article.hero h3,
header article.hero h4 {
	color: #fff !important;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	/*rgba(0,0,0,0.25)*/
	/*text-shadow: -1px 1px 8px #fff, 1px -1px 8px #fff;*/
	/* 2 same color text shadows at slightly different offsets */
}

.arrow-button {
	-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.15);
	box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(0, 0, 0, 0.15);
}

#emailFormButtonCtn {
	text-align: center !important;
}

/* level 2 
 * ----------*/
#phoneGeneralButton,
#salesButton,
#techSupportButton,
#emailGeneralButton,
#emailSalesButton,
#emailTechSupportButton {
	display: inline-block;
	color: #7bc34b;
}

.triangle-label {
	padding-left: 0.5rem;
	color: #53b044;
}

.rotate-0 {
	transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transition: transform 550ms ease;
	-moz-transition: -moz-transform 550ms ease;
	-ms-transition: -ms-transform 550ms ease;
	-o-transition: -o-transform 550ms ease;
	-webkit-transition: -webkit-transform 550ms ease;
}

.rotate-90 {
	transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transition: transform 550ms ease;
	-moz-transition: -moz-transform 550ms ease;
	-ms-transition: -ms-transform 550ms ease;
	-o-transition: -o-transform 550ms ease;
	-webkit-transition: -webkit-transform 550ms ease;
}

.text-link-color {
	color: #53b044;
}

.expanding-cnt-padding {
	padding: 0.5rem 0 0 0;
}

#phoneGeneralExpandingCnt,
#salesExpandingCnt,
#techSupportExpandingCnt,
#emailGeneralExpandingCnt,
#emailSalesExpandingCnt,
#emailTechSupportExpandingCnt {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;

	margin: 1rem 0;
	border-top: 2px #949e9e solid;
	overflow: hidden;
}

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

.height-collapsed {
	max-height: 0;
}

.expanding-last-item-padding {
	padding-bottom: 1rem;
}

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

.indent-1rem {
	padding-left: 1rem;
}

#nomadixAddress {
	width: 65%;
	margin-right: 1%;
}

#nomadixMap {
	/*position: relative;*/
	margin-left: 1%;
	width: 32%;
	padding-bottom: 20%;
	/* Depth when height = 0 */
	height: 0;
	overflow: hidden;
}

/* Level 3
 *********/

#iframeHeight {
	height: 330px;
}


/* 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;
	/* Enable scroll if needed */
	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;
	margin: 15% auto;
	/* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 70%;
	/* Could be more or less, depending on screen size */
}

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

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



@media screen and (max-width: 768px) {
	.full-width-bg {
		padding: 55px 5%;
	}
}


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

	header article.hero h1,
	header article.hero h2,
	header article.hero h3 {
		/*margin-bottom: 1.5rem;*/
		text-align: center !important;
		width: 100%;
	}

	#nomadixMap {
		width: 100%;
		margin-left: 0;
		float: none;
		padding-bottom: 35%;
		/* Depth when height = 0 */
	}

	#nomadixAddress {
		width: 100%;
		margin-right: 0;
		float: none;

	}

	#iframeHeight {
		height: 550px;
	}

}