*{
  margin: 0;
  padding: 0;
  list-style: none;
}
body{
  display: flex;
  height: 410vh; /*Altura en la pagina en la que estan los botones*/
  height: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: black;
  background-image: url("../img/intro.jpg");
  background-size:     contain;    /* <------ */
  background-repeat:   no-repeat;
  background-position: center center;             
}
/*Background*/
html {
    height: 100%;
    margin: 0;
}


  .bg {
    /* The image used */
    /*background-image: url("../img/intro.jpg");*/
    /* Full height */
    height: 100%; 
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

.my-widget{
/*color: white;
background: black;
width: 300px;*/
position: relative;top: -10px; 
left: 29vw;
}


footer {
  position: absolute;
  bottom: 20px; /*Distancia desde abajo*/

}



a
  {
    color: #666;
  }
ul{
  display: flex;
}
ul li{
  position: relative;
  display: block;
  color: #666;
  font-size: 30px;
  height: 60px;
  width: 60px;
  background: #171515;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 60px; /*Separacion entre iconos*/
  cursor: pointer;
  transition: .5s;
}
ul li:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  /* background: #d35400; */
  border-radius: 50%;
  transform: scale(.9);
  z-index: -1;
  transition: .5s;
}
ul li:nth-child(1):before{
  background: #4267B2;
}
ul li:nth-child(2):before{
  background: #1DA1F2;
}
ul li:nth-child(3):before{
  background: #E1306C;
}
ul li:nth-child(4):before{
  background: #2867B2;
}
ul li:nth-child(5):before{
  background: #ff0000;
}
ul li:hover:before{
  filter: blur(3px);
  transform: scale(1.2);
  /* box-shadow: 0 0 15px #d35400; */
}
ul li:nth-child(1):hover:before{
  box-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover:before{
  box-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover:before{
  box-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover:before{
  box-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover:before{
  box-shadow: 0 0 15px #ff0000;
}
ul li:nth-child(6):hover:before{
  box-shadow: 0 0 15px #42FF00;
}
ul li:nth-child(1):hover{
  color: #456cba;
  box-shadow: 0 0 15px #4267B2;
  text-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover{
  color: #26a4f2;
  box-shadow: 0 0 15px #1DA1F2;
  text-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover{
  color: #e23670;
  box-shadow: 0 0 15px #E1306C;
  text-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover{
  color: #2a6cbb;
  box-shadow: 0 0 15px #2867B2;
  text-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #ff0000;
  text-shadow: 0 0 15px #ff0000;
}
ul li:nth-child(6):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #42FF00;
  text-shadow: 0 0 15px #42FF00;
}
/* ul li:hover{
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
} */



/**************************************Solo para pantallas hasta 768 de ancho********************/
@media only screen and (max-width: 768px) {
  body {
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
    background-image: url("../img/introPhone.jpg");
  }

  .my-widget {
    left: 10vw;
  }

  html  { 
    width: 100%;
    height: 100%;
   }
  ul li{
  position: relative;
  display: block;
  color: #666;
  font-size: 30px;
  height: 60px;
  width: 60px;
  background: #171515;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 5px; /*Separacion entre iconos*/
  cursor: pointer;
  transition: .5s;
}
}

/*Fin Background*/
/**************************************Fin Solo para pantallas hasta 768 de ancho********************/


/**************************************Solo para pantallas hasta 450 de ancho********************/
@media only screen and (max-width: 450px) {
  body {
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
    background-image: url("../img/introPhone.jpg");

  }
  html  { 
    width: 100%;
    height: 100%;
   }
  footer {
  position: absolute;
  bottom: 8px; /*Distancia desde abajo*/
}
 
  ul li{
  position: relative;
  display: block;
  color: #666;
  font-size: 20px;
  height: 40px;
  width: 40px;
  background: #171515;
  line-height: 40px;
  border-radius: 50%;
  margin: 0 15px; /*Separacion entre iconos*/
  cursor: pointer;
  transition: .5s;
}
}

/*Fin Background*/
/**************************************Fin Solo para pantallas hasta 768 de ancho********************/