/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.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:         top, left, opacity;
    transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.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;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */
html,
body {
    height: 100%;
}

#container-isotope {
    /*border: 1px solid #666;
    padding: 5px;
    margin-bottom: 20px;*/
}

.element {
    width: 110px;
    height: 110px;
    margin: 10px;
    float: left;
    overflow: hidden;
    position: relative;
    background: #f1f1f2; /* #ffffff, #f1f1f2;*/
    color: #D2232B;
    /*-webkit-border-top-right-radius: 1.2em;
        -moz-border-radius-topright: 1.2em;
            border-top-right-radius: 1.2em;*/
}

.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: 48px; /*4em; = 64px */
    line-height: 1.0em;
    font-style: normal;
    padding-top: 0;
    color: #000000; /*#D2232B;*/
}
.element.large .symbol {
    font-size: 4.5em;
}

.element.fake .symbol {
    color: #000;
}

.element .name {
    left: 0.5em;
    bottom: 1em;
    font-size: 1.05em;
    color: #d2232b;
}

.element .weight {
    font-size: 0.9em;
    left: 0.5em;
    bottom: 0.5em;
}

.element .number {
    font-size: 1.25em;
    font-weight: bold;
    color: #F1F1F2;
    right: 0.5em;
    top: 0.5em;
}

.element .mosaico{color:black;font-style:normal;}
.element > a,
.element > span{
    background-color: white;
    font-style: italic;
    color: black;
    box-shadow: 0 0 10px #000000;
    font-size: 12pt;
    /*height: 230px;
    width: 230px;*/
    left: 0;
    position: absolute;
    text-decoration: none;
    top: 0;
}

.element > a p,
.element > span p{
    margin: 10px;
}

.mosaico * {
    position:relative;
}

.variable-sizes .element.size1 { width: 147.333px; height:147.333px; }
.variable-sizes .element.size2 { width: 314.666px; height:147.333px; }
.variable-sizes .element.size3 { width: 314.666px; height:314.666px; }
.variable-sizes .element.size4 { width: 482px; height:147.333px; }
.variable-sizes .element.size5 { width: 482px; height:314.666px; }
.variable-sizes .element.size6 { width: 482px; height:482px; }
.variable-sizes .element.size7 { width: 648.333px; height:147.333px; }
.variable-sizes .element.size8 { width: 648.333px; height:314.666px; }
.variable-sizes .element.size9 { width: 648.333px; height:482px; }
.variable-sizes .element.size10 { width: 648.333px; height:648.333px; }
.variable-sizes .element.size11 { width: 815.666px; height:147.333px; }
.variable-sizes .element.size12 { width: 815.666px; height:314.666px; }
.variable-sizes .element.size13 { width: 815.666px; height:482px; }
.variable-sizes .element.size14 { width: 815.666px; height:648.333px; }
.variable-sizes .element.size15 { width: 815.666px; height:815.666px; }
.variable-sizes .element.size16 { width: 982px; height:147.333px; }
.variable-sizes .element.size17 { width: 982px; height:314.666px; }
.variable-sizes .element.size18 { width: 982px; height:482px; }
.variable-sizes .element.size19 { width: 982px; height:648.333px; }
.variable-sizes .element.size20 { width: 982px; height:815.666px; }
.variable-sizes .element.size21 { width: 982px; height:982px; }
.variable-sizes .element.size22 { width: 982px; height:655px; }
.variable-sizes .element.size23 { width: 815px; height:544px; }
.variable-sizes .element.size24 { width: 648px; height:432px; }
.variable-sizes .element.size25 { width: 482px; height:322px; }
.variable-sizes .element.size26 { width: 314px; height:209px; }
.variable-sizes .element.size27 { width: 147px; height:98px; }
.variable-sizes .element.size28 { width: 123px; height:70px; }
.variable-sizes .element.size29 { width: 982px; height:70px; }
.variable-sizes .element.size30 { width: 123px; height:30px; }

