*{
    box-sizing: border-box;
}
::selection {
  background: #337ab7;
  color: #fff;
}
::-moz-selection {
  background: #337ab7;
  color: #fff;
}
html{height:100%;}
body{
	display:table;
	width:100%;
	
    font-family: 'Open Sans', sans-serif;
	background: #ffffff;
    margin: 0;
    padding: 25px 0 0 0;
    color: black;
	height:100%;
	hyphens:auto;
		-webkit-hyphens: auto;

}
header{
    background: rgba(0,0,0,0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 150;
    padding: 15px 50px;
}
header:after{
    content: "";
    display: block;
    clear: both;
}
header h1{
    font-size: 15px;
    font-weight: normal;
    color: #fff;
    margin: 0;
    float: left;
}
header a{
    float: right;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    font-size: 15px;
    margin-right: 15px;
}
header .fa{
    margin-right: 3px;
}

h1{
	margin-top:0px;
	font-weight:300;
	font-size:40px;
}

p{
	font-weight:300;
	font-size:13px;
}
.block sup{
	top:0em !important;
	vertical-align:top;	
}


.settings, .sharebox{
    width: 100%;
    max-width: 320px;
    background: rgba(0,0,0,0.85);
    position: fixed;
    top: 50px;
    right: 0;
    bottom: 0;
    z-index: 110;
    transition: 200ms ease-out 50ms;
    padding: 40px;
    transform: translateX(100%);
}
.settings.visible, .sharebox.visible{
    transform: translateX(0);
}
.settings h2, .sharebox h2{
    color: #fff;
    font-size: 15px;
    margin: 0 0 10px 0;
    font-weight: normal;
}
.settings h2 .fa, .sharebox h2 .fa{
    margin-right: 3px;
    font-weight: normal;
}

.settings ul{
    color: #fff;
    list-style-type: none;
    padding: 0;
    margin: 0 0 30px 0;
    border-top: 1px solid #444;
}
.settings ul li, .sharebox a{
    cursor: pointer;
    display: block;
    padding: 8px 10px;
    border-bottom: 1px solid #444;
    color: #ddd;
    font-size: 14px;
    text-decoration: none;
}
.settings ul li:hover, .sharebox a:hover{
    background: rgba(255,255,255,0.05);
}
.settings ul li.active{
    background: rgba(255,255,255,0.15);
    color: #fff;
}
.sharebox a .fa{
    width: 25px;
}

.settings .btn{
    cursor: pointer;
    display: inline-block;
    background: #337ab7;
    color: #fff;
    padding: 8px 15px;
    text-decoration: none;
    font-size: 14px;
    border-radius: 4px;
}
.settings .btn:hover{
    background: #4087C4;
}

.overlay{
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: #000;
    opacity: 0.3;
    z-index: 195;
}

.element-panel{
    display: none;
    width: 100%;
    max-width: 380px;	
    background: #fff;
    position: fixed;
    left:50%;
	top:50%;
	transform: translate(-50%, -50%);
   /*bottom: 120px;*/
   /*margin-left: -400px;*/
    z-index: 200;
    padding: 20px 25px 30px 25px;
	
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);;
	
}

.element-panel ul{
	padding-left:0px;
	margin-top:0px;
	max-height:80px;
	list-style-type:none;
}
.element-panel ul li{		
	margin-right:0px;
}

.element-panel ul a{
	font-size:13px;
}

.element-panel h2{
    margin: 0 0 4px 0;
	font-size:18px;
	font-weight:400;	
	display:inline-block;
}
.element-panel h2 span{
    color: #aaa;
}
.element-panel .info{
	font-style:italic;
	font-size:14px;
	margin-bottom:10px;	
}

.element-panel p{
    margin: 0 0 20px 0;
    font-size: 14px;
	font-weight:300;
	margin-bottom:10px;	
}

.element-panel a{    
    text-decoration: none;
}
.element-panel a:hover{    
    text-decoration: underline;
}

