/* Error de minimización. Devolviendo el contenido no minimizado.
(57,11): run-time error CSS1036: Expected expression, found '@color-primary-light'
(69,11): run-time error CSS1036: Expected expression, found '@color-primary-dark'
(77,11): run-time error CSS1036: Expected expression, found '@color-primary'
(99,33): run-time error CSS1019: Unexpected token, found '@Distance'
(99,33): run-time error CSS1036: Expected expression, found '@Distance'
(99,33): run-time error CSS1019: Unexpected token, found '@Distance'
(99,33): run-time error CSS1042: Expected function, found '@Distance'
(99,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@Distance'
(103,33): run-time error CSS1019: Unexpected token, found '@Distance'
(103,33): run-time error CSS1036: Expected expression, found '@Distance'
(103,33): run-time error CSS1019: Unexpected token, found '@Distance'
(103,33): run-time error CSS1042: Expected function, found '@Distance'
(103,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@Distance'
(107,32): run-time error CSS1036: Expected expression, found '@Distance'
(107,32): run-time error CSS1019: Unexpected token, found '@Distance'
(107,32): run-time error CSS1042: Expected function, found '@Distance'
(107,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@Distance'
(111,33): run-time error CSS1019: Unexpected token, found '@Distance'
(111,33): run-time error CSS1036: Expected expression, found '@Distance'
(111,33): run-time error CSS1019: Unexpected token, found '@Distance'
(111,33): run-time error CSS1042: Expected function, found '@Distance'
(111,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@Distance'
(115,32): run-time error CSS1036: Expected expression, found '@Distance'
(115,32): run-time error CSS1019: Unexpected token, found '@Distance'
(115,32): run-time error CSS1042: Expected function, found '@Distance'
(115,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@Distance'
(119,33): run-time error CSS1019: Unexpected token, found '@Distance'
(119,33): run-time error CSS1036: Expected expression, found '@Distance'
(119,33): run-time error CSS1019: Unexpected token, found '@Distance'
(119,33): run-time error CSS1042: Expected function, found '@Distance'
(119,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@Distance'
 */
/*Funte: https://codepen.io/poporetto/pen/RaodXK*/
@color-primary: #30A9DE;
@color-secondary: #30A9DE;
@color-tertiary: #30A9DE;
@color-primary-light: #6AAFE6;
@color-primary-dark: #8EC0E4;
@Distance: 1000px;

body {
    overflow: hidden;
}

html, body {
    position: relative;
    /*background: #f5f7fb;*/
    min-height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    margin: 0;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: left;
    background-color: #f5f7fb;
}

.Container {
    text-align: center;
    position: relative;
}

.MainTitle {
    display: block;
    font-size: 2rem;
    font-weight: lighter;
    text-align: center;
}

.MainDescription {
    max-width: 50%;
    font-size: 1.2rem;
    font-weight: lighter;
}

.MainGraphic {
    position: relative;
}

.Cog {
    width: 10rem;
    height: 10rem;
    fill: @color-primary-light;
    transition: easeInOutQuint();
    animation: CogAnimation 5s infinite;
}

.Spanner {
    position: absolute;
    transform: rotate(20deg);
    top: 10%;
    left: 20%;
    width: 10rem;
    height: 10rem;
    fill: @color-primary-dark;
    animation: SpannerAnimation 4s infinite;
}

.Hummingbird {
    position: absolute;
    width: 3rem;
    height: 3rem;
    fill: @color-primary;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

@keyframes CogAnimation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes SpannerAnimation {
    0% {
        transform: translate3d(20px, 20px,1px) rotate(0deg);
    }

    10% {
        transform: translate3d(-@Distance, @Distance, 1px) rotate(180deg);
    }

    15% {
        transform: translate3d(-@Distance, @Distance, 1px) rotate(360deg);
    }

    20% {
        transform: translate3d(@Distance, -@Distance, 1px) rotate(180deg);
    }

    30% {
        transform: translate3d(-@Distance, @Distance, 1px) rotate(360deg);
    }

    40% {
        transform: translate3d(@Distance, -@Distance, 1px) rotate(360deg);
    }

    50% {
        transform: translate3d(-@Distance, @Distance, 1px) rotate(180deg);
    }

    100% {
        transform: translate3d(0, 0px, 0px) rotate(360deg);
    }
}