@import "mixins"
@import "variables"
@import "compass/css3/images"
@import "blog/source/*.png"
@import "compass/css3/font-face"
@import "compass/css3/box-shadow"
@import "compass/css3/border-radius"
@import "compass/css3/transform"

@include all-source-sprites

.pics
  margin-bottom: 0

@media (max-width: 768px)
  .pics
    img
      width: 100%

.active-green
  color: $green !important

.main-content-list .content-text
  margin-top: 0
  picture
    float: left
    margin-left: 1%
  picture:first-child
    margin-left: 0

.empty
  font-size: 20px
  padding-top: 40px
  text-align: center

.article-short
  .head-article
    border-top: 1px solid $light-blue

.article-short:nth-child(2)
  .head-article
    border-top: 1px solid $green
.main-content-list
  .content-text
    overflow: hidden
    margin-top: -15px

  h1
    width: 100%
    color: $green
    font-size: 24px
    padding-bottom: 7px
  h2
    a
      color: $dark-blue !important
    font-size: 24px
    width: 100%
    padding: 10px 0
    margin: 0
  .similar2
    margin-top: 30px
    font-size: 17px
    color: $grey !important
  .similar
    margin-left: 15px
    font-size: 16px
    color: $grey !important
  .search
    margin-top: 15px
  .article-short
    margin-bottom: 20px
    padding-bottom: 15px
    img
      margin-top: 5px

.pagination
  font-size: 14px
  padding-top: 0px
  padding-bottom: 0px
  margin-right: 40px
  float: right
  .source-next-arrow, .source-prev-arrow
    height: 12px
    width: 12px
    display: inline-block

.pagination a
  text-decoration: none

.page
  display: inline-block
  margin-right: 4px
  border-radius: 2px
  background: white
  font-weight: bold
  color: $light-blue
  padding: 3px 9px 2px 9px

.page:hover
  background: #fefefe

.page.active
  border: none
  background: $light-blue
  color: white
  padding: 3px 9px 2px 9px

.highlighted
  font-weight: bold
  background-color: rgb(255, 255, 221)


.collection-wrapper


.img-row
  display: flex
  flex-wrap: wrap

/* Create four equal columns that sits next to each other */
.img-column
  flex: calc(33% - 4px)
  max-width: calc(33% - 4px)
  margin-right: 4px

.img-column img
  margin-top: 8px
  vertical-align: middle

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 992px)
  .img-column
    flex: calc(50% - 4px)
    max-width: calc(50% - 4px)

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 768px)
  .img-column
    flex: 100%
    max-width: 100%