/*Footer*/

footer {
  text-align: center;
  padding: 3px;
  background-color: #444;
  color: white;
}

* {
  box-sizing: border-box;
}

.footer-left {
  padding: 20px;
  float: left;
  width: 20%;
  text-align: center;
  /* The width is 20%, by default */
}

/*.footer-left a:link {
  color: antiquewhite;
  text-decoration: none;
}

.footer-left a:visited {
  color: antiquewhite;
  text-decoration: none;
}*/

.footer-left a:hover {
  color: #74ebd5;
  text-decoration: none;
}

.footer-left a:active {
  color: brown;
  text-decoration: none;
}

.footer-main {
  padding: 20px;
  float: left;
  width: 50%;
  text-align: center;
  /* The width is 60%, by default */
}

.footer-main a:link {
  text-decoration: none;
}

/*.footer-main a:visited {
  color: antiquewhite;
  text-decoration: none;
}*/

.footer-main a:hover {
  color: #74ebd5;
  text-decoration: none;
}

.footer-main a:active {
  /*color: brown;*/
  text-decoration: none;
}

.footer-main2 {
  padding: 20px;
  float: left;
  width: 10%;
  text-align: center;
  /* The width is 60%, by default */
}

/*.footer-main2 a:link {
  text-decoration: none;
}*/

/*.footer-main2 a:visited {
  color: antiquewhite;
  text-decoration: none;
}*/

.footer-main2 a:hover {
  color: #74ebd5;
  text-decoration: none;
}

.footer-main2 a:active {
  color: brown;
  text-decoration: none;
}

.footer-right {
  padding: 20px;
  float: left;
  width: 20%;
  text-align: center;
  /* The width is 20%, by default */
}

.footer-right a:link {
  text-decoration: none;
}

.footer-right a:visited {
  color: antiquewhite;
  text-decoration: none;
}

.footer-right a:hover {
  color: aliceblue;
  text-decoration: none;
}

.footer-right-facebook a:hover {
  color: #3b5998;
  text-decoration: none;
}

.footer-right-youtube a:hover {
  color: #ff0000;
  text-decoration: none;
}

.footer-right-twitter a:hover {
  color: #00acee;
  text-decoration: none;
}

.footer-right a:active {
  color: brown;
  text-decoration: underline;
}

.footer-menu {
  background-color: #555;
  padding: 20px;
  float: right;
  width: 100%;
  text-align: right;
  padding-left: 100px;
  /* The width is 20%, by default */
}

/*.footer-menu a:link {
  color: #ccc;
  text-decoration: none;
}

.footer-menu a:visited {
  /*color: #00acee;*
  text-decoration: none;
}*/

.footer-menu a:hover {
  color: #00acee;
  text-decoration: none;
}

.footer-right a:active {
  color: brown;
  text-decoration: underline;
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
  .footer-left,
  .footer-main,
  .footer-main2,
  .footer-right {
    width: 100%;
    /* The width is 100%, when the viewport is 800px or smaller */
  }
}

/*End of Footer */