/* Index
- Shadows
- Gradients
*/
/************** Mixins ***************/
/* box-shadow Style - same for all usage */
/* Inner Shadow */
/* 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. */
/* linear gradient with 4 colors */
/* Transitions */
/* Site Color */
/* Breakpoints */
@media screen and (max-width: 960px) {
  body.responsive header#site_header .header_column h1 {
    background-position-x: 0;
    width: 100%;
  }
}

.mvp_pricing {
  text-align: center;
  font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.mvp_pricing .price {
  font-size: 43px;
  font-weight: 500;
  line-height: 80px;
  margin-right: -10px;
}

.mvp_pricing .button.upgrade_now_button {
  margin-left: 10px;
  position: relative;
}

#mvp_subscription ul {
  list-style-type: none;
  padding: 0 30px;
  margin: 0;
}

#mvp_subscription ul li {
  height: 30px;
  border-bottom: 1px dotted #ccc;
  margin-bottom: 3px;
}

#mvp_subscription ul li span.feature_icon {
  display: inline-block;
  background: url("/public/images/mvp/options/icon_sprite.65bbf8de5d8b.png") no-repeat top left;
  width: 33px !important;
  vertical-align: middle;
}

#mvp_subscription ul li span.feature_icon.icon_cadenceanalysis {
  background-position: 0 0;
  width: 26px;
  height: 28px;
}

#mvp_subscription ul li span.feature_icon.icon_customsplits {
  background-position: 0 -70px;
  width: 21px;
  height: 28px;
}

#mvp_subscription ul li span.feature_icon.icon_heartrate {
  background-position: 0 -140px;
  width: 20px;
  height: 28px;
}

#mvp_subscription ul li span.feature_icon.icon_intervaltraining {
  background-position: 0 -209px;
  width: 23px;
  height: 28px;
}

#mvp_subscription ul li span.feature_icon.icon_leaderboardfilters {
  background-position: 3px -275px;
  width: 19px;
  height: 28px;
}

#mvp_subscription ul li span.feature_icon.icon_livetracking {
  background-position: 0 -343px;
  width: 22px;
  height: 28px;
}

#mvp_subscription ul li span.feature_icon.icon_mapfeatures {
  background-position: 0 -418px;
  width: 23px;
  height: 28px;
}

#mvp_subscription ul li span.feature_icon.icon_mobilecoaching {
  background-position: 0 -487px;
  width: 24px;
  height: 28px;
}

#mvp_subscription ul li span.feature_icon.icon_noads {
  background-position: 0 -554px;
  width: 22px;
  height: 28px;
}

#mvp_subscription ul li span.feature_icon.icon_poweranalysis {
  background-position: 0 -625px;
  width: 25px;
  height: 28px;
}

#mvp_subscription ul li span.feature_icon.icon_routerecommender {
  background-position: 0 -695px;
  width: 20px;
  height: 28px;
}

#mvp_subscription ul li span.feature_icon.icon_trainingplans {
  background-position: 3px -767px;
  width: 16px;
  height: 28px;
}

#mvp_subscription ul li span.feature_icon.icon_autoroute {
  background-position: 0 -695px;
  width: 25px;
  height: 28px;
}

#mvp_subscription ul li span.feature {
  display: inline-block;
}

.starred_text {
  font-size: .82em;
}

#membership_details, #package_details {
  height: 498px;
  padding-top: 30px;
}

.center {
  text-align: center;
}

.benefit_header img {
  margin: -3px 0;
}

#mvp_package #package_details img {
  display: block;
  width: 350px;
  margin: 0 auto;
}

#mvp_package ul {
  list-style: circle outside;
  margin-left: 25px;
}

#mvp_package .product_title {
  margin-top: 8px;
}

@media only screen and (max-width: 767px) and (min-width: 480px) {
  body.responsive #mvp_header img {
    width: 420px !important;
    height: auto;
  }
  body.responsive #mvp_package ul {
    margin-left: 40px;
  }
  body.responsive #mvp_package #package_details img {
    width: auto !important;
    height: auto;
  }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
  body.responsive h2 {
    font-size: 18px;
    line-height: 16px;
  }
  body.responsive #mvp_subscription ul {
    padding: 0 30px;
  }
  body.responsive .half.columns.alpha {
    margin-right: 0;
  }
  body.responsive .half.columns.omega {
    margin-left: 0;
  }
}

