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

 @company: Siteimprove
 @contributors: Rickard Andersson, ria@siteimprove.com
 @content: accounts

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

/****************************************
  ==== OVERRIDES
****************************************/

section.main-wrap {
  /*padding-top: 120px;*/
}
.grid {
  padding: 0 30px;
}
.grid .g {
  padding: 30px;
}
div.progress.simple {
  padding: 0 15px;
}
footer.main .wrap .grid {
  padding-bottom: 0;
}

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

.clean header.main {
  height: auto; padding: 30px; position: static;
}
.clean header.main .wrap {
  height: auto; position: relative; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
.clean header.main .logo {
  height: 32px; position: static; margin: 0 auto;
}
.clean section.main-wrap {
  max-width: 860px; padding: 0 30px 144px 30px;
}
.clean .main-content {
  width: 100%; background: #fff; padding: 30px 0; margin: 0 0 30px 0; position: relative; -webkit-box-shadow: 0 10px 30px rgba(60,72,94,0.25); -moz-box-shadow: 0 10px 30px rgba(60,72,94,0.25); box-shadow: 0 10px 30px rgba(60,72,94,0.25);
}

/****************************************
  ==== LOGIN LAYOYT
****************************************/

.clean.login section.main-wrap {
  max-width: 640px;
}
.clean.login .main-content {
  margin: 0;
}
.clean.login .footer {
  padding: 15px 30px; margin: 0 15px 30px 15px;
}
.clean.login .footer p, .clean.login .footer a {
  color: #fff; margin: 0;
}

/****************************************
  ==== TYPOGRAPHY
****************************************/

h1 {
  font-size: 5.0em;
}
h2 {
  font-size: 3.5em;
}
h1:before, h2:before {
  width: 40px; height: 4px; margin: 0 0 10px 0px;
}
h1:after, h2:after {
  height: 20px;
}
h3 {
  font-size: 2.6em; margin: 0 0 20px 0;
}
h4 {
  font-size: 2.0em;
}

/****************************************
  ==== CREDIT CARD DETAILS
****************************************/

div.card-details {
  position: relative; margin: 0 0 20px 0;
}
div.card-details div.type {
  position: absolute; top: 0; left: 0;
}
div.card-details div.nr {
  width: 50%; float: left; padding: 0 0 0 80px;
}
div.card-details div.expire {
  width: 50%; float: left;
}

/****************************************
  ==== STATS
****************************************/

div.stats .g12 {
  text-align: center;
}
div.stats .g1-5 {
  border-right: #eee 1px solid; padding-bottom: 0; padding-top: 0;
}
div.stats .g1-5:last-child {
  border-right: 0;
}
div.stats h3.val {
  font-size: 4em; margin: 0 0 5px 0;
}

/****************************************
  ==== SHARED
****************************************/

div.lbl {
  width: 50%; float: left; font-size: 2.0em;
}
div.val {
  width: 50%; float: left; text-align: right; font-size: 2.0em;
}
div.total {
  font-weight: bold; margin: 0 0 30px 0;
}

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

.group.nest.plans {
  padding: 25px !important;
}
.plans .plan {
  padding: 5px !important;
}
.plans h3, .pricing .plans h4 {
  line-height: 1;
}
.plans h3 span {
  padding: 0 5px 0 0; font-size: 0.65em; position: relative; top: -12px; font-family: 'Source Sans Pro', sans-serif;
}
.plans span.month {
  padding: 0 0 0 5px; top: -1px;
}
.plan .wrap {
  padding: 30px 40px; z-index: 1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .15s ease-in-out;
}
.plan .wrap:before {
  content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: #fff; -webkit-box-shadow: 0 10px 30px rgba(60,72,94,0.25); -moz-box-shadow: 0 10px 30px rgba(60,72,94,0.25); box-shadow: 0 10px 30px rgba(60,72,94,0.25); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
.plan .wrap ul {
  margin: 0 0 30px 0;
}
.plan .wrap ul li {
  font-size: 1.6em;
}
.plan div.compare-trigger {
  margin: 0 10px;
}
.plan div.compare-trigger .toggle-compare-table {
  padding: 15px; display: block; text-align: center;
}
.plan .plan-lbl {
  margin: 0 10px; padding: 7px 10px; text-align: center; font-size: 1.5em; background: #e1e2e5; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
.plan .wrap:hover {
  z-index: 3; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
.plan .wrap:hover:before, .plan.selected .wrap:before {
  top: -15px; left: -15px; right: -15px; bottom: -15px;
}
.plan.hover .plan-lbl, .plan.selected .plan-lbl {
  margin: 0; -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); transform: translateY(-15px);
}
.plan.selected .wrap {
  z-index: 2;
}

/****************************************
  ==== ADJUSTMENTS
****************************************/

div.adjustments {
  width: 100%; float: left; margin: 0 -450px 0 0; position: relative; z-index: 5;
}
div.adjustments div.list {
  width: 100%; margin: 0 450px 0 0; position: relative; background: #fff;
}
div.adjustments div.product {
  padding: 30px 0; border-bottom: #f4f4f4 1px solid;
}
div.adjustments div.product div.meta {
  width: 50%; float: left; padding: 0 40px;
}
div.adjustments div.product div.meta h4, div.adjustments div.product div.meta p {
  margin: 0;
}
div.adjustments div.product div.options {
  width: 25%; float: left;
}
div.adjustments div.product div.price {
  width: 25%; float: left; padding: 0 40px; text-align: right;
}

/****************************************
  ==== SUMMARY
****************************************/

div.summary {
  width: 450px; float: right; padding: 15px 40px; position: relative; z-index: 6;
}
div.summary:after {
  content: ''; display: block; position: absolute; top: -15px; left: 0; right: 0; bottom: -15px; z-index: -1; background: #fff; -webkit-box-shadow: 0 10px 30px rgba(60,72,94,0.25); -moz-box-shadow: 0 10px 30px rgba(60,72,94,0.25); box-shadow: 0 10px 30px rgba(60,72,94,0.25);
}

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

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

.clean header.main {
  padding: 30px 15px 15px 15px;
}
.clean header.main .logo {
  width: auto; height: 32px; -webkit-transform: none; -moz-transform: none; transform: none;
}
.clean section.main-wrap {
  padding: 0 15px 84px 15px;
}
.clean .main-content {
  padding: 15px 0; margin: 0 0 15px 0;
}
.clean.login .footer {
  margin: 0 15px 15px 15px;
}
.clean footer.main div.footer-bottom .logo-wrap {
  padding-top: 30px; padding-bottom: 15px;
}
footer.main .m-lang {
  max-width: 400px; float: none; display: inline-block; margin: 0 auto;
}
.grid {
  padding: 0 15px;
}

}

/****************************************
  ==== BREAKPOINT: 768px
****************************************/

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

.clean header.main {
  padding: 30px 15px 15px 15px;
}
.clean section.main-wrap {
  padding: 0 15px 84px 15px;
}

}

/****************************************
  ==== BREAKPOINT: 480px
****************************************/

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

.clean section.main-wrap {
  padding: 0 0 84px 0;
}
.clean header.main .logo {
  height: 22px;
}
.grid {
  padding: 0;
}

}