.variable-sizes .element.size31 { width: 982px; height:550px; }
.variable-sizes .element.size32 { width: 482px; height:270px; }
.variable-sizes .element.size33 { width: 314px; height:176px; }
.variable-sizes .element.size34 { width: 982px; height:740px; }
.variable-sizes .element.size35 { width: 482px; height:365px; }
.variable-sizes .element.size36 { width: 314px; height:235px; }

.variable-sizes .element.size37 { width: 482px; height:482px; }
.variable-sizes .element.size38 { width: 982px; height:147px; }
.variable-sizes .element.size39 { width: 982px; height:314px; }
.variable-sizes .element.size40 { width: 982px; height:482px; }


.variable-sizes .element.size1 > a,
.variable-sizes .element.size1 > span{ width: 147.333px; height:147.333px; }
.variable-sizes .element.size2 > a,
.variable-sizes .element.size2 > span{ width: 314.666px; height:147.333px; }
.variable-sizes .element.size3 > a,
.variable-sizes .element.size3 > span{ width: 314.666px; height:314.666px; }
.variable-sizes .element.size4 > a,
.variable-sizes .element.size4 > span{ width: 482px; height:147.333px; }
.variable-sizes .element.size5 > a,
.variable-sizes .element.size5 > span{ width: 482px; height:314.666px; }
.variable-sizes .element.size6 > a,
.variable-sizes .element.size6 > span{ width: 482px; height:482px; }
.variable-sizes .element.size7 > a,
.variable-sizes .element.size7 > span{ width: 648.333px; height:147.333px; }
.variable-sizes .element.size8 > a,
.variable-sizes .element.size8 > span{ width: 648.333px; height:314.666px; }
.variable-sizes .element.size9 > a,
.variable-sizes .element.size9 > span{ width: 648.333px; height:482px; }
.variable-sizes .element.size10 > a,
.variable-sizes .element.size10 > span{ width: 648.333px; height:648.333px; }
.variable-sizes .element.size11 > a,
.variable-sizes .element.size11 > span{ width: 815.666px; height:147.333px; }
.variable-sizes .element.size12 > a,
.variable-sizes .element.size12 > span{ width: 815.666px; height:314.666px; }
.variable-sizes .element.size13 > a,
.variable-sizes .element.size13 > span{ width: 815.666px; height:482px; }
.variable-sizes .element.size14 > a,
.variable-sizes .element.size14 > span{ width: 815.666px; height:648.333px; }
.variable-sizes .element.size15 > a,
.variable-sizes .element.size15 > span{ width: 815.666px; height:815.666px; }
.variable-sizes .element.size16 > a,
.variable-sizes .element.size16 > span{ width: 982px; height:147.333px; }
.variable-sizes .element.size17 > a,
.variable-sizes .element.size17 > span{ width: 982px; height:314.666px; }
.variable-sizes .element.size18 > a,
.variable-sizes .element.size18 > span{ width: 982px; height:482px; }
.variable-sizes .element.size19 > a,
.variable-sizes .element.size19 > span{ width: 982px; height:648.333px; }
.variable-sizes .element.size20 > a,
.variable-sizes .element.size20 > span{ width: 982px; height:815.666px; }
.variable-sizes .element.size21 > a,
.variable-sizes .element.size21 > span{ width: 982px; height:982px; }
.variable-sizes .element.size22 > a,
.variable-sizes .element.size22 > span{ width: 982px; height:655px; }
.variable-sizes .element.size23 > a,
.variable-sizes .element.size23 > span{ width: 815px; height:544px; }
.variable-sizes .element.size24 > a,
.variable-sizes .element.size24 > span{ width: 648px; height:432px; }
.variable-sizes .element.size25 > a,
.variable-sizes .element.size25 > span{ width: 482px; height:322px; }
.variable-sizes .element.size26 > a,
.variable-sizes .element.size26 > span{ width: 314px; height:209px; }
.variable-sizes .element.size27 > a,
.variable-sizes .element.size27 > span{ width: 147px; height:98px; }
.variable-sizes .element.size28 > a,
.variable-sizes .element.size28 > span{ width: 123px; height:70px; }
.variable-sizes .element.size29 > a,
.variable-sizes .element.size29 > span{ width: 982px; height:70px; }
.variable-sizes .element.size30 > a,
.variable-sizes .element.size30 > span{ width: 123px; height:30px; }

