
/*
  Pages
   - index
   - lifestyle
   - find-builder
   - map
   - superior-integration
*/

/* ------------------------------------------------------------ *\
	Article Intro
\* ------------------------------------------------------------ */

.article-intro {position: relative; width: 100%; height:initial; z-index: 25;color: #fff; }
.article-intro h1 { margin-bottom: 24px; font-size: 62px; font-weight: 200; line-height: 72px;}
.article-intro .article-content { width: 600px; float: left; position: absolute; bottom:33%; z-index: 2; margin-left: 50px;}
.article-intro .article-content p{ font-size:21px; font-weight: 400; color:#fff; line-height: 27px; margin-bottom: 10px;}
.article-intro .article-content strong{ font-weight: 500;}
.article-intro .article-image { width: 100%; position: absolute; bottom: 0; right: 0; text-align: right; }
.article-intro .article-image img { max-height: 100%; }
.article-intro .article-actions { padding-top: 10px; }
.article-intro .article-actions img { max-height: 47px; }
.article-intro .article-actions a { transition: opacity .3s; }
.article-intro .article-actions a:hover { opacity: .7; }
/*.article-intro .article-content strong{font-size: 180px;}*/
@media (max-width: 1023px) {
	.article-intro .article-content { padding-left: 20px; margin-left: 0;}
}
@media (max-width: 767px) {
	.article-intro h1 { font-size: 46px; text-align: left; line-height: 50px;}
	.article-intro h1 strong { font-size: 90px; }
	.article-intro .article-content { width: 100%; padding:0 20px; margin-left: 0; bottom:5%; height: initial;}
	.article-intro .article-content p{text-align: left;}
	.article-intro .article-image { top: auto; width: 300px; bottom: -320px; right: auto; left: 50%; margin-left: -150px; }
	.article-intro .article-actions { text-align: center; }
	.article-intro .article-actions img { max-height: 40px; }
}


#sect1 .relativeFrame{
  position: absolute;
  width:100%;
  height:100%;
  right:0px;
}

#sect1 .section-image2{
	position: relative;
	z-index: 2;
	right:0px;
	bottom:0px;
	width:100%;
	height:100%;
  overflow: hidden;
}

/*#sect1 .section-image2 .HandPhone2{
	position: absolute;
	background-attachment: absolute;
	background-position: right calc(((100vw - 1024px)/2) - 21px) bottom;
	background-repeat: no-repeat;
	height:100%;
	width:100%;
	background-image: url('/images/iPhoneWht_00HomeHand.png');
	-webkit-background-size:530px auto;
	background-size:530px auto;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  will-change: transform;
}*/

.HandPhoneImg{
  position: absolute;
  right:10px;
  bottom:0px;
  width:560px;
}

@media (max-height: 870px) {
	.HandPhoneImg{
		bottom:initial;
		top:74px;
	}
}

/* ------------------------------------------------------------ *\
	Parallax
\* ------------------------------------------------------------ */

@media only screen and (min-width : 900px) and (max-width : 1025px) {  /* Styles */
  .maxWid{width:1024px; height:100%; margin:0 auto;}
}
@media only screen and (min-width : 1025px) {
	.maxWid{width:1024px; height:100%; margin:0 auto;}
}

.hei100{
	height: 100%;
}

.sect-container{
	max-width: 1300px;
	margin: 0 auto;
}

#sect1 .section-image{
	position: absolute;
	z-index: 2;
	right:0px;
	bottom:0px;
	width:800px;
	height:900px;
}

.section {
  position: relative;
  /* opacity: 0.65; */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	-webkit-background-size:100% auto;
	background-size:100% auto;
}

