/* ----- `Homepage
----------------------------------------------------------------------------------------------------*/

.homepage .content { padding-bottom: 0; }

.banner-wrap { background: #83cde9 url(../img/homepage/formbuilder.jpg) bottom center no-repeat; height: 554px; overflow: hidden; position: relative; z-index: 9999; background-size: auto 130%; }
.homepage div header h1 {
  font-style: normal;
  font-size: 48px;
  line-height: 48px;
  margin-bottom: 5px;
  text-align: left;
}
.main-headline { padding: 0; }
.main-headline .page { position:relative; }
.main-headline a.btn { margin: 20px 0 0; }

.banner-text { padding-top: 155px; margin-bottom: 10px; float: right; text-align: left; width: 37%; }
.banner-text span /* hubspot CTA */ { display: inline-block; margin-top: -5px; }
.banner-text .left { float:left; }
.banner-text p { color:#000; font-size:.9375em; line-height:23px; margin: 0 auto; }
.banner-text a.sign-up { display:block; font-size:1em; padding:13px 35px; margin-bottom:5px; margin-top:20px; width: auto; font-weight: 900; }
.banner-text img { float: right; padding-left:50px; padding-top:15px; padding-right:13px; }
.banner-text .second-link { font-size:14px; }

#webinar-signup { 
  background: #eae9da url(../img/webinar-BG.jpg) top center no-repeat; 
  background-size: cover; 
  border-top: 1px solid #dad8b6; 
  border-bottom: 1px solid #dad8b6; 
  padding: 40px 0 30px; 
}
#webinar-signup p { font-size: 24px; float: left; }
#webinar-signup .btn { float: right; }

#cartodb-alert { 
  background: #046aaa url(../img/homepage/carto-BG.jpg) top center no-repeat; 
  background-size: cover; 
  border-top: 1px solid #004672; 
  border-bottom: 1px solid #004672; 
  padding: 40px 0 30px; 
}
#cartodb-alert p { color: #fff; font-size: 26px; float: left; margin-bottom: 0; margin-top: -5px; }
#cartodb-alert p.top { margin-top: -14px; }
#cartodb-alert .btn { float: right; margin-top: -23px; }

@media only all and (max-width: 978px) {
  .banner-wrap {
    background-size: auto 110%;
  }
  .banner-text {
    position: static;
    margin-left: 20px;
  }
  .banner-text p { width: auto; }
  .homepage div header h1 {
    font-size: 38px;
    line-height: 38px;
  }
}
@media only all and (max-width: 756px) {
  .banner-text {
    position: static;
    margin: 20px auto;
    width: 100%;
    text-align: center;
    padding-top: 20px;
  }
  
  .homepage div header h1 {
    text-align: center;
  }
  .banner-wrap {
    background: #83cde9 url(../img/homepage/formbuilder-mob.jpg) bottom center no-repeat;
    height: 644px;
    background-size: 100%;
  }

}
@media only all and (max-width: 480px) {
  .homepage div header h1 {
    font-size:34px;
    line-height:36px;
  }
  .banner-text {
    position: static;
    margin: 20px auto;
    width: auto;
  }
  
}
/* Logos */
.hp-logos { background:#f1f1f1; padding: 0 10px; height: 84px; text-align: center; overflow: hidden; }
.hp-logos ul li { display: inline-block; padding: 0 15px; }
.hp-logos img { height: 80px; }

@media only all and (max-width: 756px) {
  .hp-logos {
	display: none;
  }

}

/* Benefits */
#hp-benefits { padding: 35px 0 85px; background: url(../img/homepage/benefits-bg.jpg) no-repeat center right; background-size: 100%; }
#hp-benefits .lefthalf {float: left; width: 55%; height: 100%;}
#hp-benefits .righthalf{background: url(../img/homepage/benefits-bg.png) no-repeat top left; float: right; width: 45%; height: 100%;}
#hp-benefits .benefit { display: block; margin-top: 35px; }
#hp-benefits .benefit h2 { display: block; text-align: left;}
#hp-benefits .benefit p { display: block; text-align: left; width: 300px;}
#hp-benefits .benefit img { width: 150px; display: inline-block; margin-right: 25px; }
#hp-benefits .feature-inner { display: inline-block; vertical-align: top; margin-top: 5px; }
#hp-benefits .feature-inner a { font-size: .875em; }

@media only all and (max-width: 978px) {
  #hp-benefits {
    background: url(../img/homepage/benefits-bg.jpg) no-repeat 100px center;
    background-size: 100%;
  }
}

