/*=========================================================
RESET
=========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    min-height:300vh;

    font-family:Arial, Helvetica, sans-serif;

}

/*=========================================================
SOCIAL BAR
=========================================================*/

.social-bar{

    position:fixed;

    top:50%;

    right:0;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    z-index:9999;

}

/*=========================================================
SOCIAL ITEM
=========================================================*/

.social-item{

    position:relative;

    width:70px;

    height:70px;

    display:block;

    text-decoration:none;

    overflow:visible;

}

/*=========================================================
FONDO DESPLEGABLE
=========================================================*/

.social-item::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:70px;

    height:100%;

    background:#194493;

    transition:width .35s ease;

    z-index:1;

}

.social-item:hover::before{

    width:240px;

}

/*=========================================================
ICONO
=========================================================*/

.social-item img{

    position:absolute;

    top:50%;

    right:20px;

    transform:translateY(-50%);

    width:30px;

    height:30px;

    object-fit:contain;

    z-index:3;

}

/*=========================================================
TEXTO
=========================================================*/

.social-item span{

    position:absolute;

    top:50%;

    right:70px;

    transform:translateY(-50%) translateX(20px);

    color:#fff;

    font-size:17px;

    font-weight:600;

    letter-spacing:.4px;

    white-space:nowrap;

    opacity:0;

    transition:
        opacity .25s ease,
        transform .35s ease;

    z-index:3;

}

.social-item:hover span{

    opacity:1;

    transform:translateY(-50%) translateX(0);

}

/*=========================================================
HOVER
=========================================================*/

.social-item:hover::before{

    background:#2556b0;

}

/*=========================================================
SEPARADORES
=========================================================*/

.social-item:not(:last-child)::after{

    content:"";

    position:absolute;

    bottom:0;

    right:0;

    width:70px;

    height:1px;

    background:rgba(255,255,255,.18);

    z-index:4;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media (max-width:768px){

    .social-item{

        width:60px;

        height:60px;

    }

    .social-item::before{

        width:60px;

    }

    .social-item:hover::before{

        width:190px;

    }

    .social-item img{

        width:24px;

        height:24px;

        right:18px;

    }

    .social-item span{

        right:58px;

        font-size:15px;

    }

}