.element-panel .fa-close, .element-panel .nextelement, .element-panel .prevelement{
    position: absolute;
    cursor: pointer;
    font-size: 20px;
    color: #ccc;
}
.element-panel .fa-close:hover{
    color: #770456;
}

.element-panel .fa-close{
    top: 10px;
    right: 10px;
}

.construction{
	font-size:16px;
	text-align:center;	
	border-bottom:1px solid lightgrey;
	padding:10px;
	width:45%;
	margin:0 auto;
	left:50%;
	right:50%;
	margin-bottom:20px;
}


.Actinoid h2 a{
	color:#770456;
	border-bottom:solid 1px #770456;
}
.Actinoid h2 a:hover{
	text-decoration:none;
}
.Actinoid  ul li a{
	color:#770456;
}
.Post-Transition h2 a{
	color:#7e9b05;
	border-bottom:solid 1px #7e9b05;
}
.Post-Transition h2 a:hover{
	text-decoration:none;
}
.Post-Transition  ul li a{
	color:#7e9b05;
}
.Transition h2 a{
	color:#d6af09;
	border-bottom:solid 1px #d6af09;
}
.Transition h2 a:hover{
	text-decoration:none;
}
.Transition  ul li a{
	color:#d6af09;
}
.Alkali h2 a{
	color:#9e0115;
	border-bottom:solid 1px #9e0115;
}
.Alkali h2 a:hover{
	text-decoration:none;
}
.Alkali  ul li a{
	color:#9e0115;
}
.Metalloid h2 a{
	color:#0d4e6a;
	border-bottom:solid 1px #0d4e6a;
}
.Metalloid h2 a:hover{
	text-decoration:none;
}
.Metalloid  ul li a{
	color:#0d4e6a;
}





.container{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 0px;
    position: relative;		
	/*min-height:100%;*/
	height:auto !important;
}
.container:after{
    content: "";
    display: block;
    clear: both;
}
.element, .spacer, .Lanthanoids, .Actinoids, .EmptyElement, .block, .block-cat{
    width: 5.44444%;
    float: left;
    background: #ffffff;
    text-align: center;
    padding: 8px 3px 6px 3px;
    border: 2px solid #ffffff;
    position: relative;
    transition: 100ms;
    top: 0;
    overflow: hidden;
    min-height: 80px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
	hyphens: manual;

}
.element{
    cursor: pointer;
}
.element *{
    cursor: pointer;
}
.element:before{
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 1px solid rgba(25,25,25,1.0);
    content: "";
    display: block;
}
/*.element:after{
    position: absolute;
    top: 20%;
    left: 40%;
    background: #fff;
    opacity: 0.2;
    transform: rotate(30deg);
    content: "";
    display: block;
    width: 200%;
    height: 200%;
    z-index: 1;
}*/
.element.highlight:before{
    border: 1px solid rgba(25,25,25,1.0);
}

.EmptyElement{
	opacity:0.5;	
}

.first{
	width:2%;	
}
.separation{
	min-height:20px;	
}
.block{
	background-color:#e6e7e8;
	writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode:bt-rl;
	-webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform:rotate(180deg);
    transform: rotate(180deg);
	min-height:160px;
	font-size:13px;
	line-height:13px;
	
}

.block-1-line{	
	min-height:80px!important;	
}

.block-cat{	
	min-height:20px;
	font-size:13px;
}

.cat-1{width:10.88888%; background-color:rgba(190,0,120, 0.5);}
.cat-2{width:21.77777%; background-color:rgba(196,207,0, 0.5);}
.cat-3{width:21.77777%; background-color:rgba(250,209,0, 0.5);}
.cat-4{width:21.77777%; background-color:rgba(211,1,28, 0.5);}
.cat-5{width:21.77777%; background-color:rgba(25,156,212, 0.5);}

.cat-6{width:32.66666%; background-color:white;}
.cat-7{width:43.55555%; background-color:rgba(198,196,193, 0.5);}
.cat-8{width:21.77777%; background-color:white; color:white;}