@media only all and (max-width: 756px) {
  #hp-benefits {
    background: none;
  }
  #hp-benefits .benefit img {
    width: 130px;
  }
}

@media only all and (max-width: 480px) {
  #hp-benefits section {
    padding: 0;
  }
  #hp-benefits .benefit p {
    width: 280px;
  }
  #hp-benefits .benefit img {
    width: 150px;
    display: block;
    margin: 0 auto;
 }

 #hp-benefits .benefit h2 {
    display: block;
    text-align: center;
    font-size: 1.7em;
 }
 
 #hp-benefits .benefit p {
    text-align: center;
  }

}



/* Features  */
#hp-features { background:#eef7f9; border-bottom:1px solid #e7e7e7; border-top:1px solid #e7e7e7; overflow: hidden; padding: 50px 0; }
#hp-features h2 { margin-bottom: 40px; }
#hp-features .small-features { width: 24%; display: inline-block; padding-left: 30px; }
#hp-features .small-features ul { }
#hp-features .small-features ul li { margin: 20px 0 0;}
#hp-features .small-features img { width: 27px; display: inline-block;}
#hp-features .small-features span { display: inline-block; font-size: .85em; vertical-align: top; margin-left: 5px; }


@media only all and (max-width: 978px) {
  #hp-features .small-features {
    padding-left: 0px;
  }
}

@media only all and (max-width: 756px) {
 #hp-features .small-features {
    width: 49%;
    padding-left: 30px;
  }
}

@media only all and (max-width: 480px) {
  #hp-features .small-features {
    width: 100%;
  }
}

/* Customer */

#hp-customer { padding: 30px 0 35px; background-color: #fefefe; position: relative; overflow: hidden; }
#hp-customer .quotes { 
  background: url(../img/homepage/uses/quotes.svg) top left no-repeat; 
  background-size: 200px 200px;
  height: 200px; 
  width: 200px; 
  position: absolute; 
  left: 20px; 
  opacity: .02; 
  top: -20px; 
}
#hp-customer .quotes.closed { 
  position: absolute; 
  left: auto; 
  top: auto;
  right: 20px;
  bottom: -30px; 
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}
#hp-customer .testimonial { width: 100%; padding: 25px 0 30px 70px; overflow: hidden; }
#hp-customer .testimonial span { display: block; margin-top: 10px; font-style: italic; }
#hp-customer .testimonial img { height: 80px; width: 80px; border: 1px solid #9a9a9a; border-radius: 60px; display: inline-block; float: left; margin: 0px 15px 0 -70px; }

/* Quote NAV dot test */

.slides {
    padding: 0;
    display: block;
    height: 130px;
    margin: 0 auto;
    position: relative;
}

.slide-container { display: block; }
.slide-container section { position: relative; }
.slide {
    top: 0;
    display: block;
    position: absolute;

    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}
.slide:hover + .nav label { opacity: 0.5; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transition: opacity 1s ease-in-out;
}


@media only all and (max-width: 978px) {

}

@media only all and (max-width: 756px) {
  .slides { height: 200px; }
}
@media only all and (max-width: 480px) {
  #hp-customer .testimonial img {
    display: block;
    margin: 0 auto;
    text-align: center;
    float: none;
    margin-bottom: 20px;
  }
  #hp-customer .testimonial { padding: 30px 0 30px 0px; }
  .slides { height: 340px; }

}

