merge

2024-01-10 18:14:52 +01:00 · 2024-01-10 18:14:52 +01:00 · 2aa129528f
parent c8d2ec645d 8583171b76
commit 2aa129528f
31 changed files with 4986 additions and 142 deletions
--- a/TIAMMobileApp/MauiProgram.cs
+++ b/TIAMMobileApp/MauiProgram.cs
@ -6,6 +6,7 @@ using System.Resources;
 using AyCode.Interfaces.StorageHandlers;
 using TIAMWebApp.Shared.Application.Utility;
 using TIAMWebApp.Shared.Application.Services;
+using BlazorAnimation;

 namespace TIAMMobileApp
 {
@ -55,6 +56,8 @@ namespace TIAMMobileApp
            builder.Services.AddScoped<IServiceProviderDataService, ServiceProviderDataService>();
            builder.Services.AddScoped<IWizardProcessor, WizardProcessor>();
            builder.Services.AddSingleton(x => new ResourceManager("TIAMWebApp.Shared.Application.Resources", typeof(Main).Assembly));
+
+            builder.Services.Configure<AnimationOptions>(Guid.NewGuid().ToString(), c => { });
            return builder.Build();
        }
    }
--- a/TIAMMobileApp/wwwroot/index.html
+++ b/TIAMMobileApp/wwwroot/index.html
@ -32,6 +32,7 @@
    </div>

    <script src="_framework/blazor.webview.js" autostart="false"></script>
+    <script src="_content/BlazorAnimation/blazorAnimationInterop.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

--- a/TIAMSharedUI/Pages/AppLaunch.razor
+++ b/TIAMSharedUI/Pages/AppLaunch.razor
@ -42,7 +42,7 @@ Loading....

        logToBrowserConsole = new LogToBrowserConsole(JSRuntime);
        //wait for 5 seconds
-        await Task.Delay(1000);                      
+        await Task.Delay(0001);                      
        
        if (!string.IsNullOrWhiteSpace(userDetailsStr))
        {
--- a/TIAMSharedUI/Pages/Components/AuthComponent.razor
+++ b/TIAMSharedUI/Pages/Components/AuthComponent.razor
@ -1,4 +1,5 @@
-
+@using TIAMSharedUI.Shared.Components
+

 <div style="position:fixed; background-color:black; color: white; bottom: 0px; width: 100%;">
    <p>AuthComponent: </p><p>Logged in: @IsLoggedIn</p>
--- a/TIAMSharedUI/Pages/Components/AuthComponent.razor.cs
+++ b/TIAMSharedUI/Pages/Components/AuthComponent.razor.cs
@ -4,6 +4,7 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using TIAMSharedUI.Shared.Components;
 using TIAMWebApp.Shared.Application.Interfaces;

 namespace TIAMSharedUI.Pages.Components
@ -16,10 +17,21 @@ namespace TIAMSharedUI.Pages.Components
        [Inject]
        public IComponentUpdateService componentUpdateService { get; set; }

+        [CascadingParameter]
+        private PopupMessageBox PopupMessageBox { get; set; } = default!;
+
        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();
            IsLoggedIn = sessionService.IsAuthenticated;
+            await PopupMessageBox.ShowAsync("AuthComponent", "Initialized", null, null, null, PopupMessageBox.ButtonOk);
+
+            if (await PopupMessageBox.Show("Cancel", "Cancel this stuff",
+        PopupMessageBox.ButtonNo, PopupMessageBox.ButtonYes) == PopupMessageBox.ButtonNo)
+            {
+                //Something is cancelled
+                //args.Cancel = true;
+            }
            componentUpdateService.CallRequestRefresh();
            StateHasChanged();
        }
--- a/TIAMSharedUI/Pages/Components/InputWizard.razor.cs
+++ b/TIAMSharedUI/Pages/Components/InputWizard.razor.cs
@ -342,12 +342,13 @@ namespace TIAMSharedUI.Pages.Components
                                    else if (property.PropertyType == typeof(string) && string.Compare(attrList.CustomDataType, "TransferDestination", true) == 0)
                                    {

-                                        editor.OpenComponent<SliderItemSelector>(j);                                        
+                                        editor.OpenComponent<SliderItemSelector>(j);    
+                                        editor.AddAttribute(j++, "OwlId", "owlSelector" + _stepID);
                                        editor.AddAttribute(j++, "OnSliderChanged", EventCallback.Factory.Create<string>(this, result =>
                                        {
                                            LogToBrowserConsole.LogToBC($"Slider changed to {result}");
                                            property.SetValue(Data, result);
-                                            LogToBrowserConsole.LogToBC($"Data.Destination = {property.GetValue(Data)}");
+                                            LogToBrowserConsole.LogToBC($"bleh: {property.Name} = {property.GetValue(Data)}");
                                            StateHasChanged(); // Add this line to refresh the UI
                                        }));

@ -357,7 +358,10 @@ namespace TIAMSharedUI.Pages.Components
                                        editor.AddAttribute(j++, "NullText", "Slide or type");
                                        editor.AddAttribute(j++, "Text", property.GetValue(Data));
                                        editor.AddAttribute(j++, "TextExpression", lambda);                                                                               
-                                        editor.AddAttribute(j++, "TextChanged", EventCallback.Factory.Create<string>(this, str => { property.SetValue(Data, str); }));
+                                        editor.AddAttribute(j++, "TextChanged", EventCallback.Factory.Create<string>(this, str => { 
+                                            property.SetValue(Data, str); 
+                                            LogToBrowserConsole.LogToBC($"bleh: {property.Name} = {property.GetValue(Data)}");
+                                        }));
                                        editor.CloseComponent();

                                    }
--- a/TIAMSharedUI/Pages/User/Admin.razor
+++ b/TIAMSharedUI/Pages/User/Admin.razor
@ -1,4 +1,4 @@
-@page "/admin"
+@page "/user/admin"
@using TIAMSharedUI.Shared
@using TIAMWebApp.Shared.Application.Models;
@using TIAMWebApp.Shared.Application.Interfaces;
@ -16,26 +16,26 @@
 <!--We need to check if the user is owner of a swerviceprovider-->

 <div class="container">
+
+
+    <!--App admin-->
+
    
-   
-            <!--App admin-->
-
-    <SysAdminComponent></SysAdminComponent>
-
-            <!-- App admin end-->
-
-            <hr/>
-
-    <HotelComponent></HotelComponent>
+        <SysAdminComponent></SysAdminComponent>
    

+    <!-- App admin end-->
+
+    <hr />
+
+
    <!-- Stats admin-->



    <div class="row py-3">
        <div class=" col-12 col-xl-3">
-            <div class="card card-admin" style="border-radius: 16px;">
+            <div class="card mycard card-admin" style="border-radius: 16px;">
                <div class="card-header py-2 px-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
@ -85,7 +85,7 @@
            </div>
        </div>
        <div class=" col-12 col-xl-3">
-            <div class="card card-admin" style="border-radius: 16px;">
+            <div class="card mycard card-admin" style="border-radius: 16px;">
                <div class="card-header py-2 px-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
@ -135,7 +135,7 @@
            </div>
        </div>
        <div class=" col-12 col-xl-3">
-            <div class="card card-admin" style="border-radius: 16px;">
+            <div class="card mycard card-admin" style="border-radius: 16px;">
                <div class="card-header py-2 px-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
@ -185,7 +185,6 @@
            </div>
        </div>
        <div class=" col-12 col-xl-3">
-
        </div>

    </div>
@ -195,8 +194,8 @@

@code {

-    
-    
+
+

    bool isUserLoggedIn;
    int userType = 0;
@ -206,11 +205,11 @@

    protected override async Task OnInitializedAsync()
    {
-        base.OnInitialized();                        
+        base.OnInitialized();
+
+

-              
-        
    }
-    
+
 }

--- a/TIAMSharedUI/Pages/User/HotelAdmin.razor
+++ b/TIAMSharedUI/Pages/User/HotelAdmin.razor
@ -0,0 +1,198 @@
+@page "/user/hoteladmin"
+@using TIAMSharedUI.Shared
+@using TIAMWebApp.Shared.Application.Models;
+@using TIAMWebApp.Shared.Application.Interfaces;
+@layout AdminLayout
+@inject IPopulationStructureDataProvider DataProvider
+@inject ISupplierService SupplierService
+@inject IUserDataService UserDataService
+<PageTitle>Transfer</PageTitle>
+
+<div class="text-center m-5">
+    <h1>Dashboard</h1>
+    <h2 style="font-size:small">Have a nice day!</h2>
+</div>
+
+<!--We need to check if the user is owner of a swerviceprovider-->
+
+<div class="container">
+
+    <HotelComponent Id="@Id"></HotelComponent>
+
+    <!-- Stats admin-->
+    <hr />
+
+
+    <div class="row py-3">
+        <div class=" col-12 col-xl-3">
+            <div class="card mycard card-admin" style="border-radius: 16px;">
+                <div class="card-header py-2 px-4">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <span class="fw-bold text-body">Panel title</span>
+                            <p class="text-muted mb-0">Subtitle</p>
+                        </div>
+                        <div>
+                            <h6 class="mb-0"> <a href="#">All details</a> </h6>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-body card-admin-body py-2 px-4">
+                    <div class="d-flex flex-row mb-4 pb-2">
+                        <div class="flex-fill">
+                            <h5 class="bold">Some info</h5>
+                            <p class="text-muted"> Budapest, Dózsa György út 35, 1146</p>
+                        </div>
+                        <div>
+                            <!--img class="align-self-center img-fluid"
+                            src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/6.webp" width="250"-->
+                        </div>
+
+                    </div>
+                    <ul id="progressbar-1" class="mx-0 mt-0 mb-5 px-0 pt-0 pb-4">
+                        <li class="step0 active" id="step1">
+                            <span style="margin-left: 22px; margin-top: 12px;">PLACED</span>
+                        </li>
+                        <li class="step0 active text-center" id="step2"><span>WAITING FOR PICK UP</span></li>
+                        <li class="step0 text-muted text-end" id="step3">
+                            <span style="margin-right: 22px;">FINISHED</span>
+                        </li>
+                    </ul>
+
+                    <div class="d-flex flex-row mb-4 pb-2">
+                        <h4> Some <span class="small text-muted"> conclusion </span></h4>
+                    </div>
+                </div>
+                <div class="card-footer py-2 px-4">
+                    <div class="d-flex justify-content-between">
+
+                        <a href="#!">Modify</a>
+                        <div class="border-start h-100"></div>
+
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class=" col-12 col-xl-3">
+            <div class="card mycard card-admin" style="border-radius: 16px;">
+                <div class="card-header py-2 px-4">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <span class="fw-bold text-body">Panel title</span>
+                            <p class="text-muted mb-0">Subtitle</p>
+                        </div>
+                        <div>
+                            <h6 class="mb-0"> <a href="#">All details</a> </h6>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-body card-admin-body py-2 px-4">
+                    <div class="d-flex flex-row mb-4 pb-2">
+                        <div class="flex-fill">
+                            <h5 class="bold">Some info</h5>
+                            <p class="text-muted"> Budapest, Dózsa György út 35, 1146</p>
+                        </div>
+                        <div>
+                            <!--img class="align-self-center img-fluid"
+                            src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/6.webp" width="250"-->
+                        </div>
+
+                    </div>
+                    <ul id="progressbar-1" class="mx-0 mt-0 mb-5 px-0 pt-0 pb-4">
+                        <li class="step0 active" id="step1">
+                            <span style="margin-left: 22px; margin-top: 12px;">PLACED</span>
+                        </li>
+                        <li class="step0 active text-center" id="step2"><span>WAITING FOR PICK UP</span></li>
+                        <li class="step0 text-muted text-end" id="step3">
+                            <span style="margin-right: 22px;">FINISHED</span>
+                        </li>
+                    </ul>
+
+                    <div class="d-flex flex-row mb-4 pb-2">
+                        <h4> Some <span class="small text-muted"> conclusion </span></h4>
+                    </div>
+                </div>
+                <div class="card-footer py-2 px-4">
+                    <div class="d-flex justify-content-between">
+
+                        <a href="#!">Modify</a>
+                        <div class="border-start h-100"></div>
+
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class=" col-12 col-xl-3">
+            <div class="card mycard card-admin" style="border-radius: 16px;">
+                <div class="card-header py-2 px-4">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <span class="fw-bold text-body">Panel title</span>
+                            <p class="text-muted mb-0">Subtitle</p>
+                        </div>
+                        <div>
+                            <h6 class="mb-0"> <a href="#">All details</a> </h6>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-body card-admin-body py-2 px-4">
+                    <div class="d-flex flex-row mb-4 pb-2">
+                        <div class="flex-fill">
+                            <h5 class="bold">Some info</h5>
+                            <p class="text-muted"> Budapest, Dózsa György út 35, 1146</p>
+                        </div>
+                        <div>
+                            <!--img class="align-self-center img-fluid"
+                            src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/6.webp" width="250"-->
+                        </div>
+
+                    </div>
+                    <ul id="progressbar-1" class="mx-0 mt-0 mb-5 px-0 pt-0 pb-4">
+                        <li class="step0 active" id="step1">
+                            <span style="margin-left: 22px; margin-top: 12px;">PLACED</span>
+                        </li>
+                        <li class="step0 active text-center" id="step2"><span>WAITING FOR PICK UP</span></li>
+                        <li class="step0 text-muted text-end" id="step3">
+                            <span style="margin-right: 22px;">FINISHED</span>
+                        </li>
+                    </ul>
+
+                    <div class="d-flex flex-row mb-4 pb-2">
+                        <h4> Some <span class="small text-muted"> conclusion </span></h4>
+                    </div>
+                </div>
+                <div class="card-footer py-2 px-4">
+                    <div class="d-flex justify-content-between">
+
+                        <a href="#!">Modify</a>
+                        <div class="border-start h-100"></div>
+
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class=" col-12 col-xl-3">
+
+        </div>
+
+    </div>
+
+</div>
+
+
+@code {
+    string Id = "2312-32132121-32123";
+    bool isUserLoggedIn;
+    int userType = 0;
+
+    protected override async Task OnInitializedAsync()
+    {
+        base.OnInitialized();                        
+
+    }
+    
+}
+
--- a/TIAMSharedUI/Pages/User/HotelAdmin.razor.cs
+++ b/TIAMSharedUI/Pages/User/HotelAdmin.razor.cs
@ -0,0 +1,12 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace TIAMSharedUI.Pages.User
+{
+    public partial class Home
+    {
+    }
+}
--- a/TIAMSharedUI/Pages/User/HotelComponent.razor
+++ b/TIAMSharedUI/Pages/User/HotelComponent.razor
@ -8,7 +8,7 @@
 <div class="row py-3">

    <div class=" col-12 col-xl-3">
