/*------------------------------------
  Profile Photo CSS
------------------------------------*/
.photoborder {
  height: 240px;
  width: 240px;
  background: transparent;
  border-radius: 10px;
  transition: border 1s;
  position: relative;
}
.photoborder:hover {
  border: 1px solid #fff;
}
.photocard {
  height: 250px;
  width: 250px;
  background: #808080;
  border-radius: 10px;
  transition: background 0.8s;
  overflow: hidden;
  background: #000;
  box-shadow: 0 70px 63px -60px #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.card0 {
  background: var(--backgroundImage);
  background-size: var(--backgroundImageSize);
}
.card0:hover {
  background: var(--backgroundImageHover);
  background-size: var(--backgroundImageHoverSize);
}
.card0:hover h4 {
  opacity: 1;
}
.card0:hover .fa {
  opacity: 1;
}
h4 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #fff;
  margin: 10px;
  opacity: 0;
  transition: opacity 1s;
}
.fa {
  opacity: 0;
  transition: opacity 1s;
}
.photoicons {
  position: absolute;
  fill: #fff;
  color: #fff;
  height: 220px;
  top: 100px;
  width: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

/*------------------------------------
  End of Profile Photo CSS
------------------------------------*/

.loader{
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  border: 5px solid #fff;
  border-radius: 10px;
  overflow: hidden;
}
.loader::before{
  content: '';
  background: #d7d3d3;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  animation: loading 10s linear infinite;
}

.loader:after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 24px;
  line-height: 48px;
  color: #737070;
  mix-blend-mode: difference;
  animation: percentage 10s linear infinite;
}

.watermark{
  position : relative;
}
.watermark::after{
  content: "Click to update your photo!";
  font-size : 12px;
  background: rgba(0,0,0,0.5);
  color: white;
  position : absolute;
  width: 100%;
  margin-top: 80%;
  padding : 5px 0 5px 20%;
  pointer-events: all;
}

@keyframes loading {
  0% { width: 0 }
  100% { width: 100% }
}

@keyframes percentage {
  0% { content: "Loading something really cool 0%"}
  5% { content: "Loading something really cool 5%"}
  10% { content: "Loading something really cool 10%"}
  20% { content: "Loading something really cool 20%"}
  30% { content: "Loading something really cool 30%"}
  40% { content: "Loading something really cool 40%"}
  50% { content: "Loading something really cool 50%"}
  60% { content: "Loading something really cool 60%"}
  70% { content: "Loading something really cool 70%"}
  80% { content: "Loading something really cool 80%"}
  90% { content: "Loading something really cool 90%"}
  95% { content: "Loading something really cool 95%"}
  96% { content: "Loading something really cool 96%"}
  97% { content: "Loading something really cool 97%"}
  98% { content: "Loading something really cool 98%"}
  99% { content: "Loading something really cool 99%"}
  100% { content: "Loading something really cool 100%"}
}

/*------------------------------------
  Company Logo CSS
------------------------------------*/
.companyLogoBorder {
  height: 140px;
  width: 140px;
  background: transparent;
  border-radius: 10px;
  transition: border 1s;
  position: relative;
}
.companyLogoBorder:hover {
  border: 1px solid #fff;
}
.companyLogo {
  height: 150px;
  width: 150px;
  background: #808080;
  border-radius: 10px;
  transition: background 0.8s;
  overflow: hidden;
  background: #000;
  box-shadow: 0 70px 63px -60px #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.companyLogoCard0 {
  background: var(--backgroundImage);
  background-size: var(--backgroundImageSize);
}
.companyLogoCard0:hover {
  background: var(--backgroundImageHover);
  background-size: var(--backgroundImageHoverSize);
}
.companyLogoCard0:hover h4 {
  opacity: 1;
}
.companyLogoCard0:hover .fa {
  opacity: 1;
}
h5 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #fff;
  margin: 10px;
  opacity: 0;
  transition: opacity 1s;
}
.companyLogoIcons {
  position: absolute;
  fill: #fff;
  color: #fff;
  height: 120px;
  top: 50px;
  width: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

/*------------------------------------
  Company Team Photo CSS
------------------------------------*/
.companyTeamPhotoBorder {
  height: 520px;
  width: 940px;
  background: transparent;
  border-radius: 10px;
  transition: border 1s;
  position: relative;
}
.companyTeamPhotoBorder:hover {
  border: 1px solid #fff;
}
.companyTeamPhoto {
  height: 540px;
  width: 960px;
  background: #808080;
  border-radius: 10px;
  transition: background 0.8s;
  overflow: hidden;
  background: #000;
  box-shadow: 0 70px 63px -60px #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.companyTeamPhotoCard0 {
  background: var(--backgroundImage);
  background-size: var(--backgroundImageSize);
}
.companyTeamPhotoCard0:hover {
  background: var(--backgroundImageHover);
  background-size: var(--backgroundImageHoverSize);
}
.companyTeamPhotoCard0:hover h4 {
  opacity: 1;
}
.companyTeamPhotoCard0:hover .fa {
  opacity: 1;
}
h3 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #fff;
  margin: 10px;
  opacity: 0;
  transition: opacity 1s;
}
.companyTeamPhotoIcons {
  position: absolute;
  fill: #fff;
  color: #fff;
  height: 120px;
  top: 82%;
  width: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}