diff --git a/README.md b/README.md
index 37c608b4c6a999d08b2294da91e62614f2a12ea7..2d2e929285e234cb6d24f7950a52cf557b66c113 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Aplikace pro muzea - MERLOT
 
-###### Jak zprovoznit projekt:
+## Jak zprovoznit projekt
 
 1. Stáhněte **PHPStorm** (zdarma přes školní licenci), **PHP** (ideálně verze 7.4 a výš, minimálně verze 7.2.5) a **Composer**. Všechny tyto nainstalujte (PHP se neinstaluje).
 2. Ve složce s PHP přejmenujte _php.ini-developement_ na _php.ini_ a v souboru odkomentujte všechny extension kromě _ffi_, _ftp_, _mbstring_, _exif_, _oci8_12c_, _openssl_, _pdo_firebird_, _pdo_oci_.
@@ -15,20 +15,61 @@
 8. V PHPStorm v **Run/Edit Configurations** přidejte **PHP Build-in Web Server** , jeho _document root_ je složka projektu a _use router script_ ukazuje na **server.php** ve stejné složce.
 9. Spusťte projekt projekt. Na localhost by vám měl vyjet nápis **Laravel** s funkčním menu.
 
-###### Jak zprovoznit databázi:
+## Jak zprovoznit databázi
 
 1. Zajistěte databázi se spojením určeným v souboru `.env`.
 2. Spusťte v terminálu (PHPStorm nebo cmd ve složce projektu) příkaz `php artisan migrate`.
 
-###### SQLite databáze: 
+### SQLite databáze
 
 1. Soubor SQLite databáze umístěte do `database\database.sqlite` (může to být i nový prázdný soubor).
 2. Pro připojení k databázi je v potřeba v souboru `.env` nastavit `DB_CONNECTION=sqlite` (ostatní nastavení pro databázi odstranit).
 3. Pro **čistou** migraci spusťte příkaz `php artisan migrate:fresh`.
 
-###### Jak zprovoznit bootstrap a kompilaci SASS souborĹŻ:
+### Seeding
+
+Pro vygenerování testovacích dat stačí spustit "seed".
+
+```shell script
+php artisan db:seed
+```
+
+Případně `php artisan migrate:refresh --seed`.
+
+Migrace dat z Mockaroo je tĂ­mto okamĹľikem obsolete.
+
+### Výchozí uživatel
+
+Je nadefinován výchozí (testovací) uživatel.
+
+**Login** admin@kaplicky.com **heslo** admin
+
+## Jak zprovoznit bootstrap a kompilaci SASS souborĹŻ
 
 1. Ujistěte se, že v sekci **Run/Edit Configurations** máte nastavený **Document root** na složku `public` v kořenovém adresáři (jinak aplikace **nenajde** vygenerované css soubory).
 2. Spusťte `composer install` (soubor pro composer už by měl být updatován) pro nainstalování balíčku `laravel/ui`.
 3. Spusťte v terminálu příkaz `npm install && npm run dev`, příkaz zkompiluje všechny dostupné sass (`resources/sass`) do css souboru typicky do složky `public/css`.
     1. Nastavením příkazu `npm run watch` se sass automaticky překompiluje při detekci změny.
+
+## Nastavení Mailtrap účtu pro odesílání registračních zpráv
+
+Pro správné nastavení posílání emailů je nutné poupravit soubor `.env`. Najděte v souboru sekci `MAIL_...` a nahraďte je níže uvedenými hodnotami:
+
+```shell script
+MAIL_MAILER=smtp
+MAIL_HOST=smtp.mailtrap.io
+MAIL_PORT=2525
+MAIL_USERNAME=d1eae987fe913e
+MAIL_PASSWORD=d109bc15f3dc66
+MAIL_ENCRYPTION=tls
+MAIL_FROM_ADDRESS=merlot@merlot.org
+MAIL_FROM_NAME="${APP_NAME}"
+```
+
+Pro přístup k mail serveru je nutné se příhlásit na stránce https://mailtrap.io/ s níže přidanými přihlašovacími údaji:
+
+email:`jnohac@students.zcu.cz`
+heslo:`merlot2020Betammajl`
+
+Následně je konkrétní mail server přístupný z Inboxu `Demo inbox`.
+
diff --git a/app/Artefact.php b/app/Artefact.php
index f946b934c2592ffd251ddffd2086c46a5d9d2de2..6b2763f50e42c7e5da5f1d27b17045465d92652a 100644
--- a/app/Artefact.php
+++ b/app/Artefact.php
@@ -7,18 +7,9 @@ use Illuminate\Database\Eloquent\Model;
 class Artefact extends Model
 {
     // Table Name
-    protected $table = 'artefacts';//unnecessery?
+    protected $table = 'artefacts';
     // Primary Key
-    public $primaryKey = 'id';//unnecessery?
-
-    /**
-     * The model's default values for attributes.
-     *
-     * @var array
-     */
-    /*protected $attributes = [
-        'likes' => 0,
-    ];*/
+    public $primaryKey = 'id';
 
     /**
      * Indicates if the model should be timestamped.
@@ -50,7 +41,4 @@ class Artefact extends Model
     {
         return $this->belongsToMany('App\User');
     }
-
-
-
 }
diff --git a/app/ArtefactCategory.php b/app/ArtefactCategory.php
new file mode 100644
index 0000000000000000000000000000000000000000..d69aaab05ce1552c0090bd8bf2df038669be13db
--- /dev/null
+++ b/app/ArtefactCategory.php
@@ -0,0 +1,22 @@
+<?php
+
+
+namespace App;
+
+
+use Illuminate\Database\Eloquent\Model;
+
+class ArtefactCategory extends Model
+{
+    // Table Name
+    protected $table = 'artefact_category';
+    // Primary Key
+    public $primaryKey = 'artefact_id';
+
+    /**
+     * Indicates if the model should be timestamped.
+     *
+     * @var bool
+     */
+    public $timestamps = false;
+}
diff --git a/app/ArtefactUser.php b/app/ArtefactUser.php
index ca0a18cfaffcc4c94859afabb6426fc1828ae744..45141528fee1f98ed83a4eaa1b57834587a5c4a4 100644
--- a/app/ArtefactUser.php
+++ b/app/ArtefactUser.php
@@ -1,15 +1,15 @@
 <?php
 
+
 namespace App;
 
-use Illuminate\Database\Eloquent\Model;
 
 class ArtefactUser extends Model
 {
     // Table Name
-    protected $table = 'artefact_user';//unnecessery?
+    protected $table = 'artefact_user';
     // Primary Key
-    public $primaryKey = 'artefact_id';//unnecessery?
+    public $primaryKey = 'artefact_id';
 
     /**
      * Indicates if the model should be timestamped.
@@ -17,8 +17,4 @@ class ArtefactUser extends Model
      * @var bool
      */
     public $timestamps = false;
-
-
-
-
 }
diff --git a/app/Category.php b/app/Category.php
index cb2d9c0ce52052e8cd112db38c50cf3fc7871d98..7912dbfa44bef6454b13ff4d714a3672165c6ad9 100644
--- a/app/Category.php
+++ b/app/Category.php
@@ -9,8 +9,7 @@ class Category extends Model
     // Table Name
     protected $table = 'categories';
     // Primary Key
-    public $primaryKey = 'id';//unnecessery?
-
+    public $primaryKey = 'id';
 
     /**
      * Indicates if the model should be timestamped.
@@ -20,12 +19,10 @@ class Category extends Model
     public $timestamps = false;
 
     /**
-     * Get the artefacts for the catagory.
+     * Get the artefacts for the category.
      */
     public function artefacts()
     {
         return $this->belongsToMany('App\Artefact');
     }
-
-
 }
diff --git a/app/Http/Controllers/ArtefactController.php b/app/Http/Controllers/ArtefactController.php
index 867d9769f181b839da7a556346f4eb2765161ad5..a09aba75a453409549d1f2fabfaa895ee449fccf 100644
--- a/app/Http/Controllers/ArtefactController.php
+++ b/app/Http/Controllers/ArtefactController.php
@@ -3,25 +3,111 @@
 namespace App\Http\Controllers;
 
 use App\Artefact;
-use Illuminate\Http\Request;
-use Illuminate\Support\Facades\DB;
+use App\ArtefactCategory;
+use App\Category;
+use App\User;
+use Illuminate\Contracts\View\Factory;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\View\View;
 
 class ArtefactController extends Controller
 {
+    const ORDER_COLUMN = 'page';
+
     public function __construct()
     {
         $this->middleware('auth');
     }
 
+    /**
+     * Prepare all necessary data for shown Artefact.
+     * These are current count of likes, if it set to
+     * a favorites by a logged user and all metadata
+     * connected to the artefact.
+     *
+     * @param       $artefacts  all artefacts
+     * @return      mixed       modified artefacts
+     */
+    public function prepData($artefacts)
+    {
+        foreach($artefacts as $artefact)
+        {
+            $artefact['likes'] = Artefact::find($artefact->id)->users()->count();
+            $artefact['favourite'] = is_null(User::find(Auth::id())->likesArtefacts()->find($artefact->id)) ? false : true;
+            $metadata = Artefact::find($artefact->id)->metadata()->orderBy(self::ORDER_COLUMN)->get();
+
+            foreach ($metadata as $item)
+            {
+                $item['favourite'] = is_null(User::find(Auth::id())->likesMetadata()->find($item->id)) ? false : true;
+            }
+
+            $artefact['metadata'] = $metadata;
+        }
+
+        return $artefacts;
+    }
+
     /**
      * Returns view of all artefacts.
      *
-     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+     * @return Factory|View
      */
     public function default()
     {
-        $artefacts = Artefact::all();
+        $artefacts = Artefact::simplePaginate(1);
+        $artefacts = $this->prepData($artefacts);
+        return view('artefact.default', ['artefacts' => $artefacts]);
+    }
 
+    /**
+     * Returns view of artefacts related to the chosen category
+     *
+     * @param $id id of the category
+     * @return Factory|View
+     */
+    public function showCategory($id)
+    {
+        $artefacts = Category::find($id)->artefacts()->simplePaginate(1);
+        $artefacts = $this->prepData($artefacts);
+        return view('artefact.default', ['artefacts' => $artefacts]);
+    }
+
+    /**
+     * Returns view of artefacts related to the chosen categories
+     *
+     * @param $id string with categories ids
+     * @return Factory|View
+     */
+    public function showCategories($id)
+    {
+        //Parsing text for individual ids of categories
+        $textWithIds  = $id;
+        $pieces = explode(",", $textWithIds);
+        $arrStrToInt = array();
+        for($i = 0;$i < count($pieces); $i++)
+        {
+            if($pieces[$i] == null || !strcmp($pieces[$i], ""))
+            {
+                continue;
+            }
+
+            array_push($arrStrToInt, (int)$pieces[$i]);
+        }
+
+        //Creating array of all artefacts ids
+        $arrArtIds = array();
+        foreach($arrStrToInt as $cat)
+        {
+            $tmpArtefacts = Category::find($cat)->artefacts()->get();
+            foreach($tmpArtefacts as $art)
+            {
+                array_push($arrArtIds, $art->id);
+            }
+        }
+
+        $artefacts = Artefact::whereIn('id', $arrArtIds)->simplePaginate(1);
+        $artefacts = $this->prepData($artefacts);
         return view('artefact.default', ['artefacts' => $artefacts]);
     }
 
@@ -29,12 +115,87 @@ class ArtefactController extends Controller
      * Returns view of single artefact given by its id.
      *
      * @param $id int id of the artefact
-     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+     * @return Factory|View
      */
     public function view($id)
     {
+        $artefact = Artefact::where('id', $id)->simplePaginate(1);
+        $artefact = $this->prepData($artefact);
+        //return view('artefact.view', ['artefact' => $artefact]);
+        return view('artefact.default', ['artefacts' => $artefact]);
+    }
+
+    /**
+     * Likes artefact given by its id.
+     *
+     * @param $id int id of metadata
+     * @return RedirectResponse
+     */
+    public function like($id)
+    {
+        $user = User::find(Auth::id());
         $artefact = Artefact::find($id);
 
-        return view('artefact.view', ['artefact' => $artefact]);
+        $user->likesArtefacts()->attach($artefact);
+
+        return back()->withInput();
     }
+
+    /**
+     * Unlikes artefact given by its id.
+     *
+     * @param $id int id of metadata
+     * @return RedirectResponse
+     */
+    public function unlike($id)
+    {
+        $user = User::find(Auth::id());
+        $artefact = Artefact::find($id);
+
+        $user->likesArtefacts()->detach($artefact);
+
+        return back()->withInput();
+    }
+
+    /**
+     * Returns artefact given by its id.
+     *
+     * @param $id int id of artefact
+     * @return RedirectResponse
+     */
+    /*public function view($id)
+    {
+        //$user = User::find(Auth::id());
+        //$artefact = Artefact::find($id);
+
+        $artefacts = Artefact::withCount('users')->orderByDesc('users_count')->get()->take(10);
+
+
+            $currentPage = -1; // You can set this to any page you want to paginate to
+
+            for($i=0;$i<10;$i++){
+                if($artefacts[$i]->id==$id) $currentPage = $i+1;
+            }
+            // Make sure that you call the static method currentPageResolver()
+            // before querying users
+            \Illuminate\Pagination\Paginator::currentPageResolver(function () use ($currentPage) {
+                return $currentPage;
+            });
+
+
+
+        $artefacts = Artefact::withCount('users')->orderByDesc('users_count')->limit(10)->paginate(1);
+
+        $artefacts = ArtefactController::prepData($artefacts);
+        return view('artefact.default', ['artefacts' => $artefacts]);
+        /*foreach($artefacts as $item)
+        {
+            $id = $item->id;
+            $item['likes'] = Artefact::find($id)->users()->count();
+            $item['favourite'] = is_null(User::find(Auth::id())->likesArtefacts()->find($id)) ? false : true;
+        }*/
+
+
+        //return back()->withInput();
+    /*}*/
 }
diff --git a/app/Http/Controllers/Auth/LoginController.php b/app/Http/Controllers/Auth/LoginController.php
index 18a0d088ae8c17960926578f539876764cfea417..f267a9c83e4763de91600f99517f968403ce36f9 100644
--- a/app/Http/Controllers/Auth/LoginController.php
+++ b/app/Http/Controllers/Auth/LoginController.php
@@ -26,7 +26,7 @@ class LoginController extends Controller
      *
      * @var string
      */
-    protected $redirectTo = RouteServiceProvider::HOME;
+    protected $redirectTo = RouteServiceProvider::CATEGORIES;
 
     /**
      * Create a new controller instance.
diff --git a/app/Http/Controllers/Auth/RegisterController.php b/app/Http/Controllers/Auth/RegisterController.php
index 3746d74d5296c2fc441bfb03a1011e5ba1a941a2..d6ff69f3af808b04dcf67249a382ba12c69f8caa 100644
--- a/app/Http/Controllers/Auth/RegisterController.php
+++ b/app/Http/Controllers/Auth/RegisterController.php
@@ -3,10 +3,13 @@
 namespace App\Http\Controllers\Auth;
 
 use App\Http\Controllers\Controller;
+use App\Mail\RegisterMail;
 use App\Providers\RouteServiceProvider;
 use App\User;
+use Illuminate\Routing\UrlGenerator;
 use Illuminate\Foundation\Auth\RegistersUsers;
 use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Mail;
 use Illuminate\Support\Facades\Validator;
 
 class RegisterController extends Controller
@@ -64,12 +67,18 @@ class RegisterController extends Controller
      */
     protected function create(array $data)
     {
-        //dd($data);
+        $stringH = Hash::make($data['email'] . $data['name']);
+        $vowels = array("/", "\\");
+        $stringHModified = str_replace($vowels, "", $stringH);
+
+        //Mail::to($data['email'])->send(new RegisterMail("http://localhost/verify/". $stringHModified));
+        Mail::to($data['email'])->send(new RegisterMail(url("/verify/") . "/" . $stringHModified));//http://localhost/register/verify/..
 
         return User::create([
             'name' => $data['name'],
             'email' => $data['email'],
             'password' => Hash::make($data['password']),
+            'register_hash' => $stringHModified,
         ]);
     }
 }
diff --git a/app/Http/Controllers/CategoriesController.php b/app/Http/Controllers/CategoriesController.php
new file mode 100644
index 0000000000000000000000000000000000000000..0bdebe6edcc2feb0b7ddfe957c50b9a5cb9fe6ea
--- /dev/null
+++ b/app/Http/Controllers/CategoriesController.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\ArtefactCategory;
+use App\Category;
+use Illuminate\Support\Facades\Auth;
+use App\User;
+
+class CategoriesController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        if(isset(Auth::user()->id))
+        {
+            $userId = Auth::user()->id;
+
+            $categoryNames = Category::orderBy('id')->get();
+            $countCategory = count($categoryNames);
+
+            $data = array(
+                'title' => 'Categories',
+                'user' => User::find($userId),
+                'count' => $countCategory,
+                'categoryNames' => $categoryNames
+            );
+            return view('categories.index') -> with($data);
+        }
+        else
+        {
+            $data = array(
+                'title' => 'Welcome to the MERLOT page',
+            );
+            return view('pages.index') -> with($data);
+        }
+    }
+}
diff --git a/app/Http/Controllers/ChartsController.php b/app/Http/Controllers/ChartsController.php
new file mode 100644
index 0000000000000000000000000000000000000000..20686d187ca615b9dc1c9458beb68a4ea549b11d
--- /dev/null
+++ b/app/Http/Controllers/ChartsController.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\User;
+use Illuminate\Contracts\Foundation\Application;
+use Illuminate\Contracts\View\Factory;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Support\Facades\Auth;
+use App\Http\Controllers\Image;
+use Illuminate\View\View;
+use App\Artefact;
+
+class ChartsController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    /**
+     * Display a listing of the resource.
+     *
+     * @return Application|Factory|View
+     */
+    public function index()
+    {
+        if(Auth::check())
+        {
+            $artefacts = Artefact::withCount('users')->orderByDesc('users_count')->get()->take(10);
+            foreach($artefacts as $item)
+            {
+                $id = $item->id;
+                $item['likes'] = Artefact::find($id)->users()->count();
+                $item['favourite'] = is_null(User::find(Auth::id())->likesArtefacts()->find($id)) ? false : true;
+            }
+
+            $data = array(
+                'title' => 'Charts',
+                'artefacts' => $artefacts
+            );
+            return view('charts.index') -> with($data);
+        }
+        else
+        {
+            $data = array(
+                'title' => 'Welcome to the MERLOT page',
+            );
+            //return view('index', compact('title'));
+            return view('pages.index') -> with($data);
+        }
+    }
+
+
+}
diff --git a/app/Http/Controllers/DetailsController.php b/app/Http/Controllers/DetailsController.php
index c2d0bf765e795e12ddabed6a8350f03b1cfcb180..4cef5e3e33cf314ee74e22a905ce735ac090ae87 100644
--- a/app/Http/Controllers/DetailsController.php
+++ b/app/Http/Controllers/DetailsController.php
@@ -3,12 +3,16 @@
 namespace App\Http\Controllers;
 
 use App\ArtefactUser;
+use App\User;
 use Illuminate\Http\Request;
 use App\Metadata;
 use App\Artefact;
+use Illuminate\Support\Facades\Auth;
 
 class DetailsController extends Controller
 {
+    const ORDER_COLUMN = 'page';
+
     public function __construct()
     {
         $this->middleware('auth');
@@ -32,17 +36,53 @@ class DetailsController extends Controller
      * Display the specified resource.
      *
      * @param  int  $id
-     * @return \Illuminate\Http\Response
+     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
      */
     public function show($id)
     {
-        $data = array(
-            'id' => $id,
-            'arrArtefact' => Artefact::find($id),
-            'likes' => ArtefactUser::where('artefact_id', $id)->count(),
-            'metadata' => Metadata::where('artefact_id', $id)->get()
-        );
-        return view('detail.index') -> with($data);
+        if (is_null(Artefact::find($id)))
+        {
+            return view('detail.index', ['metadata' => []]);
+        }
+
+        $metadata = Artefact::find($id)->metadata()->orderBy(self::ORDER_COLUMN)->get();
+        foreach($metadata as $item)
+        {
+            $item['favourite'] = is_null(User::find(Auth::id())->likesMetadata()->find($item->id)) ? false : true;
+        }
+
+        return view('detail.index', ['metadata' => $metadata]);
     }
 
+    /**
+     * Likes metadata given by its id.
+     *
+     * @param $id int id of metadata
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function like($id)
+    {
+        $user = User::find(Auth::id());
+        $metadata = Metadata::find($id);
+
+        $user->likesMetadata()->attach($metadata);
+
+        return back()->withInput();
+    }
+
+    /**
+     * Unlikes metadata given by its id.
+     *
+     * @param $id int id of metadata
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function unlike($id)
+    {
+        $user = User::find(Auth::id());
+        $metadata = Metadata::find($id);
+
+        $user->likesMetadata()->detach($metadata);
+
+        return back()->withInput();
+    }
 }
diff --git a/app/Http/Controllers/FavoriteArtefactsController.php b/app/Http/Controllers/FavoriteArtefactsController.php
new file mode 100644
index 0000000000000000000000000000000000000000..6d050d5c0cbcd2962c0ee3b9aea0751348200937
--- /dev/null
+++ b/app/Http/Controllers/FavoriteArtefactsController.php
@@ -0,0 +1,80 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Contracts\Foundation\Application;
+use Illuminate\Contracts\View\Factory;
+use Illuminate\Support\Facades\Auth;
+use App\User;
+use App\Artefact;
+use App\Http\Controllers\Image;
+use Illuminate\View\View;
+
+class FavoriteArtefactsController extends Controller
+{
+    const ORDER_COLUMN = 'page';
+
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    /**
+     * Prepare all necessary data for shown Artefact.
+     * These are current count of likes, if it set to
+     * a favorites by a logged user and all metadata
+     * connected to the artefact.
+     *
+     * @param       $artefacts  all artefacts
+     * @return      mixed       modified artefacts
+     */
+    public function prepData($artefacts)
+    {
+        foreach($artefacts as $artefact)
+        {
+            $artefact['likes'] = Artefact::find($artefact->id)->users()->count();
+            $artefact['favourite'] = is_null(User::find(Auth::id())->likesArtefacts()->find($artefact->id)) ? false : true;
+            $metadata = Artefact::find($artefact->id)->metadata()->orderBy(self::ORDER_COLUMN)->get();
+            foreach ($metadata as $item)
+            {
+                $item['favourite'] = is_null(User::find(Auth::id())->likesMetadata()->find($item->id)) ? false : true;
+            }
+            $artefact['metadata'] = $metadata;
+        }
+        return $artefacts;
+    }
+
+    /**
+     * Display a listing of the resource.
+     *
+     * @return Application|Factory|View
+     */
+    public function index()
+    {
+        if(Auth::check())
+        {
+            $id = Auth::id();
+            $artefacts = User::find($id)->likesArtefacts()->simplePaginate(1);
+            $artefacts = $this->prepData($artefacts);
+            return view('artefact.default', ['artefacts' => $artefacts]);
+        }
+        else
+        {
+            return view('pages.index');
+        }
+    }
+
+    /**
+     * Display the specified resource.
+     *
+     * @param  int  $id
+     * @return Application|Factory|View
+     */
+    public function show($id)
+    {
+        $artefacts = User::find($id)->likesArtefacts()->simplePaginate(1);
+        $artefacts = $this->prepData($artefacts);
+        return view('artefact.default', ['artefacts' => $artefacts]);
+    }
+
+}
diff --git a/app/Http/Controllers/FavoriteMetadataController.php b/app/Http/Controllers/FavoriteMetadataController.php
new file mode 100644
index 0000000000000000000000000000000000000000..00b5369e8a582ca937ac7a8e52d80d4b48dec6b9
--- /dev/null
+++ b/app/Http/Controllers/FavoriteMetadataController.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Metadata;
+use App\User;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class FavoriteMetadataController extends Controller
+{
+    const ORDER_COLUMN = 'page';
+
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    /**
+     * Show list of favourite metadata.
+     *
+     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+     */
+    public function index()
+    {
+        $metadata = User::find(Auth::id())->likesMetadata()->orderBy(self::ORDER_COLUMN)->get();
+        foreach($metadata as $item)
+        {
+            $item['artefact'] = Metadata::find($item->id)->artefact()->first();
+        }
+
+        return view('favmetadata.index', ['metadata' => $metadata]);
+    }
+
+    /**
+     * Unlike metadata given by its id.
+     *
+     * @param $id int id of metadata
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function unlike($id)
+    {
+        $user = User::find(Auth::id());
+        $metadata = Metadata::find($id);
+
+        $user->likesMetadata()->detach($metadata);
+
+        return back()->withInput();
+    }
+
+}
diff --git a/app/Http/Controllers/VerifyRegisterController.php b/app/Http/Controllers/VerifyRegisterController.php
new file mode 100644
index 0000000000000000000000000000000000000000..a061fb77f3a54f0c836631a51bfc65abdc3a8f85
--- /dev/null
+++ b/app/Http/Controllers/VerifyRegisterController.php
@@ -0,0 +1,58 @@
+<?php
+
+
+namespace App\Http\Controllers;
+
+
+use App\User;
+use Illuminate\Contracts\View\Factory;
+use Illuminate\View\View;
+
+class VerifyRegisterController extends Controller
+{
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    /**
+     * Verify registration link with time and user database,
+     * if the user exists. If everything checks out, the user's
+     * account will be activated.
+     *
+     * @param $id string hash of created user
+     * @return Factory|View
+     */
+    public function verifyUser($id)
+    {
+        $userV = User::where('register_hash', $id)->get();
+        $text = "";
+        if(!$userV->isEmpty())
+        {
+            $created = $userV[0]->created_at;
+            $now = date('Y-m-d h:i:s');
+            $interval = $created->diff($now);
+
+            if($interval->d >= 2)
+            {
+                $text = "Registration link expired!\n Need to create new account";
+                $userV[0]->delete();
+            }
+            else if(isset($userV[0]->email_verified_at))
+            {
+                $text = "Registration link already activated!";
+            }
+            else
+            {
+                $userV[0]->email_verified_at = date('Y-m-d h:i:s');
+                $userV[0]->save();
+                $text = "Registration of the user " . $userV[0]->name . " has been successful.";
+            }
+        }
+        else
+        {
+            $text = "The link is not valid!";
+        }
+        return view('verify.index', ['text' => $text]);
+    }
+}
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
index c3640f30b87df218bf607ab76eb06ee4601b7f5c..5af742512c533b305ffc4d2cc774d957949d56b2 100644
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -17,6 +17,8 @@ class Kernel extends HttpKernel
         \App\Http\Middleware\TrustProxies::class,
         \Fruitcake\Cors\HandleCors::class,
         \App\Http\Middleware\CheckForMaintenanceMode::class,
+        //\Illuminate\Session\Middleware\StartSession::class,
+        //\Illuminate\View\Middleware\ShareErrorsFromSession::class,
         \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
         \App\Http\Middleware\TrimStrings::class,
         \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
diff --git a/app/Mail/RegisterMail.php b/app/Mail/RegisterMail.php
new file mode 100644
index 0000000000000000000000000000000000000000..cca8861310c39b28182b9efbbd7b66d05a6e33af
--- /dev/null
+++ b/app/Mail/RegisterMail.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Mail;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Mail\Mailable;
+use Illuminate\Queue\SerializesModels;
+
+class RegisterMail extends Mailable
+{
+    use Queueable, SerializesModels;
+
+    public $stringHash;
+
+    /**
+     * Create a new message instance.
+     *
+     * @return void
+     */
+    public function __construct($stringH)
+    {
+        $this->stringHash = $stringH;
+    }
+
+    /**
+     * Build the message.
+     *
+     * @return $this
+     */
+    public function build()
+    {
+        return $this->markdown('email.register');
+    }
+}
diff --git a/app/Metadata.php b/app/Metadata.php
index 6dd1774a4c9261f9c04f27289944e68823448e12..120ce6b98530ffc2a8ce7775abb05d6834167ef6 100644
--- a/app/Metadata.php
+++ b/app/Metadata.php
@@ -7,18 +7,9 @@ use Illuminate\Database\Eloquent\Model;
 class Metadata extends Model
 {
     // Table Name
-    protected $table = 'metadata';//same name could make problems
+    protected $table = 'metadata';
     // Primary Key
-    public $primaryKey = 'id';//unnecessery?
-
-    /**
-     * The model's default values for attributes.
-     *
-     * @var array
-     */
-    /*protected $attributes = [
-        'likes' => 0,
-    ];*/
+    public $primaryKey = 'id';
 
     /**
      * Indicates if the model should be timestamped.
@@ -34,5 +25,11 @@ class Metadata extends Model
         return $this->belongsTo('App\Artefact');
     }
 
-
+    /**
+     * Get the users for the metadata.
+     */
+    public function users()
+    {
+        return $this->belongsToMany('App\User');
+    }
 }
diff --git a/app/Providers/RouteServiceProvider.php b/app/Providers/RouteServiceProvider.php
index f29d8a11a841bc164d819a99ade52a9116d9f77b..b3a9b77bb3962258a291c18c9396fb9bf135c6f0 100644
--- a/app/Providers/RouteServiceProvider.php
+++ b/app/Providers/RouteServiceProvider.php
@@ -23,6 +23,13 @@ class RouteServiceProvider extends ServiceProvider
      */
     public const HOME = '/artefact';
 
+    /**
+     * The path to categories.
+     *
+     * @var string
+     */
+    public const CATEGORIES = '/categories';
+
     /**
      * Define your route model bindings, pattern filters, etc.
      *
diff --git a/app/User.php b/app/User.php
index c9e3967805fb92f9272e8253fad2955cc28aaeab..469eec292ec0a88acbe6e7976f2e18892ca408fb 100644
--- a/app/User.php
+++ b/app/User.php
@@ -2,7 +2,6 @@
 
 namespace App;
 
-use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 
@@ -13,7 +12,7 @@ class User extends Authenticatable
     // Table Name
     protected $table = 'users';
     // Primary Key
-    public $primaryKey = 'id';//unnecessery?
+    public $primaryKey = 'id';
 
     /**
      * The attributes that are mass assignable.
@@ -21,7 +20,7 @@ class User extends Authenticatable
      * @var array
      */
     protected $fillable = [
-         'name', 'email', 'password'
+         'name', 'email', 'password', 'register_hash'
     ];
 
     /**
@@ -45,8 +44,16 @@ class User extends Authenticatable
     /**
      * Get the artefacts for the user.
      */
-    public function likes()
+    public function likesArtefacts()
     {
-        return $this->hasMany('App\Artefact');
+        return $this->belongsToMany('App\Artefact');
+    }
+
+    /**
+     * Get the metadata for the user.
+     */
+    public function likesMetadata()
+    {
+        return $this->belongsToMany('App\Metadata');
     }
 }
diff --git a/composer.json b/composer.json
index 381c5bae485d97522eeda6833aba9ec0e8e644b6..468e98e880773d45db80720b1ae788e3ef549332 100644
--- a/composer.json
+++ b/composer.json
@@ -14,7 +14,8 @@
         "guzzlehttp/guzzle": "^6.3",
         "laravel/framework": "^7.0",
         "laravel/tinker": "^2.0",
-        "laravel/ui": "^2.0"
+        "laravel/ui": "^2.0",
+        "spatie/laravel-cookie-consent": "^2.12"
     },
     "require-dev": {
         "facade/ignition": "^2.0",
diff --git a/composer.lock b/composer.lock
index e293684c5ef44ab7eeee203f0951c6772463fe77..2c22fd44e64f1f9a06f08ac92a1671f56733caa3 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "f0dcbdc80776ca79d6311b8f92c5a4b5",
+    "content-hash": "f58cabd0613b5fb1c84929018285ce2e",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -1966,6 +1966,73 @@
             ],
             "time": "2020-02-21T04:36:14+00:00"
         },
+        {
+            "name": "spatie/laravel-cookie-consent",
+            "version": "2.12.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/laravel-cookie-consent.git",
+                "reference": "e455e6b45c68464ab8aad585ed51d1a098f967e4"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/laravel-cookie-consent/zipball/e455e6b45c68464ab8aad585ed51d1a098f967e4",
+                "reference": "e455e6b45c68464ab8aad585ed51d1a098f967e4",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/cookie": "~5.8.0|^6.0|^7.0",
+                "illuminate/support": "~5.8.0|^6.0|^7.0",
+                "illuminate/view": "~5.8.0|^6.0|^7.0",
+                "php": "^7.2"
+            },
+            "require-dev": {
+                "fzaninotto/faker": "~1.4",
+                "orchestra/testbench": "~3.8.0|^4.0|^5.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Spatie\\CookieConsent\\CookieConsentServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\CookieConsent\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Freek Van der Herten",
+                    "email": "freek@spatie.be",
+                    "homepage": "https://spatie.be",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Willem Van Bockstal",
+                    "email": "willem@spatie.be",
+                    "homepage": "https://spatie.be",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Make your Laravel app comply with the crazy EU cookie law",
+            "homepage": "https://github.com/spatie/cookie-consent",
+            "keywords": [
+                "comply",
+                "cookie",
+                "cookie-consent",
+                "eu",
+                "law",
+                "spatie"
+            ],
+            "time": "2020-05-14T16:57:04+00:00"
+        },
         {
             "name": "swiftmailer/swiftmailer",
             "version": "v6.2.3",
@@ -5506,6 +5573,5 @@
     "platform": {
         "php": "^7.2.5"
     },
-    "platform-dev": [],
-    "plugin-api-version": "1.1.0"
+    "platform-dev": []
 }
diff --git a/database/factories/ArtefactFactory.php b/database/factories/ArtefactFactory.php
new file mode 100644
index 0000000000000000000000000000000000000000..14366ea7ea21924b25ce766eda341bc96e136e87
--- /dev/null
+++ b/database/factories/ArtefactFactory.php
@@ -0,0 +1,21 @@
+<?php
+
+/** @var Factory $factory */
+/** @var Faker $faker */
+
+use App\Artefact;
+use App\Category;
+use Faker\Generator as Faker;
+use Illuminate\Database\Eloquent\Factory;
+
+$factory->define(Artefact::class, function ($faker) {
+    return [
+        'name' => $faker->words($nb = 3, $asText = true),
+        'author' => $faker->name,
+        'made_in' => $faker->countryCode,
+        'publisher' => $faker->company,
+        'year' => rand(1800, 2020),
+        'pages' => rand(0, 2000),
+        'main_category_id' => factory(Category::class)->create()->id,
+    ];
+});
diff --git a/database/factories/CategoryFactory.php b/database/factories/CategoryFactory.php
new file mode 100644
index 0000000000000000000000000000000000000000..3879434e86a216ce24ec36b88f206a7621d95578
--- /dev/null
+++ b/database/factories/CategoryFactory.php
@@ -0,0 +1,14 @@
+<?php
+
+/** @var Factory $factory */
+
+use App\Category;
+use Faker\Generator as Faker;
+use Illuminate\Database\Eloquent\Factory;
+
+$factory->define(Category::class, function (Faker $faker) {
+    return [
+        'nameCZ' => $faker->colorName,
+        'nameEN' => $faker->hexColor,
+    ];
+});
diff --git a/database/factories/MetadataFactory.php b/database/factories/MetadataFactory.php
new file mode 100644
index 0000000000000000000000000000000000000000..58693a5169c7da2bc4511f89b13989ced78aaa7b
--- /dev/null
+++ b/database/factories/MetadataFactory.php
@@ -0,0 +1,19 @@
+<?php
+
+/** @var Factory $factory */
+/** @var Faker $faker */
+
+use App\Artefact;
+use App\Metadata;
+use Faker\Generator as Faker;
+use Illuminate\Database\Eloquent\Factory;
+
+$factory->define(Metadata::class, function ($faker) use ($factory) {
+    return [
+        'name' => $faker->streetName,
+        'noteCZ' => $faker->paragraph,
+        'noteEN' => $faker->paragraph,
+        'page' => rand(0, 2000),
+        'artefact_id' => factory(Artefact::class)->create()->id
+    ];
+});
diff --git a/database/factories/UserFactory.php b/database/factories/UserFactory.php
index 741edead6192a670fb2b10e4fbf303ab2ab3be12..d0835e1c8edf36234b5b13ef46aaf9466e2f7199 100644
--- a/database/factories/UserFactory.php
+++ b/database/factories/UserFactory.php
@@ -1,9 +1,10 @@
 <?php
 
-/** @var \Illuminate\Database\Eloquent\Factory $factory */
+/** @var Factory $factory */
 
 use App\User;
 use Faker\Generator as Faker;
+use Illuminate\Database\Eloquent\Factory;
 use Illuminate\Support\Str;
 
 /*
@@ -22,7 +23,10 @@ $factory->define(User::class, function (Faker $faker) {
         'name' => $faker->name,
         'email' => $faker->unique()->safeEmail,
         'email_verified_at' => now(),
-        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
+        'password' => bcrypt($faker->unique()->password),
         'remember_token' => Str::random(10),
+        'created_at' => now(),
+        'updated_at' => now(),
+        'register_hash' => Str::random(10),
     ];
 });
diff --git a/database/migrations/2020_04_06_000000_CreateUsersTable.php b/database/migrations/2020_04_06_000000_CreateUsersTable.php
index 89604d633b5a4496cc0690cbf5ec0ecbaf3cf501..a7bdd89c28431eaabb13ae95dcec204def39b9fc 100644
--- a/database/migrations/2020_04_06_000000_CreateUsersTable.php
+++ b/database/migrations/2020_04_06_000000_CreateUsersTable.php
@@ -23,6 +23,7 @@ class CreateUsersTable extends Migration
             $table->string('password');
             $table->rememberToken();
             $table->timestamps();
+            $table->string('register_hash');
         });
     }
 
diff --git a/database/migrations/2020_04_10_000000_CreateMetadataUserTable.php b/database/migrations/2020_04_10_000000_CreateMetadataUserTable.php
new file mode 100644
index 0000000000000000000000000000000000000000..c95ebf725d6f48ef6e8963a8d32e96f7fc8a0298
--- /dev/null
+++ b/database/migrations/2020_04_10_000000_CreateMetadataUserTable.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateMetadataUserTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('metadata_user', function (Blueprint $table) {
+            $table->unsignedBigInteger('metadata_id');
+            $table->unsignedBigInteger('user_id');
+            $table->foreign('metadata_id')->references('id')->on('metadata');
+            $table->foreign('user_id')->references('id')->on('users');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('metadata_user');
+    }
+}
diff --git a/database/seeds/DatabaseSeeder.php b/database/seeds/DatabaseSeeder.php
index 91cb6d1c2dede4151cd947c27d31f2faa7ab5a8b..bb769ec459f21a965bf80e613c8e64780b692ecc 100644
--- a/database/seeds/DatabaseSeeder.php
+++ b/database/seeds/DatabaseSeeder.php
@@ -1,6 +1,8 @@
 <?php
 
 use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Str;
 
 class DatabaseSeeder extends Seeder
 {
@@ -11,6 +13,56 @@ class DatabaseSeeder extends Seeder
      */
     public function run()
     {
-        // $this->call(UsersTableSeeder::class);
+        DB::table('users')->insert([
+            'name' => 'admin',
+            'email' => 'admin@kaplicky.com',
+            'email_verified_at' => now(),
+            'password' => bcrypt('admin'),
+            'remember_token' => Str::random(10),
+            'created_at' => now(),
+            'updated_at' => now(),
+            'register_hash' => Str::random(10),
+        ]);
+
+        // Populate users
+        factory(App\User::class, 19)->create();
+
+        // Populate categories
+        factory(App\Category::class, 80)->create();
+
+        // Populate artefacts with metadata
+        factory(App\Artefact::class, 300)->create()->each(function ($u) {
+            $u->metadata()->saveMany(factory(App\Metadata::class, 10)->make());
+        });
+
+        // Get all the categories attaching up to 1 random categories to each user
+        $categories = App\Category::all();
+
+        // Populate the artefact_category pivot table
+        App\Artefact::all()->each(function ($artefact) use ($categories) {
+            $artefact->categories()->attach(
+                $categories->random(1)->pluck('id')->toArray()
+            );
+        });
+
+        // Get all the metadata attaching up to 50 random metadata to each user
+        $artefacts = App\Metadata::all();
+
+        // Populate the artefact_user pivot table
+        App\User::all()->each(function ($user) use ($artefacts) {
+            $user->likesArtefacts()->attach(
+                $artefacts->random(rand(1, 50))->pluck('id')->toArray()
+            );
+        });
+
+        // Get all the metadata attaching up to 50 random metadata to each user
+        $metadata = App\Metadata::all();
+
+        // Populate the metadata_user pivot table
+        App\User::all()->each(function ($user) use ($metadata) {
+            $user->likesMetadata()->attach(
+                $metadata->random(rand(1, 50))->pluck('id')->toArray()
+            );
+        });
     }
 }
diff --git a/public/css/app.css b/public/css/app.css
index 9d8d10bbdfa81d136e5da449287dcd692a806c41..1570d5cab4b8ae24f4ef7e644c39872b2d970305 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1,4 +1,4 @@
-@import url(https://fonts.googleapis.com/css?family=Nunito);@charset "UTF-8";
+@import url(https://fonts.googleapis.com/css?family=Nunito);@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap);@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap);@charset "UTF-8";
 
 /*!
  * Bootstrap v4.4.1 (https://getbootstrap.com/)
@@ -18,7 +18,7 @@
   --green: #38c172;
   --teal: #4dc0b5;
   --cyan: #6cb2eb;
-  --white: #fff;
+  --white: #ffffff;
   --gray: #6c757d;
   --gray-dark: #343a40;
   --primary: #3490dc;
@@ -34,7 +34,7 @@
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
-  --font-family-sans-serif: "Nunito", sans-serif;
+  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
@@ -66,7 +66,7 @@ section {
 
 body {
   margin: 0;
-  font-family: "Nunito", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.9rem;
   font-weight: 400;
   line-height: 1.6;
@@ -546,7 +546,7 @@ a > code {
 kbd {
   padding: 0.2rem 0.4rem;
   font-size: 87.5%;
-  color: #fff;
+  color: #ffffff;
   background-color: #212529;
   border-radius: 0.2rem;
 }
@@ -2049,7 +2049,7 @@ pre code {
 }
 
 .table .thead-dark th {
-  color: #fff;
+  color: #ffffff;
   background-color: #343a40;
   border-color: #454d55;
 }
@@ -2061,7 +2061,7 @@ pre code {
 }
 
 .table-dark {
-  color: #fff;
+  color: #ffffff;
   background-color: #343a40;
 }
 
@@ -2080,7 +2080,7 @@ pre code {
 }
 
 .table-dark.table-hover tbody tr:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: rgba(255, 255, 255, 0.075);
 }
 
@@ -2156,7 +2156,7 @@ pre code {
   font-weight: 400;
   line-height: 1.6;
   color: #495057;
-  background-color: #fff;
+  background-color: #ffffff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
@@ -2181,7 +2181,7 @@ pre code {
 
 .form-control:focus {
   color: #495057;
-  background-color: #fff;
+  background-color: #ffffff;
   border-color: #a1cbef;
   outline: 0;
   box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
@@ -2220,7 +2220,7 @@ pre code {
 
 select.form-control:focus::-ms-value {
   color: #495057;
-  background-color: #fff;
+  background-color: #ffffff;
 }
 
 .form-control-file,
@@ -2370,7 +2370,7 @@ textarea.form-control {
   margin-top: 0.1rem;
   font-size: 0.7875rem;
   line-height: 1.6;
-  color: #fff;
+  color: #ffffff;
   background-color: rgba(56, 193, 114, 0.9);
   border-radius: 0.25rem;
 }
@@ -2408,7 +2408,7 @@ textarea.form-control.is-valid {
 .custom-select.is-valid {
   border-color: #38c172;
   padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2338c172' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2338c172' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #ffffff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
 }
 
 .was-validated .custom-select:valid:focus,
@@ -2484,7 +2484,7 @@ textarea.form-control.is-valid {
   margin-top: 0.1rem;
   font-size: 0.7875rem;
   line-height: 1.6;
-  color: #fff;
+  color: #ffffff;
   background-color: rgba(227, 52, 47, 0.9);
   border-radius: 0.25rem;
 }
@@ -2522,7 +2522,7 @@ textarea.form-control.is-invalid {
 .custom-select.is-invalid {
   border-color: #e3342f;
   padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e3342f' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e3342f' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e3342f' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e3342f' stroke='none'/%3e%3c/svg%3e") #ffffff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
 }
 
 .was-validated .custom-select:invalid:focus,
@@ -2695,20 +2695,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-primary {
-  color: #fff;
+  color: #ffffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
 
 .btn-primary:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: #227dc7;
   border-color: #2176bd;
 }
 
 .btn-primary:focus,
 .btn-primary.focus {
-  color: #fff;
+  color: #ffffff;
   background-color: #227dc7;
   border-color: #2176bd;
   box-shadow: 0 0 0 0.2rem rgba(82, 161, 225, 0.5);
@@ -2716,7 +2716,7 @@ fieldset:disabled a.btn {
 
 .btn-primary.disabled,
 .btn-primary:disabled {
-  color: #fff;
+  color: #ffffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -2724,7 +2724,7 @@ fieldset:disabled a.btn {
 .btn-primary:not(:disabled):not(.disabled):active,
 .btn-primary:not(:disabled):not(.disabled).active,
 .show > .btn-primary.dropdown-toggle {
-  color: #fff;
+  color: #ffffff;
   background-color: #2176bd;
   border-color: #1f6fb2;
 }
@@ -2736,20 +2736,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-secondary {
-  color: #fff;
+  color: #ffffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
 
 .btn-secondary:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: #5a6268;
   border-color: #545b62;
 }
 
 .btn-secondary:focus,
 .btn-secondary.focus {
-  color: #fff;
+  color: #ffffff;
   background-color: #5a6268;
   border-color: #545b62;
   box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
@@ -2757,7 +2757,7 @@ fieldset:disabled a.btn {
 
 .btn-secondary.disabled,
 .btn-secondary:disabled {
-  color: #fff;
+  color: #ffffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
@@ -2765,7 +2765,7 @@ fieldset:disabled a.btn {
 .btn-secondary:not(:disabled):not(.disabled):active,
 .btn-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-secondary.dropdown-toggle {
-  color: #fff;
+  color: #ffffff;
   background-color: #545b62;
   border-color: #4e555b;
 }
@@ -2777,20 +2777,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-success {
-  color: #fff;
+  color: #ffffff;
   background-color: #38c172;
   border-color: #38c172;
 }
 
 .btn-success:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: #2fa360;
   border-color: #2d995b;
 }
 
 .btn-success:focus,
 .btn-success.focus {
-  color: #fff;
+  color: #ffffff;
   background-color: #2fa360;
   border-color: #2d995b;
   box-shadow: 0 0 0 0.2rem rgba(86, 202, 135, 0.5);
@@ -2798,7 +2798,7 @@ fieldset:disabled a.btn {
 
 .btn-success.disabled,
 .btn-success:disabled {
-  color: #fff;
+  color: #ffffff;
   background-color: #38c172;
   border-color: #38c172;
 }
@@ -2806,7 +2806,7 @@ fieldset:disabled a.btn {
 .btn-success:not(:disabled):not(.disabled):active,
 .btn-success:not(:disabled):not(.disabled).active,
 .show > .btn-success.dropdown-toggle {
-  color: #fff;
+  color: #ffffff;
   background-color: #2d995b;
   border-color: #2a9055;
 }
@@ -2824,14 +2824,14 @@ fieldset:disabled a.btn {
 }
 
 .btn-info:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: #4aa0e6;
   border-color: #3f9ae5;
 }
 
 .btn-info:focus,
 .btn-info.focus {
-  color: #fff;
+  color: #ffffff;
   background-color: #4aa0e6;
   border-color: #3f9ae5;
   box-shadow: 0 0 0 0.2rem rgba(97, 157, 206, 0.5);
@@ -2847,7 +2847,7 @@ fieldset:disabled a.btn {
 .btn-info:not(:disabled):not(.disabled):active,
 .btn-info:not(:disabled):not(.disabled).active,
 .show > .btn-info.dropdown-toggle {
-  color: #fff;
+  color: #ffffff;
   background-color: #3f9ae5;
   border-color: #3495e3;
 }
@@ -2900,20 +2900,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-danger {
-  color: #fff;
+  color: #ffffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
 
 .btn-danger:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: #d0211c;
   border-color: #c51f1a;
 }
 
 .btn-danger:focus,
 .btn-danger.focus {
-  color: #fff;
+  color: #ffffff;
   background-color: #d0211c;
   border-color: #c51f1a;
   box-shadow: 0 0 0 0.2rem rgba(231, 82, 78, 0.5);
@@ -2921,7 +2921,7 @@ fieldset:disabled a.btn {
 
 .btn-danger.disabled,
 .btn-danger:disabled {
-  color: #fff;
+  color: #ffffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
@@ -2929,7 +2929,7 @@ fieldset:disabled a.btn {
 .btn-danger:not(:disabled):not(.disabled):active,
 .btn-danger:not(:disabled):not(.disabled).active,
 .show > .btn-danger.dropdown-toggle {
-  color: #fff;
+  color: #ffffff;
   background-color: #c51f1a;
   border-color: #b91d19;
 }
@@ -2982,20 +2982,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-dark {
-  color: #fff;
+  color: #ffffff;
   background-color: #343a40;
   border-color: #343a40;
 }
 
 .btn-dark:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: #23272b;
   border-color: #1d2124;
 }
 
 .btn-dark:focus,
 .btn-dark.focus {
-  color: #fff;
+  color: #ffffff;
   background-color: #23272b;
   border-color: #1d2124;
   box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
@@ -3003,7 +3003,7 @@ fieldset:disabled a.btn {
 
 .btn-dark.disabled,
 .btn-dark:disabled {
-  color: #fff;
+  color: #ffffff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -3011,7 +3011,7 @@ fieldset:disabled a.btn {
 .btn-dark:not(:disabled):not(.disabled):active,
 .btn-dark:not(:disabled):not(.disabled).active,
 .show > .btn-dark.dropdown-toggle {
-  color: #fff;
+  color: #ffffff;
   background-color: #1d2124;
   border-color: #171a1d;
 }
@@ -3028,7 +3028,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-primary:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -3047,7 +3047,7 @@ fieldset:disabled a.btn {
 .btn-outline-primary:not(:disabled):not(.disabled):active,
 .btn-outline-primary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-primary.dropdown-toggle {
-  color: #fff;
+  color: #ffffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -3064,7 +3064,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-secondary:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
@@ -3083,7 +3083,7 @@ fieldset:disabled a.btn {
 .btn-outline-secondary:not(:disabled):not(.disabled):active,
 .btn-outline-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-secondary.dropdown-toggle {
-  color: #fff;
+  color: #ffffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
@@ -3100,7 +3100,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-success:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: #38c172;
   border-color: #38c172;
 }
@@ -3119,7 +3119,7 @@ fieldset:disabled a.btn {
 .btn-outline-success:not(:disabled):not(.disabled):active,
 .btn-outline-success:not(:disabled):not(.disabled).active,
 .show > .btn-outline-success.dropdown-toggle {
-  color: #fff;
+  color: #ffffff;
   background-color: #38c172;
   border-color: #38c172;
 }
@@ -3208,7 +3208,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-danger:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
@@ -3227,7 +3227,7 @@ fieldset:disabled a.btn {
 .btn-outline-danger:not(:disabled):not(.disabled):active,
 .btn-outline-danger:not(:disabled):not(.disabled).active,
 .show > .btn-outline-danger.dropdown-toggle {
-  color: #fff;
+  color: #ffffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
@@ -3280,7 +3280,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-dark:hover {
-  color: #fff;
+  color: #ffffff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -3299,7 +3299,7 @@ fieldset:disabled a.btn {
 .btn-outline-dark:not(:disabled):not(.disabled):active,
 .btn-outline-dark:not(:disabled):not(.disabled).active,
 .show > .btn-outline-dark.dropdown-toggle {
-  color: #fff;
+  color: #ffffff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -3435,7 +3435,7 @@ input[type=button].btn-block {
   color: #212529;
   text-align: left;
   list-style: none;
-  background-color: #fff;
+  background-color: #ffffff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
@@ -3622,7 +3622,7 @@ input[type=button].btn-block {
 
 .dropdown-item.active,
 .dropdown-item:active {
-  color: #fff;
+  color: #ffffff;
   text-decoration: none;
   background-color: #3490dc;
 }
@@ -3984,7 +3984,7 @@ input[type=button].btn-block {
 }
 
 .custom-control-input:checked ~ .custom-control-label::before {
-  color: #fff;
+  color: #ffffff;
   border-color: #3490dc;
   background-color: #3490dc;
 }
@@ -3998,7 +3998,7 @@ input[type=button].btn-block {
 }
 
 .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
-  color: #fff;
+  color: #ffffff;
   background-color: #cce3f6;
   border-color: #cce3f6;
 }
@@ -4028,7 +4028,7 @@ input[type=button].btn-block {
   height: 1rem;
   pointer-events: none;
   content: "";
-  background-color: #fff;
+  background-color: #ffffff;
   border: #adb5bd solid 1px;
 }
 
@@ -4048,7 +4048,7 @@ input[type=button].btn-block {
 }
 
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
 }
 
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
@@ -4057,7 +4057,7 @@ input[type=button].btn-block {
 }
 
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23ffffff' d='M0 2h4'/%3e%3c/svg%3e");
 }
 
 .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
@@ -4073,7 +4073,7 @@ input[type=button].btn-block {
 }
 
 .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
 }
 
 .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
@@ -4108,7 +4108,7 @@ input[type=button].btn-block {
 }
 
 .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
-  background-color: #fff;
+  background-color: #ffffff;
   transform: translateX(0.75rem);
 }
 
@@ -4126,7 +4126,7 @@ input[type=button].btn-block {
   line-height: 1.6;
   color: #495057;
   vertical-align: middle;
-  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
+  background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
   -webkit-appearance: none;
@@ -4142,7 +4142,7 @@ input[type=button].btn-block {
 
 .custom-select:focus::-ms-value {
   color: #495057;
-  background-color: #fff;
+  background-color: #ffffff;
 }
 
 .custom-select[multiple],
@@ -4228,7 +4228,7 @@ input[type=button].btn-block {
   font-weight: 400;
   line-height: 1.6;
   color: #495057;
-  background-color: #fff;
+  background-color: #ffffff;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
 }
@@ -4495,7 +4495,7 @@ input[type=button].btn-block {
 
 .nav-pills .nav-link.active,
 .nav-pills .show > .nav-link {
-  color: #fff;
+  color: #ffffff;
   background-color: #3490dc;
 }
 
@@ -4906,12 +4906,12 @@ input[type=button].btn-block {
 }
 
 .navbar-dark .navbar-brand {
-  color: #fff;
+  color: #ffffff;
 }
 
 .navbar-dark .navbar-brand:hover,
 .navbar-dark .navbar-brand:focus {
-  color: #fff;
+  color: #ffffff;
 }
 
 .navbar-dark .navbar-nav .nav-link {
@@ -4931,7 +4931,7 @@ input[type=button].btn-block {
 .navbar-dark .navbar-nav .active > .nav-link,
 .navbar-dark .navbar-nav .nav-link.show,
 .navbar-dark .navbar-nav .nav-link.active {
-  color: #fff;
+  color: #ffffff;
 }
 
 .navbar-dark .navbar-toggler {
@@ -4948,12 +4948,12 @@ input[type=button].btn-block {
 }
 
 .navbar-dark .navbar-text a {
-  color: #fff;
+  color: #ffffff;
 }
 
 .navbar-dark .navbar-text a:hover,
 .navbar-dark .navbar-text a:focus {
-  color: #fff;
+  color: #ffffff;
 }
 
 .card {
@@ -4962,7 +4962,7 @@ input[type=button].btn-block {
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
-  background-color: #fff;
+  background-color: #ffffff;
   background-clip: border-box;
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
@@ -5233,7 +5233,7 @@ input[type=button].btn-block {
   margin-left: -1px;
   line-height: 1.25;
   color: #3490dc;
-  background-color: #fff;
+  background-color: #ffffff;
   border: 1px solid #dee2e6;
 }
 
@@ -5264,7 +5264,7 @@ input[type=button].btn-block {
 
 .page-item.active .page-link {
   z-index: 3;
-  color: #fff;
+  color: #ffffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -5273,7 +5273,7 @@ input[type=button].btn-block {
   color: #6c757d;
   pointer-events: none;
   cursor: auto;
-  background-color: #fff;
+  background-color: #ffffff;
   border-color: #dee2e6;
 }
 
@@ -5349,13 +5349,13 @@ a.badge:focus {
 }
 
 .badge-primary {
-  color: #fff;
+  color: #ffffff;
   background-color: #3490dc;
 }
 
 a.badge-primary:hover,
 a.badge-primary:focus {
-  color: #fff;
+  color: #ffffff;
   background-color: #2176bd;
 }
 
@@ -5366,13 +5366,13 @@ a.badge-primary.focus {
 }
 
 .badge-secondary {
-  color: #fff;
+  color: #ffffff;
   background-color: #6c757d;
 }
 
 a.badge-secondary:hover,
 a.badge-secondary:focus {
-  color: #fff;
+  color: #ffffff;
   background-color: #545b62;
 }
 
@@ -5383,13 +5383,13 @@ a.badge-secondary.focus {
 }
 
 .badge-success {
-  color: #fff;
+  color: #ffffff;
   background-color: #38c172;
 }
 
 a.badge-success:hover,
 a.badge-success:focus {
-  color: #fff;
+  color: #ffffff;
   background-color: #2d995b;
 }
 
@@ -5434,13 +5434,13 @@ a.badge-warning.focus {
 }
 
 .badge-danger {
-  color: #fff;
+  color: #ffffff;
   background-color: #e3342f;
 }
 
 a.badge-danger:hover,
 a.badge-danger:focus {
-  color: #fff;
+  color: #ffffff;
   background-color: #c51f1a;
 }
 
@@ -5468,13 +5468,13 @@ a.badge-light.focus {
 }
 
 .badge-dark {
-  color: #fff;
+  color: #ffffff;
   background-color: #343a40;
 }
 
 a.badge-dark:hover,
 a.badge-dark:focus {
-  color: #fff;
+  color: #ffffff;
   background-color: #1d2124;
 }
 
@@ -5677,7 +5677,7 @@ a.badge-dark.focus {
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: #fff;
+  color: #ffffff;
   text-align: center;
   white-space: nowrap;
   background-color: #3490dc;
@@ -5746,7 +5746,7 @@ a.badge-dark.focus {
   position: relative;
   display: block;
   padding: 0.75rem 1.25rem;
-  background-color: #fff;
+  background-color: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -5764,12 +5764,12 @@ a.badge-dark.focus {
 .list-group-item:disabled {
   color: #6c757d;
   pointer-events: none;
-  background-color: #fff;
+  background-color: #ffffff;
 }
 
 .list-group-item.active {
   z-index: 2;
-  color: #fff;
+  color: #ffffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -5957,7 +5957,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-primary.list-group-item-action.active {
-  color: #fff;
+  color: #ffffff;
   background-color: #1b4b72;
   border-color: #1b4b72;
 }
@@ -5974,7 +5974,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-secondary.list-group-item-action.active {
-  color: #fff;
+  color: #ffffff;
   background-color: #383d41;
   border-color: #383d41;
 }
@@ -5991,7 +5991,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-success.list-group-item-action.active {
-  color: #fff;
+  color: #ffffff;
   background-color: #1d643b;
   border-color: #1d643b;
 }
@@ -6008,7 +6008,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-info.list-group-item-action.active {
-  color: #fff;
+  color: #ffffff;
   background-color: #385d7a;
   border-color: #385d7a;
 }
@@ -6025,7 +6025,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-warning.list-group-item-action.active {
-  color: #fff;
+  color: #ffffff;
   background-color: #857b26;
   border-color: #857b26;
 }
@@ -6042,7 +6042,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-danger.list-group-item-action.active {
-  color: #fff;
+  color: #ffffff;
   background-color: #761b18;
   border-color: #761b18;
 }
@@ -6059,7 +6059,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-light.list-group-item-action.active {
-  color: #fff;
+  color: #ffffff;
   background-color: #818182;
   border-color: #818182;
 }
@@ -6076,7 +6076,7 @@ a.badge-dark.focus {
 }
 
 .list-group-item-dark.list-group-item-action.active {
-  color: #fff;
+  color: #ffffff;
   background-color: #1b1e21;
   border-color: #1b1e21;
 }
@@ -6087,7 +6087,7 @@ a.badge-dark.focus {
   font-weight: 700;
   line-height: 1;
   color: #000;
-  text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 #ffffff;
   opacity: 0.5;
 }
 
@@ -6257,7 +6257,7 @@ a.close.disabled {
   flex-direction: column;
   width: 100%;
   pointer-events: auto;
-  background-color: #fff;
+  background-color: #ffffff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 0.3rem;
@@ -6376,7 +6376,7 @@ a.close.disabled {
   z-index: 1070;
   display: block;
   margin: 0;
-  font-family: "Nunito", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-style: normal;
   font-weight: 400;
   line-height: 1.6;
@@ -6488,7 +6488,7 @@ a.close.disabled {
 .tooltip-inner {
   max-width: 200px;
   padding: 0.25rem 0.5rem;
-  color: #fff;
+  color: #ffffff;
   text-align: center;
   background-color: #000;
   border-radius: 0.25rem;
@@ -6501,7 +6501,7 @@ a.close.disabled {
   z-index: 1060;
   display: block;
   max-width: 276px;
-  font-family: "Nunito", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-style: normal;
   font-weight: 400;
   line-height: 1.6;
@@ -6517,7 +6517,7 @@ a.close.disabled {
   line-break: auto;
   font-size: 0.7875rem;
   word-wrap: break-word;
-  background-color: #fff;
+  background-color: #ffffff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 0.3rem;
@@ -6561,7 +6561,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=top] > .arrow::after {
   bottom: 1px;
   border-width: 0.5rem 0.5rem 0;
-  border-top-color: #fff;
+  border-top-color: #ffffff;
 }
 
 .bs-popover-right,
@@ -6588,7 +6588,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=right] > .arrow::after {
   left: 1px;
   border-width: 0.5rem 0.5rem 0.5rem 0;
-  border-right-color: #fff;
+  border-right-color: #ffffff;
 }
 
 .bs-popover-bottom,
@@ -6612,7 +6612,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=bottom] > .arrow::after {
   top: 1px;
   border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: #fff;
+  border-bottom-color: #ffffff;
 }
 
 .bs-popover-bottom .popover-header::before,
@@ -6651,7 +6651,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=left] > .arrow::after {
   right: 1px;
   border-width: 0.5rem 0 0.5rem 0.5rem;
-  border-left-color: #fff;
+  border-left-color: #ffffff;
 }
 
 .popover-header {
@@ -6763,7 +6763,7 @@ a.close.disabled {
   align-items: center;
   justify-content: center;
   width: 15%;
-  color: #fff;
+  color: #ffffff;
   text-align: center;
   opacity: 0.5;
   transition: opacity 0.15s ease;
@@ -6780,7 +6780,7 @@ a.close.disabled {
 .carousel-control-prev:focus,
 .carousel-control-next:hover,
 .carousel-control-next:focus {
-  color: #fff;
+  color: #ffffff;
   text-decoration: none;
   outline: 0;
   opacity: 0.9;
@@ -6803,11 +6803,11 @@ a.close.disabled {
 }
 
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
 }
 
 .carousel-indicators {
@@ -6833,7 +6833,7 @@ a.close.disabled {
   margin-left: 3px;
   text-indent: -999px;
   cursor: pointer;
-  background-color: #fff;
+  background-color: #ffffff;
   background-clip: padding-box;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
@@ -6859,7 +6859,7 @@ a.close.disabled {
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: #fff;
+  color: #ffffff;
   text-align: center;
 }
 
@@ -7043,7 +7043,7 @@ button.bg-dark:focus {
 }
 
 .bg-white {
-  background-color: #fff !important;
+  background-color: #ffffff !important;
 }
 
 .bg-transparent {
@@ -7123,7 +7123,7 @@ button.bg-dark:focus {
 }
 
 .border-white {
-  border-color: #fff !important;
+  border-color: #ffffff !important;
 }
 
 .rounded-sm {
@@ -10664,7 +10664,7 @@ button.bg-dark:focus {
 }
 
 .text-white {
-  color: #fff !important;
+  color: #ffffff !important;
 }
 
 .text-primary {
@@ -10857,7 +10857,7 @@ a.text-dark:focus {
 
   .table td,
   .table th {
-    background-color: #fff !important;
+    background-color: #ffffff !important;
   }
 
   .table-bordered th,
@@ -10882,6064 +10882,1365 @@ a.text-dark:focus {
   }
 }
 
-/*!
- * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-
-.fa,
-.fas,
-.far,
-.fal,
-.fad,
-.fab {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  display: inline-block;
-  font-style: normal;
-  font-variant: normal;
-  text-rendering: auto;
-  line-height: 1;
+body {
+  background-color: #272727;
+  font-family: Nunito;
+  padding-top: 5.1rem;
+  /*.content {
+      position: relative;
+
+      //Circle style button
+      .btn-circle.rounded-circle {
+          padding: 6px 0px;
+          font-size: 16px;
+          text-align: center;
+      }
+      .btn-categories
+      {
+          position: absolute;
+          border-width: 5px;
+          background-color: $theme-color-five;
+          border-color: $theme-color-four;
+          color:$theme-color-four;
+          outline: none !important;
+          box-shadow: none !important;
+          font-weight: $font-weight-two;
+
+          &:active
+          {
+              background-color: $theme-color-three;
+              border-color: $theme-color-four;
+              outline: none !important;
+              box-shadow: none !important;
+              color:$theme-color-five;
+          }
+      }
+  }*/
+}
+
+body .head-title h1 {
+  color: #ffffff;
+  font-weight: 400;
+  font-size: 60pt;
+  letter-spacing: 3px;
 }
 
-.fa-lg {
-  font-size: 1.3333333333em;
-  line-height: 0.75em;
-  vertical-align: -0.0667em;
+body .carousel {
+  margin-top: -5.1rem;
 }
 
-.fa-xs {
-  font-size: 0.75em;
+body .carousel .carousel-inner .museum-logo {
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  top: 5%;
+  width: 100%;
+  z-index: 1;
 }
 
-.fa-sm {
-  font-size: 0.875em;
+body .carousel .carousel-inner .museum-logo img {
+  width: 7.5rem;
 }
 
-.fa-1x {
-  font-size: 1em;
+body .carousel .carousel-inner .social-logo {
+  text-align: center;
+  justify-content: space-around;
+  flex-wrap: nowrap;
+  position: absolute;
+  top: 25%;
+  padding-left: 25px;
+  width: 100%;
+  z-index: 1;
 }
 
-.fa-2x {
-  font-size: 2em;
+body .carousel .carousel-inner .social-logo img {
+  width: 2.0625rem;
 }
 
-.fa-3x {
-  font-size: 3em;
+body .carousel .carousel-inner .carousel-button {
+  bottom: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+  position: absolute;
+  z-index: 1;
 }
 
-.fa-4x {
-  font-size: 4em;
+body .carousel .carousel-inner .carousel-item {
+  height: 100vh;
+  min-height: 350px;
+  background: no-repeat center center scroll;
+  background-size: cover;
 }
 
-.fa-5x {
-  font-size: 5em;
+body .carousel .carousel-caption {
+  top: 50%;
+  bottom: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  transform: translateY(-50%);
+  background-color: rgba(239, 218, 179, 0.5);
 }
 
-.fa-6x {
-  font-size: 6em;
+body .text {
+  font-weight: 400;
+  font-size: 8pt;
+  line-height: 9pt;
 }
 
-.fa-7x {
-  font-size: 7em;
+body .text2 {
+  font-weight: 600;
+  font-size: 8pt;
 }
 
-.fa-8x {
-  font-size: 8em;
+body .kaplicky {
+  color: #ffffff;
+  font-size: 11pt;
+  font-weight: 900;
+  letter-spacing: 3pt;
 }
 
-.fa-9x {
-  font-size: 9em;
+body .text-author {
+  font-weight: 400;
+  font-size: 7pt;
+  color: #ead4b0;
 }
 
-.fa-10x {
-  font-size: 10em;
+body .text-number {
+  font-weight: 600;
+  font-size: 5pt;
+  color: #ead4b0;
 }
 
-.fa-fw {
-  text-align: center;
-  width: 1.25em;
+body .text-headline {
+  font-weight: 600;
+  font-size: 12pt;
+  color: #ead4b0;
 }
 
-.fa-ul {
-  list-style-type: none;
-  margin-left: 2.5em;
-  padding-left: 0;
+body .text-headline-desktop {
+  font-weight: 600;
+  font-size: 24pt;
+  color: #ead4b0;
 }
 
-.fa-ul > li {
-  position: relative;
+body .text-page {
+  font-weight: 600;
+  font-size: 7pt;
 }
 
-.fa-li {
-  left: -2em;
-  position: absolute;
-  text-align: center;
-  width: 2em;
-  line-height: inherit;
+body .black {
+  color: #272727;
 }
 
-.fa-border {
-  border: solid 0.08em #eee;
-  border-radius: 0.1em;
-  padding: 0.2em 0.25em 0.15em;
+body .white {
+  color: #ffffff;
 }
 
-.fa-pull-left {
-  float: left;
+body .colored {
+  color: #ead4b0;
 }
 
-.fa-pull-right {
-  float: right;
+body .auth .card {
+  border: none;
+  text-align: center;
+  font-size: 8pt;
 }
 
-.fa.fa-pull-left,
-.fas.fa-pull-left,
-.far.fa-pull-left,
-.fal.fa-pull-left,
-.fab.fa-pull-left {
-  margin-right: 0.3em;
+body .auth .col-form-label {
+  text-align: left;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
-.fa.fa-pull-right,
-.fas.fa-pull-right,
-.far.fa-pull-right,
-.fal.fa-pull-right,
-.fab.fa-pull-right {
-  margin-left: 0.3em;
+body .auth .form-control {
+  padding: 0;
+  height: 17pt;
+  border-radius: 0;
 }
 
-.fa-spin {
-  -webkit-animation: fa-spin 2s infinite linear;
-          animation: fa-spin 2s infinite linear;
+body .auth .form-control:focus {
+  border-top-color: #272727;
+  border-left-color: #272727;
+  border-right-color: #272727;
+  border-bottom-color: 0.5pt #ffffff;
+  box-shadow: none;
 }
 
-.fa-pulse {
-  -webkit-animation: fa-spin 1s infinite steps(8);
-          animation: fa-spin 1s infinite steps(8);
+body input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50px #272727 inset !important;
+  -webkit-text-fill-color: #ffffff;
+  background-color: #272727 !important;
 }
 
-@-webkit-keyframes fa-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
+body input:-webkit-autofill:active,
+body input:-webkit-autofill:focus,
+body input:-webkit-autofill:visited,
+body input:-webkit-autofill:hover {
+  -webkit-box-shadow: 0 0 0 50px #272727 inset !important;
+  -webkit-text-fill-color: #ffffff;
+  background-color: #272727 !important;
 }
 
-@keyframes fa-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
+body .card-body {
+  background-color: #272727;
+  font-weight: 400;
+  color: #ead4b0;
 }
 
-.fa-rotate-90 {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
-  transform: rotate(90deg);
+body .form-control {
+  background-color: #272727;
+  margin-top: -1px;
+  border-top-color: #272727;
+  border-left-color: #272727;
+  border-right-color: #272727;
+  border-bottom-color: 0.5pt #ffffff;
+  color: #ffffff;
+  box-shadow: none;
+  font-size: 8pt;
+  outline: none;
 }
 
-.fa-rotate-180 {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
-  transform: rotate(180deg);
+body .form-control:active,
+body .form-control:focus,
+body .form-control:visited,
+body .form-control:hover {
+  outline: none;
+  background-color: #272727;
+  margin-top: -1px;
+  border-top-color: #272727;
+  border-left-color: #272727;
+  border-right-color: #272727;
+  border-bottom-color: 0.5pt #ffffff;
+  color: #ffffff;
+  box-shadow: none;
 }
 
-.fa-rotate-270 {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
-  transform: rotate(270deg);
+body .form-control.is-invalid {
+  box-shadow: none;
+  border-color: #ead4b0;
+  background-image: none;
 }
 
-.fa-flip-horizontal {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
-  transform: scale(-1, 1);
+body .form-control.is-invalid:active,
+body .form-control.is-invalid:focus,
+body .form-control.is-invalid:visited {
+  box-shadow: none;
+  border-color: #ead4b0;
 }
 
-.fa-flip-vertical {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-  transform: scale(1, -1);
+body .button-square {
+  font-size: 8pt;
+  background-color: #272727;
+  color: #ffffff;
+  border: 0.5pt solid #ffffff;
+  border-radius: 0;
+  padding: 0.4675rem 2.475rem;
+  font-weight: 400;
 }
 
-.fa-flip-both,
-.fa-flip-horizontal.fa-flip-vertical {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-  transform: scale(-1, -1);
+body .button-square:active,
+body .button-square:focus,
+body .button-square:visited,
+body .button-square:hover {
+  outline: none;
+  box-shadow: none;
+  color: #ffffff;
 }
 
-:root .fa-rotate-90,
-:root .fa-rotate-180,
-:root .fa-rotate-270,
-:root .fa-flip-horizontal,
-:root .fa-flip-vertical,
-:root .fa-flip-both {
-  -webkit-filter: none;
-          filter: none;
+body .button-square:hover {
+  color: #ead4b0;
 }
 
-.fa-stack {
-  display: inline-block;
-  height: 2em;
-  line-height: 2em;
+body .pin-left:before {
+  content: "";
   position: relative;
-  vertical-align: middle;
-  width: 2.5em;
+  height: 0.35433rem;
+  width: 0.35433rem;
+  background-color: #ffffff;
+  border-radius: 50%;
+  display: inline-block;
+  top: -0.35433rem;
+  left: -0.2rem;
 }
 
-.fa-stack-1x,
-.fa-stack-2x {
-  left: 0;
-  position: absolute;
-  text-align: center;
-  width: 100%;
+body .pin-left {
+  border-left: 0.5pt solid #ead4b0;
+  position: fixed;
+  bottom: 0;
+  text-align: left;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 70%;
 }
 
-.fa-stack-1x {
-  line-height: inherit;
+body .pin-left .text {
+  margin-left: 0.5rem;
+  margin-bottom: 0.2rem;
 }
 
-.fa-stack-2x {
-  font-size: 2em;
+body .pin-left p {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-.fa-inverse {
-  color: #fff;
+body li {
+  list-style-type: none;
 }
 
-/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-readers do not read off random characters that represent icons */
-
-.fa-500px:before {
-  content: "\F26E";
+body .button-image {
+  background-color: transparent;
+  border-color: transparent;
 }
 
-.fa-accessible-icon:before {
-  content: "\F368";
+body .button-image:before {
+  content: "";
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  margin-right: 5px;
+  vertical-align: text-top;
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
 }
 
-.fa-accusoft:before {
-  content: "\F369";
+body .fav-cat-mybooks {
+  color: #ddd1b9;
+  text-align: center;
+  font-size: 1.9rem;
 }
 
-.fa-acquisitions-incorporated:before {
-  content: "\F6AF";
+body .fav-cat-nofav {
+  text-align: center;
+  color: #efdab3;
+  background-color: #272727;
+  border-color: #efdab3;
 }
 
-.fa-ad:before {
-  content: "\F641";
+body .artefacts-area h5,
+body .artefact-area h5 {
+  color: #ddd1b9;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 0.9rem;
+  font-size: 1.1rem;
 }
 
-.fa-address-book:before {
-  content: "\F2B9";
+body .artefacts-area h6,
+body .artefact-area h6 {
+  color: #ddd1b9;
+  font-size: 0.9rem;
+  font-weight: 400;
 }
 
-.fa-address-card:before {
-  content: "\F2BB";
+body .artefacts-area img,
+body .artefact-area img {
+  border: transparent;
+  border-radius: 1px;
 }
 
-.fa-adjust:before {
-  content: "\F042";
+body .artefacts-area .card,
+body .artefact-area .card {
+  margin: 10px;
+  border: none !important;
 }
 
-.fa-adn:before {
-  content: "\F170";
+body .artefacts-area .left_panel_info,
+body .artefact-area .left_panel_info {
+  margin-top: 15px;
+  max-width: 70%;
 }
 
-.fa-adobe:before {
-  content: "\F778";
+body .artefacts-area .right_panel_info,
+body .artefact-area .right_panel_info {
+  margin-top: 15px;
 }
 
-.fa-adversal:before {
-  content: "\F36A";
+body .artefacts-area .likes_text,
+body .artefact-area .likes_text {
+  text-align: center;
 }
 
-.fa-affiliatetheme:before {
-  content: "\F36B";
+body .artefacts-area .card-cus-bottom,
+body .artefact-area .card-cus-bottom {
+  background-color: #272727;
+  padding-right: 0;
+  padding-left: 0;
 }
 
-.fa-air-freshener:before {
-  content: "\F5D0";
+body .artefacts-area .inter_info:before,
+body .artefact-area .inter_info:before {
+  background-image: url(/images/Button_Info.svg?92f55a6c483b585543ec80f3fd3461de);
+  width: 8vw;
+  height: 8vw;
 }
 
-.fa-airbnb:before {
-  content: "\F834";
+body .artefacts-area .inter_like,
+body .artefact-area .inter_like {
+  display: none;
 }
 
-.fa-algolia:before {
-  content: "\F36C";
+body .artefacts-area .inter_like:before,
+body .artefact-area .inter_like:before {
+  background-image: url(/images/Heart_Empty.svg?974f069a126736e569df0f463d68c026);
+  width: 8vw;
+  height: 8vw;
 }
 
-.fa-align-center:before {
-  content: "\F037";
+body .artefacts-area .inter_like_filled:before,
+body .artefact-area .inter_like_filled:before {
+  background-image: url(/images/Heart_Filled.svg?e5b962dc0fd67a2042277b9826016c9c);
+  width: 8vw;
+  height: 8vw;
 }
 
-.fa-align-justify:before {
-  content: "\F039";
+body .artefacts-area .charts .inter_info,
+body .artefacts-area .charts .inter_like,
+body .artefacts-area .charts .inter_like_filled,
+body .artefact-area .charts .inter_info,
+body .artefact-area .charts .inter_like,
+body .artefact-area .charts .inter_like_filled {
+  display: inline;
 }
 
-.fa-align-left:before {
-  content: "\F036";
+body .artefacts-area .charts .inter_info:before,
+body .artefacts-area .charts .inter_like:before,
+body .artefacts-area .charts .inter_like_filled:before,
+body .artefact-area .charts .inter_info:before,
+body .artefact-area .charts .inter_like:before,
+body .artefact-area .charts .inter_like_filled:before {
+  width: 3rem;
+  height: 3rem;
 }
 
-.fa-align-right:before {
-  content: "\F038";
+body .artefacts-area .inter_info,
+body .artefacts-area .inter_like,
+body .artefacts-area .inter_like_filled,
+body .artefact-area .inter_info,
+body .artefact-area .inter_like,
+body .artefact-area .inter_like_filled {
+  padding: 0;
 }
 
-.fa-alipay:before {
-  content: "\F642";
+body .artefacts-area .inter_info:focus,
+body .artefacts-area .inter_info:active,
+body .artefacts-area .inter_info:hover,
+body .artefacts-area .inter_like:focus,
+body .artefacts-area .inter_like:active,
+body .artefacts-area .inter_like:hover,
+body .artefacts-area .inter_like_filled:focus,
+body .artefacts-area .inter_like_filled:active,
+body .artefacts-area .inter_like_filled:hover,
+body .artefact-area .inter_info:focus,
+body .artefact-area .inter_info:active,
+body .artefact-area .inter_info:hover,
+body .artefact-area .inter_like:focus,
+body .artefact-area .inter_like:active,
+body .artefact-area .inter_like:hover,
+body .artefact-area .inter_like_filled:focus,
+body .artefact-area .inter_like_filled:active,
+body .artefact-area .inter_like_filled:hover {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
 }
 
-.fa-allergies:before {
-  content: "\F461";
+body .artefact-area .card-cus-bottom .left_panel_info,
+body .artefact-area .card-cus-bottom .right_panel_info {
+  margin: 0.9375rem 0 0 0;
 }
 
-.fa-amazon:before {
-  content: "\F270";
+body .artefact-area .card-cus-bottom .right_panel_info .float-right {
+  margin-right: -0.35rem;
 }
 
-.fa-amazon-pay:before {
-  content: "\F42C";
+body .artefact-area .artefact-name {
+  font-weight: 600;
+  font-size: 8pt;
+  line-height: 10pt;
+  margin-bottom: 0;
 }
 
-.fa-ambulance:before {
-  content: "\F0F9";
+body .artefact-area .artefact-author {
+  font-size: 7pt;
+  line-height: 8pt;
 }
 
-.fa-american-sign-language-interpreting:before {
-  content: "\F2A3";
+body .artefact-area .inter_like {
+  display: block;
 }
 
-.fa-amilia:before {
-  content: "\F36D";
+body .artefact-area .inter_like:before {
+  background-image: url(/images/Heart_Empty.svg?974f069a126736e569df0f463d68c026);
+  width: 1.563rem;
+  height: 1.25rem;
 }
 
-.fa-anchor:before {
-  content: "\F13D";
+body .artefact-area .inter_like_filled:before {
+  background-image: url(/images/Heart_Filled.svg?e5b962dc0fd67a2042277b9826016c9c);
+  width: 1.563rem;
+  height: 1.25rem;
 }
 
-.fa-android:before {
-  content: "\F17B";
+body .artefact-area .inter_info {
+  padding-right: 1rem;
 }
 
-.fa-angellist:before {
-  content: "\F209";
+body .artefact-area .inter_info:before {
+  background-image: url(/images/Button_Info.svg?92f55a6c483b585543ec80f3fd3461de);
+  width: 1.875rem;
+  height: 1.875rem;
 }
 
-.fa-angle-double-down:before {
-  content: "\F103";
+body .artefact-area .artefact-likes {
+  font-weight: 600;
+  font-size: 5pt;
+  padding-right: 0.25rem;
 }
 
-.fa-angle-double-left:before {
-  content: "\F100";
+body .metadata-area h2 {
+  color: #ddd1b9;
+  font-weight: 600;
+  font-size: 12pt;
 }
 
-.fa-angle-double-right:before {
-  content: "\F101";
+body .metadata-area .arrow-down {
+  position: fixed;
+  top: 0.25rem;
+  right: 0;
+  margin: 2rem;
+  width: 0;
+  height: 0;
+  border-left: 0.59055rem solid transparent;
+  border-right: 0.59055rem solid transparent;
+  border-top: 0.59055rem solid #ddd1b9;
 }
 
-.fa-angle-double-up:before {
-  content: "\F102";
+body .metadata-area .pin-horizontal {
+  color: #ddd1b9;
+  border-bottom: 0.042rem solid #ddd1b9;
+  display: inline-block;
+  margin: 2.75rem 3.125rem 0 0;
 }
 
-.fa-angle-down:before {
-  content: "\F107";
+body .metadata-area .pin-horizontal:after {
+  content: "";
+  background-color: #ddd1b9;
+  position: relative;
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 50%;
+  display: block;
+  margin-left: auto;
+  top: 0.25rem;
 }
 
-.fa-angle-left:before {
-  content: "\F104";
+body .metadata-area .pin-horizontal .metadata {
+  position: relative;
+  display: flex;
+  align-items: baseline;
 }
 
-.fa-angle-right:before {
-  content: "\F105";
+body .metadata-area .pin-horizontal .metadata a {
+  color: #ddd1b9;
+  text-decoration: none;
 }
 
-.fa-angle-up:before {
-  content: "\F106";
+body .metadata-area .pin-horizontal .metadata a span {
+  font-weight: 600;
 }
 
-.fa-angry:before {
-  content: "\F556";
+body .metadata-area .pin-horizontal .metadata .arrow-down {
+  position: relative;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-left: 0.25rem solid transparent;
+  border-right: 0.25rem solid transparent;
+  border-top: 0.25rem solid #ddd1b9;
+  margin: 0 0.5rem 0 0.5rem;
 }
 
-.fa-angrycreative:before {
-  content: "\F36E";
+body .metadata-area .white-pin {
+  color: #ffffff;
+  border-bottom: 0.042rem solid #ffffff;
 }
 
-.fa-angular:before {
-  content: "\F420";
+body .metadata-area .white-pin:after {
+  content: "";
+  background-color: #ffffff;
 }
 
-.fa-ankh:before {
-  content: "\F644";
+body .metadata-area .white-pin .metadata a {
+  color: #ffffff;
 }
 
-.fa-app-store:before {
-  content: "\F36F";
+body .metadata-area .white-pin .metadata .arrow-down {
+  border-top: 0.25rem solid #ffffff;
 }
 
-.fa-app-store-ios:before {
-  content: "\F370";
+body .metadata-area .metadata-text {
+  font-size: 8pt;
+  color: #ffffff;
+  padding-top: 10px;
+  padding-left: 25px;
+  padding-right: 25px;
 }
 
-.fa-apper:before {
-  content: "\F371";
+body .metadata-area .metadata-text .artefact-info {
+  color: #ddd1b9;
+  margin-top: 10px;
 }
 
-.fa-apple:before {
-  content: "\F179";
+body .metadata-area .metadata-text .artefact-info .artefact-name {
+  font-weight: 600;
+  font-size: 8pt;
 }
 
-.fa-apple-alt:before {
-  content: "\F5D1";
+body .metadata-area .metadata-text .artefact-info .artefact-author {
+  font-weight: 400;
+  font-size: 7pt;
 }
 
-.fa-apple-pay:before {
-  content: "\F415";
+body .metadata-area .metadata-text .artefact-info .inter_like:before {
+  background-image: url(/images/Heart_Empty.svg?974f069a126736e569df0f463d68c026);
+  width: 3.125rem;
+  height: 3.125rem;
+  margin-right: 0;
 }
 
-.fa-archive:before {
-  content: "\F187";
+body .metadata-area .metadata-text .artefact-info .inter_like:hover,
+body .metadata-area .metadata-text .artefact-info .inter_like:focus,
+body .metadata-area .metadata-text .artefact-info .inter_like:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
 }
 
-.fa-archway:before {
-  content: "\F557";
+body .metadata-area .metadata-text .artefact-info .inter_like_filled:before {
+  background-image: url(/images/Heart_Filled.svg?e5b962dc0fd67a2042277b9826016c9c);
+  width: 3.125rem;
+  height: 3.125rem;
+  margin-right: 0;
 }
 
-.fa-arrow-alt-circle-down:before {
-  content: "\F358";
+body .metadata-area .metadata-text .artefact-info .inter_like_filled:hover,
+body .metadata-area .metadata-text .artefact-info .inter_like_filled:focus,
+body .metadata-area .metadata-text .artefact-info .inter_like_filled:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
 }
 
-.fa-arrow-alt-circle-left:before {
-  content: "\F359";
+body .modal {
+  font-weight: 400;
+  color: #ddd1b9;
+  font-size: 8pt;
 }
 
-.fa-arrow-alt-circle-right:before {
-  content: "\F35A";
+body .modal .modal-header {
+  border-bottom: 1px solid #ddd1b9;
 }
 
-.fa-arrow-alt-circle-up:before {
-  content: "\F35B";
+body .modal .modal-header .close {
+  color: #ddd1b9;
+  text-shadow: none;
 }
 
-.fa-arrow-circle-down:before {
-  content: "\F0AB";
+body .modal .modal-content {
+  background-color: #272727;
 }
 
-.fa-arrow-circle-left:before {
-  content: "\F0A8";
+body .modal .modal-footer {
+  border-top: 1px solid #ddd1b9;
 }
 
-.fa-arrow-circle-right:before {
-  content: "\F0A9";
+body .modal .modal-footer .btn {
+  background-color: #ddd1b9;
+  color: #272727;
 }
 
-.fa-arrow-circle-up:before {
-  content: "\F0AA";
+body .image-modal .close {
+  font-size: 24pt;
+  color: #ddd1b9;
+  text-shadow: none;
+  position: absolute;
+  top: 1rem;
+  right: 0.125rem;
+  opacity: 1;
+  cursor: pointer;
+  pointer-events: initial;
 }
 
-.fa-arrow-down:before {
-  content: "\F063";
+body .btn.btn-dark.cat-tile {
+  border-color: #ead4b0;
+  border-radius: 0;
+  border-style: solid;
+  border-width: 2px;
+  color: #ead4b0;
+  background-color: #272727;
+  text-align: center;
+  outline: none !important;
+  box-shadow: none !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 22pt;
+  padding: 4rem 1rem;
 }
 
-.fa-arrow-left:before {
-  content: "\F060";
+body .btn.btn-dark.cat-tile:active,
+body .btn.btn-dark.cat-tile:focus {
+  background-color: #efdab3;
+  border-color: #ead4b0;
+  outline: none !important;
+  box-shadow: none !important;
+  color: #272727;
 }
 
-.fa-arrow-right:before {
-  content: "\F061";
+body .btn-dark:not(:disabled):not(.disabled).active {
+  background-color: #ead4b0;
+  color: white;
+  border-color: #272727;
 }
 
-.fa-arrow-up:before {
-  content: "\F062";
+body .category-h2 {
+  color: #ead4b0;
 }
 
-.fa-arrows-alt:before {
-  content: "\F0B2";
+body .head-title.text-center.cat-main-topic h1 {
+  font-size: 1.9rem;
 }
 
-.fa-arrows-alt-h:before {
-  content: "\F337";
+body .cat-main-menu {
+  font-size: 1.75rem;
+  text-align: center;
+  margin-bottom: 30pt;
 }
 
-.fa-arrows-alt-v:before {
-  content: "\F338";
+body .cat-main-menu a,
+body .cat-main-menu a:visited {
+  color: #ddd1b9;
+  text-decoration: none;
 }
 
-.fa-artstation:before {
-  content: "\F77A";
+body .cat-main-menu a:hover {
+  color: #ead4b0;
 }
 
-.fa-assistive-listening-systems:before {
-  content: "\F2A2";
+body .cat-wrapper {
+  margin: auto;
+  display: block;
 }
 
-.fa-asterisk:before {
-  content: "\F069";
+body .btn.button-square.cat-enter-butt {
+  border-radius: 0;
+  bottom: 5%;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.fa-asymmetrik:before {
-  content: "\F372";
+body .btn.button-square.cat-enter-butt:active,
+body .btn.button-square.cat-enter-butt:focus,
+body .btn.button-square.cat-enter-butt:visited,
+body .btn.button-square.cat-enter-butt:hover {
+  outline: none;
+  box-shadow: none;
+  color: #ffffff;
 }
 
-.fa-at:before {
-  content: "\F1FA";
+body .btn.button-square.cat-enter-butt:hover {
+  color: #ead4b0;
 }
 
-.fa-atlas:before {
-  content: "\F558";
+body .ver-text {
+  margin-top: 20pt;
 }
 
-.fa-atlassian:before {
-  content: "\F77B";
+body .ver-text h2 {
+  text-align: center;
+  color: #ddd1b9;
 }
 
-.fa-atom:before {
-  content: "\F5D2";
+.top-bar {
+  background-color: #272727;
+  min-height: 5rem;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 2;
 }
 
-.fa-audible:before {
-  content: "\F373";
+.top-bar .shadow {
+  box-shadow: none;
 }
 
-.fa-audio-description:before {
-  content: "\F29E";
+.sidenav {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 4;
+  top: 0;
+  left: 0;
+  background-color: #ead4b0;
+  overflow-x: hidden;
+  transition: 0.5s;
 }
 
-.fa-autoprefixer:before {
-  content: "\F41C";
+.sidenav a {
+  text-decoration: none;
+  color: #272727;
+  display: block;
+  transition: 0.3s;
 }
 
-.fa-avianex:before {
-  content: "\F374";
+.sidenav a:hover {
+  color: #ead4b0;
+  background-color: #ffffff;
 }
 
-.fa-aviato:before {
-  content: "\F421";
+.sidenav a:active,
+.sidenav a:focus,
+.sidenav a .active {
+  color: #ffffff;
+  background-color: #ead4b0;
 }
 
-.fa-award:before {
-  content: "\F559";
+.bar-desktop {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  min-width: 100%;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
 
-.fa-aws:before {
-  content: "\F375";
+.down {
+  position: absolute;
+  z-index: 5;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin-bottom: 3rem;
 }
 
-.fa-baby:before {
-  content: "\F77C";
+.menu-item {
+  padding: 0.25rem 1rem;
+  width: 100%;
+  border: 0;
 }
 
-.fa-baby-carriage:before {
-  content: "\F77D";
+.menu-item:active,
+.menu-item.active,
+.menu-item:focus {
+  color: #ffffff;
+  border: none;
+  outline: none;
+  box-shadow: none;
 }
 
-.fa-backspace:before {
-  content: "\F55A";
+.logo-kaplicky {
+  text-align: center;
+  display: none;
 }
 
-.fa-backward:before {
-  content: "\F04A";
+.logo-kaplicky:active,
+.logo-kaplicky.active,
+.logo-kaplicky:focus {
+  outline: none;
+  box-shadow: none;
 }
 
-.fa-bacon:before {
-  content: "\F7E5";
+.navbar {
+  padding: unset;
 }
 
-.fa-bahai:before {
-  content: "\F666";
+.vertical-center {
+  margin-top: -5.1rem;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
 }
 
-.fa-balance-scale:before {
-  content: "\F24E";
+.error {
+  color: #ffffff;
+  font-size: xx-large;
+  display: block;
+  text-align: center;
 }
 
-.fa-balance-scale-left:before {
-  content: "\F515";
+.al {
+  margin-bottom: 3rem;
 }
 
-.fa-balance-scale-right:before {
-  content: "\F516";
+.js-cookie-consent {
+  position: fixed;
+  z-index: 9999;
+  text-align: center;
+  width: 100%;
+  bottom: 0px;
+  padding: 10px;
+  background: #ead4b0;
 }
 
-.fa-ban:before {
-  content: "\F05E";
+.js-cookie-consent-agree {
+  font-size: 8pt;
+  background-color: #272727;
+  color: #ffffff;
+  border: 0.5pt solid #ffffff;
+  border-radius: 0;
+  padding: 0.5rem 2rem;
+  font-weight: 400;
 }
 
-.fa-band-aid:before {
-  content: "\F462";
+.js-cookie-consent-agree:active,
+.js-cookie-consent-agree:focus,
+.js-cookie-consent-agree:visited,
+.js-cookie-consent-agree:hover {
+  outline: none;
+  box-shadow: none;
+  color: #ffffff;
 }
 
-.fa-bandcamp:before {
-  content: "\F2D5";
+.js-cookie-consent-agree:hover {
+  color: #ead4b0;
 }
 
-.fa-barcode:before {
-  content: "\F02A";
+.cookie-consent__message {
+  padding: 1rem;
+  display: inline-block;
 }
 
-.fa-bars:before {
-  content: "\F0C9";
+.books-component .book-area .card-cus-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
 }
 
-.fa-baseball-ball:before {
-  content: "\F433";
+.books-component .book-area .card-cus-bottom .book-arrow:after {
+  content: "";
+  bottom: 3rem;
+  position: absolute;
+  border-top: 1.25rem solid transparent;
+  border-bottom: 1.25rem solid transparent;
 }
 
-.fa-basketball-ball:before {
-  content: "\F434";
+.books-component .book-area .card-cus-bottom .book-arrow-left:after {
+  left: 25%;
+  border-right: 1.25rem solid #ddd1b9;
 }
 
-.fa-bath:before {
-  content: "\F2CD";
+.books-component .book-area .card-cus-bottom .book-arrow-right:after {
+  right: 25%;
+  border-left: 1.25rem solid #ddd1b9;
 }
 
-.fa-battery-empty:before {
-  content: "\F244";
+.books-component .book-area .card-cus-bottom .likes {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.fa-battery-full:before {
-  content: "\F240";
+.books-component .book-area .card-cus-bottom .likes .inter_like,
+.books-component .book-area .card-cus-bottom .likes .inter_like_filled {
+  margin: 0 auto;
 }
 
-.fa-battery-half:before {
-  content: "\F242";
+.books-component .book-area .card-cus-bottom .likes .inter_like:before,
+.books-component .book-area .card-cus-bottom .likes .inter_like_filled:before {
+  margin-right: 0;
+  height: 5rem;
+  width: 5rem;
 }
 
-.fa-battery-quarter:before {
-  content: "\F243";
+.books-component .book-area .card-cus-bottom .likes .artefact-likes {
+  font-size: 12pt;
+  padding: 0;
 }
 
-.fa-battery-three-quarters:before {
-  content: "\F241";
-}
+.books-component .info-area {
+  color: #ddd1b9;
+  margin-top: 0.625rem;
+  padding-left: 5rem;
+  /* could be use to hide overflowing notes
+  max-height: 80vh;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 
-.fa-battle-net:before {
-  content: "\F835";
+  &::-webkit-scrollbar {
+      width: 0 !important
+  } */
 }
 
-.fa-bed:before {
-  content: "\F236";
+.books-component .info-area h3 {
+  font-weight: 600;
 }
 
-.fa-beer:before {
-  content: "\F0FC";
+.books-component .info-area .switch-view {
+  float: right;
+  color: #ffffff;
+  cursor: pointer;
 }
 
-.fa-behance:before {
-  content: "\F1B4";
+.books-component .info-area .artefact-notes {
+  display: none;
+  color: #ddd1b9;
 }
 
-.fa-behance-square:before {
-  content: "\F1B5";
+.books-component .info-area .artefact-notes .pin-horizontal {
+  border-bottom: 0.042rem solid #ddd1b9;
+  display: inline-block;
+  margin: 2.75rem 2rem 0 0;
 }
 
-.fa-bell:before {
-  content: "\F0F3";
+.books-component .info-area .artefact-notes .pin-horizontal:after {
+  content: "";
+  background-color: #ddd1b9;
+  position: relative;
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 50%;
+  display: block;
+  margin-left: auto;
+  top: 0.25rem;
 }
 
-.fa-bell-slash:before {
-  content: "\F1F6";
+.books-component .info-area .artefact-notes .pin-horizontal .metadata {
+  position: relative;
+  display: flex;
+  align-items: baseline;
 }
 
-.fa-bezier-curve:before {
-  content: "\F55B";
+.books-component .info-area .artefact-notes .pin-horizontal .metadata span {
+  font-size: 12pt;
+  font-weight: 600;
 }
 
-.fa-bible:before {
-  content: "\F647";
+.books-component .info-area .artefact-notes .pin-horizontal .metadata .arrow-down {
+  position: relative;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-left: 0.25rem solid transparent;
+  border-right: 0.25rem solid transparent;
+  border-top: 0.25rem solid #ddd1b9;
+  margin: 0 0.5rem 0 0.5rem;
 }
 
-.fa-bicycle:before {
-  content: "\F206";
+.books-component .info-area .artefact-notes .white-pin {
+  color: #ffffff;
+  border-bottom: 0.042rem solid #ffffff;
 }
 
-.fa-biking:before {
-  content: "\F84A";
+.books-component .info-area .artefact-notes .white-pin:after {
+  content: "";
+  background-color: #ffffff;
 }
 
-.fa-bimobject:before {
-  content: "\F378";
+.books-component .info-area .artefact-notes .white-pin .metadata .arrow-down {
+  border-top: 0.25rem solid #ffffff;
 }
 
-.fa-binoculars:before {
-  content: "\F1E5";
+.books-component .info-area .artefact-notes .metadata-text {
+  font-size: 12pt;
+  color: #ffffff;
+  padding-top: 10px;
+  padding-left: 25px;
+  padding-right: 25px;
 }
 
-.fa-biohazard:before {
-  content: "\F780";
+.books-component .info-area .artefact-notes .metadata-text .inter_like:before {
+  background-image: url(/images/Heart_Empty.svg?974f069a126736e569df0f463d68c026);
+  width: 5rem;
+  height: 5rem;
 }
 
-.fa-birthday-cake:before {
-  content: "\F1FD";
+.books-component .info-area .artefact-notes .metadata-text .inter_like:hover,
+.books-component .info-area .artefact-notes .metadata-text .inter_like:focus,
+.books-component .info-area .artefact-notes .metadata-text .inter_like:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
 }
 
-.fa-bitbucket:before {
-  content: "\F171";
+.books-component .info-area .artefact-notes .metadata-text .inter_like_filled:before {
+  background-image: url(/images/Heart_Filled.svg?e5b962dc0fd67a2042277b9826016c9c);
+  width: 5rem;
+  height: 5rem;
 }
 
-.fa-bitcoin:before {
-  content: "\F379";
+.books-component .info-area .artefact-notes .metadata-text .inter_like_filled:hover,
+.books-component .info-area .artefact-notes .metadata-text .inter_like_filled:focus,
+.books-component .info-area .artefact-notes .metadata-text .inter_like_filled:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
 }
 
-.fa-bity:before {
-  content: "\F37A";
+.books-component .info-area .inter_info {
+  float: right;
+  color: #ffffff;
+  padding-right: 1rem;
 }
 
-.fa-black-tie:before {
-  content: "\F27E";
+.books-component .info-area .inter_info:before {
+  background-image: url(/images/Button_Info_White.svg?eeeba6da4f02d7b457f5ed048a356fc6);
+  width: 1.875rem;
+  height: 1.875rem;
 }
 
-.fa-blackberry:before {
-  content: "\F37B";
+.books-component .info-area .inter_info:hover,
+.books-component .info-area .inter_info:focus,
+.books-component .info-area .inter_info:active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
 }
 
-.fa-blender:before {
-  content: "\F517";
+@media (max-width: 610px) {
+  .js-cookie-consent-agree {
+    margin-bottom: 1rem;
+  }
 }
 
-.fa-blender-phone:before {
-  content: "\F6B6";
-}
+@media screen and (max-height: 450px) {
+  .sidenav a {
+    font-size: 18px;
+  }
 
-.fa-blind:before {
-  content: "\F29D";
+  .down {
+    bottom: unset;
+    margin-bottom: unset;
+  }
 }
 
-.fa-blog:before {
-  content: "\F781";
+@media (min-width: 1300px) {
+  .bar-desktop {
+    margin-left: 8vw;
+    margin-right: 8vw;
+    min-width: 84vw;
+  }
 }
 
-.fa-blogger:before {
-  content: "\F37C";
-}
+@media (max-width: 770px) {
+  .logo-kaplicky {
+    margin: 0 auto;
+    display: block;
+  }
 
-.fa-blogger-b:before {
-  content: "\F37D";
-}
+  .arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 2rem;
+    cursor: pointer;
+    border: 0.59055rem solid transparent;
+  }
 
-.fa-bluetooth:before {
-  content: "\F293";
-}
+  .arrow:active,
+  .arrow.active,
+  .arrow:focus {
+    outline: none;
+    box-shadow: none;
+  }
 
-.fa-bluetooth-b:before {
-  content: "\F294";
-}
+  .arrow-left {
+    margin-left: 80%;
+    border-right: 0.59055rem solid #272727;
+    background-color: #ead4b0 !important;
+  }
 
-.fa-bold:before {
-  content: "\F032";
-}
+  .arrow-right {
+    border-left: 0.59055rem solid #ead4b0;
+    position: fixed;
+    z-index: 3;
+    top: 0;
+    left: 0;
+  }
 
-.fa-bolt:before {
-  content: "\F0E7";
-}
+  .bar-desktop {
+    display: none;
+  }
 
-.fa-bomb:before {
-  content: "\F1E2";
-}
-
-.fa-bone:before {
-  content: "\F5D7";
-}
-
-.fa-bong:before {
-  content: "\F55C";
-}
-
-.fa-book:before {
-  content: "\F02D";
-}
-
-.fa-book-dead:before {
-  content: "\F6B7";
-}
-
-.fa-book-medical:before {
-  content: "\F7E6";
-}
-
-.fa-book-open:before {
-  content: "\F518";
-}
-
-.fa-book-reader:before {
-  content: "\F5DA";
-}
-
-.fa-bookmark:before {
-  content: "\F02E";
-}
-
-.fa-bootstrap:before {
-  content: "\F836";
-}
-
-.fa-border-all:before {
-  content: "\F84C";
-}
-
-.fa-border-none:before {
-  content: "\F850";
-}
-
-.fa-border-style:before {
-  content: "\F853";
-}
-
-.fa-bowling-ball:before {
-  content: "\F436";
-}
-
-.fa-box:before {
-  content: "\F466";
-}
-
-.fa-box-open:before {
-  content: "\F49E";
-}
-
-.fa-box-tissue:before {
-  content: "\F95B";
-}
-
-.fa-boxes:before {
-  content: "\F468";
-}
-
-.fa-braille:before {
-  content: "\F2A1";
-}
-
-.fa-brain:before {
-  content: "\F5DC";
-}
-
-.fa-bread-slice:before {
-  content: "\F7EC";
-}
-
-.fa-briefcase:before {
-  content: "\F0B1";
-}
-
-.fa-briefcase-medical:before {
-  content: "\F469";
-}
-
-.fa-broadcast-tower:before {
-  content: "\F519";
-}
-
-.fa-broom:before {
-  content: "\F51A";
-}
-
-.fa-brush:before {
-  content: "\F55D";
-}
-
-.fa-btc:before {
-  content: "\F15A";
-}
-
-.fa-buffer:before {
-  content: "\F837";
-}
-
-.fa-bug:before {
-  content: "\F188";
-}
-
-.fa-building:before {
-  content: "\F1AD";
-}
-
-.fa-bullhorn:before {
-  content: "\F0A1";
-}
-
-.fa-bullseye:before {
-  content: "\F140";
-}
-
-.fa-burn:before {
-  content: "\F46A";
-}
-
-.fa-buromobelexperte:before {
-  content: "\F37F";
-}
-
-.fa-bus:before {
-  content: "\F207";
-}
-
-.fa-bus-alt:before {
-  content: "\F55E";
-}
-
-.fa-business-time:before {
-  content: "\F64A";
-}
-
-.fa-buy-n-large:before {
-  content: "\F8A6";
-}
-
-.fa-buysellads:before {
-  content: "\F20D";
-}
-
-.fa-calculator:before {
-  content: "\F1EC";
-}
-
-.fa-calendar:before {
-  content: "\F133";
-}
-
-.fa-calendar-alt:before {
-  content: "\F073";
-}
-
-.fa-calendar-check:before {
-  content: "\F274";
-}
-
-.fa-calendar-day:before {
-  content: "\F783";
-}
-
-.fa-calendar-minus:before {
-  content: "\F272";
-}
-
-.fa-calendar-plus:before {
-  content: "\F271";
-}
-
-.fa-calendar-times:before {
-  content: "\F273";
-}
-
-.fa-calendar-week:before {
-  content: "\F784";
-}
-
-.fa-camera:before {
-  content: "\F030";
-}
-
-.fa-camera-retro:before {
-  content: "\F083";
-}
-
-.fa-campground:before {
-  content: "\F6BB";
-}
-
-.fa-canadian-maple-leaf:before {
-  content: "\F785";
-}
-
-.fa-candy-cane:before {
-  content: "\F786";
-}
-
-.fa-cannabis:before {
-  content: "\F55F";
-}
-
-.fa-capsules:before {
-  content: "\F46B";
-}
-
-.fa-car:before {
-  content: "\F1B9";
-}
-
-.fa-car-alt:before {
-  content: "\F5DE";
-}
-
-.fa-car-battery:before {
-  content: "\F5DF";
-}
-
-.fa-car-crash:before {
-  content: "\F5E1";
-}
-
-.fa-car-side:before {
-  content: "\F5E4";
-}
-
-.fa-caravan:before {
-  content: "\F8FF";
-}
-
-.fa-caret-down:before {
-  content: "\F0D7";
-}
-
-.fa-caret-left:before {
-  content: "\F0D9";
-}
-
-.fa-caret-right:before {
-  content: "\F0DA";
-}
-
-.fa-caret-square-down:before {
-  content: "\F150";
-}
-
-.fa-caret-square-left:before {
-  content: "\F191";
-}
-
-.fa-caret-square-right:before {
-  content: "\F152";
-}
-
-.fa-caret-square-up:before {
-  content: "\F151";
-}
-
-.fa-caret-up:before {
-  content: "\F0D8";
-}
-
-.fa-carrot:before {
-  content: "\F787";
-}
-
-.fa-cart-arrow-down:before {
-  content: "\F218";
-}
-
-.fa-cart-plus:before {
-  content: "\F217";
-}
-
-.fa-cash-register:before {
-  content: "\F788";
-}
-
-.fa-cat:before {
-  content: "\F6BE";
-}
-
-.fa-cc-amazon-pay:before {
-  content: "\F42D";
-}
-
-.fa-cc-amex:before {
-  content: "\F1F3";
-}
-
-.fa-cc-apple-pay:before {
-  content: "\F416";
-}
-
-.fa-cc-diners-club:before {
-  content: "\F24C";
-}
-
-.fa-cc-discover:before {
-  content: "\F1F2";
-}
-
-.fa-cc-jcb:before {
-  content: "\F24B";
-}
-
-.fa-cc-mastercard:before {
-  content: "\F1F1";
-}
-
-.fa-cc-paypal:before {
-  content: "\F1F4";
-}
-
-.fa-cc-stripe:before {
-  content: "\F1F5";
-}
-
-.fa-cc-visa:before {
-  content: "\F1F0";
-}
-
-.fa-centercode:before {
-  content: "\F380";
-}
-
-.fa-centos:before {
-  content: "\F789";
-}
-
-.fa-certificate:before {
-  content: "\F0A3";
-}
-
-.fa-chair:before {
-  content: "\F6C0";
-}
-
-.fa-chalkboard:before {
-  content: "\F51B";
-}
-
-.fa-chalkboard-teacher:before {
-  content: "\F51C";
-}
-
-.fa-charging-station:before {
-  content: "\F5E7";
-}
-
-.fa-chart-area:before {
-  content: "\F1FE";
-}
-
-.fa-chart-bar:before {
-  content: "\F080";
-}
-
-.fa-chart-line:before {
-  content: "\F201";
-}
-
-.fa-chart-pie:before {
-  content: "\F200";
-}
-
-.fa-check:before {
-  content: "\F00C";
-}
-
-.fa-check-circle:before {
-  content: "\F058";
-}
-
-.fa-check-double:before {
-  content: "\F560";
-}
-
-.fa-check-square:before {
-  content: "\F14A";
-}
-
-.fa-cheese:before {
-  content: "\F7EF";
-}
-
-.fa-chess:before {
-  content: "\F439";
-}
-
-.fa-chess-bishop:before {
-  content: "\F43A";
-}
-
-.fa-chess-board:before {
-  content: "\F43C";
-}
-
-.fa-chess-king:before {
-  content: "\F43F";
-}
-
-.fa-chess-knight:before {
-  content: "\F441";
-}
-
-.fa-chess-pawn:before {
-  content: "\F443";
-}
-
-.fa-chess-queen:before {
-  content: "\F445";
-}
-
-.fa-chess-rook:before {
-  content: "\F447";
-}
-
-.fa-chevron-circle-down:before {
-  content: "\F13A";
-}
-
-.fa-chevron-circle-left:before {
-  content: "\F137";
-}
-
-.fa-chevron-circle-right:before {
-  content: "\F138";
-}
-
-.fa-chevron-circle-up:before {
-  content: "\F139";
-}
-
-.fa-chevron-down:before {
-  content: "\F078";
-}
-
-.fa-chevron-left:before {
-  content: "\F053";
-}
-
-.fa-chevron-right:before {
-  content: "\F054";
-}
-
-.fa-chevron-up:before {
-  content: "\F077";
-}
-
-.fa-child:before {
-  content: "\F1AE";
-}
-
-.fa-chrome:before {
-  content: "\F268";
-}
-
-.fa-chromecast:before {
-  content: "\F838";
-}
-
-.fa-church:before {
-  content: "\F51D";
-}
-
-.fa-circle:before {
-  content: "\F111";
-}
-
-.fa-circle-notch:before {
-  content: "\F1CE";
-}
-
-.fa-city:before {
-  content: "\F64F";
-}
-
-.fa-clinic-medical:before {
-  content: "\F7F2";
-}
-
-.fa-clipboard:before {
-  content: "\F328";
-}
-
-.fa-clipboard-check:before {
-  content: "\F46C";
-}
-
-.fa-clipboard-list:before {
-  content: "\F46D";
-}
-
-.fa-clock:before {
-  content: "\F017";
-}
-
-.fa-clone:before {
-  content: "\F24D";
-}
-
-.fa-closed-captioning:before {
-  content: "\F20A";
-}
-
-.fa-cloud:before {
-  content: "\F0C2";
-}
-
-.fa-cloud-download-alt:before {
-  content: "\F381";
-}
-
-.fa-cloud-meatball:before {
-  content: "\F73B";
-}
-
-.fa-cloud-moon:before {
-  content: "\F6C3";
-}
-
-.fa-cloud-moon-rain:before {
-  content: "\F73C";
-}
-
-.fa-cloud-rain:before {
-  content: "\F73D";
-}
-
-.fa-cloud-showers-heavy:before {
-  content: "\F740";
-}
-
-.fa-cloud-sun:before {
-  content: "\F6C4";
-}
-
-.fa-cloud-sun-rain:before {
-  content: "\F743";
-}
-
-.fa-cloud-upload-alt:before {
-  content: "\F382";
-}
-
-.fa-cloudscale:before {
-  content: "\F383";
-}
-
-.fa-cloudsmith:before {
-  content: "\F384";
-}
-
-.fa-cloudversify:before {
-  content: "\F385";
-}
-
-.fa-cocktail:before {
-  content: "\F561";
-}
-
-.fa-code:before {
-  content: "\F121";
-}
-
-.fa-code-branch:before {
-  content: "\F126";
-}
-
-.fa-codepen:before {
-  content: "\F1CB";
-}
-
-.fa-codiepie:before {
-  content: "\F284";
-}
-
-.fa-coffee:before {
-  content: "\F0F4";
-}
-
-.fa-cog:before {
-  content: "\F013";
-}
-
-.fa-cogs:before {
-  content: "\F085";
-}
-
-.fa-coins:before {
-  content: "\F51E";
-}
-
-.fa-columns:before {
-  content: "\F0DB";
-}
-
-.fa-comment:before {
-  content: "\F075";
-}
-
-.fa-comment-alt:before {
-  content: "\F27A";
-}
-
-.fa-comment-dollar:before {
-  content: "\F651";
-}
-
-.fa-comment-dots:before {
-  content: "\F4AD";
-}
-
-.fa-comment-medical:before {
-  content: "\F7F5";
-}
-
-.fa-comment-slash:before {
-  content: "\F4B3";
-}
-
-.fa-comments:before {
-  content: "\F086";
-}
-
-.fa-comments-dollar:before {
-  content: "\F653";
-}
-
-.fa-compact-disc:before {
-  content: "\F51F";
-}
-
-.fa-compass:before {
-  content: "\F14E";
-}
-
-.fa-compress:before {
-  content: "\F066";
-}
-
-.fa-compress-alt:before {
-  content: "\F422";
-}
-
-.fa-compress-arrows-alt:before {
-  content: "\F78C";
-}
-
-.fa-concierge-bell:before {
-  content: "\F562";
-}
-
-.fa-confluence:before {
-  content: "\F78D";
-}
-
-.fa-connectdevelop:before {
-  content: "\F20E";
-}
-
-.fa-contao:before {
-  content: "\F26D";
-}
-
-.fa-cookie:before {
-  content: "\F563";
-}
-
-.fa-cookie-bite:before {
-  content: "\F564";
-}
-
-.fa-copy:before {
-  content: "\F0C5";
-}
-
-.fa-copyright:before {
-  content: "\F1F9";
-}
-
-.fa-cotton-bureau:before {
-  content: "\F89E";
-}
-
-.fa-couch:before {
-  content: "\F4B8";
-}
-
-.fa-cpanel:before {
-  content: "\F388";
-}
-
-.fa-creative-commons:before {
-  content: "\F25E";
-}
-
-.fa-creative-commons-by:before {
-  content: "\F4E7";
-}
-
-.fa-creative-commons-nc:before {
-  content: "\F4E8";
-}
-
-.fa-creative-commons-nc-eu:before {
-  content: "\F4E9";
-}
-
-.fa-creative-commons-nc-jp:before {
-  content: "\F4EA";
-}
-
-.fa-creative-commons-nd:before {
-  content: "\F4EB";
-}
-
-.fa-creative-commons-pd:before {
-  content: "\F4EC";
-}
-
-.fa-creative-commons-pd-alt:before {
-  content: "\F4ED";
-}
-
-.fa-creative-commons-remix:before {
-  content: "\F4EE";
-}
-
-.fa-creative-commons-sa:before {
-  content: "\F4EF";
-}
-
-.fa-creative-commons-sampling:before {
-  content: "\F4F0";
-}
-
-.fa-creative-commons-sampling-plus:before {
-  content: "\F4F1";
-}
-
-.fa-creative-commons-share:before {
-  content: "\F4F2";
-}
-
-.fa-creative-commons-zero:before {
-  content: "\F4F3";
-}
-
-.fa-credit-card:before {
-  content: "\F09D";
-}
-
-.fa-critical-role:before {
-  content: "\F6C9";
-}
-
-.fa-crop:before {
-  content: "\F125";
-}
-
-.fa-crop-alt:before {
-  content: "\F565";
-}
-
-.fa-cross:before {
-  content: "\F654";
-}
-
-.fa-crosshairs:before {
-  content: "\F05B";
-}
-
-.fa-crow:before {
-  content: "\F520";
-}
-
-.fa-crown:before {
-  content: "\F521";
-}
-
-.fa-crutch:before {
-  content: "\F7F7";
-}
-
-.fa-css3:before {
-  content: "\F13C";
-}
-
-.fa-css3-alt:before {
-  content: "\F38B";
-}
-
-.fa-cube:before {
-  content: "\F1B2";
-}
-
-.fa-cubes:before {
-  content: "\F1B3";
-}
-
-.fa-cut:before {
-  content: "\F0C4";
-}
-
-.fa-cuttlefish:before {
-  content: "\F38C";
-}
-
-.fa-d-and-d:before {
-  content: "\F38D";
-}
-
-.fa-d-and-d-beyond:before {
-  content: "\F6CA";
-}
-
-.fa-dailymotion:before {
-  content: "\F952";
-}
-
-.fa-dashcube:before {
-  content: "\F210";
-}
-
-.fa-database:before {
-  content: "\F1C0";
-}
-
-.fa-deaf:before {
-  content: "\F2A4";
-}
-
-.fa-delicious:before {
-  content: "\F1A5";
-}
-
-.fa-democrat:before {
-  content: "\F747";
-}
-
-.fa-deploydog:before {
-  content: "\F38E";
-}
-
-.fa-deskpro:before {
-  content: "\F38F";
-}
-
-.fa-desktop:before {
-  content: "\F108";
-}
-
-.fa-dev:before {
-  content: "\F6CC";
-}
-
-.fa-deviantart:before {
-  content: "\F1BD";
-}
-
-.fa-dharmachakra:before {
-  content: "\F655";
-}
-
-.fa-dhl:before {
-  content: "\F790";
-}
-
-.fa-diagnoses:before {
-  content: "\F470";
-}
-
-.fa-diaspora:before {
-  content: "\F791";
-}
-
-.fa-dice:before {
-  content: "\F522";
-}
-
-.fa-dice-d20:before {
-  content: "\F6CF";
-}
-
-.fa-dice-d6:before {
-  content: "\F6D1";
-}
-
-.fa-dice-five:before {
-  content: "\F523";
-}
-
-.fa-dice-four:before {
-  content: "\F524";
-}
-
-.fa-dice-one:before {
-  content: "\F525";
-}
-
-.fa-dice-six:before {
-  content: "\F526";
-}
-
-.fa-dice-three:before {
-  content: "\F527";
-}
-
-.fa-dice-two:before {
-  content: "\F528";
-}
-
-.fa-digg:before {
-  content: "\F1A6";
-}
-
-.fa-digital-ocean:before {
-  content: "\F391";
-}
-
-.fa-digital-tachograph:before {
-  content: "\F566";
-}
-
-.fa-directions:before {
-  content: "\F5EB";
-}
-
-.fa-discord:before {
-  content: "\F392";
-}
-
-.fa-discourse:before {
-  content: "\F393";
-}
-
-.fa-disease:before {
-  content: "\F7FA";
-}
-
-.fa-divide:before {
-  content: "\F529";
-}
-
-.fa-dizzy:before {
-  content: "\F567";
-}
-
-.fa-dna:before {
-  content: "\F471";
-}
-
-.fa-dochub:before {
-  content: "\F394";
-}
-
-.fa-docker:before {
-  content: "\F395";
-}
-
-.fa-dog:before {
-  content: "\F6D3";
-}
-
-.fa-dollar-sign:before {
-  content: "\F155";
-}
-
-.fa-dolly:before {
-  content: "\F472";
-}
-
-.fa-dolly-flatbed:before {
-  content: "\F474";
-}
-
-.fa-donate:before {
-  content: "\F4B9";
-}
-
-.fa-door-closed:before {
-  content: "\F52A";
-}
-
-.fa-door-open:before {
-  content: "\F52B";
-}
-
-.fa-dot-circle:before {
-  content: "\F192";
-}
-
-.fa-dove:before {
-  content: "\F4BA";
-}
-
-.fa-download:before {
-  content: "\F019";
-}
-
-.fa-draft2digital:before {
-  content: "\F396";
-}
-
-.fa-drafting-compass:before {
-  content: "\F568";
-}
-
-.fa-dragon:before {
-  content: "\F6D5";
-}
-
-.fa-draw-polygon:before {
-  content: "\F5EE";
-}
-
-.fa-dribbble:before {
-  content: "\F17D";
-}
-
-.fa-dribbble-square:before {
-  content: "\F397";
-}
-
-.fa-dropbox:before {
-  content: "\F16B";
-}
-
-.fa-drum:before {
-  content: "\F569";
-}
-
-.fa-drum-steelpan:before {
-  content: "\F56A";
-}
-
-.fa-drumstick-bite:before {
-  content: "\F6D7";
-}
-
-.fa-drupal:before {
-  content: "\F1A9";
-}
-
-.fa-dumbbell:before {
-  content: "\F44B";
-}
-
-.fa-dumpster:before {
-  content: "\F793";
-}
-
-.fa-dumpster-fire:before {
-  content: "\F794";
-}
-
-.fa-dungeon:before {
-  content: "\F6D9";
-}
-
-.fa-dyalog:before {
-  content: "\F399";
-}
-
-.fa-earlybirds:before {
-  content: "\F39A";
-}
-
-.fa-ebay:before {
-  content: "\F4F4";
-}
-
-.fa-edge:before {
-  content: "\F282";
-}
-
-.fa-edit:before {
-  content: "\F044";
-}
-
-.fa-egg:before {
-  content: "\F7FB";
-}
-
-.fa-eject:before {
-  content: "\F052";
-}
-
-.fa-elementor:before {
-  content: "\F430";
-}
-
-.fa-ellipsis-h:before {
-  content: "\F141";
-}
-
-.fa-ellipsis-v:before {
-  content: "\F142";
-}
-
-.fa-ello:before {
-  content: "\F5F1";
-}
-
-.fa-ember:before {
-  content: "\F423";
-}
-
-.fa-empire:before {
-  content: "\F1D1";
-}
-
-.fa-envelope:before {
-  content: "\F0E0";
-}
-
-.fa-envelope-open:before {
-  content: "\F2B6";
-}
-
-.fa-envelope-open-text:before {
-  content: "\F658";
-}
-
-.fa-envelope-square:before {
-  content: "\F199";
-}
-
-.fa-envira:before {
-  content: "\F299";
-}
-
-.fa-equals:before {
-  content: "\F52C";
-}
-
-.fa-eraser:before {
-  content: "\F12D";
-}
-
-.fa-erlang:before {
-  content: "\F39D";
-}
-
-.fa-ethereum:before {
-  content: "\F42E";
-}
-
-.fa-ethernet:before {
-  content: "\F796";
-}
-
-.fa-etsy:before {
-  content: "\F2D7";
-}
-
-.fa-euro-sign:before {
-  content: "\F153";
-}
-
-.fa-evernote:before {
-  content: "\F839";
-}
-
-.fa-exchange-alt:before {
-  content: "\F362";
-}
-
-.fa-exclamation:before {
-  content: "\F12A";
-}
-
-.fa-exclamation-circle:before {
-  content: "\F06A";
-}
-
-.fa-exclamation-triangle:before {
-  content: "\F071";
-}
-
-.fa-expand:before {
-  content: "\F065";
-}
-
-.fa-expand-alt:before {
-  content: "\F424";
-}
-
-.fa-expand-arrows-alt:before {
-  content: "\F31E";
-}
-
-.fa-expeditedssl:before {
-  content: "\F23E";
-}
-
-.fa-external-link-alt:before {
-  content: "\F35D";
-}
-
-.fa-external-link-square-alt:before {
-  content: "\F360";
-}
-
-.fa-eye:before {
-  content: "\F06E";
-}
-
-.fa-eye-dropper:before {
-  content: "\F1FB";
-}
-
-.fa-eye-slash:before {
-  content: "\F070";
-}
-
-.fa-facebook:before {
-  content: "\F09A";
-}
-
-.fa-facebook-f:before {
-  content: "\F39E";
-}
-
-.fa-facebook-messenger:before {
-  content: "\F39F";
-}
-
-.fa-facebook-square:before {
-  content: "\F082";
-}
-
-.fa-fan:before {
-  content: "\F863";
-}
-
-.fa-fantasy-flight-games:before {
-  content: "\F6DC";
-}
-
-.fa-fast-backward:before {
-  content: "\F049";
-}
-
-.fa-fast-forward:before {
-  content: "\F050";
-}
-
-.fa-faucet:before {
-  content: "\F905";
-}
-
-.fa-fax:before {
-  content: "\F1AC";
-}
-
-.fa-feather:before {
-  content: "\F52D";
-}
-
-.fa-feather-alt:before {
-  content: "\F56B";
-}
-
-.fa-fedex:before {
-  content: "\F797";
-}
-
-.fa-fedora:before {
-  content: "\F798";
-}
-
-.fa-female:before {
-  content: "\F182";
-}
-
-.fa-fighter-jet:before {
-  content: "\F0FB";
-}
-
-.fa-figma:before {
-  content: "\F799";
-}
-
-.fa-file:before {
-  content: "\F15B";
-}
-
-.fa-file-alt:before {
-  content: "\F15C";
-}
-
-.fa-file-archive:before {
-  content: "\F1C6";
-}
-
-.fa-file-audio:before {
-  content: "\F1C7";
-}
-
-.fa-file-code:before {
-  content: "\F1C9";
-}
-
-.fa-file-contract:before {
-  content: "\F56C";
-}
-
-.fa-file-csv:before {
-  content: "\F6DD";
-}
-
-.fa-file-download:before {
-  content: "\F56D";
-}
-
-.fa-file-excel:before {
-  content: "\F1C3";
-}
-
-.fa-file-export:before {
-  content: "\F56E";
-}
-
-.fa-file-image:before {
-  content: "\F1C5";
-}
-
-.fa-file-import:before {
-  content: "\F56F";
-}
-
-.fa-file-invoice:before {
-  content: "\F570";
-}
-
-.fa-file-invoice-dollar:before {
-  content: "\F571";
-}
-
-.fa-file-medical:before {
-  content: "\F477";
-}
-
-.fa-file-medical-alt:before {
-  content: "\F478";
-}
-
-.fa-file-pdf:before {
-  content: "\F1C1";
-}
-
-.fa-file-powerpoint:before {
-  content: "\F1C4";
-}
-
-.fa-file-prescription:before {
-  content: "\F572";
-}
-
-.fa-file-signature:before {
-  content: "\F573";
-}
-
-.fa-file-upload:before {
-  content: "\F574";
-}
-
-.fa-file-video:before {
-  content: "\F1C8";
-}
-
-.fa-file-word:before {
-  content: "\F1C2";
-}
-
-.fa-fill:before {
-  content: "\F575";
-}
-
-.fa-fill-drip:before {
-  content: "\F576";
-}
-
-.fa-film:before {
-  content: "\F008";
-}
-
-.fa-filter:before {
-  content: "\F0B0";
-}
-
-.fa-fingerprint:before {
-  content: "\F577";
-}
-
-.fa-fire:before {
-  content: "\F06D";
-}
-
-.fa-fire-alt:before {
-  content: "\F7E4";
-}
-
-.fa-fire-extinguisher:before {
-  content: "\F134";
-}
-
-.fa-firefox:before {
-  content: "\F269";
-}
-
-.fa-firefox-browser:before {
-  content: "\F907";
-}
-
-.fa-first-aid:before {
-  content: "\F479";
-}
-
-.fa-first-order:before {
-  content: "\F2B0";
-}
-
-.fa-first-order-alt:before {
-  content: "\F50A";
-}
-
-.fa-firstdraft:before {
-  content: "\F3A1";
-}
-
-.fa-fish:before {
-  content: "\F578";
-}
-
-.fa-fist-raised:before {
-  content: "\F6DE";
-}
-
-.fa-flag:before {
-  content: "\F024";
-}
-
-.fa-flag-checkered:before {
-  content: "\F11E";
-}
-
-.fa-flag-usa:before {
-  content: "\F74D";
-}
-
-.fa-flask:before {
-  content: "\F0C3";
-}
-
-.fa-flickr:before {
-  content: "\F16E";
-}
-
-.fa-flipboard:before {
-  content: "\F44D";
-}
-
-.fa-flushed:before {
-  content: "\F579";
-}
-
-.fa-fly:before {
-  content: "\F417";
-}
-
-.fa-folder:before {
-  content: "\F07B";
-}
-
-.fa-folder-minus:before {
-  content: "\F65D";
-}
-
-.fa-folder-open:before {
-  content: "\F07C";
-}
-
-.fa-folder-plus:before {
-  content: "\F65E";
-}
-
-.fa-font:before {
-  content: "\F031";
-}
-
-.fa-font-awesome:before {
-  content: "\F2B4";
-}
-
-.fa-font-awesome-alt:before {
-  content: "\F35C";
-}
-
-.fa-font-awesome-flag:before {
-  content: "\F425";
-}
-
-.fa-font-awesome-logo-full:before {
-  content: "\F4E6";
-}
-
-.fa-fonticons:before {
-  content: "\F280";
-}
-
-.fa-fonticons-fi:before {
-  content: "\F3A2";
-}
-
-.fa-football-ball:before {
-  content: "\F44E";
-}
-
-.fa-fort-awesome:before {
-  content: "\F286";
-}
-
-.fa-fort-awesome-alt:before {
-  content: "\F3A3";
-}
-
-.fa-forumbee:before {
-  content: "\F211";
-}
-
-.fa-forward:before {
-  content: "\F04E";
-}
-
-.fa-foursquare:before {
-  content: "\F180";
-}
-
-.fa-free-code-camp:before {
-  content: "\F2C5";
-}
-
-.fa-freebsd:before {
-  content: "\F3A4";
-}
-
-.fa-frog:before {
-  content: "\F52E";
-}
-
-.fa-frown:before {
-  content: "\F119";
-}
-
-.fa-frown-open:before {
-  content: "\F57A";
-}
-
-.fa-fulcrum:before {
-  content: "\F50B";
-}
-
-.fa-funnel-dollar:before {
-  content: "\F662";
-}
-
-.fa-futbol:before {
-  content: "\F1E3";
-}
-
-.fa-galactic-republic:before {
-  content: "\F50C";
-}
-
-.fa-galactic-senate:before {
-  content: "\F50D";
-}
-
-.fa-gamepad:before {
-  content: "\F11B";
-}
-
-.fa-gas-pump:before {
-  content: "\F52F";
-}
-
-.fa-gavel:before {
-  content: "\F0E3";
-}
-
-.fa-gem:before {
-  content: "\F3A5";
-}
-
-.fa-genderless:before {
-  content: "\F22D";
-}
-
-.fa-get-pocket:before {
-  content: "\F265";
-}
-
-.fa-gg:before {
-  content: "\F260";
-}
-
-.fa-gg-circle:before {
-  content: "\F261";
-}
-
-.fa-ghost:before {
-  content: "\F6E2";
-}
-
-.fa-gift:before {
-  content: "\F06B";
-}
-
-.fa-gifts:before {
-  content: "\F79C";
-}
-
-.fa-git:before {
-  content: "\F1D3";
-}
-
-.fa-git-alt:before {
-  content: "\F841";
-}
-
-.fa-git-square:before {
-  content: "\F1D2";
-}
-
-.fa-github:before {
-  content: "\F09B";
-}
-
-.fa-github-alt:before {
-  content: "\F113";
-}
-
-.fa-github-square:before {
-  content: "\F092";
-}
-
-.fa-gitkraken:before {
-  content: "\F3A6";
-}
-
-.fa-gitlab:before {
-  content: "\F296";
-}
-
-.fa-gitter:before {
-  content: "\F426";
-}
-
-.fa-glass-cheers:before {
-  content: "\F79F";
-}
-
-.fa-glass-martini:before {
-  content: "\F000";
-}
-
-.fa-glass-martini-alt:before {
-  content: "\F57B";
-}
-
-.fa-glass-whiskey:before {
-  content: "\F7A0";
-}
-
-.fa-glasses:before {
-  content: "\F530";
-}
-
-.fa-glide:before {
-  content: "\F2A5";
-}
-
-.fa-glide-g:before {
-  content: "\F2A6";
-}
-
-.fa-globe:before {
-  content: "\F0AC";
-}
-
-.fa-globe-africa:before {
-  content: "\F57C";
-}
-
-.fa-globe-americas:before {
-  content: "\F57D";
-}
-
-.fa-globe-asia:before {
-  content: "\F57E";
-}
-
-.fa-globe-europe:before {
-  content: "\F7A2";
-}
-
-.fa-gofore:before {
-  content: "\F3A7";
-}
-
-.fa-golf-ball:before {
-  content: "\F450";
-}
-
-.fa-goodreads:before {
-  content: "\F3A8";
-}
-
-.fa-goodreads-g:before {
-  content: "\F3A9";
-}
-
-.fa-google:before {
-  content: "\F1A0";
-}
-
-.fa-google-drive:before {
-  content: "\F3AA";
-}
-
-.fa-google-play:before {
-  content: "\F3AB";
-}
-
-.fa-google-plus:before {
-  content: "\F2B3";
-}
-
-.fa-google-plus-g:before {
-  content: "\F0D5";
-}
-
-.fa-google-plus-square:before {
-  content: "\F0D4";
-}
-
-.fa-google-wallet:before {
-  content: "\F1EE";
-}
-
-.fa-gopuram:before {
-  content: "\F664";
-}
-
-.fa-graduation-cap:before {
-  content: "\F19D";
-}
-
-.fa-gratipay:before {
-  content: "\F184";
-}
-
-.fa-grav:before {
-  content: "\F2D6";
-}
-
-.fa-greater-than:before {
-  content: "\F531";
-}
-
-.fa-greater-than-equal:before {
-  content: "\F532";
-}
-
-.fa-grimace:before {
-  content: "\F57F";
-}
-
-.fa-grin:before {
-  content: "\F580";
-}
-
-.fa-grin-alt:before {
-  content: "\F581";
-}
-
-.fa-grin-beam:before {
-  content: "\F582";
-}
-
-.fa-grin-beam-sweat:before {
-  content: "\F583";
-}
-
-.fa-grin-hearts:before {
-  content: "\F584";
-}
-
-.fa-grin-squint:before {
-  content: "\F585";
-}
-
-.fa-grin-squint-tears:before {
-  content: "\F586";
-}
-
-.fa-grin-stars:before {
-  content: "\F587";
-}
-
-.fa-grin-tears:before {
-  content: "\F588";
-}
-
-.fa-grin-tongue:before {
-  content: "\F589";
-}
-
-.fa-grin-tongue-squint:before {
-  content: "\F58A";
-}
-
-.fa-grin-tongue-wink:before {
-  content: "\F58B";
-}
-
-.fa-grin-wink:before {
-  content: "\F58C";
-}
-
-.fa-grip-horizontal:before {
-  content: "\F58D";
-}
-
-.fa-grip-lines:before {
-  content: "\F7A4";
-}
-
-.fa-grip-lines-vertical:before {
-  content: "\F7A5";
-}
-
-.fa-grip-vertical:before {
-  content: "\F58E";
-}
-
-.fa-gripfire:before {
-  content: "\F3AC";
-}
-
-.fa-grunt:before {
-  content: "\F3AD";
-}
-
-.fa-guitar:before {
-  content: "\F7A6";
-}
-
-.fa-gulp:before {
-  content: "\F3AE";
-}
-
-.fa-h-square:before {
-  content: "\F0FD";
-}
-
-.fa-hacker-news:before {
-  content: "\F1D4";
-}
-
-.fa-hacker-news-square:before {
-  content: "\F3AF";
-}
-
-.fa-hackerrank:before {
-  content: "\F5F7";
-}
-
-.fa-hamburger:before {
-  content: "\F805";
-}
-
-.fa-hammer:before {
-  content: "\F6E3";
-}
-
-.fa-hamsa:before {
-  content: "\F665";
-}
-
-.fa-hand-holding:before {
-  content: "\F4BD";
-}
-
-.fa-hand-holding-heart:before {
-  content: "\F4BE";
-}
-
-.fa-hand-holding-medical:before {
-  content: "\F95C";
-}
-
-.fa-hand-holding-usd:before {
-  content: "\F4C0";
-}
-
-.fa-hand-holding-water:before {
-  content: "\F4C1";
-}
-
-.fa-hand-lizard:before {
-  content: "\F258";
-}
-
-.fa-hand-middle-finger:before {
-  content: "\F806";
-}
-
-.fa-hand-paper:before {
-  content: "\F256";
-}
-
-.fa-hand-peace:before {
-  content: "\F25B";
-}
-
-.fa-hand-point-down:before {
-  content: "\F0A7";
-}
-
-.fa-hand-point-left:before {
-  content: "\F0A5";
-}
-
-.fa-hand-point-right:before {
-  content: "\F0A4";
-}
-
-.fa-hand-point-up:before {
-  content: "\F0A6";
-}
-
-.fa-hand-pointer:before {
-  content: "\F25A";
-}
-
-.fa-hand-rock:before {
-  content: "\F255";
-}
-
-.fa-hand-scissors:before {
-  content: "\F257";
-}
-
-.fa-hand-sparkles:before {
-  content: "\F95D";
-}
-
-.fa-hand-spock:before {
-  content: "\F259";
-}
-
-.fa-hands:before {
-  content: "\F4C2";
-}
-
-.fa-hands-helping:before {
-  content: "\F4C4";
-}
-
-.fa-hands-wash:before {
-  content: "\F95E";
-}
-
-.fa-handshake:before {
-  content: "\F2B5";
-}
-
-.fa-handshake-alt-slash:before {
-  content: "\F95F";
-}
-
-.fa-handshake-slash:before {
-  content: "\F960";
-}
-
-.fa-hanukiah:before {
-  content: "\F6E6";
-}
-
-.fa-hard-hat:before {
-  content: "\F807";
-}
-
-.fa-hashtag:before {
-  content: "\F292";
-}
-
-.fa-hat-cowboy:before {
-  content: "\F8C0";
-}
-
-.fa-hat-cowboy-side:before {
-  content: "\F8C1";
-}
-
-.fa-hat-wizard:before {
-  content: "\F6E8";
-}
-
-.fa-hdd:before {
-  content: "\F0A0";
-}
-
-.fa-head-side-cough:before {
-  content: "\F961";
-}
-
-.fa-head-side-cough-slash:before {
-  content: "\F962";
-}
-
-.fa-head-side-mask:before {
-  content: "\F963";
-}
-
-.fa-head-side-virus:before {
-  content: "\F964";
-}
-
-.fa-heading:before {
-  content: "\F1DC";
-}
-
-.fa-headphones:before {
-  content: "\F025";
-}
-
-.fa-headphones-alt:before {
-  content: "\F58F";
-}
-
-.fa-headset:before {
-  content: "\F590";
-}
-
-.fa-heart:before {
-  content: "\F004";
-}
-
-.fa-heart-broken:before {
-  content: "\F7A9";
-}
-
-.fa-heartbeat:before {
-  content: "\F21E";
-}
-
-.fa-helicopter:before {
-  content: "\F533";
-}
-
-.fa-highlighter:before {
-  content: "\F591";
-}
-
-.fa-hiking:before {
-  content: "\F6EC";
-}
-
-.fa-hippo:before {
-  content: "\F6ED";
-}
-
-.fa-hips:before {
-  content: "\F452";
-}
-
-.fa-hire-a-helper:before {
-  content: "\F3B0";
-}
-
-.fa-history:before {
-  content: "\F1DA";
-}
-
-.fa-hockey-puck:before {
-  content: "\F453";
-}
-
-.fa-holly-berry:before {
-  content: "\F7AA";
-}
-
-.fa-home:before {
-  content: "\F015";
-}
-
-.fa-hooli:before {
-  content: "\F427";
-}
-
-.fa-hornbill:before {
-  content: "\F592";
-}
-
-.fa-horse:before {
-  content: "\F6F0";
-}
-
-.fa-horse-head:before {
-  content: "\F7AB";
-}
-
-.fa-hospital:before {
-  content: "\F0F8";
-}
-
-.fa-hospital-alt:before {
-  content: "\F47D";
-}
-
-.fa-hospital-symbol:before {
-  content: "\F47E";
-}
-
-.fa-hospital-user:before {
-  content: "\F80D";
-}
-
-.fa-hot-tub:before {
-  content: "\F593";
-}
-
-.fa-hotdog:before {
-  content: "\F80F";
-}
-
-.fa-hotel:before {
-  content: "\F594";
-}
-
-.fa-hotjar:before {
-  content: "\F3B1";
-}
-
-.fa-hourglass:before {
-  content: "\F254";
-}
-
-.fa-hourglass-end:before {
-  content: "\F253";
-}
-
-.fa-hourglass-half:before {
-  content: "\F252";
-}
-
-.fa-hourglass-start:before {
-  content: "\F251";
-}
-
-.fa-house-damage:before {
-  content: "\F6F1";
-}
-
-.fa-house-user:before {
-  content: "\F965";
-}
-
-.fa-houzz:before {
-  content: "\F27C";
-}
-
-.fa-hryvnia:before {
-  content: "\F6F2";
-}
-
-.fa-html5:before {
-  content: "\F13B";
-}
-
-.fa-hubspot:before {
-  content: "\F3B2";
-}
-
-.fa-i-cursor:before {
-  content: "\F246";
-}
-
-.fa-ice-cream:before {
-  content: "\F810";
-}
-
-.fa-icicles:before {
-  content: "\F7AD";
-}
-
-.fa-icons:before {
-  content: "\F86D";
-}
-
-.fa-id-badge:before {
-  content: "\F2C1";
-}
-
-.fa-id-card:before {
-  content: "\F2C2";
-}
-
-.fa-id-card-alt:before {
-  content: "\F47F";
-}
-
-.fa-ideal:before {
-  content: "\F913";
-}
-
-.fa-igloo:before {
-  content: "\F7AE";
-}
-
-.fa-image:before {
-  content: "\F03E";
-}
-
-.fa-images:before {
-  content: "\F302";
-}
-
-.fa-imdb:before {
-  content: "\F2D8";
-}
-
-.fa-inbox:before {
-  content: "\F01C";
-}
-
-.fa-indent:before {
-  content: "\F03C";
-}
-
-.fa-industry:before {
-  content: "\F275";
-}
-
-.fa-infinity:before {
-  content: "\F534";
-}
-
-.fa-info:before {
-  content: "\F129";
-}
-
-.fa-info-circle:before {
-  content: "\F05A";
-}
-
-.fa-instagram:before {
-  content: "\F16D";
-}
-
-.fa-instagram-square:before {
-  content: "\F955";
-}
-
-.fa-intercom:before {
-  content: "\F7AF";
-}
-
-.fa-internet-explorer:before {
-  content: "\F26B";
-}
-
-.fa-invision:before {
-  content: "\F7B0";
-}
-
-.fa-ioxhost:before {
-  content: "\F208";
-}
-
-.fa-italic:before {
-  content: "\F033";
-}
-
-.fa-itch-io:before {
-  content: "\F83A";
-}
-
-.fa-itunes:before {
-  content: "\F3B4";
-}
-
-.fa-itunes-note:before {
-  content: "\F3B5";
-}
-
-.fa-java:before {
-  content: "\F4E4";
-}
-
-.fa-jedi:before {
-  content: "\F669";
-}
-
-.fa-jedi-order:before {
-  content: "\F50E";
-}
-
-.fa-jenkins:before {
-  content: "\F3B6";
-}
-
-.fa-jira:before {
-  content: "\F7B1";
-}
-
-.fa-joget:before {
-  content: "\F3B7";
-}
-
-.fa-joint:before {
-  content: "\F595";
-}
-
-.fa-joomla:before {
-  content: "\F1AA";
-}
-
-.fa-journal-whills:before {
-  content: "\F66A";
-}
-
-.fa-js:before {
-  content: "\F3B8";
-}
-
-.fa-js-square:before {
-  content: "\F3B9";
-}
-
-.fa-jsfiddle:before {
-  content: "\F1CC";
-}
-
-.fa-kaaba:before {
-  content: "\F66B";
-}
-
-.fa-kaggle:before {
-  content: "\F5FA";
-}
-
-.fa-key:before {
-  content: "\F084";
-}
-
-.fa-keybase:before {
-  content: "\F4F5";
-}
-
-.fa-keyboard:before {
-  content: "\F11C";
-}
-
-.fa-keycdn:before {
-  content: "\F3BA";
-}
-
-.fa-khanda:before {
-  content: "\F66D";
-}
-
-.fa-kickstarter:before {
-  content: "\F3BB";
-}
-
-.fa-kickstarter-k:before {
-  content: "\F3BC";
-}
-
-.fa-kiss:before {
-  content: "\F596";
-}
-
-.fa-kiss-beam:before {
-  content: "\F597";
-}
-
-.fa-kiss-wink-heart:before {
-  content: "\F598";
-}
-
-.fa-kiwi-bird:before {
-  content: "\F535";
-}
-
-.fa-korvue:before {
-  content: "\F42F";
-}
-
-.fa-landmark:before {
-  content: "\F66F";
-}
-
-.fa-language:before {
-  content: "\F1AB";
-}
-
-.fa-laptop:before {
-  content: "\F109";
-}
-
-.fa-laptop-code:before {
-  content: "\F5FC";
-}
-
-.fa-laptop-house:before {
-  content: "\F966";
-}
-
-.fa-laptop-medical:before {
-  content: "\F812";
-}
-
-.fa-laravel:before {
-  content: "\F3BD";
-}
-
-.fa-lastfm:before {
-  content: "\F202";
-}
-
-.fa-lastfm-square:before {
-  content: "\F203";
-}
-
-.fa-laugh:before {
-  content: "\F599";
-}
-
-.fa-laugh-beam:before {
-  content: "\F59A";
-}
-
-.fa-laugh-squint:before {
-  content: "\F59B";
-}
-
-.fa-laugh-wink:before {
-  content: "\F59C";
-}
-
-.fa-layer-group:before {
-  content: "\F5FD";
-}
-
-.fa-leaf:before {
-  content: "\F06C";
-}
-
-.fa-leanpub:before {
-  content: "\F212";
-}
-
-.fa-lemon:before {
-  content: "\F094";
-}
-
-.fa-less:before {
-  content: "\F41D";
-}
-
-.fa-less-than:before {
-  content: "\F536";
-}
-
-.fa-less-than-equal:before {
-  content: "\F537";
-}
-
-.fa-level-down-alt:before {
-  content: "\F3BE";
-}
-
-.fa-level-up-alt:before {
-  content: "\F3BF";
-}
-
-.fa-life-ring:before {
-  content: "\F1CD";
-}
-
-.fa-lightbulb:before {
-  content: "\F0EB";
-}
-
-.fa-line:before {
-  content: "\F3C0";
-}
-
-.fa-link:before {
-  content: "\F0C1";
-}
-
-.fa-linkedin:before {
-  content: "\F08C";
-}
-
-.fa-linkedin-in:before {
-  content: "\F0E1";
-}
-
-.fa-linode:before {
-  content: "\F2B8";
-}
-
-.fa-linux:before {
-  content: "\F17C";
-}
-
-.fa-lira-sign:before {
-  content: "\F195";
-}
-
-.fa-list:before {
-  content: "\F03A";
-}
-
-.fa-list-alt:before {
-  content: "\F022";
-}
-
-.fa-list-ol:before {
-  content: "\F0CB";
-}
-
-.fa-list-ul:before {
-  content: "\F0CA";
-}
-
-.fa-location-arrow:before {
-  content: "\F124";
-}
-
-.fa-lock:before {
-  content: "\F023";
-}
-
-.fa-lock-open:before {
-  content: "\F3C1";
-}
-
-.fa-long-arrow-alt-down:before {
-  content: "\F309";
-}
-
-.fa-long-arrow-alt-left:before {
-  content: "\F30A";
-}
-
-.fa-long-arrow-alt-right:before {
-  content: "\F30B";
-}
-
-.fa-long-arrow-alt-up:before {
-  content: "\F30C";
-}
-
-.fa-low-vision:before {
-  content: "\F2A8";
-}
-
-.fa-luggage-cart:before {
-  content: "\F59D";
-}
-
-.fa-lungs:before {
-  content: "\F604";
-}
-
-.fa-lungs-virus:before {
-  content: "\F967";
-}
-
-.fa-lyft:before {
-  content: "\F3C3";
-}
-
-.fa-magento:before {
-  content: "\F3C4";
-}
-
-.fa-magic:before {
-  content: "\F0D0";
-}
-
-.fa-magnet:before {
-  content: "\F076";
-}
-
-.fa-mail-bulk:before {
-  content: "\F674";
-}
-
-.fa-mailchimp:before {
-  content: "\F59E";
-}
-
-.fa-male:before {
-  content: "\F183";
-}
-
-.fa-mandalorian:before {
-  content: "\F50F";
-}
-
-.fa-map:before {
-  content: "\F279";
-}
-
-.fa-map-marked:before {
-  content: "\F59F";
-}
-
-.fa-map-marked-alt:before {
-  content: "\F5A0";
-}
-
-.fa-map-marker:before {
-  content: "\F041";
-}
-
-.fa-map-marker-alt:before {
-  content: "\F3C5";
-}
-
-.fa-map-pin:before {
-  content: "\F276";
-}
-
-.fa-map-signs:before {
-  content: "\F277";
-}
-
-.fa-markdown:before {
-  content: "\F60F";
-}
-
-.fa-marker:before {
-  content: "\F5A1";
-}
-
-.fa-mars:before {
-  content: "\F222";
-}
-
-.fa-mars-double:before {
-  content: "\F227";
-}
-
-.fa-mars-stroke:before {
-  content: "\F229";
-}
-
-.fa-mars-stroke-h:before {
-  content: "\F22B";
-}
-
-.fa-mars-stroke-v:before {
-  content: "\F22A";
-}
-
-.fa-mask:before {
-  content: "\F6FA";
-}
-
-.fa-mastodon:before {
-  content: "\F4F6";
-}
-
-.fa-maxcdn:before {
-  content: "\F136";
-}
-
-.fa-mdb:before {
-  content: "\F8CA";
-}
-
-.fa-medal:before {
-  content: "\F5A2";
-}
-
-.fa-medapps:before {
-  content: "\F3C6";
-}
-
-.fa-medium:before {
-  content: "\F23A";
-}
-
-.fa-medium-m:before {
-  content: "\F3C7";
-}
-
-.fa-medkit:before {
-  content: "\F0FA";
-}
-
-.fa-medrt:before {
-  content: "\F3C8";
-}
-
-.fa-meetup:before {
-  content: "\F2E0";
-}
-
-.fa-megaport:before {
-  content: "\F5A3";
-}
-
-.fa-meh:before {
-  content: "\F11A";
-}
-
-.fa-meh-blank:before {
-  content: "\F5A4";
-}
-
-.fa-meh-rolling-eyes:before {
-  content: "\F5A5";
-}
-
-.fa-memory:before {
-  content: "\F538";
-}
-
-.fa-mendeley:before {
-  content: "\F7B3";
-}
-
-.fa-menorah:before {
-  content: "\F676";
-}
-
-.fa-mercury:before {
-  content: "\F223";
-}
-
-.fa-meteor:before {
-  content: "\F753";
-}
-
-.fa-microblog:before {
-  content: "\F91A";
-}
-
-.fa-microchip:before {
-  content: "\F2DB";
-}
-
-.fa-microphone:before {
-  content: "\F130";
-}
-
-.fa-microphone-alt:before {
-  content: "\F3C9";
-}
-
-.fa-microphone-alt-slash:before {
-  content: "\F539";
-}
-
-.fa-microphone-slash:before {
-  content: "\F131";
-}
-
-.fa-microscope:before {
-  content: "\F610";
-}
-
-.fa-microsoft:before {
-  content: "\F3CA";
-}
-
-.fa-minus:before {
-  content: "\F068";
-}
-
-.fa-minus-circle:before {
-  content: "\F056";
-}
-
-.fa-minus-square:before {
-  content: "\F146";
-}
-
-.fa-mitten:before {
-  content: "\F7B5";
-}
-
-.fa-mix:before {
-  content: "\F3CB";
-}
-
-.fa-mixcloud:before {
-  content: "\F289";
-}
-
-.fa-mixer:before {
-  content: "\F956";
-}
-
-.fa-mizuni:before {
-  content: "\F3CC";
-}
-
-.fa-mobile:before {
-  content: "\F10B";
-}
-
-.fa-mobile-alt:before {
-  content: "\F3CD";
-}
-
-.fa-modx:before {
-  content: "\F285";
-}
-
-.fa-monero:before {
-  content: "\F3D0";
-}
-
-.fa-money-bill:before {
-  content: "\F0D6";
-}
-
-.fa-money-bill-alt:before {
-  content: "\F3D1";
-}
-
-.fa-money-bill-wave:before {
-  content: "\F53A";
-}
-
-.fa-money-bill-wave-alt:before {
-  content: "\F53B";
-}
-
-.fa-money-check:before {
-  content: "\F53C";
-}
-
-.fa-money-check-alt:before {
-  content: "\F53D";
-}
-
-.fa-monument:before {
-  content: "\F5A6";
-}
-
-.fa-moon:before {
-  content: "\F186";
-}
-
-.fa-mortar-pestle:before {
-  content: "\F5A7";
-}
-
-.fa-mosque:before {
-  content: "\F678";
-}
-
-.fa-motorcycle:before {
-  content: "\F21C";
-}
-
-.fa-mountain:before {
-  content: "\F6FC";
-}
-
-.fa-mouse:before {
-  content: "\F8CC";
-}
-
-.fa-mouse-pointer:before {
-  content: "\F245";
-}
-
-.fa-mug-hot:before {
-  content: "\F7B6";
-}
-
-.fa-music:before {
-  content: "\F001";
-}
-
-.fa-napster:before {
-  content: "\F3D2";
-}
-
-.fa-neos:before {
-  content: "\F612";
-}
-
-.fa-network-wired:before {
-  content: "\F6FF";
-}
-
-.fa-neuter:before {
-  content: "\F22C";
-}
-
-.fa-newspaper:before {
-  content: "\F1EA";
-}
-
-.fa-nimblr:before {
-  content: "\F5A8";
-}
-
-.fa-node:before {
-  content: "\F419";
-}
-
-.fa-node-js:before {
-  content: "\F3D3";
-}
-
-.fa-not-equal:before {
-  content: "\F53E";
-}
-
-.fa-notes-medical:before {
-  content: "\F481";
-}
-
-.fa-npm:before {
-  content: "\F3D4";
-}
-
-.fa-ns8:before {
-  content: "\F3D5";
-}
-
-.fa-nutritionix:before {
-  content: "\F3D6";
-}
-
-.fa-object-group:before {
-  content: "\F247";
-}
-
-.fa-object-ungroup:before {
-  content: "\F248";
-}
-
-.fa-odnoklassniki:before {
-  content: "\F263";
-}
-
-.fa-odnoklassniki-square:before {
-  content: "\F264";
-}
-
-.fa-oil-can:before {
-  content: "\F613";
-}
-
-.fa-old-republic:before {
-  content: "\F510";
-}
-
-.fa-om:before {
-  content: "\F679";
-}
-
-.fa-opencart:before {
-  content: "\F23D";
-}
-
-.fa-openid:before {
-  content: "\F19B";
-}
-
-.fa-opera:before {
-  content: "\F26A";
-}
-
-.fa-optin-monster:before {
-  content: "\F23C";
-}
-
-.fa-orcid:before {
-  content: "\F8D2";
-}
-
-.fa-osi:before {
-  content: "\F41A";
-}
-
-.fa-otter:before {
-  content: "\F700";
-}
-
-.fa-outdent:before {
-  content: "\F03B";
-}
-
-.fa-page4:before {
-  content: "\F3D7";
-}
-
-.fa-pagelines:before {
-  content: "\F18C";
-}
-
-.fa-pager:before {
-  content: "\F815";
-}
-
-.fa-paint-brush:before {
-  content: "\F1FC";
-}
-
-.fa-paint-roller:before {
-  content: "\F5AA";
-}
-
-.fa-palette:before {
-  content: "\F53F";
-}
-
-.fa-palfed:before {
-  content: "\F3D8";
-}
-
-.fa-pallet:before {
-  content: "\F482";
-}
-
-.fa-paper-plane:before {
-  content: "\F1D8";
-}
-
-.fa-paperclip:before {
-  content: "\F0C6";
-}
-
-.fa-parachute-box:before {
-  content: "\F4CD";
-}
-
-.fa-paragraph:before {
-  content: "\F1DD";
-}
-
-.fa-parking:before {
-  content: "\F540";
-}
-
-.fa-passport:before {
-  content: "\F5AB";
-}
-
-.fa-pastafarianism:before {
-  content: "\F67B";
-}
-
-.fa-paste:before {
-  content: "\F0EA";
-}
-
-.fa-patreon:before {
-  content: "\F3D9";
-}
-
-.fa-pause:before {
-  content: "\F04C";
-}
-
-.fa-pause-circle:before {
-  content: "\F28B";
-}
-
-.fa-paw:before {
-  content: "\F1B0";
-}
-
-.fa-paypal:before {
-  content: "\F1ED";
-}
-
-.fa-peace:before {
-  content: "\F67C";
-}
-
-.fa-pen:before {
-  content: "\F304";
-}
-
-.fa-pen-alt:before {
-  content: "\F305";
-}
-
-.fa-pen-fancy:before {
-  content: "\F5AC";
-}
-
-.fa-pen-nib:before {
-  content: "\F5AD";
-}
-
-.fa-pen-square:before {
-  content: "\F14B";
-}
-
-.fa-pencil-alt:before {
-  content: "\F303";
-}
-
-.fa-pencil-ruler:before {
-  content: "\F5AE";
-}
-
-.fa-penny-arcade:before {
-  content: "\F704";
-}
-
-.fa-people-arrows:before {
-  content: "\F968";
-}
-
-.fa-people-carry:before {
-  content: "\F4CE";
-}
-
-.fa-pepper-hot:before {
-  content: "\F816";
-}
-
-.fa-percent:before {
-  content: "\F295";
-}
-
-.fa-percentage:before {
-  content: "\F541";
-}
-
-.fa-periscope:before {
-  content: "\F3DA";
-}
-
-.fa-person-booth:before {
-  content: "\F756";
-}
-
-.fa-phabricator:before {
-  content: "\F3DB";
-}
-
-.fa-phoenix-framework:before {
-  content: "\F3DC";
-}
-
-.fa-phoenix-squadron:before {
-  content: "\F511";
-}
-
-.fa-phone:before {
-  content: "\F095";
-}
-
-.fa-phone-alt:before {
-  content: "\F879";
-}
-
-.fa-phone-slash:before {
-  content: "\F3DD";
-}
-
-.fa-phone-square:before {
-  content: "\F098";
-}
-
-.fa-phone-square-alt:before {
-  content: "\F87B";
-}
-
-.fa-phone-volume:before {
-  content: "\F2A0";
-}
-
-.fa-photo-video:before {
-  content: "\F87C";
-}
-
-.fa-php:before {
-  content: "\F457";
-}
-
-.fa-pied-piper:before {
-  content: "\F2AE";
-}
-
-.fa-pied-piper-alt:before {
-  content: "\F1A8";
-}
-
-.fa-pied-piper-hat:before {
-  content: "\F4E5";
-}
-
-.fa-pied-piper-pp:before {
-  content: "\F1A7";
-}
-
-.fa-pied-piper-square:before {
-  content: "\F91E";
-}
-
-.fa-piggy-bank:before {
-  content: "\F4D3";
-}
-
-.fa-pills:before {
-  content: "\F484";
-}
-
-.fa-pinterest:before {
-  content: "\F0D2";
-}
-
-.fa-pinterest-p:before {
-  content: "\F231";
-}
-
-.fa-pinterest-square:before {
-  content: "\F0D3";
-}
-
-.fa-pizza-slice:before {
-  content: "\F818";
-}
-
-.fa-place-of-worship:before {
-  content: "\F67F";
-}
-
-.fa-plane:before {
-  content: "\F072";
-}
-
-.fa-plane-arrival:before {
-  content: "\F5AF";
-}
-
-.fa-plane-departure:before {
-  content: "\F5B0";
-}
-
-.fa-plane-slash:before {
-  content: "\F969";
-}
-
-.fa-play:before {
-  content: "\F04B";
-}
-
-.fa-play-circle:before {
-  content: "\F144";
-}
-
-.fa-playstation:before {
-  content: "\F3DF";
-}
-
-.fa-plug:before {
-  content: "\F1E6";
-}
-
-.fa-plus:before {
-  content: "\F067";
-}
-
-.fa-plus-circle:before {
-  content: "\F055";
-}
-
-.fa-plus-square:before {
-  content: "\F0FE";
-}
-
-.fa-podcast:before {
-  content: "\F2CE";
-}
-
-.fa-poll:before {
-  content: "\F681";
-}
-
-.fa-poll-h:before {
-  content: "\F682";
-}
-
-.fa-poo:before {
-  content: "\F2FE";
-}
-
-.fa-poo-storm:before {
-  content: "\F75A";
-}
-
-.fa-poop:before {
-  content: "\F619";
-}
-
-.fa-portrait:before {
-  content: "\F3E0";
-}
-
-.fa-pound-sign:before {
-  content: "\F154";
-}
-
-.fa-power-off:before {
-  content: "\F011";
-}
-
-.fa-pray:before {
-  content: "\F683";
-}
-
-.fa-praying-hands:before {
-  content: "\F684";
-}
-
-.fa-prescription:before {
-  content: "\F5B1";
-}
-
-.fa-prescription-bottle:before {
-  content: "\F485";
-}
-
-.fa-prescription-bottle-alt:before {
-  content: "\F486";
-}
-
-.fa-print:before {
-  content: "\F02F";
-}
-
-.fa-procedures:before {
-  content: "\F487";
-}
-
-.fa-product-hunt:before {
-  content: "\F288";
-}
-
-.fa-project-diagram:before {
-  content: "\F542";
-}
-
-.fa-pump-medical:before {
-  content: "\F96A";
-}
-
-.fa-pump-soap:before {
-  content: "\F96B";
-}
-
-.fa-pushed:before {
-  content: "\F3E1";
-}
-
-.fa-puzzle-piece:before {
-  content: "\F12E";
-}
-
-.fa-python:before {
-  content: "\F3E2";
-}
-
-.fa-qq:before {
-  content: "\F1D6";
-}
-
-.fa-qrcode:before {
-  content: "\F029";
-}
-
-.fa-question:before {
-  content: "\F128";
-}
-
-.fa-question-circle:before {
-  content: "\F059";
-}
-
-.fa-quidditch:before {
-  content: "\F458";
-}
-
-.fa-quinscape:before {
-  content: "\F459";
-}
-
-.fa-quora:before {
-  content: "\F2C4";
-}
-
-.fa-quote-left:before {
-  content: "\F10D";
-}
-
-.fa-quote-right:before {
-  content: "\F10E";
-}
-
-.fa-quran:before {
-  content: "\F687";
-}
-
-.fa-r-project:before {
-  content: "\F4F7";
-}
-
-.fa-radiation:before {
-  content: "\F7B9";
-}
-
-.fa-radiation-alt:before {
-  content: "\F7BA";
-}
-
-.fa-rainbow:before {
-  content: "\F75B";
-}
-
-.fa-random:before {
-  content: "\F074";
-}
-
-.fa-raspberry-pi:before {
-  content: "\F7BB";
-}
-
-.fa-ravelry:before {
-  content: "\F2D9";
-}
-
-.fa-react:before {
-  content: "\F41B";
-}
-
-.fa-reacteurope:before {
-  content: "\F75D";
-}
-
-.fa-readme:before {
-  content: "\F4D5";
-}
-
-.fa-rebel:before {
-  content: "\F1D0";
-}
-
-.fa-receipt:before {
-  content: "\F543";
-}
-
-.fa-record-vinyl:before {
-  content: "\F8D9";
-}
-
-.fa-recycle:before {
-  content: "\F1B8";
-}
-
-.fa-red-river:before {
-  content: "\F3E3";
-}
-
-.fa-reddit:before {
-  content: "\F1A1";
-}
-
-.fa-reddit-alien:before {
-  content: "\F281";
-}
-
-.fa-reddit-square:before {
-  content: "\F1A2";
-}
-
-.fa-redhat:before {
-  content: "\F7BC";
-}
-
-.fa-redo:before {
-  content: "\F01E";
-}
-
-.fa-redo-alt:before {
-  content: "\F2F9";
-}
-
-.fa-registered:before {
-  content: "\F25D";
-}
-
-.fa-remove-format:before {
-  content: "\F87D";
-}
-
-.fa-renren:before {
-  content: "\F18B";
-}
-
-.fa-reply:before {
-  content: "\F3E5";
-}
-
-.fa-reply-all:before {
-  content: "\F122";
-}
-
-.fa-replyd:before {
-  content: "\F3E6";
-}
-
-.fa-republican:before {
-  content: "\F75E";
-}
-
-.fa-researchgate:before {
-  content: "\F4F8";
-}
-
-.fa-resolving:before {
-  content: "\F3E7";
-}
-
-.fa-restroom:before {
-  content: "\F7BD";
-}
-
-.fa-retweet:before {
-  content: "\F079";
-}
-
-.fa-rev:before {
-  content: "\F5B2";
-}
-
-.fa-ribbon:before {
-  content: "\F4D6";
-}
-
-.fa-ring:before {
-  content: "\F70B";
-}
-
-.fa-road:before {
-  content: "\F018";
-}
-
-.fa-robot:before {
-  content: "\F544";
-}
-
-.fa-rocket:before {
-  content: "\F135";
-}
-
-.fa-rocketchat:before {
-  content: "\F3E8";
-}
-
-.fa-rockrms:before {
-  content: "\F3E9";
-}
-
-.fa-route:before {
-  content: "\F4D7";
-}
-
-.fa-rss:before {
-  content: "\F09E";
-}
-
-.fa-rss-square:before {
-  content: "\F143";
-}
-
-.fa-ruble-sign:before {
-  content: "\F158";
-}
-
-.fa-ruler:before {
-  content: "\F545";
-}
-
-.fa-ruler-combined:before {
-  content: "\F546";
-}
-
-.fa-ruler-horizontal:before {
-  content: "\F547";
-}
-
-.fa-ruler-vertical:before {
-  content: "\F548";
-}
-
-.fa-running:before {
-  content: "\F70C";
-}
-
-.fa-rupee-sign:before {
-  content: "\F156";
-}
-
-.fa-sad-cry:before {
-  content: "\F5B3";
-}
-
-.fa-sad-tear:before {
-  content: "\F5B4";
-}
-
-.fa-safari:before {
-  content: "\F267";
-}
-
-.fa-salesforce:before {
-  content: "\F83B";
-}
-
-.fa-sass:before {
-  content: "\F41E";
-}
-
-.fa-satellite:before {
-  content: "\F7BF";
-}
-
-.fa-satellite-dish:before {
-  content: "\F7C0";
-}
-
-.fa-save:before {
-  content: "\F0C7";
-}
-
-.fa-schlix:before {
-  content: "\F3EA";
-}
-
-.fa-school:before {
-  content: "\F549";
-}
-
-.fa-screwdriver:before {
-  content: "\F54A";
-}
-
-.fa-scribd:before {
-  content: "\F28A";
-}
-
-.fa-scroll:before {
-  content: "\F70E";
-}
-
-.fa-sd-card:before {
-  content: "\F7C2";
-}
-
-.fa-search:before {
-  content: "\F002";
-}
-
-.fa-search-dollar:before {
-  content: "\F688";
-}
-
-.fa-search-location:before {
-  content: "\F689";
-}
-
-.fa-search-minus:before {
-  content: "\F010";
-}
-
-.fa-search-plus:before {
-  content: "\F00E";
-}
-
-.fa-searchengin:before {
-  content: "\F3EB";
-}
-
-.fa-seedling:before {
-  content: "\F4D8";
-}
-
-.fa-sellcast:before {
-  content: "\F2DA";
-}
-
-.fa-sellsy:before {
-  content: "\F213";
-}
-
-.fa-server:before {
-  content: "\F233";
-}
-
-.fa-servicestack:before {
-  content: "\F3EC";
-}
-
-.fa-shapes:before {
-  content: "\F61F";
-}
-
-.fa-share:before {
-  content: "\F064";
-}
-
-.fa-share-alt:before {
-  content: "\F1E0";
-}
-
-.fa-share-alt-square:before {
-  content: "\F1E1";
-}
-
-.fa-share-square:before {
-  content: "\F14D";
-}
-
-.fa-shekel-sign:before {
-  content: "\F20B";
-}
-
-.fa-shield-alt:before {
-  content: "\F3ED";
-}
-
-.fa-shield-virus:before {
-  content: "\F96C";
-}
-
-.fa-ship:before {
-  content: "\F21A";
-}
-
-.fa-shipping-fast:before {
-  content: "\F48B";
-}
-
-.fa-shirtsinbulk:before {
-  content: "\F214";
-}
-
-.fa-shoe-prints:before {
-  content: "\F54B";
-}
-
-.fa-shopify:before {
-  content: "\F957";
-}
-
-.fa-shopping-bag:before {
-  content: "\F290";
-}
-
-.fa-shopping-basket:before {
-  content: "\F291";
-}
-
-.fa-shopping-cart:before {
-  content: "\F07A";
-}
-
-.fa-shopware:before {
-  content: "\F5B5";
-}
-
-.fa-shower:before {
-  content: "\F2CC";
-}
-
-.fa-shuttle-van:before {
-  content: "\F5B6";
-}
-
-.fa-sign:before {
-  content: "\F4D9";
-}
-
-.fa-sign-in-alt:before {
-  content: "\F2F6";
-}
-
-.fa-sign-language:before {
-  content: "\F2A7";
-}
-
-.fa-sign-out-alt:before {
-  content: "\F2F5";
-}
-
-.fa-signal:before {
-  content: "\F012";
-}
-
-.fa-signature:before {
-  content: "\F5B7";
-}
-
-.fa-sim-card:before {
-  content: "\F7C4";
-}
-
-.fa-simplybuilt:before {
-  content: "\F215";
-}
-
-.fa-sistrix:before {
-  content: "\F3EE";
-}
-
-.fa-sitemap:before {
-  content: "\F0E8";
-}
-
-.fa-sith:before {
-  content: "\F512";
-}
-
-.fa-skating:before {
-  content: "\F7C5";
-}
-
-.fa-sketch:before {
-  content: "\F7C6";
-}
-
-.fa-skiing:before {
-  content: "\F7C9";
-}
-
-.fa-skiing-nordic:before {
-  content: "\F7CA";
-}
-
-.fa-skull:before {
-  content: "\F54C";
-}
-
-.fa-skull-crossbones:before {
-  content: "\F714";
-}
-
-.fa-skyatlas:before {
-  content: "\F216";
-}
-
-.fa-skype:before {
-  content: "\F17E";
-}
-
-.fa-slack:before {
-  content: "\F198";
-}
-
-.fa-slack-hash:before {
-  content: "\F3EF";
-}
-
-.fa-slash:before {
-  content: "\F715";
-}
-
-.fa-sleigh:before {
-  content: "\F7CC";
-}
-
-.fa-sliders-h:before {
-  content: "\F1DE";
-}
-
-.fa-slideshare:before {
-  content: "\F1E7";
-}
-
-.fa-smile:before {
-  content: "\F118";
-}
-
-.fa-smile-beam:before {
-  content: "\F5B8";
-}
-
-.fa-smile-wink:before {
-  content: "\F4DA";
-}
-
-.fa-smog:before {
-  content: "\F75F";
-}
-
-.fa-smoking:before {
-  content: "\F48D";
-}
-
-.fa-smoking-ban:before {
-  content: "\F54D";
-}
-
-.fa-sms:before {
-  content: "\F7CD";
-}
-
-.fa-snapchat:before {
-  content: "\F2AB";
-}
-
-.fa-snapchat-ghost:before {
-  content: "\F2AC";
-}
-
-.fa-snapchat-square:before {
-  content: "\F2AD";
-}
-
-.fa-snowboarding:before {
-  content: "\F7CE";
-}
-
-.fa-snowflake:before {
-  content: "\F2DC";
-}
-
-.fa-snowman:before {
-  content: "\F7D0";
-}
-
-.fa-snowplow:before {
-  content: "\F7D2";
-}
-
-.fa-soap:before {
-  content: "\F96E";
-}
-
-.fa-socks:before {
-  content: "\F696";
-}
-
-.fa-solar-panel:before {
-  content: "\F5BA";
-}
-
-.fa-sort:before {
-  content: "\F0DC";
-}
-
-.fa-sort-alpha-down:before {
-  content: "\F15D";
-}
-
-.fa-sort-alpha-down-alt:before {
-  content: "\F881";
-}
-
-.fa-sort-alpha-up:before {
-  content: "\F15E";
-}
-
-.fa-sort-alpha-up-alt:before {
-  content: "\F882";
-}
-
-.fa-sort-amount-down:before {
-  content: "\F160";
-}
-
-.fa-sort-amount-down-alt:before {
-  content: "\F884";
-}
-
-.fa-sort-amount-up:before {
-  content: "\F161";
-}
-
-.fa-sort-amount-up-alt:before {
-  content: "\F885";
-}
-
-.fa-sort-down:before {
-  content: "\F0DD";
-}
-
-.fa-sort-numeric-down:before {
-  content: "\F162";
-}
-
-.fa-sort-numeric-down-alt:before {
-  content: "\F886";
-}
-
-.fa-sort-numeric-up:before {
-  content: "\F163";
-}
-
-.fa-sort-numeric-up-alt:before {
-  content: "\F887";
-}
-
-.fa-sort-up:before {
-  content: "\F0DE";
-}
-
-.fa-soundcloud:before {
-  content: "\F1BE";
-}
-
-.fa-sourcetree:before {
-  content: "\F7D3";
-}
-
-.fa-spa:before {
-  content: "\F5BB";
-}
-
-.fa-space-shuttle:before {
-  content: "\F197";
-}
-
-.fa-speakap:before {
-  content: "\F3F3";
-}
-
-.fa-speaker-deck:before {
-  content: "\F83C";
-}
-
-.fa-spell-check:before {
-  content: "\F891";
-}
-
-.fa-spider:before {
-  content: "\F717";
-}
-
-.fa-spinner:before {
-  content: "\F110";
-}
-
-.fa-splotch:before {
-  content: "\F5BC";
-}
-
-.fa-spotify:before {
-  content: "\F1BC";
-}
-
-.fa-spray-can:before {
-  content: "\F5BD";
-}
-
-.fa-square:before {
-  content: "\F0C8";
-}
-
-.fa-square-full:before {
-  content: "\F45C";
-}
-
-.fa-square-root-alt:before {
-  content: "\F698";
-}
-
-.fa-squarespace:before {
-  content: "\F5BE";
-}
-
-.fa-stack-exchange:before {
-  content: "\F18D";
-}
-
-.fa-stack-overflow:before {
-  content: "\F16C";
-}
-
-.fa-stackpath:before {
-  content: "\F842";
-}
-
-.fa-stamp:before {
-  content: "\F5BF";
-}
-
-.fa-star:before {
-  content: "\F005";
-}
-
-.fa-star-and-crescent:before {
-  content: "\F699";
-}
-
-.fa-star-half:before {
-  content: "\F089";
-}
-
-.fa-star-half-alt:before {
-  content: "\F5C0";
-}
-
-.fa-star-of-david:before {
-  content: "\F69A";
-}
-
-.fa-star-of-life:before {
-  content: "\F621";
-}
-
-.fa-staylinked:before {
-  content: "\F3F5";
-}
-
-.fa-steam:before {
-  content: "\F1B6";
-}
-
-.fa-steam-square:before {
-  content: "\F1B7";
-}
-
-.fa-steam-symbol:before {
-  content: "\F3F6";
-}
-
-.fa-step-backward:before {
-  content: "\F048";
-}
-
-.fa-step-forward:before {
-  content: "\F051";
-}
-
-.fa-stethoscope:before {
-  content: "\F0F1";
-}
-
-.fa-sticker-mule:before {
-  content: "\F3F7";
-}
-
-.fa-sticky-note:before {
-  content: "\F249";
-}
-
-.fa-stop:before {
-  content: "\F04D";
-}
-
-.fa-stop-circle:before {
-  content: "\F28D";
-}
-
-.fa-stopwatch:before {
-  content: "\F2F2";
-}
-
-.fa-stopwatch-20:before {
-  content: "\F96F";
-}
-
-.fa-store:before {
-  content: "\F54E";
-}
-
-.fa-store-alt:before {
-  content: "\F54F";
-}
-
-.fa-store-alt-slash:before {
-  content: "\F970";
-}
-
-.fa-store-slash:before {
-  content: "\F971";
-}
-
-.fa-strava:before {
-  content: "\F428";
-}
-
-.fa-stream:before {
-  content: "\F550";
-}
-
-.fa-street-view:before {
-  content: "\F21D";
-}
-
-.fa-strikethrough:before {
-  content: "\F0CC";
-}
-
-.fa-stripe:before {
-  content: "\F429";
-}
-
-.fa-stripe-s:before {
-  content: "\F42A";
-}
-
-.fa-stroopwafel:before {
-  content: "\F551";
-}
-
-.fa-studiovinari:before {
-  content: "\F3F8";
-}
-
-.fa-stumbleupon:before {
-  content: "\F1A4";
-}
-
-.fa-stumbleupon-circle:before {
-  content: "\F1A3";
-}
-
-.fa-subscript:before {
-  content: "\F12C";
-}
-
-.fa-subway:before {
-  content: "\F239";
-}
-
-.fa-suitcase:before {
-  content: "\F0F2";
-}
-
-.fa-suitcase-rolling:before {
-  content: "\F5C1";
-}
-
-.fa-sun:before {
-  content: "\F185";
-}
-
-.fa-superpowers:before {
-  content: "\F2DD";
-}
-
-.fa-superscript:before {
-  content: "\F12B";
-}
-
-.fa-supple:before {
-  content: "\F3F9";
-}
-
-.fa-surprise:before {
-  content: "\F5C2";
-}
-
-.fa-suse:before {
-  content: "\F7D6";
-}
-
-.fa-swatchbook:before {
-  content: "\F5C3";
-}
-
-.fa-swift:before {
-  content: "\F8E1";
-}
-
-.fa-swimmer:before {
-  content: "\F5C4";
-}
-
-.fa-swimming-pool:before {
-  content: "\F5C5";
-}
-
-.fa-symfony:before {
-  content: "\F83D";
-}
-
-.fa-synagogue:before {
-  content: "\F69B";
-}
-
-.fa-sync:before {
-  content: "\F021";
-}
-
-.fa-sync-alt:before {
-  content: "\F2F1";
-}
-
-.fa-syringe:before {
-  content: "\F48E";
-}
-
-.fa-table:before {
-  content: "\F0CE";
-}
-
-.fa-table-tennis:before {
-  content: "\F45D";
-}
-
-.fa-tablet:before {
-  content: "\F10A";
-}
-
-.fa-tablet-alt:before {
-  content: "\F3FA";
-}
-
-.fa-tablets:before {
-  content: "\F490";
-}
-
-.fa-tachometer-alt:before {
-  content: "\F3FD";
-}
-
-.fa-tag:before {
-  content: "\F02B";
-}
-
-.fa-tags:before {
-  content: "\F02C";
-}
-
-.fa-tape:before {
-  content: "\F4DB";
-}
-
-.fa-tasks:before {
-  content: "\F0AE";
-}
-
-.fa-taxi:before {
-  content: "\F1BA";
-}
-
-.fa-teamspeak:before {
-  content: "\F4F9";
-}
-
-.fa-teeth:before {
-  content: "\F62E";
-}
-
-.fa-teeth-open:before {
-  content: "\F62F";
-}
-
-.fa-telegram:before {
-  content: "\F2C6";
-}
-
-.fa-telegram-plane:before {
-  content: "\F3FE";
-}
-
-.fa-temperature-high:before {
-  content: "\F769";
-}
-
-.fa-temperature-low:before {
-  content: "\F76B";
-}
-
-.fa-tencent-weibo:before {
-  content: "\F1D5";
-}
-
-.fa-tenge:before {
-  content: "\F7D7";
-}
-
-.fa-terminal:before {
-  content: "\F120";
-}
-
-.fa-text-height:before {
-  content: "\F034";
-}
-
-.fa-text-width:before {
-  content: "\F035";
-}
-
-.fa-th:before {
-  content: "\F00A";
-}
-
-.fa-th-large:before {
-  content: "\F009";
-}
-
-.fa-th-list:before {
-  content: "\F00B";
-}
-
-.fa-the-red-yeti:before {
-  content: "\F69D";
-}
-
-.fa-theater-masks:before {
-  content: "\F630";
-}
-
-.fa-themeco:before {
-  content: "\F5C6";
-}
-
-.fa-themeisle:before {
-  content: "\F2B2";
-}
-
-.fa-thermometer:before {
-  content: "\F491";
-}
-
-.fa-thermometer-empty:before {
-  content: "\F2CB";
-}
-
-.fa-thermometer-full:before {
-  content: "\F2C7";
-}
-
-.fa-thermometer-half:before {
-  content: "\F2C9";
-}
-
-.fa-thermometer-quarter:before {
-  content: "\F2CA";
-}
-
-.fa-thermometer-three-quarters:before {
-  content: "\F2C8";
-}
-
-.fa-think-peaks:before {
-  content: "\F731";
-}
-
-.fa-thumbs-down:before {
-  content: "\F165";
-}
-
-.fa-thumbs-up:before {
-  content: "\F164";
-}
-
-.fa-thumbtack:before {
-  content: "\F08D";
-}
-
-.fa-ticket-alt:before {
-  content: "\F3FF";
-}
-
-.fa-times:before {
-  content: "\F00D";
-}
-
-.fa-times-circle:before {
-  content: "\F057";
-}
-
-.fa-tint:before {
-  content: "\F043";
-}
-
-.fa-tint-slash:before {
-  content: "\F5C7";
-}
-
-.fa-tired:before {
-  content: "\F5C8";
-}
-
-.fa-toggle-off:before {
-  content: "\F204";
-}
-
-.fa-toggle-on:before {
-  content: "\F205";
-}
-
-.fa-toilet:before {
-  content: "\F7D8";
-}
-
-.fa-toilet-paper:before {
-  content: "\F71E";
-}
-
-.fa-toilet-paper-slash:before {
-  content: "\F972";
-}
-
-.fa-toolbox:before {
-  content: "\F552";
-}
-
-.fa-tools:before {
-  content: "\F7D9";
-}
-
-.fa-tooth:before {
-  content: "\F5C9";
-}
-
-.fa-torah:before {
-  content: "\F6A0";
-}
-
-.fa-torii-gate:before {
-  content: "\F6A1";
-}
-
-.fa-tractor:before {
-  content: "\F722";
-}
-
-.fa-trade-federation:before {
-  content: "\F513";
-}
-
-.fa-trademark:before {
-  content: "\F25C";
-}
-
-.fa-traffic-light:before {
-  content: "\F637";
-}
-
-.fa-trailer:before {
-  content: "\F941";
-}
-
-.fa-train:before {
-  content: "\F238";
-}
-
-.fa-tram:before {
-  content: "\F7DA";
-}
-
-.fa-transgender:before {
-  content: "\F224";
-}
-
-.fa-transgender-alt:before {
-  content: "\F225";
-}
-
-.fa-trash:before {
-  content: "\F1F8";
-}
-
-.fa-trash-alt:before {
-  content: "\F2ED";
-}
-
-.fa-trash-restore:before {
-  content: "\F829";
-}
-
-.fa-trash-restore-alt:before {
-  content: "\F82A";
-}
-
-.fa-tree:before {
-  content: "\F1BB";
-}
-
-.fa-trello:before {
-  content: "\F181";
-}
-
-.fa-tripadvisor:before {
-  content: "\F262";
-}
-
-.fa-trophy:before {
-  content: "\F091";
-}
-
-.fa-truck:before {
-  content: "\F0D1";
-}
-
-.fa-truck-loading:before {
-  content: "\F4DE";
-}
-
-.fa-truck-monster:before {
-  content: "\F63B";
-}
-
-.fa-truck-moving:before {
-  content: "\F4DF";
-}
-
-.fa-truck-pickup:before {
-  content: "\F63C";
-}
-
-.fa-tshirt:before {
-  content: "\F553";
-}
-
-.fa-tty:before {
-  content: "\F1E4";
-}
-
-.fa-tumblr:before {
-  content: "\F173";
-}
-
-.fa-tumblr-square:before {
-  content: "\F174";
-}
-
-.fa-tv:before {
-  content: "\F26C";
-}
-
-.fa-twitch:before {
-  content: "\F1E8";
-}
-
-.fa-twitter:before {
-  content: "\F099";
-}
-
-.fa-twitter-square:before {
-  content: "\F081";
-}
-
-.fa-typo3:before {
-  content: "\F42B";
-}
-
-.fa-uber:before {
-  content: "\F402";
-}
-
-.fa-ubuntu:before {
-  content: "\F7DF";
-}
-
-.fa-uikit:before {
-  content: "\F403";
-}
-
-.fa-umbraco:before {
-  content: "\F8E8";
-}
-
-.fa-umbrella:before {
-  content: "\F0E9";
-}
-
-.fa-umbrella-beach:before {
-  content: "\F5CA";
-}
-
-.fa-underline:before {
-  content: "\F0CD";
-}
-
-.fa-undo:before {
-  content: "\F0E2";
-}
-
-.fa-undo-alt:before {
-  content: "\F2EA";
-}
-
-.fa-uniregistry:before {
-  content: "\F404";
-}
-
-.fa-unity:before {
-  content: "\F949";
-}
-
-.fa-universal-access:before {
-  content: "\F29A";
-}
-
-.fa-university:before {
-  content: "\F19C";
-}
-
-.fa-unlink:before {
-  content: "\F127";
-}
-
-.fa-unlock:before {
-  content: "\F09C";
-}
-
-.fa-unlock-alt:before {
-  content: "\F13E";
-}
-
-.fa-untappd:before {
-  content: "\F405";
-}
-
-.fa-upload:before {
-  content: "\F093";
-}
-
-.fa-ups:before {
-  content: "\F7E0";
-}
-
-.fa-usb:before {
-  content: "\F287";
-}
-
-.fa-user:before {
-  content: "\F007";
-}
-
-.fa-user-alt:before {
-  content: "\F406";
-}
-
-.fa-user-alt-slash:before {
-  content: "\F4FA";
-}
-
-.fa-user-astronaut:before {
-  content: "\F4FB";
-}
-
-.fa-user-check:before {
-  content: "\F4FC";
-}
-
-.fa-user-circle:before {
-  content: "\F2BD";
-}
-
-.fa-user-clock:before {
-  content: "\F4FD";
-}
-
-.fa-user-cog:before {
-  content: "\F4FE";
-}
-
-.fa-user-edit:before {
-  content: "\F4FF";
-}
-
-.fa-user-friends:before {
-  content: "\F500";
-}
-
-.fa-user-graduate:before {
-  content: "\F501";
-}
-
-.fa-user-injured:before {
-  content: "\F728";
-}
-
-.fa-user-lock:before {
-  content: "\F502";
-}
-
-.fa-user-md:before {
-  content: "\F0F0";
-}
-
-.fa-user-minus:before {
-  content: "\F503";
-}
-
-.fa-user-ninja:before {
-  content: "\F504";
-}
-
-.fa-user-nurse:before {
-  content: "\F82F";
-}
-
-.fa-user-plus:before {
-  content: "\F234";
-}
-
-.fa-user-secret:before {
-  content: "\F21B";
-}
-
-.fa-user-shield:before {
-  content: "\F505";
-}
-
-.fa-user-slash:before {
-  content: "\F506";
-}
-
-.fa-user-tag:before {
-  content: "\F507";
-}
-
-.fa-user-tie:before {
-  content: "\F508";
-}
-
-.fa-user-times:before {
-  content: "\F235";
-}
-
-.fa-users:before {
-  content: "\F0C0";
-}
-
-.fa-users-cog:before {
-  content: "\F509";
-}
-
-.fa-usps:before {
-  content: "\F7E1";
-}
-
-.fa-ussunnah:before {
-  content: "\F407";
-}
-
-.fa-utensil-spoon:before {
-  content: "\F2E5";
-}
-
-.fa-utensils:before {
-  content: "\F2E7";
-}
-
-.fa-vaadin:before {
-  content: "\F408";
-}
-
-.fa-vector-square:before {
-  content: "\F5CB";
-}
-
-.fa-venus:before {
-  content: "\F221";
-}
-
-.fa-venus-double:before {
-  content: "\F226";
-}
-
-.fa-venus-mars:before {
-  content: "\F228";
-}
-
-.fa-viacoin:before {
-  content: "\F237";
-}
-
-.fa-viadeo:before {
-  content: "\F2A9";
-}
-
-.fa-viadeo-square:before {
-  content: "\F2AA";
-}
-
-.fa-vial:before {
-  content: "\F492";
-}
-
-.fa-vials:before {
-  content: "\F493";
-}
-
-.fa-viber:before {
-  content: "\F409";
-}
-
-.fa-video:before {
-  content: "\F03D";
-}
-
-.fa-video-slash:before {
-  content: "\F4E2";
-}
-
-.fa-vihara:before {
-  content: "\F6A7";
-}
-
-.fa-vimeo:before {
-  content: "\F40A";
-}
-
-.fa-vimeo-square:before {
-  content: "\F194";
-}
-
-.fa-vimeo-v:before {
-  content: "\F27D";
-}
-
-.fa-vine:before {
-  content: "\F1CA";
-}
-
-.fa-virus:before {
-  content: "\F974";
-}
-
-.fa-virus-slash:before {
-  content: "\F975";
-}
-
-.fa-viruses:before {
-  content: "\F976";
-}
-
-.fa-vk:before {
-  content: "\F189";
-}
-
-.fa-vnv:before {
-  content: "\F40B";
-}
-
-.fa-voicemail:before {
-  content: "\F897";
-}
-
-.fa-volleyball-ball:before {
-  content: "\F45F";
-}
-
-.fa-volume-down:before {
-  content: "\F027";
-}
-
-.fa-volume-mute:before {
-  content: "\F6A9";
-}
-
-.fa-volume-off:before {
-  content: "\F026";
-}
-
-.fa-volume-up:before {
-  content: "\F028";
-}
-
-.fa-vote-yea:before {
-  content: "\F772";
-}
-
-.fa-vr-cardboard:before {
-  content: "\F729";
-}
-
-.fa-vuejs:before {
-  content: "\F41F";
-}
-
-.fa-walking:before {
-  content: "\F554";
-}
-
-.fa-wallet:before {
-  content: "\F555";
-}
-
-.fa-warehouse:before {
-  content: "\F494";
-}
-
-.fa-water:before {
-  content: "\F773";
-}
-
-.fa-wave-square:before {
-  content: "\F83E";
-}
-
-.fa-waze:before {
-  content: "\F83F";
-}
-
-.fa-weebly:before {
-  content: "\F5CC";
-}
-
-.fa-weibo:before {
-  content: "\F18A";
-}
-
-.fa-weight:before {
-  content: "\F496";
-}
-
-.fa-weight-hanging:before {
-  content: "\F5CD";
-}
-
-.fa-weixin:before {
-  content: "\F1D7";
-}
-
-.fa-whatsapp:before {
-  content: "\F232";
-}
-
-.fa-whatsapp-square:before {
-  content: "\F40C";
-}
-
-.fa-wheelchair:before {
-  content: "\F193";
-}
-
-.fa-whmcs:before {
-  content: "\F40D";
-}
-
-.fa-wifi:before {
-  content: "\F1EB";
-}
-
-.fa-wikipedia-w:before {
-  content: "\F266";
-}
-
-.fa-wind:before {
-  content: "\F72E";
-}
-
-.fa-window-close:before {
-  content: "\F410";
-}
-
-.fa-window-maximize:before {
-  content: "\F2D0";
-}
-
-.fa-window-minimize:before {
-  content: "\F2D1";
-}
-
-.fa-window-restore:before {
-  content: "\F2D2";
-}
-
-.fa-windows:before {
-  content: "\F17A";
-}
-
-.fa-wine-bottle:before {
-  content: "\F72F";
-}
-
-.fa-wine-glass:before {
-  content: "\F4E3";
-}
-
-.fa-wine-glass-alt:before {
-  content: "\F5CE";
-}
-
-.fa-wix:before {
-  content: "\F5CF";
-}
-
-.fa-wizards-of-the-coast:before {
-  content: "\F730";
-}
-
-.fa-wolf-pack-battalion:before {
-  content: "\F514";
-}
-
-.fa-won-sign:before {
-  content: "\F159";
-}
-
-.fa-wordpress:before {
-  content: "\F19A";
-}
-
-.fa-wordpress-simple:before {
-  content: "\F411";
-}
-
-.fa-wpbeginner:before {
-  content: "\F297";
-}
+  .menu-item:active,
+  .menu-item.active {
+    color: #272727;
+    background-color: #ffffff;
+  }
 
-.fa-wpexplorer:before {
-  content: "\F2DE";
+  .books-component .info-area {
+    padding-left: 1.5625rem;
+  }
 }
 
-.fa-wpforms:before {
-  content: "\F298";
-}
+@media only screen and (max-width: 540px) {
+  .sidenav {
+    width: 0;
+  }
 
-.fa-wpressr:before {
-  content: "\F3E4";
-}
+  .head-title.text-center h1 {
+    font-size: 23pt;
+    padding-top: 50pt;
+    white-space: nowrap;
+  }
 
-.fa-wrench:before {
-  content: "\F0AD";
-}
+  /*.btn-circle.rounded-circle.btn-sm
+  {
+      width: 90px;
+      height: 90px;
+  }
 
-.fa-x-ray:before {
-  content: "\F497";
-}
+  .btn-circle.rounded-circle.btn-dm
+  {
+      width: 130px;
+      height: 130px;
+  }
 
-.fa-xbox:before {
-  content: "\F412";
-}
+  .btn-circle.rounded-circle.btn-xl
+  {
+      width: 180px;
+      height: 180px;
+  }*/
 
-.fa-xing:before {
-  content: "\F168";
+  body .carousel .carousel-inner .social-logo {
+    padding-left: 30px;
+    top: 20%;
+  }
 }
 
-.fa-xing-square:before {
-  content: "\F169";
+@media (min-width: 330px) and (max-height: 900px) {
+  body .carousel .carousel-inner .social-logo {
+    top: 25%;
+  }
 }
 
-.fa-y-combinator:before {
-  content: "\F23B";
-}
+@media (min-width: 1024px) {
+  body .kaplicky {
+    text-align: left !important;
+    font-size: 30pt;
+    line-height: 24pt;
+    margin-bottom: 3rem;
+  }
 
-.fa-yahoo:before {
-  content: "\F19E";
-}
+  body .pin-left:before {
+    height: 1.125rem;
+    width: 1.125rem;
+    top: -1.125rem;
+    left: -0.56rem;
+  }
 
-.fa-yammer:before {
-  content: "\F840";
-}
+  body .pin-left {
+    left: 75%;
+    transform: translateX(-50%);
+    width: 70%;
+  }
 
-.fa-yandex:before {
-  content: "\F413";
-}
+  body .text {
+    text-align: left;
+    font-size: 18pt;
+    line-height: 26pt;
+  }
 
-.fa-yandex-international:before {
-  content: "\F414";
-}
+  body .text2 {
+    text-align: left;
+    font-size: 18pt;
+    line-height: 26pt;
+  }
 
-.fa-yarn:before {
-  content: "\F7E3";
-}
+  body .carousel .carousel-inner .social-logo {
+    justify-content: center;
+    top: 90%;
+  }
 
-.fa-yelp:before {
-  content: "\F1E9";
-}
+  body .carousel .carousel-inner .social-logo .logo {
+    margin-left: 10rem;
+  }
 
-.fa-yen-sign:before {
-  content: "\F157";
-}
+  body .carousel .carousel-inner .social-logo .logo img {
+    width: 3.125rem;
+  }
 
-.fa-yin-yang:before {
-  content: "\F6AD";
-}
+  body .carousel .carousel-inner .social-logo .logo:first-child {
+    margin-left: 0;
+  }
 
-.fa-yoast:before {
-  content: "\F2B1";
-}
+  body .carousel .carousel-inner .carousel-button {
+    bottom: 15%;
+  }
 
-.fa-youtube:before {
-  content: "\F167";
-}
+  body .carousel .carousel-caption {
+    padding: 3.75rem 6.25rem 5em;
+  }
 
-.fa-youtube-square:before {
-  content: "\F431";
-}
+  body .carousel .carousel-caption h2 {
+    margin-bottom: 1rem;
+  }
 
-.fa-zhihu:before {
-  content: "\F63F";
-}
+  body .button-square {
+    font-size: 18pt;
+    padding: 0.28125rem 3.7rem;
+  }
 
-.sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
+  body .metadata-area .pin-horizontal {
+    margin: 5rem 3.125rem 0 0;
+  }
 
-.sr-only-focusable:active,
-.sr-only-focusable:focus {
-  clip: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  width: auto;
-}
+  body .metadata-area .pin-horizontal .metadata {
+    margin-right: 0.5rem;
+  }
 
-/*!
- * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
+  body .metadata-area .pin-horizontal .metadata .arrow-down {
+    border-left: 0.5rem solid transparent;
+    border-right: 0.5rem solid transparent;
+    border-top: 0.5rem solid #ddd1b9;
+  }
 
-@font-face {
-  font-family: "Font Awesome 5 Free";
-  font-style: normal;
-  font-weight: 400;
-  font-display: block;
-  src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?261d666b0147c6c5cda07265f98b8f8c);
-  src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?261d666b0147c6c5cda07265f98b8f8c) format("embedded-opentype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2?c20b5b7362d8d7bb7eddf94344ace33e) format("woff2"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff?f89ea91ecd1ca2db7e09baa2c4b156d1) format("woff"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.ttf?db78b9359171f24936b16d84f63af378) format("truetype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.svg?89ffa3aba80d30ee0a9371b25c968bbb) format("svg");
-}
+  body .metadata-area .pin-horizontal .metadata a span {
+    font-size: 16pt;
+  }
 
-.far {
-  font-family: "Font Awesome 5 Free";
-  font-weight: 400;
-}
+  body .metadata-area .pin-horizontal:after {
+    height: 0.75rem;
+    width: 0.75rem;
+    top: 0.375rem;
+  }
 
-/*!
- * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
+  body .metadata-area .white-pin .metadata .arrow-down {
+    border-top: 0.5rem solid #ffffff;
+  }
 
-@font-face {
-  font-family: "Font Awesome 5 Free";
-  font-style: normal;
-  font-weight: 900;
-  font-display: block;
-  src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?a0369ea57eb6d3843d6474c035111f29);
-  src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?a0369ea57eb6d3843d6474c035111f29) format("embedded-opentype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?b15db15f746f29ffa02638cb455b8ec0) format("woff2"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?bea989e82b07e9687c26fc58a4805021) format("woff"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?1ab236ed440ee51810c56bd16628aef0) format("truetype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?ec763292e583294612f124c0b0def500) format("svg");
-}
+  body .metadata-area .metadata-text {
+    font-size: 19pt;
+    max-width: 50%;
+  }
 
-.fa,
-.fas {
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-}
+  body .metadata-area .metadata-text .artefact-info .artefact-name {
+    font-size: 16pt;
+  }
 
-/*!
- * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
+  body .metadata-area .metadata-text .artefact-info .artefact-author {
+    font-size: 12pt;
+  }
 
-@font-face {
-  font-family: "Font Awesome 5 Brands";
-  font-style: normal;
-  font-weight: 400;
-  font-display: block;
-  src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot?c1868c9545d2de1cf8488f1dadd8c9d0);
-  src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.eot?c1868c9545d2de1cf8488f1dadd8c9d0) format("embedded-opentype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2?a06da7f0950f9dd366fc9db9d56d618a) format("woff2"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff?ec3cfddedb8bebd2d7a3fdf511f7c1cc) format("woff"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf?13685372945d816a2b474fc082fd9aaa) format("truetype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.svg?0cb5a5c0d251c109458c85c6afeffbaa) format("svg");
+  body .metadata-area .metadata-text .artefact-info .inter_like_filled:before {
+    width: 5rem;
+    height: 5rem;
+  }
 }
 
-.fab {
-  font-family: "Font Awesome 5 Brands";
-  font-weight: 400;
+@media (min-width: 1575px) {
+  body .carousel .carousel-inner .carousel-button {
+    bottom: 20%;
+  }
 }
 
diff --git a/public/images/Button_Arrow.png b/public/images/Button_Arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..162dcc3a639f51a241dc9495771d95521c973c4d
Binary files /dev/null and b/public/images/Button_Arrow.png differ
diff --git a/public/images/Button_Arrow_Small.png b/public/images/Button_Arrow_Small.png
new file mode 100644
index 0000000000000000000000000000000000000000..08702819f898e47111b31334ed0bdc2093cd1794
Binary files /dev/null and b/public/images/Button_Arrow_Small.png differ
diff --git a/public/images/Button_Info.png b/public/images/Button_Info.png
new file mode 100644
index 0000000000000000000000000000000000000000..016d812f4a070fb872104801b8d2ed2b725c305a
Binary files /dev/null and b/public/images/Button_Info.png differ
diff --git a/public/images/Button_Info.svg b/public/images/Button_Info.svg
new file mode 100644
index 0000000000000000000000000000000000000000..432c2b189c763cf693a18605ac4d46aa3c259e25
--- /dev/null
+++ b/public/images/Button_Info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.17 14.17"><defs><style>.cls-1{fill:#ead4b0;}.cls-2{fill:#1d1d1b;}</style></defs><title>DatovĂ˝ zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="7.09" cy="7.09" r="7.09"/><path class="cls-2" d="M6.47,4.1a.74.74,0,0,1,.24-.56.74.74,0,0,1,.56-.24.76.76,0,0,1,.56.24.73.73,0,0,1,.23.56.79.79,0,0,1-.79.79.73.73,0,0,1-.56-.23A.76.76,0,0,1,6.47,4.1Zm.11,1.4H8V9.93H6.58Z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/images/Button_Info_50.png b/public/images/Button_Info_50.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a44a373bf3265858e449318f19d673cfa2563f7
Binary files /dev/null and b/public/images/Button_Info_50.png differ
diff --git a/public/images/Button_Info_Small.png b/public/images/Button_Info_Small.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b56981fa6d6e57f9367b9b41c2272e6a49fe8ca
Binary files /dev/null and b/public/images/Button_Info_Small.png differ
diff --git a/public/images/Button_Info_White.svg b/public/images/Button_Info_White.svg
new file mode 100644
index 0000000000000000000000000000000000000000..56a762031a9b5f59fbcde6de34380ec54de4a89b
--- /dev/null
+++ b/public/images/Button_Info_White.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.17 14.17"><defs><style>.cls-1{fill:#ffffff;}.cls-2{fill:#1d1d1b;}</style></defs><title>DatovĂ˝ zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="7.09" cy="7.09" r="7.09"/><path class="cls-2" d="M6.47,4.1a.74.74,0,0,1,.24-.56.74.74,0,0,1,.56-.24.76.76,0,0,1,.56.24.73.73,0,0,1,.23.56.79.79,0,0,1-.79.79.73.73,0,0,1-.56-.23A.76.76,0,0,1,6.47,4.1Zm.11,1.4H8V9.93H6.58Z"/></g></g></svg>
diff --git a/public/images/Heart_Empty.svg b/public/images/Heart_Empty.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bacaab80db6a7de3a6e9a239f162463579e41c6c
--- /dev/null
+++ b/public/images/Heart_Empty.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.14 23.15"><defs><style>.cls-1{fill:none;stroke:#f7dbc0;stroke-miterlimit:10;}</style></defs><title>DatovĂ˝ zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M15.07,22.53s12.44-9.37,13.31-10.78c2.15-3.54,2-9.09-4-10.93-5.44-1.68-9.3,3.84-9.3,3.84S11.21-.86,5.77.82c-6,1.84-6.16,7.39-4,10.93C2.63,13.16,15.07,22.53,15.07,22.53Z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/images/Heart_Filled.svg b/public/images/Heart_Filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..36ca64b60292851bc547164dd661d1aca2fab7ad
--- /dev/null
+++ b/public/images/Heart_Filled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.14 22.03"><defs><style>.cls-1{fill:#f7dbc0;}</style></defs><title>DatovĂ˝ zdroj 2</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M14.57,22S27,12.66,27.88,11.25c2.15-3.54,2-9.09-4-10.93-5.44-1.68-9.3,3.84-9.3,3.84S10.71-1.36,5.27.32c-6,1.84-6.16,7.39-4,10.93C2.13,12.66,14.57,22,14.57,22Z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/images/Hearth_Empty_50.png b/public/images/Hearth_Empty_50.png
new file mode 100644
index 0000000000000000000000000000000000000000..6faeb7589527e867ef0eedc9f6e8ca4ed6827215
Binary files /dev/null and b/public/images/Hearth_Empty_50.png differ
diff --git a/public/images/Hearth_Empty_Small.png b/public/images/Hearth_Empty_Small.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fe5a23d026609cfba45fbbc05cfbb334cfbb8e2
Binary files /dev/null and b/public/images/Hearth_Empty_Small.png differ
diff --git a/public/images/Hearth_Filled_50.png b/public/images/Hearth_Filled_50.png
new file mode 100644
index 0000000000000000000000000000000000000000..505a6408727d3782ed7bbe2bb2a507964273325e
Binary files /dev/null and b/public/images/Hearth_Filled_50.png differ
diff --git a/public/images/artefacts/book_cover_01.jpg b/public/images/artefacts/book_cover_01.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..81c07b395e1bac2eaaa74e7d8c80a9c2efca7ed8
Binary files /dev/null and b/public/images/artefacts/book_cover_01.jpg differ
diff --git a/public/images/homepage/carousel_1.jpg b/public/images/homepage/carousel_1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c3ccc97d6580339f725019a9f6a80d9e34aa0b06
Binary files /dev/null and b/public/images/homepage/carousel_1.jpg differ
diff --git a/public/images/icons/facebook.svg b/public/images/icons/facebook.svg
new file mode 100644
index 0000000000000000000000000000000000000000..43bc8776ca8d8ac7044bd650430ce9edb365c2b1
--- /dev/null
+++ b/public/images/icons/facebook.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#1c1c1a;}.cls-2{font-size:9px;fill:#c5c5c5;font-family:Avenir-Heavy, Avenir;font-weight:800;}</style></defs><title>DatovĂ˝ zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="8" cy="8" r="8"/><text class="cls-2" transform="translate(5.34 11.39)">f</text></g></g></svg>
\ No newline at end of file
diff --git a/public/images/icons/instagram.svg b/public/images/icons/instagram.svg
new file mode 100644
index 0000000000000000000000000000000000000000..36f04a7e3ed0f2c0dd195b4e7e20ee8551e459ed
--- /dev/null
+++ b/public/images/icons/instagram.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#1c1c1a;}.cls-2{fill:none;stroke:#c5c5c5;stroke-miterlimit:10;stroke-width:0.5px;}.cls-3{fill:#c5c5c5;}</style></defs><title>DatovĂ˝ zdroj 2</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="8" cy="8" r="8"/><path class="cls-2" d="M9.86,3.42H6.36A3.28,3.28,0,0,0,3,6.57V9.85A3.28,3.28,0,0,0,6.36,13h3.5a3.28,3.28,0,0,0,3.38-3.15V6.57A3.28,3.28,0,0,0,9.86,3.42ZM8.12,10.81A2.74,2.74,0,0,1,5.3,8.17,2.74,2.74,0,0,1,8.12,5.54,2.74,2.74,0,0,1,11,8.17,2.74,2.74,0,0,1,8.12,10.81Z"/><circle class="cls-3" cx="11.5" cy="5.5" r="0.5"/></g></g></svg>
\ No newline at end of file
diff --git a/public/images/icons/upm-logo.svg b/public/images/icons/upm-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9d76131072507b2b149c67d8056d1ffba509f694
--- /dev/null
+++ b/public/images/icons/upm-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.63 33.54"><defs><style>.cls-1{fill:#1d1d1b;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-2{fill:#b5ada5;}</style></defs><title>DatovĂ˝ zdroj 4</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M12.7,24.5a7.07,7.07,0,0,1-5.78,2.55C3,27.05,0,24.5,0,20.42V8.07H7V18.9c.08,1.82.51,3.73,2.67,3.73,3.44,0,3-3.78,3-4V8.07h7V21.78c0,1.62,0,2.72.21,4.72H12.78Z"/><path class="cls-2" d="M32.1,0C30.66,4.88,29,9.89,29,15s1.66,10.11,3.1,15H27.6c-1.91-4.88-4-9.68-4-15s2.12-10.15,4-15Z"/><path class="cls-2" d="M44.33,7.94A7.51,7.51,0,0,1,47,7.52c5.47,0,7.85,4.67,7.85,9.51,0,5.39-2.72,10-8.62,10a5.68,5.68,0,0,1-1.91-.34V23c2.93,0,3.35-3.39,3.35-5.73s-.42-5.73-3.35-5.73Zm-3.4,2.72H41a6.38,6.38,0,0,1,3.31-2.72v3.61h0c-2.93,0-3.4,3.4-3.4,5.73S41.4,23,44.33,23h0v3.7A7.47,7.47,0,0,1,41,24.29h-.09v9.25H34V8.07h7Z"/><path class="cls-2" d="M55.84,30c1.48-4.88,3.1-9.89,3-15s-1.61-10.15-3-15h4.54c1.91,4.88,4,9.68,4,15s-2.12,10.11-4,15Z"/><path class="cls-1" d="M75.12,11.13h0c1.31-2.55,3.73-3.49,6.49-3.49,2.21,0,4.76,1.15,5.52,3.4a7.61,7.61,0,0,1,6.54-3.52c4,0,6.92,2.59,6.92,6.66V26.5h-7V15.67c0-1.78-.51-3.74-2.68-3.74-3.44,0-3,3.78-3,4V26.5H81V15.67c-.09-1.78-.51-3.74-2.68-3.74-3.44,0-3,3.78-3,4V26.5h-7V12.82a39.23,39.23,0,0,0-.25-4.75H75Z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/images/icons/wikipedia.svg b/public/images/icons/wikipedia.svg
new file mode 100644
index 0000000000000000000000000000000000000000..268e895583bdc9188f268070ae2a02f12a84a26d
--- /dev/null
+++ b/public/images/icons/wikipedia.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#1c1c1a;}.cls-2{font-size:8px;fill:#c5c5c5;font-family:Avenir-Heavy, Avenir;font-weight:800;}</style></defs><title>DatovĂ˝ zdroj 3</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="8" cy="8" r="8"/><text class="cls-2" transform="translate(3.96 11.2)">W</text></g></g></svg>
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
index 4606f582cd869d34ab8220dd5caa31cc292d99fc..1f5a8587f82015c98fb307cf7670dab21b833f4a 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -37052,7 +37052,27 @@ module.exports = function(module) {
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
+__webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js"); // Center metadata page text
+
+
+$(document).ready(function () {
+  var display_width = $(window).width();
+
+  if (display_width < 720) {
+    $(".metadata").each(function () {
+      var metadata = $(this);
+      var width = metadata.width();
+      metadata.css("margin-left", display_width / 2 - width);
+    });
+  } else {
+    display_width = $(".metadata-area").width();
+    $(".metadata").each(function () {
+      var metadata = $(this);
+      var width = metadata.width();
+      metadata.css("margin-left", display_width / 2 - width);
+    });
+  }
+});
 
 /***/ }),
 
diff --git a/resources/images/Button_Arrow.png b/resources/images/Button_Arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..162dcc3a639f51a241dc9495771d95521c973c4d
Binary files /dev/null and b/resources/images/Button_Arrow.png differ
diff --git a/resources/images/Button_Arrow_Small.png b/resources/images/Button_Arrow_Small.png
new file mode 100644
index 0000000000000000000000000000000000000000..08702819f898e47111b31334ed0bdc2093cd1794
Binary files /dev/null and b/resources/images/Button_Arrow_Small.png differ
diff --git a/resources/images/interface/Button_Info.png b/resources/images/interface/Button_Info.png
new file mode 100644
index 0000000000000000000000000000000000000000..016d812f4a070fb872104801b8d2ed2b725c305a
Binary files /dev/null and b/resources/images/interface/Button_Info.png differ
diff --git a/resources/images/interface/Button_Info.svg b/resources/images/interface/Button_Info.svg
new file mode 100644
index 0000000000000000000000000000000000000000..432c2b189c763cf693a18605ac4d46aa3c259e25
--- /dev/null
+++ b/resources/images/interface/Button_Info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.17 14.17"><defs><style>.cls-1{fill:#ead4b0;}.cls-2{fill:#1d1d1b;}</style></defs><title>DatovĂ˝ zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="7.09" cy="7.09" r="7.09"/><path class="cls-2" d="M6.47,4.1a.74.74,0,0,1,.24-.56.74.74,0,0,1,.56-.24.76.76,0,0,1,.56.24.73.73,0,0,1,.23.56.79.79,0,0,1-.79.79.73.73,0,0,1-.56-.23A.76.76,0,0,1,6.47,4.1Zm.11,1.4H8V9.93H6.58Z"/></g></g></svg>
\ No newline at end of file
diff --git a/resources/images/interface/Button_Info_50.png b/resources/images/interface/Button_Info_50.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a44a373bf3265858e449318f19d673cfa2563f7
Binary files /dev/null and b/resources/images/interface/Button_Info_50.png differ
diff --git a/resources/images/interface/Button_Info_Small.png b/resources/images/interface/Button_Info_Small.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b56981fa6d6e57f9367b9b41c2272e6a49fe8ca
Binary files /dev/null and b/resources/images/interface/Button_Info_Small.png differ
diff --git a/resources/images/interface/Button_Info_White.svg b/resources/images/interface/Button_Info_White.svg
new file mode 100644
index 0000000000000000000000000000000000000000..56a762031a9b5f59fbcde6de34380ec54de4a89b
--- /dev/null
+++ b/resources/images/interface/Button_Info_White.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.17 14.17"><defs><style>.cls-1{fill:#ffffff;}.cls-2{fill:#1d1d1b;}</style></defs><title>DatovĂ˝ zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><circle class="cls-1" cx="7.09" cy="7.09" r="7.09"/><path class="cls-2" d="M6.47,4.1a.74.74,0,0,1,.24-.56.74.74,0,0,1,.56-.24.76.76,0,0,1,.56.24.73.73,0,0,1,.23.56.79.79,0,0,1-.79.79.73.73,0,0,1-.56-.23A.76.76,0,0,1,6.47,4.1Zm.11,1.4H8V9.93H6.58Z"/></g></g></svg>
diff --git a/resources/images/interface/Heart_Empty.svg b/resources/images/interface/Heart_Empty.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bacaab80db6a7de3a6e9a239f162463579e41c6c
--- /dev/null
+++ b/resources/images/interface/Heart_Empty.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.14 23.15"><defs><style>.cls-1{fill:none;stroke:#f7dbc0;stroke-miterlimit:10;}</style></defs><title>DatovĂ˝ zdroj 1</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M15.07,22.53s12.44-9.37,13.31-10.78c2.15-3.54,2-9.09-4-10.93-5.44-1.68-9.3,3.84-9.3,3.84S11.21-.86,5.77.82c-6,1.84-6.16,7.39-4,10.93C2.63,13.16,15.07,22.53,15.07,22.53Z"/></g></g></svg>
\ No newline at end of file
diff --git a/resources/images/interface/Heart_Filled.svg b/resources/images/interface/Heart_Filled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..36ca64b60292851bc547164dd661d1aca2fab7ad
--- /dev/null
+++ b/resources/images/interface/Heart_Filled.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.14 22.03"><defs><style>.cls-1{fill:#f7dbc0;}</style></defs><title>DatovĂ˝ zdroj 2</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M14.57,22S27,12.66,27.88,11.25c2.15-3.54,2-9.09-4-10.93-5.44-1.68-9.3,3.84-9.3,3.84S10.71-1.36,5.27.32c-6,1.84-6.16,7.39-4,10.93C2.13,12.66,14.57,22,14.57,22Z"/></g></g></svg>
\ No newline at end of file
diff --git a/resources/images/interface/Hearth_Empty.png b/resources/images/interface/Hearth_Empty.png
new file mode 100644
index 0000000000000000000000000000000000000000..d1da6d0bd36b0ad71bcdf93b3a092c1c1ec5d555
Binary files /dev/null and b/resources/images/interface/Hearth_Empty.png differ
diff --git a/resources/images/interface/Hearth_Empty_50.png b/resources/images/interface/Hearth_Empty_50.png
new file mode 100644
index 0000000000000000000000000000000000000000..6faeb7589527e867ef0eedc9f6e8ca4ed6827215
Binary files /dev/null and b/resources/images/interface/Hearth_Empty_50.png differ
diff --git a/resources/images/interface/Hearth_Empty_Small.png b/resources/images/interface/Hearth_Empty_Small.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fe5a23d026609cfba45fbbc05cfbb334cfbb8e2
Binary files /dev/null and b/resources/images/interface/Hearth_Empty_Small.png differ
diff --git a/resources/images/interface/Hearth_Filled.png b/resources/images/interface/Hearth_Filled.png
new file mode 100644
index 0000000000000000000000000000000000000000..4cfaae044f408f3341461732a3746014991f2315
Binary files /dev/null and b/resources/images/interface/Hearth_Filled.png differ
diff --git a/resources/images/interface/Hearth_Filled_50.png b/resources/images/interface/Hearth_Filled_50.png
new file mode 100644
index 0000000000000000000000000000000000000000..505a6408727d3782ed7bbe2bb2a507964273325e
Binary files /dev/null and b/resources/images/interface/Hearth_Filled_50.png differ
diff --git a/resources/images/interface/Hearth_Filled_Small.png b/resources/images/interface/Hearth_Filled_Small.png
new file mode 100644
index 0000000000000000000000000000000000000000..9cb65bdb47090b3360099f074c297b67d9dc6a27
Binary files /dev/null and b/resources/images/interface/Hearth_Filled_Small.png differ
diff --git a/resources/js/app.js b/resources/js/app.js
index 40c55f65c25644d4f09d3c734b219a2aa736b134..0923ec8911df796bd94ea696386dff1cbf937c4d 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1 +1,27 @@
 require('./bootstrap');
+
+// Center metadata page text
+$(document).ready(function () {
+    let display_width = $(window).width();
+
+    if (display_width < 720)
+    {
+        $(".metadata").each(function() {
+            let metadata = $(this);
+            let width = metadata.width();
+
+            metadata.css("margin-left", (display_width / 2)  - width);
+        });
+    }
+    else
+    {
+        display_width = $(".metadata-area").width();
+
+        $(".metadata").each(function() {
+            let metadata = $(this);
+            let width = metadata.width();
+
+            metadata.css("margin-left", (display_width / 2)  - width);
+        });
+    }
+});
diff --git a/resources/lang/cs/general.php b/resources/lang/cs/general.php
new file mode 100644
index 0000000000000000000000000000000000000000..c5f72ef7c68c148eb3ea3836cd987277706a771f
--- /dev/null
+++ b/resources/lang/cs/general.php
@@ -0,0 +1,24 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Login Page Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'email' => 'e-mail',
+    'password' => 'heslo',
+    'join' => 'vstoupit',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Error Page Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'not_found' => 'Stránka nenalezena',
+    'server_error' => 'Něco se pokazilo',
+
+];
diff --git a/resources/lang/en/general.php b/resources/lang/en/general.php
new file mode 100644
index 0000000000000000000000000000000000000000..fad59ad72f377c266f82fe4167b2d7905b82e43e
--- /dev/null
+++ b/resources/lang/en/general.php
@@ -0,0 +1,57 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | General Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'kaplicky' => 'kaplicky',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Sidebar Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'cs' => 'ÄŤesky',
+    'en' => 'english',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Sidebar Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'home' => 'home',
+    'login' => 'login',
+    'logout' => 'logout',
+    'register' => 'register',
+    'topics' => 'topics',
+    'artefacts' => 'books',
+    'favourite_artefacts' => 'likes',
+    'favourite_metadata' => 'notes',
+    'charts' => 'best of',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Login Page Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'email' => 'e-mail',
+    'password' => 'password',
+    'join' => 'join',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Error Page Language Lines
+    |--------------------------------------------------------------------------
+    */
+
+    'not_found' => 'Not Found',
+    'server_error' => 'Internal Server Error',
+
+];
diff --git a/resources/lang/vendor/cookieConsent/cs/texts.php b/resources/lang/vendor/cookieConsent/cs/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..3b4472e387418ed524d2ae606d5f6d8ceaff5622
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/cs/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Tato stránka používá cookies na vylepšení vašeho uživatelského zážitku.',
+    'agree' => 'SouhlasĂ­m',
+];
diff --git a/resources/lang/vendor/cookieConsent/da/texts.php b/resources/lang/vendor/cookieConsent/da/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..5227bf6f7574822e51e7755d8b97c8e8b9e6762d
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/da/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Din oplevelse pĂĄ dette websted vil blive forbedret ved at tillade cookies.',
+    'agree' => 'Tillad cookies',
+];
diff --git a/resources/lang/vendor/cookieConsent/de/texts.php b/resources/lang/vendor/cookieConsent/de/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..8e9d6d6c87fb3e99d2b00853bfe9c54fa5dd5e3d
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/de/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Diese Seite verwendet Cookies um das Nutzererlebnis zu steigern.',
+    'agree' => 'Akzeptieren',
+];
diff --git a/resources/lang/vendor/cookieConsent/el/texts.php b/resources/lang/vendor/cookieConsent/el/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..80338137837014c24c194f1803f248b58c9aeb4f
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/el/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Η ιστοσελίδα μας χρησιμοποιεί cookies για να βελτιώσει την εμπειρία περιήγησής σας.',
+    'agree' => 'Αποδοχή',
+];
diff --git a/resources/lang/vendor/cookieConsent/en/texts.php b/resources/lang/vendor/cookieConsent/en/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..fda470dc0db34b05243e05d4d34ae39598c0c00a
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/en/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Your experience on this site will be improved by allowing cookies.',
+    'agree' => 'Allow cookies',
+];
diff --git a/resources/lang/vendor/cookieConsent/eo/texts.php b/resources/lang/vendor/cookieConsent/eo/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..3e2bcab81a53fd76fbb6da5b9e594b729741e6aa
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/eo/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Tiu ĉi retejo uzas kuketojn por plibonigi vian sperton.',
+    'agree' => 'Akcepti kuketojn',
+];
diff --git a/resources/lang/vendor/cookieConsent/es/texts.php b/resources/lang/vendor/cookieConsent/es/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..c78f1ebd344f3b0fecf76f36bc3e50252835fa55
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/es/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Su experiencia en este sitio será mejorada con el uso de cookies.',
+    'agree' => 'Aceptar',
+];
diff --git a/resources/lang/vendor/cookieConsent/et/texts.php b/resources/lang/vendor/cookieConsent/et/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..ce88c219f0c3151d33254a9db04e9c6fd96e470a
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/et/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Sellel veebilehel on kasutusel cookies-failid teie kasutajaliidese parandamiseks.',
+    'agree' => 'Sain aru',
+];
diff --git a/resources/lang/vendor/cookieConsent/fr/texts.php b/resources/lang/vendor/cookieConsent/fr/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..e68a3dc7416da66222ea9d7ad8b9d67481deb0a1
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/fr/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => "Ce site nécessite l'autorisation de cookies pour fonctionner correctement.",
+    'agree' => 'Accepter',
+];
diff --git a/resources/lang/vendor/cookieConsent/hu/texts.php b/resources/lang/vendor/cookieConsent/hu/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..4ff31018ac163ab01ea651dc76cb40ea93290793
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/hu/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'A megfelelő élmény biztosításához sütikre van szükség.',
+    'agree' => 'Sütik engedélyezése',
+];
diff --git a/resources/lang/vendor/cookieConsent/it/texts.php b/resources/lang/vendor/cookieConsent/it/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..91831f842a347d2fe0d967499bbb22df9de12974
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/it/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Questo sito utilizza i cookies per offrire un\'esperienza migliore all\'utente.',
+    'agree' => 'Consenti i cookies',
+];
diff --git a/resources/lang/vendor/cookieConsent/kr/texts.php b/resources/lang/vendor/cookieConsent/kr/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..67447ef7ce320eec2f69388006be8801f6a5904c
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/kr/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => '보다 나은 사용자 경험을 위해 쿠키를 허용해 주십시요.',
+    'agree' => '쿠키 허용',
+];
diff --git a/resources/lang/vendor/cookieConsent/nb/texts.php b/resources/lang/vendor/cookieConsent/nb/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..e68d7588582578bbbd87f55a6a137cf826b54b27
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/nb/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Vi bruker informasjonskapsler (cookies) som lagres i nettleseren din når du besøker nettsiden vår. Ved å fortsette å besøke nettsiden vår eller bruke tjenestene våre, godtar du at vi bruker informasjonskapsler.',
+    'agree' => 'Jeg forstĂĄr',
+];
diff --git a/resources/lang/vendor/cookieConsent/nl/texts.php b/resources/lang/vendor/cookieConsent/nl/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..b84fc616363ec5cfe55bfa022f9814d983ff5fef
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/nl/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Uw ervaring op deze site wordt verbeterd door het gebruik van cookies.',
+    'agree' => 'Sta cookies toe',
+];
diff --git a/resources/lang/vendor/cookieConsent/pl/texts.php b/resources/lang/vendor/cookieConsent/pl/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..75b8bd3cdaa108cf1c1c98754fed744bf0bd1e2f
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/pl/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Twoje doświadczenia na tej witrynie będą lepsze dzięki cookies.',
+    'agree' => 'Zezwalaj na cookie',
+];
diff --git a/resources/lang/vendor/cookieConsent/pt/texts.php b/resources/lang/vendor/cookieConsent/pt/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..1d7a64bf42a8a70b716b1a7437b5c04eb227f6e1
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/pt/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Este site utiliza cookies. Ao navegar no site estará a consentir a sua utilização.',
+    'agree' => 'Aceitar',
+];
diff --git a/resources/lang/vendor/cookieConsent/ro/texts.php b/resources/lang/vendor/cookieConsent/ro/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..5567afaebb69a27695e57ea244fb9c84c87fb7ac
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/ro/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Experiența ta pe acest site va fi îmbunătățită dacă acceptați folosirea de cookie-uri.',
+    'agree' => 'Acceptă cookie',
+];
diff --git a/resources/lang/vendor/cookieConsent/ru/texts.php b/resources/lang/vendor/cookieConsent/ru/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..dc4afb4188ff956ea05e8841e5041b50323c693d
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/ru/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'На этом сайте используются файлы cookies для улучшения вашего пользовательского интерфейса.',
+    'agree' => 'Разрешить',
+];
diff --git a/resources/lang/vendor/cookieConsent/sk/texts.php b/resources/lang/vendor/cookieConsent/sk/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..63d623e121aadb532e5bce1b1e3d1aa449213b05
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/sk/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Táto stránka používa cookies na vylepšenie vášho užívateľského zážitku.',
+    'agree' => 'SĂşhlasĂ­m',
+];
diff --git a/resources/lang/vendor/cookieConsent/sv/texts.php b/resources/lang/vendor/cookieConsent/sv/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..0f51df7f89e830acf3d77de4ae2d26cfca6358b2
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/sv/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Vi använder kakor (cookies) för att webbplatsen ska fungera på ett bra sätt för dig. Genom att surfa vidare godkänner du att vi använder kakor.',
+    'agree' => 'Jag förstår',
+];
diff --git a/resources/lang/vendor/cookieConsent/tr/texts.php b/resources/lang/vendor/cookieConsent/tr/texts.php
new file mode 100644
index 0000000000000000000000000000000000000000..c819cab18ce241780e886752bc32b046ed80987e
--- /dev/null
+++ b/resources/lang/vendor/cookieConsent/tr/texts.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'message' => 'Bu sitedeki deneyiminizi çerezlere izin vererek geliştirebilirsiniz.',
+    'agree' => 'Çerezlere izin ver',
+];
diff --git a/resources/sass/_custom.scss b/resources/sass/_custom.scss
index c55b298466fbbdc8425bdabcba1e64aa2ea7c7a0..a57ec116022b4d6122416fd87ed1b13f290813e7 100644
--- a/resources/sass/_custom.scss
+++ b/resources/sass/_custom.scss
@@ -1 +1,1447 @@
-// Ready for custom styling
+// Variables
+@import 'variables';
+
+body {
+    background-color: $theme-color-five;
+    font-family: $font-family-one;
+    padding-top: 5.1rem;
+
+    .head-title h1 {
+        color: $theme-color-one;
+        font-weight: $font-weight-one;
+        font-size: 60pt;
+        //font-weight: bold;
+        letter-spacing: 3px;
+    }
+
+    .carousel {
+        margin-top: - 5.1rem;
+
+        .carousel-inner {
+            .museum-logo {
+                display: flex;
+                justify-content: center;
+                position: absolute;
+                top: 5%;
+                width: 100%;
+                z-index: 1;
+
+                img {
+                    width: 7.5rem;
+                }
+            }
+
+            .social-logo {
+                text-align: center;
+                justify-content: space-around;
+                flex-wrap: nowrap;
+                position: absolute;
+                top: 25%;
+                padding-left: 25px;
+                width: 100%;
+                z-index: 1;
+
+                img {
+                    width: 2.0625rem;
+                }
+            }
+
+            .carousel-button {
+                bottom: 10%;
+                left: 50%;
+                transform: translateX(-50%);
+                position: absolute;
+                z-index: 1;
+            }
+
+            .carousel-item {
+                height: 100vh;
+                min-height: 350px;
+                background: no-repeat center center scroll;
+                -webkit-background-size: cover;
+                -moz-background-size: cover;
+                -o-background-size: cover;
+                background-size: cover;
+            }
+        }
+
+        .carousel-caption {
+            top: 50%;
+            bottom: auto;
+            padding-left: 1rem;
+            padding-right: 1rem;
+            transform: translateY(-50%);
+            background-color: rgba(239, 218, 179, 0.5);
+        }
+    }
+
+    /////////text types
+    //většina běžných textů
+    .text {
+        font-weight: $font-weight-one;
+        font-size: 8pt;
+        line-height: 9pt;
+    }
+
+    //text inputu a název artefaktů
+    .text2 {
+        font-weight: $font-weight-two;
+        font-size: 8pt;
+    }
+
+    //název "kaplicky" a "choose a few" v categories (tam má jinou barvu)
+    .kaplicky {
+        color: $theme-color-one;
+        font-size: 11pt;
+        font-weight: $font-weight-two;
+        letter-spacing: 3pt;
+    }
+
+    //autor artefaktu
+    .text-author {
+        font-weight: $font-weight-one;
+        font-size: 7pt;
+        color: $theme-color-four;
+    }
+
+    //poÄŤet lajkĹŻ
+    .text-number {
+        font-weight: $font-weight-two;
+        font-size: 5pt;
+        color: $theme-color-four;
+    }
+
+    //notes u metadat, about v about, text levého menu
+    .text-headline {
+        font-weight: $font-weight-two;
+        font-size: 12pt;
+        color: $theme-color-four;
+    }
+
+    //notes u metadat, about v about, text levého menu
+    .text-headline-desktop {
+        font-size: 24pt;
+        color: $theme-color-four;
+    }
+
+    //název metadata, text pravého menu
+    .text-page {
+        font-weight: $font-weight-two;
+        font-size: 7pt;
+    }
+
+    ////color pro změnu jen barvy
+    .black {
+        color: $theme-color-five;
+    }
+
+    .white {
+        color: $theme-color-one;
+    }
+
+    .colored {
+        color: $theme-color-four;
+    }
+
+    .highlight-white, .highlight-white {
+        &:hover, &:focus, &:active {
+            color: $theme-color-one;
+        }
+    }
+
+
+    ////login
+    .auth {
+        .card {
+            border: none;
+            text-align: center;
+            font-size: 8pt;
+        }
+
+        .col-form-label {
+            text-align: left;
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+
+        .form-control {
+            padding: 0;
+            height: 17pt;
+            border-radius: 0;
+
+            &:focus {
+                //border-color: $theme-color-one;
+                border-top-color: $theme-color-five;
+                border-left-color: $theme-color-five;
+                border-right-color: $theme-color-five;
+                border-bottom-color: 0.5pt $theme-color-one;
+                -webkit-box-shadow: none;
+                box-shadow: none;
+            }
+        }
+    }
+
+    //Oprava barev pro Chrom
+    input:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0 50px $theme-color-five inset !important;
+        -webkit-text-fill-color: $theme-color-one;
+        background-color: $theme-color-five !important;
+        //outline: none !important;
+        &:active, &:focus, &:visited, &:hover {
+            -webkit-box-shadow: 0 0 0 50px $theme-color-five inset !important;
+            -webkit-text-fill-color: $theme-color-one;
+            background-color: $theme-color-five !important;
+            //outline: none !important;
+        }
+    }
+
+    .card-body {
+        background-color: $theme-color-five;
+        font-weight: $font-weight-one;
+        color: $theme-color-four;
+    }
+
+    .form-control {
+        background-color: $theme-color-five;
+        margin-top: -1px;
+        border-top-color: $theme-color-five;
+        border-left-color: $theme-color-five;
+        border-right-color: $theme-color-five;
+        border-bottom-color: 0.5pt $theme-color-one;
+        color: $theme-color-one;
+        box-shadow: none;
+        font-size: 8pt;
+        outline: none;
+
+        &:active, &:focus, &:visited, &:hover {
+            outline: none;
+            background-color: $theme-color-five;
+            margin-top: -1px;
+            border-top-color: $theme-color-five;
+            border-left-color: $theme-color-five;
+            border-right-color: $theme-color-five;
+            border-bottom-color: 0.5pt $theme-color-one;
+            color: $theme-color-one;
+            box-shadow: none;
+        }
+
+    }
+
+    .form-control.is-invalid {
+        box-shadow: none;
+        border-color: $theme-color-four;
+        background-image: none;
+
+        &:active, &:focus, &:visited {
+            box-shadow: none;
+            border-color: $theme-color-four;
+        }
+    }
+
+    .button-square {
+        font-size: 8pt;
+        background-color: $theme-color-five;
+        color: $theme-color-one;
+        border: 0.5pt solid $theme-color-one;
+        border-radius: 0;
+        padding: 0.4675rem 2.475rem;
+        font-weight: $font-weight-one;
+
+        &:active, &:focus, &:visited, &:hover {
+            outline: none;
+            box-shadow: none;
+            color: $theme-color-one;
+        }
+
+        &:hover {
+            color: $theme-color-four;
+        }
+    }
+
+    //spendlik
+    .pin-left:before {
+        content: '';
+        position: relative;
+        height: 0.35433rem;
+        width: 0.35433rem;
+        background-color: $theme-color-one;
+        border-radius: 50%;
+        display: inline-block;
+        top: -0.35433rem;
+        left: -0.2rem;
+    }
+
+    .pin-left {
+        border-left: .5pt solid $theme-color-four;
+        position: fixed;
+        bottom: 0;
+        text-align: left;
+
+        // center fixed div
+        left: 50%;
+        transform: translateX(-50%);
+        width: 350px;
+
+        .text {
+            margin-left: 0.5rem;
+            margin-bottom: 0.2rem; // looks fugly without margin
+        }
+
+        p {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+    }
+
+    li {
+        list-style-type: none;
+    }
+
+    .button-image {
+        background-color: transparent;
+        border-color: transparent;
+
+        &:before {
+            content: "";
+            width: 100px;
+            height: 100px;
+            display: inline-block;
+            margin-right: 5px;
+            vertical-align: text-top;
+            background-color: transparent;
+            background-position: center center;
+            background-repeat: no-repeat;
+        }
+    }
+
+    .fav-cat-mybooks {
+        color: $theme-color-two;
+        text-align: center;
+        font-size: 1.9rem;
+    }
+
+    .fav-cat-nofav {
+        text-align: center;
+        color: $theme-color-three;
+        background-color: $theme-color-five;
+        border-color: $theme-color-three;
+    }
+
+    .artefacts-area, .artefact-area {
+
+        h5 {
+            color: $theme-color-two;
+            //font-weight: $font-weight-two;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            line-height: 0.9rem;
+            font-size: 1.1rem;
+        }
+
+        h6 {
+            color: $theme-color-two;
+            font-size: 0.9rem;
+            //font-weight: lighter;
+            font-weight: $font-weight-one;
+        }
+
+        img {
+            border: transparent;
+            border-radius: 1px;
+        }
+
+        .card {
+            margin: 10px;
+            border: none !important;
+        }
+
+        .left_panel_info {
+            margin-top: 15px;
+            max-width: 70%; //250px
+        }
+
+        .right_panel_info {
+            margin-top: 15px;
+        }
+
+        .likes_text {
+            text-align: center;
+        }
+
+        .card-cus-bottom {
+            background-color: $theme-color-five;
+            padding-right: 0;
+            padding-left: 0;
+        }
+
+        .inter_info {
+            &:before {
+                //background-image: url(../images/interface/Button_Info_50.png);
+                background-image: url(../images/interface/Button_Info.svg);
+                //width: 60px;
+                //height: 60px;
+                width: 8vw;
+                height: 8vw;
+            }
+        }
+
+        .inter_like {
+            display: none;
+
+            &:before {
+                //background-image: url(../images/interface/Hearth_Empty_50.png);
+                background-image: url(../images/interface/Heart_Empty.svg);
+                //width: 60px;
+                //height: 60px;
+                width: 8vw;
+                height: 8vw;
+            }
+        }
+
+        .inter_like_filled {
+            &:before {
+                //background-image: url(../images/interface/Hearth_Filled_50.png);
+                background-image: url(../images/interface/Heart_Filled.svg);
+                //width: 60px;
+                //height: 60px;
+                width: 8vw;
+                height: 8vw;
+            }
+        }
+
+        .charts {
+            .inter_info, .inter_like, .inter_like_filled {
+                display: inline;
+
+                &:before {
+                    width: 3rem;
+                    height: 3rem;
+                }
+            }
+
+        }
+
+        .inter_info, .inter_like, .inter_like_filled {
+            padding: 0;
+
+            &:focus, &:active, &:hover {
+                background-color: transparent !important;
+                border-color: transparent !important;
+                outline: none !important;
+                box-shadow: none !important;
+            }
+        ;
+        }
+    }
+
+    // Artefact area
+    .artefact-area {
+
+        .card-cus-bottom {
+            .left_panel_info, .right_panel_info {
+                margin: 0.9375rem 0 0 0;
+            }
+
+            .right_panel_info {
+                .float-right {
+                    margin-right: -0.35rem;
+                }
+            }
+        }
+
+        .artefact-name {
+            font-weight: $font-weight-two;
+            font-size: 8pt;
+            line-height: 10pt;
+            margin-bottom: 0;
+        }
+
+        .artefact-author {
+            font-size: 7pt;
+            line-height: 8pt;
+        }
+
+        .inter_like {
+            display: block;
+
+            &:before {
+                background-image: url(../images/interface/Heart_Empty.svg);
+                width: 1.563rem;
+                height: 1.25rem;
+
+            }
+        }
+
+        .inter_like_filled {
+            &:before {
+                background-image: url(../images/interface/Heart_Filled.svg);
+                width: 1.563rem;
+                height: 1.25rem;
+            }
+        }
+
+        .inter_info {
+
+            padding-right: 1rem;
+
+            &:before {
+                background-image: url(../images/interface/Button_Info.svg);
+                width: 1.875rem;
+                height: 1.875rem;
+            }
+        }
+
+        .artefact-likes {
+            font-weight: $font-weight-two;
+            font-size: 5pt;
+            padding-right: 0.25rem;
+        }
+    }
+
+    // Metadata area
+    .metadata-area {
+
+        h2 {
+            color: $theme-color-two;
+            font-weight: $font-weight-two;
+            font-size: 12pt;
+        }
+
+        .arrow-down {
+            position: fixed;
+            top: 0.25rem;
+            right: 0;
+            margin: 2rem;
+            width: 0;
+            height: 0;
+            border-left: 0.59055rem solid transparent;
+            border-right: 0.59055rem solid transparent;
+            border-top: 0.59055rem solid $theme-color-two;
+        }
+
+        .pin-horizontal {
+            color: $theme-color-two;
+            border-bottom: .042rem solid $theme-color-two;
+            display: inline-block;
+            margin: 2.75rem 3.125rem 0 0;
+
+            &:after {
+                content: '';
+                background-color: #ddd1b9;
+                position: relative;
+                height: .5rem;
+                width: .5rem;
+                border-radius: 50%;
+                display: block;
+                margin-left: auto;
+                top: .25rem;
+            }
+
+            .metadata {
+                position: relative;
+                display: flex;
+                align-items: baseline;
+
+                a {
+                    color: $theme-color-two;
+                    text-decoration: none;
+
+                    span {
+                        font-weight: $font-weight-two;
+                    }
+                }
+
+                .arrow-down {
+                    position: relative;
+                    top: 0;
+                    right: 0;
+                    width: 0;
+                    height: 0;
+                    border-left: 0.25rem solid transparent;
+                    border-right: 0.25rem solid transparent;
+                    border-top: 0.25rem solid $theme-color-two;
+                    margin: 0 0.5rem 0 0.5rem;
+                }
+            }
+        }
+
+        .white-pin {
+            color: $theme-color-one;
+            border-bottom: .042rem solid $theme-color-one;
+
+            &:after {
+                content: '';
+                background-color: $theme-color-one;
+            }
+
+            .metadata {
+                a {
+                    color: $theme-color-one;
+                }
+
+                .arrow-down {
+                    border-top: 0.25rem solid $theme-color-one;
+                }
+            }
+        }
+
+        .metadata-text {
+            font-size: 8pt;
+            color: $theme-color-one;
+            padding-top: 10px;
+            padding-left: 25px;
+            padding-right: 25px;
+
+            .artefact-info {
+                color: $theme-color-two;
+                margin-top: 10px;
+
+                .artefact-name {
+                    font-weight: $font-weight-two;
+                    font-size: 8pt;
+                }
+
+                .artefact-author {
+                    font-weight: $font-weight-one;
+                    font-size: 7pt;
+                }
+
+                .inter_like {
+
+                    &:before {
+                        background-image: url(../images/interface/Heart_Empty.svg);
+                        width: 3.125rem;
+                        height: 3.125rem;
+                        margin-right: 0;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
+
+                .inter_like_filled {
+
+                    &:before {
+                        background-image: url(../images/interface/Heart_Filled.svg);
+                        width: 3.125rem;
+                        height: 3.125rem;
+                        margin-right: 0;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
+            }
+        }
+    }
+
+    // Modal
+    .modal {
+        font-weight: $font-weight-one;
+        color: $theme-color-two;
+        font-size: 8pt;
+
+        .modal-header {
+            border-bottom: 1px solid $theme-color-two;
+
+            .close {
+                color: $theme-color-two;
+                text-shadow: none;
+            }
+        }
+
+        .modal-content {
+            background-color: $theme-color-five;
+        }
+
+        .modal-footer {
+            border-top: 1px solid $theme-color-two;
+
+            .btn {
+                background-color: $theme-color-two;
+                color: $theme-color-five;
+
+            }
+        }
+    }
+
+    .image-modal {
+        .close {
+            font-size: 24pt;
+            color: $theme-color-two;
+            text-shadow: none;
+            position: absolute;
+            top: 1rem;
+            right: 0.125rem;
+            opacity: 1;
+            cursor: pointer;
+            pointer-events: initial;
+        }
+    }
+
+    /*.content {
+        position: relative;
+
+        //Circle style button
+        .btn-circle.rounded-circle {
+            padding: 6px 0px;
+            font-size: 16px;
+            text-align: center;
+        }
+        .btn-categories
+        {
+            position: absolute;
+            border-width: 5px;
+            background-color: $theme-color-five;
+            border-color: $theme-color-four;
+            color:$theme-color-four;
+            outline: none !important;
+            box-shadow: none !important;
+            font-weight: $font-weight-two;
+
+            &:active
+            {
+                background-color: $theme-color-three;
+                border-color: $theme-color-four;
+                outline: none !important;
+                box-shadow: none !important;
+                color:$theme-color-five;
+            }
+        }
+    }*/
+
+    //CATEGORIES - TILES
+    .btn.btn-dark.cat-tile {
+        //STYLING
+        border-color: $theme-color-four;
+        border-radius: 0;
+        border-style: solid;
+        border-width: 2px;
+        color: $theme-color-four;
+        background-color: $theme-color-five;
+        text-align: center;
+        outline: none !important;
+        box-shadow: none !important;
+
+        //TEXT OVERFLOW
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        //FONT
+        font-size: 22pt;
+
+        //SPACING
+        padding: 4rem 1rem;
+
+        &:active, &:focus {
+            background-color: $theme-color-three;
+            border-color: $theme-color-four;
+            outline: none !important;
+            box-shadow: none !important;
+            color: $theme-color-five;
+        }
+    }
+
+    .btn-dark:not(:disabled):not(.disabled).active {
+        background-color: $theme-color-four;
+        color: white;
+        border-color: $theme-color-five;
+    }
+
+    //CATEGORY/{id} -h2 title NO ARTEFACTS
+    .category-h2 {
+        color: $theme-color-four;
+    }
+
+    .cat-main-div {
+        margin-top: 2.4rem;
+    }
+
+    //CATEGORIES - Wrapper around Enter button
+    .cat-wrapper {
+        margin: auto;
+        display: block;
+        //align-content: center;
+        //margin:auto;
+        //display:block;
+    }
+
+    //CATEGORIES - Enter button
+    .btn.button-square.cat-enter-butt {
+        border-radius: 0;
+        bottom: 5%;
+        position: fixed;
+        left: 50%;
+        transform: translateX(-50%);
+
+        &:active, &:focus, &:visited, &:hover {
+            outline: none;
+            box-shadow: none;
+            color: $theme-color-one;
+        }
+
+        &:hover {
+            color: $theme-color-four;
+        }
+    }
+
+    //VERIFY - main text
+    .ver-text {
+
+        margin-top: 50pt;
+
+        h2 {
+            text-align: center;
+            color: $theme-color-two;
+        }
+    }
+}
+
+.top-bar {
+    background-color: $theme-color-five;
+    min-height: 5rem;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 2;
+
+    .shadow {
+        box-shadow: none;
+    }
+}
+
+.sidenav {
+    height: 100%;
+    width: 0;
+    //width: 250px;
+    position: fixed;
+    z-index: 4;
+    top: 0;
+    left: 0;
+    background-color: $theme-color-four;
+    overflow-x: hidden;
+    transition: 0.5s;
+}
+
+.sidenav a {
+    text-decoration: none;
+    color: $theme-color-five;
+    display: block;
+    transition: 0.3s;
+
+    &:hover {
+        color: $theme-color-four;
+        background-color: $theme-color-one;
+    }
+
+    &:active, &:focus, .active {
+        color: $theme-color-one;
+        background-color: $theme-color-four;
+    }
+}
+
+.bar-desktop {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+
+.down {
+    position: absolute;
+    z-index: 5;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin-bottom: 3rem;
+}
+
+.menu-item {
+    padding: 0.25rem 1rem;
+    width: 100%;
+    border: 0;
+
+    &:active, &.active, &:focus {
+        color: $theme-color-one;
+        //background-color: $theme-color-five;
+        border: none;
+        outline: none;
+        box-shadow: none;
+    }
+}
+
+.logo-kaplicky {
+    text-align: center;
+    display: none;
+
+    &:active, &.active, &:focus {
+        outline: none;
+        box-shadow: none;
+    }
+}
+
+.navbar {
+    padding: unset;
+}
+
+.vertical-center {
+    margin-top: -5.1rem; // fixed navbar correction
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+}
+
+.error {
+    color: $theme-color-one;
+    font-size: xx-large;
+    display: block;
+    text-align: center;
+}
+
+// login and registration alert bottom margin
+.al {
+    margin-bottom: 3rem;
+}
+
+.js-cookie-consent {
+    position: fixed;
+    z-index: 9999;
+    text-align: center;
+    width: 100%;
+    bottom: 0px;
+    padding: 10px;
+    background: $theme-color-four;
+}
+
+.js-cookie-consent-agree {
+    font-size: 8pt;
+    background-color: $theme-color-five;
+    color: $theme-color-one;
+    border: 0.5pt solid $theme-color-one;
+    border-radius: 0;
+    padding: 0.5rem 2rem;
+    font-weight: $font-weight-one;
+
+    &:active, &:focus, &:visited, &:hover {
+        outline: none;
+        box-shadow: none;
+        color: $theme-color-one;
+    }
+
+    &:hover {
+        color: $theme-color-four;
+    }
+}
+
+.cookie-consent__message {
+    padding: 1rem;
+    display: inline-block;
+}
+
+.bar-desktop {
+    margin-left: 2rem;
+    margin-right: 2rem;
+}
+
+// books component
+.books-component {
+
+    .book-area {
+        .card-cus-bottom {
+
+            display: flex;
+            justify-content: space-between;
+            align-items: baseline;
+
+            .book-arrow {
+                &:after {
+                    content: '';
+                    bottom: 3rem;
+                    position: absolute;
+                    border-top: 1.25rem solid transparent;
+                    border-bottom: 1.25rem solid transparent;
+                }
+            }
+
+            .book-arrow-left {
+                &:after {
+                    left: 1.5625rem;
+                    border-right: 1.25rem solid $theme-color-two;
+                }
+            }
+
+            .book-arrow-right {
+                &:after {
+                    border-left: 1.25rem solid $theme-color-two;
+                }
+            }
+
+            .likes {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .inter_like, .inter_like_filled {
+                    margin: 0 auto;
+
+                    &:before {
+                        margin-right: 0;
+                        height: 5rem;
+                        width: 5rem;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
+
+                .inter_like {
+                    &:before{
+                        background-image: url(../images/interface/Heart_Empty.svg);
+                    }
+                }
+
+                .inter_like_filled {
+                    &:before{
+                        background-image: url(../images/interface/Heart_Filled.svg);
+                    }
+                }
+
+                .artefact-likes {
+                    color: $theme-color-two;
+                    font-size: 12pt;
+                    padding: 0;
+                }
+            }
+        }
+    }
+
+    .info-area {
+        color: $theme-color-two;
+        margin-top: 0.625rem;
+        padding-left: 5rem;
+
+        /* could be use to hide overflowing notes
+        max-height: 80vh;
+        overflow-y: scroll;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+
+        &::-webkit-scrollbar {
+            width: 0 !important
+        } */
+
+        h3 {
+            font-weight: $font-weight-two;
+        }
+
+        .switch-view {
+            float: right;
+            color: $theme-color-one;
+            cursor: pointer;
+        }
+
+        .artefact-notes {
+            display: none;
+            color: $theme-color-two;
+
+            .pin-horizontal {
+                border-bottom: .042rem solid $theme-color-two;
+                display: inline-block;
+                margin: 2.75rem 2rem 0 0;
+
+                &:after {
+                    content: '';
+                    background-color: #ddd1b9;
+                    position: relative;
+                    height: .5rem;
+                    width: .5rem;
+                    border-radius: 50%;
+                    display: block;
+                    margin-left: auto;
+                    top: .25rem;
+                }
+
+                .metadata {
+                    position: relative;
+                    display: flex;
+                    align-items: baseline;
+
+                    a {
+                        color: $theme-color-two;
+                        text-decoration: none;
+
+                        span {
+                            font-size: 12pt;
+                            font-weight: $font-weight-two;
+                        }
+                    }
+
+                    .arrow-down {
+                        position: relative;
+                        top: 0;
+                        right: 0;
+                        width: 0;
+                        height: 0;
+                        border-left: 0.25rem solid transparent;
+                        border-right: 0.25rem solid transparent;
+                        border-top: 0.25rem solid $theme-color-two;
+                        margin: 0 0.5rem 0 0.5rem;
+                    }
+                }
+            }
+
+            .white-pin {
+                color: $theme-color-one;
+                border-bottom: .042rem solid $theme-color-one;
+
+                &:after {
+                    content: '';
+                    background-color: $theme-color-one;
+                }
+
+                .metadata {
+
+                    a {
+                        color: $theme-color-one;
+                    }
+
+                    .arrow-down {
+                        border-top: 0.25rem solid $theme-color-one;
+                    }
+                }
+            }
+
+            .metadata-text {
+                font-size: 12pt;
+                color: $theme-color-one;
+                padding-top: 10px;
+                padding-left: 25px;
+                padding-right: 25px;
+
+                .inter_like {
+
+                    &:before {
+                        background-image: url(../images/interface/Heart_Empty.svg);
+                        width: 5rem;
+                        height: 5rem;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
+
+                .inter_like_filled {
+
+                    &:before {
+                        background-image: url(../images/interface/Heart_Filled.svg);
+                        width: 5rem;
+                        height: 5rem;
+                    }
+
+                    &:hover, &:focus, &:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        outline: none !important;
+                        box-shadow: none !important;
+                    }
+                }
+            }
+        }
+
+        .inter_info {
+
+            float: right;
+            color: $theme-color-one;
+            padding-right: 1rem;
+
+            &:before {
+                background-image: url(../images/interface/Button_Info_White.svg);
+                width: 1.875rem;
+                height: 1.875rem;
+            }
+
+            &:hover, &:focus, &:active {
+                background-color: transparent !important;
+                border-color: transparent !important;
+                outline: none !important;
+                box-shadow: none !important;
+            }
+        }
+    }
+}
+
+@media (max-width: 610px) {
+    .js-cookie-consent-agree {
+        margin-bottom: 1rem;
+    }
+}
+
+@media screen and (max-height: 450px) {
+    .sidenav a {
+        font-size: 18px;
+    }
+    .down {
+        bottom: unset;
+        margin-bottom: unset;
+    }
+}
+
+@media (max-width: 990px) {
+    .bar-desktop {
+        display: none;
+    }
+    .logo-kaplicky {
+        margin: 0 auto;
+        display: block;
+    }
+    .arrow {
+        position: absolute;
+        width: 0;
+        height: 0;
+        margin: 2rem;
+        cursor: pointer;
+        border: 0.59055rem solid transparent;
+
+        &:active, &.active, &:focus {
+            outline: none;
+            box-shadow: none;
+        }
+    }
+    .arrow-left {
+        margin-left: 80%;
+
+        border-right: 0.59055rem solid $theme-color-five;
+        background-color: $theme-color-four !important;
+    }
+    .arrow-right {
+        border-left: 0.59055rem solid $theme-color-four;
+
+        position: fixed;
+        z-index: 3;
+        top: 0;
+        left: 0;
+    }
+    .menu-item:active, .menu-item.active {
+        color: $theme-color-five;
+        background-color: $theme-color-one;
+    }
+}
+
+@media (max-width: 770px) {
+    .books-component {
+        .info-area {
+            padding-left: 1.5625rem;
+        }
+    }
+}
+
+@media only screen and (max-width: 540px) {
+    .sidenav {
+        width: 0;
+    }
+    .head-title.text-center h1 {
+        font-size: 23pt;
+        padding-top: 50pt;
+        white-space: nowrap;
+    }
+
+
+    /*.btn-circle.rounded-circle.btn-sm
+    {
+        width: 90px;
+        height: 90px;
+    }
+
+    .btn-circle.rounded-circle.btn-dm
+    {
+        width: 130px;
+        height: 130px;
+    }
+
+    .btn-circle.rounded-circle.btn-xl
+    {
+        width: 180px;
+        height: 180px;
+    }*/
+
+    body {
+        .carousel {
+            .carousel-inner {
+                .social-logo {
+                    padding-left: 30px;
+                    top: 20%;
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 330px) and (max-height: 900px) {
+    body {
+        .carousel {
+            .carousel-inner {
+                .social-logo {
+                    top: 25%;
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 1024px) {
+
+    body {
+        .kaplicky {
+            text-align: center;
+            font-size: 30pt;
+            margin-bottom: 3rem;
+        }
+
+        .pin-left:before {
+            height: 1.125rem;
+            width: 1.125rem;
+            top: -1.125rem;
+            left: -0.56rem;
+        }
+
+        .text {
+            text-align: left;
+            font-size: 18pt;
+            line-height: 26pt;
+        }
+
+        .text2 {
+            text-align: left;
+            font-size: 18pt;
+            line-height: 26pt;
+        }
+
+        .carousel {
+            .carousel-inner {
+                .social-logo {
+                    justify-content: center;
+                    top: 90%;
+
+                    .logo {
+                        margin-left: 10rem;
+
+                        img {
+                            width: 3.125rem;
+                        }
+
+                        &:first-child {
+                            margin-left: 0;
+                        }
+                    }
+                }
+
+                .carousel-button {
+                    bottom: 15%;
+                }
+            }
+
+            .carousel-caption {
+                padding: 3.75rem 6.25rem 5em;
+
+                h2 {
+                    margin-bottom: 1rem;
+                }
+            }
+        }
+
+        .button-square {
+            font-size: 18pt;
+            padding: 0.28125rem 3.7rem;
+        }
+
+        .metadata-area {
+            .pin-horizontal {
+                margin: 5rem 3.125rem 0 0;
+
+                .metadata {
+
+                    margin-right: 0.5rem;
+
+                    .arrow-down {
+                        border-left: 0.5rem solid transparent;
+                        border-right: 0.5rem solid transparent;
+                        border-top: 0.5rem solid $theme-color-two;
+                    }
+
+                    a {
+                        span {
+                            font-size: 16pt;
+                        }
+                    }
+                }
+
+                &:after {
+                    height: 0.75rem;
+                    width: 0.75rem;
+                    top: 0.375rem;
+                }
+            }
+
+            .white-pin {
+                .metadata {
+                    .arrow-down {
+                        border-top: 0.5rem solid $theme-color-one;
+                    }
+                }
+            }
+
+            .metadata-text {
+                font-size: 19pt;
+                max-width: 50%;
+
+                .artefact-info {
+                    .artefact-name {
+                        font-size: 16pt;
+                    }
+
+                    .artefact-author {
+                        font-size: 12pt;
+                    }
+
+                    .inter_like_filled {
+                        &:before {
+                            width: 5rem;
+                            height: 5rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 1575px) {
+    body {
+        .carousel {
+            .carousel-inner {
+                .carousel-button {
+                    bottom: 20%;
+                }
+            }
+        }
+    }
+}
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index 0407ab577327b92faf6bbb6cb6391587d9db6d1a..7a8643f2e771a876cc507dca7e2a6b5aa330275b 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -2,10 +2,25 @@
 $body-bg: #f8fafc;
 
 // Typography
-$font-family-sans-serif: 'Nunito', sans-serif;
+//$font-family-sans-serif: 'Nunito', sans-serif;
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
 
+// Design fonts
+//$font-family-avenir-roman: Avenir Roman;
+//$font-family-avenir-medium: Avenir Medium;
+//$font-family-avenir-black: Avenir Black;
+$font-family-nunito: Nunito;
+$weight-roman:  400;
+$weight-medium: 600;
+$weight-black:  900;
+
+// Theme fonts
+$font-family-one: $font-family-nunito;
+$font-weight-one: $weight-roman;
+$font-weight-two: $weight-medium;
+$font-weight-three: $weight-black;
+
 // Colors
 $blue: #3490dc;
 $indigo: #6574cd;
@@ -17,3 +32,18 @@ $yellow: #ffed4a;
 $green: #38c172;
 $teal: #4dc0b5;
 $cyan: #6cb2eb;
+$white: #ffffff;
+$black: #000;
+
+// Design colors
+$pastel-grey: #ddd1b9;
+$whey: #efdab3;
+$desert-sand: #ead4b0;
+$raisin-black: #272727;
+
+// Theme colors
+$theme-color-one: $white;
+$theme-color-two: $pastel-grey;
+$theme-color-three: $whey;
+$theme-color-four: $desert-sand;
+$theme-color-five: $raisin-black;
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 3193ffa215881514bdbdb3549188271c62191b8d..39a11167890ce0a3a058733d69375cbb544c6a85 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1,8 +1,15 @@
 // Fonts
-@import url('https://fonts.googleapis.com/css?family=Nunito');
+@import url('https://fonts.googleapis.com/css?family=Nunito');//Roman
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap');//Medium
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap');//Black
+//@import url('https://db.onlinewebfonts.com/c/2090551770be22b09600a40b0b4673b7?family=Avenir+Medium');
+//@import url('https://db.onlinewebfonts.com/c/275de2221d9f0c4c9257d17f5a1e4006?family=Avenir+Black');
+//@import url('https://db.onlinewebfonts.com/c/1a045963159927274c92b0444fb83c17?family=Avenir');
 
 // Variables
 @import 'variables';
 
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
+
+@import 'custom';
diff --git a/resources/views/artefact/category.blade.php b/resources/views/artefact/category.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..714e3a0d3ad558deb022727dd682ad5203d46494
--- /dev/null
+++ b/resources/views/artefact/category.blade.php
@@ -0,0 +1,54 @@
+@extends('layouts.app')
+
+@section('title', 'Artefacts')
+
+@section('breadcrumb')
+    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
+    <li class="breadcrumb-item active" aria-current="page">Artefacts</li>
+@endsection
+
+
+@section('content')
+    <div class="container">
+        <div class="jumbotron mt-5">
+            <div class="text-center">
+                <h1>Artefact list</h1>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+                    Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
+                    Fusce tellus odio, dapibus id fermentum quis, suscipit id erat.
+                    Morbi scelerisque luctus velit. Vivamus porttitor turpis ac leo.
+                    Morbi scelerisque luctus velit.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                </p>
+            </div>
+        </div>
+
+        @if (count($artefacts) === 0)
+            <div class="text-center category-h2">
+                <h2>Currently no artefacts available.</h2>
+            </div>
+        @else
+            @foreach($artefacts as $artefact)
+                <div class="artefacts-area mb-5">
+                    <div class="card">
+                        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="45%" y="50%" fill="#dee2e6" dy=".3em">Artefact image</text></svg>
+                        <div class="card-body">
+                            <h5 class="card-title"><a href="{{ url('/artefact/' . $artefact[0]->id) }}">{{$artefact[0]->name}}</a> - {{$artefact[0]->author}}</h5>
+                            <h6 class="card-subtitle mb-2 text-muted">{{$artefact[0]->year}}, {{$artefact[0]->pages}} pages</h6>
+                            <p class="card-text">
+                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+                                Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
+                                Fusce tellus odio, dapibus id fermentum quis, suscipit id erat.
+                                Morbi scelerisque luctus velit. Vivamus porttitor turpis ac leo.
+                                Morbi scelerisque luctus velit.
+                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            @endforeach
+        @endif
+    </div>
+
+@endsection
diff --git a/resources/views/artefact/default.blade.php b/resources/views/artefact/default.blade.php
index 232d8dfda98573fe9be0478f4003fdbe536f0fdd..800d804e69a9bf2d253adea70fcddd823de725b1 100644
--- a/resources/views/artefact/default.blade.php
+++ b/resources/views/artefact/default.blade.php
@@ -9,44 +9,6 @@
 
 
 @section('content')
-    <div class="jumbotron">
-        <div class="text-center">
-            <h1>Artefact list</h1>
-            <p>
-                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-                Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
-                Fusce tellus odio, dapibus id fermentum quis, suscipit id erat.
-                Morbi scelerisque luctus velit. Vivamus porttitor turpis ac leo.
-                Morbi scelerisque luctus velit.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-        </div>
-    </div>
-
-    @if (count($artefacts) === 0)
-        <div class="text-center">
-            <h2>Currently no artefacts available.</h2>
-        </div>
-    @else
-        @foreach ($artefacts as $artefact)
-            <div class="artefacts-area mb-5">
-                <div class="card">
-                    <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="45%" y="50%" fill="#dee2e6" dy=".3em">Artefact image</text></svg>
-                    <div class="card-body">
-                        <h5 class="card-title"><a href="{{ url('/artefact/' . $artefact->id) }}">{{$artefact->name}}</a> - {{$artefact->author}}</h5>
-                        <h6 class="card-subtitle mb-2 text-muted">{{$artefact->year}}, {{$artefact->pages}} pages</h6>
-                        <p class="card-text">
-                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-                            Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
-                            Fusce tellus odio, dapibus id fermentum quis, suscipit id erat.
-                            Morbi scelerisque luctus velit. Vivamus porttitor turpis ac leo.
-                            Morbi scelerisque luctus velit.
-                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        @endforeach
-    @endif
-
+    @component('components/books', ['artefacts' => $artefacts])
+    @endcomponent
 @endsection
diff --git a/resources/views/artefact/view.blade.php b/resources/views/artefact/view.blade.php
index e0f43b652f797541bc5886488afeb7785e07eadd..2f616961460f9f3f273d6df305b974eb4da24b22 100644
--- a/resources/views/artefact/view.blade.php
+++ b/resources/views/artefact/view.blade.php
@@ -10,49 +10,74 @@
 
 
 @section('content')
-    <div class="jumbotron">
-        <div class="text-center">
-            <h1>Artefact</h1>
-            <p>
-                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-                Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
-                Fusce tellus odio, dapibus id fermentum quis, suscipit id erat.
-                Morbi scelerisque luctus velit. Vivamus porttitor turpis ac leo.
-                Morbi scelerisque luctus velit.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
-        </div>
+    <div class="container py-4">
+        @if (is_null($artefact))
+            <div class="text-center">
+                <h2>Currently no artefacts available.</h2>
+            </div>
+        @else
+            <div class="artefact-area mb-5">
+                <div class="card">
+                    <a href="#imageModal" data-toggle="modal">
+                        <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto alt="book_cover">
+                    </a>
+                    <div class="card-cus-bottom">
+                        <div class="col-xs-2 float-left left_panel_info">
+                            <h5 class="artefact-name">{{$artefact->name}}</h5>
+                            <h6 class="artefact-author">{{$artefact->author}}</h6>
+                        </div>
+                        <div class="col-xs-2 float-right right_panel_info">
+                            <div class="float-left">
+                                <button type="button" class="btn btn-primary button-image inter_info" data-toggle="modal" data-target="#informationModal"></button>
+                            </div>
+                            <div class="float-right text-center">
+                                @if ($artefact->favourite)
+                                    <a href="{{  action('ArtefactController@unlike', ['id' => $artefact->id]) }}">
+                                        <button id="like_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                                    </a>
+                                @else
+                                    <a href="{{  action('ArtefactController@like', ['id' => $artefact->id]) }}">
+                                        <button id="like_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_like"></button>
+                                    </a>
+                                @endif
+                                <h6 class="artefact-likes">{{$artefact->likes}}</h6>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        @endif
     </div>
 
-    @if (is_null($artefact))
-        <div class="text-center">
-            <h2>Currently no artefacts available.</h2>
+    <!-- Image modal -->
+    <div class="modal image-modal fade" id="imageModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+            <div class="modal-content">
+                <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto alt="book_cover">
+            </div>
         </div>
-    @else
-        <div class="artefact-area mb-5">
-            <div class="card">
-                <div class="card-body">
-                    <h2 class="text-uppercase card-title">{{$artefact->name}}</h2>
-                    <h5>{{$artefact->author}}</h5>
-                    <h6 class="card-subtitle mb-2 text-muted">{{$artefact->year}}, {{$artefact->pages}} pages</h6>
-                    <p class="card-text">
-                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-                        Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
-                        Fusce tellus odio, dapibus id fermentum quis, suscipit id erat.
-                        Morbi scelerisque luctus velit. Vivamus porttitor turpis ac leo.
-                        Morbi scelerisque luctus velit.
-                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                    </p>
-                    <p>
-                        @if (count($artefact->metadata) > 0)
-                            <a href="{{ url('/detail/' . $artefact->id) }}">Notes related to artefact</a>
-                        @endif
-                    </p>
+    </div>
+
+    <!-- Information modal -->
+    <div class="modal fade" id="informationModal" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">{{$artefact->name}} - {{$artefact->author}}</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    Addition information about book.
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                 </div>
             </div>
         </div>
-    @endif
-
-
-
+    </div>
 @endsection
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 5b7b78a28c0f0ffd55420b7e314c295b75f0fec9..913594bc49fc453857df57f79e02807a1d89e5c1 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -2,78 +2,94 @@
 
 @section('title', 'Login')
 
-@section('breadcrumb')
+{{--@section('breadcrumb')
     <li class="breadcrumb-item active" aria-current="page">Login</li>
-@endsection
+@endsection--}}
 
 @section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">{{ __('Login') }}</div>
-
-                <div class="card-body">
-                    <form method="POST" action="{{ route('login') }}">
-                        @csrf
-
-                        <div class="form-group row">
-                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
+    <div class="vertical-center">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-sm-12">
+                    <div class="auth">
+                        <div class="card">
+                            {{--<div class="card-header">{{ __('Login') }}</div>--}}
 
-                            <div class="col-md-6">
-                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
-
-                                @error('email')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
+                            <div class="card-body">
+                                <form method="POST" action="{{ route('login') }}">
+                                    @csrf
 
-                        <div class="form-group row">
-                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
+                                    <label for="logo" class="col-md-12 row kaplicky justify-content-center" >{{ __('kaplicky') }}</label>
 
-                            <div class="col-md-6">
-                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
+                                    {{--<label for="email" class="col-md-8 col-form-label text-md-left row justify-content-center">
+                                        {{ __('general.email') }}
+                                    </label>
+                                    <div class="col-md-4 offset-md-12 row justify-content-center">
+                                        <input id="email" type="email"
+                                               class="form-control text2 @error('email') is-invalid @enderror"
+                                               name="email"
+                                               value="{{ old('email') }}" --}}{{--required autocomplete="email" autofocus--}}{{-->
+                                    </div>--}}
+                                    <div class="form-group row ">
+                                        <label for="email" class="col-md-4 col-form-label text-md-right text">
+                                            {{ __('general.email') }}
+                                        </label>
 
-                                @error('password')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
+                                        <div class="col-md-6">
+                                            <input id="email" type="email @error('email') is-invalid @enderror"
+                                                   class="form-control text2 @error('email') is-invalid @enderror"
+                                                   name="email"
+                                                   value="{{ old('email') }}" {{--required autocomplete="email" autofocus--}}>
+                                        </div>
+                                    </div>
 
-                        <div class="form-group row">
-                            <div class="col-md-6 offset-md-4">
-                                <div class="form-check">
-                                    <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
+                                    <div class="form-group row">
+                                        <label for="password" class="col-md-4 col-form-label text-md-right text">
+                                            {{ __('general.password') }}
+                                        </label>
 
-                                    <label class="form-check-label" for="remember">
-                                        {{ __('Remember Me') }}
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
+                                        <div class="col-md-6">
+                                            <input id="password" type="password"
+                                                   class="form-control text2 @error('password') is-invalid @enderror"
+                                                   name="password" {{--required autocomplete="current-password"--}}>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col-md-12">
+                                            <button type="submit" class="btn button-square">
+                                                {{ __('general.join') }}
+                                            </button>
+                                            {{-- @if (Route::has('password.request'))
+                                                <a class="btn btn-link" href="{{ route('password.request') }}">
+                                                    {{ __('Forgot Your Password?') }}
+                                                </a>
+                                            @endif --}}
+                                        </div>
+                                    </div>
 
-                        <div class="form-group row mb-0">
-                            <div class="col-md-8 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
-                                    {{ __('Login') }}
-                                </button>
+                                    @if($errors->any())
+                                        <div class="row">
+                                            <div class="col-md-12">
+                                                <div class="text white pin-left" role="alert">
+                                                    <div class="al">
+                                                        @error('email')
+                                                        <p class="text">{{ $message }}</p>
+                                                        @enderror
+                                                        @error('password')
+                                                        <p class="text">{{ $message }}</p>
+                                                        @enderror
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    @endif
 
-                                @if (Route::has('password.request'))
-                                    <a class="btn btn-link" href="{{ route('password.request') }}">
-                                        {{ __('Forgot Your Password?') }}
-                                    </a>
-                                @endif
+                                </form>
                             </div>
                         </div>
-                    </form>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
 @endsection
diff --git a/resources/views/auth/passwords/confirm.blade.php b/resources/views/auth/passwords/confirm.blade.php
index cba67990b798a193fe10c6880262b73bf0bb1cdf..6459497cc51ee9e098937205d1e38a7c2b3f0ef8 100644
--- a/resources/views/auth/passwords/confirm.blade.php
+++ b/resources/views/auth/passwords/confirm.blade.php
@@ -3,15 +3,16 @@
 @section('title', 'Confirm')
 
 @section('breadcrumb')
-    <li class="breadcrumb-item active" aria-current="page">Confirm</li>
+    <li class="breadcrumb-item active" aria-current="page">Confirm Password</li>
 @endsection
 
 @section('content')
 <div class="container">
     <div class="row justify-content-center">
         <div class="col-md-8">
+            <div class="auth">
             <div class="card">
-                <div class="card-header">{{ __('Confirm Password') }}</div>
+                {{--<div class="card-header">{{ __('Confirm Password') }}</div>--}}
 
                 <div class="card-body">
                     {{ __('Please confirm your password before continuing.') }}
@@ -35,7 +36,7 @@
 
                         <div class="form-group row mb-0">
                             <div class="col-md-8 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
+                                <button type="submit" class="btn button-square">
                                     {{ __('Confirm Password') }}
                                 </button>
 
@@ -49,6 +50,7 @@
                     </form>
                 </div>
             </div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index edd5b2f5497e625079b8f4b2e05101b11ebf72ea..1f418bdfa4a756aa5071b2a6f3905148e2ab7b28 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -3,15 +3,16 @@
 @section('title', 'Reset')
 
 @section('breadcrumb')
-    <li class="breadcrumb-item active" aria-current="page">Reset</li>
+    <li class="breadcrumb-item active" aria-current="page">Reset Password</li>
 @endsection
 
 @section('content')
 <div class="container">
     <div class="row justify-content-center">
+        <div class="auth">
         <div class="col-md-8">
             <div class="card">
-                <div class="card-header">{{ __('Reset Password') }}</div>
+                {{--<div class="card-header">{{ __('Reset Password') }}</div>--}}
 
                 <div class="card-body">
                     @if (session('status'))
@@ -39,7 +40,7 @@
 
                         <div class="form-group row mb-0">
                             <div class="col-md-6 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
+                                <button type="submit" class="btn button-square">
                                     {{ __('Send Password Reset Link') }}
                                 </button>
                             </div>
@@ -48,6 +49,7 @@
                 </div>
             </div>
         </div>
+        </div>
     </div>
 </div>
 @endsection
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
index 5a25764778403017ceed3cc0dde3e9d492f1518c..37e9d00ca26d798a8e30505cb7331936729a3a2a 100644
--- a/resources/views/auth/passwords/reset.blade.php
+++ b/resources/views/auth/passwords/reset.blade.php
@@ -3,15 +3,16 @@
 @section('title', 'Reset')
 
 @section('breadcrumb')
-    <li class="breadcrumb-item active" aria-current="page">Reset</li>
+    <li class="breadcrumb-item active" aria-current="page">Reset Password</li>
 @endsection
 
 @section('content')
 <div class="container">
     <div class="row justify-content-center">
         <div class="col-md-8">
+            <div class="auth">
             <div class="card">
-                <div class="card-header">{{ __('Reset Password') }}</div>
+                {{--<div class="card-header">{{ __('Reset Password') }}</div>--}}
 
                 <div class="card-body">
                     <form method="POST" action="{{ route('password.update') }}">
@@ -57,7 +58,7 @@
 
                         <div class="form-group row mb-0">
                             <div class="col-md-6 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
+                                <button type="submit" class="btn button-square">
                                     {{ __('Reset Password') }}
                                 </button>
                             </div>
@@ -65,6 +66,7 @@
                     </form>
                 </div>
             </div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
index e879a1b8b4c6395540c3c5d5999145a9c73fb341..12f34c97f1aaa104dcadf5b0ee5e6f3c604970bb 100644
--- a/resources/views/auth/register.blade.php
+++ b/resources/views/auth/register.blade.php
@@ -2,82 +2,106 @@
 
 @section('title', 'Register')
 
-@section('breadcrumb')
+{{--@section('breadcrumb')
     <li class="breadcrumb-item active" aria-current="page">Register</li>
-@endsection
+@endsection--}}
 
 @section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">{{ __('Register') }}</div>
-
-                <div class="card-body">
-                    <form method="POST" action="{{ route('register') }}">
-                        @csrf
-
-                        <div class="form-group row">
-                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
-
-                                @error('name')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
-
-                                @error('email')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
-
-                                @error('password')
-                                    <span class="invalid-feedback" role="alert">
-                                        <strong>{{ $message }}</strong>
-                                    </span>
-                                @enderror
-                            </div>
-                        </div>
-
-                        <div class="form-group row">
-                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
-                            </div>
-                        </div>
-
-                        <div class="form-group row mb-0">
-                            <div class="col-md-6 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
-                                    {{ __('Register') }}
-                                </button>
+    <div class="vertical-center">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-md-8">
+                    <div class="auth">
+                        <div class="card">
+                            {{--<div class="card-header">{{ __('Register') }}</div>--}}
+
+                            <div class="card-body">
+                                <form method="POST" action="{{ route('register') }}">
+                                    @csrf
+
+                                    <label for="logo" class="col-md-4 kaplicky">{{ __('kaplicky') }}</label>
+                                    <div class="form-group row">
+                                        <label for="name"
+                                               class="col-md-4 col-form-label text text-md-right">{{ __('name') }}</label>
+
+                                        <div class="col-md-6">
+                                            <input id="name" type="text"
+                                                   class="form-control text2 @error('name') is-invalid @enderror"
+                                                   name="name"
+                                                   value="{{ old('name') }}" {{--required autocomplete="name" autofocus--}}>
+
+                                        </div>
+                                    </div>
+
+                                    <div class="form-group row">
+                                        <label for="email"
+                                               class="col-md-4 col-form-label text text-md-right">{{ __('e-mail') }}</label>
+
+                                        <div class="col-md-6">
+                                            <input id="email" type="email @error('email') is-invalid @enderror"
+                                                   class="form-control text2 @error('email') is-invalid @enderror"
+                                                   name="email"
+                                                   value="{{ old('email') }}" {{--required autocomplete="email"--}}>
+
+                                        </div>
+                                    </div>
+
+                                    <div class="form-group row">
+                                        <label for="password"
+                                               class="col-md-4 col-form-label text text-md-right">{{ __('password') }}</label>
+
+                                        <div class="col-md-6">
+                                            <input id="password" type="password"
+                                                   class="form-control text2 @error('password') is-invalid @enderror"
+                                                   name="password" {{--required autocomplete="new-password"--}}>
+
+                                        </div>
+                                    </div>
+
+                                    <div class="form-group row">
+                                        <label for="password-confirm"
+                                               class="col-md-4 col-form-label text text-md-right">{{ __('confirm password') }}</label>
+
+                                        <div class="col-md-6">
+                                            <input id="password-confirm" type="password" class="form-control text2"
+                                                   name="password_confirmation" {{--required autocomplete="new-password"--}}>
+                                        </div>
+                                    </div>
+
+                                    <div class="row">
+                                        <div class="col-md-12">
+                                            <button type="submit" class="btn button-square">
+                                                {{ __('general.register') }}
+                                            </button>
+                                        </div>
+                                    </div>
+
+                                    @if($errors->any())
+                                        <div class="row">
+                                            <div class="col-sm-12">
+                                                <div class="text white pin-left" role="alert">
+                                                    <div class="al">
+                                                        @error('name')
+                                                        <p class="text">{{ $message }}</p>
+                                                        @enderror
+                                                        @error('email')
+                                                        <p class="text">{{ $message }}</p>
+                                                        @enderror
+                                                        @error('password')
+                                                        <p class="text">{{ $message }}</p>
+                                                        @enderror
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    @endif
+
+                                </form>
                             </div>
                         </div>
-                    </form>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
 @endsection
diff --git a/resources/views/auth/verify.blade.php b/resources/views/auth/verify.blade.php
index 1a22045f1541e74577fd41db21f02d5c2bc3bc0b..93f5cf63c5610b10f588bb65624994808d5399d7 100644
--- a/resources/views/auth/verify.blade.php
+++ b/resources/views/auth/verify.blade.php
@@ -3,15 +3,16 @@
 @section('title', 'Verify')
 
 @section('breadcrumb')
-    <li class="breadcrumb-item active" aria-current="page">Verify</li>
+    <li class="breadcrumb-item active" aria-current="page">Verify Your Email Address</li>
 @endsection
 
 @section('content')
 <div class="container">
     <div class="row justify-content-center">
         <div class="col-md-8">
+            <div class="auth">
             <div class="card">
-                <div class="card-header">{{ __('Verify Your Email Address') }}</div>
+                {{--<div class="card-header">{{ __('Verify Your Email Address') }}</div>--}}
 
                 <div class="card-body">
                     @if (session('resent'))
@@ -24,10 +25,11 @@
                     {{ __('If you did not receive the email') }},
                     <form class="d-inline" method="POST" action="{{ route('verification.resend') }}">
                         @csrf
-                        <button type="submit" class="btn btn-link p-0 m-0 align-baseline">{{ __('click here to request another') }}</button>.
+                        <button type="submit" class="btn button-square">{{ __('click here to request another') }}</button>.
                     </form>
                 </div>
             </div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/resources/views/categories/index.blade.php b/resources/views/categories/index.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..6496501c1f8653f20c0c7a6271326305d1c6eebc
--- /dev/null
+++ b/resources/views/categories/index.blade.php
@@ -0,0 +1,56 @@
+@extends('layouts.app')
+
+@section('title', 'Categories')
+
+@section('content')
+    <div class="container">
+        @if(isset($user))
+
+            <div class="cat-main-div" {{--onclick="resetEnter()"--}}>
+                <div class="d-flex flex-wrap justify-content-around btn-group" data-toggle="buttons">
+                    @for($k = 0; $k < $count;$k++)
+                        <div class="d-flex col-sm-12 col-md-6 col-lg-4 col-xl-3">
+                            <a id="cat-but-id{{$categoryNames[$k]->id}}"{{--href="{{ url('/category/' . $categoryNames[$k]->id) }}"--}}
+                                class="btn btn-dark cat-tile w-100 mt-4">
+                                {{$categoryNames[$k]->nameCZ}}
+                            </a>
+                        </div>
+                    @endfor
+                </div>
+            </div>
+        @else
+            <ul class="list-group">
+                <li class="list-group-item">
+                    <h3>Not found the USER in the database with number id {{$user->id}}!</h3>
+                </li>
+            </ul>
+        @endif
+    </div>
+    <div class="cat-wrapper">
+        <a class="btn button-square cat-enter-butt" onclick="test()" role="button">enter</a>
+    </div>
+    <div class="row justify-content-md-center">
+        <div class="col-md-auto">
+{{--
+            <a class="btn button-square cat-enter-butt" onclick="test()" role="button">enter</a>
+--}}
+        </div>
+    </div>
+    <script>
+        function test()
+        {
+            var btns = $(".btn-dark:not(:disabled):not(.disabled).active");
+            if(btns.length > 0)
+            {
+                var text = "";
+                for(var i = 0; i < btns.length;i++)
+                {
+                    var idE =  btns[i].id;
+                    var num = idE.substring(10, idE.length);
+                    text += num + ",";
+                }
+                window.location.href = "{{url('/category/multi/')}}/" + text;
+            }
+        }
+    </script>
+@endsection
diff --git a/resources/views/charts/index.blade.php b/resources/views/charts/index.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..1b3050d316845a9199751683623a578f32537ebc
--- /dev/null
+++ b/resources/views/charts/index.blade.php
@@ -0,0 +1,63 @@
+@extends('layouts.app')
+
+@section('title', 'Charts')
+
+@section('content')
+    <div class="container">
+        @if(isset($artefacts))
+            @if(count($artefacts) >= 1)
+                <div class="fav-cat-mybooks">
+                    <h1>Charts</h1>
+                </div>
+                @foreach($artefacts as $artefact)
+                    <div class="artefacts-area mb-5">
+                        <div class="card">
+                            <div class="container card-cus-bottom">
+                                <div class="d-flex flex-row row-list">
+                                    <div class="p-1 flex-fill bd-highlight left_panel_info">
+                                        <a href="{{ action('ArtefactController@view', ['id' => $artefact->id]) /*url('/artefact/' . $artefact->id) */}}">
+                                            <h5 class="card-title highlight-white">{{$artefact->name}}</h5>
+                                        </a>
+                                        <h6 class="card-title ">{{$artefact->author}}</h6>
+
+                                    </div>
+                                    <div class="p-1 flex-fill bd-highlight float-center">
+                                        <div class="text-center right_panel_info">
+
+                                            <div class="charts float-center">
+                                                @if (!$artefact->favourite)
+                                                    <a href="{{  action('ArtefactController@like', ['id' => $artefact->id]) }}">
+                                                        <button id="like_butt_{{$artefact->id}}" type="button"
+                                                                class="btn btn-primary button-image inter_like"></button>
+                                                    </a>
+                                                @else
+                                                    <a href="{{  action('ArtefactController@unlike', ['id' => $artefact->id]) }}">
+                                                        <button id="like_butt_{{$artefact->id}}" type="button"
+                                                                class="btn btn-primary button-image inter_like_filled"></button>
+                                                    </a>
+                                                @endif
+                                                <h6 class="artefact-likes">{{$artefact->likes}}</h6>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
+            @else
+                <ul class="list-group">
+                    <li class="list-group-item">
+                        <h3>No artefacts were added!</h3>
+                    </li>
+                </ul>
+            @endif
+        @else
+            <ul class="list-group">
+                <li class="list-group-item">
+                    <h3>Not found the USER in the database with number id {{$user->id}}!</h3>
+                </li>
+            </ul>
+        @endif
+    </div>
+@endsection
diff --git a/resources/views/components/books.blade.php b/resources/views/components/books.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..947df669c84b6d08db9fc447f994f90ee2323187
--- /dev/null
+++ b/resources/views/components/books.blade.php
@@ -0,0 +1,150 @@
+@foreach($artefacts as $artefact)
+<div class="container books-component">
+    <div class="row mt-5">
+
+        <div class="col-md-6 book-area">
+            @if (!is_null($artefact))
+                <div class="artefact-area">
+                    <div class="card">
+                        <a href="#imageModal" data-toggle="modal">
+                            <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto alt="book_cover">
+                        </a>
+                    </div>
+                </div>
+            @endif
+        </div>
+
+        <div class="col-md-6 info-area">
+            <div class="artefact-info">
+                <h3 class="switch-view"><a onclick="switchView()">notes</a></h3>
+                <h3 class="artefact-name">{{$artefact->name}}</h3>
+                <h4 class="artefact-author">{{$artefact->author}}</h4>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt, ex id blandit placerat, dolor nibh venenatis dui, nec malesuada odio sem a leo. Nunc vulputate augue neque.
+                    Donec pulvinar sollicitudin arcu eget sagittis. Sed auctor, enim vel facilisis sodales, felis tellus rutrum quam, ac feugiat leo mauris ac purus. Nam placerat sed risus ut suscipit.
+                    Sed rutrum arcu eget mi fermentum ultrices. Donec egestas volutpat eros, ut tincidunt dolor pulvinar vitae.
+                </p>
+                <p>
+                    Curabitur sem elit, imperdiet ac laoreet vitae, rhoncus quis risus. Suspendisse varius dolor sem, at egestas massa suscipit non.
+                    Morbi sit amet dictum metus, sit amet sollicitudin nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis leo convallis aliquam scelerisque.
+                    Praesent vulputate porttitor quam at egestas. Proin eget orci ligula. Aenean malesuada, eros vitae convallis sagittis, neque leo ullamcorper ante, eu ultricies justo justo in lacus.
+                </p>
+            </div>
+
+            <div class="artefact-notes">
+                <button type="button" class="btn btn-primary button-image inter_info" onclick="switchView()"></button>
+                <h3 class="artefact-name">{{$artefact->name}}</h3>
+                <h4 class="artefact-author">{{$artefact->author}}</h4>
+                @if(count($artefact->metadata) > 0)
+                    @foreach($artefact->metadata as $meta)
+                        <div  id="row_{{$meta->id}}" class="row text-page">
+                            <div class="pin-horizontal">
+                                <div class="metadata">
+                                    <a href="#meta_{{$meta->id}}" data-toggle="collapse" data-target="#meta_{{$meta->id}}" onclick="openNote('#row_{{$meta->id}}')">
+                                        <span>page {{$meta->page}}</span>
+                                    </a>
+                                    <a href="#meta_{{$meta->id}}" class="arrow-down" data-toggle="collapse" data-target="#meta_{{$meta->id}}" onclick="openNote('#row_{{$meta->id}}')"></a>
+                                </div>
+                            </div>
+                            <div id="meta_{{$meta->id}}" class="metadata-text collapse">
+                                <p>
+                                    {{$meta->noteEN}}
+                                </p>
+                                <div class="text-center">
+                                    @if ($meta->favourite)
+                                        <a href="{{  action('DetailsController@unlike', ['id' => $meta->id]) }}">
+                                            <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                                        </a>
+                                    @else
+                                        <a href="{{  action('DetailsController@like', ['id' => $meta->id]) }}">
+                                            <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like"></button>
+                                        </a>
+                                    @endif
+                                </div>
+                            </div>
+                        </div>
+
+                    @endforeach
+                @else
+                    <h2>No metadata yet!</h2>
+                @endif
+            </div>
+        </div>
+
+        <div class="book-area col-md-12">
+            <div class="card-cus-bottom">
+                <a class="book-arrow book-arrow-left artefact-link previous-artefact {{$artefacts->onFirstPage() ? "invisible" : "visible"}}" href="{{$artefacts->previousPageUrl()}}"></a>
+                <div class="likes offset-7">
+                    @if ($artefact->favourite)
+                        <a href="{{  action('ArtefactController@unlike', ['id' => $artefact->id]) }}">
+                            <button id="like_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                        </a>
+                    @else
+                        <a href="{{  action('ArtefactController@like', ['id' => $artefact->id]) }}">
+                            <button id="like_butt_{{$artefact->id}}" type="button" class="btn btn-primary button-image inter_like"></button>
+                        </a>
+                    @endif
+                    <h6 class="artefact-likes">{{$artefact->likes}}</h6>
+                </div>
+                <a class="book-arrow book-arrow-right artefact-link next-artefact {{$artefacts->hasMorePages() ? "visible" : "invisible"}}" href="{{$artefacts->nextPageUrl()}}"></a>
+            </div>
+        </div>
+    </div>
+</div>
+@endforeach
+
+<!-- Image modal -->
+<div class="modal image-modal fade" id="imageModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+        <div class="modal-content">
+            <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto alt="book_cover">
+        </div>
+    </div>
+</div>
+
+<script>
+    function switchView()
+    {
+        let info = $('.artefact-info');
+        let notes = $('.artefact-notes');
+
+        if (notes.css('display') === 'none')
+        {
+            notes.css('display', 'block');
+            info.css('display', 'none');
+
+            let parent_width = notes.width();
+
+            $(".metadata").each(function() {
+                let metadata = $(this);
+                let width = metadata.width();
+
+                metadata.css("margin-left", (parent_width / 2)  - width);
+            });
+        }
+        else
+        {
+            notes.css('display', 'none');
+            info.css('display', 'block');
+        }
+    }
+
+    function openNote(element)
+    {
+        let metadata = $(element);
+        let showed = metadata.find(".metadata-text").hasClass('show');
+
+        if (showed === false)
+        {
+            metadata.find('.pin-horizontal').addClass("white-pin");
+        }
+        else
+        {
+            metadata.find('.pin-horizontal').removeClass("white-pin");
+        }
+
+    }
+</script>
diff --git a/resources/views/detail/index.blade.php b/resources/views/detail/index.blade.php
index 80043f3330f19a7193b86fd579289c1449adc2ad..1a812bb0b1a53694d7d0732f36b5c55325a1e59a 100644
--- a/resources/views/detail/index.blade.php
+++ b/resources/views/detail/index.blade.php
@@ -2,55 +2,71 @@
 
 @section('title', 'Detail')
 
-@section('breadcrumb')
-    <li class="breadcrumb-item" aria-current="page"><a href="{{ url('/') }}">Home</a></li>
-    <li class="breadcrumb-item" aria-current="page"><a href="{{ url('/artefact') }}">Artefacts</a></li>
-    <li class="breadcrumb-item" aria-current="page"><a href="{{ url('/artefact/' . $id) }}">Artefact</a></li>
-    <li class="breadcrumb-item active" aria-current="page">Notes</li>
-@endsection
-
 @section('content')
-    <div class="jumbotron">
-        <div class="text-center">
-            @if (isset($arrArtefact))
-                <h1>Notes list</h1>
-                <p>
-                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-                    Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
-                    Fusce tellus odio, dapibus id fermentum quis, suscipit id erat.
-                    Morbi scelerisque luctus velit. Vivamus porttitor turpis ac leo.
-                    Morbi scelerisque luctus velit.
-                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                </p>
+    <div class="container">
+        <div class="metadata-area">
+            <div class="text-center mt-5">
+                <h2>notes</h2>
+            </div>
+            <span class="arrow-down"></span>
+
+            @if(!empty($metadata) || count($metadata) > 0)
+                @foreach($metadata as $meta)
+                    <div  id="row_{{$meta->id}}" class="row text-page">
+                        <div class="pin-horizontal">
+                            <div class="metadata">
+                                <span>page {{$meta->page}}</span>
+                                <a href="#meta_{{$meta->id}}" class="arrow-down" data-toggle="collapse" data-target="#meta_{{$meta->id}}" onclick="openNote('#row_{{$meta->id}}')"></a>
+                            </div>
+                        </div>
+                        <div id="meta_{{$meta->id}}" class="metadata-text collapse">
+                            <p>
+                                {{$meta->noteEN}}
+                            </p>
+                            <div class="artefact-info">
+                                <div class="artefact-name">
+                                    {{$meta->artefact->name}}
+                                </div>
+                                <div class="artefact-author">
+                                    {{$meta->artefact->author}}
+                                </div>
+                                <div class="text-center">
+                                    @if ($meta->favourite)
+                                        <a href="{{  action('DetailsController@unlike', ['id' => $meta->id]) }}">
+                                            <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                                        </a>
+                                    @else
+                                        <a href="{{  action('DetailsController@like', ['id' => $meta->id]) }}">
+                                            <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like"></button>
+                                        </a>
+                                    @endif
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
             @else
-                <h2>Given artefact does not exist!</h2>
+                <div class="text-center mt-5">
+                    <h2>No metadata!</h2>
+                </div>
             @endif
         </div>
     </div>
-    @if(isset($arrArtefact))
-        <div class="artefact-area text-center mb-4">
-            <h2>{{$arrArtefact->name}}</h2>
-            <h4>{{$arrArtefact->author}}, {{$arrArtefact->year}}</h4>
-            <h5 class="text-muted">{{$arrArtefact->pages}} pages, <i class="fas fa-thumbs-up"></i> {{$likes}}</h5>
-        </div>
-        @if(count($metadata) > 0)
-            <ul class="list-group">
-            @foreach($metadata as $meta)
-                <div class="note-area mb-3">
-                    <li class="list-group-item">
-                        On {{$meta->page}} page:<br>
-                        {{$meta->noteCZ}}<br>
-                        {{$meta->noteEN}}<br>
-                    </li>
-                </div>
-            @endforeach
-            </ul>
-        @else
-            <ul class="list-group">
-                <li class="list-group-item">
-                    <h3>No notes for this BOOK were found!</h3>
-                </li>
-            </ul>
-        @endif
-    @endif
+
+    <script>
+        function openNote(element) {
+            let metadata = $(element);
+            let showed = metadata.find(".metadata-text").hasClass('show');
+
+            if (showed === false)
+            {
+                metadata.find('.pin-horizontal').addClass("white-pin");
+            }
+            else
+            {
+                metadata.find('.pin-horizontal').removeClass("white-pin");
+            }
+
+        }
+    </script>
 @endsection
diff --git a/resources/views/email/register.blade.php b/resources/views/email/register.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..9b3604b9634432859d39f906c986e2cd000836e8
--- /dev/null
+++ b/resources/views/email/register.blade.php
@@ -0,0 +1,15 @@
+@component('mail::message')
+# Register email
+
+Hello and welcome to our page. This email was sent to you due to your registration on our page.
+To activate your account, please click the link below.<br>
+
+@component('mail::button', ['url' => $stringHash])
+Activate
+@endcomponent
+
+We much appreciate your initiative.
+
+Thanks,<br>
+{{ config('app.name') }}
+@endcomponent
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..55160e6a627fb898cc0049228a5729b46050cde9
--- /dev/null
+++ b/resources/views/errors/404.blade.php
@@ -0,0 +1,15 @@
+@extends('layouts.app')
+
+@section('content')
+
+    <div class="vertical-center">
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-12">
+                    <span class="error">404 | {{ __('general.not_found') }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+@endsection
diff --git a/resources/views/errors/500.blade.php b/resources/views/errors/500.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..af149bed39a28d4ad1eb568a161c04917a2cab72
--- /dev/null
+++ b/resources/views/errors/500.blade.php
@@ -0,0 +1,15 @@
+@extends('layouts.app')
+
+@section('content')
+
+    <div class="vertical-center">
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-12">
+                    <span class="error">500 | {{ __('general.server_error') }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+@endsection
diff --git a/resources/views/favartefacts/index.blade.php b/resources/views/favartefacts/index.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..670d533732cd8384c8d3a31b5364d23c927c3b76
--- /dev/null
+++ b/resources/views/favartefacts/index.blade.php
@@ -0,0 +1,80 @@
+@extends('layouts.app')
+
+@section('title', 'Favorite artefacts')
+
+@section('content')
+    <div class="container">
+        @if(isset($artefacts))
+            @if(count($artefacts) >= 1)
+                <div class="fav-cat-mybooks">
+                    <h1>My books</h1>
+                </div>
+                @foreach($artefacts as $artefact)
+                    <div class="artefacts-area mb-5">
+                        <div class="card">
+                        {{--<svg class="bd-placeholder-img card-img-top" width="100%" height="180" src="{{asset('images/artefacts/book_cover_01.jpg')}}" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>{{$artefact[0]->name}}</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="45%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>--}}
+                        <a href="{{ url('/artefact/' . $artefact->id) }}">
+                            <img class="card-img-top" src="{{asset('images/artefacts/book_cover_01.jpg')}}" width="100%" height=auto>
+                        </a>
+                        <div class="container card-cus-bottom">
+                            <div class="d-flex flex-row row-list">{{--<div class="flex-row row-list">--}}
+                                <div class="p-1 flex-fill bd-highlight left_panel_info">{{--<div class="col-xs-2 float-left left_panel_info">--}}
+                                    <h5 class="card-title ">{{$artefact->name}}</h5>
+                                    <h6 class="card-title">{{$artefact->author}}</h6>
+                                </div>
+                                <div class="p-1 flex-fill bd-highlight float-right">{{--<div class="col-xs-2 float-right right_panel_info">--}}
+                                    <div class="text-right right_panel_info">{{--<div class="float-right text-center">--}}
+                                        <div class="float-left">
+                                            <button id="info_butt_{{$artefact->id}}" type="button" class="btn btn-primary float-left button-image inter_info"></button>
+                                        </div>
+                                        <div class="fav-cat-likes-t float-right">
+                                            <form method="POST" action="{{ url('/artefact/like/' . $artefact->id) }}">
+                                                @csrf
+                                                <button id="like_butt_{{$artefact->id}}" onclick="myFunction({{$artefact->id}}, 1)" type="submit" class="btn btn-primary button-image inter_like"></button>
+                                            </form>
+                                            <form method="POST" action="{{ url('/artefact/unlike/' . $artefact->id) }}">
+                                                @csrf
+                                                <button id="like_butt2_{{$artefact->id}}" onclick="myFunction({{$artefact->id}}, 0)" type="submit" class="btn btn-primary button-image inter_like_filled"></button>
+                                            </form>
+                                            <span class="likes_text">
+                                                <h6>{{$artefact->likes}}</h6>
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
+            @else
+                <ul class="list-group">
+                    <li class="list-group-item fav-cat-nofav">
+                        <h3>No favorites were added!</h3>
+                    </li>
+                </ul>
+            @endif
+        @else
+            <ul class="list-group">
+                <li class="list-group-item">
+                    <h3>Not found the USER in the database with number id {{$user->id}}!</h3>
+                </li>
+            </ul>
+        @endif
+	</div>
+    <script>
+        function myFunction(id, type)
+        {
+            if(type === 1)
+            {
+                $('#like_butt_' + id).css('display', "none");
+                $('#like_butt2_' + id).css('display', "inline");
+            }
+            else
+            {
+                $('#like_butt_' + id).css('display', "inline");
+                $('#like_butt2_' + id).css('display', "none");
+            }
+        }
+    </script>
+@endsection
diff --git a/resources/views/favmetadata/index.blade.php b/resources/views/favmetadata/index.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..5e33774d4a08254a4c8cb9f90b9c12e9a7726c48
--- /dev/null
+++ b/resources/views/favmetadata/index.blade.php
@@ -0,0 +1,67 @@
+@extends('layouts.app')
+
+@section('title', 'Favorite metadata')
+
+@section('breadcrumb')
+    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
+    <li class="breadcrumb-item active" aria-current="page">Favorite metadata</li>
+@endsection
+
+@section('content')
+    <div class="container">
+        <div class="metadata-area">
+            <span class="arrow-down"></span>
+
+            @if(count($metadata) > 0)
+                @foreach($metadata as $meta)
+                    <div  id="row_{{$meta->id}}" class="row text-page">
+                        <div class="pin-horizontal">
+                            <div class="metadata">
+                                <a href="#meta_{{$meta->id}}" data-toggle="collapse" data-target="#meta_{{$meta->id}}" onclick="openNote('#row_{{$meta->id}}')">
+                                    <span>page {{$meta->page}}</span>
+                                </a>
+                                <a href="#meta_{{$meta->id}}" class="arrow-down" data-toggle="collapse" data-target="#meta_{{$meta->id}}" onclick="openNote('#row_{{$meta->id}}')"></a>
+                            </div>
+                        </div>
+                        <div id="meta_{{$meta->id}}" class="metadata-text collapse">
+                            <p>
+                                {{$meta->noteEN}}
+                            </p>
+                            <div class="artefact-info">
+                                <div class="artefact-name">
+                                    {{$meta->artefact->name}}
+                                </div>
+                                <div class="artefact-author">
+                                    {{$meta->artefact->author}}
+                                </div>
+                                <div class="text-center">
+                                    <a href="{{  action('FavoriteMetadataController@unlike', ['id' => $meta->id]) }}">
+                                        <button id="like_butt_{{$meta->id}}" type="button" class="btn btn-primary button-image inter_like_filled"></button>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
+            @else
+                <h2>No favourite metadata yet!</h2>
+            @endif
+        </div>
+    </div>
+
+    <script>
+        function openNote(element) {
+            let metadata = $(element);
+            let showed = metadata.find(".metadata-text").hasClass('show');
+
+            if (showed === false)
+            {
+                metadata.find('.pin-horizontal').addClass("white-pin");
+            }
+            else
+            {
+                metadata.find('.pin-horizontal').removeClass("white-pin");
+            }
+        }
+    </script>
+@endsection
diff --git a/resources/views/inc/navbar.blade.php b/resources/views/inc/navbar.blade.php
index 0ad863b2f70de3a274705032da2649c438845205..5fab0e50eb0268f2f5b5b5473bbf51c6943c79a1 100644
--- a/resources/views/inc/navbar.blade.php
+++ b/resources/views/inc/navbar.blade.php
@@ -10,12 +10,6 @@
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <!-- Left Side Of Navbar -->
             <ul class="navbar-nav mr-auto">
-
-            </ul>
-
-            <!-- Right Side Of Navbar -->
-            <ul class="navbar-nav ml-auto">
-                <!-- Authentication Links -->
                 @guest
                     <li class="nav-item">
                         <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
@@ -32,6 +26,10 @@
                         </a>
 
                         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+                            <a class="dropdown-item" href="{{ url('/favartefacts') }}">Favorite artefacts</a>
+
+                            <a class="dropdown-item" href="{{ url('/favmetadata') }}">Favorite metadata</a>
+
                             <a class="dropdown-item" href="{{ route('logout') }}"
                                onclick="event.preventDefault();
                                                      document.getElementById('logout-form').submit();">
@@ -45,6 +43,12 @@
                     </li>
                 @endguest
             </ul>
+
+            <!-- Right Side Of Navbar -->
+            <ul class="navbar-nav ml-auto">
+                <!-- Authentication Links -->
+
+            </ul>
         </div>
     </div>
 </nav>
diff --git a/resources/views/inc/sidebar.blade.php b/resources/views/inc/sidebar.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..4bbd9cb6cb36f43da1a3c785eeffa11a60035459
--- /dev/null
+++ b/resources/views/inc/sidebar.blade.php
@@ -0,0 +1,161 @@
+<div id="sidebar" class="sidenav">
+    <a href="javascript:void(0)" class="arrow arrow-left" onclick="closeNav()"></a>
+    <ul style="padding-left: 0; margin-top: 5rem;">
+        @if(Request::is('login')||Request::is('register'))
+            <li class="nav-item">
+                <a class="menu-item text-headline" href="{{ url('/') }}">
+                    {{ __('general.home') }}
+                </a>
+                <a class="menu-item text-headline" href="{{ route('login') }}">
+                    {{ __('general.login') }}
+                </a>
+            </li>
+            @if (Route::has('register'))
+                <li class="nav-item">
+                    <a class="menu-item text-headline" href="{{ route('register') }}">
+                        {{ __('general.register') }}
+                    </a>
+                </li>
+            @endif
+        @else
+            <li class="nav-item">
+                <a class="menu-item text-headline" href="{{ url('/') }}">
+                    {{ __('general.home') }}
+                </a>
+
+                <a class="menu-item text-headline" href="{{ url('/categories') }}">
+                    {{ __('general.topics') }}
+                </a>
+
+                <a class="menu-item text-headline" href="{{ url('/artefact') }}">
+                    {{ __('general.artefacts') }}
+                </a>
+
+                <a class="menu-item text-headline" href="{{ url('/favartefacts') }}">
+                    {{ __('general.favourite_artefacts') }}
+                </a>
+
+                <a class="menu-item text-headline" href="{{ url('/favmetadata') }}">
+                    {{ __('general.favourite_metadata') }}
+                </a>
+
+                <a class="menu-item text-headline" href="{{ url('/charts') }}">
+                    {{ __('general.charts') }}
+                </a>
+
+            </li>
+            <li class="nav-item down">
+{{--                <a class="menu-item text-headline" href="{{ url('/czech') }}">--}}
+{{--                    {{ __('general.cs') }}--}}
+{{--                </a>--}}
+                @guest
+                @else
+                    <a class="menu-item text-headline" href="{{ route('logout') }}" onclick="
+            event.preventDefault();
+            document.getElementById('logout-form').submit();">
+                        {{ __('general.logout') }}
+                    </a>
+
+                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+                        @csrf
+                    </form>
+                @endguest
+            </li>
+        @endif
+    </ul>
+</div>
+
+<nav class="navbar navbar-expand-md navbar-light top-bar">
+    <span class="arrow arrow-right" onclick="openNav()"></span>
+    @if(!Request::is('login')&&!Request::is('register'))
+        <a for="logo" class="logo-kaplicky kaplicky" href="{{ url('/') }}">
+            {{ __('general.kaplicky') }}
+        </a>
+    @endif
+    <div class="bar-desktop">
+        @if(Request::is('login')||Request::is('register'))
+            <a class="menu-item text-headline-desktop" href="{{ url('/') }}">
+                {{ __('general.home') }}
+            </a>
+            <a class="menu-item text-headline-desktop" href="{{ route('login') }}">
+                {{ __('general.login') }}
+            </a>
+            @if (Route::has('register'))
+                <a class="menu-item text-headline-desktop" href="{{ route('register') }}">
+                    {{ __('general.register') }}
+                </a>
+            @endif
+        @else
+            <a class="menu-item text-headline-desktop" href="{{ url('/') }}">
+                {{ __('general.home') }}
+            </a>
+
+            <a class="menu-item text-headline-desktop" href="{{ url('/categories') }}">
+                {{ __('general.topics') }}
+            </a>
+
+            <a class="menu-item text-headline-desktop" href="{{ url('/artefact') }}">
+                {{ __('general.artefacts') }}
+            </a>
+
+            <a class="menu-item text-headline-desktop" href="{{ url('/favartefacts') }}">
+                {{ __('general.favourite_artefacts') }}
+            </a>
+
+            <a class="menu-item text-headline-desktop" href="{{ url('/favmetadata') }}">
+                {{ __('general.favourite_metadata') }}
+            </a>
+
+            <a class="menu-item text-headline-desktop" href="{{ url('/charts') }}">
+                {{ __('general.charts') }}
+            </a>
+
+{{--            <a class="menu-item text-headline-desktop" href="{{ url('/czech') }}">--}}
+{{--                {{ __('general.cs') }}--}}
+{{--            </a>--}}
+            @guest
+            @else
+                <a class="menu-item text-headline-desktop" href="{{ route('logout') }}" onclick="
+            event.preventDefault();
+            document.getElementById('logout-form').submit();">
+                    {{ __('general.logout') }}
+                </a>
+
+                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+                    @csrf
+                </form>
+            @endguest
+        @endif
+    </div>
+</nav>
+{{--<label for="logo" class="col-md-12 kaplicky" style="display: inline-block; text-align: center; padding: 1.25rem; padding-bottom: 0">{{ __('kaplicky') }}</label>
+{{--<label for="logo" class="col-md-4 kaplicky">{{ __('kaplicky') }}</label>--}}
+{{--<a class="navbar-brand kaplicky" href="{{ url('/') }}">
+    {{  __('kaplicky') }}
+</a>--}}
+
+<script>
+    function openNav() {
+        var x = window.matchMedia("(max-width: 540px)")
+        if (x.matches) {
+            document.getElementById("sidebar").style.width = "50vw";
+        } else {
+            document.getElementById("sidebar").style.width = "250px";
+        }
+    }
+
+    function closeNav() {
+        document.getElementById("sidebar").style.width = "0";
+    }
+</script>
+
+<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
+<script>
+    $(function () {
+        $('a').each(function () {
+            if ($(this).prop('href') == window.location.href) {
+                $(this).addClass('active');// $(this).parents('a').addClass('active');
+            }
+        });
+    });
+</script>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index e796ff8e996b42d1eb59b95ab3cede444c67caf4..5006a23180f2b55d62a9598330d5dfccd466dc81 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -13,34 +13,22 @@
     <script src="{{ asset('js/app.js') }}" defer></script>
 
     <!-- Fonts -->
-    <link rel="dns-prefetch" href="//fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
 
     <!-- Styles -->
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+
 </head>
 <body>
-    <div id="app">
-        @include('inc/navbar')
-
-        <main class="py-4">
-            <div class="container">
-                <nav aria-label="breadcrumb">
-                    <ol class="breadcrumb">
-                        @yield('breadcrumb')
-                    </ol>
-                </nav>
-
-                <div class="content-area">
-                    @yield('content')
-                </div>
-
-                <hr>
-                <footer class="container">
-                    © 2020
-                </footer>
-            </div>
-        </main>
-    </div>
+
+@if(!Request::is('/'))
+    @include('inc/sidebar')
+@endif
+
+@yield('content')
+
+@if(!Request::is('/'))
+    @include('cookieConsent::index')
+@endif
+
 </body>
 </html>
diff --git a/resources/views/layouts/art.blade.php b/resources/views/layouts/art.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..7d3edcf1bb757d4486e25db32951ee0ae481babf
--- /dev/null
+++ b/resources/views/layouts/art.blade.php
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- CSRF Token -->
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+
+    <title>{{ config('app.name', 'Dev') }} - @yield('title')</title>
+
+    <!-- Scripts -->
+    <script src="{{ asset('js/app.js') }}" defer></script>
+
+    <!-- Fonts -->
+    <link rel="dns-prefetch" href="//fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
+
+    <!-- Styles -->
+    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+</head>
+<body>
+<div id="app">
+    <main class="py-4">
+        <div class="container">
+            <div class="content-area">
+                @yield('content')
+            </div>
+        </div>
+    </main>
+</div>
+</body>
+</html>
diff --git a/resources/views/pages/index.blade.php b/resources/views/pages/index.blade.php
index 9f08f15a5efc6d4c099ec358d93add85df7f09cc..b549cb550f7a4cd4ee4b8619092fc4ba4b0d2699 100644
--- a/resources/views/pages/index.blade.php
+++ b/resources/views/pages/index.blade.php
@@ -2,27 +2,57 @@
 
 @section('title', 'Homepage')
 
-@section('breadcrumb')
-    <li class="breadcrumb-item active" aria-current="page">Homepage</li>
-@endsection
-
 @section('content')
-    <div class="jumbotron">
-        <div class="text-center">
-            <h1>Welcome</h1>
-            <p>
-                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-                Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
-                Fusce tellus odio, dapibus id fermentum quis, suscipit id erat.
-                Morbi scelerisque luctus velit. Vivamus porttitor turpis ac leo.
-                Morbi scelerisque luctus velit.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    <div id="homepage_carousel" class="carousel slide" data-ride="carousel">
+        <div class="carousel-inner">
+            <div class="logos-overlay">
+                <div class="museum-logo">
+                    <div class="text-center">
+                        <a href="https://www.upm.cz/">
+                            <img src="{{ asset('images/icons/upm-logo.svg') }}" alt="upm">
+                        </a>
+                    </div>
+                </div>
+                <div class="row social-logo">
+                    <div class="logo">
+                        <a href="https://www.facebook.com/upmpraha/">
+                            <img src="{{ asset('images/icons/facebook.svg') }}" alt="facebook">
+                        </a>
+                    </div>
+                    <div class="logo">
+                        <a href="https://www.instagram.com/museumofdecorativeartsprague/">
+                            <img src="{{ asset('images/icons/instagram.svg') }}" alt="instagram">
+                        </a>
+                    </div>
+                    <div class="logo">
+                        <a href="https://cs.wikipedia.org/wiki/Um%C4%9Bleckopr%C5%AFmyslov%C3%A9_muzeum_v_Praze">
+                            <img src="{{ asset('images/icons/wikipedia.svg') }}" alt="wikipedia">
+                        </a>
+                    </div>
+                </div>
+                <div class="carousel-button">
+                    <a class="btn button-square" href="{{ url('/artefact') }}" role="button">enter</a>
+                </div>
+            </div>
+
+            <div class="carousel-item active" style="background-image: url({{ asset('../images/homepage/carousel_1.jpg') }})">
+            </div>
+        </div>
+        <div class="carousel-caption d-md-block">
+            <h2 class="text-center kaplicky">kaplicky</h2>
+            <p class="text black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer turpis purus, volutpat quis libero aliquet, pulvinar accumsan erat.
+                Praesent porttitor eleifend hendrerit. Vestibulum dictum nunc et leo finibus condimentum.
+                Proin id tempor enim, eu ornare nisi. Phasellus ornare metus ut mi dapibus, varius elementum leo malesuada.
             </p>
-            <a class="btn btn-primary btn-lg" href="{{ url('/artefact') }}" role="button">Continue</a>
         </div>
-    </div>
-
-    <div class="logo">
-       <!-- Add logo here as link to next page -->
+        <!-- <a class="carousel-control-prev" href="#homepage_carousel" role="button" data-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="sr-only">Previous</span>
+        </a> -->
+        <!-- <a class="carousel-control-next" href="#homepage_carousel" role="button" data-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="sr-only">Next</span>
+        </a> -->
     </div>
 @endsection
diff --git a/resources/views/verify/index.blade.php b/resources/views/verify/index.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..d2dfefd9803ceaa7b363e33ae680801dbdf230cd
--- /dev/null
+++ b/resources/views/verify/index.blade.php
@@ -0,0 +1,9 @@
+@extends('layouts.app')
+
+@section('title', 'Favorite artefacts')
+
+@section('content')
+    <div class="container ver-text">
+        <h2>{{$text}}</h2>
+    </div>
+@endsection
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
deleted file mode 100644
index 3fb48cc02c904f124133dac0f84bb6a0c3cbb7f9..0000000000000000000000000000000000000000
--- a/resources/views/welcome.blade.php
+++ /dev/null
@@ -1,100 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <title>Laravel</title>
-
-        <!-- Fonts -->
-        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
-
-        <!-- Styles -->
-        <style>
-            html, body {
-                background-color: #fff;
-                color: #636b6f;
-                font-family: 'Nunito', sans-serif;
-                font-weight: 200;
-                height: 100vh;
-                margin: 0;
-            }
-
-            .full-height {
-                height: 100vh;
-            }
-
-            .flex-center {
-                align-items: center;
-                display: flex;
-                justify-content: center;
-            }
-
-            .position-ref {
-                position: relative;
-            }
-
-            .top-right {
-                position: absolute;
-                right: 10px;
-                top: 18px;
-            }
-
-            .content {
-                text-align: center;
-            }
-
-            .title {
-                font-size: 84px;
-            }
-
-            .links > a {
-                color: #636b6f;
-                padding: 0 25px;
-                font-size: 13px;
-                font-weight: 600;
-                letter-spacing: .1rem;
-                text-decoration: none;
-                text-transform: uppercase;
-            }
-
-            .m-b-md {
-                margin-bottom: 30px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="flex-center position-ref full-height">
-            @if (Route::has('login'))
-                <div class="top-right links">
-                    @auth
-                        <a href="{{ url('/home') }}">Home</a>
-                    @else
-                        <a href="{{ route('login') }}">Login</a>
-
-                        @if (Route::has('register'))
-                            <a href="{{ route('register') }}">Register</a>
-                        @endif
-                    @endauth
-                </div>
-            @endif
-
-            <div class="content">
-                <div class="title m-b-md">
-                    Laravel
-                </div>
-
-                <div class="links">
-                    <a href="https://laravel.com/docs">Docs</a>
-                    <a href="https://laracasts.com">Laracasts</a>
-                    <a href="https://laravel-news.com">News</a>
-                    <a href="https://blog.laravel.com">Blog</a>
-                    <a href="https://nova.laravel.com">Nova</a>
-                    <a href="https://forge.laravel.com">Forge</a>
-                    <a href="https://vapor.laravel.com">Vapor</a>
-                    <a href="https://github.com/laravel/laravel">GitHub</a>
-                </div>
-            </div>
-        </div>
-    </body>
-</html>
diff --git a/routes/web.php b/routes/web.php
index 02b254b00e0e06deddc1e9860b5932ab622d665d..d8127ec86220c8f0a39183170676e6e49d9248db 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -15,9 +15,23 @@ use Illuminate\Support\Facades\Route;
 
 Route::get('/', 'PagesController@index');
 
+Route::get('/verify/{id}', 'VerifyRegisterController@verifyUser');
 Route::get('/artefact', 'ArtefactController@default');
 Route::get('/artefact/{id}', 'ArtefactController@view');
+Route::get('/artefact/like/{id}', 'ArtefactController@like');
+Route::get('/artefact/unlike/{id}', 'ArtefactController@unlike');
+Route::get('/category/{id}', 'ArtefactController@showCategory');
+Route::get('/category/multi/{id}', 'ArtefactController@showCategories');
+Route::get('/detail/like/{id}', 'DetailsController@like');
+Route::get('/detail/unlike/{id}', 'DetailsController@unlike');
 Route::resource('/detail', 'DetailsController', array('only' => array('index', 'show')));
+Route::resource('/categories', 'CategoriesController', array('only' => array('index')));
+Route::resource('/favartefacts', 'FavoriteArtefactsController', array('only' => array('index', 'show', 'store')));
+Route::resource('/charts', 'ChartsController', array('only' => array('index', 'show', 'store')));
+Route::get('/favmetadata', 'FavoriteMetadataController@index');
+Route::get('/favmetadata/unlike/{id}', 'FavoriteMetadataController@unlike');
+Route::get('/artefact/{id}', 'ArtefactController@view');
+
 
 Auth::routes();