.tl-perspective-800{
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}

.tl-perspective-1600{
    -webkit-perspective: 1600px;
    -moz-perspective: 1600px;
    -ms-perspective: 1600px;
    -o-perspective: 1600px;
    perspective: 1600px;
}


/*  
    easytransitions library, original source was here
    https://codepen.io/jcoulterdesign/pen/EPNrzg
    was modified to fit our usage
*/

/* set variables so we can change them once */
:root {
    --easytransitions-effect-color: white;
    --easytransitions-effect-out-time: 1.2s;
    --easytransitions-effect-in-time: 1.2s;
}

body .easytransitions_transition div {
    width: 200px;
    height: 200px;
    /* background: white; */
    background: var(--easytransitions-effect-color);
    position: absolute;
    transform: scale(0);
    z-index: 3;
}

.easytransitions_transition {
    display: none;
}

    .easytransitions_transition.out {
        display: block;
    }

    .easytransitions_transition.in {
        display: block;
    }


/* body .easytransitions_transition .split_diagonal, body .easytransitions_transition .split_diagonal_alt, body .easytransitions_transition .split_diamond {
  -webkit-animation: diamond 1.2s;
          animation: diamond 1.2s;
  transform: scale(0) rotate(45deg);
} */
body .easytransitions_transition .split_diagonal, body .easytransitions_transition .split_diagonal_alt, body .easytransitions_transition .split_diamond {
    transform: scale(0) rotate(45deg);
}

body .easytransitions_transition.out .split_diagonal, body .easytransitions_transition.out .split_diagonal_alt, body .easytransitions_transition.out .split_diamond {
    -webkit-animation: diamond-out var(--easytransitions-effect-out-time);
    animation: diamond-out var(--easytransitions-effect-out-time);
}

body .easytransitions_transition.in .split_diagonal, body .easytransitions_transition.in .split_diagonal_alt, body .easytransitions_transition.in .split_diamond {
    -webkit-animation: diamond-in var(--easytransitions-effect-in-time);
    animation: diamond-in var(--easytransitions-effect-in-time);
}

body .easytransitions_transition .split_horizontal, body .easytransitions_transition .wipe_top, body .easytransitions_transition .wipe_bottom {
    transform: scaleY(0);
}

body .easytransitions_transition .split_vertical, body .easytransitions_transition .wipe_left, body .easytransitions_transition .wipe_right {
    transform: scaleX(0);
}

body .easytransitions_transition__part-1 {
    left: -100px;
    top: -100px;
}

    body .easytransitions_transition__part-1.split_diagonal_alt, body .easytransitions_transition__part-1.split_vertical, body .easytransitions_transition__part-1.split_horizontal {
        display: none;
    }

body .easytransitions_transition__part-2 {
    bottom: -100px;
    left: -100px;
}

    body .easytransitions_transition__part-2.split_diagonal, body .easytransitions_transition__part-2.split_vertical, body .easytransitions_transition__part-2.split_horizontal {
        display: none;
    }

body .easytransitions_transition__part-3 {
    top: -100px;
    right: -100px;
}

    body .easytransitions_transition__part-3.split_diagonal, body .easytransitions_transition__part-3.split_vertical, body .easytransitions_transition__part-3.split_horizontal {
        display: none;
    }

body .easytransitions_transition__part-4 {
    bottom: -100px;
    right: -100px;
}

    body .easytransitions_transition__part-4.split_diagonal_alt, body .easytransitions_transition__part-4.split_vertical, body .easytransitions_transition__part-4.split_horizontal {
        display: none;
    }
/* body .easytransitions_transition .easytransitions_transition__part-5 {
  height: 100% !important;
  display: none;
  left: 0px;
  transform-origin: 0px 200px;
  -webkit-animation: vertical 1.2s forwards;
          animation: vertical 1.2s forwards;
} */
body .easytransitions_transition .easytransitions_transition__part-5 {
    height: 100% !important;
    display: none;
    left: 0px;
    transform-origin: 0px 200px;
}

body .easytransitions_transition.out .easytransitions_transition__part-5 {
    -webkit-animation: vertical-out var(--easytransitions-effect-out-time) forwards;
    animation: vertical-out var(--easytransitions-effect-out-time) forwards;
}

body .easytransitions_transition.in .easytransitions_transition__part-5 {
    -webkit-animation: vertical-in var(--easytransitions-effect-in-time) forwards;
    animation: vertical-in var(--easytransitions-effect-in-time) forwards;
}


body .easytransitions_transition__part-5.split_vertical, body .easytransitions_transition__part-5.wipe_left {
    display: block;
}
/* body .easytransitions_transition .easytransitions_transition__part-6 {
  height: 100% !important;
  display: none;
  right: -200px;
  transform-origin: 0px 200px;
  -webkit-animation: vertical_r 1.2s forwards;
          animation: vertical_r 1.2s forwards;
} */
body .easytransitions_transition .easytransitions_transition__part-6 {
    height: 100% !important;
    display: none;
    right: -200px;
    transform-origin: 0px 200px;
}

body .easytransitions_transition.out .easytransitions_transition__part-6 {
    -webkit-animation: vertical_r-out var(--easytransitions-effect-out-time) forwards;
    animation: vertical_r-out var(--easytransitions-effect-out-time) forwards;
}

body .easytransitions_transition.in .easytransitions_transition__part-6 {
    -webkit-animation: vertical_r-in var(--easytransitions-effect-in-time) forwards;
    animation: vertical_r-in var(--easytransitions-effect-in-time) forwards;
}


