@import "/templates/definitions";

.footer {
  margin-top: auto;
  background-color: @color-background-footer;
  display: flex;
  justify-content: center;

  &__logo{
    height: 60px;
  }
}

/* wrapper for columns*/
.footerWrapper{
  width: @mobileWidth;
  max-width: @max-bodyWidth ;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;

  .responsive-lg({
    width: 100%;
    max-width: @max-bodyWidth;
    flex-direction: row;
    justify-content: space-between;
  })
}

/* style the columns */
.column{
  padding: 20px;
  min-width: 200px;
  max-width: 350px;
  .responsive-lg({
    padding: 20px 40px;
    padding-top:40px;
    width: 28%;
  });

  & * {
    padding-bottom: 10px;
    .responsive-lg({
      padding-bottom: 20px;
    });
  }

  &__title{
    color: white;
  }

  &__footerText, &__copyright, &__links{
    color: white;
    a{
      transition: color 0.3s;
    }
    a:hover{
      color: rgba(255,255,255,0.5);
      opacity: 0.8;
    }
  }
	&__footerText {
		a {
			padding-bottom: 0;
		} 
	}	

  &__chartaLogo{
    padding-top: 1.5rem;
  }
}


/* Style all font awesome icons */
.fa {
  svg{
    padding: 5px;
    font-size: 50px;
    //height: 50px;
    text-align: center;
    text-decoration: none;
    background: white;
    border-radius: 2px;
    color: @color-background-footer;
  }

}

/* Add a hover effect if you want */
.fa:hover {
  svg{
    color: @color-secondary;
    opacity: 0.7;
  }
}