.home .site-header .logo .goodfellow .letter {
  transform: translateY(-100px);
  transform-origin: 100% 50%;
  opacity: 0;
}
.home .site-header .logo .steven {
  transform: scale(0) translateX(300px);
  transform-origin: 50% 50%;
  opacity: 0;
}
.home .site-header .logo .goodfellow line line, .home .site-header .logo .steven line line {
  fill: none;
  stroke: #000;
  stroke-width: 160px;
  stroke-dashoffset: 15px;
}
.home .site-header .logo .strapline {
  opacity: 0;
  transform-origin: 50% 80%;
}
.home .site-header .logo .ampersand-underline {
  transform: translateX(-300px);
  opacity: 0;
  transform-origin: 50px 298px;
  will-change: transform;
}
.home .site-header .logo .letter-ampersand {
  transform: translateX(-300px);
  opacity: 0;
}
.home .site-header .logo .o-underline line {
  opacity: 0;
}
.animation-wrapper {
  will-change: transform;
  transition: transform 0.2s ease-out;
}
.site-intro {
  overflow: hidden;
  position: relative;
  min-height: 960px;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 156, 222, 1);
  padding: 120px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media all and (min-width: 2px) and (max-width: 781px)  {
  .site-intro {
    min-height: 100vh;
    height: auto;
    padding: 80px 0 180px;
    flex-direction: column;
  }
}
.site-intro:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: -moz-linear-gradient(45deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.2) 100%);
  background: -webkit-linear-gradient(45deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.2) 100%);
  background: linear-gradient(45deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.2) 100%);
}
.site-intro .content {
  will-change: transform;
  transition: transform 0.2s ease-out;
  max-width: var(--wrapper-width);
  width: 100%;
}
.site-intro span {
  font-size: 1.625rem;
  font-weight: 400;
  font-family: "verveine";
  display: inline-block;
  margin: 0 20px;
  color: white;
}
@media all and (max-width: 1220px) {
  .site-intro span {
    font-size: 1.625rem;
  }
}
@media all and (max-width: 640px) {
  .site-intro span {
    font-size: 1.375rem;
  }
}
.site-intro .button {
  font-size: 0.875rem;
  float: none;
  display: inline-block;
  padding: 12px 25px;
}
.site-intro .button svg {
  display: inline-block;
  height: 40px;
  vertical-align: middle;
  margin-right: 10px;
  backface-visibility: hidden;
}
.site-intro .title {
  max-width: var(--wrapper-width);
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
@media all and (min-width: 2px) and (max-width: 1220px)  {
  .site-intro .title {
    padding: 0 20px;
  }
}
@media all and (min-width: 2px) and (max-width: 781px)  {
  .site-intro .title {
    top: 47%;
    max-width: 95%;
    width: 95%;
    flex-direction: column;
  }
}
.site-intro .title .title-wrap {
  max-width: 47%;
  order: 1;
  text-align: left;
}
@media all and (min-width: 2px) and (max-width: 781px)  {
  .site-intro .title .title-wrap {
    order: 2;
    text-align: center;
    max-width: 100%;
  }
}
.site-intro .title .intro-slider-wrap {
  order: 2;
  width: 628px;
  max-width: 47%;
}
@media all and (min-width: 2px) and (max-width: 960px)  {
  .site-intro .title .intro-slider-wrap {
    width: 500px;
  }
}
@media all and (min-width: 2px) and (max-width: 781px)  {
  .site-intro .title .intro-slider-wrap {
    position: relative;
    left: 0;
    width: 80%;
    max-width: 80%;
    order: 1;
    margin: 0;
  }
}
@keyframes popIn {
  0% {
    transform: scale(0.75);
    opacity: 0;
  }
  5% {
    transform: scale(1.1);
    opacity: 1;
  }
  10% {
    transform: scale(1);
    opacity: 1;
  }
  95% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.75);
    opacity: 0;
  }
}
.site-intro .title .intro-slider-wrap .image-wrap {
  position: relative;
  overflow: visible;
}
.site-intro .title .intro-slider-wrap .swiper-container {
  overflow: visible;
}
.site-intro .title .intro-slider-wrap .swiper-wrapper {
  display: flex;
}
.site-intro .title .intro-slider-wrap .slide {
  padding: 20px;
}
.site-intro .title .intro-slider-wrap img {
  transform: scale(0.75);
  transition-timing-function: ease-out;
  transition-duration: 0.3s;
  transition-delay: 0;
  opacity: 0;
}
.site-intro .title .intro-slider-wrap .swiper-slide-active img, .site-intro .title .intro-slider-wrap .swiper-slide-duplicate-active img {
  transform: scale(1);
  opacity: 1;
}
.site-intro .title .intro-slider-wrap .swiper-slide-active .deisgnerOption, .site-intro .title .intro-slider-wrap .swiper-slide-duplicate-active .deisgnerOption {
  transition-delay: 0.35s;
}
.site-intro .title .intro-slider-wrap .swiper-slide-active .textOption, .site-intro .title .intro-slider-wrap .swiper-slide-duplicate-active .textOption {
  transition-delay: 0.75s;
}
.site-intro .title .intro-slider-wrap .swiper-slide-active .colourOption, .site-intro .title .intro-slider-wrap .swiper-slide-duplicate-active .colourOption {
  transition-delay: 0.95s;
}
.site-intro .title .intro-slider-wrap .swiper-slide-active .imageOption, .site-intro .title .intro-slider-wrap .swiper-slide-duplicate-active .imageOption {
  transition-delay: 1.25s;
}
.site-intro .title .intro-slider-wrap .imageOption, .site-intro .title .intro-slider-wrap .colourOption, .site-intro .title .intro-slider-wrap .textOption {
  position: absolute;
  z-index: 2;
}
.site-intro .title .intro-slider-wrap .imageOption {
  left: -17%;
  bottom: 10%;
  width: 30%;
}
.site-intro .title .intro-slider-wrap .colourOption {
  right: 30%;
  bottom: -15%;
  width: 22%;
}
@media all and (min-width: 2px) and (max-width: 781px)  {
  .site-intro .title .intro-slider-wrap .colourOption {
    right: -11%;
  }
}
.site-intro .title .intro-slider-wrap .textOption {
  left: 56%;
  top: -17%;
  width: 28%;
}
.site-intro .title h2 {
  font-family: "filson-soft";
  font-weight: 700;
  color: white;
  line-height: 3.4rem;
  font-size: 3.2rem;
}
@media all and (min-width: 2px) and (max-width: 1220px)  {
  .site-intro .title h2 {
    line-height: normal;
    font-size: 2.5rem;
  }
}
@media all and (min-width: 2px) and (max-width: 781px)  {
  .site-intro .title h2 {
    line-height: 1.2;
    font-size: 1.2rem;
    margin: 15px 0;
  }
}
.site-intro .title p {
  font-size: 1.0625rem;
  color: white;
  margin: 0 0 30px;
  max-width: 100%;
}
@media all and (max-width: 1220px) {
  .site-intro .title p {
    font-size: 1.0625rem;
  }
}
@media all and (max-width: 640px) {
  .site-intro .title p {
    font-size: 1rem;
  }
}
@media all and (min-width: 2px) and (max-width: 781px)  {
  .site-intro .title p {
    font-size: 0.95rem;
    margin: 0 0 10px;
    line-height: 1.2;
  }
}
.site-intro .cutout {
  position: absolute;
  backface-visibility: hidden;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 200%;
  z-index: 9;
  pointer-events: none;
  min-width: 100%;
}
.site-intro .cutout svg {
  display: block;
  width: 100%;
}
.site-intro .cutout path {
  fill: rgba(0, 156, 222, 1);
}
.site-intro .david.with-pancakes, .site-intro .margaret-with-spoon {
  opacity: 0;
  width: 400px;
  position: absolute;
  bottom: -20px;
  right: 0;
  z-index: 11;
  pointer-events: none;
}
@media all and (min-width: 2px) and (max-width: 960px)  {
  .site-intro .david.with-pancakes, .site-intro .margaret-with-spoon {
    width: 250px;
    bottom: -10px;
    right: -20px;
  }
}
@media all and (min-width: 2px) and (max-width: 640px)  {
  .site-intro .david.with-pancakes, .site-intro .margaret-with-spoon {
    width: 180px;
    bottom: -10px;
    right: -20px;
  }
}
.site-intro .margaret-with-spoon {
  right: auto;
  left: 0;
}
@media all and (min-width: 2px) and (max-width: 960px)  {
  .site-intro .margaret-with-spoon {
    left: -20px;
  }
}
.site-intro .scroll-down-discover {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  text-align: center;
}
@media all and (min-width: 2px) and (max-width: 960px)  {
  .site-intro .scroll-down-discover {
    display: none;
  }
}
.site-intro .scroll-down-discover p {
  margin: 10px 0 0;
}
.site-intro .scroll-down-discover .mouse {
  border: 2px solid white;
  border-radius: 60px;
  width: 25px;
  height: 40px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.6;
}
@keyframes mouse {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    transform: translateY(10px);
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}
.site-intro .scroll-down-discover .mouse:after {
  content: "";
  display: block;
  width: 2px;
  height: 7px;
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  background: white;
}
.site-intro .scroll-down-discover .mouse:before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 12px;
  left: calc(50% - 2px);
  opacity: 1;
  animation: mouse 2.5s ease-out infinite;
}
svg {
  display: block;
}
.pink {
  fill: rgba(245, 155, 187, 1);
}
.white {
  fill: white;
}
.blue {
  fill: rgba(0, 114, 206, 1);
}
.clouds {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.clouds svg {
  transform: translateX(100vw);
  max-width: 12%;
  position: absolute;
  left: 0;
}
.clouds svg .st1 {
  fill: #FFF;
}
.clouds svg .st0 {
  fill: rgba(0, 0, 0, 0.1);
}
.rain-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 20;
}
.rain-container .rain-drop {
  display: block;
  position: absolute;
  z-index: 10;
  transform: translateY(0);
  bottom: 0;
}
.rain-container .rain-drop .inner {
  display: block;
  animation: rotateFood 4s infinite linear;
  width: 40px;
  height: 40px;
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(0);
}
.rain-container .rain-drop .inner.donut {
  background-image: url("../images/rain/donut.svg");
}
.rain-container .rain-drop .inner.bread {
  background-image: url("../images/rain/bread.svg");
}
.rain-container .rain-drop .inner.cupcake {
  background-image: url("../images/rain/cupcake.svg");
}
@keyframes rotateFood {
  100% {
    transform: rotate(360deg);
  }
}
.margaret-with-spoon {
  opacity: 0;
}
.margaret-with-spoon svg {
  overflow: visible;
}
.margaret-with-spoon .st0 {
  fill: #1D1D1B;
}
.margaret-with-spoon .st1 {
  fill: #FFFFFF;
}
.margaret-with-spoon .st2 {
  fill: #ffffff;
}
.margaret-with-spoon .hand path {
  fill: none;
  stroke: #1D1D1B;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.margaret-with-spoon .st3 {
  fill: #FBC471;
}
.margaret-with-spoon .spoon {
  transform: rotate(-90deg);
  transform-origin: 29% 86%;
}
.margaret-with-spoon .shadow {
  fill: rgba(0, 0, 0, 0.1);
}
.margaret-with-spoon .background path {
  fill: white;
}
.margaret-with-spoon .fingers-top {
  transform: scaleX(0);
  transform-origin: 26.5% 100%;
}
.margaret-with-spoon .leg {
  transform-origin: 56% 73%;
}
.margaret-with-spoon .head {
  transform-origin: 48% 0;
}
.margaret-with-empire-biscuit {
  opacity: 0;
  pointer-events: none;
}
.margaret-with-empire-biscuit svg {
  overflow: visible;
}
.margaret-with-empire-biscuit .roller {
  transform-origin: 23% 48%;
}
.margaret-with-empire-biscuit .arm {
  transform-origin: 60% 40%;
}
.margaret-with-empire-biscuit .hat {
  transform-origin: 50% 20%;
}
.margaret-holds-on {
  position: absolute;
  right: 27px;
  top: -63px;
  width: 150px;
}
@media all and (min-width: 2px) and (max-width: 960px)  {
  .margaret-holds-on {
    right: 11px;
  }
}
@media all and (min-width: 2px) and (max-width: 640px)  {
  .margaret-holds-on {
    right: 8px;
  }
}
.margaret-holds-on .margaret, .margaret-holds-on .margaret-arms {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.margaret-holds-on .margaret-arms {
  z-index: 2;
}
#cake_designer #size_wrap, #cake_designer #progress, #cake_designer #cake-message, #cake_designer #cake, #cake_designer #cake_background {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
#cake_designer #pointer, #cake_designer #design-cake-icons, #cake_designer #title, #cake_designer #colours, #cake_designer #photo_text, #cake_designer #candles .candle {
  opacity: 0;
  pointer-events: none;
}
#cake_designer #cake_background {
  transform-origin: 220px 220px;
}
#cake_designer #cake {
  transform-origin: 170px 150px;
}
#cake_designer #design-cake-icons {
  transform-origin: 450px 120px;
}
#cake_designer #size_wrap {
  transform-origin: 410px 130px;
}
#cake_designer #colours g, #cake_designer #sizes g {
  cursor: pointer;
  pointer-events: auto;
}
@media all and (min-width: 2px) and (max-width: 781px)  {
  .castle-scene-wrapper.padding-vertical-250 {
    padding: 150px 0 100px;
  }
  .castle-scene-wrapper .col-2 {
    order: 2;
  }
}
.castle-scene-wrapper .castle-scene {
  position: relative;
  height: 350px;
}
@media all and (min-width: 2px) and (max-width: 781px)  {
  .castle-scene-wrapper .castle-scene {
    height: 230px;
    margin: 0 0 80px;
    order: 1;
  }
}
.castle-scene-wrapper .castle, .castle-scene-wrapper .mountains-one, .castle-scene-wrapper .mountains-two, .castle-scene-wrapper .david, .castle-scene-wrapper .margaret, .castle-scene-wrapper .cloud, .castle-scene-wrapper .birds {
  transform-origin: 50% 100%;
}
.castle-scene-wrapper .castle:after, .castle-scene-wrapper .mountains-one:after, .castle-scene-wrapper .mountains-two:after, .castle-scene-wrapper .david:after, .castle-scene-wrapper .margaret:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(100% - 6px);
  bottom: 0;
  width: 120%;
  height: 5%;
  left: -10%;
  right: -10%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.1), rgba(97, 97, 97, 0) 80%);
}
.castle-scene-wrapper .clouds {
  opacity: 0;
}
.castle-scene-wrapper .cloud {
  transform: rotateX(-90deg);
}
.castle-scene-wrapper .castle {
  width: 24%;
  left: 25%;
  bottom: -4px;
  z-index: 3;
  transform: rotateX(-90deg);
}
.castle-scene-wrapper .mountains-one {
  width: 42%;
  left: 0%;
  bottom: -2px;
  z-index: 2;
  transform: rotateX(-90deg);
}
.castle-scene-wrapper .mountains-two {
  width: 60%;
  right: -2%;
  bottom: -8px;
  z-index: 5;
  transform: rotateX(-90deg);
}
.castle-scene-wrapper .bird {
  width: 3%;
  z-index: 6;
  opacity: 0;
}
.castle-scene-wrapper .bird:nth-of-type(1) {
  top: 49%;
  right: 25%;
}
.castle-scene-wrapper .bird:nth-of-type(2) {
  top: 38%;
  right: 15%;
}
.castle-scene-wrapper .bird:nth-of-type(3) {
  top: 43%;
  right: 38%;
}
.castle-scene-wrapper .david {
  width: 15%;
  position: absolute;
  bottom: -24px;
  left: 12%;
  z-index: 10;
  transform: rotate(-3deg) rotateX(-90deg);
}
.castle-scene-wrapper .margaret {
  width: 12%;
  position: absolute;
  bottom: -28px;
  right: 12%;
  z-index: 10;
  transform: rotateX(-90deg);
}
.castle-scene-wrapper .boat-motion {
  width: 250px;
  bottom: -50px;
  left: 0;
  z-index: 15;
}
.castle-scene-wrapper .section-break {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.castle-scene-wrapper .flag {
  transform-origin: 80% 0;
}
.confetti {
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  pointer-events: none;
}
.confetti:nth-child(1n) {
  width: 3px;
  height: 2px;
  background-color: rgba(197, 0, 62, 1);
}
.confetti:nth-child(2n) {
  width: 5px;
  height: 2px;
  background-color: rgba(250, 224, 83, 1);
}
.confetti:nth-child(3n) {
  width: 4px;
  height: 1px;
  background-color: rgba(252, 76, 2, 1);
}
.confetti:nth-child(4n) {
  width: 6px;
  height: 2px;
  background-color: rgba(0, 114, 206, 1);
}
.confetti-wrap {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.david {
  width: 400px;
  position: absolute;
  bottom: -20px;
  right: 0;
  z-index: 11;
}
.david svg {
  overflow: visible;
}
.david .white {
  fill: #FFF;
}
.david .st1 {
  fill: #1D1D1B;
}
.david .st2 {
  fill: #FDD088;
}
.david .st3 {
  fill: #F59A2B;
}
.david .shadow {
  fill: rgba(0, 0, 0, 0.1);
}
.david .body .background {
  fill: #FFF;
}
.david.with-pancakes .pancake-line line {
  fill: none;
  stroke: #000;
  stroke-width: 10px;
  stroke-dashoffset: 65px;
  opacity: 0;
}
.david.with-pancakes .pancake-dot path {
  fill: black;
  opacity: 0;
}
.david.with-pancakes .syrup path {
  opacity: 0;
}
.david.with-pancakes .pancake-colour path, .david.with-pancakes .pancake-outline path {
  transform-origin: 42% 38%;
  transform: translateY(-100px);
  opacity: 0;
}
.david.with-pancakes .pancakes {
  transform-origin: 50% 35%;
}
.david.with-pancakes .dough circle {
  fill: #FDD088;
  opacity: 0;
}
.david.with-pancakes .dough circle:nth-child(odd) {
  fill: #F59A2B;
}
.david.with-pancakes .arm {
  transform-origin: 58.5% 38%;
}
.food-animation-scene {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: visible;
  top: 0;
  left: 0;
}
.food-animation-scene .food-item {
  position: absolute;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  top: 100%;
  opacity: 0;
}
.food-animation-scene .food-item:nth-child(1n) {
  background-image: url("../images/food/bread.svg");
}
.food-animation-scene .food-item:nth-child(2n) {
  background-image: url("../images/food/donut.svg");
}
.food-animation-scene .food-item:nth-child(3n) {
  background-image: url("../images/food/cupcake.svg");
}
.food-animation-scene .food-item:nth-child(4n) {
  background-image: url("../images/food/peh.svg");
}
.food-animation-scene .food-item.v1 {
  left: 8%;
}
.food-animation-scene .food-item.v2 {
  left: 16%;
}
.food-animation-scene .food-item.v3 {
  left: 24%;
}
.food-animation-scene .food-item.v4 {
  left: 32%;
}
.food-animation-scene .food-item.v5 {
  left: 40%;
}
.food-animation-scene .food-item.v6 {
  left: 48%;
}
.food-animation-scene .food-item.v7 {
  left: 56%;
}
.food-animation-scene .food-item.v8 {
  left: 64%;
}
.food-animation-scene .food-item.v9 {
  left: 72%;
}
.food-animation-scene .food-item.v10 {
  left: 80%;
}
.food-animation-scene .food-item.v11 {
  left: 88%;
}
.food-animation-scene .food-item.v12 {
  left: 96%;
}
.david-eggs {
  width: 230px;
  position: absolute;
  bottom: 0;
  right: 0;
}
@media all and (min-width: 2px) and (max-width: 781px)  {
  .david-eggs {
    width: 100px;
    bottom: -55px;
    z-index: 2;
  }
}
.david-eggs svg {
  overflow: visible;
  opacity: 0;
}
.david-eggs svg .top-crack, .david-eggs svg .bottom-crack {
  opacity: 0;
}
.david-eggs svg .arm {
  transform-origin: 65% 39%;
}
.david-eggs svg .egg {
  transform-origin: 27% 28%;
}
.david-eggs svg .top-crack {
  transform-origin: 30% 76%;
}
.david-eggs svg .bottom-crack {
  transform-origin: 50% 100%;
}
.david-hidden {
  width: 140px;
  position: absolute;
  top: 300px;
  left: -140px;
}
@media all and (min-width: 2px) and (max-width: 781px)  {
  .david-hidden {
    width: 60px;
    top: 300px;
    left: -85px;
  }
}
.margaret-hidden {
  width: 135px;
  position: absolute;
  top: 515px;
  right: -135px;
}