@media only screen and (max-width: 767px) {
  body.responsive h2 {
    font-size: 18px;
    line-height: 16px;
  }
  body.responsive #mvp_header img {
    width: 300px;
    height: auto;
  }
  body.responsive #mvp_container #mvp_options.row .columns .box {
    height: auto;
  }
  body.responsive #mvp_container #mvp_subscription ul {
    padding: 0 10px;
  }
  body.responsive #mvp_container #mvp_package #package_details {
    width: auto;
  }
  body.responsive #mvp_container #mvp_package #package_details img {
    width: 260px;
    height: auto;
  }
  body.responsive #mvp_container .half {
    width: 100%;
  }
}

#upsell_shim_upsell_tout {
  background: transparent url("/public/images/mvp/shim_text.535eb9c6add6.png") no-repeat 0 0;
  padding: 0;
  margin: 0;
  height: 63px;
  cursor: pointer;
  position: relative;
  margin-bottom: 20px;
}

#upsell_shim_upsell_tout div.button {
  position: absolute;
  left: 773px;
  top: 1px;
}

#upsell_shim_upsell_tout .button {
  background: url("/public/images/mvp/mvp_learn_more_sprite.0b83e03d84e0.png") no-repeat 0 0;
  width: 143px;
  height: 37px;
  border: 0 none;
  padding: 8px 0;
}

#upsell_shim_upsell_tout .button:hover {
  background-position: 0 -87px;
}

#upsell_shim_upsell_tout .button span {
  color: white;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  width: 143px;
  margin-top: 1px;
  display: inline-block;
}

.upsell_mvp {
  background: transparent url("/public/images/mvp/smallshim1.9010b0c32f23.png") no-repeat 0 0;
  height: 40px;
  padding: 14px 20px 0 163px;
  font-size: 19px;
  color: #4a7fa1;
  margin-left: -12px;
  width: 425px;
  cursor: pointer;
}

.upsell_mvp strong {
  color: #003a66;
}

.upsell_mvp a {
  vertical-align: middle;
  margin-left: 15px;
  font-size: 14px;
  width: 105px;
}

.mvp_upsell_modal {
  background: url("/public/images/mvp/route_modal_upsell.aef259fd69c3.png") no-repeat 0 0;
  cursor: pointer;
  display: block;
  height: 243px;
  overflow: hidden;
  padding: 20px;
  position: relative;
  width: 276px;
}

.mvp_upsell_modal .mvp_upsell_modal_close {
  font-weight: 600;
  padding: 6px 12px 30px 30px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
}

.mvp_upsell_modal .mvp_upsell_modal_contents {
  left: 0;
  margin: 0;
  padding-top: 100px;
  position: relative;
  top: 0;
  width: 100%;
}

.mvp_upsell_modal .mvp_upsell_modal_copy {
  color: #999;
  font-weight: 600;
}

.mvp_upsell_container .button, .mvp_upsell_modal .button {
  display: inline-block;
  position: static;
  background: url("/public/images/mvp/mvp_learn_more_sprite.0b83e03d84e0.png") no-repeat 0 0;
  width: 143px;
  height: 37px;
  border: 0 none;
  margin-top: 40px;
  padding: 8px 0;
}

#mvp_upsell_close {
  float: right;
  height: 40px;
  position: absolute;
  right: 50px;
  top: 0;
  width: 40px;
  line-height: 40px;
  font-size: 18px;
  z-index: 100;
  color: #999;
}

#mvp_upsell_close:hover {
  color: #444;
}

.qtip-custom-clear {
  background: none;
  border: 0;
}

/* annual monthly panel */
@media only screen and (max-width: 767px) {
  body.responsive .item.row {
    /*hide stuff*/
    padding: 2px 0;
    border: 0;
  }
  body.responsive #ui-tooltip-0 .column.alpha.omega {
    margin: 0 -7px 0 7px !important;
  }
}

.ui-tooltip-content div .container,
.ui-tooltip-content div .column,
.ui-tooltip-content div .row {
  background: transparent;
  border: 0;
}

.annual_savings_callout {
  font-size: 0.8em;
  color: #E47228;
  font-weight: bold;
  margin-bottom: 1em;
  padding: .4em 1.2em;
}