-        <div class="card card-admin" style="border-radius: 16px;">
+        <div class="card mycard card-admin" style="border-radius: 16px;">
            <div class="card-header py-2 px-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
@ -51,7 +51,7 @@
        </div>
    </div>
    <div class=" col-12 col-xl-3">
-        <div class="card card-admin" style="border-radius: 16px;">
+        <div class="card mycard card-admin" style="border-radius: 16px;">
            <div class="card-header py-2 px-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
@ -100,7 +100,7 @@
        </div>
    </div>
    <div class=" col-12 col-xl-3">
-        <div class="card card-admin" style="border-radius: 16px;">
+        <div class="card mycard card-admin" style="border-radius: 16px;">
            <div class="card-header py-2 px-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
@ -129,7 +129,7 @@
    </div>

    <div class=" col-12 col-xl-3">
-        <div class="card card-admin" style="border-radius: 16px;">
+        <div class="card mycard card-admin" style="border-radius: 16px;">
            <div class="card-header py-2 px-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
@ -179,7 +179,7 @@
        </div>
    </div>
    <div class=" col-12">
-        <div class="card card-admin" style="border-radius: 16px;">
+        <div class="card mycard card-admin" style="border-radius: 16px;">
            <div class="card-header py-2 px-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
--- a/TIAMSharedUI/Pages/User/MyServiceProviders.razor
+++ b/TIAMSharedUI/Pages/User/MyServiceProviders.razor
@ -13,7 +13,7 @@
 <div class="container">
    <div class="row">        
        <div class=" col-12 col-xl-6">
-            <div class="card card-admin" style="border-radius: 16px;">
+            <div class="card mycard card-admin" style="border-radius: 16px;">
                <div class="card-header py-2 px-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
--- a/TIAMSharedUI/Pages/User/MyTransfers.razor
+++ b/TIAMSharedUI/Pages/User/MyTransfers.razor
@ -13,6 +13,10 @@
@inject IStringLocalizer<TIAMResources> localizer
 <PageTitle>Transfers</PageTitle>

+<div class="text-center m-5">
+    <h1>Transfer management</h1>
+    <h2 style="font-size:small">Manage transfers here!</h2>
+</div>

 <div class="container">
    <div class="row">        
--- a/TIAMSharedUI/Pages/User/PermissionsComponent.razor
+++ b/TIAMSharedUI/Pages/User/PermissionsComponent.razor
@ -0,0 +1,5 @@
+<h3>PermissionsComponent</h3>
+
+@code {
+
+}
--- a/TIAMSharedUI/Pages/User/ProfileComponent.razor
+++ b/TIAMSharedUI/Pages/User/ProfileComponent.razor
@ -0,0 +1,5 @@
+<h3>ProfileComponent</h3>
+
+@code {
+
+}
--- a/TIAMSharedUI/Pages/User/ServiceProvider.razor
+++ b/TIAMSharedUI/Pages/User/ServiceProvider.razor
@ -5,8 +5,14 @@
@layout AdminLayout
@inject NavigationManager navigationManager

+<div class="text-center m-5">
+    <h1>Service provider: @Id</h1>
+    <h2 style="font-size:small">Manage your service provider details</h2>
+</div>
+
 <div class="container">
-    <HotelComponent Id="@Id"></HotelComponent>
+    <ProfileComponent></ProfileComponent>
+    <PermissionsComponent></PermissionsComponent>
 </div>

@code {
--- a/TIAMSharedUI/Pages/User/SysAdminComponent.razor
+++ b/TIAMSharedUI/Pages/User/SysAdminComponent.razor
@ -1,4 +1,6 @@
-@using TIAMSharedUI.Shared
+
+@using BlazorAnimation
+@using TIAMSharedUI.Shared
@using TIAMWebApp.Shared.Application.Models;
@using TIAMWebApp.Shared.Application.Interfaces;

@ -6,44 +8,49 @@

 <div class="row py-3">
    <div class=" col-12 col-xl-3 col-lg-6">
-        <div class="card card-admin" style="border-radius: 16px;">
-            <div class="card-header py-2 px-4">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <span class="fw-bold text-body">Transfers</span>
-                        <p class="text-muted mb-0">Summary</p>
+        <Animation Effect="@Effect.FadeInUp" Speed="@Speed.Fast" Delay="@TimeSpan.FromMilliseconds(250)">
+            
+            <div class="card mycard card-admin" style="border-radius: 16px;">
+                <div class="card-header py-2 px-4">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <span class="fw-bold text-body">Transfers</span>
+                            <p class="text-muted mb-0">Summary</p>
+                        </div>
+                        <div>
+                            <h6 class="mb-0"> <a href="#">All details</a> </h6>
+                        </div>
                    </div>
-                    <div>
-                        <h6 class="mb-0"> <a href="#">All details</a> </h6>
+                </div>
+                <div class="card-body card-admin-body py-2 px-4">
+
+                    <h5>New</h5>
+                    <p>12</p>
+                    <h5>Scheduled</h5>
+                    <p>182</p>
+                    <h5>Finished</h5>
+                    <p>15665</p>
+
+                </div>
+
+
+
+                <div class="card-footer py-2 px-4">
+                    <div class="d-flex justify-content-between">
+
+                        <a href="#!">Manage transgfers</a>
+                        <div class="border-start h-100"></div>
+
+
                    </div>
                </div>
            </div>
-            <div class="card-body card-admin-body py-2 px-4">
-
-                <h5>New</h5>
-                <p>12</p>
-                <h5>Scheduled</h5>
-                <p>182</p>
-                <h5>Finished</h5>
-                <p>15665</p>
-
-            </div>
-
-
-
-            <div class="card-footer py-2 px-4">
-                <div class="d-flex justify-content-between">
-
-                    <a href="#!">Manage transgfers</a>
-                    <div class="border-start h-100"></div>
-
-
-                </div>
-            </div>
-        </div>
+        </Animation>
+       
    </div>
    <div class=" col-12 col-xl-3 col-lg-6">
-        <div class="card card-admin" style="border-radius: 16px;">
+        <Animation Effect="@Effect.FadeInUp" Speed="@Speed.Fast" Delay="@TimeSpan.FromMilliseconds(250)">
+        <div class="card mycard card-admin" style="border-radius: 16px;">
            <div class="card-header py-2 px-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
@ -77,9 +84,11 @@
                </div>
            </div>
        </div>
+        </Animation>
    </div>
    <div class=" col-12 col-xl-3 col-lg-6">
-        <div class="card card-admin" style="border-radius: 16px;">
+        <Animation Effect="@Effect.FadeInUp" Speed="@Speed.Fast" Delay="@TimeSpan.FromMilliseconds(250)">
+        <div class="card mycard card-admin" style="border-radius: 16px;">
            <div class="card-header py-2 px-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
@ -113,9 +122,11 @@
                </div>
            </div>
        </div>
+        </Animation>
    </div>
    <div class=" col-12 col-xl-3 col-lg-6">
-        <div class="card card-admin" style="border-radius: 16px;">
+        <Animation Effect="@Effect.FadeInUp" Speed="@Speed.Fast" Delay="@TimeSpan.FromMilliseconds(250)">
+        <div class="card mycard card-admin" style="border-radius: 16px;">
            <div class="card-header py-2 px-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
@ -151,9 +162,11 @@
                </div>
            </div>
        </div>
+        </Animation>
    </div>
    <div class="col-12 col-xl-6">
-        <div class="card card-admin" style="border-radius: 16px;">
+        <Animation Effect="@Effect.FadeInUp" Speed="@Speed.Fast" Delay="@TimeSpan.FromMilliseconds(250)">
+        <div class="card mycard card-admin" style="border-radius: 16px;">
            <div class="card-header py-2 px-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
@ -192,9 +205,11 @@
                </div>
            </div>
        </div>
+        </Animation>
    </div>
    <div class="col-12 col-xl-6">
-        <div class="card card-admin" style="border-radius: 16px;">
+        <Animation Effect="@Effect.FadeInUp" Speed="@Speed.Fast" Delay="@TimeSpan.FromMilliseconds(250)">
+        <div class="card mycard card-admin" style="border-radius: 16px;">
            <div class="card-header py-2 px-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
@ -266,10 +281,7 @@
                </div>
            </div>
        </div>
-
-
-
-
+        </Animation>

    </div>

--- a/TIAMSharedUI/Shared/Components/Navbar.razor
+++ b/TIAMSharedUI/Shared/Components/Navbar.razor
@ -53,23 +53,27 @@
                        </NavLink>
                    </li>
                }
-                @if(hasProperty)
+                else
                {
+                    @if (hasProperty)
+                    {
+                        <li class="nav-item">
+                            <NavLink class="nav-link" href="user/admin">
+                                @localizer.GetString("NavMenu.Admin")
+
+                            </NavLink>
+                        </li>
+                    }
                    <li class="nav-item">
-                        <NavLink class="nav-link" href="admin">
-                            @localizer.GetString("NavMenu.Admin")
-                            
-                        </NavLink>
+                        <div class="btn-nav">
+                            <NavLink class="btn btn-primary btn-small navbar-btn" href="#" @onclick="SignOut">
+                                @localizer.GetString("NavMenu.SignOut")
+                            </NavLink>
+                        </div>
+
                    </li>
                }
-                <li class="nav-item">
-                    <div class="btn-nav">
-                        <NavLink class="btn btn-primary btn-small navbar-btn" href="#" @onclick="SignOut">
-                            @localizer.GetString("NavMenu.SignOut")
-                        </NavLink>                        
-                    </div>
-
-                </li>
+                
            </ul>
                
        </div>