.variable-sizes .element.size31 > a,
.variable-sizes .element.size31 > span{ width: 982px; height:550px; }
.variable-sizes .element.size32 > a,
.variable-sizes .element.size32 > span{ width: 482px; height:270px; }
.variable-sizes .element.size33 > a,
.variable-sizes .element.size33 > span{ width: 314px; height:176px; }
.variable-sizes .element.size34 > a,
.variable-sizes .element.size34 > span{ width: 982px; height:740px; }
.variable-sizes .element.size35 > a,
.variable-sizes .element.size35 > span{ width: 482px; height:365px; }
.variable-sizes .element.size36 > a,
.variable-sizes .element.size36 > span{ width: 314px; height:235px; }


.variable-sizes .element.size37 > a,
.variable-sizes .element.size37 > span{ width: 482px; height:482px; }
.variable-sizes .element.size38 > a,
.variable-sizes .element.size38 > span{ width: 982px; height:147px; }
.variable-sizes .element.size39 > a,
.variable-sizes .element.size39 > span{ width: 982px; height:314px; }
.variable-sizes .element.size40 > a,
.variable-sizes .element.size40 > span{ width: 982px; height:482px; }


.variable-sizes .element > a:hover,
.variable-sizes .element > span:hover{ color:black; }

.variable-sizes .element img{height:auto !important;width:100% !important;}

.variable-sizes .element.size1 img{ height: 147.333px }
.variable-sizes .element.size2 img{ height: 147.333px; }
.variable-sizes .element.size3 img{ height: 314.666px; }
.variable-sizes .element.size4 img{ height: 147.333px;}
.variable-sizes .element.size5 img{ height: 314.666px;}
.variable-sizes .element.size6 img{ height: 482px;}
.variable-sizes .element.size7 img{ height: 147.333px;}
.variable-sizes .element.size8 img{ height: 314.666px;}
.variable-sizes .element.size9 img{ height: 482px;}
.variable-sizes .element.size10 img{ height: 648.333px;}
.variable-sizes .element.size11 img{ height: 147.333px;}
.variable-sizes .element.size12 img{ height: 314.666px;}
.variable-sizes .element.size13 img{ height: 482px;}
.variable-sizes .element.size14 img{ height: 648.333px;}
.variable-sizes .element.size15 img{ height: 815.666px;}
.variable-sizes .element.size16 img{ height: 147.333px;}
.variable-sizes .element.size17 img{ height: 314.666px;}
.variable-sizes .element.size18 img{ height: 482px;}
.variable-sizes .element.size19 img{ height: 648.333px;}
.variable-sizes .element.size20 img{ height: 815.666px;}
.variable-sizes .element.size21 img{ height: 982px;}
.variable-sizes .element.size22 img{ height: 655px;}
.variable-sizes .element.size23 img{ height: 544px;}
.variable-sizes .element.size24 img{ height: 432px;}
.variable-sizes .element.size25 img{ height: 322px;}
.variable-sizes .element.size26 img{ height: 209px;}
.variable-sizes .element.size27 img{ height: 98px;}
.variable-sizes .element.size28 img{ height:70px; }
.variable-sizes .element.size29 img{ height:70px; }
.variable-sizes .element.size30 img{height:30px; }
.variable-sizes .element.size31 img{ height:550px; }
.variable-sizes .element.size32 img{ height:270px; }
.variable-sizes .element.size33 img{ height:176px; }
.variable-sizes .element.size34 img{ height:740px; }
.variable-sizes .element.size35 img{ height:365px; }
.variable-sizes .element.size36 img{ height:235px; }

.variable-sizes .element.size37 img{ height:482px; }
.variable-sizes .element.size38 img{ height:147px; }
.variable-sizes .element.size39 img{ height:314px; }
.variable-sizes .element.size40 img{ height:482px; }

