@import url('https://fonts.googleapis.com/css?family=Monoton');



.mono-font {
    font-family: 'Monoton', cursive;
}

/*** MOUSE SCROLL ANIMATION ***/

.scroll {
    animation-name: scroll;
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

.scroll-link {
    opacity: 0;
    position: relative;
}

@keyframes scroll {
    0%, 20% {
        transform: translateY(0) scaleY(1);
    }

    100% {
        transform: translateY(36px) scaleY(2);
        opacity: 0;
    }
}

@media screen and (min-width: 1200px) {
    .scroll-link {
        opacity: 1;
    }
}

/**EXAMPLE LAYOUTS**/
#prompt-to-click-two.active {
    opacity: 0;
    transition: opacity 0.2s;
}

#prompt-to-click-three.active {
    opacity: 0;
    transition: opacity 0.2s;
}

#floor-plan-pointer-one.active {
    background-image: url("../images/flexsystem/floor-plan-office-1-active-6d5e86ada8c2afb1f58af0a244cd602d.webp");
}

#floor-plan-pointer-two.active {
    background-image: url("../images/flexsystem/floor-plan-office-2-active-e9caf574d27b6f64b251ac700869bea2.webp");
}

#floor-plan-pointer-three.active {
    background-image: url("../images/flexsystem/floor-plan-office-3-active-955baa67dc41032b6f76b9685c4ddb7f.webp");
}

.floor-plan-image-two.active,
#floor-plan-image-three.active {
    display: block;
}

/**EXPLODED FLEXLINE**/

.icon-scroll:before {
    /*content: '';*/
    /*background-image: url("../images/arrows-down-white-fde8a0a9bb775113245960623fc63b60.svg");*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
    /*width: 40px;*/
    /*height: 40px;*/
    /*background: #fff;*/
    /*margin-left: -4px;*/
    /*top: 8px;*/
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: scroll;
}

@keyframes scroll {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(46px);
    }
}

/**LINKS**/
#flexsystem-section .product-tile {
    float: none;
    display: inline-block;
}

#product-tile-wrapper {
    width: inherit;
    display: inline-block;
    margin: 0 auto;
}

#colouractive-products {
    text-align: center;
}

#colouractive-products article {
    width: 100%;
    margin: auto;
}