.section {
  padding: 60px 0;
}

.section--grey {
  background: #f5f6f7;
  /*background: #f4f9fe;*/
}

.section--dark-grey {
  background: #e6e8eb;
}

.section--light-bg {
  background-image: url("../images/steelbeamcalculator/light_bg.jpg");
  background-size: cover;
  background-position: center center;
}

.section--dark-bg {
  background-image: url("../images/steelbeamcalculator/dark_bg.jpg");
  background-size: cover;
  background-position: center center;
  color: #fff;
}

.feature-block {
  margin-top: 100px; 
  margin-bottom: 100px;
}
.feature-image {
  padding-bottom: 30px;
}
.feature-text {
  padding: 0 100px;
  font-weight: 500; 
  font-size: 19px;
}
.feature-title {
  font-size: 27px;
  font-weight: 600;
  margin-bottom: 20px;
}
.feature-block video, .feature-block img {
  -webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.28);
  -moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.28);
  box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.28);
}
.feature--grey {
  background-color: #f5f6f7;
}

.page-title {
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 20px 0;
  text-align: center;
}

.page-subtitle {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 40px 0;
  text-align: center;
}

.lined-title {
  overflow: hidden;
  position: relative;
  text-align: center;
  margin: 0 0 50px 0;
}

.lined-title::before {
  content: "";
  width: 1px;
  height: 15px;
  background: #d7dce0;
  position: absolute;
  left: 0;
  top: 20px;
}

.lined-title::after {
  content: "";
  width: 1px;
  height: 15px;
  background: #d7dce0;
  position: absolute;
  right: 0;
  top: 20px;
}

.lined-title span {
  display: inline-block;
  position: relative;
  font-size: 24px;
  color: #000;
  padding: 0 20px;
}

.lined-title span::before {
  content: "";
  width: 2000px;
  height: 1px;
  background: #d7dce0;
  position: absolute;
  right: 100%;
  top: 24px;
}

.lined-title span::after {
  content: "";
  width: 2000px;
  height: 1px;
  background: #d7dce0;
  position: absolute;
  left: 100%;
  top: 24px;
}

.small-button .button {
  padding: 10px 15px 12px 15px;
  font-size: 18px;
  margin-top: 20px;
  position: absolute;
  bottom: 25px;
  right: 25px;
}

.button {
  background: #29a9d3;
  display: inline-block;
  padding: 14px 32px;
  font-size: 16px;
  text-transform: uppercase;
  color: #fff !important;
  text-decoration: none;
  line-height: 1;
  font-weight: 600;
  transition: background 0.3s;
  border: 0;
  border-radius: 3px;
}

.button span {
  vertical-align: middle;
  display: inline-block;
}

.button span span.small {
  font-size: 15px;
  font-weight: normal;
  display: block;
  margin-top: 5px;
}

.button .icon--static {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 25px;
}

.button .icon {
  display: inline-block;
  width: 37px;
  height: 37px;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 25px;
  transition: transform 0.3s;
}

.button .icon--arrow {
  background-image: url('../images/steelbeamcalculator/button_arrow.png');
}

.button .icon--arrow-black {
  background-image: url('../images/steelbeamcalculator/button_arrow_black.png');
}

.button .icon--plus {
  background-image: url('../images/steelbeamcalculator/button_plus.png');
}

.button .icon--plus-black {
  background-image: url('../images/steelbeamcalculator/button_plus_black.png');
}

.button--simple {
  padding: 0;
  background: rgba(255, 255, 255, 0) !important; 
  color: #29a9d3 !important; 
  border: 0;
  font-size: 17px;
}

.button--simple-padded {
  padding: 0 0 0 30px;
}
.button--simple:hover {
  color: #54badc !important; 
}

.button--outline {
  background: rgba(255, 255, 255, 0) !important; 
  color: #29a9d3 !important; 
  border: solid 1px #29a9d3;
}

.button--outline:hover {
  color: #54badc !important; 
}

.button:hover,
.button:focus {
  color: #fff;
  text-decoration: none;
  background: #54badc;
}


.imagebutton{
  padding:0px;
  border: 0;
  float: left;
  height: 76px;
}

.imagebutton:hover,
.imagebutton:focus {
  color: #000;
  text-decoration: none;
  background: #54badc;
   opacity: 0.7;
}

.button:hover .icon {
  transform: translateX(5px) rotate(360deg);
}