/*.variable-sizes .element.size1 img{ width: 147px }
.variable-sizes .element.size2 img{ width: 314px; }
.variable-sizes .element.size3 img{ width: 314px; }
.variable-sizes .element.size4 img{ width: 482px;}
.variable-sizes .element.size5 img{ width: 482px;}
.variable-sizes .element.size6 img{ width: 482px;}
.variable-sizes .element.size7 img{ width: 648.333px;}
.variable-sizes .element.size8 img{ width: 648.333px;}
.variable-sizes .element.size9 img{ width: 648.333px;}
.variable-sizes .element.size10 img{ width: 648.333px;}
.variable-sizes .element.size11 img{ width: 815.666px;}
.variable-sizes .element.size12 img{ width: 815.666px;}
.variable-sizes .element.size13 img{ width: 815.666px;}
.variable-sizes .element.size14 img{ width: 815.666px;}
.variable-sizes .element.size15 img{ width: 815.666px;}
.variable-sizes .element.size16 img{ width: 982px;}
.variable-sizes .element.size17 img{ width: 982px;}
.variable-sizes .element.size18 img{ width: 982px;}
.variable-sizes .element.size19 img{ width: 982px;}
.variable-sizes .element.size20 img{ width: 982px;}
.variable-sizes .element.size21 img{ width: 982px;}
.variable-sizes .element.size22 img{ width: 982px;}
.variable-sizes .element.size23 img{ width: 815px;}
.variable-sizes .element.size24 img{ width: 648px;}
.variable-sizes .element.size25 img{ width: 482px;}
.variable-sizes .element.size26 img{ width: 314px;}
.variable-sizes .element.size27 img{ width: 147px;}*/

.variable-sizes .element.size1 .cycle-overlay{ width: 147.333px; height:147.333px; }
.variable-sizes .element.size2 .cycle-overlay{ width: 314.666px; height:147.333px; }
.variable-sizes .element.size3 .cycle-overlay{ width: 314.666px; height:314.666px; }
.variable-sizes .element.size4 .cycle-overlay{ width: 482px; height:147.333px; }
.variable-sizes .element.size5 .cycle-overlay{ width: 482px; height:314.666px; }
.variable-sizes .element.size6 .cycle-overlay{ width: 482px; height:482px; }
.variable-sizes .element.size7 .cycle-overlay{ width: 648.333px; height:147.333px; }
.variable-sizes .element.size8 .cycle-overlay{ width: 648.333px; height:314.666px; }
.variable-sizes .element.size9 .cycle-overlay{ width: 648.333px; height:482px; }
.variable-sizes .element.size10 .cycle-overlay{ width: 648.333px; height:648.333px; }
.variable-sizes .element.size11 .cycle-overlay{ width: 815.666px; height:147.333px; }
.variable-sizes .element.size12 .cycle-overlay{ width: 815.666px; height:314.666px; }
.variable-sizes .element.size13 .cycle-overlay{ width: 815.666px; height:482px; }
.variable-sizes .element.size14 .cycle-overlay{ width: 815.666px; height:648.333px; }
.variable-sizes .element.size15 .cycle-overlay{ width: 815.666px; height:815.666px; }
.variable-sizes .element.size16 .cycle-overlay{ width: 982px; height:147.333px; }
.variable-sizes .element.size17 .cycle-overlay{ width: 982px; height:314.666px; }
.variable-sizes .element.size18 .cycle-overlay{ width: 982px; height:482px; }
.variable-sizes .element.size19 .cycle-overlay{ width: 982px; height:648.333px; }
.variable-sizes .element.size20 .cycle-overlay{ width: 982px; height:815.666px; }
.variable-sizes .element.size21 .cycle-overlay{ width: 982px; height:982px; }
.variable-sizes .element.size22 .cycle-overlay{ width: 982px; height:655px; }
.variable-sizes .element.size23 .cycle-overlay{ width: 815px; height:544px; }
.variable-sizes .element.size24 .cycle-overlay{ width: 648px; height:432px; }
.variable-sizes .element.size25 .cycle-overlay{ width: 482px; height:322px; }
.variable-sizes .element.size26 .cycle-overlay{ width: 314px; height:209px; }
.variable-sizes .element.size27 .cycle-overlay{ width: 147px; height:98px; }
.variable-sizes .element.size28 .cycle-overlay{ width: 123px; height:70px; }
.variable-sizes .element.size29 .cycle-overlay{ width: 982px; height:70px; }
.variable-sizes .element.size30 .cycle-overlay{ width: 123px; height:30px; }

