@charset 'utf-8';
/*
style.css
*/



/*
content area
*/


/*
custom style
*/


/*
Masonry grid basic setting
*/



/*　1 column basic setting（column,grid)　*/

.grid_container .column {
  /* 無法使用CSS3的box-sizing的話，將width扣除padding和border的値 */
  width: 266px;
  padding: 5px;
  margin: 2px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #d9d9d9;

  /* Javascript無效時會載入noscript.css，此屬性會變成visible */
  visibility: hidden;

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

/* 2 column(column, grid)的寬度*/
.grid_container .column.w2 {
  /* 無法使用CSS3的box-sizing的話，將width扣除padding和border的値 */
  width: 536px;
}

/* 3 column(column, grid)的寬度*/
.grid_container .column.w3 {
  /* 無法使用CSS3的box-sizing的話，將width扣除padding和border的値 */
  width: 806px;
}

.grid_container .column img {
  display: block;
  width: 100%;
  height: auto;
}
.grid_container .column .title {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.4;
  margin: 0.5em 0 0;
}


/*
sample3　fluid grid的額外設定
*/

#photoGalleryContainer .grid_sizer {
  /*　
      用%在masonry中設定基本的grid寬度，則必須用CSS selector指定
  */
  width: 25%;
}
#photoGalleryContainer.fluid .column {
  width: 24.5%;
  margin: 0.25%;
}
#photoGalleryContainer.fluid .column.w2 {
  width: 49.5%;
}
#photoGalleryContainer.fluid .column.w3 {
  width: 74.5%;
}

/*
sample4　colorbox的額外設定
*/

#photoGalleryContainer.withColorbox .column {
  background: #fff;
  -webkit-transition: background-color .4s linear;
  transition: background-color .4s linear;
}
#photoGalleryContainer.withColorbox .column:hover {
  background: #F0E247;
}


@media only screen and (max-width:767px) {
  
  #photoGalleryContainer .column {
    width: 100%;
  }
  #photoGalleryContainer.fluid .column {
    width: 49.5%;
  }
  .loaderSymbol {
    position: fixed;
    top: 50%;
    left: 45%;
  }

}