/* CSS Document */
/* Mobile First */





/* ......... S H A R E   B A R  ...............*/


/* Contaiuner */
ul.ShareBar {
	position: fixed;
	display: flex;
	overflow: hidden;
	justify-content: center;
	list-style: none;
	padding: 0;
	background-color: rgba(100, 99, 94, 0.95);
	margin-bottom: 0;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	width: 100vw;
	z-index: 100;
	left: 0;
	bottom: 0;
	}

	@media (min-width: 600px) {
		ul.ShareBar {
			flex-wrap: nowrap;
			}
			}
	@media (min-width: 1600px) {
		ul.ShareBar {
			position: relative;
			width: auto;
			flex-wrap: wrap;
			border-radius: 1em;
			justify-content: flex-start;
			margin-bottom: 2em;
			}
			}	


/* Tiles */ 	
ul.ShareBar li{
	display: block;
	width: 12.5%;
	width: 25%;
	min-width: 3.25em;
	text-align: center;
	margin-bottom: 0;
	}
	@media (min-width: 600px) {
		ul.ShareBar li{
			display: block;
			width: 100%;
			max-width: 10em;
			}
			}
	@media (min-width: 1600px) {
		ul.ShareBar li{
			width: 50%;
			max-width: initial;
			}
			}			
	@media (min-width: 1800px) {
		ul.ShareBar li{
			width: 33.333%;
			}
			}
	@media (min-width: 1900px) {
		ul.ShareBar li{
			width: 25%;
			}
			}		
							
/* URL */
ul.ShareBar li a{
	display: block;
	height: 100%;
	position: relative;
	font-size: .75em;
	line-height: 1.2em;
	padding-top: 3.5em;
	padding-bottom: 1em;
	color: white;
	}
	
	@media (min-width: 600px) and (min-height: 500px) {
		ul.ShareBar li a{
			font-size: .7em;
			padding-top: 3em;
			padding-bottom: .5em;
			}
			}
	@media (min-width: 1600px) {
		ul.ShareBar li a{
			padding-top: 6em;
			padding-bottom: 3em;
			padding-left: .5em;
			padding-right: .5em;
			font-size: .9em;
			}
			}

/* show/hide custom icon */
ul.ShareBar li a span{
	display: none;
	}
	@media (min-width: 600px) and (min-height: 500px){
		ul.ShareBar li a span{
			display: inline;
			}
			}

/* icon */	
	
ul.ShareBar li a:before {
	content: "";
	position: absolute;
	display: block;
	top: 1em;
	left: 50%;
	margin-left: -1em;
	width: 2em;
	height: 2.1em; /* better cropping*/
	background-image: url(../AFY/images/skin/share_empty.svg);
	filter: saturate(0) brightness(10);
	background-repeat: no-repeat;
	opacity: 0.65;
	}
	@media (min-width: 600px) and (min-height: 500px) {
		ul.ShareBar li a:before {
			top: .75em;
			width: 1.75em;
			height: 1.85em;  /* better cropping*/
			}	
			}	
	@media (min-width: 1600px) {
		ul.ShareBar li a:before {
			top: 3em;
			width: 2em;
			height: 2.1em;  /* better cropping*/
			}
			}




	
/* hover */


ul.ShareBar li a:hover{
	color: white;
	background-color: #d43287;
	}
	ul.ShareBar li a:hover::before{
		filter: saturate(0) brightness(10);
		opacity: 1;
		}





/* Lable */

ul.ShareBar li a:after {
	display: none;
	}
	@media (min-width: 350px) and (min-height: 500px){
		ul.ShareBar li a:after {
			display: block;
			width: calc(100% - .5em);
			margin-left: .25em;
			}
			}
			

			
			
/* Share */
	
ul.ShareBar li.ShareIcon a:before {
	background-image: url(../AFY/images/skin/share.svg); 
	}
	ul.ShareBar li.ShareIcon a:after {
		content: "Partager"; 
		}		
		.EN ul.ShareBar li.ShareIcon a:after {
			content: "Share"; 
			}
			
			
			

/* Volunteer */

ul.ShareBar li.JoinIcon a:before {
	background-image: url(../AFY/images/skin/share_join.svg); 
	}
	ul.ShareBar li.JoinIcon a:after {
		content: "Joindre l’équipe des bénévoles"; 
		}		
		.EN ul.ShareBar li.JoinIcon a:after {
			content: "Join the Volunteer Team"; 
			}


		
/* Facebook */
	
ul.ShareBar li.FacebookIcon a:before {
	background-image: url(../AFY/images/skin/share_facebook.svg); 
	}
	ul.ShareBar li.FacebookIcon a:after {
		content: "Retrouver sur Facebook"; 
		}		
		.EN ul.ShareBar li.FacebookIcon a:after {
			content: "View on Facebook"; 
			}
	
	

/* Facebook Event */
	
ul.ShareBar li.FacebookEventIcon a:before {
	background-image: url(../AFY/images/skin/share_facebook.svg); 
	}
	ul.ShareBar li.FacebookEventIcon a:after {
		content: "Événement Facebook"; 
		}		
		.EN ul.ShareBar li.FacebookEventIcon a:after {
			content: "View Facebook event"; 
			}
		
	
/* Twitter */	
	
ul.ShareBar li.TwitterIcon a:before {
	background-image: url(../AFY/images/skin/share_twitter.svg); 
	}
	ul.ShareBar li.TwitterIcon a:after {
		content: "Suivre sur Twitter"; 
		}		
		.EN ul.ShareBar li.TwitterIcon a:after {
			content: "Follow on Twitter"; 
			}	
	

/* More Info */	
	
ul.ShareBar li.MoreIcon a:before {
	background-image: url(../AFY/images/skin/share_more.svg); 
	}
	ul.ShareBar li.MoreIcon a:after {
		content: "En savoir +"; 
		}		
		.EN ul.ShareBar li.MoreIcon a:after {
			content: "Learn More"; 
			}	
	
	
/* Custom */	
	
ul.ShareBar li.CalendarIcon a:before {
	background-image: url(../AFY/images/skin/share_calendar.svg); 
	}
	ul.ShareBar li.CalendarIcon a:after {
		content: "Voir au Calendrier"; 
		}		
		.EN ul.ShareBar li.CalendarIcon a:after {
			content: "View this event"; 
			}