.boxes
  display: flex
  flex-wrap: wrap
  justify-content: center
  margin-top: -35px
  margin-right: -15px

.boxes .box
  height: 229px
  background: #FFF
  max-width: 355px
  width: calc(33% - 30px)
  margin-top: 35px
  box-shadow: 0px 10px 20px rgba(0,0,0,0.06)
  position: relative
  color: #3A478F
  background-position: center
  background-size: 35% 35%
  background-repeat: no-repeat
  background-position-y: 47%

  h3
    font-size: 15pt
    font-weight: $weight-title
    position: absolute
    bottom: 7%
    width: 100%
    text-align: center

+media($desktop)
  .boxes .box
    margin-right: 30px

+media($tablet)
  .boxes .box
    width: calc(33% - 30px)
    margin-right: 30px
    min-width: 295px

+media($mobile)
  .boxes .box
    width: 100%

+media(#desktop)
  .boxes .box
    width: calc(33% - 30px)

+media($desktop-wider)
  .wy-nav-content .rst-content .boxes .box
    height: 298px
    max-width: 444px
    h3
      font-size: 18pt
    .da-btn-label
      font-size: 20px

.wy-nav-content
  &.landing
    padding-top: 40px

  .rst-content
    .box .da-btn-label
      position: absolute
      font-size: 16px
      right: 30px
      top: 15px

.boxes .box1
  background-image: url('../images/boxes/home.svg')

.boxes .box2
  background-image: url('../images/boxes/browser.svg')

.boxes .box3
  background-image: url('../images/boxes/blocks.svg')

.boxes .box4
  background-image: url('../images/boxes/suitcase.svg')

.boxes .box5
  background-image: url('../images/boxes/contract.svg')

.boxes .box6
  background-image: url('../images/boxes/lightbulb.svg')