.button--grey {
  background: #94a3aa;
}

.button--grey:hover,
.button--grey:focus {
  background: #a9b5bb;
}

.button--full {
  width: 100%;
  padding-top: 18px;
  padding-bottom: 18px;
}

.button--full span {
  width: calc(100% - 62px);
}

.button-container {
  background: #f5f6f7;
  overflow: hidden;
}

.button-container .button {
  float: left;
}

.button-container .button-logo {
  float: right;
  width: 200px;
  margin: 15px 20px;
}

.add-load-button {
  text-align: center;
}

.add-load-button .button {
  /*
  padding: 7px 15px;
  font-size: 19px;
  text-transform: none;
  font-weight: 300;
  */
}

.add-load-button .button .icon {
  width: 25px;
  height: 25px;
  margin-left: 0;
  margin-right: 5px;
}

.add-load-button .button:hover .icon {
  transform: rotate(360deg);
}

.inner-nav {
  margin: 0 0 30px 0;
  text-align: center;
}

.inner-nav a {
  margin: 0 5px;
  color: #464243;
}

.top-container--home {
  background-image: url('../images/steelbeamcalculator/dark_bg.jpg');
  background-size: cover;
  background-position: center center;
}

#footer {
    /* background-color: #e6e8eb; */
    font-size: 15px;
    padding: 0 0 20px 0;
}

.footer-inner {
    padding-top: 40px;
}

#footer .footer-logo {
  max-width: 155px;
  margin: 0 0 20px 0;
}

#footer .other-site {
  text-align: right;
  font-family: 'Roboto Condensed', sans-serif;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 22px;
  padding-top: 25px;
}

#footer ul {
  padding: 0 0 10px 0;
  list-style: none;
  font-weight: bold;
}

#footer a {
  text-decoration: none;
  color: #464243;
}

#footer .space-line {
    padding: 0 5px 0 5px;
}

#footer .country-select {
  padding-bottom: 15px;
}

#footer .country-select b {
  color: #29a9d3;
}

#footer .shopper-approved {
  padding-right: 60px;
}

#footer .shopper-approved span[itemprop="name"] {
  font-weight: bold;
}












a {
    text-decoration: underline;
}

    a:hover, a:focus {
        color: #2aa9e8;
        outline: none;
    }

h4 {
    font-size: 13px;
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    /*border-top: none;*/
}

table {
  margin: 0 0 20px 0;
}

table td {
  padding: 3px 10px 3px 0;
}

.loadingDetails td select {
    width: 100% !important;
    display: inline-block;
}

#mobile-menu {
    background: #fff;
}

    #mobile-menu ul {
        padding-left: 0;
        list-style-type: none;
        display: inline-block;
        width: 100%;
        margin: 20px 0;
    }

        #mobile-menu ul li {
            height: 30px;
            margin-top: 15px;
            /* border-bottom: 1px solid #eee; */
            color: #464243;
        }

            #mobile-menu ul li a {
                color: #464243;
                text-decoration: none;
                line-height: 15px;
                display: block;
            }

            #mobile-menu ul li ul {
                padding-top: 10px;
            }

                #mobile-menu ul li ul li {
                  padding-left: 15px;
                }

.button-wrapper {
    height: 50px;
    overflow: visible;
    /*cursor:pointer;*/
}

    .button-wrapper input {
        float: left;
        position: absolute;
        left: 0px;
        top: -20px;
    }



.homepage-item {
    min-height: 152px;
}

.homepage-item .benefit {
  width: 87px;
  height: 87px;
  margin: 0 auto 20px auto;
  background-size: contain;
}

.homepage-item .benefit--1 {
  background-image: url("../images/steelbeamcalculator/benefit-1.png");
}

.homepage-item .benefit--2 {
  background-image: url("../images/steelbeamcalculator/benefit-2.png");
}

.homepage-item .benefit--3 {
  background-image: url("../images/steelbeamcalculator/benefit-3.png");
}

.homepage-item .benefit--4 {
  background-image: url("../images/steelbeamcalculator/benefit-4.png");
}

.homepage-item .benefit--5 {
  background-image: url("../images/steelbeamcalculator/benefit-5.png");
}

.homepage-item .benefit--6 {
  background-image: url("../images/steelbeamcalculator/benefit-6.png");
}

.homepage-item p {
    text-align: center;
    font-size: 18px;
    padding: 0 25px;
}

