a {
    text-decoration: none;
}

.social {
    position: relative;
}

    .social a {
        position: relative;
        display: inline-block;
        font-family: "icomoon";
        font-size: 1.2em;
        width: 45px;
        height: 45px;
        line-height: 40px;
        color: white;
        border-radius: 50%;
        text-align: center;
        /*margin-right: 30px;*/
        font-smoothing: antialiased;
        background-color: #111111;
    }

    .social .fb {
        /*background: #46629E;*/
        margin: 10px;
    }

        .social .fb:before,
        .social .fb:after {
            border-color: #ceb94b7a;
        }

    .social .tw {
        background: #00ACEE;
    }

    .social a:before,
    .social a:after {
        content: "";
        display: block;
        position: absolute;
        background: transparent;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 50%;
        transition: .3s all;
        border: 3px solid;
        z-index: -1;
    }

    .social a:hover:after {
        -webkit-transform: scale(1.5);
    }

    .social a:hover:before {
        -webkit-transform: scale(2);
        transition: .3s all;
        opacity: 0;
    }


.icon:before {
    font-family: 'linecons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    margin-right: 0;
    -webkit-font-smoothing: antialiased;
}



@media screen and (min-width:1360px) {
    .social .fb {
        /*background: #46629E;*/
        margin: 0.735vw;
    }
    /*.social a {
        width: 3.309vw;
        height: 3.309vw;
        line-height: 2.941vw;
    }

        .social a:before,
        .social a:after {
            border: 0.221vw solid;
        }*/

    .social a {
        width: 3.309vw;
        height: 3.309vw;
        line-height: 2.941vw;
    }

        .social a img {
            height: 100%;
        }
}


/*NEXT STUFF*/
/*NEXT STUFF*/
/*NEXT STUFF*/

.svg-wrapper {
    margin-top: 0;
    position: relative;
    width: 150px;
    /*make sure to use same height/width as in the html*/
    height: 40px;
    display: inline-block;
    border-radius: 3px;
    margin-left: 5px;
    margin-right: 5px
}

#shape {
    stroke-width: 6px;
    fill: transparent;
    /*stroke: #009FFD;*/
    stroke-dasharray: 0 400;
    stroke-dashoffset: -337;
    transition: 1s all ease;
}

    #shape.active {
        stroke-dasharray: 85 400;
        stroke-dashoffset: -220;
    }

#text {
    margin-top: -35px;
    text-align: center;
}

.svg-wrapper:hover #shape {
    stroke-dasharray: 50 0;
    stroke-width: 3px;
    stroke-dashoffset: 0;
    /*stroke: #ff0000;*/
}


@media screen and (min-width:1360px) {
    .svg-wrapper {
        width: 11.029vw;
        height: 2.941vw;
        border-radius: 0.221vw;
        margin-left: 0.368vw;
        margin-right: 0.368vw
    }

    #shape {
        stroke-width: 0.441vw;
    }

    /*#text {
        margin-top: -2.574vw;
    }*/

    .svg-wrapper:hover #shape {
        stroke-width: 0.221vw;
    }
}

@media screen and (min-width:540px) {
    /*.social a:before,
    .social a:after {
        box-sizing:border-box !important;
    }*/
}