.checkout_form_label {
  margin-bottom: 8px;
  border: 1px solid #e2e2e2;
  background: #e2e2e2;
  background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e2e2e2));
  background: -webkit-linear-gradient(top, #f2f2f2 0%, #e2e2e2 100%);
  background: linear-gradient(to bottom, #f2f2f2 0%, #e2e2e2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF2F2F2',endColorstr='#FFE2E2E2');
  -webkit-border-radius: 5px;
          border-radius: 5px;
  padding: .7em 1.5em .7em .2em;
  width: 255px;
  font-weight: bold;
  cursor: default;
}

.checkout_form_label:before {
  content: " ";
  position: absolute;
  margin-top: 0;
  margin-left: -11px;
  height: 0;
  width: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #ddd;
}

.checkout_form_label_left {
  width: 111px;
  text-align: left;
}

.checkout_form_label_right {
  padding-left: 1em;
}

.checkout_form_label_right .price {
  color: #0771BF;
  font-size: 1.2em;
  margin: 0;
}

.checkout_form_label_right .term {
  color: #444;
  font-size: .75em;
  margin-top: 2px;
}

.checkout_button {
  text-align: center;
  margin-bottom: 0;
}

.ui-tooltip-content .container {
  width: 340px;
  border: 0;
  background-color: transparent;
  padding-top: 1.5em;
}

.ui-tooltip-content input[type=radio] {
  margin-top: 11px;
}

.cc_debug {
  position: fixed;
  top: 400px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 3px;
  opacity: 0.8;
  z-index: 9999;
}

.cc_debug a {
  text-decoration: underline;
}

#zuora_form {
  float: left;
  width: 100%;
}

#zuora_form section {
  vertical-align: top;
  width: 620px;
  border-left: 0;
  border-right: 1px solid #e2e2e2;
  margin-bottom: 0;
  float: left;
}

#zuora_form section iframe {
  width: 100%;
}

#zuora_form section h3 {
  margin: 15px 0 5px 7px;
  font-size: 20px;
  font-weight: 600;
}

#zuora_form .paypal {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  margin-top: 20px;
}

#zuora_form .paypal img {
  margin-top: 15px;
}

@media only screen and (max-width: 767px) {
  #page_content .container {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #page_content .container .sixteen {
    width: 100%;
  }
  #discount {
    width: 100px !important;
  }
  #zuora_form section {
    float: none;
    border-right: 0 none;
    width: 100%;
  }
  #zuora_form section iframe {
    min-height: 245px;
  }
}

#ordersuccess hr {
  height: 10px;
  background: #ececec;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ececec));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ececec 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ececec 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF',endColorstr='#FFECECEC');
  border: 0;
  border-bottom: 1px solid #cecece;
  margin: 20px 0 0;
  float: none;
  clear: both;
  zoom: 1;
}

#ordersuccess header {
  margin-top: 30px;
}

#ordersuccess header img {
  float: left;
  margin-right: 30px;
}

#ordersuccess header h1 {
  text-transform: none;
  font-size: 18px;
  line-height: 24px;
}

#ordersuccess header p {
  float: none;
  display: block;
  line-height: 21px;
  padding: 10px 10px 0 0;
}

#ordersuccess section article {
  border: 0;
  margin: 0;
  padding: 0;
}

#ordersuccess section article#help {
  margin-top: 20px;
  color: #666666;
  font-size: 18px;
}

#ordersuccess section article#help span {
  font-size: 22px;
  display: inline-block;
  zoom: 1;
  margin-right: 36px;
}

#ordersuccess section article h2 {
  text-transform: none;
  color: #666666;
  font-weight: 400;
  margin: 20px 0;
}

#ordersuccess section article aside {
  float: left;
  margin-left: 34px;
  width: 289px;
}

#ordersuccess section article aside div.rounded {
  border: 1px solid #ececec;
  -webkit-border-radius: 6px;
          border-radius: 6px;
  padding: 15px;
  margin: 0;
}

#ordersuccess section article aside div.rounded h3 {
  font-size: 15px;
  text-align: center;
  color: #666666;
}

#ordersuccess section article aside div.rounded a {
  float: none;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  margin: 180px 0 -3px;
}

#ordersuccess section article aside#route_genius {
  margin-left: 0 !important;
}

#ordersuccess section article aside#route_genius div.rounded {
  background: #fff url("/public/images/mvp/mvp_route_genius.9dee7e006b70.png") no-repeat center bottom;
}

#ordersuccess section article aside#training_plans div.rounded {
  background: #fff url("/public/images/mvp/mvp_training_plans.b7fa77faea8b.png") no-repeat center bottom;
}

#ordersuccess section article aside#mobile_aps div.rounded {
  background: #fff url("/public/images/mvp/mvp_moblie_app.b50b9b061dc1.png") no-repeat center bottom;
}

#ordersuccess section article aside h4, #ordersuccess section article aside ul li {
  padding: 0 20px;
  font-size: 15px;
  line-height: 25px;
}

#ordersuccess section article aside h4 {
  margin: 12px 0 0;
}

#ordersuccess section article aside ul {
  margin: 0;
}