.contact {
    display: flex;
    justify-content: center;
    padding: 3vmax;
    flex-direction: column;
    align-items: center;
}
.contact .avatar {
    width: 18vw;
    height: 18vw;
    max-width: 160px;
    max-height: 160px;
    min-width: 120px;
    min-height: 120px;
    border-radius: 50%;
    border: solid 5px #254258;
    overflow: hidden;
    transition: 1.5s all;
}
.contact .avatar:hover {
    box-shadow: 0px 0px 5px 1px #254258;
}
.contact .avatar img {
    object-fit: cover;
    width: inherit;
    height: inherit;
    max-width: 160px;
    max-height: 160px;
    min-width: 120px;
    min-height: 120px;
    -webkit-user-drag: none;
}


.contact .name {
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 15px;
    grid-gap: 10px;
    color: #ddd;
    font-family: Roboto;
}
.contact .name h1 {
    font-size: 1.8rem;
    font-weight: 100;
}
.contact .name h2 {
    font-size: 1rem;
    color: #80bade;
    
}


.contact .info {
    width: 45vw;
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 15px;
    grid-gap: 10px;
    color: #ddd;
    font-family: Roboto;
    font-size: 1rem;
    font-weight: 100;
    margin-top: 30px;
}



.contact .circle a{
    fill: #ddd;
    opacity: 0.7;
    transition: .4s all;
    cursor: pointer;
    outline: none;
}
.contact .circle:hover a {
    fill: #fff;
    opacity: 1;
}
.contact .circle svg{
    width: 38px;
    -webkit-user-drag: none;
}

.contact .circles {
    grid-gap: 15vmin;
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
}





.contact .signature {
    stroke: #ddd;
    opacity: .8;
    filter: blur(0.5px);
    width: 100%;
}

.contact .signature path {
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 1;
    -webkit-animation-name: line;
    animation-name: line;
    stroke-linejoin: round;
    opacity: 0;
}

.contact .signature path {
    stroke-dasharray: 0,100;
    transition-property: all;
    stroke-dashoffset: 1;
    transition-delay: 0;
    transition: 0.2s all;
}

.active .contact .signature path {
    stroke-dasharray: 100,100;
    opacity: 1;
}

/* 1 path */
.active .contact .signature path:nth-child(1) {
    transition-duration: .4s;
    transition-delay: 1000ms;
}
.active .contact .signature path:nth-child(2) {
    transition-duration: .4s;
    transition-delay: 1010ms;
}
.active .contact .signature path:nth-child(3) {
    transition-duration: .4s;
    transition-delay: 1020ms;
}
.active .contact .signature path:nth-child(4) {
    transition-duration: .4s;
    transition-delay: 1030ms;
}
/*  */

/* 2 Path */
.active .contact .signature path:nth-child(5) {
    transition-duration: .4s;
    transition-delay: 1300s;
}
.active .contact .signature path:nth-child(6) {
    transition-duration: .4s;
    transition-delay: 1320ms;
}
.active .contact .signature path:nth-child(7) {
    transition-duration: .4s;
    transition-delay: 1380ms;
}
.active .contact .signature path:nth-child(8) {
    transition-duration: .4s;
    transition-delay: 1420ms;
}
.active .contact .signature path:nth-child(9) {
    transition-duration: .4s;
    transition-delay: 1470ms;
}
.active .contact .signature path:nth-child(10) {
    transition-duration: .4s;
    transition-delay: 1490ms;
}
.active .contact .signature path:nth-child(11) {
    transition-duration: .3s;
    transition-delay: 1500ms;
}
.active .contact .signature path:nth-child(12) {
    transition-duration: .2s;
    transition-delay: 1530ms;
}
.active .contact .signature path:nth-child(13) {
    transition-duration: .2s;
    transition-delay: 1550ms;
}
.active .contact .signature path:nth-child(14) {
    transition-duration: .2s;
    transition-delay: 1560ms;
}
.active .contact .signature path:nth-child(14) {
    transition-duration: .3s;
    transition-delay: 1580ms;
}
.active .contact .signature path:nth-child(15) {
    transition-duration: .3s;
    transition-delay: 1600ms;
}
.active .contact .signature path:nth-child(16) {
    transition-duration: .3s;
    transition-delay: 1610ms;
}
.active .contact .signature path:nth-child(17) {
    transition-duration: .3s;
    transition-delay: 1650ms;
}
/*  */

