/**********The HTML**********/
    <div id="hallows"></div>
    <div id="hallows2"></div>
    <div id="hallhov"></div>
    <div id="hallback"></div>

/**********The CSS**********/
#hallows {
  position: relative !important;
  top: 210px !important;
  left: 600px !important;
}
#hallows2 {
  top: 150px !important;
  left: 600px !important;
}
#hallhov {
  position: relative !important;
  top: 155px !important;
  left: 583px !important;
  width: 66px !important;
  height: 60px !important;
  background: rgba(0,0,0,0) !important;
}
#hallows, #hallows2 {
  z-index: 1001 !important;
}
#hallhov {
  z-index: 2001 !important;
  }
#hallback {
  position: relative !important;
  top: 25px !important;
  left: 510px !important;
  width: 192px !important;
  height: 174px !important;
  background: url("http://26.media.tumblr.com/tumblr_lvwrjmDfzN1qlzdwqo1_250.jpg") no-repeat !important;
  background-size: 192px 174px !important;
  z-index: 1 !important;
  border-radius: 20px !important;
  border: double 10px #1C3635 !important;
  opacity: .5 !important;
}
#container {
  padding-top: 35px !important;
}

/*CENTER CIRCLE*/
#hallows {
  width: 25px !important;
  height:25px !important;
  background: rgba(0,0,0,0) !important;
  -moz-border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
  margin-top: -60px !important;
  border-radius: 20px !important;
  border: solid 4px gold !important;
}

/*CENTER VERTICAL BAR*/
#hallows:before {
  position: absolute !important;
  content:"" !important;
  width: 4px !important;
  height:50px !important;
  background: gold !important;
  margin-left: 10px !important;
  margin-top: -20px !important;
}

/*BOTTOM BAR*/
#hallows:after {
  position: absolute !important;
  content:"" !important;
  width: 66px !important;
  height:25px !important;
  border-bottom: solid 4px gold !important;
  margin-left: -21px !important;
  margin-top: 4px !important;
}

/*LEFT DIAGONAL BAR*/
#hallows2 {
   position: absolute !important;
  content:"" !important;
  width: 62.5px !important;
  height:50px !important;
  border-top: solid 4px gold !important;
  margin-left: -.5px !important;
  margin-top: 0px !important;
  -o-transform: rotate(-60deg) !important;
  -moz-transform: rotate(-60deg) !important;
  -webkit-transform: rotate(-60deg) !important;
}

/*RIGHT DIAGONAL BAR*/
#hallows2:before {
   position: absolute !important;
  content:"" !important;
  width: 50px !important;
  height:64px !important;
  border-right: solid 4px gold !important;
  margin-left: -3.25px !important;
  margin-top: -19px !important;
  -o-transform: rotate(30deg) !important;
  -moz-transform: rotate(30deg) !important;
  -webkit-transform: rotate(30deg) !important;
}

/*HOVER EFFECTS*/
 #hallhov:before  {
  width: 0px !important;
  position: absolute !important;
  content:"" !important;
  border-right: solid 37px transparent !important;
  border-bottom: solid 64px rgba(0,0,0,.85) !important;
  border-left: solid 37px transparent !important;
  margin-top: -3px !important;
  margin-left: -3px !important;
}

#hallback:hover {
  opacity: 1.0 !important;
}
#hallhov:hover:before {
    border-bottom: solid 60px rgba(0,0,0,0) !important;
}

/*TRANSITION EFFECTS*/
#hallback,  #hallhov:before {
  -moz-transition: ease-in 1.0s !important;
  -webkit-transition:all 1.0s ease-out !important;
}
#hallback:hover, #hallhov:hover:before {
  -moz-transition: ease-out .5s !important;
  -webkit-transition: all .5s ease-out !important;
}