/*all the custom SVG links*/


/*SVG line links*/
.link-email-me,
.link-linkedin,
.link-dribbble,
.link-chrisdoesdesign,
.open-overlay-btn {
    display: inline-block; 
    position: relative;   
    text-decoration: none;
    background-color: transparent; 
}
.link-linkedin,
.link-chrisdoesdesign,
.link-email-me {
    margin: 0 var(--size-l) 0 0;
}

.link-email-me::before,
.link-linkedin::before,
.link-dribbble::before,
.link-chrisdoesdesign::before,
.open-overlay-btn::before {
    content: '';
    position: absolute;
    top: 0px;
    height: 128%;
    width: 100%;
    background: url('../IMAGES/SVG/email-me.svg') no-repeat center/cover;
    z-index: -1; 
  }

.link-linkedin::before {
    top: 19px;
    width: 100%;
    height: 46%;
    background: url('../IMAGES/SVG/linkedin.svg') no-repeat center/cover;  
}

.link-dribbble::before {
    top: 14px;
    width: 102%;
    height: 59%;
    background: url('../IMAGES/SVG/dribbble.svg') no-repeat center/cover;  
}
.link-chrisdoesdesign::before {
    top: 20px;
    height: 39%;
    background: url('../IMAGES/SVG/chrisdoesdesign.svg') no-repeat center/cover;  
}
.open-overlay-btn::before {
    top: 14px;
    width: 102%;
    height: 59%;
    background: url('../IMAGES/SVG/dribbble.svg') no-repeat center/cover;  
}
@media (max-width: 500px) {
    .link-email-me::before {
        top: -2px;   
    }
    .link-linkedin::before {
        top: 12px;  
    }
    .link-dribbble::before {
        top: 10px; 
    }
    .link-chrisdoesdesign::before {
        top: 13px;   
    }
  }









  /*dots for case studies*/
.link-dot-l-1,
.link-dot-l-2,
.link-dot-l-3,
.link-dot-l-4,
.link-dot-l-5 {
    display: inline-block; 
    position: relative;   
    text-decoration: none;
    background-color: transparent; 
  }

.link-dot-l-1::before,
.link-dot-l-2::before,
.link-dot-l-3::before,
.link-dot-l-4::before,
.link-dot-l-5::before {
    content: '';
    position: absolute;
    top: 112px;
    right: 327px;
    width: 32px;
    height: 32px;
    background: url('../IMAGES/SVG/dot-l-1.svg') no-repeat center/cover;
    z-index: -1; 
}

.link-dot-l-2::before {
    top: 112px;
    right: 242px;
    background: url('../IMAGES/SVG/dot-l-2.svg') no-repeat center/cover;
}
.link-dot-l-3::before {
    top: 72px;
    right: 6px;
    background: url('../IMAGES/SVG/dot-l-3.svg') no-repeat center/cover;
}
.link-dot-l-4::before {
    right: 496px;
    width: 32px;
    height: 36px;
    background: url('../IMAGES/SVG/dot-l-4.svg') no-repeat center/cover;
}
.link-dot-l-5::before {
    top: 112px;
    right: 56px;
    background: url('../IMAGES/SVG/dot-l-5.svg') no-repeat center/cover;
}

@media (max-width: 500px) {
    .link-dot-l-1::before,
    .link-dot-l-2::before,
    .link-dot-l-3::before,
    .link-dot-l-4::before,
    .link-dot-l-5::before {
        content: '';
        position: absolute;
        top: 75px;
        right: 158px;
        width: 32px;
        height: 32px;
        background: url('../IMAGES/SVG/dot-l-1.svg') no-repeat center/cover;
        z-index: -1; 
    }

    .link-dot-l-2::before {
        top: 101px;
        right: 190px;
        background: url('../IMAGES/SVG/dot-l-2.svg') no-repeat center/cover;
    }
    .link-dot-l-3::before {
        right: 218px;
        background: url('../IMAGES/SVG/dot-l-3.svg') no-repeat center/cover;
    }
    .link-dot-l-4::before {
        right: 182px;
        background: url('../IMAGES/SVG/dot-l-4.svg') no-repeat center/cover;
    }
    .link-dot-l-5::before {
        top: 72px;
        right: 6px;
        background: url('../IMAGES/SVG/dot-l-5.svg') no-repeat center/cover;
    }
}