/* CSS for alloc8 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: 100%;
}

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

/* Row 1 
 * ----*/
.max-width-1440 {
	height: 1070px;
}

/* #nomadixCloudImg {
	max-height: 600px;
} */

.full-width-bg {
	/* background: url(../images/477260766.jpg) center center/cover no-repeat padding-box border-box #ccc; */
	background-color: #003f6d;
	/* padding: 75px 5%; */
	padding: 45px 5%;
}

/* .full-width-bg h1 {
	text-align: left !important;
}
 */
.full-width-bg h3,
.full-width-bg h4 {
	color: #fff;
	text-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.45);
}

.full-width-bg h3 {
	padding-left: 2.5rem;
	background: url(../images/icon-checkmark-orange.svg);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 24px 24px;
}

.full-width-bg h1,
.full-width-bg h2 {
	line-height: 1.0;
}


.full-width-bg-a {
	margin: 75px 5% 0;
}

.letter-spacing-point-one-rem {
	letter-spacing: 0.1rem;
	color: #ee8428 !important;
}

#bulletPoints {
	position: relative;
	top: -155px;
	margin-left: 100px;
}
.title-center {
	text-align: center;
}

.third {
	/* background: #aaa;  */
	width: 33%; 
	margin-right: 3%;
}
.two-third {
	/* background: #ccc;  */
	width: 64%; 
}
.three-column-a {
	/* background: #ccc; */
	float: left;
	width: 30%;
}
.three-column-a:nth-child(1),
.three-column-a:nth-child(2) {
	margin-right: 5%;
}

.max-width-1440a {
    height: 100%;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.quarter-one {
	/* background: #ccc; */
	float: left;
	width: 25%;
	margin-right: 3%;
}
.quarter-three {
	/* background: #ccc; */
	float: left;
	width: 72%;
}

#extra.special.contents .special {
	background: #f9f7f2;
}
#scheduler.special.contents .special {
	background: #f9f7f2;
}

.max-width-1440-a {
    display: block;
    max-width: 1440px;
    width: auto;
    margin: 0 auto;
    padding: 0 5%;
    position: relative;
}

.pad-top-bottom {
	padding-top: 65px;
    padding-bottom: 85px;
}

.fix-margin {
	margin-bottom: 75px;
}

#bugerIconCtn,
#bugerIconDocsCtn {
	width: 50px;
	height: 50px;
}

.fit-title-and-burger {
	width: calc(100% - 150px);
}

.one-third-first h3 {
	color: #ee8428;
}

/* Row 3 */
.columns-two {
	width: 47.5%;
	margin-right: 5%;
	overflow: hidden;
}

.columns-two:nth-child(2),
.columns-two:nth-child(4) {
	margin-right: 0;
}

.white-transparent {
	background-color: rgba(0, 0, 0, 0.60);
	padding: 1rem;
}

.white-transparent:hover {
	background-color: rgba(83, 176, 4, 0.80);
}

.white-transparent h4 {
	color: #ee8428;
	text-transform: uppercase;
	margin: 0 0 0.5rem !important;
}

.white-transparent h4:hover {
	color: #fff;
}

.white-transparent p {
	color: #fff;
}

.chevron-right {
	background-image: url(../images/icon-chevron-white-right.svg);
	background-repeat: no-repeat;
	background-size: 65px 65px;
	background-position: right center;
}

.chevron-left {
	background-image: url(../images/icon-chevron-white-top-left.svg);
	background-repeat: no-repeat;
	background-size: 65px 65px;
	background-position: left 10%;
}

.chevron-left-padding {
	padding-left: 25px;
}

.absolute-position-bottom {
	position: absolute;
	bottom: 0px;
}

/* Row 3 
-----------------------------*/
#twoColumnsContainer1,
#twoColumnsContainer2 {
	/*background-color: #aaa;*/
	width: 50%;
}

.two-columns {
	/*background-color: #888;*/
	width: 47.75%;
	overflow: hidden;
}

.two-columns.float-left:nth-child(1) {
	margin-right: 3%;
}

.two-columns.float-left:nth-child(2) {
	margin-right: 1.5%;
}

.two-columns.float-right:nth-child(2) {
	margin-left: 1.5%;
}

.two-columns.float-right:nth-child(1) {
	margin-left: 3%;
}

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

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

#analyzeTrafficTrigger,
#appPerformanceTrigger,
#controlBandwidthTrigger,
#netActivityTrigger {
	color: #53b044;
}

