/* stylelint-disable */
/* stylelint-disable */
/* stylelint-disable */
/* stylelint-disable */
/* stylelint-disable */
/**
* Transforms a given palette color to the transparent version of it
*/
/* stylelint-disable */
/* for these sections we have a common class: animation_item */
.records-animation .animation_item,
.discovery-animation .animation_item,
#tree_chart_animation .animation_item {
  background-image: url("/FP/Assets/Images/CompanyHomePage/React/animations_sprite.webp?v=1");
  display: inline-block;
}

/* Family tree section */
.family_tree_section #tree_chart_animation {
  position: relative;
  width: 555px;
  height: 377px;
  margin: auto 0;
}
.family_tree_section #tree_chart_animation .parents_connector {
  position: absolute;
  top: 22px;
  width: 20px;
}
.family_tree_section #tree_chart_animation .parents_connector.mother_connector {
  right: 117px;
}
.family_tree_section #tree_chart_animation .parents_connector.father_connector {
  left: 117px;
}
.family_tree_section #tree_chart_animation .parents_connector .horizontal_line {
  position: absolute;
  border-top: 1px solid #fff;
  width: 20px;
  height: 1px;
}
.family_tree_section #tree_chart_animation .parents_connector .vertical_line {
  position: absolute;
  left: 10px;
  border-left: 1px solid #fff;
  width: 1px;
  height: 60px;
}
.family_tree_section #tree_chart_animation .mother_father_connector {
  top: 200px;
  left: 250px;
  width: 56px;
  z-index: -1;
}
.family_tree_section #tree_chart_animation .mother_father_connector .horizontal_line {
  width: 56px;
}
.family_tree_section #tree_chart_animation .mother_father_connector .vertical_line {
  left: 27px;
  height: 180px;
}
.family_tree_section #tree_chart_animation #father_parents {
  position: absolute;
  left: 75px;
  top: 0;
  background-position: -524px -709px;
  width: 106px;
  height: 43px;
}
.family_tree_section #tree_chart_animation #mother_parents {
  position: absolute;
  right: 75px;
  top: 0;
  background-position: -633px -709px;
  width: 106px;
  height: 43px;
}
.family_tree_section #tree_chart_animation .parent_container {
  position: absolute;
  top: 75px;
  display: inline-block;
  border-radius: 50%;
  background: white;
  width: 250px;
  height: 250px;
  overflow: hidden;
}
.family_tree_section #tree_chart_animation .parent_father_container {
  left: 0;
}
.family_tree_section #tree_chart_animation .parent_mother_container {
  right: 0;
}
.family_tree_section #tree_chart_animation #mother_container {
  position: relative;
  left: 23px;
  top: 34px;
}
.family_tree_section #tree_chart_animation #mother_container #mother {
  position: relative;
  background-position: -266px -496px;
  width: 260px;
  height: 261px;
}
.family_tree_section #tree_chart_animation #father_container {
  position: relative;
  left: 0;
  top: 22px;
}
.family_tree_section #tree_chart_animation #father_container #father {
  background-position: -2px -498px;
  width: 260px;
  height: 261px;
  position: relative;
}

/* Records section */
.records_section .records-animation {
  position: relative;
  margin: 28px 0 0 0;
}
.records_section .records-animation #records_animation {
  position: relative;
  width: 1360px;
  height: 300px;
  margin: auto 0 70px 0;
  overflow-x: hidden;
}
.records_section .records-animation #records_animation > div {
  position: absolute;
}
.records_section .records-animation #records_animation #passport_record {
  left: 220px;
  top: 20px;
  background-position: -449px -263px;
  width: 168px;
  height: 212px;
  z-index: 4;
}
.records_section .records-animation #records_animation #census_record {
  left: 350px;
  background-position: -309px -4px;
  width: 317px;
  height: 255px;
  z-index: 3;
}
.records_section .records-animation #records_animation #newspapers_record {
  left: 1050px;
  background-position: -2px -2px;
  width: 302px;
  height: 264px;
  z-index: 6;
}
.records_section .records-animation #records_animation #id_man_record {
  left: 610px;
  top: 10px;
  background-position: -309px -264px;
  width: 136px;
  height: 200px;
  z-index: 7;
}
.records_section .records-animation #records_animation #id_woman_record {
  left: 850px;
  top: 22px;
  background-position: -619px -281px;
  width: 232px;
  height: 180px;
  z-index: 5;
}
.records_section .records-animation #records_animation #railway_record {
  left: 0;
  background-position: -4px -270px;
  width: 268px;
  height: 223px;
  z-index: 1;
}
.records_section .records-animation #records_animation #letter_record {
  left: 720px;
  background-position: -630px -2px;
  width: 225px;
  height: 277px;
  z-index: 2;
}

