.amber-tri-holder {
    width: 256px;
    height: 227px;
    position: absolute;
    z-index: 3;
    opacity: 0;
    transform: rotate(-150deg) scale(0, 0);

    top: 45%;
    left: 50%;
}
.turquoise-tri-holder {
    width: 256px;
    height: 227px;
    position: absolute;
    z-index: 5;
    opacity: 0;
    transform: rotate(140deg) scale(0, 0);

    top: 31%;
    left: 34%;
}
.candy-tri-holder {
    width: 256px;
    height: 227px;
    position: absolute;
    z-index: 2;
    opacity: 0;
    transform: rotate(100deg) scale(0, 0);

    top: 45%;
    left: 20%;
}

.amber-tri-holder2 {
    width: 256px;
    height: 227px;
    position: absolute;
    z-index: 3;
    opacity: 0;
    transform: rotate(-150deg) scale(0, 0);

    top: 45%;
    left: 50%;
}
.turquoise-tri-holder2 {
    width: 256px;
    height: 227px;
    position: absolute;
    z-index: 5;
    opacity: 0;
    transform: rotate(140deg) scale(0, 0);

    top: 31%;
    left: 34%;
}
.candy-tri-holder2 {
    width: 256px;
    height: 227px;
    position: absolute;
    z-index: 2;
    opacity: 0;
    transform: rotate(100deg) scale(0, 0);

    top: 45%;
    left: 20%;
}

