/* CSS for home page 
 * -------------------------------*/
/* 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: 150px;
	height: auto; */
	
	width: 100%; 
	height: 100%;
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	img[src$=".svg"] {
		width: 100%; 
		height: 100%;
	}
}

/* Row 1 
 * ----------*/
.header-unit {
  height: 550px;
  border: 2px solid #000;
  position: relative;
  border: none;
  background: url(../images/510107302-640x576-wide-still.jpg) center center / cover no-repeat;
}
.header-unit > .title {
	position: absolute; 
	z-index: 100; 
	width: 100%; 
	bottom: 5rem;
	color: #fff;
}
#video-container {
	position: absolute;
}
#video-container {
	top: 0%;
	left: 0%;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
video.fillWidth {
	width: 100%;
	position: absolute;
	z-index: 0;
  	top: -25px;
}

/* Row 2 
 * ----------*/
.nomadix-green {
	color: #7bc34b;
}
.column-two:nth-child(1) {
	width: 40%;
	margin-right: 5%;
}
.column-two:nth-child(2) {
	width: 55%;
}
.nomadix-orange {
	color: #ee8428;
}
section.single-column {
    padding: 75px 0;
}
#learnAboutNomdix1 {
	display: none;
	position: absolute;
	bottom: 0;
	left: 35%;
}
#learnAboutNomdix2 {
	display: none;
}
#facilitateFiveMil1 {
	display: none;
}

/* Row 3 
 * ----------*/
.home-page article.special h2 {
	font-size: 36px;
}
.home-page article.special h3,
.home-page article.special h2,
.home-page article.special h1 {
	color: #003f6d;
}
.green-line {
    height: 10px;
    margin: 0 auto;
    border-bottom: 2px solid #7bc34b;
    width: 15%;
    min-width: 150px;
}
#extraLevel1Article p {
	color: #545454;
}
.product-columns {
	width: 22.75%	
}
.product-columns:nth-child(1),
.product-columns:nth-child(2),
.product-columns:nth-child(3) {
	margin-right: 3%;	
}

.columns-three {
	width: 30%;	
}
.columns-three:nth-child(1),
.columns-three:nth-child(2) {
	margin-right: 5%;	
}

.columns-two {
	width: 40%;	
}
.columns-two:nth-child(1),
.columns-two:nth-child(2) {
	margin-left: 5%;	
	margin-right: 5%;
}

/* Row 4 
 * ----------*/
section#extraLevel2.special.contents {
    background: #787c80 !important;
}
#extraLevel2 h2 {
	color: #fff;
}
#quicklinksHowToBuyLink,
#quicklinksAccessGatewaysLink,
#quicklinksIotMduEdgeGateways,
#quicklinksAppManagementAppliancesLink,
#quicklinksNomadixPartnerLink,
#quicklinksContactSalesLink {
	color: #fff;
}
#quicklinksHowToBuyLink:hover,
#quicklinksAccessGatewaysLink:hover,
#quicklinksIotMduEdgeGateways:hover,
#quicklinksAppManagementAppliancesLink:hover,
#quicklinksNomadixPartnerLink:hover,
#quicklinksContactSalesLink:hover {
	text-decoration: underline;
}
.quick-link.mouse-cursor h1,
.quick-link.mouse-cursor h2,
.quick-link.mouse-cursor h3,
.quick-link.mouse-cursor h4 {
	color: #fff !important;
}
section.single-column-title {
    padding: 0;
}
.quick-link-title {
	color: #fff;
}
.columns-quiklink {
	width: 14%;
}
.columns-quiklink:nth-child(1),
.columns-quiklink:nth-child(2),
.columns-quiklink:nth-child(3),
.columns-quiklink:nth-child(4),
.columns-quiklink:nth-child(5) {
	margin-right: 3%;
}
.columns-quiklink h4 {
	color: #fff !important;
}
.quick-links-size-animation {
	width: 150px !important;
	height: auto !important;
	transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-webkit-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
}
.quick-links-size-animation:hover {
  	transform: scale(1.2);
	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2); /* IE 9 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.2, M12=0, M21=0, M22=1.2, SizingMethod='auto expand')"; /* IE8 */
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.2, M12=0, M21=0, M22=1.2, SizingMethod='auto expand'); /* IE6 and 7 */ 
}
.quick-link h3 {
	margin: 0 0 5px;
	color: #fff;
	font-weight: normal;
}

