/**
 * @file
 * Visual styles for Newsplus's landing pages.
 */

.landing-intro {
  background-color: #FF404C;
  color: #fff;
  padding: 20px;
  border-bottom: #b82601 6px solid;
}

.landing-benefits {
  background-color: #f4decb;
  padding: 20px;
  border-bottom: #b82601 6px solid;
}

.landing-new-listing,
.landing-newsletter,
.about-intro,
.about-platform {
  background-color: #f4decb;
  padding: 20px;
}

.landing-newsletter input.form-email {
  width: 40%;
}

.landing-newsletter.region > .subscribe-form .form-actions {
  right: 27%;
}

.landing p.message {
  text-align: center;
}

.landing p.message-first {
  padding-top: 20px;
}

.landing-pricing {
  background-color: #f4decb;
  padding: 20px;
}

.landing-media-kit,
.about-how {
  background-color: #062f4f;
  color: #fff;
  padding: 20px;
}

.landing h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
}

.landing h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
}

.landing h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
}

.landing h3.heading {
  text-align: left;
  color:#b82601;
}

.landing .tagline {
  font-size: 22px;
  font-weight: 400;
  text-align: center;
}

.landing .cta {
  text-align: center;
}


.landing .section {
  display: table;
}

.landing .list-item {
  display: table-row;
}

.landing .list-item > i {
  display: table-cell;
  font-size: 32px;
  padding-left: 10px;
  padding-bottom: 10px;
  position: relative;
  top: 8px;
}

.landing .list-item-small > i {
  font-size: 28px;
  top: 4px;
  color:#b82601;
}

.landing .list-item > div {
  padding-left: 20px;
  padding-bottom: 10px;
}

@media (max-width: 767px) {
  .landing .list-item > i {
    font-size: 24px !important;
    padding-left: 0;
  }

  .landing .list-item > div {
    font-size: 14px;
    padding-left: 15px;
  }

  .landing p.message {
    text-align: left;
  }

  .landing-newsletter input.form-email {
    width: 100%;
  }

  .landing-newsletter.region > .subscribe-form .form-actions {
    right: 0;
  }
}

.landing .saving {
  font-size: 14px;
  padding-top: 5px;
  padding-bottom: 10px;
}

.landing .image-left img {
  float:left;
  margin-right:20px;
  margin-bottom:15px;
}

.landing .image-right img {
  float:right;
  margin-left:20px;
  margin-bottom:15px;
}

.landing.with-title .image-left img,
.landing.with-title .image-right img {
  margin-top:20px;
}

@media (max-width: 480px) {
  .landing .image-left img {
    float:none;
    margin-right:0;
    margin-top:0;
  }

  .landing .image-right img {
    float:none;
    margin-left:0;
    margin-top:0;
  }
}

.landing .list {
  text-align: center;
}

.landing .list-footer {
  text-align: center;
  padding-top: 15px;
}

.landing .key {
  font-weight: 700;
}

.comparison tr td:first-child {
  text-align: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 125px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #b82601;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #062f4f;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(62px);
  -ms-transform: translateX(62px);
  transform: translateX(91px);
}

.slider:after {
 content:'Monthly';
 color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 font-size: 14px;
}

input:checked + .slider:after {  
  content:'Yearly';
}