$desktop: "screen and (min-width: 1000px)"
$header-height: 65px
$sidebar-width: 370px

////
// Fonts
////
$font-regular: proximanova-regular, arial, helvetica, verdana, tahoma, sans-serif
$font-bold: proximanova-bold, arial, helvetica, verdana, tahoma, sans-serif
$font-light: proximanova-light, arial, helvetica, verdana, tahoma, sans-serif

////
// Colors
////
$red: #FF5252
$bg-color-default: #f7f9fb
$border-diagonal-color: rgba(140, 153, 191, .20)
$border-color-default: $border-diagonal-color

%font-smooth
  text-rendering: optimizeLegibility !important
  -moz-osx-font-smoothing: grayscale
  -webkit-font-smoothing: antialiased !important
  font-smoothing: antialiased !important

////
// Image Replacement
////
%image-replace
  text-indent: -9999px
  overflow: hidden
  background-repeat: no-repeat
  background-position: left center
  display: inline-block
  background-size: contain

////
// Centering elements
////
%center-vertical
  position: absolute
  top: 50%
  transform: translateY(-50%)

%center-horizontal
  position: absolute
  left: 50%
  transform: translateX(-50%)

%center
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)

%clearfix
  &:after
    content: ""
    display: block
    clear: both
    height: 0
    width: 0

%clip-section
  @media screen and (max-width: 1200px)
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%)
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%)
  @media screen and (max-width: 1200px)
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%)
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%)

%box-white
  background: #fff
  border: 1px solid $border-color-default
  border-radius: 1px

///  Direction: bottom to top
.divider-diagonal-bt
  padding-bottom: 250px
  margin-bottom: 50px
  &:after
    content: ""
    height: 135px
    width: 113%
    display: block
    border-top: 1px solid rgba(140, 153, 191, .30)
    border-bottom: 1px solid $border-diagonal-color
    box-shadow: inset 0px 50px 70px 0px $border-diagonal-color
    transform: rotate(-4deg)
    position: absolute
    bottom: 80px
    left: -5%

///  Direction: top to bottom
.divider-diagonal-tb
  position: relative
  padding-bottom: 300px !important
  &:after
    content: ""
    height: 135px
    width: 113%
    display: block
    border-top: 1px solid rgba(140, 153, 191, .30)
    border-bottom: 1px solid $border-diagonal-color
    box-shadow: inset 0px 50px 70px 0px $border-diagonal-color
    transform: rotate(4deg)
    position: absolute
    bottom: 80px
    left: -5%

.tb-divider
  &:after
    content: ""
    display: block
    background: url(images/img_divider.png) no-repeat center center
    background-size: 98px
    height: 20px
    margin-top: 10px

.tb-align-center
  text-align: center

.tb-align-right
  text-align: right

.tb-align-left
  text-align: left

.tb-flex-box
  display: flex
  flex-wrap: wrap

.tb-float-left
  float: left !important

.tb-float-right
  float: right !important

////
// Boxes
////
.tb-box-list
  display: flex
  flex-wrap: wrap

.tb-box
  background: #fff
  box-shadow: 0px 30px 30px 0px rgba(139, 152, 190, .20)
  text-align: left
  border-radius: 1px
  padding: 20px
  margin: 0 10px 45px
  border: 1px solid rgba(139, 152, 190, .20)
  transition: box-shadow .1s linear
  color: #4E4E4E
  text-decoration: none
  -webkit-transform-style: preserve-3d
  -moz-transform-style: preserve-3d
  transform-style: preserve-3d
  flex: 1 0 20%
  width: 100%
  display: flex
  flex-direction: column

  @include break(desk)
    max-width: 23.5%


  &:hover
    box-shadow: 0 5px 10px 2px rgba(139, 152, 190, .55)

  figure
    overflow: hidden
    position: relative
    display: block
    width: 100%
    height: 90px
    margin-bottom: 17px
    @include break(desk)
      height: 200px

    img
      @extend %center
      position: relative
      z-index: 0
      width: 100%
      height: auto
      @include break(desk)
        width: auto
        height: 110%

    &:before
      content: ""
      display: block
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      -webkit-box-shadow: inset 0px 0px 41px -12px rgba(0, 0, 0, .75)
      -moz-box-shadow: inset 0px 0px 41px -12px rgba(0, 0, 0, .75)
      box-shadow: inset 0px 0px 41px -12px rgba(0, 0, 0, .75)
      z-index: 1

  a
    color: #4E4E4E
    text-decoration: none

    @include break(desk)
      margin: 0 20px 40px

  h2
    font: 20px/24px $font-bold

  .tb-post-time
    display: block
    text-transform: uppercase
    font: 14px/16px $font-regular
    color: #BDBDBD
    margin-bottom: 10px

.tb-lead-paragraph
  @extend %font-smooth
  font-size: 15px
  font-family: "PT Serif Caption"
  line-height: 1.5
  color: #4E4E4E
  padding-bottom: 55px
  @include break(desk)
    font-size: 20px
    margin-bottom: 60px

  &:after
    margin-top: 20px

  // &:after
  //   @extend .tb-divider
  //   margin-top: 15px

////
// Titles
////
.tb-title-1
  font: 100px/.8 $font-bold
  color: #4E4E4E
  text-transform: uppercase

.tb-title-3
  font: 60px $font-bold
  color: #4E4E4E
  text-transform: uppercase
