/* ====================================================

 @company: Siteimprove
 @contributors: Rickard Andersson, ria@siteimprove.com
 @content: plans & pricing

======================================================= */

/****************************************
  ==== LAYOUT
****************************************/

.grid.full {
  max-width: 1920px;
}
div.features {
  width: 350px !important; float: left; position: relative; z-index: 5;
}
div.content-wrap {
  width: 100%; float: left; margin: 0 0 0 -350px; position: relative; z-index: 4;
}
div.content-wrap div.content {
  margin: 0 0 0 350px; position: relative;
}
.compare-header, .plan-notes, .compare-wrap .plan-header, .compare-wrap .f-lbl {
  display: none;
}

/****************************************
  ==== PLANS
****************************************/

div.plans-wrap {
  z-index: 9; padding-bottom: 0;
}
div.plans-wrap div.features {
  z-index: 3;
}
div.plans-wrap div.features div.wrap {
  padding: 30px; background-color: transparent;
}
div.plans-wrap div.features div.wrap h4 {
  padding: 60px 0 0 0;
}
div.plans-wrap div.plans {
  position: relative; z-index: 3; -webkit-box-shadow: 0 5px 30px rgba(60,72,94,0.15); -moz-box-shadow: 0 5px 30px rgba(60,72,94,0.15); box-shadow: 0 5px 30px rgba(60,72,94,0.15);
}
div.plans div.plan {
  padding: 0; border-right: #f4f4f4 1px solid; text-align: center; position: relative;
}
div.plans div.plan:last-child {
  border-right: 0;
}
div.plans div.plan div.wrap {
  background: #fff; padding: 30px; position: relative; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
div.plans div.plan div.wrap:before {
  content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; -webkit-box-shadow: 0 0 0 0 #fff; -moz-box-shadow: 0 0 0 0 #fff; box-shadow: 0 0 0 0 #fff; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
.no-touch .account div.plans div.plan:hover div.wrap, div.plans div.plan.selected div.wrap {
  z-index: 3; -webkit-box-shadow: 0 5px 40px 5px rgba(60,72,94,0.5); -moz-box-shadow: 0 5px 40px 5px rgba(60,72,94,0.5); box-shadow: 0 5px 40px 5px rgba(60,72,94,0.5);
}
.no-touch .account div.plans div.plan:hover div.wrap:before, div.plans div.plan.selected div.wrap:before {
  -webkit-box-shadow: 0 0 0 10px #fff; -moz-box-shadow: 0 0 0 10px #fff; box-shadow: 0 0 0 10px #fff;
}
.no-touch .account div.plans div.plan:hover div.wrap:before, div.plans div.plan.selected div.wrap:before {
  -webkit-box-shadow: 0 0 0 10px #fff; -moz-box-shadow: 0 0 0 10px #fff; box-shadow: 0 0 0 10px #fff;
}
.plan .plan-lbl {
  position: absolute; bottom: 100%; left: 10px; right: 10px; padding: 10px; text-align: center; font-size: 1.8em; color: #fff; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; transition: all .1s ease-in-out;
}
.plan .tag {
  float: none; display: inline-block; text-align: center; margin: 0 0 20px 0;
}
div.plans div.plan div.wrap .meta {
  padding-bottom: 15px;
}
.no-touch .account .plan:hover .plan-lbl, .plan.selected .plan-lbl {
  left: 0px; right: 0px; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px);
}
.plans h3, .pricing .plans h4 {
  line-height: 1;
}
.plans h3 span {
  padding: 0 2px 0 0; font-size: 0.45em; position: relative; top: -12px; font-family: 'Source Sans Pro', sans-serif;
}
.plans span.month {
  padding: 0 0 0 2px; top: -1px;
}

/****************************************
  ==== CURRENT PLAN
****************************************/

.plan.current h3, .plan.current h4 {
  color: #3c485e;
}
.plan.current .tag {
  color: #3c485e; border-color: #3c485e;
}

/****************************************
  ==== COMPARE TOGGLES
****************************************/

div.compare-toggles {
  position: relative; z-index: 2; padding: 0 0 30px 0;
}
div.compare-toggles a {
  display: block; padding: 15px; margin: 0 15px; background-color: #e1e2e5; color: #0e38b1; font-weight: 700; font-size: 1.6em; text-align: center;
}

/****************************************
  ==== COMPARE TABLE
****************************************/

div.compare-wrap {
  z-index: 9; padding-top: 0;
}
.account div.compare-wrap {
  padding-bottom: 30px !important;
}
div.compare-wrap div.plan {
  width: 25%; float: left; background-color: #e1e2e5;
}
div.compare-wrap ul.list li {
  height: 50px; line-height: 50px; margin: 0; padding: 0 55px 0 30px; border-bottom: #f4f4f4 1px solid; font-size: 1em; position: relative; border-right: #f4f4f4 1px solid;
}
div.compare-wrap ul.list li:last-child {
  border-bottom: 0;
}
div.compare-wrap ul.list li:before {
  display: none;
}
div.compare-wrap div.plan:last-child ul.list li {
  border-right: 0;
}
div.compare-wrap ul.list li.head {
  height: auto; line-height: 1; font-size: 1.8em; padding: 15px 30px; border-right: 0; border-bottom: 0; font-weight: 700; z-index: 11; background: #e1e2e5;
}
div.compare-wrap ul.list li.head:after {
  width: 100%; height: 10px; content: ''; display: block; position: absolute; bottom: -10px; left: 0; z-index: -1; background: -moz-linear-gradient(top, rgba(204,204,204,0.7) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(top, rgba(204,204,204,0.7) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to bottom, rgba(204,204,204,0.7) 0%,rgba(125,185,232,0) 100%);
}
div.compare-wrap ul.list li.cta {
  height: auto; padding: 15px 30px;
}

/* Markers */
div.compare-wrap .plan ul.list li div.check {
  font-size: 2.4em; color: #0e38b1;
}
div.compare-wrap .plan ul.list li div.check .info-icon {
  position: static;
}
div.compare-wrap .plan ul.list li small {
  margin: 0; position: relative; display: inline-block;
}
div.compare-wrap .plan ul.list li small.na {
  color: #3c485e;
}

/* Features */
div.compare-wrap div.features {
   background-color: #e1e2e5;
}
div.compare-wrap div.features ul.list li {
  font-size: 1.8em; position: relative;
}
div.compare-wrap div.features ul.list li:last-child {
  border-bottom: #f4f4f4 1px solid;
}
div.compare-wrap div.features ul.list li .info-icon {
  position: absolute; top: 14px; right: 30px;
}
div.compare-wrap div.features div.inline-tooltip {
  top: 49px; font-size: 0.55em;
}
div.compare-wrap div.features div.inline-tooltip small {
  line-height: 1.5;
}

/* Plans */
div.compare-wrap div.plan ul.list li {
  text-align: center;
}
div.compare-wrap div.plan ul.list li .info-icon {
  position: absolute; top: 15px; right: -25px;
}
div.compare-wrap div.plan ul.list li div.f-lbl .info-icon {
  position: relative; top: 3px; left: 0;
}
div.compare-wrap div.plan ul.list li div.f-lbl small {
  font-size: 1em
}
div.compare-wrap div.plan:first-child ul.list li.f {
  border-right: #f4f4f4 1px solid;
}
div.compare-wrap div.plan ul.list li.f .inline-tooltip {
  padding: 15px 15px; text-align: center;
}

/****************************************
  ==== BREAKPOINT: 1500px
****************************************/

@media only screen and (max-width: 1500px){

/* Layout */
div.features {
  width: 300px !important;
}
div.content-wrap {
  margin: 0 0 0 -300px;
}
div.content-wrap div.content {
  margin: 0 0 0 300px;
}

/* Plans */
div.plans div.plan div.wrap {
  padding: 30px 15px;
}

/* Compare table */
div.compare-wrap ul.list li {
  padding: 0 40px 0 15px;
}
div.compare-wrap div.features ul.list li .info-icon {
  right: 15px;
}

}

/****************************************
  ==== BREAKPOINT: 1279px
****************************************/

@media only screen and (max-width: 1279px){

/* Layout */
div.features {
  display: none;
}
div.content-wrap, div.content-wrap div.content {
  margin: 0;
}
div.content-wrap {
  margin: 0 0 30px 0;
}
.plan-notes {
  display: block;
}

/* Plans */
div.plans-wrap {
  padding-bottom: 30px !important;
}

/* Compare table */
.compare-header, .compare-wrap .plan-header, .compare-wrap .f-lbl {
  display: block;
}
div.compare-wrap div.plan {
  width: 100%; margin: 0 0 15px 0; background: #f4f4f4;
}
div.compare-wrap div.plan ul.list {
  display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
div.compare-wrap div.plan ul.list li {
  width: 33.33333334%; float: left; text-align: left; background: #e1e2e5; height: auto; line-height: 1.25; margin: 0; padding: 10px 15px; display: -webkit-flex; display: -ms-flexbox; display: flex;
}
div.compare-wrap div.plan ul.list li.cta {
  width: 100%; background: #f4f4f4; padding-left: 0;
}
div.compare-wrap .plan ul.list li small.na {
  color: #3c485e;
}
div.compare-wrap div.plan ul.list li.head {
  display: none;
}
div.compare-wrap div.plan ul li.f2, div.compare-wrap div.plan ul li.f3 {
  display: none;
}
div.compare-wrap div.plan ul.list li.cta .btn {
  width: auto; float: left;
}
div.compare-wrap div.plan ul.list li div.check {
  display: inline-block;
}
div.compare-wrap div.plan ul.list li div.f-lbl {
  width: 160px; display: inline-block; font-size: 1.6em; padding: 0 10px 0 0;
}
div.compare-wrap div.plan ul.list li .info-icon {
  top: 0;
}
div.compare-wrap .plan ul.list li div.check {
  font-size: 2.2em; line-height: 1;
}
.compare-wrap .plan-header {
  position: relative; z-index: 5;
}
.compare-wrap .plan-header ul.tabs {
  margin: 0;
}
.compare-wrap div.select-box {
  padding: 10px; background: #e1e2e5; border-bottom: #f4f4f4 1px solid;
}
div.compare-wrap div.plan ul.list li.f .inline-tooltip {
  padding: 10px 15px;
}

}

/****************************************
  ==== BREAKPOINT: 1079px
****************************************/

@media only screen and (max-width: 1079px){

/* Plans */
div.plans div.plan {
  border-right: #f4f4f4 1px solid; border-bottom: #f4f4f4 1px solid;
}
div.plans div.plan:nth-child(2), div.plans div.plan:nth-child(4) {
  border-right: 0;
}
div.plans div.plan:nth-child(4) {
  border-bottom: 0;
}
.plan .plan-lbl {
  display: none;
}

div.compare-toggles {
  padding: 0;
}
div.compare-toggles .g3 {
  display: none;
}
div.compare-toggles .g3:last-child {
  width: 100%; display: block;
}

}

/****************************************
  ==== BREAKPOINT: 1024px
****************************************/

@media only screen and (max-width: 1024px){

/* Plans */
div.plans-wrap h3 {
  font-size: 3.5em;
}
div.plans-wrap h4 {
  font-size: 2.6em;
}

/* Compare table */
div.compare-wrap div.plan ul.list li {
  width: 50%;
}
div.compare-wrap .plan ul.list li small {
  font-size: 1.6em;
}

}

/****************************************
  ==== BREAKPOINT: 767px
****************************************/

@media only screen and (max-width: 767px){

/* Plans */
div.plans div.plan {
  border-right: 0; border-bottom: #f4f4f4 1px solid;
}
div.plans div.plan:last-child {
  border-bottom: 0;
}

}

/****************************************
  ==== BREAKPOINT: 640px
****************************************/

@media only screen and (max-width: 640px){

/* Compare table */
div.compare-wrap div.plan ul.list li {
  width: 100%; border-right: 0;
}

}