/* template.css overwrites - use only if needed
================================*/

.html-banner .pull-left {float: left !important;}
.html-banner .pull-right {float: right !important;}

.arlo-features li {min-height: 12em;}
.arlo-features .arlo-headline {text-align: center;}
.arlo-features ul.row {padding: 0 5%; width: 90%;}


.html-banner .inline-text-33.pull-left {margin-right: 2.5% !important;}
.html-banner .arlo-features .inline-text-33 {width: 24.83%; padding: 10px 3%;}
.arlo-features .inline-text-33 img {width: 40%; margin-left: 30%;}

.constrain-50p .inline-text-50 {width: 47.5% !important; display: block; float: left;}
.constrain-50p .inline-text-50:first-child {margin-right: 2.5%;}

.banner-img, .banner-img-650, .banner-img-850 {background-size: 190.5%;}

.arlo-features {transition: background linear .25s; padding-bottom: 30px;}	
.arlo-features:hover {background-color: #eeeeee;}
.arlo-lifestyle-container {position: relative;}
.arlo-features .clear-left {clear:left;}

.bg-arlo-w {background: transparent url('../images/arlo-wirefree-home.jpg') 0 0 no-repeat; display: block; min-height: 30em; background-size: cover;}
.bg-arlo-q {background: transparent url('../images/arlo-q-home.jpg') 0 0 no-repeat; display: block; min-height: 30em; background-size: cover;}
.bg-arlo-w:after, 
.bg-arlo-q:after {
	background-color: rgba(0,0,0,0.4); bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: 1; opacity: 1;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.8)));
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
	}
.text-tray {position: absolute; bottom: 0; left: 15%; margin-bottom: 2em; width: 70%; text-align: center; color: #fff; z-index: 4;}
.text-tray h2,
.text-tray p {color: #fff !important;}

.html-banner.arlo-features-container {padding: 0;}
.arlo-divider {border-top:2px solid #18aa4f; margin-top: 0;}

.arlo-phone-app .inline-img-20.pull-left {width:50%; margin:0;}
.arlo-phone-app h3,
.arlo-phone-app p {padding: 5px 20px;}
.arlo-phone-app p {margin-bottom: 30px;}
.arlo-phone-app .clear-left {clear:left;}

.arlo-faqs {background-color: #e5e5e5; padding-bottom: 30px; position: relative; text-align: center;}
.arlo-faqs h2.arlo-headline {text-align: center;}
.arlo-faqs .inline-text-20.faq-item {background-color: #fff; border-radius: 10px; min-height: 25em; width:45%; margin:20px 2.5%; text-align: left;}
.arlo-faqs .clear-left {clear:left;}
.arlo-faqs h3,
.arlo-faqs p {padding: 5px 15px;}
.arlo-faq-link {margin: 0 auto; text-align: center; color: #555 !important;}
.arlo-faq-link:hover {color: #000 !important;}

/* define as needed to match vendor assets */
.html-banner h1 {font-size: 2em; line-height: 1.35; margin: 1.25em 0 0.25em 0; font-weight: 400; color: #18aa4f;}
.html-banner h2 {font-size: 2em; line-height: 1.35; margin: 1.25em 0 0.25em 0; font-weight: 400; color: #18aa4f;}
.html-banner h3,
.html-banner h4,
.html-banner h5,
.html-banner h6 {font-size: 1.5em; line-height: 1.35; margin: 0.75em 0 0.25em 0; font-weight: 400; color: #18aa4f;}
.html-banner p {font-size: 1.1em; line-height: 1.35; margin: 0.75em 0; font-weight: 300; color: #666;}
.html-banner ul, 
.html-banner ol,
.html-banner dl {margin: 0.75em 0;}
.html-banner dt,
.html-banner dd,
.html-banner li {font-size: inherit; line-height: 1.35; margin: 0.5em 0;}
.html-banner li h1, .html-banner li h2, .html-banner li h3, .html-banner li h4, .html-banner li h5, .html-banner li h6,
.html-banner li p {}
.html-banner .text-wrap a,
.html-banner .text-wrap a:link,
.html-banner .text-wrap a:visited,
.html-banner .text-wrap a:active {text-decoration: underline; color: #5f88bf;}
.html-banner .text-wrap a:hover {color: #002d6a;}





/* responsive CSS on a per project basis
================================*/

@media only screen and (max-width: 1024px) {
	/* insert responsive CSS for screens below 1024px */
}

@media only screen and (min-width: 375px) {
	/* insert responsive CSS for screens above 375px */
}

@media only screen and (min-width: 481px) {
	/* insert responsive CSS for screens above 481px */
}

@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	
	.banner-img, .banner-img-650, .banner-img-850 {background-size: 100.25%;}
	
	.introText {max-width: 65% !important; margin-top: -5%; position: relative; z-index: 3;}
	
	.arlo-features-container .arlo-features {max-width: 50%;}
	.arlo-features li {min-height: 10em;}

	.arlo-phone-app .inline-img-20.pull-left {width: 20%; padding: 0 2.5%;}
	
	.constrain-50p .inline-text-50 {width: 45% !important;}
	.constrain-50p .inline-text-50:first-child {text-align: right; margin-right: 5%;}
	.arlo-phone-app .clear-left {clear:none;}
}

@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
	.arlo-faqs .inline-text-20.faq-item {width:20%; margin:20px 2.5%;}
	.arlo-faqs .clear-left {clear:none;}
	.arlo-faq-link {position: absolute; top: 50px; right: 7.5%;}
}

@media only screen and (min-width: 1025px) {
	/* insert responsive CSS for screens above 1025px */
}