/* ---- demos ---- */

.demo .isotope,
.demo.isotope {
  background: #ffffff;
}

/* horizontal examples need height */
.isotope.horizontal {
  height: 334px;
}

.demo .button {
  margin-bottom: .8em;
}


/* clearfix */
.isotope:before,
.isotope:after {
  content: " ";
  display: table;
}

.isotope:after {
  clear: both;
}


/*
 * CSS3 effect
 */

/* ---- MODULE PLACEMENT AND COLOR ---- */

.element-item {
  position: relative;
  float: left;
  width: 250px;
  height: 250px;
  margin: 10px 15px 10px 0;
  padding: 0;
  background: #888;
  color: #fff;
}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item .name {
  position: absolute;

  left: 10px;
  top: 60px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

.element-item .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 42px;
  font-weight: bold;
  color: white;
}

.element-item .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 12px;
}

.element-item.alkali          { background: #ccc; }
.element-item.alkaline-earth  { background: #ccc; }
.element-item.lanthanoid      { background: #ccc; }
.element-item.websites        { background: #ccc; }
.element-item.flash      { background: #ccc; }
.element-ite
m.illustrations { background: #0b2fe6; }
.element-item.social       { background: #ccc; }
.element-item.commercial       { background: #ccc; }
.element-item.banners       { background: #ccc; }
.element-item.diatomic        { background: #ccc;  }
.element-item.halogen         { background: #ccc; }
.element-item.noble-gas       { background: #ccc; }
.element-item.new       { background: #ccc; }


.element-item .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 12px;
}



/* varying sizes */
.is-varying-sizes .element-item.width2 { width: 210px; }
.is-varying-sizes .element-item.height2 { height: 210px; }

/* ---- mini items ---- */

.item,
.mini-item {
  float: left;
  width: 50px;
  height: 50px;
  background: #e6e5e4;
  border: 2px solid #b6b5b4;
  border-color: hsla(0, 0%, 0%, 0.4);
}

.mini-item.w2 { width: 100px; }
.mini-item.h2 { height: 100px; }

.mini-item.w3 { width: 150px; }
.mini-item.h3 { height: 150px; }

.mini-item.gigante {
  width: 150px;
  height: 200px;
}

.clickable .mini-item:hover {
  border-color: #28F;
  background: #8CF;
  cursor: pointer;
}


/* ----  ---- */

.rainbowed > *:nth-child(10n+0) { background: hsl(   0, 100%, 50%); }
.rainbowed > *:nth-child(10n+1) { background: hsl(  36, 100%, 50%); }
.rainbowed > *:nth-child(10n+2) { background: hsl(  72, 100%, 50%); }
.rainbowed > *:nth-child(10n+3) { background: hsl( 108, 100%, 50%); }
.rainbowed > *:nth-child(10n+4) { background: hsl( 144, 100%, 50%); }
.rainbowed > *:nth-child(10n+5) { background: hsl( 180, 100%, 50%); }
.rainbowed > *:nth-child(10n+6) { background: hsl( 216, 100%, 50%); }
.rainbowed > *:nth-child(10n+7) { background: hsl( 252, 100%, 50%); }
.rainbowed > *:nth-child(10n+8) { background: hsl( 288, 100%, 50%); }
.rainbowed > *:nth-child(10n+9) { background: hsl( 324, 100%, 50%); }

/* ---- individual demos ---- */

/* flexible 5 columns */
.flex-5-col .grid-sizer,
.flex-5-col .mini-item { width: 20%; }
.flex-5-col .mini-item.w2 { width: 40%; }
.flex-5-col .gutter-sizer { width: 5%; }

/* masonry gutter */
.masonry-gutter .mini-item.w2 { width: 110px; }

/* masonry bottom spaced */
#masonry-bottom-spaced .mini-item {
  margin-bottom: 10px;
}
#masonry-bottom-spaced .mini-item.h2 {
  height: 110px;
}

/* flexible 4 columns w/ gutter */
.flex-4-col-gutter .grid-sizer,
.flex-4-col-gutter .mini-item { width: 22%; }
.flex-4-col-gutter .mini-item.w2 { width: 48%; }
.flex-4-col-gutter .gutter-sizer { width: 4%; }

/* masonry flex gutter */
#masonry-flex-gutter .gutter-sizer {
  width: 3%;
}

#masonry-horizontal-right-spaced .mini-item {
  margin-right: 10px;
}

/* ---- fit width ---- */

#masonry-fit-width {
  border: 2px solid white;
}

/* center container with CSS */
#masonry-fit-width .isotope {
  margin: 10px auto;
}

/* ---- counting ---- */

.isotope.counting {
  counter-reset: item;
}

.isotope.counting .mini-item:before,
.isotope.counting .item:before {
  counter-increment: item;
  content: counter(item);
  display: block;
  color: #555;
  padding-top: 0.2em;
  text-align: center;
  font-size: 18px;
}

/* ---- measurement demos ---- */

#gutter-opt-demo2 .item {
  margin-bottom: 10px;
}

/* responive column width */
#column-width-demo2 .grid-sizer { width: 20%; }
#column-width-demo2 .item { width: 20%; }
#column-width-demo2 .item.w2 { width: 40%; }

#row-height-demo2 .grid-sizer {
  height: 60px;
}

#gutter-opt-demo3 .gutter-sizer {
  width: 3%;
}

/* ---- stamp ---- */

.has-stamp {
  position: relative;
}

.demo .stamp {
  position: absolute;
  width: 30%;
  height: 60px;
  background: orange;
  border: 4px dotted black;
}

#stamp-opt-demo .stamp1 {
  left: 30%;
  top: 10px;
  width: 20%;
  height: 100px;
}

#stamp-opt-demo .stamp2 {
  right: 10%;
  top: 20px;
  width: 70%;
  height: 30px;
}

#stamp-demo .stamp {
  right: 10%;
  top: 10px;
  width: 35%;
  height: 70px;
}