.amber-tri-holder8 {
    width: 256px;
    height: 227px;
    position: absolute;
    z-index: 3;
    opacity: 0;
    transform: rotate(-150deg) scale(0, 0);

    top: 45%;
    left: 50%;
}
.turquoise-tri-holder8 {
    width: 256px;
    height: 227px;
    position: absolute;
    z-index: 5;
    opacity: 0;
    transform: rotate(140deg) scale(0, 0);

    top: 31%;
    left: 34%;
}
.candy-tri-holder8 {
    width: 256px;
    height: 227px;
    position: absolute;
    z-index: 2;
    opacity: 0;
    transform: rotate(100deg) scale(0, 0);

    top: 45%;
    left: 20%;
}
/*---- TRANSITIONS ---*/
/*---- TRANSITIONS ---*/
/*---- TRANSITIONS ---*/
.transitions {
	position: fixed;
	bottom: 0px;
	z-index: 9999999;
	width: 100%;
	height: 0px;
}
.transition-candy {
	background: #f54785;
}
.transition-amber {
	background: #ffc107;
}
.transition-turquoise {
	background: #4cc2c4;
}
.transitions.transition-animate {
	top: 0%;
	height: 100vh;
}
.transitions.transition-out {
	top: 0%;
	height: 0%;
}
.transitions-back {
	position: fixed;
	top: 0px;
	z-index: 9999999;
	width: 100%;
	height: 0px;
}
.transitions-back.transition-animate {
	bottom: 100%;
	height: 100vh;
}
.transitions-back.transition-out {
	top: 100%;
	height: 0%;
}
/*---- SLIDE 1: ----*/
.amber-section-1 {
    opacity: 0.8;
    transform: rotate(-50deg) scale(0.55, 0.55);
    top: 45%;
    left: 50%;
}
.turquoise-section-1 {
    opacity: 0.8;
    transform: rotate(4deg) scale(0.85, 1.00);
    top: 31%;
    left: 34%;
}
.candy-section-1 {
    opacity: 0.8;
    transform: rotate(1deg) scale(0.8, 0.8);
    top: 45%;
    left: 18%;
}
/*---- SLIDE 2: ----*/
.amber-section-2 {
    opacity: 0.8;
    transform: rotate(-260deg) scale(0.75, 0.75);
    left: 72%;
    top: 10%;
}
.turquoise-section-2 {
    opacity: 0.8;
    transform: rotate(-20deg) scale(0.85, 1.00);
    top: 82%;
    left: 5%;
}
.candy-section-2 {
    opacity: 0.8;
    transform: rotate(180deg) scale(0.8, 0.8);
    top: 72%;
    left: 15%;
}
/*---- SLIDE 3: ----*/
.amber-section-3 {
    opacity: 0.8;
    transform: rotate(-350deg) scale(0.75, 0.75);
    left: 10%;
    top: -9%;
}
.turquoise-section-3 {
    opacity: 0.8;
    transform: rotate(-20deg) scale(0.85, 1.00);
    top: 82%;
    left: -20%;
}
.candy-section-3 {
    opacity: 0.8;
    transform: rotate(180deg) scale(0.8, 0.8);
    top: 86%;
    left: 4%;
}
/*---- SLIDE 4: ----*/
.amber-section-4 {
    opacity: 0.8;
    transform: rotate(-350deg) scale(0.75, 0.75);
    left: 10%;
    top: -20%;
}
turquoise-section-4 {
    opacity: 0.8;
    transform: rotate(-5deg) scale(0.85, 1.00);
    top: -4%;
    left: 31%;
}
.candy-section-4 {
    opacity: 0.8;
    transform: rotate(180deg) scale(0.8, 0.8);
    top: 110%;
    left: 4%;
}
/*---- SLIDE 5: ----*/
.amber-section-5 {
    opacity: 0.8;
    transform: rotate(-441deg) scale(0.65, 0.65);
    left: 62%;
    top: 15%;
}
.turquoise-section-5 {
    opacity: 0.8;
    transform: rotate(-9deg) scale(0.46, 0.60);
    top: 58%;
    left: 21%;
}
.candy-section-5 {
    opacity: 0.8;
    transform: rotate(55deg) scale(0.45, 0.4);
    top: 83%;
    left: 65%;
}
/*---- SLIDE 6: ----*/
.amber-section-6 {
    opacity: 0.8;
    transform: rotate(-350deg) scale(0.75, 0.75);
    left: 10%;
    top: -20%;
}
turquoise-section-6 {
    opacity: 0.8;
    transform: rotate(-5deg) scale(0.85, 1.00);
    top: -4%;
    left: 31%;
}
.candy-section-6 {
    opacity: 0.8;
    transform: rotate(180deg) scale(0.8, 0.8);
    top: 110%;
    left: 4%;
}
/*---- SLIDE 7: ----*/
.amber-section-7 {
    opacity: 0.8;
    transform: rotate(-447deg) scale(0.75, 0.75);
    left: -4%;
    top: 75%;
}
.turquoise-section-7 {
    opacity: 0.8;
    transform: rotate(-5deg) scale(0.85, 1.00);
    top: -20%;
    left: 31%;
}
.candy-section-7 {
    opacity: 0.8;
    transform: rotate(-6deg) scale(0.8, 0.8);
    top: 11%;
    left: 91%;
}
/*---- SLIDE 8: ----*/
.amber-section-2 {
    opacity: 0.8;
    transform: rotate(-200deg) scale(0.75, 0.75);
    left: 87%;
    top: 76%;
}
.turquoise-section-8 {
    opacity: 0.8;
    transform: rotate(-5deg) scale(0.85, 1.00);
    top: -20%;
    left: 31%;
}
.candy-section-8 {
    opacity: 0.8;
    transform: rotate(160deg) scale(0.8, 0.8);
    top: 16%;
    left: -4%;
}




.funky-pigeon-wrapper {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 100%;
    opacity: 0;
}

.visible-pigeon {
    top: 60%;
    opacity: 1;
}

.animated-triangles-layer.animation {
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

.animated-bg-sparkles.animation-in {
    top: 0;
    opacity: 1;
}

.animated-bg-sparkles.animation {
    top: -5px;
    left: -5px;
    width: 101%;
    opacity: 0.5;
}

.canterbury-logo {
    position: absolute;
    top: 65%;
    right: 10%;
    width: 135px;
    opacity: 0;
    z-index: 6;
}

.canterbury-logo.animation {
    right: 18%;
    opacity: 1;
}