.variable-sizes .element.size31 .cycle-overlay{ width: 982px; height:550px; }
.variable-sizes .element.size32 .cycle-overlay{ width: 482px; height:270px; }
.variable-sizes .element.size33 .cycle-overlay{ width: 314px; height:176px; }
.variable-sizes .element.size34 .cycle-overlay{ width: 982px; height:740px; }
.variable-sizes .element.size35 .cycle-overlay{ width: 482px; height:365px; }
.variable-sizes .element.size36 .cycle-overlay{ width: 314px; height:235px; }

.variable-sizes .element.size37 .cycle-overlay{ width: 482px; height:482px; }
.variable-sizes .element.size38 .cycle-overlay{ width: 982px; height:147px; }
.variable-sizes .element.size39 .cycle-overlay{ width: 982px; height:314px; }
.variable-sizes .element.size40 .cycle-overlay{ width: 982px; height:482px; }

/**** old liquidmaps ****/
/*.variable-sizes .element.size1 { width: 482px; height:147.333px; }
.variable-sizes .element.size2 { width: 314.666px; height:147.333px; }
.variable-sizes .element.size3 { width: 147.333px; height:147.333px; }
.variable-sizes .element.size4 { width: 314.666px; height:314.666px; }

.variable-sizes .element.size1 a{ width: 482px; height:147.333px; }
.variable-sizes .element.size2 a{ width: 314.666px; height:147.333px; }
.variable-sizes .element.size3 a{ width: 147.333px; height:147.333px; }
.variable-sizes .element.size4 a{ width: 314.666px; height:314.666px; }

.variable-sizes .element.size1 a:hover{ color:black; }
.variable-sizes .element.size2 a:hover{ color:black; }
.variable-sizes .element.size3 a:hover{ color:black; }
.variable-sizes .element.size4 a:hover{ color:black; }*/

/**** liquiddocs ****/
/*.variable-sizes .element.size1 { width: 480px; height:230px; background: lightgray;}
.variable-sizes .element.size2 { width: 480px; height:320px; background: lightgray;}
.variable-sizes .element.size3 { width: 230px; height:480px; background: lightgray;}
.variable-sizes .element.size4 { width: 230px; height:230px; background: lightgray;}
.variable-sizes .element.size5 { width: 150px; height:150px; background: lightgray;}

.variable-sizes .element.size1 a{ width: 480px; height:230px; }
.variable-sizes .element.size2 a{ width: 480px; height:320px; }
.variable-sizes .element.size3 a{ width: 230px; height:480px; }
.variable-sizes .element.size4 a{ width: 230px; height:230px; }
.variable-sizes .element.size5 a{ width: 150px; height:150px; }*/

.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;
}

/**** Example Options ****/

#options {
    padding-bottom: 1.0em;
    padding-top: 0.1em;
    margin-left: 10px;
    width: 780px;
}

#options .logo{
    margin-left: 780px;
    width: 240px;
    height: 135px;
    background-color: #FFFFFF; /*darkgray*/
}

#options .logo img{
    width: 240px;
    height: 135px;
}

#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;
    margin-top: 0.5em;
    list-style: none outside none;
}

#options li a {
    display: block;
    padding: 0 1em 0 0;
    /*background-color: #DDD;
    color: #222;
    font-weight: bold;
    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 ) );*/
    /*border-left:  1px solid hsla( 0, 0%, 100%, 0.3 );
    border-right: 1px solid hsla( 0, 0%,   0%, 0.2 );*/
}

#options li a:hover {
    color: #D2232B;
}

#options li a:active {
    background-color: #39D;
    -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:first-child a {
    /*border-radius: 7px 0 0 7px;*/
    border-left: none;
}

