/* social_share.css
             _                           _ 
            | |                         | |
__  ________| | _____  _ __ ___    _ __ | |
\ \/ /______| |/ / _ \| '_ ` _ \  | '_ \| |
 >  <       |   < (_) | | | | | |_| |_) | |
/_/\_\      |_|\_\___/|_| |_| |_(_) .__/|_|
                                  | |      
                                  |_|      
*/

/* ==========================================================================
   share buttons
   ========================================================================== */

   .share, .share:before, .share:after, .fab {
	height: 44px;
	width: 44px;
	border-radius: 50%;
	position: absolute;
	cursor: pointer;
   }
    .share a {
	display: inline-block;
	height: 44px;
	width: 44px;
   }
   .share-wrapper {
    position: fixed;
    right: 70px;
    bottom: 70px;
	}
   .share:before, .share:after {
	content: '';
	will-change: transform;
   }
   .share:before {
	background: url(../img/sm_icons/share_icon.svg) center center no-repeat;
	z-index: 5;
	transition: 0.2s;
   }
   .share:after {
	background: #0FD2FF;
	z-index: -1;
	transition: 0.4s;
	top: 50%;
	left: 53%;
	transform: translate(-50%, -50%);
	opacity: 0.5;
   }
   .share:hover:after {
	opacity: 1;
	background: #0fd2ff;
   }
   .share.active:before {
	background: url(../img/sm_icons/share_icon_close.svg) center center no-repeat;
	transform: rotate(-450deg);
	transition-timing-function: ease-in-out;
   }
   .fab {
	box-shadow: 0 15px 25px rgba(0, 0, 0, .15);
	transition: all .2s ease-in-out;
	opacity: 0;
	display: none;
	visibility: hidden;
	will-change: animation;
   }
   .fab:hover {
	box-shadow: none;
   }
   .fab a {
	   margin-left: -5px;
   }
   .socialVisible, .socialHidden {
	transition: .4s;
   }
	.socialVisible{
	opacity: 1;
	transform: translateX(0);
	}
	.socialHidden {
	transform: translateX(70px);
	}


	/* sm_icons
   ========================================================================== */

    /* icon copy link */
   .fab:nth-child(1) {
	background: #ffffff url(../img/sm_icons/copy_link_icon.svg) center center no-repeat;
	top: -116px;
   }
   /* icon messenger - wylaczona */
   .fab:nth-child(2) {
	background: #ffffff url(../img/sm_icons/messenger_icon.svg) center center no-repeat;
	top: -116px;
   }
   /* icon whatsapp */
   .fab:nth-child(3) {
	background: #ffffff url(../img/sm_icons/whatsapp_icon.svg) center center no-repeat;
	top: -58px;
   }
   /* icon facebook */
   .fab:nth-child(4) {
	background: #ffffff url(../img/sm_icons/facebook_icon.svg) center center no-repeat;
   }


   /* icon copy link:hover */
   .fab:nth-child(1):hover {
	background: #646464 url(../img/sm_icons/copy_link_icon_hover.svg) center center no-repeat;
   }
   /* icon messenger:hover */
   .fab:nth-child(2):hover {
	background: #0084ff url(../img/sm_icons/messenger_icon_hover.svg) center center no-repeat;
   }
   /* icon whatsapp:hover */
   .fab:nth-child(3):hover {
	background: #25d366 url(../img/sm_icons/whatsapp_icon_hover.svg) center center no-repeat;
   }
   /* icon facebook:hover */
   .fab:nth-child(4):hover {
	background: #3b5998 url(../img/sm_icons/facebook_icon_hover.svg) center center no-repeat;
   }


	.fab:nth-child(1):active, .fab:nth-child(2):active, .fab:nth-child(3):active, .fab:nth-child(4):active {
		transition: .1s;
	}
	.fab:nth-child(1):focus, .fab:nth-child(2):focus, .fab:nth-child(3):focus, .fab:nth-child(4):focus {
		outline: none;
	}
    
	/* icon copy link:hover */
   .fab:nth-child(1):active {
	background: #FFF url(../img/sm_icons/copy_link_icon.svg) center center no-repeat;
   }
   /* icon messenger:hover */
   .fab:nth-child(2):active {
	background: #FFF url(../img/sm_icons/messenger_icon.svg) center center no-repeat;
   }
   /* icon whatsapp:hover */
   .fab:nth-child(3):active {
	background: #FFF url(../img/sm_icons/whatsapp_icon.svg) center center no-repeat;
   }
   /* icon facebook:hover */
   .fab:nth-child(4):active {
	background: #FFF url(../img/sm_icons/facebook_icon.svg) center center no-repeat;
   }
   
   .fab.active {
	display: block;
	visibility: visible;
	animation: .4s up forwards;
   }
   .fab.active:nth-child(1) {
	animation-delay: 0.26s;
   }
   .fab.active:nth-child(2) {
	animation-delay: 0.13333s;
   }
   .fab.active:nth-child(3) {
	animation-delay: 0.066s;
   }
   .fab.no {
	animation: none;
   }

	/* animation sm_icons going up */
	@keyframes up {
		50% {
			transform: translateY(-250%);
		}
		100% {
			opacity: 1;
			transform: translateY(-130%);
		}
		}
		@keyframes down {
		0% {
			opacity: 1;
			transform: translateY(-130%);
		}
		100% {
			opacity: 0;
			transform: translateY(0);
			top: 0;
		}
	}

	/* tooltips
	========================================================================== */

	.label {
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.label-text {
	margin-left: 0.5em;
	}
	.tooltip-toggle {
	cursor: pointer;
	position: relative;
	}
	.tooltip-toggle svg {
	height: 18px;
	width: 18px;
	}
	/*tooltip body */
	.tooltip-toggle::before {
	position: absolute;
	top: 12px;
	right: 50px;
	background-color: #000;
	border-radius: 30px;
	color: #fff;
	content: attr(aria-label);
	padding: 2px;
	text-transform: none;
	width: 80px;
	}
	/* arrow body */
	.tooltip-toggle::after {
	position: absolute;
	top: 20px;
	left: -5px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #2b222a;
	content: " ";
	font-size: 0;
	line-height: 0;
	margin-left: -6px;
	width: 0;
	transform: rotate(-90deg);
	}
	/* tooltip text */
	.tooltip-toggle::before, .tooltip-toggle::after {
	color: #efefef;
	font-family: inherit;
	font-size: 12px;
	opacity: 0;
	pointer-events: none;
	text-align: center;
	font-weight: 400;
	}
	.tooltip-toggle:focus::before, .tooltip-toggle:focus::after, .tooltip-toggle:hover::before, .tooltip-toggle:hover::after {
	opacity: 1;
	transition: all 0.2s;
	}

	/* usuń outline globalnie ze wszystkich elementów */
	* {
		outline: none;
		outline: 0;
	}

	.btn-copy-copied:before {
		color: #0FD2FF;
		font-weight: 400;
	}