:root {
    --color-primary: #f2a900;
    --color-primary-light: #d39300;
    --color-primary-dark: #7e5800;
    --color-secondary: #353535;
    --color-secondary-light: #858585;
    --color-nearly-black: #1e1e1e;
    --color-gray: #4a4a4a;
    --color-third: #f3f2f3;

    --color-white: #ffffff;
    --color-black: #000000;

    --color-text-color: #333333;
    --color-text-color-light: #9b9b9b;

    --color-background-grey: #dedede;
    --color-background-grey2: #f5f5f5;

    --color-border-grey: #f3f3f3;

    --color-grey-v1: #555555;
    --color-grey-v2: #707070;
    --color-grey-v3: #bfbfbf;

    --default-font-size: 16px;

    --color-environment-indicator: #ff8833;
    --color-environment-indicator-staging: #33c5ff;
}

.environmentIndicator {
    z-index: 9001;
    cursor: pointer;
    opacity: 0.4;

    position: fixed;
    top: -100px;
    left: -100px;
    width: 200px;
    padding-top: 145px;

    background-color: var(--color-environment-indicator);
    color: var(--color-white);

    font-size: 36px;
    font-family: "Arial", sans-serif;

    line-height: 50px;
    text-align: center;
    vertical-align: baseline;
    transform: rotate(315deg);
}

.environmentIndicator.staging {
    background-color: var(--color-environment-indicator-staging);
}

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

article,
aside,
footer,
header,
menu,
nav,
section,
summary {
    display: block;
}

::selection {
    background: #0b78d0;
    color: #0e0e16;
}

::-webkit-scrollbar {
    width: 14px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    width: 10px;
    border-radius: 10px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-color: #47524b;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #0b78d0;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/Inter.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Yellowtail';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/Yellowtail.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font: 16px/1.4 'Inter', sans-serif;
    margin: 0;
    padding-bottom: 3em;
    color: #37474f;
    background-color: #ffffff;
}

a {
    text-decoration: none;
    background-color: transparent;
    color: #0b78d0;
}

a:hover {
    text-decoration: underline;
    outline: none;
    color: #ffffff;
    background-color: #0b78d0;
    box-shadow: 3px 3px 0 #008dff;
    text-decoration: none;
}

a:active,
a:hover {
    outline: 0;
}

p {
    margin: 0;
}

p + p {
    margin-top: 1em;
}

.container {
    max-width: 49em;
    margin: 0 auto;
    padding: 0 1.5em;
}

.container:after {
    clear: both;
    display: table;
    content: " ";
}

header {
    border-bottom: 1px solid #dddddd;
    z-index: 20;
    background-color: #ffffff;
    padding: 1.5em 0;
    position: sticky;
    top: 0;
}

header h1 {
    margin: 0;
    font-size: 2em;
    font-weight: 300;
    color: #0b78d0;
}

header h2 {
    font-weight: 300;
    margin: 0;
    color: #666666;
}

.name {
    float: left;
}

.container > article {
    margin-top: 3em;
}

.container > article > h3 {
    display: inline-block;
    font-size: 1.2em;
    padding-bottom: .5em;
    margin-bottom: 1em;
    border-bottom: 1px solid #dddddd;
}

.item > h4 {
    margin-top: 0;
    margin-bottom: .6em;
}

.item > p {
    color: #666666;
}

.item a {
    text-decoration: none;
}

.item a:hover {
    text-decoration: underline;
}

.item .date {
    font-weight: normal;
    float: right;
    text-align: right;
    color: #666;
}

.item + .item {
    margin-top: 2em;
}

.portfolio .event-toggle {
    float: right;
    cursor: pointer;
    color: #0b78d0;
    top: 20px;
    position: relative;
    text-transform: uppercase;
    font-size: 12px;
}

.brand {
    list-style: none;
    font-size: 0;
}

.brand div {
    display: inline-block;
    width: calc(100% / 3);
    padding: 5px;
    vertical-align: top;
    position: relative;
}

.brand div[data-type="event"] {
    display: none!important;
}

.brand.show-events div[data-type="event"] {
    display: inline-block!important;
}

.brand div a {
    display: block;
    text-align: center;
    height: 245px;
    border-radius: 5px;
    transition: box-shadow 500ms 0ms;
}

.brand div a:before {
    display: inline-block;
    content: '';
    vertical-align: middle;
    height: 100%;
}

.brand div a:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.brand div .event {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}
.brand div .event span {
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #0b78d0;
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px; right: -21px;
}
.brand div .event span::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid #0b78d0;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #0b78d0;
}
.brand div .event span::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid #0b78d0;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #0b78d0;
}

