/*================================
Main Body Styles
===================================*/

html, body {
  width:100%;
  height:100%;
  margin:0 auto;
  background: url('../img/elements_background.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size:cover;
  background-attachment: fixed;
  background-color: #00142c;
}
*, *:before, *:after {
  box-sizing: border-box;
}
.container {
  width:100%;
  height:auto;
  margin:0 auto;
}
.wrapper {
  width:100%;
min-height: 100%;
  background: url('../img/elements_background.jpg');

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  margin:0 auto;
}
.white-section {
  width:100%;
  background:;
  padding:50px;
}
.backlink {
  margin:25px;
  padding:10px;
  border: 4px solid #fff;
}
a.backlink {
  color:#fff;
  font-family: 'Kanit', sans-serif;;
  text-decoration: none;
}
a.backlink:hover {
  color:#8CF;
}
.footerlink {
  width:100%;
  padding:20px 0;
  text-align: center;
}
.topbar {
  margin:50px 0;
}

// we'll add this class using javascript
.nav-up {
  top: -100px; // same as header height. use variables in LESS/SASS
}


footer {
  width:80%;
  margin-left:10%;
  margin-right:10%;
  border-bottom: 1px solid #fff;
  padding:5 0;
  margin-bottom: 10px;
  margin-top: 15px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00142c+0,00142c+49,00142c+100&0+0,0.6+10,0.6+50,0.6+95,0+100 */
background: -moz-linear-gradient(top, rgba(0,20,44,0) 0%, rgba(0,20,44,0.6) 10%, rgba(0,20,44,0.6) 49%, rgba(0,20,44,0.6) 50%, rgba(0,20,44,0.6) 95%, rgba(0,20,44,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,20,44,0) 0%,rgba(0,20,44,0.6) 10%,rgba(0,20,44,0.6) 49%,rgba(0,20,44,0.6) 50%,rgba(0,20,44,0.6) 95%,rgba(0,20,44,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,20,44,0) 0%,rgba(0,20,44,0.6) 10%,rgba(0,20,44,0.6) 49%,rgba(0,20,44,0.6) 50%,rgba(0,20,44,0.6) 95%,rgba(0,20,44,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000142c', endColorstr='#0000142c',GradientType=0 ); /* IE6-9 */
copy

}
footer p, footer a{
  font-family: 'Raleway', sans-serif;
  color:#fff;
  -webkit-margin-before: 0em;
-webkit-margin-after: 0em;
font-size: 1em;
text-decoration: none;
}

footer a:hover {
  color:#8CF;
}
.footerspan {
  font-family: 'Kanit', sans-serif;
}

/* ==============================
    Table Styles
================================ */
.tables {
  text-align: center;
}
table {
  color:#fff;
  border: 2px solid #fff;
  font-family: 'Raleway';
font-size:1.25em;
margin:15px 0;
width:100%;
}
tr {
  border: 1px solid #fff;
  width:50%;
  box-sizing: border-box;
}
td {
  border:1px solid #fff;
  transition: 0.5s all linear;
}
td:hover {
  background: #fff;
  color:#00142c;
  transition: 0.5s all linear;
  cursor:pointer;
}
.element-table {
width:100%;
padding: 0 25%;
}


/*===========================
Video
=============================*/


.videobox {
	width:80%;
  margin: 15px 10%;
  margin-bottom: 30px;
	height:auto;
	text-align:center;
}
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
  border: 2px solid #fff;
}
.videolink p, .videolink a {
  font-size: 1em;
  color:#fff;
  font-style: italic;
  font-family: 'Raleway', sans-serif;
  text-decoration: none;
}
.videolink a:hover {
  color:#8CF;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* ==============================
    Menu Styles
================================ */


/* ==============================
    Element Gallery Styles
================================ */

.button {
  display: inline-block;
  padding: 10px 18px;
  border: none;
  border-radius: 0.5em;
  color: #fff;
  font-family: 'Raleway',sans-serif;
  font-size: 1.25em;
  cursor: pointer;
}
button.button {
  background: #00142c;
}

a.title-link {
  color:#fff;
  text-decoration: none;
  font-style: italic;
  font-family: 'Raleway', sans-serif;
}
a.title-link:hover {
  color:#8CF;
  transition: 0.3s all linear;
}
.button:hover {
  background-color: #8CF;
  color: #222;
  cursor: pointer;
}

.button:active,
.button.is-checked {
  background-color: #2978a3;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  width:32%;
  float: left;
  border-radius: 0;
  margin: 0.5%;
  height:100px;
  box-sizing: border-box;
  border:4px solid #2978a3;
}

.button-group .button:first-child { border-radius: 0.0em 0 0 0.0em; }
.button-group .button:last-child { border-radius: 0 0.0em 0.0em 0; }

/* ---- isotope ---- */

.grid {
  width:100%;
  padding-bottom:10%;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.element-item {
  position: relative;
  float: left;
  height: auto;
  width:25%;
  padding-bottom: 25%;
  background: #888;
  color: #262524;
  font-family: 'Raleway', sans-serif;
}

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

.hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active {
  -webkit-animation-duration: 0.7s!important;
  animation-duration: 0.7s!important;
}

.element-item .name {
  position: absolute;

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

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

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

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

.element-item.alkali         { background: #ACCC23;}
.element-item.alkali:hover  { background: #2978a3; transition: 0.3s linear;}
.element-item:hover h3, .element-item:hover p  {color:#fff}

.element-item.alkaline-earth  { background: #8C9951; }
.element-item.alkaline-earth:hover  { background: #2978a3; transition: 0.3s linear; }

.element-item.lanthanoid      { background: #FFE345;}
.element-item.lanthanoid:hover { background: #2978a3; transition: 0.3s linear; }

.element-item.actinoid        { background: #849AFF;}
.element-item.actinoid:hover  { background: #2978a3; transition: 0.3s linear; }

.element-item.transition      { background: #236DCC;}
.element-item.transition:hover { background: #2978a3; transition: 0.3s linear; }

.element-item.post-transition { background: #FFEA84; }
.element-item.post-transition:hover { background: #2978a3; transition: 0.3s linear; }

.element-item.metalloid      { background: #CC603C;}
.element-item.metalloid:hover { background: #2978a3; transition: 0.3s linear; }

.element-item.nonmetal      { background: #7CCC3C; }
.element-item.nonmetal:hover { background: #2978a3; transition: 0.3s linear; }

.element-item.halogen         { background: #C0A6FF; }
.element-item.halogen:hover  { background: #2978a3; transition: 0.3s linear; }

.element-item.noblegas       { background: #CC762C; }
.element-item.noblegas:hover { background: #2978a3; transition: 0.3s linear; }


/*================================
Home Section Styles
===================================*/

.element-info {
  background: #fff;
}
.element-summary {
  width:80%;
  margin: 0 10%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00142c+0,00142c+49,00142c+100&0+0,0.6+10,0.6+50,0.6+95,0+100 */
background: -moz-linear-gradient(top, rgba(0,20,44,0) 0%, rgba(0,20,44,0.6) 10%, rgba(0,20,44,0.6) 49%, rgba(0,20,44,0.6) 50%, rgba(0,20,44,0.6) 95%, rgba(0,20,44,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,20,44,0) 0%,rgba(0,20,44,0.6) 10%,rgba(0,20,44,0.6) 49%,rgba(0,20,44,0.6) 50%,rgba(0,20,44,0.6) 95%,rgba(0,20,44,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,20,44,0) 0%,rgba(0,20,44,0.6) 10%,rgba(0,20,44,0.6) 49%,rgba(0,20,44,0.6) 50%,rgba(0,20,44,0.6) 95%,rgba(0,20,44,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000142c', endColorstr='#0000142c',GradientType=0 ); /* IE6-9 */
copy

  padding-top:20px;
}
.element-summary p {
  color:#fff;
  font-family: 'Raleway', sans-serif;
}
.element-gif {
  text-align: center;
}
.element-gif img {
  width:50%;
  height:auto;
}
.heading-center {
  width:100%;
  text-align: center;
  margin-bottom: 20px;
}

#home {
text-align: center;
height:100vh;
display:flex;
justify-content: center;
align-items: center;
}
#hometext {
  width:100%;
  height:auto;
  padding-top: 10%;
  text-align: center;

}
#homelink {
  width:100%;
  text-align: center;
  padding-top:20%;
}
h1 {
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size:5em;
  color:white;
  -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}
h2 {
  font-family: 'Kanit', sans-serif;
  font-size:3em;
  color:white;
  -webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
p {
  font-size:1.5em;
}

#filtersection {
  opacity:0;
  transition: 0.5s all linear;

}
#filtersection.fade-in {
  opacity:1;
  transition: 0.5s all linear;
}