/*Show and hide column*/
.details{
  display:none;
}

/*Green Button Primary - should be in <a> tag*/
.green-button a{
  /*Display*/
  display: inline-flex;
  padding: 8px 16px;
  align-items: center;
  gap: 10px;
  /*Style*/
  border-radius: 4px;
  border: 2px solid var(--Colours-Colours-Tinted-Shade-Green, #B5C89D);
  background: var(--Colours-Tinted-Colours-Tint-Green, #E7F0DB);
  box-shadow: 3px 3px 0px 0px #B3BFA3;
  text-decoration: none;
  /*Text*/
  color: var(--Text-Dark-Grey, #1B1B1B);
  text-align: center;
  /* Body */
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

}
/*Green Hover*/
.green-button a:hover{
  background: var(--Colours-Green, #CEE1B6);
  text-decoration: underline;
}
/*Green Click*/
.green-button a:active{
  background: var(--Colours-Colours-Tinted-Shade-Green, #B5C89D);
  box-shadow: 0px 0px 0px 0px #B3BFA3;
}



/*Pink Button Primary - should be in <a> tag*/
.pink-button a{
  /*Display*/
  display: inline-flex;
  padding: 8px 16px;
  align-items: center;
  gap: 10px;
  /*Style*/
  border-radius: 4px;
  border: 2px solid var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
  background: var(--Colours-Tinted-Colours-Tint-Pink, #FFDEDE);
  box-shadow: 3px 3px 0px 0px #E7B0B0;
  text-decoration: none;
  /*Text*/
  color: var(--Text-Dark-Grey, #1B1B1B);
  text-align: center;
  /* Body */
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

}
/*Pink Hover*/
.pink-button a:hover{
  background: var(--Colours-Pink, #FFBDBD);
  text-decoration: underline;
}
/*Pink Click*/
.pink-button a:active{
  background: var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
  box-shadow: 0px 0px 0px 0px #E5A3A3;
}


/*Orange Button Primary - should be in <a> tag*/
.orange-button a{
  /*Display*/
  display: inline-flex;
  padding: 8px 16px;
  align-items: center;
  gap: 10px;
  /*Style*/
  border-radius: 4px;
  border: 2px solid var(--Colours-Colours-Tinted-Shade-Orange, #E1AD86);
  background: var(--Colours-Tinted-Colours-Tint-Orange, #FDE3CF);
  box-shadow: 3px 3px 0px 0px #E1AD86;
  text-decoration: none;
  /*Text*/
  color: var(--Text-Dark-Grey, #1B1B1B);
  text-align: center;
  /* Body */
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

}
/*Orange Hover*/
.orange-button a:hover{
  background: var(--Colours-Orange, #FBC6A0);
  text-decoration: underline;
}
/*Orange Click*/
.orange-button a:active{
  background: var(--Colours-Colours-Tinted-Shade-Orange, #E1AD86);
  box-shadow: 0px 0px 0px 0px #E1AD86;
}


/*Grey Button - should be in <a> tag*/
.grey-button a{
  /*Display*/
  display: flex;
  width: 46px;
  height: 32px;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  /*Style*/
  border-radius: 4px;
  border: 2px solid var(--Colours-Colours-Tinted-Shaded-Grey, #D9D9D9);
  background: var(--Colours-Tinted-Colours-Tint-Grey, #F9F9F9);
  box-shadow: 3px 3px 0px 0px #D9D9D9;
  text-decoration: none;
  /*Text*/
  color: var(--Text-Dark-Grey, #1B1B1B);
  text-align: center;
  /* Body */
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

}
/*grey Hover*/
.grey-button a:hover{
  background: var(--Colours-Grey, #F2F2F2);
  box-shadow: 3px 3px 0px 0px #D9D9D9;
}
/*grey Click*/
.grey-button a:active{
  background: var(--Colours-Colours-Tinted-Shaded-Grey, #D9D9D9);
  box-shadow: 0px 0px 0px 0px #D9D9D9;
}

/*Carousel blocks*/
.carousel-blocks{
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  position: relative;
  border-radius: 4px;
  padding: 16px;
  border: 2px solid var(--Colours-Grey, #F2F2F2);
  background: var(--Colours-Tinted-Colours-Tint-Grey, #F9F9F9);
  box-shadow: 4px 4px 0px 0px #D9D9D9;

  color: #000;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: auto;
}

.align-button{
  position: absolute;
  right:0px;
  bottom: 0px;
  padding:16px;
}

/*Menu Home- should be in <a> tag*/
.menu-home a{
  /*Display*/
  display: flex;
  width: 70px;
  height: 60px;
  padding: 11px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  /*Style*/
  border-radius: 4px;
  border: 2px solid var(--Colours-Colours-Tinted-Shade-Orange, #E1AD86);
  background: var(--Colours-Tinted-Colours-Tint-Orange, #FDE3CF);
  box-shadow: 3px 3px 0px 0px #E1AD86;
  text-decoration: none;
  /*Text*/
  color: var(--Text-Dark-Grey, #1B1B1B);
  text-align: center;
  /* Body */
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

}
/*Orange Hover*/
.menu-home a:hover{
  background: var(--Colours-Orange, #FBC6A0);
  text-decoration: underline;
}
/*Orange Click*/
.menu-home a:active{
  background: var(--Colours-Colours-Tinted-Shade-Orange, #E1AD86);
  box-shadow: 0px 0px 0px 0px #E1AD86;
}


/*Home Items - should be in <a> tag*/
.menu-item a{
  /*Display*/
  display: inline-flex;
  height: 60px;
  padding: 16px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  /*Style*/
  border-radius: 4px;
  border: 2px solid var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
  background: var(--Colours-Tinted-Colours-Tint-Pink, #FFDEDE);
  box-shadow: 3px 3px 0px 0px #E7B0B0;
  text-decoration: none;
  /*Text*/
  color: var(--Text-Dark-Grey, #1B1B1B);
  text-align: center;
  /* Body */
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

}
/*Pink Hover*/
.menu-item a:hover{
  background: var(--Colours-Pink, #FFBDBD);
  text-decoration: underline;
}
/*Pink Click*/
.menu-item a:active{
  background: var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
  box-shadow: 0px 0px 0px 0px #E5A3A3;
}


/*Menu Item Active - should be in <a> tag*/
.menu-item-active a{
  /*Display*/
  display: inline-flex;
  height: 60px;
  padding: 16px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  /*Style*/
  border-radius: 4px;
  border: 2px solid var(--Colours-Colours-Tinted-Shade-Green, #B5C89D);
  background: var(--Colours-Tinted-Colours-Tint-Green, #E7F0DB);
  box-shadow: 3px 3px 0px 0px #B3BFA3;
  text-decoration: none;
  /*Text*/
  color: var(--Text-Dark-Grey, #1B1B1B);
  text-align: center;
  /* Body */
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

}
/*Green Hover*/
.menu-item-active a:hover{
  background: var(--Colours-Green, #CEE1B6);
  text-decoration: underline;
}
/*Green Click*/
.menu-item-active a:active{
  background: var(--Colours-Colours-Tinted-Shade-Green, #B5C89D);
  box-shadow: 0px 0px 0px 0px #B3BFA3;
}
.page-title-text{
  color: #000;
  /* Title */
  font-family: "Inria Serif";
  font-size: 42px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.page-subheading-text{
  color: #000;
  /* Subtitle */
  font-family: "Inria Serif";
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/*Page Title Description Container*/
.page-title-description{
  padding: 32px 150px;
  background: var(--Colours-Tinted-Colours-Tint-Beige, #FCF6E8);
  width: 100%;

}

.page-body{
  color: #000;

  /* Body */
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}


/*Grey Shadow - should be in <img> tag*/
.grey-shadow{
  /*Style*/
  border-radius: 4px;
  border: 2px solid var(--Colours-Colours-Tinted-Shaded-Grey, #D9D9D9);
  background: var(--Colours-Tinted-Colours-Tint-Grey, #F9F9F9);
  box-shadow: 3px 3px 0px 0px #D9D9D9;
  flex-shrink: 0;
  width: 100%;
}