#options li:last-child a {
    /*border-radius: 0 7px 7px 0;*/
    padding-right: 0;
}

#options li a.selected {
    text-shadow: none;
    color: #D2232B;
}

/* Combination filter options*/

#options .option-combo {
    display: inline-block;
    float: left;
    margin-right: 10px;
    /*margin-right: 0px; liquiddocs*/
}

#options .option-combo ul {
    margin-right: 20px;
    display: inline-block;
}

#options .option-combo h2,
#options .option-combo h4 {
    font-family: "Adobe Garamond Pro";
    font-style: italic;
    line-height: 20px;
    margin-bottom: 0;
    margin-right: 5px;
    /*display: inline-block;*/
    vertical-align: top;
    color: #7A7979;
    font-size: 16px;
}

/* Color shapes */

.color-shape {
    width: 70px;
    height: 70px;
    margin: 5px;
    float: left;
}

.color-shape.round {
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
}

.color-shape.big.round {
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    border-radius: 75px;
}

.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }

.color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }

.color-shape a {
    display: block;
    height: 100%;
}

.color-shape a:hover {
    background: white;
    background: hsla( 0, 0%, 100%, 0.5 );
}

/**** Horizontal ****/

.horizontal #container-isotope {
    height: 80%;
}

#copy {
    max-width: 640px;
}

/**** Photo demo ****/

.photos .photo {
    width: 221px;
    margin: 10px;
    float: left;
    margin-top:30px;
}

.photos .photo.size1 {
    margin-left: 157px;
    margin-right: 157px;
    width: 650px;
}

.photos .photo.size2 {
    width: 462px;
}

.photos .photo.text {
    float: left;
    margin-left: 257px;
    margin-right: 257px;
    width: 450px;
}

.photos .photo.text.t {
    width: 450px;
    text-align: center;
}

.photos .photo img {
    display: block;
    width: 100%;
}

.photo p {
    text-align: center; /** ref: 02_RESUMEN PENDIENTES DRIVES */
    margin-bottom:0;
    padding:10px;
}

.demos #content {
    height: 100%;
}

/**** Docs ****/

.docs #content {
    max-width: 640px;
}

.docs #content a:hover {
    border-bottom: 1px dotted;
}

/**** Doc content ****/

.docs #content h2 {
    border-top: 1px solid #333;
    padding-top: 0.8em;
    margin-bottom: 0.8em;
}

.docs #content h2:target {
    padding: 10px;
    background: white;
    color: #222;
}

.docs #content h3 {
    color: #FEC;
    background: hsla( 0, 0%, 75%, 0.05 );
    padding: 2px 0.5em;
    margin-bottom: 0.5em;
    font-size: 1.15em;
}

.docs #content h4 {
    margin-bottom: 0.5em;
    font-size: 14px;
}

pre {
    padding: 10px;
}

pre, code {
    background: black;
    color: white;
    font-family: 'Monaco', monospace, sans-serif;
}

#content code {
    font-size: 12px;
}

#content pre {
    line-height: 1.6em;
}

h3#options {
    padding-bottom: 0;
}

.option-def dl dt,
.option-def dl dd {
    float: left;
    padding: 0 1.2em;;
    background: #161616;
    line-height: 36px;
    height: 36px;
}

.option-def dl.header dt,
.option-def dl.header dd {
    background: #444;
}

.option-def dl .option-type {
    font-size: 13px;
    color: #AAA;
    font-style: italic;
}

.option-def dl dd {
    border-left: 1px solid #222;
}

/* Tagline */

.docs .tagline {
    font-size: 22px;
    font-weight: 300;
}

/* as-is from MIT */

.docs .as-is {
    font-size: 95%;
}

/* Commercial license blurb */

.docs #commercial {
    background: white;
    padding: 10px;
    font-size: 14px;
    color: #1F1F1D;
}

.docs #commercial a { font-weight: bold;}

/**** Pygments ****/

