/* CSS for access-gateway
 * -------------------------------*/
/* 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%; 
  }
}

/* image fix for ie  */
#articleDetail img {
    max-width: 100%;
	max-height: 100%;
	width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}

/* Row 1 
 * ----------*/
.full-width-bg {
    padding: 75px 5%;
	background-image: url(../images/477260766.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.max-width-1440 .green-transparent h3 {
	color: #fff;
}

.green-transparent {
	width: 75%;
	/*padding: 1.5rem;*/
	background-color: rgba(104, 192, 40, 0.65);
}

.padding-one-one-half-rem {
	padding: 1.5rem;
}

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

.font-color-white {
	color: #fff;
}

.icon-chevron-7bc34b-top-left {
    background-image: url(../images/icon-chevron-7bc34b-top-left.svg);
    background-repeat: no-repeat;
    background-size: 28px 28px;
    background-position: left top;
}

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

.icon-chevron-padding {
	padding-left: 1.6rem;
}


#rightChoiceQoS {
    background: url(../images/icon-graph-up.svg) left top/48px 48px no-repeat;
}

#virusAttack {
    background: url(../images/icon-virus-protection.svg) left top/48px 48px no-repeat;
}

#simpleFastSetUp {
    background: url(../images/icon-fast-setup.svg) left top/48px 48px no-repeat;
}
#apiCloud {
	background: url(../images/icon-cloud-api.svg) left top/48px 48px no-repeat;
}

#rightChoiceQoS h3,
#virusAttack h3,
#simpleFastSetUp h3,
#apiCloud h3 {
	min-height: 64px;
	padding-left: 55px;
}


/* Row 2 */
.margin-right-five-percent {
	padding-right: 5%;
}

.column-one-thirds {
	width:  30%;
}

.column-two-thirds {
	width: 65%;
}
.width-100-percent {
	width: 100%;
}


/* Row 3 */

#allDevicesPoint0,
#allDevicesPoint1,
#allDevicesPoint2,
#allDevicesPoint3,
#allDevicesPoint4,
#allDevicesPoint5 {
	padding-left: 56px;
	min-height: 100px;
	width: calc(49% - 56px); /* container 49% width - padding-left */
}
#allDevicesPoint0,
#allDevicesPoint2,
#allDevicesPoint4 {
	margin-right: 2%;
}

#allDevicesPoint0 {
	background: url(../images/icon-products-vpn.svg) left top/45px 85px no-repeat;
}
#allDevicesPoint1 {
	background: url(../images/icon-products-access-management.svg) left top/45px 85px no-repeat;
}
#allDevicesPoint2 {
	background: url(../images/icon-products-bandwidth-management.svg) left top/45px 85px no-repeat;
}
#allDevicesPoint3 {
	background: url(../images/icon-products-streamlined-experience.svg) left top/45px 85px no-repeat;
}
#allDevicesPoint4 {
	background: url(../images/icon-products-deployment.svg) left top/45px 85px no-repeat;
}
#allDevicesPoint5 {
	background: url(../images/icon-products-scalable.svg) left top/45px 85px no-repeat;
}



.columns-three-pathtosales {
	overflow: hidden;
	width: 30%;
	margin-right: 5%;
}
.columns-three-pathtosales:last-child {
	margin-right: 0;
}



@media screen and (max-width: 1000px) {
	.green-transparent {
		width: 100%;
		float: none;
	}
}


@media screen and (max-width: 768px) {
	.p-largest-font,
	.p-largest-font-nopad {
		font-size: 20px;
	}
	.full-width-bg {
    	padding: 55px 5%;
	}
}


@media screen and (max-width: 640px) {
	.p-largest-font,
	.p-largest-font-nopad {
		font-size: 18px;
	}
	
	.two-columns {
		width: 100%;
		float: none;
	}
	
	#rightChoiceQoS,
	#virusAttack,
	#simpleFastSetUp {
		margin-bottom: 1.5rem !important;
	}

	.mobile-margin {
		margin-bottom: 2rem;
	}
	
	#nseImgCtn {
		margin-bottom: 2rem;
	}

	.column-two-thirds.float-left.margin-right-five-percent p.p-large-font-nopad {
		margin-bottom: 2rem; 
	}
	.column-one-thirds,
	.column-two-thirds {
		float: none;
		width: 100%;
	}
	.margin-right-five-percent {
		padding-right: 0;
	}
	
	#allDevicesPoint0,
	#allDevicesPoint1,
	#allDevicesPoint2,
	#allDevicesPoint3,
	#allDevicesPoint4,
	#allDevicesPoint5 {
		/* container 100% width - padding-left */
		width: calc(100% - 56px);
	}
	
	#allDevicesPoint0,
	#allDevicesPoint2,
	#allDevicesPoint4 {
		margin-right: 0;
	}
	
	#ag2500ag5900 {
		margin-top: 2rem;	
	}
	.columns-three-pathtosales {
		margin-right: 0;
		float: none;
		width: 100%;
		margin-bottom: 1rem;
	}
	.columns-three-pathtosales:last-child {
		margin-bottom: 0;
	}
}