* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: #000000;
  padding-left: 2px;
  padding-top: 2px;
  max-width: 1350px;
  margin: 0 auto;
}

img {
  border:none;
}

.packery {
  background: #000000;
}

/* clearfix */
.packery:after {
  content: ' ';
  display: block;
  clear: both;
}

.item {
  width:  180px;
  height: 180px;
  float: left;
  background: #7054a1;
  overflow: hidden;
}

.item img {
  width: 100%;
  height: auto;
  border: none;
}

.item.w2 { width:   360px; background: #4f337f; }
.item.h2 { height:  360px; background: #9279bf; }
.item.h4 { height: 720px; background: #C90; }
.item.w4 { width:  720px; background: #90C; }


#footer {
  padding-top: 10px;
  width: 100%;
  background: black;
  text-align: center;
}

#footer img{
  padding-left: 15px;
  padding-right: 15px;
 
}

#footer a{
  text-decoration: none;
  opacity: 0.6;

}

#footer a:hover{
  opacity:1;
}

.credit{
  font-family: "Oswald","Helvetica Neue", Helvetica,sans-serif;
  text-align: center;
  font-size: 11pt;
  font-weight: 300;
  color: #838383;
  padding-top: 10px;
  padding-bottom: 15px;
  opacity: 1;
}

.credit a{
  color: inherit;
  text-decoration: none;
}


/*--  The Information that pops up on hover.
      r,l,b refers to the direction of which the hover affect appears from. 
      Big and long boxes have there own class --*/

.item .info {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px; 
  background: rgba(0,0,0,0);
  font-family:"Oswald","Helvetica Neue",Helvetica,sans-serif;
  text-align: center;
  font-size: 14pt;
  font-weight: 300;
  color: rgba(250,250,250,0);

  -webkit-transition: all .45s ease-in-out;
  -moz-transition: all    .45s ease-in-out;
  -o-transition: all      .45s ease-in-out;
  -ms-transition: all     .45s ease-in-out;
  transition: all         .45s ease-in-out;
}

.item:hover .info {
  background: rgba(0,0,0,0.6);
  color: white;

  -webkit-transition: all .35s ease-in-out;
  -moz-transition: all    .35s ease-in-out;
  -o-transition: all      .35s ease-in-out;
  -ms-transition: all     .35s ease-in-out;
  transition: all         .35s ease-in-out;
}

/*.item .r {right:  -100%;}
.item .l {left:   -100%;}
.item .b {bottom: -100%;}

.item:hover .r {right:   0%;}
.item:hover .l {left:    0%;}
.item:hover .b {bottom:  0%;}*/

.item .big {width: 100%; padding: 80px; /*left: -100%;*/}
.item:hover .big {background: rgba(0,0,0,0.6); color: white; left: 0px;}

.item .long {width: 100%; height: 180px; /*right: -100%;*/}
.item:hover .long {background: rgba(0,0,0,0.6); color: white; right: 0px;}


/*-----  CSS for Ipad  -----*/

@media screen and (min-width: 768px) and (max-width: 1024px) {

  body {
    padding-left:   7px;
    padding-top:    7px;
    padding-bottom: 7px;
  }
  
  .item {
    width:  185px;
    height: 185px;
  }
  
  .item.w2 { width:   370px; }
  .item.h2 { height:  370px; }
}

  .info:hover {
    background: rgba(0,0,0,0); 
  }

@media screen and (min-width: 320px) and (max-width: 568px) {
  body {
    padding-left:   0px;
    padding-top:    5px;
    padding-bottom: 5px;
  }

  #footer { padding-top: 10px;}
  #footer img{ width: 75px;}
}

/*-----  CSS for Iphone 5+  -----*/

@media screen and (min-width: 375px) and (max-width: 568px) {

  .item {
    width:  187px;
    height: 187px;
  }
  
  .item.w2 { width:   374px; }
  .item.h2 { height:  374px; }
}

/*-----  CSS for Iphone 5+  -----*/

@media screen and (min-width: 320px) and (max-width: 374px) {

  .item {
    width:  160px;
    height: 160px;
  }
  
  .item.w2 { width:   320px; }
  .item.h2 { height:  320px; }
}

/*-----  CSS for Big Screen  -----*/

@media screen and (min-width: 1350px) {

  body {
    max-width: 1350px;
    margin-left: auto;
    margin-right: auto;
  }

.description{
  z-index: -99;
  width: 70%;
  opacity: 0;
  position: absolute;
}