:root {
  --blue: #1d3557ff;
  --fucsia: #e4003fff;
  --light-green: #a8dadcff;
  --light-blue:#e3f3eeff;
  --white: #ffffffff;
}

@font-face {
  font-family: "Gotham-Black";
  src:
    local("Gotham-Black"),
    url("fonts/Gotham-Black.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Gotham-Book";
  src:
    local("Gotham-Book"),
    url("fonts/Gotham-Book.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Clario-Regular";
  src:
    local("Clario-Regular"),
    url("fonts/Clario-Regular.woff2") format("woff2");
  font-display: swap;
}

a {
  text-decoration: none;
}

body {
  display: flex;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  justify-content: center;
  padding: 1rem;
}

main, section {
  width: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 42rem;
  height: fit-content;
  width: 100%;
}
.employe {
  position:relative;
  width: 100%;
}
.employe .photo {
  display:block;
  height: auto;
  width: 100%;
  line-height: 0;
}
.employe .data {
  position:absolute;
  top:50%;
  left: 10%;
  transform:translate(0%,-50%);
  -ms-transform:translate(-0%,-50%);
}
.employe .data .name {
  color:var(--fucsia);
  font-size: 3rem;
  font-family: 'Gotham-Black';
  line-height: 0.25;
}
.employe .data .position {
  Color:var(--light-green);
	font-size: 1.5rem;
	font-family: Gotham-Book;
  line-height: 0.25;
}
.employe .data .contact {
  margin-top: 20%;
  margin-bottom: 20%;
}
.employe .data .contact a {
  text-decoration: none;
}

#phone-icon #bg-icon, #whatsapp-icon #bg-icon, #mail-icon #bg-icon, #linkedin-icon #bg-icon {
  fill: var(--blue);
}
#phone-icon #fg-icon, #whatsapp-icon #fg-icon, #mail-icon #fg-icon, #linkedin-icon #fg-icon {
  fill: var(--light-blue);
}
#phone-icon:hover #bg-icon, #whatsapp-icon:hover #bg-icon, #mail-icon:hover #bg-icon, #linkedin-icon:hover #bg-icon  {
  fill: var(--fucsia);
}
#add-card #fg-1 {
  fill: var(--light-blue);
}
#add-card #fg-2 {
  fill: var(--light-green);
}
#add-card:hover #fg-1, #add-card:hover #fg-2 {
  fill: var(--fucsia);
}

#slogan {
  position:relative;
  width: 100%;
  margin-top: -1px;
}
#slogan .photo {
  display:block;
  height: auto;
  width: 100%;
  line-height: 0;
}
#slogan .text{
  color:var(--fucsia);
  font-size: 3rem;
  font-family: 'Gotham-Black';
  line-height: .8;
  position:absolute;
  top:35%;
  left: 10%;
  transform:translate(0%,-50%);
  -ms-transform:translate(-0%,-50%);
}
#slogan .activity{
  color:var(--white);
  font-size: 1.3rem;
  font-family: 'Clario-Regular';
  margin-top: -20%;
  text-align: right;
}
#slogan .contact {
  position:absolute;
  top:50%;
  right: 10%;
}
#slogan #facebook-icon, #slogan #linkedin-icon, #slogan #instagran-icon, #web-icon  {
  height: auto;
  width: 3rem;
}
#slogan #facebook-icon #bg-icon, #slogan #linkedin-icon #bg-icon, #slogan #instagran-icon #bg-icon, #slogan #web-icon #bg-icon {
  fill: var(--fucsia);
}
#slogan #facebook-icon #fg-icon, #slogan #linkedin-icon #fg-icon, #slogan #instagran-icon #fg-icon, #slogan #web-icon #fg-icon {
  fill: var(--white);
}
#slogan #facebook-icon:hover #bg-icon, #slogan #linkedin-icon:hover #bg-icon, #slogan #instagran-icon:hover #bg-icon, #slogan #web-icon:hover #bg-icon {
  fill:var(--light-blue);
}
#slogan #facebook-icon:hover #fg-icon, #slogan #linkedin-icon:hover #fg-icon, #slogan #instagran-icon:hover #fg-icon, #slogan #web-icon:hover #fg-icon {
  fill:var(--blue);
}

#videoClip {
  cursor: pointer;
  margin-top: -1.2rem;
}
#videoClip:hover {
  opacity:.8;
}
#videoClip::-webkit-media-controls {
  display: none !important;
} 

#footer {
  z-index: 1;
  margin-top: -2.4rem;
}

@media screen and (max-width:639px) {
  .employe .data .name, #slogan .text {
    font-size: calc(1.5rem + .75vw);
  }
  .employe .data .position {
    font-size: calc(.75rem + 1vw);
  }
  #phone-icon, #whatsapp-icon, #mail-icon, #linkedin-icon, #slogan #facebook-icon, #slogan #linkedin-icon, #slogan #instagran-icon, #slogan #web-icon {
    height: 28px;
    width: 28px;
  }
  #slogan .text {
    font-size: 1.15rem;
    top:40%;
  }
  #slogan #facebook-icon, #slogan #linkedin-icon, #slogan #instagran-icon, #slogan #web-icon {
    height: 20px;
    width: 20px;
  }
  #slogan .activity{
    font-size: .5rem;
  }
}
@media screen and (max-width:380px) {
  .employe .data .name {
    font-size: 1.25rem;
  }
  .employe .data .position {
    font-size: .75rem;
  }
  #phone-icon, #whatsapp-icon, #mail-icon, #linkedin-icon {
    height: 24px;
    width: 24px;
  }
  #slogan .text {
    font-size: 1rem;
    top:40%;
  }
  #slogan #facebook-icon, #slogan #linkedin-icon, #slogan #instagran-icon, #slogan #web-icon {
    height: 20px;
    width: 20px;
  }
  #slogan .activity{
    font-size: .435rem;
  }
}

#manifest {
  z-index: 1;
}