/* 3 Path */
.active .contact .signature path:nth-child(18) {
    transition-duration: .4s;
    transition-delay: 1900ms;
}
.active .contact .signature path:nth-child(19) {
    transition-duration: .4s;
    transition-delay: 1920ms;
}
.active .contact .signature path:nth-child(20) {
    transition-duration: .4s;
    transition-delay: 1940ms;
}
.active .contact .signature path:nth-child(21) {
    transition-duration: .4s;
    transition-delay: 1960ms;
}
.active .contact .signature path:nth-child(22) {
    transition-duration: .4s;
    transition-delay: 1990ms;
}
.active .contact .signature path:nth-child(23) {
    transition-duration: .4s;
    transition-delay: 2000ms;
}
.active .contact .signature path:nth-child(24) {
    transition-duration: .4s;
    transition-delay: 2020ms;
}
.active .contact .signature path:nth-child(25) {
    transition-duration: .4s;
    transition-delay: 2040ms;
}
.active .contact .signature path:nth-child(26) {
    transition-duration: .4s;
    transition-delay: 2060ms;
}
.active .contact .signature path:nth-child(27) {
    transition-duration: .4s;
    transition-delay: 2080ms;
}
.active .contact .signature path:nth-child(28) {
    transition-duration: .4s;
    transition-delay: 2100ms;
}
.active .contact .signature path:nth-child(29) {
    transition-duration: .4s;
    transition-delay: 2120ms;
}
.active .contact .signature path:nth-child(30) {
    transition-duration: .4s;
    transition-delay: 2140ms;
}
.active .contact .signature path:nth-child(31) {
    transition-duration: .4s;
    transition-delay: 2160ms;
}
.active .contact .signature path:nth-child(32) {
    transition-duration: .4s;
    transition-delay: 2180ms;
}
.active .contact .signature path:nth-child(33) {
    transition-duration: .4s;
    transition-delay: 2200ms;
}
.active .contact .signature path:nth-child(34) {
    transition-duration: .4s;
    transition-delay: 2220ms;
}
.active .contact .signature path:nth-child(35) {
    transition-duration: .4s;
    transition-delay: 2240ms;
}
.active .contact .signature path:nth-child(36) {
    transition-duration: .4s;
    transition-delay: 2260ms;
}
.active .contact .signature path:nth-child(37) {
    transition-duration: .4s;
    transition-delay: 2280ms;
}
/*  */

.active .contact .signature path:nth-child(38) {
    transition-duration: .3s;
    transition-delay: 2400ms;
}
.active .contact .signature path:nth-child(39) {
    transition-duration: .3s;
    transition-delay: 2420ms;
}
.active .contact .signature path:nth-child(40) {
    transition-duration: .3s;
    transition-delay: 2440ms;
}
.active .contact .signature path:nth-child(41) {
    transition-duration: .3s;
    transition-delay: 2460ms;
}
.active .contact .signature path:nth-child(42) {
    transition-duration: .3s;
    transition-delay: 2480ms;
}
.active .contact .signature path:nth-child(43) {
    transition-duration: .3s;
    transition-delay: 2500ms;
}
.active .contact .signature path:nth-child(44) {
    transition-duration: .3s;
    transition-delay: 2520ms;
}
.active .contact .signature path:nth-child(45) {
    transition-duration: .3s;
    transition-delay: 2540ms;
}