#analyzeTraffic,
#appPerformance,
#controlBandwidth,
#netActivity {
	-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;
}

.icon-images {
	max-height: 64px;
}

/* Expanding containers
-------------------- */
#expandingWrapper {
	padding: 25px;
	border-right: solid #aaa 1px;
	border-bottom: solid #aaa 1px;
	border-left: solid #aaa 1px;
}

#expandControl {
	border: solid #aaa 1px;
	padding: 25px;
}

.inner-border {
	padding: 20px;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	border-left: 1px solid #aaa;
}

/* Grow div  
---------*/
#growDocs,
#grow {
	-moz-transition: height .5s;
	-ms-transition: height .5s;
	-o-transition: height .5s;
	-webkit-transition: height .5s;
	transition: height .5s;
	height: 0;
	overflow: hidden;
}

#growTitleDocs,
#growTitle {
	border: 1px solid #aaa;
	padding: 0 0 0 10px;
}

#growTitleDocs h3,
#growTitle h3 {
	margin: 11px 65px 15px 20px;
	cursor: pointer;
}

/* hamburger animation 
--------------------*/
.position-relative {
	position: relative;
}

#bugerIconDocs,
#bugerIcon {
	position: absolute;
	right: 45px;
	top: 16px;
	cursor: pointer;
	margin: 9px 6px 0 0;
}

#bugerIconDocs span,
#bugerIconDocs span:before,
#bugerIconDocs span:after,
#bugerIcon span,
#bugerIcon span:before,
#bugerIcon span:after {
	cursor: pointer;
	border-radius: 1px;
	height: 5px;
	width: 35px;
	background: #353d4a;
	/* sets color of hamburger */
	position: absolute;
	display: block;
	content: '';
}

#bugerIconDocs span:before,
#bugerIcon span:before {
	top: -10px;
}

#bugerIconDocs span:after,
#bugerIcon span:after {
	bottom: -10px;
}

#bugerIconDocs span,
#bugerIconDocs span:before,
#bugerIconDocs span:after,
#bugerIcon span,
#bugerIcon span:before,
#bugerIcon span:after {
	transition: all 500ms ease-in-out;
}

#bugerIconDocs.go span,
#bugerIcon.go span {
	background-color: transparent;
}

#bugerIconDocs.go span:before,
#bugerIconDocs.go span:after,
#bugerIcon.go span:before,
#bugerIcon.go span:after {
	top: 0;
}

#bugerIconDocs.go span:before,
#bugerIcon.go span:before {
	transform: rotate(45deg);
}

#bugerIconDocs.go span:after,
#bugerIcon.go span:after {
	transform: rotate(-45deg);
}

/* Container with icon */
.icon-and-text {
	padding-left: 50px;
	margin-bottom: 25px;
}

.icon-and-text:nth-child(4) {
	margin-bottom: 0;
}

/* Ask the experts form */
/* Expanding containers
-------------------- */
#expandingWrapper {
	padding: 25px;
	border-right: solid #aaa 1px;
	border-bottom: solid #aaa 1px;
	border-left: solid #aaa 1px;
}

#expandControl {
	border: solid #aaa 1px;
	padding: 25px;
}

.inner-border {
	padding: 20px;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	border-left: 1px solid #aaa;
}

/* Grow div  
---------*/
#growDocs,
#grow {
	-moz-transition: height .5s;
	-ms-transition: height .5s;
	-o-transition: height .5s;
	-webkit-transition: height .5s;
	transition: height .5s;
	height: 0;
	overflow: hidden;
}

#growTitleDocs,
#growTitle {
	border: 1px solid #aaa;
	padding: 0 0 0 10px;
}

#growTitleDocs h3,
#growTitle h3 {
	margin: 11px 65px 15px 20px;
	cursor: pointer;
}

/* hamburger animation 
---------------------*/
#bugerIconDocs,
#bugerIcon {
	position: absolute;
	right: 45px;
	top: 16px;
	cursor: pointer;
	margin: 9px 6px 0 0;
}

#bugerIconDocs span,
#bugerIconDocs span:before,
#bugerIconDocs span:after,
#bugerIcon span,
#bugerIcon span:before,
#bugerIcon span:after {
	cursor: pointer;
	border-radius: 1px;
	height: 5px;
	width: 35px;
	background: #353d4a;
	/* sets color of hamburger */
	position: absolute;
	display: block;
	content: '';
}

#bugerIconDocs span:before,
#bugerIcon span:before {
	top: -10px;
}

#bugerIconDocs span:after,
#bugerIcon span:after {
	bottom: -10px;
}

