/* Style all font awesome icons */
.fa {
  padding: 10px;
  margin-bottom: 16px; 
  font-size: 22px !important;
  width: 42px;
  display: inline-block;
  height: 42px;
  text-align: center;
  text-decoration: none;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

.share-button img {
  padding-bottom: 16px;
}

/*positioning sharing section*/
.social-section {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top:50px;
  z-index: 1000;
  width: 0;
  height: 0;
  /* full page, minus bb default margin, minus 50 px*/
  margin-left: calc((100% - 1100px)/2 - 100px);
}

.social-section div {
  margin-top: 81px;
  position: absolute;
}

.hidden-block {
    display: none;
}

/* mobile sharing position */

@media (max-width: 1300px) {
	.social-section {
	  top: -6px;
	  width: 100px;
	  height: 30px;
	  margin: 0;
	  float: right;
	  opacity: 0.7;
	}
	.social-section div {
		margin-top: 18px;
	}
	.fa:hover{
	  animation-name: none !important;
	-moz-animation-name: none !important;
	}
	
}

@media (max-width: 768px) {
	
	.social-section {
	  top: -75px;
	}
	.social-section div {
      margin-top: 87px;
	}
	.hidden-block {
	    height:78px;
		display: block;
	}
}



/* Add a hover effect */
.fa:hover {
  opacity: 0.7;
  text-decoration: none;
  cursor: pointer;
  animation-name: bounce;
  -moz-animation-name: bounce;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
} 

/* Bounce effect */
@keyframes bounce {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateX(0);
		-ms-transform:     translateX(0);
		transform:         translateX(0)
	}
	40% {
		-webkit-transform: translateX(30px);
		-ms-transform:     translateX(30px);
		transform:         translateX(30px)
	}
	60% {
		-webkit-transform: translateX(15px);
		-ms-transform:     translateX(15px);
		transform:         translateX(15px)
	}
}