--- a/TIAMSharedUI/Shared/Components/PopupMessageBox.razor
+++ b/TIAMSharedUI/Shared/Components/PopupMessageBox.razor
@ -0,0 +1,31 @@
+<DxPopup @ref="MessageBoxPopup"
+         HeaderText="@HeaderText"
+         ShowFooter="true"
+         ShowCloseButton="true"
+         CloseOnEscape="true"
+         CloseOnOutsideClick="false"
+         Visible="false"
+         ZIndex="1000000"
+         Closed="@PopupClosed">
+    <BodyContentTemplate>
+        @(new MarkupString(@MessageHtml))
+    </BodyContentTemplate>
+    <FooterContentTemplate>
+        <DxButton RenderStyle="ButtonRenderStyle.Primary"
+                  Text="@(ButtonText[0])"
+                  Visible="@(ButtonVisible[0])"
+                  Click="@Button0Click" />
+        <DxButton RenderStyle="ButtonRenderStyle.Secondary"
+                  Text="@(ButtonText[1])"
+                  Visible="@(ButtonVisible[1])"
+                  Click="@Button1Click" />
+        <DxButton RenderStyle="ButtonRenderStyle.Secondary"
+                  Text="@(ButtonText[2])"
+                  Visible="@(ButtonVisible[2])"
+                  Click="@Button2Click" />
+        <DxButton RenderStyle="ButtonRenderStyle.Secondary"
+                  Text="@(ButtonText[3])"
+                  Visible="@(ButtonVisible[3])"
+                  Click="@Button3Click" />
+    </FooterContentTemplate>
+</DxPopup>
--- a/TIAMSharedUI/Shared/Components/PopupMessageBox.razor.cs
+++ b/TIAMSharedUI/Shared/Components/PopupMessageBox.razor.cs
@ -0,0 +1,187 @@
+using DevExpress.Blazor;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components;
+
+namespace TIAMSharedUI.Shared.Components
+{
+    /// <summary>
+    /// A MessageBox (async and synchronized) component to provide a way to show informational messages.
+    /// </summary>
+    public partial class PopupMessageBox
+    {
+
+        public static readonly string ButtonOk = "Ok";
+        public static readonly string ButtonCancel = "Cancel";
+        public static readonly string ButtonYes = "Yes";
+        public static readonly string ButtonNo = "No";
+
+        [Inject]
+        private NavigationManager Navigation { get; set; } = default!;
+
+        /// <summary>
+        /// The MessageBox popup. This is a DxPopup that is called asynchronously so it is displayed and control returns
+        /// to the caller.
+        /// </summary>
+        private DxPopup MessageBoxPopup { get; set; } = default!;
+
+        /// <summary>
+        /// The header text in the MessageBox popup. This is a MarkupString so do not put any user entered text in this!
+        /// </summary>
+        private string HeaderText { get; set; } = string.Empty;
+
+        /// <summary>
+        /// The message text in the MessageBox popup. This is a MarkupString so do not put any user entered text in this!
+        /// </summary>
+        private string MessageHtml { get; set; } = string.Empty;
+
+        private Func<string, object?, Task>? OnClick { get; set; }
+
+        private Func<object?, Task>? OnClose { get; set; }
+
+        /// <summary>
+        /// This is passed in in the call to Show() and returned in the calls to OnClick() and OnClose().
+        /// </summary>
+        private object? Tag { get; set; }
+
+        /// <summary>
+        /// Used to make the popup synchronous.
+        /// </summary>
+        private TaskCompletionSource<string> _taskCompletionSource = new();
+
+        /// <inheritdoc />
+        public PopupMessageBox()
+        {
+            ButtonVisible = new bool[4];
+            ButtonText = new string[4];
+        }
+
+        /// <summary>
+        /// Displays the MessageBox. This is a static object so you can't create multiple instances of it. But you
+        /// can create another instance in the onClick or onCLose calls as the existing instance will be closed by
+        /// then.
+        /// </summary>
+        /// <param name="header">The header text in the message box.</param>
+        /// <param name="message">The main message in the message box. This is treated as html
+        ///     so use <code>HttpUtility.HtmlEncode()</code> on any user generated text in the message.</param>
+        /// <param name="tag">Caller defined data returned in the OnClick/OnClose calls.</param>
+        /// <param name="onClick">Will call this method when a button is clicked. Passes the button text as the parameter.</param>
+        /// <param name="onClose">Will call this when the popup is closed. Including after receiving the onClick call.</param>
+        /// <param name="buttonText">The text for the button(s). Can be 1 .. 4 buttons.</param>
+        /// <returns>The task for the underlying DxPopup.ShowAsync() call.</returns>
+        public Task<bool> ShowAsync(string header, string message, object? tag, Func<string, object?, Task>? onClick,
+            Func<object?, Task>? onClose, params string[] buttonText)
+        {
+
+            HeaderText = header;
+            MessageHtml = message;
+            Tag = tag;
+            OnClick = onClick;
+            OnClose = onClose;
+
+            if (buttonText.Length == 0 || buttonText.Length > 4)
+                throw new ArgumentOutOfRangeException(nameof(buttonText), "Must have between 1 and 4 buttons");
+            Array.Clear(ButtonVisible);
+            Array.Clear(ButtonText);
+            for (var index = 0; index < buttonText.Length; index++)
+            {
+                ButtonVisible[index] = true;
+                ButtonText[index] = buttonText[index];
+            }
+
+            StateHasChanged();
+
+            return MessageBoxPopup.ShowAsync();
+        }
+
+        /// <summary>
+        /// Displays the MessageBox. Then when click OK, goes to the url. This is a static object so you can't create
+        /// multiple instances of it. 
+        /// </summary>
+        /// <param name="header">The header text in the message box.</param>
+        /// <param name="message">The main message in the message box. This is treated as html
+        /// so use <code>HttpUtility.HtmlEncode()</code> on any user generated text in the message.</param>
+        /// <param name="url">The url to navigate to when click OK.</param>
+        /// <returns>The task for the underlying DxPopup.ShowAsync() call.</returns>
+        public Task<bool> ShowThenRedirectAsync(string header, string message, string url)
+        {
+            return ShowAsync(header, message, null,
+                (_, _) =>
+                {
+                    Navigation.NavigateTo(url, false);
+                    return Task.CompletedTask;
+                },
+                null, PopupMessageBox.ButtonOk);
+        }
+
+        /// <summary>
+        /// Displays the MessageBox synchronously. Returns the text of the button clicked. This is a static object
+        /// so you can't create multiple instances of it. But you can create another instance when it returns as the
+        /// existing instance will be closed by then.
+        /// </summary>
+        /// <param name="header">The header text in the message box.</param>
+        /// <param name="message">The main message in the message box. This is treated as html
+        /// so use <code>HttpUtility.HtmlEncode()</code> on any user generated text in the message.</param>
+        /// <param name="buttonText">The text for the button(s). Can be 1 .. 4 buttons.</param>
+        /// <returns>The text of the button clicked.</returns>
+        public Task<string> Show(string header, string message, params string[] buttonText)
+        {
+            _taskCompletionSource = new TaskCompletionSource<string>();
+
+            ShowAsync(header, message, null, ShowOnClick, null, buttonText);
+
+            // we return the Task from the TaskCompletionSource that is not completed
+            return _taskCompletionSource.Task;
+        }
+
+        private Task ShowOnClick(string buttonText, object? tag)
+        {
+            // as this is called from the OnClick handler, the popup has been closed.
+
+            // sets the TaskCompletionSource to completed.  Any await-ers will now complete
+            _taskCompletionSource.SetResult(buttonText);
+            return Task.FromResult(_taskCompletionSource);
+        }
+
+        private string[] ButtonText { get; }
+
+        private bool[] ButtonVisible { get; }
+
+        private async Task Button0Click(MouseEventArgs arg)
+        {
+            // need to close before calling OnClick because OnClick may call ShowAsync again
+            await MessageBoxPopup.CloseAsync();
+            if (OnClick != null)
+                await OnClick.Invoke(ButtonText[0], Tag);
+        }
+
+        private async Task Button1Click(MouseEventArgs arg)
+        {
+            // need to close before calling OnClick because OnClick may call ShowAsync again
+            await MessageBoxPopup.CloseAsync();
+            if (OnClick != null)
+                await OnClick.Invoke(ButtonText[1], Tag);
+        }
+        private async Task Button2Click(MouseEventArgs arg)
+        {
+            // need to close before calling OnClick because OnClick may call ShowAsync again
+            await MessageBoxPopup.CloseAsync();
+            if (OnClick != null)
+                await OnClick.Invoke(ButtonText[2], Tag);
+        }
+        private async Task Button3Click(MouseEventArgs arg)
+        {
+            // need to close before calling OnClick because OnClick may call ShowAsync again
+            await MessageBoxPopup.CloseAsync();
+            if (OnClick != null)
+                await OnClick.Invoke(ButtonText[3], Tag);
+        }
+
+        private async Task PopupClosed(PopupClosedEventArgs arg)
+        {
+            // need to close before calling OnClose because OnClose may call ShowAsync again
+            await MessageBoxPopup.CloseAsync();
+            if (OnClose != null)
+                await OnClose.Invoke(Tag);
+        }
+    }
+}
--- a/TIAMSharedUI/Shared/MainLayout.razor
+++ b/TIAMSharedUI/Shared/MainLayout.razor
@ -24,17 +24,20 @@
  
    <main>
        <article class="content">
-       
-            
-            @Body
+            <CascadingValue Value=PopupMessageBox>
+                @Body
+            </CascadingValue>
        </article>
    </main>
    <div class="footer">
    </div>
+
+    <PopupMessageBox @ref="PopupMessageBox" />
+
 </div>


@code {

-   
+    public PopupMessageBox PopupMessageBox { get; private set; } = default!;
 }
--- a/TIAMSharedUI/Shared/NavMenu.razor
+++ b/TIAMSharedUI/Shared/NavMenu.razor
@ -35,8 +35,7 @@
            <NavLink class="nav-link" href="counter">
                Counter
            </NavLink>
-        </div-->
-        
+        </div-->                

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="transfer">
@ -69,7 +68,7 @@

@code {
    private bool collapseNavMenu = true;
-
+    
    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
--- a/TIAMSharedUI/Shared/SliderItemSelector.razor
+++ b/TIAMSharedUI/Shared/SliderItemSelector.razor
@ -14,9 +14,20 @@
        
        border-bottom: 1px solid;
    }
-</style>

-<input type="hidden" id="PassingToJavaScript1" value=@OwlId>
+    #@OwlId .item {
+        height: 30vh;
+        overflow-y: hidden;
+        vertical-align: middle;
+        align-content: center;
+    }
+
+        #@OwlId .item img {
+            display: block;
+            width: 100%;
+            height: auto;
+        }
+</style>


 <div id=@OwlId class="owl-carousel owl-theme">
@ -41,19 +52,15 @@
        </div>
    </div>
 </div>
-<h3>Please type an address or swipe to select from preset destinations!</h3>
+<p>Please type an address or swipe to select from preset destinations!</p>
+

-@{
-    var jsOwlId = OwlId;
-    logToBrowserConsole.LogToBC(jsOwlId);
-}


 <script>
+    var JsOwlId;    
    
-    var owlId = p1;
-    console.log('OwlId is ' + owlId);
-    var owl = $('#' + owlId);
+    //var owl = $('#' + JsOwlId);
    var i = 0;


@ -71,7 +78,7 @@

    };*/

-    $(document).ready(function () {
+    /*$(document).ready(function () {


        owl.owlCarousel({
@ -89,7 +96,26 @@

        owl.trigger("to.owl.carousel", owl.maximum)

-    });
+    });*/
+
+    function InitOwl(id) {
+        JsOwlId= id;
+        owl = $('#' + JsOwlId);
+        owl.owlCarousel({
+
+            navigation: true, // Show next and prev buttons
+            loop: true,
+            slideSpeed: 300,
+            paginationSpeed: 400,
+            items: 1,
+            itemsDesktop: false,
+            itemsDesktopSmall: false,
+            itemsTablet: false,
+            itemsMobile: false
+        });
+
+        owl.trigger("to.owl.carousel", owl.maximum)
+    };

    function CStoJSCall(dotNetObjRef) {
        
@ -113,6 +139,11 @@
        objRef.invokeMethodAsync("ShowCoordinates", "Hugrabug" + i, itemId);
        i++;
    };
+
+    function setOwlId(id) {
+        JsOwlId = id;
+        console.log('SetOwlId called, value is ' + owlId);        
+    };
        
 </script>

@ -136,6 +167,7 @@
    protected override void OnParametersSet()
    {
        logToBrowserConsole.LogToBC($"SliderItemSelector is initialized with OwlId: {OwlId}");
+        
        base.OnParametersSet();
    }

@ -144,6 +176,8 @@
        if(firstRender)
        {
            var dotNetObjRef = DotNetObjectReference.Create(this);
+            JSRuntime.InvokeVoidAsync("setOwlId", OwlId);
+            JSRuntime.InvokeVoidAsync("InitOwl", OwlId);
            JSRuntime.InvokeVoidAsync("CStoJSCall", dotNetObjRef);

        }
--- a/TIAMSharedUI/Shared/SliderItemSelector.razor.css
+++ b/TIAMSharedUI/Shared/SliderItemSelector.razor.css
@ -1,12 +1 @@
-#owl-selector .item {
-    height: 30vh;
-    overflow-y: hidden;
-    vertical-align: middle;
-    align-content: center;       
-}
-
-    #owl-selector .item img {
-        display: block;
-        width: 100%;
-        height: auto;
-    }
+
--- a/TIAMSharedUI/Shared/Users/AdminNavMenu.razor
+++ b/TIAMSharedUI/Shared/Users/AdminNavMenu.razor
@ -29,41 +29,78 @@
                Home
            </NavLink>
        </div>
+        
+
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="user/properties">
                Properties
            </NavLink>
        </div>
+
        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="user/transfers">
-                Transfers
+            <NavLink class="nav-link" @onclick="()=>expandSysAdminNav = !expandSysAdminNav">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> System Admin
            </NavLink>
        </div>
+        @if (expandSysAdminNav)
+        {
+            <hr />
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="user/admin">
+                    Dashboard
+                </NavLink>
+            </div>
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="user/transfers">
+                    Transfers
+                </NavLink>
+            </div>
+            
+            <hr />
+        }
+
        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="serviceprovider">
-                My profile
+            <NavLink class="nav-link" @onclick="()=>expandHotelAdminNav = !expandHotelAdminNav">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> Hotel Admin
            </NavLink>
        </div>
+        @if (expandHotelAdminNav)
+        {
+            <hr />
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="user/hoteladmin">
+                    Hotel Dashboard
+                </NavLink>
+            </div>
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="user/serviceprovider">
+                    Manage
+                </NavLink>
+            </div>
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="serviceprovider">
+                    Public profile
+                </NavLink>
+            </div>
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="counter">
+                    My earnings
+                </NavLink>
+            </div>
+            <hr />
+        }
+
+
+        
+        
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="account">
                Account
            </NavLink>
        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="services">
-                My services
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                My earnings
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="settings">
-                Settings
-            </NavLink>
-        </div>
+        
+        
+        
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="#" @onclick="SignOut">
                Signout
@ -74,7 +111,8 @@

