@font-face { font-family: 'Titillium Web Regular'; src: url("/fonts/TitilliumWeb-Regular.ttf") format("truetype"); font-display: swap; font-weight: normal; }

@font-face { font-family: 'Titillium Web Light'; src: url("/fonts/TitilliumWeb-Light.ttf") format("truetype"); font-display: swap; font-weight: normal; }

@font-face { font-family: 'Titillium Web Black'; src: url("/fonts/TitilliumWeb-Black.ttf") format("truetype"); font-display: swap; font-weight: normal; }

@font-face { font-family: 'Titillium Web Semi Bold'; src: url("/fonts/TitilliumWeb-SemiBold.ttf") format("truetype"); font-display: swap; font-weight: normal; }

@font-face { font-family: 'Titillium Web Bold'; src: url("/fonts/TitilliumWeb-Bold.ttf") format("truetype"); font-display: swap; font-weight: normal; }

@keyframes mobileMenu { 0% { opacity: 0; }
  99% { opacity: 0; }
  100% { opacity: 1; } }

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/** 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; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove default margin. */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

/** 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; /* 1 */ vertical-align: baseline; /* 2 */ }

/** 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: transparent; }

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

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

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

/** Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }

/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** 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; vertical-align: baseline; }

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 margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }

/** Address differences between Firefox and other browsers. */
hr { -moz-box-sizing: content-box; 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; font-size: 1em; }

/* 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; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** 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; /* 2 */ cursor: pointer; /* 3 */ }

/** 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; /* 1 */ padding: 0; /* 2 */ }

