main {
  position: relative;
  margin: 0 auto;
}

@media (max-width: 905px) {
  .linkBox {
    margin: 0 auto;
    width: 100% !important;
    max-width: 400px;
  }
}
/* #lang
 *  position: fixed
 *  top: var(--sameContextGap)
 *  right: var(--sameContextGap)
 *  display: inline-block
 *  width: auto
 *  cursor: pointer
 *  z-index: 100 */
/* #darkmode
 *  position: fixed
 *  bottom: var(--sameContextGap)
 *  right: var(--sameContextGap)
 *  border-radius: 50%
 *  background: var(--neutral)
 *  border: solid var(--prim) var(--borderSize)
 *  height: calc(var(--sameContextGap) * 3)
 *  width: calc(var(--sameContextGap) * 3)
 *  cursor: pointer
 *  z-index: 100 */
header {
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--neutral);
  z-index: 100;
}
header nav {
  display: flex;
  justify-content: flex-end;
  color: var(--prim);
}
header nav ul {
  display: flex;
  justify-content: flex-end;
}
header nav ul li {
  list-style: none;
  padding: var(--sameContextGap);
  font-size: 1.2rem;
  color: var(--neutral);
}
header nav ul li a {
  font-size: inherit;
  color: inherit;
}

b {
  font-weight: bold;
  font-size: 1em;
}