#stamp-demo .mini-item { opacity: 0.8; }

/* ---- clickable ---- */

.clickable .item:hover {
  border-color: white;
  background: #A2C;
  cursor: pointer;
}

/* ---- vertical table-like ---- */

.table-like {
  list-style: none;
  margin: 0;
  padding: 0;
}

.table-like > li {
  width: 100%;
  clear: both;
  border-top: 1px solid;
  border-color: hsla(0, 0%, 100%, 0.2);
}

/* clearfix */
.table-like > li:after {
  display: block;
  content: '';
  clear: both;
}

.table-like > li > * {
  float: left;
  padding: 2px 4px;
}

.table-like .name { width: 30%; }
.table-like .symbol { width: 10%; }
.table-like .weight { width: 15%; }
.table-like .number { width: 10%; }
.table-like .category { width: 20%; }

/* ----  ---- */

#fit-columns-feature-demo {
  height: 448px;
}

/* ---- insert-demo ---- */

#insert-demo .mini-item .number {
  padding: 0px;
  font-size: 24px;
  font-weight: bold;
  color: #777;
  text-align: center;
  line-height: 50px;
}

/* ---- multiple-sort-by ---- */

#multiple-sort-by-demo .mini-item .number {
  font-size: 50px;
  font-weight: 600;
  color: #222;
  padding-top: 0.1em;
  text-align: center;
}

#multiple-sort-by-demo [data-color="blue"] { background: blue; }
#multiple-sort-by-demo [data-color="red"] { background: red; }
#multiple-sort-by-demo [data-color="yellow"] { background: yellow; }

/* ---- animate-item-size ---- */

/* item is invisible, but used for layout */
.isotope.animate-item-size-demo .item,
.isotope.animate-item-size-demo .item-content {
  width: 60px;
  height: 60px;
}

.isotope.animate-item-size-demo .item {
  border: none;
  background: transparent;
}

/* item-content is visible, and transitions size */
.animate-item-size-demo .item-content {
  width: 60px;
  height: 60px;
  background: #8DF;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
}

.animate-item-size-demo .item:hover .item-content {
  border-color: white;
  background: #4BF;
}

/* both item and item content change size */
.animate-item-size-demo .item.is-expanded,
.animate-item-size-demo .item.is-expanded .item-content {
  width: 180px;
  height: 120px;
}

.animate-item-size-demo .item.is-expanded {
  z-index: 2;
}

.animate-item-size-demo .item.is-expanded .item-content {
  background: #F90;
}


/* ---- animate item size responsive ---- */

#animate-item-size-responsive .item,
#animate-item-size-responsive .grid-sizer {
  width: 20%;
}

#animate-item-size-responsive .item-content {
  width:  100%;
  height: 100%;
}

/* item has expanded size */
#animate-item-size-responsive .item.is-expanded {
  width: 60%;
}


/*illustrations */
.view_illustrations {
   width: 250px; 
   height: 250px;
   margin: 0;
   padding:0;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background:#671e79;
}

