/*-----------------------------------------------------------------------------------*/
/*  Social Media Icons
/*-----------------------------------------------------------------------------------*/

.social-nav {
    ul {
	@extend .fa-ul;
	li {
	    display: inline-block;
	    border: 1px solid transparent;
	    border-radius: 50%;
	    a {
                background: $color-page-background;
                color: $color-text;
		overflow: hidden;
		display: inline-block;
		width: 25px;
		height: 25px;
		text-align: center;
		vertical-align: middle;
                border-radius: 50%;
	    }
	    :hover {
                    background: $color-text;
                    color: $color-page-background;                   
	    }
	}

	li {
	    a {
		@extend .fa-star;
		&::before {
		    @extend .fa;		    
                    @include px2rem($font-size-socialmedia-icon);
		    text-align: center;
		    vertical-align: middle;
                    padding-top: 1px;
		}


		&[href*="diaspora.com"] {
		//    @extend .fa-star-o;
                    background-color: #ccc;
                    border-color: #ccc;
                    color: white;
                }
                &[href*="diaspora.com"]:before {
                    @include px2rem($font-size-socialmedia-icon * 2, $font-size-base , $font-size-base * 2);
                    content: "*";
                    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
                    font-weight: bold;    
		}
                &[href*="diaspora.com"]:focus,
                &[href*="diaspora.com"]:hover {
                     background-color: darken(#ccc,10%);
                }
                
                &[href*="delicious.com"] {
		    @extend .fa-delicious;
                    background-color: #eeeeee;
                    border-color: #eeeeee;
                    color: white;
		}
                &[href*="delicious.com"]:focus,
                &[href*="delicious.com"]:hover {
                     background-color: darken(#eeeeee,10%);
                }
                
		&[href*="facebook.com"] {
		    @extend .fa-facebook;
                    background-color: #3b5998;
                    border-color: #3b5998;
                    color: white;
		}
                &[href*="facebook.com"]:focus,
                &[href*="facebook.com"]:hover {
                    background-color: darken(#3b5998,10%);
                }
                
		&[href*="feed"] {
		    @extend .fa-rss;
                    background-color: #ff8800;
                    border-color: #ff8800;
                    color: white;
		}
                 &[href*="feed"]:focus,
                &[href*="feed"]:hover {
                     background-color: darken(#ff8800,10%);
                }
		&[href*="flattr.com"] {
		    @extend .fa-refresh;
                    background-color: #5CB85C;
                    border-color: #5CB85C;
                    color: white;
		}
                &[href*="flattr.com"]:focus,
                &[href*="flattr.com"]:hover {
                     background-color: darken(#5CB85C,10%);
                }
		&[href*="flickr.com"] {
		    @extend .fa-flickr;
                    background-color: #ff0084;
                    border-color: #ff0084;
                    color: white;
		}
                &[href*="flickr.com"]:focus,
                &[href*="flickr.com"]:hover {
                    background-color: darken(#ff0084,10%);
                }
		&[href*="google.com"] {
		    @extend .fa-google;
                    background-color: #4285f4;
                    border-color: #4285f4;
                    color: white;
		}
                 &[href*="google.com"]:focus,
                &[href*="google.com"]:hover {
                    background-color: darken(#4285f4,10%);
                }
		
		
		&[href*="github.com"] {
		    @extend .fa-github;
                    background-color: #4078c0;
                    border-color: #4078c0;
                    color: white;
		}
                &[href*="github.com"]:focus,
                &[href*="github.com"]:hover {
                    background-color: darken(#4078c0,20%);
                }
		&[href*="instagram.com"] {
		    @extend .fa-instagram;
                    background-color: #c13584;
                    border-color: #c13584;
                    color: white;
		}
                &[href*="instagram.com"]:focus,
                &[href*="instagram.com"]:hover {
                     background-color: darken(#c13584,20%);
                }
		&[href*="linkedin.com"] {
		    @extend .fa-linkedin;
                    background-color: #0077b5;
                    border-color: #0077b5;
                    color: white;
		}
                &[href*="linkedin.com"]:focus,
                &[href*="linkedin.com"]:hover {
                    background-color: darken(#0077b5,20%);
                }
		
		&[href*="pinterest.com"] {
		    @extend .fa-pinterest;
                    background-color: #bd081c;
                    border-color: #bd081c;
                    color: white;
		}
                &[href*="pinterest.com"]:focus,
                &[href*="pinterest.com"]:hover {
                    background-color: darken(#bd081c,20%);                
                }
                &[href*="reddit.com"] {
		    @extend .fa-reddit;
                    background-color: #ff4500;
                    border-color: #ff4500;
                    color: white;
		}
                &[href*="reddit.com"]:focus,
                &[href*="reddit.com"]:hover {
                    background-color: darken(#ff4500,20%);     
                }
		&[href*="slack.com"] {
		    @extend .fa-slack;
                    background-color: #6ecadc;
                    border-color: #6ecadc;
                    color: white;
		}
                &[href*="slack.com"]:focus,
                &[href*="slack.com"]:hover {
                     background-color: darken(#6ecadc,20%);
                }
                &[href*="snapchat.com"] {
		    @extend .fa-snapchat;
                    background-color: #fffc00;
                    border-color: #fffc00;
                    color: white;
		}
                &[href*="snapchat.com"]:focus,
                &[href*="snapchat.com"]:hover {
                     background-color: darken(#fffc00,20%);
                }
		
		&[href*="slideshare.com"] {
		    @extend .fa-slideshare;
                    background-color: #bddfdf;
                    border-color: #bddfdf;
                    color: black; 
		}
                &[href*="slideshare.com"]:focus,
                &[href*="slideshare.com"]:hover {
                    background-color: darken(#bddfdf,20%);
                }
                
	
		&[href*="skype.com"], 
		&[href*="skype:"] {
		    @extend .fa-skype;
		}
		&[href*="spotify.com"] {
		    @extend .fa-spotify;
		}
		&[href*="stumbleupon.com"] {
		    @extend .fa-stumbleupon;
		}
		&[href*="tumblr.com"] {
		    @extend .fa-tumblr;
                    background-color: #56BC8A;
                    border-color: #56BC8A;
                    color: white; 
		}
                &[href*="tumblr.com"]:focus,
                &[href*="tumblr.com"]:hover {
                    background-color: darken(#56BC8A,20%);
                }
                
		&[href*="twitter.com"] {
		    @extend .fa-twitter;
                    background-color: #1da1f2;
                    border-color: #1da1f2;
                    color: white; 
		}
                &[href*="twitter.com"]:focus,
                &[href*="twitter.com"]:hover {
                    background-color: darken(#1da1f2,20%);
                }
		&[href*="vimeo.com"] {
		    @extend .fa-vimeo;
                    background-color: #162221;
                    border-color: #162221;
                    color: white; 
		}
                &[href*="vimeo.com"]:focus,
                &[href*="vimeo.com"]:hover {
                    background-color: lighten(#162221,20%)
                }
                
		&[href*="whatsapp.com"] {
		    @extend .fa-whatsapp;
		}
		&[href*="wordpress.org"], 
		&[href*="wordpress.com"] {
		    @extend .fa-wordpress;
		}

		&[href*="xing.com"] {
		    @extend .fa-xing;
                    background-color: #026466;
                    border-color: #026466;
                    color: white;
		}
                &[href*="xing.com"]:focus,
                &[href*="xing.com"]:hover {
                     background-color: darken(#026466,20%)
                }
		&[href*="youtube.com"] {
		    @extend .fa-youtube;
                    background-color: #cd201f;
                    border-color: #cd201f;
                    color: white;
		}
                &[href*="youtube.com"]:focus,
                &[href*="youtube.com"]:hover {
                    background-color: darken(#162221,20%)
                }
                
                &[href^="mailto"] {
		    @extend .fa-envelope-o;
		}
                // Mailinglists
                &[href*="lists.piratenpartei.de"] {
		    @extend .fa-envelope;
                    background-color: #ff8800;
                    border-color: #ff8800;
                    color: white;
		}
                &[href*="lists.piratenpartei.de"]:focus,
                &[href*="lists.piratenpartei.de"]:hover {
                    background-color: darken(#ff8800,20%)
                }
	    }
	}
    }    
}
.socialmedia-maincolor .social-nav ul li {
    a {
        color: $color-main;
        background-color: $color-page-background;
        border-color: $color-page-background;
        &:focus,
        &:hover {
            background:  $color-second;
            color: $color-page-background;
            border-color: $color-second;
        }
    }
    :focus,
    :hover {
        background:  $color-second;
        color: $color-page-background;
        border-color: $color-second;

    }
}

.socialmedia-secondcolor .social-nav ul li {
     a {
        color: $color-second;
        background-color: $color-page-background;
        border-color: $color-page-background;
         &:focus,
         &:hover {
            background: $color-main;
            color: $color-page-background;
            border-color: $color-main;
        }
     }
    :focus,
    :hover {
        background: $color-main;
        color: $color-page-background;
         border-color: $color-main;
  
    }
}

#footer-social.social-nav {
        li {
            border: none;
        }
	.socialmedia-maincolor  & ul li a {
	    color: $color-main;
	    background:  $color-footer-background;
	    &:focus,
	    &:hover {
		background:  $color-second;
		color: $color-page-background;
		border-color: $color-second;

	   }
	}
	.socialmedia-secondcolor  & ul li a {
	   color: $color-main; 

	    background:  $color-footer-background;
	   &:focus, 
	   &:hover {
		background: $color-main;
		color: $color-page-background;
		border-color: $color-main;
	    }
	    
	}
        
}


@media screen and (min-width: $breakpoint-1060) {
	.header-social {
		display: block;
		position: absolute;
		right: 0;
		top: 40px;
		height: 59px;
		padding-top: 10px;
	}

        #header-social-sticky {
		top: 7px;
		right: 20px;
		
		.header-stick & {
		    z-index: 9999;
		}
	}

}