.article-content p,
.article-content h2 {
   padding-left: 1rem;
   padding-right: 1rem;
}

.bordered-box {
   position: relative;

}
.bordered-box-inner {
   position: relative;
   background: var(--color-contrast-darkest);
   border: 1px solid var(--color-contrast-lightest);
   padding: 4rem;
   z-index: 1;
}

.bordered-box:after {
   content:'';
   background: var(--color-contrast-lightest);
   position: absolute;
   height: 100%;
   width: 100%;
   left: 8px;
   top: 8px;

   z-index: 0;
}

.bordered-box p{
   font-size:  var(--text-size-xs);
}

#form-content {
   padding-right: 4rem;
}
#form-main h5 {
   font-weight: 700;
}

.scroll-to {
   position: absolute;
   bottom: 1rem;
   left: 1rem;
}
@keyframes scroll{
   0%{ opacity:1;transform:translateY(0)}
   50%{opacity:1;transform:translateY(7px)}
}
.scroll-to-icon {
   width: 20px;
   height: 30px;
   box-shadow: inset 0 0 0 1px #fff;
   border-radius: 25px;
   cursor: pointer;
   transition: all .2s ease-in-out 0s;
   -webkit-transform: translateY(0);
   -ms-transform: translateY(0);
   transform: translateY(0);
}
.scroll-to-icon:after{
   content: '';
   width: 4px;
   height: 6px;
   background: #fff;
   margin-left: 8px;
   top: 8px;
   border-radius: 2px;
   -webkit-animation-duration: 1.5s;
   animation-duration: 1.5s;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-name: scroll;
   animation-name: scroll;
   position: absolute;
}

main {
   min-height: 100vh;
   overflow-x: hidden;
}

.main-content {
   padding-top:6rem;
   padding-bottom: 4rem;
   animation: fadeInUp 1s;
}
/* ------------------------------
CONTENT
----------------------------- */
.hero-inner {
   position: relative;
   padding: 0 6%;
}
.hero .container {
   animation: fadeInUp 1s;
}
.hero-content {
   z-index: 1;
}

.hero-content p{
   margin: 1.5rem 0;
}

.hero .hero-image-outer{

}
.hero .hero-image-outer .hero-image {
   position:absolute;
   right: -5rem;
   bottom: 0;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   height: 100%;
   width: 600px;
}

.hero-title {
   color: var(--color-contrast-dark);
}
.hero-title span {
   color: var(--color-contrast-lightest);
   text-shadow: 2px 0 6px var(--color-contrast-dark);
}


@media (max-width: 767px) {
   .hero-content {
      padding-top: 0;
   }
   .hero .hero-image-outer {
      opacity:.3;
   }
   .feature-box:hover ~.feature-content {
      opacity: 0;
      transform: none;
   }
   .hero .flex-container {
      flex-wrap: nowrap;
   }

   .mobile-hidden {
      display:none;
   }
   .bordered-box-inner {
      padding: 1.5rem;
   }

   #form-content {
      padding-right: 0;
   }

}