/** 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: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }

/** 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; }

/** Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** 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; }

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

html { font-size: 16px; }

html, body { position: relative; font-family: "Titillium Web Regular", sans-serif; font-weight: 400; line-height: 1.5; }

body { padding-top: 120px; }

h1, h2, h3 { font-family: "Titillium Web Light", sans-serif; font-weight: normal; }

h2 { font-family: "Titillium Web Black", sans-serif; }

img { aspect-ratio: attr(width)/attr(height); }

small { font-size: 14px; }

var { font-style: initial; float: none !important; width: auto !important; padding: 0px !important; }

var sup { margin-left: 3px; }

dl { display: flex; flex-wrap: wrap; margin: 0 0 20px; }

dl > dt { font-weight: 600; flex: 0 0 65px; }

dl > dd { margin-left: 0; flex: 1 1 calc(100% - 65px); }

nav { display: flex; min-height: 120px; align-items: center; justify-content: center; padding: 0px; background-color: #fff; position: fixed; top: 0px; left: 50%; transform: translate(-50%); z-index: 4; -webkit-transition: min-height 0.8s; -moz-transition: min-height 0.8s; -ms-transition: min-height 0.8s; -o-transition: min-height 0.8s; transition: min-height 0.8s; }

nav.sticky { min-height: 70px; }

nav .nav-logo { display: flex; margin-left: 8px; }

nav .nav-logo img { width: 150px; height: 50.013px; }

nav .nav-separator { flex: 1; }

nav .nav-heading { display: none; margin-right: 38px; padding-top: 1px; text-align: right; font-size: 1.25em; line-height: 0; position: relative; color: #fff; cursor: pointer; }

nav .nav-heading::before { content: ''; top: -15px; right: -12px; bottom: -17px; left: -12px; display: block; border-radius: 20px; position: absolute; background-color: #faa352; z-index: -1; }

nav #nav-menu, nav .nav-menu { display: none; }

nav .nav-link { position: relative; margin-right: 22px; color: #1f334a; font-size: 1.2rem; text-decoration: none; }

nav .nav-link:hover, nav .nav-link.active { color: #fff; }

nav .nav-link::before { content: ''; position: absolute; top: -2px; right: -8px; bottom: -3px; left: -12px; display: block; border-radius: 20px; background-color: #fff; transition: background-color 0.3s ease-in-out; z-index: -1; }

nav .nav-link.active::before { background-color: #faa352; }

nav .nav-link:hover::before { background-color: #1f334a; }

.button { position: relative; height: 30px; color: #fff; background-color: #faa352; font-size: 20px; padding: 2px 35px 3px 15px; border-radius: 20px; font-weight: normal; text-decoration: none; cursor: pointer; }

.button::before { content: ''; position: absolute; width: 22px; height: 22px; top: 7px; right: 7px; border-radius: 11px; color: #faa352; background-color: #fff; background-image: url("/images/arrow-orange.svg"); background-position: 0px; background-repeat: no-repeat; font-weight: bold; }

.button.white { color: #faa352; background-color: #fff; }

.button.white::before { background-color: #faa352; background-image: url("/images/arrow-white.svg"); }

header.model.content-block { display: flex; align-items: center; padding: 100px 75px; }

header.model.content-block > .button { display: none; width: auto; }

header.model.content-block > * { width: 50%; margin: 0px; }

header.model.content-block p, header.model.content-block div { padding: 0px; }

header.model.content-block .sub-heading { display: flex; justify-content: flex-end; flex-direction: column; padding-right: 75px; }

header.model.content-block .sub-heading h2 { width: fit-content; margin: 0px; }

header.model.content-block .sub-heading > * { align-self: flex-end; }

header.model.content-block p { border-left: 3px #faa352 solid; padding-left: 75px; }

header.model.content-block p span { color: #faa352; font-weight: bold; font-size: 1.5rem; }

header.model.content-block p a { color: #1f334a; }

section.icons, section.column2, section.column3 { margin-top: 20px; margin-bottom: -20px; }

section.column2.gray { margin-bottom: 100px; }

section.column2.gray.lastChild { margin-bottom: 20px; }

section.column2.gray.captions { margin-bottom: -20px; }

figure { margin-inline-start: 0px; margin-inline-end: 0px; }

figure.icon { display: flex; flex-direction: row; align-content: flex-start; align-items: center; align-self: start; }

figure .fa { font-size: 100px; width: 80px; margin: 0px; color: #faa352; }

ul { list-style: none; padding-left: 17px; float: none !important; }

ul li { position: relative; }

ul li::before { content: ""; position: absolute; top: 12px; left: -15px; width: 5px; height: 5px; background-color: #1f334a; }

.content-block > * { margin-right: 45px; margin-left: 45px; }

.container { box-sizing: border-box; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; max-width: 100%; color: #1f334a; }

.container.listing { padding: 20px; display: flex; flex-wrap: wrap; }

.container.orange { color: #fff; background-color: #faa352; text-align: center; }

.container.orange.listing.links > div { width: 100%; margin: 10px 0px; font-size: 1.5rem; font-family: "Titillium Web Bold", sans-serif; width: calc(50% - 20px); text-align: right; }

.container.orange.listing.links > div:nth-child(3n) { text-align: left; }

.container > h3 { color: #faa352; margin-top: 30px; line-height: 1; }

.container.closingBlock { padding: 0px 30px; }

.container p { font-size: 1.2rem; }

.container p a { color: #faa352; }

.container p a.notDeco { text-decoration: none; color: #1f334a; }

.container.legal-headline h2 { line-height: 0px; margin-top: 40px; margin-bottom: 25px; }

.container.gray { background-color: #eee; position: relative; }

.container.gray.icons:before { content: ""; background-color: #fff; width: 100%; height: 110px; position: absolute; bottom: 0px; left: 0px; }

.container.gray h2 a { text-decoration: none; color: #1f334a; }

.container.column2 { flex-direction: column; box-sizing: border-box; padding-bottom: 50px; margin-bottom: 100px; }

.container.column2.flowing { display: block; scroll-margin-top: 200px; }

.container.column2.flowing .mainItem { display: flow-root; font-size: 1.2rem; padding-bottom: 0px; }

.container.column2.flowing .mainItem > .picture { padding: 0px 0px 30px 50px; margin-top: 30px; }

.container.column2.flowing .mainItem > .picture picture { line-height: 0; }

.container.column2.flowing .mainItem h2 { text-align: right; }

.container.column2.flowing .mainItem > * { float: right; }

.container.column2.flowing .mainItem > :last-child { padding-left: 0px; }

.container.column2.flowing .mainItem:first-child { padding-top: 0px; margin-top: 0px; }

.container.column2.flowing .mainItem:first-child > .picture { margin-top: -30px; }

.container.column2.flowing .mainItem:first-child h2 { margin-top: 30px; }

.container.column2.flowing .mainItem ul { margin-left: 20px; text-align: left; width: inherit; }

.container.column2.flowing .mainItem a { float: none; text-decoration: none; color: #faa352; }

.container.column2.flowing:nth-child(2n) .mainItem h2 { text-align: left; }

.container.column2.flowing:nth-child(2n) .mainItem > .picture { padding: 0px 50px 30px 0px; }

.container.column2.flowing:nth-child(2n) .mainItem > * { float: left; }

.container.column2.flowing:nth-child(2n) .mainItem > :last-child { padding-left: 0px; }

.container.column2 h2 { font-size: 2rem; }

.container.column2 .mainItem .button { border: solid 3px #eee; }

.container.column2 .mainItem:first-child h2 { margin-top: 60px; }

.container.column2.captions .mainItem { justify-content: space-around; padding: 0px; }

.container.column2.captions .mainItem:first-child { margin-top: -40px; }

.container.column2.captions .mainItem > figure { width: 180px; position: relative; padding: 25px; margin-right: 200px; }

.container.column2.captions .mainItem > figure figcaption { position: absolute; left: 200px; width: 235px; font-family: "Titillium Web SemiBold", sans-serif; font-size: 1.5rem; text-align: left; font-weight: 600; }

.container.column2.captions .mainItem > figure img { width: 100px; }

.container.column2 h2, .container.text-block-container h2 { font-size: 2rem; }

.container .mainItem { display: flex; width: 100%; padding: 50px 50px; box-sizing: border-box; }

.container .mainItem:first-child { margin-top: -80px; }

.container .mainItem:nth-child(even) { flex-direction: row-reverse; }

.container .mainItem:nth-child(even) > *:last-child { padding-right: 50px; }

.container .mainItem:nth-child(odd) { flex-direction: row; }

.container .mainItem:nth-child(odd) > *:last-child { padding-left: 50px; }

.container .mainItem > * { width: 50%; box-sizing: border-box; }

.container .mainItem > *:last-child { align-self: flex-end; }

.container .mainItem picture { margin: 0px; display: inherit; position: relative; border-radius: 0 30px 0 30px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); height: fit-content; }

.container .mainItem picture > img { width: 100%; height: auto; border-radius: 0 30px 0 30px; }

.container .mainItem picture .button { position: absolute; bottom: 25px; left: 25px; }

.container .mainItem p { text-align: initial; margin: 0px; padding-bottom: 30px; border-bottom: solid 3px #faa352; }

.container.text-block-container { padding: 15px 15px 30px; }

.container.text-block-container > div { display: flex; }

.container.text-block-container > div > * { width: 50%; text-align: left; margin-top: 0px; margin-bottom: 0px; font-size: 1.2rem; }

.container.text-block-container .text-block:nth-child(even) { padding-left: 30px; }

.container.text-block-container .text-block:nth-child(odd) { padding-right: 30px; }

.container.text-block-container .text-block h3 { color: #faa352; }

.container.text-block-container ul { padding-right: 20px; }

.container.text-block-container ul:first-child { padding-left: 20px; }

.container.text-block-container ul:last-child { margin-left: 10px; padding-left: 25px; }

.img-responsive { max-width: 80%; height: auto; }

.img-responsive.reference { max-width: 110%; margin-left: -5%; }

.sub-heading { text-align: center; font-size: 2rem; }

.hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }

.hero img { width: 100%; height: auto; }

.hero > div { width: calc(50% - 70px); min-width: 465px; position: absolute; right: 0px; top: 30%; font-size: 3.1rem; line-height: 1.3; text-align: left; }

.hero > div h1 { font-family: "Titillium Web Black", sans-serif; font-size: 3rem; text-shadow: 1px 1px 2px #1f334a; }

.hero > div h1 span { font-family: "Titillium Web Light", sans-serif; font-style: italic; }

.features { display: flex; justify-content: center; text-align: justify; color: #1f334a; position: relative; box-sizing: border-box; }

.features.accordion { max-height: 1050px; padding-bottom: 50px; -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition: max-height 1s; -o-transition: max-height 1s; transition: max-height 1s; }

.features.accordion article { max-height: 1060px; }

.features.accordion article ul { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 0px; font-size: 1.2rem; }

.features.accordion article ul li { width: fit-content; text-align: center; }

.features.accordion article ul li::before { display: none; }

.features.accordion article ul li span { position: relative; width: 10px; padding: 5px; line-height: 0; }

.features.accordion article ul li span::before { content: ""; position: absolute; top: 50%; left: -5px; width: 5px; height: 5px; background-color: #1f334a; }

.features.accordion article > .buttonBox { display: none; }

.features.accordion.collapsed { max-height: 520px; padding-bottom: 0px; }

.features.accordion.collapsed article { margin-bottom: 50px; }

.features .buttonBox { width: 100%; height: 200px; position: absolute; bottom: 0px; left: 0px; background: transparent; display: flex; justify-content: center; cursor: pointer; }

.features .buttonBox .button { align-self: flex-end; margin-bottom: 40px; }

.features .buttonBox .button::before { transform: rotate(270deg); }

.features .buttonBox .button::after { content: 'Weniger Details'; }

.features figure.icon { background-color: #fff; align-self: center; display: flex; justify-content: center; border-radius: 0 30px 0 30px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); }

.features figure.icon > img { width: auto; max-width: 100px; max-height: 100px; }

.features.orange { margin-top: 25px; }

.features.collapsed > .buttonBox, .features article.collapsed > .buttonBox { background: linear-gradient(transparent, #eee, #eee); }

.features.collapsed > .buttonBox .button::before, .features article.collapsed > .buttonBox .button::before { transform: rotate(90deg); }

.features.collapsed > .buttonBox .button::after, .features article.collapsed > .buttonBox .button::after { content: 'Mehr Details?'; }

.features.column3 figure.icon { width: 120px; padding: 25px 35px; }

.features.icons { padding-top: 0px; max-width: 945px; }

.features.icons figure.icon { width: 100px; height: 80px; padding: 10px; margin: -30px 5px 60px; z-index: 1; }

.features.legal-block { justify-content: space-between; }

.features.legal-block p { margin: -10px 0px 25px; }

.features article { display: flex; flex-direction: column; align-items: center; padding: 20px 30px; width: 100%; max-width: 300px; height: auto; position: relative; margin-top: -70px; max-height: none; transition: max-height 0.8s; }

.features article.collapsed > p, .features article.collapsed > ul { padding-bottom: 90px; overflow: hidden; }

.features article > picture { text-align: center; }

.features article > picture > img { border-radius: 0 20px 0 20px; }

.features article > h2 { color: #faa352; }

.features article > h2 > a { color: #faa352; text-decoration: none; }

.features article > h3 { font-size: 2.5rem; font-family: "Titillium Web Black", sans-serif; }

.features article > p { min-height: 100px; padding-bottom: 80px; margin-top: 0px; text-align: center; font-size: 1.2rem; overflow: hidden; }

.features article > a.btn { position: absolute; bottom: 45px; padding-left: 14px; padding-right: 14px; }

.features > .left { align-items: flex-start; padding-left: 0px; }

.features > .left > p { padding-bottom: 0px; }

footer { margin-top: 50px; background-color: #1f334a; font-size: 1rem; font-family: "Titillium Web Light", sans-serif; }

footer > .container { display: flex; justify-content: center; flex-wrap: wrap; color: #fff; padding: 10px 20px; }

footer > .container.esfLink { cursor: pointer; font-size: 0.9rem; }

footer > .container.esfLink > * { width: auto; }

footer > .container > * { display: flex; flex-direction: column; justify-content: space-between; width: 230px; padding: 20px; }

footer > .container > *.contactInfo { justify-content: flex-start; row-gap: 25px; }

footer > .container > * > h3 { font-family: "Titillium Web Regular", sans-serif; font-weight: 600; text-transform: uppercase; }

footer > .container a { position: relative; text-decoration: none; color: #fff; }

footer > .container a:not([href^="tel:"]):hover, footer > .container a:active { text-decoration: underline; }

footer > .container:first-child > *:nth-child(2) { width: 155px; }

footer > .container:nth-child(2) > * { flex-direction: row; align-items: center; }

footer > .container:nth-child(2) > * img { height: 35px; }

footer > .container:last-child { display: none; }

footer > .container figure.icon { font-size: 0.9rem; margin: 0px; }

footer > .container figure.icon img { width: 20px; height: 20px; margin: 0px 15px 0px 0px; padding-left: 10px; }

footer > .container .logo > img { height: 55px; margin-top: -2px; align-self: start; }

footer .separator { height: 20px; }

.technologie figure.icon:first-child, .technologie figure.icon:last-child { display: none; }

#slide-up-container { position: absolute; top: 105vh; right: 10px; bottom: 0; width: 45px; pointer-events: none; }

#slide-up { position: sticky; pointer-events: all; top: calc(100vh - 55px); display: block; height: 25px; width: 25px; border-radius: 15px; background-color: #fff; }

#slide-up::before { content: ""; display: block; padding: 13px 12px; background: url("/images/arrow-orange.svg"); background-position: center; background-repeat: no-repeat; transform: rotate(270deg); }

.modal { display: flex; position: absolute; z-index: 4; top: 0; box-sizing: border-box; }

.modal.modalBg { opacity: 0.8; width: 100%; height: 100%; background-color: #1f334a; }

.modal.modalContent { flex-direction: column; position: fixed; width: calc(100% - 20px); max-width: 550px; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 0px 30px; padding: 25px; }

.modal.modalContent > * { width: 100%; }

.modal.modalContent > *.modalTitle { display: flex; align-items: flex-start; justify-content: space-between; font-family: "Titillium Web Black", sans-serif; margin-bottom: 10px; }

.modal.modalContent > *.modalTitle span:first-child { flex: 1; }

.modal.modalContent > *.modalTitle span.close { display: flex; width: 30px; height: 30px; border-radius: 15px; color: #fff; background-color: #faa352; line-height: 0; justify-content: center; align-items: center; font-family: "Titillium Web Bold", sans-serif; cursor: pointer; }

.modal.modalContent a { text-decoration: none; color: #faa352; }

.modal.modalBg, .modal.modalContent { display: none; }

#esfModal > div:last-child { display: flex; flex-direction: column; align-items: center; }

#esfModal > div:last-child img:first-of-type { margin: -10px 0px 15px 0px; }

_::-webkit-full-page-media, _:future, :root #slide-up { top: calc(100% - 55px); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media screen and (min-width: 1200px) { .container { width: 1140px; } .jumbotron { height: 464px; } .jumbotron .hero h1 { font-size: 3rem; } }

@media screen and (max-width: 1200px) { .jumbotron { width: 100%; height: auto; padding: 0px; margin: 0px; } .container { width: 100%; } .features.accordion article { max-height: 125vh; } }

@media screen and (max-width: 992px) { html { font-size: 14px; } body { padding-top: 70px; } .hero > div { width: calc(50% - 40px); min-width: 370px; } .hero > div h1 { font-size: 2.7rem; margin-bottom: 0px; } nav { min-height: 40px; overflow: auto; overflow: visible; } nav .nav-heading { display: block; } nav.container { width: 100%; justify-content: space-between; padding: 0 0 1px 0; } nav.sticky { min-height: 40px; } nav .nav-logo { margin: 6px 5px 0px 15px; } nav .nav-logo img { width: 108.75px; height: 50px; } nav .nav-menu { position: relative; display: inline-block; width: 45px; height: 24px; cursor: pointer; } nav .nav-menu span { position: absolute; top: 12px; display: block; width: 25px; height: 2px; border-radius: 8px; background-color: #1f334a; } nav .nav-menu span::after, nav .nav-menu span::before { content: ""; position: absolute; display: block; width: 25px; height: 2px; border-radius: 4px; background-color: #1f334a; } nav .nav-menu span::before { top: -8px; } nav .nav-menu span::after { top: 8px; } nav .nav-link-block { position: fixed; top: 62px; right: -220px; display: flex; flex-direction: column; padding-bottom: 5px; transition: margin 0.6s; animation: 0.6s linear 0s 1 mobileMenu; z-index: -2; } nav .nav-link-block .nav-link { width: 173px; font-size: 1.25rem; max-height: 50px; margin-right: 0; padding: 10px 20px; overflow: hidden; box-shadow: 0 1px 5px #eee; background-color: #fff; } nav .nav-link-block .nav-link:hover { background-color: #1f334a; } nav .nav-link-block .nav-link:hover::before { top: 0; bottom: 0px; right: 0px; left: 0px; border-radius: 0px; } nav .nav-link-block .nav-link.active { background-color: #faa352; } nav .nav-link-block .nav-link:last-child { border-radius: 0 0 0 15px; } nav #nav-menu:checked ~ .nav-menu span { background-color: #fff; } nav #nav-menu:checked ~ .nav-menu span::before { top: 0; transform: rotate(45deg); } nav #nav-menu:checked ~ .nav-menu span::after { top: 0; transform: rotate(-45deg); } nav #nav-menu:checked ~ .nav-link-block { margin-right: 220px; } nav::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 65px; background-color: white; z-index: -1; } header.model.content-block { flex-direction: column; padding: 100px 75px; } header.model.content-block > .button { display: flex; } header.model.content-block > * { width: 100%; } header.model.content-block .sub-heading { display: flex; justify-content: center; flex-direction: column; padding-right: 0px; } header.model.content-block .sub-heading h2 { width: fit-content; margin: 0px 0px 25px 0px; } header.model.content-block .sub-heading > * { align-self: center; } header.model.content-block .sub-heading > *.button { display: none; } header.model.content-block p { text-align: center; max-width: 640px; border-left: none; padding: 0px 75px 25px 75px; } .content-block > * { margin-right: 15px; margin-left: 15px; } .legal-block > * { margin: 0px; } .features { flex-direction: column; text-align: left; } .features.accordion { max-height: none; } .features.accordion > article.collapsed { max-height: 550px; overflow: hidden; } .features.accordion > article > .buttonBox { display: flex; } .features.accordion > .buttonBox { display: none; } .features.accordion.collapsed { max-height: none; } .features.accordion.collapsed article { margin-bottom: 20px; } .features.accordion.collapsed article p { margin-bottom: 30px; } .features.column3 { align-items: center; } .features.icons { flex-direction: row; max-width: 690px; } .features article { font-size: 1.1rem; padding: 0; margin-top: 0px; margin-bottom: 20px; width: auto; height: auto; max-width: 400px; text-align: center; } .features article.left { align-items: center; padding-bottom: 20px; } .features article:first-child { margin-top: -60px; } .features article .img-responsive { max-width: 60%; } .features article .img-responsive.reference { max-width: 100%; } .features article > picture > img.img-responsive { max-width: 100%; } .features article > p { min-height: initial; width: 90%; } .features article a.btn { font-size: 1.2rem; } figure.icon img { margin-bottom: 5px; } footer > .container:first-child > *:nth-child(2) { width: 110px; } .container.model { position: relative; } .container.model p { margin: 0px; } .container.column2 { padding-bottom: 0px; } .container.column2.flowing { display: flex; } .container.column2.flowing .mainItem { display: block; text-align: center; padding-bottom: 50px; } .container.column2.flowing .mainItem h2 { text-align: center; } .container.column2.flowing .mainItem > .picture { padding: 0px; margin-top: 0px; } .container.column2.flowing .mainItem:nth-child(2n+1) h2 { text-align: center; } .container.column2.flowing .mainItem:nth-child(2n+1) > .picture { padding: 0px; } .container.column2.flowing .mainItem > ul { width: max-content; max-width: 290px; margin-top: 0px; margin-left: 50%; transform: translateX(-45%); } .container.column2.flowing:nth-child(n) .mainItem > * { float: none; } .container.closingBlock { text-align: center; } .container .mainItem { align-self: center; max-width: 505px; padding: 40px 0px; } .container .mainItem:nth-child(odd), .container .mainItem:nth-child(even) { flex-direction: column; } .container .mainItem:nth-child(odd) > *:last-child, .container .mainItem:nth-child(even) > *:last-child { padding: 25px 0px 0px; text-align: center; } .container .mainItem > * { width: 100%; } .container .mainItem:last-child p { border-bottom: none; } .container .mainItem p { text-align: center; padding: 0px 20px 40px; } .container.text-block-container { padding: 15px; display: flex; flex-direction: column; align-items: center; } .container.text-block-container > * { max-width: 505px; } .container.text-block-container > div { display: flex; flex-direction: column; align-items: center; } .container.text-block-container > div > * { width: 100%; flex-direction: column; } .container.text-block-container > div ul:nth-child(even) { margin-left: 0px; padding-left: 20px; } .container.text-block-container > div .text-block { text-align: center; } .container.text-block-container > div .text-block:nth-child(even) { padding-left: 0px; } .container.text-block-container > div .text-block:nth-child(odd) { padding-right: 0px; } .technologie figure.icon:first-child, .technologie figure.icon:last-child { display: flex; } }

@media screen and (max-width: 768px) { footer > .container { flex-direction: column; box-sizing: border-box; padding: 10px 0px; font-size: 1.5rem; max-width: 275px; } footer > .container > * { text-align: left; padding: 20px 0px; box-sizing: border-box; min-width: auto; width: 100%; } footer > .container:first-child > *:nth-child(2) { padding-left: 60px; } footer > .container:first-child > *:nth-child(2) > *:nth-last-child(-n+3) { display: none; } footer > .container:first-child > *:last-child > * { padding: 10px 0px; } footer > .container:first-child > *:last-child > * figure.icon img { width: 35px; height: 25px; } footer > .container:nth-child(2) > *:last-child { width: auto; min-width: auto; font-size: 1rem; padding-top: 15px; } footer > .container:last-child { display: flex; } footer > .container:last-child > * { flex-direction: row; width: auto; } footer > .container:last-child > * > span { padding: 0px 10px; } footer > .container figure.icon { font-size: 1.2rem; text-align: left; } footer > .container .logo > img { width: 150px; height: 54px; } .container.listing.orange > div { margin: 0px; width: 100%; text-align: center; } .container.listing.orange > div:nth-child(3n) { text-align: center; } .hero > div { width: 100%; min-width: auto; right: 0px; top: auto; bottom: 10%; font-size: 2.7rem; text-align: center; } .hero > div.center { bottom: 50%; transform: translateY(80%); } .hero > div.right { width: auto; padding: 0px 7%; text-align: right; } .hero > div.left { width: auto; padding: 0px 7%; text-align: left; right: auto; left: 0; } .hero > div h1 { font-size: 2.7rem; } .hero > div .button { display: none; } }

@media screen and (max-width: 576px) { .jumbotron .hero h1 { font-size: 7.5vw; } header.model.content-block { padding: 75px 10%; } header.model.content-block p { padding: 0px; margin-bottom: 20px; } .features.icons figure.icon { width: 20%; } .features.icons figure.icon > img { width: 75%; height: auto; max-width: 55px; max-height: 75px; } .features article a.btn { font-size: 1.2rem; } .container.column2.captions .mainItem { max-width: 300px; } .container.column2.captions .mainItem > figure { margin-right: 0px; margin-bottom: 100px; } .container.column2.captions .mainItem > figure figcaption { bottom: -25%; left: 50%; transform: translate(-50%, 50%); text-align: center; } }

@media screen and (max-width: 459px) { h2 span.desktop { display: none; } nav .nav-link-block { width: 100%; right: -100%; } nav .nav-link-block .nav-link { width: 100%; } nav .nav-link-block .nav-link:last-child { border-radius: 0; } nav #nav-menu:checked ~ .nav-link-block { margin-right: 100%; } footer > .container:last-child > * { justify-content: flex-start; } }

@media screen and (max-width: 359px) { nav .nav-heading { font-size: 5vw; margin-right: 25px; } nav .nav-menu { width: 40px; } .btn { padding-left: 15px; padding-right: 15px; } }

@keyframes animateGraphic1-state00 { 0% { opacity: 1; }
  100% { opacity: 1; } }

@keyframes animateGraphicMobile1-state00 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 1; } }

@keyframes animateGraphic1-state01 { 0% { opacity: 1; }
  100% { opacity: 0.5; } }

@keyframes animateGraphicMobile1-state01 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state02 { 0% { opacity: 1; }
  100% { opacity: 0.5; } }

@keyframes animateGraphicMobile1-state02 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state03 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state03 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(17.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state04 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state04 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(100.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state05 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state05 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 1; } }

@keyframes animateGraphic1-state06 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state06 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state07 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state07 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state10 { 0% { opacity: 0.5; }
  100% { opacity: 1; } }

@keyframes animateGraphicMobile1-state10 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 1; } }

@keyframes animateGraphic1-state11 { 0% { opacity: 0.5; }
  100% { opacity: 0.5; } }

@keyframes animateGraphicMobile1-state11 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state12 { 0% { opacity: 0.5; }
  100% { opacity: 0.5; } }

@keyframes animateGraphicMobile1-state12 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state13 { 0% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state13 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(17.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state14 { 0% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state14 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(100.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state15 { 0% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state15 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 1; } }

@keyframes animateGraphic1-state16 { 0% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state16 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state17 { 0% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state17 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state20 { 0% { opacity: 0.5; }
  100% { opacity: 1; } }

@keyframes animateGraphicMobile1-state20 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 1; } }

@keyframes animateGraphic1-state21 { 0% { opacity: 0.5; }
  100% { opacity: 0.5; } }

@keyframes animateGraphicMobile1-state21 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state22 { 0% { opacity: 0.5; }
  100% { opacity: 0.5; } }

@keyframes animateGraphicMobile1-state22 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state23 { 0% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state23 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(17.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state24 { 0% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state24 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(100.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state25 { 0% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state25 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 1; } }

@keyframes animateGraphic1-state26 { 0% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state26 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state27 { 0% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state27 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state30 { 0% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state30 { 0% { transform: translate(-50%, -50%) rotate(17.5deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 1; } }

@keyframes animateGraphic1-state31 { 0% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state31 { 0% { transform: translate(-50%, -50%) rotate(17.5deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state32 { 0% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state32 { 0% { transform: translate(-50%, -50%) rotate(17.5deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state33 { 0% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state33 { 0% { transform: translate(-50%, -50%) rotate(17.5deg); }
  100% { transform: translate(-50%, -50%) rotate(17.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state34 { 0% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state34 { 0% { transform: translate(-50%, -50%) rotate(17.5deg); }
  100% { transform: translate(-50%, -50%) rotate(100.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state35 { 0% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state35 { 0% { transform: translate(-50%, -50%) rotate(17.5deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 1; } }

@keyframes animateGraphic1-state36 { 0% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state36 { 0% { transform: translate(-50%, -50%) rotate(17.5deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state37 { 0% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state37 { 0% { transform: translate(-50%, -50%) rotate(17.5deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state40 { 0% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state40 { 0% { transform: translate(-50%, -50%) rotate(100.5deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 1; } }

@keyframes animateGraphic1-state41 { 0% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state41 { 0% { transform: translate(-50%, -50%) rotate(100.5deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state42 { 0% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state42 { 0% { transform: translate(-50%, -50%) rotate(100.5deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state43 { 0% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state43 { 0% { transform: translate(-50%, -50%) rotate(100.5deg); }
  100% { transform: translate(-50%, -50%) rotate(17.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state44 { 0% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state44 { 0% { transform: translate(-50%, -50%) rotate(100.5deg); }
  100% { transform: translate(-50%, -50%) rotate(100.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state45 { 0% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state45 { 0% { transform: translate(-50%, -50%) rotate(100.5deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 1; } }

@keyframes animateGraphic1-state46 { 0% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state46 { 0% { transform: translate(-50%, -50%) rotate(100.5deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state47 { 0% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state47 { 0% { transform: translate(-50%, -50%) rotate(100.5deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state50 { 0% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state50 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 1; } }

@keyframes animateGraphic1-state51 { 0% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state51 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state52 { 0% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state52 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state53 { 0% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state53 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(17.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state54 { 0% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state54 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(100.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state55 { 0% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state55 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 1; } }

@keyframes animateGraphic1-state56 { 0% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state56 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state57 { 0% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state57 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state60 { 0% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state60 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 1; } }

@keyframes animateGraphic1-state61 { 0% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state61 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state62 { 0% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state62 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state63 { 0% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state63 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(17.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state64 { 0% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state64 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(100.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state65 { 0% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state65 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 1; } }

@keyframes animateGraphic1-state66 { 0% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state66 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state67 { 0% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state67 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state70 { 0% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state70 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 1; } }

@keyframes animateGraphic1-state71 { 0% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state71 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state72 { 0% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state72 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state73 { 0% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(260.8deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state73 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(17.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state74 { 0% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(64.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state74 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(100.5deg);
    opacity: 1; } }

@keyframes animateGraphic1-state75 { 0% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(211deg);
    opacity: 1; } }

@keyframes animateGraphicMobile1-state75 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 1; } }

@keyframes animateGraphic1-state76 { 0% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(10deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state76 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic1-state77 { 0% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(58deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile1-state77 { 0% { transform: translate(-50%, -50%) rotate(275deg); }
  100% { transform: translate(-50%, -50%) rotate(275deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state00 { 0% { opacity: 1; }
  100% { opacity: 1; } }

@keyframes animateGraphicMobile2-state00 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 1; } }

@keyframes animateGraphic2-state01 { 0% { opacity: 1; }
  100% { opacity: 0.5; } }

@keyframes animateGraphicMobile2-state01 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state02 { 0% { opacity: 1; }
  100% { opacity: 0.5; } }

@keyframes animateGraphicMobile2-state02 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state03 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-250.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state03 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state04 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-206deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state04 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state05 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-148deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state05 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state06 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-32.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state06 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(-120.3deg);
    opacity: 1; } }

@keyframes animateGraphic2-state07 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-192deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state07 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(110.5deg);
    opacity: 1; } }

@keyframes animateGraphic2-state10 { 0% { opacity: 0.5; }
  100% { opacity: 1; } }

@keyframes animateGraphicMobile2-state10 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 1; } }

@keyframes animateGraphic2-state11 { 0% { opacity: 0.5; }
  100% { opacity: 0.5; } }

@keyframes animateGraphicMobile2-state11 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state12 { 0% { opacity: 0.5; }
  100% { opacity: 0.5; } }

@keyframes animateGraphicMobile2-state12 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state13 { 0% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-250.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state13 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state14 { 0% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-206deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state14 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state15 { 0% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-148deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state15 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state16 { 0% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-32.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state16 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(-120.3deg);
    opacity: 1; } }

@keyframes animateGraphic2-state17 { 0% { transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-192deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state17 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(110.5deg);
    opacity: 1; } }

@keyframes animateGraphic2-state20 { 0% { opacity: 0.5; }
  100% { opacity: 1; } }

@keyframes animateGraphicMobile2-state20 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 1; } }

@keyframes animateGraphic2-state21 { 0% { opacity: 0.5; }
  100% { opacity: 0.5; } }

@keyframes animateGraphicMobile2-state21 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state22 { 0% { opacity: 0.5; }
  100% { opacity: 0.5; } }

@keyframes animateGraphicMobile2-state22 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state23 { 0% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-250.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state23 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state24 { 0% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-206deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state24 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state25 { 0% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-148deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state25 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state26 { 0% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-32.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state26 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(-120.3deg);
    opacity: 1; } }

@keyframes animateGraphic2-state27 { 0% { transform: translate(-50%, -50%) rotate(95deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-192deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state27 { 0% { transform: translate(-50%, -50%) rotate(150deg); }
  100% { transform: translate(-50%, -50%) rotate(110.5deg);
    opacity: 1; } }

@keyframes animateGraphic2-state30 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-360deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state30 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 1; } }

@keyframes animateGraphic2-state31 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-225deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state31 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state32 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-265deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state32 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state33 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-250.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state33 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state34 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-206deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state34 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state35 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-148deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state35 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state36 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-32.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state36 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-120.3deg);
    opacity: 1; } }

@keyframes animateGraphic2-state37 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-192deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state37 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(110.5deg);
    opacity: 1; } }

@keyframes animateGraphic2-state40 { 0% { transform: translate(-50%, -50%) rotate(154deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-360deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state40 { 0% { transform: translate(-50%, -50%) rotate(-169.5deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 1; } }

@keyframes animateGraphic2-state41 { 0% { transform: translate(-50%, -50%) rotate(154deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-225deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state41 { 0% { transform: translate(-50%, -50%) rotate(-169.5deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state42 { 0% { transform: translate(-50%, -50%) rotate(154deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-265deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state42 { 0% { transform: translate(-50%, -50%) rotate(-169.5deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state43 { 0% { transform: translate(-50%, -50%) rotate(154deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-250.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state43 { 0% { transform: translate(-50%, -50%) rotate(-169.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state44 { 0% { transform: translate(-50%, -50%) rotate(154deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-206deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state44 { 0% { transform: translate(-50%, -50%) rotate(-169.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state45 { 0% { transform: translate(-50%, -50%) rotate(154deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-148deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state45 { 0% { transform: translate(-50%, -50%) rotate(-169.5deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state46 { 0% { transform: translate(-50%, -50%) rotate(154deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-32.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state46 { 0% { transform: translate(-50%, -50%) rotate(-169.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-120.3deg);
    opacity: 1; } }

@keyframes animateGraphic2-state47 { 0% { transform: translate(-50%, -50%) rotate(154deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-192deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state47 { 0% { transform: translate(-50%, -50%) rotate(-169.5deg); }
  100% { transform: translate(-50%, -50%) rotate(110.5deg);
    opacity: 1; } }

@keyframes animateGraphic2-state50 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-360deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state50 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 1; } }

@keyframes animateGraphic2-state51 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-225deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state51 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state52 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-265deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state52 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state53 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-250.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state53 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state54 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-206deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state54 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state55 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-148deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state55 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state56 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-32.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state56 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(-120.3deg);
    opacity: 1; } }

@keyframes animateGraphic2-state57 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-192deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state57 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(110.5deg);
    opacity: 1; } }

@keyframes animateGraphic2-state60 { 0% { transform: translate(-50%, -50%) rotate(327.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-360deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state60 { 0% { transform: translate(-50%, -50%) rotate(-120.3deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 1; } }

@keyframes animateGraphic2-state61 { 0% { transform: translate(-50%, -50%) rotate(327.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-225deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state61 { 0% { transform: translate(-50%, -50%) rotate(-120.3deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state62 { 0% { transform: translate(-50%, -50%) rotate(327.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-265deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state62 { 0% { transform: translate(-50%, -50%) rotate(-120.3deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state63 { 0% { transform: translate(-50%, -50%) rotate(327.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-250.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state63 { 0% { transform: translate(-50%, -50%) rotate(-120.3deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state64 { 0% { transform: translate(-50%, -50%) rotate(327.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-206deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state64 { 0% { transform: translate(-50%, -50%) rotate(-120.3deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state65 { 0% { transform: translate(-50%, -50%) rotate(327.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-148deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state65 { 0% { transform: translate(-50%, -50%) rotate(-120.3deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state66 { 0% { transform: translate(-50%, -50%) rotate(327.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-32.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state66 { 0% { transform: translate(-50%, -50%) rotate(-120.3deg); }
  100% { transform: translate(-50%, -50%) rotate(-120.3deg);
    opacity: 1; } }

@keyframes animateGraphic2-state67 { 0% { transform: translate(-50%, -50%) rotate(327.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-192deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state67 { 0% { transform: translate(-50%, -50%) rotate(-120.3deg); }
  100% { transform: translate(-50%, -50%) rotate(110.5deg);
    opacity: 1; } }

@keyframes animateGraphic2-state70 { 0% { transform: translate(-50%, -50%) rotate(168deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-360deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state70 { 0% { transform: translate(-50%, -50%) rotate(110.5deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 1; } }

@keyframes animateGraphic2-state71 { 0% { transform: translate(-50%, -50%) rotate(168deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-225deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state71 { 0% { transform: translate(-50%, -50%) rotate(110.5deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state72 { 0% { transform: translate(-50%, -50%) rotate(168deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-265deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state72 { 0% { transform: translate(-50%, -50%) rotate(110.5deg); }
  100% { transform: translate(-50%, -50%) rotate(150deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state73 { 0% { transform: translate(-50%, -50%) rotate(168deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-250.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state73 { 0% { transform: translate(-50%, -50%) rotate(110.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state74 { 0% { transform: translate(-50%, -50%) rotate(168deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-206deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state74 { 0% { transform: translate(-50%, -50%) rotate(110.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state75 { 0% { transform: translate(-50%, -50%) rotate(168deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-148deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile2-state75 { 0% { transform: translate(-50%, -50%) rotate(110.5deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic2-state76 { 0% { transform: translate(-50%, -50%) rotate(168deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-32.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state76 { 0% { transform: translate(-50%, -50%) rotate(110.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-120.3deg);
    opacity: 1; } }

@keyframes animateGraphic2-state77 { 0% { transform: translate(-50%, -50%) rotate(168deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-192deg);
    opacity: 1; } }

@keyframes animateGraphicMobile2-state77 { 0% { transform: translate(-50%, -50%) rotate(110.5deg); }
  100% { transform: translate(-50%, -50%) rotate(110.5deg);
    opacity: 1; } }

@keyframes animateGraphic3-state00 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state00 { 0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphic3-state01 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state01 { 0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-224.5deg);
    opacity: 1; } }

@keyframes animateGraphic3-state02 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state02 { 0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(86.3deg);
    opacity: 1; } }

@keyframes animateGraphic3-state03 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state03 { 0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state04 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state04 { 0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.55deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state05 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state05 { 0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state06 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state06 { 0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(28deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state07 { 0% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state07 { 0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(50deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state10 { 0% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state10 { 0% { transform: translate(-50%, -50%) rotate(-224.5deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphic3-state11 { 0% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state11 { 0% { transform: translate(-50%, -50%) rotate(-224.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-224.5deg);
    opacity: 1; } }

@keyframes animateGraphic3-state12 { 0% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state12 { 0% { transform: translate(-50%, -50%) rotate(-224.5deg); }
  100% { transform: translate(-50%, -50%) rotate(86.3deg);
    opacity: 1; } }

@keyframes animateGraphic3-state13 { 0% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state13 { 0% { transform: translate(-50%, -50%) rotate(-224.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state14 { 0% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state14 { 0% { transform: translate(-50%, -50%) rotate(-224.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.55deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state15 { 0% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state15 { 0% { transform: translate(-50%, -50%) rotate(-224.5deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state16 { 0% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state16 { 0% { transform: translate(-50%, -50%) rotate(-224.5deg); }
  100% { transform: translate(-50%, -50%) rotate(28deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state17 { 0% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state17 { 0% { transform: translate(-50%, -50%) rotate(-224.5deg); }
  100% { transform: translate(-50%, -50%) rotate(50deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state20 { 0% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state20 { 0% { transform: translate(-50%, -50%) rotate(86.3deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphic3-state21 { 0% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state21 { 0% { transform: translate(-50%, -50%) rotate(86.3deg); }
  100% { transform: translate(-50%, -50%) rotate(-224.5deg);
    opacity: 1; } }

@keyframes animateGraphic3-state22 { 0% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state22 { 0% { transform: translate(-50%, -50%) rotate(86.3deg); }
  100% { transform: translate(-50%, -50%) rotate(86.3deg);
    opacity: 1; } }

@keyframes animateGraphic3-state23 { 0% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state23 { 0% { transform: translate(-50%, -50%) rotate(86.3deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state24 { 0% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state24 { 0% { transform: translate(-50%, -50%) rotate(86.3deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.55deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state25 { 0% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state25 { 0% { transform: translate(-50%, -50%) rotate(86.3deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state26 { 0% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state26 { 0% { transform: translate(-50%, -50%) rotate(86.3deg); }
  100% { transform: translate(-50%, -50%) rotate(28deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state27 { 0% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state27 { 0% { transform: translate(-50%, -50%) rotate(86.3deg); }
  100% { transform: translate(-50%, -50%) rotate(50deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state30 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state30 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphic3-state31 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state31 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-224.5deg);
    opacity: 1; } }

@keyframes animateGraphic3-state32 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state32 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(86.3deg);
    opacity: 1; } }

@keyframes animateGraphic3-state33 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state33 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state34 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state34 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.55deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state35 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state35 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state36 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state36 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(28deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state37 { 0% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state37 { 0% { transform: translate(-50%, -50%) rotate(-135.5deg); }
  100% { transform: translate(-50%, -50%) rotate(50deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state40 { 0% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state40 { 0% { transform: translate(-50%, -50%) rotate(-169.55deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphic3-state41 { 0% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state41 { 0% { transform: translate(-50%, -50%) rotate(-169.55deg); }
  100% { transform: translate(-50%, -50%) rotate(-224.5deg);
    opacity: 1; } }

@keyframes animateGraphic3-state42 { 0% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state42 { 0% { transform: translate(-50%, -50%) rotate(-169.55deg); }
  100% { transform: translate(-50%, -50%) rotate(86.3deg);
    opacity: 1; } }

@keyframes animateGraphic3-state43 { 0% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state43 { 0% { transform: translate(-50%, -50%) rotate(-169.55deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state44 { 0% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state44 { 0% { transform: translate(-50%, -50%) rotate(-169.55deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.55deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state45 { 0% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state45 { 0% { transform: translate(-50%, -50%) rotate(-169.55deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state46 { 0% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state46 { 0% { transform: translate(-50%, -50%) rotate(-169.55deg); }
  100% { transform: translate(-50%, -50%) rotate(28deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state47 { 0% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state47 { 0% { transform: translate(-50%, -50%) rotate(-169.55deg); }
  100% { transform: translate(-50%, -50%) rotate(50deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state50 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state50 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphic3-state51 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state51 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(-224.5deg);
    opacity: 1; } }

@keyframes animateGraphic3-state52 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state52 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(86.3deg);
    opacity: 1; } }

@keyframes animateGraphic3-state53 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state53 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state54 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state54 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.55deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state55 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state55 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state56 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state56 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(28deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state57 { 0% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state57 { 0% { transform: translate(-50%, -50%) rotate(145deg); }
  100% { transform: translate(-50%, -50%) rotate(50deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state60 { 0% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state60 { 0% { transform: translate(-50%, -50%) rotate(28deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphic3-state61 { 0% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state61 { 0% { transform: translate(-50%, -50%) rotate(28deg); }
  100% { transform: translate(-50%, -50%) rotate(-224.5deg);
    opacity: 1; } }

@keyframes animateGraphic3-state62 { 0% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state62 { 0% { transform: translate(-50%, -50%) rotate(28deg); }
  100% { transform: translate(-50%, -50%) rotate(86.3deg);
    opacity: 1; } }

@keyframes animateGraphic3-state63 { 0% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state63 { 0% { transform: translate(-50%, -50%) rotate(28deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state64 { 0% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state64 { 0% { transform: translate(-50%, -50%) rotate(28deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.55deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state65 { 0% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state65 { 0% { transform: translate(-50%, -50%) rotate(28deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state66 { 0% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state66 { 0% { transform: translate(-50%, -50%) rotate(28deg); }
  100% { transform: translate(-50%, -50%) rotate(28deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state67 { 0% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state67 { 0% { transform: translate(-50%, -50%) rotate(28deg); }
  100% { transform: translate(-50%, -50%) rotate(50deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state70 { 0% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state70 { 0% { transform: translate(-50%, -50%) rotate(50deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1; } }

@keyframes animateGraphic3-state71 { 0% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(-128.5deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state71 { 0% { transform: translate(-50%, -50%) rotate(50deg); }
  100% { transform: translate(-50%, -50%) rotate(-224.5deg);
    opacity: 1; } }

@keyframes animateGraphic3-state72 { 0% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(182deg);
    opacity: 1; } }

@keyframes animateGraphicMobile3-state72 { 0% { transform: translate(-50%, -50%) rotate(50deg); }
  100% { transform: translate(-50%, -50%) rotate(86.3deg);
    opacity: 1; } }

@keyframes animateGraphic3-state73 { 0% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(109.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state73 { 0% { transform: translate(-50%, -50%) rotate(50deg); }
  100% { transform: translate(-50%, -50%) rotate(-135.5deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state74 { 0% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(153deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state74 { 0% { transform: translate(-50%, -50%) rotate(50deg); }
  100% { transform: translate(-50%, -50%) rotate(-169.55deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state75 { 0% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(212deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state75 { 0% { transform: translate(-50%, -50%) rotate(50deg); }
  100% { transform: translate(-50%, -50%) rotate(145deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state76 { 0% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(266.5deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state76 { 0% { transform: translate(-50%, -50%) rotate(50deg); }
  100% { transform: translate(-50%, -50%) rotate(28deg);
    opacity: 0.5; } }

@keyframes animateGraphic3-state77 { 0% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(315deg);
    opacity: 0.5; } }

@keyframes animateGraphicMobile3-state77 { 0% { transform: translate(-50%, -50%) rotate(50deg); }
  100% { transform: translate(-50%, -50%) rotate(50deg);
    opacity: 0.5; } }

@keyframes slideLinks-toPosition-state1 { 0% { right: auto;
    left: 28%;
    top: 0px; }
  90% { white-space: nowrap; }
  100% { right: auto;
    left: 35%;
    top: 65%;
    width: 100%;
    max-width: 220px;
    white-space: initial; } }

@keyframes slideLinks-toDefault-state1 { 0% { right: auto;
    left: 35%;
    top: 65%;
    width: 100%;
    max-width: 220px;
    white-space: initial; }
  90% { white-space: nowrap; }
  100% { right: auto;
    left: 28%;
    top: 0px; } }

@keyframes slideLinks-toPosition-state2 { 0% { right: auto;
    left: 73%;
    top: 0px; }
  90% { white-space: nowrap; }
  100% { right: auto;
    left: 68%;
    top: 43%;
    width: 100%;
    max-width: 220px;
    white-space: initial; } }

@keyframes slideLinks-toDefault-state2 { 0% { right: auto;
    left: 68%;
    top: 43%;
    width: 100%;
    max-width: 220px;
    white-space: initial; }
  90% { white-space: nowrap; }
  100% { right: auto;
    left: 73%;
    top: 0px; } }

@keyframes slideLinks-toPosition-state3 { 0% { right: auto;
    left: 13%;
    top: 86%; }
  90% { white-space: nowrap; }
  100% { right: auto;
    left: 16%;
    top: -50%;
    width: 100%;
    max-width: 220px;
    white-space: initial; } }

@keyframes slideLinks-toDefault-state3 { 0% { right: auto;
    left: 16%;
    top: -50%;
    width: 100%;
    max-width: 220px;
    white-space: initial; }
  90% { white-space: nowrap; }
  100% { right: auto;
    left: 13%;
    top: 86%; } }

@keyframes slideLinks-toPosition-state4 { 0% { right: auto;
    left: 50%;
    top: 86%; }
  90% { white-space: nowrap; }
  100% { right: auto;
    left: 44%;
    top: -5%;
    width: 100%;
    max-width: 220px;
    white-space: initial; } }

@keyframes slideLinks-toDefault-state4 { 0% { right: auto;
    left: 44%;
    top: -5%;
    width: 100%;
    max-width: 220px;
    white-space: initial; }
  90% { white-space: nowrap; }
  100% { right: auto;
    left: 50%;
    top: 86%; } }

@keyframes slideLinks-toPosition-state5 { 0% { right: -27%;
    left: auto;
    top: 86%; }
  90% { white-space: nowrap; }
  100% { right: auto;
    left: 86.5%;
    top: -5%;
    width: 100%;
    max-width: 220px;
    white-space: initial; } }

@keyframes slideLinks-toDefault-state5 { 0% { right: auto;
    left: 86.5%;
    top: -5%;
    width: 100%;
    max-width: 220px;
    white-space: initial; }
  90% { white-space: nowrap; }
  100% { right: -27%;
    left: auto;
    top: 86%; } }

@keyframes slideLinks-toPosition-state6 { 0% { right: auto;
    left: 23%;
    top: 0px; }
  90% { white-space: nowrap; }
  100% { right: auto;
    left: 28%;
    top: 25%;
    width: 100%;
    max-width: 220px;
    white-space: initial; } }

@keyframes slideLinks-toDefault-state6 { 0% { right: auto;
    left: 28%;
    top: 25%;
    width: 100%;
    max-width: 220px;
    white-space: initial; }
  90% { white-space: nowrap; }
  100% { right: auto;
    left: 23%;
    top: 0px; } }

@keyframes slideLinks-toPosition-state7 { 0% { right: auto;
    left: 73%;
    top: 0px; }
  90% { white-space: nowrap; }
  100% { right: auto;
    left: 68%;
    top: 50%;
    width: 100%;
    max-width: 220px;
    white-space: initial; } }

@keyframes slideLinks-toDefault-state7 { 0% { right: auto;
    left: 68%;
    top: 50%;
    width: 100%;
    max-width: 220px;
    white-space: initial; }
  90% { white-space: nowrap; }
  100% { right: auto;
    left: 73%;
    top: 0px; } }

@keyframes animateActiveLinks { 0% { color: #1f334a;
    font-size: 1em; }
  50% { font-size: 1.2em; }
  100% { color: #faa352;
    font-size: 1em; } }

@keyframes animateOpacity { 0% { opacity: 0; }
  75% { opacity: 0; }
  100% { opacity: 1; } }

#animation { display: flex; justify-content: center; padding: 25px 0px; }

#animation > div { width: 100%; max-width: 650px; position: relative; margin: 0 50px; padding: 20px 0px; }

#animation > div .productLine { position: absolute; display: flex; width: 25%; height: 26px; top: 46%; left: 6%; }

#animation > div > img.bg, #animation > div > picture.bg { width: 100%; }

#animation > div > img.bg.fixed, #animation > div > picture.bg.fixed { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#animation > div > img.bg.fixed#circle3, #animation > div > picture.bg.fixed#circle3 { transform: translate(-50%, -50%) rotate(0deg); }

#animation > div > img.bg.fixed#circle2, #animation > div > picture.bg.fixed#circle2 { transform: translate(-50%, -50%) rotate(150deg); }

#animation > div > img.bg.fixed#circle1, #animation > div > picture.bg.fixed#circle1 { transform: translate(-50%, -50%) rotate(275deg); }

#animation > div > img.bg.line, #animation > div > picture.bg.line { opacity: 0; width: 100%; }

#animation > div > img.bg.line img, #animation > div > picture.bg.line img { width: 100%; height: auto; }

#animation > div img.logo { width: 25%; max-width: 130px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#animation > div .link { font-size: 16px; line-height: 1.2; font-weight: bold; position: absolute; z-index: 2; cursor: pointer; }

#animation > div .link a { text-decoration: none; color: #1f334a; }

#animation > div .link:after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 5px; border: 2px solid #1f334a; }

#animation > div .link.left { text-align: right; }

#animation > div .link.left:after { top: 7.5px; right: -15px; }

#animation > div .link.right:after { top: 6.5px; left: -15px; }

#animation > div .link.state1 { top: 4.6%; right: -17.8%; left: auto; width: 195px; }

#animation > div.state1 .link.state1 a { animation: animateActiveLinks 1s ease-out forwards; }

#animation > div.state1 .line.state1 { opacity: 1; animation: animateOpacity 1s ease-out forwards; }

#animation > div .link.state2 { top: 33.3%; right: auto; left: 100.3%; width: 120px; }

#animation > div.state2 .link.state2 a { animation: animateActiveLinks 1s ease-out forwards; }

#animation > div.state2 .line.state2 { opacity: 1; animation: animateOpacity 1s ease-out forwards; }

#animation > div .link.state3 { top: 63.4%; right: auto; left: 98.3%; width: 165px; }

#animation > div.state3 .link.state3 a { animation: animateActiveLinks 1s ease-out forwards; }

#animation > div.state3 .line.state3 { opacity: 1; animation: animateOpacity 1s ease-out forwards; }

#animation > div .link.state4 { top: 92%; right: auto; left: 79.3%; width: 260px; }

#animation > div.state4 .link.state4 a { animation: animateActiveLinks 1s ease-out forwards; }

#animation > div.state4 .line.state4 { opacity: 1; animation: animateOpacity 1s ease-out forwards; }

#animation > div .link.state5 { top: 91.7%; right: 79.6%; left: auto; width: 187px; }

#animation > div.state5 .link.state5 a { animation: animateActiveLinks 1s ease-out forwards; }

#animation > div.state5 .line.state5 { opacity: 1; animation: animateOpacity 1s ease-out forwards; }

#animation > div .link.state6 { top: 47.5%; right: 99.5%; left: auto; width: 170px; }

#animation > div.state6 .link.state6 a { animation: animateActiveLinks 1s ease-out forwards; }

#animation > div.state6 .line.state6 { opacity: 1; animation: animateOpacity 1s ease-out forwards; }

#animation > div .link.state7 { top: 4.4%; right: 87.2%; left: auto; width: 208px; }

#animation > div.state7 .link.state7 a { animation: animateActiveLinks 1s ease-out forwards; }

#animation > div.state7 .line.state7 { opacity: 1; animation: animateOpacity 1s ease-out forwards; }

#animation > div.source0.state0 #circle1 { animation: animateGraphic1-state00 1s ease-in-out forwards; }

#animation > div.source0.state0 #circle2 { animation: animateGraphic2-state00 1s ease-in-out forwards; }

#animation > div.source0.state0 #circle3 { animation: animateGraphic3-state00 1s ease-in-out forwards; }

#animation > div.source0.state0 #circle4 { animation: animateGraphic4-state00 1s ease-in-out forwards; }

#animation > div.source0.state1 #circle1 { animation: animateGraphic1-state01 1s ease-in-out forwards; }

#animation > div.source0.state1 #circle2 { animation: animateGraphic2-state01 1s ease-in-out forwards; }

#animation > div.source0.state1 #circle3 { animation: animateGraphic3-state01 1s ease-in-out forwards; }

#animation > div.source0.state1 #circle4 { animation: animateGraphic4-state01 1s ease-in-out forwards; }

#animation > div.source0.state2 #circle1 { animation: animateGraphic1-state02 1s ease-in-out forwards; }

#animation > div.source0.state2 #circle2 { animation: animateGraphic2-state02 1s ease-in-out forwards; }

#animation > div.source0.state2 #circle3 { animation: animateGraphic3-state02 1s ease-in-out forwards; }

#animation > div.source0.state2 #circle4 { animation: animateGraphic4-state02 1s ease-in-out forwards; }

#animation > div.source0.state3 #circle1 { animation: animateGraphic1-state03 1s ease-in-out forwards; }

#animation > div.source0.state3 #circle2 { animation: animateGraphic2-state03 1s ease-in-out forwards; }

#animation > div.source0.state3 #circle3 { animation: animateGraphic3-state03 1s ease-in-out forwards; }

#animation > div.source0.state3 #circle4 { animation: animateGraphic4-state03 1s ease-in-out forwards; }

#animation > div.source0.state4 #circle1 { animation: animateGraphic1-state04 1s ease-in-out forwards; }

#animation > div.source0.state4 #circle2 { animation: animateGraphic2-state04 1s ease-in-out forwards; }

#animation > div.source0.state4 #circle3 { animation: animateGraphic3-state04 1s ease-in-out forwards; }

#animation > div.source0.state4 #circle4 { animation: animateGraphic4-state04 1s ease-in-out forwards; }

#animation > div.source0.state5 #circle1 { animation: animateGraphic1-state05 1s ease-in-out forwards; }

#animation > div.source0.state5 #circle2 { animation: animateGraphic2-state05 1s ease-in-out forwards; }

#animation > div.source0.state5 #circle3 { animation: animateGraphic3-state05 1s ease-in-out forwards; }

#animation > div.source0.state5 #circle4 { animation: animateGraphic4-state05 1s ease-in-out forwards; }

#animation > div.source0.state6 #circle1 { animation: animateGraphic1-state06 1s ease-in-out forwards; }

#animation > div.source0.state6 #circle2 { animation: animateGraphic2-state06 1s ease-in-out forwards; }

#animation > div.source0.state6 #circle3 { animation: animateGraphic3-state06 1s ease-in-out forwards; }

#animation > div.source0.state6 #circle4 { animation: animateGraphic4-state06 1s ease-in-out forwards; }

#animation > div.source0.state7 #circle1 { animation: animateGraphic1-state07 1s ease-in-out forwards; }

#animation > div.source0.state7 #circle2 { animation: animateGraphic2-state07 1s ease-in-out forwards; }

#animation > div.source0.state7 #circle3 { animation: animateGraphic3-state07 1s ease-in-out forwards; }

#animation > div.source0.state7 #circle4 { animation: animateGraphic4-state07 1s ease-in-out forwards; }

#animation > div.source1.state0 #circle1 { animation: animateGraphic1-state10 1s ease-in-out forwards; }

#animation > div.source1.state0 #circle2 { animation: animateGraphic2-state10 1s ease-in-out forwards; }

#animation > div.source1.state0 #circle3 { animation: animateGraphic3-state10 1s ease-in-out forwards; }

#animation > div.source1.state0 #circle4 { animation: animateGraphic4-state10 1s ease-in-out forwards; }

#animation > div.source1.state1 #circle1 { animation: animateGraphic1-state11 1s ease-in-out forwards; }

#animation > div.source1.state1 #circle2 { animation: animateGraphic2-state11 1s ease-in-out forwards; }

#animation > div.source1.state1 #circle3 { animation: animateGraphic3-state11 1s ease-in-out forwards; }

#animation > div.source1.state1 #circle4 { animation: animateGraphic4-state11 1s ease-in-out forwards; }

#animation > div.source1.state2 #circle1 { animation: animateGraphic1-state12 1s ease-in-out forwards; }

#animation > div.source1.state2 #circle2 { animation: animateGraphic2-state12 1s ease-in-out forwards; }

#animation > div.source1.state2 #circle3 { animation: animateGraphic3-state12 1s ease-in-out forwards; }

#animation > div.source1.state2 #circle4 { animation: animateGraphic4-state12 1s ease-in-out forwards; }

#animation > div.source1.state3 #circle1 { animation: animateGraphic1-state13 1s ease-in-out forwards; }

#animation > div.source1.state3 #circle2 { animation: animateGraphic2-state13 1s ease-in-out forwards; }

#animation > div.source1.state3 #circle3 { animation: animateGraphic3-state13 1s ease-in-out forwards; }

#animation > div.source1.state3 #circle4 { animation: animateGraphic4-state13 1s ease-in-out forwards; }

#animation > div.source1.state4 #circle1 { animation: animateGraphic1-state14 1s ease-in-out forwards; }

#animation > div.source1.state4 #circle2 { animation: animateGraphic2-state14 1s ease-in-out forwards; }

#animation > div.source1.state4 #circle3 { animation: animateGraphic3-state14 1s ease-in-out forwards; }

#animation > div.source1.state4 #circle4 { animation: animateGraphic4-state14 1s ease-in-out forwards; }

#animation > div.source1.state5 #circle1 { animation: animateGraphic1-state15 1s ease-in-out forwards; }

#animation > div.source1.state5 #circle2 { animation: animateGraphic2-state15 1s ease-in-out forwards; }

#animation > div.source1.state5 #circle3 { animation: animateGraphic3-state15 1s ease-in-out forwards; }

#animation > div.source1.state5 #circle4 { animation: animateGraphic4-state15 1s ease-in-out forwards; }

#animation > div.source1.state6 #circle1 { animation: animateGraphic1-state16 1s ease-in-out forwards; }

#animation > div.source1.state6 #circle2 { animation: animateGraphic2-state16 1s ease-in-out forwards; }

#animation > div.source1.state6 #circle3 { animation: animateGraphic3-state16 1s ease-in-out forwards; }

#animation > div.source1.state6 #circle4 { animation: animateGraphic4-state16 1s ease-in-out forwards; }

#animation > div.source1.state7 #circle1 { animation: animateGraphic1-state17 1s ease-in-out forwards; }

#animation > div.source1.state7 #circle2 { animation: animateGraphic2-state17 1s ease-in-out forwards; }

#animation > div.source1.state7 #circle3 { animation: animateGraphic3-state17 1s ease-in-out forwards; }

#animation > div.source1.state7 #circle4 { animation: animateGraphic4-state17 1s ease-in-out forwards; }

#animation > div.source2.state0 #circle1 { animation: animateGraphic1-state20 1s ease-in-out forwards; }

#animation > div.source2.state0 #circle2 { animation: animateGraphic2-state20 1s ease-in-out forwards; }

#animation > div.source2.state0 #circle3 { animation: animateGraphic3-state20 1s ease-in-out forwards; }

#animation > div.source2.state0 #circle4 { animation: animateGraphic4-state20 1s ease-in-out forwards; }

#animation > div.source2.state1 #circle1 { animation: animateGraphic1-state21 1s ease-in-out forwards; }

#animation > div.source2.state1 #circle2 { animation: animateGraphic2-state21 1s ease-in-out forwards; }

#animation > div.source2.state1 #circle3 { animation: animateGraphic3-state21 1s ease-in-out forwards; }

#animation > div.source2.state1 #circle4 { animation: animateGraphic4-state21 1s ease-in-out forwards; }

#animation > div.source2.state2 #circle1 { animation: animateGraphic1-state22 1s ease-in-out forwards; }

#animation > div.source2.state2 #circle2 { animation: animateGraphic2-state22 1s ease-in-out forwards; }

#animation > div.source2.state2 #circle3 { animation: animateGraphic3-state22 1s ease-in-out forwards; }

#animation > div.source2.state2 #circle4 { animation: animateGraphic4-state22 1s ease-in-out forwards; }

#animation > div.source2.state3 #circle1 { animation: animateGraphic1-state23 1s ease-in-out forwards; }

#animation > div.source2.state3 #circle2 { animation: animateGraphic2-state23 1s ease-in-out forwards; }

#animation > div.source2.state3 #circle3 { animation: animateGraphic3-state23 1s ease-in-out forwards; }

#animation > div.source2.state3 #circle4 { animation: animateGraphic4-state23 1s ease-in-out forwards; }

#animation > div.source2.state4 #circle1 { animation: animateGraphic1-state24 1s ease-in-out forwards; }

#animation > div.source2.state4 #circle2 { animation: animateGraphic2-state24 1s ease-in-out forwards; }

#animation > div.source2.state4 #circle3 { animation: animateGraphic3-state24 1s ease-in-out forwards; }

#animation > div.source2.state4 #circle4 { animation: animateGraphic4-state24 1s ease-in-out forwards; }

#animation > div.source2.state5 #circle1 { animation: animateGraphic1-state25 1s ease-in-out forwards; }

#animation > div.source2.state5 #circle2 { animation: animateGraphic2-state25 1s ease-in-out forwards; }

#animation > div.source2.state5 #circle3 { animation: animateGraphic3-state25 1s ease-in-out forwards; }

#animation > div.source2.state5 #circle4 { animation: animateGraphic4-state25 1s ease-in-out forwards; }

#animation > div.source2.state6 #circle1 { animation: animateGraphic1-state26 1s ease-in-out forwards; }

#animation > div.source2.state6 #circle2 { animation: animateGraphic2-state26 1s ease-in-out forwards; }

#animation > div.source2.state6 #circle3 { animation: animateGraphic3-state26 1s ease-in-out forwards; }

#animation > div.source2.state6 #circle4 { animation: animateGraphic4-state26 1s ease-in-out forwards; }

#animation > div.source2.state7 #circle1 { animation: animateGraphic1-state27 1s ease-in-out forwards; }

#animation > div.source2.state7 #circle2 { animation: animateGraphic2-state27 1s ease-in-out forwards; }

#animation > div.source2.state7 #circle3 { animation: animateGraphic3-state27 1s ease-in-out forwards; }

#animation > div.source2.state7 #circle4 { animation: animateGraphic4-state27 1s ease-in-out forwards; }

#animation > div.source3.state0 #circle1 { animation: animateGraphic1-state30 1s ease-in-out forwards; }

#animation > div.source3.state0 #circle2 { animation: animateGraphic2-state30 1s ease-in-out forwards; }

#animation > div.source3.state0 #circle3 { animation: animateGraphic3-state30 1s ease-in-out forwards; }

#animation > div.source3.state0 #circle4 { animation: animateGraphic4-state30 1s ease-in-out forwards; }

#animation > div.source3.state1 #circle1 { animation: animateGraphic1-state31 1s ease-in-out forwards; }

#animation > div.source3.state1 #circle2 { animation: animateGraphic2-state31 1s ease-in-out forwards; }

#animation > div.source3.state1 #circle3 { animation: animateGraphic3-state31 1s ease-in-out forwards; }

#animation > div.source3.state1 #circle4 { animation: animateGraphic4-state31 1s ease-in-out forwards; }

#animation > div.source3.state2 #circle1 { animation: animateGraphic1-state32 1s ease-in-out forwards; }

#animation > div.source3.state2 #circle2 { animation: animateGraphic2-state32 1s ease-in-out forwards; }

#animation > div.source3.state2 #circle3 { animation: animateGraphic3-state32 1s ease-in-out forwards; }

#animation > div.source3.state2 #circle4 { animation: animateGraphic4-state32 1s ease-in-out forwards; }

#animation > div.source3.state3 #circle1 { animation: animateGraphic1-state33 1s ease-in-out forwards; }

#animation > div.source3.state3 #circle2 { animation: animateGraphic2-state33 1s ease-in-out forwards; }

#animation > div.source3.state3 #circle3 { animation: animateGraphic3-state33 1s ease-in-out forwards; }

#animation > div.source3.state3 #circle4 { animation: animateGraphic4-state33 1s ease-in-out forwards; }

#animation > div.source3.state4 #circle1 { animation: animateGraphic1-state34 1s ease-in-out forwards; }

#animation > div.source3.state4 #circle2 { animation: animateGraphic2-state34 1s ease-in-out forwards; }

#animation > div.source3.state4 #circle3 { animation: animateGraphic3-state34 1s ease-in-out forwards; }

#animation > div.source3.state4 #circle4 { animation: animateGraphic4-state34 1s ease-in-out forwards; }

#animation > div.source3.state5 #circle1 { animation: animateGraphic1-state35 1s ease-in-out forwards; }

#animation > div.source3.state5 #circle2 { animation: animateGraphic2-state35 1s ease-in-out forwards; }

#animation > div.source3.state5 #circle3 { animation: animateGraphic3-state35 1s ease-in-out forwards; }

#animation > div.source3.state5 #circle4 { animation: animateGraphic4-state35 1s ease-in-out forwards; }

#animation > div.source3.state6 #circle1 { animation: animateGraphic1-state36 1s ease-in-out forwards; }

#animation > div.source3.state6 #circle2 { animation: animateGraphic2-state36 1s ease-in-out forwards; }

#animation > div.source3.state6 #circle3 { animation: animateGraphic3-state36 1s ease-in-out forwards; }

#animation > div.source3.state6 #circle4 { animation: animateGraphic4-state36 1s ease-in-out forwards; }

#animation > div.source3.state7 #circle1 { animation: animateGraphic1-state37 1s ease-in-out forwards; }

#animation > div.source3.state7 #circle2 { animation: animateGraphic2-state37 1s ease-in-out forwards; }

#animation > div.source3.state7 #circle3 { animation: animateGraphic3-state37 1s ease-in-out forwards; }

#animation > div.source3.state7 #circle4 { animation: animateGraphic4-state37 1s ease-in-out forwards; }

#animation > div.source4.state0 #circle1 { animation: animateGraphic1-state40 1s ease-in-out forwards; }

#animation > div.source4.state0 #circle2 { animation: animateGraphic2-state40 1s ease-in-out forwards; }

#animation > div.source4.state0 #circle3 { animation: animateGraphic3-state40 1s ease-in-out forwards; }

#animation > div.source4.state0 #circle4 { animation: animateGraphic4-state40 1s ease-in-out forwards; }

#animation > div.source4.state1 #circle1 { animation: animateGraphic1-state41 1s ease-in-out forwards; }

#animation > div.source4.state1 #circle2 { animation: animateGraphic2-state41 1s ease-in-out forwards; }

#animation > div.source4.state1 #circle3 { animation: animateGraphic3-state41 1s ease-in-out forwards; }

#animation > div.source4.state1 #circle4 { animation: animateGraphic4-state41 1s ease-in-out forwards; }

#animation > div.source4.state2 #circle1 { animation: animateGraphic1-state42 1s ease-in-out forwards; }

#animation > div.source4.state2 #circle2 { animation: animateGraphic2-state42 1s ease-in-out forwards; }

#animation > div.source4.state2 #circle3 { animation: animateGraphic3-state42 1s ease-in-out forwards; }

#animation > div.source4.state2 #circle4 { animation: animateGraphic4-state42 1s ease-in-out forwards; }

#animation > div.source4.state3 #circle1 { animation: animateGraphic1-state43 1s ease-in-out forwards; }

#animation > div.source4.state3 #circle2 { animation: animateGraphic2-state43 1s ease-in-out forwards; }

#animation > div.source4.state3 #circle3 { animation: animateGraphic3-state43 1s ease-in-out forwards; }

#animation > div.source4.state3 #circle4 { animation: animateGraphic4-state43 1s ease-in-out forwards; }

#animation > div.source4.state4 #circle1 { animation: animateGraphic1-state44 1s ease-in-out forwards; }

#animation > div.source4.state4 #circle2 { animation: animateGraphic2-state44 1s ease-in-out forwards; }

#animation > div.source4.state4 #circle3 { animation: animateGraphic3-state44 1s ease-in-out forwards; }

#animation > div.source4.state4 #circle4 { animation: animateGraphic4-state44 1s ease-in-out forwards; }

#animation > div.source4.state5 #circle1 { animation: animateGraphic1-state45 1s ease-in-out forwards; }

#animation > div.source4.state5 #circle2 { animation: animateGraphic2-state45 1s ease-in-out forwards; }

#animation > div.source4.state5 #circle3 { animation: animateGraphic3-state45 1s ease-in-out forwards; }

#animation > div.source4.state5 #circle4 { animation: animateGraphic4-state45 1s ease-in-out forwards; }

#animation > div.source4.state6 #circle1 { animation: animateGraphic1-state46 1s ease-in-out forwards; }

#animation > div.source4.state6 #circle2 { animation: animateGraphic2-state46 1s ease-in-out forwards; }

#animation > div.source4.state6 #circle3 { animation: animateGraphic3-state46 1s ease-in-out forwards; }

#animation > div.source4.state6 #circle4 { animation: animateGraphic4-state46 1s ease-in-out forwards; }

#animation > div.source4.state7 #circle1 { animation: animateGraphic1-state47 1s ease-in-out forwards; }

#animation > div.source4.state7 #circle2 { animation: animateGraphic2-state47 1s ease-in-out forwards; }

#animation > div.source4.state7 #circle3 { animation: animateGraphic3-state47 1s ease-in-out forwards; }

#animation > div.source4.state7 #circle4 { animation: animateGraphic4-state47 1s ease-in-out forwards; }

#animation > div.source5.state0 #circle1 { animation: animateGraphic1-state50 1s ease-in-out forwards; }

#animation > div.source5.state0 #circle2 { animation: animateGraphic2-state50 1s ease-in-out forwards; }

#animation > div.source5.state0 #circle3 { animation: animateGraphic3-state50 1s ease-in-out forwards; }

#animation > div.source5.state0 #circle4 { animation: animateGraphic4-state50 1s ease-in-out forwards; }

#animation > div.source5.state1 #circle1 { animation: animateGraphic1-state51 1s ease-in-out forwards; }

#animation > div.source5.state1 #circle2 { animation: animateGraphic2-state51 1s ease-in-out forwards; }

#animation > div.source5.state1 #circle3 { animation: animateGraphic3-state51 1s ease-in-out forwards; }

#animation > div.source5.state1 #circle4 { animation: animateGraphic4-state51 1s ease-in-out forwards; }

#animation > div.source5.state2 #circle1 { animation: animateGraphic1-state52 1s ease-in-out forwards; }

#animation > div.source5.state2 #circle2 { animation: animateGraphic2-state52 1s ease-in-out forwards; }

#animation > div.source5.state2 #circle3 { animation: animateGraphic3-state52 1s ease-in-out forwards; }

#animation > div.source5.state2 #circle4 { animation: animateGraphic4-state52 1s ease-in-out forwards; }

#animation > div.source5.state3 #circle1 { animation: animateGraphic1-state53 1s ease-in-out forwards; }

#animation > div.source5.state3 #circle2 { animation: animateGraphic2-state53 1s ease-in-out forwards; }

#animation > div.source5.state3 #circle3 { animation: animateGraphic3-state53 1s ease-in-out forwards; }

#animation > div.source5.state3 #circle4 { animation: animateGraphic4-state53 1s ease-in-out forwards; }

#animation > div.source5.state4 #circle1 { animation: animateGraphic1-state54 1s ease-in-out forwards; }

#animation > div.source5.state4 #circle2 { animation: animateGraphic2-state54 1s ease-in-out forwards; }

#animation > div.source5.state4 #circle3 { animation: animateGraphic3-state54 1s ease-in-out forwards; }

#animation > div.source5.state4 #circle4 { animation: animateGraphic4-state54 1s ease-in-out forwards; }

#animation > div.source5.state5 #circle1 { animation: animateGraphic1-state55 1s ease-in-out forwards; }

#animation > div.source5.state5 #circle2 { animation: animateGraphic2-state55 1s ease-in-out forwards; }

#animation > div.source5.state5 #circle3 { animation: animateGraphic3-state55 1s ease-in-out forwards; }

#animation > div.source5.state5 #circle4 { animation: animateGraphic4-state55 1s ease-in-out forwards; }

#animation > div.source5.state6 #circle1 { animation: animateGraphic1-state56 1s ease-in-out forwards; }

#animation > div.source5.state6 #circle2 { animation: animateGraphic2-state56 1s ease-in-out forwards; }

#animation > div.source5.state6 #circle3 { animation: animateGraphic3-state56 1s ease-in-out forwards; }

#animation > div.source5.state6 #circle4 { animation: animateGraphic4-state56 1s ease-in-out forwards; }

#animation > div.source5.state7 #circle1 { animation: animateGraphic1-state57 1s ease-in-out forwards; }

#animation > div.source5.state7 #circle2 { animation: animateGraphic2-state57 1s ease-in-out forwards; }

#animation > div.source5.state7 #circle3 { animation: animateGraphic3-state57 1s ease-in-out forwards; }

#animation > div.source5.state7 #circle4 { animation: animateGraphic4-state57 1s ease-in-out forwards; }

#animation > div.source6.state0 #circle1 { animation: animateGraphic1-state60 1s ease-in-out forwards; }

#animation > div.source6.state0 #circle2 { animation: animateGraphic2-state60 1s ease-in-out forwards; }

#animation > div.source6.state0 #circle3 { animation: animateGraphic3-state60 1s ease-in-out forwards; }

#animation > div.source6.state0 #circle4 { animation: animateGraphic4-state60 1s ease-in-out forwards; }

#animation > div.source6.state1 #circle1 { animation: animateGraphic1-state61 1s ease-in-out forwards; }

#animation > div.source6.state1 #circle2 { animation: animateGraphic2-state61 1s ease-in-out forwards; }

#animation > div.source6.state1 #circle3 { animation: animateGraphic3-state61 1s ease-in-out forwards; }

#animation > div.source6.state1 #circle4 { animation: animateGraphic4-state61 1s ease-in-out forwards; }

#animation > div.source6.state2 #circle1 { animation: animateGraphic1-state62 1s ease-in-out forwards; }

#animation > div.source6.state2 #circle2 { animation: animateGraphic2-state62 1s ease-in-out forwards; }

#animation > div.source6.state2 #circle3 { animation: animateGraphic3-state62 1s ease-in-out forwards; }

#animation > div.source6.state2 #circle4 { animation: animateGraphic4-state62 1s ease-in-out forwards; }

#animation > div.source6.state3 #circle1 { animation: animateGraphic1-state63 1s ease-in-out forwards; }

#animation > div.source6.state3 #circle2 { animation: animateGraphic2-state63 1s ease-in-out forwards; }

#animation > div.source6.state3 #circle3 { animation: animateGraphic3-state63 1s ease-in-out forwards; }

#animation > div.source6.state3 #circle4 { animation: animateGraphic4-state63 1s ease-in-out forwards; }

#animation > div.source6.state4 #circle1 { animation: animateGraphic1-state64 1s ease-in-out forwards; }

#animation > div.source6.state4 #circle2 { animation: animateGraphic2-state64 1s ease-in-out forwards; }

#animation > div.source6.state4 #circle3 { animation: animateGraphic3-state64 1s ease-in-out forwards; }

#animation > div.source6.state4 #circle4 { animation: animateGraphic4-state64 1s ease-in-out forwards; }

#animation > div.source6.state5 #circle1 { animation: animateGraphic1-state65 1s ease-in-out forwards; }

#animation > div.source6.state5 #circle2 { animation: animateGraphic2-state65 1s ease-in-out forwards; }

#animation > div.source6.state5 #circle3 { animation: animateGraphic3-state65 1s ease-in-out forwards; }

#animation > div.source6.state5 #circle4 { animation: animateGraphic4-state65 1s ease-in-out forwards; }

#animation > div.source6.state6 #circle1 { animation: animateGraphic1-state66 1s ease-in-out forwards; }

#animation > div.source6.state6 #circle2 { animation: animateGraphic2-state66 1s ease-in-out forwards; }

#animation > div.source6.state6 #circle3 { animation: animateGraphic3-state66 1s ease-in-out forwards; }

#animation > div.source6.state6 #circle4 { animation: animateGraphic4-state66 1s ease-in-out forwards; }

#animation > div.source6.state7 #circle1 { animation: animateGraphic1-state67 1s ease-in-out forwards; }

#animation > div.source6.state7 #circle2 { animation: animateGraphic2-state67 1s ease-in-out forwards; }

#animation > div.source6.state7 #circle3 { animation: animateGraphic3-state67 1s ease-in-out forwards; }

#animation > div.source6.state7 #circle4 { animation: animateGraphic4-state67 1s ease-in-out forwards; }

#animation > div.source7.state0 #circle1 { animation: animateGraphic1-state70 1s ease-in-out forwards; }

#animation > div.source7.state0 #circle2 { animation: animateGraphic2-state70 1s ease-in-out forwards; }

#animation > div.source7.state0 #circle3 { animation: animateGraphic3-state70 1s ease-in-out forwards; }

#animation > div.source7.state0 #circle4 { animation: animateGraphic4-state70 1s ease-in-out forwards; }

#animation > div.source7.state1 #circle1 { animation: animateGraphic1-state71 1s ease-in-out forwards; }

#animation > div.source7.state1 #circle2 { animation: animateGraphic2-state71 1s ease-in-out forwards; }

#animation > div.source7.state1 #circle3 { animation: animateGraphic3-state71 1s ease-in-out forwards; }

#animation > div.source7.state1 #circle4 { animation: animateGraphic4-state71 1s ease-in-out forwards; }

#animation > div.source7.state2 #circle1 { animation: animateGraphic1-state72 1s ease-in-out forwards; }

#animation > div.source7.state2 #circle2 { animation: animateGraphic2-state72 1s ease-in-out forwards; }

#animation > div.source7.state2 #circle3 { animation: animateGraphic3-state72 1s ease-in-out forwards; }

#animation > div.source7.state2 #circle4 { animation: animateGraphic4-state72 1s ease-in-out forwards; }

#animation > div.source7.state3 #circle1 { animation: animateGraphic1-state73 1s ease-in-out forwards; }

#animation > div.source7.state3 #circle2 { animation: animateGraphic2-state73 1s ease-in-out forwards; }

#animation > div.source7.state3 #circle3 { animation: animateGraphic3-state73 1s ease-in-out forwards; }

#animation > div.source7.state3 #circle4 { animation: animateGraphic4-state73 1s ease-in-out forwards; }

#animation > div.source7.state4 #circle1 { animation: animateGraphic1-state74 1s ease-in-out forwards; }

#animation > div.source7.state4 #circle2 { animation: animateGraphic2-state74 1s ease-in-out forwards; }

#animation > div.source7.state4 #circle3 { animation: animateGraphic3-state74 1s ease-in-out forwards; }

#animation > div.source7.state4 #circle4 { animation: animateGraphic4-state74 1s ease-in-out forwards; }

#animation > div.source7.state5 #circle1 { animation: animateGraphic1-state75 1s ease-in-out forwards; }

#animation > div.source7.state5 #circle2 { animation: animateGraphic2-state75 1s ease-in-out forwards; }

#animation > div.source7.state5 #circle3 { animation: animateGraphic3-state75 1s ease-in-out forwards; }

#animation > div.source7.state5 #circle4 { animation: animateGraphic4-state75 1s ease-in-out forwards; }

#animation > div.source7.state6 #circle1 { animation: animateGraphic1-state76 1s ease-in-out forwards; }

#animation > div.source7.state6 #circle2 { animation: animateGraphic2-state76 1s ease-in-out forwards; }

#animation > div.source7.state6 #circle3 { animation: animateGraphic3-state76 1s ease-in-out forwards; }

#animation > div.source7.state6 #circle4 { animation: animateGraphic4-state76 1s ease-in-out forwards; }

#animation > div.source7.state7 #circle1 { animation: animateGraphic1-state77 1s ease-in-out forwards; }

#animation > div.source7.state7 #circle2 { animation: animateGraphic2-state77 1s ease-in-out forwards; }

#animation > div.source7.state7 #circle3 { animation: animateGraphic3-state77 1s ease-in-out forwards; }

#animation > div.source7.state7 #circle4 { animation: animateGraphic4-state77 1s ease-in-out forwards; }

@media screen and (max-width: 992px) { #animation { overflow: hidden; } #animation > div { min-height: calc(85vw); max-width: calc(80vw); margin: 0; } #animation > div > picture.bg.state1 { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #animation > div > picture.bg.state1#circle3 { transform: translate(-50%, -50%) rotate(0deg); } #animation > div > picture.bg.state1#circle2 { transform: translate(-50%, -50%) rotate(150deg); } #animation > div > picture.bg.state1#circle1 { transform: translate(-50%, -50%) rotate(275deg); } #animation > div .productGroup .line { display: none; } #animation > div .productGroup { position: absolute; width: 110%; display: flex; flex-direction: row; gap: 0px 5px; z-index: 2; } #animation > div .productGroup[data-circle='3'], #animation > div .productGroup[data-circle='2'] { top: -10px; max-width: 60%; height: 20%; } #animation > div .productGroup[data-circle='3'] .link:after, #animation > div .productGroup[data-circle='2'] .link:after { top: auto; bottom: 0px; } #animation > div .productGroup[data-circle='1'] { width: 100%; height: 9%; bottom: 5%; left: 50%; align-items: flex-end; justify-content: space-between; transform: translateX(-50%); } #animation > div .productGroup[data-circle='1'] .link { max-width: 30%; } #animation > div .productGroup[data-circle='1'] .link:after { bottom: auto; top: 0px; } #animation > div .productGroup[data-circle='1'] .line { display: block; } #animation > div .productGroup[data-circle='2'] { right: calc(-10% - 5px); } #animation > div .productGroup[data-circle='3'] { left: calc(-10% - 5px); } #animation > div .productGroup .link { width: fit-content; height: fit-content; max-width: 45%; z-index: 2; padding: 15px; font-size: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-width: 1px; border-color: #1f334a; } #animation > div .productGroup .link:after { border: 3px solid #1f334a; background-color: #fff; right: auto; left: 50%; transform: translateX(-50%); opacity: 0.5; } #animation > div .productGroup .link.left, #animation > div .productGroup .link.right { text-align: center; } #animation > div .productGroup .link.state1 { top: 0px; right: auto; left: 28%; transform: translateX(-50%); } #animation > div .productGroup .link.state2 { top: 0px; right: auto; left: 73%; transform: translateX(-50%); } #animation > div .productGroup .link.state3 { top: 86%; right: auto; left: 13%; transform: translateX(-50%); } #animation > div .productGroup .link.state4 { top: 86%; right: auto; left: 50%; transform: translateX(-50%); } #animation > div .productGroup .link.state5 { top: 86%; right: -27%; left: auto; transform: translateX(-50%); } #animation > div .productGroup .link.state6 { top: 0px; right: auto; left: 23%; transform: translateX(-50%); } #animation > div .productGroup .link.state7 { top: 0px; right: auto; left: 73%; transform: translateX(-50%); } #animation > div.source0.state0 #circle1 { animation: animateGraphicMobile1-state00 1s ease-in-out forwards; } #animation > div.source0.state0 #circle2 { animation: animateGraphicMobile2-state00 1s ease-in-out forwards; } #animation > div.source0.state0 #circle3 { animation: animateGraphicMobile3-state00 1s ease-in-out forwards; } #animation > div.source0.state0 #circle4 { animation: animateGraphicMobile4-state00 1s ease-in-out forwards; } #animation > div.source0.state0 .link.state0 { max-height: initial; animation: slideLinks-toPosition-state0 1s ease-out forwards; } #animation > div.source0.state0 .link.state0:after { opacity: 0; } #animation > div.source0.state0 .link.state0 { animation: slideLinks-toDefault-state0 1s ease-out forwards; } #animation > div.source0.state1 #circle1 { animation: animateGraphicMobile1-state01 1s ease-in-out forwards; } #animation > div.source0.state1 #circle2 { animation: animateGraphicMobile2-state01 1s ease-in-out forwards; } #animation > div.source0.state1 #circle3 { animation: animateGraphicMobile3-state01 1s ease-in-out forwards; } #animation > div.source0.state1 #circle4 { animation: animateGraphicMobile4-state01 1s ease-in-out forwards; } #animation > div.source0.state1 .link.state1 { max-height: initial; animation: slideLinks-toPosition-state1 1s ease-out forwards; } #animation > div.source0.state1 .link.state1:after { opacity: 0; } #animation > div.source0.state1 .link.state0 { animation: slideLinks-toDefault-state0 1s ease-out forwards; } #animation > div.source0.state2 #circle1 { animation: animateGraphicMobile1-state02 1s ease-in-out forwards; } #animation > div.source0.state2 #circle2 { animation: animateGraphicMobile2-state02 1s ease-in-out forwards; } #animation > div.source0.state2 #circle3 { animation: animateGraphicMobile3-state02 1s ease-in-out forwards; } #animation > div.source0.state2 #circle4 { animation: animateGraphicMobile4-state02 1s ease-in-out forwards; } #animation > div.source0.state2 .link.state2 { max-height: initial; animation: slideLinks-toPosition-state2 1s ease-out forwards; } #animation > div.source0.state2 .link.state2:after { opacity: 0; } #animation > div.source0.state2 .link.state0 { animation: slideLinks-toDefault-state0 1s ease-out forwards; } #animation > div.source0.state3 #circle1 { animation: animateGraphicMobile1-state03 1s ease-in-out forwards; } #animation > div.source0.state3 #circle2 { animation: animateGraphicMobile2-state03 1s ease-in-out forwards; } #animation > div.source0.state3 #circle3 { animation: animateGraphicMobile3-state03 1s ease-in-out forwards; } #animation > div.source0.state3 #circle4 { animation: animateGraphicMobile4-state03 1s ease-in-out forwards; } #animation > div.source0.state3 .link.state3 { max-height: initial; animation: slideLinks-toPosition-state3 1s ease-out forwards; } #animation > div.source0.state3 .link.state3:after { opacity: 0; } #animation > div.source0.state3 .link.state0 { animation: slideLinks-toDefault-state0 1s ease-out forwards; } #animation > div.source0.state4 #circle1 { animation: animateGraphicMobile1-state04 1s ease-in-out forwards; } #animation > div.source0.state4 #circle2 { animation: animateGraphicMobile2-state04 1s ease-in-out forwards; } #animation > div.source0.state4 #circle3 { animation: animateGraphicMobile3-state04 1s ease-in-out forwards; } #animation > div.source0.state4 #circle4 { animation: animateGraphicMobile4-state04 1s ease-in-out forwards; } #animation > div.source0.state4 .link.state4 { max-height: initial; animation: slideLinks-toPosition-state4 1s ease-out forwards; } #animation > div.source0.state4 .link.state4:after { opacity: 0; } #animation > div.source0.state4 .link.state0 { animation: slideLinks-toDefault-state0 1s ease-out forwards; } #animation > div.source0.state5 #circle1 { animation: animateGraphicMobile1-state05 1s ease-in-out forwards; } #animation > div.source0.state5 #circle2 { animation: animateGraphicMobile2-state05 1s ease-in-out forwards; } #animation > div.source0.state5 #circle3 { animation: animateGraphicMobile3-state05 1s ease-in-out forwards; } #animation > div.source0.state5 #circle4 { animation: animateGraphicMobile4-state05 1s ease-in-out forwards; } #animation > div.source0.state5 .link.state5 { max-height: initial; animation: slideLinks-toPosition-state5 1s ease-out forwards; } #animation > div.source0.state5 .link.state5:after { opacity: 0; } #animation > div.source0.state5 .link.state0 { animation: slideLinks-toDefault-state0 1s ease-out forwards; } #animation > div.source0.state6 #circle1 { animation: animateGraphicMobile1-state06 1s ease-in-out forwards; } #animation > div.source0.state6 #circle2 { animation: animateGraphicMobile2-state06 1s ease-in-out forwards; } #animation > div.source0.state6 #circle3 { animation: animateGraphicMobile3-state06 1s ease-in-out forwards; } #animation > div.source0.state6 #circle4 { animation: animateGraphicMobile4-state06 1s ease-in-out forwards; } #animation > div.source0.state6 .link.state6 { max-height: initial; animation: slideLinks-toPosition-state6 1s ease-out forwards; } #animation > div.source0.state6 .link.state6:after { opacity: 0; } #animation > div.source0.state6 .link.state0 { animation: slideLinks-toDefault-state0 1s ease-out forwards; } #animation > div.source0.state7 #circle1 { animation: animateGraphicMobile1-state07 1s ease-in-out forwards; } #animation > div.source0.state7 #circle2 { animation: animateGraphicMobile2-state07 1s ease-in-out forwards; } #animation > div.source0.state7 #circle3 { animation: animateGraphicMobile3-state07 1s ease-in-out forwards; } #animation > div.source0.state7 #circle4 { animation: animateGraphicMobile4-state07 1s ease-in-out forwards; } #animation > div.source0.state7 .link.state7 { max-height: initial; animation: slideLinks-toPosition-state7 1s ease-out forwards; } #animation > div.source0.state7 .link.state7:after { opacity: 0; } #animation > div.source0.state7 .link.state0 { animation: slideLinks-toDefault-state0 1s ease-out forwards; } #animation > div.source1.state0 #circle1 { animation: animateGraphicMobile1-state10 1s ease-in-out forwards; } #animation > div.source1.state0 #circle2 { animation: animateGraphicMobile2-state10 1s ease-in-out forwards; } #animation > div.source1.state0 #circle3 { animation: animateGraphicMobile3-state10 1s ease-in-out forwards; } #animation > div.source1.state0 #circle4 { animation: animateGraphicMobile4-state10 1s ease-in-out forwards; } #animation > div.source1.state0 .link.state0 { max-height: initial; animation: slideLinks-toPosition-state0 1s ease-out forwards; } #animation > div.source1.state0 .link.state0:after { opacity: 0; } #animation > div.source1.state0 .link.state1 { animation: slideLinks-toDefault-state1 1s ease-out forwards; } #animation > div.source1.state1 #circle1 { animation: animateGraphicMobile1-state11 1s ease-in-out forwards; } #animation > div.source1.state1 #circle2 { animation: animateGraphicMobile2-state11 1s ease-in-out forwards; } #animation > div.source1.state1 #circle3 { animation: animateGraphicMobile3-state11 1s ease-in-out forwards; } #animation > div.source1.state1 #circle4 { animation: animateGraphicMobile4-state11 1s ease-in-out forwards; } #animation > div.source1.state1 .link.state1 { max-height: initial; animation: slideLinks-toPosition-state1 1s ease-out forwards; } #animation > div.source1.state1 .link.state1:after { opacity: 0; } #animation > div.source1.state1 .link.state1 { animation: slideLinks-toDefault-state1 1s ease-out forwards; } #animation > div.source1.state2 #circle1 { animation: animateGraphicMobile1-state12 1s ease-in-out forwards; } #animation > div.source1.state2 #circle2 { animation: animateGraphicMobile2-state12 1s ease-in-out forwards; } #animation > div.source1.state2 #circle3 { animation: animateGraphicMobile3-state12 1s ease-in-out forwards; } #animation > div.source1.state2 #circle4 { animation: animateGraphicMobile4-state12 1s ease-in-out forwards; } #animation > div.source1.state2 .link.state2 { max-height: initial; animation: slideLinks-toPosition-state2 1s ease-out forwards; } #animation > div.source1.state2 .link.state2:after { opacity: 0; } #animation > div.source1.state2 .link.state1 { animation: slideLinks-toDefault-state1 1s ease-out forwards; } #animation > div.source1.state3 #circle1 { animation: animateGraphicMobile1-state13 1s ease-in-out forwards; } #animation > div.source1.state3 #circle2 { animation: animateGraphicMobile2-state13 1s ease-in-out forwards; } #animation > div.source1.state3 #circle3 { animation: animateGraphicMobile3-state13 1s ease-in-out forwards; } #animation > div.source1.state3 #circle4 { animation: animateGraphicMobile4-state13 1s ease-in-out forwards; } #animation > div.source1.state3 .link.state3 { max-height: initial; animation: slideLinks-toPosition-state3 1s ease-out forwards; } #animation > div.source1.state3 .link.state3:after { opacity: 0; } #animation > div.source1.state3 .link.state1 { animation: slideLinks-toDefault-state1 1s ease-out forwards; } #animation > div.source1.state4 #circle1 { animation: animateGraphicMobile1-state14 1s ease-in-out forwards; } #animation > div.source1.state4 #circle2 { animation: animateGraphicMobile2-state14 1s ease-in-out forwards; } #animation > div.source1.state4 #circle3 { animation: animateGraphicMobile3-state14 1s ease-in-out forwards; } #animation > div.source1.state4 #circle4 { animation: animateGraphicMobile4-state14 1s ease-in-out forwards; } #animation > div.source1.state4 .link.state4 { max-height: initial; animation: slideLinks-toPosition-state4 1s ease-out forwards; } #animation > div.source1.state4 .link.state4:after { opacity: 0; } #animation > div.source1.state4 .link.state1 { animation: slideLinks-toDefault-state1 1s ease-out forwards; } #animation > div.source1.state5 #circle1 { animation: animateGraphicMobile1-state15 1s ease-in-out forwards; } #animation > div.source1.state5 #circle2 { animation: animateGraphicMobile2-state15 1s ease-in-out forwards; } #animation > div.source1.state5 #circle3 { animation: animateGraphicMobile3-state15 1s ease-in-out forwards; } #animation > div.source1.state5 #circle4 { animation: animateGraphicMobile4-state15 1s ease-in-out forwards; } #animation > div.source1.state5 .link.state5 { max-height: initial; animation: slideLinks-toPosition-state5 1s ease-out forwards; } #animation > div.source1.state5 .link.state5:after { opacity: 0; } #animation > div.source1.state5 .link.state1 { animation: slideLinks-toDefault-state1 1s ease-out forwards; } #animation > div.source1.state6 #circle1 { animation: animateGraphicMobile1-state16 1s ease-in-out forwards; } #animation > div.source1.state6 #circle2 { animation: animateGraphicMobile2-state16 1s ease-in-out forwards; } #animation > div.source1.state6 #circle3 { animation: animateGraphicMobile3-state16 1s ease-in-out forwards; } #animation > div.source1.state6 #circle4 { animation: animateGraphicMobile4-state16 1s ease-in-out forwards; } #animation > div.source1.state6 .link.state6 { max-height: initial; animation: slideLinks-toPosition-state6 1s ease-out forwards; } #animation > div.source1.state6 .link.state6:after { opacity: 0; } #animation > div.source1.state6 .link.state1 { animation: slideLinks-toDefault-state1 1s ease-out forwards; } #animation > div.source1.state7 #circle1 { animation: animateGraphicMobile1-state17 1s ease-in-out forwards; } #animation > div.source1.state7 #circle2 { animation: animateGraphicMobile2-state17 1s ease-in-out forwards; } #animation > div.source1.state7 #circle3 { animation: animateGraphicMobile3-state17 1s ease-in-out forwards; } #animation > div.source1.state7 #circle4 { animation: animateGraphicMobile4-state17 1s ease-in-out forwards; } #animation > div.source1.state7 .link.state7 { max-height: initial; animation: slideLinks-toPosition-state7 1s ease-out forwards; } #animation > div.source1.state7 .link.state7:after { opacity: 0; } #animation > div.source1.state7 .link.state1 { animation: slideLinks-toDefault-state1 1s ease-out forwards; } #animation > div.source2.state0 #circle1 { animation: animateGraphicMobile1-state20 1s ease-in-out forwards; } #animation > div.source2.state0 #circle2 { animation: animateGraphicMobile2-state20 1s ease-in-out forwards; } #animation > div.source2.state0 #circle3 { animation: animateGraphicMobile3-state20 1s ease-in-out forwards; } #animation > div.source2.state0 #circle4 { animation: animateGraphicMobile4-state20 1s ease-in-out forwards; } #animation > div.source2.state0 .link.state0 { max-height: initial; animation: slideLinks-toPosition-state0 1s ease-out forwards; } #animation > div.source2.state0 .link.state0:after { opacity: 0; } #animation > div.source2.state0 .link.state2 { animation: slideLinks-toDefault-state2 1s ease-out forwards; } #animation > div.source2.state1 #circle1 { animation: animateGraphicMobile1-state21 1s ease-in-out forwards; } #animation > div.source2.state1 #circle2 { animation: animateGraphicMobile2-state21 1s ease-in-out forwards; } #animation > div.source2.state1 #circle3 { animation: animateGraphicMobile3-state21 1s ease-in-out forwards; } #animation > div.source2.state1 #circle4 { animation: animateGraphicMobile4-state21 1s ease-in-out forwards; } #animation > div.source2.state1 .link.state1 { max-height: initial; animation: slideLinks-toPosition-state1 1s ease-out forwards; } #animation > div.source2.state1 .link.state1:after { opacity: 0; } #animation > div.source2.state1 .link.state2 { animation: slideLinks-toDefault-state2 1s ease-out forwards; } #animation > div.source2.state2 #circle1 { animation: animateGraphicMobile1-state22 1s ease-in-out forwards; } #animation > div.source2.state2 #circle2 { animation: animateGraphicMobile2-state22 1s ease-in-out forwards; } #animation > div.source2.state2 #circle3 { animation: animateGraphicMobile3-state22 1s ease-in-out forwards; } #animation > div.source2.state2 #circle4 { animation: animateGraphicMobile4-state22 1s ease-in-out forwards; } #animation > div.source2.state2 .link.state2 { max-height: initial; animation: slideLinks-toPosition-state2 1s ease-out forwards; } #animation > div.source2.state2 .link.state2:after { opacity: 0; } #animation > div.source2.state2 .link.state2 { animation: slideLinks-toDefault-state2 1s ease-out forwards; } #animation > div.source2.state3 #circle1 { animation: animateGraphicMobile1-state23 1s ease-in-out forwards; } #animation > div.source2.state3 #circle2 { animation: animateGraphicMobile2-state23 1s ease-in-out forwards; } #animation > div.source2.state3 #circle3 { animation: animateGraphicMobile3-state23 1s ease-in-out forwards; } #animation > div.source2.state3 #circle4 { animation: animateGraphicMobile4-state23 1s ease-in-out forwards; } #animation > div.source2.state3 .link.state3 { max-height: initial; animation: slideLinks-toPosition-state3 1s ease-out forwards; } #animation > div.source2.state3 .link.state3:after { opacity: 0; } #animation > div.source2.state3 .link.state2 { animation: slideLinks-toDefault-state2 1s ease-out forwards; } #animation > div.source2.state4 #circle1 { animation: animateGraphicMobile1-state24 1s ease-in-out forwards; } #animation > div.source2.state4 #circle2 { animation: animateGraphicMobile2-state24 1s ease-in-out forwards; } #animation > div.source2.state4 #circle3 { animation: animateGraphicMobile3-state24 1s ease-in-out forwards; } #animation > div.source2.state4 #circle4 { animation: animateGraphicMobile4-state24 1s ease-in-out forwards; } #animation > div.source2.state4 .link.state4 { max-height: initial; animation: slideLinks-toPosition-state4 1s ease-out forwards; } #animation > div.source2.state4 .link.state4:after { opacity: 0; } #animation > div.source2.state4 .link.state2 { animation: slideLinks-toDefault-state2 1s ease-out forwards; } #animation > div.source2.state5 #circle1 { animation: animateGraphicMobile1-state25 1s ease-in-out forwards; } #animation > div.source2.state5 #circle2 { animation: animateGraphicMobile2-state25 1s ease-in-out forwards; } #animation > div.source2.state5 #circle3 { animation: animateGraphicMobile3-state25 1s ease-in-out forwards; } #animation > div.source2.state5 #circle4 { animation: animateGraphicMobile4-state25 1s ease-in-out forwards; } #animation > div.source2.state5 .link.state5 { max-height: initial; animation: slideLinks-toPosition-state5 1s ease-out forwards; } #animation > div.source2.state5 .link.state5:after { opacity: 0; } #animation > div.source2.state5 .link.state2 { animation: slideLinks-toDefault-state2 1s ease-out forwards; } #animation > div.source2.state6 #circle1 { animation: animateGraphicMobile1-state26 1s ease-in-out forwards; } #animation > div.source2.state6 #circle2 { animation: animateGraphicMobile2-state26 1s ease-in-out forwards; } #animation > div.source2.state6 #circle3 { animation: animateGraphicMobile3-state26 1s ease-in-out forwards; } #animation > div.source2.state6 #circle4 { animation: animateGraphicMobile4-state26 1s ease-in-out forwards; } #animation > div.source2.state6 .link.state6 { max-height: initial; animation: slideLinks-toPosition-state6 1s ease-out forwards; } #animation > div.source2.state6 .link.state6:after { opacity: 0; } #animation > div.source2.state6 .link.state2 { animation: slideLinks-toDefault-state2 1s ease-out forwards; } #animation > div.source2.state7 #circle1 { animation: animateGraphicMobile1-state27 1s ease-in-out forwards; } #animation > div.source2.state7 #circle2 { animation: animateGraphicMobile2-state27 1s ease-in-out forwards; } #animation > div.source2.state7 #circle3 { animation: animateGraphicMobile3-state27 1s ease-in-out forwards; } #animation > div.source2.state7 #circle4 { animation: animateGraphicMobile4-state27 1s ease-in-out forwards; } #animation > div.source2.state7 .link.state7 { max-height: initial; animation: slideLinks-toPosition-state7 1s ease-out forwards; } #animation > div.source2.state7 .link.state7:after { opacity: 0; } #animation > div.source2.state7 .link.state2 { animation: slideLinks-toDefault-state2 1s ease-out forwards; } #animation > div.source3.state0 #circle1 { animation: animateGraphicMobile1-state30 1s ease-in-out forwards; } #animation > div.source3.state0 #circle2 { animation: animateGraphicMobile2-state30 1s ease-in-out forwards; } #animation > div.source3.state0 #circle3 { animation: animateGraphicMobile3-state30 1s ease-in-out forwards; } #animation > div.source3.state0 #circle4 { animation: animateGraphicMobile4-state30 1s ease-in-out forwards; } #animation > div.source3.state0 .link.state0 { max-height: initial; animation: slideLinks-toPosition-state0 1s ease-out forwards; } #animation > div.source3.state0 .link.state0:after { opacity: 0; } #animation > div.source3.state0 .link.state3 { animation: slideLinks-toDefault-state3 1s ease-out forwards; } #animation > div.source3.state1 #circle1 { animation: animateGraphicMobile1-state31 1s ease-in-out forwards; } #animation > div.source3.state1 #circle2 { animation: animateGraphicMobile2-state31 1s ease-in-out forwards; } #animation > div.source3.state1 #circle3 { animation: animateGraphicMobile3-state31 1s ease-in-out forwards; } #animation > div.source3.state1 #circle4 { animation: animateGraphicMobile4-state31 1s ease-in-out forwards; } #animation > div.source3.state1 .link.state1 { max-height: initial; animation: slideLinks-toPosition-state1 1s ease-out forwards; } #animation > div.source3.state1 .link.state1:after { opacity: 0; } #animation > div.source3.state1 .link.state3 { animation: slideLinks-toDefault-state3 1s ease-out forwards; } #animation > div.source3.state2 #circle1 { animation: animateGraphicMobile1-state32 1s ease-in-out forwards; } #animation > div.source3.state2 #circle2 { animation: animateGraphicMobile2-state32 1s ease-in-out forwards; } #animation > div.source3.state2 #circle3 { animation: animateGraphicMobile3-state32 1s ease-in-out forwards; } #animation > div.source3.state2 #circle4 { animation: animateGraphicMobile4-state32 1s ease-in-out forwards; } #animation > div.source3.state2 .link.state2 { max-height: initial; animation: slideLinks-toPosition-state2 1s ease-out forwards; } #animation > div.source3.state2 .link.state2:after { opacity: 0; } #animation > div.source3.state2 .link.state3 { animation: slideLinks-toDefault-state3 1s ease-out forwards; } #animation > div.source3.state3 #circle1 { animation: animateGraphicMobile1-state33 1s ease-in-out forwards; } #animation > div.source3.state3 #circle2 { animation: animateGraphicMobile2-state33 1s ease-in-out forwards; } #animation > div.source3.state3 #circle3 { animation: animateGraphicMobile3-state33 1s ease-in-out forwards; } #animation > div.source3.state3 #circle4 { animation: animateGraphicMobile4-state33 1s ease-in-out forwards; } #animation > div.source3.state3 .link.state3 { max-height: initial; animation: slideLinks-toPosition-state3 1s ease-out forwards; } #animation > div.source3.state3 .link.state3:after { opacity: 0; } #animation > div.source3.state3 .link.state3 { animation: slideLinks-toDefault-state3 1s ease-out forwards; } #animation > div.source3.state4 #circle1 { animation: animateGraphicMobile1-state34 1s ease-in-out forwards; } #animation > div.source3.state4 #circle2 { animation: animateGraphicMobile2-state34 1s ease-in-out forwards; } #animation > div.source3.state4 #circle3 { animation: animateGraphicMobile3-state34 1s ease-in-out forwards; } #animation > div.source3.state4 #circle4 { animation: animateGraphicMobile4-state34 1s ease-in-out forwards; } #animation > div.source3.state4 .link.state4 { max-height: initial; animation: slideLinks-toPosition-state4 1s ease-out forwards; } #animation > div.source3.state4 .link.state4:after { opacity: 0; } #animation > div.source3.state4 .link.state3 { animation: slideLinks-toDefault-state3 1s ease-out forwards; } #animation > div.source3.state5 #circle1 { animation: animateGraphicMobile1-state35 1s ease-in-out forwards; } #animation > div.source3.state5 #circle2 { animation: animateGraphicMobile2-state35 1s ease-in-out forwards; } #animation > div.source3.state5 #circle3 { animation: animateGraphicMobile3-state35 1s ease-in-out forwards; } #animation > div.source3.state5 #circle4 { animation: animateGraphicMobile4-state35 1s ease-in-out forwards; } #animation > div.source3.state5 .link.state5 { max-height: initial; animation: slideLinks-toPosition-state5 1s ease-out forwards; } #animation > div.source3.state5 .link.state5:after { opacity: 0; } #animation > div.source3.state5 .link.state3 { animation: slideLinks-toDefault-state3 1s ease-out forwards; } #animation > div.source3.state6 #circle1 { animation: animateGraphicMobile1-state36 1s ease-in-out forwards; } #animation > div.source3.state6 #circle2 { animation: animateGraphicMobile2-state36 1s ease-in-out forwards; } #animation > div.source3.state6 #circle3 { animation: animateGraphicMobile3-state36 1s ease-in-out forwards; } #animation > div.source3.state6 #circle4 { animation: animateGraphicMobile4-state36 1s ease-in-out forwards; } #animation > div.source3.state6 .link.state6 { max-height: initial; animation: slideLinks-toPosition-state6 1s ease-out forwards; } #animation > div.source3.state6 .link.state6:after { opacity: 0; } #animation > div.source3.state6 .link.state3 { animation: slideLinks-toDefault-state3 1s ease-out forwards; } #animation > div.source3.state7 #circle1 { animation: animateGraphicMobile1-state37 1s ease-in-out forwards; } #animation > div.source3.state7 #circle2 { animation: animateGraphicMobile2-state37 1s ease-in-out forwards; } #animation > div.source3.state7 #circle3 { animation: animateGraphicMobile3-state37 1s ease-in-out forwards; } #animation > div.source3.state7 #circle4 { animation: animateGraphicMobile4-state37 1s ease-in-out forwards; } #animation > div.source3.state7 .link.state7 { max-height: initial; animation: slideLinks-toPosition-state7 1s ease-out forwards; } #animation > div.source3.state7 .link.state7:after { opacity: 0; } #animation > div.source3.state7 .link.state3 { animation: slideLinks-toDefault-state3 1s ease-out forwards; } #animation > div.source4.state0 #circle1 { animation: animateGraphicMobile1-state40 1s ease-in-out forwards; } #animation > div.source4.state0 #circle2 { animation: animateGraphicMobile2-state40 1s ease-in-out forwards; } #animation > div.source4.state0 #circle3 { animation: animateGraphicMobile3-state40 1s ease-in-out forwards; } #animation > div.source4.state0 #circle4 { animation: animateGraphicMobile4-state40 1s ease-in-out forwards; } #animation > div.source4.state0 .link.state0 { max-height: initial; animation: slideLinks-toPosition-state0 1s ease-out forwards; } #animation > div.source4.state0 .link.state0:after { opacity: 0; } #animation > div.source4.state0 .link.state4 { animation: slideLinks-toDefault-state4 1s ease-out forwards; } #animation > div.source4.state1 #circle1 { animation: animateGraphicMobile1-state41 1s ease-in-out forwards; } #animation > div.source4.state1 #circle2 { animation: animateGraphicMobile2-state41 1s ease-in-out forwards; } #animation > div.source4.state1 #circle3 { animation: animateGraphicMobile3-state41 1s ease-in-out forwards; } #animation > div.source4.state1 #circle4 { animation: animateGraphicMobile4-state41 1s ease-in-out forwards; } #animation > div.source4.state1 .link.state1 { max-height: initial; animation: slideLinks-toPosition-state1 1s ease-out forwards; } #animation > div.source4.state1 .link.state1:after { opacity: 0; } #animation > div.source4.state1 .link.state4 { animation: slideLinks-toDefault-state4 1s ease-out forwards; } #animation > div.source4.state2 #circle1 { animation: animateGraphicMobile1-state42 1s ease-in-out forwards; } #animation > div.source4.state2 #circle2 { animation: animateGraphicMobile2-state42 1s ease-in-out forwards; } #animation > div.source4.state2 #circle3 { animation: animateGraphicMobile3-state42 1s ease-in-out forwards; } #animation > div.source4.state2 #circle4 { animation: animateGraphicMobile4-state42 1s ease-in-out forwards; } #animation > div.source4.state2 .link.state2 { max-height: initial; animation: slideLinks-toPosition-state2 1s ease-out forwards; } #animation > div.source4.state2 .link.state2:after { opacity: 0; } #animation > div.source4.state2 .link.state4 { animation: slideLinks-toDefault-state4 1s ease-out forwards; } #animation > div.source4.state3 #circle1 { animation: animateGraphicMobile1-state43 1s ease-in-out forwards; } #animation > div.source4.state3 #circle2 { animation: animateGraphicMobile2-state43 1s ease-in-out forwards; } #animation > div.source4.state3 #circle3 { animation: animateGraphicMobile3-state43 1s ease-in-out forwards; } #animation > div.source4.state3 #circle4 { animation: animateGraphicMobile4-state43 1s ease-in-out forwards; } #animation > div.source4.state3 .link.state3 { max-height: initial; animation: slideLinks-toPosition-state3 1s ease-out forwards; } #animation > div.source4.state3 .link.state3:after { opacity: 0; } #animation > div.source4.state3 .link.state4 { animation: slideLinks-toDefault-state4 1s ease-out forwards; } #animation > div.source4.state4 #circle1 { animation: animateGraphicMobile1-state44 1s ease-in-out forwards; } #animation > div.source4.state4 #circle2 { animation: animateGraphicMobile2-state44 1s ease-in-out forwards; } #animation > div.source4.state4 #circle3 { animation: animateGraphicMobile3-state44 1s ease-in-out forwards; } #animation > div.source4.state4 #circle4 { animation: animateGraphicMobile4-state44 1s ease-in-out forwards; } #animation > div.source4.state4 .link.state4 { max-height: initial; animation: slideLinks-toPosition-state4 1s ease-out forwards; } #animation > div.source4.state4 .link.state4:after { opacity: 0; } #animation > div.source4.state4 .link.state4 { animation: slideLinks-toDefault-state4 1s ease-out forwards; } #animation > div.source4.state5 #circle1 { animation: animateGraphicMobile1-state45 1s ease-in-out forwards; } #animation > div.source4.state5 #circle2 { animation: animateGraphicMobile2-state45 1s ease-in-out forwards; } #animation > div.source4.state5 #circle3 { animation: animateGraphicMobile3-state45 1s ease-in-out forwards; } #animation > div.source4.state5 #circle4 { animation: animateGraphicMobile4-state45 1s ease-in-out forwards; } #animation > div.source4.state5 .link.state5 { max-height: initial; animation: slideLinks-toPosition-state5 1s ease-out forwards; } #animation > div.source4.state5 .link.state5:after { opacity: 0; } #animation > div.source4.state5 .link.state4 { animation: slideLinks-toDefault-state4 1s ease-out forwards; } #animation > div.source4.state6 #circle1 { animation: animateGraphicMobile1-state46 1s ease-in-out forwards; } #animation > div.source4.state6 #circle2 { animation: animateGraphicMobile2-state46 1s ease-in-out forwards; } #animation > div.source4.state6 #circle3 { animation: animateGraphicMobile3-state46 1s ease-in-out forwards; } #animation > div.source4.state6 #circle4 { animation: animateGraphicMobile4-state46 1s ease-in-out forwards; } #animation > div.source4.state6 .link.state6 { max-height: initial; animation: slideLinks-toPosition-state6 1s ease-out forwards; } #animation > div.source4.state6 .link.state6:after { opacity: 0; } #animation > div.source4.state6 .link.state4 { animation: slideLinks-toDefault-state4 1s ease-out forwards; } #animation > div.source4.state7 #circle1 { animation: animateGraphicMobile1-state47 1s ease-in-out forwards; } #animation > div.source4.state7 #circle2 { animation: animateGraphicMobile2-state47 1s ease-in-out forwards; } #animation > div.source4.state7 #circle3 { animation: animateGraphicMobile3-state47 1s ease-in-out forwards; } #animation > div.source4.state7 #circle4 { animation: animateGraphicMobile4-state47 1s ease-in-out forwards; } #animation > div.source4.state7 .link.state7 { max-height: initial; animation: slideLinks-toPosition-state7 1s ease-out forwards; } #animation > div.source4.state7 .link.state7:after { opacity: 0; } #animation > div.source4.state7 .link.state4 { animation: slideLinks-toDefault-state4 1s ease-out forwards; } #animation > div.source5.state0 #circle1 { animation: animateGraphicMobile1-state50 1s ease-in-out forwards; } #animation > div.source5.state0 #circle2 { animation: animateGraphicMobile2-state50 1s ease-in-out forwards; } #animation > div.source5.state0 #circle3 { animation: animateGraphicMobile3-state50 1s ease-in-out forwards; } #animation > div.source5.state0 #circle4 { animation: animateGraphicMobile4-state50 1s ease-in-out forwards; } #animation > div.source5.state0 .link.state0 { max-height: initial; animation: slideLinks-toPosition-state0 1s ease-out forwards; } #animation > div.source5.state0 .link.state0:after { opacity: 0; } #animation > div.source5.state0 .link.state5 { animation: slideLinks-toDefault-state5 1s ease-out forwards; } #animation > div.source5.state1 #circle1 { animation: animateGraphicMobile1-state51 1s ease-in-out forwards; } #animation > div.source5.state1 #circle2 { animation: animateGraphicMobile2-state51 1s ease-in-out forwards; } #animation > div.source5.state1 #circle3 { animation: animateGraphicMobile3-state51 1s ease-in-out forwards; } #animation > div.source5.state1 #circle4 { animation: animateGraphicMobile4-state51 1s ease-in-out forwards; } #animation > div.source5.state1 .link.state1 { max-height: initial; animation: slideLinks-toPosition-state1 1s ease-out forwards; } #animation > div.source5.state1 .link.state1:after { opacity: 0; } #animation > div.source5.state1 .link.state5 { animation: slideLinks-toDefault-state5 1s ease-out forwards; } #animation > div.source5.state2 #circle1 { animation: animateGraphicMobile1-state52 1s ease-in-out forwards; } #animation > div.source5.state2 #circle2 { animation: animateGraphicMobile2-state52 1s ease-in-out forwards; } #animation > div.source5.state2 #circle3 { animation: animateGraphicMobile3-state52 1s ease-in-out forwards; } #animation > div.source5.state2 #circle4 { animation: animateGraphicMobile4-state52 1s ease-in-out forwards; } #animation > div.source5.state2 .link.state2 { max-height: initial; animation: slideLinks-toPosition-state2 1s ease-out forwards; } #animation > div.source5.state2 .link.state2:after { opacity: 0; } #animation > div.source5.state2 .link.state5 { animation: slideLinks-toDefault-state5 1s ease-out forwards; } #animation > div.source5.state3 #circle1 { animation: animateGraphicMobile1-state53 1s ease-in-out forwards; } #animation > div.source5.state3 #circle2 { animation: animateGraphicMobile2-state53 1s ease-in-out forwards; } #animation > div.source5.state3 #circle3 { animation: animateGraphicMobile3-state53 1s ease-in-out forwards; } #animation > div.source5.state3 #circle4 { animation: animateGraphicMobile4-state53 1s ease-in-out forwards; } #animation > div.source5.state3 .link.state3 { max-height: initial; animation: slideLinks-toPosition-state3 1s ease-out forwards; } #animation > div.source5.state3 .link.state3:after { opacity: 0; } #animation > div.source5.state3 .link.state5 { animation: slideLinks-toDefault-state5 1s ease-out forwards; } #animation > div.source5.state4 #circle1 { animation: animateGraphicMobile1-state54 1s ease-in-out forwards; } #animation > div.source5.state4 #circle2 { animation: animateGraphicMobile2-state54 1s ease-in-out forwards; } #animation > div.source5.state4 #circle3 { animation: animateGraphicMobile3-state54 1s ease-in-out forwards; } #animation > div.source5.state4 #circle4 { animation: animateGraphicMobile4-state54 1s ease-in-out forwards; } #animation > div.source5.state4 .link.state4 { max-height: initial; animation: slideLinks-toPosition-state4 1s ease-out forwards; } #animation > div.source5.state4 .link.state4:after { opacity: 0; } #animation > div.source5.state4 .link.state5 { animation: slideLinks-toDefault-state5 1s ease-out forwards; } #animation > div.source5.state5 #circle1 { animation: animateGraphicMobile1-state55 1s ease-in-out forwards; } #animation > div.source5.state5 #circle2 { animation: animateGraphicMobile2-state55 1s ease-in-out forwards; } #animation > div.source5.state5 #circle3 { animation: animateGraphicMobile3-state55 1s ease-in-out forwards; } #animation > div.source5.state5 #circle4 { animation: animateGraphicMobile4-state55 1s ease-in-out forwards; } #animation > div.source5.state5 .link.state5 { max-height: initial; animation: slideLinks-toPosition-state5 1s ease-out forwards; } #animation > div.source5.state5 .link.state5:after { opacity: 0; } #animation > div.source5.state5 .link.state5 { animation: slideLinks-toDefault-state5 1s ease-out forwards; } #animation > div.source5.state6 #circle1 { animation: animateGraphicMobile1-state56 1s ease-in-out forwards; } #animation > div.source5.state6 #circle2 { animation: animateGraphicMobile2-state56 1s ease-in-out forwards; } #animation > div.source5.state6 #circle3 { animation: animateGraphicMobile3-state56 1s ease-in-out forwards; } #animation > div.source5.state6 #circle4 { animation: animateGraphicMobile4-state56 1s ease-in-out forwards; } #animation > div.source5.state6 .link.state6 { max-height: initial; animation: slideLinks-toPosition-state6 1s ease-out forwards; } #animation > div.source5.state6 .link.state6:after { opacity: 0; } #animation > div.source5.state6 .link.state5 { animation: slideLinks-toDefault-state5 1s ease-out forwards; } #animation > div.source5.state7 #circle1 { animation: animateGraphicMobile1-state57 1s ease-in-out forwards; } #animation > div.source5.state7 #circle2 { animation: animateGraphicMobile2-state57 1s ease-in-out forwards; } #animation > div.source5.state7 #circle3 { animation: animateGraphicMobile3-state57 1s ease-in-out forwards; } #animation > div.source5.state7 #circle4 { animation: animateGraphicMobile4-state57 1s ease-in-out forwards; } #animation > div.source5.state7 .link.state7 { max-height: initial; animation: slideLinks-toPosition-state7 1s ease-out forwards; } #animation > div.source5.state7 .link.state7:after { opacity: 0; } #animation > div.source5.state7 .link.state5 { animation: slideLinks-toDefault-state5 1s ease-out forwards; } #animation > div.source6.state0 #circle1 { animation: animateGraphicMobile1-state60 1s ease-in-out forwards; } #animation > div.source6.state0 #circle2 { animation: animateGraphicMobile2-state60 1s ease-in-out forwards; } #animation > div.source6.state0 #circle3 { animation: animateGraphicMobile3-state60 1s ease-in-out forwards; } #animation > div.source6.state0 #circle4 { animation: animateGraphicMobile4-state60 1s ease-in-out forwards; } #animation > div.source6.state0 .link.state0 { max-height: initial; animation: slideLinks-toPosition-state0 1s ease-out forwards; } #animation > div.source6.state0 .link.state0:after { opacity: 0; } #animation > div.source6.state0 .link.state6 { animation: slideLinks-toDefault-state6 1s ease-out forwards; } #animation > div.source6.state1 #circle1 { animation: animateGraphicMobile1-state61 1s ease-in-out forwards; } #animation > div.source6.state1 #circle2 { animation: animateGraphicMobile2-state61 1s ease-in-out forwards; } #animation > div.source6.state1 #circle3 { animation: animateGraphicMobile3-state61 1s ease-in-out forwards; } #animation > div.source6.state1 #circle4 { animation: animateGraphicMobile4-state61 1s ease-in-out forwards; } #animation > div.source6.state1 .link.state1 { max-height: initial; animation: slideLinks-toPosition-state1 1s ease-out forwards; } #animation > div.source6.state1 .link.state1:after { opacity: 0; } #animation > div.source6.state1 .link.state6 { animation: slideLinks-toDefault-state6 1s ease-out forwards; } #animation > div.source6.state2 #circle1 { animation: animateGraphicMobile1-state62 1s ease-in-out forwards; } #animation > div.source6.state2 #circle2 { animation: animateGraphicMobile2-state62 1s ease-in-out forwards; } #animation > div.source6.state2 #circle3 { animation: animateGraphicMobile3-state62 1s ease-in-out forwards; } #animation > div.source6.state2 #circle4 { animation: animateGraphicMobile4-state62 1s ease-in-out forwards; } #animation > div.source6.state2 .link.state2 { max-height: initial; animation: slideLinks-toPosition-state2 1s ease-out forwards; } #animation > div.source6.state2 .link.state2:after { opacity: 0; } #animation > div.source6.state2 .link.state6 { animation: slideLinks-toDefault-state6 1s ease-out forwards; } #animation > div.source6.state3 #circle1 { animation: animateGraphicMobile1-state63 1s ease-in-out forwards; } #animation > div.source6.state3 #circle2 { animation: animateGraphicMobile2-state63 1s ease-in-out forwards; } #animation > div.source6.state3 #circle3 { animation: animateGraphicMobile3-state63 1s ease-in-out forwards; } #animation > div.source6.state3 #circle4 { animation: animateGraphicMobile4-state63 1s ease-in-out forwards; } #animation > div.source6.state3 .link.state3 { max-height: initial; animation: slideLinks-toPosition-state3 1s ease-out forwards; } #animation > div.source6.state3 .link.state3:after { opacity: 0; } #animation > div.source6.state3 .link.state6 { animation: slideLinks-toDefault-state6 1s ease-out forwards; } #animation > div.source6.state4 #circle1 { animation: animateGraphicMobile1-state64 1s ease-in-out forwards; } #animation > div.source6.state4 #circle2 { animation: animateGraphicMobile2-state64 1s ease-in-out forwards; } #animation > div.source6.state4 #circle3 { animation: animateGraphicMobile3-state64 1s ease-in-out forwards; } #animation > div.source6.state4 #circle4 { animation: animateGraphicMobile4-state64 1s ease-in-out forwards; } #animation > div.source6.state4 .link.state4 { max-height: initial; animation: slideLinks-toPosition-state4 1s ease-out forwards; } #animation > div.source6.state4 .link.state4:after { opacity: 0; } #animation > div.source6.state4 .link.state6 { animation: slideLinks-toDefault-state6 1s ease-out forwards; } #animation > div.source6.state5 #circle1 { animation: animateGraphicMobile1-state65 1s ease-in-out forwards; } #animation > div.source6.state5 #circle2 { animation: animateGraphicMobile2-state65 1s ease-in-out forwards; } #animation > div.source6.state5 #circle3 { animation: animateGraphicMobile3-state65 1s ease-in-out forwards; } #animation > div.source6.state5 #circle4 { animation: animateGraphicMobile4-state65 1s ease-in-out forwards; } #animation > div.source6.state5 .link.state5 { max-height: initial; animation: slideLinks-toPosition-state5 1s ease-out forwards; } #animation > div.source6.state5 .link.state5:after { opacity: 0; } #animation > div.source6.state5 .link.state6 { animation: slideLinks-toDefault-state6 1s ease-out forwards; } #animation > div.source6.state6 #circle1 { animation: animateGraphicMobile1-state66 1s ease-in-out forwards; } #animation > div.source6.state6 #circle2 { animation: animateGraphicMobile2-state66 1s ease-in-out forwards; } #animation > div.source6.state6 #circle3 { animation: animateGraphicMobile3-state66 1s ease-in-out forwards; } #animation > div.source6.state6 #circle4 { animation: animateGraphicMobile4-state66 1s ease-in-out forwards; } #animation > div.source6.state6 .link.state6 { max-height: initial; animation: slideLinks-toPosition-state6 1s ease-out forwards; } #animation > div.source6.state6 .link.state6:after { opacity: 0; } #animation > div.source6.state6 .link.state6 { animation: slideLinks-toDefault-state6 1s ease-out forwards; } #animation > div.source6.state7 #circle1 { animation: animateGraphicMobile1-state67 1s ease-in-out forwards; } #animation > div.source6.state7 #circle2 { animation: animateGraphicMobile2-state67 1s ease-in-out forwards; } #animation > div.source6.state7 #circle3 { animation: animateGraphicMobile3-state67 1s ease-in-out forwards; } #animation > div.source6.state7 #circle4 { animation: animateGraphicMobile4-state67 1s ease-in-out forwards; } #animation > div.source6.state7 .link.state7 { max-height: initial; animation: slideLinks-toPosition-state7 1s ease-out forwards; } #animation > div.source6.state7 .link.state7:after { opacity: 0; } #animation > div.source6.state7 .link.state6 { animation: slideLinks-toDefault-state6 1s ease-out forwards; } #animation > div.source7.state0 #circle1 { animation: animateGraphicMobile1-state70 1s ease-in-out forwards; } #animation > div.source7.state0 #circle2 { animation: animateGraphicMobile2-state70 1s ease-in-out forwards; } #animation > div.source7.state0 #circle3 { animation: animateGraphicMobile3-state70 1s ease-in-out forwards; } #animation > div.source7.state0 #circle4 { animation: animateGraphicMobile4-state70 1s ease-in-out forwards; } #animation > div.source7.state0 .link.state0 { max-height: initial; animation: slideLinks-toPosition-state0 1s ease-out forwards; } #animation > div.source7.state0 .link.state0:after { opacity: 0; } #animation > div.source7.state0 .link.state7 { animation: slideLinks-toDefault-state7 1s ease-out forwards; } #animation > div.source7.state1 #circle1 { animation: animateGraphicMobile1-state71 1s ease-in-out forwards; } #animation > div.source7.state1 #circle2 { animation: animateGraphicMobile2-state71 1s ease-in-out forwards; } #animation > div.source7.state1 #circle3 { animation: animateGraphicMobile3-state71 1s ease-in-out forwards; } #animation > div.source7.state1 #circle4 { animation: animateGraphicMobile4-state71 1s ease-in-out forwards; } #animation > div.source7.state1 .link.state1 { max-height: initial; animation: slideLinks-toPosition-state1 1s ease-out forwards; } #animation > div.source7.state1 .link.state1:after { opacity: 0; } #animation > div.source7.state1 .link.state7 { animation: slideLinks-toDefault-state7 1s ease-out forwards; } #animation > div.source7.state2 #circle1 { animation: animateGraphicMobile1-state72 1s ease-in-out forwards; } #animation > div.source7.state2 #circle2 { animation: animateGraphicMobile2-state72 1s ease-in-out forwards; } #animation > div.source7.state2 #circle3 { animation: animateGraphicMobile3-state72 1s ease-in-out forwards; } #animation > div.source7.state2 #circle4 { animation: animateGraphicMobile4-state72 1s ease-in-out forwards; } #animation > div.source7.state2 .link.state2 { max-height: initial; animation: slideLinks-toPosition-state2 1s ease-out forwards; } #animation > div.source7.state2 .link.state2:after { opacity: 0; } #animation > div.source7.state2 .link.state7 { animation: slideLinks-toDefault-state7 1s ease-out forwards; } #animation > div.source7.state3 #circle1 { animation: animateGraphicMobile1-state73 1s ease-in-out forwards; } #animation > div.source7.state3 #circle2 { animation: animateGraphicMobile2-state73 1s ease-in-out forwards; } #animation > div.source7.state3 #circle3 { animation: animateGraphicMobile3-state73 1s ease-in-out forwards; } #animation > div.source7.state3 #circle4 { animation: animateGraphicMobile4-state73 1s ease-in-out forwards; } #animation > div.source7.state3 .link.state3 { max-height: initial; animation: slideLinks-toPosition-state3 1s ease-out forwards; } #animation > div.source7.state3 .link.state3:after { opacity: 0; } #animation > div.source7.state3 .link.state7 { animation: slideLinks-toDefault-state7 1s ease-out forwards; } #animation > div.source7.state4 #circle1 { animation: animateGraphicMobile1-state74 1s ease-in-out forwards; } #animation > div.source7.state4 #circle2 { animation: animateGraphicMobile2-state74 1s ease-in-out forwards; } #animation > div.source7.state4 #circle3 { animation: animateGraphicMobile3-state74 1s ease-in-out forwards; } #animation > div.source7.state4 #circle4 { animation: animateGraphicMobile4-state74 1s ease-in-out forwards; } #animation > div.source7.state4 .link.state4 { max-height: initial; animation: slideLinks-toPosition-state4 1s ease-out forwards; } #animation > div.source7.state4 .link.state4:after { opacity: 0; } #animation > div.source7.state4 .link.state7 { animation: slideLinks-toDefault-state7 1s ease-out forwards; } #animation > div.source7.state5 #circle1 { animation: animateGraphicMobile1-state75 1s ease-in-out forwards; } #animation > div.source7.state5 #circle2 { animation: animateGraphicMobile2-state75 1s ease-in-out forwards; } #animation > div.source7.state5 #circle3 { animation: animateGraphicMobile3-state75 1s ease-in-out forwards; } #animation > div.source7.state5 #circle4 { animation: animateGraphicMobile4-state75 1s ease-in-out forwards; } #animation > div.source7.state5 .link.state5 { max-height: initial; animation: slideLinks-toPosition-state5 1s ease-out forwards; } #animation > div.source7.state5 .link.state5:after { opacity: 0; } #animation > div.source7.state5 .link.state7 { animation: slideLinks-toDefault-state7 1s ease-out forwards; } #animation > div.source7.state6 #circle1 { animation: animateGraphicMobile1-state76 1s ease-in-out forwards; } #animation > div.source7.state6 #circle2 { animation: animateGraphicMobile2-state76 1s ease-in-out forwards; } #animation > div.source7.state6 #circle3 { animation: animateGraphicMobile3-state76 1s ease-in-out forwards; } #animation > div.source7.state6 #circle4 { animation: animateGraphicMobile4-state76 1s ease-in-out forwards; } #animation > div.source7.state6 .link.state6 { max-height: initial; animation: slideLinks-toPosition-state6 1s ease-out forwards; } #animation > div.source7.state6 .link.state6:after { opacity: 0; } #animation > div.source7.state6 .link.state7 { animation: slideLinks-toDefault-state7 1s ease-out forwards; } #animation > div.source7.state7 #circle1 { animation: animateGraphicMobile1-state77 1s ease-in-out forwards; } #animation > div.source7.state7 #circle2 { animation: animateGraphicMobile2-state77 1s ease-in-out forwards; } #animation > div.source7.state7 #circle3 { animation: animateGraphicMobile3-state77 1s ease-in-out forwards; } #animation > div.source7.state7 #circle4 { animation: animateGraphicMobile4-state77 1s ease-in-out forwards; } #animation > div.source7.state7 .link.state7 { max-height: initial; animation: slideLinks-toPosition-state7 1s ease-out forwards; } #animation > div.source7.state7 .link.state7:after { opacity: 0; } #animation > div.source7.state7 .link.state7 { animation: slideLinks-toDefault-state7 1s ease-out forwards; } }

@media screen and (max-width: 576px) { #animation { display: none; } }

.container.map { padding: 0px; }

.container.map > * { margin: 0px; }

.container.map > .picture { display: block; position: relative; width: 100%; height: 370px; background-image: url("/images/staticmap.jpg"); background-size: auto 100%; background-position: center; background-repeat: no-repeat; cursor: pointer; }

.container.map > .picture .mapFooter { position: absolute; right: 0px; bottom: 0px; background-color: white; padding: 1px 5px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16.8px; }

.container.map > .picture .mapFooter a { text-decoration: none; color: #0078A8; }

#osm { display: block; width: 100%; height: 370px; background-color: #fff; border: 0px; }

#mapModal.modal.modalContent { position: absolute; }

#mapModal.modal.modalContent .nowrap { white-space: nowrap; }

#mapModal.modal.modalContent p { font-size: 16px; }

#mapModal.modal.modalContent .buttonContainer { text-align: center; }

@media screen and (max-width: 992px) { #mapModal.modal.modalContent { position: fixed; } .container.map > .picture { position: inherit; } }

/*# sourceMappingURL=main.css.map */