/*body {
  background: #222 url("http://25.media.tumblr.com/a408ad9af259cf827ed4599d60bcb0a9/tumblr_myebwtELvb1st5lhmo1_1280.jpg") no-repeat fixed center;
  background-size: cover;
  overflow: hidden;
}*/

.social {
  position: relative;
  width: 100%;
  top: 50%;
  text-align: center;

}
/*
.social .link {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px dashed white;
  background-clip: content-box;
  padding: 10px;
  transition: .5s;
  color: #D7D0BE;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 70px;
}

.social .link span {
  display: block;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.social .link:hover {
  padding: 20px;
  color: white;
  margin-left: -5px;
  transform: translateX(10px) rotate(360deg);
}

.social .link.google-plus {
  background-color: tomato;
  color: white;
}

.social .link.twitter {
  background-color: #00ACEE;
  color: white;
}

.social .link.facebook {
  background-color: #3B5998;
  color: white;
}*/


.social-content {
  width: 100%;
  display: table;
  margin: 0;
}

.social nav a {
  display: table-cell;
  color: white;
  width: 14.2%;
  text-align: center;
  font-size: 2em;
  padding:.5em;
}

.social nav a:first-child{
  border-radius: 5px 0 0 5px;
}
.social nav a:last-child{
  border-radius: 0px 5px 5px 0px;
}

.social .unique nav a{
  border-radius: 5px 5px 5px 5px;
}


/*
Here's a handy list of social media colors: http://goo.gl/7uo5TR 
*/






/* 
Setting equal widths dependent on the number of links.
Add or remove as many as necessary.
*/


/* one item */

.social nav a:first-child:nth-last-child(1) {
  width: 100%;
}


/* two items */

.social nav a:first-child:nth-last-child(2),
.social nav a:first-child:nth-last-child(2) ~ a {
  width: 50%;
}


/* three items */

.social nav a:first-child:nth-last-child(3),
.social nav a:first-child:nth-last-child(3) ~ a {
  width: 33.3333%;
}



/*
Assigning link background colors and setting the hover and active states. For quick adding of buttons, perform a search + replace on the 2 letter variable name.
*/

nav a.demo {
  background: #ffd42a;
  text-shadow: 1px 1px 0px darkgrey;
}

nav a.demo:hover {
    color: #ffd42a !important;
    background: white ;
  }
  
nav a.demo:active {
    color: #ffd42a ;
    background: #ffd42a ;
  }

nav a.fb {
  background: #3B5998;
  text-shadow: 1px 1px 0px darkgrey;
}

nav a.fb:hover {
    color: #3B5998 !important;
    background: white ;
  }
  
nav a.fb:active {
    color: #3B5998 ;
    background: #3B5998 ;
  }

.social nav a.tw {
  background: #55ACEE;
  text-shadow: 1px 1px 0px darkgrey;
}

.social nav a.tw:hover{
  color: #55ACEE !important;
  background: white;
}

.social nav a.tw:active{
  color: #55ACEE;
    background: #55ACEE;
}

.social nav a.gp {
  background: #DD4B39;
  text-shadow: 1px 1px 0px darkgrey;
}

.social nav a.gp:hover{
  color: #DD4B39 !important;
    background: white;
}

.social nav a.gp:active{
  color: #DD4B39;
    background: #DD4B39;
}

@media (max-width: 768px) {
  .social nav a{
    font-size: 1.5em;
  }
}