/* -------------------------------------- BACKGROUND --------------------------------*/
#bg-1{position: fixed;top: 0;left: 0;height: 100%;width: 100%;z-index: -1;}
/* -------------------------------------- /BACKGROUND --------------------------------*/
/* ---------------------------------------- CONTENT ----------------------------------*/
.staff-card{border-left: 1px solid var(--linecolor);}
.staff{border-radius: 50%;width: 60%;margin-left: 20%;}
.work-head{text-transform: uppercase;text-align: center;margin: 15px 0;color: var(--bluecolor);font-size: 1.3em;}
.contact-ul{list-style: none;display: flex;justify-content: space-evenly;}
.contact-ul li{border: 1px solid;border-radius: 50%;padding: 15px;}
.icon{width: 70px;height: 70px;transition: all ease-in-out 0.3s;}
.contact-ul li:nth-child(1){border-color: #5e94de}
.contact-ul li:nth-child(2){border-color: #25D366}
.contact-ul li:nth-child(3){border-color: #229ED9}
.contact-ul li:nth-child(4){border-color: #ffff00}
.contact-ul li:nth-child(5){border-color: #4680C2}
.contact-ul li:nth-child(1) a svg{fill: #5e94de}
.contact-ul li:nth-child(2) a svg{fill: #25D366}
.contact-ul li:nth-child(3) a svg{fill: #229ED9}
.contact-ul li:nth-child(4) a svg{fill: #ffff00}
.contact-ul li:nth-child(5) a svg{fill: #4680C2}
.contact-ul li:hover{border-color: var(--whitecolor)}
.contact-ul li:hover a svg {fill: var(--whitecolor)}
@media(max-width: 576px){
  .staff{width: 80%;margin-left: 10%;}
  .contact-ul{flex-wrap: wrap;}
  .contact-ul li{margin: 15px}
  .icon{width: 50px;height: 50px;}
}
/* ---------------------------------------- /CONTENT ---------------------------------*/