* {    margin: 0;
  padding: 0;}

body   {  background:#000;}

.bg {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: .25s;
  pointer-events: none;
}

.title {
  color:#fff;
  text-align:center;
  font-size:9em;
  font-family: 'Zeyada', cursive;
  line-height:.7em;
  padding-top:7%;
}

li {
  list-style:none;
 }

li a
    { display:block;
      float:left;
      width:15%;
      padding:25px 0;
      text-align:center;
      font-family: 'Alegreya Sans SC', sans-serif;
      font-size:1.5em;
      color:#fff;
      text-decoration:none;
      transition:.25s;}

.menu
    {  width:100%;
       margin:60px auto 0 auto;
       overflow:hidden;}
       
.menu li:first-child a {  background:rgba(0,0,0,0) !important;}
.menu li:nth-child(2) a {  background:rgba(0,0,0,0) !important;}
.menu li:nth-child(3) a {  background:rgba(0,0,0,0) !important;}
.menu li:nth-child(4) a {  background:rgba(0,0,0,0) !important;}
.menu li:nth-child(5) a {  background:rgba(0,0,0,0) !important;}

.menu li:first-child:hover ~ .bg {
  background: #7f0000;
}
.menu li:nth-child(2):hover ~ .bg {
  background: #0FAF97;
}
.menu li:nth-child(3):hover ~ .bg {
  background: #0e5442;
}
.menu li:nth-child(4):hover ~ .bg {
  background: #440044;
}
.menu li:nth-child(5):hover ~ .bg {
  background: #c5a689;
}

.social {
    padding: 4% 0;
}
.social img {
	width:42px;
	-webkit-filter: invert(1);
    filter: invert(1);
    padding:2%;
}