.brand div img {
    max-width: 90%;
    max-height: 90%;
    vertical-align: middle;
}

.brand div .title {
    position: absolute;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    background: rgba(0, 0, 0, 0.85);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 25px;
    text-align: center;
    backdrop-filter: grayscale(.6) blur(4px);
    display: none;
    transition: .3ms display;
}

.brand div .title span {
    color: #c8d0cb;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}

.brand div:hover .title {
    display: block;
}

.contacts {
    padding: 0;
    margin: 0;
    margin-top: .5em;
    float: right;
    list-style: none;
    color: #666;
}

.contacts span {
    text-align: right;
    display: inline-block;
    min-width: 5em;
}

.label {
    font-size: 75%;
    padding: .1em .4em;
    margin: 0 0.15em;
    color: #fff;
    border-radius: .25em;
    background-color: #0b78d0;
}

.neon {
    display: none;
}

.neon {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .1s ease-in;
    -o-transition: .1s ease-in;
    transition: .1s ease-in;
    font-family: Yellowtail;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    top: -17px;
    left: 100px;
    z-index: 1000
}

.neon span {
    font-family: Yellowtail;
    display: table-cell;
    margin: 0;
    font-size: 1.5em;
    padding: 0;
    -webkit-animation: neonGlow 3s linear infinite;
    animation: neonGlow 3s linear infinite
}

.neon span:nth-child(1) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.neon span:nth-child(2) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.neon span:nth-child(3) {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s
}

.neon span:nth-child(4) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.neon span:nth-child(5) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    margin-right: 3px!important
}

.neon span:nth-child(6) {
    -webkit-animation-delay: 2.45s;
    animation-delay: 2.45s
}

.neon span:nth-child(7) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s
}

.neon span:nth-child(8) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s
}

.neon span:nth-child(9) {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s
}

@-webkit-keyframes neonGlow {
    0%,100% {
        color: #abe1fe;
        -webkit-filter: blur(2px);
        filter: blur(2px);
        text-shadow: 0 0 5px #43b7ff,0 0 10px #43b7ff,0 0 20px #43b7ff,0 0 25px #43b7ff,0 0 30px #43b7ff
    }

    5%,95% {
        color: #fff;
        -webkit-filter: blur(0);
        filter: blur(0);
        text-shadow: none,
    }
}

@keyframes neonGlow {
    0%,100% {
        color: #abe1fe;
        -webkit-filter: blur(2px);
        filter: blur(2px);
        text-shadow: 0 0 5px #43b7ff,0 0 10px #43b7ff,0 0 20px #43b7ff,0 0 25px #43b7ff,0 0 30px #43b7ff
    }

    5%,95% {
        color: #fff;
        -webkit-filter: blur(0);
        filter: blur(0);
        text-shadow: none,
    }
}

.dark {
    background: #0e0e16;
    color: #c8d0cb;
}

.dark .universe {
    display: block;
}

.dark .neon {
    display: inline;
    visibility: visible;
    opacity: 1;
}

.dark a:hover {
    color: #0e0e16;
    box-shadow: 3px 3px 0 #07497d;
}

.dark header {
    background: #0e0e16;
    border-bottom-color: #232335;
}

.dark header h2 {
    color: #c8d0cb;
}

.dark .container > article > h3 {
    border-bottom-color: #c8d0cb;
}

.dark .item > p {
    color: #7f9084;
}

.dark .label {
    border: 1px solid #0b78d0;
    background-color: transparent;
    color: #0b78d0;
    padding: .1em 0.3em;
    margin: 0 0.15em;
}