#bugerIconDocs span,
#bugerIconDocs span:before,
#bugerIconDocs span:after,
#bugerIcon span,
#bugerIcon span:before,
#bugerIcon span:after {
	transition: all 500ms ease-in-out;
}

#bugerIconDocs.go span,
#bugerIcon.go span {
	background-color: transparent;
}

#bugerIconDocs.go span:before,
#bugerIconDocs.go span:after,
#bugerIcon.go span:before,
#bugerIcon.go span:after {
	top: 0;
}

#bugerIconDocs.go span:before,
#bugerIcon.go span:before {
	transform: rotate(45deg);
}

#bugerIconDocs.go span:after,
#bugerIcon.go span:after {
	transform: rotate(-45deg);
}

/* Container with icon */
.icon-and-text {
	padding-left: 50px;
	margin-bottom: 25px;
}

.icon-and-text:nth-child(4) {
	margin-bottom: 0;
}

/* Icons */
.icon-and-text.reliability {
	background: url(../images/icon-graph-up.svg) top left/40px 40px no-repeat;
}

.icon-and-text.pms {
	background: url(../images/icon-pms-64x64.svg) top left/40px 40px no-repeat;
}

.icon-and-text.innovation {
	background: url(../images/icon-devices-64x64.svg) top left/40px 40px no-repeat;
}

/* Documentation container */
.icon-and-text-docs {
	padding: 0 0 15px 30px;
	margin: 0 25px 0 0 !important;
}

.icon-and-text-docs.datasheet {
	background: url(../images/icon-pdf-datasheet.svg) top left/24px 24px no-repeat;
}

.icon-and-text-docs.press-release {
	background: url(../images/icon-pdf-pressrelease.svg) top left/24px 24px no-repeat;
}

.icon-and-text-docs.xml-dtd,
.icon-and-text-docs.users-guide {
	background: url(../images/icon-pdf-usersguide.svg) top left/24px 24px no-repeat;
}

.icon-and-text-docs.quick-start {
	background: url(../images/icon-pdf-quickstart.svg) top left/24px 24px no-repeat;
}

.icon-and-text-docs.software-readme {
	background: url(../images/icon-pdf-readme.svg) top left/24px 24px no-repeat;
}

.hr-ddd {
	border-bottom: 1px solid #ddd;
	margin-bottom: 12px;
}

.full-width-modules-bg {
	background: #f9f7f2;
	padding: 75px 5%;
}
#extra p {
	color: #545454;
	text-shadow: none;
}
#scheduler p {
	color: #545454;
	text-shadow: none;
}
#extra h2 {
	color: #003f6d;
	text-shadow: none;
}
#scheduler h2 {
	color: #003f6d;
	text-shadow: none;
}
.margin-adjust {
	margin-top: 75px;
}
#cloudLogo {
	width: 50%; 
	height: auto;
}




.green-callout {
	width: 42%;
	background: rgba(123, 195, 75, 0.87);
	padding: 30px 50px;
}

.green-callout h2 {
	color: #fff;
	font-weight: normal;
	margin-bottom: 30px;
}

.green-callout h5 {
	color: #fff;
	font-weight: normal;
	margin-bottom: 20px;
}

.green-callout p {
	padding: 0 0 0 35px;
	background: url(../images/arrow-left-circle-wht.png) no-repeat left;
}

.green-callout p a {
	color: #fff;
}

.caption {
	color: #aaa;
	font-style: italic;
	font-size: 0.8em;
}

/* Modal
-------*/
/* The Modal (background) */
.modal {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	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%;
}

