.home {}

.google-home__colors {
    display: block;
    position: relative;
    text-align: center;
}
.google-home__color {
    padding: 0;
}
    .google-home__color--circle {
        display: block;
        width: 0.25rem;
        height: 0.25rem;
        margin: 0 auto;
        border-radius: 50%;
    }
    .google-home__color--line {
        display: inline-block;
        margin: 0 0.2rem;
        width: 0.6rem;
        height: 0.25rem;
        border-radius: 0.25rem;
    }
    .google-home__color--blue {
        background-color: #98DBFF;
    }
    .google-home__color--purple {
        background-color: #CBA5FF;
    }
    .google-home__color--green {
        background-color: #1EFF7A;
    }
    .google-home__color--pink {
        background-color: #FFDADA;
    }

.window {
    display: block;
    position: relative;
    margin: 7.0rem auto;
    max-width: 385px;
    min-width: 256px;
    width: 100%;
    overflow: hidden;
}
    @media (max-height: 45em) {
        .window {
            margin: 2.0rem auto;
        }
    }
    .window__label {
        display: block;
        position: relative;
        padding: 0;
        margin: 1rem;
        text-align: center;
        max-width: 100%;
    }
        .window__label__text {
            display: inline-block;
            margin: 0;
            padding: 0.5em 2.0em;
            background-color: #F2F2F2;
            border-radius: 36px;
            font-size: 1.4em;
            font-weight: 300;
            line-height: 1.5em;
            text-align: center;
        }
        .window__label__colors {
            display: block;
            position: relative;
            width: 100%;
            margin: 0.8em 0;
        }
            .window__label__colors .google-home__color {
                display: block;
                position: absolute;
                top: 0rem;
                left: calc(50% - 0.3rem);
                margin: 0;
                opacity: 0;
                -webkit-animation-delay: 500ms;
                        animation-delay: 500ms;
                -webkit-animation-duration: 600ms;
                        animation-duration: 600ms;
                -webkit-animation-fill-mode: forwards;
                        animation-fill-mode: forwards;
                -webkit-animation-iteration-count: 1;
                        animation-iteration-count: 1;
                -webkit-animation-timing-function: linear;
                        animation-timing-function: linear;
            }
                .window__label__colors .google-home__color.google-home__color--blue {
                    -webkit-animation-name: animation-label-color--blue;
                            animation-name: animation-label-color--blue;
                }
                .window__label__colors .google-home__color.google-home__color--purple {
                    -webkit-animation-name: animation-label-color--purple;
                            animation-name: animation-label-color--purple;
                }
                .window__label__colors .google-home__color.google-home__color--green {
                    -webkit-animation-name: animation-label-color--green;
                            animation-name: animation-label-color--green;
                }
                .window__label__colors .google-home__color.google-home__color--pink {
                    -webkit-animation-name: animation-label-color--pink;
                            animation-name: animation-label-color--pink;
                }
            @keyframes animation-label-color--blue {
                50% {
                    left: calc((50% - 1.65rem) - 0.45rem);
                    width: 1.2rem;
                    opacity: 1;
                }
                100% {
                    left: calc(50% - 1.65rem);
                    opacity: 1;
                    width: 0.6rem;
                }
            }
            @keyframes animation-label-color--purple {
                50% {
                    left: calc((50% - 0.75rem) - 0.15rem);
                    width: 0.9rem;
                    opacity: 1;
                }
                100% {
                    left: calc(50% - 0.75rem);
                    opacity: 1;
                    width: 0.6rem;
                }
            }
            @keyframes animation-label-color--green {
                50% {
                    left: calc((50% + 0.15rem) + 0.15rem);
                    width: 0.9rem;
                    opacity: 1;
                }
                100% {
                    left: calc(50% + 0.15rem);
                    opacity: 1;
                    width: 0.6rem;
                }
            }
            @keyframes animation-label-color--pink {
                50% {
                    left: calc((50% + 1.05rem) + 0.45rem);
                    width: 1.2rem;
                    opacity: 1;
                }
                100% {
                    left: calc(50% + 1.05rem);
                    opacity: 1;
                    width: 0.6rem;
                }
            }

    .window__scene {
        display: block;
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: 400px;
    }
    .window__scene__inside {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: -1px;
        left: 0;
        overflow: hidden;
    }
    .window__scene__plant,
    .window__scene__google-home,
    .window__scene__sill {
        display: block;
        position: absolute;
    }
    .window__scene__plant,
    .window__scene__google-home {
        bottom: 15px;
    }
        .window__scene__plant__image,
        .window__scene__google-home__image {
            display: block;
        }
    .window__scene__plant {
        left: 36px;
    }
    .window__scene__leaf {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-animation-duration: 2s;
                animation-duration: 2s;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
    }
        .window__scene__leaf--1 {
            top: 2.3rem;
            left: 0.4rem;
            width: 8px;
            height: 12px;
            background-image: url(../images/window/leaf-1.svg);
            -webkit-animation-name: animation-leaf-falling--1;
                    animation-name: animation-leaf-falling--1;
            -webkit-animation-delay: .5s;
                    animation-delay: .5s;
        }
        .window__scene__leaf--2 {
            top: 3.9rem;
            left: 0.3rem;
            width: 11px;
            height: 8px;
            background-image: url(../images/window/leaf-2.svg);
            -webkit-animation-name: animation-leaf-falling--2;
                    animation-name: animation-leaf-falling--2;
            -webkit-animation-delay: 4s;
                    animation-delay: 4s;
        }

        @-webkit-keyframes animation-leaf-falling--1 {
            25% {
                top: calc(40% - 12px);
                -webkit-transform: rotate(180deg);
                        transform: rotate(180deg);
            }
            100% {
                top: calc(100% - 12px);
                left: -0.5rem;
                -webkit-transform: rotate(360deg);
                        transform: rotate(360deg);
            }
        }

        @keyframes animation-leaf-falling--1 {
            25% {
                top: calc(40% - 12px);
                -webkit-transform: rotate(180deg);
                        transform: rotate(180deg);
            }
            100% {
                top: calc(100% - 12px);
                left: -0.5rem;
                -webkit-transform: rotate(360deg);
                        transform: rotate(360deg);
            }
        }

        @-webkit-keyframes animation-leaf-falling--2 {
            50% {
                -webkit-transform: rotate(0deg);
                        transform: rotate(0deg);
            }
            60% {
                -webkit-transform: rotate(-90deg);
                        transform: rotate(-90deg);
            }
            100% {
                top: calc(100% - 8px);
                left: 0rem;
                -webkit-transform: rotate(-180deg);
                        transform: rotate(-180deg);
            }
        }

        @keyframes animation-leaf-falling--2 {
            50% {
                -webkit-transform: rotate(0deg);
                        transform: rotate(0deg);
            }
            60% {
                -webkit-transform: rotate(-90deg);
                        transform: rotate(-90deg);
            }
            100% {
                top: calc(100% - 8px);
                left: 0rem;
                -webkit-transform: rotate(-180deg);
                        transform: rotate(-180deg);
            }
        }

    .window__scene__google-home {
        right: 30px;
    }
        .window__scene__google-home .google-home__colors {
            display: block;
            position: relative;
       }
        .window__scene__google-home .google-home__color--circle {
            display: block;
            position: absolute;
            top: 0rem;
            left: 2rem;
            opacity: 0;
            -webkit-animation-animation-delay: 500ms;
                    animation-delay: 500ms;
            -webkit-animation-duration: 2s;
                    animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
                    animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-out;
                    animation-timing-function: ease-out;
            -webkit-animation-direction: alternate;
                    animation-direction: alternate;
        }
        .window__scene__google-home .google-home__color--circle.google-home__color--purple {
            -webkit-animation-name: animation-google-home--purple;
                    animation-name: animation-google-home--purple;
        }
        .window__scene__google-home .google-home__color--circle.google-home__color--green {
            -webkit-animation-name: animation-google-home--green;
                    animation-name: animation-google-home--green;
        }
        .window__scene__google-home .google-home__color--circle.google-home__color--pink {
            -webkit-animation-name: animation-google-home--pink;
                    animation-name: animation-google-home--pink;
        }
        .window__scene__google-home .google-home__color--circle.google-home__color--blue {
            -webkit-animation-name: animation-google-home--blue;
                    animation-name: animation-google-home--blue;
        }

        @-webkit-keyframes animation-google-home--purple {
            0% {
                top: 0rem;
                left: 2rem;
                opacity: 0;
            }
            25% {
                opacity: 1;
                top: -0.5rem;
                left: 2rem;
            }
            100% {
                opacity: 1;
                top: 0rem;
                left: 1.3rem;
            }
        }

        @keyframes animation-google-home--purple {
            0% {
                top: 0rem;
                left: 2rem;
                opacity: 0;
            }
            25% {
                opacity: 1;
                top: -0.5rem;
                left: 2rem;
            }
            100% {
                opacity: 1;
                top: 0rem;
                left: 1.3rem;
            }
        }

        @-webkit-keyframes animation-google-home--green {
            0% {
                top: 0rem;
                left: 2rem;
                opacity: 0;
            }
            25% {
                opacity: 1;
                top: 0rem;
                left: 2.5rem;
            }
            100% {
                opacity: 1;
                top: -0.5rem;
                left: 2rem;
            }
        }

        @keyframes animation-google-home--green {
            0% {
                top: 0rem;
                left: 2rem;
                opacity: 0;
            }
            25% {
                opacity: 1;
                top: 0rem;
                left: 2.5rem;
            }
            100% {
                opacity: 1;
                top: -0.5rem;
                left: 2rem;
            }
        }

        @-webkit-keyframes animation-google-home--pink {
            0% {
                top: 0rem;
                left: 2rem;
                opacity: 0;
            }
            25% {
                opacity: 1;
                top: 0.5rem;
                left: 2rem;
            }
            100% {
                opacity: 1;
                top: 0;
                left: 2.5rem;
            }
        }

        @keyframes animation-google-home--pink {
            0% {
                top: 0rem;
                left: 2rem;
                opacity: 0;
            }
            25% {
                opacity: 1;
                top: 0.5rem;
                left: 2rem;
            }
            100% {
                opacity: 1;
                top: 0;
                left: 2.5rem;
            }
        }

        @-webkit-keyframes animation-google-home--blue {
            0% {
                top: 0rem;
                left: 2rem;
                opacity: 0;
            }
            25% {
                opacity: 1;
                top: 0rem;
                left: 1.3rem;
            }
            100% {
                opacity: 1;
                top: 0.5rem;
                left: 2rem;
            }
        }

        @keyframes animation-google-home--blue {
            0% {
                top: 0rem;
                left: 2rem;
                opacity: 0;
            }
            25% {
                opacity: 1;
                top: 0rem;
                left: 1.3rem;
            }
            100% {
                opacity: 1;
                top: 0.5rem;
                left: 2rem;
            }
        }

    .window__scene__sill {
        width: 100%;
        height: 16px;
        left: 0;
        bottom: 0;
        background-color: #E5E6E7;
        border: 1px solid black;
    }
        .window__scene__sill:before {
            content: "";
            display: block;
            width: 100%;
            height: 50%;
            background-color: #F6F6F6;
        }

    .window__scene__outside {
        display: block;
        position: relative;
        width: 256px;
        height: 385px;
        margin: 0 auto;
        overflow:  hidden;
    }
    .window__scene__sky,
    .window__scene__skyline,
    .window__scene__weather,
    .window__scene__frame {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    .window__scene__sky,
    .window__scene__skyline,
    .window__scene__weather {
        width: 100%;
        height: 100%
    }
    .window__scene__frame {
        height: 385px;
        width: 256px;
    }
        .window__scene__frame__image {
            display: block;
            width: 100%;
            height: 100%;
        }
    .window__scene__sky {}
    .window__scene__skyline {
        background-image: url(../images/window/skyline.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center bottom;
        opacity: 0.1;
    }
    .window__scene__weather {}

.weather {
    display: block;
}

    .weather__leaf {
        display: block;
        position: relative;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }
        .weather__leaf--1 {
            width: 40px;
            height: 24px;
            background-image: url(../images/window/weather/leaf-large-1.svg);
        }
        .weather__leaf--2 {
            width: 23px;
            height: 18px;
            background-image: url(../images/window/weather/leaf-large-2.svg);
        }
        .weather__leaf--3 {
            width: 23px;
            height: 32px;
            background-image: url(../images/window/weather/leaf-large-3.svg);
        }

    .weather__fog {
        display: block;
        position: relative;
        background-color: #FFFFFF;
        border-radius: 16px;
    }
        .weather__fog--1,
        .weather__fog--2 {
            height: 4px;
        }
        .weather__fog--3,
        .weather__fog--4 {
            height: 16px;
            opacity: 0.6;
        }
        .weather__fog--1 {
            width: 64px;
        }
        .weather__fog--2 {
            width: 190px;
            margin-top: 10px;
            margin-left: 72px;
        }
        .weather__fog--3 {
            width: 140px;
            margin-top: 8px;
            margin-left: 18px;
        }
        .weather__fog--4 {
            width: 256px;
            margin-top: 4px;
            margin-left: 128px;
        }

    .weather__cloud {
        display: block;
        position: relative;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }
        .weather__cloud--1 {
            width: 62px;
            height: 39px;
            background-image: url(../images/window/weather/cloud-1.svg);
        }
        .weather__cloud--2 {
            width: 71px;
            height: 39px;
            background-image: url(../images/window/weather/cloud-2.svg);
        }
        .weather__cloud--3 {
            width: 52px;
            height: 35px;
            background-image: url(../images/window/weather/cloud-3.svg);
        }

    .weather__droplet-group {
        display: block;
        float: left;
        width: 50%;
        height: 50%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
        .weather__droplet {
            display: inline-block;
            margin: 25% 15%;
        }
        .weather__droplet:nth-child(2n) {
            margin-bottom: 50%;
            margin-left: 0%;
        }

    .weather--rain,
    .weather--sleet,
    .weather--snow,
    .weather--hail {
        display: block;
        position: relative;
        height: 200%;
        width: 200%;
        -webkit-animation-name: animation-droplet;
                animation-name: animation-droplet;
        -webkit-animation-duration: 4s;
                animation-duration: 4s;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
    }
        .weather--snow .weather__droplet,
        .weather--hail .weather__droplet {
            width: 0.4rem;
            height: 0.4rem;
            border-radius: 50%;
        }
        .weather--rain .weather__droplet,
        .weather--sleet .weather__droplet {
            width: 0.2rem;
            height: 0.4rem;
            border-radius: 4px;
            -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                    transform: rotate(-45deg);
        }
        .weather--rain .weather__droplet {
            background-color: #28AFFF;
        }
        .weather--sleet .weather__droplet {
            background-color: #A7AEB9;
        }
        .weather--snow .weather__droplet {
            background-color: #FFFFFF;
        }
        .weather--hail .weather__droplet {
            background-color: #D5F5FF;
        }

    .weather--wind,
    .weather--tornado {}
        .weather--wind .weather__leaf,
        .weather--tornado .weather__leaf {
            -webkit-animation-name: animation-wind;
                    animation-name: animation-wind;
            -webkit-animation-iteration-count: infinite;
                    animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-in-out;
                    animation-timing-function: ease-in-out;
            -webkit-animation-fill-mode: none;
                    animation-fill-mode: none;
        }
        .weather--wind .weather__leaf--1,
        .weather--tornado .weather__leaf--1 {
            margin-left: 48px;
            -webkit-animation-duration: 2400ms;
                    animation-duration: 2400ms;
        }
        .weather--wind .weather__leaf--2,
        .weather--tornado .weather__leaf--2 {
            margin-top: 16px;
            margin-left: 48px;
            -webkit-animation-duration: 2200ms;
                    animation-duration: 2200ms;
        }
        .weather--wind .weather__leaf--3,
        .weather--tornado .weather__leaf--3 {
            margin-top: 16px;
            margin-left: 48px;
            -webkit-animation-duration: 2000ms;
                    animation-duration: 2000ms;
        }

    .weather--fog {
        position: absolute;
        bottom: 10%;
        -webkit-animation-duration: 30s;
                animation-duration: 30s;
        -webkit-animation-name: animation-fog;
                animation-name: animation-fog;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
                animation-timing-function: ease-in-out;
        -webkit-animation-direction: alternate;
                animation-direction: alternate;
    }

    .weather--cloudy {
        display: block;
        position: absolute;
        top: 0%;
        left: 0%;
        height: 100%;
        width: 100%;
        -webkit-animation-duration: 2s;
                animation-duration: 2s;
        -webkit-animation-name: animation-cloudy;
                animation-name: animation-cloudy;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
                animation-timing-function: ease-in-out;
        -webkit-animation-direction: alternate;
                animation-direction: alternate;
    }
        .weather--cloudy .weather__cloud--1 {
            position: absolute;
            top: 20%;
            left: 40%;
        }
        .weather--cloudy .weather__cloud--2 {
            position: absolute;
            top: 30%;
            right: 10%;
        }
        .weather--cloudy .weather__cloud--3 {
            position: absolute;
            top: 35%;
            left: 0%;
        }

    .weather--partly-cloudy-day,
    .weather--partly-cloudy-night {
        display: block;
        position: absolute;
        top: 0%;
        left: 0%;
        height: 100%;
        width: 100%;
        -webkit-animation-duration: 2s;
                animation-duration: 2s;
        -webkit-animation-name: animation-cloudy;
                animation-name: animation-cloudy;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
                animation-timing-function: ease-in-out;
        -webkit-animation-direction: alternate;
                animation-direction: alternate;
    }
        .weather--partly-cloudy-day .weather__cloud--3,
        .weather--partly-cloudy-night .weather__cloud--3 {
            position: absolute;
            top: 35%;
            left: 50%;
        }

    @-webkit-keyframes animation-droplet {
        0% {
            margin: -250% 0 0 -25%;
        }
        100% {
            margin: 0 0 0 5%;
        }
    }

    @keyframes animation-droplet {
        0% {
            margin: -150% 0 0 -100%;
        }
        100% {
            margin: 0% 0 0 0%;
        }
    }

    @-webkit-keyframes animation-wind {
        /* 0% {
            margin-top: -50%;
            margin-left: -50%;
        }
        30% {
            margin-top: 40%;
        }
        50% {
            margin-left: 130%;
        }
        100% {
            margin-top: 150%;
            margin-left: 150%;
        } */
    }

    @keyframes animation-wind {
        0% {
            margin-top: -50%;
            margin-left: -50%;
        }
        30% {
            margin-top: 20%;
        }
        50% {
            margin-left: 70%;
        }
        100% {
            margin-top: 150%;
            margin-left: 150%;
        }
    }

    @-webkit-keyframes animation-fog {
        0% {
            bottom: 10%;
            left: 0%;
        }
        50% {
            bottom: 9%;
        }
        100% {
            bottom: 10%;
            left: 5%;
        }
    }

    @keyframes animation-fog {
        0% {
            bottom: 10%;
            left: 0%;
        }
        50% {
            bottom: 9%;
        }
        100% {
            bottom: 10%;
            left: 5%;
        }
    }

    @-webkit-keyframes animation-cloudy {
        0% {
            top: 0%;
        }
        100% {
            top: 2%;
        }
    }

    @keyframes animation-cloudy {
        0% {
            top: 0%;
        }
        100% {
            top: 2%;
        }
    }

/*******************************************************************************
* ABOUT SECTION
******************************************************************************/
.about-section {
    margin: 7.0rem auto;
    width: 90%;
}
    .about-section__header {
        margin-bottom: 7.0rem;
    }
    .about-section__leaves {
        display: inline-block;
    }
    .about-section__leaves:after {
        content: "";
        display: block;
        position: absolute;
        text-indent: -9999px;
        height: 2.0em;
        width: 2.0em;
        margin-top: -0.5em;
        margin-left: 0.4em;
        background-image: url(../images/home/about__leaves.svg);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .about-section__content {
        width: 100%;
        max-width: 60.0em;
        margin: 0 auto;
    }
    .about-section__text {
        margin: 1.5rem 0;
    }
    .about-section__list {
        -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
    }

/*******************************************************************************
 * COLLECTION OF POSTS SECTION
 ******************************************************************************/
.collections-section {
    margin: 0 auto;
    padding: 3.5rem 0;
    border-top: 4px solid #E5E6E7;
    border-bottom: 4px solid #E5E6E7;
}
.collection {
    margin: 3.5rem 0;
    text-align: center;
}
    .collection__header__link {
        color: #1C2233;
    }
    .collection__header__h {
        text-align: center;
        line-height: 1em;
    }
    .collection__header__title {
        display: inline-block;
        position: relative;
        vertical-align: middle;
    }
    .collection__summary {
        width: 90%;
        margin: 0.5em auto 0;
        text-align: center;
    }

/*******************************************************************************
* JOBS SECTION
******************************************************************************/
.jobs-section {
    margin: 7.0rem auto;
    opacity: 0.6;
}