/* Uses */
.hp-usecase .intro p { text-align: center; }

#navigation {
  margin: 0;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  font-size: 0;
  border-top: 1px solid #f4f4f4
}

#navigation li {
  display: inline-block;
  padding: 0 ;
  margin: 0 ;
  width: 25% ;
  font-size: 18px;
  text-align: center;
  height: 90px;
}

#navigation li a {
  background: #f1f1f1;
  color: #999;
  vertical-align: middle;
  width: 100%;
  font-weight: bold;
  display:block ;
  outline: 0;
  padding: 15px 0;
}

#navigation li a:hover {
  background: #fff;
  color: #000;
}

#navigation li.active a {
  background: #fff;
  color: #000;
}
#navigation li a img { display: block; height: 30px; margin: 5px auto; opacity: .3; transition: all 0.2s ease-in-out; }
#navigation li.nav-checklists a img { height: 25px; margin-bottom: 10px; }
#navigation li.active a img, #navigation li a:hover img { opacity: 1.0; }

#container {
  overflow: hidden;
  width: 100%;
  height: 405px;
}

.sub {
  overflow: hidden;
  height: 405px;
  padding: 50px 50px 0;
}


/* Background Images / Overlays */

/* Preload images */
#preload { position: absolute; left: -99999px; }
/* END preload*/

/* CHECKLISTS */
.sub1 { background: url(../img/homepage/uses/city-park.jpg) top center no-repeat; }
.sub1-one-overlay {
  background: url(../img/homepage/uses/city-park-one.jpg) top center no-repeat !important; 
  transition: all 0.25s ease-in-out;
}
.sub1-two-overlay {
  background: url(../img/homepage/uses/city-park-two.jpg) top center no-repeat !important; 
  transition: all 0.25s ease-in-out;
}
.sub1-three-overlay {
  background: url(../img/homepage/uses/city-park-three.jpg) top center no-repeat !important; 
  transition: all 0.25s ease-in-out;
}

/* ASSETS */
.sub2 {
  background: url(../img/homepage/uses/farmland.jpg) top center no-repeat;
}
.sub2-one-overlay {
  background: url(../img/homepage/uses/farmland-one.jpg) top center no-repeat !important; 
  transition: all 0.25s ease-in-out;
}
.sub2-two-overlay {
  background: url(../img/homepage/uses/farmland-two.jpg) top center no-repeat !important; 
  transition: all 0.25s ease-in-out;
}
.sub2-three-overlay {
  background: url(../img/homepage/uses/farmland-three.jpg) top center no-repeat !important; 
  transition: all 0.25s ease-in-out;
}

/* INSPECTIONS */
.sub3 {
  background: url(../img/homepage/uses/canal.jpg) top center no-repeat;
}
.sub3-one-overlay {
  background: url(../img/homepage/uses/canal-one.jpg) top center no-repeat !important; 
  transition: all 0.25s ease-in-out;
}
.sub3-two-overlay {
  background: url(../img/homepage/uses/canal-two.jpg) top center no-repeat !important; 
  transition: all 0.25s ease-in-out;
}
.sub3-three-overlay {
  background: url(../img/homepage/uses/canal-three.jpg) top center no-repeat !important; 
  transition: all 0.25s ease-in-out;
}

/* GIS */
.sub4 {
  background: url(../img/homepage/uses/neighborhood.jpg) top center no-repeat;
}
.sub4-one-overlay {
  background: url(../img/homepage/uses/neighborhood-one.jpg) top center no-repeat !important; 
  transition: all 0.25s ease-in-out;
}
.sub4-two-overlay {
  background: url(../img/homepage/uses/neighborhood-two.jpg) top center no-repeat !important; 
  transition: all 0.25s ease-in-out;
}
.sub4-three-overlay {
  background: url(../img/homepage/uses/neighborhood-three.jpg) top center no-repeat !important; 
  transition: all 0.25s ease-in-out;
}

/* END Background Images / Overlays */

.sub .exampleuse {
  position: relative;
}

