body {
    font-family: Arial;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.periodic {
    position: relative;
    margin-right: -1px;
    text-shadow: none;
}
.periodic-row {
    clear: both;
    height: 10%;
}
.cell {
    float: left;
    position: relative;
    width: 5.55%;
    height: 100%;
}
.element {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 1px;
    right: 1px;
    box-sizing: border-box;
    box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 1);
    text-align: center;
    cursor: default;
    pointer-events: none;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
    background-color: rgba(248, 150, 73, 1);
    z-index: 1;
    cursor: pointer;
}
.cell:hover .element {
    border-color: rgba(0, 0, 0, 0.1);
    -webkit-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
    z-index: 10000;
    background-color: rgba(248, 150, 73, 0.85);
    cursor: pointer;
}
.at_num {
    position: absolute;
    font-size: 4px;
    color: rgba(255, 255, 255, 0.59);
    opacity: 0;
}
.at_details {
    position: absolute;
    font-size: 4px;
    color: rgba(0, 0, 0, 0.99);
    opacity: 0;
}
.at_num {
    top: 4px;
    right: 5px;
}
.symbol {
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    margin-top: -4px;
    font-size: 9px;
    line-height: 1;
    height: 9px;
    color: rgba(0, 0, 0, 0.99);
}
.at_details {
    bottom: 4px;
    left: 0px;
    right: 0px;
}
.bg-white {
    background-color: rgba(255, 255, 255, 1);
}
.cell:hover .bg-white {
    background-color: rgba(255, 255, 255, 0.85);
}
.cell:nth-child(1) .element {
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
.cell:nth-child(18) .element {
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
.periodic-row:nth-child(1) .cell:nth-child(1) .element {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}
.periodic-row:nth-child(1) .cell:nth-child(18) .element {
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
}
.element {
    right: 2px;
    bottom: 2px;
}
.at_num,
.at_details {
    font-size: 4px;
    opacity: 1;
}
.symbol {
    margin-top: -17px;
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    height: 30px;
    color: rgba(0, 0, 0, 0.99);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}
.periodic {
    height: 800px;
}
.at_num,
.at_details {
    font-size: 8px;
}
.symbol {
    font-size: 18.5px;
}
.symbol-sm {
    font-size: 15px;
}
.cell {
    cursor: pointer !important;
}
.ncp {
    cursor: auto !important;
}
@media (min-width: 993px) {
.mobile_nav_icon { display: none;}
	.mobile {display: none;}
	.nomobile {display: block;}
	.pdf_block {width: 100%;}
	.view {    padding: 10px 20px;    background-color: rgba(248, 150, 73, 1);    color: #000;    text-decoration: none;}
	
.logotop_block { height: 8vh; width: 100%; text-align: right; box-shadow: 0 0 10px 5px #000; padding: 1vh 0; top: 0; z-index: 9999; position: fixed}
.logotop {height: 100%; max-height: 100%; margin: 0 1% 0 0; }
.view_iframe { height: 84vh; padding: 0% 0% 0 1%; width: 99%; z-index: 1000; margin: 0 0 0 0; top: 10vh; position: fixed;}
.back_block {height: 4vh; width: 100%; text-align: center; padding: 2vh 0 0 0; position: fixed; top: 94vh; z-index: 1000; background: #E1E1E1;}

}


@media (max-width: 992px) {
    body {
/*        display: none;*/
/*		width: 1500px; overflow-x: scroll;*/
    }
	.mobile_nav_icon {display: block;  position: fixed; top: 20px; left: 300px; width: 50px; z-index: 9999;  transition: 0.5s;}
	.mobile_nav_icon_0 {display: none; transition: 0.5s;}
	.mobile {display: block;}
	.nomobile {display: none;}
	.pdf_block {width: 100vw;}
	.view {padding: 10px 20px;    background-color: rgba(248, 150, 73, 1);    color: #000;    text-decoration: none;}

.logotop_block { height: 8vh; width: 100%; text-align: right; box-shadow: 0 0 10px 5px #000; padding: 1vh 0; top: 0; z-index: 9999; position: fixed}
.logotop {height: 100%; max-height: 100%; margin: 0 1% 0 0; }
.view_iframe { height: 84vh; padding: 0% 0% 0 1%; width: 99%; z-index: 1000; margin: 0 0 0 0; top: 10vh; position: fixed;}
.back_block {height: 4vh; width: 100%; text-align: center; padding: 2vh 0 0 0; position: fixed; top: 94vh; z-index: 1000; background: #E1E1E1;}
	
}

.sparkle {
    position: absolute;
    width: 7%;
    height: 555px;
    top: 0;
    left: 0;
}
.periodic_text {
    position: absolute;
    width: 90%;
    top: 10px;
    left: 10%;
    text-align: center;
    font-size: 18px;
}

.pict img {
    width: 65%;
}