/* source : codepen.io/bh/pen/buHJd/ */

.social_icons { margin:0px;display:block;margin-top:5px;margin-bottom:10px;}
ul.social_icons {padding:0px!important;margin:0px!important;
    list-style-type: none!important;list-style-image:none!important;}
ul.social_icons  li {padding-left:0px!important;background-color:transparent;background-image:none;}
.icon {
    float: left;
    position: relative;
    height: 0;
		margin:0px;margin-right:0.5%;    
		display:block;
}

/* largeur et hauteur des icones */
.icon {width:7%;padding-bottom:7%;}
.icon:last-of-type {margin-right:0px;}
@media all and (max-width: 750px) {.icon { width:9%;padding-bottom:9%;}}
@media all and (max-width: 640px) {.icon { width:11.25%;padding-bottom:11.25%;}}

.social_icons.with_5_icons .icon {width:8%;padding-bottom:8%;}

.icon a {
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #FFC122;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        transition: all .2s ease-out;
				text-decoration:none;		
}
		
li.icon, .icon a {
border: 1px solid transparent;
border-radius:8px;
outline: 0;	
}

.icon a:hover {background-size:120%; transition: all .2s ease-out;}

.icon span.icon_name {
    display:none;position: absolute;opacity: 1.0;
    top:0%;
    background-color:#3b5998;
    color: #fff;font-size: 12px;text-align: center; white-space: nowrap; 
    padding-top:4px;padding-bottom:4px;padding-left:8px;padding-right:8px;
		color:#FFFFFF; 
		border-radius:4px;
		border: 1px solid transparent; /* IE bug */
		outline: 0;
		z-index:777!important;
	 text-shadow: 1px 1px 0.5px rgba(0,0,0,0.5);
	 margin-bottom:8px; /* identique a border-width de span.icon_name:after */
}

span.icon_name:after {
	top:100%;left:0px;
	border: solid transparent;
	content: " ";
	height: 0;width: 0;
	position: absolute;
	pointer-events: none;z-index:775!important;
	border-top-color: #3b5998;
	border-width: 8px;
	margin-left: -8px;
}




/*------------------Icones----------------------------------*/
.icon_facebook a {background-image: url('/images/social_icons/facebook-64.png');}
.icon_facebook a, .icon_facebook span.icon_name {background-color:#3b5998;}
.icon_facebook span.icon_name:after {border-top-color: #3b5998;}

.icon_twitter a {background-image: url('/images/social_icons/twitter-64.png');}
.icon_twitter a, .icon_twitter span.icon_name {background-color:#00aced;}
.icon_twitter span.icon_name:after {border-top-color: #00aced;}

.icon_linkedin a {background-image: url('/images/social_icons/linkedin-64.png');}
.icon_linkedin a, .icon_linkedin span.icon_name {background-color: #0076B4;}
.icon_linkedin span.icon_name:after {border-top-color: #0076B4;}

.icon_instagram a {background-image: url('/images/social_icons/instagram-64.png');}
.icon_instagram a, .icon_instagram span.icon_name {background-color: #5c3d2e;}
.icon_instagram span.icon_name:after {border-top-color: #5c3d2e;}

.icon_googleplus a {background-image: url('/images/social_icons/googleplus-64.png');}
.icon_googleplus a, .icon_googleplus span.icon_name {background-color: #FC5345;}
.icon_googleplus span.icon_name:after {border-top-color: #FC5345;}

.icon_reddit a {background-image: url('/images/social_icons/reddit-64.png');}
.icon_reddit a, .icon_reddit span.icon_name {background-color: #5F99CF;}
.icon_reddit span.icon_name:after {border-top-color: #5F99CF;}

.icon_stumbleupon a {background-image: url('/images/social_icons/stumbleupon-64.png');}
.icon_stumbleupon a, .icon_stumbleupon span.icon_name {background-color: #EF6632;}
.icon_stumbleupon span.icon_name:after {border-top-color: #EF6632;}

.icon_pocket a {background-image: url('/images/social_icons/pocket-64.png');}
.icon_pocket a, .icon_pocket span.icon_name {background-color: #EF4056;}
.icon_pocket span.icon_name:after {border-top-color: #EF4056;}

.icon_pinterest a {background-image: url('/images/social_icons/pinterest-64.png');}
.icon_pinterest a, .icon_pinterest span.icon_name {background-color:#CB2129;}
.icon_pinterest span.icon_name:after {border-top-color: #CB2129;}

.icon_email a {background-image: url('/images/social_icons/email-64.png');}
.icon_email a, .icon_email span.icon_name {background-color:#848484;}
.icon_email span.icon_name:after {border-top-color: #848484;}