.row-container {display: flex; flex-direction: column; align-items: center;}

/* PRODUCTS *****************************************************************/
h1 {
  text-align: center;
  font-size: 48px;
  font-weight: 600;
  padding: 3%;
  color: var(--blue);
}

.gradient {background-image: linear-gradient(#ffffff, var(--light-green))}

#product-container {justify-content: center; padding: 0 0 55px 0;}

.product {
  max-width: 370px;
  background-color: #ffffff;
  border-radius: 25px;
  margin: 10px .5vw;
  overflow: hidden;
}

.product h2 {
  display: block;
  color: var(--green);
  -webkit-text-stroke: .3px #ffffff;
  font-size: 2.2rem;
  letter-spacing: .15rem;
  text-transform: uppercase;
  text-align: center;
  background-color: var(--blue);
  padding: 32px;
}

.product .pricing {
  height: 150px;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1em;
  padding: 45px 0;
}
.product .pricing .unit {position: relative; top: -2.25rem;}
.product .pricing .number {font-size: 5rem; font-weight: 700;}

.product li {
  list-style-type: none;
  padding: 15px 20px 0px 20px;
  margin: 0 40px 0 0;
}
.product i.check {
  display: inline-block;
  transform: translateY(5px);
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 900;
  background-color: var(--green);
  margin: 0 7px;
}
.product i.check > div {
  width: 8px;
  height: 16px;
  transform: rotate(45deg);
  border-bottom: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  margin: 2px 0 0 7px;
}
.product .divider {height: 15px; border-bottom: 2px solid #ececec;}

.product a {float: none; display: inline-block; margin: 55px;}

/* BENEFITS *****************************************************************/
#benefits {justify-content: center; padding: 30px 0 40px;}
#benefits > div > div {
  max-width: 370px;
  background-color: var(--very-light-green);
  border-radius: 25px;
  border: 1px solid var(--green);
  padding: 20px;
  margin: 10px .5vw;
  z-index: 1;
}
#benefits h2 {font-size: 2.2rem; color: var(--blue); margin: 0 0 20px 0;}
#benefits p {line-height: 1.5rem;}

/* INVITATION ***************************************************************/
#invitation {
  display: flex;
  height: 800px;
  background: url("/landing/pricing/contemporaryOffice.jpg") no-repeat;
}
#clear {width: 500px;}
#invitation .text {
  width: 70vw;
  transform: translate(30%, 100px);
  background-color: #ffffff;
  border-radius: 25px;
  padding: 7vw;
}
.text p {font-size: 1.5rem; margin: 20px;}
.text p:first-of-type {font-weight: 700; color: var(--blue);}
.text a {float: none; display: inline-block; /*margin: 20%;*/}
#blue {flex-grow: 1; background-color: var(--light-blue);}

/* MEDIA QUERIES ************************************************************/
@media only screen and (min-width: 768px) {h1 {font-size: 64px;}}

@media only screen and (min-width: 992px) {
  .row-container {flex-direction: row; align-items: flex-start;}
}

@media only screen and (min-width: 1200px) {
  .product h2 {-webkit-text-stroke: .5px #ffffff;}
}