.heading-white {
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  -webkit-background-clip: text;
  color: white;
  letter-spacing: 2px;
  transition: all .2s;
  position: relative;
  bottom: 45px; }
  @media (max-width: 56.25em) {
    .heading-white {
      font-size: 3rem; } }
  @media (max-width: 37.5em) {
    .heading-white {
      font-size: 2.5rem; } }
  .heading-white:hover {
    transform: skewY(2deg) skewX(15deg) scale(1.1);
    text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2); }

    .u-center-text {
      text-align: center !important; }

.thecard {
  -webkit-perspective: 150rem;
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 28rem;
  padding: 1rem;
  margin: 1rem; }
  .thecard-icon {
    font-size: 7.5rem;
    margin: 1rem 1.5rem 2rem 1.5rem;
    background-image: -webkit-gradient(linear, left top, right top, from(#7FABFF), to(#9492FF));
    background-image: linear-gradient(to right, #7FABFF, #9492FF);
    -webkit-background-clip: text;
    color: transparent; }
  .thecard-text {
    color: #484848;
    margin-top: 2rem;
    font-weight: bold;
    font-size: 1.5rem;
    text-transform: capitalize; }
    @media (min-width: 112.5em) {
      .thecard-text {
        font-size: 1.6rem; } }
  .thecard-separator {
    width: 100%;
    color: #ffb900; }

.thecard__side {
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 2rem;
  height: 21rem;
  -webkit-transition: all .8s;
  transition: all .8s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 2rem;
  text-align: center;
  color: black;
  border: 0.8rem solid transparent;
  backface-visibility: hidden; }

.thecard__side--front {
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10; }

.thecard__side--back {
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  .thecard__side--back-text {
    font-size: 1.2rem;
    color: #383838;
    margin-top: 0.5rem; }
  @media (max-width: 56.25em) {
    .thecard__side--back {
      padding: 4rem; } }

.thecard:hover .thecard__side--front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg); }

.thecard:hover .thecard__side--back {
  -webkit-transform: rotateY(0);
  transform: rotateY(0); }

@media (max-width: 37.5em) {
  .card-column {
    padding-left: 30px;
    padding-right: 30px; } }


    .u-margin-bottom-big {
      margin-bottom: 14rem !important; }
      @media (max-width: 56.25em) {
        .u-margin-bottom-big {
          margin-bottom: 11rem !important; } }


          .section-features {
            padding: 20rem 0;
            background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 185, 0, 0)), to(#0084b457)), url(../img/paralax22.jpg);
            background-image:  url(../img/paralax22.jpg);
            background-image: linear-gradient(to right bottom, rgba(255, 185, 0, 0), #0084b457), url(../img/paralax22.jpg);
            background-size: cover;
            margin-top: -8.5rem;
            /* -webkit-transform: skewY(-7deg);
            transform: skewY(-7deg);  */
          }
            /* .section-features > * {
              -webkit-transform: skewY(7deg);
              transform: skewY(7deg); } */
            @media (max-width: 56.25em) {
              .section-features {
                padding: 15rem 0; } }


                @import url(https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800);

                body {
                    font-size: 16px;
                    line-height: 22px;
                    color: #555;
                    font-family: 'Raleway', sans-serif;
                    font-weight: 300;
                    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
                }

                #section-feature ul {
                    margin: 100px 0 0 0;
                    padding: 0;
                    list-style: none;
                    position: relative;
                }

                #section-feature li {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    position: relative;
                    height: 240px;
                    padding: 2%;
                    float: left;
                    margin-bottom: 40px;
                    -webkit-touch-callout: none;
                    -webkit-user-select: none;
                    -khtml-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }

                #section-feature .sf-wrap {
                    background-repeat: no-repeat;
                    position: absolute;
                    max-width: 280px;
                    width: 100%;
                    height: 100%;
                    left: 50%;
                    margin-left: -140px;
                    top: 0;
                    -moz-perspective: 600px;
                    -webkit-perspective: 600px;
                    -ms-perspective: 600px;
                    -o-perspective: 600px;
                    perspective: 600px;
                    cursor: pointer;
                }

                .sf-mdl-left,
                .sf-mdl-right,
                .sf-mdl-left-full,
                .sf-mdl-right-full {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 50%;
                    height: 100%;
                    -webkit-transition: all .5s;
                    -moz-transition: all .5s;
                    -ms-transition: all .5s;
                    -o-transition: all .5s;
                    transition: all .5s;
                    overflow: hidden;
                }

                .sf-icon {
                    position: absolute;
                    top: 30px;
                    text-align: center;
                    width: 100%;
                    left: 0;
                    width: 200%;
                    color: #e4610e;
                }


                .sf-mdl-left-full .sf-icon,
                .sf-mdl-right-full .sf-icon {
                    color: #fff;
                }

                .sf-mdl-right,
                .sf-mdl-right-full {
                    left: auto;
                    right: 0;
                }

                .sf-mdl-left-full,
                .sf-mdl-right-full {
                    background-color: #333;
                    z-index: 9;
                    color: #fff;
                }

                .sf-wrap a {
                    color: #e4610e;
                    text-decoration: none;
                }

                .sf-mdl-left,
                .sf-mdl-right {
                    background-color: #fff;
                    z-index: 10;
                }

                .sf-wrap>.sf-mdl-right-full,
                .sf-wrap>.sf-mdl-right {
                    background-position: right -30px;
                }

                .sf-wrap>.sf-mdl-right,
                .sf-wrap>.sf-mdl-left-full {
                    -moz-backface-visibility: hidden;
                    -moz-transform-style: preserve-3d;
                    -moz-transform-origin: 0 0;
                    -moz-transform: rotateY(0deg);

                    -webkit-backface-visibility: hidden;
                    -webkit-transform-style: preserve-3d;
                    -webkit-transform-origin: 0 0;
                    -webkit-transform: rotateY(0deg);

                    -o-backface-visibility: hidden;
                    -o-transform-style: preserve-3d;
                    -o-transform-origin: 0 0;
                    -o-transform: rotateY(0deg);

                    backface-visibility: hidden;
                    transform-style: preserve-3d;
                    transform-origin: 0 0;
                    transform: rotateY(0deg);
                }

                .sf-wrap.hover>.sf-mdl-right {
                    -webkit-transform: rotateY(-45deg);
                    -moz-transform: rotateY(-45deg);
                    -ms-transform: rotateY(-45deg);
                    -o-transform: rotateY(-45deg);
                    transform: rotateY(-45deg);
                    background-color: #ececec;
                }

                .sf-wrap>.sf-mdl-left-full {
                    -moz-transform-origin: 100% 0;
                    -webkit-transform-origin: 100% 0;
                    -o-transform-origin: 100% 0;
                    transform-origin: 100% 0;
                    -moz-transform: rotateY(180deg);
                    -webkit-transform: rotateY(180deg);
                    -o-transform: rotateY(180deg);
                    transform: rotateY(180deg);
                }

                .sf-wrap.active>.sf-mdl-right,
                .sf-wrap.hover.active>.sf-mdl-right {
                    -moz-transform: rotateY(-180deg);
                    -webkit-transform: rotateY(-180deg);
                    -o-transform: rotateY(-180deg);
                    transform: rotateY(-180deg);
                }

                .sf-wrap.active>.sf-mdl-left-full {
                    -moz-transform: rotateY(0deg);
                    -webkit-transform: rotateY(0deg);
                    -o-transform: rotateY(0deg);
                    transform: rotateY(0deg);
                }

                .active .sf-mdl-left-full,
                .active .sf-mdl-right-full {
                    z-index: 11;
                }

                .sf-wrap div h3 {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 22px;
                }

                .sf-wrap div h3,
                .sf-wrap div p {
                    width: 200%;
                    position: absolute;
                    text-align: center;
                    left: 0;
                    top: 140px;
                }

                .sf-wrap div p {
                    padding: 0 10%;
                    line-height: 18px;
                    font-size: 13px;
                    top: 170px;
                }

                .sf-wrap div.sf-mdl-right h3,
                .sf-wrap div.sf-mdl-right-full h3,
                .sf-wrap div.sf-mdl-right p,
                .sf-wrap div.sf-mdl-right-full p,
                .sf-mdl-right .sf-icon,
                .sf-mdl-right-full .sf-icon {
                    left: auto;
                    right: 0;
                }

                .sf-wrap div.sf-mdl-left-full h3,
                .sf-wrap div.sf-mdl-right-full h3 {
                    top: 115px;
                }


                .ifont{
                  font-size: 70px;
                }