.view_illustrations .mask,.view .content {
   width: 250px;
   height: 250px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view_illustrations img {
   display: block;
   position: relative;
}

.view_illustrations p {
   font-family: 'Sen';
   font-size: 1em;
   position: relative;
   text-align: center;
}

.view_illustrations h2{
   font-family: 'Sen';
   font-size: .3em;
   position: relative;
   padding: 0;
   margin:0;
   text-align: center;
}

.view_illustrations h3{
    font-family: 'Sen';
   font-size: 1.3em;
   position: relative;
   color: #fff;
    padding:15px;
    line-height: inherit;
   margin:0;
   text-align: center;
}

.view_illustrations a.info {
   font-family: 'Sen';
   display: inline-block;
   padding: 7px 7px;
   background: #fff;
   color: #ce9fd1;
   text-decoration:none;
}

.view_illustrations a.info:hover {
   text-decoration:none;
       font-family: 'Sen';
   display: inline-block;
   padding: 7px 7px;
   background: #fff;
   color: #e72798;
   text-decoration:none;
    	 cursor:pointer;
 
}


.view_illustrations a.info: visited {
   text-decoration:underline;
    border-bottom: 1px blue dotted;
}

/*flash */
.view_flash {
   width: 250px;
   height: 250px;
   margin: 0;
   padding:0;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background:#ca97ac;
}

.view_flash .mask,.view .content {
   width: 250px;
   height: 250px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view_flash img {
   display: block;
   position: relative;
}

.view_banners p {
   font-family: 'Sen';
   font-size: 1em;
   position: relative;
   text-align: center;
}

.view_flash h2{
   font-family: 'Sen';
   font-size: .3em;
   position: relative;
   padding: 0;
   margin:0;
   text-align: center;
}

.view_flash h3{
    font-family: 'Sen';
   font-size: 1.3em;
   position: relative;
   color: #fff;
    padding:15px;
    line-height: inherit;
   margin:0;
   text-align: center;
}

.view_flash a.info {
   font-family: 'Sen';
   display: inline-block;
   padding: 7px 7px;
   background: #fff;
   color: #ce9fd1;
   text-decoration:none;
}

.view_flash a.info:hover {
   text-decoration:none;
       font-family: 'Sen';
   display: inline-block;
   padding: 7px 7px;
   background: #fff;
   color: #e72798;
   text-decoration:none;
    	 cursor:pointer;
 
}


.view_flash a.info: visited {
   text-decoration:underline;
    border-bottom: 1px blue dotted;
}



/*emails */
.view_emails {
   width: 250px;
   height: 250px;
   margin: 0;
   padding:0;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background:#df347c;
}

.view_emails .mask,.view .content {
   width: 250px;
   height: 250px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view_emails img {
   display: block;
   position: relative;
}

.view_emails p {
   font-family: 'Sen';
   font-size: 1em;
   position: relative;
   text-align: center;
}

.view_emails h2{
   font-family: 'Sen';
   font-size: .3em;
   position: relative;
   padding: 0;
   margin:0;
   text-align: center;
}

.view_emails h3{
    font-family: 'Sen';
   font-size: 1.3em;
   position: relative;
   color: #fff;
    padding:15px;
    line-height: inherit;
   margin:0;
   text-align: center;
}

.view_emails a.info {
   font-family: 'Sen';
   display: inline-block;
   padding: 7px 7px;
   background: #fff;
   color: #ce9fd1;
   text-decoration:none;
}

.view_emails a.info:hover {
   text-decoration:none;
       font-family: 'Sen';
   display: inline-block;
   padding: 7px 7px;
   background: #fff;
   color: #e72798;
   text-decoration:none;
    	 cursor:pointer;
 
}


.view_emails a.info: visited {
   text-decoration:underline;
    border-bottom: 1px blue dotted;
}


/*edge */
.view_edge {
   width: 250px; 
   height: 250px;
   margin: 0;
   padding:0;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background:#743384;
}

.view_edge .mask,.view .content {
   width: 250px;
   height: 250px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view_edge img {
   display: block;
   position: relative;
}

.view_edge p {
   font-family: 'Sen';
   font-size: 1em;
   position: relative;
   text-align: center;
}

.view_edge h2{
   font-family: 'Sen';
   font-size: .3em;
   position: relative;
   padding: 0;
   margin:0;
   text-align: center;
}

.view_edge h3{
    font-family: 'Sen';
   font-size: 1.3em;
   position: relative;
   color: #fff;
    padding:15px;
    line-height: inherit;
   margin:0;
   text-align: center;
}

.view_edge a.info {
   font-family: 'Sen';
   display: inline-block;
   padding: 7px 7px;
   background: #ce9fd1;
   color: #fff;
   text-decoration:none;
}
.view_edge a.info: hover {
   text-decoration:underline;
    border-bottom: 1px blue dotted;

}

.view_edge a.info: visited {
   text-decoration:underline;
    border-bottom: 1px blue dotted;
}

/*commercial */
.view_commercial  {
   width: 250px; 
   height: 250px;
   margin: 0;
   padding:0;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background:#da75ac;
}

.view_commercial .mask,.view .content {
   width: 250px;
   height: 250px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view_commercial  img {
   display: block;
   position: relative;
}

.view_commercial p {
   font-family: 'Sen';
   font-size: 1em;
   position: relative;
   text-align: center;
}

.view_commercial h2{
   font-family: 'Sen';
   font-size: .3em;
   position: relative;
   padding: 0;
   margin:0;
   text-align: center;
}

.view_commercial h3{
    font-family: 'Sen';
   font-size: 1.3em;
   position: relative;
   color: #fff;
    padding:15px;
    line-height: inherit;
   margin:0;
   text-align: center;
}

.view_commercial a.info {
   font-family: 'Sen';
   display: inline-block;
   padding: 7px 7px;
   background: #fff;
   color: #ce9fd1;
   text-decoration:none;
}

.view_commercial a.info:hover {
   text-decoration:none;
       font-family: 'Sen';
   display: inline-block;
   padding: 7px 7px;
   background: #fff;
   color: #e72798;
   text-decoration:none;
    	 cursor:pointer;
 
}


/*social */
.view_social  {
   width: 250px; 
   height: 250px;
   margin: 0;
   padding:0;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background:#db9c58;
}

.view_social .mask,.view .content {
   width: 250px;
   height: 250px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view_social  img {
   display: block;
   position: relative;
}

.view_social p {
   font-family: 'Sen';
   font-size: 1em;
   position: relative;
   text-align: center;
}

.view_social h2{
   font-family: 'Sen';
   font-size: .3em;
   position: relative;
   padding: 0;
   margin:0;
   text-align: center;
}

.view_social h3{
    font-family: 'Sen';
   font-size: 1.3em;
   position: relative;
   color: #452f16;
    padding:15px;
    line-height: inherit;
   margin:0;
   text-align: center;
}

.view_social a.info {
   font-family: 'Sen';
   display: inline-block;
   padding: 7px 7px;
   background: #fff;
   color: #dbd658;
   text-decoration:none;
}

.view_social a.info:hover {
   text-decoration:none;
       font-family: 'Sen';
   display: inline-block;
   padding: 7px 7px;
   background: #fff;
   color: #549036;
   text-decoration:none;
    	 cursor:pointer;
 
}



/*banners */
.view_banners {
   width: 250px;
   height: 250px;
   margin: 0;
   padding:0;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background:#cea4d6;
}

.view_banners .mask,.view .content {
   width: 250px;
   height: 250px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view_banners img {
   display: block;
   position: relative;
}


.view_banners p {
   font-family: 'Sen';
   font-size: 1em;
   position: relative;
   text-align: center;
}

.view_banners h2{
   font-family: 'Sen';
   font-size: .3em;
   position: relative;
   padding: 0;
   margin:0;
   text-align: center;
}

.view_banners h3{
    font-family: 'Sen';
   font-size: 1.3em;
   position: relative;
   color: #fff;
    padding:15px;
    line-height: inherit;
   margin:0;
   text-align: center;
}

.view_banners a.info {
   font-family: 'Sen';
   display: inline-block;
   padding: 7px 7px;
   background: #fff;
   color: #ce9fd1;
   text-decoration:none;
}

.view_banners a.info:hover {
   text-decoration:none;
       font-family: 'Sen';
   display: inline-block;
   padding: 7px 7px;
   background: #fff;
   color: #e72798;
   text-decoration:none;
    	 cursor:pointer;
 
}


.view_banners a.info: visited {
   text-decoration:underline;
    border-bottom: 1px blue dotted;
}




.view-tenth img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
   background-color: rgba(255, 231, 179, 0.3);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth h2 {
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   color: #333;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth p {

  color:#f3f600;
padding:5px;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-tenth a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-tenth:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}