code .s1,
code .s { color: #78BD55; } /* string */
code .mi, /* integer */
code .cp, /* doctype */
code .kc { color: #5298D4; } /*boolean*/
code .k { color: #E39B79; } /* keyword */
code .kd, /* storage */
code .na { color: #A9D866; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* comment */
code .c,
code .c1 { color: #666; font-style: italic; }

code .nt { color: #A0C8FC; } /* Markup open tag */

code .nf { color: #9EA8B8; } /* css id */
code .nc { color: #A78352; }  /* CSS class */
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */



/**** Super list ****/


/**** Sites using Isotope ****/

#sites h2 {
    display: none;
    padding: 0.4em;
    line-height: 32px;
    margin-bottom: 0.4em;
    -webkit-transition: background-color 0.8s;
    -moz-transition: background-color 0.8s;
    -o-transition: background-color 0.8s;
    transition: background-color 0.8s;
}

#sites h2 img {
    display: inline-block;
    margin-right: 0.4em;
    vertical-align: bottom;
}

#sites h2.loading {
    background: white;
    color: #222;
}
#sites h2.error {
    background: red;
    color: #222;
}


#sites ul {
    margin: 0;
}

.super-list .example {
    list-style: none;
    float: left;
    width: 230px;
    margin: 5px;
}

.super-list .example a,
.super-list .example b,
.super-list .example img {
    display: block;
}

.super-list .example img { width: 100%; }

.super-list .example a {
    background: #1F1E1D;
}

.super-list .example a:hover {
    background: white;
    color: #111;
}

.super-list .example b {
    font-weight: bold;
    line-height: 1.3em;
    padding: 3px;
    padding-top: 8px;
}

.super-list .link {
    float: left;
    position: relative;
    font-size: 24px;
    line-height: 1.2em;
    font-weight: 300;
    margin: 5px;
}

.super-list .link {
    width: 230px;
    height: 110px;
}

.super-list .link a {
    display: block;
    padding: 10px;
    padding-left: 65px;
    height: 90px;
    background: #1F1E1D;
    color: #FE5;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

.super-list .link a:before {
    content: '➔';
    font-size: 70px;
    position: absolute;
    top: 30px;
    left: 5px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.super-list .link.away a:before {
    top: 25px;
    left: 0px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.super-list .link a:hover {
    background: #E58;
    color: white;
}

.super-list .feature .name {
    bottom: auto;
    top: 140px;
    left: 18px;
    font-size: 20px;
}

/**** BIG Graph ****/

.big-graph {
    background: white;
    height: 600px;
    margin: 20px auto;
}

.big-graph .project {
    width: 45px;
    height: 45px;
    float: left;
}

.big-graph .project .icon {
    pointer-events: none;
    width: 31px;
    height: 31px;
    background: white;
    margin-left: 7px;
    -webkit-transition: -webkit-transform 0.25s;
    -moz-transition: -moz-transform    0.25s;
    -ms-transition: -ms-transform     0.25s;
    -o-transition: -o-transform      0.25s;
    transition: transform         0.25s;
}

.big-graph .project:hover {
    z-index: 5;

}

.big-graph .project:hover .icon {
    -webkit-transform: scale(3);
    -moz-transform: scale(3);
    -ms-transform: scale(3);
    -o-transform: scale(3);
    transform: scale(3);
}

.big-graph .project.commercial .icon { background: #6B6B6B; }
.big-graph .project.urbanism .icon { background: #00CF00; }
.big-graph .project.public-space .icon { background: #FF8D00; }
.big-graph .project.culture .icon { background: #D61919; }
.big-graph .project.body-culture .icon { background: #00ECFF; }
.big-graph .project.health .icon { background: #FF2251; }
.big-graph .project.education .icon { background: #00A700; }
.big-graph .project.housing .icon { background: #FF02FF; }
.big-graph .project.hotel .icon { background: #0000C3; }
.big-graph .project.media .icon { background: #292929; }

.big-graph .project p {
    line-height: 14px;
    font-size: 10.5px;
    color: black;
    margin-left: 7px;
}

/**** Infinite Scroll ****/

#infscr-loading {
    position: fixed;
    text-align: center;
    bottom: 30px;
    left: 42%;
    z-index: 100;
    background: white;
    background: hsla( 0, 0%, 100%, 0.9 );
    padding: 20px;
    color: #222;
    font-size: 15px;
    font-weight: bold;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}



/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/********** FICHA **********/
#links-ficha {
    position: absolute;
    right: 23px; /*40px;*/
    top: 105px;
    text-align: right;
}

#links-ficha.users-toolbar {
    top: 125px;
}

#links-ficha ul {
    margin-right: 0;
    margin-top: 0;
}

#links-ficha li {
    list-style: none outside none;
}

#ficha-content {
    margin: 0 auto;
    overflow: hidden;
    width: 1024px;
}

#ficha {
    /*margin-left: 30px;*/
    /*margin-right: 30px;*/
    text-align: center;
    /*width: 964px;*/
}

#ficha-content h1 {
    color: #D2232B;
    font-size: 50px;
    font-weight: normal;
    line-height: 1.1em;
    margin-bottom: 10px;
    margin-top: 30px;
    padding-top: 0px;
    width: 650px; /*800px;*/
    /*text-align: center;*/
}

#ficha-content a, a code {
    color: black;
    text-decoration: none;
}

#ficha-content a:hover {color: #D2232B;}

#menu {
    padding-bottom: 1.5em;
    /*margin: 0 auto;*/
    font-style: italic;
    font-size: 18px;
    /*text-align: center;*/
    width: 780px;
}

.menustyle:after { /*clearfix*/
    clear: both;
}
.menustyle:before, .clearfix:after {
    content: "";
    display: table;
}
.menustyle:before, .clearfix:after {
    content: "";
    display: table;
}

#menu .option-menu {
    display: inline-block;
    /*float: left;*/
    /*margin-right: 10px;*/
    /*margin: 0 auto;*/
}
#menu .option-menu ul {
    display: inline-block;
}
#menu ul {
    list-style: none outside none;
    margin: 0;
}
#menu li {
    float: left;
    margin-bottom: 0.2em;
    list-style: none outside none;
}
#menu li a {
    display: block;
    padding: 0.5em 2em 0.5em 0; /*0.5em 1em;*/
}

#menu li:first-child a {
    /*padding-left: 0px;*/
}

