.isotope-item{z-index:2;}
.isotope-hidden.isotope-item{pointer-events:none;z-index:1;}
.isotope,
.isotope .isotope-item{-webkit-transition-duration:0.8s;-moz-transition-duration:0.8s;-ms-transition-duration:0.8s;-o-transition-duration:0.8s;transition-duration:0.8s;}
.isotope{-webkit-transition-property:height, width;-moz-transition-property:height, width;-ms-transition-property:height, width;-o-transition-property:height, width;transition-property:height, width;}
.isotope .isotope-item{-webkit-transition-property:-webkit-transform, opacity;-moz-transition-property:-moz-transform, opacity;-ms-transition-property:-ms-transform, opacity;-o-transition-property:-o-transform, opacity;transition-property:transform, opacity;}
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition{-webkit-transition-duration:0s;-moz-transition-duration:0s;-ms-transition-duration:0s;-o-transition-duration:0s;transition-duration:0s;}
.isotope.infinite-scrolling{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}
.element{width:110px;height:110px;margin:5px;float:left;overflow:hidden;position:relative;background:#888;color:#222;}
.element.alkali{background:#F00;background:hsl(0, 100%, 50%);}
.element.alkaline-earth{background:#F80;background:hsl(36, 100%, 50%);}
.element.lanthanoid{background:#FF0;background:hsl(72, 100%, 50%);}
.element.actinoid{background:#0F0;background:hsl(108, 100%, 50%);}
.element.transition{background:#0F8;background:hsl(144, 100%, 50%);}
.element.post-transition{background:#0FF;background:hsl(180, 100%, 50%);}
.element.metalloid{background:#08F;background:hsl(216, 100%, 50%);}
.element.other.nonmetal{background:#00F;background:hsl(252, 100%, 50%);}
.element.halogen{background:#F0F;background:hsl(288, 100%, 50%);}
.element.noble-gas{background:#F08;background:hsl(324, 100%, 50%);}
.element *{position:absolute;margin:0;}
.element .symbol{left:0.2em;top:0.4em;font-size:3.8em;line-height:1.0em;color:#FFF;}
.element.large .symbol{font-size:4.5em;}
.element.fake .symbol{color:#000;}
.element .name{left:0.5em;bottom:1.6em;font-size:1.05em;}
.element .weight{font-size:0.9em;left:0.5em;bottom:0.5em;}
.element .number{font-size:1.25em;font-weight:bold;color:hsla(0,0%,0%,.5);right:0.5em;top:0.5em;}
.variable-sizes .element.width2{width:230px;}
.variable-sizes .element.height2{height:230px;}
.variable-sizes .element.width2.height2{font-size:2.0em;}
.element.large,
.variable-sizes .element.large,
.variable-sizes .element.large.width2.height2{font-size:3.0em;width:350px;height:350px;z-index:100;}
.clickable .element:hover{cursor:pointer;}
.clickable .element:hover h3{text-shadow:0 0 10px white,
0 0 10px white;}
.clickable .element:hover h2{color:white;}
#options{padding-bottom:0;}
#options h3{margin-bottom:0.2em;font-size:15px;}
#options h4{font-weight:bold;}
#options ul{margin:0;list-style:none;}
#options ul ul{margin-left:1.5em;}
#options li{float:left;margin-bottom:0.2em;}
#options li a{font-size:16px;font-weight:300;display:block;padding:0.4em 20px;background-color:#DDD;color:#222;text-shadow:0 1px hsla(0, 0%, 100%, 0.5);background-image:-webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0.0));background-image:-moz-linear-gradient(top, hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0.0));background-image:-ms-linear-gradient(top, hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0.0));background-image:-o-linear-gradient(top, hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0.0));background-image:linear-gradient(top, hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0.0));}
#options li a:hover{background-color:#39b54a;}
#options li a:active{background-color:#39b54a;-webkit-box-shadow:inset 0 2px 8px hsla(0, 0%, 0%, 0.6);-moz-box-shadow:inset 0 2px 8px hsla(0, 0%, 0%, 0.6);-o-box-shadow:inset 0 2px 8px hsla(0, 0%, 0%, 0.6);box-shadow:inset 0 2px 8px hsla(0, 0%, 0%, 0.6);}
#options li a{border-left:1px solid hsla(0, 0%, 100%, 0.3);border-right:1px solid hsla(0, 0%, 0%, 0.2);}
#options li:first-child a{border-radius:7px 0 0 7px;border-left:none;}
#options li:last-child a{border-radius:0 7px 7px 0;}
#options li a.selected{background-color:#39b54a;text-shadow:none;color:white;transition:all 0.3s;}
#options .option-combo{display:inline-block;float:right;margin:25px 5px 0 0;}
.option-combo a{cursor:pointer;}
#options .option-combo ul{margin-right:20px;display:inline-block;}
#options .option-combo h2,
#options .option-combo h4{line-height:34px;margin-bottom:0;margin-right:5px;display:inline-block;vertical-align:top;}
.color-shape{float:left;background:none;overflow:hidden;border:0;box-sizing:border-box;}
.color-shape img{margin:0 0 -5px 0;cursor:pointer;}
.color-shape.round{}
.color-shape.big.round{}
.color-shape.red{background:red;}
.color-shape.blue{background:blue;}
.color-shape.yellow{background:yellow;}
.color-shape a{display:block;height:100%;}
.color-shape a:hover{background:white;background:hsla(0, 0%, 100%, 0.5);}
.horizontal #container{height:80%;}
#copy{max-width:640px;}
.photos .photo{width:320px;margin:5px;float:left;}
.photos .photo img{display:block;width:100%;}
#content{margin-left:210px;}
.demos #content{height:100%;}
.docs #content{max-width:640px;}
.docs #content a:hover{border-bottom:1px dotted;}
.clearfix:before, .clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
.ilk-butonlar, .son-butonlar{display:none !important;}
#container{width:100%;height:auto;}
@media only screen and (max-width:767px){#options .option-combo ul{width:100%;height:auto;}
#options .option-combo ul li{width:100%;text-align:center;}
#options .option-combo ul li:nth-child(1) a, #options .option-combo ul li:nth-last-child(1) a{border-radius:0 0 0 0 !important;}
.color-shape{width:calc(50% - 2px);}
}