body .easytransitions_transition .easytransitions_transition__part-6.split_vertical, body .easytransitions_transition__part-6.wipe_right {
    display: block;
}
/* body .easytransitions_transition .easytransitions_transition__part-7 {
  width: 100% !important;
  display: none;
  bottom: -100px;
  -webkit-animation: horizontal 1s forwards;
          animation: horizontal 1s forwards;
} */
body .easytransitions_transition .easytransitions_transition__part-7 {
    width: 100% !important;
    display: none;
    bottom: -100px;
}

body .easytransitions_transition.out .easytransitions_transition__part-7 {
    -webkit-animation: horizontal-out var(--easytransitions-effect-out-time) forwards;
    animation: horizontal-out var(--easytransitions-effect-out-time) forwards;
}

body .easytransitions_transition.in .easytransitions_transition__part-7 {
    -webkit-animation: horizontal-in var(--easytransitions-effect-in-time) forwards;
    animation: horizontal-in var(--easytransitions-effect-in-time) forwards;
}


body .easytransitions_transition__part-7.split_horizontal, body .easytransitions_transition__part-7.wipe_bottom {
    display: block;
}

/* body .easytransitions_transition .easytransitions_transition__part-8 {
  width: 100% !important;
  display: none;
  top: -100px;
  -webkit-animation: horizontal 1s forwards;
          animation: horizontal 1s forwards;
} */
body .easytransitions_transition .easytransitions_transition__part-8 {
    width: 100% !important;
    display: none;
    top: -100px;
}

body .easytransitions_transition.out .easytransitions_transition__part-8 {
    -webkit-animation: horizontal-out var(--easytransitions-effect-out-time) forwards;
    animation: horizontal-out var(--easytransitions-effect-out-time) forwards;
}

body .easytransitions_transition.in .easytransitions_transition__part-8 {
    -webkit-animation: horizontal-in var(--easytransitions-effect-in-time) forwards;
    animation: horizontal-in var(--easytransitions-effect-in-time) forwards;
}


body .easytransitions_transition__part-8.split_horizontal, body .easytransitions_transition__part-8.wipe_top {
    display: block;
}

@-webkit-keyframes diamond {
    0% {
        transform: rotate(45deg) scale(0);
    }

    50% {
        transform: rotate(45deg) scale(13);
    }

    100% {
        transform: rotate(45deg) scale(0);
    }
}

@keyframes diamond {
    0% {
        transform: rotate(45deg) scale(0);
    }

    50% {
        transform: rotate(45deg) scale(13);
    }

    100% {
        transform: rotate(45deg) scale(0);
    }
}

@-webkit-keyframes diamond-out {
    0% {
        transform: rotate(45deg) scale(0);
    }

    100% {
        transform: rotate(45deg) scale(13);
    }
}

@keyframes diamond-out {
    0% {
        transform: rotate(45deg) scale(0);
    }

    100% {
        transform: rotate(45deg) scale(13);
    }
}

@-webkit-keyframes diamond-in {
    0% {
        transform: rotate(45deg) scale(13);
    }

    100% {
        transform: rotate(45deg) scale(0);
    }
}

@keyframes diamond-in {
    0% {
        transform: rotate(45deg) scale(13);
    }

    100% {
        transform: rotate(45deg) scale(0);
    }
}

@-webkit-keyframes vertical {
    0% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(13);
    }

    100% {
        transform: scaleX(0);
    }
}

@keyframes vertical {
    0% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(13);
    }

    100% {
        transform: scaleX(0);
    }
}

@-webkit-keyframes vertical-out {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(13);
    }
}

@keyframes vertical-out {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(13);
    }
}

@-webkit-keyframes vertical-in {
    0% {
        transform: scaleX(13);
    }

    100% {
        transform: scaleX(0);
    }
}

@keyframes vertical-in {
    0% {
        transform: scaleX(13);
    }

    100% {
        transform: scaleX(0);
    }
}


@-webkit-keyframes vertical_r {
    0% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(-13);
    }

    100% {
        transform: scaleX(0);
    }
}

@keyframes vertical_r {
    0% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(-13);
    }

    100% {
        transform: scaleX(0);
    }
}

@-webkit-keyframes vertical_r-out {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(-13);
    }
}

@keyframes vertical_r-out {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(-13);
    }
}

@-webkit-keyframes vertical_r-in {
    0% {
        transform: scaleX(-13);
    }

    100% {
        transform: scaleX(0);
    }
}

@keyframes vertical_r-in {
    0% {
        transform: scaleX(-13);
    }

    100% {
        transform: scaleX(0);
    }
}


@-webkit-keyframes horizontal {
    0% {
        transform: scaleY(0);
    }

    50% {
        transform: scaleY(13);
    }

    100% {
        transform: scaleY(0);
    }
}

@keyframes horizontal {
    0% {
        transform: scaleY(0);
    }

    50% {
        transform: scaleY(13);
    }

    100% {
        transform: scaleY(0);
    }
}

@-webkit-keyframes horizontal-out {
    0% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(13);
    }
}

@keyframes horizontal-out {
    0% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(13);
    }
}

@-webkit-keyframes horizontal-in {
    0% {
        transform: scaleY(13);
    }

    100% {
        transform: scaleY(0);
    }
}

@keyframes horizontal-in {
    0% {
        transform: scaleY(13);
    }

    100% {
        transform: scaleY(0);
    }
}

/*
    end of easytransitions
*/