.dark .brand div a:hover {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

@media (max-width: 500px) {
    .name,
    .contacts {
        display: block;
        float: none;
    }

    .item .date {
        float: none;
        display: block;
    }

    header {
        position: unset;
    }

    .toggle {
        top: 100px!important;
        right: -20px!important;
    }

    .brand div {
        width: 100%;
    }

    .event-toggle {
        top: -6px!important;
        font-size: 17px!important;
        text-align: center;
        display: block;
        float: unset!important;
    }
}

@media print {
    *,
    article a {
        color: #000;
    }

    header {
        position: relative;
    }

    .toggle {
        display: none!important;
    }

    .label {
        background: none;
        color: #666;
    }

    article {
        margin-top: 1em;
        margin-left: 0;
        padding: 0;
        border: none;
    }

    .item h4 a:after {
        padding-left: .5em;
        content: attr(href);
        font-weight: normal;
    }

    .portfolio {
        display: none;
    }
}



.toggle {
    display: block;
    text-align: center;
    margin-top: 40px;
    user-select: none;
    position: absolute;
    top: 0;
    right: 50px;
    transform: scale(-0.5);
}

.toggle--checkbox {
    display: none;
}

.toggle--btn {
    display: block;
    margin: 0 auto;
    font-size: 1.4em;
    transition: all 350ms ease-in;
}
.toggle--btn:hover {
    cursor: pointer;
}

.toggle--btn, .toggle--btn:before, .toggle--btn:after,
.toggle--checkbox,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature,
.toggle--feature:before,
.toggle--feature:after {
    transition: all 250ms ease-in;
}
.toggle--btn:before, .toggle--btn:after,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature:before,
.toggle--feature:after {
    content: "";
    display: block;
}

.toggle--daynight .toggle--btn {
    position: relative;
    height: 70px;
    width: 125px;
    border-radius: 70px;
}
.toggle--daynight .toggle--btn:before {
    position: absolute;
    top: 2px;
    left: 4px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.toggle--daynight .toggle--btn {
    border: 5px solid #1c1c1c;
    background-color: #3c4145;
}
.toggle--daynight .toggle--btn:before {
    background-color: #fff;
    border: 5px solid #e3e3c7;
}
.toggle--daynight .toggle--btn:after {
    position: absolute;
    top: 62%;
    left: 39px;
    z-index: 10;
    width: 11.2px;
    height: 11.2px;
    opacity: 0;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: #fff 0 0, #fff 3px 0, #fff 6px 0, #fff 9px 0, #fff 11px 0, #fff 14px 0, #fff 16px 0, #fff 21px -1px 0 1px, #fff 16px -7px 0 -2px, #fff 7px -7px 0 1px, #d3d3d3 0 0 0 4px, #d3d3d3 6px 0 0 4px, #d3d3d3 11px 0 0 4px, #d3d3d3 16px 0 0 4px, #d3d3d3 21px -1px 0 5px, #d3d3d3 16px -7px 0 1px, #d3d3d3 7px -7px 0 5px;
    transition: opacity 100ms ease-in;
}
@keyframes starry_star {
    50% {
        background-color: rgba(255, 255, 255, 0.1);
        box-shadow: #fff 30px -3px 0 0, #fff 12px 10px 0 -1px, rgba(255, 255, 255, 0.1) 38px 18px 0 1px, #fff 32px 34px 0 0, rgba(255, 255, 255, 0.1) 20px 24px 0 -1.5px, #fff 5px 38px 0 1px;
    }
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 100;
        transform: scale(1.1);
    }
    55% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.9);
    }
    100% {
        opacity: 100;
        transform: scale(1);
    }
}
.toggle--daynight .toggle--feature {
    display: block;
    position: absolute;
    top: 9px;
    left: 52.5%;
    z-index: 20;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 0, rgba(255, 255, 255, 0.1) 12px 10px 0 -1px, #fff 38px 18px 0 1px, rgba(255, 255, 255, 0.1) 32px 34px 0 0, #fff 20px 24px 0 -1.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 1px;
    animation: starry_star 5s ease-in-out infinite;
}
.toggle--daynight .toggle--feature:before {
    position: absolute;
    top: -2px;
    left: -25px;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border-radius: 50%;
    border: 5px solid #e3e3c7;
    box-shadow: #e3e3c7 -28px 0 0 -3px, #e3e3c7 -8px 24px 0 -2px;
    transform-origin: -6px 130%;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn {
    background-color: #9ee3fb;
    border: 5px solid #86c3d7;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:before {
    left: 55px;
    background-color: #ffdf6d;
    border: 5px solid #e1c348;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:after {
    opacity: 100;
    animation-name: bounceIn;
    animation-duration: 0.6s;
    animation-delay: 0.1s;
    animation-fill-mode: backwards;
    animation-timing-function: ease-in-out;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature {
    opacity: 0;
    box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 -4px, rgba(255, 255, 255, 0.1) 12px 10px 0 -5px, #fff 38px 18px 0 -3px, rgba(255, 255, 255, 0.1) 32px 34px 0 -4px, #fff 20px 24px 0 -5.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 -3px;
    animation: none;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature:before {
    left: 25px;
    transform: rotate(70deg);
}

.universe {
    display: none;
    z-index: -1;
}

.universe1 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0
}

.universe2 {
    position: fixed;
    width: 100%;
    height: 70%;
    left: -20%!important;
    top: 0!important;
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1)
}

.universe2 .satellite {
    -webkit-animation-delay: 10s;
    animation-delay: 10s
}

.universe3 {
    position: fixed;
    width: 100%;
    height: 70%;
    left: -10%!important;
    top: 20%!important;
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1)
}

