/** modified version of eric meyer's reset 2.0 http://meyerweb.com/eric/tools/css/reset/ */
/** basic reset */
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:300,500,700");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/** HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, menu, nav, section, main, summary { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

/** modified version of normalize.css 3.0.2 http://necolas.github.io/normalize.css/ */
/** 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

/** HTML5 display definitions ============================================================================= */
/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/** Links ============================================================================= */
/** Remove the gray background color from active links in IE 10. */
a { background-color: transparent; }

/** Improve readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }

/** Text-level semantics ============================================================================= */
/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b, strong { font-weight: bold; }

/** 1. Address styling not present in Safari and Chrome. 2. Set previously resetted italic font-style */
dfn, i, em { font-style: italic; }

/** Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/** Embedded content ============================================================================= */
/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/** Grouping content ============================================================================= */
/** Address differences between Firefox and other browsers. */
hr { box-sizing: content-box; height: 0; }

/** Contain overflow in all browsers. */
pre { overflow: auto; }

/** Address odd `em`-unit font size rendering in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; }

/** Forms ============================================================================= */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select { text-transform: none; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input { line-height: normal; }

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width.  1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: none; }

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

html { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); height: 100%; background-color: #111; }

/** Sticky footer Source: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css */
.site { display: flex; height: 100%; flex-direction: column; }

.header, .footer { flex: none; }

.main { flex: 1 0 auto; width: 100%; }

.main::after { content: "\00a0"; /* &nbsp; */ display: block; margin-top: var(--space); height: 0px; visibility: hidden; }

