body{
  
    background: url('../img/fondo.jpg')
    no-repeat center center fixed;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
background-attachment: fixed;
height:100vh;

}



.img_menu{
border-radius:50%;
width:100%;
height:100%;

}

.wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}
.menu-btn {
  background: transparent;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
	transition: background .3s;
  z-index: 2;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, .3);
}
.menu-btn:hover,
.active {
  background: transparent;
}
.menu-btn, .icons-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition-delay: .1s;
}
.menu-btn span {
  display: block;
  width: 30px;
  height: 3px;
  background: #333;
  margin-bottom: 5px;
  transition: background .3s, transform .3s;
}
.menu-btn span:last-child {
  margin-bottom: 0;
}
.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.active span:nth-child(2) {
  opacity: 0;
}
.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -5px);
}

.icons {
  position: relative;
}
.icon {
  position: absolute;
  top: calc(50% - 35px);
  left: calc(50% - 35px);
  background: #272C2C;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  cursor: pointer;
  transform: translate(0px, 0px);
  z-index: 1;
}
.icon:hover {
  background: #272C2C;
}
.icon:hover .i {
  color: #F1D00B;
}
.i {
  margin: auto;
  color: #E3066D;
  font-size: 30px;
}
.icon:nth-child(1) {
  transition: background .3s, transform .3s .10s;
}
.icon:nth-child(2) {
  transition: background .3s, transform .3s .15s;
}
.icon:nth-child(3) {
  transition: background .3s, transform .3s .20s;
}
.icon:nth-child(4) {
  transition: background .3s, transform .3s .25s;
}
.icon:nth-child(5) {
  transition: background .3s, transform .3s .30s;
}
.icon:nth-child(6) {
  transition: background .3s, transform .3s .35s;
}
.icon:nth-child(7) {
  transition: background .3s, transform .3s .40s;
}
.icon:nth-child(8) {
  transition: background .3s, transform .3s .45s;
}

.showmenu:nth-child(1) {
  transform: translate(0px, -150px);
}
.showmenu:nth-child(2) {
  transform: translate(110px, -110px);
}
.showmenu:nth-child(3) {
  transform: translate(150px, 0px);
}
.showmenu:nth-child(4) {
  transform: translate(110px, 110px);
}
.showmenu:nth-child(5) {
  transform: translate(0px, 150px);
}
.showmenu:nth-child(6) {
  transform: translate(-110px, 110px);
}
.showmenu:nth-child(7) {
  transform: translate(-150px, 0px);
}
.showmenu:nth-child(8) {
  transform: translate(-110px, -110px);
}



/*Estilos Modal*/

.barra-modal{

  background:transparent;
border:0px;

}

.modal-content{
  background:rgb(0, 0, 0, 0.8);
}



input[type=text],
input[type=password]
{

    height:60px;
    width:100%;
    font-family:Sriracha;
    font-size:14px;
    font-weight:300;
    background:transparent;
    color: #fff;
    border:   1px solid #fff;
    text-align: center;
    margin-top:4px;
    border-radius:0px;
    border-left:0px;
    border-top:0px;
    border-right:0px;
    }

.titulo-modal{
color:#E3007b;
font-size:18px;

}


.btn-login{
  background:#E3007b;
color:#fff;
width:300px;
}

.btn-login:hover{
  background:#F1D00B;
  color:#000;
  width:300px;
  }



  .menu-login a{
font-size:18px;
color:#6A6A6A;
margin:20px;
  }

  .menu-login:hover a{
    font-size:18px;
    color:#E3007b;
    margin:20px;
  }