/* Social Icon Fonts
   Sociocon : <a href="https://www.socicon.com" alt="Free social icons font" title="the social icons font">socicon</a>
   and Font Awesome: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">      
*/

/* SOCIAL MEDIA **********************/
        .soc {overflow: hidden; padding: 0; list-style: none; display: flex; justify-content: space-between;}

        ul.soc {height: var(--heightSocial);}
        .soc li {padding: var(--socMargin) 0; display: inline-block; *display: inline; zoom: 1;}
        .soc li a {width: var(--socIcon); line-height: var(--socIcon); font-size: var(--socFont); 
                   color: var(--colorLight_HC1); background-color: var(--lGrey3); font-family: socicon!important; 
                   display: block; position: relative; overflow: hidden; text-align: center; text-decoration: none; z-index: 1;
                   /* border-radius, box-sizing, transition, transition-property, transform, font-smoothing */ 
                   -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
                   -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
                   -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;
                   -o-transition: .1s; -ms-transition: .1s; -moz-transition: .1s; -webkit-transition: .1s; transition: .1s;
                   -webkit-transition-property: transform; transition-property: transform; 
                   -webkit-transform: translateZ(0); transform: translateZ(0);
        }
        .icon-last{margin-right: 0 !important;}
        .soc a:hover, .soc a:focus {background-color: var(--bgColor1); color: var(--colorLight_HC1); font-weight: bold;}
        /*.soc a:hover {z-index: 2; transform: scale(1.1); -webkit-transform: scale(1.1); transition: all .2s ease-in-out;} /* Hover Effect: Scale (Adjust margins to use) */
        :root {
            --heightSocial: calc( var(--socIcon) + ( var(--socMargin) * 2) );
            --socFont: calc( var(--socIcon) * .4);
            --socMargin: var(--socFont);
        }

/* RESPONSIVE *********************************************************************************************************/

        @media (max-width: 600px) {
            .soc {margin: 0;}
            :root {--socIcon: 4rem;} /* socFont & socMargin = this * .4 (5rem = 2; 4rem = 1.6; 3.5rem = 1.4;) */  /* socMarginTop = ^ x 2 (5rem = 4; 4rem = 3.2; 3.5rem = 2.8;) */
        }        

        @media (min-width: 600px) {
            .soc {margin: 0 auto; display: normal;}
            :root { --socIcon: 5rem;}
        }
        @media (min-width: 768px) {
            .soc {width: var(--widthCore);}
        }