#hero {
  padding: 0 0 65px 0;
}

#hero h2 {
    color: #fff;
    font-size: 46px;
    margin: 110px 0 0 0;
    padding-right: 60px;
  }

#hero h3 {
    color: #fff;
    font-size: 26px;
}

#hero .button {
  margin: 80px 25px 0 0;
  min-width: 320px;
}

#hero .button .icon {
  float: right;
  margin-top: 4px;
}

#hero .hero-image-container {
  position: relative;
}

#hero .hero-guarantee-badge {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: absolute; 
  top: 70px; 
  left: -60px; 
  width: 125px; 
  height: 125px;
  z-index: 1;
}

#hero .hero-guarantee-badge img {
  max-width: 125px;
}

#hero .hero-guarantee-badge div {
  padding: 0 10px;
  z-index: 2; 
  transform: rotate(16deg); 
  font-size: 18px; 
  font-weight: 600; 
  color: #fff; 
  line-height: 0.9em; 
  text-align: center; 
  text-transform: uppercase;
}

#hero .ipad-image {
  max-width: 278px;
  width: 100%;
  margin: 62px auto 0 auto;
  z-index: 1;
  position: relative;
}


#trial {
    text-align: center;
    display: block;
    margin-top: 10px;
}

    #trial a {
        color: #fff;
        font-size: 20px;
    }


#mobile-menu-button {
    font-size: 26px;
    margin-top: 33px;
    display: block;
    /* color: #fff; */
}

.mobile-login span.glyphicon {
    font-size: 18px;
    padding-right: 10px;
    display: block;
    float: left;
    margin-top: 2px;
}

.my-account-wrapper {
    text-align: right;
    height: 55px;
}

    .my-account-wrapper p {
        margin-bottom: 5px;
    }


.try-it, .buy-it {
    min-height: 210px;
}

div.inputfloaters {
    /* float: left; */
    /* margin-left: 30px;*/
    width: calc((100% - 50px) / 3 * 2);
}

.testimonials-link {
    text-align: center;
    display: block;
}

/* font sizes */

h1, h2, h3, #header-right, #header-bar li a, i.loginbutton, .hero-buy-now-inner span, p, #mobile-menu ul li a, #trial {
    font-family: 'Source Sans Pro', sans-serif;
    /* font-weight: 400; */
    /*font-size: 18px;*/
}

#logo h1 {
    margin: 0px;
}

h2, #header-right {
    /*
    font-size: 38px;
    margin: 0 0 30px 0;
    */
}

h3, #mobile-menu ul li a {
    font-size: 20px;
}

#header-bar li a, a.loginbutton {
    font-size: 16px;
}

h3.trybuy {
    font-size: 25px;
}

p.centered {
  padding: 0 10%;
  text-align: center;
}


.guarantee-badge div {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: absolute; 
  width: 140px; 
  height: 140px;
  z-index: 1;
}

.guarantee-badge div img {
  max-width: 100%;
}

.guarantee-badge div span {
  padding: 0 10px;
  z-index: 2; 
  transform: rotate(-10deg); 
  font-size: 18px; 
  font-weight: 600; 
  color: #fff; 
  line-height: 0.9em; 
  text-align: center; 
  text-transform: uppercase;
}
.guarantee-badge-light div span {
  color: #111; 
}

/* media queries*/

@media (max-width: 1199px) {
    #logo {
        float: none;
        margin: 0 auto;
    }

    #header-bar {
      margin-top: 0px;
  }

  #header-bar a span.glyphicon {
      padding-top: 1px;
      /*float: left;*/
  }
  
  #header-bar ul {
    display: flex;
    justify-content: center;
    float: none;
  }

   .hero-buy-now {
        padding-top: 0;
    }

    #header-bar li a {
      margin: 0;
    }

    #hero h2 {
        margin-top: 30px;
        margin-right: 30px;
    }

    #hero .button {
      margin-top: 20px;
    }

    #hero .ipad-image {
      margin-top: 50px;
    }

    #hero .hero-guarantee-badge {
      top: 50px; 
      left: -90px; 
    }

    .pricing-box__header {
        padding: 30px 25px 25px 25px;
        height: 98px;
        font-weight: 600; 
        font-size: 1.2em; 
        line-height: 1.2em;
    }

    .pricing-box__header span {
        font-size: 18px;
    }

    .pricing-box__header.pricing-box__header--offer::after {
      width: 85px;
      height: 85px;
    }

    .buy-box {
      margin: 0 0 20px 0;
    }
}