.hero {
  --height: calc(90vh - (var(--sameContextGap) * 4));
  background: var(--prim);
  min-height: var(--height);
  padding: 0;
}
.hero .bgContainer {
  width: 100%;
  height: var(--height);
  background: url("img/Untitled.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 100%;
}
.hero .bgContainer .wrapper {
  height: var(--height);
  width: 100%;
  display: flex;
  align-items: center;
}
.hero .bgContainer .wrapper > div {
  height: 60vh;
}
.hero .bgContainer .wrapper > div.cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero .bgContainer .wrapper > div.cta .nameCard {
  padding: 0 var(--sameContextGap);
}
.hero .bgContainer .wrapper > div.cta h2 {
  margin-bottom: 0;
}
.hero .bgContainer .wrapper > div.cta .bullets ul {
  margin-left: var(--sameContextGap);
  padding: var(--sameContextGap);
}
.hero .bgContainer .wrapper > div.cta .bullets ul li {
  margin-bottom: var(--sameContextGap);
}
.hero .bgContainer .wrapper > div.image {
  border: var(--neutral) var(--borderSize) solid;
  border-radius: var(--borderRadius);
  padding: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: var(--neutral);
}
.hero .bgContainer .wrapper > div.image figure {
  overflow: hidden;
  border-radius: var(--borderRadius);
  width: 100%;
  position: relative;
}
.hero .bgContainer .wrapper > div.image figure img {
  position: absolute;
  height: 100%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 1628px) {
  .hero .nameCard ul {
    display: none;
  }
}
@media (max-width: 1140px) {
  .hero .bgContainer {
    background-size: 110%;
    background-position: 0% 100%;
  }
}
@media (max-width: 905px) {
  header {
    display: none;
  }
  .hero .bgContainer {
    background: var(--neutral);
    height: auto;
  }
  .hero .bgContainer .wrapper {
    flex-wrap: wrap;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
  .hero .bgContainer .wrapper .nameCard {
    margin: 0 auto;
  }
  .hero .bgContainer .wrapper .bullets {
    margin: 0 auto;
  }
  .hero .bgContainer .wrapper .bullets ul {
    max-width: 300px;
  }
}
.subcontainer {
  max-width: 100%;
  width: 100%;
}

/* .col-4
 *  width: calc(50% - 213.33px)
 *  background: var(--second) 
 *  color: var(--neutral)
 *  display: flex
 *  align-items: flex-start
 *  flex-direction: column
 *  .subcontainer
 *      padding-left: var(--sameContextGap)
 *      margin-bottom: 0
 *      max-width: 426.66px
 *      height: 100%
 *      display: flex
 *      flex-direction: column
 *      justify-content: space-between
 *  h1
 *      font-size: 3em
 *  p
 *      font-size: 1.2em
 *  h1,h2,h3,h4,h5,h6,p,div
 *      color: var(--neutral)
 *      margin-bottom: calc(var(--sameContextGap) / 2)
 *      &::selection
 *          color: var(--prim)
 *          background: var(--neutral) */
.center {
  margin-left: auto;
  margin-right: auto;
}

/* .col-8
 *  width: 66.666% */
.ExContent {
  border: var(--borderSize) solid var(--second);
  padding: calc(var(--sameContextGap) / 2) var(--sameContextGap);
  border-radius: var(--borderRadius);
}

/* <Companies> */
.companies {
  /* padding: var(--sameContextGap) */
  /* padding-right: var(--sameContextGap) */
  margin-bottom: var(--sectionGap);
}
.companies > ul {
  display: flex;
  /* background: var(--neutral) */
  /* border-radius: var(--borderRadius) */
  /* border: solid var(--borderSize) var(--prim) */
  align-items: center;
  /* justify-content: space-around */
  /* align-items: center */
  padding: 0 var(--sameContextGap) var(--sameContextGap);
}
.companies > ul > li {
  height: 8vh;
  text-align: center;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  -o-object-fit: contain;
     object-fit: contain;
}
.companies > ul > li img {
  -o-object-fit: contain;
     object-fit: contain;
  max-height: 6vh;
}

@media (max-width: 905px) {
  .companies {
    margin-bottom: var(--differentContextGap);
  }
  .companies ul {
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 0;
  }
  .companies ul li {
    max-width: 200px;
    width: 100%;
    margin-block: var(--sameContextGap);
  }
}
/* </Companies> */
/* <ProfileText> */
.profileText {
  margin-top: var(--sameContextGap);
  margin-bottom: var(--sectionGap);
  padding: 0 var(--sameContextGap) 0 var(--sameContextGap);
}
.profileText h1 {
  text-align: center;
}
.profileText article > div {
  padding: 0 var(--sameContextGap);
}
.profileText article > div > p:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 905px) {
  .profileText {
    margin-bottom: var(--differentContextGap);
  }
}
/* </ProfileText> */
/* <prices> */
.prices {
  margin-bottom: var(--sectionGap);
}
.prices .pricesContainer {
  display: flex;
  width: 100%;
  /* .col-4
  *  padding: calc(var(--sameContextGap) * 1.5)
  *  margin: var(--sameContextGap)
  *  border: solid var(--borderSize) var(--second)
  *  border-radius: var(--borderRadius)
  *  font-size: 1.2rem
  *  &:first-of-type
  *      border-color: var(--prim)
  *  &:nth-of-type(2)
  *      border-color: var(--prim)
  *      background: var(--prim)
  *      color: var(--neutral)
  *  &:nth-of-type(3)
  *      border-color: var(--second)
  *      background: var(--second)
  *      color: var(--neutral)
  *  p
  *      font-size: 1.2rem */
}
.prices .pricesContainer .boxContainer {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.prices .pricesContainer .box {
  padding: calc(var(--sameContextGap) * 1.5);
  margin: var(--sameContextGap);
  border: solid var(--borderSize) var(--second);
  border-radius: var(--borderRadius);
  flex-grow: 1;
}
.prices .pricesContainer .box p {
  font-size: 1.2rem;
}
.prices .pricesContainer .box .boxPrice {
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.5em;
  padding: calc(var(--sameContextGap) * 0.5) var(--sameContextGap);
  border-radius: var(--borderRadius);
  margin-bottom: 0;
}
.prices .pricesContainer .box.b1 {
  border-color: var(--prim);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0px 0px 15px -10px var(--prim);
}
.prices .pricesContainer .box.b1 > div h3 {
  margin-top: var(--sameContextGap);
}
.prices .pricesContainer .box.b1 > div:first-of-type h3 {
  margin-top: 0;
}
.prices .pricesContainer .box.b2 {
  border-color: var(--prim);
  background: var(--prim);
  color: var(--neutral);
}
.prices .pricesContainer .box.b2 .boxPrice {
  background: var(--neutral);
  color: var(--prim);
}
.prices .pricesContainer .box.b3 {
  border-color: var(--second);
  background: var(--second);
  color: var(--neutral);
}
.prices .pricesContainer .box.b3 .boxPrice {
  background: var(--neutral);
  color: var(--prim);
}

@media (max-width: 905px) {
  .prices {
    margin-bottom: var(--differentContextGap);
  }
  .prices .pricesContainer {
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column-reverse;
  }
  .prices .pricesContainer .boxContainer {
    max-width: 500px;
  }
}
/* </prices> */
/* <contact> */
.contactSection {
  margin-bottom: var(--sectionGap);
}
.contactSection .container {
  width: 100%;
}
.contactSection .container .infoContainer {
  padding-right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contactSection .container .infoContainer .infoBox {
  border: var(--second) solid var(--borderSize);
  background: var(--second);
  color: var(--neutral);
  padding: calc(var(--sameContextGap) * 1.5);
  border-radius: var(--borderRadius);
  margin-bottom: var(--sameContextGap);
  flex-grow: 1;
}
.contactSection .container .infoContainer .infoBox ul {
  padding-left: calc(var(--sameContextGap) * 1);
}
.contactSection .container .infoContainer .infoBox ul li {
  margin-bottom: var(--sameContextGap);
}
.contactSection .container .infoContainer .infoBox ul li:last-of-type {
  margin-bottom: 0;
}
.contactSection .container .infoContainer .linkContainer {
  display: flex;
  flex-direction: column;
}
.contactSection .container .infoContainer .linkContainer .linkBox {
  margin-bottom: var(--sameContextGap);
}
.contactSection .container .infoContainer .linkContainer .linkBox:last-of-type {
  margin-bottom: 0;
}
.contactSection .container form {
  /* width: 100% */
  padding-left: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.contactSection .container form div {
  display: flex;
  flex-direction: column-reverse;
}
.contactSection .container form div.messageContainer {
  flex-grow: 1;
}
.contactSection .container form div input, .contactSection .container form div textarea {
  display: block;
  border: solid var(--second) var(--borderSize);
  border-radius: 0 0 var(--borderRadius) var(--borderRadius);
  border-top: none;
  background: var(--neutral);
  outline: none !important;
  transition: var(--quickTransition);
  resize: none;
}
.contactSection .container form div input:focus, .contactSection .container form div textarea:focus {
  border-color: var(--prim);
}
.contactSection .container form div input:focus + label, .contactSection .container form div textarea:focus + label {
  border-color: var(--prim);
}
.contactSection .container form div input:hover, .contactSection .container form div textarea:hover {
  border-color: var(--prim);
}
.contactSection .container form div input:hover + label, .contactSection .container form div textarea:hover + label {
  border-color: var(--prim);
}
.contactSection .container form div textarea {
  padding: calc(var(--sameContextGap) / 2) calc(var(--sameContextGap));
  font-size: 1.2em;
  margin-bottom: var(--sameContextGap);
  flex-grow: 1;
  min-height: 30vh;
}
.contactSection .container form div label {
  display: block;
  border: solid var(--second) var(--borderSize);
  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
  border-bottom: none;
  transition: var(--quickTransition);
  padding: calc(var(--sameContextGap) / 3) calc(var(--sameContextGap));
  cursor: text;
}
.contactSection .container form button {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  padding-left: var(--differentContextGap);
  padding-right: var(--differentContextGap);
}

@media (max-width: 905px) {
  .contactSection {
    margin-bottom: var(--differentContextGap);
  }
  .contactSection .container form {
    padding-right: 0;
    margin-bottom: var(--differentContextGap);
  }
  .contactSection .container form textarea {
    height: 30vh;
  }
  .contactSection .container > div {
    padding-left: 0;
  }
  .contactSection .container > div .infoBox {
    margin-bottom: var(--sameContextGap);
    max-width: 500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
/* </contact> */
/* <Category Title> */
.categoryTitle {
  padding-top: var(--sameContextGap);
  /* padding-right: var(--sameContextGap) */
  /* padding-left: var(--sameContextGap) */
  display: flex;
  align-items: center;
  color: var(--prim);
}
.categoryTitle span {
  font-size: inherit;
  margin-left: var(--sameContextGap);
  color: var(--second);
}
.categoryTitle span:first-of-type {
  margin-left: 0;
  color: var(--prim);
}
.categoryTitle::before, .categoryTitle::after {
  content: "";
  display: block;
  height: var(--borderSize);
  width: 50%;
  background: var(--second);
  border-radius: var(--borderRadius);
}
.categoryTitle::before {
  margin-right: var(--sameContextGap);
}
.categoryTitle::after {
  margin-left: var(--sameContextGap);
}

/* </Category Title> */
/* <CV> */
.cv {
  margin-bottom: var(--sectionGap);
  position: relative;
}
.cv::before {
  content: "";
  display: block;
  height: 80%;
  width: 100%;
  position: absolute;
  top: 15%;
  left: 0;
  background: linear-gradient(to right, var(--neutral) var(--sameContextGap), transparent calc(var(--sameContextGap) + 5px), transparent calc(100% - (5px + var(--sameContextGap))), var(--neutral) calc(100% - var(--sameContextGap)));
  opacity: 0.5;
  z-index: 100;
  pointer-events: none;
}
.cv > .qualificationsContainer {
  padding-top: var(--sameContextGap);
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.cv > .qualificationsContainer::before, .cv > .qualificationsContainer::after {
  content: "";
  display: block;
  min-width: 25%;
  box-sizing: border-box;
  border: solid var(--second) var(--borderSize);
  margin-bottom: var(--sameContextGap);
  opacity: 0.5;
}
.cv > .qualificationsContainer::before {
  border-left: none;
  border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
}
.cv > .qualificationsContainer::after {
  border-right: none;
  border-radius: var(--borderRadius) 0 0 var(--borderRadius);
}

.controls {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--sameContextGap);
}
.controls .arrow {
  width: 0.75em;
  margin: 0 var(--sameContextGap);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.controls .arrow svg {
  transition: var(--quickTransition);
  fill: var(--second);
}
.controls .arrow:hover svg {
  fill: var(--prim);
}
.controls .dotContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.controls .dotContainer .dot {
  width: var(--sameContextGap);
  padding: calc(var(--sameContextGap) / 2) calc(var(--sameContextGap) / 4);
  cursor: pointer;
}
.controls .dotContainer .dot:hover::after {
  background: var(--prim);
}
.controls .dotContainer .dot.selected::after {
  background: var(--prim);
}
.controls .dotContainer .dot::after {
  content: "";
  display: block;
  width: calc(var(--sameContextGap) / 2);
  height: calc(var(--sameContextGap) / 2);
  border-radius: 50%;
  background: var(--second);
  transition: var(--quickTransition);
}

.titleHours {
  display: flex;
  flex-wrap: wrap;
}
.titleHours div {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}
.titleHours div:nth-of-type(3) {
  width: 100%;
}
.titleHours div > p {
  width: auto;
  margin-right: 1em;
  margin-bottom: 0;
}

figure img, figure svg {
  -o-object-fit: contain;
     object-fit: contain;
  height: 1em;
  width: 1em;
  margin-right: 0.5em;
}

.experience {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0 var(--sameContextGap) var(--sameContextGap);
  border-radius: var(--borderRadius);
  align-items: baseline;
  flex-shrink: 0;
  width: calc(50% - var(--sameContextGap) * 2);
}
.experience.selected .experienceContent {
  cursor: auto;
  border-color: var(--prim);
}
.experience.selected .experienceContent h2 {
  color: var(--prim);
}
.experience.selected .experienceContent article {
  color: var(--second);
}
.experience.selected .experienceContent article, .experience.selected .experienceContent .titleHours {
  opacity: 1;
}
.experience:hover .experienceContent {
  border-color: var(--prim);
}
.experience:hover .experienceContent h2 {
  color: var(--prim);
}
.experience:hover .experienceContent article, .experience:hover .experienceContent .titleHours {
  opacity: 1;
}
.experience .experienceContent {
  background: var(--neutral);
  color: var(--second);
  cursor: pointer;
  height: 100%;
  width: 100%;
  border: solid var(--borderSize) var(--second);
  padding: var(--sameContextGap);
  border-radius: var(--borderRadius);
  box-shadow: 0px 0px 15px -10px var(--prim);
  transition: var(--quickTransition);
}
.experience .experienceContent h2 {
  transition: var(--quickTransition);
}
.experience .experienceContent article, .experience .experienceContent .titleHours {
  transition: var(--quickTransition);
  opacity: 0.85;
}
.experience .experienceContent svg {
  fill: var(--second);
}
.experience .experienceContent article {
  padding: 0 var(--sameContextGap);
  margin-bottom: var(--sameContextGap);
}
.experience .experienceContent article > p:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 1628px) {
  .experience {
    width: calc(65% - var(--sameContextGap) * 2);
  }
  .cv > .qualificationsContainer::before, .cv > .qualificationsContainer::after {
    min-width: 17.5%;
  }
}
@media (max-width: 905px) {
  .cv {
    margin-bottom: var(--differentContextGap);
  }
  .cv .qualificationsContainer {
    flex-wrap: wrap;
    padding: 0 var(--sameContextGap);
  }
  .cv .qualificationsContainer::before, .cv .qualificationsContainer::after {
    display: none;
  }
  .cv .qualificationsContainer .experience {
    width: 100%;
    margin: var(--sameContextGap) 0;
  }
  .cv .qualificationsContainer .experience h2 {
    color: var(--prim);
  }
  .cv .qualificationsContainer .experience.selected .experienceContent {
    border-color: var(--second);
  }
  .cv .controls {
    display: none;
  }
}
/* </CV> */
/* <Recommendations> */
.recommendations {
  /* padding-left: var(--sameContextGap) */
  /* padding-right: var(--sameContextGap) */
  margin-bottom: var(--sectionGap);
}
.recommendations .recommendation {
  padding: var(--sameContextGap);
}
.recommendations .recommendation article p:last-of-type {
  margin-block: 0;
}

/* </Recommendations> */
/* <footer> */
footer {
  padding: var(--sameContextGap) 0 var(--differentContextGap);
  background: var(--second);
  color: var(--neutral);
}

/* </footer> *//*# sourceMappingURL=style.css.map */