#menu li:last-child a {
    padding-right: 0px;
}

#menu li a.selected {
    color: #D2232B;
    text-shadow: none;
}

/*
#ficha1 {
    width:1024px;
    text-align: center;
    margin:0 auto 0 auto;
}
#ficha1 img {
    width:650px;
    height: auto;
}
#ficha1 .element1 {
    width:650px;
    height: auto;
    margin:0 auto 20px auto;
}
#ficha1 .text {
    width:450px;
    height: auto;
    margin:0 auto 20px auto;
    text-align: center;
}

#ficha2 {
    width:964px;
    text-align: center;
    margin-left: 20px;
    margin-right: 40px;
    margin-top: 10px;
}
#ficha2 .element2 {
    margin:0px 0px 20px 20px;
    width: 462px;
    float:left;
    height: auto;
}
#ficha2 .element2 img {
    width: 462px;
    height: auto;
}
#ficha2 .text {
    width:450px;
    height: auto;
    margin:0 auto 20px auto;
    text-align: center;
}

#ficha3 {
    width:964px;
    text-align: center;
    margin-left: 20px;
    margin-right: 40px;
    margin-top: 10px;
}
#ficha3 .element3 {
    float: left;
    margin:0px 0px 20px 20px;
    width: 221px;
    height: auto;
}
.element3 img {
    width: 221px;
    height: auto;
}*/


.category-search label.selected{padding:0;}

.cycle-overlay {
    background: none repeat scroll 0 0 transparent;
    /*bottom: 0;*/
    /*color: #FFFFFF;*/
    /*opacity: 0.5;*/
    /*padding: 15px;
    position: absolute;*/
    /*width: 314px; */   /* esto hay que poner dependiendo de los tamaños del element */
    z-index: 600;
}

#ficha añ{color:#D2232B;}