/* Main layout */
.site, .main { background-color: #fff; }

.wrap { max-width: 69rem; margin: 0 auto; padding: 1rem; box-sizing: content-box; }

.header .wrap { display: flex; align-items: baseline; flex-wrap: wrap; }
.header .wrap .main-nav { flex: 1; min-width: 20rem; }

.main { padding-bottom: 2rem; }

.footer { background-color: #111; color: #a5a5a5; }
.footer .wrap { padding-top: 2rem; padding-bottom: 2rem; display: flex; }
.footer .wrap .footer-item { flex: 33%; }
.footer .wrap .footer-item:last-child { text-align: right; }
.footer .wrap .footer-item a { color: #a5a5a5; }

.media { display: flex; flex-direction: column; }
.media .media-image { margin-bottom: 1rem; }

.area-items { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.area-items .area-item { margin-bottom: 2rem; margin-right: 3em; box-sizing: border-box; flex: 1; min-width: 10rem; }
.area-items .area-item:last-of-type { margin-bottom: 0; margin-right: 0; }
@media (min-width: 450px) { .area-items .area-item { width: 50%; /* Target last row of 2-item grid */ }
  .area-items .area-item:nth-child(2n + 1):nth-last-child(-n + 2), .area-items .area-item:nth-child(2n + 1):nth-last-child(-n + 2) ~ .area-item { margin-bottom: 0; } }
@media (min-width: 900px) { .area-items .area-item { width: 25%; /* Target last row of 4-item grid */ }
  .area-items .area-item:nth-child(4n + 1):nth-last-child(-n + 4), .area-items .area-item:nth-child(4n + 1):nth-last-child(-n + 4) ~ .area-item { margin-bottom: 0; } }

.area-item { display: flex; }
.area-item .area-blurp { /*width: 250px;*/ width: 100%; /*margin-right: 2*$spacing;*/ }
.area-item .area-projects { display: none; }

.area-item { position: relative; }
.area-item:hover { cursor: pointer; }
.area-item:hover .project-title { text-decoration: underline; }
.area-item .project-image { height: 9rem; background-color: #fff; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; }

.area-icon { border: 2px solid #111; height: 6rem; box-sizing: border-box; padding: 2rem; background: transparent url(../img/icon-area.png) 50% 50% no-repeat; background-size: auto 33px; }

.grid-2 { display: flex; flex-wrap: wrap; }
.grid-2 > div { flex: calc(50% - 3rem); min-width: 20rem; margin-right: 3rem; box-sizing: border-box; }
.grid-2 > div:nth-of-type(2n) { margin-right: 0; }

.grid-4 { display: flex; flex-wrap: wrap; }
.grid-4 > div { flex: calc(25% - 3rem); min-width: 12rem; margin-right: 3rem; box-sizing: border-box; }
@media (max-width: 42rem) { .grid-4 > div:nth-of-type(2n) { margin-right: 0; } }
@media (min-width: 42rem) and (max-width: 57rem) { .grid-4 > div:nth-of-type(3n) { margin-right: 0; } }
@media (min-width: 57rem) { .grid-4 > div:nth-of-type(4n) { margin-right: 0; } }

.entry-item { border-left: 3px solid #FF6F00; padding: 0 1rem; margin-bottom: 1.5rem; }
.entry-item img { max-width: 100%; max-height: 100%; }

.logo { white-space: nowrap; margin-right: 1rem; }
.logo:link, .logo:hover, .logo:visited { text-decoration: none; color: inherit; }
.logo span { display: inline-block; text-indent: -9999px; width: 80px; background: transparent url(../img/logo.png) 3px 50% no-repeat; background-size: auto 100%; height: 1.3rem; vertical-align: bottom; transform: translateY(-1px); }

/* Lists, navs */
.nav { list-style: none; display: flex; flex-wrap: wrap; }
.nav li { margin-right: 2rem; }
.nav li:last-child { margin-right: 0; }

@media (max-width: 45rem) { .main-nav .nav { margin: 1rem -1rem; }
  .main-nav .nav li { flex: 40%; }
  .main-nav .nav li a { display: block; padding: 0.5rem 1rem; } }
@media (min-width: 45rem) { .main-nav .nav { justify-content: flex-end; text-align: right; } }

body { font-family: 'Roboto', sans-serif; color: #1a1a1a; }

.main .wrap, .footer .wrap { font-weight: 300; }

/* Paragraphs */
p, ul, ol { line-height: 1.5rem; }
p + p, p + ul, p + ol, ul + p, ul + ul, ul + ol, ol + p, ol + ul, ol + ol { margin-top: 1.5rem; }

/* Links */
a:link, a:visited { color: #003cff; text-decoration: none; }
a:hover { text-decoration: underline; }

.active a { color: inherit; text-decoration: none; }

a.link-button { font-size: .8em; border: 1px solid #ccc; border-radius: 4px; font-weight: 500; display: inline-block; padding: 0 .4em; text-transform: uppercase; }
a.link-button:hover { text-decoration: none; border-color: #003cff; }

.read-more-btn { text-transform: uppercase; font-size: .85em; }

/* Headlines */
h1, h2, h3, h4 { line-height: 2rem; }

h1 { margin: 0 0 2rem; }

h2 { font-weight: 500; font-size: 1.375em; margin: 2rem 0 1rem; }
@media (max-width: 60rem) { h2 { font-size: 1.25em; } }

.page-title, .position-title { margin-top: 1rem; margin-bottom: 2rem; font-family: 'Roboto Mono', monospace; font-weight: 400; font-size: 1.5em; }

/* Entries */
.entry-title { font-weight: 500; line-height: 1.5; margin: 0; }

.entry-meta { font-size: 0.875em; color: #606060; margin: 0; font-style: italic; }
.entry-meta + p { margin-top: 0; }

.project-title { font-weight: 500; line-height: 1.5rem; }

.project-description { font-size: 0.8125em; line-height: 1.25rem; hyphens: auto; }

/* Special elements */
.header .wrap { line-height: 1rem; }

.logo { font-weight: 300; font-size: .875em; line-height: 1; }
.logo span { font-weight: 700; font-family: 'Roboto Mono', monospace; font-size: 1.3571428571em; color: #FF6F00; }

.note { color: #aaa; }

.small { font-size: .825em; color: #555; }

.small ul li { text-indent: -10px; margin-left: 10px; }
.small ul li:before { content: "\00b7 "; font-size: 20px; vertical-align: middle; line-height: 21px; }

.slogan { font-size: 2.5em; line-height: 3.5rem; font-family: 'Roboto Mono', monospace; margin-bottom: 1.5rem; }
@media (max-width: 550px) { .slogan { font-size: 2em; line-height: 3rem; } }
.slogan em { font-weight: 700; font-style: normal; }

.introduction { max-width: 41em; font-size: 1.125em; }
.introduction p { line-height: 2rem; }
@media (max-width: 45rem) { .introduction { font-size: 1.0625rem; } }

.sponsors { text-align: center; font-size: .875rem; max-width: 40rem; margin: 2rem auto 3rem; }
.sponsors:after, .sponsors:before { content: ""; width: 3rem; display: block; border-top: 1px solid #555; margin: .5rem auto; }

.footer { font-size: 0.875em; }
.footer h2 { font-size: 1em; color: #fff; margin: 0; }

.main-nav { font-weight: 500; font-size: 0.875em; }

.group-picture { max-width: 550px; margin: 0 auto 1rem !important; }
.group-picture a.photo { display: block; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border: 10px solid #fff; text-decoration: none; color: inherit; font-size: 0.8125em; }
.group-picture img { box-sizing: border-box; width: 100%; height: auto; display: block; }
.group-picture .caption { display: block; padding: .5em 0 0; text-align: center; }

.group-picture-past { text-align: center; }
.group-picture-past a { color: #003cff; }

.position-members { overflow: hidden; display: flex; flex-wrap: wrap; align-items: stretch; }

.position-alumni { flex-direction: column; }
.position-alumni .namecard { margin-bottom: 0.5rem; }
.position-alumni .member-name, .position-alumni .member-career, .position-alumni .member-period, .position-alumni .member-now, .position-alumni .member-materials { float: left; padding-right: 10px; font-size: 0.9em; }

.member-name { font-weight: bold; line-height: 1.5rem; }

.member-interest { padding-top: .3rem; padding-bottom: .3rem; font-size: .85em; }

.member-period { color: #aaa; font-size: 0.8em; }

.namecard { clear: left; display: flex; margin-bottom: 2rem; }
.namecard .member-image { width: 10rem; height: 10rem; background-position: 50% 50%; background-repeat: none; background-size: cover; background-color: #f0f0f0; float: left; margin-right: 1rem; }
.namecard .namecard-content p { margin: 0; }

.project-list .project-title { font-weight: 500; line-height: 2rem; }
.project-list .project { clear: left; border-left: 3px solid #FF6F00; display: flex; flex-wrap: wrap; margin-bottom: 2rem; }
.project-list .project .project-image { float: right; max-width: 24rem; margin-left: 3rem; flex: 24; min-width: 15rem; }
.project-list .project .project-image img { width: 100%; height: auto; }
@media (max-width: 39rem) { .project-list .project .project-image { order: -1; margin: 0 0 1rem calc(1.5rem - 3px); } }
.project-list .project .project-text { flex: 42; min-width: 20rem; max-width: 100%; box-sizing: border-box; font-size: 0.9375rem; padding: 0.5rem 0 0.5rem calc(1.5rem - 3px); line-height: 1.5rem; }
.project-list .project .project-text .project-title { margin-top: 0; }

.single-project .page-title { margin-bottom: 1rem; }
.single-project .entry-meta { margin-bottom: 1rem; }
.single-project .project-text img { max-width: 100%; }
.single-project .project-text .caption { font-weight: bold; font-size: .85em; }
.single-project .project-text iframe { margin: 1.5rem 0; }
.single-project .project-content { display: flex; flex-direction: column; }
@media (min-width: 600px) { .single-project .project-content { flex-direction: row; } }
.single-project .project-content .project-meta { font-size: .9em; margin-bottom: 2rem; }
@media (min-width: 600px) { .single-project .project-content .project-meta { order: 2; flex: 20; margin-left: 3rem; border-top: 1px solid #333; padding-top: .5em; } }
.single-project .project-content .project-text { flex: 49; }

.links-list { margin-left: .5em; line-height: 1.5; }
.links-list li { text-indent: -1em; margin-left: 1em; }
.links-list li:before { content: "\25A0"; width: 1em; text-align: center; display: inline-block; }
.links-list li.external:before { content: "\2197"; }
.links-list li.document:before { content: "\2630"; }

.publications { list-style: square; padding-left: 20px; line-height: 1.5; }
.publications li { margin-bottom: 1rem; }
.publications .award { background-color: cornsilk; font-weight: bold; margin-right: 10px; }
.publications .author p { margin: 0; }
.publications .venue { margin-right: 10px; }
.publications .title { font-weight: bold; }
.publications .year { font-size: 130%; margin: 20px 0 8px -20px; color: #888; }

.filter-labels { display: flex; font-size: 0.9375rem; margin: 2rem 0; }
.filter-labels .segmented-control { margin-right: 1rem; margin-top: 0.5rem; font-size: 0.875rem; }

@media (max-width: 600px) { .filter-label-list { width: 100%; }
  .filter-label-list .segmented-control { display: flex; width: 100%; flex-direction: column; flex-wrap: wrap; }
  .filter-label-list .segmented-control label { margin-left: 0; border-radius: 0; } }
.teachersday-event { background-color: transparent; }

.member-image { flex-shrink: 0; }

header { background-color: white; }

.namecard-content { background-color: rgba(255, 255, 255, 0.6); }

.juho-section:hover { animation: tada 1s linear; }

@keyframes tada { 0% { transform: scale3d(1, 1, 1); }
  10%, 20% { transform: rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { transform: rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% { transform: rotate3d(0, 0, 1, -3deg); }
  100% { transform: scale3d(1, 1, 1); } }
.teachersday-banner { max-width: 550px; margin: 0 auto 1rem; background-color: white; display: block; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border: 10px solid #fff; text-decoration: none; color: inherit; font-size: 0.8125em; margin-bottom: 36px; }
.teachersday-banner img { box-sizing: border-box; width: 100%; height: auto; display: block; }
.teachersday-banner .caption { display: block; padding: .5em 0 0; text-align: center; }

/* Snow? */
.event-bg { width: 100%; height: 100vh; position: fixed; background-color: white; top: 0; left: 0; z-index: -1; }

.event-flowers { --size: 3vw; width: var(--size); height: var(--size); background-image: url("/assets/img/carnation.svg"); background-size: contain; background-repeat: no-repeat; position: absolute; top: -5vh; }

@keyframes fall { 0% { transform: translate3d(var(--left-ini), 0, 0); }
  100% { transform: translate3d(var(--left-end), 110vh, 0); } }
.event-flowers:nth-child(1) { --size: 4vw; --left-ini: 4vw; --left-end: -1vw; --deg-start: -54deg; --deg-end: 21deg; left: 9vw; animation: fall 7s linear infinite; animation-delay: -1s; }

.event-flowers:nth-child(2) { --size: 1vw; --left-ini: 7vw; --left-end: 6vw; --deg-start: 6deg; --deg-end: -86deg; left: 75vw; animation: fall 10s linear infinite; animation-delay: -8s; }

.event-flowers:nth-child(3) { --size: 5vw; --left-ini: -2vw; --left-end: 5vw; --deg-start: 17deg; --deg-end: 55deg; left: 83vw; animation: fall 7s linear infinite; animation-delay: -8s; }

.event-flowers:nth-child(4) { --size: 4vw; --left-ini: -3vw; --left-end: -5vw; --deg-start: 49deg; --deg-end: 59deg; left: 35vw; animation: fall 9s linear infinite; animation-delay: -7s; }

.event-flowers:nth-child(5) { --size: 5vw; --left-ini: 9vw; --left-end: -5vw; --deg-start: 81deg; --deg-end: -58deg; left: 78vw; animation: fall 7s linear infinite; animation-delay: -9s; }

.event-flowers:nth-child(6) { --size: 1vw; --left-ini: 6vw; --left-end: -6vw; --deg-start: -86deg; --deg-end: -30deg; left: 4vw; animation: fall 9s linear infinite; animation-delay: -6s; }

.event-flowers:nth-child(7) { --size: 2vw; --left-ini: -1vw; --left-end: -3vw; --deg-start: -4deg; --deg-end: 35deg; left: 31vw; animation: fall 10s linear infinite; animation-delay: -5s; }

.event-flowers:nth-child(8) { --size: 5vw; --left-ini: 9vw; --left-end: 3vw; --deg-start: 62deg; --deg-end: 28deg; left: 42vw; animation: fall 9s linear infinite; animation-delay: -5s; }

.event-flowers:nth-child(9) { --size: 3vw; --left-ini: 7vw; --left-end: -1vw; --deg-start: -73deg; --deg-end: 54deg; left: 79vw; animation: fall 7s linear infinite; animation-delay: -1s; }

.event-flowers:nth-child(10) { --size: 1vw; --left-ini: -9vw; --left-end: 0vw; --deg-start: 64deg; --deg-end: -63deg; left: 64vw; animation: fall 9s linear infinite; animation-delay: -6s; }

.event-flowers:nth-child(11) { --size: 5vw; --left-ini: 7vw; --left-end: -4vw; --deg-start: -29deg; --deg-end: -80deg; left: 89vw; animation: fall 8s linear infinite; animation-delay: -2s; }

.event-flowers:nth-child(12) { --size: 3vw; --left-ini: 6vw; --left-end: 3vw; --deg-start: 59deg; --deg-end: 22deg; left: 41vw; animation: fall 11s linear infinite; animation-delay: -3s; }

.event-flowers:nth-child(13) { --size: 2vw; --left-ini: 6vw; --left-end: 2vw; --deg-start: 22deg; --deg-end: -43deg; left: 79vw; animation: fall 9s linear infinite; animation-delay: -8s; }

.event-flowers:nth-child(14) { --size: 2vw; --left-ini: -4vw; --left-end: -7vw; --deg-start: -39deg; --deg-end: -6deg; left: 64vw; animation: fall 10s linear infinite; animation-delay: -7s; }

.event-flowers:nth-child(15) { --size: 5vw; --left-ini: -5vw; --left-end: 8vw; --deg-start: 33deg; --deg-end: -86deg; left: 91vw; animation: fall 8s linear infinite; animation-delay: -4s; }

.event-flowers:nth-child(16) { --size: 5vw; --left-ini: 9vw; --left-end: 3vw; --deg-start: 53deg; --deg-end: 71deg; left: 87vw; animation: fall 6s linear infinite; animation-delay: -4s; }

.event-flowers:nth-child(17) { --size: 3vw; --left-ini: -6vw; --left-end: -1vw; --deg-start: -83deg; --deg-end: 87deg; left: 85vw; animation: fall 9s linear infinite; animation-delay: -6s; }

.event-flowers:nth-child(18) { --size: 4vw; --left-ini: -1vw; --left-end: 7vw; --deg-start: 44deg; --deg-end: -53deg; left: 17vw; animation: fall 10s linear infinite; animation-delay: -10s; }

.event-flowers:nth-child(19) { --size: 4vw; --left-ini: -8vw; --left-end: -9vw; --deg-start: 75deg; --deg-end: -2deg; left: 95vw; animation: fall 9s linear infinite; animation-delay: -3s; }

.event-flowers:nth-child(20) { --size: 5vw; --left-ini: -5vw; --left-end: -4vw; --deg-start: 82deg; --deg-end: -41deg; left: 63vw; animation: fall 6s linear infinite; animation-delay: -6s; }

.event-flowers:nth-child(21) { --size: 3vw; --left-ini: 6vw; --left-end: 2vw; --deg-start: -4deg; --deg-end: -5deg; left: 25vw; animation: fall 11s linear infinite; animation-delay: -3s; }

.event-flowers:nth-child(22) { --size: 3vw; --left-ini: -1vw; --left-end: 10vw; --deg-start: 69deg; --deg-end: 3deg; left: 34vw; animation: fall 10s linear infinite; animation-delay: -9s; }

.event-flowers:nth-child(23) { --size: 5vw; --left-ini: -3vw; --left-end: -4vw; --deg-start: -50deg; --deg-end: 0deg; left: 83vw; animation: fall 10s linear infinite; animation-delay: -10s; }

.event-flowers:nth-child(24) { --size: 5vw; --left-ini: -1vw; --left-end: 6vw; --deg-start: 11deg; --deg-end: 29deg; left: 92vw; animation: fall 7s linear infinite; animation-delay: -10s; }

.event-flowers:nth-child(25) { --size: 1vw; --left-ini: 6vw; --left-end: 10vw; --deg-start: 35deg; --deg-end: 26deg; left: 58vw; animation: fall 7s linear infinite; animation-delay: -6s; }

.event-flowers:nth-child(26) { --size: 2vw; --left-ini: 1vw; --left-end: -2vw; --deg-start: 77deg; --deg-end: -33deg; left: 16vw; animation: fall 9s linear infinite; animation-delay: -2s; }

.event-flowers:nth-child(27) { --size: 5vw; --left-ini: -7vw; --left-end: -2vw; --deg-start: -17deg; --deg-end: -29deg; left: 60vw; animation: fall 11s linear infinite; animation-delay: -9s; }

.event-flowers:nth-child(28) { --size: 1vw; --left-ini: -9vw; --left-end: -8vw; --deg-start: 79deg; --deg-end: 36deg; left: 31vw; animation: fall 10s linear infinite; animation-delay: -5s; }

.event-flowers:nth-child(29) { --size: 1vw; --left-ini: -9vw; --left-end: -5vw; --deg-start: -85deg; --deg-end: 27deg; left: 40vw; animation: fall 6s linear infinite; animation-delay: -5s; }

.event-flowers:nth-child(30) { --size: 2vw; --left-ini: -7vw; --left-end: 10vw; --deg-start: 16deg; --deg-end: -7deg; left: 85vw; animation: fall 11s linear infinite; animation-delay: -1s; }

.event-flowers:nth-child(31) { --size: 1vw; --left-ini: -8vw; --left-end: 7vw; --deg-start: -28deg; --deg-end: 77deg; left: 81vw; animation: fall 9s linear infinite; animation-delay: -8s; }

.event-flowers:nth-child(32) { --size: 4vw; --left-ini: -9vw; --left-end: 8vw; --deg-start: 22deg; --deg-end: 85deg; left: 16vw; animation: fall 6s linear infinite; animation-delay: -8s; }

.event-flowers:nth-child(33) { --size: 1vw; --left-ini: -9vw; --left-end: 6vw; --deg-start: 89deg; --deg-end: 11deg; left: 4vw; animation: fall 10s linear infinite; animation-delay: -1s; }

.event-flowers:nth-child(34) { --size: 4vw; --left-ini: 0vw; --left-end: 4vw; --deg-start: -65deg; --deg-end: 54deg; left: 89vw; animation: fall 6s linear infinite; animation-delay: -6s; }

.event-flowers:nth-child(35) { --size: 4vw; --left-ini: -8vw; --left-end: 1vw; --deg-start: 42deg; --deg-end: 21deg; left: 28vw; animation: fall 10s linear infinite; animation-delay: -10s; }

.event-flowers:nth-child(36) { --size: 5vw; --left-ini: 9vw; --left-end: 10vw; --deg-start: 69deg; --deg-end: 62deg; left: 19vw; animation: fall 9s linear infinite; animation-delay: -6s; }

.event-flowers:nth-child(37) { --size: 4vw; --left-ini: 8vw; --left-end: 2vw; --deg-start: -89deg; --deg-end: 19deg; left: 44vw; animation: fall 6s linear infinite; animation-delay: -10s; }

.event-flowers:nth-child(38) { --size: 5vw; --left-ini: 8vw; --left-end: -1vw; --deg-start: -81deg; --deg-end: 28deg; left: 11vw; animation: fall 6s linear infinite; animation-delay: -8s; }

.event-flowers:nth-child(39) { --size: 5vw; --left-ini: -7vw; --left-end: -2vw; --deg-start: 32deg; --deg-end: 1deg; left: 52vw; animation: fall 9s linear infinite; animation-delay: -8s; }

.event-flowers:nth-child(40) { --size: 5vw; --left-ini: -7vw; --left-end: -6vw; --deg-start: 47deg; --deg-end: 13deg; left: 35vw; animation: fall 10s linear infinite; animation-delay: -10s; }

.event-flowers:nth-child(41) { --size: 1vw; --left-ini: 7vw; --left-end: 8vw; --deg-start: -22deg; --deg-end: 34deg; left: 99vw; animation: fall 8s linear infinite; animation-delay: -10s; }

.event-flowers:nth-child(42) { --size: 5vw; --left-ini: -5vw; --left-end: -3vw; --deg-start: -65deg; --deg-end: 83deg; left: 89vw; animation: fall 10s linear infinite; animation-delay: -7s; }

.event-flowers:nth-child(43) { --size: 2vw; --left-ini: -5vw; --left-end: 5vw; --deg-start: -84deg; --deg-end: -2deg; left: 21vw; animation: fall 8s linear infinite; animation-delay: -7s; }

.event-flowers:nth-child(44) { --size: 2vw; --left-ini: -5vw; --left-end: 3vw; --deg-start: 41deg; --deg-end: -49deg; left: 43vw; animation: fall 7s linear infinite; animation-delay: -8s; }

.event-flowers:nth-child(45) { --size: 2vw; --left-ini: -3vw; --left-end: -5vw; --deg-start: 26deg; --deg-end: 76deg; left: 78vw; animation: fall 8s linear infinite; animation-delay: -10s; }

.event-flowers:nth-child(46) { --size: 5vw; --left-ini: 9vw; --left-end: -7vw; --deg-start: 87deg; --deg-end: 14deg; left: 44vw; animation: fall 11s linear infinite; animation-delay: -8s; }

.event-flowers:nth-child(47) { --size: 5vw; --left-ini: 0vw; --left-end: -6vw; --deg-start: 85deg; --deg-end: 38deg; left: 75vw; animation: fall 6s linear infinite; animation-delay: -1s; }

.event-flowers:nth-child(48) { --size: 1vw; --left-ini: 5vw; --left-end: 0vw; --deg-start: -21deg; --deg-end: 47deg; left: 90vw; animation: fall 9s linear infinite; animation-delay: -8s; }

.event-flowers:nth-child(49) { --size: 3vw; --left-ini: -5vw; --left-end: 7vw; --deg-start: -67deg; --deg-end: -50deg; left: 56vw; animation: fall 7s linear infinite; animation-delay: -7s; }

.event-flowers:nth-child(50) { --size: 2vw; --left-ini: 10vw; --left-end: -1vw; --deg-start: 20deg; --deg-end: 11deg; left: 54vw; animation: fall 11s linear infinite; animation-delay: -6s; }