/*

Champagne CSS

The width of the ul is equal to the number of columns times li width
and the height of the ul is equal to the number of rows times li height.

Don't forget to account for margin, padding, and borders!

*/
/* line 18 */
.champagne {
  z-index:9999;
  clear: both;
  height: 100%x;
  list-style: none;
  padding: 0 0 0 10px ;
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color:#fcfcf6;
   }
  /* line 33 */
  .champagne:after {
    background: transparent;
    bottom: 10px;
    content: '';
    height: 55%;
    position: absolute;
    right: 10px;
    width: 70%;
    z-index: -1; }
  /* line 50 */
  .champagne:before {
    background: transparent;
    bottom: 10px;

    content: '';
    height: 55%;
    left: 10px;
    position: absolute;
    width: 70%;
    z-index: -2; }
  /* line 67 */
  .champagne > li {
    width: 240px;
    height: 200px;
    float: left;
    text-align: center;
    padding: 50px 10px 10px 20px;
}

  /* line 77 */
  .champagne div.hidden {
    display: none; }
  /* line 81 */
  .champagne div.visible {
    display: block;
    -webkit-animation: scaleIn 1.2s ease;
    -moz-animation: scaleIn 1.2s ease;
    animation: scaleIn 1.2s ease; 
	}

.champagne_masonry img{
	border:1px solid #000000;
   }
.champagne_masonry {
  z-index:1;
  clear: both;
  height: 100%;
  list-style: none;
  padding: 0 0 0 10px ;
  position: absolute;
  width: 574px;
  background-color:#fcfcf6;
  top: 0;
   }
  /* line 33 */
  .champagne_masonry:after {
    background: transparent;
    bottom: 10px;
    content: '';
    height: 55%;
    position: absolute;
    right: 10px;
    width: 70%;
    z-index: -1; }
  /* line 50 */
  .champagne_masonry:before {
    background: transparent;
    bottom: 10px;

    content: '';
    height: 55%;
    left: 10px;
    position: absolute;
    width: 70%;
    z-index: -2; }
  /* line 67 */
  .champagne_masonry > li {
    height: 300px;
    float: left;
    text-align: center;
    width: 300px;
	}
  /* line 77 */
  .champagne_masonry div.hidden {
    display: none; }
  /* line 81 */
  .champagne_masonry div.visible {
    display: block;
    -webkit-animation: scaleIn 1.2s ease;
    -moz-animation: scaleIn 1.2s ease;
    animation: scaleIn 1.2s ease; }



.champagne2 {
  clear: both;
  height: 432px;
  list-style: none;
  padding: 0;
  position: relative;
  width: 584px; }
  /* line 33 */
  .champagne2:after {
    background: transparent;
    bottom: 10px;
    content: '';
    height: 55%;
    position: absolute;
    right: 10px;
    width: 70%;
    z-index: -1; }
  /* line 50 */
  .champagne2:before {
    background: transparent;
    bottom: 10px;

    content: '';
    height: 55%;
    left: 10px;
    position: absolute;
    width: 70%;
    z-index: -2; }
  /* line 67 */
  .champagne2 > li {
    width: 50px;
    height: 50px;
    float: left;
    text-align: center;
	padding:5px;
 }
  /* line 77 */
  .champagne2 div.hidden {
    display: none; }
  /* line 81 */
  .champagne2 div.visible {
    display: block;
    -webkit-animation: scaleIn 1.2s ease;
    -moz-animation: scaleIn 1.2s ease;
    animation: scaleIn 1.2s ease; }
	


.champagne3 {
  clear: both;
  height: 432px;
  list-style: none;
  padding: 0;
  position: relative;
  width: 100%; }
  /* line 33 */
  .champagne3:after {
    background: transparent;
    bottom: 10px;
    content: '';
    height: 55%;
    position: absolute;
    right: 10px;
    width: 70%;
    z-index: -1; }
  /* line 50 */
  .champagne3:before {
    background: transparent;
    bottom: 10px;

    content: '';
    height: 55%;
    left: 10px;
    position: absolute;
    width: 70%;
    z-index: -2; }
  /* line 67 */
  .champagne3 li {
    width: 50px;
    height: 50px;
    float: left;
    text-align: center;
	padding:0px;
 }
  /* line 77 */
  .champagne3 div.hidden {
    display: none; }
  /* line 81 */
  .champagne3 div.visible {
    display: block;
    -webkit-animation: scaleIn 1.2s ease;
    -moz-animation: scaleIn 1.2s ease;
    animation: scaleIn 1.2s ease; }
	
	
	
	
	
@-webkit-keyframes scaleIn {
  /* line 90 */
  from {
    -webkit-transform: scale(0); }

  /* line 91 */
  66% {
    -webkit-transform: scale(1.1); }

  /* line 92 */
  to {
    -webkit-transform: scale(1); } }

@-moz-keyframes scaleIn {
  /* line 96 */
  from {
    -webkit-transform: scale(0); }

  /* line 97 */
  66% {
    -webkit-transform: scale(1.1); }

  /* line 98 */
  to {
    -webkit-transform: scale(1); } }

@-o-keyframes scaleIn {
  /* line 102 */
  from {
    -webkit-transform: scale(0); }

  /* line 103 */
  66% {
    -webkit-transform: scale(1.1); }

  /* line 104 */
  to {
    -webkit-transform: scale(1); } }

@keyframes scaleIn {
  /* line 108 */
  from {
    -webkit-transform: scale(0); }

  /* line 109 */
  66% {
    -webkit-transform: scale(1.1); }

  /* line 110 */
  to {
    -webkit-transform: scale(1); } }