/* 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: 1300px) {
	.max-width-1440 {
		height: 1045px;
	}
	#bulletPoints {
		margin-left: 50px;
	}
}

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

	#bulletPoints {
		margin-left: 0;
	}
	.max-width-1440 {
		height: 1025px;
	}

	#easeOfUse p,
	#networkActivity p,
	#bandwidthConservation p,
	#inspectTraffic p,
	#reliability p,
	#captivePortal p {
		font-size: 14px;
		line-height: 1.3;
	}
}

@media screen and (max-width: 1050px) {
	#bulletPoints {
		top: -100px;
	}
}

@media screen and (max-width: 950px) {
	#bulletPoints {
		top: -75px;
	}
	.max-width-1440 {
		height: 1000px;
	}
}

@media screen and (max-width: 900px) {
	#bulletPoints {
		top: -75px;
	}
	.max-width-1440 {
		height: 950px;
	}
}

@media screen and (max-width: 800px) {
	#bulletPoints {
		top: -55px;
	}
	.max-width-1440 {
		height: 900px;
	}
}

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

	#bulletPoints {
		top: 0;
	}
	.max-width-1440 {
		height: auto;
	}

	#bulletPoints h3:nth-child(1),
	#bulletPoints h3:nth-child(2),
	#bulletPoints h3:nth-child(3) {
		margin-bottom: 0.5rem !important;
	}
	#bulletPoints h3:nth-child(4) {
		margin-bottom: 1.75rem !important;
	}

	.full-width-modules-bg {
		padding: 50px 5% 50px 5%;
	}

	#keepHeight {
		min-height: 325px;
	}

	.full-width-bg h3 {
		line-height: 1.75;
	}

	.four-columns {
		width: 49%;
		margin-bottom: 2rem;
	}

	.four-columns:nth-child(2) {
		margin-right: 0;
	}

	/* Columns of 3 to columns of 2 */
	.three-columns {
		width: 47.5%;
	}

	.three-columns:nth-child(3) {
		margin-right: 5%;
	}

	.three-columns:nth-child(4) {
		margin-bottom: 2rem;
	}

	.three-columns:nth-child(2),
	.three-columns:nth-child(4),
	.three-columns:nth-child(6) {
		margin-right: 0;
	}

	#twoColumnsContainer1,
	#twoColumnsContainer2 {
		width: 100%;
		float: none;
	}

	.two-columns {
		width: 48.5%;
	}

	.two-columns.float-left:nth-child(2) {
		margin-right: 0;
	}

	.two-columns.float-right:nth-child(2) {
		margin-right: 0;
		float: left;
	}

	.two-columns.float-right:nth-child(2) {
		margin-left: 0;
	}

	.two-columns.float-right:nth-child(1) {
		float: left;
		margin-left: 0;
		margin-right: 3%;
	}

	#twoColumnsContainer1 .two-columns,
	#twoColumnsContainer2 .two-columns {
		margin-bottom: 2rem;
	}

	/* No bottom margin on last 2 item in last row */
	.two-columns.float-right:nth-child(1),
	.two-columns.float-right:nth-child(2) {
		margin-bottom: 0 !important;
	}
}

@media screen and (max-width: 640px) {
	/* .max-width-1440 {
		height: auto;
	} */
	.full-width-bg {
		padding: 55px 5%;
	}
	.full-width-bg h1 {
		text-align: center !important;
	}
	.full-width-bg .text-align-right {
		text-align: center !important;
	}

	.quarter-one {
		margin-bottom: 1rem;
	}
	.quarter-one,
	.quarter-three {
		float: none;
		margin-right: 0;
		width: 100%;
	}
	.pad-top-bottom {
		padding: 55px 0;
	}

	.fix-margin {
		margin-bottom: 0;
	}

	#serviceEngineTitle,
	#conferenceTitle {
		text-align: center;
	}

	.margin-adjust {
		margin-top: 55px;
	}
	#cloudLogo {
		width: 100%; 
	}
	


	.green-callout {
		width: auto;
	}
	.three-columns {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	.three-columns:nth-child(5) {
		margin-bottom: 2rem;
	}

	.three-column-a {
		float: none;
		width: 100%;
		margin-right: 0;
	}
	.three-column-a:nth-child(1),
	.three-column-a:nth-child(2) {
		margin-bottom: 1.2rem;
	}

	.four-columns {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	.four-columns:nth-child(4) {
		margin-bottom: 0;
	}

	#articleThirds .columns .two-thirds-last .element {
		margin: 0 0 55px;
	}

	.columns-two {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	.two-columns.float-right:nth-child(1),
	.two-columns.float-right:nth-child(2),
	.two-columns.float-left:nth-child(1),
	.two-columns.float-left:nth-child(2) {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		float: none;
	}

	/* No bottom margin on last item in column */
	.two-columns.float-right:nth-child(2) {
		margin-bottom: 0 !important;
	}

	/* Put margin back in of 3rd object (bottom margin was removed @768px last row of 2 items) */
	.two-columns.float-right:nth-child(1) {
		margin-bottom: 2rem !important;
	}
}

@media screen and (max-width: 450px) {
	.full-width-bg {
		padding: 55px 5% 55px;
	}
	#arrowBtn{
		text-align: center;
	}

	.third,
	.two-third {
		float: none;
		width: 100%;
	}
	#cloudCtn {
		margin-bottom: 1.2rem;
	}
}