.example-btn {
  position: absolute;
  background-color: #ffffff;
  border-radius: 7px;
  width: 200px;
  height: 32px;
  box-shadow: 0 3px 10px rgba(0, 0, 40, 0.4);
  transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3);
  overflow: hidden;
  cursor: pointer;
  top: 100px;
  left: 100px;
  transform: translateX(0%) translateY(0%);
}
.example-btn:hover { background-color: #eee; transform: translateX(2%) translateY(3%); }

/* Modal Tabs */

/* CHECKLISTS */
.sub1 .example-btn.one { top: 40px; left: 100px; }
.sub1 .example-btn.two { top: 120px; left: 30%; }
.sub1 .example-btn.three { top: 80px; right: 70px; left: auto; }
.sub1 .example-btn.one.clicked { transform: translateX(150%) translateY(0%); }
.sub1 .example-btn.two.clicked { transform: translateX(100%) translateY(-40%); }
.sub1 .example-btn.three.clicked { transform: translateX(-150%) translateY(-20%); }

/* ASSETS */
.sub2 .example-btn.one { top: 120px; left: 170px; }
.sub2 .example-btn.two { top: 120px; left: 50%; }
.sub2 .example-btn.three { top: 140px; right: 10px; left: auto; }
.sub2 .example-btn.one.clicked { transform: translateX(150%) translateY(-40%); }
.sub2 .example-btn.two.clicked { transform: translateX(40%) translateY(-40%); }
.sub2 .example-btn.three.clicked { transform: translateX(-100%) translateY(-50%); }

/* INSPECTIONS */
.sub3 .example-btn.one { top: 200px; left: 140px; }
.sub3 .example-btn.two { top: 240px; left: 47%; }
.sub3 .example-btn.three { top: 130px; right: 100px; left: auto; }
.sub3 .example-btn.one.clicked { transform: translateX(100%) translateY(-70%); }
.sub3 .example-btn.two.clicked { transform: translateX(-140%) translateY(-87%); }
.sub3 .example-btn.three.clicked { transform: translateX(-100%) translateY(-45%); }

/* GIS */
.sub4 .example-btn.one { top: 80px; left: 20px; }
.sub4 .example-btn.two { top: 120px; left: 50%; }
.sub4 .example-btn.three { top: 260px; right: 150px; left: auto; }
.sub4 .example-btn.one.clicked { transform: translateX(150%) translateY(-30%); }
.sub4 .example-btn.two.clicked { transform: translateX(40%) translateY(-40%); }
.sub4 .example-btn.three.clicked { transform: translateX(-180%) translateY(-92%); }

.mobile-text { display: none; }
/* Uses Media Queries */
@media only all and (max-width: 1280px) {
  .sub { height: 360px; }
  .sub1, .sub2, .sub3, .sub4,
  .sub1-one-overlay .sub1-two-overlay .sub1-three-overlay, 
  .sub2-one-overlay .sub2-two-overlay .sub3-three-overlay, 
  .sub3-one-overlay .sub3-two-overlay .sub3-three-overlay, 
  .sub4-one-overlay .sub4-two-overlay .sub4-three-overlay { background-size: 1280px 360px !important; }

  /* Modal Tabs */
  
  /* CHECKLISTS */
  .sub1 .example-btn.one { top: 40px; left: 0px; }
  .sub1 .example-btn.two { top: 190px; left: 20%; }
  .sub1 .example-btn.three { top: 80px; right: 70px; left: auto; }
  .sub1 .example-btn.one.clicked { transform: translateX(120%) translateY(0%); }
  .sub1 .example-btn.two.clicked { transform: translateX(100%) translateY(-72%); }
  .sub1 .example-btn.three.clicked { transform: translateX(-120%) translateY(-31%); }
  
  /* ASSETS */
  .sub2 .example-btn.one { top: 120px; left: 0px; }
  .sub2 .example-btn.two { top: 60px; left: 44%; }
  .sub2 .example-btn.three { top: 140px; right: 10px; left: auto; }
  .sub2 .example-btn.one.clicked { transform: translateX(50%) translateY(-46%); }
  .sub2 .example-btn.two.clicked { transform: translateX(40%) translateY(-4%); }
  .sub2 .example-btn.three.clicked { transform: translateX(-100%) translateY(-50%); }
  
  /* INSPECTIONS */
  .sub3 .example-btn.one { top: 100px; left: 0px; }
  .sub3 .example-btn.two { top: 240px; left: 47%; }
  .sub3 .example-btn.three { top: 160px; right: 0px; left: auto; }
  .sub3 .example-btn.one.clicked { transform: translateX(60%) translateY(-40%); }
  .sub3 .example-btn.two.clicked { transform: translateX(-110%) translateY(-94%); }
  .sub3 .example-btn.three.clicked { transform: translateX(-100%) translateY(-61%); }
  
  /* GIS */
  .sub4 .example-btn.one { top: 80px; left: 20px; }
  .sub4 .example-btn.two { top: 60px; left: 50%; }
  .sub4 .example-btn.three { top: 190px; right: 0px; left: auto; }
  .sub4 .example-btn.one.clicked { transform: translateX(50%) translateY(-30%); }
  .sub4 .example-btn.two.clicked { transform: translateX(10%) translateY(-20%); }
  .sub4 .example-btn.three.clicked { transform: translateX(-120%) translateY(-74%); }

}
@media only all and (max-width: 978px) {
  .sub { height: 275px; }
  #navigation li { font-size: 13px; height: 86px; }
  .sub1, .sub2, .sub3, .sub4 { background-size: 978px 275px !important; }  
  .mobile-text { background: #f7f7f7; border-bottom: 1px solid #f1f1f1; display: block; padding:30px 0; }
  .mobile-text h3 { font-size: 30px; }
  .mobile-text h3 span { color: #999; }
  .mobile-text p { text-align: center; }
  .exampleuse { display: none; }
}
@media only all and (max-width: 756px) {
  .sub { height: 213px; }
  .sub1, .sub2, .sub3, .sub4 { background-size: 756px 213px !important; }  
}
@media only all and (max-width: 480px) {
  .sub { height: 135px; }
  .sub1, .sub2, .sub3, .sub4 { background-size: 480px 135px !important; }  
}
/* END Uses Media Queries*/

.example-btn:after{
    position:absolute;
    right:-20px;
    content:" ";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 25px 0 25px 20px;
    border-color: transparent transparent transparent #fff;
}
.example-btn .cta {
  position: absolute;
  color: #000;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  transition: all 0s ease-in-out;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.example-btn .close {
  position: absolute;
  right: 20px;
  top: 10px;
  cursor: pointer;
  color: #333;
  font-size: 21px;
  font-weight: bold;
  opacity: 0;
  transition: all 0.1s cubic-bezier(0.3, 0, 0, 1.3);
  transform: rotate(-45deg);
  transform-origin: center center;
}
.example-btn .edesc {
  padding: 0 40px 40px;
  list-style-type: none;
  margin: 75px auto 0 auto;
}
.clicked {
  width: 350px;
  height: auto;
  cursor: auto;
}
.example-btn.clicked:hover { background-color: #fff; }
.example-btn.clicked .cta {
  left: 40px;
  top: 30px;
  transform: translateX(0) translateY(0);
  color: #666;
}

.example-btn.clicked .close {
  opacity: 1;
  transform: rotate(0deg);
}

@media only all and (min-width: 1920px) {
  body.homepage {
    max-width: 1920px;
    box-shadow: 0px 0px 10px 3px rgba(214,214,214,1);
    height: auto;
    margin: 0 auto;
  }  
  #hp-benefits {
    background: url(../img/homepage/benefits-bg.jpg) no-repeat center right;
    background-size: contain;
 }
}

@media only all and (min-width: 1440px) {
   .sub {
    background-size: cover !important;
  }

}
