#topbox{
  background-color:black;
  position:absolute;
  top:0%;
  left:0%;
  width:100%;
  height:100px;
  z-index:0;
}
#topgradient{
  position:absolute;
  top:100px;
  left:0%;
  width:100%;
  height:35px;
  z-index:0;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
#bottombox{
  background-color:black;
  position:relative;
  background-image:url("../images/top1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  left:0%;
  width:100%;
  height:350px;
  z-index:0;
}
#bottomgradient{
  position:relative;
  left:0%;
  width:100%;
  height:60px;
  z-index:0;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
#id_menubox{
  z-index:100;
  background:#7f7f7f;
  background:rgba(255,255,255,0);
}
#id_logobox{
  z-index:100;
}
#id_right1{
  z-index:100;
  background:#7f7f7f;
  background:rgba(255,255,255,0);
}
#id_info1{
  z-index:100;
  background:#7f7f7f;
  background:rgba(255,255,255,0);
}
#id_info2{
  z-index:100;
  background:#7f7f7f;
  background:rgba(255,255,255,0);
}
#id_info3{
  z-index:100;
  background:#7f7f7f;
  background:rgba(255,255,255,0);
}
#id_columns{
  z-index:100;
}
#id_bottom_columns{
  z-index:100;
  background:#7f7f7f;
  background:rgba(255,255,255,0);
}
#id_bottom_wrap{
  z-index:100;
  background:#7f7f7f;
  background:rgba(255,255,255,0);
}
/*Name card rotate*/
/* .NameCard {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: all 0.5s linear;
}
.NameCardContainer {
  position: relative;
  z-index: 1;
  perspective: 500;
  -webkit-perspective: 500;
} */
#nameCardContainer1:hover #nameCard1 {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
#nameCardContainer2:hover #nameCard2 {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
#nameCardContainer3:hover #nameCard3 {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
#nameCardContainer4:hover #nameCard4 {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
#nameCardContainer5:hover #nameCard5 {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
#nameCardContainer6:hover #nameCard6 {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
#nameCardContainer7:hover #nameCard7 {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
#nameCardContainer8:hover #nameCard8 {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
#nameCardContainer9:hover #nameCard9 {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
#nameCardContainer10:hover #nameCard10{
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}

/* Chrome, Safari, Opera */
.front{ 
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; 
}
.back{
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden;
  transform: rotateY(180deg);
  position: absolute;
  top: 0%;
  display: block;
  box-sizing: border-box;
  color: white;
  text-align: center;
  background-color: #fff;
  width: 100%;
}

a:hover{
  text-decoration: underline;
}