/************* Variables ********************/
/* ======== Generic Variable ============== */
/* ======== Button Varibles =============== */
/*======== Search Button Variables ==========*/
/*======== Membership Package Variables ==========*/
/* End Variables */
/************** Mixins ***************/
/* Gives box shadow to all browsers except IE, right now no variables declared
so you're kind of stuck with the options listed below. */
/* Gives text shadow to all browsers except IE*/
/* Gives linear gradient background with no stops on all browsers,
just one color at the top going to another color at the bottom,
assuming bottom color is the darker color the background color is
set for older browsers that can't handle it. */
/* Transitions */
/* End Mixins */
/* Breakpoints */
#page_content {
  position: relative;
  padding-bottom: 0;
}

#homepage_hero {
  height: 392px;
  width: 100%;
  background-size: cover;
  padding: 50px 0;
}

#homepage_hero .content {
  width: 588px;
  padding: 0 0 0 28%;
  margin: 0 auto;
}

#homepage_hero .content h1 {
  margin: 0;
  font-size: 44px;
  line-height: 1.2;
}

#homepage_hero .content p {
  margin-top: 10px;
  font-size: 14px;
}

#homepage_hero .content #signup {
  padding-top: 20px;
  margin-bottom: 20px;
}

#homepage_hero .content #signup a {
  display: inline-block;
}

#homepage_hero .content #signup a span {
  margin: 0 10px -5px 0;
}

#homepage_hero .content .login_prompt {
  text-align: right;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

#homepage_hero #home_email_signup {
  margin: 0 0 0 5px;
}

.ie #signup a {
  font-size: 14px;
}

#features {
  width: 100%;
  height: 365px;
  background: #E9E7E6;
  background: #EFEEEE;
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E6E5), to(#EFEEEE));
  background: -webkit-linear-gradient(top, #E9E6E5 0%, #EFEEEE 100%);
  background: linear-gradient(to bottom, #E9E6E5 0%, #EFEEEE 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE9E6E5',endColorstr='#FFEFEEEE');
}

#features .container {
  background: transparent url("/public/images/min/home/features_sprite.a461d254af6c.png") no-repeat 62px 40px;
  width: 960px;
  height: 300px;
  margin: 0 auto;
}

#features .feature {
  width: 200px;
  float: left;
  text-align: center;
  margin: 163px 25px 0 14px;
}

#features .feature h2 {
  font-size: 18px;
  color: #999;
  font-weight: 600;
  text-transform: uppercase;
}

#features .feature p {
  color: #666;
  font-weight: 300;
}

#features .feature a .arrow-right {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #2f98d9;
  margin-top: 0;
  padding-top: 0;
  margin-left: 4px;
  display: inline-block;
}

#local {
  background: #FFFFFF;
  height: 400px;
  margin-bottom: -57px;
}

#local .container {
  background: transparent url("/public/images/footer2017/map_bg.c474fa30aa3a.png") no-repeat top center;
  width: 1100px;
  height: 400px;
}

#local .container h3 {
  text-align: center;
  font-size: 22px;
  padding: 30px 8px 15px;
}

#local .container li {
  margin-bottom: 10px;
}

#local .container a, #local .container a:hover, #local .container a:active {
  color: #000000;
  font-size: 14px;
  display: block;
}

#local .container a:hover {
  text-decoration: underline;
}

#local .home-column-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

#local .city-columns {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
}

footer {
  border-top: 0;
  margin-top: 0;
}

footer .large_phone {
  float: right;
  position: absolute;
  right: 0;
  top: -190px;
}

footer .large_phone a.app_image {
  width: 230px;
  height: 435px;
}

footer .large_phone a.app_image aside {
  position: absolute;
  left: 45px;
  top: -37px;
  color: #fff;
  width: 149px;
}

footer .large_phone a.app_image aside strong {
  font-size: 17px;
}

#site_ride #homepage_hero .content h1, #site_walk #homepage_hero .content h1, #site_hike #homepage_hero .content h1 {
  color: #fff;
}

#site_ride #homepage_hero .content p, #site_walk #homepage_hero .content p, #site_hike #homepage_hero .content p {
  color: #fff;
  text-shadow: 1px 1px 2px #444;
}

#site_ride #signup, #site_walk #signup, #site_hike #signup {
  color: #fff;
}