*{
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
}
.menu {
  display: flex;
  color: rgb(0, 0, 0)!important;
 
}
.menu a span:first-child {
  display: inline-block;
  padding: 45px;
}
.menu a {
  display: block;
  position: relative;
  overflow: hidden;

}
 
.menu a span:last-child {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%);
}
.menu a span {
  transition: transform 0.2s ease-out;
  color: rgb(0, 0, 0);
}
 
.menu a:hover span:first-child {
  transform: translateY(100%);
  color: rgb(0, 0, 0);
}
 
.menu a:hover span:last-child {
  transform: none;
   color: rgb(0, 0, 0);
}
.menu[data-animation="to-top"] a span:last-child {
  transform: translateY(100%);
}
 
.menu[data-animation="to-top"] a:hover span:first-child {
  transform: translateY(-100%);
}
 
.menu[data-animation="to-right"] a span:last-child {
  transform: translateX(-100%);
}
 
.menu[data-animation="to-right"] a:hover span:first-child {
  transform: translateX(100%);
}
 
.menu[data-animation="to-left"] a span:last-child {
  transform: translateX(100%);
}
 
.menu[data-animation="to-left"] a:hover span:first-child {
  transform: translateX(-100%);
}

body{
   background-color: rgb(248, 246, 246);
}
.fondo1{
  width: 30%;
  border-radius: 10%;
  -webkit-box-shadow: 3px 3px 7px black;
  -moz-box-shadow: 3px 3px 7px black;
  transition: 1s;
}
.fondo1:hover{
   width: 60%;
   border: #999;
}
.parrafo_inicio{
 padding: 30px;
}
hr{
   width: 70%;
   border-radius: 10%;
}
.parrafos_1{
  width: 80%;
  text-align: left;
}
.parrafos:hover{
  width: 45%;
  height: 300px;
  border: solid green 1px;
}
.fondo_principal{

position: absolute;
left: 0;
top: 0;
width: 100%;
height:auto;
z-index: -10;
visibility: visible;
max-width: 2500px;
max-height: 2500px;
}
.responsive{
  display: none;
}

.container{
  background-color:white;
  width: 80%;
  height: auto;
  box-shadow: 2px 2px 5px #999;
  border-radius: 2%;
}
@media only screen and (max-width:900px){
  .responsive{
             display: block;
  }
  .responsive2{
      display: none;
  }
  .container{
      background-color:white;
      width: 90%;
      height:auto;
      box-shadow: 2px 2px 5px #999;
      border-radius: 2%;
  }
  .parrafos_1{
      padding: 20px;
      width: 80%;
      text-align: left;
  }
  .fondo1{
      width: 80%;
      border-radius: 10%;
      -webkit-box-shadow: 3px 3px 7px black;
      -moz-box-shadow: 3px 3px 7px black;
      transition: 1s;
  }

.fondo_principal{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  z-index: -10;
  visibility: visible;
  max-width: 2500px;
  max-height: 2500px;
}
.menu {
  display: flex;
  color: rgb(0, 0, 0)!important;
 
}
.menu a span:first-child {
  display: inline-block;
  padding: 45px;
}
.menu a {
  display: block;
  position: relative;
  overflow: hidden;

}
 
.menu a span:last-child {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%);
}
.menu a span {
  transition: transform 0.2s ease-out;
  color: rgb(0, 0, 0);
}
 
.menu a:hover span:first-child {
  transform: translateY(100%);
  color: rgb(0, 0, 0);
}
 
.menu a:hover span:last-child {
  transform: none;
   color: rgb(0, 0, 0);
}
.menu[data-animation="to-top"] a span:last-child {
  transform: translateY(100%);
}
 
.menu[data-animation="to-top"] a:hover span:first-child {
  transform: translateY(-100%);
}
 
.menu[data-animation="to-right"] a span:last-child {
  transform: translateX(-100%);
}
 
.menu[data-animation="to-right"] a:hover span:first-child {
  transform: translateX(100%);
}
 
.menu[data-animation="to-left"] a span:last-child {
  transform: translateX(100%);
}
 
.menu[data-animation="to-left"] a:hover span:first-child {
  transform: translateX(-100%);
}
}