#lab {
overflow: hidden;
position: relative;
margin: 0 auto;
margin-bottom: 4.375em;
-webkit-transition: all ease 500ms;
-moz-transition: all ease 500ms;
-o-transition: all ease 500ms;
-ms-transition: all ease 500ms;
transition: all ease 500ms;
}
.beaker {
-webkit-filter: drop-shadow(#424242 0px 1px 0px);
border-bottom: 2em solid #FFF;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-radius: .5em;
height: 0;
width: 1em;
position: absolute;
right: 0.7em;
bottom: 22%;
font-size: 0.6em;
}
.beaker::before {
border-left: .25em solid #FFF;
border-radius: .25em;
border-right: .25em solid #FFF;
content: '';
height: .25em;
left: -.25em;
position: absolute;
top: -1em;
width: 1em;
}
.beaker::after {
border-left: .25em solid #FFF;
border-right: .25em solid #FFF;
content: '';
height: 1em;
left: 0;
position: absolute;
top: -1em;
width: .5em;
}
.sectionheader {
position: relative;
}
.lab_item {
width: 200px;
height: 230px;
position: relative;
display: inline-block;
}
.hexagon2 {
position: absolute;
width: 200px;
height: 400px;
top: -85px;
}
.hexagon {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
-webkit-box-shadow: inset 0 0 0 0px #18879f;
box-shadow: inset 0 0 0 0px #18879f;
overflow: hidden;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
-webkit-background-size: 176%;
-moz-background-size: 176%;
background-size: 176%;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hexagon-in2:hover {
-webkit-box-shadow: inset 0 0 0 200px rgba(176, 218, 212, 0.48);
box-shadow: inset 0 0 0 200px rgba(176, 218, 212, 0.48);
}
#lab article {
padding-top: 3.813em;
width: 71%;
margin: 0 auto;
}
.lab_item:nth-child(7n-2) {
margin-left: 101px;
}
.lab_item:nth-child(n+5) {
margin-top: -55px;
}
@media (max-width: 960px) {
#lab {
width: 100%;
}
}
@media (max-width: 820px) {
.lab_item:nth-child(5n-1) {
margin-left: 102px;
}
.lab_item:nth-child(n+4) {
margin-top: -62px;
}
.lab_item:nth-child(7n-2) {
margin-left: 0px;
}
.lab_item:nth-child(n+5) {
margin-top: -56px;
}
#lab article {
width: 610px;
}
}
@media (max-width: 640px) {
#lab article {
width: 405px;
}
.lab_item:nth-child(5n-1) {
margin-left: 0px;
}
.lab_item:nth-child(3n) {
margin-left: 102px;
}
.lab_item:nth-child(n+3) {
margin-top: -56px;
}
}