/*------------------------------
MASONRY STYLES
------------------------------*/

section.grid{
	padding: 0;
}

/*------------------------------
GRID
------------------------------*/

.masonrygrid{
  display: block;
  width: auto;
  position: relative;
  padding: 0;
  margin: 0;
}

.masonrygrid > .gridbox{
  float: left;
  border: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.masonrygrid > .gridbox > .overlay{
  position: relative;
  padding: 50px;
  margin: 0;
}

.masonrygrid > .gridbox.width-single{
  width: 25%;
}

.masonrygrid > .gridbox.width-double{
  width: 50%;
}

.masonrygrid > .gridbox.height-single{
  height: 360px;
}

.masonrygrid > .gridbox.height-double{
  height: 720px;
}

/*------------------------------
TEXT-BOX
------------------------------*/

.text-box{

}

.text-box > .overlay{
  text-align: center;
}

/*------------------------------
IMAGE-BOX
------------------------------*/

.image-box{
  min-height: 320px;
}

/*------------------------------
VIDEO-BOX
------------------------------*/

.video-box{
  min-height: 320px;
}

.video-box > .video{
  width: 100%;
  height: 100%;
  min-height: 320px;
  margin: 0;
  padding: 0;
}

/*------------------------------
RESPONSIVENESS
------------------------------*/

@media (max-width: 1200px){

  .text-box.width-double > .overlay > .image {
      max-width: 160px;
  }

  .text-box.width-double > .overlay > .text{
    width: calc(100% - 190px);
  }

}

@media (max-width: 950px){

  .masonrygrid > .gridbox.width-single{
    width: 50%;
  }

  .masonrygrid > .gridbox.width-double{
    width: 100%;
    height: auto;
    border-top: 1px solid rgba(0,0,0,0.1);
  }

}

@media (max-width: 640px){

  .masonrygrid > .gridbox.width-single{
    width: 100%;
    height: auto;
    border-top: 1px solid rgba(0,0,0,0.1);
    }

    .masonrygrid > .gridbox > .overlay{
      position: relative;
      padding: 50px 30px 50px 30px;
      margin: 0;
    }

}

@media (max-width: 460px){
    .text-box.width-single > .overlay > .image,
    .text-box.width-single > .overlay > .text,
    .text-box.width-double > .overlay > .image,
    .text-box.width-double > .overlay > .text{float:none;display:block;margin:auto;text-align:center;}
    .text-box.width-double > .overlay > .text{width:100%;}
}