/* Row 5 */
.one-third {
	width: 30%;
}
.two-thirds {
	width: 62%;
    margin: 0 0 0 8%;
}
#extraLevel3 .clearfix.margin-bottom-three-rem:last-child {
	margin-bottom: 0 !important;
}
.thirds-box-wrapper {
	border: 1px solid #c7c7c7;
  	text-align: left;
}
.thirds-box {
	padding: 25px 15px 15px 25px;
}
.thirds-box h3 {
	margin-top: 0;
  	text-align: left !important;
}
.thirds-box > p > a {
	display: block; /* indents wrapping paragraph */
	padding-left: 30px;
	background: url(../images/arrow-left-circle-green.png) no-repeat;
}
.thirds.no-padding > .element {
  padding: 0 !important;
}
section.banner-column-panel {
    background-color: #fff;
    padding: 75px 0;
}
.arrow-left-circle-bg {
    background-position: 0% 5%;
}

/* row 6 
-------------------*/
#extraLevel4 {
	background: url(../images/167195753.jpg) center center / cover no-repeat;
}
.half-right,
.half-left {
	width: 50%;
}
.topbottom-layout-padding {
	padding: 75px 0;
}

/* row 7 */
#heroBottomImg {
	background-image: url(../images/518466514.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top right;
}

@media screen and (max-width: 1200px) {
	.header-unit { 
		height: 430px; 
	}
	#learnAboutNomdix {
		display: none;
	}
	#learnAboutNomdix1 {
		display: inline-block;
	}
	.column-two:nth-child(1) {
		width: 30%;
	}
	.column-two:nth-child(2) {
		width: 65%;
	}
	#heroBottom h2 {
		text-align: center;
		margin-bottom: 2rem !important;
	}
	.half-right {
		width: 100%;
		float: none;
	}
	#heroBottomImg {
		display: none;
	}
}


@media screen and (max-width: 1100px) {
	.p-largest-font-nopad {
		font-size: 18px;
	}
}
	
@media screen and (max-width: 1000px) {
	.header-unit { height: 350px; }
	.header-unit > .title > h1 {font-size: 36px !important; }
}

@media screen and (max-width: 900px) {
	#learnAboutNomdix1,
	#facilitateFiveMil {
		display: none;
	}
	#facilitateFiveMil1,
	#learnAboutNomdix {
		display: inline-block;
	}
}

@media screen and (max-width: 768px) {
	#video-container { display: none; }
	.header-unit {height: 350px;}
	.header-unit > .title > h1 { 
		font-size: 32px !important;
	}
	section.single-column {
		padding: 55px 0;
	}
	section.banner-column-panel {
		padding: 55px 0;
	}
	.home-page article.special h2 {
		font-size: 30px;
	}
	.topbottom-layout-padding {
		padding: 55px 0;
	}
	.product-columns {
		width: 48.5%	
	}
	.product-columns:nth-child(1),
	.product-columns:nth-child(3) {
		margin-right: 3%;	
	}
	.product-columns:nth-child(2) {
		margin-right: 0;
	}
	.product-columns:nth-child(1),
	.product-columns:nth-child(2) {
		margin-bottom: 1rem;
	}
	.columns-quiklink {
		width: 31.3%;
	}
	.columns-quiklink:nth-child(1),
	.columns-quiklink:nth-child(2),
	.columns-quiklink:nth-child(4),
	.columns-quiklink:nth-child(5) {
		margin-right: 3%;
	}
	.columns-quiklink:nth-child(3) {
		margin-right: 0;
	}
	.columns-quiklink:nth-child(1),
	.columns-quiklink:nth-child(2),
	.columns-quiklink:nth-child(3) {
		margin-bottom: 2rem;
	}
}

@media screen and (max-width: 640px) {
	.column-two:nth-child(1),
	.column-two:nth-child(2) {
		width: 100%;
		margin-right: 0;
		float: none;
	}
	#learnAboutNomdix {
		display: none;
	}
	#learnAboutNomdix2 {
		display: inline-block;
	}
	#orangeNomadix {
		margin-bottom: 1rem !important;
	}
	.product-columns {
		width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 1rem;
	}
	.product-columns:last-child {
		margin-bottom: 0;
	}
	.columns-two,
	.columns-three {
		width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 1rem;
	}
	.columns-quiklink:nth-child(1), 
	.columns-quiklink:nth-child(2), 
	.columns-quiklink:nth-child(3), 
	.columns-quiklink:nth-child(4),
	.columns-quiklink:nth-child(5) {
		width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 2rem;
	}
	.columns-quiklink:nth-child(6) {
		width: 100%;
		float: none;
		margin-right: 0;
	}
	.one-third,
	.two-thirds {
	    width: 100%;
		float: none;
		margin: 0;
	}
	.two-thirds {
		margin-top: 2rem;
	}
	/* .halfRight {
		width: 100%;
		float: none;
	} */
}

@media screen and (max-width: 520px) {
	#video-container { display: none; }
	.header-unit {height: 350px;}
  	.header-unit > .title > h1 { font-size: 28px !important; }
}