:root{
  --scale-prop: 10;
}
svg * {
  transition: all 2s;
  user-select: none;
}
svg {
  width:100%
}
svg .triangle { 
  transform-box: fill-box;
}
.button:hover {
  cursor: pointer
}
svg #layer1 :not(#mixedfarmingtable) path, svg #layer1 > g:not(#mixedfarmingtable) g {
  transform-box: fill-box;
	transform-origin: center;
}

#triangles {
  transform: matrix(0.99526275,0,0,0.99869911,0.39392041,-200.9785) scale(1) rotate(0deg);
  transform-box: fill-box;
	transform-origin: center;
}
/* TABLE */
#mixedfarmingtable {
	transform: translateY(50px);
}
#triangles.forestry ~ #mixedfarmingtable,
#triangles.livestock ~ #mixedfarmingtable,
#triangles.arable ~ #mixedfarmingtable,
#triangles.arableagroforestry ~ #mixedfarmingtable,
#triangles.silvopastoral ~ #mixedfarmingtable,
#triangles.mixedfarming ~ #mixedfarmingtable,
#triangles.agrosilvopastoral ~ #mixedfarmingtable {
	transform: translateY(-30px);
  opacity: 1 !important;
  fill-opacity: 1 !important;
}

/* Forestry */
#triangles.forestry :nth-child(3) {
  transform: scale(var(--scale-prop)) translateY(10px) !important;
}
#triangles.forestry :nth-child(1),
#triangles.forestry :nth-child(2){
  transform: scale(0) !important;
}
#triangles.forestry ~ g:not(#forestry):not(#mixedfarmingtable) {
  opacity: 0;
  fill-opacity: 0;
  stroke-opacity: 0;
  pointer-events: none;
}
/* background but */
#triangles.forestry ~ #forestry path {
  transition-duration: .1s;
  opacity: 0 !important;
}

/* Livestock */
#triangles.livestock :nth-child(1) {
  transform: scale(var(--scale-prop)) translateY(-26.95px) !important;
}
#triangles.livestock :nth-child(2),
#triangles.livestock :nth-child(3){
  transform: scale(0) !important;
}
#triangles.livestock ~ g:not(#livestock):not(#mixedfarmingtable) {
  opacity: 0;
  fill-opacity: 0;
  stroke-opacity: 0;
  pointer-events: none;
}

/* position but */
#triangles.livestock ~ #livestock {
  transform: translate(-48px, -72.5px);
}
/* background but */
#triangles.livestock ~ #livestock path {
  transition: none !important;
  opacity: 0 !important;
}

/* Arable */
#triangles.arable :nth-child(2) {
  transform: scale(var(--scale-prop)) translateY(-26.95px) !important;
}
#triangles.arable :nth-child(1),
#triangles.arable :nth-child(3){
  transform: scale(0) !important;
}
#triangles.arable ~ g:not(#arable):not(#mixedfarmingtable) {
  opacity: 0;
  fill-opacity: 0;
  stroke-opacity: 0;
  pointer-events: none;
}
#triangles.arable ~ #arable {
  transform: translate(44px, -72.5px);
}
/* background but */
#triangles.arable ~ #arable path {
  transition: none !important;
  opacity: 0 !important;
}

/* Silvopastoral */

#triangles.silvopastoral path:nth-child(1) {
  transform: rotate(-58deg) scale(var(--scale-prop));
}
#triangles.silvopastoral path:nth-child(2) {
  transform: scale(0);
}
#triangles.silvopastoral path:nth-child(3) {
  transform: rotate(-58deg) scale(var(--scale-prop));
}
/* hide others */
#triangles.silvopastoral ~ g:not(#silvopastoral):not(#mixedfarmingtable):not(#forestry) {
  opacity: 0;
  fill-opacity: 0;
  stroke-opacity: 0;
  pointer-events: none;
}
/* background but */
#triangles.silvopastoral ~ #silvopastoral path {
  transition: none !important;
  opacity: 0 !important;
}
/* position button */
#silvopastoral {
  transform: rotate(0) translate(0px, 0px);
}
#triangles.silvopastoral ~ #silvopastoral {
  transform: rotate(-57deg) translate(-12px, -47px);
}

/* Arable Agroforestry */
#triangles.arableagroforestry path:nth-child(3) {
  transform: scale(var(--scale-prop)) rotate(57deg);
}
#triangles.arableagroforestry path:nth-child(1) {
  transform: scale(0);
}
#triangles.arableagroforestry path:nth-child(2) {
  transform: scale(var(--scale-prop)) rotate(57deg);
}
/* hide others */
#triangles.arableagroforestry ~ g:not(#arableagroforestry):not(#mixedfarmingtable) {
  opacity: 0;
  fill-opacity: 0;
  stroke-opacity: 0;
  pointer-events: none;
}
/* background but */
#triangles.arableagroforestry ~ #arableagroforestry path {
  transition: none !important;
  opacity: 0 !important;
}
/* position button */
#triangles.arableagroforestry ~ #arableagroforestry {
	transform: rotate(57deg) translate(26px, -111px);
}

/* Agrosilvopastoral */
#triangles.agrosilvopastoral path:nth-child(1) {
  transform: scale(var(--scale-prop));
}
#triangles.agrosilvopastoral path:nth-child(2) {
  transform: scale(var(--scale-prop));
}
#triangles.agrosilvopastoral path:nth-child(3) {
  transform: scale(var(--scale-prop));
}
/* hide others */
#triangles.agrosilvopastoral ~ g:not(#agrosilvopastoral):not(#mixedfarmingtable) {
  opacity: 0;
  fill-opacity: 0;
  stroke-opacity: 0;
  pointer-events: none;
}
/* background but */
#triangles.agrosilvopastoral ~ #agrosilvopastoral path {
  transition: none !important;
  opacity: 0 !important;
}
/* position button */
#triangles.agrosilvopastoral ~ #agrosilvopastoral {
	transform: translateY(-48px);
}


/* Mixed Farming */
#triangles.mixedfarming path:nth-child(2) {
  transform: scale(var(--scale-prop));
}
#triangles.mixedfarming path:nth-child(3) {
  transform: scale(0);
}
#triangles.mixedfarming path:nth-child(1) {
  transform: scale(var(--scale-prop));
}
/* hide others */
#triangles.mixedfarming ~ g:not(#mixedfarming):not(#mixedfarmingtable) {
  opacity: 0;
  fill-opacity: 0;
  stroke-opacity: 0;
  pointer-events: none;
}
/* background but */
#triangles.mixedfarming ~ #mixedfarming path {
  transition: none !important;
  opacity: 0 !important;
}
/* position button */
#mixedfarming {
  transform: translate(0px, 0px);
}
#triangles.mixedfarming ~ #mixedfarming {
	transform: translateY(-72px);
}