@import url(variables.css);

footer{
    width: 100%;
    height: auto;
    background-color: var(--secondary-color);
    padding: 40px;
    color: whitesmoke;
  }
  .box{
    flex-basis: 30%;
  }
  .box a{
    color:  white;
    display: block;
    font-size: .8rem;
    font-weight: 400;
    
    padding: 5px;
  }
  .box a:hover{
    text-decoration: underline;
    color: whitesmoke;
  }
  #redes a{
    color: rgba(245, 245, 245, .7);
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 200;
    text-decoration: none;
    padding: 5px;
  }
  .box .fa:hover{
    color: whitesmoke;
  }
  .foot1{
    width: 100%;
    height: auto;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-evenly;
  }
  .box:nth-child(3){
    text-align: center;
  }
  .box i{
    margin: 5px;
  }
  .foot2{
    width: 100%;
    height: 40px;
    border-top: 1px solid whitesmoke;
    padding-top: 10px;
    text-align: center;
  }
  .foot2 .box i{
    display: inline-block;
    font-weight: 200;
    line-height: 30px;
    
  }
  .foot2 p{
    display: inline;
    font-weight: 200;
    line-height: 30px;
  }
  .box h4{
    font-size: 1.2rem ;
  }

@media screen and (max-width: 768px) {
    footer{
        padding: 10px;
      }
      .foot2{
        height: auto;
      }
      .foot2 p{
        display: block;
        margin: 0;
      }
      .foot2 .box i{
        display: none;        
      }
  }
  @media screen and (max-width: 480px) {
    .foot1{
        flex-direction: column;
      }
    .box{
        margin: 15px 0;
      }
  }