@charset "utf-8";
/* CSS Document */
html {
    width:100%;
    height:100%;
}
::-webkit-scrollbar { 
    display: none; 
}
body {
	margin:0;
	width:100%;
    height:100%;
    background:rgba(33,33,33,1);
    text-align:center;
    font-family:"Product Sans", "Roboto", Arial, sans-serif;
    overflow-y: scroll;
}
article {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:30px;
	transition:ease 1s;
}
a {
    color:rgba(224,224,224,1);
    text-decoration:none;
        transition:ease .2s;
}
a:hover {
    color:rgba(255,255,255,1);
    text-decoration:none;
        transition:ease .2s;
}
a:focus {
    color:rgba(255,255,255,1);
    text-decoration:none;
        transition:ease .2s;
}
.experimenttitle {
    color:#fafafa;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    text-align: left;
    margin-bottom:-20px;
	transition:ease 1s;
}
.fillhoverbox {
    display:block;
    margin-left:auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 10px;
    width:90%;
    height:50px;
    border-radius:5px 5px 5px 5px;
    overflow: hidden;
    background:rgba(66,66,66,1);
    box-shadow:0 0 2px 2px rgba(0,0,0,.3);
	transition:ease 1s;
}
.fillhoverboxtext {
    margin:0;
    height:0;
    float: none;
    position: relative;
    top:17px;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
	transition:ease 1s;
}
.fillhoverbar {
    transform: rotate(100);
    width:10px;
    background:rgba(244,67,54,1);
    box-shadow:0 0 2px 2px rgba(0,0,0,.3);
	transition:ease 1s;
}
.full {
    height:100%;
    border-radius:0px 5px 5px 0px;
	transition:ease 1s;
}
.thick {
    height:15px;
    border-radius:0px 0px 5px 0px;
	transition:ease 1s;
}
.thin {
    height:5px;
    border-radius:0px 0px 5px 0px;
	transition:ease 1s;
}
.thinbottom {
    height: 5px;
    position:relative;
    top:100%;
    transform-origin: top;
    transform: translateY(-100%);
    border-radius:0px 5px 0px 0px;
	transition:ease 1s;
}
.thickbottom {
    height: 15px;
    position:relative;
    top:100%;
    transform-origin: top;
    transform: translateY(-100%);
    border-radius:0px 5px 0px 0px;
	transition:ease 1s;
}
.glow {
    overflow:visible;
    border-radius: 0;
	transition:ease 1s;
}
.redglow {
    box-shadow:0 0 5px 5px rgba(244,67,54,.3);
    border-radius: 0;
	transition:ease 1s;
}
.imgbar {
    background-color: #00ff00;
    background-image: url(../images/BarImage.png);
    background-size: auto 100%;
}
.fillhoverbox:hover > .fillhoverbar {
    width:101%;
	transition:ease 1s;
}
.glow:hover > .fillhoverbar {
    width:100%;
	transition:ease 1s;
}
#materialcard {
    background-origin: content-box;
    transform-origin: center;
    border-radius:100%;
    margin:0px auto;
    height:5px;
    width:5px;
    background-color:#424242;
    border-top:1px solid #616161;
    border-bottom:1px solid #212121;
	transition:ease 2s;
}
#materialcard:hover {
    margin:-47.5px auto;
    border-radius:20px;
    height:200px;
    width:200px;
    background-color:#424242;
	transition:ease 2s;
}