/* Discovery section */
.discovery_section .discovery-animation {
  position: relative;
  height: 347px;
  width: 400px;
  margin: 0 auto 0 auto;
}
.discovery_section .discovery-animation #box_front {
  position: absolute;
  left: 65px;
  top: 140px;
  background-position: -522px -496px;
  width: 282px;
  height: 213px;
  z-index: 10;
}
.discovery_section .discovery-animation #box_bg {
  position: absolute;
  left: 72px;
  top: 100px;
  background-position: 0 -907px;
  width: 245px;
  height: 87px;
  z-index: 0;
}
.discovery_section .discovery-animation #box_open_back {
  position: absolute;
  left: 190px;
  top: 56px;
  background-position: -243px -906px;
  width: 155px;
  height: 86px;
  z-index: 1;
}
.discovery_section .discovery-animation #box_open_front {
  position: absolute;
  left: 44px;
  top: 80px;
  background-position: -398px -926px;
  width: 152px;
  height: 106px;
  z-index: 11;
}
.discovery_section .discovery-animation #box_photo_family {
  position: absolute;
  left: 210px;
  top: 43px;
  background-position: -633px -759px;
  width: 127px;
  height: 97px;
  z-index: 7;
  transform: rotate(-21deg);
}
.discovery_section .discovery-animation #box_photo_id {
  position: absolute;
  left: 202px;
  top: -25px;
  background-position: -760px -760px;
  width: 75px;
  height: 107px;
  z-index: 6;
  transform: rotate(29deg);
}
.discovery_section .discovery-animation #box_photo_table {
  position: absolute;
  left: 210px;
  top: -68px;
  background-position: -686px -866px;
  width: 139px;
  height: 113px;
  z-index: 5;
  transform: rotate(-32deg);
}
.discovery_section .discovery-animation #box_photo_portrait {
  position: absolute;
  left: 37px;
  top: -66px;
  background-position: -428px -843px;
  width: 97px;
  height: 82px;
  z-index: 9;
  transform: rotate(0deg);
}
.discovery_section .discovery-animation #box_photo_people {
  position: absolute;
  left: -7px;
  top: -9px;
  background-position: -428px -759px;
  width: 113px;
  height: 84px;
  z-index: 8;
  transform: rotate(-16deg);
}
.discovery_section .discovery-animation #box_photo_cert {
  position: absolute;
  left: 68px;
  top: -126px;
  background-position: -542px -759px;
  width: 92px;
  height: 107px;
  z-index: 7;
  transform: rotate(2deg);
}
.discovery_section .discovery-animation #box_photo_blue {
  position: absolute;
  left: 60px;
  top: -149px;
  background-position: -550px -866px;
  width: 136px;
  height: 116px;
  z-index: 6;
  transform: rotate(0deg);
}
.discovery_section .discovery-animation .box_star {
  position: absolute;
  background-position: -740px -707px;
  width: 28px;
  height: 29px;
  z-index: 2;
}
.discovery_section .discovery-animation #box_star1 {
  left: 6px;
  top: 145px;
  z-index: 6;
  transform: rotate(0deg) scale(0.5);
}
.discovery_section .discovery-animation #box_star2 {
  left: 6px;
  top: -23px;
  z-index: 8;
  transform: rotate(29deg) scale(1);
}
.discovery_section .discovery-animation #box_star3 {
  left: 167px;
  top: 40px;
  z-index: 8;
  transform: rotate(18deg) scale(1);
}
.discovery_section .discovery-animation #box_star4 {
  left: 314px;
  top: -106px;
  z-index: 8;
  transform: rotate(26deg) scale(0.6);
}
.discovery_section .discovery-animation #box_star5 {
  left: 345px;
  top: 10px;
  z-index: 8;
  transform: rotate(2deg) scale(0.6);
}
.discovery_section .discovery-animation #box_star6 {
  left: 357px;
  top: 58px;
  z-index: 8;
  transform: rotate(7deg) scale(0.8);
}
.discovery_section .discovery-animation > div {
  margin: 0 auto;
}