/*
CSS Social Sign-in Buttons by Bloop [http://bloop.co] are licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Please link to Bloop [http://bloop.co] somewhere on the page when you use these buttons.
Contact @smcllns with questions about permissions but you're basically free to do what you like.
*/

/*BUTTON WIDTH
Use width:auto or a fixed width on the .social_buttons element
*/

/*Social icons sprite file*/
.social_buttons > span:before {
       background: url(../../images/jc/social_buttons_icons2.png) no-repeat;
}


/*Resets*/
.social_buttons {
       border: 0;
       color: #fff !important;
       cursor: pointer;
       letter-spacing: 0;
       outline: none;
       padding: 0;
       text-decoration: none !important;
}
button::-moz-focus-inner { 
       border: 0;
       padding: 0;
}

/*22px height*/
.sb_24 > span,
.sb_24 > span:before {
       font-size: 12px;
       height: 22px;
       line-height: 22px;
}
.sb_24 > span:before {
       width: 22px;
}
.sb_24 > span {
       padding-right: 10px;
}
.sb_24,
.sb_24 > span {
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
}
/*48px height*/
.sb_48 > span,
.sb_48 > span:before {
       font-size: 18px;
       height: 36px;
       line-height: 36px;
}
.sb_48 > span:before {
       width: 40px;
}
.sb_48 > span {
       padding-right: 20px;
}
.sb_48,
.sb_48 > span {
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       border-radius: 5px;
}

/*icons*/
.sb_facebook.sb_24 > span:before {
       background-position: 5px 4px;
}
.sb_linkedin.sb_24 > span:before {
       background-position: 5px -45px;
}
.sb_twitter.sb_24 > span:before {
       background-position: 5px -95px;
}
.sb_google.sb_24 > span:before {
       background-position: 1px -146px;
}
.sb_QQ.sb_24 > span:before {
       background-position: 1px -195px;
}
.sb_sina.sb_24 > span:before {
       background-position: -1px -239px;
}
.sb_facebook.sb_48 > span:before {
       background-position: -40px 7px;
}
.sb_linkedin.sb_48 > span:before {
       background-position: -40px -42px;
}
.sb_twitter.sb_48 > span:before {
       background-position: -40px -91px;
}
.sb_google.sb_48 > span:before {
       background-position: -40px -141px;
}

/*Brand colors*/
.sb_facebook {
       background: #5E76AB;
       border: 1px solid #5E76AB;
}
.sb_facebook:hover {
       background: #4863AE;
}

.sb_facebook a:link {color:#FFF; font-weight:bolder;}  
.sb_facebook a:visited {color:#FFF; font-weight:bolder;}  
.sb_facebook a:hover {color:#FFF; font-weight:bolder;}  
.sb_facebook a:active {color:#FFF; font-weight:bolder;}

.sb_linkedin {
       background: #4A95BF;
       border: 1px solid #4A95BF;
}
.sb_linkedin:hover {
       background: #3B88C5;

}
.sb_twitter {
       background: #A7E7EB;
       border: 1px solid #A7E7EB;
}
.sb_twitter:hover {
       background: #85DCE2;
}
.sb_google 
{
       background: #ECECEC;
       border: 2px solid #E7E7E7;
       margin-left:1.5rem;
}
.sb_google:hover 
{
    text-decoration:none;
       background: #E7E7E7;    
}
.sb_twitter > span, .sb_twitter > span {
       border-top-color: rgba(255,255,255,0.7) !important;
       border-bottom-color: rgba(0,0,0,0.3) !important;    
       color: #3C6B9C !important;
       text-shadow: 0 1px 1px rgba(255,255,255,0.7) !important;
}

/*Common*/
.social_buttons {
       border-bottom: none;
       border-left: none;
       border-right: none;
       display: block;
       /*font-family: "Lucida Grande", Tahoma, sans-serif;*/
       position: relative;
}
.social_buttons > span {
       background: -moz-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,0) 40%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.1));
       background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.2)), color-stop(40%, rgba(255,255,255,0)), color-stop(70%, rgba(0,0,0,0)), to(rgba(0,0,0,0.1)));
       border: 1px solid rgba(0,0,0,0.1);
       border-bottom-color: rgba(0,0,0,0.5);
       border-top-color: rgba(255,255,255,0.5);
       display: block;
       overflow: visible;
       white-space: nowrap;
}
.social_buttons > span:before {
       -moz-box-shadow: 1px 0 1px rgba(255,255,255,0.2);
       -webkit-box-shadow: 1px 0 1px rgba(255,255,255,0.2);
       background-repeat: no-repeat;
       border-right: 1px solid rgba(0,0,0,0.1);
       box-shadow: 1px 0 1px rgba(255,255,255,0.5);
       content: "";
       display: block;
       float: left;
       margin-right: 10px;
}

/*Interactions*/
.social_buttons:hover > span {
       border-top-color: rgba(255,255,255,0.5);
       border-bottom-color: rgba(0,0,0,0.7);  
}
.social_buttons:active > span {
       background: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.3)), color-stop(30%, rgba(255,255,255,0)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,0.2)));  
       background: -moz-linear-gradient(bottom, rgba(255,255,255,0.3), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.2));  
       border-top: 1px solid rgba(255,255,255,0.2);
       border-bottom: 1px solid rgba(0,0,0,0.3);
}
.sb_24:active > span {
       line-height: 23px;
}
.sb_48:active > span {
       line-height: 38px;
}


/* Newly added styles for responsive page */
@media only screen and (max-width: 40em) {
    .sb_facebook {
        width:100%;
        margin-bottom:1.5rem;
    }
    .sb_google {
        width:100%;
        margin:0;
    }
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .sb_facebook {
        width:100%;
        margin-bottom:1.5rem;
    }
    .sb_google {
        width:100%;
        margin:0;
    }
}