diff --git a/Components/Pages/Index.razor b/Components/Pages/Index.razor index dd31367..12c90f0 100644 --- a/Components/Pages/Index.razor +++ b/Components/Pages/Index.razor @@ -1,4 +1,5 @@ -@page "/" +@page "/" +@page "/menu/{topic?}" @using BLAIzor.Models @using BLAIzor.Services @using BLAIzor.Components.Partials @@ -23,7 +24,8 @@ @inject CssInjectorService CssService @inject HttpClient Http @attribute [Sitemap] - + +
@@ -128,7 +130,16 @@
- + + +

An error occurred: @ex.Message

+

Please try again later.

+ @* You can log the exception here if you want *@ + @{ + Console.WriteLine($"Error caught by ErrorBoundary: {ex.Message}"); + } + + @code { + [Parameter] + public string? topic { get; set; } public static Index myHome; private string? Subdomain; public int SiteId; @@ -331,8 +344,16 @@ Menu = await GetMenuList(); if (string.IsNullOrEmpty(HtmlContent.ToString())) { + if(!string.IsNullOrWhiteSpace(topic)) + { + UserInput = topic; + await ChatGptService.ProcessContentRequest(sessionId, UserInput, SiteId, (int)SiteInfo.TemplateId!, collectionName, Menu, true); + } + else + { + await ChatGptService.GetChatGptWelcomeMessage(sessionId, SiteId, Menu); + } // HtmlContent = await ChatGptService.GetChatGptWelcomeMessage(); - await ChatGptService.GetChatGptWelcomeMessage(sessionId, SiteId, Menu); // UserInput = "Sumerize for me, what is this website about, and what can I do on this website?"; // await ChatGptService.ProcessUserIntent(sessionId, UserInput, SiteId, (int)SiteInfo.TemplateId!, collectionName, Menu); } diff --git a/Components/Pages/Preview.razor b/Components/Pages/Preview.razor index bf17779..fea0db3 100644 --- a/Components/Pages/Preview.razor +++ b/Components/Pages/Preview.razor @@ -1,4 +1,5 @@ @page "/preview/{siteid:int}" +@page "/preview/{siteid:int}/{topic?}" @using BLAIzor.Models @using BLAIzor.Services @using Google.Cloud.Speech.V1 @@ -173,6 +174,8 @@ private string? Subdomain; [Parameter] public int siteid { get; set; } + [Parameter] + public string? topic { get; set; } public SiteInfo SiteInfo; private StringBuilder HtmlContent = new(); private string TextContent = ""; @@ -484,10 +487,16 @@ Menu = await GetMenuList(); if (string.IsNullOrEmpty(HtmlContent.ToString())) { - // HtmlContent = await ChatGptService.GetChatGptWelcomeMessage(); - await ChatGptService.GetChatGptWelcomeMessage(sessionId, siteid, Menu); - // UserInput = "Sumerize for me, what is this website about, and what can I do on this website? Please make sure you do not refer back to my question in any way. "; - // await ChatGptService.ProcessUserIntent(sessionId, UserInput, siteid, (int)SiteInfo.TemplateId!, collectionName, Menu); + if (!string.IsNullOrWhiteSpace(topic)) + { + UserInput = topic; + await ChatGptService.ProcessContentRequest(sessionId, UserInput, siteid, (int)SiteInfo.TemplateId!, collectionName, Menu, true); + } + else + { + await ChatGptService.GetChatGptWelcomeMessage(sessionId, siteid, Menu); + } + } UserInput = string.Empty; _initVoicePending = true; diff --git a/Helpers/TextHelper.cs b/Helpers/TextHelper.cs new file mode 100644 index 0000000..9756df0 --- /dev/null +++ b/Helpers/TextHelper.cs @@ -0,0 +1,147 @@ +using System; +using System.Text.RegularExpressions; +using System.Text; +using System.Collections.Generic; + +public static class TextHelper +{ + // Special character replacement map + private static readonly Dictionary SpecialCharacterMap = new() + { + { "/", " per " }, + { "@", " kukac " }, + { "#", " kettőskereszt " }, + { "&", " és " }, + //{ ",", " vessző " }, + { " = ", " egyenlő " }, // Example, you can add more + //{ " - ", " mínusz " } // Example, you can add more + }; + + public static string ReplaceNumbersAndSpecialCharacters(string text) + { + // Save parts that should be skipped (emails, URLs, dates) + var protectedParts = new Dictionary(); + + //// Protect email addresses + //text = Regex.Replace(text, @"\b[\w\.-]+@[\w\.-]+\.\w+\b", match => + //{ + // string key = $"__EMAIL__{protectedParts.Count}__"; + // protectedParts[key] = match.Value; + // return key; + //}); + + //// Protect URLs + //text = Regex.Replace(text, @"https?://[^\s]+", match => + //{ + // string key = $"__URL__{protectedParts.Count}__"; + // protectedParts[key] = match.Value; + // return key; + //}); + + // Protect dates like 2024.05.06 + text = Regex.Replace(text, @"\b\d{4}\.\d{2}\.\d{2}\b", match => + { + string key = $"__DATE__{protectedParts.Count}__"; + protectedParts[key] = match.Value; + return key; + }); + + // Remove anything between [] including the brackets themselves + text = Regex.Replace(text, @"\[[^\]]*\]", ""); + + // First replace floats (keep this BEFORE integers) + text = Regex.Replace(text, @"\b\d+\.\d+\b", match => + { + var parts = match.Value.Split('.'); + var integerPart = int.Parse(parts[0]); + var decimalPart = int.Parse(parts[1]); + + return $"{NumberToHungarian(integerPart)} egész {NumberToHungarian(decimalPart)} {(parts[1].Length == 1 ? "tized" : parts[1].Length == 2 ? "század" : "ezred")}"; + }); + + // Then replace integers + text = Regex.Replace(text, @"\b\d+\b", match => + { + int number = int.Parse(match.Value); + return NumberToHungarian(number); + }); + + // Replace special characters from dictionary + foreach (var kvp in SpecialCharacterMap) + { + text = text.Replace(kvp.Key, kvp.Value); + } + + // Replace dots surrounded by spaces (optional) + //text = Regex.Replace(text, @" (?=\.)|(?<=\.) ", " pont "); + + // Restore protected parts + foreach (var kvp in protectedParts) + { + text = text.Replace(kvp.Key, kvp.Value); + } + + return text; + } + + + public static string NumberToHungarian(int number) + { + if (number == 0) return "nulla"; + + string[] units = { "", "egy", "két", "három", "négy", "öt", "hat", "hét", "nyolc", "kilenc" }; + string[] tens = { "", "tíz", "húsz", "harminc", "negyven", "ötven", "hatvan", "hetven", "nyolcvan", "kilencven" }; + + StringBuilder result = new StringBuilder(); + + if (number >= 1000) + { + int thousands = number / 1000; + if (thousands == 1) + result.Append("ezer"); + else + { + result.Append(NumberToHungarian(thousands)); + result.Append("ezer"); + } + number %= 1000; + } + + if (number >= 100) + { + int hundreds = number / 100; + if (hundreds == 1) + result.Append("száz"); + else + { + result.Append(NumberToHungarian(hundreds)); + result.Append("száz"); + } + number %= 100; + } + + if (number >= 10) + { + int tensPart = number / 10; + result.Append(tens[tensPart]); + number %= 10; + } + + if (number > 0) + { + // "két" instead of "kettő" in compound numbers + if (number == 2 && result.Length > 0) + result.Append("két"); + else + result.Append(units[number]); + } + + return result.ToString(); + } + + public static string RemoveTabs(string text) + { + if (string.IsNullOrEmpty(text)) return text; + return text.Replace("\t", ""); // Simple replace — remove all tab characters + } +} diff --git a/Services/AIService.cs b/Services/AIService.cs index 0351625..30542e1 100644 --- a/Services/AIService.cs +++ b/Services/AIService.cs @@ -22,6 +22,7 @@ using BLAIzor.Services; using Microsoft.DotNet.Scaffolding.Shared; using System.Xml.XPath; using Azure.Identity; +using BLAIzor.Helpers; namespace BLAIzor.Services { @@ -124,18 +125,27 @@ namespace BLAIzor.Services //Console.Write($"\n -------------------------------- Found point: {selectedPoint.result.id} \n"); } + SiteInfo site = await _scopedContentService.GetSiteInfoByIdAsync(SiteId); + string siteEntity; + if (!string.IsNullOrWhiteSpace(site.Entity)) + { + siteEntity = site.Entity; + } + else { + siteEntity = "brand or company"; + } - string systemMessage = "You are a helpful, " + Mood + " assistant that welcomes the user in the name of the brand or person described by the content, on a website of " + _scopedContentService.SelectedBrandName + " in " + _scopedContentService.SelectedLanguage + ". Use the following content: `" + - extractedText + "` " + - //"and generate a short" +Mood+ "but kind marketing-oriented welcome message and introduction of the brand for the user, constructed as simple Bootstrap HTML codeblock with a

tagged title and a paragraph." + - "and generate a" + Mood + " marketing-oriented welcome message and a summary of the content and introduction of the brand for the user, aiming to explain clearly, what does the company/person offer, constructed as simple Bootstrap HTML
codeblock with a

tagged title and a paragraph." + - "If there is any logo, or not logo but main brand image in the document use that url, and add that as a bootstrap responsive ('img-fluid py-3') image, with the maximum height of 30vh." + - //"In the end of your answer, always add in a new row: 'If you have any questions, you can simply ask either by typing in the message box, or by clicking the microphone icon on the top of the page. '"+ - "Here is a list of topics " + menuList + - ", make a new bootstrap clearfix and after that make a clickable bootstrap styled (btn btn-primary) button from each of the determined topics, " + - "that calls the javascript function 'callAI({the name of the topic})' on click. " + - "Do not include anything else than the html title and text elements, no css, no scripts, no head or other tags." + - "Do not mark your answer with ```html or any other mark."; + string systemMessage = "You are a helpful, " + Mood + " assistant that welcomes the user speaking in the name of the " + siteEntity + " described by the content, on a website of " + _scopedContentService.SelectedBrandName + " in " + _scopedContentService.SelectedLanguage + ". Use the following content: `" + + extractedText + "` " + + //"and generate a short" +Mood+ "but kind marketing-oriented welcome message and introduction of the brand for the user, constructed as simple Bootstrap HTML codeblock with a

tagged title and a paragraph." + + "and generate a" + Mood + " marketing-oriented welcome message and a summary of the content and introduction of the brand for the user, aiming to explain clearly, what does the company/person offer, constructed as simple Bootstrap HTML
codeblock with a

tagged title and a paragraph." + + "If there is any logo, or not logo but main brand image in the document use that url, and add that as a bootstrap responsive ('img-fluid py-3') image, with the maximum height of 30vh." + + //"In the end of your answer, always add in a new row: 'If you have any questions, you can simply ask either by typing in the message box, or by clicking the microphone icon on the top of the page. '"+ + "Here is a list of topics " + menuList + + ", make a new bootstrap clearfix and after that make a clickable bootstrap styled (btn btn-primary) button from each of the determined topics, " + + "that calls the javascript function 'callAI({the name of the topic})' on click. " + + "Do not include anything else than the html title and text elements, no css, no scripts, no head or other tags." + + "Do not mark your answer with ```html or any other mark."; string userMessage = "Hello"; string streamedHtmlContent = string.Empty; @@ -429,7 +439,9 @@ namespace BLAIzor.Services //We have the text all available now, let's pass it to the voice generator //TODO modify photos handling, move audio generation to the layout area - OnTextContentAvailable?.Invoke(sessionId, fixedResult.Text); + string removedNumbers = TextHelper.ReplaceNumbersAndSpecialCharacters(fixedResult.Text); + Console.WriteLine(removedNumbers); + OnTextContentAvailable?.Invoke(sessionId, removedNumbers); List snippets = await GetSnippetsForDisplay(sessionId, collectionName); //await DisplayLayoutPlanFromContent(sessionId, fixedResult.Text, snippets, fixedResult.Topics, fixedResult.Photos); var result = await DisplayLayoutPlanFromContent(sessionId, fixedResult.Text, snippets, fixedResult.Topics, fixedResult.Photos); @@ -1255,8 +1267,8 @@ namespace BLAIzor.Services //Console.WriteLine("AI Response:"); //Console.WriteLine(aiResponse); - aiResponse = FixJsonWithoutAI(aiResponse); - + aiResponse = FixJsonWithoutAI(aiResponse); + aiResponse = TextHelper.RemoveTabs(aiResponse); layoutPlan = System.Text.Json.JsonSerializer.Deserialize(aiResponse, new JsonSerializerOptions { PropertyNameCaseInsensitive = true diff --git a/appsettings.Development.json b/appsettings.Development.json index 0c208ae..33e2770 100644 --- a/appsettings.Development.json +++ b/appsettings.Development.json @@ -2,7 +2,8 @@ "Logging": { "LogLevel": { "Default": "Information", - "Microsoft.AspNetCore": "Warning" + "Microsoft.AspNetCore": "Information", + "BLAIzor": "Information" } } } diff --git a/wwwroot/scripts/SeemGenCss.js b/wwwroot/scripts/SeemGenCss.js index 2b20ffd..4d7e832 100644 --- a/wwwroot/scripts/SeemGenCss.js +++ b/wwwroot/scripts/SeemGenCss.js @@ -55,7 +55,7 @@ window.initVoiceRecorder = function (dotnetMethodName) { const recText = document.getElementById("recordingText"); if (!recButton || !stopButton || !recText) { - console.warn("Voice recorder elements not found"); + console.warn("Some or all voice recorder elements not found"); return; } diff --git a/wwwroot/temp/style_4ee82aa9.css b/wwwroot/temp/style_4ee82aa9.css deleted file mode 100644 index 90e14ab..0000000 --- a/wwwroot/temp/style_4ee82aa9.css +++ /dev/null @@ -1,168 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); - -.card { - background-color: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(2px); -} - -.table { - color: #f2d8bb !important; -} - -.navbar-collapse { - height: 100vh; - text-align: center !important; - align-content: center; -} - -.navbar-collapse .nav-link { - font-size: 1.2rem; - letter-spacing: 2px; -} - -.navbar-collapse .nav-item:not(:last-child) { - padding: 0.2em 1em; -} - -.navbar { - background-color: #022c28; - color: #d0eae9; -} - -.nav-link { - color: #d0eae9 !important; -} - -.content { - top: 60px; -} - -body { - background-color: #022c28; - background-attachment: fixed; - background-position: center; - background-size: cover; - color: aqua; - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 300; - font-style: normal; - font-size: 1rem; /* Base size */ -} - -h1 { - font-weight: 700; - font-size: 2.5rem; - padding-top: 30px; - padding-bottom: 10px; -} - -h2 { - font-weight: 500; - font-size: 2rem; - padding-top: 15px; - padding-bottom: 10px; -} - -h3 { - font-weight: 400; - font-size: 1.6rem; - padding-top: 10px; - padding-bottom: 10px; -} - -p { - color: #fff; - font-size: 1.1rem; -} - -li { - color: #fff; - font-size: 1rem; - text-align: center; -} - -.btn-primary { - color: #d0eae9; - background-color: #014d4e; - border: 0px; - margin: 5px; -} - -.btn-primary:hover { - color: #fff; - background-color: #086262; - border: 0px; -} - -.row { - padding-bottom: 30px; - margin: 0 auto !important; -} - -.searchInput::placeholder { - color: #d0eae9; -} - -#myVideo { - position: fixed; - right: 0; - top: -100px; - min-width: 100%; - min-height: 100%; - transform: translateX(calc((100% - 100vw) / 2)); -} - -.img-fluid { - max-height: 50vh; - width: auto; - border-radius: 15px; -} - -.sp-img { - box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); --webkit-box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); --moz-box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); -} - -.col { - align-items: center; - display: flex; -} - -.form-select { - background-color: rgba(255, 255, 255, 0.2); - border-radius: 5px; - display: unset !important; - color: #fff; -} - -.list-group-item, -.bg-light { - background-color: rgb(11 24 23 / 76%) !important; - backdrop-filter: blur(8px) !important; -} - -.text-primary { - --bs-text-opacity: 1; - color: aqua; -} - -/* 🔽 Mobile Responsiveness */ -@media (max-width: 768px) { - h1 { font-size: 2rem; } - h2 { font-size: 1.6rem; } - h3 { font-size: 1.4rem; } - p, li { font-size: 1rem; } - .navbar-collapse .nav-link { font-size: 1.1rem; } - p {text-align: justify;} -} - -@media (max-width: 480px) { - h1 { font-size: 1.6rem; } - h2 { font-size: 1.3rem; } - h3 { font-size: 1.1rem; } - p, li { font-size: 0.95rem; } - .navbar-collapse .nav-link { font-size: 1rem; } - p {text-align: justify;} -} \ No newline at end of file diff --git a/wwwroot/temp/style_54967dd0.css b/wwwroot/temp/style_54967dd0.css deleted file mode 100644 index 90e14ab..0000000 --- a/wwwroot/temp/style_54967dd0.css +++ /dev/null @@ -1,168 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); - -.card { - background-color: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(2px); -} - -.table { - color: #f2d8bb !important; -} - -.navbar-collapse { - height: 100vh; - text-align: center !important; - align-content: center; -} - -.navbar-collapse .nav-link { - font-size: 1.2rem; - letter-spacing: 2px; -} - -.navbar-collapse .nav-item:not(:last-child) { - padding: 0.2em 1em; -} - -.navbar { - background-color: #022c28; - color: #d0eae9; -} - -.nav-link { - color: #d0eae9 !important; -} - -.content { - top: 60px; -} - -body { - background-color: #022c28; - background-attachment: fixed; - background-position: center; - background-size: cover; - color: aqua; - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 300; - font-style: normal; - font-size: 1rem; /* Base size */ -} - -h1 { - font-weight: 700; - font-size: 2.5rem; - padding-top: 30px; - padding-bottom: 10px; -} - -h2 { - font-weight: 500; - font-size: 2rem; - padding-top: 15px; - padding-bottom: 10px; -} - -h3 { - font-weight: 400; - font-size: 1.6rem; - padding-top: 10px; - padding-bottom: 10px; -} - -p { - color: #fff; - font-size: 1.1rem; -} - -li { - color: #fff; - font-size: 1rem; - text-align: center; -} - -.btn-primary { - color: #d0eae9; - background-color: #014d4e; - border: 0px; - margin: 5px; -} - -.btn-primary:hover { - color: #fff; - background-color: #086262; - border: 0px; -} - -.row { - padding-bottom: 30px; - margin: 0 auto !important; -} - -.searchInput::placeholder { - color: #d0eae9; -} - -#myVideo { - position: fixed; - right: 0; - top: -100px; - min-width: 100%; - min-height: 100%; - transform: translateX(calc((100% - 100vw) / 2)); -} - -.img-fluid { - max-height: 50vh; - width: auto; - border-radius: 15px; -} - -.sp-img { - box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); --webkit-box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); --moz-box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); -} - -.col { - align-items: center; - display: flex; -} - -.form-select { - background-color: rgba(255, 255, 255, 0.2); - border-radius: 5px; - display: unset !important; - color: #fff; -} - -.list-group-item, -.bg-light { - background-color: rgb(11 24 23 / 76%) !important; - backdrop-filter: blur(8px) !important; -} - -.text-primary { - --bs-text-opacity: 1; - color: aqua; -} - -/* 🔽 Mobile Responsiveness */ -@media (max-width: 768px) { - h1 { font-size: 2rem; } - h2 { font-size: 1.6rem; } - h3 { font-size: 1.4rem; } - p, li { font-size: 1rem; } - .navbar-collapse .nav-link { font-size: 1.1rem; } - p {text-align: justify;} -} - -@media (max-width: 480px) { - h1 { font-size: 1.6rem; } - h2 { font-size: 1.3rem; } - h3 { font-size: 1.1rem; } - p, li { font-size: 0.95rem; } - .navbar-collapse .nav-link { font-size: 1rem; } - p {text-align: justify;} -} \ No newline at end of file diff --git a/wwwroot/temp/style_7ac1c30c.css b/wwwroot/temp/style_7ac1c30c.css deleted file mode 100644 index 78ca56c..0000000 --- a/wwwroot/temp/style_7ac1c30c.css +++ /dev/null @@ -1,536 +0,0 @@ -/*@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap'); -@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,700,300');*/ - -/*search*/ - -li { - list-style: none; -} - -label { - color: #000; - /* display: none; */ -} - -.img-fluid { - max-height: 50vh; - width: auto; - -} - -.pop-img { - border-radius: 10px !important; - border-color: white; - border-width: 1px; - border-style: solid; -} - -.card-img-top { - max-height: 50vh; - width: auto; - border-radius: 5px; -} - -.btn { - background: rgba(255, 255, 255, 0.5); - border: 0; - color: #000000; - width: fit-content; - font-weight: bold; - transition: all 0.2s ease; - margin: 15px; -} - -.voicebutton { - border-radius: 50% !important; - padding: 10px !important; - width: 40px; - height:40px; -} - -.menubtn { - background: rgba(255, 255, 255, 0.5); - border: 0; - color: #000000; - /* width: 98%; */ - font-weight: bold; - border-radius: 20px; - height: 40px; - transition: all 0.2s ease; - padding: 10px; - margin: 10px; -} - - .btn:active { - background: rgba(255, 255, 255, 1); - } - - .btn:hover { - background: rgba(255, 255, 255, 0.8); - } - -img { - border-radius: 20px !important; -} - - -input.search_bar{ - border: none; - outline: none; - width: 75px; - border-radius: 55px; - margin: 0 auto; - font-size: 1.3em; - color: #0d2840; - padding: 15px 30px 15px 45px; - transition: all .3s cubic-bezier(0,0,.5,1.5); - box-shadow: 0 3px 10px -2px rgba(0,0,0,.1); - background: rgba(255, 255, 255, 0.3) url(https://i.imgur.com/seveWIw.png) no-repeat center center; -} - - input.search_bar:focus{ - width: 100%; - background-position: calc(100% - 35px) center - } - -/*Removes default x in search fields (webkit only i guess)*/ -input[type=search]::-webkit-search-cancel-button { - -webkit-appearance: none; -} -/*Changes the color of the placeholder*/ -::-webkit-input-placeholder { - color: #0d2840; - opacity: .5; -} - -:-moz-placeholder { - color: #0d2840; - opacity: .5; -} - -::-moz-placeholder { - color: #0d2840; - opacity: .5; -} - -:-ms-input-placeholder { - color: #0d2840; - opacity: .5; -} - -/*search*/ - -/*Search2*/ -.searchBox { - width: 60px; - background: rgba(255, 255, 255, 0.3); - height: 60px; - border-radius: 40px; - padding: 10px; - margin: 0 auto; - transition: 0.8s; -} - -.searchInput:active > .searchBox{ - width:100% -} -.searchInput:focus > .searchBox { - width: 100% -} - -.searchInput::placeholder { - color:#fff; -} - -.searchBox:hover { - width: 100%; -} - - .searchBox:hover > .searchInput { - width: calc(100% - 60px); - padding: 0 6px; - } - - .searchBox:hover > .searchButton { - background: white; - color: #2f3640; - } - -.searchButton { - color: white; - float: right; - width: 40px; - height: 40px; - border-radius: 50px; - background-color: #e493d0; - background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - background-repeat: no-repeat; - animation: 10s movement linear infinite; - display: flex; - justify-content: center; - align-items: center; -} - -.searchInput { - border: none; - background: none; - outline: none; - font-size: 1.3em !important; - color: #0d2840 !important; - float: left; - padding: 0; - color: white; - font-size: 16px; - transition: 0.4s; - line-height: 40px; - width: 0px; -} - -/*Search2*/ - - -.event { - border-radius: 20px !important; - background-color: rgba(255, 255, 255, 0.2) !important; - backdrop-filter: blur(20px); - border: 0; - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.07); - transition: all 0.15s ease; -} - -/*card design*/ -.card { - border-radius: 20px !important; - overflow: hidden; - background-color: rgba(255, 255, 255, 0.2) !important; - backdrop-filter: blur(20px); - border: 0; - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.07); - transition: all 0.15s ease; -} - - .card:hover { - box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1), 0 10px 8px rgba(0, 0, 0, 0.015); - } - -.card-body .card-title { - font-family: 'Lato', sans-serif; - font-weight: 700; - letter-spacing: 0.3px; - font-size: 24px; - color: #121212; -} - -.card-text { - font-family: 'Lato', sans-serif; - font-weight: 400; - font-size: 15px; - letter-spacing: 0.3px; - color: #4E4E4E; -} - -.card .container { - width: 88%; - /*background: #F0EEF8;*/ - border-radius: 30px; - /*height: 140px;*/ - display: flex; - align-items: center; - justify-content: center; -} - -.container:hover > img { - transform: scale(1.2); -} - -.container img { - /*padding: 75px;*/ - /*margin-top: -40px; - margin-bottom: -40px;*/ - transition: 0.4s ease; - cursor: pointer; -} - -.btn:hover { - background-color: #e493d0; - background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - background-repeat: no-repeat; - animation: 10s movement linear infinite; -} - -.btn:focus { - background-color: #e493d0; - background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - background-repeat: no-repeat; - animation: 10s movement linear infinite; -} -/*card design*/ - -/*bg*/ - - -:root { - font-size: 15px; -} - -body { - /*font-family: 'Comfortaa', 'Arial Narrow', Arial, sans-serif;*/ - /*font-family: 'Quicksand', sans-serif;*/ - color: #fff !important; - margin: 0; - min-height: 100vh; - background-color: #000; - /*background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));*/ - /*background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;*/ - /*background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;*/ - background-repeat: no-repeat; - /*animation: 10s movement linear infinite;*/ -} - - body::after { - content: ''; - display: block; - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - } - -.myspan { - position: relative; - z-index: 10; - display: flex; - min-height: 100vh; - width: 100%; - justify-content: center; - align-items: center; - font-size: 5rem; - color: transparent; - text-shadow: 0px 0px 1px rgba(255, 255, 255, .6), 0px 4px 4px rgba(0, 0, 0, .05); - letter-spacing: .2rem; -} - -@keyframes movement { - 0%, 100% { - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - } - - 25% { - background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 60vmax 60vmax; - background-position: -60vmax -90vmax, 50vmax -40vmax, 0vmax -20vmax, -40vmax -20vmax, 40vmax 60vmax; - } - - 50% { - background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax, 60vmax 60vmax, 80vmax 80vmax; - background-position: -50vmax -70vmax, 40vmax -30vmax, 10vmax 0vmax, 20vmax 10vmax, 30vmax 70vmax; - } - - 75% { - background-size: 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 70vmax 70vmax; - background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0vmax, -10vmax 10vmax, 40vmax 60vmax; - } -} - - -/*bg*/ - -.mytextarea { - background-color: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(20px); - padding: 10px; - border-radius: 10px; - border-width: 0px; - height: unset !important; -} - - .mytextarea:active { - border-width: 0px; - } - - .mytextarea:focus-visible { - background-color: rgba(255, 255, 255, 0.5); - border-width: 0px !important; - outline: -webkit-focus-ring-color auto 0px; - outline-color: transparent; - } - -.navbar-toggler { - color: #fff; -} - -.navbar-brand { - font-size: 1.7rem; - color:#fff; -} - -.form-select { - background-color: rgba(255, 255, 255, 0.2); - border-radius: 5px; - display: unset !important; - color: #fff; -} - - .form-select > option { - background-color: rgba(255, 255, 255, 0.2) - } - -.contactform-overlay { - position: fixed; - z-index: 100; - height: 100vh; - width: 100%; - padding: 100px; - top: 0px; - left: 0px; - /* padding-top: 10vh; */ - backdrop-filter: blur(20px); - /* background-color: rgba(1, 1, 1, .4); */ -} - -.form-control { - background-color: rgba(255,255,255,0.4); - border-radius: 5px; - height: 50px; -} -.form-control::placeholder { - color:#fff; -} - -.contactform-close-overlay { - position: relative; - height: 10vh; -} - -.contactform-popup-content { - height: 80vh; - margin: 0px; - padding: 0px; -} - -.contactform-popup-close { - position: relative; - height: 10vh; - z-index: 80; -} - -.calendly-overlay { - position: absolute; - z-index: 100; - height: 100vh; - width: 100%; - top: 0px; - /* padding-top: 10vh; */ - backdrop-filter: blur(20px); - /* background-color: rgba(1, 1, 1, .4); */ -} - -.calendly-close-overlay { - position: relative; - height: 10vh; -} - -.calendly-popup-content { - height: 80vh; - margin: 0px; - padding: 0px; -} - -.calendly-popup-close { - position: relative; - height: 10vh; - z-index: 80; -} - -#myVideo { - position: fixed; - right: 0; - bottom: 0; - min-width: 100%; - min-height: 100%; - opacity: 0.2; -} - -.table { - color: #fff !important; - padding-top: 10px; - padding-bottom: 10px; - background-color: transparent; -} - -.navbar-collapse { - height: 100vh; - /*display: flex; - align-items: center; - justify-content: center;*/ - text-align: center !important; - align-content: center; -} - -.navbar-collapse .nav-link { - font-size: 1.5em; - letter-spacing: 2px; -} - -.navbar-collapse .nav-item:not(:last-child) { - border-bottom: 0px solid white; - padding: 0.2em 4em; -} - -.navbar { - background-color: #040206; - color: #fff; -} - -.nav-link { - color: #fff !important; -} - -.content { - top: 60px; -} - -.row { - margin-bottom: 10px; -} - -h1 { - color: #64CCC5; -} - -p { - color: #EEEEEE; - font-size: 1,1rem; -} -.container-fluid { - margin-bottom:20px; - padding: 20px; -} - -/* 🔽 Mobile Responsiveness */ -@media (max-width: 768px) { - h1 { font-size: 2rem; } - h2 { font-size: 1.6rem; } - h3 { font-size: 1.4rem; } - p, li { font-size: 1rem; } - .navbar-collapse .nav-link { font-size: 1.1rem; } - p {text-align: justify;} -} - -@media (max-width: 480px) { - h1 { font-size: 1.6rem; } - h2 { font-size: 1.3rem; } - h3 { font-size: 1.1rem; } - p, li { font-size: 0.95rem; } - .navbar-collapse .nav-link { font-size: 1rem; } - p {text-align: justify;} -} \ No newline at end of file diff --git a/wwwroot/temp/style_7fd361e7.css b/wwwroot/temp/style_7fd361e7.css deleted file mode 100644 index 78ca56c..0000000 --- a/wwwroot/temp/style_7fd361e7.css +++ /dev/null @@ -1,536 +0,0 @@ -/*@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap'); -@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,700,300');*/ - -/*search*/ - -li { - list-style: none; -} - -label { - color: #000; - /* display: none; */ -} - -.img-fluid { - max-height: 50vh; - width: auto; - -} - -.pop-img { - border-radius: 10px !important; - border-color: white; - border-width: 1px; - border-style: solid; -} - -.card-img-top { - max-height: 50vh; - width: auto; - border-radius: 5px; -} - -.btn { - background: rgba(255, 255, 255, 0.5); - border: 0; - color: #000000; - width: fit-content; - font-weight: bold; - transition: all 0.2s ease; - margin: 15px; -} - -.voicebutton { - border-radius: 50% !important; - padding: 10px !important; - width: 40px; - height:40px; -} - -.menubtn { - background: rgba(255, 255, 255, 0.5); - border: 0; - color: #000000; - /* width: 98%; */ - font-weight: bold; - border-radius: 20px; - height: 40px; - transition: all 0.2s ease; - padding: 10px; - margin: 10px; -} - - .btn:active { - background: rgba(255, 255, 255, 1); - } - - .btn:hover { - background: rgba(255, 255, 255, 0.8); - } - -img { - border-radius: 20px !important; -} - - -input.search_bar{ - border: none; - outline: none; - width: 75px; - border-radius: 55px; - margin: 0 auto; - font-size: 1.3em; - color: #0d2840; - padding: 15px 30px 15px 45px; - transition: all .3s cubic-bezier(0,0,.5,1.5); - box-shadow: 0 3px 10px -2px rgba(0,0,0,.1); - background: rgba(255, 255, 255, 0.3) url(https://i.imgur.com/seveWIw.png) no-repeat center center; -} - - input.search_bar:focus{ - width: 100%; - background-position: calc(100% - 35px) center - } - -/*Removes default x in search fields (webkit only i guess)*/ -input[type=search]::-webkit-search-cancel-button { - -webkit-appearance: none; -} -/*Changes the color of the placeholder*/ -::-webkit-input-placeholder { - color: #0d2840; - opacity: .5; -} - -:-moz-placeholder { - color: #0d2840; - opacity: .5; -} - -::-moz-placeholder { - color: #0d2840; - opacity: .5; -} - -:-ms-input-placeholder { - color: #0d2840; - opacity: .5; -} - -/*search*/ - -/*Search2*/ -.searchBox { - width: 60px; - background: rgba(255, 255, 255, 0.3); - height: 60px; - border-radius: 40px; - padding: 10px; - margin: 0 auto; - transition: 0.8s; -} - -.searchInput:active > .searchBox{ - width:100% -} -.searchInput:focus > .searchBox { - width: 100% -} - -.searchInput::placeholder { - color:#fff; -} - -.searchBox:hover { - width: 100%; -} - - .searchBox:hover > .searchInput { - width: calc(100% - 60px); - padding: 0 6px; - } - - .searchBox:hover > .searchButton { - background: white; - color: #2f3640; - } - -.searchButton { - color: white; - float: right; - width: 40px; - height: 40px; - border-radius: 50px; - background-color: #e493d0; - background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - background-repeat: no-repeat; - animation: 10s movement linear infinite; - display: flex; - justify-content: center; - align-items: center; -} - -.searchInput { - border: none; - background: none; - outline: none; - font-size: 1.3em !important; - color: #0d2840 !important; - float: left; - padding: 0; - color: white; - font-size: 16px; - transition: 0.4s; - line-height: 40px; - width: 0px; -} - -/*Search2*/ - - -.event { - border-radius: 20px !important; - background-color: rgba(255, 255, 255, 0.2) !important; - backdrop-filter: blur(20px); - border: 0; - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.07); - transition: all 0.15s ease; -} - -/*card design*/ -.card { - border-radius: 20px !important; - overflow: hidden; - background-color: rgba(255, 255, 255, 0.2) !important; - backdrop-filter: blur(20px); - border: 0; - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.07); - transition: all 0.15s ease; -} - - .card:hover { - box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1), 0 10px 8px rgba(0, 0, 0, 0.015); - } - -.card-body .card-title { - font-family: 'Lato', sans-serif; - font-weight: 700; - letter-spacing: 0.3px; - font-size: 24px; - color: #121212; -} - -.card-text { - font-family: 'Lato', sans-serif; - font-weight: 400; - font-size: 15px; - letter-spacing: 0.3px; - color: #4E4E4E; -} - -.card .container { - width: 88%; - /*background: #F0EEF8;*/ - border-radius: 30px; - /*height: 140px;*/ - display: flex; - align-items: center; - justify-content: center; -} - -.container:hover > img { - transform: scale(1.2); -} - -.container img { - /*padding: 75px;*/ - /*margin-top: -40px; - margin-bottom: -40px;*/ - transition: 0.4s ease; - cursor: pointer; -} - -.btn:hover { - background-color: #e493d0; - background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - background-repeat: no-repeat; - animation: 10s movement linear infinite; -} - -.btn:focus { - background-color: #e493d0; - background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - background-repeat: no-repeat; - animation: 10s movement linear infinite; -} -/*card design*/ - -/*bg*/ - - -:root { - font-size: 15px; -} - -body { - /*font-family: 'Comfortaa', 'Arial Narrow', Arial, sans-serif;*/ - /*font-family: 'Quicksand', sans-serif;*/ - color: #fff !important; - margin: 0; - min-height: 100vh; - background-color: #000; - /*background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));*/ - /*background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;*/ - /*background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;*/ - background-repeat: no-repeat; - /*animation: 10s movement linear infinite;*/ -} - - body::after { - content: ''; - display: block; - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - } - -.myspan { - position: relative; - z-index: 10; - display: flex; - min-height: 100vh; - width: 100%; - justify-content: center; - align-items: center; - font-size: 5rem; - color: transparent; - text-shadow: 0px 0px 1px rgba(255, 255, 255, .6), 0px 4px 4px rgba(0, 0, 0, .05); - letter-spacing: .2rem; -} - -@keyframes movement { - 0%, 100% { - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - } - - 25% { - background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 60vmax 60vmax; - background-position: -60vmax -90vmax, 50vmax -40vmax, 0vmax -20vmax, -40vmax -20vmax, 40vmax 60vmax; - } - - 50% { - background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax, 60vmax 60vmax, 80vmax 80vmax; - background-position: -50vmax -70vmax, 40vmax -30vmax, 10vmax 0vmax, 20vmax 10vmax, 30vmax 70vmax; - } - - 75% { - background-size: 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 70vmax 70vmax; - background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0vmax, -10vmax 10vmax, 40vmax 60vmax; - } -} - - -/*bg*/ - -.mytextarea { - background-color: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(20px); - padding: 10px; - border-radius: 10px; - border-width: 0px; - height: unset !important; -} - - .mytextarea:active { - border-width: 0px; - } - - .mytextarea:focus-visible { - background-color: rgba(255, 255, 255, 0.5); - border-width: 0px !important; - outline: -webkit-focus-ring-color auto 0px; - outline-color: transparent; - } - -.navbar-toggler { - color: #fff; -} - -.navbar-brand { - font-size: 1.7rem; - color:#fff; -} - -.form-select { - background-color: rgba(255, 255, 255, 0.2); - border-radius: 5px; - display: unset !important; - color: #fff; -} - - .form-select > option { - background-color: rgba(255, 255, 255, 0.2) - } - -.contactform-overlay { - position: fixed; - z-index: 100; - height: 100vh; - width: 100%; - padding: 100px; - top: 0px; - left: 0px; - /* padding-top: 10vh; */ - backdrop-filter: blur(20px); - /* background-color: rgba(1, 1, 1, .4); */ -} - -.form-control { - background-color: rgba(255,255,255,0.4); - border-radius: 5px; - height: 50px; -} -.form-control::placeholder { - color:#fff; -} - -.contactform-close-overlay { - position: relative; - height: 10vh; -} - -.contactform-popup-content { - height: 80vh; - margin: 0px; - padding: 0px; -} - -.contactform-popup-close { - position: relative; - height: 10vh; - z-index: 80; -} - -.calendly-overlay { - position: absolute; - z-index: 100; - height: 100vh; - width: 100%; - top: 0px; - /* padding-top: 10vh; */ - backdrop-filter: blur(20px); - /* background-color: rgba(1, 1, 1, .4); */ -} - -.calendly-close-overlay { - position: relative; - height: 10vh; -} - -.calendly-popup-content { - height: 80vh; - margin: 0px; - padding: 0px; -} - -.calendly-popup-close { - position: relative; - height: 10vh; - z-index: 80; -} - -#myVideo { - position: fixed; - right: 0; - bottom: 0; - min-width: 100%; - min-height: 100%; - opacity: 0.2; -} - -.table { - color: #fff !important; - padding-top: 10px; - padding-bottom: 10px; - background-color: transparent; -} - -.navbar-collapse { - height: 100vh; - /*display: flex; - align-items: center; - justify-content: center;*/ - text-align: center !important; - align-content: center; -} - -.navbar-collapse .nav-link { - font-size: 1.5em; - letter-spacing: 2px; -} - -.navbar-collapse .nav-item:not(:last-child) { - border-bottom: 0px solid white; - padding: 0.2em 4em; -} - -.navbar { - background-color: #040206; - color: #fff; -} - -.nav-link { - color: #fff !important; -} - -.content { - top: 60px; -} - -.row { - margin-bottom: 10px; -} - -h1 { - color: #64CCC5; -} - -p { - color: #EEEEEE; - font-size: 1,1rem; -} -.container-fluid { - margin-bottom:20px; - padding: 20px; -} - -/* 🔽 Mobile Responsiveness */ -@media (max-width: 768px) { - h1 { font-size: 2rem; } - h2 { font-size: 1.6rem; } - h3 { font-size: 1.4rem; } - p, li { font-size: 1rem; } - .navbar-collapse .nav-link { font-size: 1.1rem; } - p {text-align: justify;} -} - -@media (max-width: 480px) { - h1 { font-size: 1.6rem; } - h2 { font-size: 1.3rem; } - h3 { font-size: 1.1rem; } - p, li { font-size: 0.95rem; } - .navbar-collapse .nav-link { font-size: 1rem; } - p {text-align: justify;} -} \ No newline at end of file diff --git a/wwwroot/temp/style_8bb509ba.css b/wwwroot/temp/style_8bb509ba.css deleted file mode 100644 index 78ca56c..0000000 --- a/wwwroot/temp/style_8bb509ba.css +++ /dev/null @@ -1,536 +0,0 @@ -/*@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap'); -@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,700,300');*/ - -/*search*/ - -li { - list-style: none; -} - -label { - color: #000; - /* display: none; */ -} - -.img-fluid { - max-height: 50vh; - width: auto; - -} - -.pop-img { - border-radius: 10px !important; - border-color: white; - border-width: 1px; - border-style: solid; -} - -.card-img-top { - max-height: 50vh; - width: auto; - border-radius: 5px; -} - -.btn { - background: rgba(255, 255, 255, 0.5); - border: 0; - color: #000000; - width: fit-content; - font-weight: bold; - transition: all 0.2s ease; - margin: 15px; -} - -.voicebutton { - border-radius: 50% !important; - padding: 10px !important; - width: 40px; - height:40px; -} - -.menubtn { - background: rgba(255, 255, 255, 0.5); - border: 0; - color: #000000; - /* width: 98%; */ - font-weight: bold; - border-radius: 20px; - height: 40px; - transition: all 0.2s ease; - padding: 10px; - margin: 10px; -} - - .btn:active { - background: rgba(255, 255, 255, 1); - } - - .btn:hover { - background: rgba(255, 255, 255, 0.8); - } - -img { - border-radius: 20px !important; -} - - -input.search_bar{ - border: none; - outline: none; - width: 75px; - border-radius: 55px; - margin: 0 auto; - font-size: 1.3em; - color: #0d2840; - padding: 15px 30px 15px 45px; - transition: all .3s cubic-bezier(0,0,.5,1.5); - box-shadow: 0 3px 10px -2px rgba(0,0,0,.1); - background: rgba(255, 255, 255, 0.3) url(https://i.imgur.com/seveWIw.png) no-repeat center center; -} - - input.search_bar:focus{ - width: 100%; - background-position: calc(100% - 35px) center - } - -/*Removes default x in search fields (webkit only i guess)*/ -input[type=search]::-webkit-search-cancel-button { - -webkit-appearance: none; -} -/*Changes the color of the placeholder*/ -::-webkit-input-placeholder { - color: #0d2840; - opacity: .5; -} - -:-moz-placeholder { - color: #0d2840; - opacity: .5; -} - -::-moz-placeholder { - color: #0d2840; - opacity: .5; -} - -:-ms-input-placeholder { - color: #0d2840; - opacity: .5; -} - -/*search*/ - -/*Search2*/ -.searchBox { - width: 60px; - background: rgba(255, 255, 255, 0.3); - height: 60px; - border-radius: 40px; - padding: 10px; - margin: 0 auto; - transition: 0.8s; -} - -.searchInput:active > .searchBox{ - width:100% -} -.searchInput:focus > .searchBox { - width: 100% -} - -.searchInput::placeholder { - color:#fff; -} - -.searchBox:hover { - width: 100%; -} - - .searchBox:hover > .searchInput { - width: calc(100% - 60px); - padding: 0 6px; - } - - .searchBox:hover > .searchButton { - background: white; - color: #2f3640; - } - -.searchButton { - color: white; - float: right; - width: 40px; - height: 40px; - border-radius: 50px; - background-color: #e493d0; - background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - background-repeat: no-repeat; - animation: 10s movement linear infinite; - display: flex; - justify-content: center; - align-items: center; -} - -.searchInput { - border: none; - background: none; - outline: none; - font-size: 1.3em !important; - color: #0d2840 !important; - float: left; - padding: 0; - color: white; - font-size: 16px; - transition: 0.4s; - line-height: 40px; - width: 0px; -} - -/*Search2*/ - - -.event { - border-radius: 20px !important; - background-color: rgba(255, 255, 255, 0.2) !important; - backdrop-filter: blur(20px); - border: 0; - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.07); - transition: all 0.15s ease; -} - -/*card design*/ -.card { - border-radius: 20px !important; - overflow: hidden; - background-color: rgba(255, 255, 255, 0.2) !important; - backdrop-filter: blur(20px); - border: 0; - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.07); - transition: all 0.15s ease; -} - - .card:hover { - box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1), 0 10px 8px rgba(0, 0, 0, 0.015); - } - -.card-body .card-title { - font-family: 'Lato', sans-serif; - font-weight: 700; - letter-spacing: 0.3px; - font-size: 24px; - color: #121212; -} - -.card-text { - font-family: 'Lato', sans-serif; - font-weight: 400; - font-size: 15px; - letter-spacing: 0.3px; - color: #4E4E4E; -} - -.card .container { - width: 88%; - /*background: #F0EEF8;*/ - border-radius: 30px; - /*height: 140px;*/ - display: flex; - align-items: center; - justify-content: center; -} - -.container:hover > img { - transform: scale(1.2); -} - -.container img { - /*padding: 75px;*/ - /*margin-top: -40px; - margin-bottom: -40px;*/ - transition: 0.4s ease; - cursor: pointer; -} - -.btn:hover { - background-color: #e493d0; - background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - background-repeat: no-repeat; - animation: 10s movement linear infinite; -} - -.btn:focus { - background-color: #e493d0; - background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - background-repeat: no-repeat; - animation: 10s movement linear infinite; -} -/*card design*/ - -/*bg*/ - - -:root { - font-size: 15px; -} - -body { - /*font-family: 'Comfortaa', 'Arial Narrow', Arial, sans-serif;*/ - /*font-family: 'Quicksand', sans-serif;*/ - color: #fff !important; - margin: 0; - min-height: 100vh; - background-color: #000; - /*background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));*/ - /*background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;*/ - /*background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;*/ - background-repeat: no-repeat; - /*animation: 10s movement linear infinite;*/ -} - - body::after { - content: ''; - display: block; - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - } - -.myspan { - position: relative; - z-index: 10; - display: flex; - min-height: 100vh; - width: 100%; - justify-content: center; - align-items: center; - font-size: 5rem; - color: transparent; - text-shadow: 0px 0px 1px rgba(255, 255, 255, .6), 0px 4px 4px rgba(0, 0, 0, .05); - letter-spacing: .2rem; -} - -@keyframes movement { - 0%, 100% { - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - } - - 25% { - background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 60vmax 60vmax; - background-position: -60vmax -90vmax, 50vmax -40vmax, 0vmax -20vmax, -40vmax -20vmax, 40vmax 60vmax; - } - - 50% { - background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax, 60vmax 60vmax, 80vmax 80vmax; - background-position: -50vmax -70vmax, 40vmax -30vmax, 10vmax 0vmax, 20vmax 10vmax, 30vmax 70vmax; - } - - 75% { - background-size: 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 70vmax 70vmax; - background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0vmax, -10vmax 10vmax, 40vmax 60vmax; - } -} - - -/*bg*/ - -.mytextarea { - background-color: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(20px); - padding: 10px; - border-radius: 10px; - border-width: 0px; - height: unset !important; -} - - .mytextarea:active { - border-width: 0px; - } - - .mytextarea:focus-visible { - background-color: rgba(255, 255, 255, 0.5); - border-width: 0px !important; - outline: -webkit-focus-ring-color auto 0px; - outline-color: transparent; - } - -.navbar-toggler { - color: #fff; -} - -.navbar-brand { - font-size: 1.7rem; - color:#fff; -} - -.form-select { - background-color: rgba(255, 255, 255, 0.2); - border-radius: 5px; - display: unset !important; - color: #fff; -} - - .form-select > option { - background-color: rgba(255, 255, 255, 0.2) - } - -.contactform-overlay { - position: fixed; - z-index: 100; - height: 100vh; - width: 100%; - padding: 100px; - top: 0px; - left: 0px; - /* padding-top: 10vh; */ - backdrop-filter: blur(20px); - /* background-color: rgba(1, 1, 1, .4); */ -} - -.form-control { - background-color: rgba(255,255,255,0.4); - border-radius: 5px; - height: 50px; -} -.form-control::placeholder { - color:#fff; -} - -.contactform-close-overlay { - position: relative; - height: 10vh; -} - -.contactform-popup-content { - height: 80vh; - margin: 0px; - padding: 0px; -} - -.contactform-popup-close { - position: relative; - height: 10vh; - z-index: 80; -} - -.calendly-overlay { - position: absolute; - z-index: 100; - height: 100vh; - width: 100%; - top: 0px; - /* padding-top: 10vh; */ - backdrop-filter: blur(20px); - /* background-color: rgba(1, 1, 1, .4); */ -} - -.calendly-close-overlay { - position: relative; - height: 10vh; -} - -.calendly-popup-content { - height: 80vh; - margin: 0px; - padding: 0px; -} - -.calendly-popup-close { - position: relative; - height: 10vh; - z-index: 80; -} - -#myVideo { - position: fixed; - right: 0; - bottom: 0; - min-width: 100%; - min-height: 100%; - opacity: 0.2; -} - -.table { - color: #fff !important; - padding-top: 10px; - padding-bottom: 10px; - background-color: transparent; -} - -.navbar-collapse { - height: 100vh; - /*display: flex; - align-items: center; - justify-content: center;*/ - text-align: center !important; - align-content: center; -} - -.navbar-collapse .nav-link { - font-size: 1.5em; - letter-spacing: 2px; -} - -.navbar-collapse .nav-item:not(:last-child) { - border-bottom: 0px solid white; - padding: 0.2em 4em; -} - -.navbar { - background-color: #040206; - color: #fff; -} - -.nav-link { - color: #fff !important; -} - -.content { - top: 60px; -} - -.row { - margin-bottom: 10px; -} - -h1 { - color: #64CCC5; -} - -p { - color: #EEEEEE; - font-size: 1,1rem; -} -.container-fluid { - margin-bottom:20px; - padding: 20px; -} - -/* 🔽 Mobile Responsiveness */ -@media (max-width: 768px) { - h1 { font-size: 2rem; } - h2 { font-size: 1.6rem; } - h3 { font-size: 1.4rem; } - p, li { font-size: 1rem; } - .navbar-collapse .nav-link { font-size: 1.1rem; } - p {text-align: justify;} -} - -@media (max-width: 480px) { - h1 { font-size: 1.6rem; } - h2 { font-size: 1.3rem; } - h3 { font-size: 1.1rem; } - p, li { font-size: 0.95rem; } - .navbar-collapse .nav-link { font-size: 1rem; } - p {text-align: justify;} -} \ No newline at end of file diff --git a/wwwroot/temp/style_921c5e4e.css b/wwwroot/temp/style_921c5e4e.css deleted file mode 100644 index 748e9b7..0000000 --- a/wwwroot/temp/style_921c5e4e.css +++ /dev/null @@ -1,9073 +0,0 @@ -/** - * DarkStar - * Theme CSS - * Author: Dragan Milenkovic - * Copyright - 2022 Skilltech Web Design - skilltechwebdesign.com - * -------------------------------------------------------------- - * 1. Priority Load - * 2. Overrides / Enhances - * 3. Structure - * 4. Navigation Menus - * 5. Fonts - * 6. Forms and Buttons - * 7. General (transitions, sections, images, reusable style classes) - * 8. Hero Section - * 9. Half-screen Sections (parallax images, text, parallax text) - * 10. Numbers Section - * 11. About Us Section - * 12. Partners Section - * 13. Portfolio Section - * 14. Featured Project Section - * 15. Features Section - * 16. Laptop Section - * 17. Services Section - * 18. Skills Section (& Testimonials Section) - * 19. CTA Section (Warped CTA) - * 20. Contact Us Section - * 21. Browsers Section - * 22. Custom Animations, Effects & Decorations - * 23. Footer - * 24. PAGE: Portfolio Item - * 25. PAGE: Service Item - * 26. PAGE: News (Blog) - * 27. PAGE: News Item (Article) - * 28. Media Queries - * 29. Other - * 30. Theme Elements & Theme Preview Only CSS - * --------------------------------- - * -- Colors are in theme-colors.css - * --------------------------------- - * -- Gear menu is in theme-preview-color-styler.css - * ------------------------------------------------- - */ - -.navbar-collapse { - height: 100vh; - /*display: flex; - align-items: center; - justify-content: center;*/ - text-align: center !important; - align-content: center; - overflow-y: scroll; -} - -.navbar-collapse .nav-link { - font-size: 1.5em; - letter-spacing: 2px; -} - -.navbar-collapse .nav-item:not(:last-child) { - border-bottom: 1px solid gray; - padding: 0.2em 4em; -} - -.navbar { - background-color: #000; - color: #000; -} - -.nav-link { - color: #fff; -} - -.voicebutton { - width: 42.5px; -} - -.content { - top: 60px; -} - -/** - * 1. Priority Load - * ================ - */ - -.sk__master-curtain { - position: fixed; - width: 100vw; - height: 100vh; - top: 0; - left: 0; - z-index: 10001; - background-color: #000000; -} - -.mcurtain { - opacity: 0; - position: absolute; - width: 34%; - height: 100%; - top: 0; - -webkit-transform-origin: center top; - -ms-transform-origin: center top; - transform-origin: center top; - -webkit-transform: scaleY(1); - -ms-transform: scaleY(1); - transform: scaleY(1); - background-size: cover; - background-position: center; - background-repeat: no-repeat; -} - -.mcurtain.mcurtain-visible { - -webkit-transition: all 0.8s ease-in 0s; - -o-transition: all 0.8s ease-in 0s; - transition: all 0.8s ease-in 0s; - opacity: 1; -} - -.mcurtain-left { - left: 0; - background-image: url(../../assets/images/curtain-background-left.svg); -} - -.mcurtain-center { - background-image: url(../../assets/images/curtain-background-center.svg); - left: 33.333%; -} - -.mcurtain-right { - background-image: url(../../assets/images/curtain-background-right.svg); - left: 66.666%; -} - -.sk__master-curtain { - position: fixed; - width: 100vw; - height: 100vh; - top: 0; - left: 0; - z-index: 10000; -} - -@-webkit-keyframes slowZoom { - 0% { - background-color: #0A0A0A; - -webkit-transform: scale(1); - transform: scale(1); - } - 20% { - background-color: #0A0A0A; - -webkit-transform: scale(1.02); - transform: scale(1.02); - } - 85% { - background-color: #0A0A0A; - -webkit-transform: scale(1.085); - transform: scale(1.085); - } - 100% { - background-color: rgba(10,10,10,0); - -webkit-transform: scale(1.1); - transform: scale(1.1); - } -} - -@keyframes slowZoom { - 0% { - background-color: #0A0A0A; - -webkit-transform: scale(1); - transform: scale(1); - } - 20% { - background-color: #0A0A0A; - -webkit-transform: scale(1.02); - transform: scale(1.02); - } - 85% { - background-color: #0A0A0A; - -webkit-transform: scale(1.085); - transform: scale(1.085); - } - 100% { - background-color: rgba(10,10,10,0); - -webkit-transform: scale(1.1); - transform: scale(1.1); - } -} -.sk__master-curtain { - -webkit-transform-origin: 50% 70%; - -ms-transform-origin: 50% 70%; - transform-origin: 50% 70%; - -webkit-animation: slowZoom 3s ease-out 0s forwards; - animation: slowZoom 3s ease-out 0s forwards; -} - -/* Innitially hidden elements, revealed with JS */ - -[class*=sk__fade-in-], -.sk__mobile-main-logo, -.navbar-brand, -.hc-nav-trigger, -.sk__mobile-menu-bar, -.sk__body-section, -.sk__services-page .sk__iconbox .sk__iconbox-icon-link, -.sk__services-page .sk__iconbox .sk__iconbox-text-link, -.sk__services-page .sk__iconbox > p, -.sk__proj-infobox-label, -.sk__proj-infobox-value { - opacity: 0; -} - -/** - * Wrapper for text that will have clip-style reveal effect. - * If you wrap your text into .cover-text-wrapper use JS to - * reveal it. Use scrollRevealText() and revealText() functions, - * examples are already in the JS file. - * - * A container div/section with class .sk__reveal-all-wrapped-text - * will automatically reveal all text children wrapperd in - * .cover-text-wrapper class - */ - -.cover-text-wrapper { - position: relative; - overflow: hidden; -} - -.cover-text-wrapper > * { - opacity: 0; -} - -/** - * Animated Headlines - */ -.sk__animated-headline-words { - -webkit-perspective: 388px; - perspective: 388px; - -webkit-perspective-origin: 50% 50%; - perspective-origin: 50% 50%; - display: inline-block; - position: relative; - text-align: center; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -.sk__animated-headline-words span.lvl2 { - display: inline-block; - position: absolute; - white-space: nowrap; - left: 0; - top: 0; - padding: 0 5px; -} -.sk__animated-headline-words span.lvl2.sk__visible { - position: relative; -} -.sk__animated-headline span.lvl1 { - display: inline-block; -} -.sk__animated-headline span.lvl1:not(.sk__animated-headline-words) { - padding: 0; -} -.sk__animated-headline .sk__animated-headline-words { - overflow: hidden; - vertical-align: top; - padding: 0.21em 0 0.21em 15px; - margin: -0.21em -5px -0.21em -20px; -} -.sk__animated-headline span.lvl2 { - opacity: 0; - top: 0.2em; -} -.sk__animated-headline span.lvl2.sk__visible { - top: 0; - opacity: 1; - -webkit-transform-origin: center 90%; - -ms-transform-origin: center 90%; - transform-origin: center 90%; - -webkit-animation: slideFromBottom 0.45s ease-out 0s; - animation: slideFromBottom 0.45s ease-out 0s; -} -.sk__animated-headline span.lvl2.sk__hidden { - -webkit-transform-origin: center 0%; - -ms-transform-origin: center 0%; - transform-origin: center 0%; - -webkit-animation: slideToTop 0.4s ease-in 0s; - animation: slideToTop 0.4s ease-in 0s; -} -@-webkit-keyframes slideToTop { - 0% { - opacity: 1; - -webkit-transform: rotateX(0deg) scaleY(1) scaleX(1) translateY(0) translateX(15px); - transform: rotateX(0deg) scaleY(1) scaleX(1) translateY(0) translateX(15px); - } - 50% { - opacity: 0.3; - -webkit-transform: rotateX(33deg) scaleY(0.6) scaleX(0.9) translateY(-20px) translateX(15px); - transform: rotateX(33deg) scaleY(0.6) scaleX(0.9) translateY(-20px) translateX(15px); - } - 100% { - opacity: 0; - -webkit-transform: rotateX(76deg) scaleY(0.1) scaleX(0.75) translateY(-30px) translateX(15px); - transform: rotateX(76deg) scaleY(0.1) scaleX(0.75) translateY(-30px) translateX(15px); - } -} -@keyframes slideToTop { - 0% { - opacity: 1; - -webkit-transform: rotateX(0deg) scaleY(1) scaleX(1) translateY(0) translateX(15px); - transform: rotateX(0deg) scaleY(1) scaleX(1) translateY(0) translateX(15px); - } - 50% { - opacity: 0.3; - -webkit-transform: rotateX(33deg) scaleY(0.6) scaleX(0.9) translateY(-20px) translateX(15px); - transform: rotateX(33deg) scaleY(0.6) scaleX(0.9) translateY(-20px) translateX(15px); - } - 100% { - opacity: 0; - -webkit-transform: rotateX(76deg) scaleY(0.1) scaleX(0.75) translateY(-30px) translateX(15px); - transform: rotateX(76deg) scaleY(0.1) scaleX(0.75) translateY(-30px) translateX(15px); - } -} -@-webkit-keyframes slideFromBottom { - 0% { - opacity: 0; - -webkit-transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); - transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); - } - 14.28% { - opacity: 0; - -webkit-transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); - transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); - } - 35% { - opacity: 1; - -webkit-transform: rotateX(-55.9deg) translateY(20px) translateZ(30px) scaleZ(2.35); - transform: rotateX(-55.9deg) translateY(20px) translateZ(30px) scaleZ(2.35); - } - 50% { - opacity: 1; - -webkit-transform: rotateX(-43deg) translateY(10px) translateZ(20px) scaleZ(2); - transform: rotateX(-43deg) translateY(10px) translateZ(20px) scaleZ(2); - } - 100% { - opacity: 1; - -webkit-transform: rotateX(0deg) translateY(0) translateZ(0) scaleZ(1); - transform: rotateX(0deg) translateY(0) translateZ(0) scaleZ(1); - } -} -@keyframes slideFromBottom { - 0% { - opacity: 0; - -webkit-transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); - transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); - } - 14.28% { - opacity: 0; - -webkit-transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); - transform: rotateX(-86deg) translateY(30px) translateZ(60px) scaleZ(3); - } - 35% { - opacity: 1; - -webkit-transform: rotateX(-55.9deg) translateY(20px) translateZ(30px) scaleZ(2.35); - transform: rotateX(-55.9deg) translateY(20px) translateZ(30px) scaleZ(2.35); - } - 50% { - opacity: 1; - -webkit-transform: rotateX(-43deg) translateY(10px) translateZ(20px) scaleZ(2); - transform: rotateX(-43deg) translateY(10px) translateZ(20px) scaleZ(2); - } - 100% { - opacity: 1; - -webkit-transform: rotateX(0deg) translateY(0) translateZ(0) scaleZ(1); - transform: rotateX(0deg) translateY(0) translateZ(0) scaleZ(1); - } -} - - -/** - * 2. Overrides / Enhances - * ======================= - */ - -/** - * Override bootstrap's scroll-behavior rule - * to avoid conflict with GSAP ScrollSmoother - */ -@media (prefers-reduced-motion: no-preference) { - :root { - scroll-behavior: initial; - } -} - -/** - * Custom theme bootstrap containers - * container < super < power < ultra - */ -@media all and (min-width: 1500px) { - .sk__supercontainer.container, - .sk__supercontainer.container-lg, - .sk__supercontainer.container-md, - .sk__supercontainer.container-sm, - .sk__supercontainer.container-xl { - max-width: 1460px; - } -} -@media all and (min-width: 1500px) and (max-width: 1779px) { - .sk__powercontainer.container, - .sk__powercontainer.container-lg, - .sk__powercontainer.container-md, - .sk__powercontainer.container-sm, - .sk__powercontainer.container-xl, - .sk__ultracontainer.container, - .sk__ultracontainer.container-lg, - .sk__ultracontainer.container-md, - .sk__ultracontainer.container-sm, - .sk__ultracontainer.container-xl { - max-width: 1460px; - } -} -@media all and (min-width: 1780px) and (max-width: 1920px) { - .sk__powercontainer.container, - .sk__powercontainer.container-lg, - .sk__powercontainer.container-md, - .sk__powercontainer.container-sm, - .sk__powercontainer.container-xl, - .sk__ultracontainer.container, - .sk__ultracontainer.container-lg, - .sk__ultracontainer.container-md, - .sk__ultracontainer.container-sm, - .sk__ultracontainer.container-xl { - max-width: 1740px; - } -} -@media all and (min-width: 1921px) { - .sk__powercontainer.container, - .sk__powercontainer.container-lg, - .sk__powercontainer.container-md, - .sk__powercontainer.container-sm, - .sk__powercontainer.container-xl { - max-width: 1740px; - } - .sk__ultracontainer.container, - .sk__ultracontainer.container-lg, - .sk__ultracontainer.container-md, - .sk__ultracontainer.container-sm, - .sk__ultracontainer.container-xl { - max-width: 1910px; - } -} - -@media all and (max-width: 575px) { /* xs */ - - .row > * { - padding-left: 20px; - padding-right: 20px; - } - -} - - -/** - * 3. Structure - * ============ - */ - -.px-15px { - padding-left: 15px; - padding-right: 15px; -} - -.mw-660 { - max-width: 660px; -} - -.mw-560 { - max-width: 560px; -} - -.mw-440 { - max-width: 440px; -} - -.mw-320 { - max-width: 320px; -} - -/** - * Vertical paddings suitable for header sections - * y assigns both top and bottom padding, - * t assigns top and b bottom padding only. - * m = medium (normal) padding, l = large padding - */ -.sk__header-y-m, -.sk__header-t-m { - padding-top: 190px; -} -.sk__header-y-m, -.sk__header-b-m { - padding-bottom: 128px; -} -@media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ - .sk__header-y-m, - .sk__header-t-m { - padding-top: 125px; - } - .sk__header-y-m, - .sk__header-b-m { - padding-bottom: 78px; - } -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .sk__header-y-m, - .sk__header-t-m { - padding-top: 190px; - } - .sk__header-y-m, - .sk__header-b-m { - padding-bottom: 80px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__header-y-m, - .sk__header-t-m { - padding-top: 190px; - } - .sk__header-y-m, - .sk__header-b-m { - padding-bottom: 96px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__header-y-m, - .sk__header-t-m{ - padding-top: 120px; - } - .sk__header-y-m, - .sk__header-b-m { - padding-bottom: 60px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__header-y-m, - .sk__header-t-m { - padding-top: 114px; - } - .sk__header-y-m, - .sk__header-b-m { - padding-bottom: 52px; - } -} - -.sk__header-y-l, -.sk__header-t-l { - padding-top: 284px; -} -.sk__header-y-l, -.sk__header-b-l { - padding-bottom: 238px; -} -@media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ - .sk__header-y-l - .sk__header-t-l { - padding-top: 176px; - } - .sk__header-y-l - .sk__header-b-l { - padding-bottom: 115px; - } -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .sk__header-y-l - .sk__header-t-l { - padding-top: 176px; - } - .sk__header-y-l - .sk__header-b-l { - padding-bottom: 91px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__header-y-l - .sk__header-t-l { - padding-top: 284px; - } - .sk__header-y-l - .sk__header-b-l { - padding-bottom: 206px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__header-y-l - .sk__header-t-l { - padding-top: 123px; - } - .sk__header-y-l - .sk__header-b-l { - padding-bottom: 53px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__header-y-l - .sk__header-t-l { - padding-top: 130px; - } - .sk__header-y-l - .sk__header-b-l { - padding-bottom: 65px; - } -} - -/** - * Vertical paddings suitable for body sections - * py = both top and bottom paddings - * pt = top padding, pb = bottom padding - * s = small paddings, m = medium, l = large, - * xl = extra large - */ -.sk__py-s, .sk__pt-s { - padding-top: 100px; -} -.sk__py-m, .sk__pt-m { - padding-top: 140px; -} -.sk__py-l, .sk__pt-l { - padding-top: 170px; -} -.sk__py-xl, .sk__pt-xl { - padding-top: 300px; -} -.sk__py-s, .sk__pb-s { - padding-bottom: 50px; -} -.sk__py-m, .sk__pb-m { - padding-bottom: 160px; -} -.sk__py-l, .sk__pb-l { - padding-bottom: 170px; -} -.sk__py-xl, .sk__pb-xl { - padding-bottom: 230px; -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__py-l, .sk__pt-l { - padding-top: 140px; - } - .sk__py-xl, .sk__pt-xl { - padding-top: 160px; - } - .sk__py-l, .sk__pb-l { - padding-bottom: 140px; - } - .sk__py-xl, .sk__pb-xl { - padding-bottom: 160px; - } -} -@media all and (max-width: 767px) { /* custom xs + sm */ - .sk__py-xl, .sk__pt-xl { - padding-top: 125px; - padding-top: 80px; - } - .sk__py-xl, .sk__pb-xl { - padding-bottom: 115px; - padding-bottom: 50px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__py-m, .sk__pt-m, .sk__py-l, .sk__pt-l { - padding-top: 100px; - } - .sk__py-m, .sk__pb-m, .sk__py-l, .sk__pb-l { - padding-bottom: 100px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__py-s, .sk__pt-s { - padding-top: 60px; - } - .sk__py-m, .sk__pt-m { - padding-top: 60px; - } - .sk__py-l, .sk__pt-l { - padding-top: 70px; - } - .sk__py-s, .sk__pb-s { - padding-bottom: 50px; - } - .sk__py-m, .sk__pb-m { - padding-bottom: 60px; - } - .sk__py-l, .sk__pb-l { - padding-bottom: 60px; - } -} - -/** - * Vertical paddings for header within a body section - */ - -.sk__inner-header { - padding-bottom: 48px; -} -@media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ - .sk__inner-header { - padding-bottom: 48px; - } -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .sk__inner-header { - padding-bottom: 24px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__inner-header { - padding-bottom: 16px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__inner-header { - padding-top: 24px; - padding-bottom: 40px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__inner-header { - padding-top: 24px; - padding-bottom: 24px; - } -} - -/** - * Vertical paddings for the simple strip header - */ - -.sk__strip-header { - padding-top: 100px; - padding-bottom: 100px; -} -@media all and (min-width: 1200px) and (max-width: 1920px) { /* custom */ - .sk__strip-header { - padding-top: 84px; - padding-bottom: 75px; - } -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .sk__strip-header { - padding-top: 64px; - padding-bottom: 57px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__strip-header { - padding-top: 64px; - padding-bottom: 57px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__strip-header { - padding-top: 64px; - padding-bottom: 57px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__strip-header { - padding-top: 54px; - padding-bottom: 47px; - } -} - -/** - * Standard sections - */ - -/** - * Section that centers content vertically, - * sets width to 100% and position to relative. - * For other use, see flex-center, flex-center-x - * and flex-center-y - */ -section.sk__centered-section, /* deprecated, use Y class */ -section.sk__centered-y-section, -.sk__centered-section, /* deprecated, use Y class */ -.sk__centered-y-section { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - position: relative; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 100%; -} - -/* Full height */ - -.sk__full-height { - height: 100vh; -} - -/** - * Absolutely positioned child/inner element that fills the entire - * parent (parent should have 'position': 'relative' or 'fixed') - */ - -.sk__absolute { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -/** - * Align children to center (horizontally and vertically) using display flex - */ - -.sk__flex-center, -.sk__hero-item-theme-style.sk__flex-center { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} - -/** - * Align children to center (horizontally) using display flex - */ - -.sk__flex-center-x { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} - -/** - * Align children to center (vertically) using display flex - * (Section that centers content vertically - new) - */ - -.sk__flex-center-y { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -/** - * Prepare for flex alignment of children, but don't specify alignment - */ - -.sk__flex { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; - flex-flow: row wrap; -} - -/* Heading spacers (bottom paddings) */ - -.sk__heading-spacer-xs { - padding-bottom: 20px; -} -.sk__heading-spacer-s { - padding-bottom: 60px; -} -.sk__heading-spacer-m { - padding-bottom: 90px; -} -.sk__heading-spacer-l { - padding-bottom: 110px; -} -.sk__heading-spacer-xl { - padding-bottom: 110px; -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__heading-spacer-s { - padding-bottom: 60px; - } - .sk__heading-spacer-m { - padding-bottom: 70px; - } - .sk__heading-spacer-l { - padding-bottom: 80px; - } - .sk__heading-spacer-xl { - padding-bottom: 80px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__heading-spacer-xs { - padding-bottom: 10px; - } - .sk__heading-spacer-s { - padding-bottom: 30px; - } - .sk__heading-spacer-m { - padding-bottom: 50px; - } - .sk__heading-spacer-l { - padding-bottom: 50px; - } - .sk__heading-spacer-xl { - padding-bottom: 50px; - } -} -@media all and (min-width: 1921px) { - .sk__heading-spacer-xl { - padding-bottom: 150px; - } -} - -/** - * Z-index helper classes - */ -.sk__z0, .sk__hover-z0:hover { z-index: 0; } -.sk__z1, .sk__hover-z1:hover { z-index: 1; } -.sk__z2, .sk__hover-z2:hover { z-index: 2; } -.sk__z3, .sk__hover-z3:hover { z-index: 3; } -.sk__z4, .sk__hover-z4:hover { z-index: 4; } -.sk__z5, .sk__hover-z5:hover { z-index: 5; } -.sk__z6, .sk__hover-z6:hover { z-index: 6; } -.sk__z7, .sk__hover-z7:hover { z-index: 7; } -.sk__z8, .sk__hover-z8:hover { z-index: 8; } -.sk__z9, .sk__hover-z9:hover { z-index: 9; } -.sk__z10, .sk__hover-z10:hover { z-index: 10; } -.sk__z-1, .sk__hover-z-1:hover { z-index: -1; } -.sk__z-2, .sk__hover-z-2:hover { z-index: -2; } -.sk__z-3, .sk__hover-z-3:hover { z-index: -3; } -.sk__z-4, .sk__hover-z-4:hover { z-index: -4; } -.sk__z-5, .sk__hover-z-5:hover { z-index: -5; } -.sk__z-6, .sk__hover-z-6:hover { z-index: -6; } -.sk__z-7, .sk__hover-z-7:hover { z-index: -7; } -.sk__z-8, .sk__hover-z-8:hover { z-index: -8; } -.sk__z-9, .sk__hover-z-9:hover { z-index: -9; } -.sk__z-10, .sk__hover-z-10:hover { z-index: -10; } - - -/* - * 4. Navigation Menus - * =================== - * Match Mobile & Desktop media queries - * to 'disableAt' in theme.js file. - * See documentation for more info. - */ - -.sk__logo-no-menu { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100px; - z-index: 4; -} -@media all and (max-width: 767px) { /* xs + sm */ - .sk__logo-no-menu { - height: 60px; - } -} -.sk__logo-no-menu img { - height: 100%; - width: auto; -} - -nav a em { - font-style: initial; - font-weight: 700; -} - -.sk__navbar { - -webkit-transition: all 0.4s ease-out 0s; - -o-transition: all 0.4s ease-out 0s; - transition: all 0.4s ease-out 0s; - border-bottom: 1px solid rgba(255,255,255,0.07); -} - -body.sk__scrolling-started .sk__navbar { - background-color: rgba(0,0,0,0.94); - border-bottom: 1px solid rgba(255,255,255,0.13); -} - -/* menu icons */ -span.sk__menu-icon { - display: inline-block; - position: relative; - width: 16px; - height: 24px; - margin-right: 10px; - margin-bottom: -6px; - border-radius: 12px; - font-size: 14px; - color: #afb1b5; -} - -span.sk__menu-icon:not(.accented):not(.sk__gradient-back-v1) { - background: transparent; -} - -span.sk__menu-icon.accented { - background: #71797c; -} - -span.sk__menu-icon.accented, -span.sk__menu-icon.sk__gradient-back-v1 { - width: 24px; - margin: 0 8px -6px -3px; - color: #ffffff; - text-shadow: 1px 1px 1px rgba(0,0,0,0.2); -} - -span.sk__menu-icon i, -span.sk__menu-icon span[class^="icon-"] { - text-align: center; - line-height: 24px; -} - -span.sk__menu-icon.green i, -span.sk__menu-icon.green span[class^="icon-"] { - color: #6fd105; -} - -span.sk__menu-icon.accented i, -span.sk__menu-icon.sk__gradient-back-v1 i, -span.sk__menu-icon.accented span[class^="icon-"], -span.sk__menu-icon.sk__gradient-back-v1 span[class^="icon-"] { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - line-height: 24px; - font-size: 13px; - text-align: center; -} - -span.sk__menu-icon:not(.accented):not(.sk__gradient-back-v1) i, -span.sk__menu-icon:not(.accented):not(.sk__gradient-back-v1) span[class^="icon-"] { - position: inherit; - width: auto; -} - -.sk__icon-popup-text { - position: absolute; - top: 34px; - left: -50%; - left: 18px; - min-width: 172px; - line-height: 23px; - -webkit-transition: all 0.3s ease 0.3s, color 0.4s ease 0s; - -o-transition: all 0.3s ease 0.3s, color 0.4s ease 0s; - transition: all 0.3s ease 0.3s, color 0.4s ease 0s; - -webkit-transform-origin: center top; - -ms-transform-origin: center top; - transform-origin: center top; - opacity: 0; - -webkit-transform: scaleY(0); - -ms-transform: scaleY(0); - transform: scaleY(0); - color: rgba(255,255,255,0); - background: rgba(26,27,28,0.97); - padding: 0; - font-size: 0; -} -.nav-item:last-child .sk__icon-popup-text { - top: -52px; - -webkit-transform-origin: center bottom; - -ms-transform-origin: center bottom; - transform-origin: center bottom; -} -.nav-item:nth-last-child(2) .sk__icon-popup-text { - top: -22px; - -webkit-transform-origin: center bottom; - -ms-transform-origin: center bottom; - transform-origin: center bottom; -} - -.sk__icon-popup:hover .sk__icon-popup-text { - -webkit-transition: all 0.4s ease 0s, color 0.3s ease 0.3s; - -o-transition: all 0.4s ease 0s, color 0.3s ease 0.3s; - transition: all 0.4s ease 0s, color 0.3s ease 0.3s; - -webkit-transform: scaleY(1); - -ms-transform: scaleY(1); - transform: scaleY(1); - opacity: 1; - padding: 10px 12px; - font-size: 13px; - color: #ffffff; -} - - -/* - * Mobile Menu - * =========== - * done with off-canvas-menu, - * there are only additions & overrides - */ - -@media all and (max-width: 1899px) { /* menu crossover (-1) */ - - .sk__mobile-menu-bar { - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100px; - border-bottom: 1px solid rgba(255,255,255,0.12); - z-index: 9998; - } - - body.sk__scrolling-started .sk__mobile-menu-bar { - border-bottom: 1px solid rgba(255,255,255,0); - } - - body.sk__scrolling-started.sk__solid-menu .sk__mobile-menu-bar { - background-color: rgba(0,0,0,0.94); - border-bottom: 1px solid rgba(255,255,255,0.13); - } - - .sk__mobile-main-logo { - position: fixed; - top: 0; - left: 0; - z-index: 9998; - -webkit-filter: drop-shadow(1px 2px 0px rgba(0,0,0,0.33)); - filter: drop-shadow(1px 2px 0px rgba(0,0,0,0.33)); - -webkit-backface-visibility: hidden; - } - - .sk__mobile-main-logo img { - width: auto; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - } - - body.sk__nav-open .sk__mobile-main-logo { - opacity: 0 !important; - } - - .hc-offcanvas-nav { - font-family: 'Poppins', sans-serif; - } - - .nav-content { - padding: 10px; - background: #000000; - border-left: 1px solid #212528; - } - - .hc-offcanvas-nav .nav-item-link, - .hc-offcanvas-nav li.nav-close a, - .hc-offcanvas-nav .nav-back a, - .hc-offcanvas-nav .nav-content > .nav-close a { - font-size: 13px; - } - - .hc-offcanvas-nav .nav-back span::before { - margin-left: 0px; - -webkit-transform: translate(-50%, -50%) rotate(135deg); - -ms-transform: translate(-50%, -50%) rotate(135deg); - transform: translate(-50%, -50%) rotate(135deg); - } - - .hc-offcanvas-nav .nav-content > h2, - .hc-offcanvas-nav .nav-content > h3, - .hc-offcanvas-nav .nav-content > h4, - .hc-offcanvas-nav .nav-content > h5, - .hc-offcanvas-nav .nav-content > h6 { - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - margin-bottom: 0; - font-size: 16px; - font-weight: 700; - text-transform: uppercase; - padding: 32px 17px 22px; - } - - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h2, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h3, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h4, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h5, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h6 { - padding: 13px 17px 11px; - } - - .hc-nav-trigger { - width: 35px; - height: 30px; - position: fixed; - top: 36px; - right: 37px; - cursor: pointer; - display: inline-block; - -webkit-transition: 0.4s ease 0s; - -o-transition: 0.4s ease 0s; - transition: 0.4s ease 0s; - z-index: 9999; - -webkit-transform-origin: center center; - -ms-transform-origin: center center; - transform-origin: center center; - } - - .hc-nav-trigger.toggle-open { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - right: 16px; - top: 38px; - } - - .hc-nav-trigger span, - .hc-nav-trigger span:before, - .hc-nav-trigger span:after { - background-color:#FFF; - position: absolute; - border-radius: 2px; - -webkit-transition: .3s cubic-bezier(.8, .5, .2, 1.4); - -o-transition: .3s cubic-bezier(.8, .5, .2, 1.4); - transition: .3s cubic-bezier(.8, .5, .2, 1.4); - width:100%; - height: 4px; - } - .hc-nav-trigger span { - top:0px; - left: 0px; - } - .hc-nav-trigger span:before { - top:13px; - left: 0px; - } - .hc-nav-trigger span:after { - top: 26px; - left: 0px; - } - .hc-nav-trigger:not(.toggle-open) span { - -webkit-filter: drop-shadow(1px 2px 0px rgba(0,0,0,0.33)); - filter: drop-shadow(1px 2px 0px rgba(0,0,0,0.33)); - } - - .hc-nav-trigger.toggle-open span { - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); - top: 13px; - } - .hc-nav-trigger.toggle-open span:before { - -webkit-transition-duration: 50ms; - -o-transition-duration: 50ms; - transition-duration: 50ms; - } - .hc-nav-trigger.toggle-open span::before { - -webkit-transform: translate3d(0, -12px, 0); - transform: translate3d(0, -12px, 0); - } - .hc-nav-trigger.toggle-open span:after { - top: 13px; - } - .hc-nav-trigger.toggle-open span::after { - -webkit-transform: rotate(-90deg) translate3d(12px, 0, 0); - transform: rotate(-90deg) translate3d(12px, 0, 0); - } - a.hc-nav-trigger:focus { - outline: none; - } - - /* use disableBody:true CSS even with disableBody:false */ - .hc-offcanvas-nav.nav-open::after, - .hc-offcanvas-nav .sub-level-open::after { - visibility: visible; - opacity: 1; - -webkit-transition-delay: .05s; - -o-transition-delay: .05s; - transition-delay: .05s; - } - .hc-offcanvas-nav::after { - position: fixed; - } - .hc-offcanvas-nav::after, - .hc-offcanvas-nav .nav-wrapper::after { - content: ''; - z-index: 9990; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - -ms-scroll-chaining: none; - overscroll-behavior: none; - visibility: hidden; - opacity: 0; - -webkit-transition: visibility 0s ease .4s,opacity .4s ease; - -o-transition: visibility 0s ease .4s,opacity .4s ease; - transition: visibility 0s ease .4s,opacity .4s ease; - } - - /* Mobile menu items background, mobile menu item background */ - .hc-offcanvas-nav .nav-container, - .hc-offcanvas-nav .nav-wrapper, - .hc-offcanvas-nav ul { - background: #000000; - } - - .hc-offcanvas-nav .nav-content > .nav-close:first-child a, - .hc-offcanvas-nav .nav-title + .nav-close a.has-label, - .hc-offcanvas-nav li.nav-close a, - .hc-offcanvas-nav .nav-back a { - -webkit-transition: background-color 0.3s ease 0s; - -o-transition: background-color 0.3s ease 0s; - transition: background-color 0.3s ease 0s; - background: #0f0f10; - border-top: 1px solid #1b1e20; - } - - .hc-offcanvas-nav .nav-item-link, - .hc-offcanvas-nav li.nav-close a, - .hc-offcanvas-nav .nav-back a { - padding: 3px 17px; - } - .hc-offcanvas-nav .nav-content > ul > li > .nav-item-wrapper > .nav-item-link { - padding: 8px 17px; - } - .hc-offcanvas-nav .nav-content > ul > li.nav-parent.level-open .nav-item-wrapper > .nav-item-link { - padding: 3px 17px; - } - - .hc-offcanvas-nav .nav-content > .nav-close:first-child a:hover, - .hc-offcanvas-nav .nav-title + .nav-close a.has-label:hover, - .hc-offcanvas-nav li.nav-close a:hover, - .hc-offcanvas-nav .nav-back a:hover { - background: #09090a; - color: #ffffff; - } - - .hc-offcanvas-nav:not(.touch-device) li:not(.nav-item-custom) a:not([disabled]):hover { - background: #09090a; - } - - .hc-offcanvas-nav .nav-content > .nav-close a:hover { - border-left: 0px solid #0e171f; - } - - .hc-offcanvas-nav .nav-item-link, - .hc-offcanvas-nav li.nav-close a, - .hc-offcanvas-nav .nav-back a, - .hc-offcanvas-nav a.nav-next { - border-bottom: 1px solid #1d1d1e; - } - - .hc-offcanvas-nav .nav-wrapper-0 > .nav-content > ul:first-of-type > li:first-child:not(.nav-back):not(.nav-close) > .nav-item-wrapper > .nav-item-link { - border-top: 1px solid #1d1d1e; - } - - .hc-offcanvas-nav .nav-content > h2, - .hc-offcanvas-nav .nav-content > h3, - .hc-offcanvas-nav .nav-content > h4, - .hc-offcanvas-nav .nav-content > h5, - .hc-offcanvas-nav .nav-content > h6 { - color: #ffffff; - } - - .hc-offcanvas-nav .nav-close-button span, - .hc-offcanvas-nav .nav-parent .nav-next, - .hc-offcanvas-nav .nav-back span { - -webkit-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - transform: scale(-1, 1); - } - - .hc-offcanvas-nav a.nav-next { - border-left: none; - } - - .hc-offcanvas-nav .nav-wrapper-0>.nav-content>ul:not(:last-child) { - border-bottom: 0px solid #1d1d1e; - } - - .hc-offcanvas-nav .nav-close-button span::before { - margin-left: -6px; - } - - .hc-offcanvas-nav::after, - .hc-offcanvas-nav .nav-wrapper::after { - background: rgba(0,0,0,0.85); - } - - .hc-offcanvas-nav .nav-custom-content { - border-bottom: 0px solid #1d1d1e; - } - - li.nav-item.nav-item-custom { - background: #000000; - } - - .nav-custom-content .footer-socials-section { - padding-top: 10px; - } - - .nav-custom-content .footer-socials-section h3 { - font-size: 19px; - margin-bottom: 0; - } - - .nav-custom-content .footer-socials-section .footer-socials a { - font-size: 12px; - margin: 0 3px 8px 0; - width: 35px; - height: 35px; - line-height: 34px; - } - - /* If close buttons are set to false in JS */ - - li.custom-content.sk__mobile-menu-logo > div { - padding: 0; - } - - li.custom-content.sk__mobile-menu-logo { - position: absolute; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - top: 19px; - padding-left: 15px; - width: 100%; - background: #101112; - border-bottom: 1px solid #1b1e20; - } - - .sk__mobile-menu-logo img { - height: 66px; - width: auto; - } - - ul.navbar-nav { - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - margin-top: 86px; - overflow: hidden; - } - - ul.sk__sub-submenu-ul, - ul.sk__submenu-ul { - margin-top: 10px; - } - - /** - * decrease right padding on mobile links so that more text - * could fit in before collapsing into next line - */ - .hc-offcanvas-nav li.nav-parent .nav-item-link:last-child { - padding-right: 26px; - } - - /* fix for chrome blurry 3d translate */ - .pushable-content { - -webkit-font-smoothing: subpixel-antialiased; - } - -} - -/** - * Mobile Menu - XS Only - * --------------------- - */ -@media all and (max-width: 767px) { - - .sk__mobile-menu-bar { - height: 60px; - } - body.sk__scrolling-started .sk__mobile-menu-bar { - height: 44px; - background-color: rgba(0,0,0,0.94); - border-bottom: 1px solid rgba(255,255,255,0.13); - } - - .sk__mobile-main-logo img { - height: 60px; - } - body.sk__scrolling-started .sk__mobile-main-logo img { - height: 44px; - } - - .hc-nav-trigger { - top: 17px; - right: 15px; - -webkit-transform: scale(0.76); - -ms-transform: scale(0.76); - transform: scale(0.76); - } - - .hc-nav-trigger.toggle-open { - top: 37px; - right: 10px; - -webkit-transform: scale(1) rotate(45deg); - -ms-transform: scale(1) rotate(45deg); - transform: scale(1) rotate(45deg); - } - - body.sk__scrolling-started .hc-nav-trigger { - top: 1px; - right: -2px; - -webkit-transform: scale(0.5); - -ms-transform: scale(0.5); - transform: scale(0.5); - top: 8px; - right: 6px; - -webkit-transform: scale(0.7); - -ms-transform: scale(0.7); - transform: scale(0.7); - } - - body.sk__scrolling-started .hc-nav-trigger.toggle-open { - top: 20px; - right: 10px; - -webkit-transform: scale(1) rotate(45deg); - -ms-transform: scale(1) rotate(45deg); - transform: scale(1) rotate(45deg); - } - - body.sk__scrolling-started li.custom-content.sk__mobile-menu-logo { - top: 0; - } - - body.sk__scrolling-started ul.navbar-nav { - margin-top: 66px; - } - - body.sk__scrolling-started .nav-back { - margin-top: 10px; - } - -} - -/* - * Mobile Menu - MEDIUM Only - * ------------------------- - */ -@media all and (min-width: 768px) and (max-width: 991px) { - - body.sk__scrolling-started .sk__mobile-menu-bar { - height: 60px; - background-color: rgba(0,0,0,0.94); - border-bottom: 1px solid rgba(255,255,255,0.13); - } - - .sk__mobile-main-logo img { - height: 100px; - } - body.sk__scrolling-started .sk__mobile-main-logo img { - height: 60px; - } - - .hc-offcanvas-nav .nav-content > h2, - .hc-offcanvas-nav .nav-content > h3, - .hc-offcanvas-nav .nav-content > h4, - .hc-offcanvas-nav .nav-content > h5, - .hc-offcanvas-nav .nav-content > h6 { - padding: 32px 17px 22px; - } - - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h2, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h3, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h4, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h5, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h6 { - padding: 13px 17px 11px; - } - - .nav-back { - margin-top: 11px; - } - - body.sk__scrolling-started .hc-nav-trigger { - top: 17px; - right: 15px; - -webkit-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); - } - - .hc-nav-trigger.toggle-open { - -webkit-transform: scale(1) rotate(45deg); - -ms-transform: scale(1) rotate(45deg); - transform: scale(1) rotate(45deg); - } - - body.sk__scrolling-started .hc-nav-trigger.toggle-open { - -webkit-transform: scale(1) rotate(45deg); - -ms-transform: scale(1) rotate(45deg); - transform: scale(1) rotate(45deg); - top: 20px; - } - - ul.navbar-nav { - margin-top: 86px; - } - - body.sk__scrolling-started ul.navbar-nav { - margin-top: 66px; - } - - body.sk__scrolling-started li.custom-content.sk__mobile-menu-logo { - top: 0; - } - - body.sk__scrolling-started ul.navbar-nav { - margin-top: 66px; - } - -} - -/* - * Mobile Menu - LARGE Only - * ------------------------ - */ -@media all and (min-width: 992px) and (max-width: 1900px) { - - body.sk__scrolling-started .sk__mobile-menu-bar { - height: 72px; - } - - .sk__mobile-main-logo img { - height: 100px; - width: auto; - } - body.sk__scrolling-started .sk__mobile-main-logo img { - height: 72px; - } - - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h2, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h3, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h4, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h5, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h6 { - padding: 32px 17px 22px; - } - - .nav-back { - margin-top: 11px; - } - - .hc-nav-trigger:not(.toggle-open) { - top: 36px; - right: 34px; - -webkit-transform: scale(0.75); - -ms-transform: scale(0.75); - transform: scale(0.75); - } - - .hc-nav-trigger.toggle-open { - -webkit-transform: scale(0.75) rotate(45deg); - -ms-transform: scale(0.75) rotate(45deg); - transform: scale(0.75) rotate(45deg); - } - - body.sk__scrolling-started .hc-nav-trigger { - top: 23px; - right: 26px; - -webkit-transform: scale(0.75); - -ms-transform: scale(0.75); - transform: scale(0.75); - } - - body.sk__scrolling-started .hc-nav-trigger.toggle-open { - top: 38px; - right: 16px; - -webkit-transform: scale(0.75) rotate(45deg); - -ms-transform: scale(0.75) rotate(45deg); - transform: scale(0.75) rotate(45deg); - } - -} - -/* - * Mobile Menu - EXTRA LARGE Only - * ------------------------------ - */ -/* @media all and (min-width: 1921px) and (max-width: 1999px) { menu crossover (-1) if disableAt is 1923 or higher. The value goes in max-width */ -@media all and (min-width: 1899px) and (max-width: 1921px) { /* menu crossover (-1) if disableAt is lower than 1923. The value goes in min-width */ - - .sk__mobile-main-logo img { - height: 100px; - width: auto; - } - - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h2, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h3, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h4, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h5, - body.sk__scrolling-started .hc-offcanvas-nav .nav-content > h6 { - padding: 32px 17px 22px; - } - - .nav-back { - margin-top: 11px; - } - -} - -/** - * Mobile menu trigger on true hover-capable devices only - * aka, avoid menu hamburger trigger being stuck in hover - */ -@media (hover: hover) and (max-width: 1899px) { /* menu crossover (-1) */ - .hc-nav-trigger:not(.toggle-open):hover span { - -webkit-transform: scaleX(.8); - -ms-transform: scaleX(.8); - transform: scaleX(.8); - } - .hc-nav-trigger:not(.toggle-open):hover span:before { - -webkit-transform: scaleX(.5); - -ms-transform: scaleX(.5); - transform: scaleX(.5); - } - - .hc-nav-trigger:not(.toggle-open):hover span:after { - -webkit-transform: scaleX(.85); - -ms-transform: scaleX(.85); - transform: scaleX(.85); - } -} - - -/* - * Desktop Menu - * ============ - */ - -@media all and (min-width: 1900px) { /* menu crossover */ - - nav li a { - display: inline-block !important; - } - - li.custom-content.sk__mobile-menu-logo, - .sk__menu-socials, - .sk__mobile-main-logo { - display: none; - } - - nav.navbar.sk__navbar { - position: fixed; - width: 100%; - margin-top: -100px; - -webkit-transform: translateY(100px); - -ms-transform: translateY(100px); - transform: translateY(100px); - z-index: 4; - padding: 0; - -webkit-box-sizing: content-box; - box-sizing: content-box; - } - - .sk__navbar .navbar-brand { - padding: 0; - margin: 0; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - } - - .navbar-brand img { - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - height: 100px; - width: auto; - } - - body.sk__scrolling-started .sk__navbar .navbar-brand img { - height: 60px; - } - - .sk__navbar a.nav-link { - font-size: 14px; - } - - .sk__navbar.navbar-dark .navbar-nav { - margin-right: 35px; - } - - .sk__navbar.navbar-dark .navbar-nav .nav-link { - -webkit-transition: all 0.3s ease 0s; - -o-transition: all 0.3s ease 0s; - transition: all 0.3s ease 0s; - color: rgba(255,255,255,0.98); - } - - .sk__navbar.navbar-dark .navbar-nav .active .nav-link, - .sk__navbar.navbar-dark .navbar-nav .nav-link:hover, - nav li a:hover em { - color: rgba(255,255,255,1); - } - - .sk__navbar.navbar-dark .navbar-nav .active .nav-link { - text-decoration: underline; - } - - .sk__navbar.navbar-dark .navbar-nav .sk__submenu-ul li > a:hover { - -webkit-transform: translateX(5px); - -ms-transform: translateX(5px); - transform: translateX(5px); - } - - .sk__navbar.navbar-expand-lg .navbar-nav .nav-link { - padding: 20px 19px; - } - - .sk__navbar ul { - list-style: none; - padding-left: 0; - } - - .navbar-nav li.menu-item-has-children:before { - /* menu items dropdown */ - font-family: icomoon; - content:"\f107"; - color: #ffffff; - font-size: 14px; - float: right; - cursor: pointer; - } - - .navbar-nav > li.menu-item-has-children:before { /* mind the > */ - /* top level menu items dropdown */ - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - padding-top: 20px; - padding-top: 36px; - padding-right: 0px; - -webkit-transform: translateX(-20px); - -ms-transform: translateX(-20px); - transform: translateX(-20px); - } - body.sk__scrolling-started .navbar-nav > li.menu-item-has-children:before { /* mind the > */ - padding-top: 15px; - } - - @-webkit-keyframes sinking-rotated-dropdown-icon { - 0% { - -webkit-transform: translateY(3px); - transform: translateY(3px); - } - 25% { - -webkit-transform: translateY(6px); - transform: translateY(6px); - } - 50% { - -webkit-transform: translateY(9px); - transform: translateY(9px); - } - 75% { - -webkit-transform: translateY(6px); - transform: translateY(6px); - } - 100% { - -webkit-transform: translateY(3px); - transform: translateY(3px); - } - } - - @keyframes sinking-rotated-dropdown-icon { - 0% { - -webkit-transform: translateY(3px); - transform: translateY(3px); - } - 25% { - -webkit-transform: translateY(6px); - transform: translateY(6px); - } - 50% { - -webkit-transform: translateY(9px); - transform: translateY(9px); - } - 75% { - -webkit-transform: translateY(6px); - transform: translateY(6px); - } - 100% { - -webkit-transform: translateY(3px); - transform: translateY(3px); - } - } - - .navbar-nav > li > ul > .nav-subwrap > li.menu-item-has-children:not(.sk__expand-children):hover:before { - -webkit-animation-name: sinking-rotated-dropdown-icon; - animation-name: sinking-rotated-dropdown-icon; - -webkit-animation-duration: 0.9s; - animation-duration: 0.9s; - -webkit-animation-delay: 0s; - animation-delay: 0s; - -webkit-animation-timing-function: ease; - animation-timing-function: ease; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; - -webkit-animation-direction: alternate; - animation-direction: alternate; - } - - .sk__navbar.navbar-expand-lg .navbar-nav > li > a.nav-link { - /* top level menu links */ - position: relative; - text-transform: uppercase; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - padding: 20px 20px 20px 25px; - padding: 36px 20px 34px 24px; - font-weight: 600; - } - body.sk__scrolling-started .sk__navbar.navbar-expand-lg .navbar-nav > li > a.nav-link { - padding: 15px 20px 15px 25px; - } - - /* Top level menu items hover background */ - .navbar-nav > li > a.nav-link:before { - position: absolute; - width: calc(100% + 1px); - height: 100%; - bottom: 0; - left: 0; - content: ''; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - -webkit-transform-origin: center bottom; - -ms-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-transform: scaleY(0); - -ms-transform: scaleY(0); - transform: scaleY(0); - background: rgba(255,255,255,0.1); - } - .navbar-nav > li.menu-item-has-children > a.nav-link:before { - width: calc(100% + 9px); - } - .navbar-nav > li:hover > a.nav-link:before { - -webkit-transform: scaleY(1); - -ms-transform: scaleY(1); - transform: scaleY(1); - } - - .sk__navbar.navbar-expand-lg .navbar-nav > li.menu-item-has-children > a.nav-link { - /* top level menu links with submenus */ - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - padding: 20px 29px 20px 24px; - padding: 36px 29px 34px 24px; - } - body.sk__scrolling-started .sk__navbar.navbar-expand-lg .navbar-nav > li.menu-item-has-children > a.nav-link { - padding: 15px 29px 15px 24px; - } - - .sk__navbar .navbar-nav > li > .sk__submenu-ul { - /* the sub menu */ - position: absolute; - overflow: hidden; - margin-top: 1px; - -webkit-transition: all 0s ease 0.4s; - -o-transition: all 0s ease 0.4s; - transition: all 0s ease 0.4s; - -webkit-transform-origin: top center; - -ms-transform-origin: top center; - transform-origin: top center; - -webkit-transform: scaleY(0); - -ms-transform: scaleY(0); - transform: scaleY(0); - } - - .sk__navbar .navbar-nav > li:hover .sk__submenu-ul { - -webkit-transition: all 0s ease 0s; - -o-transition: all 0s ease 0s; - transition: all 0s ease 0s; - } - - .sk__navbar .navbar-nav > li > ul > .nav-subwrap { - display: block; - padding: 10px 12px 10px 5px; - background: rgba(0,0,0,0.87); - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - -webkit-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); - } - - .sk__navbar.navbar-expand-lg .navbar-nav > li:hover .sk__submenu-ul .nav-subwrap { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - } - - .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li { - -webkit-transition: all 0.2s ease 0s; - -o-transition: all 0.2s ease 0s; - transition: all 0.2s ease 0s; - opacity: 0; - } - - .sk__navbar.navbar-expand-lg .navbar-nav > li:hover .sk__submenu-ul .nav-subwrap > li { - -webkit-transition: all 1s ease 0s; - -o-transition: all 1s ease 0s; - transition: all 1s ease 0s; - opacity: 1; - } - - .sk__navbar.navbar-expand-lg .navbar-nav > li:hover .sk__submenu-ul { - -webkit-transform: scaleY(1); - -ms-transform: scaleY(1); - transform: scaleY(1); - } - - .sk__navbar.navbar-expand-lg .navbar-nav > li > ul a.nav-link { - /* sub menu links */ - font-weight: 300; - font-size: 14px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - padding: 8px 20px; - } - - .sk__navbar.navbar-expand-lg .navbar-nav > li:hover a.nav-link { - opacity: 1 !important; - } - - .sk__navbar.navbar-expand-lg .navbar-nav > li:hover a.nav-link:focus { - outline: none; - } - - .navbar-nav > li > ul li.menu-item-has-children:before { - /* sub menu items dropdown */ - padding-top: 8px; - padding-right: 10px; - } - - .navbar-nav > li > ul > .nav-subwrap > li.menu-item-has-children.sk__expand-children:before { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); - padding-top: 0; - padding-right: 0px; - padding-left: 10px; - padding-bottom: 9px; - } - - /* the sub menu */ - - /* since width is defined by parents, set min width in case parents are too short */ - .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li a { - min-width: 220px; - } - - .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li > ul { - overflow: hidden; - -webkit-transform-origin: top center; - -ms-transform-origin: top center; - transform-origin: top center; - } - - /* Sub sub menu */ - - .sk__expand-children ul.sk__sub-submenu-ul { - padding: 10px 0 8px; - } - - .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li > ul > li, - .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li > ul > li > a { - -webkit-transition: opacity 0.5s ease 0.2s, max-height 0.3s ease 0s, color 0.25s ease 0s, background-color 0.4s ease 0s; - -o-transition: opacity 0.5s ease 0.2s, max-height 0.3s ease 0s, color 0.25s ease 0s, background-color 0.4s ease 0s; - transition: opacity 0.5s ease 0.2s, max-height 0.3s ease 0s, color 0.25s ease 0s, background-color 0.4s ease 0s; - max-height: 0; - opacity: 0; - } - - .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li.sk__expand-children li, - .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li.sk__expand-children a { - max-height: 38px; - opacity: 1; - white-space: nowrap; - } - - .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li.sk__expand-children li span.sk__icon-popup, - .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li.sk__expand-children a span.sk__icon-popup { - white-space: initial; - } - - .sk__navbar.navbar-expand-lg .navbar-nav > li > ul > .nav-subwrap > li > ul > li > a.nav-link { - color: #a6aaaf; - padding: 5px 10px 5px 30px; - padding: 2px 10px 1px 30px; - margin-right: 10px; - opacity: 1; - } - - .sk__navbar.navbar-expand-lg .navbar-nav > li > ul > .nav-subwrap > li > ul > li:hover > a.nav-link { - color: rgba(255,255,255,1); - } - - a.nav-link.active { - color: #ffffff !important; - } - - /* submenu line indicator */ - .sk__navbar .navbar-nav > li > ul > .nav-subwrap > li a { - min-width: 232px; - } - ul.sk__sub-submenu-ul { - position: relative; - } - ul.sk__sub-submenu-ul:before { - content: ''; - position: absolute; - top: 9px; - left: 26px; - width: 1px; - height: calc(100% - 21px); - background: rgba(255,255,255,0.15); - z-index: 1; - } - .sk__navbar.navbar-expand-lg .navbar-nav > li > ul > .nav-subwrap > li > ul > li > a.nav-link { - padding: 3px 10px 1px 40px; - } - -} - -/** - * 5. Fonts - * ======== - */ - -/* icon font */ -span[class^="icon-"] { - display: inline-block; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; -} - -p { - font-family: 'Lato', sans-serif; - font-size: 16px; - line-height: 30px; - color: #C6C6C6; -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - p { - font-size: 14px; - line-height: 21px; - } -} -@media all and (max-width: 575px) { /* xs */ - p { - font-size: 14px; - line-height: 21px; - } -} - -p.p-xs { - font-family: 'Poppins', sans-serif; - /*font-size: 10px;*/ - font-size: 11px; - font-weight: 300; - line-height: 19px; - color: #FFFFFF; -} - -p.p-xl { - font-size: 19px; - font-weight: 300; -} -@media all and (min-width: 1921px) { - p.p-xl { - font-size: 23px; - } -} -@media all and (min-width: 768px) and (max-width: 1199px) { /* custom */ - p.p-xl { - font-size: 17px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - p.p-xl { - font-size: 17px; - line-height: 1.6; - margin-bottom: 0; - } -} -@media all and (max-width: 575px) { /* xs */ - p.p-xl { - font-size: 16px; - line-height: 1.5; - margin-bottom: 0; - } -} - -p.p-super { - font-family: 'Poppins', sans-serif; - font-size: 23px; - line-height: 1.5; - font-weight: 300; -} -@media all and (min-width: 1400px) and (max-width: 1920px) { /* custom */ - p.p-super { - font-size: 20px; - } -} -@media all and (min-width: 768px) and (max-width: 1399px) { /* custom */ - p.p-super { - font-size: 18px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - p.p-super { - font-size: 16px; - line-height: 1.55; - } -} -@media all and (max-width: 575px) { /* xs */ - p.p-super { - font-size: 15px; - } -} - -p.p-v2 { - font-family: 'Poppins', sans-serif; - font-size: 15px; - line-height: 30px; - margin-bottom: 20px; -} -@media all and (max-width: 575px) { - p.p-v2 { - font-size: 12px; - line-height: 24px; - } -} - -h1, -.big-abbreviated-heading, -span.big-abbreviated-heading.sk__gradient-fancy-text-back { - font-family: 'Syncopate', sans-serif; - font-weight: 900; - font-size: 77px; - text-transform: uppercase; - letter-spacing: -5px; - line-height: 1.1; -} -h1.h1-bright { - color: #fff; -} -h1.h1-dark { - color: #000; -} -@media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ - h1, - .big-abbreviated-heading, - span.big-abbreviated-heading.sk__gradient-fancy-text-back { - font-size: 66px; - } -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - h1, - .big-abbreviated-heading, - span.big-abbreviated-heading.sk__gradient-fancy-text-back { - font-size: 56px; - letter-spacing: -4.5px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - h1, - .big-abbreviated-heading, - span.big-abbreviated-heading.sk__gradient-fancy-text-back { - font-size: 70px; - letter-spacing: -4px; - line-height: 1.1; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - h1, - .big-abbreviated-heading, - span.big-abbreviated-heading.sk__gradient-fancy-text-back { - font-size: 38px; - font-size: 39px; - line-height: 50px; - letter-spacing: -1.52px; - } -} -@media all and (max-width: 575px) { /* xs */ - h1, - .big-abbreviated-heading, - span.big-abbreviated-heading.sk__gradient-fancy-text-back { - font-size: 27px; - letter-spacing: -2px; - line-height: 1.3; - } -} - -h1.h1-mega, -span.h1-mega.sk__gradient-fancy-text-back { - font-size: 118px; - line-height: 1; -} -@media all and (min-width: 1400px) and (min-width: 1920px) { /* custom */ - h1.h1-mega, - span.h1-mega.sk__gradient-fancy-text-back { - font-size: 118px; - line-height: 1; - } -} -@media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ - h1.h1-mega, - span.h1-mega.sk__gradient-fancy-text-back { - font-size: 94px; - line-height: 1; - } -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - h1.h1-mega, - span.h1-mega.sk__gradient-fancy-text-back { - font-size: 90px; - line-height: 1.1; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - h1.h1-mega, - span.h1-mega.sk__gradient-fancy-text-back { - font-size: 84px; - line-height: 1.1; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - h1.h1-mega, - span.h1-mega.sk__gradient-fancy-text-back { - font-size: 68px; - line-height: 1.1; - } -} -@media all and (max-width: 575px) { /* xs */ - h1.h1-mega, - span.h1-mega.sk__gradient-fancy-text-back { - font-size: 12.4vw; - font-size: 10.7vw; - line-height: 1.3; - } -} - -h1.super-heading, -span.super-heading.sk__gradient-fancy-text-back { - font-family: 'Poppins', sans-serif; - font-weight: 700; - font-size: 102.75px; - letter-spacing: -5.1px; - text-transform: inherit; - line-height: 1.35; - margin-bottom: 0.3em; -} - -h1.super-heading.shadowed, -span.super-heading.sk__gradient-fancy-text-back.shadowed { - color: #000000; - opacity: 0.59; - text-shadow: -6px 11px 5px rgba(0,0,0,1); -} -@media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ - h1.super-heading, - span.super-heading.sk__gradient-fancy-text-back { - font-size: 92px; - } -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - h1.super-heading, - span.super-heading.sk__gradient-fancy-text-back { - font-size: 70px; - letter-spacing: -4.1px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - h1.super-heading, - span.super-heading.sk__gradient-fancy-text-back { - line-height: 1.12; - margin-bottom: 0.4em; - } -} - -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__rings-section h1.super-heading, - .sk__rings-section span.super-heading.sk__gradient-fancy-text-back { - font-size: 85px; - letter-spacing: -5.1px; - line-height: 120%; - margin-bottom: 0.2em; - } - .sk__single-article h1.super-heading, - .sk__single-article span.super-heading { - font-size: 59px; - letter-spacing: -2px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - h1.super-heading, - span.super-heading.sk__gradient-fancy-text-back { - font-size: 70px; - letter-spacing: -4.1px; - line-height: 1.25; - } -} -@media all and (min-width: 501px) and (max-width: 575px) { /* custom xs */ - h1.super-heading, - span.super-heading.sk__gradient-fancy-text-back { - font-size: 49px; - letter-spacing: -3px; - line-height: 1.25; - } -} -@media all and (max-width: 500px) { /* custom xxs */ - .sk__rings-section h1.super-heading, - .sk__rings-section span.super-heading.sk__gradient-fancy-text-back { - font-size: 44px; - } - h1.super-heading, - span.super-heading.sk__gradient-fancy-text-back { - font-size: 40px; - letter-spacing: -2px; - line-height: 1.2; - } -} - -h1.h1-small, -span.h1-small.sk__gradient-fancy-text-back { - font-family: 'Syncopate', sans-serif; - font-weight: 900; - font-size: 38px; - font-size: 39px; - letter-spacing: -1.52px; - color: #FFFFFF; -} -@media all and (max-width: 575px) { /* xs */ - h1.h1-small, - span.h1-small.sk__gradient-fancy-text-back { - font-size: 24px; - letter-spacing: -1px; - } -} - - -h2, -h2.h2-regular, -span.h2-regular.sk__gradient-fancy-text-back { - font-family: 'Poppins', sans-serif; - font-size: 24px; - line-height: 1.4; - margin-bottom: 0.9em; - letter-spacing: -0.24px; - color: #FFFFFF; -} -ol.sk__legal { - font-size: 24px; - line-height: 1.4; - margin-bottom: 0.9em; -} -@media all and (max-width: 575px) { /* xs */ - h2, - h2.h2-regular, - span.h2-regular.sk__gradient-fancy-text-back, - ol.sk__legal { - font-size: 19px; - margin-bottom: 0.5em; - } -} - -h2 strong, -h2.h2-regular strong, -span.h2-regular.sk__gradient-fancy-text-back strong { - font-weight: 800; -} - -h2.thin, -h2.h2-regular.thin, -span.h2-regular.sk__gradient-fancy-text-back.thin { - font-weight: 300; -} - -h2.h2-regular.thin strong, -span.h2-regular.sk__gradient-fancy-text-back.thin strong { - font-weight: 600; -} - -h2.h2-small, -span.h2-small.sk__gradient-fancy-text-back { - font-size: 18px; - line-height: 33.6px; - color: #FFFFFF; - color: rgb(255, 255, 255); -} -h2.h2-small.shadowed { - color: #000000; -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__rings-section h2.h2-small, - .sk__rings-section span.h2-small.sk__gradient-fancy-text-back { - max-width: 520px; - margin: 0 auto; - } -} -@media all and (min-width: 501px) and (max-width: 575px) { /* custom xs */ - h2.h2-small, - span.h2-small.sk__gradient-fancy-text-back { - font-size: 16px; - line-height: 26px; - } -} -@media all and (max-width: 500px) { /* custom xxs */ - h2.h2-small, - span.h2-small.sk__gradient-fancy-text-back { - font-size: 15px; - line-height: 24px; - } -} - -h2.h2-large, -span.h2-large.sk__gradient-fancy-text-back { - font-size: 33px; - line-height: 1.5; -} -h2.h2-large.shadowed { - color: #000000; -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - h2.h2-large, - span.h2-large.sk__gradient-fancy-text-back { - font-size: 30px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - h2.h2-large, - span.h2-large.sk__gradient-fancy-text-back { - font-size: 27px; - } -} -@media all and (max-width: 575px) { /* xs */ - h2.h2-large, - span.h2-large.sk__gradient-fancy-text-back { - font-size: 23px; - } -} -h2.h2-large.thin, -span.h2-large.thin.sk__gradient-fancy-text-back { - font-weight: 200; -} -h2.h2-large.thin strong, -span.h2-large.thin.sk__gradient-fancy-text-back strong { - font-weight: 600; -} - -h2.h2-super, -span.h2-super.sk__gradient-fancy-text-back { - font-family: 'Poppins', sans-serif; - font-weight: 700; - font-size: 66px; - letter-spacing: -2.5px; - text-transform: inherit; - line-height: 1.3; - margin-bottom: 0.3em; -} -@media all and (min-width: 1400px) and (max-width: 1920px) { /* custom */ - h2.h2-super, - span.h2-super.sk__gradient-fancy-text-back { - font-size: 49px; - letter-spacing: -2.5px; - } -} -@media all and (min-width: 992px) and (max-width: 1400px) { /* lg */ - h2.h2-super, - span.h2-super.sk__gradient-fancy-text-back { - font-size: 45px; - letter-spacing: -2.4px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - h2.h2-super, - span.h2-super.sk__gradient-fancy-text-back { - font-size: 49px; - letter-spacing: -2.5px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - h2.h2-super, - span.h2-super.sk__gradient-fancy-text-back { - font-size: 39px; - letter-spacing: -1.5px; - } -} -@media all and (max-width: 575px) { /* xs */ - h2.h2-super, - span.h2-super.sk__gradient-fancy-text-back { - font-size: 28px; - letter-spacing: -0.6px; - } -} - - -h3 { - font-family: 'Lato', sans-serif; - font-size: 23px; - font-weight: 300; -} - -h3 strong { - font-weight: 600; -} - - -h3.h3-elegant, -span.h3-elegant.sk__gradient-fancy-text-back { - font-family: 'Poppins', sans-serif; - font-size: 44px; - line-height: 1.5; - margin: 0 0 23px 0; - font-weight: 700; -} - -h3.h3-elegant { - display: inline-block; - position: inherit; - z-index: 1; -} - -h3.h3-elegant.narrow, -span.h3-elegant.sk__gradient-fancy-text-back.narrow { - letter-spacing: -1px; -} - -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - h3.h3-elegant, - span.h3-elegant.sk__gradient-fancy-text-back { - font-size: 33px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - h3.h3-elegant, - span.h3-elegant.sk__gradient-fancy-text-back { - font-size: 40px; - } -} -@media all and (max-width: 575px) { /* xs */ - h3.h3-elegant, - span.h3-elegant.sk__gradient-fancy-text-back { - font-size: 28px; - } - span.h3-elegant.sk__gradient-fancy-text-back { - display: none; - } -} - -h3.h3-super, -span.h3-super.sk__gradient-fancy-text-back { - margin-bottom: 0.9em; - letter-spacing: -0.24px; - font-family: 'Poppins', sans-serif; - font-size: 33px; - line-height: 1.5; -} -h3.h3-super.narrow, -span.h3-super.sk__gradient-fancy-text-back.narrow { - letter-spacing: -1.3px; -} -h3.h3-super.shadowed { - color: #000000; -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - h3.h3-super, - span.h3-super.sk__gradient-fancy-text-back { - font-size: 30px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - h3.h3-super, - span.h3-super.sk__gradient-fancy-text-back { - font-size: 27px; - } -} -@media all and (max-width: 575px) { /* xs */ - h3.h3-super, - span.h3-super.sk__gradient-fancy-text-back { - font-size: 23px; - } -} -h3.h3-super.thin, -span.h3-super.thin.sk__gradient-fancy-text-back { - font-weight: 200; -} -h3.h3-super.thin strong, -span.h3-super.thin.sk__gradient-fancy-text-back strong { - font-weight: 600; -} - -h4 { - font-family: 'Poppins', sans-serif; - font-weight: 700; - font-size: 30px; - letter-spacing: -0.3px; - line-height: 1.4; - color: #FFFFFF; - margin-bottom: 1.1875rem; -} -h4.narrow { - letter-spacing: -1.3px; -} -h4.h4-dark { - color: #989A9B; -} -h4.h4-shadow { - text-shadow: -4.34px 9.76px 3.25px rgba(0,0,0,0.75); -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - h4 { - font-size: 24px; - } -} -@media all and (max-width: 575px) { /* xs */ - h4:not(.h4-small) { /* aka h4 only */ - font-size: 22px; - line-height: 1.5; - margin-bottom: 15px; - } -} - - -h4.h4-small, -span.h4-small.sk__gradient-fancy-text-back { - font-family: 'Poppins', sans-serif; - font-weight: 700; - font-size: 21px; - line-height: 1.35; - letter-spacing: -0.3px; - text-transform: uppercase; - color: #FFFFFF; -} -@media all and (min-width: 1921px) { /* custom - over FullHD */ - h4.h4-small, - span.h4-small.sk__gradient-fancy-text-back { - font-size: 24px; - line-height: 1.15; - } -} -@media all and (min-width: 768px) and (max-width: 1920px) { /* md + lg + xl + xxl */ - h4.h4-small, - span.h4-small.sk__gradient-fancy-text-back { - font-size: 18px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - h4.h4-small, - span.h4-small.sk__gradient-fancy-text-back { - font-size: 17px; - } -} -@media all and (max-width: 420px) and (max-width: 575px) { /* custom xs 1 */ - h4.h4-small, - span.h4-small.sk__gradient-fancy-text-back { - font-size: 15px; - } -} -@media all and (max-width: 419px) { /* custom xs 2 */ - h4.h4-small, - span.h4-small.sk__gradient-fancy-text-back { - font-size: 13px; - } -} - - -h5 { - font-family: 'Poppins', sans-serif; - font-weight: 700; - font-size: 20px; - line-height: 33.6px; - letter-spacing: -0.2px; - color: #FFFFFF; -} -@media all and (max-width: 1399px) { /* xl */ - h5 { - font-size: 17px; - line-height: 25px; - } -} - - -h5.h5-elegant, -span.h5-elegant.sk__gradient-fancy-text-back { - font-family: 'Lato', sans-serif; - font-size: 23px; - font-weight: 300; -} - -h5.h5-elegant strong, -span.h5-elegant.sk__gradient-fancy-text-back strong { - font-weight: 600; -} - -h5.h5-large, -span.h5-large.sk__gradient-fancy-text-back { - font-size: 24px; - font-weight: 400; - line-height: 1.4; - margin-bottom: 0.9em; - letter-spacing: -0.24px; - color: #FFFFFF; -} -@media all and (max-width: 575px) { /* xs */ - h5.h5-large, - span.h5-large.sk__gradient-fancy-text-back { - font-size: 19px; - margin-bottom: 0.5em; - } -} - -h5.h5-large strong, -span.h5-large.sk__gradient-fancy-text-back strong { - font-weight: 800; -} - -h5.h5-large.thin, -span.h5-large.sk__gradient-fancy-text-back.thin { - font-weight: 300; -} - -h5.h5-large.thin strong, -span.h5-large.sk__gradient-fancy-text-back.thin strong { - font-weight: 600; -} - - -h6 { - font-family: 'Poppins', sans-serif; - font-size: 16px; - letter-spacing: 3.2px; - text-transform: uppercase; - color: #FFFFFF; -} - -.fancy-gradient-text-box { - display: inline-block; - position: relative; -} - -.narrow-text { - letter-spacing: -0.05em; -} - -/* 404 page huge numbers */ -.sk__404 { - font-size: 256px; - line-height: 0.8; - font-weight: 700; - letter-spacing: -19px; -} -@media all and (min-width: 1400px) and (max-width: 1920px) { /* custom */ - .sk__404 { - font-size: 187px; - letter-spacing: -15px; - } -} -@media all and (min-width: 992px) and (max-width: 1399px) { /* lg + xl */ - .sk__404 { - font-size: 137px; - letter-spacing: -12px; - } - .sk__404-page h2.h2-super, - .sk__404-page span.h2-super.sk__gradient-fancy-text-back { - font-size: 37px; - letter-spacing: -1.4px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__404 { - font-size: 198px; - letter-spacing: -18px; - } - .sk__404-page h2.h2-super, - .sk__404-page span.h2-super.sk__gradient-fancy-text-back { - font-size: 37px; - letter-spacing: -1.4px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__404 { - font-size: 108px; - letter-spacing: -9px; - } - .sk__404-page h2.h2-super, - .sk__404-page span.h2-super.sk__gradient-fancy-text-back { - font-size: 30px; - letter-spacing: -1px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__404 { - font-size: 68px; - letter-spacing: -4.5px; - } - .sk__404-page h2.h2-super, - .sk__404-page span.h2-super.sk__gradient-fancy-text-back { - font-size: 18px; - } - .sk__404-page p.p-super { - font-size: 12px; - } -} - -/* Elements ---------------------------------------------- */ -body { - font-family: 'Poppins', sans-serif; - color: #FFFFFF; - font-size: 16px; - line-height: 30px; - background: #000000; -} - -hr { - -} - -ul, -ol { - -} - -ul { - -} - -ol { - -} - -li > ul, -li > ol { - -} - -dt { - font-weight: 700; -} - -dd { - margin: 0 1.5em 1.5em; -} - -/* Make sure embeds and iframes fit their containers. */ -embed, -iframe:not(#sk__yt-video-background), -object { - max-width: 100%; -} - -img { - height: auto; - max-width: 100%; -} - -figure { - margin: 1em 0; -} - -table { - margin: 0 0 1.5em; - width: 100%; -} - -blockquote { - font-style: italic; - font-size: 125%; - font-weight: 300; -} -@media all and (max-width: 767px) { /* xs + sm */ - blockquote { - font-size: 104%; - } -} - -/* Links ---------------------------------------------- */ -a { - color: #FFFFFF; -} - -a:visited { - color: #FFFFFF; -} - -a:hover, -a:focus, -a:active { - color: #FFFFFF; -} - -a:focus { - outline: thin dotted; -} - -a:hover, -a:active { - outline: 0; -} - -/** - * 6. Forms and Buttons - * ==================== - */ - -.form-group { - margin-bottom: 0.5rem; -} - -label { - font-size: 14px; - font-weight: 300; - color: #ffffff; -} - -textarea { - resize: none; -} - -input, textarea { - outline: none; - width: 100%; - padding: 9px 18px 7px; - color: #ccd7e0; - font-size: 15px; - font-weight: 400; - background: transparent; - border: none; - background-color: rgba(142,151,161,0.06); - border-bottom: 1px solid rgba(255,255,255,0.45); - margin-bottom: 18px; -} - -input:hover, -textarea:hover, -input:focus, -textarea:focus { - border-color: rgba(255,255,255,0.65); -} - -input:-webkit-autofill:focus { - -webkit-box-shadow: 0 0 0 50px rgba(129,144,160,0.13) inset, 0 0 0 50px white inset; - -webkit-text-fill-color: #ccd7e0; -} - -textarea:focus:hover, -input:focus:hover { - color: #ccd7e0; - border-color: rgba(255,255,255,0.65); -} - -input:-webkit-autofill, -input:-webkit-autofill:hover, -input:-webkit-autofill:focus, -textarea:-webkit-autofill, -textarea:-webkit-autofill:hover, -textarea:-webkit-autofill:focus, -select:-webkit-autofill, -select:-webkit-autofill:hover, -select:-webkit-autofill:focus { - -webkit-text-fill-color: #ffffff; - -webkit-box-shadow: 0 0 0px 1000px rgba(129,144,160,0.13) inset; - -webkit-transition: background-color 5000s ease-in-out 0s; - transition: background-color 5000s ease-in-out 0s; -} -input:-webkit-autofill::first-line { - font-size: 17px; - font-weight: 300; - font-family: 'Poppins', sans-serif; -} - -input::-webkit-input-placeholder { - color: #9aa4ad; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -input:hover::-webkit-input-placeholder { - color: #ccd7e0; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -textarea::-webkit-input-placeholder { - color: #9aa4ad; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -textarea:hover::-webkit-input-placeholder { - color: #ccd7e0; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -input::-moz-placeholder{ - opacity: 1; - color: #9aa4ad; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -input:hover::-moz-placeholder{ - color: #ccd7e0; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -textarea::-moz-placeholder { - opacity: 1; - color: #9aa4ad; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -textarea:hover::-moz-placeholder { - color: #ccd7e0; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -input:-ms-input-placeholder { - color: #9aa4ad; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - -ms-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -input:hover:-ms-input-placeholder { - color: #ccd7e0; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - -ms-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -textarea:-ms-input-placeholder { - color: #9aa4ad; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - -ms-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -textarea:hover:-ms-input-placeholder { - color: #ccd7e0; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - -ms-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -input:-moz-placeholder { - color: #9aa4ad; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -input:hover:-moz-placeholder { - color: #ccd7e0; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -textarea:-moz-placeholder { - color: #9aa4ad; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -textarea:hover:-moz-placeholder { - color: #ccd7e0; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} - -button[type="submit"], -input[type="submit"] { - outline: none; - width: 100%; - margin-top: 15px; - padding: 12px 54px; - border: 1px solid #686868; - border-radius: 3px; - font-size: 17px; - font-weight: 600; - color: #ffffff; - background-color: rgba(127,127,127,0); -} - -button[type="submit"]:hover, -input[type="submit"]:hover { - background-color: rgba(255,255,255,0.1); - border-color: rgba(255,255,255,1); -} - - -/* Contact Form */ - -@media all and (min-width: 341px) and (max-width: 575px) { /* custom */ - .sk__contact-form, - .sk__contact-info { - padding-left: 30px; - padding-right: 30px; - } -} -@media all and (max-width: 340px) { /* custom */ - .sk__contact-form, - .sk__contact-info { - padding-left: 14px; - padding-right: 14px; - } -} - -.sk__contact-form-col { - margin-top: 20px; -} - -.sk__contact-form-col form { - margin-top: 34px; -} - - -/* Subscribe Form */ - -.sk__subscribe-form { - position: relative; - padding-right: 90px; -} - -.sk__subscribe-form input { - padding: 11px 18px 9px; - border-radius: 3px 0 0 3px; - border-bottom: none; - background-color: rgba(142,151,161,0.09); -} - -.sk__subscribe-form button[type="submit"] { - position: absolute; - top: 0; - right: 0; - outline: none; - margin-top: 0; - padding: 11px 0 9px; - width: 90px; - border: none; - border-radius: 0 3px 3px 0; - font-size: 15px; - font-weight: 600; - letter-spacing: 3.08px; - color: #ffffff; - background-color: rgba(244,244,244,0.09); -} - -.sk__subscribe-form button[type="submit"]:hover { - background-color: rgba(244,244,244,0.4); -} - -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .sk__subscribe-form { - padding-right: 64px; - } - .sk__subscribe-form input { - padding: 4px 6px 4px 11px; - font-size: 11px; - font-weight: 600; - } - .sk__subscribe-form button[type="submit"] { - font-size: 11px; - padding: 4px 0 4px; - width: 64px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__subscribe-form { - padding-right: 64px; - } - .sk__subscribe-form input { - padding: 4px 6px 4px 11px; - font-size: 11px; - font-weight: 600; - } - .sk__subscribe-form button[type="submit"] { - font-size: 11px; - padding: 4px 0 4px; - width: 64px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__subscribe-form { - padding-right: 64px; - max-width: 280px; - margin: 0 auto; - } - .sk__subscribe-form input { - padding: 4px 6px 4px 11px; - font-size: 11px; - font-weight: 600; - } - .sk__subscribe-form button[type="submit"] { - font-size: 11px; - padding: 4px 0 4px; - width: 64px; - } -} - - -/** - * Buttons - main - * .btn, .btn-outline-light (default), .btn-gradient, .btn-gradient-outline - */ - -.btn { - font-family: 'Poppins', sans-serif; - padding: 15px 30px 14px; - font-weight: 600; - font-size: 14px; - letter-spacing: 3px; - border-radius: 29px; - border-radius: 300px; -} -@media all and (max-width: 575px) { /* xs */ - .btn { - padding: 16px 20px 14px; - font-size: 13px; - letter-spacing: 2px; - } -} - -@media all and (min-width: 1921px) { - .btn.btn-lg, - .btn-lg { - padding: 25px 39px 21px; - font-size: 17px; - letter-spacing: 7px; - border-width: 2px; - } -} - -.btn:not([class*="btn-"]), /* aka only .btn */ -.btn-gradient { - position: relative; - overflow: hidden; -} - -.btn:not([class*="btn-"]) { - color: #000; - background-color: #f8f9fa; - border-color: #f8f9fa; -} - -.btn:not([class*="btn-"]):hover, -.btn-gradient { - color: #fff; - background-color: rgba(248,249,250,0); - border-color: rgba(248,249,250,0); -} - -.btn-gradient:hover { - color: #ffffff; - border-color: rgba(242, 242, 242, 0.26); - background-color: rgba(0,0,0,1); -} - -.btn:not([class*="btn-"]):before, -.btn-gradient:before { - content: ''; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: -1; -} - -.btn:not([class*="btn-"]):before { - opacity: 0; -} - -.btn-gradient:before { - opacity: 1; -} - -.btn:not([class*="btn-"]):hover:before { - opacity: 1; -} - -.btn-outline-light { - color: #ffffff; - border-color: rgba(242, 242, 242, 0.26); - background-color: rgba(0,0,0,0.64); -} - -.btn-outline-light:hover { - color: #000; - background-color: #f8f9fa; - border-color: #f8f9fa; -} - -/* gradient outline button - suitable only for dark backgrounds */ - -a.btn-gradient-outline:link, -a.btn-gradient-outline:visited, -a.btn-gradient-outline:hover, -a.btn-gradient-outline:active, -a.btn-gradient-outline-hard:link, -a.btn-gradient-outline-hard:visited, -a.btn-gradient-outline-hard:hover, -a.btn-gradient-outline-hard:active { - position: relative; - overflow: hidden; - color: #000000; - mix-blend-mode: lighten; - font-weight: 900; - background-size: 110%; - background-position-x: 15%; -} - -.btn-gradient-outline:before, -.btn-gradient-outline-hard:before { - content: ''; - position: absolute; - width: calc(100% - 2px); - height: calc(100% - 2px); - border-radius: 56px; - top: 1px; - left: 1px; - z-index: 1; - mix-blend-mode: difference; -} - -.btn-gradient-outline:hover:before, -.btn-gradient-outline-hard:hover:before { - opacity: 0; -} - -/* Back to top button */ - -a.sk__back-to-top { - position: fixed; - width: 46px; - height: 46px; - right: 40px; - right: 32px; - bottom: 39px; - bottom: 31px; - background: rgba(0,0,0,0.74); - border-radius: 3px; -} - -span.sk__back-to-top { - display: block; - width: 19px; - height: 19px; - border-top: 4px solid #c0ccd1; - border-right: 4px solid #c0ccd1; - border-radius: 2px; - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - top: 17px; - left: 13px; - position: absolute; -} - -a.sk__back-to-top:hover span.sk__back-to-top { - border-top-color: #ffffff; - border-right-color: #ffffff; -} - -.sk__back-to-top-wrap { - z-index: 999; - position: fixed; - bottom: 0; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - opacity: 0; -} - -.sk__back-to-top-wrap.sk__backtotop-visible { - opacity: 1; -} - -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - a.sk__back-to-top { - width: 36px; - height: 36px; - right: 15px; - bottom: 15px; - } - span.sk__back-to-top { - width: 16px; - height: 16px; - top: 14px; - left: 10px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - a.sk__back-to-top { - width: 36px; - height: 36px; - right: 15px; - bottom: 15px; - } - span.sk__back-to-top { - width: 16px; - height: 16px; - top: 14px; - left: 10px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__back-to-top-wrap { - height: 40px; - width: 100%; - text-align: center; - } - a.sk__back-to-top { - display: inline-block; - position: relative; - width: 32px; - height: 32px; - right: 0; - bottom: 20px; - } - span.sk__back-to-top { - top: 12px; - left: 8px; - width: 16px; - height: 16px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__back-to-top-wrap { - height: 40px; - width: 100%; - text-align: center; - } - a.sk__back-to-top { - display: inline-block; - position: relative; - width: 32px; - height: 32px; - right: 0; - bottom: 20px; - } - span.sk__back-to-top { - top: 12px; - left: 8px; - width: 16px; - height: 16px; - } -} - -/* Links */ - -a, a:hover { - text-decoration: none; -} - - -/** - * 7. General - * ========== - */ - -a, -em, -input, -textarea, -button, -.btn, -.btn:before, -span.sk__back-to-top, -.sk__mobile-main-logo, -.sk__navbar .navbar-nav > li > ul > .nav-subwrap > li > ul, -.hc-offcanvas-nav li:not(.custom-content) a, -.nav-back, -.hero-socials-inner, -.sk__social-icons i, -.sk__project-icons i, -.sk__social-icons span[class^="icon-"], -.sk__project-icons span[class^="icon-"], -.sk__proj-infobox-label, -.sk__proj-infobox-value, -.sk__parallax-gallery-nav, -a.sk__iconbox-icon-link > span.sk__iconbox-icon:after, -a.sk__gallery-nav-link, -a.sk__gallery-nav-link:before, -a.sk__gallery-nav-link:after, -.slick-dots li button:before, -.cat-item, -.sk__ease-03 { - -webkit-transition: all 0.3s ease 0s; - -o-transition: all 0.3s ease 0s; - transition: all 0.3s ease 0s; -} - -a.sk__iconbox-icon-link i, -a.sk__iconbox-icon-link span[class^="icon-"], -a.sk__iconbox-icon-link > span.sk__iconbox-icon, -.sk__ease-06, -.sk__in-content-post-image, -.sk__imagebox-img { - -webkit-transition: all 0.6s ease 0s; - -o-transition: all 0.6s ease 0s; - transition: all 0.6s ease 0s; -} - -img { - max-width: 100%; -} - -/** - * Standard sections - */ - -/* Set background image as cover and center it */ - -.sk__image-back, /* deprecated, use 'cover' class */ -.sk__image-back-cover { - background-size: cover; - background-position: center; - background-repeat: no-repeat; -} - -/* Set background image as contain and center it */ - -.sk__image-back-contain { - background-size: contain; - background-position: center; - background-repeat: no-repeat; -} - -/* Animated header - used for "slide in from top" effect for the header */ -.sk__animated-header { - opacity: 0; - border-bottom: 1px solid; - -webkit-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); /* animated with JS */ -} - -hr.sk__divider, -.divider { /* combine with background color, border, gradients, patterns... */ - display: block; - width: 100%; - height: 1px; - margin-bottom: 20px; - margin-top: 20px; - background-color: #1A1A1A; - background-color: rgba(255,255,255,0.11); -} -hr { - opacity: 1; -} -hr.sk__divider.bright, -.divider.bright { - background-color: rgba(255,255,255,0.16); -} -@media all and (max-width: 575px) { /* xs */ - hr.sk__divider, - .divider { - width: 90%; - margin-left: 5%; - } -} - -.fat-divider { - display: block; - width: 100%; - height: 20px; - margin-bottom: 25px; - /* bg color .dark-shade-5-bg */ -} - -.sk__pattern-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-repeat: repeat; - background: url(../../assets/images/overlay-pattern.png); -} - -.sk__tint { - z-index: -1; - background: #000000; - opacity: 0.6; -} - -.sk__tint-light { - z-index: -1; - background: #000000; - opacity: 0.15; -} - -.sk__filter-city { - -webkit-filter: sepia(0.6) hue-rotate(0deg) brightness(0.7) contrast(1.1) saturate(1.1); - filter: sepia(0.6) hue-rotate(0deg) brightness(0.7) contrast(1.1) saturate(1.1); -} - -.sk__body-end { - display: none; -} - -.sk__invisible { - opacity: 0 !important; -} - -/** - * Parallax Backgrounds - * sk__skip-parallax-background-section is used to - * skip parallax on hero images on mobile. It needs - * to have the same CSS as sk__parallax-background-section - */ -section.sk__parallax-background-section, -section.sk__skip-parallax-background-section { - position: relative; - width: 100%; - min-height: 100vh; - overflow: hidden; -} - -section.sk__parallax-background-section.sk__parallax-fixer-ignore-height, -section.sk__skip-parallax-background-section.sk__parallax-fixer-ignore-height { - min-height: 0; -} - -section.sk__parallax-background-section.sk__parallax-fixer-section, -section.sk__skip-parallax-background-section.sk__parallax-fixer-section { - overflow: initial; - height: auto; -} - -.sk__parallax-background-element { - z-index: -1; - /*height: 100vh;*/ - min-height: 100vh; - height: auto; - background-attachment: fixed; -} - -.sk__parallax-header { - position: relative; - overflow: hidden; -} - -.sk__parallax-header-image { - z-index: -1; -} - -/* transparent parallax background element - fixes parallax init */ -.sk__parallax-fixer { - background-image: url(../../assets/images/parallax-fixer-background.png); -} - - -/** - * Parallax images and parallax videos. - * The "container" and "element" elements work in pair. - * element-1 to element-10 indicate parallax image/video - * height in relation to container, which affects the - * speed of the image/video. - */ - -.sk__parallax-container { - position: relative; - overflow: hidden; -} - -.sk__parallax-container .sk__gradient-back-v1, -.sk__parallax-container .sk__gradient-back-v2 { - z-index: 2; -} - -.sk__parallax-container .sk__pattern-overlay { - z-index: 3; -} - -.sk__parallax-element-1, -.sk__parallax-element-2, -.sk__parallax-element-3, -.sk__parallax-element-4, -.sk__parallax-element-5, -.sk__parallax-element-6, -.sk__parallax-element-7, -.sk__parallax-element-8, -.sk__parallax-element-9, -.sk__parallax-element-10 { - position: absolute; - -o-object-fit: cover; - object-fit: cover; - width: 100%; - bottom: 0; -} -.sk__parallax-element-1 { height: 110%; } -.sk__parallax-element-2 { height: 120%; } -.sk__parallax-element-3 { height: 130%; } -.sk__parallax-element-4 { height: 140%; } -.sk__parallax-element-5 { height: 150%; } -.sk__parallax-element-6 { height: 160%; } -.sk__parallax-element-7 { height: 170%; } -.sk__parallax-element-8 { height: 180%; } -.sk__parallax-element-9 { height: 190%; } -.sk__parallax-element-10 { height: 200%; } - -/** - * Parallax vertical strips - */ - -.sk__hero-parallax-strip-vertical { - position: absolute; - top: 0; - height: 100%; -} -.sk__hero-parallax-strip-vertical:nth-child(1) { - left: 0; -} - -/** - * Layered parallax hero background / header - */ -.sk__layered-parallax-header { - position: relative; - overflow: hidden; -} -.sk__layered-parallax-element { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-size: cover; - background-position: center; - background-repeat: no-repeat; -} - - -/** - * Image boxes - */ - -.sk__imagebox { - display: block; - position: relative; - overflow: hidden; - cursor: pointer; - border-radius: 5px; - background-color: #0C0C0C; - margin-bottom: 24px; -} - -.sk__imagebox:hover { - background-color: #121212; - background-color: #1E1E1E; -} - -.sk__imagebox-img-wrap { - padding: 19px 16px 19px; -} - -.sk__imageboxes img { - display: block; - width: 100%; - height: auto; -} - -.sk__imagebox-text-wrap { - padding: 0 17px 10px; -} - -.sk__imagebox:hover { - -webkit-transform: translateY(-10px) !important; - -ms-transform: translateY(-10px) !important; - transform: translateY(-10px) !important; - -webkit-box-shadow: 0 10px 5px 3px rgba(0,0,0,0.99); - box-shadow: 0 10px 5px 3px rgba(0,0,0,0.99); -} - -.sk__imagebox:hover .sk__imagebox-img { - -webkit-filter: saturate(1.2) brightness(1.25); - filter: saturate(1.2) brightness(1.25); -} - -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__imagebox-text-wrap p { - font-size: 15px; - line-height: 25px; - } -} - - -/** - * 8. Hero Section - * =============== - */ - -/** - * Hero Section Theme-style: Default - * Hero heading on the left and - * text boxes in the bottom corners - */ -section.sk__hero-item-theme-style { - position: relative; - width: 100%; - min-height: 100vh; - overflow: hidden; - padding: 40px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} -@media all and (min-width: 360px) and (max-width: 575px) { - section.sk__hero-item-theme-style { - padding: 60px 24px 20px; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - } -} -@media all and (max-width: 359px) { - section.sk__hero-item-theme-style { - padding: 60px 10px 20px; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - } -} - -/** - * Hero section: default content position classes. - * As opposed to sk__hero-item-theme-style which has - * fully custom positioning and elements, these are - * basic top, right, left, bottom and center positioning - * classes. - * A helper fullscreen content wrapper which - * easily positions inside content vertically - * and horizontally. Includes side paddings to - * avoid overlaps with social icons and slider - * navigation. - */ -section.sk__hero-item-center-center, -section.sk__hero-item-left-center, -section.sk__hero-item-left-top, -section.sk__hero-item-left-bottom, -section.sk__hero-item-center-top, -section.sk__hero-item-right-top, -section.sk__hero-item-right-center, -section.sk__hero-item-right-bottom, -section.sk__hero-item-center-bottom { - position: relative; - width: 100%; - min-height: 100vh; - overflow: hidden; - padding-left: 98px; - padding-right: 98px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - flex-flow: row wrap; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; - flex-flow: row wrap; -} -section.sk__hero-item-center-center { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} -section.sk__hero-item-left-center { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: start; -} -section.sk__hero-item-left-top { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: start; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: start; -} -section.sk__hero-item-left-bottom { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: end; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: start; -} -section.sk__hero-item-center-top { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: start; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} -section.sk__hero-item-right-top { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: start; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: end; -} -section.sk__hero-item-right-center { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: end; -} -section.sk__hero-item-right-bottom { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: end; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: end; -} -section.sk__hero-item-center-bottom { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: end; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - section.sk__hero-item-center-center, - section.sk__hero-item-left-center, - section.sk__hero-item-left-top, - section.sk__hero-item-left-bottom, - section.sk__hero-item-center-top, - section.sk__hero-item-right-top, - section.sk__hero-item-right-center, - section.sk__hero-item-right-bottom, - section.sk__hero-item-center-bottom { - padding-left: 78px; - padding-right: 78px; - } -} -@media all and (max-width: 767px) { /* sm */ - section.sk__hero-item-center-center, - section.sk__hero-item-left-center, - section.sk__hero-item-left-top, - section.sk__hero-item-left-bottom, - section.sk__hero-item-center-top, - section.sk__hero-item-right-top, - section.sk__hero-item-right-center, - section.sk__hero-item-right-bottom, - section.sk__hero-item-center-bottom { - padding-left: 20px; - padding-right: 20px; - } -} - -/** - * Bootstrap Carousel - Hero Slider - */ - -/* slider */ - -#sk__hero-carousel-slider { - -} - -/* Hero Slider Nav UI (carousel indicators + prev/next buttons) */ -#sk__hero-carousel-slider button[data-bs-target="#sk__hero-carousel-slider"] { - opacity: 0; -} - -/* carousel indicators */ -#sk__hero-carousel-slider .carousel-indicators [data-bs-target] { - opacity: 0; - background-color: rgba(255,255,255,0.5); -} -#sk__hero-carousel-slider .carousel-indicators [data-bs-target].active, -#sk__hero-carousel-slider .carousel-indicators [data-bs-target]:hover, -#sk__hero-carousel-slider .carousel-indicators [data-bs-target]:focus { - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - background-color: rgba(255,255,255,1); -} - -/* prev/next buttons */ -#sk__hero-carousel-slider .carousel-control-next:focus, -#sk__hero-carousel-slider .carousel-control-next:hover, -#sk__hero-carousel-slider .carousel-control-prev:focus, -#sk__hero-carousel-slider .carousel-control-prev:hover { - opacity: 1 !important; -} - -#sk__hero-carousel-slider .carousel-control-next, -#sk__hero-carousel-slider .carousel-control-prev { - position: absolute; - top: 144px; - left: initial; - width: 30px; - height: 30px; -} - -#sk__hero-carousel-slider .carousel-control-prev { - right: 111px; -} -#sk__hero-carousel-slider .carousel-control-next { - right: 45px; -} -@media all and (min-width: 1400px) and (max-width: 1920px) { /* custom xxl */ - #sk__hero-carousel-slider .carousel-control-prev { - top: 136px; - right: 85px; - } - #sk__hero-carousel-slider .carousel-control-next { - top: 136px; - right: 29px; - } -} -@media all and (min-width: 768px) and (max-width: 1399px) { /* md to xl */ - #sk__hero-carousel-slider .carousel-control-prev { - top: 136px; - right: 85px; - } - #sk__hero-carousel-slider .carousel-control-next { - top: 136px; - right: 29px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - #sk__hero-carousel-slider .carousel-control-prev { - top: 87px; - right: 62px; - } - #sk__hero-carousel-slider .carousel-control-next { - top: 87px; - right: 13px; - } -} -@media all and (max-width: 575px) { /* xs */ - #sk__hero-carousel-slider .carousel-control-prev, - #sk__hero-carousel-slider .carousel-control-next { - display: none; - } -} - -/* carousel item */ - -#sk__hero-carousel-slider .carousel-item { - min-height: 100vh; - height: auto; -} - -#sk__hero-carousel-slider .carousel-item { - -webkit-transition-timing-function: cubic-bezier(.75,0,.34,1); - -o-transition-timing-function: cubic-bezier(.75,0,.34,1); - transition-timing-function: cubic-bezier(.75,0,.34,1); - -webkit-transition-duration: 1.2s; /* moze i 1.1 */ - -o-transition-duration: 1.2s; - transition-duration: 1.2s; - -webkit-transition-delay: 0.4s; - -o-transition-delay: 0.4s; - transition-delay: 0.4s; -} - -#sk__hero-carousel-slider .carousel-item.active { - -webkit-transition-timing-function: cubic-bezier(.9,0,.25,.88); - -o-transition-timing-function: cubic-bezier(.9,0,.25,.88); - transition-timing-function: cubic-bezier(.9,0,.25,.88); - -webkit-transition-duration: 1.2s; - -o-transition-duration: 1.2s; - transition-duration: 1.2s; -} - -#sk__hero-carousel-slider .carousel-item:not(.active):first-child { - z-index: 1; -} - -/* slide parallax background */ - -#sk__hero-carousel-slider .sk__parallax-background-element { - z-index: auto; -} - -/* Hero Video */ - -.sk__parallax-video-background-element { - top: 0; -} - -video.sk__video { - -o-object-fit: cover; - object-fit: cover; - width: 100%; - height: 100%; -} - -.sk__youtube-container { - position: absolute; - top: 0; - left: 0; - z-index: 0; - width: 100%; - height: 100%; - overflow: hidden; -} - -.sk__youtube-container .youtube-video { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - margin: auto; -} - -.sk__youtube-container .sk__gradient-back-v1 { - z-index: 2; -} - -.sk__youtube-container .sk__gradient-back-v2 { - z-index: 2; -} - -.sk__youtube-container .sk__pattern-overlay { - z-index: 3; -} - -/* morphing hover effect */ - -.sk__morphing-hover-hero-overlay { - -webkit-transform: translateY(-120vh); - -ms-transform: translateY(-120vh); - transform: translateY(-120vh); -} - -.sk__morphing-hover-hero-content { - padding: 120px 0; -} -@media all and (min-width: 768px) and (max-width: 1199px) { /* md - lg */ - .sk__morphing-hover-hero-content { - padding: 80px 0; - } -} -@media all and (max-width: 767px) { /* xs + sm */ - .sk__morphing-hover-hero-content { - padding: 20px 0; - } -} - -/* slide elements */ - -.hero-box-bottom-left { - position: relative; - max-width: 300px; -} - -@media all and (max-width: 380px) { - .hero-box-bottom-left { - max-width: 90%; - } -} - -.hero-h1-box { - position: relative; - left: 124px; -} - -h1.hero-h1, -span.hero-h1.sk__gradient-fancy-text-back { - font-family: 'Syncopate', sans-serif; - font-weight: 900; - font-size: 77px; - text-transform: uppercase; - letter-spacing: -5px; - line-height: 1.1; - line-height: 120%; - text-shadow: 3px 3px 4px rgba(0,0,0,0.35); -} - -.hero-box-p { - font-family: 'Poppins', sans-serif; - font-size: 10px; - line-height: 22px; - font-weight: 300; -} - -.hero-socials-section, -section.hero-socials-section { - position: fixed; - top: 0; - left: -70px; - width: 70px; - height: 100vh; - z-index: 1; -} - -.hero-socials { - position: absolute; - top: 0; /* controlled via JS */ - left: 35px; - left: 105px; - -webkit-writing-mode: vertical-rl; - -ms-writing-mode: tb-rl; - writing-mode: vertical-rl; - text-orientation: upright; - cursor: context-menu; -} - -.hero-socials span { /* animated with JS */ - opacity: 0; - -webkit-transform: scale(0.1); - -ms-transform: scale(0.1); - transform: scale(0.1); -} - -.hero-socials i, -.hero-socials span[class^="icon-"] { - width: 36px; - height: 36px; - font-size: 12px; - line-height: 57.6px; - color: #ffffff; - text-align: center; -} - -.hero-box-bottom-right { - position: absolute; - width: 260px; - height: 450px; - bottom: 0; - right: 0; -} - -.hero-box-bottom-right span, -.hero-box-bottom-right h4, -.hero-box-bottom-right p { - position: absolute; - margin: 0; - -webkit-writing-mode: vertical-rl; - -ms-writing-mode: tb-rl; - writing-mode: vertical-rl; - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} - -.hero-box-bottom-right .big-abbreviated-heading { - bottom: 31px; - right: 26px; -} - -.hero-box-bottom-right h4 { - bottom: 36px; - right: 125px; - font-family: 'Syncopate', sans-serif; - font-size: 26px; -} - -.hero-box-bottom-right p { - bottom: 37.5px; - right: 104px; - font-family: 'Lato', sans-serif; - font-size: 11px; - line-height: 23px; -} - -.hero-box-bottom-right .cover-text-wrapper { - position: absolute; - width: 100%; - height: 100%; -} - -.animated-element { - opacity: 0; -} - -@media all and (min-width: 1921px) { /* custom over FullHD */ - - .hero-h1-box { - left: 124px; - } - - h1.hero-h1, - span.hero-h1.sk__gradient-fancy-text-back { - font-size: 97px; - text-shadow: 3px 5px 5px rgba(0,0,0,0.35); - } - - .hero-box-bottom-left .btn { - padding: 25px 39px 21px; - font-size: 17px; - letter-spacing: 7px; - border-width: 2px; - } - - .hero-box-bottom-right { - bottom: 13px; - height: 570px; - } - - .hero-box-bottom-right .big-abbreviated-heading { - font-size: 92px; - right: 43px; - right: 30px; - } - - .hero-box-bottom-right p { - bottom: 39.5px; - right: 123px; - right: 126px; - font-size: 13px; - line-height: 37px; - } - - .hero-box-bottom-right h4 { - font-size: 30px; - line-height: 40px; - right: 151px; - } - - .hero-socials i, - .hero-socials span[class^="icon-"] { - height: 51px; - font-size: 18px; - } - -} - -@media all and (min-width: 1800px) and (max-width: 1920px) { /* custom for FullHD - Default */ - - .hero-h1-box { - left: 69px; - } - - h1.hero-h1, - span.hero-h1.sk__gradient-fancy-text-back { - font-size: 73px; - } - -} - -@media all and (min-width: 1281px) and (max-width: 1799px) { /* custom for 1366x768, 1600x900 and up until 1799 */ - - .hero-h1-box { - left: 72px; - } - - h1.hero-h1, - span.hero-h1.sk__gradient-fancy-text-back { - line-height: 111%; - font-size: 66px; - text-shadow: 2px 3px 3px rgba(0,0,0,0.35); - } - - .hero-box-bottom-right .big-abbreviated-heading { - font-size: 71px; - letter-spacing: -3px; - } - - .hero-socials { - letter-spacing: -3px; - } - - .hero-socials i, - .hero-socials span[class^="icon-"] { - height: 26px; - } - -} - -@media all and (min-width: 992px) and (max-width: 1280px) { /* custom for over tablet and 1280x720 */ - - .hero-h1-box { - left: 60px; - } - - h1.hero-h1, - span.hero-h1.sk__gradient-fancy-text-back { - line-height: 107%; - font-size: 59px; - text-shadow: 2px 3px 3px rgba(0,0,0,0.35); - } - .sk__hero-item-theme-style h1.hero-h1, - .sk__hero-item-theme-style span.hero-h1.sk__gradient-fancy-text-back { - margin-bottom: 30px; - } - - .hero-box-bottom-right .big-abbreviated-heading { - bottom: 60px; - } - - .hero-box-bottom-right p { - bottom: 66px; - } - - .hero-box-bottom-right h4 { - bottom: 64px; - line-height: 1.5; - } - - .hero-socials { - letter-spacing: -3px; - } - - .hero-socials i, - .hero-socials span[class^="icon-"] { - height: 14px; - } - -} - -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - - .hero-h1-box { - left: 65px; - padding-right: 50px; - } - - .hero-box-bottom-left { - margin-bottom: 20px; - } - - .hero-box-bottom-right { - margin-bottom: 41px; - } - -} - -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - - .hero-h1-box { - left: 0; - width: 100%; - } - - h1.hero-h1, - span.hero-h1.sk__gradient-fancy-text-back { - font-size: 59px; - letter-spacing: -4px; - line-height: 101%; - text-shadow: 2px 3px 3px rgba(0,0,0,0.35); - } - - .hero-box-bottom-right { - width: 167px; - height: 440px; - } - - .hero-box-bottom-right .big-abbreviated-heading { - font-size: 67px; - line-height: 104%; - } - - .hero-box-bottom-right h4 { - font-size: 22px; - line-height: 104%; - } - - .hero-box-bottom-right p { - line-height: 14px; - } - - .hero-socials-section { - display: none; - } - -} - -@media all and (max-width: 575px) { /* xs */ - - .hero-h1-box { - left: 0; - width: 100%; - } - - h1.hero-h1, - span.hero-h1.sk__gradient-fancy-text-back { - /* xs done separately in 2 queries below */ - } - - .hero-socials-section { - display: none; - } - - .hero-box-bottom-left { - max-width: 100%; - } - - .hero-box-bottom-right { - position: relative; - width: 100%; - height: auto; - top: 0; - left: 0; - margin-bottom: 145px; - margin-top: auto; - } - - .hero-box-bottom-right .big-abbreviated-heading { - line-height: 120%; - font-size: 1.8rem; - letter-spacing: -0.14rem; - } - - .hero-box-bottom-right h4 { - line-height: 114%; - font-size: 1.15rem; - } - - .hero-box-bottom-right p { - font-size: 11px; - line-height: 18px; - margin-bottom: 6px; - } - - .hero-box-bottom-right .cover-text-wrapper { - position: relative; - } - - .hero-box-bottom-right span, - .hero-box-bottom-right h4, - .hero-box-bottom-right p { - position: initial; - -webkit-writing-mode: initial; - -ms-writing-mode: initial; - writing-mode: initial; - -webkit-transform: rotate(0); - -ms-transform: rotate(0); - transform: rotate(0); - } - -} - -@media all and (min-width: 360px) and (max-width: 575px) { - h1.hero-h1, - span.hero-h1.sk__gradient-fancy-text-back { - line-height: 115%; - font-size: 2.7rem; - letter-spacing: -0.14rem; - text-shadow: 1px 1px 2px rgba(0,0,0,0.35); - } - .sk__hero-item-theme-style h1.hero-h1, - .sk__hero-item-theme-style span.hero-h1.sk__gradient-fancy-text-back { - margin-bottom: 3vh; - margin-top: 3vh; - } -} - -@media all and (max-width: 359px) { - - h1.hero-h1, - span.hero-h1.sk__gradient-fancy-text-back { - line-height: 120%; - font-size: 1.8rem; - letter-spacing: -0.14rem; - text-shadow: 1px 1px 2px rgba(0,0,0,0.35); - } - -} - -/** - * Hero section - Mega text (video) - */ - -section.sk__mega-video-text-section { - position: relative; - /*width: 100vw;*/ - /*min-height: 100vh;*/ - /*height: auto;*/ -} - -.sk__video-and-text-fusion { - mix-blend-mode: multiply; - overflow-x: hidden; -} - -h1.h1-hero-mega-text { - opacity: 1; - font-family: 'Poppins', sans-serif; - margin-top: -6vh; - text-transform: inherit; - font-size: 38rem; - font-size: 23.75vw; - letter-spacing: -1.7rem; - letter-spacing: -1.0625vw; - -webkit-transition: all 1.8s ease-in-out; - -o-transition: all 1.8s ease-in-out; - transition: all 1.8s ease-in-out; -} - -h1.h1-hero-mega-text.unspaced { - opacity: 0; - letter-spacing: 5rem; - letter-spacing: 3.125vw; - -webkit-transform: translateX(10vw); - -ms-transform: translateX(10vw); - transform: translateX(10vw); -} - -/** - * Hero section - Mega text (video) - */ - -section.sk__mega-image-text-section { - position: relative; - width: 100vw; - min-height: 100vh; - height: auto; -} - -.sk__image-and-text-fusion { - mix-blend-mode: multiply; -} - - -/** - * 9. Half-screen Sections - * ======================= - * parallax images, text, - * parallax text - */ - -.sk__halfscreen-section { - -} - -.sk__halfscreen-parallax-image-col, -.sk__halfscreen-parallax-video-col { - min-height: 400px; - padding: 0; -} - -.sk__halfscreen-text-col { - min-height: 400px; - padding: 8vw; -} - -.sk__halfscreen-text-col-inner { - margin: 0 auto; -} - - -/** - * 10. Numbers Section - * =================== - */ - -.sk__numbers-row { - padding-top: 8px; - padding-bottom: 8px; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} - -.sk__numbers-row .counters-wrap { - position: relative; - height: 22vw; - padding-top: 40px; -} - -.sk__numbers-row .counters-wrap:not(:last-child) { - border-right: 1px solid rgba(255,255,255,0.07); -} - -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - - .sk__numbers-row .counters-wrap { - height: 24vw; - } - -} - -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - - .sk__numbers-row .counters-wrap { - height: 24vw; - padding: 0; - border-bottom: 1px solid #1A1A1B; - border-bottom: 1px solid rgba(255,255,255,0.07); - } - -} - -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - - .sk__numbers-row .counters-wrap { - height: 35vw; - padding: 0; - } - - .sk__numbers-row .counters-wrap:not(:last-child) { - border-right: 1px solid #1A1A1B; - border-right: 1px solid rgba(255,255,255,0.07); - } - -} - -@media all and (max-width: 575px) { /* xs */ - - .sk__numbers-row .counters-wrap { - height: 42vw; - padding: 0; - } - - .sk__numbers-row .counters-wrap:not(:last-child) { - border-right: 1px solid #1A1A1B; - border-right: 1px solid rgba(255,255,255,0.07); - } - -} - -span.sk__counter { - font-size: 55px; - font-weight: 700; - line-height: 1.2; - letter-spacing: -1.65px; - color: #ffffff; -} - -.counters-wrap p { - font-size: 19px; - color: #ffffff; -} - -@media all and (min-width: 1921px) { - - span.sk__counter { - font-size: 66px; - } - - .counters-wrap p { - font-size: 23px; - } - -} - -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - - span.sk__counter { - font-size: 48px; - } - - .counters-wrap p { - font-size: 17px; - } - -} - -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - - span.sk__counter { - font-size: 4.3vw; - } - - .counters-wrap p { - font-size: 1.83vw; - margin-bottom: 0; - } - -} - -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - - span.sk__counter { - font-size: 48px; - } - - .counters-wrap p { - font-size: 17px; - margin-bottom: 0; - } - -} - -@media all and (max-width: 575px) { /* xs */ - - span.sk__counter { - font-size: 30px; - letter-spacing: -1px; - } - - .counters-wrap p { - font-size: 16px; - margin-bottom: 0; - } - -} - -span.numbers-deco { - width: calc(100% - 24px); - top: 32px; - left: 12px; - height: 1px; - background-color: rgba(255,255,255,0.07); -} - -@media all and (max-width: 991px) { /* xs to (and including) md */ - - span.numbers-deco { - width: 100%; - left: 0; - top: 0; - } - -} - -/** - * 11. About Us Section - * ==================== - */ - -.sk__about-us-section { - overflow-x: hidden; -} - -.about-right-image-wrap { - position: relative; - overflow: hidden; - padding-top: 49.42%; -} -@media all and (max-width: 991px) { /* xs to (and including) md */ - .about-right-image-wrap { - margin-top: 30px; - } -} - -.about-right-image { - background-image: url(../../assets/images/about-us.webp); -} - -.custom-about-us-p2 { - max-width: 320px; - width: 100%; - display: inline-block; -} -@media all and (min-width: 992px) and (max-width: 1399px) { /* lg + xl */ - .p-xs.custom-about-us-p2 { - max-width: 300px; - line-height: 1.8; - margin-top: -7px; - } -} -@media all and (max-width: 575px) { /* xs */ - .custom-about-us-p2 { - margin-left: auto; - margin-right: auto; - } -} - -.about-number { - display: inline-block; - font-size: 66px; - font-weight: 700; - line-height: 46.37px; - letter-spacing: -1.98px; - margin-right: -30px; - margin-left: 30px; -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .about-number { - font-size: 62px; - } -} -@media all and (max-width: 991px) { - .about-number { - margin-right: 0; - } -} -@media all and (max-width: 575px) { /* xs */ - .about-number { - width: 100%; - margin-left: auto; - margin-right: auto; - font-size: 39px; - } -} - -@media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ - .custom-about-divider-col { - padding-left: 42px; - } -} - -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .custom-about-number-col { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - } -} - -.about-button-col { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: start; - -webkit-box-align: end; - -ms-flex-align: end; - align-items: end; -} -@media all and (max-width: 575px) { /* xs */ - .about-button-col > div { - margin-left: auto; - margin-right: auto; - } -} - - -/** - * 12. Partners Section - * ==================== - */ - -.sk__partners-section { - padding-top: 10px; -} - -.sk__partners > div { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - position: relative; - padding: 1.5px; -} - -.sk__partners > div:first-child { - padding-left: 0; -} - -.sk__partners > div:last-child { - padding-right: 0; -} - -.sk__partners .col-sm-2 { /* make partners col-sm-2 1/5 instead of 1/6 width */ - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 20%; -} - -@media all and (max-width: 575px) { - - .sk__partners .col-xs-4 { /* reaffirm xs */ - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333334%; - } - - .sk__partners > div:first-child { - padding-left: 1.5px; - } - - .sk__partners > div:last-child { - padding-right: 1.5px; - } - -} - -.partner { - width: 100%; - padding-top: 80%; - background-color: rgba(255,255,255,0.05); -} - -.partner.partner-1 { - background-image: url(../../assets/images/partner-1.png); -} -.partner.partner-2 { - background-image: url(../../assets/images/partner-2.png); -} -.partner.partner-3 { - background-image: url(../../assets/images/partner-3.png); -} -.partner.partner-4 { - background-image: url(../../assets/images/partner-4.png); -} -.partner.partner-5 { - background-image: url(../../assets/images/partner-5.png); -} - - -/** - * 13. Portfolio Section - * ===================== - */ - -/* decrease top padding (set by sk__py) on these pages */ -.sk__portfolio-page .sk__portfolio-section, -.sk__home-portfolio .sk__portfolio-section { - padding-top: 23px; -} - -.sk__portfolio-thumbs { - position: relative; /* fix for gsap animation */ - overflow-x: hidden; /* fix for gsap animation */ - overflow-y: hidden; /* remove vert scrollbar after fix */ -} - -@media all and (min-width: 1921px) { - .sk__portfolio-item { - padding: 18px; - } -} -@media all and (min-width: 768px) and (max-width: 1920px) { - .sk__portfolio-item { - padding: 13px; - } -} -@media all and (min-width: 320px) and (max-width: 767px) { - .sk__portfolio-item { - padding: 8px; - } -} -@media all and (max-width: 319px) { - .sk__portfolio-item { - padding: 2px; - } -} - -a.sk__portfolio-thumblink { - display: block; - position: relative; - overflow: hidden; - width: 100%; - padding-top: 211.7%; - padding-right: 0; -} -@media all and (min-width: 768px) and (max-width: 1280px) { /* custom */ - a.sk__portfolio-thumblink { - padding-top: 200%; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - a.sk__portfolio-thumblink { - padding-top: 186%; - } -} -@media all and (max-width: 575px) { /* xs */ - a.sk__portfolio-thumblink { - padding-top: 174%; - } -} - -.sk__portfolio-thumblink-image { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; - -webkit-transform: scale(1.2); - -ms-transform: scale(1.2); - transform: scale(1.2); - -webkit-transition: all 1s ease 0s; - -o-transition: all 1s ease 0s; - transition: all 1s ease 0s; - z-index: -1; -} - -a.sk__portfolio-thumblink:hover .sk__portfolio-thumblink-image { - transition: filter 0.6s, transform 4s cubic-bezier(.12,.72,.31,.65) 0.1s, -webkit-filter 0.6s, -webkit-transform 4s cubic-bezier(.12,.72,.31,.65) 0.1s; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - -webkit-filter: saturate(1.5) brightness(0.5); - filter: saturate(1.5) brightness(0.5); -} - -.portfolio-thumb-info { - position: absolute; - bottom: 0; - width: 100%; - padding-left: 10px; - padding-right: 10px; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - -webkit-transform: translateY(43px); - -ms-transform: translateY(43px); - transform: translateY(43px); -} - -@media all and (min-width: 321px) and (max-width: 575px) { /* custom xs 1 */ - .portfolio-thumb-info { - padding-left: 4px; - padding-right: 4px; - -webkit-transform: translateY(50px); - -ms-transform: translateY(50px); - transform: translateY(50px); - } -} -@media all and (max-width: 320px) { /* custom xs 2 */ - .portfolio-thumb-info { - padding-left: 4px; - padding-right: 4px; - -webkit-transform: translateY(80px); - -ms-transform: translateY(80px); - transform: translateY(80px); - } -} - -a.sk__portfolio-thumblink:hover .portfolio-thumb-info { - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); -} - -a.sk__portfolio-thumblink h4.h4-small, -a.sk__portfolio-thumblink span.h4-small.sk__gradient-fancy-text-back { - line-height: 1.45; - margin-bottom: 1rem; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} - -a.sk__portfolio-thumblink:hover h4.h4-small, -a.sk__portfolio-thumblink:hover span.h4-small.sk__gradient-fancy-text-back { - margin-bottom: 0.6rem; -} - -a.sk__portfolio-thumblink:hover h4.h4-small, -a.sk__portfolio-thumblink:hover span.h4-small.sk__gradient-fancy-text-back { - -webkit-transition: all 0.45s ease-in 0s; - -o-transition: all 0.45s ease-in 0s; - transition: all 0.45s ease-in 0s; -} - -a.sk__portfolio-thumblink h6 { - margin-bottom: 5px; - -webkit-transition: opacity 0.3s ease 0.3s, -webkit-transform 0.4s ease 0s; - transition: opacity 0.3s ease 0.3s, -webkit-transform 0.4s ease 0s; - -o-transition: transform 0.4s ease 0s, opacity 0.3s ease 0.3s; - transition: transform 0.4s ease 0s, opacity 0.3s ease 0.3s; - transition: transform 0.4s ease 0s, opacity 0.3s ease 0.3s, -webkit-transform 0.4s ease 0s; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); -} -@media all and (min-width: 420px) and (max-width: 575px) { /* custom xs 1*/ - a.sk__portfolio-thumblink h6 { - font-size: 13px; - letter-spacing: 1.6px; - margin-bottom: 4px; - } -} -@media all and (max-width: 419px) { - a.sk__portfolio-thumblink h6 { /* custom xs 2 */ - font-size: 11px; - letter-spacing: 1px; - } -} - -a.sk__portfolio-thumblink:hover h6 { - -webkit-transition: opacity 0.4s ease 0s, -webkit-transform 0.35s ease 0.1s; - transition: opacity 0.4s ease 0s, -webkit-transform 0.35s ease 0.1s; - -o-transition: transform 0.35s ease 0.1s, opacity 0.4s ease 0s; - transition: transform 0.35s ease 0.1s, opacity 0.4s ease 0s; - transition: transform 0.35s ease 0.1s, opacity 0.4s ease 0s, -webkit-transform 0.35s ease 0.1s; - -webkit-transform: translateY(18px); - -ms-transform: translateY(18px); - transform: translateY(18px); - opacity: 0; -} - -a.sk__portfolio-thumblink p { - display: inline-block; - background: black; - padding: 10px 23px; - border-radius: 70px; - -webkit-transition: transform 0.6s ease 0s, opacity 0.6s ease 0s, background-color 0.4s ease 0s, color 0.4s ease 0s; - -o-transition: transform 0.6s ease 0s, opacity 0.6s ease 0s, background-color 0.4s ease 0s, color 0.4s ease 0s; - -webkit-transition: opacity 0.6s ease 0s, background-color 0.4s ease 0s, color 0.4s ease 0s, -webkit-transform 0.6s ease 0s; - transition: opacity 0.6s ease 0s, background-color 0.4s ease 0s, color 0.4s ease 0s, -webkit-transform 0.6s ease 0s; - transition: transform 0.6s ease 0s, opacity 0.6s ease 0s, background-color 0.4s ease 0s, color 0.4s ease 0s; - transition: transform 0.6s ease 0s, opacity 0.6s ease 0s, background-color 0.4s ease 0s, color 0.4s ease 0s, -webkit-transform 0.6s ease 0s; - -webkit-transform: translateY(23px); - -ms-transform: translateY(23px); - transform: translateY(23px); - opacity: 0; -} - -a.sk__portfolio-thumblink:hover p { - -webkit-transition: transform 0.6s ease 0.35s, opacity 0.6s ease 0.35s, background-color 0.4s ease 0s, color 0.4s ease 0s; - -o-transition: transform 0.6s ease 0.35s, opacity 0.6s ease 0.35s, background-color 0.4s ease 0s, color 0.4s ease 0s; - -webkit-transition: opacity 0.6s ease 0.35s, background-color 0.4s ease 0s, color 0.4s ease 0s, -webkit-transform 0.6s ease 0.35s; - transition: opacity 0.6s ease 0.35s, background-color 0.4s ease 0s, color 0.4s ease 0s, -webkit-transform 0.6s ease 0.35s; - transition: transform 0.6s ease 0.35s, opacity 0.6s ease 0.35s, background-color 0.4s ease 0s, color 0.4s ease 0s; - transition: transform 0.6s ease 0.35s, opacity 0.6s ease 0.35s, background-color 0.4s ease 0s, color 0.4s ease 0s, -webkit-transform 0.6s ease 0.35s; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - opacity: 1; -} - -a.sk__portfolio-thumblink p:hover { - background-color: #ffffff; - color: #000000; -} - -/* Slick slider UI */ - -.slick-dots li button:before { - color: rgba(255,255,255,1); -} - -.slick-prev:before, -.slick-next:before { - font-family: icomoon; -} - -/* Plain portfolio thumbnails - without slick.js */ - -.sk__portfolio-wrapper.not-slick { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} - -.sk__portfolio-wrapper.not-slick .sk__portfolio-item { - opacity: 0; - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 20%; - -webkit-transform: translateX(-100px); - -ms-transform: translateX(-100px); - transform: translateX(-100px); -} -@media all and (min-width: 1024px) and (max-width: 1279px) { - .sk__portfolio-wrapper.not-slick .sk__portfolio-item { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 25%; - } -} -@media all and (min-width: 768px) and (max-width: 1023px) { - .sk__portfolio-wrapper.not-slick .sk__portfolio-item { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333333%; - } -} -@media all and (min-width: 680px) and (max-width: 767px) { - .sk__portfolio-wrapper.not-slick .sk__portfolio-item { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 33.33333333%; - } -} -@media all and (max-width: 679px) { - .sk__portfolio-wrapper.not-slick .sk__portfolio-item { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 50%; - } -} - -.sk__portfolio-wrapper.not-slick .sk__portfolio-thumblink-image { - z-index: initial; -} - - -/** - * 14. Featured Project Section - * ============================ - */ - -.sk__featured-project-section { - overflow-x: hidden; - padding-top: 140px; - padding-bottom: 140px; -} - -.sk__featured-project-background { - -webkit-transform-origin: right center; - -ms-transform-origin: right center; - transform-origin: right center; - -webkit-transform: scale(0.76785); - -ms-transform: scale(0.76785); - transform: scale(0.76785); - top: 11.6075%; -} -@media all and (max-width: 1920px) { - .sk__featured-project-background { - -webkit-transform: scale(0.85); - -ms-transform: scale(0.85); - transform: scale(0.85); - top: 7.5%; - } -} -@media all and (max-width: 991px) { /* xs + sm + md */ - .sk__featured-project-background { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - top: 0; - } -} - -.sk__featured-project-infos-container { - padding: 15px; -} - -.sk__featured-project-section .sk__parallax-background-element { - z-index: 0; -} - -.featured-project { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: start; -} - -.sk__featured-project-infos { - position: relative; -} - -.featured-project-padder { - height: 140px; -} -@media all and (max-width: 575px) { /* xs */ - .featured-project-padder { - height: 0; - } -} - -/** - * 15. Features Section - * ==================== - */ - -/** - * Feature Boxes V1 - */ - -.sk__features { - padding-bottom: 70px; - margin-left: -2px; - margin-right: -2px; -} - -.sk__feature-col { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - padding: 2px; -} - -.sk__feature, -.sk__feature-clean { - position: relative; - overflow: hidden; - width: 100%; - -webkit-transition: all 0.3s ease 0s; - -o-transition: all 0.3s ease 0s; - transition: all 0.3s ease 0s; -} - -.sk__feature { - padding: 90px 60px 70px 60px; - background-color: #171717; - background-color: rgba(255,255,255,0.05); - background-color: rgba(255,255,255,0.034); -} - -.sk__feature-clean { - padding: 40px 60px 30px 60px; -} - -a.sk__feature, -.sk__feature-clean { - cursor: pointer; -} - -.sk__feature:hover { - background-color: rgba(255,255,255,0.025); -} - -.sk__feature span[class*="icon-"], -.sk__feature-clean span[class*="icon-"] { - display: inline-block; - font-size: 46px; - margin-bottom: 31px; -} - -@media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ - .sk__feature { - padding: 60px 46px 46px 46px; - } - .sk__feature-clean { - padding: 40px 46px 30px 46px; - } - .sk__feature p, - .sk__feature-clean p { - line-height: 27px; - } -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .sk__feature { - padding: 46px 46px 38px 46px; - } - .sk__feature-clean { - padding: 38px 46px 26px 46px; - } -} -@media all and (min-width: 576px) and (max-width: 991px) { /* sm + md */ - .sk__feature { - padding: 46px 36px 34px 36px; - } - .sk__feature-clean { - padding: 38px 20px 26px 20px; - } - .sk__feature p, - .sk__feature-clean p { - font-size: 14px; - line-height: 24px; - } -} -@media all and (min-width: 321px) and (max-width: 575px) { /* custom xs 1 */ - .sk__feature { - padding: 46px 36px 34px 36px; - } - .sk__feature-clean { - padding: 38px 36px 24px 36px; - } -} -@media all and (max-width: 320px) { /* custom xs 1 */ - .sk__feature { - padding: 34px 20px 18px 20px; - } - .sk__feature-clean { - padding: 28px 20px 18px 20px; - } -} - -.sk__feature:before { - content: ""; - position: absolute; - top: -6px; - left: -6px; - width: 12px; - height: 12px; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - background-color: #898989; - background-color: rgba(255,255,255,0.27); -} - -.colorline-deco { - /* tied with sk__feature side paddings */ - position: relative; - width: 100%; - height: 1px; - margin-top: 15px; - margin-bottom: 13px; -} - -.colorline-deco-normal { - background-color: rgba(255,255,255,0.15); - -webkit-transition: all 1s ease 0s; - -o-transition: all 1s ease 0s; - transition: all 1s ease 0s; - opacity: 1; -} - -.colorline-deco-hover { - -webkit-transition: all 1s ease 0s; - -o-transition: all 1s ease 0s; - transition: all 1s ease 0s; - opacity: 0; -} - -.sk__feature:hover .colorline-deco-normal, -.sk__feature-clean:hover .colorline-deco-normal { - opacity: 0; -} - -.sk__feature:hover .colorline-deco-hover, -.sk__feature-clean:hover .colorline-deco-hover { - opacity: 1; -} - -.sk__features-subtext { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} - -.features-subtext-p { - max-width: 90%; - width: 320px; -} -@media all and (max-width: 575px) { /* xs */ - .features-subtext-p { - margin-left: auto; - margin-right: auto; - } -} - -.features-subtext-deco { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - height: 1px; - background-color: #5C5C5C; - background-color: rgba(255,255,255,0.22); - margin-right: 15px; - margin-top: 8px; -} - -@media all and (max-width: 575px) { /* xs */ - .features-subtext-deco { - display: none; - } -} - -/** - * Feature boxes V2 - */ - -@media all and (max-width: 575px) { - .sk__featureboxes h2.h2-large, - .sk__featureboxes span.h2-large.sk__gradient-fancy-text-back { - font-size: 19px; - } -} - -@media all and (max-width: 575px) { - .sk__featurebox-col { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 100%; - max-width: 288px; - margin: 0 auto; - } -} - -@media all and (max-width: 420px) { - .sk__featurebox-col { - max-width: 228px; - } -} - -.sk__featurebox { - margin-bottom: 30px; -} - -.sk__featurebox-headwrap { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - position: relative; - width: 100%; - margin-bottom: 17px; - padding-top: 100%; - border: 1px solid rgba(255,255,255,0.1); - border-radius: 10px; -} - -.sk__featurebox-headwrap img { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - position: absolute; - width: 100%; -} - -.sk__featurebox h4 { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - position: absolute; - top: 0; - left: 12px; - width: calc(100% - 24px); - height: 100%; - font-size: 40px; - font-weight: 700; - letter-spacing: -2.5px; - text-transform: inherit; - line-height: 1.3; - margin-bottom: 0; -} - -@media all and (min-width: 1400px) and (max-width: 1920px) { /* custom */ - .sk__featurebox h4 { - font-size: 36px; - letter-spacing: -2px; - } -} -@media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ - .sk__featurebox h4 { - font-size: 30px; - letter-spacing: -1.3px; - } -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .sk__featurebox h4 { - font-size: 25px; - letter-spacing: -1.1px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__featurebox h4 { - font-size: 30px; - letter-spacing: -1.3px; - } -} -@media all and (max-width: 420px) { /* custom */ - .sk__featurebox h4 { - font-size: 30px; - letter-spacing: -1.3px; - } -} - -.sk__featurebox h5 { - font-weight: 600; - font-size: 17px; - line-height: 1.55; - color: #b8bcbf; -} -.sk__featureboxes-image-style .sk__featurebox h5 { - color: #FFFFFF; -} -@media all and (min-width: 1400px) and (max-width: 1399px) { /* custom */ - .sk__featurebox h5 { - font-size: 16px; - } -} -@media all and (min-width: 992px) and (max-width: 1399px) { /* lg + xl */ - .sk__featurebox h5 { - font-size: 14px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__featurebox h5 { - font-size: 16px; - } -} -@media all and (max-width: 767px) { /* xs + sm */ - .sk__featurebox h5 { - font-size: 15px; - } -} - -.sk__featurebox p.p-v2 { - font-size: 13px; - line-height: 23px; -} -@media all and (min-width: 1400px) { /* xxl */ - .sk__featurebox p.p-v2 { - font-size: 13px; - line-height: 23px; - } -} -@media all and (min-width: 992px) and (max-width: 1399px) { /* lg + xl */ - .sk__featurebox p.p-v2 { - font-size: 12px; - line-height: 21px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__featurebox p.p-v2 { - font-size: 12px; - line-height: 21px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__featurebox p.p-v2 { - font-size: 13px; - line-height: 23px; - } -} - -/** - * 16. Laptop Section - * ================== - */ - -.sk__laptop-section { - overflow-x: hidden; - background-size: cover; - background-position: left bottom; - background-repeat: no-repeat; - background-image: url(../../assets/images/section-laptop-background.svg); -} - -.sk__laptop-image-col { - z-index: 1; -} - -.sk__laptop-image-col img { - -webkit-transform-origin: left top; - -ms-transform-origin: left top; - transform-origin: left top; - -webkit-transform: scale(1.56869); - -ms-transform: scale(1.56869); - transform: scale(1.56869); - max-width: 626px; - height: auto; -} - -.sk__laptop-infos-container { - position: relative; - min-height: 1124px; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: end; -} - -.sk__laptop-infos-container > div { - -ms-flex-preferred-size: auto; - flex-basis: auto; -} - -.sk__laptop-mockup-subcontainer { - position: absolute; - top: 30px; - left: 0; - width: 982px; - height: 1040px; - background-image: url(../../assets/images/MacBook-Pro-2020-Isometric-982x1040-by-Skilltech.webp); - background-repeat: no-repeat; - background-position: center; - background-size: cover; -} -@media all and (min-width: 1660px) { /* custom */ - .sk__laptop-mockup-subcontainer { - left: -53px; - } -} - -.sk__laptop-infos-subcontainer { - padding: 2vh 12px 33vh; -} - -@media all and (min-width: 1400px) and (max-width: 1660px) { - .sk__laptop-infos-container { - min-height: 925px; - } - .sk__laptop-mockup-subcontainer { - width: calc(982px * 0.8); - height: calc(1040px * 0.8); - } -} - -@media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ - .sk__laptop-infos-container { - min-height: 788px; - } - .sk__laptop-mockup-subcontainer { - width: calc(982px * 0.65); - height: calc(1040px * 0.65); - } - .sk__laptop-infos-subcontainer { - padding: 6vh 12px 33vh; - } -} - -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .sk__laptop-infos-container { - min-height: 727px; - } - .sk__laptop-mockup-subcontainer { - width: calc(982px * 0.6); - height: calc(1040px * 0.6); - } -} - -@media all and (max-width: 991px) { /* xs + sm + md */ - .sk__laptop-infos-container { - min-height: 650px; - height: auto; - padding-bottom: 100px; - } - .sk__laptop-infos-subcontainer { - padding: 2vh 12px 0; - } - .sk__laptop-mockup-subcontainer { - top: 30px; - position: relative; - width: 100%; - height: 105.9%; - background-size: contain; - background-position: center top; - } -} - -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__laptop-mockup-subcontainer { - width: 700px; - height: calc(700px * 1.059); - } -} - -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__laptop-mockup-subcontainer { - width: 520px; - height: calc(520px * 1.059); - } -} - -@media all and (max-width: 575px) { /* xs */ - .sk__laptop-mockup-subcontainer { - width: 90vw; - height: calc(90vw * 1.059); - } -} - - -@media all and (max-width: 767px) { - .sk__laptop-infos-container.sk__flex-center-y { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: start; - } - .sk__laptop-infos-subcontainer { - margin-top: 30px; - } -} - -.sk__laptop-infos { - position: relative; -} - -.sk__rectangles-laptop .sk__rectangle-white-1 { - -webkit-transform: translate(168px,-87px); - -ms-transform: translate(168px,-87px); - transform: translate(168px,-87px); -} - -.sk__rectangles-laptop .sk__rectangle-white-2 { - -webkit-transform: translate(50px,37px); - -ms-transform: translate(50px,37px); - transform: translate(50px,37px); -} - -.sk__rectangles-laptop .sk__rectangle-black { - -webkit-transform: translate(104px,-20px); - -ms-transform: translate(104px,-20px); - transform: translate(104px,-20px); -} - -.sk__rectangles-laptop { - position: relative; - max-width: 100%; - width: 780px; -} - -@media all and (max-width: 575px) { /* xs */ - .sk__rectangles-laptop { - width: 100%; - } -} - -.sk__rectangles-laptop-parallax-layers { - position: absolute; - height: 140%; - width: 100%; - top: -20%; - right: 0; -} - - -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .sk__rectangles-laptop-parallax-layers { - width: 73%; - } -} - -p.sk__rectangles-laptop-custom-p { - margin: 0 0 1rem auto; -} - - -/** - * 17. Services Section - * ==================== - */ - -.sk__services-background.sk__parallax-background-element { - background-image: url(../../assets/images/services-background-v3.jpg); - -webkit-filter: contrast(1.07); - filter: contrast(1.07); - -webkit-transform: scale(1.22); - -ms-transform: scale(1.22); - transform: scale(1.22); -} - -.sk__iconbox { - padding: 20px; - margin-bottom: 20px; -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__iconbox { - padding: 20px 0; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__iconbox { - padding: 20px 30px; - max-width: 360px; - margin: 0 auto; - } -} - -a.sk__iconbox-icon-link { - display: inline-block; - margin: 0 auto 25px; - position: relative; - width: 128px; - height: 128px; - mix-blend-mode: difference; - -webkit-transition: initial; - -o-transition: initial; - transition: initial; -} - -.mix-blend-difference { - mix-blend-mode: difference !important; -} - -@-webkit-keyframes counterRotateInfinitely { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(-360deg); - transform: rotate(-360deg); - } -} - -@keyframes counterRotateInfinitely { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(-360deg); - transform: rotate(-360deg); - } -} -span.sk__iconbox-icon-dash { - opacity: 0; - position: absolute; - width: 90%; - height: 90%; - top: 5%; - left: 5%; - border-radius: 100%; - border: 2px dotted #000; - z-index: -1; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; - -webkit-animation: counterRotateInfinitely 30s linear 0s infinite; - animation: counterRotateInfinitely 30s linear 0s infinite; -} - -a.sk__iconbox-icon-link:hover span.sk__iconbox-icon-dash { - opacity: 1; - width: 110%; - height: 110%; - top: -5%; - left: -4%; -} - -a.sk__iconbox-icon-link > span.sk__iconbox-icon { - position: absolute; - width: 128px; - height: 128px; - border: 2px solid rgba(255,255,255,0.13); - border-radius: 130px; - overflow: hidden; -} -a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon { - border-color: rgba(255,255,255,0); -} - -a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(2), -a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(3), -a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(4), -a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(5), -a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(6), -a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(7) { - border: 2px solid transparent; -} - -a.sk__iconbox-icon-link i, -a.sk__iconbox-icon-link span[class^="icon-"] { - padding: 3px; - font-size: 44px; -} -a.sk__iconbox-icon-link > span.sk__iconbox-icon:not(:first-child) i, -a.sk__iconbox-icon-link > span.sk__iconbox-icon:not(:first-child) span[class^="icon-"] { - display: none; -} - -a.sk__iconbox-icon-link span[class*="icon-"].sk__gradient-fancy-text { - z-index: 1; - background: #000000; - color: #ffffff; - -webkit-background-clip: text; - -webkit-text-stroke: 0 transparent; -} - -a.sk__iconbox-icon-link:hover span[class*="icon-"].sk__gradient-fancy-text { - /* see it under colors */ -} - -@-webkit-keyframes rotateInfinitely { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@keyframes rotateInfinitely { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -a.sk__iconbox-icon-link > span.sk__iconbox-icon > span.sk__iconbox-trail { - content: ''; - opacity: 0; - position: absolute; - width: 124px; - height: 124px; - top: 1px; - left: 1px; - border-radius: 130px; - -webkit-transform-origin: center bottom; - -ms-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation: rotateInfinitely 3s linear 0s infinite; - animation: rotateInfinitely 3s linear 0s infinite; -} -a.sk__iconbox-icon-link > span.sk__iconbox-icon:first-child > span.sk__iconbox-trail { - display: none; -} -a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(2) > span.sk__iconbox-trail { - -webkit-animation-delay: 1s; - animation-delay: 1s; -} -a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(3) > span.sk__iconbox-trail { - -webkit-animation-delay: 2s; - animation-delay: 2s; -} -a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(4) > span.sk__iconbox-trail { - -webkit-animation-delay: 3s; - animation-delay: 3s; -} -a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(5) > span.sk__iconbox-trail { - -webkit-animation-delay: 1.5s; - animation-delay: 1.5s; - -webkit-animation-duration: 4.5s; - animation-duration: 4.5s; -} -a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(6) > span.sk__iconbox-trail { - -webkit-animation-delay: 3s; - animation-delay: 3s; - -webkit-animation-duration: 4.5s; - animation-duration: 4.5s; -} -a.sk__iconbox-icon-link > span.sk__iconbox-icon:nth-child(7) > span.sk__iconbox-trail { - -webkit-animation-delay: 4.5s; - animation-delay: 4.5s; - -webkit-animation-duration: 4.5s; - animation-duration: 4.5s; -} - -a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon > span.sk__iconbox-trail { - opacity: 1; - height: 50%; - top: 0; - right: 0; - border-top-left-radius: 62px; - border-top-right-radius: 62px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -a.sk__iconbox-icon-link > span.sk__iconbox-icon:after { - content: ''; - position: absolute; - width: 128px; - height: 128px; - top: -1px; - left: -1px; - border: 2px solid transparent; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; - border-radius: 130px; - background: #000000; -} - -a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon:after { - -webkit-transform: scale(0.935) translate(-1px, -1px); - -ms-transform: scale(0.935) translate(-1px, -1px); - transform: scale(0.935) translate(-1px, -1px); -} -@media all and (min-width: 576px) and (max-width: 1920px) { - a.sk__iconbox-icon-link { - margin: 0 auto 15px; - width: 112px; - height: 112px; - } - a.sk__iconbox-icon-link > span.sk__iconbox-icon { - width: 112px; - height: 112px; - border-radius: 114px; - } - a.sk__iconbox-icon-link > span.sk__iconbox-icon > span.sk__iconbox-trail { - width: 108px; - height: 108px; - border-radius: 114px; - } - a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon > span.sk__iconbox-trail { - border-top-left-radius: 54px; - border-top-right-radius: 54px; - } - a.sk__iconbox-icon-link > span.sk__iconbox-icon:after { - width: 112px; - height: 112px; - border-radius: 114px; - } - a.sk__iconbox-icon-link i, - a.sk__iconbox-icon-link span[class^="icon-"] { - font-size: 41px; - } - a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon:after { - -webkit-transform: scale(0.925) translate(-1px, -1px); - -ms-transform: scale(0.925) translate(-1px, -1px); - transform: scale(0.925) translate(-1px, -1px); - } -} -@media all and (max-width: 575px) { /* xs */ - a.sk__iconbox-icon-link { - margin: 0 auto 15px; - width: 98px; - height: 98px; - } - a.sk__iconbox-icon-link > span.sk__iconbox-icon { - width: 98px; - height: 98px; - border-radius: 100px; - } - a.sk__iconbox-icon-link > span.sk__iconbox-icon > span.sk__iconbox-trail { - width: 108px; - height: 108px; - border-radius: 100px; - } - a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon > span.sk__iconbox-trail { - border-top-left-radius: 47px; - border-top-right-radius: 47px; - } - a.sk__iconbox-icon-link > span.sk__iconbox-icon:after { - width: 98px; - height: 98px; - border-radius: 100px; - } - a.sk__iconbox-icon-link i, - a.sk__iconbox-icon-link span[class^="icon-"] { - font-size: 35px; - } - a.sk__iconbox-icon-link:hover > span.sk__iconbox-icon:after { - -webkit-transform: scale(0.925) translate(-1px, -1px); - -ms-transform: scale(0.925) translate(-1px, -1px); - transform: scale(0.925) translate(-1px, -1px); - } -} - -a.sk__iconbox-text-link { - -webkit-transition: initial; - -o-transition: initial; - transition: initial; - margin: 0 auto; -} - -@media all and (min-width: 1400px) and (max-width: 1920px) { - .sk__iconbox h5 { - font-size: 19px; - } -} - -/** - * 18. Skills Section (& Testimonials Section) - * =========================================== - */ - -p.skills-subhead { - margin-bottom: 0; -} - -.sk__skills h1.h1-small { - line-height: 49px; -} - -.sk__skill-wrap { - position: relative; - margin-bottom: 7px; -} - -.sk__skill-el { - display: inline-block; -} - -.sk__skill-name { - width: 18.6%; - margin-right: 0.74%; -} - -.sk__skill-area { - position: relative; - width: 75%; - margin-right: 0.5%; - height: 13px; - border-top: 1px solid #222222; -} - -.sk__skill-bar { - height: 6px; - position: absolute; - margin-top: 6px; - left: 0; - -webkit-transform-origin: left center; - -ms-transform-origin: left center; - transform-origin: left center; - -webkit-transform: scaleX(0); - -ms-transform: scaleX(0); - transform: scaleX(0); -} - -.sk__skill-number { - width: 4.5%; - text-align: right; -} - -.sk__skill-wrap p { - font-family: 'Poppins', sans-serif; - color: #e1e1e1; - font-size: 14px; - text-transform: uppercase; - font-weight: 600; -} -@media all and (min-width: 1400px) { /* over xxl */ - .sk__skill-wrap p { - font-size: 15px; - } -} -@media all and (min-width: 1200px) and (max-width: 1399px) { /* xl */ - .sk__skill-name { - width: 18.4%; - } -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .sk__skill-name { - width: 22%; - margin-right: 1%; - } - .sk__skill-area { - width: 70.5%; - margin-right: 0.9%; - } - .sk__skill-number { - width: 4.5%; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__skill-wrap p { - font-size: 12px; - } -} -@media all and (max-width: 991px) { /* xs--to--md */ - .sk__skill-name, - .sk__skill-area { - display: block; - width: 100%; - } - .sk__skill-area { - margin-bottom: 25px; - } - .sk__skill-number { - position: absolute; - right: 0; - top: 0; - min-width: 50px; - } - .sk__skill-wrap p { - margin-bottom: 8px; - } -} - -/** - * Testimonials - * ============ - */ - -.sk__testimonials { - margin-top: 30px; - margin-bottom: 30px; -} - -.sk__testimonial-container { - margin-bottom: 30px; - margin-top: 20px; -} - -.sk__testimonial-img { - width: 134px; - height: 134px; - border-radius: 134px; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -.sk__testimonial-img-1 { - background-image: url(../../assets/images/testimonial-img-1.webp); -} - -.sk__testimonial-img-2 { - background-image: url(../../assets/images/testimonial-img-2.webp); -} - -.sk__testimonial-txt { - margin-left: 41px; -} - -.sk__testimonial-txt h5 { - margin-bottom: 0; - line-height: 28.6px; -} - -.sk__testimonial-txt p.p-xs { - font-size: 11px; - margin-bottom: 0.75rem; -} - -.sk__testimonial-txt p:not(.p-xs) { - margin-bottom: 0; - margin-top: 4px; - line-height: 20px; -} - -@media all and (max-width: 575px) { /* xs */ - .sk__testimonial-container { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - } - .sk__testimonial-img { - margin: 0 auto 25px; - } - .sk__testimonial-txt { - margin-left: 0; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - } - .sk__testimonial-txt p { - margin-left: auto; - margin-right: auto; - } -} - - -/** - * 19. CTA Section (Warped CTA) - * ============================ - */ - -section.sk__cta-warp { - padding: 170px 0; - overflow-x: hidden; -} -section.sk__cta-warp:not(.no-background) { - background-image: url(../../assets/images/section-CTA-background-SVG.svg); -} -@media all and (max-width: 575px) { - section.sk__cta-warp { - padding: 75px 0; - } -} - -.sk__warped-text-wrapper { - position: relative; - z-index: 1; - opacity: 0; -} - -.sk__warped-text-wrapper[class*="clone"] { - opacity: 0.15; - position: absolute; - top: 0; - left: 0; - height: auto; - margin-left: auto; - margin-right: auto; -} - -.sk__warped-text-wrapper .sk__gradient-fancy-text.sk__warped-text { - -webkit-transition: -webkit-filter 1s ease; - transition: -webkit-filter 1s ease; - -o-transition: filter 1s ease; - transition: filter 1s ease; - transition: filter 1s ease, -webkit-filter 1s ease; - -webkit-filter: blur(10px); - filter: blur(10px); - -webkit-text-stroke: 5px transparent; -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__warped-text-wrapper .sk__gradient-fancy-text.sk__warped-text { - -webkit-text-stroke: 3.6px transparent; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__warped-text-wrapper .sk__gradient-fancy-text.sk__warped-text { - -webkit-text-stroke: 3.2px transparent; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__warped-text-wrapper .sk__gradient-fancy-text.sk__warped-text { - -webkit-text-stroke: 2.9px transparent; - } -} - -.sk__warped-text-wrapper .sk__gradient-fancy-text.sk__warped-text.deblur { - -webkit-filter: blur(0); - filter: blur(0); -} - -.warped-text-clone-l1 { - -webkit-transform: translateX(-15vw); - -ms-transform: translateX(-15vw); - transform: translateX(-15vw); -} -.warped-text-clone-l2 { - -webkit-transform: translateX(-12vw); - -ms-transform: translateX(-12vw); - transform: translateX(-12vw); -} -.warped-text-clone-l3 { - -webkit-transform: translateX(-9vw); - -ms-transform: translateX(-9vw); - transform: translateX(-9vw); -} -.warped-text-clone-l4 { - -webkit-transform: translateX(-6vw); - -ms-transform: translateX(-6vw); - transform: translateX(-6vw); -} -.warped-text-clone-l5 { - -webkit-transform: translateX(-3vw); - -ms-transform: translateX(-3vw); - transform: translateX(-3vw); -} -.warped-text-clone-r1 { - -webkit-transform: translateX(15vw); - -ms-transform: translateX(15vw); - transform: translateX(15vw); -} -.warped-text-clone-r2 { - -webkit-transform: translateX(12vw); - -ms-transform: translateX(12vw); - transform: translateX(12vw); -} -.warped-text-clone-r3 { - -webkit-transform: translateX(9vw); - -ms-transform: translateX(9vw); - transform: translateX(9vw); -} -.warped-text-clone-r4 { - -webkit-transform: translateX(6vw); - -ms-transform: translateX(6vw); - transform: translateX(6vw); -} -.warped-text-clone-r5 { - -webkit-transform: translateX(3vw); - -ms-transform: translateX(3vw); - transform: translateX(3vw); -} - -.sk__warped-text { - font-family: 'Bebas Neue', sans-serif; - line-height: 1; - font-size: 6vw; - color: #000000; - background: #ffffff; - -webkit-background-clip: text; - -webkit-text-stroke: 4px transparent; -} -.sk__warped-text-wrapper[class*="clone"] .sk__warped-text { - -webkit-transition: all 0.3s ease-out 0s; - -o-transition: all 0.3s ease-out 0s; - transition: all 0.3s ease-out 0s; - color: #000000; - background: #000000; - -webkit-background-clip: text; - -webkit-text-stroke: 4px transparent; -} -.sk__warped-text-wrapper[class*="clone"] .sk__warped-text.sk__warped-text-color-changed { - color: #000000; - background: #ffffff; - -webkit-background-clip: text; - -webkit-text-stroke: 4px transparent; - padding: 0.065em; -} -@media all and (min-width: 1921px) and (orientation: landscape) { - .sk__warped-text { - font-size: 5vw; - } -} -@media (orientation: portrait) { - .sk__warped-text { - font-size: 6vh; - } -} - -.sk__cta-warp h3 { - -webkit-transition: all 1s ease 0s; - -o-transition: all 1s ease 0s; - transition: all 1s ease 0s; - opacity: 0; - letter-spacing: 40px; - line-height: 1.7; - margin-bottom: 2rem; - margin-top: 0.1rem; -} - -.sk__cta-warp h3.sk__cta-warp-h3-unspaced { - -webkit-transition-delay: 0.2s; - -o-transition-delay: 0.2s; - transition-delay: 0.2s; - opacity: 1; - letter-spacing: 18px; -} - -@media all and (max-width: 767px) { - .sk__cta-warp h3 { - letter-spacing: 17px; - font-size: 16px; - } - .sk__cta-warp h3.sk__cta-warp-h3-unspaced { - letter-spacing: 9px; - } -} - -.btn.sk__warped-button { - opacity: 0; -} - - -/** - * 20. Contact Us Section - * ====================== - */ - -section.sk__parallax-background-section.sk__contact-us { - min-height: 80vh; -} - -.sk__contact-us .sk__parallax-background-element { - background-image: url(../../assets/images/contact-back.webp); -} - -.sk__contact-us .sk__tint { - mix-blend-mode: soft-light; -} - -.sk__contact-left, -.sk__contact-right { - width: 100%; -} -@media all and (max-width: 575px) { /* xs */ - .sk__contact-left { - margin-left: auto; - margin-right: auto; - } - .sk__contact-left p { - max-width: 100%; - } -} -@media all and (max-width: 420px) { /*custom xs*/ - .sk__contact-left .p-v2 span { - display: block; - } - .sk__contact-left .p-v2 span br { - display: none; - } -} - -.sk__contact-page #contact-us { - opacity: 0; -} - - -/** - * 21. Browsers Section - * ==================== - */ - -.sk__browsers-section { - -} - -.sk__browsers-wrapper { - position: relative; - overflow: hidden; - width: 100%; - padding-top: 35.84%; -} - -.sk__browsers-wrapper > div { - -webkit-filter: drop-shadow(12px 15px 10px rgba(0,0,0,0.85)); - filter: drop-shadow(12px 15px 10px rgba(0,0,0,0.85)); -} - -.sk__browsers-tablet { - position: absolute; - bottom: 0; - width: 25.757575%; - height: 100%; - left: 30%; - opacity: 0; -} -.sk__browsers-desktop { - position: absolute; - bottom: -120%; - width: 58.2750582%; - height: 100%; - left: 25.757575%; - z-index: 1; -} -.sk__browsers-phone { - position: absolute; - bottom: 0; - width: 15.9673668%; - height: 100%; - left: 64.0326332%; - opacity: 0; -} - -/** - * 22. Custom Animations, Effects & Decorations - * ============================================ - */ - -/* Reusable decorations */ - -@media all and (max-width: 991px) { /* xs + sm + md */ - span.heading-deco { - display: none; - } -} - -.sk__rectangles { - position: relative; - width: 605px; - height: 269px; - max-width: 90vw; - max-height: 40vw; -} - -.sk__rectangles-full-left-main-tint, -.sk__rectangles-fluid-left-main-tint { - position: absolute; - width: 100%; - height: 71.43%; - margin-top: 14.2857%; - background-color: rgba(0,0,0,0.82); -} -@media all and (max-width: 575px) { - .sk__rectangles-full-left-main-tint, - .sk__rectangles-fluid-left-main-tint { - width: 100%; - height: 100%; - margin-top: 0; - } -} - -.sk__rectangle-black { - background-color: rgba(0,0,0,0.64); -} - -.sk__rectangle-white-1, -.sk__rectangle-white-2 { - background-color: rgba(255,255,255,0.07); -} - -.sk__rectangle-white-1 { - -webkit-transform: translate(-64px,-67px); - -ms-transform: translate(-64px,-67px); - transform: translate(-64px,-67px); -} - -.sk__rectangle-white-2 { - -webkit-transform: translate(54px,57px); - -ms-transform: translate(54px,57px); - transform: translate(54px,57px); -} - -.sk__deco-row-section { - z-index: 10; -} - -.sk__deco-row { - border-top: 1px solid; - border-bottom: 1px solid; - padding: 75px 15px; -} -@media all and (max-width: 767px) { - .sk__deco-row { - padding: 48px 15px; - } -} - -/* rectangles on the left side */ - -.sk__rectangles-left { - position: relative; -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__rectangles-left { - margin-bottom: 30px; - } -} - -.sk__rectangles-left-parallax-layers { - z-index: -1; - position: absolute; - height: 140%; - width: 100%; - top: -20%; - left: 0; -} -@media all and (max-width: 767px) { - .sk__rectangles-left-parallax-layers { - height: 100%; - top: 0; - } -} - -.sk__rectangles-left .sk__rectangles { - -webkit-transform: translate(-100px, -70px); - -ms-transform: translate(-100px, -70px); - transform: translate(-100px, -70px); -} -@media all and (max-width: 767px) { - .sk__rectangles-left .sk__rectangles { - -webkit-transform: translate(0, 0); - -ms-transform: translate(0, 0); - transform: translate(0, 0); - } -} - -/* text under rectangles left */ - -@media all and (max-width: 575px) { /* xs */ - .sk__rectangles-left p { - margin-left: auto; - margin-right: auto; - } -} - -/* rectangles on the left side (full width) */ - -.sk__rectangles-full-left { - position: relative; - max-width: 100%; - width: 780px; - padding: 110px; -} - -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__featured-project-infos-container { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - } - .sk__rectangles-full-left { - width: 100%; - padding: 14vw; - } -} - -@media all and (max-width: 575px) { /* xs */ - .sk__featured-project-infos-container { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - } - .sk__rectangles-full-left { - width: 100%; - padding: 14vw; - } -} - -.sk__rectangles-full-left-parallax-layers { - position: absolute; - height: 140%; - width: 100%; - top: -20%; - left: 0; -} -@media all and (max-width: 575px) { /* xs */ - .sk__rectangles-full-left-parallax-layers { - height: 100%; - top: 0; - } -} - -/* rectangles on the left side */ - -.sk__rectangles-right { - position: relative; -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__rectangles-right { - margin-bottom: 30px; - } -} - -.sk__rectangles-right-parallax-layers { - z-index: -1; - position: absolute; - height: 140%; - width: 100%; - top: -20%; - left: 0; -} -@media all and (max-width: 767px) { - .sk__rectangles-right-parallax-layers { - height: 100%; - top: 0; - } -} - -.sk__rectangles-right .sk__rectangle-white-1 { - -webkit-transform: translate(168px,-87px); - -ms-transform: translate(168px,-87px); - transform: translate(168px,-87px); -} - -.sk__rectangles-right .sk__rectangle-white-2 { - -webkit-transform: translate(50px,37px); - -ms-transform: translate(50px,37px); - transform: translate(50px,37px); -} - -.sk__rectangles-right .sk__rectangle-black { - -webkit-transform: translate(104px,-20px); - -ms-transform: translate(104px,-20px); - transform: translate(104px,-20px); -} - -/* text under rectangles right */ - -@media all and (min-width: 576px) { /* custom */ - .sk__rectangles-right p { - margin-left: auto; - margin-right: 0; - } -} - -@media all and (max-width: 575px) { /* xs */ - .sk__rectangles-right p { - margin-left: auto; - margin-right: auto; - } -} - -/** - * Rings Section (theme.js controls it) - * ------------------------------------ - */ - -.sk__rings-section { - overflow-x: hidden; - background-image: url(../../assets/images/section-rings-background.svg); -} - -.ring-l-container { - -webkit-filter: blur(13px); - filter: blur(13px); -} - -.ring-m-container { - -webkit-filter: blur(7.5px); - filter: blur(7.5px); -} - -.ring-s-container { - -webkit-filter: blur(2px); - filter: blur(2px); -} - -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .ring-l-container { - -webkit-filter: blur(8px); - filter: blur(8px); - } - - .ring-m-container { - -webkit-filter: blur(4px); - filter: blur(4px); - } - - .ring-s-container { - -webkit-filter: blur(1.5px); - filter: blur(1.5px); - } -} - -@media all and (max-width: 575px) { /* xs */ - .ring-l-container { - -webkit-filter: blur(5px); - filter: blur(5px); - } - - .ring-m-container { - -webkit-filter: blur(2px); - filter: blur(2px); - } - - .ring-s-container { - -webkit-filter: blur(1.5px); - filter: blur(1.5px); - } -} - -.ring-l, -.ring-m, -.ring-s { - position: relative; - border-radius: 100%; -} - -.ring-l:after, -.ring-m:after, -.ring-s:after { - content: ""; - position: absolute; - border-radius: 100%; -} - -.ring-l.landscape { - width: 785px; - height: 785px; -} - -.ring-l.portrait { - width: 100vw; - height: 100vw; -} - -.ring-l:after { - top: 10px; - left: 10px; - width: calc(100% - 20px); - height: calc(100% - 20px); -} - -.ring-m.landscape { - width: 610px; - height: 610px; -} - -.ring-m.portrait { - width: 77.707vw; - height: 77.707vw; -} - -.ring-m:after { - top: 7.5px; - left: 7.5px; - width: calc(100% - 15px); - height: calc(100% - 15px); -} - -.ring-s.landscape { - width: 432px; - height: 432px; -} - -.ring-s.portrait { - width: 55.0318vw; - height: 55.0318vw; -} - -.ring-s:after { - top: 3px; - left: 3px; - width: calc(100% - 6px); - height: calc(100% - 6px); -} - -.sk__rings-section .sk__rectangles { - -webkit-transform: translateX(11vw); - -ms-transform: translateX(11vw); - transform: translateX(11vw); -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__rings-section .sk__rectangles { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - } -} - -@-webkit-keyframes hueRotator { - 0% { - -webkit-filter: hue-rotate(0); - filter: hue-rotate(0); - } - 100% { - -webkit-filter: hue-rotate(359.99deg); - filter: hue-rotate(359.99deg); - } -} - -@keyframes hueRotator { - 0% { - -webkit-filter: hue-rotate(0); - filter: hue-rotate(0); - } - 100% { - -webkit-filter: hue-rotate(359.99deg); - filter: hue-rotate(359.99deg); - } -} - -.hue-rotator { - -webkit-transform-origin: center center; - -ms-transform-origin: center center; - transform-origin: center center; - -webkit-animation: hueRotator linear 0s infinite; - animation: hueRotator linear 0s infinite; -} - -.duration-2s { - -webkit-animation-duration: 2s; - animation-duration: 2s; -} - -.duration-20s { - -webkit-animation-duration: 20s; - animation-duration: 20s; -} - -.sk__mix-multiply { mix-blend-mode: color; } -.sk__mix-color-burn { mix-blend-mode: color-burn; } -.sk__mix-color-dodge { mix-blend-mode: color-dodge; } -.sk__mix-darken { mix-blend-mode: darken; } -.sk__mix-difference { mix-blend-mode: difference; } -.sk__mix-exclusion { mix-blend-mode: exclusion; } -.sk__mix-hard-light { mix-blend-mode: hard-light; } -.sk__mix-hue { mix-blend-mode: hue; } -.sk__mix-lighten { mix-blend-mode: lighten; } -.sk__mix-luminosity { mix-blend-mode: luminosity; } -.sk__mix-multiply { mix-blend-mode: multiply; } -.sk__mix-overlay { mix-blend-mode: overlay; } -.sk__mix-plus-lighter { mix-blend-mode: plus-lighter; } /* not fully supported */ -.sk__mix-saturation { mix-blend-mode: saturation; } -.sk__mix-screen { mix-blend-mode: screen; } -.sk__mix-soft-light { mix-blend-mode: soft-light; } - - -/** - * Edge beauty effect - add subtle styled edges and shadows to specified - * sections (suitable for repeated fullscreen parallax sections). - * Add .sk__edge-beauty class to relatively positioned - * container
or
- */ - -.sk__edge-beauty-top { - position: absolute; - bottom: 0px; - left: 0; - width: 100%; - height: 1px; - background: rgba(0,0,0,1); -} -.sk__edge-beauty-bottom { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 1px; - background: rgba(255,255,255,0.13); -} -.sk__edge-beauty-bottom-shadow { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 21.7vh; - background: rgb(0,0,0); - background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.29735644257703087)), color-stop(28%, rgba(0,0,0,0.11528361344537819)), to(rgba(0,0,0,0))); - background: -o-linear-gradient(bottom, rgba(0,0,0,0.29735644257703087) 0%, rgba(0,0,0,0.11528361344537819) 28%, rgba(0,0,0,0) 100%); - background: linear-gradient(0deg, rgba(0,0,0,0.29735644257703087) 0%, rgba(0,0,0,0.11528361344537819) 28%, rgba(0,0,0,0) 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); - opacity: 0.7; -} - -/* for creating colorful underlines */ -span.sk__underliner { - position: relative; -} -span.sk__underliner:before { - content: ''; - position: absolute; - bottom: 5px; - left: 0; - width: 100%; - height: 5px; - z-index: -1; -} - - -/** - * 23. Footer - * ========== - */ - -footer { - padding: 150px 0 40px; - padding: 120px 0 40px; -} - -.footer-background-container { - padding: 16px; -} - -.footer-background { - border-radius: 100px; - margin: 16px; - width: calc(100% - 32px); -} - -.footer-top { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - padding-bottom: 86px; - padding-bottom: 70px; -} - -@media all and (max-width: 991px) { - footer { - padding: 70px 0 40px; - } - .footer-background { - border-radius: 47px; - } - .footer-top { - padding-bottom: 32px; - } -} - -.top-footer-logo { - max-width: 243px; -} - -.top-footer-logo, -.top-footer-tagline { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.top-footer-tagline { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; -} - -.top-footer-tagline h5.h5-elegant { - margin-bottom: 0; -} - -a.footer-main-links { - font-weight: 600; - line-height: 3.05; -} - -.footer-main { - padding: 60px 0 95px 0; - padding: 60px 0 60px 0; -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .footer-main { - padding: 30px 0 24px 0; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .footer-main { - padding: 30px 0 35px 0; - } -} -@media all and (max-width: 575px) { /* xs */ - .footer-main { - padding: 20px 0 30px 0; - } -} - -.footer-main-large-col p { - color: #6f7b85; -} - -.footer-main-large-col p span { - display: inline-block; -} - -.footer-main-large-col h5 { - margin-top: 40px; -} - -.footer-main-small-col h5 { - margin-top: 12px; - margin-bottom: 31px; -} - -footer .widget_nav_menu ul { - list-style: none; - padding-left: 0; -} - -.footer-socials-section { - width: 100%; -} - -.footer-socials { - display: inline-block; - margin-top: 14px; - margin-bottom: 27px; -} - -.footer-socials a { - position: relative; - overflow: hidden; - display: inline-block; - font-size: 14px; - margin: 0 8px 8px 0; - width: 40px; - height: 40px; - line-height: 38px; - border: 2px solid rgba(255,255,255,0.25); - border-radius: 39px; - text-align: center; - color: #FFFFFF; -} - -.footer-socials a:hover { - border-color: rgba(255,255,255,0.45); -} - -.footer-socials a:before { - content: ''; - -webkit-transition: all 0.75s ease 0s; - -o-transition: all 0.75s ease 0s; - transition: all 0.75s ease 0s; -} - -.footer-socials a:hover:before { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - border-radius: 50px; - background: rgba(255,255,255,0.1); - -webkit-transform: translate(50px, 50px) scale(1); - -ms-transform: translate(50px, 50px) scale(1); - transform: translate(50px, 50px) scale(1); -} - -.footer-socials a:hover:before { - background: rgba(255,255,255,0.43); - -webkit-transform: translate(7px, 8px) scale(1.1); - -ms-transform: translate(7px, 8px) scale(1.1); - transform: translate(7px, 8px) scale(1.1); -} - -.footer-socials a i, -.footer-socials a span[class^="icon-"] { - position: relative; - z-index: 1; - -webkit-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} - -.footer-socials a:hover i, -.footer-socials a:hover span[class^="icon-"] { - -webkit-transform: translate(-2px, -2px) scale(1.15); - -ms-transform: translate(-2px, -2px) scale(1.15); - transform: translate(-2px, -2px) scale(1.15); - text-shadow: 2px 2px 2px rgba(0,0,0,0.38); -} - -.footer-bottom { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding-top: 20px; -} - -.footer-bottom h5, -.footer-bottom p { - margin-bottom: 0; -} - -.footer-bottom h5 { - font-size: 15px; -} - -.footer-bottom p { - font-size: 13px; - font-family: 'Poppins', sans-serif; -} - -.footer-bottom a { - color: #969696; -} - -.footer-bottom a:hover { - color: #FFFFFF; -} - -a.footer-bottom-right-links { - margin-right: 25px; - font-size: 13px; -} - -a.footer-bottom-right-links:last-child { - margin-right: 0; -} - -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - - .footer-main-large-col p { - font-size: 14px; - line-height: 27px; - color: #7f8b95; - } - - a.footer-main-links { - font-size: 14px; - line-height: 2.5; - } - - .footer-main-small-col h5 { - margin-top: 12px; - margin-bottom: 23px; - font-size: 16px; - } - -} - -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - - .top-footer-tagline h5.h5-elegant { - font-size: 17px; - } - - .footer-main-small-col h5 { - margin-top: 25px; - margin-bottom: 12px; - } - - a.footer-main-links { - line-height: 2.5; - font-size: 15px; - } - -} - -@media all and (max-width: 575px) { /* xs */ - - .top-footer-logo, - .top-footer-tagline { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - } - - .top-footer-logo { - max-width: 260px; - margin: 0 auto 12px; - } - - .top-footer-tagline h5.h5-elegant { - font-size: 17px; - } - - .footer-main-large-col p { - font-size: 13px; - line-height: 23px; - color: #9aa1a7; - margin: 0 auto 20px; - } - - a.footer-main-links { - margin: 0 auto; - font-size: 13px; - line-height: 2.3; - } - - .footer-main-small-col h5 { - margin-top: 12px; - margin-bottom: 13px; - font-size: 16px; - } - - .footer-bottom { - font-weight: 600; - } - - .footer-bottom > div { - margin-bottom: 5px; - } - - a.footer-bottom-right-links { - margin-right: 15px; - } - - .footer-bottom p, - .footer-bottom a { - font-size: 12px; - } - -} - -/** - * Simple Footer - */ - -footer.sk__footer-simple { - padding: 21px 0 40px; -} -.sk__footer-simple .footer-background-container { - padding: 6px; -} - -.sk__footer-simple .footer-background { - border-radius: 24px; - margin: 6px; - width: calc(100% - 32px); -} - -footer.sk__footer-simple.sk__footer-simple-fixed { - position: fixed; - bottom: 0; - width: 100%; -} -@media all and (max-width: 767px) { - footer.sk__footer-simple.sk__footer-simple-fixed { - padding: 10px 0; - } -} - -/* Customizations for 404 Page and Coming Soon Page */ -.sk__coming-soon-page footer.sk__footer-simple, -.sk__404-page footer.sk__footer-simple { - padding: 0; -} -.sk__coming-soon-page footer.sk__footer-simple .footer-bottom, -.sk__404-page footer.sk__footer-simple .footer-bottom { - padding-top: 0; - padding-bottom: 20px; -} -.sk__coming-soon-page .carousel-item > section > .sk__main-slide-content, -.sk__404-page .carousel-item > section > .sk__main-slide-content { - margin-top: 130px; -} -@media all and (max-width: 767px) { - .sk__coming-soon-page .carousel-item > section > div.container, - .sk__404-page .carousel-item > section > div.container { - -ms-flex-item-align: end; - -ms-grid-row-align: end; - align-self: end; - } - .sk__coming-soon-page .carousel-item > section > .sk__main-slide-content, - .sk__404-page .carousel-item > section > .sk__main-slide-content { - margin-top: 70px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__coming-soon-page footer.sk__footer-simple a.footer-bottom-right-links, - .sk__404-page footer.sk__footer-simple a.footer-bottom-right-links { - margin-right: 18px; - } -} - - -/** - * 24. PAGE: Portfolio Item - * ======================== - */ - -/* Project Top (Header) Section */ - -.sk__project-header { - overflow-x: hidden; - padding-top: 135px; - padding-bottom: 10px; -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__project-header { - padding-top: 125px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__project-header { - padding-top: 100px; - } -} - -.sk__project-thumbnail-portrait-col img, -.sk__project-thumbnail-landscape-col img { - opacity: 0; /* animated */ -} - -.sk__project-thumbnail-portrait-cover { - left: 12px; - width: calc(100% - 24px); - -webkit-transform-origin: center top; - -ms-transform-origin: center top; - transform-origin: center top; - -webkit-transform: scaleY(0); - -ms-transform: scaleY(0); - transform: scaleY(0); -} - -.sk__project-thumbnail-landscape-cover { - left: 12px; - width: calc(100% - 24px); - -webkit-transform-origin: right center; - -ms-transform-origin: right center; - transform-origin: right center; - -webkit-transform: scaleX(0); - -ms-transform: scaleX(0); - transform: scaleX(0); -} - -@media all and (min-width: 1200px) { /* xl and above */ - .sk__project-thumbnail-landscape-col { - padding-left: 40px; - } - .sk__project-thumbnail-landscape-cover { - left: 20px; - width: calc(100% - 52px); - } -} - -@media all and (max-width: 575px) { /* xs */ - .sk__project-thumbnail-landscape-cover { - left: 20px; - width: calc(100% - 40px); - } -} - -/* Project Main Info */ - -.sk__project-main-info-col { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-flow: column; - flex-flow: column; -} - -.sk__project-info-and-thumbnail { - -webkit-box-flex: 0; - -ms-flex: 0 1 auto; - flex: 0 1 auto; -} - -.sk__project-main-heading { - -webkit-box-flex: 1; - -ms-flex: 1 1 auto; - flex: 1 1 auto; -} - -/* Main heading & Subheading */ - -.sk__project-main-heading h1 { - -webkit-transform: translateY(140%); - -ms-transform: translateY(140%); - transform: translateY(140%); -} - -@media all and (min-width: 1400px) and (max-width: 1779px) { /* custom */ - .sk__project-main-heading h1.super-heading, - .sk__project-main-heading span.super-heading.sk__gradient-fancy-text-back { - font-size: 5rem; - } -} - -@media all and (max-width: 1199px) { - .sk__project-main-heading h1.super-heading, - .sk__project-main-heading span.super-heading.sk__gradient-fancy-text-back { - line-height: 1; - } -} - -.sk__project-main-heading h2 { - -webkit-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); -} - - -/* Project Infos */ - -.sk__project-infoboxes .fat-divider { - -webkit-transform-origin: right center; - -ms-transform-origin: right center; - transform-origin: right center; - -webkit-transform: scaleX(0); - -ms-transform: scaleX(0); - transform: scaleX(0); -} - -.sk__project-infoboxes h4 { - opacity: 0; -} - -.sk__proj-infobox { - position: relative; - line-height: 24px; -} - -@media all and (min-width: 1400px) and (max-width: 1499px) { - .sk__project-infoboxes.col-xl-4 { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: 35%; - } -} - -.sk__proj-infobox-label, -.sk__proj-infobox-value { - display: inline-block; - vertical-align: top; - width: 50%; - text-align: left; -} - -.sk__proj-infobox-label { - font-size: 13px; - font-weight: 600; -} - -.sk__proj-infobox-value { - font-size: 13px; - font-weight: 300; -} - -.sk__project-infoboxes-helper { - display: block; - width: 100%; -} - -@media all and (min-width: 768px) and (max-width: 1199px) { /* md & lg*/ - .sk__project-infoboxes-helper { - display: inline-block; - width: 46%; - } - .sk__project-infoboxes-helper.sk__right { - float: right; - } - .sk__project-infoboxes { - margin-top: 25px; - margin-bottom: 25px; - } -} -@media all and (min-width: 340px) and (max-width: 767px) { /* custom sm */ - .sk__project-infoboxes-helper { - display: block; - width: 100%; - } - .sk__project-infoboxes { - margin-top: 25px; - margin-bottom: 25px; - } -} -@media all and (max-width: 339px) { /* custom xs */ - .sk__project-infoboxes-helper { - display: block; - width: 100%; - } - .sk__proj-infobox-label, - .sk__proj-infobox-value { - width: 100%; - text-align: center; - } - .sk__project-infoboxes { - margin-top: 25px; - margin-bottom: 25px; - } - .sk__proj-infobox { - margin-bottom: 9px; - } -} - -/* Project Body Section */ - -.sk__project-body { - margin-top: 80px; - margin-bottom: 260px; -} -@media all and (min-width: 1500px) and (max-width: 1920px) { - .sk__project-body { - margin-bottom: 160px; - } -} -@media all and (min-width: 992px) and (max-width: 1499px) { - .sk__project-body { - margin-bottom: 100px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__project-body { - margin-bottom: 120px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__project-body { - margin-bottom: 100px; - } -} -@media all and (max-width: 575px) { - .sk__project-body { - margin-bottom: 70px; - } -} - -.sk__project-body-image-col { - overflow: hidden; -} - -.sk__project-body-image-col img { - opacity: 0; -} - -.sk__project-body-info-col { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-box-align: self-end; - -ms-flex-align: self-end; - align-items: self-end; -} -@media all and (max-width: 575px) { /* xs */ - .sk__project-body-info-col { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - } -} - -.sk__project-body-info-col .btn { - -ms-flex-item-align: center; - -ms-grid-row-align: center; - align-self: center; -} - -@media all and (min-width: 1200px) and (max-width: 1779px) { - - .sk__project-body-info-col p { - margin-bottom: 2.5rem; - } - - .sk__project-body-info-col .btn { - margin-bottom: 2.5rem; - } - -} - -@media all and (max-width: 1199px) { - - .sk__project-body-info-col h4 { - margin-bottom: 1.6rem; - } - - .sk__project-body-info-col .btn { - margin-bottom: 3.5rem; - } - -} - -@media all and (min-width: 576px) and (max-width: 1199px) { - - .sk__project-body-info-col p { - margin-bottom: 2.5rem; - line-height: 26px; - } - -} - -@media all and (max-width: 576px) { /* xs */ - - .sk__project-body-info-col p { - margin-bottom: 2.5rem; - line-height: 22px; - } - - .sk__project-body-info-col p.p-xs { - line-height: 18px; - } - -} - -/** - * Project Gallery (Fullscreen Parallax) - */ - -/* Huge decorative text - NOT visible on all screens! */ - -.sk__huge-vertical-deco-text-wrapper { - display: none; - position: relative; - height: 21.73vw; - width: 100vw; - max-width: 100vh; - -ms-flex-item-align: baseline; - align-self: baseline; -} - -.sk__hvdt-left { - margin-left: 0; - margin-right: auto; - -webkit-transform-origin: left top; - -ms-transform-origin: left top; - transform-origin: left top; - -webkit-transform: rotate(-90deg) translateX(-100vh) translateY(5.159vw); - -ms-transform: rotate(-90deg) translateX(-100vh) translateY(5.159vw); - transform: rotate(-90deg) translateX(-100vh) translateY(5.159vw); - -} - -.sk__hvdt-right { - margin-left: auto; - margin-right: 0; - -webkit-transform-origin: right top; - -ms-transform-origin: right top; - transform-origin: right top; - -webkit-transform: rotate(-90deg) translateY(-24.54vw); - -ms-transform: rotate(-90deg) translateY(-24.54vw); - transform: rotate(-90deg) translateY(-24.54vw); -} - -span.sk__huge-vertical-deco-text { - display: inline-block; - position: absolute; - min-width: 100%; - width: auto; - height: 100%; - top: 0; - left: 0; - font-family: 'Bebas Neue', sans-serif; - font-size: 21.73vw; - letter-spacing: 1px; - line-height: 1; - white-space: nowrap; -} - - -/* Portfolio item gallery navigation */ - -.sk__parallax-gallery-nav { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - position: fixed; - top: 100px; - right: -80px; - width: 78px; - height: calc(100vh - 200px); - z-index: 1; -} -@media all and (min-width: 576px) and (max-width: 991px) { /* sm + md */ - .sk__parallax-gallery-nav { - right: -62px; - width: 60px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__parallax-gallery-nav { - width: 30px; - right: -42px; - width: 40px; - } -} - -.sk__parallax-gallery-nav.sk__gallery-nav-visible { - right: 0; -} - -.sk__parallax-gallery-nav-icon { - width: 56px; - height: 56px; - margin: 18px auto 4px 0; - background: url(../../assets/images/gallery-icon-white.webp) no-repeat center center; - background-size: cover; - border-radius: 100%; - -webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.33)); - filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.33)); -} -@media all and (min-width: 576px) and (max-width: 991px) { /* sm + md */ - .sk__parallax-gallery-nav-icon { - width: 44px; - height: 44px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__parallax-gallery-nav-icon { - width: 36px; - height: 36px; - } -} - -a.sk__gallery-nav-link:link, -a.sk__gallery-nav-link:visited { - position: relative; - margin: 18px auto 18px 22px; - width: 12px; - height: 12px; - background: rgba(79,79,79,0.7) url(../../assets/images/glass.svg) no-repeat center center; - background-size: cover; - border-radius: 100%; - display: block; -} - -/* with icon */ -@media all and (min-width: 576px) and (max-width: 991px) { /* sm + md */ - a.sk__gallery-nav-link:link, - a.sk__gallery-nav-link:visited { - margin: 18px auto 18px 16px; - } -} -@media all and (max-width: 575px) { /* xs */ - a.sk__gallery-nav-link:link, - a.sk__gallery-nav-link:visited { - margin: 18px auto 18px 12px; - } -} - -a.sk__gallery-nav-link:link:before, -a.sk__gallery-nav-link:visited:before { - content: ''; - position: absolute; - border: 2px solid rgba(255,255,255,0); - border-radius: 100%; - width: calc(100% + 20px); - height: calc(100% + 20px); - top: -10px; - left: -10px; -} - -a.sk__gallery-nav-link:hover { - background-color: rgba(255,255,255,0.8); - -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); - filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); -} - -a.sk__gallery-nav-link:hover:before { - border: 2px solid rgba(255,255,255,1); - width: calc(100% + 12px); - height: calc(100% + 12px); - top: -6px; - left: -6px; - opacity: 0.5; - -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); - filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); -} - -a.sk__gallery-nav-link:active, -a.sk__gallery-nav-link.active { - background-color: rgba(255,255,255,0.8); - -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); - filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); -} - -a.sk__gallery-nav-link:active:before { - border: 2px solid rgba(255,255,255,0); - width: calc(100% + 20px); - height: calc(100% + 20px); - top: -10px; - left: -10px; -} - -a.sk__gallery-nav-link:focus { - outline: none; -} - -/* Basic Gallery with thumbnails */ - -.sk__gallery-basic-thumbnails .carousel-indicators { - position: initial; -} - -.sk__gallery-basic-thumbnails .carousel-indicators { - position: initial; - width: 100%; - margin: 16px 0; -} - -.sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { - position: relative; - width: 7.46vw; - height: 5.4vw; - width: 214.27px; - height: 120.52px; - margin-bottom: 16px; - margin-right: 0; - margin-left: 0; - background-color: transparent; - border: 0; - border-top: 0; - border-bottom: 0; - opacity: .75; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} -.sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target]:hover, -.sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target].active { - opacity: 1; -} -@media all and (min-width: 1500px) and (max-width: 1779px) { - .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { - width: 179.5px; - height: 101px; - } -} -@media all and (min-width: 1401px) and (max-width: 1499px) { - .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { - width: 162px; - height: 92px; - } -} -@media all and (min-width: 1200px) and (max-width: 1400px) { /* xl custom */ - .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { - width: 139.5px; - height: 79px; - } -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { - width: 117px; - height: 66px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { - width: 87px; - height: 49px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { - width: 129px; - height: 72.56px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__gallery-basic-thumbnails .carousel-indicators { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - } - .sk__gallery-basic-thumbnails .carousel-indicators button[data-bs-target] { - width: 21.46vw; - height: 9.4vw; - } -} -.sk__gallery-basic-thumbnails .carousel-indicators button img { - width: 100%; - height: auto; -} - -.sk__gallery-basic-thumbnails .carousel-control-next:focus, -.sk__gallery-basic-thumbnails .carousel-control-next:hover, -.sk__gallery-basic-thumbnails .carousel-control-prev:focus, -.sk__gallery-basic-thumbnails .carousel-control-prev:hover { - opacity: 1 !important; -} - -.sk__gallery-basic-thumbnails .carousel-control-next, -.sk__gallery-basic-thumbnails .carousel-control-prev { - position: absolute; - top: 50px; - left: initial; - width: 30px; - height: 30px; -} - -.sk__gallery-basic-thumbnails .carousel-control-prev { - right: 111px; -} -.sk__gallery-basic-thumbnails .carousel-control-next { - right: 45px; -} -@media all and (min-width: 1400px) and (max-width: 1920px) { /* custom xxl */ - .sk__gallery-basic-thumbnails .carousel-control-prev { - top: 60px; - right: 85px; - } - .sk__gallery-basic-thumbnails .carousel-control-next { - top: 60px; - right: 29px; - } -} -@media all and (min-width: 768px) and (max-width: 1399px) { /* md to xl */ - .sk__gallery-basic-thumbnails .carousel-control-prev { - top: 22px; - right: 60px; - } - .sk__gallery-basic-thumbnails .carousel-control-next { - top: 22px; - right: 18px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__gallery-basic-thumbnails .carousel-control-prev { - top: 15px; - right: 42px; - -webkit-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); - } - .sk__gallery-basic-thumbnails .carousel-control-next { - top: 15px; - right: 9px; - -webkit-transform: scale(0.8); - -ms-transform: scale(0.8); - transform: scale(0.8); - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__gallery-basic-thumbnails .carousel-control-prev, - .sk__gallery-basic-thumbnails .carousel-control-next { - display: none; - } -} - -/* gallery - general */ - -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - section[class*="gallery"] h1.super-heading { - font-size: 72.75px; - } -} - -.carousel-caption-description p { - font-family: 'Poppins', sans-serif; - font-size: 18px; - color: #FFFFFF; - text-shadow: 1px 1px 1px rgba(0,0,0,0.55); - padding: 0 14px; -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .carousel-caption-description p { - font-size: 16px; - line-height: 1.5; - } -} -@media all and (max-width: 575px) { /* xs */ - .carousel-caption-description p { - font-size: 13px; - line-height: 1.5; - } -} - -@media all and (min-width: 768px) and (max-width: 1199px) { /* xs + sm */ - .sk__gallery-basic .carousel-caption, - .sk__gallery-basic-thumbnails .carousel-caption { - padding: 0; - } -} - -@media all and (max-width: 767px) { /* xs + sm */ - .sk__gallery-basic .carousel-caption, - .sk__gallery-basic-thumbnails .carousel-caption { - padding: 0; - bottom: 0; - } -} - -@media all and (max-width: 575px) { /* xs */ - .sk__gallery-basic .carousel-indicators { - display: none; - } -} - - -/** - * 25. PAGE: Service Item - * ====================== - */ - - -/** - * 26. PAGE: News (Blog) - * ===================== - */ - -.sk__news-header img[class*=sk__parallax-element] { - z-index: -1; -} - -.sk__articles-wrapper { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - margin-left: -15px; - margin-right: -15px; - margin-bottom: 30px; -} - -.sk__blog-article-wrapper { - -webkit-box-flex: 0; - -ms-flex: 0 0 50%; - flex: 0 0 50%; - max-width: 50%; - padding-left: 10px; - padding-right: 10px; - margin-bottom: 30px; -} -@media all and (min-width: 1921px) { - .sk__blog-article-wrapper { - padding-left: 0.6vw; - padding-right: 0.6vw; - } -} - -@media all and (max-width: 199px) { /* custom */ - .sk__blog-main-content .sk__blog-article-wrapper { - -webkit-box-flex: 0; - -ms-flex: 0 0 100%; - flex: 0 0 100%; - max-width: 100%; - } -} - -.post-image { - position: relative; -} - -.post-image-inner { - overflow: hidden; -} - -.sk__in-content-post-image { - padding-bottom: 63.78%; - width: 100%; - background-size: cover; - background-position: center; -} - -.post-image:hover .sk__in-content-post-image { - -webkit-transform: scale(1.06) rotate(0.0001deg); - -ms-transform: scale(1.06) rotate(0.0001deg); - transform: scale(1.06) rotate(0.0001deg); -} - -.post-image span[class*=icon-] { - position: absolute; - right: 0; - top: 0; - color: #d9dbdc; - background: rgba(0, 0, 0, 0.38); - padding: 8px; - margin: 10px; - z-index: 3; - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); -} -@media all and (min-width: 1921px) { - .sk__blog-feed .post-excerpt p { - font-size: 21px; - line-height: 1.7; - } -} -@media all and (min-width: 1200px) and (max-width: 1920px) { /* custom xxl */ - .sk__blog-feed .post-excerpt p { - font-size: 18px; - line-height: 1.7; - font-weight: 300; - } -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .sk__blog-feed .post-excerpt p { - font-size: 16px; - line-height: 30px; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__blog-feed .entry-header h4 { - font-size: 24px; - } - .sk__blog-feed .post-excerpt p { - line-height: 28px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__blog-feed .entry-header h4 { - font-size: 17px; - line-height: 1.55; - margin-bottom: 12px; - } - .sk__blog-feed .post-excerpt p { - line-height: 27px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__blog-feed .entry-header h4 { - font-size: 15px; - line-height: 1.6; - margin-bottom: 8px; - } -} - - -/** - * 27. PAGE: News Item (Article) - * ============================= - */ - -.sk__article-1-header .sk__parallax-header-image { - background-image: url(../../assets/images/article-1-header-cover.webp); -} - - -/* Blog (bigger) text */ -.sk__single-article .post-content p { - font-size: 21px; - line-height: 1.7; -} -@media all and (min-width: 1200px) and (max-width: 1920px) { /* custom xxl */ - .sk__single-article .post-content p { - font-size: 18px; - line-height: 1.7; - font-weight: 300; - } -} -@media all and (min-width: 992px) and (max-width: 1199px) { /* lg */ - .sk__single-article .post-content p { - font-size: 17px; - line-height: 30px; - } -} -@media all and (min-width: 576px) and (max-width: 991px) { /* md */ - .sk__single-article .post-content p { - font-size: 16px; - line-height: 30px; - } -} -@media all and (max-width: 575px) { /* xs */ - .sk__single-article .post-content p { - font-size: 14px; - line-height: 21px; - } -} - - -/** - * 28. Media queries - * ================= - */ - -@media all and (min-width: 1921px) { - .sk__live-scaler { - -webkit-transform: scale(1.2); - -ms-transform: scale(1.2); - transform: scale(1.2); - } -} - - -/** - * 29. Other - * ========= - */ - -/* Clipped text stroke widths */ - -.sk__gradient-fancy-text, -.sk__gradient-fancy-text-back { - -webkit-text-stroke: 4px transparent; -} - -span[class*="icon-"].sk__gradient-fancy-text, -a.sk__iconbox-icon-link:hover span[class*="icon-"].sk__gradient-fancy-text { - -webkit-text-stroke: 3.5px transparent; -} - -@media all and (max-width: 767px) { - .sk__gradient-fancy-text-back { - -webkit-text-stroke: 3px transparent; - } -} - -/* Coming soon page text sizes correction */. - -@media all and (max-width: 767px) { - .sk__coming-soon-page .sk__main-slide-content h2, - .sk__coming-soon-page .sk__main-slide-content h2.h2-regular, - .sk__coming-soon-page .sk__main-slide-content span.h2-regular.sk__gradient-fancy-text-back { - font-size: 14px; - margin-bottom: 1.5em; - } -} - -@-webkit-keyframes linkColorAnimation { - 0% { - background-size: 400% 400%; - background-position: 0% 100%; - } - 15% { - background-size: 170% 400%; - background-position: 100% 100%; - } - 100% { - background-size: 240% 400%; - background-position: 100% 100%; - } -} - -@keyframes linkColorAnimation { - 0% { - background-size: 400% 400%; - background-position: 0% 100%; - } - 15% { - background-size: 170% 400%; - background-position: 100% 100%; - } - 100% { - background-size: 240% 400%; - background-position: 100% 100%; - } -} - -.gradient-links:hover, -.gradient-links-bright:hover { - -webkit-animation: linkColorAnimation 5s ease 0s 1 forwards; - animation: linkColorAnimation 5s ease 0s 1 forwards; -} - -/* Shades used for backgrounds */ - -.dark-shade-1-bg { background-color: #000000 !important; } -.dark-shade-1-bg-before:before { background-color: #000000 !important; } -.dark-shade-1-bg-after:after { background-color: #000000 !important; } -.dark-shade-1-clr { color: #000000 !important; } -.dark-shade-1-border { border-color: #000000 !important; } -.dark-shade-2-bg { background-color: #030303 !important; } -.dark-shade-2-bg-before:before { background-color: #030303 !important; } -.dark-shade-2-bg-after:after { background-color: #030303 !important; } -.dark-shade-2-clr { color: #030303 !important; } -.dark-shade-2-border { border-color: #030303 !important; } -.dark-shade-3-bg { background-color: #0A0A0A !important; } -.dark-shade-3-bg-before:before { background-color: #0A0A0A !important; } -.dark-shade-3-bg-after:after { background-color: #0A0A0A !important; } -.dark-shade-3-clr { color: #0A0A0A !important; } -.dark-shade-3-border { border-color: #0A0A0A !important; } -.dark-shade-4-bg { background-color: #242424 !important; } -.dark-shade-4-bg-before:before { background-color: #242424 !important; } -.dark-shade-4-bg-after:after { background-color: #242424 !important; } -.dark-shade-4-clr { color: #242424 !important; } -.dark-shade-4-border { border-color: #242424 !important; } -.dark-shade-5-bg { background-color: #282A2D !important; } -.dark-shade-5-bg-before:before { background-color: #282A2D !important; } -.dark-shade-5-bg-after:after { background-color: #282A2D !important; } -.dark-shade-5-clr { color: #282A2D !important; } -.dark-shade-5-border { border-color: #282A2D !important; } -.dark-shade-6-bg { background-color: #18191a !important; } -.dark-shade-6-bg-before:before { background-color: #18191a !important; } -.dark-shade-6-bg-after:after { background-color: #18191a !important; } -.dark-shade-6-clr { color: #18191a !important; } -.dark-shade-6-border { border-color: #18191a !important; } -.dark-shade-7-bg { background-color: #101314 !important; } -.dark-shade-7-bg-before:before { background-color: #101314 !important; } -.dark-shade-7-bg-after:after { background-color: #101314 !important; } -.dark-shade-7-clr { color: #101314 !important; } -.dark-shade-7-border { border-color: #101314 !important; } -.white-bg { background-color: #FFFFFF !important; } -.white-bg-before:before { background-color: #FFFFFF !important; } -.white-bg-after:after { background-color: #FFFFFF !important; } -.white-clr { color: #FFFFFF !important; } -.white-border { border-color: #FFFFFF !important; } -.transparent-bg { background-color: transparent !important; } -.transparent-bg-before:before { background-color: transparent !important; } -.transparent-bg-after:after { background-color: transparent !important; } -.transparent-clr { color: transparent !important; } -.transparent-border { border-color: transparent !important; } - - - -/** - * 30. Theme Elements & Theme Preview Only CSS - * =========================================== - */ - -.sk__icons-presentation-icons span { - opacity: 0; - display: inline-block; - position: relative; - width: 64px; - height: 64px; - padding: 16px; - font-size: 32px; - color: #ededed; - text-align: center; -} - -@media all and (max-width: 1920px) { - .sk__icons-presentation-icons span { - font-size: 26px; - } -} - -.sk__icons-presentation-icons span.icon-youtube2 { - width: 128px; -} - -.sk__icons-presentation-icons span:before { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - line-height: 64px; - text-align: center; -} - -.sk__icons-presentation-section h1, -.sk__icons-presentation-section h2 { - opacity: 0; -} - -.gsap-features .img-feature-wrap { - max-width: 23.6%; - margin: 0.7%; -} -@media all and (min-width: 768px) and (max-width: 1199px) { /* lg */ - .gsap-features .img-feature-wrap { - max-width: 31%; - margin: 1.1%; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .gsap-features .img-feature-wrap { - max-width: 46%; - margin: 2%; - } -} -@media all and (max-width: 575px) { /* xs */ - .gsap-features .img-feature-wrap { - max-width: 46%; - margin: 2%; - } -} - -.tp-hero-content { - margin-bottom: 44.5vh; - margin-top: 14.5vh; -} - - -@media all and (min-width: 3840px) { /* 4K and above */ - h1.h1-mega.theme-preview-hero-h1 { - font-size: 236px; - letter-spacing: -10px; - padding-top: 6%; - } -} -@media all and (min-width: 2080px) and (max-width: 3839px) { /* > FullHD, < 4K */ - h1.h1-mega.theme-preview-hero-h1 { - font-size: 157px; - letter-spacing: -7px; - padding-top: 6%; - } -} - -h2.h2-super.theme-preview-hero-h2 { - font-size: 35px; - letter-spacing: -0.9px; -} -@media all and (min-width: 3840px) { /* 4K and above */ - h2.h2-super.theme-preview-hero-h2 { - font-size: 70px; - letter-spacing: -2px; - } -} -@media all and (min-width: 1400px) and (max-width: 3839px) { /* > FullHD, < 4K */ - h2.h2-super.theme-preview-hero-h2 { - font-size: 47px; - letter-spacing: -1.2px; - font-size: 49px; - letter-spacing: -1.9px; - font-weight: 600; - } - h2.h2-super.theme-preview-hero-h2 .sk__animated-headline-words { - font-weight: 700; - } -} -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - h2.h2-super.theme-preview-hero-h2 { - font-size: 31px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - h2.h2-super.theme-preview-hero-h2 { - font-size: 24px; - letter-spacing: -0.5px; - line-height: 1.5; - } -} -@media all and (max-width: 575px) { /* xs */ - h2.h2-super.theme-preview-hero-h2 { - font-size: 24px; - letter-spacing: -0.5px; - } -} - -.tp-thumbs { - position: absolute; - bottom: 0; - min-height: 422px; - width: 100%; -} -.tp-thumbs, -.tp-thumbs-container { - max-width: 1624px; -} -@media all and (min-width: 3840px) { /* 4K and above */ - .tp-thumbs { - min-height: 844px; - } - .tp-thumbs, - .tp-thumbs-container { - max-width: 3248px; - } -} -@media all and (min-width: 2080px) and (max-width: 3839px) { /* > FullHD, < 4K */ - .tp-thumbs { - min-height: 468px; - } - .tp-thumbs, - .tp-thumbs-container { - max-width: 1940px; - } -} -@media all and (min-width: 1801px) and (max-width: 2040px) { /* FullHD */ - .tp-thumbs { - min-height: 406px; - width: 86%; - left: 7%; - } -} -@media all and (min-width: 992px) and (max-width: 1800px) { /* custom */ - .tp-thumbs, - .tp-thumbs-container { - max-width: 80vw; - } -} -@media all and (max-width: 991px) { /* custom */ - .tp-thumbs, - .tp-thumbs-container { - max-width: 95vw; - } - .tp-thumbs { - height: 40vh; - max-height: 40vh; - min-height: initial; - } -} -@media all and (max-width: 575px) { - .tp-thumbs { - height: 0; - max-height: 0; - min-height: initial; - } - .tp-thumbs-container, - .tp-thumbs-row { - position: absolute; - width: 100%; - } -} - -.tp-thumbs div[class*="tp-thumb-"] { - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - -webkit-filter: drop-shadow(0px -5px 22px black); - filter: drop-shadow(0px -5px 22px black); - -webkit-filter: drop-shadow(0px -5px 22px rgba(0,0,0,0.3)); - filter: drop-shadow(0px -5px 22px rgba(0,0,0,0.3)); -} - -.tp-thumb-01 { - position: absolute; - left: 37.007%; - bottom: 0; - width: 25.986%; - padding-top: 24.138654%; - -webkit-transform-origin: center 105%; - -ms-transform-origin: center 105%; - transform-origin: center 105%; -} - -.tp-thumbs div[class*="tp-thumb-"]:not(.tp-thumb-01) { - opacity: 0; -} - -.tp-thumb-02, -.tp-thumb-03 { - position: absolute; - bottom: 0; - width: 22.475369%; - padding-top: 21.06%; -} - -.tp-thumb-02 { - left: 17.1798%; - -webkit-transform-origin: 180% 115%; - -ms-transform-origin: 180% 115%; - transform-origin: 180% 115%; -} - -.tp-thumb-03 { - left: 60.4064%; - -webkit-transform-origin: -80% 115%; - -ms-transform-origin: -80% 115%; - transform-origin: -80% 115%; -} - -.tp-thumb-04, -.tp-thumb-05 { - position: absolute; - bottom: 0; - width: 19.458128%; - padding-top: 19.15025%; -} - -.tp-thumb-04 { - left: 0; - -webkit-transform-origin: 400% 130%; - -ms-transform-origin: 400% 130%; - transform-origin: 400% 130%; -} - -.tp-thumb-05 { - right: 0; - -webkit-transform-origin: -300% 130%; - -ms-transform-origin: -300% 130%; - transform-origin: -300% 130%; -} - -@media all and (max-width: 930px) { /* custom */ - .tp-thumb-01 { - position: absolute; - left: 26%; - bottom: 0; - width: 48%; - padding-top: 44.8%; - -webkit-transform-origin: center 105%; - -ms-transform-origin: center 105%; - transform-origin: center 105%; - } - .tp-thumb-02, - .tp-thumb-03 { - position: absolute; - bottom: 0; - width: 33.7130535%; - padding-top: 31.59%; - } - .tp-thumb-02 { - left: 12%; - left: 0; - } - .tp-thumb-03 { - right: 12%; - left: 66.2869465%; - } - .tp-thumb-04, - .tp-thumb-05 { - display: none; - } -} - -/** - * Theme top features - */ - -@media all and (min-width: 768px) and (max-width: 991px) { /* md */ - .sk__features-section-v2-header h2.h2-super, - .sk__features-section-v2-header span.h2-super.sk__gradient-fancy-text-back { - font-size: 40px; - letter-spacing: -1.5px; - } -} -@media all and (min-width: 576px) and (max-width: 767px) { /* sm */ - .sk__features-section-v2-header h2.h2-super, - .sk__features-section-v2-header span.h2-super.sk__gradient-fancy-text-back { - font-size: 40px; - letter-spacing: -1.7px; - } -} - -.server-response { - padding-top: 10px; -} - -.sf-success-message { - color: #32eb9e; -} - -.simple-error-label { - font-size: 14px; - color: #e3a4bb; -} - -.sf-error-message { - color: #ff6371; -} \ No newline at end of file diff --git a/wwwroot/temp/style_2fd95e71.css b/wwwroot/temp/style_9e2e7e14.css similarity index 100% rename from wwwroot/temp/style_2fd95e71.css rename to wwwroot/temp/style_9e2e7e14.css diff --git a/wwwroot/temp/style_9ea4bd8c.css b/wwwroot/temp/style_9ea4bd8c.css deleted file mode 100644 index 78ca56c..0000000 --- a/wwwroot/temp/style_9ea4bd8c.css +++ /dev/null @@ -1,536 +0,0 @@ -/*@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap'); -@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,700,300');*/ - -/*search*/ - -li { - list-style: none; -} - -label { - color: #000; - /* display: none; */ -} - -.img-fluid { - max-height: 50vh; - width: auto; - -} - -.pop-img { - border-radius: 10px !important; - border-color: white; - border-width: 1px; - border-style: solid; -} - -.card-img-top { - max-height: 50vh; - width: auto; - border-radius: 5px; -} - -.btn { - background: rgba(255, 255, 255, 0.5); - border: 0; - color: #000000; - width: fit-content; - font-weight: bold; - transition: all 0.2s ease; - margin: 15px; -} - -.voicebutton { - border-radius: 50% !important; - padding: 10px !important; - width: 40px; - height:40px; -} - -.menubtn { - background: rgba(255, 255, 255, 0.5); - border: 0; - color: #000000; - /* width: 98%; */ - font-weight: bold; - border-radius: 20px; - height: 40px; - transition: all 0.2s ease; - padding: 10px; - margin: 10px; -} - - .btn:active { - background: rgba(255, 255, 255, 1); - } - - .btn:hover { - background: rgba(255, 255, 255, 0.8); - } - -img { - border-radius: 20px !important; -} - - -input.search_bar{ - border: none; - outline: none; - width: 75px; - border-radius: 55px; - margin: 0 auto; - font-size: 1.3em; - color: #0d2840; - padding: 15px 30px 15px 45px; - transition: all .3s cubic-bezier(0,0,.5,1.5); - box-shadow: 0 3px 10px -2px rgba(0,0,0,.1); - background: rgba(255, 255, 255, 0.3) url(https://i.imgur.com/seveWIw.png) no-repeat center center; -} - - input.search_bar:focus{ - width: 100%; - background-position: calc(100% - 35px) center - } - -/*Removes default x in search fields (webkit only i guess)*/ -input[type=search]::-webkit-search-cancel-button { - -webkit-appearance: none; -} -/*Changes the color of the placeholder*/ -::-webkit-input-placeholder { - color: #0d2840; - opacity: .5; -} - -:-moz-placeholder { - color: #0d2840; - opacity: .5; -} - -::-moz-placeholder { - color: #0d2840; - opacity: .5; -} - -:-ms-input-placeholder { - color: #0d2840; - opacity: .5; -} - -/*search*/ - -/*Search2*/ -.searchBox { - width: 60px; - background: rgba(255, 255, 255, 0.3); - height: 60px; - border-radius: 40px; - padding: 10px; - margin: 0 auto; - transition: 0.8s; -} - -.searchInput:active > .searchBox{ - width:100% -} -.searchInput:focus > .searchBox { - width: 100% -} - -.searchInput::placeholder { - color:#fff; -} - -.searchBox:hover { - width: 100%; -} - - .searchBox:hover > .searchInput { - width: calc(100% - 60px); - padding: 0 6px; - } - - .searchBox:hover > .searchButton { - background: white; - color: #2f3640; - } - -.searchButton { - color: white; - float: right; - width: 40px; - height: 40px; - border-radius: 50px; - background-color: #e493d0; - background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - background-repeat: no-repeat; - animation: 10s movement linear infinite; - display: flex; - justify-content: center; - align-items: center; -} - -.searchInput { - border: none; - background: none; - outline: none; - font-size: 1.3em !important; - color: #0d2840 !important; - float: left; - padding: 0; - color: white; - font-size: 16px; - transition: 0.4s; - line-height: 40px; - width: 0px; -} - -/*Search2*/ - - -.event { - border-radius: 20px !important; - background-color: rgba(255, 255, 255, 0.2) !important; - backdrop-filter: blur(20px); - border: 0; - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.07); - transition: all 0.15s ease; -} - -/*card design*/ -.card { - border-radius: 20px !important; - overflow: hidden; - background-color: rgba(255, 255, 255, 0.2) !important; - backdrop-filter: blur(20px); - border: 0; - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.07); - transition: all 0.15s ease; -} - - .card:hover { - box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1), 0 10px 8px rgba(0, 0, 0, 0.015); - } - -.card-body .card-title { - font-family: 'Lato', sans-serif; - font-weight: 700; - letter-spacing: 0.3px; - font-size: 24px; - color: #121212; -} - -.card-text { - font-family: 'Lato', sans-serif; - font-weight: 400; - font-size: 15px; - letter-spacing: 0.3px; - color: #4E4E4E; -} - -.card .container { - width: 88%; - /*background: #F0EEF8;*/ - border-radius: 30px; - /*height: 140px;*/ - display: flex; - align-items: center; - justify-content: center; -} - -.container:hover > img { - transform: scale(1.2); -} - -.container img { - /*padding: 75px;*/ - /*margin-top: -40px; - margin-bottom: -40px;*/ - transition: 0.4s ease; - cursor: pointer; -} - -.btn:hover { - background-color: #e493d0; - background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - background-repeat: no-repeat; - animation: 10s movement linear infinite; -} - -.btn:focus { - background-color: #e493d0; - background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - background-repeat: no-repeat; - animation: 10s movement linear infinite; -} -/*card design*/ - -/*bg*/ - - -:root { - font-size: 15px; -} - -body { - /*font-family: 'Comfortaa', 'Arial Narrow', Arial, sans-serif;*/ - /*font-family: 'Quicksand', sans-serif;*/ - color: #fff !important; - margin: 0; - min-height: 100vh; - background-color: #000; - /*background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)), radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0));*/ - /*background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;*/ - /*background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;*/ - background-repeat: no-repeat; - /*animation: 10s movement linear infinite;*/ -} - - body::after { - content: ''; - display: block; - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - } - -.myspan { - position: relative; - z-index: 10; - display: flex; - min-height: 100vh; - width: 100%; - justify-content: center; - align-items: center; - font-size: 5rem; - color: transparent; - text-shadow: 0px 0px 1px rgba(255, 255, 255, .6), 0px 4px 4px rgba(0, 0, 0, .05); - letter-spacing: .2rem; -} - -@keyframes movement { - 0%, 100% { - background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; - background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; - } - - 25% { - background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 60vmax 60vmax; - background-position: -60vmax -90vmax, 50vmax -40vmax, 0vmax -20vmax, -40vmax -20vmax, 40vmax 60vmax; - } - - 50% { - background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax, 60vmax 60vmax, 80vmax 80vmax; - background-position: -50vmax -70vmax, 40vmax -30vmax, 10vmax 0vmax, 20vmax 10vmax, 30vmax 70vmax; - } - - 75% { - background-size: 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 70vmax 70vmax; - background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0vmax, -10vmax 10vmax, 40vmax 60vmax; - } -} - - -/*bg*/ - -.mytextarea { - background-color: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(20px); - padding: 10px; - border-radius: 10px; - border-width: 0px; - height: unset !important; -} - - .mytextarea:active { - border-width: 0px; - } - - .mytextarea:focus-visible { - background-color: rgba(255, 255, 255, 0.5); - border-width: 0px !important; - outline: -webkit-focus-ring-color auto 0px; - outline-color: transparent; - } - -.navbar-toggler { - color: #fff; -} - -.navbar-brand { - font-size: 1.7rem; - color:#fff; -} - -.form-select { - background-color: rgba(255, 255, 255, 0.2); - border-radius: 5px; - display: unset !important; - color: #fff; -} - - .form-select > option { - background-color: rgba(255, 255, 255, 0.2) - } - -.contactform-overlay { - position: fixed; - z-index: 100; - height: 100vh; - width: 100%; - padding: 100px; - top: 0px; - left: 0px; - /* padding-top: 10vh; */ - backdrop-filter: blur(20px); - /* background-color: rgba(1, 1, 1, .4); */ -} - -.form-control { - background-color: rgba(255,255,255,0.4); - border-radius: 5px; - height: 50px; -} -.form-control::placeholder { - color:#fff; -} - -.contactform-close-overlay { - position: relative; - height: 10vh; -} - -.contactform-popup-content { - height: 80vh; - margin: 0px; - padding: 0px; -} - -.contactform-popup-close { - position: relative; - height: 10vh; - z-index: 80; -} - -.calendly-overlay { - position: absolute; - z-index: 100; - height: 100vh; - width: 100%; - top: 0px; - /* padding-top: 10vh; */ - backdrop-filter: blur(20px); - /* background-color: rgba(1, 1, 1, .4); */ -} - -.calendly-close-overlay { - position: relative; - height: 10vh; -} - -.calendly-popup-content { - height: 80vh; - margin: 0px; - padding: 0px; -} - -.calendly-popup-close { - position: relative; - height: 10vh; - z-index: 80; -} - -#myVideo { - position: fixed; - right: 0; - bottom: 0; - min-width: 100%; - min-height: 100%; - opacity: 0.2; -} - -.table { - color: #fff !important; - padding-top: 10px; - padding-bottom: 10px; - background-color: transparent; -} - -.navbar-collapse { - height: 100vh; - /*display: flex; - align-items: center; - justify-content: center;*/ - text-align: center !important; - align-content: center; -} - -.navbar-collapse .nav-link { - font-size: 1.5em; - letter-spacing: 2px; -} - -.navbar-collapse .nav-item:not(:last-child) { - border-bottom: 0px solid white; - padding: 0.2em 4em; -} - -.navbar { - background-color: #040206; - color: #fff; -} - -.nav-link { - color: #fff !important; -} - -.content { - top: 60px; -} - -.row { - margin-bottom: 10px; -} - -h1 { - color: #64CCC5; -} - -p { - color: #EEEEEE; - font-size: 1,1rem; -} -.container-fluid { - margin-bottom:20px; - padding: 20px; -} - -/* 🔽 Mobile Responsiveness */ -@media (max-width: 768px) { - h1 { font-size: 2rem; } - h2 { font-size: 1.6rem; } - h3 { font-size: 1.4rem; } - p, li { font-size: 1rem; } - .navbar-collapse .nav-link { font-size: 1.1rem; } - p {text-align: justify;} -} - -@media (max-width: 480px) { - h1 { font-size: 1.6rem; } - h2 { font-size: 1.3rem; } - h3 { font-size: 1.1rem; } - p, li { font-size: 0.95rem; } - .navbar-collapse .nav-link { font-size: 1rem; } - p {text-align: justify;} -} \ No newline at end of file diff --git a/wwwroot/temp/style_a5faf300.css b/wwwroot/temp/style_a5faf300.css deleted file mode 100644 index 90e14ab..0000000 --- a/wwwroot/temp/style_a5faf300.css +++ /dev/null @@ -1,168 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); - -.card { - background-color: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(2px); -} - -.table { - color: #f2d8bb !important; -} - -.navbar-collapse { - height: 100vh; - text-align: center !important; - align-content: center; -} - -.navbar-collapse .nav-link { - font-size: 1.2rem; - letter-spacing: 2px; -} - -.navbar-collapse .nav-item:not(:last-child) { - padding: 0.2em 1em; -} - -.navbar { - background-color: #022c28; - color: #d0eae9; -} - -.nav-link { - color: #d0eae9 !important; -} - -.content { - top: 60px; -} - -body { - background-color: #022c28; - background-attachment: fixed; - background-position: center; - background-size: cover; - color: aqua; - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 300; - font-style: normal; - font-size: 1rem; /* Base size */ -} - -h1 { - font-weight: 700; - font-size: 2.5rem; - padding-top: 30px; - padding-bottom: 10px; -} - -h2 { - font-weight: 500; - font-size: 2rem; - padding-top: 15px; - padding-bottom: 10px; -} - -h3 { - font-weight: 400; - font-size: 1.6rem; - padding-top: 10px; - padding-bottom: 10px; -} - -p { - color: #fff; - font-size: 1.1rem; -} - -li { - color: #fff; - font-size: 1rem; - text-align: center; -} - -.btn-primary { - color: #d0eae9; - background-color: #014d4e; - border: 0px; - margin: 5px; -} - -.btn-primary:hover { - color: #fff; - background-color: #086262; - border: 0px; -} - -.row { - padding-bottom: 30px; - margin: 0 auto !important; -} - -.searchInput::placeholder { - color: #d0eae9; -} - -#myVideo { - position: fixed; - right: 0; - top: -100px; - min-width: 100%; - min-height: 100%; - transform: translateX(calc((100% - 100vw) / 2)); -} - -.img-fluid { - max-height: 50vh; - width: auto; - border-radius: 15px; -} - -.sp-img { - box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); --webkit-box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); --moz-box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); -} - -.col { - align-items: center; - display: flex; -} - -.form-select { - background-color: rgba(255, 255, 255, 0.2); - border-radius: 5px; - display: unset !important; - color: #fff; -} - -.list-group-item, -.bg-light { - background-color: rgb(11 24 23 / 76%) !important; - backdrop-filter: blur(8px) !important; -} - -.text-primary { - --bs-text-opacity: 1; - color: aqua; -} - -/* 🔽 Mobile Responsiveness */ -@media (max-width: 768px) { - h1 { font-size: 2rem; } - h2 { font-size: 1.6rem; } - h3 { font-size: 1.4rem; } - p, li { font-size: 1rem; } - .navbar-collapse .nav-link { font-size: 1.1rem; } - p {text-align: justify;} -} - -@media (max-width: 480px) { - h1 { font-size: 1.6rem; } - h2 { font-size: 1.3rem; } - h3 { font-size: 1.1rem; } - p, li { font-size: 0.95rem; } - .navbar-collapse .nav-link { font-size: 1rem; } - p {text-align: justify;} -} \ No newline at end of file diff --git a/wwwroot/temp/style_3845bc26.css b/wwwroot/temp/style_dfe8681d.css similarity index 100% rename from wwwroot/temp/style_3845bc26.css rename to wwwroot/temp/style_dfe8681d.css diff --git a/wwwroot/temp/style_e0642a6c.css b/wwwroot/temp/style_e0642a6c.css deleted file mode 100644 index 90e14ab..0000000 --- a/wwwroot/temp/style_e0642a6c.css +++ /dev/null @@ -1,168 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); - -.card { - background-color: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(2px); -} - -.table { - color: #f2d8bb !important; -} - -.navbar-collapse { - height: 100vh; - text-align: center !important; - align-content: center; -} - -.navbar-collapse .nav-link { - font-size: 1.2rem; - letter-spacing: 2px; -} - -.navbar-collapse .nav-item:not(:last-child) { - padding: 0.2em 1em; -} - -.navbar { - background-color: #022c28; - color: #d0eae9; -} - -.nav-link { - color: #d0eae9 !important; -} - -.content { - top: 60px; -} - -body { - background-color: #022c28; - background-attachment: fixed; - background-position: center; - background-size: cover; - color: aqua; - font-family: "Montserrat", sans-serif; - font-optical-sizing: auto; - font-weight: 300; - font-style: normal; - font-size: 1rem; /* Base size */ -} - -h1 { - font-weight: 700; - font-size: 2.5rem; - padding-top: 30px; - padding-bottom: 10px; -} - -h2 { - font-weight: 500; - font-size: 2rem; - padding-top: 15px; - padding-bottom: 10px; -} - -h3 { - font-weight: 400; - font-size: 1.6rem; - padding-top: 10px; - padding-bottom: 10px; -} - -p { - color: #fff; - font-size: 1.1rem; -} - -li { - color: #fff; - font-size: 1rem; - text-align: center; -} - -.btn-primary { - color: #d0eae9; - background-color: #014d4e; - border: 0px; - margin: 5px; -} - -.btn-primary:hover { - color: #fff; - background-color: #086262; - border: 0px; -} - -.row { - padding-bottom: 30px; - margin: 0 auto !important; -} - -.searchInput::placeholder { - color: #d0eae9; -} - -#myVideo { - position: fixed; - right: 0; - top: -100px; - min-width: 100%; - min-height: 100%; - transform: translateX(calc((100% - 100vw) / 2)); -} - -.img-fluid { - max-height: 50vh; - width: auto; - border-radius: 15px; -} - -.sp-img { - box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); --webkit-box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); --moz-box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75); -} - -.col { - align-items: center; - display: flex; -} - -.form-select { - background-color: rgba(255, 255, 255, 0.2); - border-radius: 5px; - display: unset !important; - color: #fff; -} - -.list-group-item, -.bg-light { - background-color: rgb(11 24 23 / 76%) !important; - backdrop-filter: blur(8px) !important; -} - -.text-primary { - --bs-text-opacity: 1; - color: aqua; -} - -/* 🔽 Mobile Responsiveness */ -@media (max-width: 768px) { - h1 { font-size: 2rem; } - h2 { font-size: 1.6rem; } - h3 { font-size: 1.4rem; } - p, li { font-size: 1rem; } - .navbar-collapse .nav-link { font-size: 1.1rem; } - p {text-align: justify;} -} - -@media (max-width: 480px) { - h1 { font-size: 1.6rem; } - h2 { font-size: 1.3rem; } - h3 { font-size: 1.1rem; } - p, li { font-size: 0.95rem; } - .navbar-collapse .nav-link { font-size: 1rem; } - p {text-align: justify;} -} \ No newline at end of file diff --git a/wwwroot/uploads/0988758e-e16c-4c2c-8c1e-efa3ac5f0274/images/Képernyőkép 2025-06-10 231302.png b/wwwroot/uploads/0988758e-e16c-4c2c-8c1e-efa3ac5f0274/images/Képernyőkép 2025-06-10 231302.png new file mode 100644 index 0000000..167b513 Binary files /dev/null and b/wwwroot/uploads/0988758e-e16c-4c2c-8c1e-efa3ac5f0274/images/Képernyőkép 2025-06-10 231302.png differ diff --git a/wwwroot/uploads/0988758e-e16c-4c2c-8c1e-efa3ac5f0274/images/munkaero.jpg b/wwwroot/uploads/0988758e-e16c-4c2c-8c1e-efa3ac5f0274/images/munkaero.jpg new file mode 100644 index 0000000..577e054 Binary files /dev/null and b/wwwroot/uploads/0988758e-e16c-4c2c-8c1e-efa3ac5f0274/images/munkaero.jpg differ