/* Social Button Icon Styling */
/* Colors */
html, body {
  margin: 0;
  height: 100%;
}

.container {
  padding-top: 30px;
  min-height: 100%;
  text-align: center;
  background: #fffbd5;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #fffbd5, #b20a2c);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #fffbd5, #b20a2c);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.headline {
  text-align: center;
}
.headline h1 {
  font-size: 35px;
  font-family: Arial, Helvetica, sans-serif;
}

.social-buttons {
  display: inline-block;
  background: rgba(255, 255, 255, 0.5);
  padding: 20px;
  padding-bottom: 5px;
  border-radius: 10px;
  text-align: center;
  margin: 20px 10px;
  /* Helper class to divide the icons */
}
.social-buttons .social-margin {
  margin-right: 15px;
}
.social-buttons a,
.social-buttons a:hover,
.social-buttons a:focus,
.social-buttons a:active {
  text-decoration: none;
}
.social-buttons .social-icon {
  margin-bottom: 15px;
  box-sizing: border-box;
  -moz-border-radius: 138px;
  -webkit-border-radius: 138px;
  border-radius: 138px;
  border: 5px solid;
  text-align: center;
  width: 50px;
  height: 50px;
  display: inline-block;
  line-height: 1px;
  padding-top: 11px;
  transition: all 0.5s;
  /* Facebook Button Styling */
  /* Twitter Button Styling */
  /* Google+ Button Styling */
  /* Linkedin Button Styling */
  /* Pinterest Button Styling */
  /* Behance Button Styling */
  /* Github Button Styling */
  /* Youtube Button Styling */
  /* Soundcloud Button Styling */
}
.social-buttons .social-icon:hover {
  transform: rotate(360deg) scale(1.3);
}
.social-buttons .social-icon.facebook {
  font-size: 22px;
  padding-top: 9px;
  border-color: #3b5998;
  background-color: #3b5998;
  color: #ffffff;
}
.social-buttons .social-icon.facebook:hover {
  background-color: #ffffff;
  color: #3b5998;
}
.social-buttons .social-icon.twitter {
  font-size: 22px;
  padding-top: 10px;
  padding-left: 2px;
  border-color: #55acee;
  background-color: #55acee;
  color: #ffffff;
}
.social-buttons .social-icon.twitter:hover {
  background-color: #ffffff;
  color: #55acee;
}
.social-buttons .social-icon.google-plus {
  font-size: 22px;
  padding-top: 9px;
  padding-left: 2px;
  background-color: #dd4b39;
  color: #ffffff;
  border-color: #dd4b39;
}
.social-buttons .social-icon.google-plus:hover {
  background-color: #ffffff;
  color: #dd4b39;
}
.social-buttons .social-icon.linkedin {
  font-size: 24px;
  padding-top: 8px;
  padding-left: 1px;
  background-color: #0976b4;
  color: #ffffff;
  border-color: #0976b4;
}
.social-buttons .social-icon.linkedin:hover {
  background-color: #ffffff;
  color: #0976b4;
}
.social-buttons .social-icon.pinterest {
  font-size: 22px;
  padding-top: 9px;
  background-color: #cb2027;
  color: #ffffff;
  border-color: #cb2027;
}
.social-buttons .social-icon.pinterest:hover {
  background-color: #ffffff;
  color: #cb2027;
}
.social-buttons .social-icon.behance {
  font-size: 22px;
  padding-top: 9px;
  background-color: #1769ff;
  color: #ffffff;
  border-color: #1769ff;
}
.social-buttons .social-icon.behance:hover {
  background-color: #ffffff;
  color: #1769ff;
}
.social-buttons .social-icon.github {
  font-size: 22px;
  padding-top: 9px;
  background-color: #4183c4;
  color: #ffffff;
  border-color: #4183c4;
}
.social-buttons .social-icon.github:hover {
  background-color: #ffffff;
  color: #4183c4;
}
.social-buttons .social-icon.youtube {
  font-size: 22px;
  padding-top: 9px;
  padding-left: 0px;
  background-color: #bb0000;
  color: #ffffff;
  border-color: #bb0000;
}
.social-buttons .social-icon.youtube:hover {
  background-color: #ffffff;
  color: #bb0000;
}
.social-buttons .social-icon.soundcloud {
  font-size: 22px;
  padding-top: 9px;
  padding-left: 0px;
  background-color: #ff3a00;
  color: #ffffff;
  border-color: #ff3a00;
}
.social-buttons .social-icon.soundcloud:hover {
  background-color: #ffffff;
  color: #ff3a00;
}