/**
 * Calculator tile grid only — rules extracted from eps/New/css/style.css
 * (.all-calculators / .calc-box). Scoped to #wrapper.calculators-landing-page so
 * header/footer and other routes are unchanged. Icon paths are relative to /assets/css/.
 */

#wrapper.calculators-landing-page .all-calculators {
  width: 100%;
  max-width: 936px;
  margin: 0 auto;
}

#wrapper.calculators-landing-page .all-calculators > div:nth-child(odd) {
  float: left;
}

#wrapper.calculators-landing-page .all-calculators > div:nth-child(even) {
  float: right;
}

#wrapper.calculators-landing-page .all-calculators .calc-box {
  width: 44%;
  padding: 0 1%;
  background: #636363 url("../../eps/New/images/icon_calc.png") no-repeat;
  background-position: 10% 50%;
  border-radius: 8px;
  margin-bottom: 20px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

#wrapper.calculators-landing-page .all-calculators .calc-box a {
  color: #282828;
}

#wrapper.calculators-landing-page .all-calculators .calc-box:hover {
  background: #ebebeb;
  /*background-image: url("../../eps/New/images/icon_calc.png");*/
}

#wrapper.calculators-landing-page .calc-box .hover {
  line-height: 1.45;
  display: inline-block;
  vertical-align: middle;
  opacity: 0;
}

#wrapper.calculators-landing-page .calc-box .hover .title {
    font-family: 'museo500', sans-serif;    font-size: 14px;    margin: 0;
}

#wrapper.calculators-landing-page .calc-box .hover .desc {
  margin: 0;
  font-size: 13px;
}

#wrapper.calculators-landing-page .calc-box .regular {
  line-height: 1.45;
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 1s;
  -webkit-transition: opacity 1s; width: 210px;
}

#wrapper.calculators-landing-page .calc-box .regular .title {
  margin: 0;
}

#wrapper.calculators-landing-page .calc-box .regular .desc {
    margin: 0;
    text-transform: uppercase;
    font-size: 12px;
    font-family: 'museo500', sans-serif;
}

#wrapper.calculators-landing-page .all-calculators .calc-box:hover .hover {
  opacity: 1;
}

#wrapper.calculators-landing-page .all-calculators .calc-box:hover .regular {
  opacity: 0;
}

#wrapper.calculators-landing-page .calc-box.locked:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(235, 235, 235, 0.8);
}

#wrapper.calculators-landing-page .calc-box.locked:hover::after {
  content: "COMING SOON!";
  position: absolute;
  top: 73%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  font-family: "Josefin Sans", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  padding-top: 40px;
  background: transparent url("../../eps/New/images/icon_lock.png") no-repeat top center; z-index: 2;
}

#wrapper.calculators-landing-page .calc-box a {
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  #wrapper.calculators-landing-page .all-calculators .calc-box {
    width: 48%;
    background-position: center top 10px;
    height: 180px;
  }

  #wrapper.calculators-landing-page .calc-box .regular {
    top: 63%;
    width: 100% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
  }

  #wrapper.calculators-landing-page .calc-box .regular .title {
    font-size: 18px !important;
  }
}