@code {
    private bool collapseNavMenu = true;
-
+    private bool expandSysAdminNav = false;
+    private bool expandHotelAdminNav = false;
    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
--- a/TIAMSharedUI/TIAMSharedUI.csproj
+++ b/TIAMSharedUI/TIAMSharedUI.csproj
@ -12,7 +12,9 @@
  </ItemGroup>

  <ItemGroup>
-    <PackageReference Include="DevExpress.Blazor" Version="23.2.3" />
+    <PackageReference Include="Blazor.AnimateOnScroll" Version="1.1.0" />
+    <PackageReference Include="BlazorAnimation" Version="2.2.0" />
+    <PackageReference Include="DevExpress.Blazor" Version="23.1.3" />
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
    <PackageReference Include="Microsoft.Extensions.Localization" Version="8.0.0" />
  </ItemGroup>
--- a/TIAMSharedUI/wwwroot/blazorAnimationInterop.js
+++ b/TIAMSharedUI/wwwroot/blazorAnimationInterop.js
@ -0,0 +1,12 @@
+document.getElementsByTagName("head")[0].insertAdjacentHTML(
+    "beforeend",
+    "<link rel=\"stylesheet\" href=\"_content/BlazorAnimation/animate.css\" />");
+
+
+
+var AnimatedComponent = AnimatedComponent || {};
+AnimatedComponent.animationend = function (element, dotNet) {
+    element.addEventListener('animationend', function(e) {
+        if(e.target === this)dotNet.invokeMethodAsync("OnAnimationEnd") 
+    });
+};
--- a/TIAMSharedUI/wwwroot/css/TourIAm.css
+++ b/TIAMSharedUI/wwwroot/css/TourIAm.css
@ -7,6 +7,10 @@ body {
    max-width: 100%;
    overflow-x: hidden;
    background-color: #e7e6f7;
+    background: url('https://images.unsplash.com/photo-1641326038434-01b0217c18f1?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+    background-attachment: fixed;
+    background-position: center;
+    background-size: cover;
    color: #58457b;
 }

@ -57,19 +61,42 @@ select {
    border-radius: 16px;
    /*box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;*/
    overflow: hidden;
-    background-color: #d8dcef;
+    background-color: rgba( 255, 255, 255, 0.15 );
+    /*color: #58457b;*/
+    font-size: small;
+}
+
+.mycard {
+border-radius: 16px;
+    /*box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;*/
+    overflow: hidden;
+    background: rgba( 255, 255, 255, 0.45 );
+    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+    backdrop-filter: blur( 6px );
+    -webkit-backdrop-filter: blur( 6px );
+    border-radius: 10px;
+    border: 1px solid rgba( 255, 255, 255, 0.18 );
    /*color: #58457b;*/
    font-size: small;
 }

    .card .card-body {
        padding: 10px;
+
    }


 /*My overrides end*/

 /*my blazor overrides*/
+.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content {
+    background: rgba( 255, 255, 255, 0.45 );
+    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+    backdrop-filter: blur( 6px );
+    -webkit-backdrop-filter: blur( 6px );
+    border-radius: 10px;
+    border: 1px solid rgba( 255, 255, 255, 0.18 );
+}

 .dxbl-col {
    padding-left:0px;
@ -81,7 +108,7 @@ select {
    --dxbl-grid-font-size: 0.75rem !important;
    --dxbl-grid-line-height: 1.3 !important;
    --dxbl-grid-min-width: 240px;
-    --dxbl-grid-bg: #e7e6f7;
+    --dxbl-grid-bg: #ffffff;
    --dxbl-grid-color: #58457b;
    color: darkslategrey !important;
 }
--- a/TIAMSharedUI/wwwroot/css/animate.css
+++ b/TIAMSharedUI/wwwroot/css/animate.css
@ -0,0 +1,4250 @@
+
+@charset "UTF-8";
+/*!
+ * animate.css - https://animate.style/
+ * Version - 4.0.0
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2020 Animate.css
+ */
+:root {
+	--animate-duration: 1s;
+	--animate-delay: 1s;
+	--animate-repeat: 1;
+}
+
+.animate__animated {
+	-webkit-animation-duration: 1s;
+	animation-duration: 1s;
+	-webkit-animation-duration: var(--animate-duration);
+	animation-duration: var(--animate-duration);
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both;
+}
+
+	.animate__animated.animate__infinite {
+		-webkit-animation-iteration-count: infinite;
+		animation-iteration-count: infinite;
+	}
+
+	.animate__animated.animate__repeat-1 {
+		-webkit-animation-iteration-count: 1;
+		animation-iteration-count: 1;
+		-webkit-animation-iteration-count: var(--animate-repeat);
+		animation-iteration-count: var(--animate-repeat);
+	}
+
+	.animate__animated.animate__repeat-2 {
+		-webkit-animation-iteration-count: calc(1 * 2);
+		animation-iteration-count: calc(1 * 2);
+		-webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
+		animation-iteration-count: calc(var(--animate-repeat) * 2);
+	}
+
+	.animate__animated.animate__repeat-3 {
+		-webkit-animation-iteration-count: calc(1 * 3);
+		animation-iteration-count: calc(1 * 3);
+		-webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
+		animation-iteration-count: calc(var(--animate-repeat) * 3);
+	}
+
+	.animate__animated.animate__delay-1s {
+		-webkit-animation-delay: 1s;
+		animation-delay: 1s;
+		-webkit-animation-delay: var(--animate-delay);
+		animation-delay: var(--animate-delay);
+	}
+
+	.animate__animated.animate__delay-2s {
+		-webkit-animation-delay: calc(1s * 2);
+		animation-delay: calc(1s * 2);
+		-webkit-animation-delay: calc(var(--animate-delay) * 2);
+		animation-delay: calc(var(--animate-delay) * 2);
+	}
+
+	.animate__animated.animate__delay-3s {
+		-webkit-animation-delay: calc(1s * 3);
+		animation-delay: calc(1s * 3);
+		-webkit-animation-delay: calc(var(--animate-delay) * 3);
+		animation-delay: calc(var(--animate-delay) * 3);
+	}
+
+	.animate__animated.animate__delay-4s {
+		-webkit-animation-delay: calc(1s * 4);
+		animation-delay: calc(1s * 4);
+		-webkit-animation-delay: calc(var(--animate-delay) * 4);
+		animation-delay: calc(var(--animate-delay) * 4);
+	}
+
+	.animate__animated.animate__delay-5s {
+		-webkit-animation-delay: calc(1s * 5);
+		animation-delay: calc(1s * 5);
+		-webkit-animation-delay: calc(var(--animate-delay) * 5);
+		animation-delay: calc(var(--animate-delay) * 5);
+	}
+
+	.animate__animated.animate__faster {
+		-webkit-animation-duration: calc(1s / 2);
+		animation-duration: calc(1s / 2);
+		-webkit-animation-duration: calc(var(--animate-duration) / 2);
+		animation-duration: calc(var(--animate-duration) / 2);
+	}
+
+	.animate__animated.animate__fast {
+		-webkit-animation-duration: calc(1s * 0.8);
+		animation-duration: calc(1s * 0.8);
+		-webkit-animation-duration: calc(var(--animate-duration) * 0.8);
+		animation-duration: calc(var(--animate-duration) * 0.8);
+	}
+
+	.animate__animated.animate__slow {
+		-webkit-animation-duration: calc(1s * 2);
+		animation-duration: calc(1s * 2);
+		-webkit-animation-duration: calc(var(--animate-duration) * 2);
+		animation-duration: calc(var(--animate-duration) * 2);
+	}
+
+	.animate__animated.animate__slower {
+		-webkit-animation-duration: calc(1s * 3);
+		animation-duration: calc(1s * 3);
+		-webkit-animation-duration: calc(var(--animate-duration) * 3);
+		animation-duration: calc(var(--animate-duration) * 3);
+	}
+
+@media print, (prefers-reduced-motion: reduce) {
+	.animate__animated {
+		-webkit-animation-duration: 1ms !important;
+		animation-duration: 1ms !important;
+		-webkit-transition-duration: 1ms !important;
+		transition-duration: 1ms !important;
+		-webkit-animation-iteration-count: 1 !important;
+		animation-iteration-count: 1 !important;
+	}
+
+		.animate__animated[class*='Out'] {
+			opacity: 0;
+		}
+}
+/* Attention seekers  */
+@-webkit-keyframes bounce {
+	from, 20%, 53%, to {
+		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	40%, 43% {
+		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+		-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
+		transform: translate3d(0, -30px, 0) scaleY(1.1);
+	}
+
+	70% {
+		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+		-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
+		transform: translate3d(0, -15px, 0) scaleY(1.05);
+	}
+
+	80% {
+		-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		-webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
+		transform: translate3d(0, 0, 0) scaleY(0.95);
+	}
+
+	90% {
+		-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
+		transform: translate3d(0, -4px, 0) scaleY(1.02);
+	}
+}
+
+@keyframes bounce {
+	from, 20%, 53%, to {
+		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	40%, 43% {
+		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+		-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
+		transform: translate3d(0, -30px, 0) scaleY(1.1);
+	}
+
+	70% {
+		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+		-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
+		transform: translate3d(0, -15px, 0) scaleY(1.05);
+	}
+
+	80% {
+		-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		-webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
+		transform: translate3d(0, 0, 0) scaleY(0.95);
+	}
+
+	90% {
+		-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
+		transform: translate3d(0, -4px, 0) scaleY(1.02);
+	}
+}
+
+.animate__bounce {
+	-webkit-animation-name: bounce;
+	animation-name: bounce;
+	-webkit-transform-origin: center bottom;
+	transform-origin: center bottom;
+}
+
+@-webkit-keyframes flash {
+	from, 50%, to {
+		opacity: 1;
+	}
+
+	25%, 75% {
+		opacity: 0;
+	}
+}
+
+@keyframes flash {
+	from, 50%, to {
+		opacity: 1;
+	}
+
+	25%, 75% {
+		opacity: 0;
+	}
+}
+
+.animate__flash {
+	-webkit-animation-name: flash;
+	animation-name: flash;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+@-webkit-keyframes pulse {
+	from {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+
+	50% {
+		-webkit-transform: scale3d(1.05, 1.05, 1.05);
+		transform: scale3d(1.05, 1.05, 1.05);
+	}
+
+	to {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+@keyframes pulse {
+	from {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+
+	50% {
+		-webkit-transform: scale3d(1.05, 1.05, 1.05);
+		transform: scale3d(1.05, 1.05, 1.05);
+	}
+
+	to {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+.animate__pulse {
+	-webkit-animation-name: pulse;
+	animation-name: pulse;
+	-webkit-animation-timing-function: ease-in-out;
+	animation-timing-function: ease-in-out;
+}
+
+@-webkit-keyframes rubberBand {
+	from {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+
+	30% {
+		-webkit-transform: scale3d(1.25, 0.75, 1);
+		transform: scale3d(1.25, 0.75, 1);
+	}
+
+	40% {
+		-webkit-transform: scale3d(0.75, 1.25, 1);
+		transform: scale3d(0.75, 1.25, 1);
+	}
+
+	50% {
+		-webkit-transform: scale3d(1.15, 0.85, 1);
+		transform: scale3d(1.15, 0.85, 1);
+	}
+
+	65% {
+		-webkit-transform: scale3d(0.95, 1.05, 1);
+		transform: scale3d(0.95, 1.05, 1);
+	}
+
+	75% {
+		-webkit-transform: scale3d(1.05, 0.95, 1);
+		transform: scale3d(1.05, 0.95, 1);
+	}
+
+	to {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+@keyframes rubberBand {
+	from {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+
+	30% {
+		-webkit-transform: scale3d(1.25, 0.75, 1);
+		transform: scale3d(1.25, 0.75, 1);
+	}
+
+	40% {
+		-webkit-transform: scale3d(0.75, 1.25, 1);
+		transform: scale3d(0.75, 1.25, 1);
+	}
+
+	50% {
+		-webkit-transform: scale3d(1.15, 0.85, 1);
+		transform: scale3d(1.15, 0.85, 1);
+	}
+
+	65% {
+		-webkit-transform: scale3d(0.95, 1.05, 1);
+		transform: scale3d(0.95, 1.05, 1);
+	}
+
+	75% {
+		-webkit-transform: scale3d(1.05, 0.95, 1);
+		transform: scale3d(1.05, 0.95, 1);
+	}
+
+	to {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+.animate__rubberBand {
+	-webkit-animation-name: rubberBand;
+	animation-name: rubberBand;
+}
+
+@-webkit-keyframes shakeX {
+	from, to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	10%, 30%, 50%, 70%, 90% {
+		-webkit-transform: translate3d(-10px, 0, 0);
+		transform: translate3d(-10px, 0, 0);
+	}
+
+	20%, 40%, 60%, 80% {
+		-webkit-transform: translate3d(10px, 0, 0);
+		transform: translate3d(10px, 0, 0);
+	}
+}
+
+@keyframes shakeX {
+	from, to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	10%, 30%, 50%, 70%, 90% {
+		-webkit-transform: translate3d(-10px, 0, 0);
+		transform: translate3d(-10px, 0, 0);
+	}
+
+	20%, 40%, 60%, 80% {
+		-webkit-transform: translate3d(10px, 0, 0);
+		transform: translate3d(10px, 0, 0);
+	}
+}
+
+.animate__shakeX {
+	-webkit-animation-name: shakeX;
+	animation-name: shakeX;
+}
+
+@-webkit-keyframes shakeY {
+	from, to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	10%, 30%, 50%, 70%, 90% {
+		-webkit-transform: translate3d(0, -10px, 0);
+		transform: translate3d(0, -10px, 0);
+	}
+
+	20%, 40%, 60%, 80% {
+		-webkit-transform: translate3d(0, 10px, 0);
+		transform: translate3d(0, 10px, 0);
+	}
+}
+
+@keyframes shakeY {
+	from, to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	10%, 30%, 50%, 70%, 90% {
+		-webkit-transform: translate3d(0, -10px, 0);
+		transform: translate3d(0, -10px, 0);
+	}
+
+	20%, 40%, 60%, 80% {
+		-webkit-transform: translate3d(0, 10px, 0);
+		transform: translate3d(0, 10px, 0);
+	}
+}
+
+.animate__shakeY {
+	-webkit-animation-name: shakeY;
+	animation-name: shakeY;
+}
+
+@-webkit-keyframes headShake {
+	0% {
+		-webkit-transform: translateX(0);
+		transform: translateX(0);
+	}
+
+	6.5% {
+		-webkit-transform: translateX(-6px) rotateY(-9deg);
+		transform: translateX(-6px) rotateY(-9deg);
+	}
+
+	18.5% {
+		-webkit-transform: translateX(5px) rotateY(7deg);
+		transform: translateX(5px) rotateY(7deg);
+	}
+
+	31.5% {
+		-webkit-transform: translateX(-3px) rotateY(-5deg);
+		transform: translateX(-3px) rotateY(-5deg);
+	}
+
+	43.5% {
+		-webkit-transform: translateX(2px) rotateY(3deg);
+		transform: translateX(2px) rotateY(3deg);
+	}
+
+	50% {
+		-webkit-transform: translateX(0);
+		transform: translateX(0);
+	}
+}
+
+@keyframes headShake {
+	0% {
+		-webkit-transform: translateX(0);
+		transform: translateX(0);
+	}
+
+	6.5% {
+		-webkit-transform: translateX(-6px) rotateY(-9deg);
+		transform: translateX(-6px) rotateY(-9deg);
+	}
+
+	18.5% {
+		-webkit-transform: translateX(5px) rotateY(7deg);
+		transform: translateX(5px) rotateY(7deg);
+	}
+
+	31.5% {
+		-webkit-transform: translateX(-3px) rotateY(-5deg);
+		transform: translateX(-3px) rotateY(-5deg);
+	}
+
+	43.5% {
+		-webkit-transform: translateX(2px) rotateY(3deg);
+		transform: translateX(2px) rotateY(3deg);
+	}
+
+	50% {
+		-webkit-transform: translateX(0);
+		transform: translateX(0);
+	}
+}
+
+.animate__headShake {
+	-webkit-animation-timing-function: ease-in-out;
+	animation-timing-function: ease-in-out;
+	-webkit-animation-name: headShake;
+	animation-name: headShake;
+}
+
+@-webkit-keyframes swing {
+	20% {
+		-webkit-transform: rotate3d(0, 0, 1, 15deg);
+		transform: rotate3d(0, 0, 1, 15deg);
+	}
+
+	40% {
+		-webkit-transform: rotate3d(0, 0, 1, -10deg);
+		transform: rotate3d(0, 0, 1, -10deg);
+	}
+
+	60% {
+		-webkit-transform: rotate3d(0, 0, 1, 5deg);
+		transform: rotate3d(0, 0, 1, 5deg);
+	}
+
+	80% {
+		-webkit-transform: rotate3d(0, 0, 1, -5deg);
+		transform: rotate3d(0, 0, 1, -5deg);
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, 0deg);
+		transform: rotate3d(0, 0, 1, 0deg);
+	}
+}
+
+@keyframes swing {
+	20% {
+		-webkit-transform: rotate3d(0, 0, 1, 15deg);
+		transform: rotate3d(0, 0, 1, 15deg);
+	}
+
+	40% {
+		-webkit-transform: rotate3d(0, 0, 1, -10deg);
+		transform: rotate3d(0, 0, 1, -10deg);
+	}
+
+	60% {
+		-webkit-transform: rotate3d(0, 0, 1, 5deg);
+		transform: rotate3d(0, 0, 1, 5deg);
+	}
+
+	80% {
+		-webkit-transform: rotate3d(0, 0, 1, -5deg);
+		transform: rotate3d(0, 0, 1, -5deg);
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, 0deg);
+		transform: rotate3d(0, 0, 1, 0deg);
+	}
+}
+
+.animate__swing {
+	-webkit-transform-origin: top center;
+	transform-origin: top center;
+	-webkit-animation-name: swing;
+	animation-name: swing;
+}
+
+@-webkit-keyframes tada {
+	from {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+
+	10%, 20% {
+		-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+	}
+
+	30%, 50%, 70%, 90% {
+		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+	}
+
+	40%, 60%, 80% {
+		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+	}
+
+	to {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+@keyframes tada {
+	from {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+
+	10%, 20% {
+		-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+	}
+
+	30%, 50%, 70%, 90% {
+		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+	}
+
+	40%, 60%, 80% {
+		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+	}
+
+	to {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+.animate__tada {
+	-webkit-animation-name: tada;
+	animation-name: tada;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+@-webkit-keyframes wobble {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	15% {
+		-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+	}
+
+	30% {
+		-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+	}
+
+	45% {
+		-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+	}
+
+	60% {
+		-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+	}
+
+	75% {
+		-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes wobble {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	15% {
+		-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+	}
+
+	30% {
+		-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+	}
+
+	45% {
+		-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+	}
+
+	60% {
+		-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+	}
+
+	75% {
+		-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__wobble {
+	-webkit-animation-name: wobble;
+	animation-name: wobble;
+}
+
+@-webkit-keyframes jello {
+	from, 11.1%, to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	22.2% {
+		-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+		transform: skewX(-12.5deg) skewY(-12.5deg);
+	}
+
+	33.3% {
+		-webkit-transform: skewX(6.25deg) skewY(6.25deg);
+		transform: skewX(6.25deg) skewY(6.25deg);
+	}
+
+	44.4% {
+		-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+		transform: skewX(-3.125deg) skewY(-3.125deg);
+	}
+
+	55.5% {
+		-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+		transform: skewX(1.5625deg) skewY(1.5625deg);
+	}
+
+	66.6% {
+		-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+		transform: skewX(-0.78125deg) skewY(-0.78125deg);
+	}
+
+	77.7% {
+		-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+		transform: skewX(0.390625deg) skewY(0.390625deg);
+	}
+
+	88.8% {
+		-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+		transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+	}
+}
+
+@keyframes jello {
+	from, 11.1%, to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	22.2% {
+		-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+		transform: skewX(-12.5deg) skewY(-12.5deg);
+	}
+
+	33.3% {
+		-webkit-transform: skewX(6.25deg) skewY(6.25deg);
+		transform: skewX(6.25deg) skewY(6.25deg);
+	}
+
+	44.4% {
+		-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+		transform: skewX(-3.125deg) skewY(-3.125deg);
+	}
+
+	55.5% {
+		-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+		transform: skewX(1.5625deg) skewY(1.5625deg);
+	}
+
+	66.6% {
+		-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+		transform: skewX(-0.78125deg) skewY(-0.78125deg);
+	}
+
+	77.7% {
+		-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+		transform: skewX(0.390625deg) skewY(0.390625deg);
+	}
+
+	88.8% {
+		-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+		transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+	}
+}
+
+.animate__jello {
+	-webkit-animation-name: jello;
+	animation-name: jello;
+	-webkit-transform-origin: center;
+	transform-origin: center;
+}
+
+@-webkit-keyframes heartBeat {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+
+	14% {
+		-webkit-transform: scale(1.3);
+		transform: scale(1.3);
+	}
+
+	28% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+
+	42% {
+		-webkit-transform: scale(1.3);
+		transform: scale(1.3);
+	}
+
+	70% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+}
+
+@keyframes heartBeat {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+
+	14% {
+		-webkit-transform: scale(1.3);
+		transform: scale(1.3);
+	}
+
+	28% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+
+	42% {
+		-webkit-transform: scale(1.3);
+		transform: scale(1.3);
+	}
+
+	70% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+}
+
+.animate__heartBeat {
+	-webkit-animation-name: heartBeat;
+	animation-name: heartBeat;
+	-webkit-animation-duration: calc(1s * 1.3);
+	animation-duration: calc(1s * 1.3);
+	-webkit-animation-duration: calc(var(--animate-duration) * 1.3);
+	animation-duration: calc(var(--animate-duration) * 1.3);
+	-webkit-animation-timing-function: ease-in-out;
+	animation-timing-function: ease-in-out;
+}
+/* Back entrances */
+@-webkit-keyframes backInDown {
+	0% {
+		-webkit-transform: translateY(-1200px) scale(0.7);
+		transform: translateY(-1200px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	80% {
+		-webkit-transform: translateY(0px) scale(0.7);
+		transform: translateY(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+@keyframes backInDown {
+	0% {
+		-webkit-transform: translateY(-1200px) scale(0.7);
+		transform: translateY(-1200px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	80% {
+		-webkit-transform: translateY(0px) scale(0.7);
+		transform: translateY(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+.animate__backInDown {
+	-webkit-animation-name: backInDown;
+	animation-name: backInDown;
+}
+
+@-webkit-keyframes backInLeft {
+	0% {
+		-webkit-transform: translateX(-2000px) scale(0.7);
+		transform: translateX(-2000px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	80% {
+		-webkit-transform: translateX(0px) scale(0.7);
+		transform: translateX(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+@keyframes backInLeft {
+	0% {
+		-webkit-transform: translateX(-2000px) scale(0.7);
+		transform: translateX(-2000px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	80% {
+		-webkit-transform: translateX(0px) scale(0.7);
+		transform: translateX(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+.animate__backInLeft {
+	-webkit-animation-name: backInLeft;
+	animation-name: backInLeft;
+}
+
+@-webkit-keyframes backInRight {
+	0% {
+		-webkit-transform: translateX(2000px) scale(0.7);
+		transform: translateX(2000px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	80% {
+		-webkit-transform: translateX(0px) scale(0.7);
+		transform: translateX(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+@keyframes backInRight {
+	0% {
+		-webkit-transform: translateX(2000px) scale(0.7);
+		transform: translateX(2000px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	80% {
+		-webkit-transform: translateX(0px) scale(0.7);
+		transform: translateX(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+.animate__backInRight {
+	-webkit-animation-name: backInRight;
+	animation-name: backInRight;
+}
+
+@-webkit-keyframes backInUp {
+	0% {
+		-webkit-transform: translateY(1200px) scale(0.7);
+		transform: translateY(1200px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	80% {
+		-webkit-transform: translateY(0px) scale(0.7);
+		transform: translateY(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+@keyframes backInUp {
+	0% {
+		-webkit-transform: translateY(1200px) scale(0.7);
+		transform: translateY(1200px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	80% {
+		-webkit-transform: translateY(0px) scale(0.7);
+		transform: translateY(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+.animate__backInUp {
+	-webkit-animation-name: backInUp;
+	animation-name: backInUp;
+}
+/* Back exists */
+@-webkit-keyframes backOutDown {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+
+	20% {
+		-webkit-transform: translateY(0px) scale(0.7);
+		transform: translateY(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: translateY(700px) scale(0.7);
+		transform: translateY(700px) scale(0.7);
+		opacity: 0.7;
+	}
+}
+
+@keyframes backOutDown {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+
+	20% {
+		-webkit-transform: translateY(0px) scale(0.7);
+		transform: translateY(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: translateY(700px) scale(0.7);
+		transform: translateY(700px) scale(0.7);
+		opacity: 0.7;
+	}
+}
+
+.animate__backOutDown {
+	-webkit-animation-name: backOutDown;
+	animation-name: backOutDown;
+}
+
+@-webkit-keyframes backOutLeft {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+
+	20% {
+		-webkit-transform: translateX(0px) scale(0.7);
+		transform: translateX(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: translateX(-2000px) scale(0.7);
+		transform: translateX(-2000px) scale(0.7);
+		opacity: 0.7;
+	}
+}
+
+@keyframes backOutLeft {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+
+	20% {
+		-webkit-transform: translateX(0px) scale(0.7);
+		transform: translateX(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: translateX(-2000px) scale(0.7);
+		transform: translateX(-2000px) scale(0.7);
+		opacity: 0.7;
+	}
+}
+
+.animate__backOutLeft {
+	-webkit-animation-name: backOutLeft;
+	animation-name: backOutLeft;
+}
+
+@-webkit-keyframes backOutRight {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+
+	20% {
+		-webkit-transform: translateX(0px) scale(0.7);
+		transform: translateX(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: translateX(2000px) scale(0.7);
+		transform: translateX(2000px) scale(0.7);
+		opacity: 0.7;
+	}
+}
+
+@keyframes backOutRight {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+
+	20% {
+		-webkit-transform: translateX(0px) scale(0.7);
+		transform: translateX(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: translateX(2000px) scale(0.7);
+		transform: translateX(2000px) scale(0.7);
+		opacity: 0.7;
+	}
+}
+
+.animate__backOutRight {
+	-webkit-animation-name: backOutRight;
+	animation-name: backOutRight;
+}
+
+@-webkit-keyframes backOutUp {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+
+	20% {
+		-webkit-transform: translateY(0px) scale(0.7);
+		transform: translateY(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: translateY(-700px) scale(0.7);
+		transform: translateY(-700px) scale(0.7);
+		opacity: 0.7;
+	}
+}
+
+@keyframes backOutUp {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+		opacity: 1;
+	}
+
+	20% {
+		-webkit-transform: translateY(0px) scale(0.7);
+		transform: translateY(0px) scale(0.7);
+		opacity: 0.7;
+	}
+
+	100% {
+		-webkit-transform: translateY(-700px) scale(0.7);
+		transform: translateY(-700px) scale(0.7);
+		opacity: 0.7;
+	}
+}
+
+.animate__backOutUp {
+	-webkit-animation-name: backOutUp;
+	animation-name: backOutUp;
+}
+/* Bouncing entrances  */
+@-webkit-keyframes bounceIn {
+	from, 20%, 40%, 60%, 80%, to {
+		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	}
+
+	0% {
+		opacity: 0;
+		-webkit-transform: scale3d(0.3, 0.3, 0.3);
+		transform: scale3d(0.3, 0.3, 0.3);
+	}
+
+	20% {
+		-webkit-transform: scale3d(1.1, 1.1, 1.1);
+		transform: scale3d(1.1, 1.1, 1.1);
+	}
+
+	40% {
+		-webkit-transform: scale3d(0.9, 0.9, 0.9);
+		transform: scale3d(0.9, 0.9, 0.9);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(1.03, 1.03, 1.03);
+		transform: scale3d(1.03, 1.03, 1.03);
+	}
+
+	80% {
+		-webkit-transform: scale3d(0.97, 0.97, 0.97);
+		transform: scale3d(0.97, 0.97, 0.97);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+@keyframes bounceIn {
+	from, 20%, 40%, 60%, 80%, to {
+		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	}
+
+	0% {
+		opacity: 0;
+		-webkit-transform: scale3d(0.3, 0.3, 0.3);
+		transform: scale3d(0.3, 0.3, 0.3);
+	}
+
+	20% {
+		-webkit-transform: scale3d(1.1, 1.1, 1.1);
+		transform: scale3d(1.1, 1.1, 1.1);
+	}
+
+	40% {
+		-webkit-transform: scale3d(0.9, 0.9, 0.9);
+		transform: scale3d(0.9, 0.9, 0.9);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(1.03, 1.03, 1.03);
+		transform: scale3d(1.03, 1.03, 1.03);
+	}
+
+	80% {
+		-webkit-transform: scale3d(0.97, 0.97, 0.97);
+		transform: scale3d(0.97, 0.97, 0.97);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+.animate__bounceIn {
+	-webkit-animation-duration: calc(1s * 0.75);
+	animation-duration: calc(1s * 0.75);
+	-webkit-animation-duration: calc(var(--animate-duration) * 0.75);
+	animation-duration: calc(var(--animate-duration) * 0.75);
+	-webkit-animation-name: bounceIn;
+	animation-name: bounceIn;
+}
+
+@-webkit-keyframes bounceInDown {
+	from, 60%, 75%, 90%, to {
+		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	}
+
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
+		transform: translate3d(0, -3000px, 0) scaleY(3);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
+		transform: translate3d(0, 25px, 0) scaleY(0.9);
+	}
+
+	75% {
+		-webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
+		transform: translate3d(0, -10px, 0) scaleY(0.95);
+	}
+
+	90% {
+		-webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
+		transform: translate3d(0, 5px, 0) scaleY(0.985);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes bounceInDown {
+	from, 60%, 75%, 90%, to {
+		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	}
+
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
+		transform: translate3d(0, -3000px, 0) scaleY(3);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
+		transform: translate3d(0, 25px, 0) scaleY(0.9);
+	}
+
+	75% {
+		-webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
+		transform: translate3d(0, -10px, 0) scaleY(0.95);
+	}
+
+	90% {
+		-webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
+		transform: translate3d(0, 5px, 0) scaleY(0.985);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__bounceInDown {
+	-webkit-animation-name: bounceInDown;
+	animation-name: bounceInDown;
+}
+
+@-webkit-keyframes bounceInLeft {
+	from, 60%, 75%, 90%, to {
+		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	}
+
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
+		transform: translate3d(-3000px, 0, 0) scaleX(3);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(25px, 0, 0) scaleX(1);
+		transform: translate3d(25px, 0, 0) scaleX(1);
+	}
+
+	75% {
+		-webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
+		transform: translate3d(-10px, 0, 0) scaleX(0.98);
+	}
+
+	90% {
+		-webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
+		transform: translate3d(5px, 0, 0) scaleX(0.995);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes bounceInLeft {
+	from, 60%, 75%, 90%, to {
+		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	}
+
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
+		transform: translate3d(-3000px, 0, 0) scaleX(3);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(25px, 0, 0) scaleX(1);
+		transform: translate3d(25px, 0, 0) scaleX(1);
+	}
+
+	75% {
+		-webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
+		transform: translate3d(-10px, 0, 0) scaleX(0.98);
+	}
+
+	90% {
+		-webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
+		transform: translate3d(5px, 0, 0) scaleX(0.995);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__bounceInLeft {
+	-webkit-animation-name: bounceInLeft;
+	animation-name: bounceInLeft;
+}
+
+@-webkit-keyframes bounceInRight {
+	from, 60%, 75%, 90%, to {
+		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	}
+
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
+		transform: translate3d(3000px, 0, 0) scaleX(3);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
+		transform: translate3d(-25px, 0, 0) scaleX(1);
+	}
+
+	75% {
+		-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
+		transform: translate3d(10px, 0, 0) scaleX(0.98);
+	}
+
+	90% {
+		-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
+		transform: translate3d(-5px, 0, 0) scaleX(0.995);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes bounceInRight {
+	from, 60%, 75%, 90%, to {
+		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	}
+
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
+		transform: translate3d(3000px, 0, 0) scaleX(3);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
+		transform: translate3d(-25px, 0, 0) scaleX(1);
+	}
+
+	75% {
+		-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
+		transform: translate3d(10px, 0, 0) scaleX(0.98);
+	}
+
+	90% {
+		-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
+		transform: translate3d(-5px, 0, 0) scaleX(0.995);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__bounceInRight {
+	-webkit-animation-name: bounceInRight;
+	animation-name: bounceInRight;
+}
+
+@-webkit-keyframes bounceInUp {
+	from, 60%, 75%, 90%, to {
+		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	}
+
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
+		transform: translate3d(0, 3000px, 0) scaleY(5);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
+		transform: translate3d(0, -20px, 0) scaleY(0.9);
+	}
+
+	75% {
+		-webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
+		transform: translate3d(0, 10px, 0) scaleY(0.95);
+	}
+
+	90% {
+		-webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
+		transform: translate3d(0, -5px, 0) scaleY(0.985);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes bounceInUp {
+	from, 60%, 75%, 90%, to {
+		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	}
+
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
+		transform: translate3d(0, 3000px, 0) scaleY(5);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
+		transform: translate3d(0, -20px, 0) scaleY(0.9);
+	}
+
+	75% {
+		-webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
+		transform: translate3d(0, 10px, 0) scaleY(0.95);
+	}
+
+	90% {
+		-webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
+		transform: translate3d(0, -5px, 0) scaleY(0.985);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__bounceInUp {
+	-webkit-animation-name: bounceInUp;
+	animation-name: bounceInUp;
+}
+/* Bouncing exits  */
+@-webkit-keyframes bounceOut {
+	20% {
+		-webkit-transform: scale3d(0.9, 0.9, 0.9);
+		transform: scale3d(0.9, 0.9, 0.9);
+	}
+
+	50%, 55% {
+		opacity: 1;
+		-webkit-transform: scale3d(1.1, 1.1, 1.1);
+		transform: scale3d(1.1, 1.1, 1.1);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale3d(0.3, 0.3, 0.3);
+		transform: scale3d(0.3, 0.3, 0.3);
+	}
+}
+
+@keyframes bounceOut {
+	20% {
+		-webkit-transform: scale3d(0.9, 0.9, 0.9);
+		transform: scale3d(0.9, 0.9, 0.9);
+	}
+
+	50%, 55% {
+		opacity: 1;
+		-webkit-transform: scale3d(1.1, 1.1, 1.1);
+		transform: scale3d(1.1, 1.1, 1.1);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale3d(0.3, 0.3, 0.3);
+		transform: scale3d(0.3, 0.3, 0.3);
+	}
+}
+
+.animate__bounceOut {
+	-webkit-animation-duration: calc(1s * 0.75);
+	animation-duration: calc(1s * 0.75);
+	-webkit-animation-duration: calc(var(--animate-duration) * 0.75);
+	animation-duration: calc(var(--animate-duration) * 0.75);
+	-webkit-animation-name: bounceOut;
+	animation-name: bounceOut;
+}
+
+@-webkit-keyframes bounceOutDown {
+	20% {
+		-webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
+		transform: translate3d(0, 10px, 0) scaleY(0.985);
+	}
+
+	40%, 45% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
+		transform: translate3d(0, -20px, 0) scaleY(0.9);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
+		transform: translate3d(0, 2000px, 0) scaleY(3);
+	}
+}
+
+@keyframes bounceOutDown {
+	20% {
+		-webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
+		transform: translate3d(0, 10px, 0) scaleY(0.985);
+	}
+
+	40%, 45% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
+		transform: translate3d(0, -20px, 0) scaleY(0.9);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
+		transform: translate3d(0, 2000px, 0) scaleY(3);
+	}
+}
+
+.animate__bounceOutDown {
+	-webkit-animation-name: bounceOutDown;
+	animation-name: bounceOutDown;
+}
+
+@-webkit-keyframes bounceOutLeft {
+	20% {
+		opacity: 1;
+		-webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
+		transform: translate3d(20px, 0, 0) scaleX(0.9);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
+		transform: translate3d(-2000px, 0, 0) scaleX(2);
+	}
+}
+
+@keyframes bounceOutLeft {
+	20% {
+		opacity: 1;
+		-webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
+		transform: translate3d(20px, 0, 0) scaleX(0.9);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
+		transform: translate3d(-2000px, 0, 0) scaleX(2);
+	}
+}
+
+.animate__bounceOutLeft {
+	-webkit-animation-name: bounceOutLeft;
+	animation-name: bounceOutLeft;
+}
+
+@-webkit-keyframes bounceOutRight {
+	20% {
+		opacity: 1;
+		-webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
+		transform: translate3d(-20px, 0, 0) scaleX(0.9);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
+		transform: translate3d(2000px, 0, 0) scaleX(2);
+	}
+}
+
+@keyframes bounceOutRight {
+	20% {
+		opacity: 1;
+		-webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
+		transform: translate3d(-20px, 0, 0) scaleX(0.9);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
+		transform: translate3d(2000px, 0, 0) scaleX(2);
+	}
+}
+
+.animate__bounceOutRight {
+	-webkit-animation-name: bounceOutRight;
+	animation-name: bounceOutRight;
+}
+
+@-webkit-keyframes bounceOutUp {
+	20% {
+		-webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
+		transform: translate3d(0, -10px, 0) scaleY(0.985);
+	}
+
+	40%, 45% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
+		transform: translate3d(0, 20px, 0) scaleY(0.9);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
+		transform: translate3d(0, -2000px, 0) scaleY(3);
+	}
+}
+
+@keyframes bounceOutUp {
+	20% {
+		-webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
+		transform: translate3d(0, -10px, 0) scaleY(0.985);
+	}
+
+	40%, 45% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
+		transform: translate3d(0, 20px, 0) scaleY(0.9);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
+		transform: translate3d(0, -2000px, 0) scaleY(3);
+	}
+}
+
+.animate__bounceOutUp {
+	-webkit-animation-name: bounceOutUp;
+	animation-name: bounceOutUp;
+}
+/* Fading entrances  */
+@-webkit-keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+.animate__fadeIn {
+	-webkit-animation-name: fadeIn;
+	animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInDown {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__fadeInDown {
+	-webkit-animation-name: fadeInDown;
+	animation-name: fadeInDown;
+}
+
+@-webkit-keyframes fadeInDownBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -2000px, 0);
+		transform: translate3d(0, -2000px, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInDownBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -2000px, 0);
+		transform: translate3d(0, -2000px, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__fadeInDownBig {
+	-webkit-animation-name: fadeInDownBig;
+	animation-name: fadeInDownBig;
+}
+
+@-webkit-keyframes fadeInLeft {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInLeft {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__fadeInLeft {
+	-webkit-animation-name: fadeInLeft;
+	animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInLeftBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-2000px, 0, 0);
+		transform: translate3d(-2000px, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInLeftBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-2000px, 0, 0);
+		transform: translate3d(-2000px, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__fadeInLeftBig {
+	-webkit-animation-name: fadeInLeftBig;
+	animation-name: fadeInLeftBig;
+}
+
+@-webkit-keyframes fadeInRight {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInRight {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__fadeInRight {
+	-webkit-animation-name: fadeInRight;
+	animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInRightBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(2000px, 0, 0);
+		transform: translate3d(2000px, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInRightBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(2000px, 0, 0);
+		transform: translate3d(2000px, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__fadeInRightBig {
+	-webkit-animation-name: fadeInRightBig;
+	animation-name: fadeInRightBig;
+}
+
+@-webkit-keyframes fadeInUp {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInUp {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__fadeInUp {
+	-webkit-animation-name: fadeInUp;
+	animation-name: fadeInUp;
+}
+
+@-webkit-keyframes fadeInUpBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 2000px, 0);
+		transform: translate3d(0, 2000px, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInUpBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 2000px, 0);
+		transform: translate3d(0, 2000px, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__fadeInUpBig {
+	-webkit-animation-name: fadeInUpBig;
+	animation-name: fadeInUpBig;
+}
+
+@-webkit-keyframes fadeInTopLeft {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, -100%, 0);
+		transform: translate3d(-100%, -100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInTopLeft {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, -100%, 0);
+		transform: translate3d(-100%, -100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__fadeInTopLeft {
+	-webkit-animation-name: fadeInTopLeft;
+	animation-name: fadeInTopLeft;
+}
+
+@-webkit-keyframes fadeInTopRight {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, -100%, 0);
+		transform: translate3d(100%, -100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInTopRight {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, -100%, 0);
+		transform: translate3d(100%, -100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__fadeInTopRight {
+	-webkit-animation-name: fadeInTopRight;
+	animation-name: fadeInTopRight;
+}
+
+@-webkit-keyframes fadeInBottomLeft {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 100%, 0);
+		transform: translate3d(-100%, 100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInBottomLeft {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 100%, 0);
+		transform: translate3d(-100%, 100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__fadeInBottomLeft {
+	-webkit-animation-name: fadeInBottomLeft;
+	animation-name: fadeInBottomLeft;
+}
+
+@-webkit-keyframes fadeInBottomRight {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 100%, 0);
+		transform: translate3d(100%, 100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInBottomRight {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 100%, 0);
+		transform: translate3d(100%, 100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__fadeInBottomRight {
+	-webkit-animation-name: fadeInBottomRight;
+	animation-name: fadeInBottomRight;
+}
+/* Fading exits */
+@-webkit-keyframes fadeOut {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes fadeOut {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
+.animate__fadeOut {
+	-webkit-animation-name: fadeOut;
+	animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0);
+	}
+}
+
+@keyframes fadeOutDown {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0);
+	}
+}
+
+.animate__fadeOutDown {
+	-webkit-animation-name: fadeOutDown;
+	animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutDownBig {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 2000px, 0);
+		transform: translate3d(0, 2000px, 0);
+	}
+}
+
+@keyframes fadeOutDownBig {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 2000px, 0);
+		transform: translate3d(0, 2000px, 0);
+	}
+}
+
+.animate__fadeOutDownBig {
+	-webkit-animation-name: fadeOutDownBig;
+	animation-name: fadeOutDownBig;
+}
+
+@-webkit-keyframes fadeOutLeft {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0);
+	}
+}
+
+@keyframes fadeOutLeft {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0);
+	}
+}
+
+.animate__fadeOutLeft {
+	-webkit-animation-name: fadeOutLeft;
+	animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutLeftBig {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-2000px, 0, 0);
+		transform: translate3d(-2000px, 0, 0);
+	}
+}
+
+@keyframes fadeOutLeftBig {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-2000px, 0, 0);
+		transform: translate3d(-2000px, 0, 0);
+	}
+}
+
+.animate__fadeOutLeftBig {
+	-webkit-animation-name: fadeOutLeftBig;
+	animation-name: fadeOutLeftBig;
+}
+
+@-webkit-keyframes fadeOutRight {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0);
+	}
+}
+
+@keyframes fadeOutRight {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0);
+	}
+}
+
+.animate__fadeOutRight {
+	-webkit-animation-name: fadeOutRight;
+	animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutRightBig {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(2000px, 0, 0);
+		transform: translate3d(2000px, 0, 0);
+	}
+}
+
+@keyframes fadeOutRightBig {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(2000px, 0, 0);
+		transform: translate3d(2000px, 0, 0);
+	}
+}
+
+.animate__fadeOutRightBig {
+	-webkit-animation-name: fadeOutRightBig;
+	animation-name: fadeOutRightBig;
+}
+
+@-webkit-keyframes fadeOutUp {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0);
+	}
+}
+
+@keyframes fadeOutUp {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0);
+	}
+}
+
+.animate__fadeOutUp {
+	-webkit-animation-name: fadeOutUp;
+	animation-name: fadeOutUp;
+}
+
+@-webkit-keyframes fadeOutUpBig {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -2000px, 0);
+		transform: translate3d(0, -2000px, 0);
+	}
+}
+
+@keyframes fadeOutUpBig {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -2000px, 0);
+		transform: translate3d(0, -2000px, 0);
+	}
+}
+
+.animate__fadeOutUpBig {
+	-webkit-animation-name: fadeOutUpBig;
+	animation-name: fadeOutUpBig;
+}
+
+@-webkit-keyframes fadeOutTopLeft {
+	from {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, -100%, 0);
+		transform: translate3d(-100%, -100%, 0);
+	}
+}
+
+@keyframes fadeOutTopLeft {
+	from {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, -100%, 0);
+		transform: translate3d(-100%, -100%, 0);
+	}
+}
+
+.animate__fadeOutTopLeft {
+	-webkit-animation-name: fadeOutTopLeft;
+	animation-name: fadeOutTopLeft;
+}
+
+@-webkit-keyframes fadeOutTopRight {
+	from {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, -100%, 0);
+		transform: translate3d(100%, -100%, 0);
+	}
+}
+
+@keyframes fadeOutTopRight {
+	from {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, -100%, 0);
+		transform: translate3d(100%, -100%, 0);
+	}
+}
+
+.animate__fadeOutTopRight {
+	-webkit-animation-name: fadeOutTopRight;
+	animation-name: fadeOutTopRight;
+}
+
+@-webkit-keyframes fadeOutBottomRight {
+	from {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 100%, 0);
+		transform: translate3d(100%, 100%, 0);
+	}
+}
+
+@keyframes fadeOutBottomRight {
+	from {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 100%, 0);
+		transform: translate3d(100%, 100%, 0);
+	}
+}
+
+.animate__fadeOutBottomRight {
+	-webkit-animation-name: fadeOutBottomRight;
+	animation-name: fadeOutBottomRight;
+}
+
+@-webkit-keyframes fadeOutBottomLeft {
+	from {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 100%, 0);
+		transform: translate3d(-100%, 100%, 0);
+	}
+}
+
+@keyframes fadeOutBottomLeft {
+	from {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 100%, 0);
+		transform: translate3d(-100%, 100%, 0);
+	}
+}
+
+.animate__fadeOutBottomLeft {
+	-webkit-animation-name: fadeOutBottomLeft;
+	animation-name: fadeOutBottomLeft;
+}
+/* Flippers */
+@-webkit-keyframes flip {
+	from {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out;
+	}
+
+	40% {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out;
+	}
+
+	50% {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	80% {
+		-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	to {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+}
+
+@keyframes flip {
+	from {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out;
+	}
+
+	40% {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out;
+	}
+
+	50% {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	80% {
+		-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	to {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+}
+
+.animate__animated.animate__flip {
+	-webkit-backface-visibility: visible;
+	backface-visibility: visible;
+	-webkit-animation-name: flip;
+	animation-name: flip;
+}
+
+@-webkit-keyframes flipInX {
+	from {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+		opacity: 0;
+	}
+
+	40% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	60% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+		opacity: 1;
+	}
+
+	80% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+	}
+
+	to {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px);
+	}
+}
+
+@keyframes flipInX {
+	from {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+		opacity: 0;
+	}
+
+	40% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	60% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+		opacity: 1;
+	}
+
+	80% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+	}
+
+	to {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px);
+	}
+}
+
+.animate__flipInX {
+	-webkit-backface-visibility: visible !important;
+	backface-visibility: visible !important;
+	-webkit-animation-name: flipInX;
+	animation-name: flipInX;
+}
+
+@-webkit-keyframes flipInY {
+	from {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+		opacity: 0;
+	}
+
+	40% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	60% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+		opacity: 1;
+	}
+
+	80% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+	}
+
+	to {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px);
+	}
+}
+
+@keyframes flipInY {
+	from {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+		opacity: 0;
+	}
+
+	40% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+	}
+
+	60% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+		opacity: 1;
+	}
+
+	80% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+	}
+
+	to {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px);
+	}
+}
+
+.animate__flipInY {
+	-webkit-backface-visibility: visible !important;
+	backface-visibility: visible !important;
+	-webkit-animation-name: flipInY;
+	animation-name: flipInY;
+}
+
+@-webkit-keyframes flipOutX {
+	from {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px);
+	}
+
+	30% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		opacity: 0;
+	}
+}
+
+@keyframes flipOutX {
+	from {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px);
+	}
+
+	30% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		opacity: 0;
+	}
+}
+
+.animate__flipOutX {
+	-webkit-animation-duration: calc(1s * 0.75);
+	animation-duration: calc(1s * 0.75);
+	-webkit-animation-duration: calc(var(--animate-duration) * 0.75);
+	animation-duration: calc(var(--animate-duration) * 0.75);
+	-webkit-animation-name: flipOutX;
+	animation-name: flipOutX;
+	-webkit-backface-visibility: visible !important;
+	backface-visibility: visible !important;
+}
+
+@-webkit-keyframes flipOutY {
+	from {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px);
+	}
+
+	30% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		opacity: 0;
+	}
+}
+
+@keyframes flipOutY {
+	from {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px);
+	}
+
+	30% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		opacity: 0;
+	}
+}
+
+.animate__flipOutY {
+	-webkit-animation-duration: calc(1s * 0.75);
+	animation-duration: calc(1s * 0.75);
+	-webkit-animation-duration: calc(var(--animate-duration) * 0.75);
+	animation-duration: calc(var(--animate-duration) * 0.75);
+	-webkit-backface-visibility: visible !important;
+	backface-visibility: visible !important;
+	-webkit-animation-name: flipOutY;
+	animation-name: flipOutY;
+}
+/* Lightspeed */
+@-webkit-keyframes lightSpeedInRight {
+	from {
+		-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+		transform: translate3d(100%, 0, 0) skewX(-30deg);
+		opacity: 0;
+	}
+
+	60% {
+		-webkit-transform: skewX(20deg);
+		transform: skewX(20deg);
+		opacity: 1;
+	}
+
+	80% {
+		-webkit-transform: skewX(-5deg);
+		transform: skewX(-5deg);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes lightSpeedInRight {
+	from {
+		-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+		transform: translate3d(100%, 0, 0) skewX(-30deg);
+		opacity: 0;
+	}
+
+	60% {
+		-webkit-transform: skewX(20deg);
+		transform: skewX(20deg);
+		opacity: 1;
+	}
+
+	80% {
+		-webkit-transform: skewX(-5deg);
+		transform: skewX(-5deg);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__lightSpeedInRight {
+	-webkit-animation-name: lightSpeedInRight;
+	animation-name: lightSpeedInRight;
+	-webkit-animation-timing-function: ease-out;
+	animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes lightSpeedInLeft {
+	from {
+		-webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
+		transform: translate3d(-100%, 0, 0) skewX(30deg);
+		opacity: 0;
+	}
+
+	60% {
+		-webkit-transform: skewX(-20deg);
+		transform: skewX(-20deg);
+		opacity: 1;
+	}
+
+	80% {
+		-webkit-transform: skewX(5deg);
+		transform: skewX(5deg);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes lightSpeedInLeft {
+	from {
+		-webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
+		transform: translate3d(-100%, 0, 0) skewX(30deg);
+		opacity: 0;
+	}
+
+	60% {
+		-webkit-transform: skewX(-20deg);
+		transform: skewX(-20deg);
+		opacity: 1;
+	}
+
+	80% {
+		-webkit-transform: skewX(5deg);
+		transform: skewX(5deg);
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__lightSpeedInLeft {
+	-webkit-animation-name: lightSpeedInLeft;
+	animation-name: lightSpeedInLeft;
+	-webkit-animation-timing-function: ease-out;
+	animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes lightSpeedOutRight {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+		transform: translate3d(100%, 0, 0) skewX(30deg);
+		opacity: 0;
+	}
+}
+
+@keyframes lightSpeedOutRight {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+		transform: translate3d(100%, 0, 0) skewX(30deg);
+		opacity: 0;
+	}
+}
+
+.animate__lightSpeedOutRight {
+	-webkit-animation-name: lightSpeedOutRight;
+	animation-name: lightSpeedOutRight;
+	-webkit-animation-timing-function: ease-in;
+	animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes lightSpeedOutLeft {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
+		transform: translate3d(-100%, 0, 0) skewX(-30deg);
+		opacity: 0;
+	}
+}
+
+@keyframes lightSpeedOutLeft {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
+		transform: translate3d(-100%, 0, 0) skewX(-30deg);
+		opacity: 0;
+	}
+}
+
+.animate__lightSpeedOutLeft {
+	-webkit-animation-name: lightSpeedOutLeft;
+	animation-name: lightSpeedOutLeft;
+	-webkit-animation-timing-function: ease-in;
+	animation-timing-function: ease-in;
+}
+/* Rotating entrances */
+@-webkit-keyframes rotateIn {
+	from {
+		-webkit-transform: rotate3d(0, 0, 1, -200deg);
+		transform: rotate3d(0, 0, 1, -200deg);
+		opacity: 0;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes rotateIn {
+	from {
+		-webkit-transform: rotate3d(0, 0, 1, -200deg);
+		transform: rotate3d(0, 0, 1, -200deg);
+		opacity: 0;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+.animate__rotateIn {
+	-webkit-animation-name: rotateIn;
+	animation-name: rotateIn;
+	-webkit-transform-origin: center;
+	transform-origin: center;
+}
+
+@-webkit-keyframes rotateInDownLeft {
+	from {
+		-webkit-transform: rotate3d(0, 0, 1, -45deg);
+		transform: rotate3d(0, 0, 1, -45deg);
+		opacity: 0;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes rotateInDownLeft {
+	from {
+		-webkit-transform: rotate3d(0, 0, 1, -45deg);
+		transform: rotate3d(0, 0, 1, -45deg);
+		opacity: 0;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+.animate__rotateInDownLeft {
+	-webkit-animation-name: rotateInDownLeft;
+	animation-name: rotateInDownLeft;
+	-webkit-transform-origin: left bottom;
+	transform-origin: left bottom;
+}
+
+@-webkit-keyframes rotateInDownRight {
+	from {
+		-webkit-transform: rotate3d(0, 0, 1, 45deg);
+		transform: rotate3d(0, 0, 1, 45deg);
+		opacity: 0;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes rotateInDownRight {
+	from {
+		-webkit-transform: rotate3d(0, 0, 1, 45deg);
+		transform: rotate3d(0, 0, 1, 45deg);
+		opacity: 0;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+.animate__rotateInDownRight {
+	-webkit-animation-name: rotateInDownRight;
+	animation-name: rotateInDownRight;
+	-webkit-transform-origin: right bottom;
+	transform-origin: right bottom;
+}
+
+@-webkit-keyframes rotateInUpLeft {
+	from {
+		-webkit-transform: rotate3d(0, 0, 1, 45deg);
+		transform: rotate3d(0, 0, 1, 45deg);
+		opacity: 0;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes rotateInUpLeft {
+	from {
+		-webkit-transform: rotate3d(0, 0, 1, 45deg);
+		transform: rotate3d(0, 0, 1, 45deg);
+		opacity: 0;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+.animate__rotateInUpLeft {
+	-webkit-animation-name: rotateInUpLeft;
+	animation-name: rotateInUpLeft;
+	-webkit-transform-origin: left bottom;
+	transform-origin: left bottom;
+}
+
+@-webkit-keyframes rotateInUpRight {
+	from {
+		-webkit-transform: rotate3d(0, 0, 1, -90deg);
+		transform: rotate3d(0, 0, 1, -90deg);
+		opacity: 0;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes rotateInUpRight {
+	from {
+		-webkit-transform: rotate3d(0, 0, 1, -90deg);
+		transform: rotate3d(0, 0, 1, -90deg);
+		opacity: 0;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+.animate__rotateInUpRight {
+	-webkit-animation-name: rotateInUpRight;
+	animation-name: rotateInUpRight;
+	-webkit-transform-origin: right bottom;
+	transform-origin: right bottom;
+}
+/* Rotating exits */
+@-webkit-keyframes rotateOut {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, 200deg);
+		transform: rotate3d(0, 0, 1, 200deg);
+		opacity: 0;
+	}
+}
+
+@keyframes rotateOut {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, 200deg);
+		transform: rotate3d(0, 0, 1, 200deg);
+		opacity: 0;
+	}
+}
+
+.animate__rotateOut {
+	-webkit-animation-name: rotateOut;
+	animation-name: rotateOut;
+	-webkit-transform-origin: center;
+	transform-origin: center;
+}
+
+@-webkit-keyframes rotateOutDownLeft {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, 45deg);
+		transform: rotate3d(0, 0, 1, 45deg);
+		opacity: 0;
+	}
+}
+
+@keyframes rotateOutDownLeft {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, 45deg);
+		transform: rotate3d(0, 0, 1, 45deg);
+		opacity: 0;
+	}
+}
+
+.animate__rotateOutDownLeft {
+	-webkit-animation-name: rotateOutDownLeft;
+	animation-name: rotateOutDownLeft;
+	-webkit-transform-origin: left bottom;
+	transform-origin: left bottom;
+}
+
+@-webkit-keyframes rotateOutDownRight {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, -45deg);
+		transform: rotate3d(0, 0, 1, -45deg);
+		opacity: 0;
+	}
+}
+
+@keyframes rotateOutDownRight {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, -45deg);
+		transform: rotate3d(0, 0, 1, -45deg);
+		opacity: 0;
+	}
+}
+
+.animate__rotateOutDownRight {
+	-webkit-animation-name: rotateOutDownRight;
+	animation-name: rotateOutDownRight;
+	-webkit-transform-origin: right bottom;
+	transform-origin: right bottom;
+}
+
+@-webkit-keyframes rotateOutUpLeft {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, -45deg);
+		transform: rotate3d(0, 0, 1, -45deg);
+		opacity: 0;
+	}
+}
+
+@keyframes rotateOutUpLeft {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, -45deg);
+		transform: rotate3d(0, 0, 1, -45deg);
+		opacity: 0;
+	}
+}
+
+.animate__rotateOutUpLeft {
+	-webkit-animation-name: rotateOutUpLeft;
+	animation-name: rotateOutUpLeft;
+	-webkit-transform-origin: left bottom;
+	transform-origin: left bottom;
+}
+
+@-webkit-keyframes rotateOutUpRight {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, 90deg);
+		transform: rotate3d(0, 0, 1, 90deg);
+		opacity: 0;
+	}
+}
+
+@keyframes rotateOutUpRight {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, 90deg);
+		transform: rotate3d(0, 0, 1, 90deg);
+		opacity: 0;
+	}
+}
+
+.animate__rotateOutUpRight {
+	-webkit-animation-name: rotateOutUpRight;
+	animation-name: rotateOutUpRight;
+	-webkit-transform-origin: right bottom;
+	transform-origin: right bottom;
+}
+/* Specials */
+@-webkit-keyframes hinge {
+	0% {
+		-webkit-animation-timing-function: ease-in-out;
+		animation-timing-function: ease-in-out;
+	}
+
+	20%, 60% {
+		-webkit-transform: rotate3d(0, 0, 1, 80deg);
+		transform: rotate3d(0, 0, 1, 80deg);
+		-webkit-animation-timing-function: ease-in-out;
+		animation-timing-function: ease-in-out;
+	}
+
+	40%, 80% {
+		-webkit-transform: rotate3d(0, 0, 1, 60deg);
+		transform: rotate3d(0, 0, 1, 60deg);
+		-webkit-animation-timing-function: ease-in-out;
+		animation-timing-function: ease-in-out;
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 700px, 0);
+		transform: translate3d(0, 700px, 0);
+		opacity: 0;
+	}
+}
+
+@keyframes hinge {
+	0% {
+		-webkit-animation-timing-function: ease-in-out;
+		animation-timing-function: ease-in-out;
+	}
+
+	20%, 60% {
+		-webkit-transform: rotate3d(0, 0, 1, 80deg);
+		transform: rotate3d(0, 0, 1, 80deg);
+		-webkit-animation-timing-function: ease-in-out;
+		animation-timing-function: ease-in-out;
+	}
+
+	40%, 80% {
+		-webkit-transform: rotate3d(0, 0, 1, 60deg);
+		transform: rotate3d(0, 0, 1, 60deg);
+		-webkit-animation-timing-function: ease-in-out;
+		animation-timing-function: ease-in-out;
+		opacity: 1;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 700px, 0);
+		transform: translate3d(0, 700px, 0);
+		opacity: 0;
+	}
+}
+
+.animate__hinge {
+	-webkit-animation-duration: calc(1s * 2);
+	animation-duration: calc(1s * 2);
+	-webkit-animation-duration: calc(var(--animate-duration) * 2);
+	animation-duration: calc(var(--animate-duration) * 2);
+	-webkit-animation-name: hinge;
+	animation-name: hinge;
+	-webkit-transform-origin: top left;
+	transform-origin: top left;
+}
+
+@-webkit-keyframes jackInTheBox {
+	from {
+		opacity: 0;
+		-webkit-transform: scale(0.1) rotate(30deg);
+		transform: scale(0.1) rotate(30deg);
+		-webkit-transform-origin: center bottom;
+		transform-origin: center bottom;
+	}
+
+	50% {
+		-webkit-transform: rotate(-10deg);
+		transform: rotate(-10deg);
+	}
+
+	70% {
+		-webkit-transform: rotate(3deg);
+		transform: rotate(3deg);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+}
+
+@keyframes jackInTheBox {
+	from {
+		opacity: 0;
+		-webkit-transform: scale(0.1) rotate(30deg);
+		transform: scale(0.1) rotate(30deg);
+		-webkit-transform-origin: center bottom;
+		transform-origin: center bottom;
+	}
+
+	50% {
+		-webkit-transform: rotate(-10deg);
+		transform: rotate(-10deg);
+	}
+
+	70% {
+		-webkit-transform: rotate(3deg);
+		transform: rotate(3deg);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+}
+
+.animate__jackInTheBox {
+	-webkit-animation-name: jackInTheBox;
+	animation-name: jackInTheBox;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+@-webkit-keyframes rollIn {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes rollIn {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__rollIn {
+	-webkit-animation-name: rollIn;
+	animation-name: rollIn;
+}
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+@-webkit-keyframes rollOut {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+		transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+	}
+}
+
+@keyframes rollOut {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+		transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+	}
+}
+
+.animate__rollOut {
+	-webkit-animation-name: rollOut;
+	animation-name: rollOut;
+}
+/* Zooming entrances */
+@-webkit-keyframes zoomIn {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(0.3, 0.3, 0.3);
+		transform: scale3d(0.3, 0.3, 0.3);
+	}
+
+	50% {
+		opacity: 1;
+	}
+}
+
+@keyframes zoomIn {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(0.3, 0.3, 0.3);
+		transform: scale3d(0.3, 0.3, 0.3);
+	}
+
+	50% {
+		opacity: 1;
+	}
+}
+
+.animate__zoomIn {
+	-webkit-animation-name: zoomIn;
+	animation-name: zoomIn;
+}
+
+@-webkit-keyframes zoomInDown {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+		transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+	}
+}
+
+@keyframes zoomInDown {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+		transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+	}
+}
+
+.animate__zoomInDown {
+	-webkit-animation-name: zoomInDown;
+	animation-name: zoomInDown;
+}
+
+@-webkit-keyframes zoomInLeft {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+		transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+	}
+}
+
+@keyframes zoomInLeft {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+		transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+	}
+}
+
+.animate__zoomInLeft {
+	-webkit-animation-name: zoomInLeft;
+	animation-name: zoomInLeft;
+}
+
+@-webkit-keyframes zoomInRight {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+		transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+	}
+}
+
+@keyframes zoomInRight {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+		transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+	}
+}
+
+.animate__zoomInRight {
+	-webkit-animation-name: zoomInRight;
+	animation-name: zoomInRight;
+}
+
+@-webkit-keyframes zoomInUp {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+		transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+	}
+}
+
+@keyframes zoomInUp {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+		transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+	}
+}
+
+.animate__zoomInUp {
+	-webkit-animation-name: zoomInUp;
+	animation-name: zoomInUp;
+}
+/* Zooming exits */
+@-webkit-keyframes zoomOut {
+	from {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0;
+		-webkit-transform: scale3d(0.3, 0.3, 0.3);
+		transform: scale3d(0.3, 0.3, 0.3);
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes zoomOut {
+	from {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0;
+		-webkit-transform: scale3d(0.3, 0.3, 0.3);
+		transform: scale3d(0.3, 0.3, 0.3);
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
+.animate__zoomOut {
+	-webkit-animation-name: zoomOut;
+	animation-name: zoomOut;
+}
+
+@-webkit-keyframes zoomOutDown {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+		transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+	}
+}
+
+@keyframes zoomOutDown {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+		transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+	}
+}
+
+.animate__zoomOutDown {
+	-webkit-animation-name: zoomOutDown;
+	animation-name: zoomOutDown;
+	-webkit-transform-origin: center bottom;
+	transform-origin: center bottom;
+}
+
+@-webkit-keyframes zoomOutLeft {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+		transform: scale(0.1) translate3d(-2000px, 0, 0);
+	}
+}
+
+@keyframes zoomOutLeft {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+		transform: scale(0.1) translate3d(-2000px, 0, 0);
+	}
+}
+
+.animate__zoomOutLeft {
+	-webkit-animation-name: zoomOutLeft;
+	animation-name: zoomOutLeft;
+	-webkit-transform-origin: left center;
+	transform-origin: left center;
+}
+
+@-webkit-keyframes zoomOutRight {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+		transform: scale(0.1) translate3d(2000px, 0, 0);
+	}
+}
+
+@keyframes zoomOutRight {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+		transform: scale(0.1) translate3d(2000px, 0, 0);
+	}
+}
+
+.animate__zoomOutRight {
+	-webkit-animation-name: zoomOutRight;
+	animation-name: zoomOutRight;
+	-webkit-transform-origin: right center;
+	transform-origin: right center;
+}
+
+@-webkit-keyframes zoomOutUp {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+		transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+	}
+}
+
+@keyframes zoomOutUp {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+		transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+		transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+	}
+}
+
+.animate__zoomOutUp {
+	-webkit-animation-name: zoomOutUp;
+	animation-name: zoomOutUp;
+	-webkit-transform-origin: center bottom;
+	transform-origin: center bottom;
+}
+/* Sliding entrances */
+@-webkit-keyframes slideInDown {
+	from {
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0);
+		visibility: visible;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideInDown {
+	from {
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0);
+		visibility: visible;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__slideInDown {
+	-webkit-animation-name: slideInDown;
+	animation-name: slideInDown;
+}
+
+@-webkit-keyframes slideInLeft {
+	from {
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0);
+		visibility: visible;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideInLeft {
+	from {
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0);
+		visibility: visible;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__slideInLeft {
+	-webkit-animation-name: slideInLeft;
+	animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+	from {
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0);
+		visibility: visible;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideInRight {
+	from {
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0);
+		visibility: visible;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__slideInRight {
+	-webkit-animation-name: slideInRight;
+	animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideInUp {
+	from {
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0);
+		visibility: visible;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideInUp {
+	from {
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0);
+		visibility: visible;
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+.animate__slideInUp {
+	-webkit-animation-name: slideInUp;
+	animation-name: slideInUp;
+}
+/* Sliding exits */
+@-webkit-keyframes slideOutDown {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0);
+	}
+}
+
+@keyframes slideOutDown {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0);
+	}
+}
+
+.animate__slideOutDown {
+	-webkit-animation-name: slideOutDown;
+	animation-name: slideOutDown;
+}
+
+@-webkit-keyframes slideOutLeft {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0);
+	}
+}
+
+@keyframes slideOutLeft {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0);
+	}
+}
+
+.animate__slideOutLeft {
+	-webkit-animation-name: slideOutLeft;
+	animation-name: slideOutLeft;
+}
+
+@-webkit-keyframes slideOutRight {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0);
+	}
+}
+
+@keyframes slideOutRight {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0);
+	}
+}
+
+.animate__slideOutRight {
+	-webkit-animation-name: slideOutRight;
+	animation-name: slideOutRight;
+}
+
+@-webkit-keyframes slideOutUp {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0);
+	}
+}
+
+@keyframes slideOutUp {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0);
+	}
+}
+
+.animate__slideOutUp {
+	-webkit-animation-name: slideOutUp;
+	animation-name: slideOutUp;
+}
--- a/TIAMWebApp/Client/Program.cs
+++ b/TIAMWebApp/Client/Program.cs
@ -1,4 +1,5 @@
 using AyCode.Interfaces.StorageHandlers;
+using BlazorAnimation;
 using Blazored.LocalStorage;
 using DevExpress.Blazor;
 using Microsoft.AspNetCore.Components.Web;
@ -37,4 +38,5 @@ builder.Services.AddSingleton(x => new ResourceManager("TIAMWebApp.Client.Resour
 builder.Services.AddSingleton(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

 builder.Services.AddDevExpressBlazor(configure => configure.BootstrapVersion = BootstrapVersion.v5);
+builder.Services.Configure<AnimationOptions>(Guid.NewGuid().ToString(), c => { });
 await builder.Build().RunAsync();
--- a/TIAMWebApp/Client/Services/UserDataServiceWeb.cs
+++ b/TIAMWebApp/Client/Services/UserDataServiceWeb.cs
@ -36,6 +36,8 @@ namespace TIAMWebApp.Client.Services
        }    


+
+
        public async Task<UserSessionModel> IsLoggedInAsync(Guid id)
        {
            //api call to get user
--- a/TIAMWebApp/Client/wwwroot/index.html
+++ b/TIAMWebApp/Client/wwwroot/index.html
@ -13,6 +13,7 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" asp-append-version="true" rel="stylesheet" />
    <link href="_content/TIAMSharedUI/css/app.css" rel="stylesheet" />
+    <link href="_content/TIAMSharedUI/css/animate.css" rel="stylesheet" />
    <link href="_content/TIAMSharedUI/css/TourIAm.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="_content/TIAMSharedUI/favicon.png" />
    <link href="TIAMWebApp.Client.styles.css" rel="stylesheet" />    
@ -33,7 +34,8 @@
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
-    <script src="_framework/blazor.webassembly.js"></script>    
+    <script src="_framework/blazor.webassembly.js"></script>
+    <script src="_content/TIAMSharedUI/blazorAnimationInterop.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>