*,*:before {
  transition:.25s ease-in-out;
}

p {
  margin:40px auto;
  text-align:center;
  font-family:helvetica neue,helvetica,arial,sans-serif;
  font-weight:200;
}

.icon {
  margin:0 auto;
  height:50px;
  width:70px;
  position:relative;
  cursor:pointer;
}

/* Hamburger 1 */

#hamburger-one {
  height:49px;
}

#hamburger-one span {
  display:block;
  position:absolute;
  left:14px;
  height:7px;
  background:#8b8b8b;
}

#hamburger-one span:before {
  content:'';
  display:block;
  position:absolute;
  left:-14px;
  height:7px;
  width:7px;
  background:#8b8b8b;
  border-radius:100%;
}

#hamburger-one span:nth-of-type(1){
  width:50px;
  top:0px;
}

#hamburger-one span:nth-of-type(2){
  width:40px;
  top:14px;
}

#hamburger-one span:nth-of-type(3){
  width:35px;
  top:28px;
}

#hamburger-one span:nth-of-type(4){
  width:45px;
  top:42px;
}

#hamburger-one:hover span:nth-of-type(1){
  width:56px;
}

#hamburger-one:hover span:nth-of-type(2){
  width:46px;
}

#hamburger-one:hover span:nth-of-type(3){
  width:41px;
}

#hamburger-one:hover span:nth-of-type(4){
  width:51px;
}

#hamburger-one.active span {
  top:21px;
  left:0px;
  width:70px !important;
  background:#0986bf;
  transform:rotate(45deg);
}

#hamburger-one.active span:before {
  left:0;
  transform:rotate(90deg);
  width:100%;
  border-radius:0;
  background:#0986bf;
}

/* Hamburger two */

#hamburger-two {
  border-radius:100%;
}

#hamburger-two:before {
  content:'';
  display:block;
  position:absolute;
  height:80px;
  width:80px;
  background:transparent;
  top:-23px;
  left:-5px;
  border-radius:100%;
}

#hamburger-two:hover:before {
  background:#efefef;
}

#hamburger-two span {
  display:block;
  width:70%;
  height:7px;
  left:15%;
  background:#8b8b8b;
  position:absolute;
}

#hamburger-two span:nth-of-type(1) {
  top:0px;
  left:auto;
  right:15%;
}

#hamburger-two span:nth-of-type(2) {
  top:14px;
}

#hamburger-two span:nth-of-type(2):before {
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:0;
  background:#8b8b8b;
  width:100%;
  height:100%;
}

#hamburger-two span:nth-of-type(3) {
  top:28px;
  left:15%;
}

#hamburger-two.active:before {
  background:#efefef;
}

#hamburger-two.active span:nth-of-type(1),#hamburger-two.active span:nth-of-type(3){
  width:0%;
}

#hamburger-two.active span:nth-of-type(2) {
  transform:rotate(45deg);
  background:#0986bf;
}

#hamburger-two.active span:nth-of-type(2):before {
  transform:rotate(90deg);
  background:#0986bf;
}

/* Grid One */

#grid-one {
  height:70px;
}

#grid-one span {
  display:block;
  position:absolute;
  width:20px;
  height:20px;
  top:50%;
  left:50%;
  margin:-10px 0 0 -10px;
  background:#8b8b8b;
  box-shadow:
    -25px -25px 0 #8b8b8b,
    -25px 0 0 #8b8b8b,
    -25px 25px 0 #8b8b8b,
    0 -25px 0 #8b8b8b,
    0 25px 0 #8b8b8b,
    25px -25px 0 #8b8b8b,
    25px 0 0 #8b8b8b,
    25px 25px 0 #8b8b8b
  ;
}

#grid-one:hover span {
  box-shadow:
    -26px -26px 0 #8b8b8b,
    -26px 0 0 #8b8b8b,
    -26px 26px 0 #8b8b8b,
    0 -26px 0 #8b8b8b,
    0 26px 0 #8b8b8b,
    26px -26px 0 #8b8b8b,
    26px 0 0 #8b8b8b,
    26px 26px 0 #8b8b8b
  ;
}

#grid-one span:before {
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:#8b8b8b;
}

#grid-one.active span {
  box-shadow: 0 0 0 #8b8b8b;
  width:100%;
  height:8px;
  left:0%;
  margin:-4px 0 0 0px;
  transform:rotate(45deg);
  background:#0986bf;
}

#grid-one.active span:before {
  transform:rotate(90deg);
  background:#0986bf;
}