.universe3 .satellite {
    display: none
}

.satellite {
    width: 10px!important;
    position: absolute;
    top: 10%;
    left: 0;
    -webkit-animation-name: orbit;
    animation-name: orbit;
    -webkit-animation-duration: 11s;
    animation-duration: 11s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes orbit {
    0% {
        top: 10%;
        left: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        top: -40%;
        left: 120%;
        -webkit-transform: rotate(560deg);
        transform: rotate(560deg)
    }
}

@keyframes orbit {
    0% {
        top: 10%;
        left: 0;
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        top: -40%;
        left: 120%;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.shooting-star {
    position: absolute;
    right: 50%;
    top: -13.59%;
    width: 1px;
    height: 70px;
    background: #fff;
    -webkit-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    transform: rotate(-25deg);
    -webkit-animation: shootingStar;
    animation: shootingStar;
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.star2 {
    top: -23.59%;
    -webkit-animation: shootingStar2;
    animation: shootingStar2;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

@-webkit-keyframes shootingStar {
    0% {
        top: -13.59%;
        right: 60%
    }

    2% {
        opacity: 0;
        top: 100%;
        right: 0
    }

    86% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes shootingStar {
    0% {
        top: -13.59%;
        right: 60%
    }

    2% {
        opacity: 0;
        top: 100%;
        right: 0
    }

    86% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes shootingStar2 {
    0% {
        top: -23.59%;
        right: 50%
    }

    2% {
        opacity: 0;
        top: 100%;
        right: -17%
    }

    86% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@keyframes shootingStar2 {
    0% {
        top: -23.59%;
        right: 50%
    }

    2% {
        opacity: 0;
        top: 100%;
        right: -17%
    }

    86% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

.star {
    position: absolute;
    opacity: .5
}

.star:nth-child(1) {
    top: 2%;
    left: 25%;
    -webkit-animation: starFlicker;
    animation: starFlicker;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -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: forwards;
    animation-fill-mode: forwards
}

.star:nth-child(2) {
    top: 1.3%;
    left: 48%;
    -webkit-animation: starFlicker;
    animation: starFlicker;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -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: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.star:nth-child(3) {
    top: 20%;
    left: 36%;
    -webkit-animation: starFlicker;
    animation: starFlicker;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -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: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.star:nth-child(4) {
    top: 17%;
    left: 5%;
    -webkit-animation: starFlicker;
    animation: starFlicker;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -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: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: .8s;
    animation-delay: .8s
}

.star:nth-child(5) {
    top: 11%;
    right: 19%;
    -webkit-animation: starFlicker;
    animation: starFlicker;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -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: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.star:nth-child(6) {
    top: 4%;
    right: 24%;
    -webkit-animation: starFlicker;
    animation: starFlicker;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -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: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: .9s;
    animation-delay: .9s
}

.star:nth-child(7) {
    top: 3%;
    left: 29%;
    -webkit-animation: starFlicker;
    animation: starFlicker;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -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: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s
}

.star:nth-child(8) {
    top: 18%;
    left: 56%;
    -webkit-animation: starFlicker;
    animation: starFlicker;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -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: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.star:nth-child(9) {
    top: 31%;
    left: 57%;
    -webkit-animation: starFlicker;
    animation: starFlicker;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -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: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: .1s;
    animation-delay: .1s
}

.star:nth-child(10) {
    top: 27%;
    left: 12%;
    -webkit-animation: starFlicker;
    animation: starFlicker;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -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: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.star:nth-child(11) {
    top: 7%;
    right: 31%;
    -webkit-animation: starFlicker;
    animation: starFlicker;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -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: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s
}

.star:nth-child(12) {
    top: 35%;
    right: 12%;
    -webkit-animation: starFlicker;
    animation: starFlicker;
    -webkit-animation-duration: 4.5s;
    animation-duration: 4.5s;
    -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: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s
}

.star:nth-child(13) {
    top: 12%;
    right: 25%;
    -webkit-animation: starFlicker;
    animation: starFlicker;
    -webkit-animation-duration: 3.3s;
    animation-duration: 3.3s;
    -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: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: .7s;
    animation-delay: .7s
}

@-webkit-keyframes starFlicker {
    0% {
        opacity: .2
    }

    50% {
        opacity: .8
    }

    100% {
        opacity: .2
    }
}

@keyframes starFlicker {
    0% {
        opacity: .2
    }

    50% {
        opacity: .8
    }

    100% {
        opacity: .2
    }
}

.universe2 .star:nth-child(7) {
    top: -10%!important
}

.universe2 .star:nth-child(2) {
    top: -15%!important
}