.cat-9{width:65.33333%; background-color:rgba(198,196,193, 0.5);}




.Lanthanoids, .Lanthanoids *, .Actinoids, .Actinoids *, .EmptyElement, .EmptyElement *{
    cursor: default;
}

.container[data-theme="2016-clean"] .element[data-category="Nonmetal"], .key li[data-category="Nonmetal"] span{ background-color: #c0d7f0; }
.container[data-theme="2016-clean"] .element[data-category="Nonmetal"].highlight{ background-color: #CDE4FD; color:white;}
.container[data-theme="2016-clean"] .element[data-category="Noble Gas"], .key li[data-category="Noble Gas"] span{ background-color: #e1cfe5; }
.container[data-theme="2016-clean"] .element[data-category="Noble Gas"].highlight{ background-color: #EEDCF2; color:white; }
.container[data-theme="2016-clean"] .element[data-category="Alkali Metal"], .key li[data-category="Alkali Metal"] span{ background-color: #d3011c; }
.container[data-theme="2016-clean"] .element[data-category="Alkali Metal"].highlight{ background-color: #9e0115; color:white; }
.container[data-theme="2016-clean"] .element[data-category="Alkaline Earth"], .key li[data-category="Alkaline Earth"] span{ background-color: #ffdca9; }
.container[data-theme="2016-clean"] .element[data-category="Alkaline Earth"].highlight{ background-color: #FFE9B6; color:white;}
.container[data-theme="2016-clean"] .element[data-category="Metalloid"], .key li[data-category="Metalloid"] span{ background-color: #199cd4; }
.container[data-theme="2016-clean"] .element[data-category="Metalloid"].highlight{ background-color: #0d4e6a; color:white;}
.container[data-theme="2016-clean"] .element[data-category="Halogen"], .key li[data-category="Halogen"] span{ background-color: #c6c4c1; }
.container[data-theme="2016-clean"] .element[data-category="Halogen"].highlight{ background-color: #636261; color:white; }
.container[data-theme="2016-clean"] .element[data-category="Transition Metal"], .key li[data-category="Transition Metal"] span{ background-color: #fad100; }
.container[data-theme="2016-clean"] .element[data-category="Transition Metal"].highlight{ background-color: #d6af09; color:white;}
.container[data-theme="2016-clean"] .element[data-category="Post-Transition Metal"], .key li[data-category="Post-Transition Metal"] span{ background-color: #c4cf00; }
.container[data-theme="2016-clean"] .element[data-category="Post-Transition Metal"].highlight{ background-color: #7e9b05; color:white;}
.container[data-theme="2016-clean"] .element[data-category="Lanthanoid"], .Lanthanoids, .key li[data-category="Lanthanoid"] span{ background-color: #fce0ed; }
.container[data-theme="2016-clean"] .element[data-category="Lanthanoid"].highlight, .Lanthanoids.highlight{ background-color: #FFEDFA; color:white; }
.container[data-theme="2016-clean"] .element[data-category="Actinoid"], .Actinoids, .key li[data-category="Actinoid"] span{ background-color: #be0078; }
.container[data-theme="2016-clean"] .element[data-category="Actinoid"].highlight, .Actinoids.highlight{ background-color: #770456; color:white; }

.container[data-theme="minimalist"] .key li span{
    background: #fff;
    border: 1px solid rgba(0,0,0,0.3);
}
.container[data-theme="minimalist"] .element:before{
    border: 1px solid rgba(0,0,0,0.3);
}
.container[data-theme="minimalist"] .element:hover:before{
    border: 1px solid rgba(0,0,0,0.5);
}
.container[data-theme="minimalist"] .element{
    background: #f0f0f0;
}
.container[data-theme="minimalist"] .Lanthanoids, .container[data-theme="minimalist"] .Actinoids{
    background: #f0f0f0;
}

.element h3{
    margin: 0;
    font-size: 24px;
    font-weight: 600;
	line-height:1.3;
}
.element .atomic-number{
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 11px;
    /*letter-spacing: -0.5px;*/
    z-index: 5;
}
.element .name{
    display: block;
    font-size: 9px;
	line-height:13px;
    /*letter-spacing: -0.8px;*/
    position: relative;
    z-index: 5;
	
}
.element .mass{
    display: block;
    font-size: 11px;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 5;
}
.element.fadeout{
    opacity: 0.3;
}
.spacer:not(.label){
    visibility: hidden;
}
.spacer.label{
    font-size: 11px;
    font-weight: bold;
    padding-top: 65px;
    cursor: default;
}
.spacer.label.row{
    padding-top: 37px;
    text-align: right;
    padding-right: 9px;
}
.spacer.show{
    visibility: visible;
    overflow: visible;
}
.element[data-group="Lanthanoids"], .element[data-group="Actinoids"], .element[data-group="EmptyElement"]
{
    margin-top: -70px;
}

.key{
    position: absolute;
    top:0px;
    left: 20%;
    width: 1000%;
    z-index: 100;
    
    text-align: justify;
    border: 0px solid rgba(0,0,0,0.1);
    padding: 0px 20px;
	color:#1a171b;
}

.key-responsive{
	display:none;	
	padding:0px 20px 0px 20px;
	color:#1a171b;
}
.key-responsive p{
	font-size:16px;	
}

.key ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    color: #555;
    font-size: 14px;
    line-height: 26px;
    -webkit-column-count: 3;
    -moz-column-count: 3;
}

.key ul li{
    cursor: default;
}
.key ul li:hover{
    text-decoration: underline;
}

.key ul li span{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: red;
    display: inline-block;
    position: relative;
    top: 6px;
    margin-right: 10px;
    border: 1px solid rgba(0,0,0,0.1);
}

.key h1{
	margin-bottom:10px;
	font-size:40px;
}
.key h2{
	text-transform:uppercase;
	font-size:20px;
	font-weight: 300;
	margin-top:10px;
}
.key p{
	line-height:1.3;
}

.key a, .key-responsive a{
	text-decoration:underline;
	color:#1a171b;
}

#footer, #push{
    font-size: 13px;    
	font-weight:300;
    clear: both;   
    margin-top:40px;
	background-color:#636261;
	padding-top:20px;
	color:white;
	/*height:60px;*/
	display: table-row;
	
}

#footer{
	display: table-row;
}

.footer-container{
	min-height:60px;
	padding-top:20px;
}

.footer-container{max-width:1200px; margin:0 auto; }
.footer-right{float:right;}
.footer-left{float:left;}
.footer-link{margin-left:16px; text-decoration:underline;color:white;} .footer-link:hover{color:white; text-decoration:underline; cursor:pointer;}
.clear{clear:both;}



footer p{
    margin: 0;
}
footer a{
    color: #777;
    cursor: pointer;
    text-decoration: underline;
}
footer a:hover{
    text-decoration: underline;
}
footer a:visited{
    color: white;
}

div.anee-mobile{
		display:none!important;
	}

/* MEDIA CSS*/
/* MEDIA CSS*/
/* MEDIA CSS*/

@media (max-width:1400px){

   /* body{
        padding: 0 10px;
    }

    header{
        padding-left: 10px;
        padding-right: 10px;
    }*/
	.container{padding: 0 10px;}
	.footer-container{padding: 20px 10px;}

}

@media (max-width:1100px){

    .element, .spacer, .Lanthanoids, .Actinoids{
        min-height: 80px;
    }
	
	.separation{min-height: 20px;}

    .element .name{
        display: none;
    }
	.element{
		padding-top:20px;
	}

    .spacer.label{
        padding-top: 55px;
    }
    .spacer.label.row{
        padding-top: 32px;
    }


    /*.key{
        top: 79px;
        padding: 5px 15px;
        width: 970%;
    }

    .key ul{
        font-size: 13px;
    }

    .key ul li span{
        width: 15px;
        height: 15px;
        top: 3px;
    }*/
	
	.key p{
        font-size: 12px;
		line-height: 1.3;
    }	   

}

@media (max-width:1000px){
	
	.block{
		min-height:160px;
		font-size:11px;
		line-height:8px;
	}

    .element h3{
        font-size: 20px;
    }

    .element, .spacer, .Lanthanoids, .Actinoids, .EmptyElement{
        padding-top: 20px;
        min-height: 73px;
    }
	
	.separation{min-height: 20px;}

    .spacer.label{
        padding-top: 48px;
    }
    .spacer.label.row{
        padding-top: 27px;
    }

    .element .atomic-number{
        right: 5px;
        text-align: center;
    }

    .element .mass{
        font-size: 10px;
    }

    .key p{
        font-size: 10px;
    }
	
	.block{
		min-height:146px;
	}

}

@media (max-width:800px){
	div.anee-mobile{
		display:block!important;
		width:99%;
		margin:12px 2px 4px 2px;
		
		padding:20px;
		background-color:#e6e7e8;
		color:black;
		font-size:22px;
	}
	
	body{
        padding-top: 20px;
    }
	.container{
		margin: 0 auto 0px;
	}
    .spacer{
        display: none;
    }
	.show{
		display: none!important;
	}
	.tooltip{
		display: none!important;
	}

    .element{
        display: block;
        float: none;
        width: 100%;
        padding: 20px;
        min-height: 0;
    }

/*    .element:after{
        left: 0;
        opacity: 0.15;
    }*/

    .element .name{
        display: block;
        position: static;
        float: left;
        font-size: 24px;
		padding-top: 10px;
		
    }

    .element[data-group="Lanthanoids"], .element[data-group="Actinoids"], .element[data-group="EmptyElement"]{
        margin-top: inherit;
    }

    .Lanthanoids, .Actinoids, .EmptyElement{
        display: none;
    }

    .element .atomic-number{
        right: auto;
    }

    .element h3{
        font-size: 24px;
        float: left;
        text-align: left;
        width: 60px;
        opacity: 0.8;
    }

    .element .mass{
        float: right;
        font-size: 24px;
        position: static;
    }

    footer{
        top: 0;
        margin-top: 20px;
        margin-bottom: 20px;
    }	
	
	.block{
		display:none;
	}
	
	.block-cat{
		display:none;
	}
	
	.key-responsive{
	display:block;
	text-align:justify;
	margin-bottom:40px;
	
	}
	
	.key{
    display:none;
	}
	
		
}

@media (max-width:400px){

    .element{
        padding: 20px 10px;
    }

    .element .name{
        font-size: 18px;
    }

    .element h3{
        font-size: 18px;
    }

    .element .mass{
        font-size: 18px;
    }

    header h1{
        font-size: 13px;
    }

    .settings, .sharebox{
        max-width: 100%;
        top: 46px;
        padding: 20px;
    }
	
	.block{
		display:none;
	}

}

@media (max-width: 820px){

    .element-panel{
		position:fixed;
		transform: translate(0%, -50%);
		
        max-width: calc(100% - 80px);
        left: 40px; right: 40px;
    }

}

@media (max-width: 450px){

    .element-panel{
		max-width: calc(100% - 10px);
		
		left:5px;right:5px;
		padding:15px 15px 30px 15px;
     
    }
	.footer-right,.footer-left {float:none; text-align:center;}	
}

@media (max-width: 700px){

    .element-panel .wiki-content img{
        max-width: 100%;
        margin: 0 0 20px 0;
    }

    header h1{
        display: none;
    }

}

section.followme{
    background: #fb4f4f;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    padding: 40px 0;
    text-align: center;
    margin: 0 -10px;
}

section.followme a{
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dotted #fff;
}

section.followme a:hover{
    text-decoration: none;
    opacity: 0.7;
}