@media (max-width: 991px) {

    .feature-text {
        padding: 15px;
    }

    .glyphicon-user {
        padding-right: 10px;
    }

    #hero .ipad-image {
      margin-top: 50px;
    }

    #hero .hero-guarantee-badge {
      top: 50px; 
      left: -75px; 
      width: 100px; 
      height: 100px;
    }
    
    #hero .hero-guarantee-badge img {
      max-width: 100px;
    }
    
    #hero .hero-guarantee-badge div {
      padding: 0 7px;
      font-size: 15px; 
    }

    #hero h2 {
        margin-top: 30px;
        margin-right: 30px;
        font-size: 38px;
    }

    #hero h3 {
      font-size: 22px;
    }

    #hero .button {
      padding: 15px;
      margin-top: 10px;
    }

    .try-it p, .buy-it p {
        height: 70px;
    }

    .alignMiddle {
        width: 100%;
    }

    div.inputfloaters {
        margin-left: 0px;
    }

    #footer .other-site {
        font-size: 17px;
    }

    .pricing-box__header {
        padding: 25px;
        font-size: 1em; 
        height: 92px;
    }

    .pricing-box__header span {
        font-size: 12px;
    }

    .pricing-box__header.pricing-box__header--offer::after {
      width: 70px;
      height: 70px;
    }

    .pricing-box__details {
      padding: 20px;
      color: #000;
    }

    .pricing-box__price {
      padding: 0;
      font-size: 35px;
    }

    .pricing-box__cta {
      font-size: 16px;
      padding: 20px 5px;
    }
}

@media (max-width:767px) {

    .longer {
        width: 100%;
    }

    .testimonial-box {
        min-height: initial;
    }

    .used-by-img-wrapper-mid {
        border-right: 0;
    }

    .hero-buy-now {
        margin: 0 auto;
    }

    .homepage-item {
        height: 280px;
    }

    .try-it p, .buy-it p {
        height: auto;
    }

    .buy-it {
        margin-top: 20px;
    }

    .table-responsive {
        border: none;
    }

    .padtable input {
        width: 75px !important;
    }

        .padtable input.muchlonger {
            width: 100% !important;
        }

    .alignLeft {
        height: 250px;
    }

    #hero h2 {
        font-size: 28px;
        margin: 10px 30px 0 0;
        padding-right: 40px;
    }

    #hero h3 {
        font-size: 18px;
        margin-bottom: 20px;
    }

    #hero .button {
        margin: 10px 0 0 0;
        display: block;
        padding: 15px;
        min-width: 0;
    }

    #hero .button .icon {
        width: 30px;
        height: 30px;
        margin-left: 10px;
    }

    .page-title {
      font-size: 28px;
    }

    .page-subtitle {
      font-size: 18px;
    }

    .example-download {
      font-size: 18px;
    }

    .steps {
      display: none;
    }

    .floaters {
        float: none;
        width: 100%;
        max-width: 300px;
        margin: 0 auto 25px auto;
    }

    div.inputfloaters {
        width: 100%;
    }

    #footer .shopper-approved {
        padding-right: 0;
        padding-bottom: 25px;
    }

    #footer .other-site {
        text-align: left;
        padding-bottom: 30px;
    }

    .section {
        padding: 30px 0;
    }

    .pricing-box__header {
        padding: 25px;
        height: auto;
    }

    .pricing-box__header span {
        display: block;
    }

    .pricing-box__header.pricing-box__header--offer::after {
      width: 85px;
      height: 85px;
    }

    .pricing-box__details {
      padding: 20px;
      color: #000;
    }

    .pricing-box__details::after {
      display: none;
    }

    .pricing-box__price {
      padding: 0;
    }

    .button-container .button-logo {
      display: none;
    }
}

@media(max-width:450px) {
    #logo {
        float: left;
        margin: 0;
        width: auto;
    }

    .homepage-item p {
      padding: 0;
    }
}

@media (max-width:375px) {
    #mobile-menu-button {
        font-size: 28px;
        margin-top: 35px;
    }
}

@media(max-width:320px) {

    #mobile-menu-button {
        font-size: 22px;
        margin-top: 34px;
        display: block;
    }
}