#sect1{
	background: url('/css/images/temp/intro.jpg') no-repeat center center; /*fixed*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#sect1:before { content: ''; background: rgba(0, 0, 0, 0.51);
		position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.section-image-secondary{
	height:100%;
	max-width:311px;
}


/* ------------------------------------------------------------ *\
	Intro
\* ------------------------------------------------------------ */
.intro { height: 90vh; /*height: 900px;*/ position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.intro-image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.intro-image:before { content: ''; background: rgba(0, 0, 0, 0.51); position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.intro-content { position: relative; z-index: 1; padding-top: 15%; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; font-size: 18px; }
.intro-content .shell { position: relative; margin: 0 auto; }
.intro-actions { position: absolute; left: -135px; bottom:430px; width: 100%; text-align: center; z-index: 80; }
.intro .maxWid{width:1110px;}
@media (max-width: 767px) {
	/*.intro { min-height: 0; padding-bottom: 100px; display: block; height: auto; }*/
	/*.intro-content { display: block; padding-top: 100px; }*/
}
/*  Secondary  */
.intro-secondary { text-align: center; }
.intro-secondary h1 { font-size: 80px; margin-bottom: 55px; }
.intro-secondary h1 strong { display: inline; font-size: inherit; font-weight: 400; }
.intro-secondary .shell { max-width: 810px; }
.intro-secondary .intro-content { font-size: 18px; padding-top: 0; margin: auto; height: 300px; }
@media (max-width: 1023px) {
	.intro-secondary .intro-content { height: auto; }
}
@media (max-width: 767px) {
	.intro-secondary { padding-bottom: 100px; }
	.intro-secondary h1 { font-size: 50px; margin-bottom: 30px; }
	.intro-secondary .intro-content { padding-top: 120px; font-size: 18px; }
}
/*  Tertiary  */
.intro-tertiary { font-size: 18px; line-height: 1.67; height:100vh;}
.intro-tertiary h1 { font-size: 72px; margin-bottom: 37px; }
.intro-tertiary h1 strong { font-size: 36px; display: block; margin-top: 10px; font-weight: 400; }
.intro-tertiary h4 { font-size: 24px; line-height: 1.25; font-weight: 200; margin-bottom: 29px; }
.intro-tertiary .intro-inner { max-width: 50%; float: right;}
.intro-tertiary .intro-inner.active { display: block; }
.intro-tertiary .intro-content { margin: 0 auto; }
.intro-tertiary .intro-image:before { background: rgba(0, 0, 0, 0.3); }
@media (max-width: 1023px) {
	.intro-tertiary .intro-inner { max-width: 70%; float: none; }
}
@media (max-width: 767px) {
	.intro-tertiary { padding-bottom: 100px; }
	.intro-tertiary h1 { font-size: 40px; }
	.intro-tertiary h1 strong { font-size: 30px; }
	.intro-tertiary .intro-inner { max-width: 100%; }
}

@media (max-width: 767px) {
	.section {
		-webkit-background-size:auto 100%;
		background-size:auto 100%;
	}

	.HandPhoneImg{ display: none;}
	.section-image{display: none;}
	/*.section-image-secondary{display: none !important;}*/
	.section-image-flt{display: none;}
	.section-image-secondary .PaxImg{
		background-attachment:inherit;
	  background-position: center center;
		-webkit-background-size:211px auto;
		background-size:211px auto;
	}
}

/* ------------------------------------------------------------ *\
	Section Blank
\* ------------------------------------------------------------ */

	#sectBasic{min-height: 90vh; display: flex; position: relative;}

	.plaintext{font-size: 16px; margin: 0 120px; }
	.plaintext p{line-height: 1.4em;}
	.plaintext ol, .plaintext ul{padding-left: 36px;}
	.plaintext li{line-height: 1.4em; margin-bottom: 6px;}

/* ------------------------------------------------------------ *\
	Article Primary
\* ------------------------------------------------------------ */
.article-primary { display: -webkit-flex; display: -ms-flexbox; display: flex; letter-spacing: 0.015em; }
.article-primary p { color: #c7c7c7; font-size: 18px; font-weight: 300; line-height: 1.3em;}
.article-primary .article-image { width: 66.66%; }
.article-primary .article-content { width: 33.33%; padding: 133px 8% 145px 8.5%; font-size: 24px; line-height: 1.2; }
.article-primary .article-title { font-size: 32px; font-weight: 400; line-height: 1.43; margin-bottom: 37px; }
.article-primary:nth-child(2n+2) .article-image { -webkit-order: 2; -ms-flex-order: 2; order: 2; }
@media(max-width: 1440px){
	.article-primary .article-content { padding: 133px 5% 145px 5.5%; }
}
@media (max-width: 1023px) {
	.article-primary .article-content { padding: 100px 5% 115px 5.5%; width: 50%; }
	.article-primary .article-image { width: 50%; }
}
@media (max-width: 767px) {
	.article-primary { display: block; }
	.article-primary .article-content { width: 100%; padding: 50px 15px; font-size: 14px; }
	.article-primary .article-image { width: 100%; padding-top: 40%; }
	.article-primary .article-title { margin-bottom: 20px; font-size: 20px; }
}
/* ------------------------------------------------------------ *\
	Article Secondary
\* ------------------------------------------------------------ */
.article-secondary {height:100%; font-size: 18px; line-height: 1.67; font-weight: 200; position: relative;}
.article-secondary .article-image { text-align: right; margin-right: -125px;}
.article-secondary .article-image.rel{z-index: 5; position: relative;}
/*.article-secondary .article-content { max-width: 655px; }*/
.article-secondary .article-title { font-size: 48px; font-weight: 200; line-height: 1.1; margin-bottom: 30px; }
@media (max-width: 767px) {
	.article-secondary { font-size: 14px; }
	.article-secondary .article-title { font-size: 36px; }
	.article-secondary .article-image { margin-right: 0; }
}

/* ------------------------------------------------------------ *\
	Article Build
\* ------------------------------------------------------------ */
.article-build { font-size: 18px; line-height: 1.5; letter-spacing: 0.015em; font-weight: 300;}
.article-build p {  }
.article-build .article-head { text-align: center; padding-bottom: 46px; }
.article-build .article-title { font-size: 32px; font-weight: 400; letter-spacing: 0.2em; }
.article-build .article-body { position: relative; -webkit-columns: 200px 2; -moz-columns: 200px 2; columns: 200px 2; -webkit-column-gap: 140px; -moz-column-gap: 140px; column-gap: 140px; }
.article-build .article-body:before { content: ''; width: 1px; height: auto; background: #e1e1e1; display: block; position: absolute; top: 10px; bottom: 130px; left: 50%; }
@media (max-width: 767px) {
	.article-build { line-height: 1.3; padding: 50px 5px; }
	.article-build p { font-size: 18px; font-weight: 300;}
	.article-build { font-size: 14px; }
	.article-build .article-body { -webkit-columns: initial; -moz-columns: initial; columns: initial; }
	.article-build .article-body:before { display: none; }
}



/* ------------------------------------------------------------ *\
	Section Articles
\* ------------------------------------------------------------ */
.section-articles { background: #222; }
/* ------------------------------------------------------------ *\
	Section Build
\* ------------------------------------------------------------ */
.section-build { background: #fff; color: #222; padding: 115px 0 121px; }
@media (max-width: 1023px) {
	.section-build { padding: 30px 0; }
}

/* ------------------------------------------------------------ *\
	Section Map
\* ------------------------------------------------------------ */
.section-map { min-height: 100vh; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; padding: 100px 0 150px; }
.section-map .section-map-inner { width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.section-map .section-content { position: relative; max-width: 560px; margin: auto; background: rgba(29, 29, 29, 0.76); padding: 40px 40px 60px; border-radius: 12px; display: none;}
.section-map .section-bar { background: #1d1d1d; color: #fff; position: absolute; bottom: 0; left: 0; width: 100%; padding: 32px 0 40px; }
.section-map .section-bar .shell { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
.section-map .section-bar .shell:after { display: none; }
.section-map .section-bar h4 { font-weight: 200; margin-bottom: 0; font-size: 30px; padding-top: 7px; }
.section-map .section-bar .btn { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; background: #779b5c; width: 162px; height: 48px; padding: 0 20px; line-height: 45px; font-size: 18px; }
.section-map .section-bar .btn:hover { background: #55773b; }
.section-map .gmap { height: 100%; }
@media (max-width: 1023px) {
	.section-map { padding-bottom: 200px; }
	.section-map .section-bar h4 { font-size: 24px; }
}
@media (max-width: 767px) {
	.section-map .section-content { padding-left: 15px; padding-right: 15px; }
	.section-map .section-bar h4 { font-size: 20px; padding-top: 0; }
}
/* ------------------------------------------------------------ *\
	Section Hardware
\* ------------------------------------------------------------ */
.section-hardware { min-height: 100vh; padding: 100px 0;
	background: linear-gradient(to bottom,  rgba(31,31,31,0.43) 0%,rgba(31,31,31,0.43) 1%,rgba(55,55,55,0.43) 50%,rgba(28,28,28,0.43) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e1f1f1f', endColorstr='#6e1c1c1c',GradientType=0 );
}
.section-hardware .section-head { max-width: 480px; margin: auto; text-align: center; font-size: 18px; line-height: 1.11; margin-bottom: 10px; }
.section-hardware .section-title { font-family: 'Lato', sans-serif; font-size: 48px; font-weight: 200; margin-bottom: 15px; }
.section-hardware .widgets { display: -webkit-flex; display: -ms-flexbox; display: flex; }
@media (max-width: 767px) {
	.section-hardware { min-height: 0; padding: 50px 0; }
	.section-hardware .section-head { margin-bottom: 50px; font-size: 14px; }
	.section-hardware .section-title { font-size: 40px; }
	.section-hardware .widgets { display: block; }
}
/* ------------------------------------------------------------ *\
	Section Soon
\* ------------------------------------------------------------ */
.section-soon { padding-bottom: 100px; padding-top: 100px; min-height: 100vh;
	background: linear-gradient(to bottom,  rgba(31,31,31,0.43) 0%,rgba(31,31,31,0.43) 1%,rgba(55,55,55,0.43) 50%,rgba(28,28,28,0.43) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e1f1f1f', endColorstr='#6e1c1c1c',GradientType=0 );
}
.section-soon .section-head { max-width: 480px; margin: auto; text-align: center; font-size: 18px; line-height: 1.11; margin-bottom: 100px; }
.section-soon .section-title { font-family: 'Lato', sans-serif; font-size: 48px; font-weight: 200; margin-bottom: 15px; }
.section-soon .section-body:after { }
.section-soon .section-image { float: left; width: 44.94%; padding: 0 30px; }
.section-soon .section-content { float: right; width: 53.06%; padding-top: 25px; }
@media (max-width: 1023px) {
	.section-soon .section-image { padding-left: 0; }
}
@media (max-width: 767px) {
	.section-soon { padding: 0 0 50px; min-height: 0; }

	.section-soon .section-content,
	.section-soon .section-image { float: none; width: 100%; text-align: center; }

	.section-soon .section-image { padding-right: 0; }
}

/* ------------------------------------------------------------ *\
	Section Features
\* ------------------------------------------------------------ */
.section-features { overflow: hidden; font-size: 18px; line-height: 1.35;}
.section-features h3 { margin-bottom: 13px; letter-spacing: 0.02em; }
.section-features .cols { display: -webkit-flex; display: -ms-flexbox; display: flex; }
.section-features .col { padding: 133px 6.5% 145px 9.3%; width: 33.33%; }
.section-features .col:nth-child(1) { background: #a9ca38; }
.section-features .col:nth-child(2) { background: #f7ac1a; }
.section-features .col:nth-child(3) { background: #f36b24; }
@media (max-width: 1200px) {
	.section-features .col { padding: 120px 6% 130px; }
}
@media (max-width: 1023px) {
	.section-features h3 { font-size: 37px; }
	.section-features .col { padding: 50px 4% 70px; }
}
@media (max-width: 767px) {
	.section-features { font-size: 14px; }
	.section-features h3 { font-size: 30px; }
	.section-features .cols { display: block; margin: 0; }
	.section-features .col { width: 100%; padding: 20px 15px; }
}
/* ------------------------------------------------------------ *\
	Section Responsibility
\* ------------------------------------------------------------ */
.section-responsibility { background: #efefef; color: #222; padding-top: 70px; font-size: 18px; font-weight: 300; line-height: 1.5em; }
.section-responsibility h4 { font-size: 32px; font-weight: 400; line-height: 1.31; margin-bottom: 47px; letter-spacing: 0.02em; }
.section-responsibility .section-content { width: 50%; float: left; padding-top: 120px; }
.section-responsibility .section-image { width: 50%; float: right; padding-left: 40px; }
@media (max-width: 767px) {
	.section-responsibility { line-height: 1.3; padding: 50px 5px; }
	.section-responsibility .section-content { width: 100%; float: none; padding-top: 0; }
	.section-responsibility .section-image { width: 100%; float: none; text-align: center; margin-top: 30px; }
	.section-responsibility .section-image img { max-height: 300px; }
}

a.highlight{
	color: #f5ac1b;
	font-weight: 400;
}
